/* Meeting: sea-glass teal, pale stone and soft daylight. */
body[data-game='meeting'] {--ink:#304f50;--paper:#f8fcfb;--accent:#326f6c;--mini-bg:#e7f2ef;background:#e4efed}
.mini-shell {background:linear-gradient(180deg,#f8fcfb,#eaf3f0);gap:4px;min-height:0}
.companion {min-height:68px;gap:8px}
.companion > img {width:68px;height:68px}
.companion::before {background:linear-gradient(140deg,#f1f8f4,#cde4de);width:55px;height:55px;top:7px}
.cast-name {color:#486f6c}
.speech {border-color:#c8deda;border-radius:6px 17px 17px;background:#ffffffed;box-shadow:0 2px 0 #326d7009;color:#304f50}
.companion[data-reaction='good'] .speech {background:#e6f4ee;border-color:#6b9c8c}
.companion[data-reaction='good'] > img {animation:meeting-arrival .32s ease-out}
.companion[data-reaction='miss'] .speech {background:#fff4f4;border-color:#d6afb8;color:#6f4351}
@keyframes meeting-arrival {50% {transform:translateY(-3px)}}
/* Touch and time states use borders and text, without flashing. */
.mini-hud {min-height:44px}
.mini-hud > span:first-child {background:#dceee7;color:#2e6861}
.mini-hud .clock,.icon-button {border-color:#c3d8d3;background:#f8fdfb;color:#355f5e}
.mini-hud .clock {min-width:58px;font-size:14px;letter-spacing:.03em}
.mini-hud .icon-button {width:44px;min-height:44px}
.mini-hud .clock[data-urgency='low'] {color:#87384f;background:#fff0f2;border-color:#b77a8a;box-shadow:inset 3px 0 #a65366}
.icon-button:active,.cast-toggle:active {background:#dceee7}
/* 300px retains 44px target height even on the densest board. */
.stage {min-height:300px;border-radius:22px;box-shadow:0 0 0 1px #8cafaa70,0 4px 12px #326d7010}
.hit-target {border-radius:15px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.hit-target:active {background:#daefeb40;box-shadow:inset 0 0 0 3px #35766d}
.hit-target:focus-visible {outline:3px solid #285d5c;outline-offset:-3px;background:#e4f6f02b}
.hit-target[aria-pressed='true'] {box-shadow:inset 0 0 0 2px #ffffffb3}
/* Quiet arrival card; effects are tied to existing game events only. */
.overlay {background:linear-gradient(145deg,#f8fdfbf2,#edf7f2ed 65%,#dfefedf5);backdrop-filter:blur(3px)}
.panel-icon {transform:none;border-radius:24px;border-color:#fff;background:linear-gradient(135deg,#edf7f2,#cee7e1);box-shadow:0 3px 0 #326d700d,0 10px 22px #326d7010}
.panel-icon img {transform:none}
.overlay h2 {color:#305b59;letter-spacing:.02em;font-size:22px}
.panel-detail {color:#426660;line-height:1.7}
.cast-options button {background:#e0ece7;border-color:#fff}
.cast-options button[aria-pressed='true'] {background:#e1f1eb;border-color:#50887c;box-shadow:0 4px 0 #51817822,0 0 0 3px #fff}
.cast-options button[aria-pressed='true']::after {background:#367269}
.go {display:flex;align-items:center;justify-content:center;width:auto;min-width:128px;height:52px;padding:0 18px;border-radius:17px;font-size:16px;font-weight:700;letter-spacing:.03em;color:#fff;background:linear-gradient(145deg,#3c796f,#326c68);box-shadow:0 4px 0 #275754,0 9px 16px #326d7020;border-color:#edf8f480;white-space:nowrap}
.overlay[data-phase='paused'] {background:#f0f8f3ed}
.overlay[data-phase='paused'] .panel-icon {display:none}
.overlay[data-phase='paused'] h2 {margin-bottom:18px}
/* Two text lines, two actions: keep the finished board tall on narrow phones. */
.overlay[data-presentation='result'] {display:grid;grid-template-columns:minmax(0,1fr) 44px auto;align-items:center;gap:3px 8px;border-color:#aacdc4;border-top:2px solid #83aa9c;background:linear-gradient(120deg,#fafffb,#e1f0e9);box-shadow:0 3px 0 #326d7012}
.overlay[data-presentation='result'] h2 {grid-column:1;grid-row:1;min-width:0;font-size:21px;letter-spacing:0}
.overlay[data-presentation='result'] .panel-detail {grid-column:1;grid-row:2;color:#386b60;max-width:none;line-height:1.5}
.overlay[data-presentation='result'] .go {grid-column:3;grid-row:1 / span 2;width:auto;min-width:112px;height:44px;padding:0 10px;font-size:12px;border-radius:13px}
.cast-toggle {border-color:#b9d1c9;color:#386b60;background:#f1f9f4}
.overlay[data-presentation='result'] .cast-toggle {grid-column:2;grid-row:1 / span 2}
.overlay[data-presentation='result'] .cast-options {grid-column:1 / -1;grid-row:3}
.overlay[data-presentation='result'] .save-note {grid-column:1 / -1;grid-row:4}
@media(max-width:350px) {.mini-shell {padding-left:5px;padding-right:5px}.cast-options {gap:5px}}
@media(max-height:740px) {
    .companion {min-height:58px}.companion > img {width:58px;height:58px}.companion::before {width:47px;height:47px;top:6px}
    .go {height:48px;min-width:120px}.overlay h2 {font-size:20px}.panel-icon {border-radius:17px}
}
@media(prefers-reduced-motion:reduce) {
    .companion[data-reaction='good'] > img {animation:none}
    .cast-options button,.go {transition:none}
    .overlay {backdrop-filter:none}
}

/* One reference, its live speech and controls share the stage header. */
.stage {display:flex;flex-direction:column;min-height:359px}
.meeting-toolbar {flex:none;display:grid;grid-template-columns:50px minmax(0,1fr) 138px;align-items:center;gap:6px;padding:4px 6px;background:#f8fdfc;border-bottom:1px solid #bdd5d2}
.meeting-toolbar .companion {display:contents}
.meeting-toolbar .companion::before {display:none}
.meeting-toolbar .companion > img {grid-column:1;grid-row:1;align-self:center;justify-self:center;width:50px;height:50px}
.meeting-toolbar .companion > div {grid-column:2;grid-row:1;min-width:0;align-self:center}
.meeting-target-label {display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#486f6c}
.meeting-toolbar .cast-name {display:inline;font-size:10px;margin:0;letter-spacing:0}
.meeting-toolbar .speech {min-height:0;margin:2px 0 0;padding:0;border:0;background:transparent;box-shadow:none;font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meeting-toolbar .mini-hud {grid-column:3;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:22px 22px;gap:0 4px;padding:0;min-width:0;min-height:44px}
.meeting-toolbar .mini-hud > span:first-child {grid-column:1;grid-row:1;justify-content:center;padding:0 4px;gap:3px;font-size:11px;line-height:22px}
.meeting-toolbar .mini-hud strong {font-size:17px}
.meeting-time {grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:3px;min-width:0}
.meeting-toolbar .clock {margin:0;min-width:38px;padding:0 3px;font-size:12px;line-height:20px;letter-spacing:0}
.time-penalty {font-size:11px;font-weight:700;color:#87384f;white-space:nowrap}
.meeting-toolbar .icon-button {grid-column:2;grid-row:1 / 3;flex:none;width:44px;height:44px}
.meeting-board {position:relative;flex:1;min-height:300px;isolation:isolate}
.overlay[data-phase='ready'] .panel-icon {width:auto;height:auto;max-width:100%;padding:6px 10px;gap:8px;border-radius:18px}
.overlay[data-phase='ready'] .panel-icon img {width:66px;height:66px}
.overlay[data-phase='ready'] .panel-icon span {font-size:13px;font-weight:700;color:#355c5c}
.overlay[data-phase='ready'] .panel-detail {white-space:pre-line}
@media(max-height:620px) {.overlay[data-phase='ready'] .panel-icon {display:none}}