:root{
  --ink:#173a4d;--ink-2:#315668;--cream:#f7f2e8;--paper:#fffdf8;--coral:#ed6a5a;
  --sun:#f4bf3a;--mint:#72b8a3;--sky:#6aa9c8;--violet:#8879ad;--line:#d9d4c8;
  --good:#2e9b70;--bad:#d9534f;--shadow:0 16px 38px rgba(23,58,77,.13);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}button,input{font:inherit}button{color:inherit}.paper-texture{position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(#173a4d 0.55px,transparent .55px);background-size:8px 8px;z-index:-1}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,76px);border-bottom:1px solid rgba(23,58,77,.14);background:rgba(247,242,232,.94);position:sticky;top:0;z-index:30;backdrop-filter:blur(10px)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--ink);color:var(--cream);border-radius:12px 12px 12px 4px;font-weight:900;font-family:Georgia,serif;font-size:24px;transform:rotate(-3deg)}.brand strong{display:block;font-size:18px;letter-spacing:.06em}.brand small{display:block;font-size:9px;letter-spacing:.19em;margin-top:2px;color:var(--ink-2)}.top-actions{display:flex;gap:10px;align-items:center}.quiet-btn,.icon-btn,.soft-btn,.upload-btn,.filter-chip,.text-btn,.back-btn{border:1px solid rgba(23,58,77,.2);background:rgba(255,253,248,.75);cursor:pointer;transition:.18s ease}.quiet-btn{height:42px;padding:0 14px;border-radius:12px;display:flex;gap:9px;align-items:center}.quiet-btn b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:7px;background:var(--sun)}.icon-btn{width:42px;height:42px;border-radius:12px;font-size:21px}.quiet-btn:hover,.icon-btn:hover,.soft-btn:hover,.filter-chip:hover{background:#fff;transform:translateY(-1px)}.hero{min-height:500px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;max-width:1280px;margin:auto;padding:64px clamp(22px,5vw,76px) 48px}.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;color:var(--coral)}.hero h1{font-size:clamp(48px,6.8vw,88px);line-height:.98;letter-spacing:-.055em;margin:0;font-weight:850}.hero h1 em{font-style:normal;color:var(--coral);font-family:Georgia,"Songti SC",serif;font-weight:700}.hero-note{max-width:520px;font-size:17px;line-height:1.75;color:var(--ink-2);margin:26px 0}.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.primary-btn{border:0;background:var(--ink);color:white;border-radius:13px;padding:15px 20px;font-weight:800;cursor:pointer;box-shadow:0 7px 0 #0d2937;transition:.15s}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 #0d2937}.primary-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #0d2937}.primary-btn span{margin-left:16px;color:var(--sun)}.text-btn{border:0;background:transparent;text-decoration:underline;text-underline-offset:5px;padding:10px 2px;font-weight:700}.hero-board{width:min(430px,85vw);aspect-ratio:1;margin:auto;position:relative;border:2px solid var(--ink);border-radius:48% 52% 46% 54%;background:var(--ink);box-shadow:18px 18px 0 var(--sun);overflow:hidden;transform:rotate(2deg)}.hero-board:before{content:"";position:absolute;inset:18px;border:1px dashed rgba(255,255,255,.28);border-radius:50%}.board-center{position:absolute;inset:31% 27%;background:var(--paper);border-radius:50%;display:grid;place-items:center;align-content:center;transform:rotate(-2deg);z-index:3;box-shadow:0 10px 25px rgba(0,0,0,.18)}.board-center b{font:800 70px/1 Georgia;color:var(--coral)}.board-center i{font:600 15px Georgia;color:var(--ink-2)}.board-center small{margin-top:8px;font-weight:700;font-size:11px}.orbit{position:absolute;border:1px solid rgba(255,255,255,.45);border-radius:50%;inset:10%;animation:orbit 18s linear infinite}.orbit span{position:absolute;background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:8px 14px;border-radius:10px;font-weight:800;box-shadow:4px 4px 0 var(--coral)}.orbit-one span{left:5%;top:10%}.orbit-two{inset:20%;animation-duration:13s;animation-direction:reverse}.orbit-two span{right:-13%;bottom:14%;box-shadow:4px 4px 0 var(--mint)}.orbit-three{inset:5%;animation-duration:22s}.orbit-three span{right:8%;top:15%;font-size:23px;box-shadow:4px 4px 0 var(--sun)}.chalk{position:absolute;color:rgba(255,255,255,.7);font-family:"Comic Sans MS",cursive;font-weight:800}.chalk-a{left:12%;bottom:18%;transform:rotate(-13deg)}.chalk-b{right:15%;bottom:16%;font-size:31px;transform:rotate(12deg)}@keyframes orbit{to{transform:rotate(360deg)}}.game-section{max-width:1280px;margin:auto;padding:60px clamp(22px,5vw,76px) 50px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-heading h2{font-size:34px;margin:0;letter-spacing:-.03em}.filter-row{display:flex;gap:8px;flex-wrap:wrap}.filter-chip{padding:9px 15px;border-radius:999px;font-weight:700}.filter-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}.game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.game-card{min-height:240px;border:1px solid rgba(23,58,77,.18);background:var(--paper);border-radius:var(--radius);padding:20px;text-align:left;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:.22s ease;box-shadow:0 4px 0 rgba(23,58,77,.09)}.game-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 12px 0 var(--card-color);border-color:var(--ink)}.game-card:nth-child(even):hover{transform:translateY(-6px) rotate(.4deg)}.game-card:focus-visible{outline:4px solid var(--sun);outline-offset:3px}.game-number{position:absolute;right:14px;top:10px;font:700 48px/1 Georgia;color:rgba(23,58,77,.09)}.game-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:var(--card-color);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin-bottom:24px}.game-card h3{font-size:20px;margin:0 0 8px}.game-card p{margin:0;color:var(--ink-2);line-height:1.55;font-size:13px;flex:1}.game-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);font-size:11px;font-weight:800;letter-spacing:.06em}.game-meta b{color:var(--coral)}.quick-guide{max-width:1130px;margin:30px auto 90px;background:var(--ink);color:#fff;border-radius:22px;display:grid;grid-template-columns:repeat(3,1fr);padding:28px 34px;gap:28px;box-shadow:10px 10px 0 var(--sun)}.quick-guide div{display:grid;grid-template-columns:36px 1fr;column-gap:12px}.quick-guide span{grid-row:1/3;font:italic 700 28px Georgia;color:var(--sun)}.quick-guide b{font-size:17px}.quick-guide p{grid-column:2;margin:5px 0 0;color:#c6d6dc;font-size:13px;line-height:1.5}.game-stage{position:fixed;inset:0;background:var(--cream);z-index:100;display:none;overflow:auto}.game-stage.open{display:block}.stage-bar{min-height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px clamp(14px,3vw,42px);border-bottom:1px solid rgba(23,58,77,.18);background:var(--paper);position:sticky;top:0;z-index:20}.back-btn{justify-self:start;border-radius:11px;padding:10px 14px;font-weight:800}.stage-title{text-align:center}.stage-title span{font-size:24px;margin-right:8px}.stage-title b{font-size:20px}.stage-title small{display:block;font-size:11px;color:var(--ink-2);margin-top:2px}.stage-stats{justify-self:end;display:flex;gap:8px}.stat-pill{background:var(--ink);color:white;border-radius:10px;padding:8px 12px;min-width:72px;text-align:center}.stat-pill small{display:block;font-size:9px;color:#bcd1da}.stat-pill b{font-size:18px}.stage-body{min-height:calc(100vh - 76px);padding:clamp(18px,3vw,42px);max-width:1280px;margin:auto}.setup-panel{max-width:760px;margin:5vh auto;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:var(--shadow);text-align:center}.setup-icon{font-size:72px}.setup-panel h2{font-size:34px;margin:10px 0}.setup-panel p{color:var(--ink-2);line-height:1.7}.setup-options{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:24px 0}.seg-btn{border:2px solid var(--ink);background:white;border-radius:12px;padding:10px 15px;font-weight:800;cursor:pointer}.seg-btn.selected{background:var(--sun);box-shadow:3px 3px 0 var(--ink)}.play-area{max-width:1020px;margin:auto}.question-card{background:var(--paper);border:2px solid var(--ink);border-radius:22px;padding:clamp(24px,5vw,56px);text-align:center;box-shadow:10px 10px 0 var(--sun);margin:4vh auto 30px;position:relative}.question-label{font-size:12px;letter-spacing:.16em;color:var(--coral);font-weight:900;text-transform:uppercase}.question-main{font-size:clamp(38px,7vw,78px);line-height:1.08;margin:18px 0;font-weight:850;word-break:break-word}.question-sub{color:var(--ink-2);font-size:16px}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.answer-btn{min-height:86px;border:2px solid var(--ink);background:var(--paper);border-radius:16px;padding:15px;font-size:clamp(18px,2.6vw,28px);font-weight:800;cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:.12s}.answer-btn:hover{transform:translateY(-2px);background:#fff}.answer-btn.correct{background:#bfe7d5;border-color:var(--good)}.answer-btn.wrong{background:#f6c5c0;border-color:var(--bad);animation:shake .25s}.feedback-line{min-height:36px;text-align:center;font-weight:800;font-size:18px;margin:20px}.progress-track{height:12px;border:1px solid var(--ink);background:white;border-radius:999px;overflow:hidden;margin:18px 0}.progress-track span{display:block;height:100%;background:var(--coral);width:0;transition:.25s}.result-card{max-width:700px;margin:7vh auto;background:var(--paper);border:2px solid var(--ink);border-radius:24px;padding:40px;text-align:center;box-shadow:12px 12px 0 var(--mint)}.result-card .result-emoji{font-size:72px}.result-card h2{font-size:38px;margin:8px}.result-number{font:800 70px Georgia;color:var(--coral)}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:880px;margin:20px auto}.memory-card{aspect-ratio:1.45;border:2px solid var(--ink);border-radius:14px;background:var(--ink);color:white;display:grid;place-items:center;padding:8px;font-size:clamp(16px,2.4vw,26px);font-weight:800;cursor:pointer;transition:.25s;transform-style:preserve-3d}.memory-card.open,.memory-card.done{background:var(--paper);color:var(--ink);transform:rotateY(180deg)}.memory-card.done{background:#bfe7d5;opacity:.72}.memory-card span{transform:rotateY(180deg);display:none}.memory-card.open span,.memory-card.done span{display:block}.meteor-field{height:55vh;min-height:390px;border:2px solid var(--ink);background:var(--ink);border-radius:24px;position:relative;overflow:hidden;box-shadow:10px 10px 0 var(--sky)}.meteor-word{position:absolute;left:50%;top:10%;transform:translateX(-50%);background:var(--sun);color:var(--ink);padding:17px 26px;border-radius:50px;font-size:clamp(28px,5vw,52px);font-weight:900;box-shadow:0 0 0 6px rgba(244,191,58,.16);animation:fall var(--fall-time,6s) linear forwards}.meteor-field:before,.meteor-field:after{content:"";position:absolute;width:3px;height:3px;background:white;box-shadow:50px 70px white,140px 20px white,230px 110px white,360px 50px white,490px 150px white,620px 40px white,760px 130px white,840px 70px white;opacity:.7}.meteor-field:after{left:80px;top:170px;transform:scale(.7)}.meteor-options{position:absolute;left:4%;right:4%;bottom:5%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.meteor-options button{min-height:72px;background:var(--paper);border:2px solid var(--sun);border-radius:14px;font-weight:900;font-size:18px;cursor:pointer}.letter-bank,.sentence-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:24px 0}.letter-btn,.word-chip{border:2px solid var(--ink);background:var(--paper);border-radius:11px;min-width:50px;min-height:50px;padding:9px 13px;font-size:23px;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.letter-btn.used,.word-chip.used{opacity:.25;pointer-events:none;box-shadow:none}.spell-line,.sentence-line{min-height:72px;border-bottom:4px solid var(--ink);display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;font-size:34px;font-weight:900;margin:12px auto;max-width:800px}.spell-line .cursor{width:3px;height:38px;background:var(--coral);animation:blink .7s infinite}.control-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.team-board{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}.team-panel{border:2px solid var(--ink);background:var(--paper);border-radius:18px;padding:18px;text-align:center}.team-panel.active{box-shadow:7px 7px 0 var(--sun);transform:translateY(-3px)}.team-panel.red{border-top:10px solid var(--coral)}.team-panel.blue{border-top:10px solid var(--sky)}.team-panel b{font-size:22px}.team-panel strong{display:block;font:800 46px Georgia;margin-top:5px}.territory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:720px;margin:26px auto}.territory-cell{aspect-ratio:1;border:2px solid var(--ink);border-radius:13px;background:var(--paper);font-size:clamp(20px,3vw,34px);font-weight:900;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}.territory-cell.red{background:#f3afa7}.territory-cell.blue{background:#a9d5e8}.treasure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:850px;margin:30px auto}.treasure{aspect-ratio:1.25;border:2px solid var(--ink);border-radius:17px;background:var(--sun);font-size:42px;cursor:pointer;box-shadow:6px 6px 0 var(--ink);transition:.18s}.treasure:hover{transform:translateY(-4px)}.treasure.opened{background:var(--paper);font-size:18px;font-weight:900;box-shadow:none;opacity:.7}.radar{width:min(420px,80vw);aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;margin:15px auto 30px;background:repeating-radial-gradient(circle,transparent 0 17%,rgba(114,184,163,.25) 18% 18.7%),var(--ink);position:relative;display:grid;place-items:center;overflow:hidden}.radar:before{content:"";position:absolute;width:50%;height:50%;left:50%;top:0;transform-origin:bottom left;background:conic-gradient(from 90deg,rgba(114,184,163,.7),transparent 35%);animation:sweep 2.4s linear infinite}.listen-btn{position:relative;z-index:2;width:110px;height:110px;border-radius:50%;border:3px solid white;background:var(--coral);color:white;font-size:42px;cursor:pointer;box-shadow:0 0 0 12px rgba(237,106,90,.25)}.odd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px;margin:36px auto}.odd-card{aspect-ratio:1.15;border:2px solid var(--ink);background:var(--paper);border-radius:18px;padding:12px;font-size:clamp(20px,3vw,32px);font-weight:900;cursor:pointer;box-shadow:6px 6px 0 var(--violet)}.relay-track{height:100px;border:2px solid var(--ink);background:var(--paper);border-radius:18px;position:relative;margin:25px 0;overflow:hidden}.relay-track:after{content:"🏁";position:absolute;right:14px;top:24px;font-size:43px}.runner{position:absolute;left:10px;font-size:40px;transition:.35s;z-index:2}.runner.a{top:2px}.runner.b{bottom:2px}.bingo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:780px;margin:20px auto}.bingo-cell{aspect-ratio:1.25;border:2px solid var(--ink);background:var(--paper);border-radius:12px;font-weight:850;font-size:clamp(13px,2vw,20px);cursor:pointer;padding:6px}.bingo-cell.marked{background:var(--sun);text-decoration:line-through}.bingo-clue{text-align:center;background:var(--ink);color:white;border-radius:17px;padding:18px;font-size:28px;font-weight:800;max-width:780px;margin:auto}.mini-modal{position:fixed;inset:0;background:rgba(23,58,77,.62);display:grid;place-items:center;z-index:140;padding:20px}.mini-card{width:min(620px,96vw);background:var(--paper);border-radius:22px;border:2px solid var(--ink);padding:28px;box-shadow:10px 10px 0 var(--sun);text-align:center}.modal{border:0;background:transparent;padding:18px;max-width:none;width:100%;height:100%}.modal::backdrop{background:rgba(23,58,77,.68);backdrop-filter:blur(4px)}.modal-card{width:min(720px,96vw);max-height:90vh;margin:auto;background:var(--paper);border:2px solid var(--ink);border-radius:22px;padding:28px;box-shadow:12px 12px 0 var(--sun);overflow:auto}.wide-modal .modal-card{width:min(1060px,96vw)}.modal-head{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px}.modal-head h2{margin:0;font-size:32px}.modal-head p:last-child{margin:5px 0 0;color:var(--ink-2)}.close-btn{border:0;background:transparent;font-size:34px;cursor:pointer;align-self:start}.bank-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 8px}.soft-btn,.upload-btn{border-radius:10px;padding:10px 14px;font-weight:750}.upload-btn input{display:none}.format-tip{font-size:12px;color:var(--ink-2)}.danger-text{color:var(--bad)}.bank-editor-wrap{overflow:auto;max-height:52vh;border:1px solid var(--line);border-radius:12px}.bank-table{width:100%;border-collapse:collapse;min-width:760px}.bank-table th{position:sticky;top:0;background:var(--ink);color:white;padding:10px;text-align:left;font-size:12px;z-index:1}.bank-table td{padding:6px;border-bottom:1px solid var(--line)}.bank-table input{width:100%;border:1px solid transparent;background:transparent;border-radius:7px;padding:8px}.bank-table input:focus{outline:2px solid var(--sun);background:white}.delete-row{border:0;background:transparent;color:var(--bad);font-size:20px;cursor:pointer}.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:18px}.modal-foot.right{justify-content:flex-end}.modal-foot>div{display:flex;align-items:center;gap:15px}.compact{padding:11px 18px}.record-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.summary-tile{background:#f1eee6;border-radius:12px;padding:16px;text-align:center}.summary-tile b{font-size:30px;display:block}.summary-tile small{color:var(--ink-2)}.record-list{display:grid;gap:8px;max-height:46vh;overflow:auto}.record-item{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;border-bottom:1px dashed var(--line);padding:11px 3px}.record-item small{color:var(--ink-2)}.empty{text-align:center;padding:45px;color:var(--ink-2)}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,25px);background:var(--ink);color:white;padding:12px 18px;border-radius:11px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:300;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@keyframes blink{50%{opacity:0}}@keyframes fall{from{top:8%}to{top:66%}}@keyframes sweep{to{transform:rotate(360deg)}}
.odd-card.correct{background:#bfe7d5;border-color:var(--good)}.odd-card.wrong{background:#f6c5c0;border-color:var(--bad);animation:shake .25s}.territory-cell:disabled{cursor:default;color:var(--ink)}button:disabled{cursor:default}.upload-btn:focus-within,.soft-btn:focus-visible,.primary-btn:focus-visible,.icon-btn:focus-visible,.quiet-btn:focus-visible,.back-btn:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.preset-section{margin:18px 0 14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#f4f0e7}.preset-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}.preset-heading .eyebrow{margin-bottom:4px}.preset-heading h3{margin:0;font-size:21px}.preset-heading>span{font-size:12px;font-weight:800;color:var(--ink-2);background:#fff;padding:7px 10px;border-radius:999px;border:1px solid var(--line)}.preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.preset-card{min-height:112px;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px;text-align:left;cursor:pointer;transition:.16s;display:flex;flex-direction:column}.preset-card:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 4px 0 var(--sun)}.preset-card.active{border:2px solid var(--ink);background:#fff7d7;box-shadow:3px 3px 0 var(--ink)}.preset-card b{font-size:15px}.preset-card span{font-size:11px;color:var(--coral);font-weight:850;margin:3px 0 7px}.preset-card small{font-size:10px;line-height:1.4;color:var(--ink-2)}.preset-tip{font-size:11px;color:var(--ink-2);margin:10px 0 0}
.bank-target-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:18px 0 0;padding:14px 16px;border:2px solid var(--ink);border-radius:14px;background:#fff}.bank-target-bar label{display:flex;align-items:center;gap:9px;font-weight:850}.bank-target-bar label span{white-space:nowrap}.bank-target-bar select{min-width:210px;border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:9px 34px 9px 11px;font-weight:800;color:var(--ink)}.bank-target-bar p{margin:0;color:var(--ink-2);font-size:12px;line-height:1.45}
@media(max-width:1050px){.game-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr 1fr}.hero-board{width:min(360px,80vw)}}
@media(max-width:760px){.topbar{height:66px;padding:0 14px}.quiet-btn span{display:none}.hero{grid-template-columns:1fr;padding-top:40px}.hero-board{margin-top:45px;width:min(330px,78vw)}.hero h1{font-size:52px}.game-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:start;flex-direction:column}.quick-guide{grid-template-columns:1fr;margin:20px 20px 70px}.stage-bar{grid-template-columns:auto 1fr auto}.back-btn{font-size:0;padding:9px}.back-btn:first-letter{font-size:20px}.stage-title small{display:none}.stage-stats .stat-pill:nth-child(n+3){display:none}.answers{grid-template-columns:1fr}.memory-grid{grid-template-columns:repeat(3,1fr)}.meteor-options,.odd-grid{grid-template-columns:repeat(2,1fr)}.treasure-grid{grid-template-columns:repeat(3,1fr)}.team-board{grid-template-columns:1fr 1fr}.bank-target-bar{grid-template-columns:1fr;gap:8px}.bank-target-bar label{align-items:stretch;flex-direction:column}.bank-target-bar select{width:100%;min-width:0}.preset-heading{align-items:start;flex-direction:column;gap:8px}.preset-grid{grid-template-columns:repeat(2,1fr)}.modal-foot{align-items:stretch;flex-direction:column}.modal-foot>div{justify-content:space-between}.record-item{grid-template-columns:1fr auto}.record-item small{display:none}}
@media(max-width:470px){.game-grid{grid-template-columns:1fr}.game-card{min-height:190px}.hero h1{font-size:44px}.hero-board{width:270px}.memory-grid{grid-template-columns:repeat(2,1fr)}.territory-grid{grid-template-columns:repeat(4,1fr);gap:5px}.treasure-grid{grid-template-columns:repeat(2,1fr)}.bingo-grid{gap:4px}.bingo-cell{font-size:11px}.stage-body{padding:12px}.question-card{padding:22px 14px}.setup-panel{padding:24px 16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Keep iPad and other touch browsers from treating the first tap as a sticky hover. */
button{touch-action:manipulation}
@media (hover:none),(pointer:coarse),(any-hover:none),(any-pointer:coarse){
  .game-card:hover,.game-card:nth-child(even):hover{transform:none;border-color:rgba(23,58,77,.18);box-shadow:0 4px 0 rgba(23,58,77,.09)}
  .game-card:active{transform:none;border-color:var(--ink);background:#fff8e8}
}

/* Keep live scoring readable from the back of a classroom. */
.stage-stats{gap:12px;align-items:stretch}
.stat-pill{display:flex;min-width:96px;min-height:66px;flex-direction:column;justify-content:center;padding:9px 16px 8px;border:2px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 rgba(23,58,77,.28)}
.stat-pill small{font-size:11px;font-weight:900;letter-spacing:.08em}
.stat-pill b{font-size:26px;line-height:1.05}
.stat-pill[data-stat="得分"]{color:var(--ink);background:var(--coral);box-shadow:0 5px 0 #b7493d}
.stat-pill[data-stat="得分"] small{color:var(--ink)}
.stat-pill[data-stat="连击"]{color:var(--ink);background:var(--sun);box-shadow:0 5px 0 #c48e13}
.stat-pill[data-stat="连击"] small{color:var(--ink)}
@media(max-width:760px){.stage-stats{gap:5px}.stat-pill{min-width:64px;min-height:54px;padding:6px 8px;border-radius:11px;box-shadow:0 3px 0 rgba(23,58,77,.28)}.stat-pill small{font-size:9px}.stat-pill b{font-size:20px}.stat-pill[data-stat="得分"],.stat-pill[data-stat="连击"]{box-shadow:0 3px 0 rgba(23,58,77,.36)}}
body.access-pending {
  overflow: hidden;
}

body.access-pending > :not(.access-gate) {
  visibility: hidden;
}

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  color: #173a4d;
  background:
    radial-gradient(circle at 18% 20%, rgba(244, 191, 58, .24), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(114, 184, 163, .28), transparent 36%),
    #f4f0e6;
}

.access-gate[hidden] {
  display: none;
}

.access-card {
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid rgba(23, 58, 77, .16);
  border-radius: 26px;
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 24px 70px rgba(23, 58, 77, .16);
}

.access-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(23, 58, 77, .12);
}

.access-guide-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 13px;
  margin: -8px 0 15px;
  border: 1px solid rgba(72, 143, 119, .24);
  border-radius: 12px;
  color: #285f50;
  background: #eaf5ef;
  text-decoration: none;
}

.access-guide-link b {
  font-size: 13px;
}

.access-guide-link i {
  color: #ed6a5a;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.access-guide-link:hover {
  border-color: #72b8a3;
  background: #f1faf5;
}

.guide-link {
  color: #285f50;
  text-decoration: none;
  background: #eaf5ef;
}

.access-brand > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #fffdf7;
  background: #173a4d;
  font: 800 21px/1 Georgia, serif;
}

.access-brand strong,
.access-brand small {
  display: block;
}

.access-brand strong {
  font-size: 18px;
}

.access-brand small {
  margin-top: 3px;
  color: #6f7f82;
}

.access-checking {
  padding: 22px 0 18px;
  text-align: center;
}

.access-checking h1,
.access-form h1 {
  margin: 14px 0 10px;
  font-size: clamp(27px, 6vw, 36px);
}

.access-checking p,
.access-form > p:not(.eyebrow):not(.access-message) {
  color: #667a7e;
  line-height: 1.7;
}

.access-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid rgba(23, 58, 77, .14);
  border-top-color: #ed6a5a;
  border-radius: 50%;
  animation: accessSpin .8s linear infinite;
}

