/* Scoped to this card table; shared controls and hit-target geometry stay intact. */
body[data-game='memory'] {--accent:#304d68; --mini-bg:#e5ecee; --ink:#273e53; --paper:#fffcf6; background:#e7e9e7}
.mini-shell {gap:3px; min-height:0; background:linear-gradient(#fffcf6,#e9eeed); padding:1px 5px max(4px,env(safe-area-inset-bottom))}
/* Keep all information beside the portrait, outside the card targets. */
.companion {min-height:58px; gap:5px; padding:0; align-items:center}
.companion > img {width:44px; height:44px; flex:none}
.companion::before {width:38px; height:38px; left:3px; top:calc(50% - 19px)}
.companion-info {display:flex; flex-direction:column; gap:1px}
.cast-name {font-size:10px; line-height:12px; margin:0}
.companion .speech {font-size:12px; line-height:16px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow-wrap:anywhere}
.companion > .icon-button {width:44px; min-height:44px; flex:none}
.companion::before {background:#dee5e5; box-shadow:0 0 0 1px #bbac8c,inset 0 0 0 4px #fff8}
.cast-name {color:#526779}
.speech {border-color:#c6cec9; background:#fffdf8; border-radius:5px 15px 15px; box-shadow:0 2px 0 #344e6015}
.mini-hud {min-height:24px; padding:0; flex-wrap:wrap; row-gap:2px}
.mini-hud > span:first-child {background:#e8e4d8; color:#304d68; border:1px solid #cbbb9a; box-shadow:none}
.mini-hud .clock {color:#304d68; background:#fffaf4; border-color:#b4c1c5; min-width:84px}
.stage {border-radius:17px; box-shadow:0 0 0 1px #3d566b,0 4px 10px #19334820}
.stage::after {border-color:#fff8; box-shadow:inset 0 0 0 4px #fff2}
body[data-memory-turn='him'] .companion::before {background:#dce6eb; box-shadow:0 0 0 2px #637f94,inset 0 0 0 4px #fff8}
body[data-memory-turn='him'] .speech {border-color:#8da4b4; background:#edf3f5}
body[data-memory-turn='him'] .clock {background:#304d68; color:#fffcf6; border-color:#304d68}
.companion[data-reaction='good'] .speech {background:#edf3e9; border-color:#9baf95}
.overlay {background:linear-gradient(145deg,#fffdf8f5,#e9eff1f5); backdrop-filter:blur(3px)}
.panel-icon {background:linear-gradient(140deg,#fffdf8,#dce6eb); border-color:#c5b38d; box-shadow:4px 4px 0 #c6b28b33,0 8px 18px #26435b16; border-radius:18px}
.panel-detail {color:#526779}
.cast-options button {background:#e1e8e9; border-color:#fffcf6; border-radius:15px}
.cast-options button[aria-pressed='true'] {background:#e9eee9; border-color:#526e84; box-shadow:0 3px 0 #b09a8055,0 0 0 3px #e8dfcc}
.cast-options button[aria-pressed='true']::after {background:#304d68}
.go {background:linear-gradient(145deg,#476780,#263f57); box-shadow:0 4px 0 #172e42,0 8px 15px #253f5520; border-radius:20px}
.overlay[data-presentation='result'] {background:linear-gradient(110deg,#fffcf6,#e6eceb); border-color:#a4b4ba; box-shadow:inset 3px 0 0 #b89c69,0 3px 0 #425c6a1a}
.overlay[data-presentation='result'] h2 {color:#304d68}
.cast-toggle {border-color:#b4c1c5}
@media (max-width:350px) {
    .mini-shell {padding-left:5px; padding-right:5px}
    .cast-options {gap:5px}
    .cast-options button {width:44px}
}
@media (max-height:740px) {
    .panel-icon {border-radius:14px}
}
@media (prefers-reduced-motion:reduce) {
    .companion > img,.cast-options button,.go {animation:none; transition:none}
    .overlay {backdrop-filter:none}
}

/* Quiet, fixed state cues; the card targets never shift or scale. */
body[data-memory-turn='you'] .clock {border-color:#ab9164; box-shadow:inset 3px 0 #b99d6c}
body[data-memory-phase='second'] .clock {background:#f4ead4}
body[data-memory-phase='match'] .clock {background:#e2eddf; color:#304e3b; border-color:#8da688}
body[data-memory-phase='compare'] .clock {background:#f5e9e3; color:#634840; border-color:#b99a8d}
.hit-target:focus-visible {outline:3px solid #fff0bc; outline-offset:-4px; background:#fff1}
.hit-target:active:not(:disabled) {background:#fff1; box-shadow:inset 0 0 0 3px #f5dfa7}

/* Small stationery details belong to the start/pause panel, never the board. */
.panel-icon {position:relative; isolation:isolate}
.panel-icon::before,.panel-icon::after {content:''; position:absolute; z-index:-1; width:66%; height:83%; border:1px solid #ad966e; border-radius:9px; background:#f7efdf}
.panel-icon::before {transform:translateX(-10px) rotate(-13deg)}
.panel-icon::after {transform:translateX(10px) rotate(12deg); background:#294860}
.panel-icon img {filter:drop-shadow(0 2px 2px #233c5222)}
.overlay h2 {color:#29455d; letter-spacing:.015em}
.go {display:flex; align-items:center; justify-content:center; gap:10px; width:132px; height:53px; border-radius:16px; font-size:24px}
.go::after {content:attr(aria-label); font-size:13px; font-weight:700; letter-spacing:.04em}
.overlay[data-presentation='result'] .go::after {display:none}
.overlay[data-presentation='result'] .go {gap:0}
body[data-memory-result='win'] .overlay[data-presentation='result'] {border-color:#b39a68; background:linear-gradient(115deg,#fff7df,#f5f2e9); box-shadow:inset 3px 0 #b69a63}
body[data-memory-result='lose'] .overlay[data-presentation='result'] {background:#edf2f4}
body[data-memory-result='draw'] .overlay[data-presentation='result'] {background:#edf2eb}
.companion[data-reaction='good'] .speech {box-shadow:inset 3px 0 #819b75,0 2px 8px #52677912}
@media (max-height:740px) {.go {width:122px; height:48px; border-radius:15px}}

/* Keep secondary controls in the same navy/ivory palette, including focus. */
.icon-button {border-color:#b9c5c7; background:#fffcf6; color:#304d68; box-shadow:0 2px 0 #263f5712}
.cast-toggle {background:#e5ecee; color:#304d68}
.save-note {color:#634b43}
@media (prefers-reduced-motion:reduce) {
    .panel-icon,.panel-icon img {transform:none}
}

/* One short burst per success, layered over the felt without taking space. */
.memory-effects {position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; border-radius:inherit}
.memory-pair-glow {box-sizing:border-box; position:absolute; border:2px solid #f4dc9d; border-radius:11px; box-shadow:0 0 10px #edd69d99; animation:memory-pair .85s ease-out both}
.memory-confetti {position:absolute; width:5px; height:9px; border-radius:1px; background:var(--foil); animation:memory-confetti 1.1s var(--delay) ease-out both}
@keyframes memory-pair {from {opacity:1} to {opacity:0}}
@keyframes memory-confetti {from {opacity:0; transform:translateY(-8px) rotate(0)} 15% {opacity:.9} to {opacity:0; transform:translate(var(--drift),155px) rotate(210deg)}}

.memory-pair-still {animation:none; box-shadow:none}
@media (prefers-reduced-motion:reduce) {
    .memory-confetti {display:none}
    .memory-pair-glow {animation:none; box-shadow:none}
}

/* One compact information band; the expanded board has no duplicate seat labels. */
.mini-hud {gap:5px}
.mini-hud > span:first-child {padding:2px 4px; flex:none}
.mini-hud strong {font-size:12px; letter-spacing:0; white-space:nowrap}
.mini-hud .clock {min-width:0; padding:2px 4px; white-space:nowrap; font-size:11px}
.overlay:not([data-presentation='result']) .panel-detail {max-width:250px}