/* v1.2: shared interface, higher readability, calm character feedback. */
.intro{font-size:16px;color:#536856}.eyebrow{font-size:12px;color:#536a58}.feature-tags{font-size:13px;color:#536856;gap:14px}.field-heading{font-size:14px}.mode-card strong{font-size:18px}.mode-card small{font-size:13px;color:#52634f}.text-btn,.file-label{font-size:14px;color:#386e59}.field-note{font-size:13px;color:#596c56;line-height:1.6}.unit-note-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.unit-note-row .text-btn{white-space:nowrap}.duration-row select{font-size:15px}.duration-row>span{font-size:12px;color:#596c56}.names-row label{font-size:13px;color:#52634f}.names-row input{font-size:15px}.start-note{font-size:12px;color:#586b55}.extra-settings{font-size:13px}.extra-settings summary{color:#4b654f;min-height:30px}.extra-settings select{font-size:14px}.art-caption{font-size:12px;color:#566b54}.question-label{font-size:14px;color:#53624c;letter-spacing:1px}.feedback{font-size:16px;min-height:26px}.panel-bottom{font-size:13px;color:#53664f;gap:12px;flex-wrap:wrap}.arena-rule{font-size:14px;color:#52674f}.arena-actions button{font-size:14px}.player-heading small{color:#596b55;font-size:11px}.score-box b{color:#ad5525}.team1 .score-box b{color:#26796e}.score-box span{color:#53664f}.timer-wrap span{font-size:13px;color:#566a54}.answer-btn small{font-size:11px;color:#65775e}.app>footer{color:#596c55}.result-card p{font-size:14px;color:#52634f}.review-row span:last-child{font-size:13px;color:#5b6a54}.practice-card>p,.practice-page>p{font-size:15px;color:#53664f}.practice-card>span{font-size:14px;color:#53664f}.check-label{font-size:14px}.input-label{font-size:14px}.unit-item{font-size:14px}#importStatus{font-size:14px}.learn-note{color:#52634f;font-size:14px;line-height:1.8}.learn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.learn-word{border:1px solid #d8ddcd;background:#f2f5e9;border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:9px}.learn-word strong{font-size:22px;overflow-wrap:anywhere}.learn-word>span{font-size:15px;color:#52634f;line-height:1.6;flex:1}.listen-btn{border:1px solid #b5cdb8;background:#e6f0df;border-radius:12px;min-height:44px;padding:9px 14px;color:#32634e;font-size:14px;font-weight:650}.listen-btn:hover{background:#d6e9cf}.practice-card>.listen-btn{display:block;margin:15px auto}.speech-status{color:#52634f;font-size:13px;line-height:1.7;min-height:23px}.question-area h2.long-question{font-size:clamp(21px,2vw,28px);line-height:1.5;letter-spacing:0}.player-heading .mascot{transform-origin:50% 90%}.react-correct .player-heading .mascot{animation:buddy-hop .5s ease-in-out 2}.react-encourage .player-heading .mascot{animation:buddy-nod .75s ease-in-out}.react-streak .score-box:before{content:'✦ 连对小达人';display:block;font-size:12px;font-weight:700;color:#82591f}.react-correct .score-box b{display:inline-block;animation:score-cheer .45s ease-out}@keyframes buddy-hop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-8px) rotate(-7deg)}70%{transform:translateY(-3px) rotate(5deg)}}@keyframes buddy-nod{0%,100%{transform:rotate(0)}45%{transform:rotate(8deg) translateY(3px)}}@keyframes score-cheer{50%{transform:scale(1.2)}}
@media(min-width:1100px) and (max-height:820px){.topbar{height:66px}.setup{padding:8px 0}.setup-card{padding:14px 23px}.field-heading{margin:5px 0}.card-heading{margin-bottom:4px}.mode-card{padding:9px 12px}.mode-symbol{float:left;margin:0 9px 0 0}.mode-card small{clear:both;padding-top:4px}.names-row{margin:8px 0}.unit-note-row{flex-wrap:nowrap}.unit-note-row .field-note{font-size:12px}.unit-note-row .text-btn{font-size:13px}.app>footer{padding:10px 0}.extra-settings{margin:6px 0 8px;padding-top:5px}.question-area{padding:12px 14px}.player-panel{padding:16px}}
@media(max-width:1050px){.feature-tags{font-size:12px;gap:8px}.intro{font-size:15px}.mode-card small{font-size:12px}.unit-note-row .text-btn{font-size:13px}.field-heading{font-size:13px}}
@media(max-width:820px){.learn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-copy .intro{font-size:14px}.feature-tags{white-space:normal;font-size:11px}.panel-bottom{font-size:12px}.question-label{font-size:13px}.arena-rule{font-size:13px}.feedback{font-size:14px}.question-area h2.long-question{font-size:22px}.mode-card strong{font-size:17px}.start-note{font-size:11px}.question-area{padding:17px 8px}}
@media(max-width:550px){.learn-grid{grid-template-columns:1fr}.unit-note-row{display:block}.unit-note-row .field-note{margin-bottom:0}.mode-card small{font-size:11px}.feedback{font-size:13px}.question-label{font-size:11px}.question-area h2.long-question{font-size:18px}.panel-bottom{font-size:11px}.review-panel .field-heading{gap:4px}.review-row span:last-child{font-size:12px}.timer-wrap span{font-size:12px}.score-box b{font-size:28px}}
@media(prefers-reduced-motion:reduce){.react-correct .player-heading .mascot,.react-encourage .player-heading .mascot,.react-correct .score-box b,.answer-btn.is-correct{animation:none!important}}

.theme-row{display:flex;align-items:center;gap:12px;margin:8px 0}.theme-row label{font-size:13px;font-weight:700;white-space:nowrap}.theme-row select{min-height:42px;padding:7px 12px;font-size:14px}.practice-card .options{margin:18px 0}.practice-card .answer-btn{min-height:64px}.practice-card #revealBtn{margin-top:12px;font-size:15px}
body[data-theme="ocean"]{background:#eaf7fa;background-image:radial-gradient(ellipse at 8% 95%,#b5e2df 0,transparent 40%),radial-gradient(ellipse at 95% 5%,#c7e7f6 0,transparent 40%);color:#214b59}body[data-theme="ocean"] .setup-card,body[data-theme="ocean"] .player-panel{background:#f7fcff;border-color:#bbdce5}body[data-theme="ocean"] .start-btn{background:#236b80}body[data-theme="ocean"] .mode-card.selected{background:#d8eef5;border-color:#67aabd}body[data-theme="ocean"] .hero-art{background:radial-gradient(ellipse at 50% 85%,#acdcdbaa,transparent 68%);border-bottom:4px double #75bbcc;border-radius:40%}
body[data-theme="space"]{background:#f1edfa;background-image:radial-gradient(circle at 7% 18%,#b9a4df 0 2px,transparent 3px),radial-gradient(circle at 90% 65%,#ad9ad1 0 3px,transparent 4px),radial-gradient(ellipse at 30% 80%,#ded6f3,transparent 55%);background-size:150px 150px,240px 240px,100% 100%;color:#403657}body[data-theme="space"] .setup-card,body[data-theme="space"] .player-panel{background:#fcfaff;border-color:#d7cbea}body[data-theme="space"] .start-btn{background:#655087}body[data-theme="space"] .mode-card.selected{background:#e8dff6;border-color:#ad97c9}body[data-theme="space"] .hero-art{background:radial-gradient(ellipse at 50% 85%,#c6b5e8aa,transparent 68%);border-bottom:4px double #b49ad5;border-radius:50%}
@media(min-width:1100px) and (max-height:820px){.theme-row{margin:4px 0}.theme-row select{min-height:36px;padding:4px 10px}.names-row{margin:5px 0}.setup-card{padding-top:10px;padding-bottom:10px}.card-heading h2{margin:2px 0}.start-btn{min-height:46px}}

/* v1.4 colourful playground: decorative scenery stays behind readable surfaces. */
body[data-theme]{--ink:#293b59;--line:#d9e5ec;background:#effbe9;background-image:radial-gradient(circle at 5% 12%,#fff5b9 0,transparent 32%),radial-gradient(ellipse at 90% 95%,#bdeeda 0,transparent 45%);color:var(--ink)}
body[data-theme="ocean"]{background:#e8faff;background-image:radial-gradient(ellipse at 5% 20%,#bdeafc,transparent 50%),radial-gradient(ellipse at 90% 90%,#c4f1e7,transparent 50%)}
body[data-theme="space"]{background:#f3edff;background-image:radial-gradient(circle at 6% 15%,#b69ae7 0 2px,transparent 3px),radial-gradient(circle at 85% 70%,#ffcf66 0 3px,transparent 4px),radial-gradient(ellipse at 80% 85%,#e2d2fa,transparent 55%);background-size:130px 140px,190px 210px,100% 100%}
.topbar{border-bottom:2px dashed #93bab344}.brand-icon{background:#5979ce;box-shadow:3px 4px 0 #c9d8ff}.brand{color:#344d79}.header-actions button{background:#ffffffc9;border:2px solid #fff;box-shadow:0 3px 0 #b7cece55}.hero-copy h1{color:#304d79;text-shadow:2px 3px 0 #fff}.hero-copy .underline{color:#d35b29}.hero-copy>.eyebrow{background:#fff2b9;border:2px solid #fff;border-radius:20px;padding:7px 12px;color:#725824;letter-spacing:1px}.feature-tags{gap:8px;flex-wrap:wrap}.feature-tags span{padding:6px 9px;border-radius:12px;border:2px solid #fff;background:#d5edff;color:#345775;font-weight:700}.feature-tags span:nth-child(2){background:#ffe0d1;color:#8b4529}.feature-tags span:nth-child(3){background:#e5dcff;color:#635082}
body[data-theme] .hero-art{background:none;border:0;isolation:isolate;overflow:visible}.scene-art{position:absolute;width:110%;height:115%;bottom:-12px;left:-5%;z-index:-1;overflow:visible;pointer-events:none}.scene-art g[class^="scene-"]{display:none}body[data-theme="forest"] .scene-forest,body[data-theme="ocean"] .scene-ocean,body[data-theme="space"] .scene-space{display:block}.hero-art .mascot{filter:drop-shadow(0 7px 1px #31586122)}.hero-art:before{content:'一起出发！';background:#fff;border:2px solid #ffc45f;color:#956022;font-weight:800;top:6px;left:15%;z-index:1;letter-spacing:1px}.hero-art:after{display:none}.hero-vs{background:#fff2aa;border:3px solid white;color:#a34d22;box-shadow:0 4px 0 #ddb46d;font-weight:900}.art-caption span{background:#ffffffc9;border-radius:16px;padding:4px 12px;color:#435a76;font-weight:700}
body[data-theme] .setup-card{background:#ffffffed;border:3px solid #fff;border-radius:30px;box-shadow:0 7px 0 #8ab6a72e,0 18px 40px #4f78951a}.setup-card:before{display:none}.round-stamp{background:#fff0b2;color:#926324;border:2px dashed #e4b74b;transform:rotate(13deg)}.card-heading h2{color:#3c5383}.field-heading{color:#495a7d}.mode-card{border:2px solid #e3e9f4;background:#f5f7ff;box-shadow:0 3px 0 #dce4f5}.mode-card:nth-child(2){background:#fff1df;border-color:#ffe1ac}.mode-symbol{color:#6483c6}.mode-card:nth-child(2) .mode-symbol{color:#bd7926}body[data-theme] .mode-card.selected{background:#e4f5d8;border:2px solid #72b86b;box-shadow:0 3px 0 #a4cf95}body[data-theme="ocean"] .mode-card.selected{background:#daf2ff;border-color:#58aed0;box-shadow:0 3px 0 #92cfe1}body[data-theme="space"] .mode-card.selected{background:#eee3ff;border-color:#ad86d6;box-shadow:0 3px 0 #cab4e6}
body[data-theme] .start-btn{background:#ed8840;color:#42270e;border:2px solid #ffc87c;box-shadow:0 4px 0 #bd672c;font-weight:850;border-radius:17px}body[data-theme="ocean"] .start-btn{background:#62d3df;border-color:#a4f1f1;color:#164958;box-shadow:0 4px 0 #289caf}body[data-theme="space"] .start-btn{background:#c9a4f1;border-color:#e5cfff;color:#493068;box-shadow:0 4px 0 #9470bc}.start-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.start-btn:active{transform:translateY(3px);box-shadow:none!important}.theme-row{background:#f1f5fd;border-radius:12px;padding:3px 8px}.names-row input{background:#fff8e9;border:2px solid #f0d5ae}.names-row label:last-child input{background:#edfbf9;border-color:#b2e3dc}
body[data-theme] .player-panel{background:#fffdf8;border:3px solid #ffcf94;box-shadow:0 5px 0 #e8b87844}body[data-theme] .player-panel.team1{background:#fafffe;border-color:#92d9d0;box-shadow:0 5px 0 #60b8ae44}.team0 .question-area{background:#fff0d8;border:2px solid #ffe0b0}.team1 .question-area{background:#ddf6f1;border:2px solid #b9e8df}.answer-btn{border:2px solid #cbdcf5;box-shadow:0 4px 0 #b9cce244;background:#f0f6ff;color:#304563}.answer-btn:nth-child(2){background:#fff4da;border-color:#f3dcaa}.answer-btn:nth-child(3){background:#f3eaff;border-color:#dbcaee}.answer-btn:nth-child(4){background:#e5f7ee;border-color:#bfe5d3}.answer-btn.is-correct{background:#c5efac!important;border-color:#5d9e42!important;color:#28451e}.answer-btn.is-wrong{background:#ffddd7!important;border-color:#d27a68!important;color:#763e33}.answer-btn small{background:#fff9;border-radius:6px;padding:2px 5px}.timer-wrap{background:#fff1b7;border:3px solid #fff;box-shadow:0 4px 0 #ddc77655}.result-card,.practice-card,.review-panel{border:3px solid #d8caf0;background:#fffdfb;box-shadow:0 5px 0 #c9bbdf44}.results h1,.practice-page h1{color:#5267a0}
@media(max-width:820px){.feature-tags{gap:5px}.feature-tags span{padding:4px 6px;font-size:10px}.hero-copy>.eyebrow{font-size:10px;padding:5px 9px}.scene-art{width:100%;left:0}.hero-art:before{font-size:10px;padding:6px 9px;top:0}.theme-row{padding:3px 6px}.art-caption span{padding:3px 6px}}
@media(min-width:1100px) and (max-height:820px){.feature-tags{margin-top:14px}.hero-copy h1{margin:12px 0}.setup-card{padding:9px 20px}.theme-row{margin:3px 0}.names-row{margin:4px 0}.start-note{margin-bottom:2px}}

.hero-art>.mascot:nth-child(2){transform:rotate(-7deg);width:210px;height:235px}
@media(max-width:820px){.hero-art>.mascot:nth-child(2){width:140px;height:160px}}

/* v1.5: viewport layouts, with settings opened in a dialog. */
body[data-page="setup"],body[data-page="arena"]{height:100dvh;overflow:hidden}
body[data-page="setup"] .app,body[data-page="arena"] .app{height:100dvh;display:grid;grid-template-rows:58px minmax(0,1fr) 25px;padding:0 3%;max-width:1600px}
body[data-page="setup"] .topbar,body[data-page="arena"] .topbar{height:auto;min-height:0}
body[data-page="setup"] main,body[data-page="arena"] main{min-height:0}
body[data-page="setup"] .app>footer,body[data-page="arena"] .app>footer{margin:0;padding:4px 0;font-size:10px}
body[data-page="setup"] .setup{height:100%;min-height:0;padding:8px 0;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:4%;align-items:center}
body[data-page="setup"] .hero-copy{min-width:0}.hero-copy .intro{margin:10px 0}
body[data-page="setup"] .hero-copy h1{font-size:clamp(28px,3.6vw,49px);margin:12px 0}
body[data-page="setup"] .hero-art{height:clamp(120px,25vh,215px);margin-top:10px}
body[data-page="setup"] .hero-art>.mascot{height:100%;width:42%;max-width:210px}
body[data-page="setup"] .setup-card{padding:10px 18px;max-height:100%;border-radius:23px}
body[data-page="setup"] .card-heading{margin:0 0 4px}.card-heading h2{font-size:23px;margin:0}
body[data-page="setup"] .field-heading{margin:7px 0 5px;font-size:13px}
body[data-page="setup"] .mode-card{padding:8px 10px;min-height:65px}.mode-symbol{float:left;margin:0 8px 0 0}
body[data-page="setup"] .mode-card strong{font-size:17px}body[data-page="setup"] .mode-card small{font-size:12px;clear:both;padding-top:4px}
body[data-page="setup"] select,body[data-page="setup"] .names-row input{min-height:40px;padding:7px 10px;font-size:14px}
body[data-page="setup"] .field-note{margin:4px 0;font-size:12px}.unit-note-row{flex-wrap:nowrap}.unit-note-row .text-btn{font-size:12px}
body[data-page="setup"] .theme-row{margin:6px 0;padding:0 6px}.theme-row select{min-height:36px!important}
body[data-page="setup"] .names-row{margin:5px 0;gap:8px}.more-settings-btn{display:block;min-height:36px;font-size:12px;margin:0}
body[data-page="setup"] .launch-actions>.start-btn,body[data-page="setup"] .continue-btn{min-height:44px;padding:8px 12px;font-size:15px}
body[data-page="setup"] .start-note{font-size:11px;margin:8px 0 0}
body[data-page="arena"] #arena{height:100%;display:grid;grid-template-rows:65px minmax(0,1fr) 28px;gap:8px;padding:8px 0}
body[data-page="arena"] .arena-toolbar{margin:0;min-height:0}.arena-toolbar h2{margin:4px 0;font-size:20px}
body[data-page="arena"] .arena-grid{height:100%;min-height:0;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-page="arena"] .player-panel{min-height:0;padding:12px;display:grid;grid-template-rows:58px minmax(90px,.8fr) minmax(140px,1fr) 24px;gap:9px}
body[data-page="arena"] .player-heading{margin:0;min-height:0}.player-heading .mascot{width:52px;height:56px}
body[data-page="arena"] .question-area{padding:8px;display:flex;flex-direction:column;justify-content:center;gap:6px;margin:0;min-height:0}
body[data-page="arena"] .question-area h2{margin:0;min-height:0;font-size:clamp(24px,3.2vw,40px)}body[data-page="arena"] .question-area h2.long-question{font-size:clamp(19px,2.2vw,28px)}
body[data-page="arena"] .feedback{min-height:22px;font-size:14px;margin:0}
body[data-page="arena"] .options{margin:0;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
body[data-page="arena"] .answer-btn{min-height:0;padding:8px;font-size:clamp(20px,2.6vw,30px);overflow-wrap:anywhere}
body[data-page="arena"] .panel-bottom{margin:0;font-size:11px;line-height:1.4;display:flex;align-items:center}.arena-rule{margin:0;text-align:center;font-size:12px!important}
.bank-tools{display:flex;gap:10px;flex-wrap:wrap}#sampleFileBtn{background:#e8f3ff;border:1px solid #b8cfee;border-radius:10px;padding:8px 12px;min-height:40px;color:#34547c}#settingsDialog .extra-settings{border:0}.extra-settings .save-tools{margin-top:16px}
@media(max-width:850px) and (orientation:portrait){
body[data-page="setup"] .setup{grid-template-columns:1fr;grid-template-rows:minmax(90px,1fr) auto;gap:6px;max-width:660px;margin:auto}
body[data-page="setup"] .hero-copy{height:100%;position:relative;display:flex;flex-direction:column;justify-content:center;padding-right:42%}
body[data-page="setup"] .hero-copy h1{font-size:clamp(24px,4vw,33px);margin:4px 0;line-height:1.25}.hero-copy>.eyebrow{font-size:10px;padding:4px 7px;align-self:start}
body[data-page="setup"] .hero-copy .intro,body[data-page="setup"] .feature-tags,body[data-page="setup"] .art-caption{display:none}
body[data-page="setup"] .hero-art{position:absolute;right:0;bottom:8px;width:40%;height:85%;max-height:165px;margin:0}.hero-art:before{display:none}
body[data-page="setup"] .setup-card{width:100%;padding:10px 16px}.hero-vs{padding:5px;font-size:12px}
body[data-page="arena"] .player-panel{grid-template-rows:58px minmax(130px,.8fr) minmax(180px,1.3fr) 32px;padding:10px}
body[data-page="arena"] .panel-bottom span:last-child{display:none}
}
@media(max-height:650px){body[data-page="setup"] .app,body[data-page="arena"] .app{grid-template-rows:48px minmax(0,1fr) 18px}.brand{font-size:17px}.brand-icon{height:34px;width:34px;font-size:24px}.brand-sub{display:none}body[data-page="setup"] .card-heading{display:none}body[data-page="setup"] .field-heading{margin:3px 0}body[data-page="setup"] .setup-card{padding:8px 14px}body[data-page="setup"] .mode-card{min-height:55px;padding:6px 9px}body[data-page="setup"] .start-note{margin-top:5px;font-size:10px}body[data-page="setup"] .hero-copy .intro{display:none}body[data-page="setup"] .feature-tags{display:none}body[data-page="arena"] #arena{grid-template-rows:50px minmax(0,1fr) 22px;gap:5px}body[data-page="arena"] .player-panel{grid-template-rows:44px minmax(85px,.7fr) minmax(110px,1fr) 20px;gap:5px;padding:8px}.player-heading .mascot{height:40px;width:40px}.timer-wrap{padding:4px 12px}.score-box b{font-size:30px}}

/* v1.6: candy rainbow home, based on the supplied composition. */
.home-magic{display:none;pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:0}body[data-page="setup"] .home-magic{display:block}body[data-page="setup"] .app{position:relative;z-index:1}
body[data-page="setup"][data-theme]{background:#d8a5f7;background-image:radial-gradient(ellipse at 38% 39%,#ffd5ef 0,transparent 45%),radial-gradient(ellipse at 65% 2%,#ffb8da 0,transparent 53%),radial-gradient(ellipse at 2% 65%,#ffe2cf 0,transparent 50%),linear-gradient(120deg,#b998ff,#edb4f4 55%,#ac7aff)}
body[data-page="setup"] .home-magic{background-image:radial-gradient(circle,#9255dca0 1.4px,transparent 1.8px),radial-gradient(circle,#fff4a8 2px,transparent 2.5px);background-size:72px 79px,181px 147px;background-position:5px 4px,53px 85px}
.rainbow{position:absolute;display:block;width:300px;height:190px;border:10px solid #bd8bfa;border-radius:50%;box-shadow:0 0 0 9px #8fdddc,0 0 0 18px #f6ed80,0 0 0 27px #ffc078,0 0 0 36px #f792cb;opacity:.86}.rainbow-a{left:-130px;top:-150px;transform:rotate(-22deg)}.rainbow-b{right:-180px;top:90px;width:440px;height:300px;transform:rotate(27deg)}.rainbow-c{left:-205px;bottom:-185px;width:340px;height:210px;transform:rotate(18deg)}.rainbow-d{right:-175px;bottom:-215px;width:350px;height:240px;transform:rotate(-22deg)}
.spark{position:absolute;color:#fff9c6;text-shadow:0 2px 0 #efb943,0 0 15px white;font-size:35px}.spark-a{left:39%;top:13%;font-size:43px}.spark-b{left:44%;top:9%;color:#ffda55;font-size:28px;transform:rotate(15deg)}.spark-c{left:5%;top:67%;font-size:40px}.spark-d{left:12%;bottom:2%;color:#ffda55;transform:rotate(-12deg)}
body[data-page="setup"] .topbar{border-bottom:1px dashed #ffffff80}body[data-page="setup"] .header-actions button{background:#fffaf8ee;box-shadow:0 3px 0 #9168c82b}body[data-page="setup"] .brand-icon{background:linear-gradient(140deg,#70b7ff,#7662d9)}
body[data-page="setup"] .hero-copy h1{color:#763cba;-webkit-text-stroke:5px #fffcf1;paint-order:stroke fill;text-shadow:0 5px 0 #7b43bb60,0 0 13px #fff9;line-height:1.35;font-weight:950;letter-spacing:-1px}body[data-page="setup"] .hero-copy .underline{color:#e77625;-webkit-text-stroke:5px #fffcf1;paint-order:stroke fill}.underline svg{display:none}body[data-page="setup"] .hero-copy>.eyebrow{background:#fff6b8;border:2px solid #fff9;box-shadow:0 3px 0 #d29feb4d}body[data-page="setup"] .intro{color:#64436f}body[data-page="setup"] .feature-tags span{box-shadow:0 3px 0 #9067bf22}
body[data-page="setup"] .hero-art:before{display:none}body[data-page="setup"] .scene-art{display:none}body[data-page="setup"] .hero-art:after{content:'';display:block;position:absolute;top:auto;bottom:-5px;left:2%;width:96%;height:23%;border-radius:50%;background:linear-gradient(160deg,#ffc8f2,#d18bf3 55%,#a76af0);border:2px solid #ffe6ff;box-shadow:0 5px 0 #ae66df;z-index:-1}body[data-page="setup"] .hero-art{isolation:isolate;padding-bottom:5px}body[data-page="setup"] .hero-art>.mascot{filter:drop-shadow(0 6px 2px #8e56b733)}body[data-page="setup"] .hero-vs{background:linear-gradient(#fff18b,#ffc145);border:3px solid #fff6bf;color:#b76614;box-shadow:0 3px 0 #e69b28,0 0 0 3px #ffc9515e}body[data-page="setup"] .art-caption{visibility:hidden}
body[data-page="setup"][data-theme] .setup-card{background:linear-gradient(155deg,#fffefbef,#fffafff5);border:4px solid #fffaf4;border-radius:29px;box-shadow:0 0 0 8px #ffffff39,0 10px 0 #a665d34d,0 20px 38px #9b55c34d}
body[data-page="setup"] .card-heading h2{color:#423459}body[data-page="setup"] .field-heading{color:#57476b}body[data-page="setup"] select{background:linear-gradient(110deg,#fffef8,#fafff1);border-color:#ded4e8}body[data-page="setup"] .theme-row{background:transparent;padding:0}.names-row input{background:#fff4d8!important}.names-row label:last-child input{background:#dcf8f2!important}
body[data-page="setup"][data-theme] .mode-card.selected{background:linear-gradient(120deg,#f0d9ff,#e6d8fc);border:2px solid #af72e8;box-shadow:0 4px 0 #c298e52e}body[data-page="setup"] .mode-card:nth-child(2){background:linear-gradient(120deg,#fff4d4,#ffe7c5);border-color:#f9cc79}.mode-card strong{color:#594866}
body[data-page="setup"][data-theme] .launch-actions>.start-btn{position:relative;isolation:isolate;overflow:hidden;justify-content:center;background:linear-gradient(105deg,#ff9659 0%,#ffae55 38%,#ed8edf 70%,#ab63f4 100%);border:2px solid #fff4c8;color:#fff;font-size:18px;text-shadow:0 2px 1px #9b542d;box-shadow:0 4px 0 #d478b0,0 0 17px #ffb66b77;border-radius:14px;letter-spacing:1px}body[data-page="setup"] #startBtn>span{position:absolute;right:14px;color:#fff8}body[data-page="setup"] #startBtn:before{content:'✦ · ✧';position:absolute;left:10%;font-size:21px;color:#fff7;pointer-events:none}body[data-page="setup"] #startBtn:after{content:'✧ · ✦';position:absolute;right:12%;font-size:21px;color:#fff7;pointer-events:none}body[data-page="setup"] .app>footer{color:#79508f;border-color:#fff5}
@media(max-width:850px) and (orientation:portrait){.rainbow-b{right:-270px;top:30%}.spark-a{left:48%;top:14%}.spark-b{left:82%;top:10%}body[data-page="setup"] .hero-copy h1,body[data-page="setup"] .hero-copy .underline{-webkit-text-stroke:3px #fffdf2}body[data-page="setup"] .hero-art:after{height:22%}}
@media(max-height:650px){body[data-page="setup"][data-theme] .setup-card{border-width:3px;border-radius:22px;box-shadow:0 0 0 5px #ffffff39,0 5px 0 #a665d34d}.spark-a{font-size:27px}body[data-page="setup"] .hero-copy h1,body[data-page="setup"] .hero-copy .underline{-webkit-text-stroke:3px #fffdf2}}

/* v1.7: clear type and explicit two-player identity. */
body[data-page="setup"] .hero-copy h1.pk-title,body[data-page="setup"] .pk-title span{-webkit-text-stroke:0;text-shadow:none;paint-order:normal;letter-spacing:0}
body[data-page="setup"] .hero-copy h1.pk-title{color:#553174;line-height:1.18;margin:14px 0;font-weight:800}
.pk-title-label{font-size:.68em;font-weight:750}.pk-title-main{font-size:1.28em}.pk-highlight{color:#b84d16;margin-left:.12em}
@media(max-width:850px) and (orientation:portrait){body[data-page="setup"] .hero-copy h1.pk-title{margin:5px 0;line-height:1.2}.pk-title-main{font-size:1.2em}}

/* v1.8: shared tool navigation and vivid coordinated themes. */
.header-actions{gap:7px}.header-actions .plain-btn{padding:8px 11px;min-height:40px;font-size:13px;white-space:nowrap}.theme-swatches{display:flex;gap:8px;margin:18px 0}.theme-swatches span{flex:1;border-radius:14px;padding:18px 8px;background:#c8f1ad;color:#365b24;font-weight:700;text-align:center}.theme-swatches span:nth-child(2){background:#b2e9fb;color:#215d79}.theme-swatches span:nth-child(3){background:#e7c9fa;color:#633984}.music-tests{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}#musicVolume{width:100%;accent-color:#9a60ca}#musicDialog .check-label{margin:15px 0}#musicDialog #soundBtn{width:100%}.arena-actions{gap:7px}.arena-actions .plain-btn{padding:7px 10px;font-size:12px}
body[data-page="setup"][data-theme="forest"]{background:radial-gradient(ellipse at 34% 35%,#fff6b8,transparent 52%),linear-gradient(130deg,#9ce5ad,#d1f3b2 55%,#6dd6ba)}body[data-page="setup"][data-theme="forest"] .hero-copy h1.pk-title{color:#285b39}body[data-page="setup"][data-theme="forest"] .setup-card{box-shadow:0 0 0 8px #ffffff39,0 10px 0 #58984d44,0 20px 38px #43825533}body[data-page="setup"][data-theme="forest"] .mode-card.selected{background:#dbf5ba;border-color:#7ab759}body[data-page="setup"][data-theme="forest"] .launch-actions>.start-btn{background:linear-gradient(100deg,#ffac51,#f7c35e 40%,#62c788);color:#3f411e;text-shadow:none}body[data-page="setup"][data-theme="forest"] .hero-art:after{background:linear-gradient(150deg,#e2f7a0,#7bd596);box-shadow:0 5px 0 #57b58b}
body[data-page="setup"][data-theme="ocean"]{background:radial-gradient(ellipse at 28% 40%,#e2fffb,transparent 50%),linear-gradient(125deg,#75cef5,#b9effb 50%,#76dcdb)}body[data-page="setup"][data-theme="ocean"] .hero-copy h1.pk-title{color:#225574}body[data-page="setup"][data-theme="ocean"] .setup-card{box-shadow:0 0 0 8px #ffffff39,0 10px 0 #409ec344,0 20px 38px #346e9633}body[data-page="setup"][data-theme="ocean"] .mode-card.selected{background:#d5f3ff;border-color:#6caece}body[data-page="setup"][data-theme="ocean"] .launch-actions>.start-btn{background:linear-gradient(100deg,#ffae91,#7bdfe1 50%,#69b6ef);color:#25445d;text-shadow:none}body[data-page="setup"][data-theme="ocean"] .hero-art:after{background:linear-gradient(150deg,#c0f9fb,#6abfef);box-shadow:0 5px 0 #4daec8}
@media(max-width:850px){.brand-sub{display:none}.brand{font-size:17px;gap:8px}.header-actions{gap:4px}.header-actions .plain-btn{padding:7px 8px;font-size:12px}.arena-toolbar h2{font-size:16px}.arena-actions .plain-btn{padding:6px;font-size:11px}}

/* v1.9 Invitation home: one focal action, settings live in a dialog. */
body[data-page="setup"][data-theme="space"]{background:radial-gradient(ellipse at 50% 45%,#fffbe8,transparent 64%),linear-gradient(125deg,#daf1ff,#fbe5f7 65%,#e6e7ff)}
body[data-page="setup"] .home-magic{opacity:.5;background-size:160px 180px,270px 240px}body[data-page="setup"] .rainbow-b{top:-190px;right:-240px}body[data-page="setup"] .spark-a{left:16%;top:38%}body[data-page="setup"] .spark-b{left:83%;top:42%}body[data-page="setup"] .spark-c{left:23%;top:64%}
body[data-page="setup"] .app{grid-template-rows:58px minmax(0,1fr) 0}body[data-page="setup"] .app>footer{display:none}body[data-page="setup"] .topbar{border:0}body[data-page="setup"] .header-actions .plain-btn{background:#ffffffb0;box-shadow:none;border:1px solid #ffffffb0;min-height:42px}body[data-page="setup"] .brand{font-size:16px}.brand-sub{display:none}
body[data-page="setup"] #setup.invitation-home{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;height:100%;max-width:920px;margin:auto;padding:18px 0 25px;text-align:center;align-items:stretch}
body[data-page="setup"] #setup .hero-copy{display:block;position:static;height:auto;padding:0;min-height:0}
body[data-page="setup"] #setup .hero-copy h1.pk-title{font-size:clamp(30px,4vw,48px);line-height:1.2;margin:0;color:#345c75;font-weight:800}
body[data-page="setup"] #setup .pk-highlight{color:#b95b1e;margin-left:.1em}
body[data-page="setup"] #setup .hero-copy .intro{display:block;font-size:clamp(16px,2vw,21px);margin:10px 0 0;color:#506a79;line-height:1.4}
body[data-page="setup"] #setup .hero-art{position:relative;right:auto;bottom:auto;width:min(100%,740px);height:100%;min-height:0;max-height:none;margin:0 auto;padding:10px 20px 20px;display:flex;justify-content:center;align-items:flex-end;gap:35px;isolation:isolate}
body[data-page="setup"] #setup .hero-art>.mascot{width:38%;max-width:280px;height:95%;max-height:340px;flex-shrink:1;transform:rotate(-4deg);animation:invitation-bob 3.5s ease-in-out infinite}
body[data-page="setup"] #setup .hero-art>.mascot:last-child{transform:rotate(4deg);animation-delay:-1.7s}
body[data-page="setup"] #setup .hero-art:after{bottom:4px;left:5%;width:90%;height:15%;background:linear-gradient(160deg,#e4f7cc,#a8dfc9);border-color:#fff;box-shadow:0 5px 0 #82c8b2}
body[data-page="setup"][data-theme="ocean"] #setup .hero-art:after{background:linear-gradient(160deg,#d1faff,#90d8ec);box-shadow:0 5px 0 #75bcd5}
body[data-page="setup"][data-theme="space"] #setup .hero-art:after{background:linear-gradient(160deg,#f9dcf6,#ceb8ef);box-shadow:0 5px 0 #bea6df}
body[data-page="setup"] #setup .hero-vs{align-self:center;position:absolute;left:calc(50% - 26px);top:42%;margin:0;width:52px;height:52px;display:grid;place-items:center;padding:0;font-size:21px}
body[data-page="setup"] #setup .launch-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;min-height:96px}
body[data-page="setup"][data-theme] #setup .launch-actions>#startBtn{flex:none;width:min(460px,85%);height:76px;min-height:76px;padding:10px 38px;border-radius:30px;background:linear-gradient(180deg,#ffcf69,#ffb64e);border:4px solid #fff9d9;box-shadow:0 7px 0 #db9134,0 12px 24px #d5a04433;color:#68401d;text-shadow:none;font-size:30px;font-weight:850;letter-spacing:2px;justify-content:center}
body[data-page="setup"] #setup #startBtn:before,body[data-page="setup"] #setup #startBtn:after{display:none}body[data-page="setup"] #setup #startBtn>span{position:static;margin-left:20px;color:#946127;font-size:21px}
body[data-page="setup"] #setup #continueBtn{flex:none;width:auto;min-height:38px;padding:5px 20px;background:#fff8;border:0;box-shadow:none;font-size:14px;color:#536c77;margin:0;border-radius:18px}
#settingsDialog{width:min(680px,92vw);max-width:680px}#settingsDialog .setup-form .field-heading{margin:15px 0 7px}#settingsDialog .mode-card{min-height:80px}#settingsDialog .mode-card strong{font-size:18px}#settingsDialog .mode-card small{font-size:13px}#settingsDialog .names-row{margin-top:16px}#settingsDialog .extra-settings{margin-top:18px;border-top:1px dashed #cad7dd;padding-top:14px}#settingsDialog label{font-size:14px}
@keyframes invitation-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:850px) and (orientation:portrait){body[data-page="setup"] #setup.invitation-home{padding:35px 0 38px;grid-template-rows:auto minmax(0,1fr) auto;gap:16px}body[data-page="setup"] #setup .hero-art{width:100%;gap:24px;padding-bottom:35px}body[data-page="setup"] #setup .hero-art>.mascot{width:40%;height:90%;max-height:360px}body[data-page="setup"] #setup .hero-art:after{bottom:20px}body[data-page="setup"] #setup .launch-actions{min-height:115px}}
@media(max-height:650px){body[data-page="setup"] .app{grid-template-rows:48px minmax(0,1fr) 0}body[data-page="setup"] #setup.invitation-home{padding:6px 0 14px;gap:4px}body[data-page="setup"] #setup .hero-copy h1.pk-title{font-size:32px}body[data-page="setup"] #setup .hero-copy .intro{font-size:16px;margin-top:5px}body[data-page="setup"][data-theme] #setup .launch-actions>#startBtn{min-height:60px;height:60px;font-size:26px}body[data-page="setup"] #setup .launch-actions{min-height:75px;gap:6px}body[data-page="setup"] #setup .hero-art>.mascot{max-height:230px}}
@media(prefers-reduced-motion:reduce){body[data-page="setup"] #setup .hero-art>.mascot{animation:none}}

/* v1.12: let the mascots grow with the available stage height. */
body[data-page="setup"] #setup.invitation-home{max-width:1180px;padding-top:12px;gap:6px}
body[data-page="setup"] #setup .hero-art{width:min(100%,1080px);gap:48px;padding:6px 20px 18px}
body[data-page="setup"] #setup .hero-art>.mascot{width:44%;max-width:450px;height:100%;max-height:570px;min-height:0}
body[data-page="setup"] #setup .hero-vs{top:45%;width:60px;height:60px;left:calc(50% - 30px);font-size:24px}
@media(max-width:850px) and (orientation:portrait){body[data-page="setup"] #setup.invitation-home{padding:18px 0 24px;grid-template-rows:auto minmax(0,1fr) auto}body[data-page="setup"] #setup .hero-art{padding:5px 0 18px;gap:18px;align-items:center}body[data-page="setup"] #setup .hero-art>.mascot{width:45%;max-width:360px;height:auto;max-height:90%}body[data-page="setup"] #setup .hero-art:after{bottom:12%;height:13%}body[data-page="setup"] #setup .hero-vs{top:38%;width:48px;height:48px;left:calc(50% - 24px);font-size:20px}}
@media(max-height:650px){body[data-page="setup"] #setup.invitation-home{padding:6px 0 14px}body[data-page="setup"] #setup .hero-art{width:min(100%,850px);gap:32px}body[data-page="setup"] #setup .hero-art>.mascot{max-height:320px;max-width:290px;width:40%}body[data-page="setup"] #setup .hero-vs{width:44px;height:44px;left:calc(50% - 22px);font-size:18px}}

/* v1.13 original vector garden inspired by the user's reference. */
body[data-page="setup"][data-theme] .garden-backdrop{opacity:1;background:none;pointer-events:none} .garden-backdrop>svg{width:100%;height:100%;display:block}
body[data-page="setup"][data-theme="forest"]{background:radial-gradient(ellipse at 42% 42%,#ffffc5,transparent 59%),linear-gradient(120deg,#b9efc9,#d6f5b7 50%,#9ae2d0)}
body[data-page="setup"][data-theme="ocean"] .garden-backdrop>svg{filter:hue-rotate(30deg)}body[data-page="setup"][data-theme="space"] .garden-backdrop>svg{filter:hue-rotate(-20deg)}
body[data-page="setup"][data-theme] #setup .hero-art:after{background:radial-gradient(ellipse,#84b85470,transparent 70%);border:0;box-shadow:none;bottom:0;height:12%}
body[data-page="setup"] #setup .hero-vs{background:linear-gradient(#ffbdd8,#fb8fbc);color:#fff;border-color:#fff5ed;box-shadow:0 0 0 4px #ffb6d05c,0 0 17px #ffd6e9}
body[data-page="setup"] #setup .hero-art{padding-bottom:8px}
@media(max-width:850px) and (orientation:portrait){.garden-backdrop>svg{width:160%;max-width:none;margin-left:-30%}body[data-page="setup"] #setup .hero-art:after{bottom:12%}}

@media(max-width:850px) and (orientation:portrait){.garden-backdrop>svg{width:100%;margin-left:0}}

/* Clear, steady correction; no flashing. */
body[data-page="arena"] .feedback.wrong{color:#9c2920;background:#fff0e8;border:2px solid #e88260;border-radius:12px;padding:6px 10px;font-size:clamp(17px,1.8vw,24px);font-weight:800;line-height:1.3;overflow-wrap:anywhere;max-height:100%;overflow:auto}

/* Keep the home action at the top right during a match. */
#arenaHomeBtn{display:none}
body[data-page="arena"] #arenaHomeBtn{display:inline-flex;align-items:center;justify-content:center;background:#fff1b7;border:2px solid #e5b64d;color:#704818;font-weight:800;min-height:42px}
@media(max-width:850px){body[data-page="arena"] .header-actions{gap:3px}body[data-page="arena"] .header-actions .plain-btn{padding:7px 6px;font-size:12px}body[data-page="arena"] .brand{font-size:14px}}

body.access-visible[data-page="setup"] #setup .launch-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;width:100%;max-width:980px;margin-inline:auto}
.access-field{display:flex;align-items:center;gap:10px;border:3px solid #82bdcb;border-radius:32px;background:#fffffff2;padding:0 20px;min-height:64px;width:min(420px,43%);color:#37728b;box-sizing:border-box}
.access-field[hidden]{display:none}.access-field input{width:100%;min-width:0;border:0;background:transparent;outline:none;box-shadow:none;color:#304d65;font-size:20px;font-weight:700;padding:10px 0}.access-field input::placeholder{color:#5d8198}.access-field:focus-within{border-color:#3483b2;box-shadow:0 0 0 3px #ffffffb3}.access-field:has([aria-invalid="true"]){border-color:#ed6767}
#accessMessage{order:3;flex-basis:100%;text-align:center;color:#a02d25;font-size:15px;font-weight:700}#accessMessage:empty{display:none}
body.access-visible[data-page="setup"][data-theme] #setup .launch-actions>#startBtn{width:43%;max-width:460px;height:64px;min-height:64px;font-size:26px}
body.access-visible[data-page="setup"] #setup #continueBtn{order:4}
@media(max-width:850px){.access-field{padding:0 12px;min-height:56px}.access-field input{font-size:17px}body.access-visible[data-page="setup"][data-theme] #setup .launch-actions>#startBtn{font-size:22px;min-height:56px;height:56px;padding:8px 12px}}

#musicTrack{display:block;width:100%;min-height:46px;margin:8px 0 18px;border:2px solid #b5d8d3;border-radius:14px;background:#f4fffa;color:#345873;padding:8px 12px;font:inherit}

body.access-visible[data-page="setup"] #setup .launch-actions{flex-direction:column;flex-wrap:nowrap;gap:12px;max-width:620px;min-height:0}
body.access-visible #accessField{width:92%;max-width:560px;min-height:62px;border:2px solid #9ad5cb;border-radius:22px;padding:6px 7px 6px 20px;box-shadow:0 0 0 5px #e3f4ebaa;background:#fffefaf5}
#accessToggle{flex:none;min-width:78px;min-height:46px;border:0;border-radius:15px;background:#e2f3f0;color:#087e73;font-size:17px;font-weight:800;cursor:pointer}
#accessToggle:focus-visible{outline:3px solid #3483b2;outline-offset:2px}
body.access-visible[data-page="setup"][data-theme] #setup .launch-actions>#startBtn{width:92%;max-width:560px;background:linear-gradient(#ff966b,#f47b52);border:2px solid #ffdab8;color:#fff;box-shadow:0 6px 0 #cf603d;height:64px;min-height:64px;border-radius:22px;font-size:26px;justify-content:space-between;padding-inline:22px}
body.access-visible[data-page="setup"] #setup #startBtn>span{color:#fff}
body.access-visible #accessMessage{flex-basis:auto;order:0;margin:0}
@media(max-height:650px){body.access-visible[data-page="setup"] #setup .launch-actions{gap:8px}body.access-visible #accessField{min-height:50px;padding-block:3px}#accessToggle{min-height:40px}body.access-visible[data-page="setup"][data-theme] #setup .launch-actions>#startBtn{height:52px;min-height:52px;font-size:23px}}

#accessToggle[hidden]{display:none}#accessPassword[readonly]{color:#238172;cursor:default;font-size:clamp(15px,2vw,20px)}

.review-listen-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0}.review-row{grid-template-columns:1fr 1fr 1fr auto}.review-row .listen-btn{min-height:42px}.review-listen-actions [hidden]{display:none}

/* Candy arena: readable words, symmetric team panels, feedback-only stars. */
.arena-decor{display:none;position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
body[data-page="arena"] .arena-decor{display:block}.arena-decor span{position:absolute;opacity:.5}.decor-rainbow{top:0;left:1%;font-size:130px;transform:rotate(-14deg)}.decor-cloud{top:28%;right:0;color:white;font-size:145px}.decor-balloon{bottom:5%;left:0;font-size:96px;transform:rotate(-15deg)}.decor-stars{right:4%;bottom:1%;font-size:72px;color:#ffc951}
body[data-page="arena"] .header-actions .plain-btn,body[data-page="arena"] .arena-actions .plain-btn{border-radius:22px;border:2px solid #fff;background:#d9efff;color:#335777;box-shadow:0 3px 0 #99b9d24d;min-height:42px;font-weight:750}
body[data-page="arena"] .header-actions .plain-btn:nth-child(2n){background:#ffe1b7;color:#865019}body[data-page="arena"] .header-actions .plain-btn:nth-child(3n){background:#e8dcff;color:#66528c}body[data-page="arena"] #arenaHomeBtn{background:#d9f5d8;color:#3a7250}
body[data-page="arena"] .arena-toolbar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.arena-actions{justify-content:flex-end}
body[data-page="arena"] .timer-wrap{position:relative;display:flex;align-items:center;gap:9px;padding:5px 17px;background:linear-gradient(#fff6b3,#ffda69);border:3px solid #fff8cc;border-radius:25px;box-shadow:0 4px 0 #e3ae43,0 0 18px #ffe480a0;min-width:152px;justify-content:center}
body[data-page="arena"] .timer-wrap:before{content:'⏱';font-size:31px;color:#a46516}body[data-page="arena"] .timer-wrap span{font-size:11px;color:#85601e}body[data-page="arena"] .timer-wrap strong{font-size:27px;color:#82521b;font-variant-numeric:tabular-nums}
body[data-page="arena"] .player-panel{border-radius:27px;border:3px solid #ffbf81;background:linear-gradient(150deg,#fffdf4,#fff5e6);box-shadow:0 7px 0 #dea66d35,0 10px 18px #a68d7e18}
body[data-page="arena"] .player-panel.team1{border-color:#88d7cc;background:linear-gradient(150deg,#fbfffc,#eafaf5);box-shadow:0 7px 0 #73b8aa35,0 10px 18px #739c9718}
body[data-page="arena"] .score-box{display:flex;align-items:baseline;gap:4px}body[data-page="arena"] .score-box b{font-size:clamp(38px,4vw,58px);font-weight:900;line-height:1;color:#df722e;text-shadow:0 2px 0 #fff,0 4px 0 #e5ab7040}body[data-page="arena"] .team1 .score-box b{color:#249886;text-shadow:0 2px 0 #fff,0 4px 0 #76c4b740}
body[data-page="arena"] .question-area{position:relative;border-radius:22px;isolation:isolate;padding-left:27%;padding-right:10px;background:radial-gradient(ellipse at 55% 30%,#fffce6,#ffe7b6);border:2px solid #ffda94;overflow:hidden}
body[data-page="arena"] .team1 .question-area{padding-left:10px;padding-right:27%;background:radial-gradient(ellipse at 45% 30%,#f5fff2,#c9f3e5);border-color:#a1e1d1}
body[data-page="arena"] .question-area:after{content:'✦';position:absolute;right:8%;top:12%;font-size:25px;color:#fffaf1;z-index:-1}
.question-buddy{position:absolute;left:-2%;bottom:-6%;width:29%;height:94%;pointer-events:none;filter:drop-shadow(0 5px 2px #ce9a5540)}.question-buddy .mascot{width:100%;height:100%;display:block}.team1 .question-buddy{left:auto;right:-2%;transform:scaleX(-1);filter:drop-shadow(0 5px 2px #5fae9a40)}
.question-buddy .waving-paw{transform-origin:135px 177px;animation:arena-wave 2.2s ease-in-out infinite}@keyframes arena-wave{0%,65%,100%{transform:rotate(-12deg)}20%,45%{transform:rotate(-38deg)}32%{transform:rotate(-4deg)}}
body[data-page="arena"] .question-area h2{font-size:clamp(32px,4.2vw,60px);font-weight:900;color:#375977;paint-order:stroke fill;-webkit-text-stroke:3px #fff8d9;text-shadow:0 3px 0 #eabb774d;line-height:1.15;overflow-wrap:anywhere}body[data-page="arena"] .team1 .question-area h2{-webkit-text-stroke-color:#effff9;text-shadow:0 3px 0 #76c8b24d}body[data-page="arena"] .question-area h2.long-question{font-size:clamp(18px,2.2vw,28px);-webkit-text-stroke-width:1px}
body[data-page="arena"] .options{gap:13px;padding-bottom:6px}
body[data-page="arena"] .answer-btn{position:relative;border-radius:22px;border:2px solid #bdd6f1;background:linear-gradient(155deg,#f3faff,#c9ddf5);color:#365e86;box-shadow:inset 0 3px 0 #ffffffc9,0 5px 0 #9fb9d2,0 9px 13px #66839926;font-size:clamp(23px,3.1vw,42px);font-weight:850;padding:20px 12px 10px;line-height:1.12;transition:transform .12s,box-shadow .12s;touch-action:manipulation}
body[data-page="arena"] .answer-btn:nth-child(2){background:linear-gradient(155deg,#fff8dc,#ffe1a0);border-color:#efd297;color:#936120;box-shadow:inset 0 3px 0 #fff9,0 5px 0 #d4b579,0 9px 13px #b28c4d26}
body[data-page="arena"] .answer-btn:nth-child(3){background:linear-gradient(155deg,#fff0f9,#e4c9ee);border-color:#dcbbe5;color:#84538e;box-shadow:inset 0 3px 0 #fff9,0 5px 0 #bea1ce,0 9px 13px #9068a126}
body[data-page="arena"] .answer-btn:nth-child(4){background:linear-gradient(155deg,#efffe9,#c3ead2);border-color:#aad7bb;color:#35735a;box-shadow:inset 0 3px 0 #fff9,0 5px 0 #94bfa8,0 9px 13px #689a7826}
body[data-page="arena"] .answer-btn>span{text-shadow:0 2px 0 #ffffffc9}body[data-page="arena"] .answer-btn small{position:absolute;left:9px;top:8px;margin:0;width:25px;height:25px;display:grid;place-items:center;background:#fffdf3;border:1px solid #fff;border-radius:9px;font-size:13px;color:#687988;box-shadow:0 2px 3px #6b788233}
body[data-page="arena"] .answer-btn:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 0 #fff9,0 2px 0 #b5b8b8}body[data-page="arena"] .answer-btn:focus-visible{outline:3px solid #447eac;outline-offset:3px}
body[data-page="arena"] .answer-btn.is-correct:after{content:'★';position:absolute;right:12px;top:7px;font-size:27px;color:#ffc637;text-shadow:0 2px 0 #d99727,0 0 8px #fff5c0}
body[data-page="arena"] .answer-btn:disabled{opacity:1}body[data-page="arena"] .answer-btn.is-wrong{border:3px solid #d96d62}
@media(max-height:650px){body[data-page="arena"] .player-panel{grid-template-rows:48px minmax(94px,.8fr) minmax(120px,1fr) 20px;gap:7px;padding:9px}body[data-page="arena"] .score-box b{font-size:37px}body[data-page="arena"] .question-area h2{font-size:36px}body[data-page="arena"] .question-area h2.long-question{font-size:18px}body[data-page="arena"] .feedback{font-size:12px}body[data-page="arena"] .feedback.wrong{font-size:15px;padding:3px}body[data-page="arena"] .answer-btn{font-size:25px;padding-top:20px}body[data-page="arena"] .question-label{font-size:11px}}
@media(max-width:850px){body[data-page="arena"] .header-actions .plain-btn{padding:6px;font-size:11px}body[data-page="arena"] .question-buddy{width:27%;height:75%}body[data-page="arena"] .answer-btn{font-size:clamp(20px,3.5vw,30px)}body[data-page="arena"] .timer-wrap{min-width:115px;padding:5px 8px;gap:3px}body[data-page="arena"] .timer-wrap strong{font-size:22px}body[data-page="arena"] .timer-wrap span{display:none}}
@media(prefers-reduced-motion:reduce){.question-buddy .waving-paw{animation:none}}

#helpDialog{width:min(960px,94vw);max-height:90dvh;padding:26px 30px;border:3px solid #fff;border-radius:28px;background:#fffefa;color:#315754}
#helpDialog .dialog-head{align-items:flex-start;margin-bottom:20px}#helpDialog h2{font-size:27px;margin:8px 0 0;color:#2b5551}.help-eyebrow{color:#5887ae;font-size:13px;letter-spacing:1px}
.help-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.help-cards section{padding:20px 22px;border-radius:22px;background:#eff8e7}.help-cards section:nth-child(2),.help-cards section:nth-child(4){background:#fff0d2}.help-cards section:nth-child(3){background:#efe5ff}.help-cards h3{margin:0 0 12px;font-size:19px;color:#315653}.help-cards h3 b{color:#ed7144;margin-right:12px}.help-cards p{margin:0;font-size:16px;line-height:1.85;color:#627762}.help-controls{margin-top:18px;border-radius:16px;background:#e9f3ff;padding:15px 20px;font-size:15px;line-height:1.8}.help-footnote{font-size:14px;line-height:1.9;color:#6b7b68;margin:17px 0 0}
@media(max-width:700px){#helpDialog{padding:19px}.help-cards{gap:10px}.help-cards section{padding:15px}.help-cards h3{font-size:16px}.help-cards p{font-size:14px}}
@media(max-height:650px){#helpDialog{padding:18px 24px}.help-cards section{padding:13px 17px}.help-cards h3{margin-bottom:6px}.help-cards p{font-size:14px;line-height:1.6}.help-controls{font-size:13px;margin-top:12px;padding:10px 15px}.help-footnote{font-size:12px;margin-top:10px}}

/* Lift stopwatch clear of team-card borders and preserve its shadow. */
body[data-page="arena"] .arena-toolbar{z-index:2;overflow:visible}
body[data-page="arena"] .timer-wrap{transform:translateY(-10px);line-height:1.2}
@media(max-height:650px){body[data-page="arena"] .timer-wrap{transform:translateY(-4px);padding-block:3px}body[data-page="arena"] .timer-wrap:before{font-size:26px}}

#settingsDialog .mode-grid{grid-template-columns:1fr}

/* Brief per-player celebration, never intercepts touches. */
body[data-page="arena"] .player-panel{position:relative}
body[data-page="arena"] .feedback.correct{font-size:clamp(17px,1.8vw,24px);font-weight:900;color:#93600b;background:linear-gradient(110deg,#fff9d8,#ffebb0);border:2px solid #efc862;border-radius:13px;padding:5px 9px;line-height:1.3;text-shadow:0 1px 0 #fff;box-shadow:0 3px 0 #dab25d30;overflow-wrap:anywhere}
.answer-fireworks{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;border-radius:24px;animation:fireworks-life .85s linear both}
.answer-fireworks i{position:absolute;top:29%;font-size:27px;font-style:normal;line-height:1;text-shadow:0 0 5px #fff;opacity:0;animation:answer-spark .65s ease-out var(--delay) both}
@keyframes answer-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}75%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6)}}
@keyframes fireworks-life{from{visibility:visible}to{visibility:visible}}
@media(max-height:650px){body[data-page="arena"] .feedback.correct{font-size:15px;padding:3px 5px}}
@media(prefers-reduced-motion:reduce){.answer-fireworks i{animation:none;opacity:0}.answer-fireworks i:first-child{opacity:1;left:15%!important;top:22%}.answer-fireworks{animation-duration:.5s}}

/* Shared mouse: separate clocks, one active player. */
#settingsDialog .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.turn-clock{display:block;font-size:clamp(12px,1.2vw,17px);font-weight:800;color:#276c70;white-space:nowrap}
.turn-clock[hidden]{display:none}
.player-panel.turn-active{box-shadow:0 0 0 3px #ffcf64,0 7px 0 #eacb8b55}
.turn-waiting .question-area,.turn-waiting .options{visibility:hidden}
.player-panel.turn-waiting::after{content:attr(data-wait-message);position:absolute;inset:40% 8% auto;text-align:center;font-size:clamp(18px,2vw,28px);font-weight:800;color:#568080;pointer-events:none}
@media(max-height:650px){.turn-clock{font-size:11px}.turn-active .player-heading h3,.turn-waiting .player-heading h3{font-size:18px}}

.answer-btn.long-answer>span{font-size:clamp(14px,1.6vw,23px);line-height:1.3;overflow-wrap:anywhere}

.continue-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.continue-actions:has(button:not([hidden])){min-height:30px}.continue-actions .continue-btn{margin:0;font-size:14px}

/* Keep the stopwatch inside its toolbar, including short landscape screens. */
body[data-page="arena"] .timer-wrap{box-sizing:border-box;max-height:calc(100% - 8px);transform:none;padding-block:3px;align-self:center}
@media(max-height:650px){body[data-page="arena"] .timer-wrap{height:42px;min-height:0;max-height:42px;transform:translateY(-3px)}body[data-page="arena"] .timer-wrap strong{font-size:26px}body[data-page="arena"] .timer-wrap:before{font-size:25px}}
/* Tablet review: question on the left, four answers on the right. */
body[data-page="practice"]{height:100dvh;overflow:hidden}
body[data-page="practice"] .app{height:100dvh;display:grid;grid-template-rows:58px minmax(0,1fr) 20px;padding:0 3%;max-width:1600px}
body[data-page="practice"] .topbar{height:auto;min-height:0}
body[data-page="practice"] main{min-height:0}
body[data-page="practice"] .app>footer{margin:0;padding:2px 0;font-size:10px}
body[data-page="practice"] .practice-page{height:100%;max-width:1100px;margin:0 auto;padding:8px 0;display:grid;grid-template-rows:auto minmax(0,1fr) 44px;gap:8px}
body[data-page="practice"] .practice-page>.eyebrow,body[data-page="practice"] .practice-page>p{display:none}
body[data-page="practice"] .practice-page h1{font-size:28px;margin:0;line-height:1.2}
body[data-page="practice"] .practice-card{margin:0;padding:14px;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:24px minmax(44px,1fr) 38px 44px minmax(55px,1fr) 44px;gap:8px 18px;align-items:center}
body[data-page="practice"] #practiceProgress{grid-column:1;grid-row:1;font-size:13px}
body[data-page="practice"] #practiceMeaning{grid-column:1;grid-row:2;margin:0;font-size:clamp(24px,3vw,38px);line-height:1.2;max-height:100%;overflow:auto}
body[data-page="practice"] #practiceAnswer{grid-column:1;grid-row:3;font-size:25px;max-height:100%;overflow:auto}
body[data-page="practice"] .review-listen-actions{grid-column:1;grid-row:4;margin:0;display:flex;justify-content:center;gap:6px}
body[data-page="practice"] .review-message{grid-column:1;grid-row:5;min-height:0;max-height:100%;overflow:auto;font-size:14px;line-height:1.4}
body[data-page="practice"] .review-message p{margin:3px 0}
body[data-page="practice"] #practiceSpeechStatus:empty{display:none}
body[data-page="practice"] #practiceOptions{grid-column:2;grid-row:1/7;margin:0;height:100%;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
body[data-page="practice"] #practiceOptions .answer-btn{height:100%;min-height:44px;font-size:clamp(20px,2.6vw,34px);padding:12px;overflow-wrap:anywhere}
body[data-page="practice"] #revealBtn,body[data-page="practice"] #practiceJudge{grid-column:1;grid-row:6;margin:0;min-height:44px;height:44px;justify-content:center}
body[data-page="practice"] #practiceJudge button{min-height:44px;height:44px;padding:6px 15px;margin:0;font-size:17px}
body[data-page="practice"] #backResultsBtn{justify-self:center;height:44px;min-height:44px;padding:6px 22px}
@media(max-height:650px){body[data-page="practice"] .app{grid-template-rows:48px minmax(0,1fr) 18px}body[data-page="practice"] .practice-page{padding:5px 0;gap:5px}body[data-page="practice"] .practice-page h1{font-size:24px}body[data-page="practice"] .practice-card{padding:10px;gap:5px 14px;grid-template-rows:20px minmax(40px,1fr) 30px 44px minmax(48px,1fr) 44px}}
body[data-page="practice"] #practiceMeaning{padding-block:2px;min-height:0}
body[data-page="arena"] .arena-toolbar{padding:0;grid-template-rows:minmax(0,1fr);min-height:0}body[data-page="arena"] .arena-toolbar>div{min-height:0}