@keyframes accessSpin { to { transform: rotate(360deg); } }

.access-form label {
  display: block;
  margin: 24px 0 8px;
  font-size: 13px;
  font-weight: 800;
}

.access-form input {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid rgba(23, 58, 77, .2);
  border-radius: 12px;
  outline: none;
  color: #173a4d;
  background: #fff;
  font: 700 16px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.access-form input:focus {
  border-color: #72b8a3;
  box-shadow: 0 0 0 4px rgba(114, 184, 163, .16);
}

.access-submit {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}

.access-message {
  min-height: 24px;
  margin: 11px 0 0;
  color: #c94c40;
  font-size: 13px;
}

.access-help {
  padding: 13px 14px;
  margin-top: 8px;
  border-radius: 12px;
  color: #52676b;
  background: #eef4ef;
  font-size: 13px;
  line-height: 1.6;
}

.access-home {
  display: block;
  margin-top: 22px;
  color: #52676b;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
}

.home-link {
  text-decoration: none;
}

@media (max-width: 620px) {
  .access-gate { padding: 12px; }
  .access-card { padding: 24px 20px; border-radius: 20px; }
  .home-link { display: none; }
}

/* Browser-provided English voice settings */
.sound-setting-btn {
  font-size: 17px;
  line-height: 1;
}

.sound-setting-btn[aria-pressed="false"] {
  color: #87979b;
  background: #eceae3;
  filter: grayscale(1);
}

.voice-modal-card {
  width: min(720px, 100%);
}

.voice-trust-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.voice-trust-row span {
  padding: 7px 10px;
  border: 1px solid rgba(72, 143, 119, .22);
  border-radius: 999px;
  background: #eaf5ef;
  color: #346c5b;
  font-size: 11px;
  font-weight: 850;
}

.voice-settings-panel {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f4f0e7;
}

.voice-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 17px;
  border-bottom: 1px dashed var(--line);
}

