/* Interaction kit: the paged dialogue box, the 2×2 command menu, in-stage windows, and the lantern wipe. */

/* Dialogue: the frame fills the 472×136 region. The speaker, Hear and Help tabs straddle its top edge and
   ▼ More straddles its bottom edge, reaching about 18px outside the region. */
.dlg { position: relative; width: 472px; height: 136px; max-width: 100%; outline: none; }
.dlg__frame { height: 100%; padding: 10px 14px 8px; }
.dlg__text { height: 100%; overflow: hidden; font-family: var(--font-read); font-size: var(--text-body); line-height: 1.25; overflow-wrap: anywhere; cursor: pointer; }
.dlg__measure { position: absolute; inset: 10px 14px 8px; height: auto; visibility: hidden; pointer-events: none; }
.large-text .dlg__text { line-height: 1.18; }
.dlg__speaker, .dlg__tabs, .dlg__more { position: absolute; z-index: 1; }
.dlg__speaker, .dlg__tabs { top: -18px; }
.dlg__speaker { left: 14px; --chip: var(--lantern); font-size: var(--text-name); min-height: 24px; padding: 0 10px; }
.dlg__tabs { right: 12px; display: flex; gap: 8px; }
.dlg__tab, .dlg__more { min-height: 24px; padding: 0 8px; }
.dlg__tab .icon { width: 18px; height: 18px; }
.dlg__tab:hover, .dlg__more:hover { --chip: var(--white); }
.dlg__more { right: 14px; bottom: -18px; --chip: var(--lantern); }
.dlg__arrow::before { content: '▼'; font-size: 12px; display: inline-block; animation: dlg-bob 900ms steps(2) infinite; }
@keyframes dlg-bob { 50% { transform: translateY(3px); } }

/* Command menu: 440×136, four cells of about 204×52. */
.cmd-frame { width: 440px; height: 136px; max-width: 100%; padding: 8px 8px 8px 12px; }
.cmd-menu { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px 12px; height: 100%; outline: none; }
.cmd-slot { position: relative; min-width: 0; min-height: 0; justify-content: flex-start; gap: 6px; padding: 2px 6px 2px 8px; font-family: var(--font-read); font-size: var(--text-command); white-space: nowrap; }
.cmd-slot__cursor { position: absolute; left: -11px; z-index: 1; top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 1; }
.cmd-slot[data-cursor="true"] .cmd-slot__cursor::before { content: '▶'; }
.cmd-slot--empty { visibility: hidden; pointer-events: none; }
.cmd-slot__pic { display: inline-flex; flex: none; align-items: center; }
.cmd-slot__pic .icon { width: 22px; height: 22px; }
/* Picture commands (Sora's reading words) pass art with no intrinsic size. */
.cmd-slot__pic svg { display: block; width: 32px; height: 32px; flex: none; }
.cmd-slot__label { min-width: 0; overflow: hidden; text-overflow: clip; }
/* Each cell is about 204×56. A label over 9 characters (data-long) steps the font down one size
   (26 → 22px with Bigger words) so a 12-character word and its picture share the cell, and may wrap
   to two 22px lines (48px plus padding fits the 56px cell) rather than clip. The picture is never
   dropped: every choice keeps color, icon and word. */
.large-text .cmd-slot[data-long] { font-size: calc(var(--text-command) - 4px); white-space: normal; line-height: 1.1; text-align: left; }
.large-text .cmd-slot { gap: 4px; padding-right: 4px; letter-spacing: -.3px; }
.large-text .cmd-slot__pic .icon { width: 20px; height: 20px; }
.large-text .cmd-slot__pic svg { width: 28px; height: 28px; }
.cmd-slot[aria-pressed="true"] { --fill: var(--lantern); --light: #ffe08f; --shade: #e0a92f; }
.cmd-slot.px-button--finish[aria-pressed="true"] { --fill: var(--finish); }
.cmd-slot:active:not(:disabled) { transform: translateY(2px); }

/* Windows: a dimmed stage and one centered pixel window. */
/* One fixed-size cell, so a window's max-height: 100% means the stage and never grows past it. */
.win-backdrop { position: absolute; inset: 0; z-index: 50; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 24px; background: rgba(31, 33, 71, .55); }
.win { display: flex; flex-direction: column; gap: 10px; width: min(640px, 100%); max-height: 100%; outline: none; }
.win__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.win__title { font-family: var(--font-pixel); font-size: var(--text-name); font-weight: 700; }
.win__body { min-height: 0; overflow: auto; font-size: var(--text-body); line-height: 1.35; }

/* Lantern wipe: ten festival bars drop over the stage and fall away; calm motion gets a plain fade. */
.wipe { position: absolute; inset: 0; z-index: 90; display: flex; pointer-events: auto; }
.wipe__bar { flex: 1; transform: translateY(-100%); background: var(--lantern); border-bottom: 8px solid var(--vermilion); }
.wipe__bar:nth-child(even) { background: var(--vermilion); border-bottom-color: var(--lantern); }
.wipe--fade { background: var(--letterbox); opacity: 0; }