:root {
  --bg: #eef5f2; --surface: rgba(255,255,255,.86); --surface-strong: rgba(255,255,255,.96); --line: #d3e3dd; --line-strong: #b8d1c8;
  --ink: #173833; --muted: #62817a; --primary: #238769; --accent: #d2578a; --accent-2: #7c4bc4; --key: #ffe49a;
  --shadow: 0 14px 42px rgba(28, 60, 51, .12); --cell: 58px; --radius: 22px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; background: linear-gradient(180deg,#f6fbf9,#eef5f2); color:var(--ink); overflow:hidden; }
button, input, textarea, select { font: inherit; }
button { cursor:pointer; }
.app-shell { height:100vh; display:flex; flex-direction:column; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:12px 18px 12px 20px; background:rgba(255,255,255,.84); backdrop-filter:blur(18px); border-bottom:1px solid rgba(184,209,200,.75); z-index:20; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#1f8e75,#53c7a3); color:#fff; font-size:20px; box-shadow:0 10px 22px rgba(31,142,117,.24); }
.brand-name { font-size:20px; font-weight:900; letter-spacing:.04em; }
.brand-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.top-actions { display:flex; gap:8px; align-items:center; }
.btn, .icon-btn { border:1px solid var(--line-strong); background:#fff; color:var(--ink); border-radius:14px; height:42px; padding:0 14px; font-weight:800; box-shadow:0 6px 18px rgba(22,60,52,.05); transition:.18s ease; }
.btn:hover, .icon-btn:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(22,60,52,.08); }
.btn.primary { background:linear-gradient(135deg,#1f8e75,#32b18b); color:#fff; border-color:transparent; }
.btn.accent { background:linear-gradient(135deg,#ca5b83,#a94fdc); color:#fff; border-color:transparent; }
.btn.ghost { background:rgba(255,255,255,.82); }
.btn.small { height:36px; padding:0 12px; font-size:13px; }
.btn.large { height:48px; padding:0 18px; font-size:16px; }
.btn span { white-space:nowrap; }
.btn-wrong { background:#fff2f4; color:#bd5064; border-color:#f1c7cf; }
.btn-correct { background:#edf8f2; color:#1f8c67; border-color:#cde8db; }
.icon-btn { width:42px; padding:0; font-size:26px; line-height:1; }
.workspace { flex:1; min-height:0; display:grid; grid-template-columns:420px minmax(0,1fr); }
.editor { min-height:0; background:rgba(255,255,255,.82); border-right:1px solid rgba(184,209,200,.72); backdrop-filter:blur(18px); }
.editor-scroll { height:100%; overflow:auto; padding:18px 16px 28px; }
.sticky-head { position:sticky; top:-18px; z-index:2; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84)); padding-top:18px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-head h2 { margin:4px 0 0; font-size:23px; }
.eyebrow, .section-mini-title { font-size:11px; font-weight:900; letter-spacing:.16em; color:var(--primary); }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#eaf8f2; color:#1e7d63; font-size:12px; font-weight:900; }
.status-pill.dirty { background:#fff5da; color:#946d10; }
.control-section { background:rgba(255,255,255,.72); border:1px solid rgba(184,209,200,.66); border-radius:18px; padding:16px; box-shadow:0 8px 24px rgba(22,60,52,.04); margin-bottom:14px; }
.section-title-row, .section-head-inline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.muted-note { font-size:12px; color:var(--muted); margin-top:4px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.field.no-margin { margin-bottom:0; }
.field span { font-size:13px; font-weight:800; color:#25433d; }
.field input[type="text"], .field textarea, .field select, .field input[type="color"], .field input[type="file"] { width:100%; border:1px solid var(--line-strong); border-radius:14px; background:rgba(255,255,255,.96); color:var(--ink); padding:12px 14px; outline:none; transition:.16s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.field input[type="color"] { padding:7px; min-height:44px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:#43b18f; box-shadow:0 0 0 4px rgba(67,177,143,.14); }
.field textarea { resize:vertical; min-height:82px; }
.field-row { display:flex; gap:12px; align-items:flex-start; }
.field-row.two-col > * { flex:1; }
.grow { flex:1; }
.field-grid-compact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.range-field { display:flex; align-items:center; gap:10px; }
.range-field input[type="range"] { flex:1; }
.range-field strong { width:64px; text-align:right; color:var(--primary); font-size:13px; }
.keyword-info { border-radius:14px; padding:12px 14px; background:#f4fbf8; border:1px solid #dcefe8; color:#355d54; font-size:13px; line-height:1.5; }
.keyword-info.ok { background:#eaf8f2; border-color:#c6eadc; color:#1e7d63; }
.keyword-info.warn { background:#fff6df; border-color:#f2ddb5; color:#8a6420; }
.help-note { border-radius:14px; padding:12px 14px; background:linear-gradient(180deg,#f9fcfb,#f0f8f4); border:1px dashed #c9ddd5; font-size:12.5px; color:#496861; line-height:1.5; }
.help-note.slim { margin-top:4px; }
.preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.number-style-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.number-style-card { border:2px solid transparent; background:#fff; border-radius:16px; padding:8px; box-shadow:0 6px 16px rgba(22,60,52,.06); text-align:center; }
.number-style-card img { width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 6px; }
.number-style-card span { display:block; font-size:11px; font-weight:900; color:#284640; }
.number-style-card.active { border-color:#32b18b; box-shadow:0 0 0 4px rgba(50,177,139,.16); }

.preset-card { position:relative; height:88px; border-radius:16px; overflow:hidden; border:2px solid transparent; background-size:cover; background-position:center; box-shadow:0 6px 16px rgba(22,60,52,.06); }
.preset-card::after { content:attr(data-label); position:absolute; left:8px; right:8px; bottom:8px; padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.88); font-size:11px; font-weight:900; color:#234640; text-align:center; }
.preset-card.active { border-color:#32b18b; box-shadow:0 0 0 4px rgba(50,177,139,.16); }
.pairs { display:flex; flex-direction:column; gap:12px; }
.pair-card { border:1px solid rgba(184,209,200,.72); border-radius:18px; background:rgba(255,255,255,.95); padding:14px; box-shadow:0 6px 16px rgba(22,60,52,.04); }
.pair-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.pair-no { display:flex; align-items:center; gap:8px; font-weight:900; color:#1d473f; }
.pair-key-hint { width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:#fff0b8; color:#8b5d08; border:1px solid #e7cb73; }
.remove-pair { border:0; width:32px; height:32px; border-radius:10px; background:#fce8ea; color:#c24d61; font-size:22px; line-height:1; }
.pair-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.asset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.asset-name { display:block; margin-top:5px; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.small-select { padding-top:10px !important; padding-bottom:10px !important; }
.editor-actions, .file-actions { display:flex; gap:10px; margin-top:10px; }
.editor-actions .btn, .file-actions .btn { flex:1; }
.stage-wrap { min-width:0; min-height:0; padding:16px; display:flex; flex-direction:column; gap:10px; }
.stage-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; color:var(--muted); }
.stage-status { display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); }
.dot { width:8px; height:8px; border-radius:50%; background:#35b981; box-shadow:0 0 0 4px rgba(53,185,129,.16); }
.stage-hints { text-align:right; }
.stage { position:relative; overflow:hidden; flex:1; min-height:0; border-radius:28px; border:1px solid rgba(184,209,200,.7); background:linear-gradient(145deg,#f9fcfb,#fff); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.stage-bg, .board-background { position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:cover; opacity:0; pointer-events:none; transition:.22s ease; }
.stage-bg { z-index:0; }
.board-background { z-index:1; border-radius:28px; }
.stage::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.72; background:linear-gradient(140deg, rgba(110,186,163,.10) 0 18%, transparent 18% 68%, rgba(100,175,156,.08) 68% 82%, transparent 82%), radial-gradient(circle at 16% 78%, rgba(95,182,161,.10), transparent 27%), radial-gradient(circle at 82% 18%, rgba(231,132,174,.08), transparent 22%); }
body[data-theme="music"] .stage { background:linear-gradient(145deg,#fff,#f5f0ff); }
body[data-theme="music"] .stage::before { background:radial-gradient(circle at 18% 78%, rgba(109,79,196,.09), transparent 29%), radial-gradient(circle at 82% 30%, rgba(208,77,125,.08), transparent 26%), linear-gradient(135deg, rgba(109,79,196,.04), transparent 40%, rgba(208,77,125,.05)); }
body[data-theme="minimal"] .stage { background:#fff; }
body[data-theme="minimal"] .stage::before { opacity:.18; }
.decor { position:absolute; pointer-events:none; z-index:2; opacity:.75; }
.decor-a { left:18px; bottom:14px; width:120px; height:58px; border-radius:75% 25% 60% 40%; background:linear-gradient(140deg,#6cb870,#a9d889); transform:rotate(-8deg); }
.decor-a::after { content:"✿"; position:absolute; left:18px; bottom:10px; font-size:76px; color:#ef6f93; text-shadow:0 6px 12px rgba(109,18,51,.16); }
.decor-b { right:34px; top:18px; font-size:44px; color:#df7897; }
.decor-b::before { content:"✿"; }
.decor-c { right:30px; bottom:18px; font-size:42px; color:#e07b9d; }
.decor-c::before { content:"♩"; }
body[data-theme="music"] .decor-a::after { content:"♫"; color:#845be0; }
body[data-theme="music"] .decor-b::before { content:"♪"; }
body[data-theme="music"] .decor-c::before { content:"♬"; }
body[data-theme="minimal"] .decor { display:none; }
.stage-title { position:relative; z-index:3; text-align:center; font-family:Georgia, "Times New Roman", serif; color:var(--accent); font-weight:800; letter-spacing:.02em; font-size:clamp(30px, 3vw, 54px); padding:32px 28px 8px; text-shadow:0 2px 0 rgba(255,255,255,.95); }
body[data-theme="music"] .stage-title { color:#b04e86; }
body[data-theme="minimal"] .stage-title { color:#5b468d; }
.game-area { position:relative; z-index:3; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:10px 24px 120px; }
.board-panel { position:relative; width:min(100%, 1180px); height:min(100%,100%); min-height:320px; border-radius:28px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); }
.grid-viewport { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:auto; padding:4px; }
.board-canvas { position:relative; min-width:280px; min-height:280px; }
.crossword-grid { position:absolute; display:grid; gap:0; width:max-content; z-index:4; }
.cell { width:var(--cell); height:var(--cell); display:grid; place-items:center; position:relative; user-select:none; cursor:pointer; border:2px solid #232c2b; background:rgba(255,255,255,.96); font-size:calc(var(--cell) * .44); font-weight:900; color:#111; transition:.16s ease; margin-right:-2px; margin-bottom:-2px; }
.cell:hover { transform:translateY(-1px); background:#fffef5; box-shadow:0 7px 16px rgba(0,0,0,.10); z-index:2; }
.cell.key-cell { background:linear-gradient(180deg,#fff8d4,var(--key)); }
.cell.key-cell::after { content:""; position:absolute; inset:4px; border:1px solid rgba(211,151,14,.34); }
.cell.selected-row { background:#e9f6f0; box-shadow:inset 0 0 0 3px rgba(35,135,105,.18); }
.cell.revealed { background:#fff; }
.cell.keyword-only { background:linear-gradient(180deg,#fff5bf,#ffd965); }
.cell .letter { opacity:0; transform:translateY(6px) scale(.84); }
.cell.revealed .letter { opacity:1; transform:translateY(0) scale(1); animation:letterPop .34s cubic-bezier(.17,.89,.32,1.42) both; }
@keyframes letterPop { from { opacity:0; transform:translateY(8px) scale(.72); } to { opacity:1; transform:translateY(0) scale(1); } }
.keyword-star { position:absolute; z-index:6; border:0; background:transparent; color:#f44325; font-size:56px; line-height:.9; width:52px; height:52px; filter:drop-shadow(0 3px 0 #315283) drop-shadow(0 8px 12px rgba(0,0,0,.18)); transition:.18s ease; }
.keyword-star:hover { transform:translateY(-2px) scale(1.05) rotate(-3deg); }
.keyword-star.revealed { animation:starPulse 1.1s ease both; }
@keyframes starPulse { 0%{transform:scale(.82)} 40%{transform:scale(1.26) rotate(6deg)} 100%{transform:scale(1)} }
.row-badge-layer { position:absolute; inset:0; z-index:6; pointer-events:none; }
.row-badge { position:absolute; width:68px; height:68px; border:0; background:transparent; display:grid; place-items:center; box-shadow:none; pointer-events:auto; padding:0; }
.row-badge img { width:100%; height:100%; object-fit:contain; display:block; }
.row-badge .fallback-number { width:58px; height:40px; border-radius:999px; border:1px solid rgba(184,209,200,.9); background:rgba(255,255,255,.96); display:grid; place-items:center; color:var(--muted); font-weight:900; box-shadow:0 5px 12px rgba(0,0,0,.08); }
.row-badge.active { transform:scale(1.06); }
.row-badge.done { filter: drop-shadow(0 0 10px rgba(47,157,115,.35)); }
.question-card { position:absolute; left:26px; right:26px; bottom:24px; z-index:12; border-radius:22px; padding:14px 16px; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border:1px solid rgba(184,209,200,.76); box-shadow:0 18px 36px rgba(20,60,50,.16); animation:cardIn .24s ease both; }
.question-card.hidden, .keyword-reveal.hidden, .result-pop.hidden, .welcome-screen.hidden, .welcome-guide.hidden { display:none; }
@keyframes cardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.question-card-top { display:grid; grid-template-columns:60px 1fr 42px; gap:14px; align-items:start; }
.question-number { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--primary); color:#fff; font-weight:900; font-size:18px; }
.question-label { font-size:11px; letter-spacing:.16em; font-weight:900; color:var(--primary); margin-bottom:5px; }
.question-text { font-size:clamp(15px, 1.5vw, 22px); font-weight:800; line-height:1.35; }
.judge-row { display:flex; gap:10px; margin-top:12px; }
.answer-workflow { display:flex; gap:14px; align-items:flex-end; margin-top:12px; }
.inline-actions { display:flex; gap:8px; }
.answer-feedback { min-height:26px; padding-top:8px; font-weight:800; font-size:14px; color:var(--muted); }
.answer-feedback.ok { color:#1e8969; }
.answer-feedback.error { color:#be4d63; }
.keyword-reveal { position:absolute; inset:0; z-index:18; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(18,52,47,.72); backdrop-filter:blur(6px); color:#fff; text-align:center; }
.keyword-reveal::before { content:""; position:absolute; width:min(720px,80%); height:240px; background:radial-gradient(ellipse, rgba(255,216,63,.28), transparent 68%); }
.mini-star { position:relative; font-size:82px; color:#ffd53d; filter:drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.keyword-caption { position:relative; margin-top:8px; font-size:13px; font-weight:900; letter-spacing:.24em; opacity:.82; }
.keyword-reveal strong { position:relative; font-size:clamp(40px,7vw,92px); letter-spacing:.08em; margin-top:10px; text-shadow:0 7px 28px rgba(0,0,0,.25); }
.welcome-screen { position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.welcome-screen::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)), url("assets/backgrounds/preset5_poster.png"); background-size:cover; background-position:center; filter:saturate(110%); }
.welcome-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(24,32,44,.55), rgba(29,55,68,.36)); backdrop-filter:blur(4px); }
.welcome-particles { position:absolute; inset:-10vh 0 0 0; pointer-events:none; }
.welcome-particles span { position:absolute; top:-8vh; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.82); box-shadow:0 0 16px rgba(255,255,255,.42); animation:floatDust linear infinite; opacity:.85; }
.welcome-particles span:nth-child(odd) { width:6px; height:6px; opacity:.55; }
.welcome-particles span:nth-child(1){ left:4%; animation-duration:16s; animation-delay:-3s; }
.welcome-particles span:nth-child(2){ left:10%; animation-duration:19s; animation-delay:-8s; }
.welcome-particles span:nth-child(3){ left:16%; animation-duration:14s; animation-delay:-2s; }
.welcome-particles span:nth-child(4){ left:24%; animation-duration:21s; animation-delay:-7s; }
.welcome-particles span:nth-child(5){ left:31%; animation-duration:18s; animation-delay:-6s; }
.welcome-particles span:nth-child(6){ left:38%; animation-duration:24s; animation-delay:-12s; }
.welcome-particles span:nth-child(7){ left:46%; animation-duration:17s; animation-delay:-5s; }
.welcome-particles span:nth-child(8){ left:53%; animation-duration:23s; animation-delay:-15s; }
.welcome-particles span:nth-child(9){ left:60%; animation-duration:20s; animation-delay:-9s; }
.welcome-particles span:nth-child(10){ left:67%; animation-duration:15s; animation-delay:-4s; }
.welcome-particles span:nth-child(11){ left:72%; animation-duration:22s; animation-delay:-14s; }
.welcome-particles span:nth-child(12){ left:76%; animation-duration:18s; animation-delay:-10s; }
.welcome-particles span:nth-child(13){ left:81%; animation-duration:25s; animation-delay:-11s; }
.welcome-particles span:nth-child(14){ left:85%; animation-duration:16s; animation-delay:-5s; }
.welcome-particles span:nth-child(15){ left:89%; animation-duration:20s; animation-delay:-13s; }
.welcome-particles span:nth-child(16){ left:92%; animation-duration:15s; animation-delay:-7s; }
.welcome-particles span:nth-child(17){ left:96%; animation-duration:18s; animation-delay:-3s; }
.welcome-particles span:nth-child(18){ left:52%; animation-duration:27s; animation-delay:-16s; }
.welcome-particles span:nth-child(19){ left:27%; animation-duration:23s; animation-delay:-14s; }
.welcome-particles span:nth-child(20){ left:7%; animation-duration:28s; animation-delay:-20s; }
@keyframes floatDust { 0% { transform:translate3d(0,-6vh,0) scale(.7); opacity:0; } 10% { opacity:.75; } 100% { transform:translate3d(48px,112vh,0) scale(1.35); opacity:0; } }
.welcome-content { position:relative; width:min(860px, calc(100% - 40px)); background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); box-shadow:0 24px 60px rgba(0,0,0,.18); border-radius:34px; padding:32px 32px 28px; text-align:center; color:#fff; backdrop-filter:blur(14px); }
.welcome-content.poster-mode { overflow:hidden; }
.welcome-content.poster-mode::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08) 45%, rgba(255,255,255,.03)); pointer-events:none; }
.welcome-badge { position:relative; display:inline-flex; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.88); color:#b1537a; font-weight:900; font-size:12px; letter-spacing:.14em; }
.welcome-content h1 { position:relative; margin:16px 0 10px; font-family:Georgia, "Times New Roman", serif; font-size:clamp(42px,5vw,70px); color:#fff4fa; text-shadow:0 6px 22px rgba(0,0,0,.26); }
.welcome-sub { position:relative; margin:0 auto 18px; max-width:720px; font-size:20px; font-weight:700; color:#eefaf6; text-shadow:0 3px 12px rgba(0,0,0,.18); }
.welcome-card { text-align:left; background:rgba(255,255,255,.94); border:1px solid #e5ece9; border-radius:24px; padding:20px 22px; box-shadow:0 8px 18px rgba(0,0,0,.05); color:#27443e; }
.welcome-card h3 { margin:0 0 10px; color:#238769; }
.welcome-card ol { margin:0; padding-left:22px; line-height:1.8; font-size:16px; font-weight:700; color:#38564f; }
.welcome-actions { position:relative; display:flex; gap:12px; justify-content:center; margin-top:18px; }
.welcome-guide { position:relative; margin-top:18px; }
.welcome-guide-actions { margin-top:12px; display:flex; justify-content:center; }
.result-pop { position:absolute; inset:0; z-index:21; display:flex; align-items:center; justify-content:center; background:rgba(24,44,40,.32); backdrop-filter:blur(2px); }
.result-pop-card { min-width:240px; max-width:min(420px, 86vw); background:rgba(255,255,255,.96); border-radius:28px; padding:22px 20px 18px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.18); animation:popScale .25s ease both; }
.result-pop img { max-width:180px; max-height:180px; object-fit:contain; display:none; margin:0 auto 12px; }
.result-pop-emoji { font-size:88px; line-height:1; margin-bottom:10px; }
.result-pop-text { font-size:24px; font-weight:900; color:#284a43; }
@keyframes popScale { from { opacity:0; transform:scale(.84);} to {opacity:1; transform:scale(1);} }
.toast-stack { position:fixed; right:18px; bottom:18px; z-index:100; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { max-width:420px; background:#1f3532; color:#fff; padding:11px 14px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:13px; line-height:1.45; animation:toastIn .24s ease both; }
.toast.warn { background:#7d5811; }
.toast.error { background:#8b3443; }
@keyframes toastIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.fx-layer { position:fixed; inset:0; pointer-events:none; z-index:120; overflow:hidden; }
.fx-piece { position:absolute; top:-40px; animation:fall 1.9s linear forwards; opacity:.96; }
.fx-piece.confetti { width:10px; height:16px; border-radius:2px; }
.fx-piece.sparkle { width:8px; height:8px; border-radius:50%; box-shadow:0 0 12px currentColor; }
.fx-piece.stars { width:auto; height:auto; font-size:16px; }
@keyframes fall { to { transform:translate3d(var(--dx), 108vh, 0) rotate(760deg); opacity:.9; } }
body.play-mode .workspace { grid-template-columns:1fr; }
body.play-mode .editor, body.play-mode .stage-toolbar { display:none; }
body.play-mode .stage-wrap { padding:0; }
body.play-mode .stage { border-radius:0; border:0; box-shadow:none; }
body.play-mode .topbar { position:absolute; inset:0 0 auto 0; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); border:0; pointer-events:none; }
body.play-mode .brand { opacity:.12; }
body.play-mode .top-actions { pointer-events:auto; }
body.play-mode .top-actions .btn:not(#btnPlayMode):not(#btnSound):not(#btnResetGame):not(#btnFullscreen):not(#btnShowWelcome) { display:none; }
body.play-mode .stage-title { padding-top:84px; }
@media (max-width: 1280px) { .workspace { grid-template-columns:380px minmax(0,1fr); } }
@media (max-width: 1200px) { .top-actions .btn span { display:none; } .top-actions .btn { width:42px; padding:0; } #btnPlayMode, #btnShowWelcome { width:auto; padding:0 12px; } #btnPlayMode span, #btnShowWelcome span { display:inline; } }
@media (max-width: 920px) { body { overflow:auto; } .app-shell { min-height:100vh; height:auto; } .workspace { display:block; } .editor { border-right:0; border-bottom:1px solid rgba(184,209,200,.72); } .stage-wrap { min-height:760px; } .question-card { left:14px; right:14px; bottom:14px; } }
@media (max-width: 720px) { .field-row, .answer-workflow, .editor-actions, .file-actions, .inline-actions, .judge-row, .welcome-actions { flex-direction:column; } .field-grid-compact, .asset-grid, .preset-grid, .number-style-grid { grid-template-columns:1fr; } .question-card-top { grid-template-columns:52px 1fr 42px; } .stage-title { font-size:28px; } .game-area { padding-left:12px; padding-right:12px; } .welcome-content { padding:22px 18px 18px; } .welcome-card ol { font-size:15px; } }
/* V6 studio */
body{font-family:Arial,"Segoe UI",sans-serif;background:#eef3f9}
.workspace{grid-template-columns:minmax(580px,1.9fr) minmax(340px,1fr)}
.editor-scroll{padding:24px 28px}.editor{background:#f8faff}.control-section{background:#fff;border:1px solid #e1e7f0;box-shadow:0 8px 24px #25375408;padding:22px;border-radius:20px}.control-section[hidden]{display:none}
.editor-nav{position:sticky;top:72px;z-index:9;display:flex;gap:8px;padding:12px 0;background:#f8faff}.editor-nav .btn{flex:1}.btn{border-radius:12px;transition:transform .15s,box-shadow .15s;box-shadow:0 3px 8px #14304c0c}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px #14304c20}.btn.selected{background:#203e66;color:white}.stage-wrap{justify-content:flex-start;background:#e9eff6;padding:20px}.stage{flex:none;aspect-ratio:16/9;min-height:300px}.stage-hints{display:none}.stage-title{font-size:20px;padding:18px}.stage-toolbar:after{content:'XEM TRƯỚC · 16:9';font-size:11px;font-weight:bold;color:#52667f}.pair-card textarea{min-height:82px}.pair-card{padding:20px}.number-style-grid{grid-template-columns:repeat(5,1fr)}
body.play-mode .stage{flex:1;aspect-ratio:auto;min-height:0}body.play-mode .stage-title{font-size:clamp(26px,3vw,48px)}
.welcome-screen{justify-content:flex-start}.welcome-overlay{background:linear-gradient(90deg,#062e3cf5 0%,#07364ce8 35%,#07334b77 66%,#08263718);backdrop-filter:none}.welcome-screen:before{filter:saturate(1.15);background-position:center}.welcome-content,.welcome-content.poster-mode{width:min(780px,60vw);margin-left:7vw;background:none;border:0;box-shadow:none;backdrop-filter:none;text-align:left;padding:20px 0;overflow:visible}.welcome-content.poster-mode:before{display:none}.welcome-kicker{font-size:14px;letter-spacing:.15em;font-weight:800;color:#8fddd2;margin-bottom:28px}.welcome-badge{background:none;color:#ffda83;padding:0;font-size:16px}.welcome-content h1{font-family:Arial,"Segoe UI",sans-serif;font-size:clamp(38px,4.7vw,82px);line-height:1.12;color:#fff4d5;text-shadow:0 4px 0 #956426,0 15px 30px #0005;margin:24px 0}.welcome-sub{font-size:18px;font-weight:400;margin:24px 0;max-width:590px;line-height:1.6}.welcome-actions{justify-content:flex-start;flex-wrap:wrap}.welcome-actions .primary{background:linear-gradient(#ffe7a0,#e4b449);color:#3d2d18;border:2px solid #ffedb2}.hero-tiles{display:flex;gap:10px;margin:24px 0}.hero-tiles span{display:grid;place-items:center;width:54px;height:58px;border-radius:12px;background:linear-gradient(#fffbea,#f1d795);color:#164b50;font-size:28px;font-weight:900;box-shadow:0 5px 0 #a58340;transform:rotate(-5deg)}.hero-tiles span:nth-child(even){transform:rotate(6deg)}.hero-tiles i{font-style:normal;font-size:50px;color:#ffda63;margin-left:14px}.welcome-guide{max-height:40vh;overflow:auto}
.keyword-reveal{background:radial-gradient(ellipse at center,#235b789c,#081d39f2);backdrop-filter:blur(9px);gap:20px}.keyword-reveal:before{width:80%;height:75%;border:1px solid #e5cb783d;border-radius:30px;background:radial-gradient(ellipse,#f8d87b30,transparent 70%);box-shadow:0 0 80px #ebbc4820}.keyword-reveal .mini-star{font-size:72px;text-shadow:0 0 30px #ffcf66}.keyword-reveal strong{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;max-width:90%;font-size:clamp(24px,4vw,68px);letter-spacing:0;margin:0}.key-tile{display:inline-grid;place-items:center;min-width:1em;padding:.18em .23em;color:#604414;border-radius:14px;background:linear-gradient(145deg,#fff8d1,#efbd4f);border:2px solid #fff1ac;box-shadow:0 7px 0 #956a28,0 12px 30px #0005;animation:keyIn .7s both}.key-space{width:.3em}.keyword-caption{color:#ffe39d;letter-spacing:.18em}.keyword-congrats{z-index:1;color:#c3e8ec}.keyword-reveal .btn{z-index:1;margin-top:14px}@keyframes keyIn{from{opacity:0;transform:translateY(45px) rotate(-12deg) scale(.7)}to{opacity:1;transform:none}}
.media-launch{display:flex;gap:12px;margin-bottom:18px}#mediaDialog{width:min(1000px,92vw);max-height:88vh;border:0;border-radius:24px;padding:24px;color:#203e66;background:#f6f8fc;box-shadow:0 30px 100px #0005}#mediaDialog::backdrop{background:#10243ab0;backdrop-filter:blur(5px)}.media-head{display:flex;justify-content:space-between;align-items:center}.media-tabs{display:flex;gap:10px;margin-bottom:12px}.media-preview{height:150px;display:flex;align-items:center;justify-content:center;gap:20px;background:white;border-radius:16px;margin-bottom:16px;padding:12px}.media-preview img{max-height:125px;max-width:200px}.media-preview [hidden]{display:none}#mediaGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-height:42vh;overflow:auto;padding:5px}.media-item{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:16px;background:white;border:1px solid #dde5ef}.media-item img{width:100%;height:100px;object-fit:contain}.media-item>span{width:100%;font-size:13px;overflow-wrap:anywhere}.media-item .btn{flex:1}.result-pop-card img{max-height:230px}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(450px,1.5fr) minmax(300px,1fr)}.editor-scroll{padding:16px}.editor-nav .btn{font-size:12px;padding:10px}.number-style-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:800px){.workspace{display:flex;flex-direction:column}.stage-wrap{min-height:340px}.welcome-content,.welcome-content.poster-mode{width:86vw;margin-left:7vw}.welcome-content h1{font-size:42px}.welcome-overlay{background:#062e3cdd}#mediaGrid{grid-template-columns:repeat(2,1fr)}.editor-nav{top:0}.welcome-sub{font-size:16px}}
@media(prefers-reduced-motion:reduce){.key-tile,.welcome-particles span{animation:none}.btn{transition:none}}
.pair-feedback{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.pair-feedback-box{padding:14px;border-radius:16px;border:1px solid #d4e9df;background:#f0faf5;display:flex;flex-wrap:wrap;gap:8px}.pair-feedback-box.wrong{background:#fff3f5;border-color:#f1d7dc}.pair-feedback-box>strong{width:100%;font-size:13px}.pair-media-summary{width:100%;min-height:62px;display:flex;align-items:center;gap:10px}.pair-media-summary img{width:58px;height:58px;object-fit:contain;border-radius:8px;background:white}.pair-media-summary span{font-size:12px;color:#536b69;overflow-wrap:anywhere;flex:1}.pair-advanced summary{cursor:pointer;font-size:12px;color:#52667f;padding:10px}.pair-feedback-box>.btn{flex:1;white-space:nowrap}.welcome-screen:before{background-image:url('assets/backgrounds/crossword-poster-v7.webp');filter:none}.welcome-overlay{background:linear-gradient(90deg,#062b3e55,#062b3e11 50%,transparent)}
@media(max-width:650px){.pair-feedback{grid-template-columns:1fr}}
/* V8: even tile edges and sculpted question card */
.cell{border:1px solid #759899;margin:0;border-radius:7px;background:linear-gradient(145deg,#ffffff,#edf5f3);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #d4e4df;color:#14383f}
.cell.key-cell{background:linear-gradient(145deg,#fff7cb,#f7d86b);border-color:#c99936;box-shadow:inset 0 2px 0 #fff9de,inset 0 -3px 0 #dfba56}.cell.key-cell:after{display:none}.cell.selected-row{background:linear-gradient(#f6fffc,#d7f0e8);box-shadow:inset 0 2px #fff,inset 0 -3px #b8dacf}.cell.revealed{background:linear-gradient(#fff,#edf7f3)}
.question-card{left:50%;right:auto;transform:translateX(-50%);width:min(1100px,94%);bottom:22px;border-radius:32px;padding:22px 28px 16px;background:linear-gradient(135deg,#ffffff 5%,#f1fbf9 65%,#e2f2f3);border:2px solid #fff;box-shadow:0 8px 0 #8fb9b7,0 15px 0 #477d851c,0 28px 45px #153b4955;animation:questionRise .35s ease both;overflow:hidden}
.question-card:before{content:'';position:absolute;inset:7px;border:1px solid #9ccdc1;border-radius:26px;pointer-events:none}.question-card:after{content:'';position:absolute;right:-40px;top:-60px;width:200px;height:200px;border:18px double #58a6ab18;border-radius:42px;transform:rotate(30deg);pointer-events:none}.question-card>*{position:relative;z-index:1}.question-ornament{position:absolute;top:9px;right:85px;font-size:12px;letter-spacing:5px;color:#b49245}.question-card-top{align-items:center;grid-template-columns:66px 1fr 42px}.question-number{height:64px;width:64px;border-radius:20px;background:linear-gradient(145deg,#49bdb3,#126575);border:2px solid #b9f0df;box-shadow:0 5px 0 #164755,0 8px 14px #175b7133;font-size:26px}.question-text{font-size:clamp(16px,1.7vw,26px);line-height:1.35;color:#16384b}.question-label{color:#338581;letter-spacing:.17em}.judge-row{justify-content:center;gap:18px;margin:16px 0}.judge-row .btn{height:48px;min-width:150px;border-radius:16px;font-size:19px;border:2px solid #fff;box-shadow:0 5px 0 #175864,0 8px 14px #0002}.judge-row .btn-correct{background:linear-gradient(#36bea5,#18806f);color:white}.judge-row .btn-wrong{background:linear-gradient(#ff8a9a,#d44966);color:white;box-shadow:0 5px 0 #97354a,0 8px 14px #0002}.question-card .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #547b80}.answer-workflow{padding:10px 12px;background:#ffffffb3;border:1px solid #cde5e2;border-radius:18px;gap:12px}.question-card input{border-radius:12px;background:#fff;box-shadow:inset 0 2px 5px #21475a12}.question-card .answer-feedback{font-size:13px;margin-top:8px}.question-card .icon-btn{border-radius:50%;background:#fff;border:1px solid #b1d5d0}.stage-title{font-family:Arial,"Segoe UI",sans-serif}
.intro-controls{position:absolute;z-index:5;bottom:28px;right:4vw;display:flex;align-items:center;gap:12px;border:1px solid #8bd9d770;border-radius:18px;background:#082d43e6;padding:12px 18px;color:#e5f5f4;box-shadow:0 12px 28px #0003}.intro-controls label{font-size:12px}.intro-controls input{width:125px;accent-color:#f4cd63}.intro-controls .btn{color:#ffe7a3;background:#ffffff10;border-color:#90d1c470;font-size:13px}.audio-settings{margin:14px 0;padding:14px}.audio-settings output{font-weight:800;color:#267f76}
@keyframes questionRise{from{opacity:0;transform:translate(-50%,22px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:800px){.question-card{left:50%;right:auto;width:95%;padding:16px;border-radius:24px;max-height:65%;overflow:auto}.question-card:before{border-radius:18px}.judge-row{flex-direction:row}.judge-row .btn{min-width:90px}.intro-controls{left:5vw;right:5vw;bottom:12px;flex-wrap:wrap;justify-content:center}.welcome-content{padding-bottom:110px!important}.question-ornament{display:none}}
@media(prefers-reduced-motion:reduce){.question-card{animation:none}}
body.play-mode .stage.question-open .game-area{padding-bottom:310px;padding-top:0}body.play-mode .stage.question-open .board-panel{min-height:120px}.stage.question-open .grid-viewport{align-items:flex-start}
.feedback-explainer{background:linear-gradient(135deg,#eef7ff,#ecfaf5);border:1px solid #c8dfed;border-radius:18px;padding:18px;margin:14px 0;color:#294e65;font-size:14px;line-height:1.65}.feedback-explainer p{margin:6px 0}.intro-controls select{background:#123e55;color:#fff4d5;border:1px solid #77b4bd;border-radius:10px;padding:7px;font-size:12px}.welcome-particles{inset:0;z-index:1;overflow:hidden}.welcome-particles span,.welcome-particles span:nth-child(odd){top:-12px;width:var(--size);height:var(--size);background:#ffe9a8;opacity:.6;box-shadow:0 0 12px #ffe395;animation:welcomeDust var(--duration) var(--delay) linear infinite;will-change:transform}.welcome-screen[data-effect=snow] .welcome-particles span{background:white;box-shadow:0 0 5px #fff9;opacity:.8;animation-name:welcomeSnow}.welcome-screen[data-effect=off] .welcome-particles{display:none}.welcome-screen.hidden .welcome-particles span{animation-play-state:paused}.welcome-content{z-index:2}
@keyframes welcomeDust{0%{transform:translate3d(0,102vh,0);opacity:0}15%{opacity:.65}85%{opacity:.65}100%{transform:translate3d(var(--drift),-10vh,0);opacity:0}}
@keyframes welcomeSnow{0%{transform:translate3d(0,-2vh,0)}50%{transform:translate3d(var(--drift),52vh,0)}100%{transform:translate3d(0,105vh,0)}}
@media(prefers-reduced-motion:reduce){.welcome-particles span{animation:none;display:none}}
.welcome-particles{display:none!important}#welcomeDust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.welcome-content{z-index:3}.welcome-screen:before{inset:-2%;animation:posterBreathe 18s ease-in-out infinite alternate}.hero-tiles{perspective:700px}.hero-tiles span{animation:heroBob 4s ease-in-out infinite alternate}.hero-tiles span:nth-child(even){animation-delay:-2s}
.keyword-reveal{isolation:isolate;background:#082c42;backdrop-filter:none;perspective:1000px;overflow:hidden}.keyword-reveal:before{display:none}.victory-scenery{position:absolute;inset:-4%;z-index:-2;background:url('assets/backgrounds/victory-poster-v10.png') center/cover;animation:victoryCamera 14s ease-in-out infinite alternate}.keyword-reveal:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,#062b4380 0%,#082e4320 65%,#041b3955)}#victoryDust{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.keyword-reveal>*:not(canvas):not(.victory-scenery){position:relative;z-index:1}.keyword-reveal .mini-star{animation:trophyFloat 3.5s ease-in-out infinite;color:#ffe08d}.keyword-caption{font-size:clamp(12px,1.3vw,19px);text-shadow:0 2px 10px #000}.keyword-reveal strong{filter:drop-shadow(0 10px 20px #0006);transform-style:preserve-3d;animation:wordFloat 5s ease-in-out infinite}.keyword-congrats{background:#082d43a8;padding:9px 20px;border-radius:30px}.keyword-reveal .btn{background:linear-gradient(#ffe9a7,#e4ba59);color:#4b3512;border-color:#ffedb7;box-shadow:0 5px 0 #9a702e}
@keyframes posterBreathe{from{transform:scale(1) translateX(-.3%)}to{transform:scale(1.035) translateX(.3%)}}@keyframes heroBob{from{transform:translateY(0) rotateY(-9deg) rotateZ(-4deg)}to{transform:translateY(-8px) rotateY(9deg) rotateZ(4deg)}}@keyframes victoryCamera{from{transform:scale(1) translateX(-.7%)}to{transform:scale(1.06) translateX(.7%)}}@keyframes trophyFloat{0%,100%{transform:translateY(0) rotateY(-12deg)}50%{transform:translateY(-10px) rotateY(12deg)}}@keyframes wordFloat{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-5px) rotateX(4deg)}}
#donateDialog{width:min(760px,94vw);border:1px solid #303e54;border-radius:22px;padding:0;background:#0f1726;color:#eaf1ff;box-shadow:0 30px 100px #0008}#donateDialog::backdrop{background:#07111acc;backdrop-filter:blur(5px)}#donateDialog header{display:flex;align-items:start;justify-content:space-between;gap:18px;padding:20px;border-bottom:1px solid #2b3547}#donateDialog h2{margin:0 0 8px;font-size:21px}#donateDialog header p{font-size:13px;color:#a5b4ce;line-height:1.6;margin:0}#donateDialog .btn{background:#1e2c42;color:#fff;border-color:#344258}.donate-body{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:20px}.donate-body>img{width:220px;height:220px;border-radius:15px;align-self:center}.donate-details{display:grid;gap:8px}.donate-details>div,.donate-details>button{display:flex;flex-direction:column;gap:8px;border:1px solid #2c3546;border-radius:14px;padding:13px;background:#141e2c;color:#eaf1ff;text-align:left}.donate-details small{font-size:9px;letter-spacing:.06em;color:#91a1b9}.donate-details strong{font-size:14px}.donate-details button:hover{background:#24374d}.donate-thanks{text-align:center;color:#a8bfd7;font-size:13px;padding:0 15px 15px}body.play-mode #btnDonate{display:inline-flex!important;align-items:center}
@media(max-width:600px){.donate-body{grid-template-columns:1fr}.donate-body>img{justify-self:center}.keyword-reveal{gap:12px}.keyword-reveal .mini-star{font-size:48px}}@media(prefers-reduced-motion:reduce){.welcome-screen:before,.hero-tiles span,.victory-scenery,.keyword-reveal strong,.keyword-reveal .mini-star{animation:none}}
/* V11 editing tools and team play */
.batch-tools{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.batch-tools .btn{font-size:13px}.pair-tools{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 12px}.pair-card.dragging{opacity:.5;outline:2px dashed #4daaa0}.competition-settings{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.studio-dialog{width:min(900px,94vw);max-height:90vh;overflow:auto;padding:24px;border:1px solid #c9dbe9;border-radius:24px;background:#f8fbff;color:#23445c;box-shadow:0 30px 100px #0005}.studio-dialog::backdrop{background:#0a243ab8;backdrop-filter:blur(5px)}.studio-dialog header{display:flex;justify-content:space-between;align-items:center;gap:16px}.studio-dialog h2{margin:0 0 14px}.studio-dialog p{font-size:14px;line-height:1.6}.studio-dialog textarea,.studio-dialog>input{width:100%;margin:12px 0;padding:12px;border:1px solid #b8d1dc;border-radius:12px}.studio-dialog table{width:100%;border-collapse:collapse;font-size:13px}.studio-dialog td,.studio-dialog th{border-bottom:1px solid #d7e2ed;padding:10px;text-align:left}.studio-dialog th{background:#e9f3fb}.import-error{padding:12px;background:#fff0f3;color:#ad344e;border-radius:12px}.import-ok{padding:12px;background:#e6f8ed;color:#236650;border-radius:12px}#bulkTable{max-height:35vh;overflow:auto;margin:12px 0}#previewQuestion{font-size:22px;line-height:1.5;padding:20px;border-radius:20px;background:#e9f6f4;margin:16px 0}#previewResponses{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.preview-response{display:flex;flex-direction:column;align-items:center;background:white;padding:18px;border:1px solid #d5e4eb;border-radius:18px}.preview-response img{height:140px;max-width:100%;object-fit:contain;margin:12px}.preview-emoji{font-size:70px}.preview-response h3{font-size:15px}#previewFx{height:50px;position:relative;overflow:hidden}#previewFx i{position:absolute;font-size:22px;animation:previewBurst 1.3s ease-out both}@keyframes previewBurst{from{transform:translateY(45px) scale(.3);opacity:1}to{transform:translateY(-25px) rotate(120deg);opacity:0}}
.team-board{position:absolute;top:140px;left:5%;right:5%;z-index:8;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.team-chip{background:#fff8de;border:2px solid #d8b552;border-radius:13px;padding:9px 16px;font-weight:800;font-size:14px;color:#58461e;box-shadow:0 4px 0 #ab853a}.team-chip.active{background:#1c826f;border-color:#9edcbb;color:white;box-shadow:0 4px 0 #124939}.turn-controls{display:flex;align-items:center;gap:12px;justify-content:center;margin:14px 0}.turn-controls strong{background:#183e59;color:#ffdc83;border-radius:12px;padding:9px 16px}.hidden.team-board,.hidden.turn-controls{display:none}.stage.team-mode .game-area{padding-top:60px}.stage-wrap .team-board{top:70px}.stage-wrap .team-chip{font-size:10px;padding:5px}.stage-wrap .turn-controls{flex-wrap:wrap}.victory-teams{font-weight:800;color:#ffed9d;font-size:18px}body.play-mode .team-board{top:145px}body.play-mode .team-chip{font-size:14px;padding:9px 16px}body.play-mode .stage.team-mode.question-open .game-area{padding-bottom:360px}.btn:disabled{opacity:.45;cursor:default;transform:none}
@media(max-width:650px){#previewResponses{grid-template-columns:1fr}.competition-settings{grid-template-columns:1fr}.team-board{top:110px}.studio-dialog{padding:16px}}

/* Team arena: balanced score columns stay beside the crossword. */
.stage.team-mode .game-area{padding:16px 100px 120px;position:relative}
.team-board,.stage-wrap .team-board,body.play-mode .team-board{position:absolute;top:18px;bottom:125px;left:8px;right:auto;width:84px;display:flex;flex-direction:column;justify-content:center;gap:12px;z-index:8}
.team-board-right,.stage-wrap .team-board-right,body.play-mode .team-board-right{left:auto;right:8px}
.team-chip,.stage-wrap .team-chip,body.play-mode .team-chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:106px;padding:10px 4px;border-radius:22px;border:2px solid #eedca8;background:linear-gradient(145deg,#fffbea,#ebd2a0);box-shadow:0 7px 0 #9b703a,0 12px 22px #11273940;color:#4b351f;text-align:center;overflow:hidden}
.team-chip:after{content:'';position:absolute;inset:5px;border:1px solid #ffffffbb;border-radius:17px;pointer-events:none}
.team-chip strong{font-size:12px;max-width:100%;overflow-wrap:anywhere;z-index:1}.team-chip b{font-size:36px;line-height:1.15;text-shadow:0 2px 0 white;z-index:1}.team-chip small{font-size:8px;letter-spacing:.8px;z-index:1}.team-ornament{font-size:12px;color:#a67833;letter-spacing:3px}
.team-chip.active{background:linear-gradient(145deg,#54d5b6,#147768);border-color:#aff4ce;color:white;box-shadow:0 7px 0 #0b4f47,0 0 28px #68e8bd66}.team-chip.active b{text-shadow:0 3px 0 #0b6a59}.team-chip.active .team-ornament{color:#fff0a2}
.timer-volume{display:flex;align-items:center;gap:7px;font-size:12px;color:#28494b}.timer-volume input{width:90px;accent-color:#198a77}.timer-volume output{min-width:34px}.turn-controls{flex-wrap:wrap;gap:8px}#turnStatus{font-weight:800;color:#196d61}.victory-teams{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:90%;overflow:auto;max-height:35vh}.champion-title{font-size:clamp(18px,2.8vw,34px);color:#fff2ae;text-shadow:0 3px 0 #675220;animation:championFloat 2.8s ease-in-out infinite}.victory-teams table{font-size:clamp(10px,1.2vw,17px);background:#102941dd;border:1px solid #ebc772;border-radius:16px;border-spacing:0;padding:6px;color:white}.victory-teams th,.victory-teams td{padding:7px 12px;text-align:center}.victory-teams th{color:#f9d678}.victory-teams td:first-child{text-align:left}.victory-teams .winner{background:#a987384d;color:#fff1a5}.victory-teams td:last-child{font-size:1.4em;font-weight:900}
@keyframes championFloat{50%{transform:translateY(-5px) scale(1.02)}}
body.play-mode .stage.team-mode .game-area{padding-left:190px;padding-right:190px;padding-top:12px}body.play-mode .team-board{width:160px;left:18px;top:16px;bottom:125px}body.play-mode .team-board-right{left:auto;right:18px}body.play-mode .team-chip{min-height:145px;padding:14px 9px;border-radius:28px}body.play-mode .team-chip strong{font-size:20px}body.play-mode .team-chip b{font-size:64px}body.play-mode .team-chip small{font-size:11px}body.play-mode .team-ornament{font-size:18px}
body.play-mode .stage.team-mode.question-open .game-area{padding-bottom:350px}body.play-mode .stage.question-open .team-board{bottom:350px}
@media(max-width:800px){body.play-mode .stage.team-mode .game-area{padding-left:106px;padding-right:106px}body.play-mode .team-board{width:88px;left:8px}body.play-mode .team-board-right{left:auto;right:8px}body.play-mode .team-chip{min-height:94px;padding:7px 4px}body.play-mode .team-chip strong{font-size:12px}body.play-mode .team-chip b{font-size:36px}body.play-mode .team-chip small{font-size:8px}body.play-mode .team-ornament{font-size:11px}.victory-teams td,.victory-teams th{padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.champion-title{animation:none}}
.editor-nav{flex-wrap:wrap}.editor-nav .btn{min-width:100px}.team-chip.active:after{content:' · Đang trả lời';font-size:10px}.studio-dialog .btn{margin-top:6px}

.keyword-reveal .champion-title{font-size:clamp(18px,2.8vw,34px)}
.team-board{container-type:size}.team-chip{flex:1;min-height:0;max-height:160px}
body.play-mode .team-chip{flex:1;min-height:0;max-height:185px}
body.play-mode .stage.many-teams .team-chip{padding:6px 4px;max-height:145px}
body.play-mode .stage.many-teams .team-chip strong{font-size:14px}
body.play-mode .stage.many-teams .team-chip b{font-size:clamp(22px,10cqh,42px)}
body.play-mode .stage.many-teams .team-chip small{font-size:8px}
body.play-mode .stage.many-teams .team-ornament{font-size:10px}
.stage-wrap .stage.many-teams .team-chip{padding:4px 2px}.stage-wrap .stage.many-teams .team-chip strong{font-size:9px}.stage-wrap .stage.many-teams .team-chip b{font-size:22px}.stage-wrap .stage.many-teams .team-ornament{display:none}