.voice-toggle-row b {
  font-size: 17px;
}

.voice-toggle-row p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  white-space: nowrap;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-switch span {
  position: relative;
  width: 46px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #d8d8d1;
  transition: .18s;
}

.toggle-switch span::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--ink);
  transition: .18s;
}

.toggle-switch input:checked + span {
  background: var(--mint);
}

.toggle-switch input:checked + span::after {
  transform: translateX(20px);
}

.toggle-switch input:focus-visible + span {
  outline: 4px solid var(--sun);
  outline-offset: 2px;
}

.toggle-switch em {
  min-width: 39px;
  font-style: normal;
  font-size: 12px;
  font-weight: 850;
}

.voice-field {
  display: grid;
  gap: 8px;
}

.voice-field > span,
.voice-range-grid b {
  font-size: 13px;
  font-weight: 850;
}

.voice-field select {
  width: 100%;
  padding: 12px 38px 12px 13px;
  border: 1px solid rgba(23, 58, 77, .24);
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font: 700 14px/1.4 inherit;
}

.voice-field select:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(114, 184, 163, .18);
}

.voice-field select:disabled {
  color: #7f8d90;
  background: #eae9e3;
}

.voice-status {
  min-height: 18px;
  margin: -10px 0 0;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.55;
}

.voice-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.voice-range-grid label {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.voice-range-grid label > span,
.voice-range-grid small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.voice-range-grid output {
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff0bf;
  color: #765915;
  font-size: 11px;
  font-weight: 850;
}

.voice-range-grid input {
  width: 100%;
  accent-color: var(--coral);
  cursor: pointer;
}

.voice-range-grid small {
  color: var(--ink-2);
  font-size: 10px;
}

.voice-range-grid i {
  font-style: normal;
}

.voice-preview-btn {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--sun);
  transition: .16s;
}

