:root{color-scheme:dark;--bg:#11121e;--surface:#1b1c2a;--muted:#a4a5b6;--accent:#bba8ff;--mint:#a7efc3;--line:#ffffff12;font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;color:#f6f5fb;background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 80% 0,#55457326,transparent 60%)}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;border-radius:14px;padding:14px 16px;background:#ffffff09;color:inherit;font-weight:600;transition:background .16s,transform .16s}button:hover:not(:disabled){background:#ffffff17}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:4px}input{display:block;width:100%;min-width:0;margin-top:8px;padding:13px 14px;border:1px solid #ffffff25;border-radius:12px;color:inherit;background:#11121e}label{display:block;font-size:.9rem}p{line-height:1.55}h1,h2,p{margin-top:0}[hidden]{display:none!important}.shell{max-width:1250px;margin:auto;padding:0 48px}.masthead{display:flex;align-items:center;gap:20px;padding:34px 0;border-bottom:1px solid var(--line)}.brand{color:inherit;text-decoration:none;font-weight:800;font-size:1.6rem;letter-spacing:-.04em;white-space:nowrap}.spark{color:var(--accent);margin-right:9px;font-size:2rem;vertical-align:middle}.edition{margin-left:auto;font-size:.75rem;letter-spacing:.17em;color:var(--muted)}#exit{margin-left:auto}main{padding:50px 0}.setup-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:70px;align-items:start}.intro{padding-top:22px}.eyebrow{color:var(--accent);letter-spacing:.17em;font-size:.75rem;font-weight:650;margin-bottom:28px}h1{font-size:clamp(2.6rem,5vw,4.5rem);line-height:1.08;letter-spacing:-.06em;margin-bottom:24px}h1 span{color:var(--accent)}.lead{color:var(--muted);font-size:1.08rem;max-width:370px}.trio{display:flex;gap:14px;margin:44px 0 35px}.trio>div{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:18px;background:#ffffff06;border:1px solid var(--line);border-radius:25px;padding:29px 10px}.trio>div:first-child{transform:rotate(-6deg)}.trio>div:nth-child(2){background:#bba8ff20;transform:translateY(-10px);border-color:#bba8ff30}.trio>div:last-child{transform:rotate(6deg)}.trio>div>span{font-size:3.5rem}.trio b{font-size:.85rem}.intro-bottom{display:flex;gap:16px;align-items:center;margin-top:40px}.intro-bottom p{margin:0;font-size:.9rem;color:var(--muted)}.intro-bottom strong{color:#f6f5fb;font-weight:600}.mini-icon{border:1px solid var(--line);border-radius:50%;font-size:1.5rem;width:45px;height:45px;text-align:center;line-height:43px;color:var(--mint)}.panel{background:linear-gradient(140deg,#ffffff06,#ffffff03);border:1px solid var(--line);border-radius:26px;padding:28px}.settings{display:flex;flex-direction:column;gap:25px}fieldset{padding:0;margin:0;border:0;min-width:0}legend{font-weight:650;margin-bottom:15px;font-size:1rem}legend>span:first-child{font-size:.75rem;color:var(--accent);margin-right:9px;font-family:monospace}.segmented,.targets,.modes{display:flex;gap:8px}.segmented button,.targets button,.modes button{flex:1;min-width:0}.modes button{display:flex;flex-direction:column;gap:8px;align-items:center;font-size:.85rem;padding:17px 7px}.modes svg{width:23px;height:23px}.modes button[aria-pressed=true],.targets button[aria-pressed=true]{background:var(--accent);color:var(--bg)}.segmented button[aria-pressed=true]{background:#bba8ff24;color:var(--accent);box-shadow:inset 0 0 0 1px #bba8ff55}.help{color:var(--muted);font-size:.85rem;margin:12px 0 0;line-height:1.55}.primary{display:flex;justify-content:center;align-items:center;gap:14px;background:var(--accent);color:var(--bg);padding:17px 19px;font-weight:750;min-height:54px}.primary:hover:not(:disabled){background:#ccbdff}.primary>span:last-child:not([data-i18n]){margin-left:auto}.quiet{color:var(--accent);background:transparent}.error{border:1px solid #eaaa7540;background:#eaaa7510;border-radius:14px;padding:14px;color:#ffd0aa;font-size:.9rem;margin-bottom:0;overflow-wrap:anywhere}#room-controls{border-top:1px solid var(--line);padding-top:22px}#room-controls>label{margin-bottom:15px}.room-actions{display:flex;gap:10px;margin-top:12px}.room-actions>input{margin:0;text-transform:uppercase;letter-spacing:.12em}.room-actions>button{flex-shrink:0}.room-code{font:800 2.35rem ui-monospace,monospace;letter-spacing:.16em;margin:10px 0;color:var(--accent)}.connected{color:var(--mint);overflow-wrap:anywhere}.share-actions{display:flex;gap:6px;flex-wrap:wrap}.share-actions button{font-size:.85rem;padding:10px}.match-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:32px}.match-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:20px;letter-spacing:.1em;font-size:.8rem;color:var(--accent);font-weight:600}.match-meta span:last-child{color:var(--muted)}.scoreboard{display:flex;align-items:center;background:#ffffff06;border:1px solid var(--line);border-radius:26px;padding:24px;margin-bottom:24px}.score-player{flex:1;min-width:0;text-align:center}.score-player .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:.9rem}.score-player strong{display:block;color:var(--accent);font-size:4.5rem;line-height:1.3;letter-spacing:-.04em}.score-player:last-child strong{color:var(--mint)}.colon{color:var(--muted);font-size:2.5rem;padding:0 18px}.track{height:5px;background:#ffffff10;border-radius:6px;overflow:hidden;margin:8px 10px}.bar{height:100%;background:var(--accent);width:0}.score-player:last-child .bar{background:var(--mint)}.arena h2{font-size:1.5rem;letter-spacing:-.025em}.choice-area{margin-top:22px;text-align:center}.move-buttons{display:flex;gap:12px}.move-buttons button{flex:1;min-width:0;padding:24px 8px;display:flex;flex-direction:column;gap:13px;align-items:center;border:1px solid var(--line);border-radius:23px}.move-buttons span{font-size:3.3rem}.move-buttons b{font-size:.9rem}.result-panel{border-radius:26px;padding:28px;background:#bba8ff12;border:1px solid #bba8ff1c;text-align:center}.reveal{display:flex;align-items:center;gap:20px;margin:22px 0}.reveal>div{flex:1}.reveal span{font-size:3.8rem;display:block;margin-bottom:8px}.reveal b{display:block;font-size:1rem}.reveal small{color:var(--muted);font-size:.85rem}.vs{color:var(--muted);font-size:.85rem}.result-panel .primary{width:100%;margin-top:20px}.result-panel .quiet{margin-top:8px}.waiting{padding:35px;text-align:center;border:1px solid var(--line);border-radius:24px}.waiting .lock{font-size:2.4rem;color:var(--accent)}.history{align-self:start;max-height:75vh;overflow:auto;scrollbar-width:thin}.history h2{font-size:1.1rem;margin-bottom:22px}.history-section+.history-section{border-top:1px solid var(--line);margin-top:25px;padding-top:22px}.history-section h3{font-size:1rem;margin:0 0 8px}.winner{color:var(--mint);font-size:.9rem;font-weight:600;margin:8px 0}.history-section .help{margin:5px 0 12px}table{border-collapse:collapse;width:100%;font-size:.85rem}th{text-align:left;color:var(--muted);font-weight:500;font-size:.8rem;padding:8px 3px}td{padding:11px 3px;border-bottom:1px solid var(--line)}th:last-child,td:last-child{text-align:right}td:nth-child(2),td:nth-child(3){font-size:1.3rem}.win{color:var(--mint)}.loss{color:#efb183}.draw{color:var(--muted)}.media-icon{color:var(--accent);font-size:3rem;padding:20px}.media-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.camera{width:100%;max-height:300px;border-radius:20px;background:#080912;transform:scaleX(-1);object-fit:cover}.recognized{font-weight:600;color:var(--accent);margin:15px 0;min-height:24px}.camera-error{color:#ffc89a}footer{padding:25px 0 32px;border-top:1px solid var(--line);display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:20px;color:var(--muted);font-size:.8rem}footer i{width:3px;height:3px;border-radius:50%;background:var(--muted)}dialog{max-width:440px;border:1px solid #ffffff25;border-radius:24px;padding:28px;background:var(--surface);color:inherit}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}dialog h2{font-size:1.3rem}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap}dialog p{color:var(--muted)}@media(max-width:960px){.shell{padding:0 28px}.setup-grid{gap:30px;grid-template-columns:1fr 1fr}.trio{gap:8px}.trio>div>span{font-size:2.7rem}.match-grid{grid-template-columns:1fr 1fr;gap:20px}.panel{padding:22px}}@media(max-width:720px){.shell{padding:0 20px}.masthead{padding:22px 0}.brand{font-size:1.35rem}.edition{font-size:.65rem;letter-spacing:.05em}main{padding:30px 0}.setup-grid,.match-grid{grid-template-columns:1fr;gap:30px}.intro{padding-top:0}.intro h1{font-size:2.9rem}.intro .lead{max-width:100%;font-size:1rem}.eyebrow{margin-bottom:18px}.trio{margin:30px 0 20px}.trio>div{padding:20px 10px}.intro-bottom{display:none}.settings{padding:22px}.history{max-height:none}.match-meta{font-size:.75rem;letter-spacing:.04em}.score-player strong{font-size:3.8rem}footer{gap:10px;font-size:.75rem}#exit{font-size:.8rem;padding:10px}.move-buttons span{font-size:2.9rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
progress.track{display:block;width:calc(100% - 20px);appearance:none;border:0;color:var(--accent)}progress.track::-webkit-progress-bar{background:#ffffff10;border-radius:6px}progress.track::-webkit-progress-value{background:var(--accent);border-radius:6px}progress.track::-moz-progress-bar{background:var(--accent);border-radius:6px}.score-player:last-child progress.track::-webkit-progress-value{background:var(--mint)}.score-player:last-child progress.track::-moz-progress-bar{background:var(--mint)}

/* Language stays available during a match without taking space from the board. */
#language { color: var(--text, #f5f4ff); background: #232331; border: 1px solid #444052; border-radius: 12px; padding: 9px 10px; font: inherit; font-size: 13px; max-width: 130px; }
#language:focus-visible { outline: 2px solid #bba8ff; outline-offset: 3px; }
@media (max-width: 600px) { .masthead { flex-wrap: wrap; gap: 12px; } .masthead .edition { display: none; } #language { margin-left: auto; } }

/* Keep the custom target label centered and give its longer translations room. */
.targets button { display: flex; align-items: center; justify-content: center; text-align: center; }
.targets button[data-target="custom"] { flex: 0 0 auto; padding-inline: 10px; }

h1 > span:first-child { color: inherit; }

/* Keep the move controls above the running score. */
.arena > .scoreboard { margin-top: 16px; margin-bottom: 0; }

/* Feedback occupies the same reserved space as move entry, so the score never jumps. */
.turn-stage { position: relative; display: flow-root; }
.turn-base[inert] { visibility: hidden; pointer-events: none; }
.turn-feedback { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.turn-feedback > .result-panel, .turn-feedback > .waiting { min-height: 100%; }
.camera { display: block; height: 148px; max-height: 148px; }
html { scrollbar-gutter: stable; }

/* The image cards, camera, and match result share one slot height. */
.turn-stage { margin-top: 22px; }
.turn-stage .choice-area { margin-top: 0; }
.turn-stage .move-buttons button { height: 148px; }
.turn-stage.mode-image, .turn-stage.mode-visual, .turn-stage.match-ended { height: 320px; }
.turn-stage.mode-image .turn-base, .turn-stage.mode-image .choice-area,
.turn-stage.mode-visual .turn-base { height: 100%; }
.turn-stage.mode-image .choice-area { display: flex; flex-direction: column; }
.turn-stage.mode-image .choice-area > .help { margin: 0 0 12px; }
.turn-stage.mode-image .move-buttons { flex: 1; }
.turn-stage.mode-image .move-buttons button { height: 100%; justify-content: center; }
.turn-stage.mode-voice { height: 320px; }
.turn-stage.mode-voice .turn-base, .turn-stage.mode-voice .choice-area { height: 100%; }
.turn-stage.mode-voice .choice-area { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.turn-stage.mode-voice .media-icon { padding: 8px; }
.turn-stage.mode-voice .choice-area .help { max-width: 32rem; margin: 8px 0; }
.turn-stage.mode-visual .camera-panel { position: relative; height: 100%; overflow: hidden; border-radius: 26px; background: #080912; }
.turn-stage.mode-visual .camera { height: 100%; max-height: none; border-radius: 26px; }
.turn-stage.mode-visual .camera-panel .help { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 18px 16px 12px; color: #f6f5fb; background: linear-gradient(transparent, #080912 45%); }
.turn-stage .result-panel { padding: 10px 14px; }
.turn-stage .result-panel h2 { font-size: 1.1rem; margin: 0; }
.turn-stage .reveal { margin: 8px 0; gap: 12px; }
.turn-stage .reveal span { font-size: 3.75rem; margin-bottom: 2px; }
.turn-stage .result-panel .help { margin-top: 4px; }
.turn-stage:not(.match-ended) .turn-feedback > .result-panel { display: flex; flex-direction: column; justify-content: center; }

/* The finished result fills the same slot without moving the score. */
.turn-stage.match-ended .result-panel { height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: auto; padding: 32px 24px 24px; }
.turn-stage.match-ended .result-panel h2 { font-size: 1.5rem; line-height: 1.25; }
.turn-stage.match-ended .reveal { margin: 24px 0 28px; gap: 16px; }
.turn-stage.match-ended .reveal span { font-size: 4rem; margin-bottom: 8px; }
.match-end-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.match-end-actions .help, .match-end-actions .connected { flex-basis: 100%; margin: 0 0 4px; }
.match-end-actions .primary, .match-end-actions .quiet { width: auto; min-height: 44px; margin: 0; padding: 10px 16px; font-size: .9rem; }
.match-end-actions .quiet { background: #ffffff0d; }
@media (max-width: 380px) {
  .turn-stage.mode-image, .turn-stage.mode-voice, .turn-stage.mode-visual, .turn-stage.match-ended { height: 360px; }
  .turn-stage.match-ended .result-panel { padding: 28px 14px 20px; }
  .match-end-actions { gap: 8px; }
  .match-end-actions .primary, .match-end-actions .quiet { padding: 8px; font-size: .8rem; }
}
@media (max-width: 720px) {
  .turn-stage:not(.match-ended) .reveal span { font-size: 3.25rem; }
}

/* Slightly larger move symbols and labels, matching the choice and reveal views. */
.turn-stage.mode-image .move-buttons span { font-size: 3.75rem; }
.turn-stage.mode-image .move-buttons b,
.turn-stage:not(.match-ended) .reveal b { font-size: 1.0625rem; }
.turn-stage.match-ended .reveal b { font-size: 1.125rem; }
@media (max-width: 720px) {
  .turn-stage.mode-image .move-buttons span { font-size: 3.25rem; }
  .turn-stage.mode-image .move-buttons b,
  .turn-stage:not(.match-ended) .reveal b { font-size: 1rem; }
}

/* Account and leaderboard are available from setup and during a match. */
#rating-open,#account-open{white-space:nowrap;padding:10px 12px;font-size:.88rem}
#account-open{max-width:155px;overflow:hidden;text-overflow:ellipsis}
.rating-dialog,.account-dialog{width:min(680px,calc(100vw - 24px));max-height:min(85vh,780px);overflow:auto;background:#1b1c2a;color:#f6f5fb;border:1px solid #ffffff28;border-radius:24px;padding:24px;box-shadow:0 30px 90px #0009}
.account-dialog{width:min(440px,calc(100vw - 24px))}
.rating-dialog::backdrop,.account-dialog::backdrop{background:#050510b8}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.dialog-heading h2{margin:0}
.dialog-heading button{padding:7px 10px}
.rating-tabs{margin-bottom:18px}
.rating-tabs button{flex:1;padding:12px 8px}
.rating-tabs button[aria-pressed=true]{background:var(--accent);color:var(--bg)}
.rating-summary{color:var(--mint);font-weight:650;margin-bottom:14px}
.rating-locked{font-size:1.15rem;font-weight:700;line-height:1.45}
.rating-table-wrap{max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:14px}
.rating-table{width:100%;border-collapse:collapse;font-size:.9rem}
.rating-table th,.rating-table td{padding:11px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.rating-table th{position:sticky;top:0;background:#252638;color:var(--muted);font-size:.75rem}
.rating-table tr.self{background:#bba8ff24;font-weight:700}
.account-dialog label{margin-bottom:14px}
.account-dialog .primary{width:100%;margin:14px 0 4px}
.auth-options{display:grid;gap:8px;margin-top:14px}
.nick-options{display:grid;gap:8px;margin:18px 0}
.nick-options button[aria-pressed=true]{background:#bba8ff24;color:var(--accent);box-shadow:inset 0 0 0 1px #bba8ff55}
.profile-name{font-size:1.5rem;font-weight:800;margin-bottom:0}
.import-prompt{margin:20px 0;padding:16px;border:1px solid #bba8ff55;border-radius:14px;background:#bba8ff12}
.import-prompt p{margin-bottom:8px}
@media(max-width:600px){.masthead{gap:8px}.edition{display:none}#rating-open,#account-open{font-size:.76rem;padding:8px}#language{max-width:100px}.rating-dialog,.account-dialog{padding:18px}.rating-table{font-size:.8rem}}