.voice-preview-btn:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--sun);
}

.voice-preview-btn:disabled {
  cursor: default;
  opacity: .5;
  transform: none;
}

.voice-preview-btn > span {
  grid-row: 1 / 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
}

.voice-preview-btn b {
  font-size: 14px;
}

.voice-preview-btn small {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 11px;
}

.voice-modal-foot p {
  max-width: 430px;
  margin: 0;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.5;
}

.voice-modal-foot {
  position: sticky;
  bottom: -28px;
  z-index: 2;
  padding: 16px 0 4px;
  background: linear-gradient(to bottom, rgba(255, 253, 248, .86), var(--paper) 26%);
}

@media (max-width: 760px) {
  .voice-modal-card { padding: 22px 18px; }
  .voice-range-grid { grid-template-columns: 1fr; }
  .voice-modal-foot p { max-width: none; }
  .voice-modal-foot .primary-btn { width: 100%; }
}

/* Games 11–20 */
.wordhunt-area,
.wheel-game,
.relay-game,
.bridge-game,
.auction-game,
.maze-game,
.fishing-game,
.detective-game,
.tower-game,
.rhythm-game {
  padding-block: clamp(8px, 2vw, 24px);
}

.hunt-clue {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 22px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--mint);
  text-align: center;
}

.hunt-clue .question-label { margin: 0 0 8px; }
.hunt-clue strong { font-size: clamp(30px, 5vw, 52px); }
.hunt-clue small { margin-top: 8px; color: var(--ink-2); font-weight: 750; }
.wordhunt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.hunt-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 82px;
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--sun);
  cursor: pointer;
  transition: .16s;
}
.hunt-card span { color: var(--coral); }
.hunt-card b { overflow-wrap: anywhere; font-size: clamp(16px, 2vw, 23px); }
.hunt-card:hover:not(:disabled) { transform: translateY(-3px); }
.hunt-card.found { color: #245d48; background: #bfe7d5; box-shadow: none; opacity: .7; }
.hunt-card.wrong { background: #f6c5c0; animation: shake .25s; }

.wheel-game { display: grid; justify-items: center; }
.wheel-shell { position: relative; width: min(330px, 74vw); aspect-ratio: 1; margin: 0 auto 26px; }
.wheel-pointer { position: absolute; z-index: 2; left: 50%; top: -9px; transform: translateX(-50%); color: var(--coral); font-size: 42px; filter: drop-shadow(0 2px 0 var(--ink)); }
.word-wheel {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 6px solid var(--ink);
  border-radius: 50%;
  background: conic-gradient(var(--sun) 0 12.5%, var(--mint) 12.5% 25%, var(--coral) 25% 37.5%, var(--sky) 37.5% 50%, #c3a4d8 50% 62.5%, #f09a62 62.5% 75%, #9bc56b 75% 87.5%, #e58fa4 87.5%);
  box-shadow: 10px 10px 0 rgba(23,58,77,.15);
  transition: transform .72s cubic-bezier(.15,.75,.22,1);
}
.word-wheel::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); }
.word-wheel span { position: relative; z-index: 1; max-width: 43%; overflow-wrap: anywhere; text-align: center; font-size: clamp(25px, 5vw, 42px); font-weight: 900; transition: transform .72s cubic-bezier(.15,.75,.22,1); }
.wheel-question { width: min(820px, 100%); min-height: 78px; text-align: center; }
.compact-question { padding-block: 18px; margin: 8px auto 20px; box-shadow: 6px 6px 0 var(--sun); }
.compact-question .question-main { margin: 5px 0; font-size: clamp(30px, 5vw, 52px); }

.relay-lanes { padding: 8px 12px; margin: 18px 0 8px; border-radius: 20px; background: rgba(255,253,248,.65); }
.relay-lanes .relay-track { height: 72px; margin: 14px 0; background: repeating-linear-gradient(90deg,#fff 0 58px,#edf0ec 58px 60px); }
.relay-lanes .relay-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(23,58,77,.16); }
.relay-lanes .relay-track::after { top: 11px; }
.relay-lanes .runner { top: 10px; bottom: auto; }
.lane-name { position: absolute; z-index: 1; left: 10px; bottom: 4px; color: var(--ink-2); font-size: 10px; font-weight: 900; }

.bridge-progress { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; max-width: 720px; margin: 0 auto 10px; }
.bridge-progress span { display: grid; aspect-ratio: 1.45; place-items: center; border: 2px solid var(--ink); border-radius: 9px 9px 3px 3px; background: var(--paper); font-weight: 900; }
.bridge-progress span.built { background: var(--mint); }
.bridge-progress span.active { background: var(--sun); box-shadow: 3px 3px 0 var(--ink); transform: translateY(-3px); }
.bridge-sentence { margin: 22px 0 18px; font-size: clamp(25px, 4vw, 44px); font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.bridge-gap { display: inline-block; min-width: 118px; color: var(--coral); border-bottom: 4px solid var(--coral); }
.bridge-clue { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.6; }

.auction-panel { max-width: 860px; padding: clamp(24px, 4vw, 42px); margin: 20px auto; border: 2px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 10px 10px 0 var(--sun); text-align: center; }
.auction-hammer { display: block; font-size: 52px; }
.auction-panel .question-main { margin: 8px 0; }
.auction-panel > p:not(.question-label) { color: var(--ink-2); }
.bid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.bid-row button { min-height: 58px; padding: 10px; border: 2px solid var(--ink); border-radius: 13px; background: #fff7d7; font-weight: 850; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.bid-row button:hover:not(:disabled) { transform: translateY(-2px); }
.auction-bid { margin: 16px 0 10px; color: var(--coral); font-size: 15px; font-weight: 900; }

.maze-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(380px, 1.22fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.maze-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px; border: 3px solid var(--ink); border-radius: 20px; background: var(--ink); box-shadow: 9px 9px 0 var(--mint); }
.maze-cell { display: grid; aspect-ratio: 1; place-items: center; border-radius: 10px; background: #315668; font-size: clamp(16px, 3vw, 30px); }
.maze-cell.route { background: #fffdf8; }
.maze-cell.visited { background: #bfe7d5; color: var(--good); }
.maze-cell.current { background: var(--sun); box-shadow: inset 0 0 0 3px var(--ink); }
.maze-cell.goal { background: #f4d885; }
.maze-caption { margin: 18px 0 0; color: var(--ink-2); text-align: center; font-size: 12px; font-weight: 850; }
.maze-layout .question-card { margin-top: 0; }

.bait-card { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 520px; padding: 17px 22px; margin: 0 auto 18px; border: 2px solid var(--ink); border-radius: 18px; background: var(--sun); box-shadow: 6px 6px 0 var(--ink); }
.bait-card small { font-weight: 800; }
.bait-card strong { font-size: clamp(27px, 4vw, 42px); }
.fishing-pond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-height: 390px; padding: clamp(18px, 3vw, 30px); border: 3px solid var(--ink); border-radius: 26px; background: linear-gradient(#bce6ef,#73b8cf 48%,#477f9e); box-shadow: 10px 10px 0 rgba(23,58,77,.2); overflow: hidden; }
.fish-word { align-self: center; min-width: 0; min-height: 92px; padding: 12px; border: 2px solid var(--ink); border-radius: 50% 45% 45% 50%; background: var(--paper); cursor: pointer; box-shadow: 5px 5px 0 rgba(23,58,77,.28); animation: fishFloat 2.4s ease-in-out infinite alternate; animation-delay: var(--fish-delay); }
.fish-word:nth-child(2n) { animation-direction: alternate-reverse; }
.fish-word span { display: block; font-size: 27px; }
.fish-word b { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(15px, 2vw, 22px); }
.fish-word.caught { background: #bfe7d5; transform: translateY(-9px); animation: none; }
.fish-word.missed { opacity: .42; animation: none; }
@keyframes fishFloat { to { transform: translateX(8px) translateY(-7px); } }

.translation-case { position: relative; max-width: 820px; padding: clamp(34px, 6vw, 68px) 22px; margin: 20px auto 28px; border: 2px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 10px 10px 0 var(--violet); text-align: center; }
.case-stamp { position: absolute; top: 14px; left: 16px; color: var(--coral); font: 800 12px/1 ui-monospace,monospace; letter-spacing: .12em; }
.translation-case strong,.translation-case b { display: block; overflow-wrap: anywhere; font-size: clamp(34px, 6vw, 66px); }
.translation-case i { display: block; margin: 8px; color: var(--coral); font-size: 28px; font-style: normal; }
.translation-case p { margin: 20px 0 0; color: var(--ink-2); font-weight: 800; }
.truth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: auto; }
.truth-btn { min-height: 86px; border: 2px solid var(--ink); border-radius: 17px; background: var(--paper); font-size: clamp(20px, 3vw, 30px); font-weight: 900; cursor: pointer; box-shadow: 5px 5px 0 var(--ink); }
.truth-btn.true:hover:not(:disabled),.truth-btn.true.correct { background: #bfe7d5; }
.truth-btn.false:hover:not(:disabled),.truth-btn.false.correct { background: #f6d296; }
.truth-btn.wrong { background: #f6c5c0; animation: shake .25s; }

.tower-layout { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(400px, 1.3fr); gap: clamp(24px, 5vw, 58px); align-items: end; }
.tower-scene { display: grid; min-height: 510px; align-content: end; justify-items: center; padding: 20px; border-radius: 24px; background: linear-gradient(#dff1f4 0 70%,#e9d8aa 70%); border: 2px solid var(--ink); box-shadow: 9px 9px 0 var(--sun); overflow: hidden; }
.tower-stack { display: flex; width: 86%; flex-direction: column-reverse; align-items: center; }
.tower-stack span { display: grid; width: calc(100% - var(--narrow,0px)); max-width: 240px; height: 35px; place-items: center; border: 2px solid var(--ink); border-radius: 7px; background: var(--block-color); font: 800 12px/1 Georgia; animation: blockDrop .3s ease-out; }
.tower-stack span:nth-child(3n+2) { width: 88%; transform: translateX(5px); }
.tower-stack span:nth-child(3n) { width: 80%; transform: translateX(-5px); }
.tower-ground { width: 100%; height: 9px; border-radius: 99px; background: var(--ink); }
.tower-scene small { margin-top: 10px; font-weight: 850; }
.tower-layout .question-card { margin-top: 0; }
@keyframes blockDrop { from { opacity: 0; transform: translateY(-36px); } }

.echo-console { max-width: 760px; padding: clamp(28px, 5vw, 50px); margin: 20px auto 30px; border: 2px solid var(--ink); border-radius: 24px; background: var(--ink); color: #fff; box-shadow: 10px 10px 0 var(--sky); text-align: center; }
.echo-wave { display: flex; height: 82px; align-items: center; justify-content: center; gap: 7px; margin-bottom: 20px; }
.echo-wave i { width: clamp(6px, 1.2vw, 11px); height: 28px; border-radius: 99px; background: var(--mint); animation: echoPulse .8s ease-in-out infinite alternate; }
.echo-wave i:nth-child(2),.echo-wave i:nth-child(8) { height: 44px; animation-delay: -.12s; }
.echo-wave i:nth-child(3),.echo-wave i:nth-child(7) { height: 62px; animation-delay: -.24s; }
.echo-wave i:nth-child(4),.echo-wave i:nth-child(6) { height: 50px; animation-delay: -.36s; }
.echo-wave i:nth-child(5) { height: 78px; animation-delay: -.48s; }
.echo-play { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 20px; border: 2px solid #fff; border-radius: 999px; background: var(--coral); color: #fff; font-size: 22px; font-weight: 900; cursor: pointer; }
.echo-play span { font-size: 15px; }
.echo-console p { margin: 16px 0 0; color: #c6d6dc; }
.echo-answers { max-width: 840px; margin: auto; }
@keyframes echoPulse { to { transform: scaleY(.38); opacity: .55; } }

.hunt-card:focus-visible,.bid-row button:focus-visible,.fish-word:focus-visible,.truth-btn:focus-visible,.echo-play:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .wordhunt-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hunt-card { min-height: 70px; padding: 10px; }
  .maze-layout,.tower-layout { grid-template-columns: 1fr; }
  .maze-grid { width: min(390px, 94%); margin: auto; }
  .fishing-pond { min-height: 330px; gap: 8px; padding: 12px; }
  .tower-scene { min-height: 370px; }
  .tower-layout .question-card { margin-top: 22px; }
}

@media (max-width: 470px) {
  .wordhunt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hunt-card { grid-template-columns: 12px minmax(0,1fr); }
  .wheel-shell { width: min(270px, 78vw); }
  .relay-lanes { padding-inline: 5px; }
  .bridge-progress { gap: 3px; }
  .bridge-progress span { border-width: 1px; font-size: 11px; }
  .bid-row { grid-template-columns: 1fr; }
  .fishing-pond { grid-template-columns: repeat(2, minmax(0,1fr)); min-height: 420px; }
  .fish-word { min-height: 84px; padding: 8px 5px; }
  .truth-actions { grid-template-columns: 1fr; gap: 10px; }
  .truth-btn { min-height: 68px; }
  .tower-layout { min-width: 0; }
  .tower-scene { min-height: 340px; }
  .echo-wave { gap: 4px; }
}

/* Games 21–30 */
.sorter-game,.snapshot-game,.scanner-game,.ladder-game,.echo-code-game,
.repair-game,.wordsearch-game,.matchline-game,.hotseat-game,.cinema-game {
  padding-block: clamp(8px, 2vw, 24px);
}

.sort-conveyor { max-width: 760px; margin: 0 auto 30px; padding: 18px; border: 3px solid var(--ink); border-radius: 22px; background: #e7e4dc; box-shadow: 9px 9px 0 var(--sun); }
.conveyor-belt { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 120px; padding: 18px 24px; border: 2px dashed rgba(23,58,77,.42); border-radius: 16px; background: repeating-linear-gradient(135deg,#fffdf8 0 20px,#f0ede5 20px 40px); }
.conveyor-belt > span { color: var(--coral); font-size: 24px; }
.conveyor-belt strong { overflow-wrap: anywhere; text-align: center; font-size: clamp(35px,6vw,64px); }
.sort-bins { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.sort-bin { min-width: 0; min-height: 180px; padding: 20px 12px; border: 3px solid var(--ink); border-radius: 18px 18px 28px 28px; background: var(--bin-color); box-shadow: 7px 7px 0 var(--ink); cursor: pointer; transition: .16s; }
.sort-bin:hover:not(:disabled) { transform: translateY(-5px); }
.sort-bin > span { display: block; font-size: 48px; }
.sort-bin > b { display: block; margin: 8px 0; overflow-wrap: anywhere; font-size: clamp(20px,3vw,30px); }
.sort-bin small { font-weight: 800; }
.sort-bin i { font-style: normal; }
.sort-bin.correct { background: #bfe7d5; }
.sort-bin.wrong { background: #f6c5c0; animation: shake .25s; }

.snapshot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; max-width: 820px; padding: 18px 22px; margin: 0 auto 22px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 6px 6px 0 var(--mint); text-align: center; }
.snapshot-head .question-label { width: 100%; margin: 0; }
.snapshot-head strong { overflow-wrap: anywhere; font-size: clamp(24px,4vw,38px); }
.snapshot-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; max-width: 900px; margin: auto; }
.snapshot-card { min-width: 0; min-height: 200px; padding: 16px 10px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 6px 6px 0 var(--sun); cursor: pointer; transition: .25s; }
.snapshot-card small,.snapshot-card b { display: block; }
.snapshot-card small { margin-bottom: 20px; color: var(--ink-2); font-size: 11px; font-weight: 850; }
.snapshot-card b { overflow-wrap: anywhere; font-size: clamp(22px,3vw,34px); }
.snapshot-card.hidden-word { background: var(--ink); color: #fff; transform: rotateY(180deg); }
.snapshot-card.hidden-word b { transform: rotateY(180deg); font-size: 44px; }
.snapshot-card.correct { background: #bfe7d5; }
.snapshot-card.wrong { background: #f6c5c0; animation: shake .25s; }

.scanner-screen { position: relative; max-width: 760px; padding: clamp(28px,5vw,52px); margin: 0 auto 26px; border: 4px solid var(--ink); border-radius: 22px; background: #0e3042; color: #fff; box-shadow: 10px 10px 0 var(--mint); text-align: center; overflow: hidden; }
.scanner-screen small,.scanner-screen strong { position: relative; z-index: 1; display: block; }
.scanner-screen small { color: #a9ced7; font-weight: 850; letter-spacing: .14em; }
.scanner-screen strong { margin: 12px 0; overflow-wrap: anywhere; color: var(--sun); font-size: clamp(40px,7vw,70px); }
.scanner-screen p { position: relative; z-index: 1; margin: 0; color: #c8dade; }
.scan-beam { position: absolute; z-index: 0; left: 0; right: 0; height: 4px; background: #6effcb; box-shadow: 0 0 18px #6effcb; animation: scannerBeam 2s ease-in-out infinite alternate; }
@keyframes scannerBeam { from { top: 12%; } to { top: 86%; } }
.scanner-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; max-width: 850px; margin: auto; }
.scan-option { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; min-width: 0; min-height: 88px; padding: 13px; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; }
.scan-option i { padding: 7px; border-radius: 7px; background: #dfeaec; color: var(--ink-2); font: 800 9px/1 ui-monospace,monospace; font-style: normal; }
.scan-option b { overflow-wrap: anywhere; font-size: clamp(20px,3vw,30px); }
.scan-option.correct { background: #bfe7d5; }
.scan-option.wrong { background: #f6c5c0; animation: shake .25s; }

.clue-ladder { max-width: 760px; padding: 24px; margin: 0 auto 24px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 9px 9px 0 var(--sky); }
#ladderSteps { display: grid; gap: 9px; }
.clue-step { --indent:0px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; width: calc(100% - var(--indent)); min-height: 58px; padding: 8px 14px 8px 8px; margin-left: var(--indent); border: 2px dashed var(--line); border-radius: 12px; color: #8c9698; background: #f1efe8; }
.clue-step:nth-child(2) { --indent:18px; }
.clue-step:nth-child(3) { --indent:36px; }
.clue-step:nth-child(4) { --indent:54px; }
.clue-step span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #d9d7d0; font-weight: 900; }
.clue-step b { overflow-wrap: anywhere; }
.clue-step.revealed { border-style: solid; border-color: var(--ink); color: var(--ink); background: #fff7d7; box-shadow: 3px 3px 0 var(--ink); }
.clue-step.revealed span { background: var(--sun); }
.ladder-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
#ladderChoices { max-width: 850px; margin: auto; }

.echo-code-console { max-width: 760px; padding: clamp(28px,5vw,46px); margin: 0 auto 24px; border: 3px solid var(--ink); border-radius: 24px; background: #153f54; color: #fff; box-shadow: 10px 10px 0 var(--violet); text-align: center; }
.echo-code-rings { position: relative; display: grid; width: 126px; aspect-ratio: 1; place-items: center; margin: 0 auto 16px; }
.echo-code-rings i { position: absolute; inset: 0; border: 3px solid rgba(114,184,163,.72); border-radius: 50%; }
.echo-code-rings i:nth-child(2) { inset: 13px; }
.echo-code-rings i:nth-child(3) { inset: 26px; }
.echo-code-rings span { z-index: 1; font-size: 34px; }
.echo-code-rings.speaking i { animation: echoRing .75s ease-out infinite; }
.echo-code-rings.speaking i:nth-child(2) { animation-delay: .12s; }
.echo-code-rings.speaking i:nth-child(3) { animation-delay: .24s; }
@keyframes echoRing { 70% { opacity:.18; transform:scale(1.14); } }
.echo-code-console > strong { display: block; font-size: clamp(25px,4vw,38px); }
.echo-code-console > p { color: #c6d9df; }
.echo-replay-btn { min-height: 50px; padding: 10px 18px; border: 2px solid #fff; border-radius: 999px; background: var(--coral); color: #fff; font-weight: 900; cursor: pointer; }
.echo-slots { display: flex; justify-content: center; gap: 9px; min-height: 54px; margin: 18px 0; }
.echo-slots span { display: grid; min-width: 54px; padding: 8px; place-items: center; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); font-weight: 900; }
.echo-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-width: 850px; margin: auto; }
.echo-choice { min-width: 0; min-height: 70px; padding: 10px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); overflow-wrap: anywhere; font-size: clamp(17px,2.5vw,24px); font-weight: 900; cursor: pointer; }
.echo-choice.chosen { background: #bfe7d5; box-shadow: none; }
.echo-choice.wrong { background: #f6c5c0; animation: shake .25s; }

.repair-board { max-width: 920px; padding: clamp(26px,5vw,50px); margin: 0 auto 24px; border: 3px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 10px 10px 0 #f09a62; text-align: center; }
.repair-sign { display: inline-block; padding: 6px 11px; border-radius: 7px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.repair-board > p,.repair-board > small { color: var(--ink-2); }
.repair-sentence { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 25px 0; }
.repair-token { min-width: 0; padding: 9px 12px; border: 2px solid transparent; border-radius: 10px; background: #f1eee6; overflow-wrap: anywhere; font-size: clamp(19px,3vw,30px); font-weight: 850; cursor: pointer; }
.repair-token:hover:not(:disabled) { border-color: var(--ink); background: #fff; }
.repair-token.found { border-color: var(--coral); background: #f6d2cd; text-decoration: line-through; }
.repair-token.wrong { background: #f6c5c0; animation: shake .25s; }
.repair-toolbox { max-width: 850px; padding: 18px; margin: auto; border: 2px dashed var(--ink); border-radius: 18px; background: #efece3; }
.repair-toolbox > b { display: block; margin-bottom: 14px; }

.wordsearch-clue { display: grid; justify-items: center; gap: 6px; max-width: 640px; padding: 16px 20px; margin: 0 auto 18px; border: 2px solid var(--ink); border-radius: 17px; background: var(--sun); box-shadow: 5px 5px 0 var(--ink); text-align: center; }
.wordsearch-clue small { font-weight: 800; }
.wordsearch-clue strong { overflow-wrap: anywhere; font-size: clamp(27px,4vw,42px); }
.wordsearch-clue span { min-height: 22px; font: 800 16px/1.4 ui-monospace,monospace; letter-spacing: .12em; }
.letter-map { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 5px; width: min(610px,100%); padding: 12px; margin: auto; border: 3px solid var(--ink); border-radius: 21px; background: #173a4d; box-shadow: 9px 9px 0 var(--mint); }
.letter-cell { min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid rgba(23,58,77,.5); border-radius: 8px; background: var(--paper); font: 900 clamp(15px,3vw,25px)/1 ui-monospace,monospace; text-transform: uppercase; cursor: pointer; }
.letter-cell:hover:not(:disabled) { background: #fff1b8; }
.letter-cell.selected { background: var(--sun); box-shadow: inset 0 0 0 2px var(--ink); }
.letter-cell.wrong { background: #f6c5c0; animation: shake .25s; }

.matchline-board { display: grid; grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr); gap: 14px; max-width: 930px; margin: 10px auto; align-items: center; }
.match-column { display: grid; min-width: 0; gap: 10px; }
.match-column > small { color: var(--ink-2); text-align: center; font-weight: 850; }
.match-card { min-width: 0; min-height: 66px; padding: 10px; border: 2px solid var(--ink); border-radius: 13px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); overflow-wrap: anywhere; font-size: clamp(16px,2.6vw,25px); font-weight: 900; cursor: pointer; transition: .15s; }
.match-card.selected { background: var(--sun); transform: translateX(5px); }
.match-card.matched { background: #bfe7d5; box-shadow: none; opacity: .7; }
.match-card.wrong { background: #f6c5c0; animation: shake .25s; }
.match-status { display: grid; justify-items: center; gap: 8px; text-align: center; }
.match-status > span { font-size: 38px; }
.match-status > b { color: var(--coral); font-size: 18px; }
.match-status > small { color: var(--ink-2); font-weight: 800; line-height: 1.5; }

.hotseat-card { position: relative; max-width: 780px; padding: clamp(34px,6vw,68px) 24px; margin: 0 auto 24px; border: 3px solid var(--ink); border-radius: 28px; background: linear-gradient(145deg,#fffdf8,#fff0d3); box-shadow: 11px 11px 0 var(--coral); text-align: center; overflow: hidden; }
.hotseat-flame { position: absolute; top: -22px; right: 12px; font-size: 92px; opacity: .15; transform: rotate(12deg); }
.hotseat-card small { display: inline-block; padding: 6px 11px; border-radius: 999px; background: var(--sun); font-weight: 900; }
.hotseat-card strong,.hotseat-card b { display: block; max-width: 100%; overflow-wrap: anywhere; }
.hotseat-card strong { margin: 18px 0 6px; font-size: clamp(48px,9vw,88px); }
.hotseat-card b { color: var(--coral); font-size: clamp(25px,4vw,38px); }
.hotseat-card p { max-width: 570px; margin: 22px auto 0; color: var(--ink-2); line-height: 1.6; }
.hotseat-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 700px; margin: auto; }
.hotseat-controls button { min-height: 66px; }
.hotseat-clock { text-align: center; font-size: 14px; font-weight: 800; }
.hotseat-clock b { color: var(--coral); font-size: 24px; }

.cinema-screen { position: relative; max-width: 800px; min-height: 300px; padding: clamp(34px,6vw,64px); margin: 0 auto 28px; border: 6px solid #0c2938; border-radius: 22px; background: radial-gradient(circle,#315668,#102f40 68%); color: #fff; box-shadow: 10px 10px 0 var(--sun); text-align: center; overflow: hidden; }
.cinema-screen > span,.cinema-screen > strong,.cinema-screen > p,.cinema-screen > button { position: relative; z-index: 2; }
.cinema-screen > span { display: block; font-size: 52px; }
.cinema-screen > strong { display: block; margin: 10px 0; font-size: clamp(27px,5vw,46px); }
.cinema-screen > p { color: #c9dbe0; }
.cinema-curtain { position: absolute; z-index: 1; top: 0; bottom: 0; width: 19%; background: repeating-linear-gradient(90deg,#9b3234 0 13px,#c64e4d 13px 25px); }
.cinema-curtain.left { left: 0; border-radius: 0 45% 45% 0; }
.cinema-curtain.right { right: 0; border-radius: 45% 0 0 45%; }
.cinema-play { min-height: 50px; padding: 10px 18px; border: 2px solid #fff; border-radius: 999px; background: var(--coral); color: #fff; font-weight: 900; cursor: pointer; }
.cinema-answers { max-width: 850px; margin: auto; }

.sort-bin:focus-visible,.snapshot-card:focus-visible,.scan-option:focus-visible,
.echo-replay-btn:focus-visible,.echo-choice:focus-visible,.repair-token:focus-visible,
.letter-cell:focus-visible,.match-card:focus-visible,.cinema-play:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 3px;
}

@media (max-width:760px) {
  .sort-bins { gap: 9px; }
  .sort-bin { min-height: 145px; padding-inline: 7px; }
  .snapshot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .snapshot-card { min-height: 130px; }
  .echo-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .repair-board { padding-inline: 14px; }
  .matchline-board { grid-template-columns: minmax(0,1fr) 58px minmax(0,1fr); gap: 7px; }
  .match-status > span { font-size: 28px; }
  .match-status > small { font-size: 9px; }
}

@media (max-width:470px) {
  .conveyor-belt { grid-template-columns: 18px minmax(0,1fr); padding: 12px; }
  .conveyor-belt .soft-btn { grid-column: 1 / -1; justify-self: center; }
  .sort-bins { grid-template-columns: 1fr; }
  .sort-bin { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; min-height: 78px; border-radius: 14px; text-align: left; }
  .sort-bin > span { font-size: 32px; }
  .sort-bin > b { font-size: 19px; }
  .sort-bin small { font-size: 10px; }
  .snapshot-head { padding-inline: 12px; }
  .scanner-options { gap: 8px; }
  .scan-option { grid-template-columns: 1fr; gap: 6px; padding: 8px; }
  .clue-ladder { padding: 14px 9px; }
  .clue-step { padding-right: 7px; }
  .clue-step:nth-child(2) { --indent:10px; }
  .clue-step:nth-child(3) { --indent:20px; }
  .clue-step:nth-child(4) { --indent:30px; }
  .echo-slots { gap: 4px; }
  .echo-slots span { min-width: 0; flex: 1; padding-inline: 3px; overflow-wrap: anywhere; }
  .repair-token { padding: 8px; }
  .letter-map { gap: 2px; padding: 6px; border-width: 2px; }
  .letter-cell { border-radius: 5px; font-size: clamp(12px,4vw,18px); }
  .matchline-board { grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); gap: 5px; }
  .match-card { min-height: 58px; padding: 6px 4px; font-size: 14px; }
  .match-status > span { font-size: 22px; }
  .match-status > b { font-size: 12px; }
  .hotseat-controls { grid-template-columns: 1fr; gap: 9px; }
  .cinema-screen { min-height: 270px; padding-inline: 42px; border-width: 3px; }
  .cinema-curtain { width: 13%; }
}

/* Excel word-bank guidance */
.excel-tip{margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:#eef8f2;border:1px solid rgba(49,128,93,.22);color:#245f46}.excel-tip b{color:#173a4d}

/* Answer meanings are revealed only after an odd-one-out choice. */
.odd-card span{display:block}.odd-meaning{display:block;margin-top:8px;color:#5d7380;font-size:.48em;line-height:1.35}.odd-meaning[hidden]{display:none}

/* Classroom Pets 30-day game trial */
.classroom-trial-banner{max-width:1180px;margin:14px auto 0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(23,58,77,.15);border-radius:14px;background:#fff8df;box-shadow:0 5px 18px rgba(23,58,77,.08)}.classroom-trial-banner div{display:flex;align-items:center;gap:12px;min-width:0}.classroom-trial-banner b{color:#a24d3d;white-space:nowrap}.classroom-trial-banner span{color:var(--ink-2);font-size:13px;line-height:1.5}.classroom-trial-banner button,.access-preview-return{padding:9px 13px;border:1px solid rgba(23,58,77,.22);border-radius:10px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer;white-space:nowrap}.classroom-trial-banner.expired{border-color:rgba(181,65,58,.28);background:#fff0ed}.classroom-trial-banner.expired button{border-color:var(--coral);background:var(--coral);color:#fff}.access-preview-return{width:100%;margin-top:8px;background:transparent}.access-preview-return[hidden]{display:none}@media(max-width:720px){.classroom-trial-banner{margin:10px 12px 0;align-items:flex-start;flex-direction:column}.classroom-trial-banner div{align-items:flex-start;flex-direction:column;gap:3px}.classroom-trial-banner button{width:100%}}
.classroom-trial-banner.ending{border-color:rgba(222,126,56,.38);background:#fff0dc}

/* Purchase offer shown after a completed game. */
.game-purchase-overlay{position:fixed;inset:0;z-index:100100;display:grid;place-items:center;padding:18px;background:rgba(15,34,45,.72);backdrop-filter:blur(7px)}
.game-purchase-card{position:relative;width:min(720px,100%);max-height:92vh;overflow:auto;padding:34px;border:2px solid #173a4d;border-radius:24px;background:#fffdf7;box-shadow:14px 14px 0 #f4be58;text-align:left}
.game-purchase-close{position:absolute;right:15px;top:12px;width:40px;height:40px;border:0;background:transparent;color:#173a4d;font-size:32px;cursor:pointer}.game-purchase-kicker{color:#c75b4b;font-size:12px;font-weight:900;letter-spacing:.14em}.game-purchase-card h2{max-width:580px;margin:10px 38px 8px 0;font-size:clamp(26px,4vw,39px);line-height:1.2}.game-purchase-card>p{margin:0 0 22px;color:#607683;line-height:1.7}
.game-purchase-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}.game-purchase-plan{position:relative;padding:21px;border:1px solid #cad6dc;border-radius:17px;background:#fff}.game-purchase-plan.recommended{border:2px solid #c75b4b;background:#fff6ed}.game-purchase-best{position:absolute;right:12px;top:11px;padding:4px 8px;border-radius:999px;background:#c75b4b;color:#fff;font-size:11px;font-weight:900}.game-purchase-plan h3{margin:0 0 7px;font-size:19px}.game-purchase-plan p{min-height:42px;margin:0;color:#607683;font-size:13px;line-height:1.55}.game-purchase-plan strong{display:block;margin:17px 0 12px;color:#173a4d;font-size:38px}.game-purchase-plan strong small{font-size:18px}.game-purchase-plan button{width:100%;min-height:46px;border:0;border-radius:11px;background:#173a4d;color:#fff;font-weight:900;cursor:pointer}.game-purchase-plan.recommended button{background:#c75b4b}.game-purchase-plan button:disabled{opacity:.5;cursor:not-allowed}
.game-purchase-actions{display:flex;justify-content:center;gap:10px;margin-top:17px}.game-purchase-actions button{padding:9px 13px;border:0;background:transparent;color:#49626f;font-weight:800;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.game-purchase-message{min-height:22px;margin-top:8px;color:#b5413a;text-align:center;font-size:13px}.game-purchase-loading{grid-column:1/-1;padding:40px;text-align:center;color:#607683}.game-purchase-toast{position:fixed;left:50%;top:90px;z-index:100200;padding:13px 19px;border-radius:12px;background:#21785d;color:#fff;box-shadow:0 12px 32px rgba(15,34,45,.25);font-weight:900;transform:translateX(-50%)}.classroom-trial-banner.paid{border-color:rgba(33,120,93,.3);background:#eaf8f1}
@media(max-width:620px){.game-purchase-overlay{align-items:end;padding:8px}.game-purchase-card{max-height:94vh;padding:26px 18px 20px;border-radius:22px 22px 12px 12px;box-shadow:none}.game-purchase-plans{grid-template-columns:1fr}.game-purchase-plan{padding:17px}.game-purchase-plan p{min-height:0}.game-purchase-plan strong{margin:10px 0;font-size:32px}.game-purchase-actions{flex-direction:column;gap:0}.game-purchase-toast{top:74px;width:calc(100% - 24px);text-align:center}}
.game-native-confirmation{padding:8px 0;color:#253530}.game-native-product{display:block;font-size:18px}.game-native-order{overflow-wrap:anywhere;color:#64756a;font-size:12px}.game-native-status{min-height:24px;color:#17624e;font-size:14px}.game-native-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.game-native-actions button{min-height:40px;padding:9px 13px;border:1px solid #cbdad0;border-radius:7px;background:#fff;color:#17624e;font:600 13px system-ui,sans-serif;cursor:pointer}.game-native-actions .game-native-check{border-color:#087a5d;background:#087a5d;color:#fff}.game-native-actions button:disabled{opacity:.6;cursor:wait}.game-native-help{padding:10px 12px;border:1px solid #d7e5dc;border-radius:6px;background:#f5faf6;color:#53675b;font-size:13px;line-height:1.6}.game-native-help[hidden]{display:none}