@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap');
:root{font-family:Inter,system-ui,sans-serif;color:#eef7ff;background:#07111f;font-synthesis:none;--bg:#07111f;--panel:#0d1b2d;--panel2:#10243b;--cyan:#39e6d7;--blue:#3a86ff;--violet:#8b5cf6;--pink:#ff5da2;--green:#5ee38d;--yellow:#ffd35a;--danger:#ff646d;--text:#eef7ff;--muted:#93a9bd;--line:rgba(255,255,255,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 10% 0%,#0d2840 0,transparent 34%),radial-gradient(circle at 90% 14%,#1b1740 0,transparent 30%),var(--bg);overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}.app-shell{min-height:100vh;position:relative;isolation:isolate}.grid-bg{position:fixed;inset:0;z-index:-3;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 76%)}.ambient{position:fixed;border-radius:50%;filter:blur(90px);z-index:-2;opacity:.3}.a1{width:420px;height:420px;background:#0ee6ca;left:-180px;top:360px}.a2{width:480px;height:480px;background:#7c3aed;right:-260px;top:80px}.main-header{height:82px;max-width:1280px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--cyan),var(--blue));display:grid;place-items:center;color:#05131e;font-weight:900;font-family:Space Grotesk;box-shadow:0 8px 30px rgba(57,230,215,.22)}.brand>div:last-child{display:flex;flex-direction:column;line-height:1}.brand b{font:800 14px Space Grotesk;letter-spacing:1.4px}.brand span{font:800 18px Space Grotesk;letter-spacing:4px;color:var(--cyan)}nav{display:flex;gap:8px}nav button{background:transparent;border:0;padding:10px 14px;border-radius:12px;color:var(--muted);font-weight:700}nav button:hover,nav .nav-active{background:rgba(255,255,255,.06);color:white}.profile-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(12,26,43,.75);padding:7px 10px 7px 7px;border-radius:16px;backdrop-filter:blur(16px)}.profile-chip img,.profile-chip>span{width:38px;height:38px;object-fit:cover;border-radius:11px;background:#163049;display:grid;place-items:center}.profile-chip div{display:flex;flex-direction:column;text-align:left;min-width:80px}.profile-chip small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:1px}.profile-chip b{font-size:13px}.profile-chip i{font-style:normal;color:#07111f;background:var(--yellow);font-size:11px;font-weight:900;padding:5px 7px;border-radius:8px}main{max-width:1280px;margin:auto;padding:0 28px}.hero{min-height:520px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:30px;padding:62px 0 34px}.live-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(57,230,215,.25);color:#8af6ec;background:rgba(57,230,215,.08);padding:7px 11px;border-radius:99px;font-size:10px;font-weight:900;letter-spacing:1.3px}.live-pill i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:pulse 1.5s infinite}.hero h1{font:800 clamp(44px,6vw,78px)/.98 Space Grotesk;margin:18px 0 18px;letter-spacing:-3px}.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),#83b8ff,var(--pink));background-clip:text;color:transparent}.hero-copy>p{max-width:630px;color:#a9bdcf;font-size:17px;line-height:1.7}.hero-actions{display:flex;gap:12px;margin-top:28px}.primary,.ghost{border:0;border-radius:13px;padding:11px 16px;font-weight:800}.primary{background:linear-gradient(135deg,var(--cyan),#5db3ff);color:#04121c;box-shadow:0 10px 25px rgba(57,230,215,.14)}.primary:hover{transform:translateY(-1px);filter:brightness(1.04)}.ghost{background:rgba(255,255,255,.055);border:1px solid var(--line);color:#dcecff}.big{padding:14px 20px}.hero-visual{height:430px;position:relative;display:grid;place-items:center}.mascot{width:240px;height:280px;border-radius:46% 46% 35% 35%;background:linear-gradient(160deg,rgba(57,230,215,.25),rgba(58,134,255,.08));border:1px solid rgba(106,240,228,.3);box-shadow:inset 0 0 60px rgba(78,211,255,.08),0 30px 80px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:float 4s ease-in-out infinite;position:relative;overflow:hidden}.mascot:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.12) 45%,transparent 58%);transform:translateX(-100%);animation:shine 4.5s infinite}.shield{font-size:78px;filter:drop-shadow(0 8px 16px rgba(57,230,215,.25))}.mascot b{font:900 30px/.84 Space Grotesk;text-align:center;letter-spacing:-1px}.mascot small{margin-top:14px;letter-spacing:3px;color:var(--cyan);font-weight:900}.orbit{position:absolute;width:88px;height:88px;border-radius:24px;background:rgba(13,27,45,.84);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.22);backdrop-filter:blur(16px)}.orbit span{font-size:34px}.o1{left:8%;top:16%;animation:float 3.7s .2s ease-in-out infinite}.o2{right:3%;top:22%;animation:float 4.1s .7s ease-in-out infinite}.o3{right:14%;bottom:6%;animation:float 3.5s 1.1s ease-in-out infinite}.hero-scan{position:absolute;width:84%;height:84%;border:1px solid rgba(57,230,215,.1);border-radius:50%;animation:spin 18s linear infinite}.hero-scan:before,.hero-scan:after{content:"";position:absolute;border:1px dashed rgba(255,255,255,.08);border-radius:50%;inset:12%}.hero-scan:after{inset:28%}.player-dashboard{display:grid;grid-template-columns:1.35fr 1.2fr .65fr .65fr;gap:12px;padding:15px;border:1px solid var(--line);background:rgba(9,21,35,.72);border-radius:24px;backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.18)}.dash-profile{display:flex;align-items:center;gap:14px;padding:10px}.dash-profile img,.dash-avatar{width:64px;height:64px;border-radius:18px;object-fit:cover;background:#132a43;display:grid;place-items:center;font-size:32px;border:1px solid var(--line)}.dash-profile small,.section-head small,.mission-banner small,.eyebrow{font-size:10px;font-weight:900;letter-spacing:1.6px;color:var(--cyan)}.dash-profile h2{margin:3px 0;font-size:20px}.dash-profile p{margin:0;color:var(--muted);font-size:12px}.level-box,.stat-box{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px;padding:16px}.level-box>div{display:flex;justify-content:space-between;font-size:12px}.level-box i{height:8px;display:block;background:#07111f;border-radius:10px;margin:13px 0 7px;overflow:hidden}.level-box i b{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:inherit}.level-box small{color:var(--muted);font-size:10px}.stat-box{display:flex;align-items:center;gap:11px}.stat-box>span{font-size:26px}.stat-box div{display:flex;flex-direction:column}.stat-box b{font:900 22px Space Grotesk}.stat-box small{font-size:10px;color:var(--muted)}.games-section{padding:80px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-head h2{font:800 36px Space Grotesk;margin:5px 0 0}.filters{display:flex;max-width:680px;gap:7px;overflow:auto;padding-bottom:4px}.filters button{white-space:nowrap;border:1px solid var(--line);background:transparent;border-radius:99px;padding:8px 12px;color:var(--muted);font-size:11px;font-weight:800}.filters button.active{background:white;color:#07111f}.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.game-card{text-align:left;min-height:260px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(17,38,61,.84),rgba(10,22,36,.92));border-radius:23px;padding:21px;position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.13);animation:rise .55s var(--delay) both}.game-card:before{content:"";position:absolute;width:150px;height:150px;background:radial-gradient(circle,rgba(57,230,215,.16),transparent 68%);right:-60px;top:-60px;transition:.3s}.game-card:hover{transform:translateY(-5px);border-color:rgba(57,230,215,.35);box-shadow:0 26px 60px rgba(0,0,0,.24)}.game-card:hover:before{transform:scale(1.3)}.game-card-head{display:flex;justify-content:space-between;align-items:start}.game-icon{font-size:40px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}.difficulty{font-size:10px;font-weight:900;border:1px solid var(--line);padding:6px 9px;border-radius:99px;color:#bcd0e2}.game-tag{margin-top:23px;font-size:9px;letter-spacing:1.6px;color:var(--cyan);font-weight:900}.game-card h3{font:800 22px Space Grotesk;margin:6px 0 8px}.game-card p{color:var(--muted);font-size:12px;line-height:1.55;margin:0;min-height:57px}.game-card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-top:18px}.game-card-foot span{font-size:10px;color:#9fb2c4}.game-card-foot b{font-size:10px;color:var(--cyan);letter-spacing:1px}.mission-banner{margin:10px 0 70px;padding:38px;border-radius:28px;border:1px solid rgba(57,230,215,.16);background:linear-gradient(120deg,rgba(57,230,215,.1),rgba(58,134,255,.08),rgba(139,92,246,.1));display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}.mission-banner h2{font:800 32px Space Grotesk;margin:8px 0}.mission-banner p{color:var(--muted);line-height:1.6}.mission-icons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mission-icons span{background:rgba(6,17,29,.55);border:1px solid var(--line);border-radius:18px;padding:16px;font-size:25px;display:flex;align-items:center;gap:12px}.mission-icons b{font-size:12px}footer{max-width:1280px;margin:auto;padding:26px 28px 42px;border-top:1px solid var(--line);display:flex;align-items:center;gap:24px;color:var(--muted);font-size:11px}.brand.mini{margin-right:auto}.brand.mini .brand-mark{width:34px;height:34px;font-size:11px}.brand.mini b{font-size:10px}.brand.mini span{font-size:11px}.modal-backdrop{position:fixed;inset:0;background:rgba(1,8,14,.78);backdrop-filter:blur(12px);z-index:100;display:grid;place-items:center;padding:20px}.modal{width:min(520px,100%);max-height:92vh;overflow:auto;background:linear-gradient(165deg,#132940,#0b1929);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:30px;box-shadow:0 40px 100px rgba(0,0,0,.45);position:relative}.modal h2{font:800 30px Space Grotesk;margin:7px 0}.modal-x{position:absolute;right:16px;top:14px;width:35px;height:35px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:21px}.muted{color:var(--muted)}.profile-modal label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800;color:#b8c9d9;margin:13px 0}.profile-modal input,.profile-modal select{width:100%;border:1px solid var(--line);background:#091727;color:white;border-radius:12px;padding:12px;outline:none}.profile-modal input:focus,.profile-modal select:focus{border-color:var(--cyan)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.avatar-editor{height:140px;border:1px dashed rgba(57,230,215,.35);background:rgba(57,230,215,.05);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}.avatar-editor img{width:82px;height:82px;border-radius:22px;object-fit:cover}.avatar-editor span{font-size:42px}.avatar-editor b{font-size:11px}.profile-modal>.primary{width:100%;margin-top:8px}.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.badge{border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;background:rgba(255,255,255,.03)}.badge span{font-size:42px}.badge b{margin-top:8px}.badge small{color:var(--muted);font-size:10px;margin-top:4px}.badge.locked{filter:grayscale(1);opacity:.45}.toast{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;align-items:center;gap:12px;background:#11263b;border:1px solid rgba(57,230,215,.25);box-shadow:0 20px 60px rgba(0,0,0,.4);padding:14px 17px;border-radius:16px}.toast>span{font-size:28px}.toast div{display:flex;flex-direction:column}.toast small{color:var(--muted);margin-top:3px}
/* game shell */
.game-shell{min-height:100vh;background:radial-gradient(circle at 50% 0%,#112d48,transparent 40%),#06101c;padding:16px}.game-topbar{height:68px;max-width:1180px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.game-topbar>.ghost{justify-self:start}.game-title{display:flex;align-items:center;gap:10px}.game-title>span{font-size:30px}.game-title div{display:flex;flex-direction:column}.game-title small{font-size:8px;letter-spacing:1.5px;color:var(--cyan);font-weight:900}.game-title b{font:800 18px Space Grotesk}.score-pill{justify-self:end;background:rgba(255,211,90,.12);color:#ffe79d;border:1px solid rgba(255,211,90,.2);padding:9px 13px;border-radius:12px;font-weight:900}.game-hint{max-width:900px;margin:5px auto 13px;text-align:center;color:#a9bfd1;font-size:11px}.game-stage{max-width:1120px;margin:0 auto;min-height:calc(100vh - 124px);border:1px solid var(--line);background:rgba(8,20,33,.7);border-radius:26px;overflow:hidden;position:relative;box-shadow:0 28px 80px rgba(0,0,0,.28)}.result-card,.center-panel,.final-screen{background:rgba(7,17,31,.9);border:1px solid var(--line);border-radius:20px;padding:24px;text-align:center}.final-screen{max-width:520px;margin:auto}.trophy{font-size:72px;animation:bounce 1.2s infinite}.final-screen h1{font:800 38px Space Grotesk}.celebrate-banner{margin-top:20px;border:1px solid rgba(94,227,141,.25);background:rgba(94,227,141,.08);padding:16px;border-radius:16px;color:#caffdc;font-weight:800;text-align:center}.speech,.speech-mini{background:white;color:#07111f;border-radius:16px;padding:10px 13px;font-size:11px;box-shadow:0 14px 30px rgba(0,0,0,.25)}
/* runner */
.runner-wrap{padding:20px}.runner-hud{max-width:620px;margin:0 auto 10px;font-weight:900}.runner-road{height:610px;max-width:620px;margin:auto;position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(#133955,#0b2235);box-shadow:inset 0 0 50px rgba(0,0,0,.35)}.runner-road:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 48px,rgba(255,255,255,.05) 49px 50px);animation:road 1s linear infinite}.lane{position:absolute;top:0;bottom:0;width:1px;border-left:2px dashed rgba(255,255,255,.18)}.lane:nth-child(1){left:33.33%}.lane:nth-child(2){left:66.66%}.lane:nth-child(3){display:none}.runner-player,.runner-item{position:absolute;transform:translate(-50%,-50%);transition:left .15s;font-size:38px;z-index:2}.runner-player{bottom:5%;font-size:46px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4));display:grid;place-items:center}.runner-item{display:grid;place-items:center;gap:2px}.runner-item small{font-size:8px;font-weight:900;letter-spacing:.7px}.runner-item.star{filter:drop-shadow(0 0 12px #ffd35a)}.runner-item.risk{filter:drop-shadow(0 0 12px #ff646d)}.runner-controls{display:flex;justify-content:center;gap:10px;margin-top:14px}.runner-controls button{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:13px;padding:12px 20px}.runner-controls .primary{background:linear-gradient(135deg,var(--cyan),#5db3ff)}
/* topdown arenas */
.arena-wrap{padding:18px}.topdown-arena{height:650px;border-radius:23px;overflow:hidden;position:relative;background:radial-gradient(circle at center,rgba(57,230,215,.08),transparent 40%),linear-gradient(45deg,#0b2a2e,#10233a);background-size:auto,70px 70px;box-shadow:inset 0 0 70px rgba(0,0,0,.35)}.rescue-bg{background:radial-gradient(circle at center,rgba(94,227,141,.07),transparent 40%),linear-gradient(135deg,#112c34,#101d30)}.top-player,.chaser,.rescue,.risk-enemy,.pickup{position:absolute;transform:translate(-50%,-50%);font-size:32px;transition:left .08s linear,top .08s linear}.top-player{font-size:40px;z-index:8;filter:drop-shadow(0 6px 5px rgba(0,0,0,.5));display:grid;place-items:center}.chaser small{position:absolute;left:32px;top:12px;white-space:nowrap;font-size:8px;background:#fff;color:#111;padding:5px 7px;border-radius:8px}.risk-enemy{filter:drop-shadow(0 0 12px #ff646d)}.rescue{animation:help 1s infinite}.pickup{animation:bounce 1.2s infinite}.pulse-ring{position:absolute;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;border:3px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);font-weight:900;animation:wave .9s ease-out}.speech.center-pop{position:absolute;left:50%;top:12%;transform:translateX(-50%);z-index:10}.meter{max-width:700px;margin:0 auto 12px;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800}.meter i{height:9px;flex:1;background:#08131f;border-radius:10px;overflow:hidden}.meter i b{display:block;height:100%;background:linear-gradient(90deg,#ff646d,#ffd35a,#5ee38d)}.dual-hud{display:flex;justify-content:space-between;font-weight:900;margin:0 4px 11px}.arena-actions{display:flex;justify-content:center;gap:10px;margin-top:13px}.arena-actions>button:not(.primary){border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:13px;padding:12px 16px}
/* blaster */
.blaster{height:760px;position:relative;background:radial-gradient(circle at 50% 50%,#15324b 0,#091828 62%);overflow:hidden}.blaster:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px}.timer{position:absolute;left:20px;top:18px;z-index:3;background:#07111f;border:1px solid var(--line);padding:9px 12px;border-radius:10px;font-weight:900}.target{position:absolute;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:50%;border:2px solid rgba(255,255,255,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;animation:targetIn .25s both;padding:10px;text-align:center}.target.danger{background:rgba(255,100,109,.14);box-shadow:0 0 30px rgba(255,100,109,.13)}.target.safe{background:rgba(94,227,141,.1)}.target span{font-size:32px}.target small{font-size:9px;font-weight:800;max-width:84px;line-height:1.15}.blaster .center-panel,.reflex-stage .center-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;min-width:330px}
/* quiz */
.quiz-stage{min-height:760px;padding:24px;background:radial-gradient(circle at top,#2b1749 0,#0a1624 42%);position:relative;overflow:hidden}.spotlight{position:absolute;top:-100px;width:220px;height:560px;background:linear-gradient(rgba(255,255,255,.12),transparent);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(8px);opacity:.4}.spotlight.left{left:6%;transform:rotate(15deg)}.spotlight.right{right:6%;transform:rotate(-15deg)}.quiz-people{height:210px;display:flex;justify-content:center;gap:170px;align-items:end;position:relative;z-index:2}.host,.contestant{font-size:82px;display:flex;flex-direction:column;align-items:center;position:relative}.host>span,.contestant>span{font-size:10px;font-weight:900;color:var(--muted);background:#07111f;padding:5px 9px;border-radius:9px}.contestant.jump{animation:jump .55s ease}.speech-mini{position:absolute;top:-28px;right:-78px;white-space:nowrap}.quiz-console{max-width:840px;margin:auto;position:relative;z-index:3}.question-count{text-align:center;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:1.3px}.quiz-console h2{font:700 23px/1.35 Space Grotesk;text-align:center;margin:10px auto 20px;max-width:760px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answers button,.choice-stack button,.penalty-question button{border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:14px;padding:14px;text-align:left}.answers button b{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;background:rgba(57,230,215,.12);color:var(--cyan);margin-right:10px}.correct{border-color:rgba(94,227,141,.6)!important;background:rgba(94,227,141,.13)!important}.wrong{border-color:rgba(255,100,109,.6)!important;background:rgba(255,100,109,.12)!important}.dim{opacity:.45}.answer-info{margin-top:12px;border:1px solid var(--line);background:rgba(5,14,24,.76);padding:14px;border-radius:14px}.answer-info span{font-weight:900}.answer-info p{color:var(--muted);font-size:11px;line-height:1.5}.answer-info .primary{float:right;margin-top:-40px}
/* scanner */
.scanner-stage{padding:26px;min-height:760px;background:linear-gradient(160deg,#0a2330,#0b1727)}.scanner-device{width:240px;height:170px;margin:0 auto 18px;border:1px solid rgba(57,230,215,.25);border-radius:28px;background:rgba(57,230,215,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.scanner-icon{font-size:72px}.scanner-device>span{font-size:9px;letter-spacing:2px;color:var(--cyan);font-weight:900}.scan-line{position:absolute;height:2px;left:18px;right:18px;background:var(--cyan);box-shadow:0 0 18px var(--cyan);animation:scan 1.6s linear infinite}.risk-meter{max-width:700px;margin:0 auto 18px;display:grid;grid-template-columns:90px 1fr 45px;align-items:center;gap:10px;font-size:10px}.risk-meter i{height:8px;background:#07111f;border-radius:9px;overflow:hidden}.risk-meter i span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--danger))}.case-card{max-width:700px;margin:auto;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:22px;padding:24px}.case-card>small{color:var(--cyan);font-weight:900}.case-card h2{font:800 28px Space Grotesk}.case-card>p{color:#b7c9d9;line-height:1.6}.choice-stack{display:flex;flex-direction:column;gap:9px}.choice-stack button{text-align:left}
/* sequence */
.sequence-stage{padding:30px;min-height:700px;background:radial-gradient(circle at top,rgba(57,230,215,.08),transparent 45%)}.mission-line{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.mission-slot{min-height:112px;border:1px dashed rgba(255,255,255,.14);border-radius:16px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.02)}.mission-slot span{width:25px;height:25px;border-radius:8px;background:#142a40;display:grid;place-items:center;font-size:10px;font-weight:900}.mission-slot b{font-size:10px;color:#7f95a8}.mission-slot.filled{border-style:solid;border-color:rgba(94,227,141,.35);background:rgba(94,227,141,.06)}.mission-slot.filled b{color:#d9ffe7}.mission-message{text-align:center;margin:40px 0 18px;color:#c7dae8;font-weight:800}.card-pool{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:800px;margin:auto}.card-pool button{min-height:120px;border:1px solid var(--line);background:linear-gradient(145deg,#12283f,#0a1929);border-radius:18px;font-weight:800}.card-pool span{font-size:32px;display:block;margin-bottom:8px}
/* calendar */
.calendar-game{padding:28px;max-width:780px;margin:auto}.day-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.day-head small{color:var(--cyan);font-weight:900;letter-spacing:1px}.day-head h2{margin:4px 0;font:800 28px Space Grotesk}.calendar-streak{background:rgba(255,211,90,.1);color:#ffe7a2;border:1px solid rgba(255,211,90,.15);border-radius:13px;padding:10px 12px;font-size:11px;font-weight:900}.timeline{display:flex;flex-direction:column;gap:9px}.time-row{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:15px;padding:13px 16px;display:grid;grid-template-columns:90px 1fr;text-align:left}.time-row b{color:var(--cyan)}.time-row span{color:#9db2c4}.time-row.ok{background:rgba(94,227,141,.1);border-color:rgba(94,227,141,.25)}.time-row.bad{background:rgba(255,100,109,.08);border-color:rgba(255,100,109,.25)}.activity-cards{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;justify-content:center}.activity-cards button{border:1px solid var(--line);background:#132a40;border-radius:12px;padding:10px 13px}.activity-cards button.selected{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(57,230,215,.1)}
/* reflex */
.reflex-stage{height:760px;position:relative;background:radial-gradient(circle at center,#112c42,#081522 68%);overflow:hidden}.reflex-hud{position:absolute;left:18px;right:18px;top:18px;display:flex;justify-content:space-between;z-index:4}.reflex-orb{position:absolute;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;font-size:34px;border:2px solid rgba(255,255,255,.15);animation:orb .55s infinite alternate}.reflex-orb.good{background:rgba(57,230,215,.12);box-shadow:0 0 30px rgba(57,230,215,.18)}.reflex-orb.bad{background:rgba(255,100,109,.11);box-shadow:0 0 30px rgba(255,100,109,.15)}
/* myth */
.myth-stage{padding:34px;max-width:760px;margin:auto}.streak{text-align:right;color:#ffd35a;font-weight:900;margin-bottom:10px}.myth-card{min-height:430px;border-radius:28px;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#18344e,#0d1d30);border:1px solid var(--line);position:relative}.myth-card>small{position:absolute;top:20px;color:var(--cyan);font-weight:900}.brain{font-size:64px}.myth-card h2{font:700 28px/1.35 Space Grotesk;max-width:600px}.myth-feedback{margin-top:20px;padding:12px 18px;border-radius:14px;font-weight:900;display:flex;flex-direction:column}.myth-feedback.good{background:rgba(94,227,141,.12);color:#bfffd5}.myth-feedback.bad{background:rgba(255,100,109,.1);color:#ffc4c8}.myth-feedback small{margin-top:5px;font-weight:500}.myth-actions{display:flex;gap:10px;margin-top:14px}.myth-actions button{flex:1;border:0;border-radius:14px;padding:15px;font-weight:900}.danger-btn{background:#4c1f2b;color:#ffb4b9}.success-btn{background:#153c2b;color:#bdfbd1}
/* memory */
.memory-stage{padding:26px;max-width:850px;margin:auto}.memory-top{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px;font-weight:900;color:#b8cbd9}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.memory-card{aspect-ratio:1/.9;border:0;background:transparent;perspective:800px}.card-inner{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}.memory-card.flipped .card-inner{transform:rotateY(180deg)}.card-back,.card-front{position:absolute;inset:0;border-radius:18px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;border:1px solid var(--line)}.card-back{background:linear-gradient(145deg,#163550,#0c1e31);font:900 24px Space Grotesk;color:var(--cyan);letter-spacing:2px}.card-front{background:linear-gradient(145deg,#1d354a,#112338);transform:rotateY(180deg);flex-direction:column}.card-front span{font-size:34px}.card-front b{font-size:11px;margin-top:6px}
/* penalty */
.penalty-stage{min-height:760px;background:linear-gradient(#0b3151 0 43%,#17623d 43% 100%);padding:20px;position:relative}.stadium-lights{text-align:center;letter-spacing:40px;color:#fff;text-shadow:0 0 22px white;font-size:22px}.goal{width:540px;height:270px;margin:30px auto 16px;border:9px solid white;border-bottom-width:6px;position:relative;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:32px 32px}.keeper{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:60px}.ball{position:absolute;left:50%;bottom:-80px;transform:translateX(-50%);font-size:44px;transition:1s}.ball.goal{left:80%;bottom:150px;transform:translateX(-50%) scale(.55)}.ball.miss{left:53%;bottom:130px;transform:translateX(-50%) scale(.55)}.goal-text,.miss-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 42px Space Grotesk;text-shadow:0 4px 10px rgba(0,0,0,.4);animation:pop .4s both}.goal-text{color:#ffec8b}.miss-text{color:#ffc2c5}.penalty-question{max-width:820px;margin:auto;background:rgba(4,18,23,.82);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px}.penalty-question>small{color:var(--cyan);font-weight:900}.penalty-question h3{font:700 17px Space Grotesk}.penalty-question>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.final-screen.compact{margin-top:50px}
@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}@keyframes float{50%{transform:translateY(-14px) rotate(1deg)}}@keyframes shine{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes pop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes bounce{50%{transform:translateY(-9px)}}@keyframes road{to{background-position-y:50px}}@keyframes wave{from{width:60px;height:60px;opacity:1}to{width:300px;height:300px;opacity:0}}@keyframes help{50%{transform:translate(-50%,-50%) translateY(-5px)}}@keyframes targetIn{from{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes jump{50%{transform:translateY(-45px) rotate(-4deg)}}@keyframes scan{from{top:15%}to{top:85%}}@keyframes orb{to{transform:translate(-50%,-50%) scale(1.08)}}.pop-in{animation:modal .25s ease-out both}@keyframes modal{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:980px){.main-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:45px}.hero-visual{height:330px}.mascot{transform:scale(.83)}.player-dashboard{grid-template-columns:1fr 1fr}.games-grid{grid-template-columns:1fr 1fr}.mission-banner{grid-template-columns:1fr}.mission-line{grid-template-columns:repeat(3,1fr)}.game-topbar{grid-template-columns:auto 1fr auto}.game-title{justify-self:center}.game-title small{display:none}.quiz-people{gap:90px}.runner-road,.topdown-arena{height:560px}}
@media(max-width:650px){main,.main-header{padding-left:14px;padding-right:14px}.main-header{height:70px}.brand>div:last-child{display:none}.profile-chip div{display:none}.hero{padding-top:30px;min-height:auto}.hero h1{font-size:48px;letter-spacing:-2px}.hero-copy>p{font-size:14px}.hero-actions{flex-direction:column}.hero-visual{height:280px}.mascot{width:190px;height:220px}.shield{font-size:60px}.orbit{width:64px;height:64px}.player-dashboard{grid-template-columns:1fr}.games-grid{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.filters{max-width:100%}.mission-banner{padding:24px}.mission-icons{grid-template-columns:1fr 1fr}.mission-icons span{padding:12px;font-size:20px}.mission-icons b{font-size:10px}footer{flex-wrap:wrap}.game-shell{padding:8px}.game-topbar{height:60px}.game-topbar>.ghost{font-size:0;padding:10px}.game-topbar>.ghost:after{content:'←';font-size:18px}.game-title b{font-size:13px}.score-pill{font-size:11px}.game-stage{border-radius:18px}.runner-wrap,.arena-wrap,.scanner-stage,.sequence-stage{padding:10px}.runner-road,.topdown-arena,.blaster,.reflex-stage{height:560px}.answers,.penalty-question>div{grid-template-columns:1fr}.quiz-stage{padding:12px;min-height:700px}.quiz-people{gap:38px;height:170px}.host,.contestant{font-size:60px}.quiz-console h2{font-size:18px}.answer-info .primary{float:none;margin:8px 0 0}.scanner-device{transform:scale(.84);margin-top:-10px}.mission-line{grid-template-columns:1fr 1fr}.card-pool{grid-template-columns:1fr 1fr}.calendar-game{padding:14px}.time-row{grid-template-columns:70px 1fr}.memory-grid{grid-template-columns:repeat(3,1fr)}.goal{width:92%;height:220px}.stadium-lights{letter-spacing:18px}.myth-stage{padding:14px}.myth-card{min-height:390px;padding:20px}.myth-card h2{font-size:22px}.modal{padding:22px}.form-grid{grid-template-columns:1fr}}

/* classroom + trainer mode */
.classroom-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.classroom-quick button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#cfe0ee;border-radius:11px;padding:8px 11px;font-size:11px;font-weight:800}.classroom-quick button:hover{background:rgba(57,230,215,.08);border-color:rgba(57,230,215,.28)}
.class-code-input{text-transform:uppercase;letter-spacing:8px;text-align:center;font:900 30px Space Grotesk!important}.inline-error{padding:11px 13px;border:1px solid rgba(255,100,109,.25);background:rgba(255,100,109,.08);color:#ffb5ba;border-radius:12px;font-size:12px;margin:10px 0}.class-join-modal{max-width:500px}
.class-dock{position:fixed;right:18px;bottom:18px;z-index:12;width:190px;padding:14px;border:1px solid rgba(57,230,215,.22);border-radius:18px;background:rgba(6,17,29,.92);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.32)}.class-live{font-size:9px;letter-spacing:1.4px;color:var(--cyan);font-weight:900;display:flex;align-items:center;gap:7px}.class-live i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 1.4s infinite}.class-dock-code{font:900 28px Space Grotesk;letter-spacing:5px;margin-top:7px}.class-dock-title{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:10px}.dock-rank,.dock-score{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:7px 0;font-size:10px}.dock-rank b,.dock-score b{font:900 16px Space Grotesk}.dock-cert,.dock-leave{width:100%;border:0;border-radius:9px;padding:8px;font-size:10px;font-weight:800;margin-top:6px}.dock-cert{background:linear-gradient(135deg,var(--yellow),#ffad62);color:#241500}.dock-leave{background:rgba(255,255,255,.05);color:var(--muted)}.dock-error{color:#ffc4c8}
.trainer-overlay{position:fixed;inset:0;z-index:40;background:rgba(1,7,13,.86);backdrop-filter:blur(16px);overflow:auto;padding:28px}.trainer-panel{max-width:1080px;margin:auto;border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,#0c1c2e,#07131f);box-shadow:0 30px 100px rgba(0,0,0,.45);padding:26px}.trainer-panel>header{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:18px}.trainer-panel h2{font:800 34px Space Grotesk;margin:5px 0}.modal-x.static{position:static}.trainer-create{max-width:760px;margin:35px auto 20px}.trainer-hero{display:flex;align-items:center;gap:18px;background:rgba(57,230,215,.06);border:1px solid rgba(57,230,215,.14);border-radius:18px;padding:17px;margin-bottom:18px}.trainer-hero>span{font-size:42px}.trainer-hero h3{margin:0 0 5px;font:800 18px Space Grotesk}.trainer-hero p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.trainer-create>.primary{margin-top:14px;width:100%}.trainer-create>.ghost{margin-top:10px;width:100%}
.trainer-class-head{display:flex;align-items:center;justify-content:space-between;padding:25px 0}.trainer-class-head small{font-size:9px;color:var(--cyan);font-weight:900;letter-spacing:1.6px}.trainer-class-head strong{display:block;font:900 48px Space Grotesk;letter-spacing:9px}.trainer-class-head p{margin:3px 0;color:var(--muted)}.session-state{padding:9px 12px;border-radius:99px;font-size:10px;font-weight:900;letter-spacing:1px;border:1px solid var(--line)}.session-state i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}.session-state.on{color:#8cf5b0;background:rgba(94,227,141,.08)}.session-state.on i{background:var(--green);box-shadow:0 0 10px var(--green)}.session-state.off{color:#ffb7bc;background:rgba(255,100,109,.08)}.session-state.off i{background:var(--danger)}
.join-links{padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.join-links h3{margin:0 0 5px}.join-links p{color:var(--muted);font-size:11px}.join-link{display:flex;gap:8px;align-items:center;margin-top:8px}.join-link code{flex:1;overflow:auto;background:#06111d;border:1px solid var(--line);padding:10px;border-radius:10px;color:#a9f8ef;font-size:11px}.join-link button{border:0;background:rgba(57,230,215,.12);color:var(--cyan);border-radius:9px;padding:9px 12px;font-size:10px;font-weight:900}
.leaderboard{margin-top:18px}.leader-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.leader-head small{color:var(--cyan);font-weight:900;font-size:9px;letter-spacing:1.5px}.leader-head h3{margin:4px 0 0;font:800 22px Space Grotesk}.leader-head>span{font-size:9px;color:var(--muted)}.empty-board{border:1px dashed var(--line);border-radius:18px;padding:42px;text-align:center;color:var(--muted)}.leader-list{display:flex;flex-direction:column;gap:7px}.leader-row{display:grid;grid-template-columns:46px 44px 1fr 80px 100px 42px;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:15px}.rank-no{text-align:center;font-weight:900}.leader-row img,.mini-avatar{width:42px;height:42px;border-radius:11px;object-fit:cover;background:#132b43;display:grid;place-items:center}.leader-name{display:flex;flex-direction:column}.leader-name b{font-size:13px}.leader-name small,.leader-xp small,.leader-score small{font-size:9px;color:var(--muted)}.leader-xp,.leader-score{display:flex;flex-direction:column;text-align:right}.leader-xp b,.leader-score b{font:900 16px Space Grotesk}.leader-score b{color:var(--cyan)}.cert-button{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,211,90,.2);background:rgba(255,211,90,.08);font-size:18px}.trainer-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.danger-button{border:1px solid rgba(255,100,109,.25);background:rgba(255,100,109,.08);color:#ffadb3;border-radius:12px;padding:10px 14px;font-weight:800}
/* certificate */
.certificate-wrap{width:min(1000px,96vw);margin:auto}.certificate-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}.certificate-print{position:relative;overflow:hidden;aspect-ratio:1.414/1;background:#f9fbf7;color:#102037;padding:68px 78px;text-align:center;border:10px solid #122b42;box-shadow:0 30px 90px rgba(0,0,0,.4)}.certificate-print:before{content:"";position:absolute;inset:18px;border:2px solid #56a998;pointer-events:none}.cert-corners{position:absolute;width:120px;height:120px;border:16px solid #56a998;transform:rotate(45deg);opacity:.13}.c1{left:-70px;top:-70px}.c2{right:-70px;top:-70px}.c3{left:-70px;bottom:-70px}.c4{right:-70px;bottom:-70px}.cert-logo{margin:auto;width:66px;height:66px;border-radius:18px;background:linear-gradient(145deg,#49d5c4,#438ce7);display:grid;place-items:center;font:900 20px Space Grotesk;color:#07131d}.cert-kicker{font:800 11px Space Grotesk;letter-spacing:5px;margin-top:12px;color:#388f86}.certificate-print h1{font:800 46px Space Grotesk;margin:22px 0 30px;letter-spacing:-1px}.cert-lead{margin:0;color:#738092;font-size:14px}.certificate-print h2{font:800 38px Space Grotesk;margin:9px auto 14px;border-bottom:2px solid #5bb7aa;display:inline-block;padding:0 25px 8px}.cert-body{max-width:690px;margin:0 auto;color:#536477;line-height:1.7;font-size:14px}.cert-stats{display:flex;justify-content:center;gap:10px;margin:25px 0}.cert-stats span{padding:10px 17px;border-radius:99px;background:#e8f2ef;color:#486070;font-size:11px}.cert-stats b{font-size:15px;color:#142d43}.cert-values{display:flex;justify-content:center;gap:12px;font:800 10px Space Grotesk;letter-spacing:2px;color:#388f86}.cert-values i{font-style:normal}.cert-footer{margin-top:40px;display:grid;grid-template-columns:1fr 80px 1fr;align-items:end;border:0;max-width:none;padding:0}.cert-footer>div:not(.cert-shield){display:flex;flex-direction:column;border-top:1px solid #98a5ae;padding-top:8px}.cert-footer b{font-size:12px}.cert-footer small{font-size:9px;color:#788895}.cert-shield{font-size:38px}
@media print{body *{visibility:hidden!important}.certificate-print,.certificate-print *{visibility:visible!important}.certificate-print{position:fixed;inset:0;width:100vw;height:70.7vw;max-height:100vh;margin:auto;box-shadow:none;border-width:8px;print-color-adjust:exact;-webkit-print-color-adjust:exact}.certificate-actions{display:none!important}@page{size:A4 landscape;margin:0}}
@media(max-width:800px){.class-dock{right:8px;bottom:8px;width:160px}.trainer-overlay{padding:10px}.trainer-panel{padding:16px}.trainer-class-head{align-items:flex-start;flex-direction:column;gap:10px}.trainer-class-head strong{font-size:38px}.leader-row{grid-template-columns:36px 40px 1fr 74px 38px}.leader-xp{display:none}.certificate-print{padding:45px 38px}.certificate-print h1{font-size:34px}.certificate-print h2{font-size:28px}}
@media(max-width:560px){.classroom-quick{display:grid;grid-template-columns:1fr 1fr}.classroom-quick button:last-child{grid-column:1/-1}.class-dock{display:none}.leader-row{grid-template-columns:32px 36px 1fr 62px 34px;padding:8px;gap:6px}.leader-row img,.mini-avatar{width:34px;height:34px}.leader-score b{font-size:13px}.join-link{align-items:stretch;flex-direction:column}.certificate-print{aspect-ratio:auto;min-height:650px;padding:40px 25px}.cert-stats{flex-direction:column}.cert-footer{margin-top:25px}}


.runner-avatar,.top-avatar{width:52px;height:52px;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.82);background:#12304a;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.top-avatar{width:54px;height:54px}
.threat-tag{display:inline-block;padding:2px 6px;border-radius:999px;background:rgba(255,100,109,.18);border:1px solid rgba(255,100,109,.3);color:#ffd7da}
.threat-badge{font-size:10px;font-weight:900;letter-spacing:.2px;padding:6px 8px;border-radius:999px;background:rgba(255,100,109,.18);border:1px solid rgba(255,100,109,.34);color:#ffd0d3;backdrop-filter:blur(8px);white-space:nowrap}
.threat-badge.small{font-size:9px;padding:5px 7px}
.chaser{min-width:32px;min-height:32px}
.risk-enemy,.rescue,.pickup{min-width:32px;min-height:32px;display:grid;place-items:center}
@media(max-width:760px){.runner-avatar,.top-avatar{width:42px;height:42px}.target{width:96px;height:96px}}

.quiz-avatar{width:84px;height:84px;object-fit:cover;border-radius:50%;border:4px solid rgba(255,255,255,.85);background:#15324b;box-shadow:0 10px 28px rgba(0,0,0,.35)}

/* v5: class rules, game limits and new arcade modes */
.game-card.locked{opacity:.58;filter:saturate(.55);cursor:not-allowed}.game-card.locked:hover{transform:none}.game-card.locked .game-card-foot b{color:var(--danger)}
.live-pill.expired{color:#ffc0c4;border-color:rgba(255,100,109,.28);background:rgba(255,100,109,.09)}.live-pill.expired i{background:var(--danger);box-shadow:0 0 14px var(--danger)}
.class-dock.expired{border-color:rgba(255,100,109,.25)}.dock-time{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:7px 0;font-size:10px}.dock-time b{font:900 16px Space Grotesk;color:var(--yellow)}
.trainer-lookup{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;padding:16px;border:1px solid rgba(57,230,215,.14);background:rgba(57,230,215,.04);border-radius:16px}.trainer-lookup label{margin:0}.class-code-input.compact{font-size:21px!important;letter-spacing:5px!important;padding:9px!important}.trainer-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:1.4px;margin:22px 0}.trainer-divider:before,.trainer-divider:after{content:"";height:1px;background:var(--line);flex:1}.trainer-rule-note{font-size:11px;line-height:1.6;margin:10px 0 14px}.trainer-session-metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.class-countdown,.attempt-rule{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);padding:8px 12px;display:flex;flex-direction:column;min-width:96px}.class-countdown small,.attempt-rule small{font-size:8px;color:var(--muted);font-weight:900;letter-spacing:1px}.class-countdown b,.attempt-rule b{font:900 18px Space Grotesk}.class-countdown b{color:var(--yellow)}.class-countdown.ended b{color:var(--danger)}

.maze-wrap{padding:18px}.maze-board{width:min(650px,92vw);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(var(--maze-size,13),1fr);grid-template-rows:repeat(var(--maze-size,13),1fr);position:relative;border:2px solid rgba(57,230,215,.18);border-radius:22px;overflow:hidden;background:#071624;box-shadow:inset 0 0 70px rgba(0,0,0,.45);contain:layout paint}.maze-cell{min-width:0;min-height:0;border:1px solid rgba(255,255,255,.022)}.maze-cell.wall{background:linear-gradient(145deg,#17324a,#0b1f31);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.maze-cell.floor{background:radial-gradient(circle,rgba(57,230,215,.035),transparent 72%)}.maze-cell.exit{background:rgba(94,227,141,.09)}.maze-entity{position:absolute;display:grid;place-items:center;z-index:3;pointer-events:none;will-change:left,top;box-sizing:border-box}.maze-player{z-index:6;transition:none}.maze-agent-wrap{z-index:5;transition:left .16s linear,top .16s linear}.maze-exit,.maze-token{font-size:clamp(14px,2.1vw,24px)}.maze-agent{font-size:clamp(14px,2.1vw,24px);filter:drop-shadow(0 0 10px rgba(255,100,109,.8));animation:mazePulse 1s ease-in-out infinite}.maze-avatar{width:72%;height:72%;border-radius:50%;object-fit:cover;border:2px solid white;display:block;box-shadow:0 4px 14px rgba(0,0,0,.45)}.maze-player>span{font-size:clamp(15px,2.3vw,26px)}.maze-message{max-width:650px;margin:12px auto;text-align:center;min-height:38px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:12px;padding:10px;font-size:12px}.dpad{width:280px;margin:12px auto 0;display:grid;grid-template-columns:70px 140px 70px;gap:5px}.dpad button,.dpad i{min-height:45px}.dpad button:not(.primary){border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.055)}@keyframes mazePulse{50%{opacity:.55;filter:drop-shadow(0 0 15px rgba(255,100,109,.95))}}

.defense-wrap{padding:18px;position:relative}.defense-hud{display:flex;justify-content:center;gap:28px;font-weight:900;margin-bottom:12px}.defense-field{height:620px;position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(90deg,#0c2c31 0 12%,#0c2032 12% 100%);box-shadow:inset 0 0 70px rgba(0,0,0,.42)}.defense-field:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.025) 80px 81px);pointer-events:none}.defense-base{position:absolute;left:5.5%;top:50%;transform:translate(-50%,-50%);z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}.defense-base img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid white}.defense-base b{font-size:7px;letter-spacing:.7px}.defense-lane{position:absolute;left:12%;right:0;height:1px;border-top:2px dashed rgba(255,255,255,.09);z-index:2}.defense-lane button{position:absolute;left:4%;transform:translateY(-50%);border:1px solid rgba(57,230,215,.22);background:#0c2638;border-radius:10px;padding:7px 9px;font-size:9px;font-weight:900}.lane-shield,.lane-threat{position:absolute;transform:translate(-50%,-50%);z-index:4}.lane-shield{font-size:42px;filter:drop-shadow(0 0 15px rgba(57,230,215,.65))}.lane-threat{display:flex;flex-direction:column;align-items:center;font-size:33px}.lane-threat small{font-size:8px;background:rgba(255,100,109,.15);border:1px solid rgba(255,100,109,.25);padding:3px 6px;border-radius:8px;white-space:nowrap}.defense-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;min-width:340px}

.rhythm-wrap{padding:18px;position:relative}.rhythm-hud{max-width:680px;margin:0 auto 10px;display:flex;justify-content:space-between;font-weight:900}.rhythm-board{height:650px;max-width:680px;margin:auto;position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(#121636,#09192a 75%);box-shadow:inset 0 0 70px rgba(0,0,0,.45)}.rhythm-lane{position:absolute;width:25%;top:0;bottom:0;border-right:1px solid rgba(255,255,255,.07)}.rhythm-lane b{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font:900 21px Space Grotesk;color:#9eb4c8}.hit-line{position:absolute;left:0;right:0;top:86%;height:4px;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}.rhythm-note{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:29px;border:2px solid rgba(255,255,255,.14);z-index:3}.rhythm-note.clean{background:rgba(57,230,215,.13);box-shadow:0 0 20px rgba(57,230,215,.14)}.rhythm-note.risk{background:rgba(255,100,109,.14);box-shadow:0 0 20px rgba(255,100,109,.17)}.rhythm-avatar{position:absolute;left:12px;bottom:12px;width:54px;height:54px;border-radius:50%;object-fit:cover;border:3px solid white;z-index:6}.rhythm-flash{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font:900 34px Space Grotesk;color:var(--cyan);text-shadow:0 0 20px rgba(57,230,215,.65);z-index:7}.rhythm-flash.bad{color:var(--danger);text-shadow:0 0 20px rgba(255,100,109,.65)}.rhythm-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:680px;margin:10px auto}.rhythm-buttons button{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:12px;padding:13px;font:900 18px Space Grotesk}.rhythm-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;min-width:340px}
@media(max-width:700px){.trainer-lookup{grid-template-columns:1fr}.trainer-session-metrics{justify-content:flex-start}.defense-field{height:520px}.lane-threat{font-size:27px}.lane-shield{font-size:34px}.defense-lane button{font-size:8px;padding:6px}.rhythm-board{height:560px}.rhythm-note{width:48px;height:48px;font-size:24px}.maze-cell{font-size:20px}}

/* Fair Play Penalty v2 — answers live in the four goal corners */
.penalty-v2{padding-top:16px;overflow:hidden}
.floating-question{max-width:900px;margin:8px auto 14px;text-align:center;background:rgba(4,18,23,.9);position:relative;z-index:5}
.floating-question h3{font-size:19px;margin:6px 0 4px}
.floating-question p{margin:0;color:var(--muted);font-size:11px}
.goal-interactive{width:min(760px,88%);height:390px;margin:18px auto 0;border-width:10px;border-bottom-width:7px;overflow:visible;background:rgba(5,31,39,.32);isolation:isolate}
.goal-net{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:38px 38px}
.goal-answer{position:absolute;width:42%;min-height:82px;z-index:7;border:2px solid rgba(255,255,255,.22);background:rgba(7,22,34,.9);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:9px;text-align:left;backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.22);transition:transform .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease}
.goal-answer:hover:not(:disabled){transform:scale(1.035);border-color:rgba(57,230,215,.65);background:rgba(12,48,58,.95)}
.goal-answer b{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(57,230,215,.14);color:var(--cyan);font:900 15px Space Grotesk}
.goal-answer span{font-size:12px;line-height:1.25;font-weight:750}
.goal-answer-tl{left:3.5%;top:5%}.goal-answer-tr{right:3.5%;top:5%}.goal-answer-bl{left:3.5%;bottom:5%}.goal-answer-br{right:3.5%;bottom:5%}
.goal-answer.correct{border-color:rgba(94,227,141,.8)!important;background:rgba(30,93,57,.9)!important;opacity:1!important}
.goal-answer.wrong{border-color:rgba(255,100,109,.85)!important;background:rgba(94,28,35,.92)!important;opacity:1!important}
.goal-answer.dim{opacity:.28}
.keeper-v2{left:50%;top:54%;width:72px;height:72px;display:grid;place-items:center;z-index:5;transition:left .72s cubic-bezier(.2,.72,.25,1),top .72s cubic-bezier(.2,.72,.25,1),transform .72s cubic-bezier(.2,.72,.25,1)}
.keeper-body{font-size:66px;display:block;filter:drop-shadow(0 7px 5px rgba(0,0,0,.45))}
.keeper-v2.dive-tl{left:16%;top:26%;transform:translate(-50%,-50%) rotate(-38deg) scale(1.08)}
.keeper-v2.dive-tr{left:84%;top:26%;transform:translate(-50%,-50%) rotate(38deg) scale(1.08)}
.keeper-v2.dive-bl{left:16%;top:74%;transform:translate(-50%,-50%) rotate(-58deg) scale(1.08)}
.keeper-v2.dive-br{left:84%;top:74%;transform:translate(-50%,-50%) rotate(58deg) scale(1.08)}
.ball-v2{left:50%;bottom:-112px;top:auto;z-index:8;font-size:48px;transition:left .82s cubic-bezier(.18,.76,.28,1),bottom .82s cubic-bezier(.18,.76,.28,1),transform .82s cubic-bezier(.18,.76,.28,1),filter .82s ease}
.ball-v2.ready{left:50%;bottom:-112px;transform:translateX(-50%) scale(1);filter:drop-shadow(0 9px 4px rgba(0,0,0,.45))}
.ball-v2.shoot-tl{left:17%;bottom:278px;transform:translateX(-50%) scale(.55) rotate(-320deg)}
.ball-v2.shoot-tr{left:83%;bottom:278px;transform:translateX(-50%) scale(.55) rotate(320deg)}
.ball-v2.shoot-bl{left:17%;bottom:48px;transform:translateX(-50%) scale(.58) rotate(-300deg)}
.ball-v2.shoot-br{left:83%;bottom:48px;transform:translateX(-50%) scale(.58) rotate(300deg)}
.penalty-result-text{z-index:12;pointer-events:none;background:rgba(4,14,22,.7);padding:8px 14px;border-radius:12px}
.penalty-spot{width:16px;height:8px;border-radius:50%;background:rgba(255,255,255,.78);margin:102px auto 0;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.penalty-final{padding-top:100px}
@media(max-width:700px){
  .goal-interactive{width:96%;height:350px;margin-top:12px}
  .goal-answer{width:45%;min-height:84px;padding:8px;gap:6px}
  .goal-answer b{flex-basis:27px;width:27px;height:27px;font-size:12px}
  .goal-answer span{font-size:10px}
  .goal-answer-tl,.goal-answer-bl{left:2%}.goal-answer-tr,.goal-answer-br{right:2%}
  .keeper-body{font-size:54px}
  .ball-v2{font-size:42px}
  .ball-v2.shoot-tl,.ball-v2.shoot-tr{bottom:245px}
  .ball-v2.shoot-bl,.ball-v2.shoot-br{bottom:42px}
  .penalty-spot{margin-top:100px}
}
@media(prefers-reduced-motion:reduce){.ball-v2,.keeper-v2,.goal-answer{transition-duration:.01ms!important}}

/* =========================================================
   DMD LIVE ARENA — real-time classroom 1v1 reflex duel
   ========================================================= */
.arena-home-section{position:relative;overflow:hidden;display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:center;margin:30px 0 24px;padding:34px;border:1px solid rgba(255,92,123,.25);border-radius:28px;background:linear-gradient(135deg,rgba(56,12,29,.72),rgba(10,25,42,.94) 52%,rgba(10,55,62,.78));box-shadow:0 24px 70px rgba(0,0,0,.28)}
.arena-home-glow{position:absolute;right:-100px;top:-170px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(255,83,126,.22),rgba(57,230,215,.08) 42%,transparent 70%);pointer-events:none}
.arena-home-copy,.arena-home-action{position:relative;z-index:2}.arena-home-copy>span{display:inline-flex;align-items:center;gap:8px;color:#ff8cab;font:900 10px Space Grotesk;letter-spacing:1.8px}.arena-home-copy h2{margin:5px 0 -4px;font:900 clamp(56px,7vw,94px) Space Grotesk;letter-spacing:-5px;line-height:1;color:white;text-shadow:0 0 36px rgba(255,80,123,.16)}.arena-home-copy h3{margin:9px 0 8px;font:800 24px Space Grotesk}.arena-home-copy p{max-width:740px;margin:0;color:var(--muted);line-height:1.65;font-size:13px}.arena-home-copy p b{color:#ff9ab3}.arena-home-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.arena-home-tags i{font-style:normal;padding:7px 10px;border:1px solid rgba(255,255,255,.09);border-radius:99px;background:rgba(255,255,255,.045);font-size:9px;font-weight:900;letter-spacing:.5px}.arena-home-tags i:first-child{color:#66edb0;border-color:rgba(94,227,141,.22)}
.arena-home-action{display:grid;justify-items:center;gap:13px}.crossed-swords{font-size:100px;filter:drop-shadow(0 16px 22px rgba(0,0,0,.35));animation:arenaFloat 2.6s ease-in-out infinite}.arena-home-action .primary{min-width:210px;background:linear-gradient(135deg,#ff4f7a,#d93864);box-shadow:0 10px 32px rgba(255,67,112,.24)}.arena-home-action small{color:var(--muted);font-size:10px}
@keyframes arenaFloat{50%{transform:translateY(-10px) rotate(3deg)}}

.arena-duel-screen{min-height:100vh;padding:24px clamp(18px,4vw,54px) 48px;background:radial-gradient(circle at 50% -10%,rgba(255,68,113,.16),transparent 30%),radial-gradient(circle at 8% 45%,rgba(57,230,215,.09),transparent 26%),#06111d;color:var(--text)}
.arena-duel-top{max-width:1260px;margin:0 auto 24px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;padding:12px 0 18px;border-bottom:1px solid var(--line)}.arena-duel-top>div{text-align:center;display:grid;gap:2px}.arena-duel-top small{color:#ff8cac;font:900 9px Space Grotesk;letter-spacing:1.5px}.arena-duel-top b{font:900 21px Space Grotesk}.arena-duel-top>span{justify-self:end;font:900 9px Space Grotesk;letter-spacing:1.1px;color:#66edb0}.arena-duel-top>span.offline{color:#ffd572}
.arena-lobby-screen{overflow-x:hidden}.arena-lobby-hero{max-width:1260px;margin:0 auto 24px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:stretch}.arena-lobby-hero>div:first-child{padding:28px 30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(19,37,59,.9),rgba(9,24,39,.9))}.arena-kicker{color:#ff8cac;font:900 10px Space Grotesk;letter-spacing:1.6px}.arena-lobby-hero h1{font:900 clamp(42px,6vw,72px) Space Grotesk;letter-spacing:-3px;line-height:.98;margin:9px 0 15px}.arena-lobby-hero h1 em{font-style:normal;color:var(--cyan)}.arena-lobby-hero p{max-width:800px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.arena-wager{display:grid;place-content:center;text-align:center;padding:25px;border:1px solid rgba(255,88,128,.24);border-radius:24px;background:radial-gradient(circle at center,rgba(255,70,116,.12),transparent 70%),rgba(32,9,20,.46)}.arena-wager small{font:900 9px Space Grotesk;color:#ff9ab4;letter-spacing:1.4px}.arena-wager strong{font:900 78px Space Grotesk;line-height:1;color:#fff;margin:5px 0;text-shadow:0 0 28px rgba(255,74,119,.25)}.arena-wager span{font-size:10px;line-height:1.45;color:var(--muted)}
.arena-error{max-width:1260px;margin:-8px auto 16px;padding:11px 14px;border:1px solid rgba(255,100,109,.25);border-radius:12px;background:rgba(255,100,109,.08);color:#ffc0c5;font-size:11px}.arena-invite{max-width:1260px;margin:0 auto 16px;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 20px;border-radius:18px}.arena-invite>div:first-child{display:grid;gap:3px}.arena-invite small{font:900 9px Space Grotesk;letter-spacing:1.3px}.arena-invite strong{font:800 16px Space Grotesk}.arena-invite span{font-size:10px;color:var(--muted)}.arena-invite>div:last-child{display:flex;gap:8px}.arena-invite.incoming{border:1px solid rgba(255,87,127,.3);background:linear-gradient(90deg,rgba(255,65,111,.12),rgba(255,65,111,.035))}.arena-invite.incoming small{color:#ff92ac}.arena-invite.outgoing{border:1px solid rgba(57,230,215,.2);background:linear-gradient(90deg,rgba(57,230,215,.08),rgba(57,230,215,.025))}.arena-invite.outgoing small{color:var(--cyan)}.waiting-dots{display:flex!important;gap:6px}.waiting-dots i{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:arenaDots 1.1s infinite}.waiting-dots i:nth-child(2){animation-delay:.15s}.waiting-dots i:nth-child(3){animation-delay:.3s}@keyframes arenaDots{50%{opacity:.2;transform:translateY(-5px)}}
.arena-list-head{max-width:1260px;margin:26px auto 12px;display:flex;justify-content:space-between;align-items:end}.arena-list-head small{font:900 9px Space Grotesk;color:var(--cyan);letter-spacing:1.4px}.arena-list-head h2{margin:4px 0 0;font:900 27px Space Grotesk}.arena-list-head>span{font-size:10px;color:#65eeb0}.arena-player-grid{max-width:1260px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.arena-player-card{padding:16px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(155deg,rgba(17,38,59,.9),rgba(8,22,35,.92));transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.arena-player-card:hover{transform:translateY(-3px);border-color:rgba(57,230,215,.22);box-shadow:0 18px 40px rgba(0,0,0,.22)}.arena-player-main{display:flex;gap:11px;align-items:center}.arena-player-avatar{width:50px;height:50px;position:relative;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.055);font-size:29px}.arena-player-avatar img{width:100%;height:100%;object-fit:cover;border-radius:15px}.arena-player-avatar i{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid #0a1928;background:#55e895;box-shadow:0 0 10px rgba(85,232,149,.7)}.arena-player-main>div:last-child{display:grid;gap:1px}.arena-player-main small{font-size:8px;color:var(--muted);letter-spacing:.8px}.arena-player-main strong{font:800 15px Space Grotesk}.arena-player-main span{font:900 12px Space Grotesk;color:var(--cyan)}.arena-record{display:flex;gap:12px;margin:15px 0 8px;padding-top:10px;border-top:1px solid var(--line);font-size:10px}.arena-stake{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.arena-stake small{color:var(--muted);font-size:9px}.arena-stake b{color:#74f0b8;font:900 18px Space Grotesk}.arena-challenge{width:100%;border:1px solid rgba(255,85,126,.28);border-radius:10px;padding:10px 12px;background:rgba(255,70,113,.09);color:#ffabc0;font:900 10px Space Grotesk;letter-spacing:.6px}.arena-challenge:hover:not(:disabled){background:rgba(255,70,113,.18);border-color:rgba(255,85,126,.5)}.arena-challenge:disabled{opacity:.38}.arena-rules{max-width:1260px;margin:16px auto 0;display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px dashed rgba(255,255,255,.1);border-radius:13px;color:var(--muted);font-size:9px;line-height:1.5}.arena-rules b{flex:0 0 auto;color:#ff91ac;letter-spacing:1px}.arena-empty{grid-column:1/-1;display:grid;justify-items:center;text-align:center;padding:55px;border:1px dashed rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.02)}.arena-empty.compact{padding:38px}.arena-empty>span{font-size:48px}.arena-empty h1,.arena-empty h3{font-family:Space Grotesk;margin:9px 0 5px}.arena-empty p{margin:0;color:var(--muted);font-size:11px}
.duel-scoreboard{max-width:1000px;margin:18px auto 24px;display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:20px}.duelist{display:grid;justify-items:center;gap:3px;padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035)}.duelist.me{border-color:rgba(57,230,215,.18);background:rgba(57,230,215,.035)}.duel-avatar{width:86px;height:86px;display:grid;place-items:center;border-radius:24px;background:rgba(255,255,255,.06);font-size:50px;overflow:hidden}.duel-avatar img{width:100%;height:100%;object-fit:cover}.duelist small{margin-top:5px;color:var(--muted);font:900 8px Space Grotesk;letter-spacing:1.2px}.duelist strong{font:900 21px Space Grotesk}.duelist b{color:var(--cyan);font:900 12px Space Grotesk}.versus{display:grid;justify-items:center}.versus span{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,76,119,.3);background:rgba(255,76,119,.09);font:900 24px Space Grotesk;color:#ff8ca8;box-shadow:0 0 32px rgba(255,62,108,.1)}.versus i{height:35px;border-left:1px dashed rgba(255,255,255,.14)}
.duel-reactor{max-width:1000px;min-height:420px;margin:auto;display:grid;place-content:center;justify-items:center;text-align:center;padding:36px;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 50% 45%,rgba(57,230,215,.07),transparent 35%),linear-gradient(160deg,#0c1d2f,#06111e);box-shadow:inset 0 0 80px rgba(0,0,0,.28);touch-action:none;user-select:none;overflow:hidden;position:relative}.duel-reactor.wait{cursor:pointer}.duel-reactor.fire{background:radial-gradient(circle at 50% 45%,rgba(94,227,141,.2),transparent 34%),linear-gradient(160deg,#0d2c2c,#07131d)}.duel-pulse{width:135px;height:135px;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(57,230,215,.34);background:rgba(57,230,215,.07);font:900 64px Space Grotesk;color:var(--cyan);box-shadow:0 0 50px rgba(57,230,215,.11);animation:duelPulse 1s ease-in-out infinite}.duel-pulse.warning{border-color:rgba(255,196,85,.35);background:rgba(255,196,85,.07);color:#ffd26f;box-shadow:0 0 50px rgba(255,196,85,.09)}@keyframes duelPulse{50%{transform:scale(1.07);box-shadow:0 0 65px rgba(57,230,215,.18)}}.duel-reactor h2{font:900 clamp(28px,4vw,46px) Space Grotesk;margin:16px 0 4px}.duel-reactor p{margin:0;color:var(--muted);font-size:12px}.duel-reactor>small{margin-top:10px;color:#ffd26f}.duel-fire-button{width:min(310px,65vw);aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,#a8ffc8,#34df91 38%,#0e9560 74%);color:#032519;font:900 clamp(24px,5vw,48px) Space Grotesk;box-shadow:0 0 0 14px rgba(94,227,141,.08),0 0 70px rgba(94,227,141,.38),inset 0 -18px 25px rgba(0,0,0,.18);animation:duelFire .55s ease-in-out infinite alternate;cursor:pointer}.duel-fire-button:disabled{filter:saturate(.35);animation:none}@keyframes duelFire{to{transform:scale(1.045);box-shadow:0 0 0 22px rgba(94,227,141,.04),0 0 90px rgba(94,227,141,.46),inset 0 -18px 25px rgba(0,0,0,.18)}}
.duel-result{display:grid;justify-items:center;gap:8px;animation:resultPop .4s cubic-bezier(.2,.8,.2,1) both}.result-icon{font-size:88px}.duel-result h1{margin:0;font:900 clamp(32px,5vw,58px) Space Grotesk;letter-spacing:-2px}.duel-result.win h1{color:#76efb8}.duel-result.lose h1{color:#ff8ca8}.duel-result.draw h1{color:#ffd572}.duel-result p{font-size:13px}.duel-result p strong{font:900 23px Space Grotesk;color:white}.false-start{padding:9px 12px;border:1px solid rgba(255,200,92,.23);border-radius:11px;background:rgba(255,200,92,.07);color:#ffd782;font-size:10px}.after-scores{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:8px}.after-scores span{padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.05);font-size:10px}.after-scores b{color:var(--cyan);font-size:13px}@keyframes resultPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:900px){.arena-home-section{grid-template-columns:1fr}.arena-home-action{justify-items:start}.crossed-swords{font-size:72px}.arena-lobby-hero{grid-template-columns:1fr}.arena-player-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.arena-home-section{padding:24px}.arena-home-copy h2{font-size:62px}.arena-duel-screen{padding:14px 12px 35px}.arena-duel-top{grid-template-columns:1fr auto}.arena-duel-top>div{display:none}.arena-lobby-hero>div:first-child{padding:22px}.arena-lobby-hero h1{font-size:46px}.arena-player-grid{grid-template-columns:1fr}.arena-invite{align-items:flex-start;flex-direction:column}.arena-invite>div:last-child{width:100%}.arena-invite button{flex:1}.duel-scoreboard{grid-template-columns:1fr 55px 1fr;gap:8px}.duelist{padding:11px}.duel-avatar{width:62px;height:62px;font-size:38px;border-radius:18px}.duelist strong{font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duelist b{font-size:9px}.versus span{width:48px;height:48px;font-size:16px}.duel-reactor{min-height:390px;padding:20px}.duel-pulse{width:110px;height:110px;font-size:52px}.arena-rules{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.crossed-swords,.waiting-dots i,.duel-pulse,.duel-fire-button,.duel-result{animation:none!important}}

/* =========================================================
   DMD LIVE ARENA — cinematic desert duel overrides
   ========================================================= */
.cinematic-duel-screen .duel-reactor.duel-scene{max-width:1200px;min-height:560px;padding:0;display:block;background:linear-gradient(180deg,#ffb261 0%,#f18d55 28%,#8f4f38 54%,#4a2b28 100%);border:1px solid rgba(255,255,255,.12);border-radius:34px;box-shadow:inset 0 0 120px rgba(0,0,0,.24),0 28px 70px rgba(0,0,0,.3)}
.cinematic-board{max-width:1120px}
.cinematic-duel-screen .duel-scene::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 22%,rgba(0,0,0,.05) 60%,rgba(0,0,0,.18) 100%);pointer-events:none}
.desert-sun{position:absolute;right:9%;top:9%;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6ca,#ffd57b 45%,#ff974d 70%,rgba(255,151,77,.15) 72%,transparent 73%);box-shadow:0 0 90px rgba(255,183,98,.5)}
.desert-cloud{position:absolute;height:18px;border-radius:999px;background:rgba(255,240,220,.2);filter:blur(2px);opacity:.7}.desert-cloud.c1{left:14%;top:16%;width:150px;animation:cloudDrift 13s linear infinite}.desert-cloud.c2{left:44%;top:22%;width:100px;animation:cloudDrift 10s linear infinite reverse}
.desert-dune{position:absolute;left:-5%;right:-5%;border-radius:50% 50% 0 0/100% 100% 0 0}.dune-back{bottom:28%;height:34%;background:linear-gradient(180deg,#d58d50,#bb6f3d)}.dune-mid{bottom:15%;height:28%;background:linear-gradient(180deg,#b6663a,#954c30)}.dune-front{bottom:-2%;height:26%;background:linear-gradient(180deg,#82462f,#5e3428)}
.duel-ground-line{position:absolute;left:12%;right:12%;bottom:23%;height:3px;border-radius:999px;background:rgba(58,29,18,.45);box-shadow:0 0 0 1px rgba(255,224,180,.05)}
.dust{position:absolute;bottom:18%;width:100px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(255,225,165,.2),transparent 68%);filter:blur(2px);animation:dustMove 2.8s ease-in-out infinite}.dust-left{left:22%}.dust-right{right:21%;animation-delay:1.1s}
.duel-center-ui{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:9;display:grid;justify-items:center;gap:10px;text-align:center;width:min(560px,86vw);padding:18px 22px 20px;border:1px solid rgba(255,248,230,.16);border-radius:28px;background:linear-gradient(180deg,rgba(34,16,18,.4),rgba(9,8,13,.62));backdrop-filter:blur(8px);box-shadow:0 14px 45px rgba(0,0,0,.22)}
.duel-center-ui.resolved{top:17%;transform:translate(-50%,0);width:min(680px,92vw);padding-top:22px}
.duel-center-ui .duel-pulse{width:88px;height:88px;font-size:38px;border-color:rgba(255,244,214,.35);background:rgba(255,255,255,.12);color:#fff4d3;box-shadow:0 0 42px rgba(255,227,172,.22)}
.duel-center-ui .duel-pulse.warning{color:#fff1b0;border-color:rgba(255,214,110,.5);background:rgba(255,214,110,.12)}
.duel-center-ui .duel-pulse.hide{display:none}
.duel-center-ui h2{margin:0;font:900 clamp(28px,4vw,50px) Space Grotesk;letter-spacing:-1.6px;color:#fff7e6;text-shadow:0 3px 16px rgba(0,0,0,.28)}
.duel-center-ui p{margin:0;max-width:520px;color:rgba(255,246,235,.85);font-size:12px;line-height:1.55}
.duel-center-ui .duel-fire-button{width:min(280px,72vw);aspect-ratio:auto;padding:16px 22px;border-radius:20px;background:linear-gradient(180deg,#fff2a7,#ffcb53 42%,#e48824 100%);color:#48210a;font:900 clamp(22px,4vw,34px) Space Grotesk;box-shadow:0 18px 45px rgba(255,183,55,.3),inset 0 -8px 12px rgba(0,0,0,.14)}
.gunslinger{position:absolute;bottom:19%;z-index:6;display:grid;justify-items:center;transform-origin:50% 100%}.gunslinger.me{left:14%}.gunslinger.opponent{right:14%}.gunslinger.opponent .gunslinger-body{transform:scaleX(-1)}.gunslinger-shadow{width:128px;height:22px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.34),transparent 70%);filter:blur(2px);transform:translateY(100px)}
.gunslinger-body{position:relative;width:150px;height:240px;filter:drop-shadow(0 14px 20px rgba(0,0,0,.25));transition:transform .18s ease}
.gunslinger-head{position:absolute;left:48px;top:28px;width:54px;height:54px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,248,230,.45);background:linear-gradient(180deg,#ffd3ae,#c77c5a);display:grid;place-items:center;font-size:26px;z-index:4}.gunslinger-head img{width:100%;height:100%;object-fit:cover}
.gunslinger-hat{position:absolute;left:33px;top:8px;width:84px;height:20px;border-radius:18px;background:#3e2424;z-index:6;box-shadow:0 9px 0 #5b3430}.gunslinger-hat::before{content:"";position:absolute;left:14px;bottom:12px;width:56px;height:34px;border-radius:24px 24px 8px 8px;background:#5a3432}
.gunslinger-bandana{position:absolute;left:57px;top:68px;width:36px;height:10px;border-radius:999px;background:#ff6b6b;z-index:5}
.gunslinger-torso{position:absolute;left:42px;top:82px;width:66px;height:78px;border-radius:18px 18px 14px 14px;background:linear-gradient(180deg,#31456d,#19263e)}
.gunslinger-torso::before{content:"";position:absolute;left:27px;top:0;width:12px;height:78px;background:rgba(255,255,255,.08)}
.gunslinger-arm{position:absolute;top:92px;width:18px;height:68px;border-radius:14px;background:linear-gradient(180deg,#23334f,#162234);transform-origin:50% 10%}.arm-back{left:30px;transform:rotate(20deg)}.arm-front{left:95px;transform:rotate(-20deg)}
.gunslinger-gun{position:absolute;left:108px;top:128px;width:34px;height:8px;border-radius:8px;background:#d5d7dc;transform:rotate(-4deg);transform-origin:left center;z-index:8}.gunslinger-gun::before{content:"";position:absolute;right:-4px;top:1px;width:8px;height:6px;border-radius:2px;background:#f5f5f5}.gunslinger-gun::after{content:"";position:absolute;left:10px;top:7px;width:8px;height:14px;border-radius:0 0 4px 4px;background:#7d4f3a}
.gun-flash{position:absolute;right:-20px;top:-11px;width:0;height:0;border-left:22px solid #ffe47b;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:0;filter:drop-shadow(0 0 8px rgba(255,232,115,.7))}.gun-flash.show{opacity:1;animation:muzzleFlash .35s ease 2}
.gunslinger-leg{position:absolute;top:154px;width:19px;height:88px;border-radius:16px;background:linear-gradient(180deg,#222d44,#121a29);transform-origin:50% 10%}.leg-back{left:56px;transform:rotate(8deg)}.leg-front{left:82px;transform:rotate(-6deg)}
.duelist-plate{margin-top:12px;display:grid;justify-items:center;gap:2px;padding:9px 13px;border-radius:14px;background:rgba(12,8,11,.28);backdrop-filter:blur(4px);border:1px solid rgba(255,248,231,.12)}.duelist-plate small{color:rgba(255,236,205,.72);font:900 8px Space Grotesk;letter-spacing:1.1px}.duelist-plate strong{font:900 18px Space Grotesk;color:#fff8e8}.duelist-plate span{font:900 10px Space Grotesk;color:#7df0c6}
.gunslinger.idle .gunslinger-body{animation:idleBob 1.8s ease-in-out infinite}.gunslinger.tense .gunslinger-body{animation:tenseBob .8s ease-in-out infinite}.gunslinger.draw .arm-front{animation:drawAim .22s ease forwards}.gunslinger.draw .gunslinger-gun{animation:drawGun .22s ease forwards}.gunslinger.recoil .arm-front{animation:shootArm .25s ease forwards}.gunslinger.recoil .gunslinger-gun{animation:shootGun .25s ease forwards}.gunslinger.winner .gunslinger-body{animation:winnerPose .55s ease forwards}.gunslinger.down .gunslinger-body{animation:duelFall .9s cubic-bezier(.2,.8,.2,1) forwards}.gunslinger.down .gunslinger-shadow{animation:shadowStretch .9s ease forwards}
.duel-impact{position:absolute;left:18px;top:96px;width:70px;height:70px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff9cb 0%,#ffd871 20%,rgba(255,180,69,.6) 35%,transparent 60%)}.duel-impact.show{opacity:1;animation:impactFlash .55s ease}
.duel-shot-trail{position:absolute;top:55%;width:42%;height:4px;border-radius:999px;background:linear-gradient(90deg,#ffe9a1,#fffef0,#ffc766);box-shadow:0 0 16px rgba(255,226,136,.7);z-index:8;animation:shotTrail .35s ease both}.duel-shot-trail.from-me{left:26%}.duel-shot-trail.from-opponent{right:26%;transform:scaleX(-1)}
.cinematic-duel-screen .duel-result{gap:12px;background:transparent;animation:resultPop .45s cubic-bezier(.2,.8,.2,1) both}.cinematic-duel-screen .duel-result h1{font-size:clamp(30px,5vw,58px)}.cinematic-duel-screen .duel-result p{font-size:14px;color:#fff6e8}.cinematic-duel-screen .after-scores span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
@keyframes cloudDrift{50%{transform:translateX(30px)}}@keyframes dustMove{50%{transform:translateX(20px) scale(1.08);opacity:.7}}@keyframes idleBob{50%{transform:translateY(-6px)}}@keyframes tenseBob{50%{transform:translateY(-5px) translateX(2px)}}@keyframes drawAim{to{transform:rotate(-74deg) translate(8px,-6px)}}@keyframes drawGun{to{transform:rotate(-11deg) translate(4px,-5px)}}@keyframes shootArm{0%{transform:rotate(-74deg) translate(8px,-6px)}50%{transform:rotate(-95deg) translate(10px,-10px)}100%{transform:rotate(-80deg) translate(9px,-8px)}}@keyframes shootGun{0%{transform:rotate(-11deg) translate(4px,-5px)}50%{transform:rotate(4deg) translate(6px,-6px)}100%{transform:rotate(-7deg) translate(5px,-5px)}}@keyframes winnerPose{0%{transform:translateY(0)}50%{transform:translateY(-6px) scale(1.02)}100%{transform:translateY(-2px)}}@keyframes duelFall{0%{transform:none}30%{transform:translate(12px,-2px) rotate(16deg)}100%{transform:translate(56px,74px) rotate(86deg)}}@keyframes shadowStretch{to{transform:translateY(116px) scaleX(1.45);opacity:.45}}@keyframes impactFlash{0%{transform:scale(.2);opacity:0}35%{transform:scale(1);opacity:1}100%{transform:scale(1.45);opacity:0}}@keyframes muzzleFlash{50%{transform:scale(1.12)}}@keyframes shotTrail{from{opacity:0;transform:scaleX(.1)}to{opacity:1;transform:scaleX(1)}}
@media(max-width:900px){.gunslinger.me{left:6%}.gunslinger.opponent{right:6%}.gunslinger-body{width:120px;height:205px;transform-origin:50% 100%}.gunslinger-head{left:40px;top:24px;width:44px;height:44px}.gunslinger-hat{left:28px;top:8px;width:68px}.gunslinger-hat::before{left:10px;width:48px;height:28px}.gunslinger-bandana{left:47px;top:59px;width:28px}.gunslinger-torso{left:34px;top:72px;width:54px;height:68px}.arm-back{left:24px}.arm-front{left:81px}.gunslinger-gun{left:92px;top:112px}.leg-back{left:46px;top:138px;height:73px}.leg-front{left:68px;top:138px;height:73px}.duelist-plate strong{font-size:15px}.duel-center-ui{top:18%;transform:translate(-50%,0)}.duel-shot-trail{top:46%;width:48%}}
@media(max-width:650px){.cinematic-duel-screen .duel-reactor.duel-scene{min-height:700px}.cinematic-board{grid-template-columns:1fr 50px 1fr}.duel-center-ui{top:14%;width:min(94vw,600px);padding:14px 14px 18px}.duel-center-ui .duel-pulse{width:66px;height:66px;font-size:28px}.duel-center-ui h2{font-size:28px}.duel-center-ui p{font-size:11px}.gunslinger{bottom:15%}.gunslinger.me{left:2%}.gunslinger.opponent{right:2%}.gunslinger-body{width:96px;height:176px}.gunslinger-shadow{width:90px}.gunslinger-head{left:33px;top:19px;width:34px;height:34px;border-width:2px;font-size:19px}.gunslinger-hat{left:22px;top:4px;width:56px;height:16px;box-shadow:0 7px 0 #5b3430}.gunslinger-hat::before{left:8px;bottom:10px;width:40px;height:24px}.gunslinger-bandana{left:38px;top:47px;width:20px;height:8px}.gunslinger-torso{left:28px;top:58px;width:42px;height:58px}.arm-back,.arm-front{top:67px;width:13px;height:50px}.arm-back{left:20px}.arm-front{left:64px}.gunslinger-gun{left:73px;top:96px;width:24px;height:6px}.gunslinger-gun::before{right:-3px;top:1px;width:6px;height:4px}.gunslinger-gun::after{left:8px;top:5px;width:7px;height:10px}.leg-back,.leg-front{top:113px;width:14px;height:62px}.leg-back{left:37px}.leg-front{left:55px}.duelist-plate{padding:7px 9px;margin-top:8px}.duelist-plate strong{font-size:12px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duelist-plate span{font-size:8px}.gunslinger.down .gunslinger-body{animation:duelFallMobile .9s cubic-bezier(.2,.8,.2,1) forwards}.duel-shot-trail{top:48%;width:56%}.duel-center-ui.resolved{top:12%}}
@keyframes duelFallMobile{0%{transform:none}30%{transform:translate(8px,-1px) rotate(16deg)}100%{transform:translate(42px,54px) rotate(82deg)}}
@media(prefers-reduced-motion:reduce){.desert-cloud,.dust,.gunslinger-body,.duel-shot-trail,.gun-flash,.duel-impact{animation:none!important}}

/* =========================================================
   DMD CLASS CHAT — real-time slide-in room
   ========================================================= */
.chat-fab{position:fixed;right:22px;bottom:224px;z-index:85;min-width:74px;height:52px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(57,230,215,.28);border-radius:18px;background:linear-gradient(145deg,rgba(13,44,61,.96),rgba(9,24,39,.98));color:#effcff;box-shadow:0 18px 45px rgba(0,0,0,.3),0 0 28px rgba(57,230,215,.08);backdrop-filter:blur(14px)}.chat-fab span{font-size:22px}.chat-fab b{font:900 10px Space Grotesk;letter-spacing:.9px}.chat-fab i{position:absolute;right:-7px;top:-8px;min-width:24px;height:24px;padding:0 5px;display:grid;place-items:center;border-radius:99px;background:#ff5d7d;color:white;font:900 10px Space Grotesk;border:2px solid #07111f;box-shadow:0 5px 16px rgba(255,69,107,.35)}.chat-backdrop{position:fixed;inset:0;z-index:89;background:rgba(1,7,13,.5);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}.chat-backdrop.show{opacity:1;visibility:visible}.chat-drawer{position:fixed;right:0;top:0;z-index:90;width:min(430px,100vw);height:100dvh;display:grid;grid-template-rows:auto auto 1fr auto auto;border-left:1px solid rgba(57,230,215,.16);background:linear-gradient(180deg,rgba(9,25,42,.99),rgba(4,14,25,.995));box-shadow:-26px 0 70px rgba(0,0,0,.4);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow:hidden}.chat-drawer.open{transform:translateX(0)}.chat-head{min-height:86px;display:grid;grid-template-columns:46px 1fr 38px;gap:11px;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}.chat-head-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,rgba(57,230,215,.18),rgba(58,134,255,.15));font-size:23px}.chat-head>div:nth-child(2){min-width:0;display:grid;gap:2px}.chat-head small{color:var(--cyan);font:900 8px Space Grotesk;letter-spacing:1.05px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-head strong{font:800 15px Space Grotesk;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-head span{font-size:9px;color:#ffd67a}.chat-head span.connected{color:#68edb2}.chat-head>button{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);font-size:24px;line-height:1}.chat-info{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(57,230,215,.035);color:var(--muted);font-size:9px;line-height:1.45}.chat-messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 13px 22px;scrollbar-width:thin;scrollbar-color:rgba(57,230,215,.25) transparent}.chat-message{display:flex;gap:8px;align-items:flex-end;margin:0 0 13px}.chat-message.mine{justify-content:flex-end}.chat-avatar{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#153149;font-size:18px;overflow:hidden}.chat-avatar img{width:100%;height:100%;object-fit:cover}.chat-bubble{max-width:82%;padding:9px 11px 10px;border:1px solid rgba(255,255,255,.08);border-radius:16px 16px 16px 5px;background:rgba(255,255,255,.055);box-shadow:0 8px 20px rgba(0,0,0,.08)}.chat-message.mine .chat-bubble{border-color:rgba(57,230,215,.17);border-radius:16px 16px 5px 16px;background:linear-gradient(145deg,rgba(57,230,215,.13),rgba(58,134,255,.1))}.chat-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:4px}.chat-meta b{font:800 10px Space Grotesk;color:#dffdf9}.chat-meta time{font-size:8px;color:#7891a6;white-space:nowrap}.chat-bubble p{margin:0;color:#e8f3fb;font-size:12px;line-height:1.48;white-space:pre-wrap;overflow-wrap:anywhere}.chat-empty{min-height:60%;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--muted);padding:30px}.chat-empty span{font-size:43px}.chat-empty strong{margin-top:10px;color:white;font:800 18px Space Grotesk}.chat-empty p{max-width:260px;margin:5px 0 0;font-size:11px;line-height:1.5}.chat-error{padding:8px 12px;border-top:1px solid rgba(255,100,109,.16);background:rgba(255,100,109,.06);color:#ffc3c8;font-size:9px}.chat-compose{position:relative;display:grid;grid-template-columns:1fr 46px;gap:8px;padding:11px 12px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(3,12,22,.98)}.chat-compose textarea{width:100%;min-height:46px;max-height:120px;resize:none;padding:12px 13px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.055);color:white;outline:none;line-height:1.4}.chat-compose textarea:focus{border-color:rgba(57,230,215,.4);box-shadow:0 0 0 3px rgba(57,230,215,.05)}.chat-send{width:46px;height:46px;border:0;border-radius:15px;background:linear-gradient(145deg,var(--cyan),#54a8ff);color:#04131d;font-size:20px;font-weight:900}.chat-compose>small{position:absolute;right:68px;bottom:3px;color:#61788d;font-size:7px}

/* =========================================================
   MOBILE CONTROL PAD — keyboard games become touch-playable
   ========================================================= */
.mobile-dpad{display:none;width:190px;height:190px;margin:12px auto 2px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;touch-action:none;user-select:none}.mobile-dpad button{border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(255,255,255,.065);font:900 20px Space Grotesk;min-width:0;min-height:54px;touch-action:none}.mobile-dpad button:active:not(:disabled){background:rgba(57,230,215,.18);border-color:rgba(57,230,215,.42);transform:scale(.96)}.dpad-up{grid-column:2}.dpad-left{grid-column:1;grid-row:2}.dpad-center{grid-column:2;grid-row:2;opacity:.3}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}

/* =========================================================
   FULL RESPONSIVE PASS — hub + every game + arena + chat
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}img,svg,video,canvas{max-width:100%}.game-shell,.game-stage,.runner-wrap,.arena-wrap,.scanner-stage,.sequence-stage,.calendar-game,.memory-stage,.myth-stage,.defense-wrap,.rhythm-wrap,.archery-wrap{min-width:0;max-width:100%}.game-stage{overflow:hidden}.game-stage button,.game-shell button{touch-action:manipulation}.runner-road,.topdown-arena,.blaster,.reflex-stage,.defense-field,.rhythm-board,.archery-field,.goal-interactive{max-width:100%}

@media(max-width:980px){
 .main-header{height:auto;min-height:74px;flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}
 .main-header nav{display:flex!important;order:3;width:100%;gap:6px;overflow-x:auto;padding:3px 0 1px;scrollbar-width:none}.main-header nav::-webkit-scrollbar{display:none}.main-header nav button{flex:0 0 auto;min-height:38px;padding:8px 11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
 .profile-chip{margin-left:auto}.hero{padding-top:36px}.hero-visual{max-width:560px;width:100%;margin:auto}.games-section{padding-top:56px}.game-shell{padding:10px}.game-topbar{height:auto;min-height:66px;position:sticky;top:0;z-index:45;background:rgba(6,17,29,.92);backdrop-filter:blur(14px);border-radius:0 0 15px 15px}.game-hint{font-size:10px;line-height:1.45;padding:9px 12px}.mobile-dpad{display:grid}
 .runner-road,.topdown-arena{height:min(620px,68dvh)}.blaster,.reflex-stage{height:min(680px,72dvh)}.defense-field,.rhythm-board{height:min(620px,68dvh)}
 .arena-actions,.runner-controls{flex-wrap:wrap}.arena-actions button,.runner-controls button{min-height:48px}.dual-hud,.defense-hud,.rhythm-hud,.archery-hud{gap:8px;flex-wrap:wrap}
 .archery-hud{grid-template-columns:repeat(2,minmax(0,1fr))}.archery-field{width:100%;height:clamp(420px,68dvh,560px)}
 .quiz-stage,.scanner-stage,.sequence-stage{min-height:calc(100dvh - 92px)}
 .mission-line{grid-template-columns:repeat(3,minmax(0,1fr))}.card-pool{grid-template-columns:repeat(2,minmax(0,1fr))}
 .memory-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .chat-fab{bottom:222px;right:12px}
}

@media(max-width:650px){
 body{min-width:0}.main-header{padding-left:10px;padding-right:10px}.brand-mark{width:42px;height:42px}.profile-chip{padding:5px}.profile-chip img,.profile-chip>span{width:36px;height:36px}.profile-chip i{font-size:9px}.main-header nav button{font-size:10px;min-height:40px}
 main{padding-left:10px;padding-right:10px}.hero{gap:10px}.hero h1{font-size:clamp(38px,13vw,52px)}.hero-actions .big{width:100%}.hero-visual{height:245px}.player-dashboard{padding:9px}.dash-profile{padding:7px}.games-section{padding:48px 0}.game-card{min-height:230px;padding:17px}.mission-banner{margin-bottom:42px}
 .game-shell{padding:0;min-height:100dvh}.game-topbar{padding:7px 8px;gap:6px}.game-topbar>.ghost{min-width:44px;min-height:44px}.game-title{min-width:0}.game-title b{display:block;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-pill{white-space:nowrap;padding:8px 9px}.game-hint{margin:0 6px 6px;border-radius:11px}.game-stage{border-radius:14px;margin:0 4px 6px}
 .runner-wrap,.arena-wrap,.scanner-stage,.sequence-stage,.defense-wrap,.rhythm-wrap,.archery-wrap{padding:8px}.runner-road,.topdown-arena{height:58dvh;min-height:440px;border-radius:17px}.blaster,.reflex-stage{height:66dvh;min-height:500px}.defense-field,.rhythm-board{height:60dvh;min-height:470px;border-radius:17px}
 .runner-controls{display:grid;grid-template-columns:64px 1fr 64px;gap:7px}.runner-controls button{padding:10px 8px}.arena-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.arena-actions button{width:100%;padding:11px 8px}.mobile-dpad{width:176px;height:176px;margin-top:8px}.mobile-dpad button{min-height:50px}
 .quiz-stage{padding:10px;min-height:calc(100dvh - 86px)}.quiz-people{height:145px;gap:24px}.host,.contestant{font-size:50px}.speech-mini{right:-30px;font-size:9px}.quiz-console h2{font-size:17px}.answers{grid-template-columns:1fr;gap:8px}.answers button,.choice-stack button,.penalty-question button{min-height:48px;padding:12px}.answer-info{padding:11px}
 .scanner-stage{padding:12px;min-height:calc(100dvh - 86px)}.scanner-device{width:min(210px,82vw);height:150px}.case-card{padding:16px;border-radius:17px}.case-card h2{font-size:23px}.risk-meter{grid-template-columns:70px 1fr 36px}
 .sequence-stage{padding:12px;min-height:calc(100dvh - 86px)}.mission-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.mission-slot{min-height:92px;padding:8px}.card-pool{grid-template-columns:1fr 1fr;gap:7px}.card-pool button{min-height:100px;padding:8px}
 .calendar-game{padding:10px}.day-head{align-items:flex-start;gap:8px}.day-head h2{font-size:23px}.calendar-streak{font-size:9px}.time-row{grid-template-columns:60px 1fr;padding:11px;gap:6px}.activity-cards button{min-height:44px;flex:1 1 45%}
 .memory-stage{padding:10px}.memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.memory-card{min-width:0}.card-front span{font-size:28px}.card-front b{font-size:9px;text-align:center;padding:0 3px}.card-back{font-size:18px}
 .myth-stage{padding:10px}.myth-card{min-height:360px;padding:18px}.myth-actions{display:grid;grid-template-columns:1fr 1fr}.myth-actions button{min-height:52px}
 .goal-interactive{width:100%;height:350px;border-width:7px}.floating-question{margin:4px 5px 8px;padding:10px}.floating-question h3{font-size:16px}.goal-answer{width:47%;min-height:80px;padding:7px}.goal-answer span{font-size:9px}.keeper-v2{width:58px;height:58px}.keeper-body{font-size:50px}.ball-v2{font-size:39px}
 .defense-hud,.rhythm-hud,.dual-hud{font-size:10px}.defense-lane button{min-height:36px}.rhythm-buttons{gap:5px}.rhythm-buttons button{min-height:50px;padding:10px 5px;font-size:16px}.rhythm-note{width:44px;height:44px;font-size:21px}
 .archery-hud{grid-template-columns:1fr 1fr;gap:6px}.archery-hud>div{padding:8px}.archery-hud small{font-size:7px}.archery-hud b{font-size:12px}.archery-field{width:100%;height:58dvh;min-height:420px;border-radius:17px}.archery-player{transform:scale(.78);transform-origin:left bottom}.archery-target{transform:translate(-50%,-50%) scale(.68)}.archery-power{left:10px;right:10px;bottom:10px}.archery-crosshair{width:26px;height:26px}
 .arena-home-section{margin-top:18px;padding:20px}.arena-home-copy h2{font-size:clamp(50px,17vw,70px)}.arena-home-action .primary{width:100%}.arena-home-tags{gap:5px}.arena-home-tags i{font-size:8px}.arena-lobby-hero{gap:10px}.arena-wager{padding:18px}.arena-wager strong{font-size:62px}
 .chat-fab{right:12px;bottom:12px;min-width:58px;width:58px;height:58px;border-radius:50%;padding:0}.chat-fab b{display:none}.chat-fab span{font-size:25px}.chat-fab i{right:-3px;top:-5px}.chat-drawer{width:100vw;border-left:0}.chat-backdrop{display:none}.chat-head{padding-top:calc(12px + env(safe-area-inset-top));min-height:82px}.chat-bubble{max-width:88%}.chat-messages{padding-left:9px;padding-right:9px}.chat-compose{grid-template-columns:1fr 48px}.chat-compose textarea{font-size:16px}
 .class-dock{display:none!important}
}

@media(max-width:390px){
 .hero h1{font-size:38px}.main-header nav button{font-size:9px;padding:7px 9px}.game-title span{display:none}.game-title b{max-width:44vw}.score-pill{font-size:9px}.game-hint{font-size:9px}
 .runner-road,.topdown-arena{min-height:410px}.blaster,.reflex-stage{min-height:470px}.defense-field,.rhythm-board{min-height:440px}.archery-field{min-height:390px}
 .memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mission-line{grid-template-columns:1fr 1fr}.goal-answer span{font-size:8px}.arena-actions{grid-template-columns:1fr}.mobile-dpad{width:160px}.chat-head strong{font-size:13px}.chat-bubble p{font-size:11px}
}

@media(max-height:520px) and (orientation:landscape){
 .main-header{position:relative}.hero-visual{display:none}.hero{grid-template-columns:1fr}.game-topbar{position:relative}.runner-road,.topdown-arena,.blaster,.reflex-stage,.defense-field,.rhythm-board,.archery-field{height:calc(100dvh - 145px);min-height:330px}.quiz-stage,.scanner-stage,.sequence-stage{min-height:100dvh}.chat-drawer{width:min(430px,62vw)}.chat-head{min-height:66px;padding:8px 12px}.chat-info{display:none}.chat-compose{padding:7px 9px calc(7px + env(safe-area-inset-bottom))}.cinematic-duel-screen .duel-reactor.duel-scene{min-height:calc(100dvh - 135px)}
}

/* =========================================================
   DMD CLASS VISIBILITY — public / private classroom directory
   ========================================================= */
.class-visibility-picker{margin:15px 0 6px;padding:16px;border:1px solid rgba(57,230,215,.14);border-radius:18px;background:rgba(57,230,215,.035)}
.class-visibility-picker>div:first-child{display:grid;gap:3px;margin-bottom:12px}.class-visibility-picker>div:first-child small{color:var(--cyan);font:900 9px Space Grotesk;letter-spacing:1.4px}.class-visibility-picker>div:first-child b{font:800 16px Space Grotesk}.visibility-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.visibility-options button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025);color:inherit}.visibility-options button>span{grid-row:1/3;font-size:27px}.visibility-options button strong{font:800 13px Space Grotesk}.visibility-options button small{color:var(--muted);font-size:9px;line-height:1.45}.visibility-options button.selected{border-color:rgba(57,230,215,.38);background:linear-gradient(135deg,rgba(57,230,215,.11),rgba(58,134,255,.06));box-shadow:inset 0 0 28px rgba(57,230,215,.04)}
.visibility-badge{display:inline-flex;align-items:center;margin-top:8px;padding:6px 9px;border-radius:999px;font:900 8px Space Grotesk;letter-spacing:.8px}.visibility-badge.public{color:#73efb6;border:1px solid rgba(91,231,163,.24);background:rgba(91,231,163,.08)}.visibility-badge.private{color:#ffd879;border:1px solid rgba(255,210,98,.24);background:rgba(255,210,98,.07)}
.public-class-modal{width:min(650px,100%);max-width:650px}.public-class-section{margin:18px 0 6px}.public-class-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:10px}.public-class-head>div{display:grid;gap:2px}.public-class-head small{color:#6eedb2;font:900 9px Space Grotesk;letter-spacing:1.2px}.public-class-head b{font:800 15px Space Grotesk}.public-refresh{padding:7px 10px;font-size:10px}.public-class-list{display:grid;gap:9px;max-height:310px;overflow:auto;padding-right:3px}.public-class-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:13px;padding:13px;border:1px solid rgba(92,230,164,.16);border-radius:16px;background:linear-gradient(135deg,rgba(76,220,162,.07),rgba(23,47,65,.42))}.public-class-card-main{min-width:0;display:flex;align-items:center;gap:10px}.public-class-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:rgba(89,227,164,.11);font-size:20px}.public-class-card-main>div{min-width:0;display:grid;gap:2px}.public-class-card-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 13px Space Grotesk}.public-class-card-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px}.public-class-meta{display:grid;gap:4px;color:#bdd0df;font-size:9px;white-space:nowrap}.public-class-card>.primary{padding:9px 12px;font-size:10px}.public-class-empty{min-height:100px;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;padding:18px;border:1px dashed rgba(255,255,255,.11);border-radius:15px;background:rgba(255,255,255,.02);color:var(--muted);font-size:10px}.public-class-empty>span{font-size:27px}.public-class-empty>b{color:#dfeeff;font:800 13px Space Grotesk}.public-class-empty>small{font-size:9px}.join-or-divider{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:var(--muted);font:900 8px Space Grotesk;letter-spacing:1.3px}.join-or-divider:before,.join-or-divider:after{content:"";height:1px;background:var(--line);flex:1}.public-class-modal>label{display:grid;gap:7px;color:#b8c9d9;font-size:10px;font-weight:800}.public-class-modal>.primary.big{width:100%;margin-top:10px}
@media(max-width:650px){.visibility-options{grid-template-columns:1fr}.public-class-modal{padding:20px}.public-class-head{align-items:flex-start}.public-class-card{grid-template-columns:1fr auto}.public-class-card-main{grid-column:1/2}.public-class-meta{grid-column:1/2;display:flex;gap:10px}.public-class-card>.primary{grid-column:2/3;grid-row:1/3;align-self:stretch}.public-class-list{max-height:42vh}}

/* =========================================================
   MOBILE-FIRST REVISION v4 — real responsive gameplay
   Chat top-right + low-resolution algorithm/visual alignment
   ========================================================= */
:root{--tap:46px}
html,body,#root{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0;min-height:100dvh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}

/* Chat is now a true top-right app control on every screen. */
.chat-fab{top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));bottom:auto;width:54px;min-width:54px;height:54px;padding:0;border-radius:18px;z-index:88}
.chat-fab b{display:none}.chat-fab span{font-size:24px}.chat-fab i{right:-5px;top:-6px}
/* Reserve the corner so the floating chat button never covers profile/score controls. */
.main-header{padding-right:96px}
.game-topbar{padding-right:76px}
.arena-duel-top{padding-right:68px}

/* Viewport-height fixes for mobile browser address bars. */
.game-shell{min-height:100dvh}
.game-stage{min-height:calc(100dvh - 124px)}
.chat-drawer{height:100dvh;height:100svh}

/* Runner collision and the drawn player now share exactly the same Y coordinate. */
.runner-player{top:89%;bottom:auto}
.runner-avatar{max-width:none}

/* Penalty trajectory uses percentages instead of fixed pixels, so the shot lands
   in the same goal corner regardless of goal height. */
.ball-v2{bottom:-29%}
.ball-v2.ready{bottom:-29%}
.ball-v2.shoot-tl,.ball-v2.shoot-tr{bottom:71%}
.ball-v2.shoot-bl,.ball-v2.shoot-br{bottom:12%}

/* Aim/reflex targets scale with the usable screen instead of remaining desktop-size. */
.blaster .target{width:clamp(72px,10vw,110px);height:clamp(72px,10vw,110px)}
.reflex-orb{width:clamp(68px,8vw,86px);height:clamp(68px,8vw,86px);font-size:clamp(28px,4vw,34px)}

/* No game panel is allowed to create horizontal layout overflow. */
.game-stage,.runner-road,.topdown-arena,.blaster,.reflex-stage,.quiz-stage,.scanner-stage,.sequence-stage,.calendar-game,.memory-stage,.myth-stage,.defense-field,.rhythm-board,.archery-field,.penalty-stage,.goal-interactive{width:100%;max-width:100%;min-width:0}
.center-panel,.result-card,.final-screen,.defense-start,.rhythm-start{max-width:calc(100% - 24px);min-width:0}

/* Touch screens: maintain a minimum usable hit area. */
@media(hover:none),(pointer:coarse){
  .primary,.ghost,.runner-controls button,.arena-actions button,.answers button,.choice-stack button,.activity-cards button,.time-row,.card-pool button,.myth-actions button,.rhythm-buttons button,.goal-answer,.arena-challenge{min-height:var(--tap)}
  .game-card{touch-action:manipulation}
}

@media(max-width:980px){
  /* The top-level UI stays usable on tablets / large phones. */
  main{padding-left:clamp(10px,2.5vw,20px);padding-right:clamp(10px,2.5vw,20px)}
  .main-header{padding-left:14px;padding-right:82px}
  .game-topbar{padding-right:66px}
  .player-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mission-banner{grid-template-columns:1fr}
  .arena-player-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Percentage-distance games become square on portrait devices. This keeps
     x/y movement, collision radius and visible distance proportional. */
  @media(orientation:portrait){
    .topdown-arena{width:min(100%,620px);height:auto!important;min-height:0!important;aspect-ratio:1/1;margin-left:auto;margin-right:auto}
  }
}

@media(max-width:650px){
  :root{--tap:48px}
  .main-header{min-height:64px;padding:8px 70px 8px 10px;gap:6px}
  .brand-mark{width:40px;height:40px;border-radius:11px}
  .brand>div:last-child{display:none}
  .profile-chip{padding:4px;margin-left:auto}.profile-chip div,.profile-chip i{display:none}.profile-chip img,.profile-chip>span{width:38px;height:38px}
  .main-header nav{order:3;width:calc(100vw - 20px);margin-right:-60px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  .main-header nav button{scroll-snap-align:start;min-height:42px}

  .chat-fab{top:max(9px,env(safe-area-inset-top));right:max(9px,env(safe-area-inset-right));width:48px;min-width:48px;height:48px;border-radius:15px}.chat-fab span{font-size:22px}
  .chat-drawer{width:100%;max-width:none}.chat-head{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .chat-messages{padding-bottom:18px}.chat-bubble{max-width:90%}.chat-meta{gap:6px}

  .hero{grid-template-columns:1fr;padding-top:28px;gap:12px}.hero h1{font-size:clamp(38px,12vw,52px)}.hero-visual{height:240px}.hero-copy>p{font-size:14px;line-height:1.55}.hero-actions .big{width:100%}
  .player-dashboard{grid-template-columns:1fr}.games-grid{grid-template-columns:1fr}.game-card{min-height:0;padding:18px}.game-card p{min-height:0}.section-head h2{font-size:30px}

  .game-shell{padding:0}.game-topbar{grid-template-columns:auto minmax(0,1fr) auto;padding:7px 62px 7px 7px;min-height:62px}.game-title{justify-self:center;min-width:0}.game-title>span{font-size:24px}.game-title b{max-width:38vw}.score-pill{justify-self:end;padding:8px;font-size:10px}.game-hint{padding:8px 10px;font-size:9px}
  .game-stage{min-height:calc(100dvh - 108px);margin:0;border-radius:0;border-left:0;border-right:0}

  /* Runner remains lane-exact at every height. */
  .runner-wrap{padding:7px}.runner-road{width:min(100%,520px);height:min(62dvh,560px);min-height:390px}.runner-player{top:89%;font-size:40px}.runner-item{font-size:32px}.runner-controls{position:sticky;bottom:0;z-index:12;padding:6px;background:linear-gradient(180deg,transparent,rgba(6,16,28,.92) 25%)}

  /* Top-down games: square arena makes percentage physics physically square. */
  .arena-wrap{padding:7px}.topdown-arena{width:min(100%,520px);height:auto!important;min-height:0!important;aspect-ratio:1/1;margin:auto}.top-player{font-size:34px}.chaser,.rescue,.risk-enemy,.pickup{font-size:27px}.chaser small{left:22px;max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .mobile-dpad{display:grid;width:min(168px,48vw);height:min(168px,48vw);gap:5px}.mobile-dpad button{min-height:0;font-size:18px;border-radius:13px}

  /* Blaster / reflex: shorter boards and targets that cannot clip at spawn margins. */
  .blaster,.reflex-stage{height:min(68dvh,560px);min-height:390px}.blaster .target{width:72px;height:72px;padding:6px}.blaster .target span{font-size:27px}.blaster .target small{font-size:8px;max-width:60px}.reflex-orb{width:68px;height:68px;font-size:28px}.timer,.reflex-hud{top:10px}.timer{left:10px}

  /* Quiz / scanner / sequences use content height, not a desktop minimum. */
  .quiz-stage,.scanner-stage,.sequence-stage{min-height:calc(100dvh - 108px);height:auto}.quiz-stage{padding:10px}.quiz-people{height:125px;gap:18px}.host,.contestant{font-size:46px}.speech-mini{right:auto;left:50%;top:-32px;transform:translateX(-50%)}.quiz-console h2{font-size:16px;margin-bottom:14px}.answers{grid-template-columns:1fr}.answers button{font-size:13px}
  .scanner-device{width:min(180px,70vw);height:130px}.scanner-icon{font-size:56px}.case-card{padding:14px}.case-card h2{font-size:21px}.case-card>p{font-size:12px}
  .mission-line{grid-template-columns:repeat(2,minmax(0,1fr))}.mission-slot{min-height:82px}.card-pool{grid-template-columns:repeat(2,minmax(0,1fr))}.card-pool button{min-height:86px}

  .calendar-game{padding:8px}.day-head{align-items:flex-start;flex-direction:column}.time-row{grid-template-columns:54px minmax(0,1fr);padding:10px}.activity-cards{display:grid;grid-template-columns:1fr 1fr}.activity-cards button{min-width:0;padding:9px;font-size:11px}
  .memory-stage{padding:8px}.memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.memory-card{aspect-ratio:1/1}.card-front span{font-size:27px}.card-front b{font-size:8px}
  .myth-stage{padding:8px}.myth-card{min-height:320px;padding:16px}.myth-card h2{font-size:20px}.myth-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}

  /* Penalty: all movement is proportional to the goal, not screen pixels. */
  .penalty-stage{min-height:calc(100dvh - 108px);padding:8px}.floating-question{margin:4px auto 8px;padding:11px}.floating-question h3{font-size:15px}.goal-interactive{width:98%;height:clamp(280px,82vw,350px);margin-top:7px;border-width:7px}.goal-answer{width:46%;min-height:74px;padding:6px}.goal-answer span{font-size:9px}.keeper-body{font-size:48px}.ball-v2{font-size:38px}.penalty-spot{margin-top:40px}

  /* Defense and rhythm keep percentage-based hit lines aligned with rendering. */
  .defense-wrap,.rhythm-wrap{padding:7px}.defense-field,.rhythm-board{height:min(64dvh,540px);min-height:390px}.defense-base{left:6.5%}.defense-base img{width:46px;height:46px}.lane-shield{font-size:30px}.lane-threat{font-size:25px}.lane-threat small{font-size:7px}.rhythm-note{width:42px;height:42px;font-size:21px}.rhythm-buttons{position:sticky;bottom:0;z-index:10;padding:5px;background:rgba(6,16,28,.92)}.rhythm-buttons button{min-height:52px}

  .arena-home-section{padding:20px}.arena-home-copy h2{font-size:58px}.arena-home-action{justify-items:stretch}.arena-home-action .primary{width:100%}.arena-player-grid{grid-template-columns:1fr}.arena-duel-top{padding:7px 58px 10px 0}.cinematic-duel-screen .duel-reactor.duel-scene{min-height:min(700px,78dvh)}

  footer{padding-left:12px;padding-right:12px;align-items:flex-start;flex-direction:column}.brand.mini{margin-right:0}
}

@media(max-width:390px){
  .game-title b{max-width:34vw;font-size:12px}.score-pill{font-size:9px}.game-topbar{padding-right:58px}
  .memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-cards{grid-template-columns:1fr}.mission-line{grid-template-columns:1fr 1fr}.card-pool{grid-template-columns:1fr 1fr}
  .goal-answer{width:47%;min-height:70px}.goal-answer b{flex-basis:24px;width:24px;height:24px}.goal-answer span{font-size:8px}
  .blaster .target{width:66px;height:66px}.reflex-orb{width:64px;height:64px}.mobile-dpad{width:154px;height:154px}
}

/* Short landscape phones: maximize playable canvas, hide non-essential decoration. */
@media(max-height:540px) and (orientation:landscape){
  .chat-fab{top:8px;right:8px;width:44px;min-width:44px;height:44px}.game-topbar{position:relative;min-height:50px;padding:4px 56px 4px 5px}.game-hint{display:none}.game-stage{min-height:calc(100dvh - 55px)}
  .runner-road,.blaster,.reflex-stage,.defense-field,.rhythm-board{height:calc(100dvh - 120px)!important;min-height:280px!important}.topdown-arena{height:calc(100dvh - 165px)!important;min-height:280px!important;aspect-ratio:auto}.mobile-dpad{position:absolute;right:8px;bottom:8px;width:128px;height:128px;margin:0;z-index:20;background:rgba(4,14,24,.34);padding:4px;border-radius:18px}.arena-wrap{position:relative}
  .quiz-people{display:none}.quiz-stage,.scanner-stage,.sequence-stage{min-height:calc(100dvh - 55px)}.scanner-device{display:none}.sequence-stage{padding-top:6px}.mission-message{margin:10px 0}.card-pool button{min-height:58px}
  .penalty-stage{min-height:calc(100dvh - 55px)}.floating-question h3{font-size:13px}.goal-interactive{height:calc(100dvh - 165px);min-height:230px}.penalty-spot{display:none}
  .cinematic-duel-screen .duel-scoreboard{display:none}.cinematic-duel-screen .duel-reactor.duel-scene{min-height:calc(100dvh - 72px)}
}

/* Optional TR/EN and light-theme controls: original hub layout unchanged */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"]:root{--bg:#f3f8fc;--panel:#ffffff;--panel2:#edf5fb;--cyan:#0d9e96;--blue:#2d73e8;--violet:#7157e8;--pink:#d84487;--green:#239f68;--yellow:#d89205;--danger:#d94b5f;--text:#17283b;--muted:#62758b;--line:rgba(23,57,87,.12)}
html[data-theme="light"] body{background:radial-gradient(circle at 8% 0%,rgba(41,194,181,.18),transparent 32%),radial-gradient(circle at 95% 12%,rgba(79,115,232,.16),transparent 29%),linear-gradient(180deg,#f7fbfe,#edf5fb 68%,#f8fbfd);color:var(--text)}
html[data-theme="light"] .grid-bg{opacity:.3;background-image:linear-gradient(rgba(15,57,83,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,57,83,.06) 1px,transparent 1px)}
html[data-theme="light"] .main-header{background:rgba(248,252,255,.72);backdrop-filter:blur(20px)}
html[data-theme="light"] nav button:hover,html[data-theme="light"] nav .nav-active{background:rgba(26,82,120,.08);color:var(--text)}
html[data-theme="light"] .profile-chip,html[data-theme="light"] .player-dashboard,html[data-theme="light"] .game-card,html[data-theme="light"] .orbit,html[data-theme="light"] .modal,html[data-theme="light"] .trainer-panel,html[data-theme="light"] .chat-drawer,html[data-theme="light"] .class-dock{background:rgba(255,255,255,.9);box-shadow:0 20px 55px rgba(42,79,108,.11)}
html[data-theme="light"] .game-card{background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(238,247,252,.98))}
html[data-theme="light"] .hero-copy>p,html[data-theme="light"] .game-card p,html[data-theme="light"] .mission-banner p{color:var(--muted)}
html[data-theme="light"] .ghost{background:rgba(24,70,102,.05);color:var(--text)}
html[data-theme="light"] .filters button.active{background:#18354d;color:#fff}
html[data-theme="light"] .mission-icons span{background:rgba(255,255,255,.62)}
html[data-theme="light"] .level-box,html[data-theme="light"] .stat-box{background:rgba(28,83,119,.045)}
html[data-theme="light"] .level-box i{background:#dceaf3}
html[data-theme="light"] footer{color:var(--muted)}

.header-tools{display:flex;align-items:center;gap:10px;min-width:0}
.visual-controls{display:flex;align-items:center;gap:7px;padding:5px;border-radius:15px;border:1px solid var(--line);background:rgba(11,27,45,.5);backdrop-filter:blur(14px)}
html[data-theme="light"] .visual-controls{background:rgba(255,255,255,.72)}
.lang-switch{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.lang-switch button{border:0;background:transparent;color:var(--muted);font-weight:900;font-size:9px;padding:7px 8px}.lang-switch button.active{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06151f}.theme-switch{width:32px;height:32px;border:1px solid var(--line);background:transparent;border-radius:10px;display:grid;place-items:center}.account-link{min-height:32px;display:flex;align-items:center;gap:5px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);text-decoration:none;font-size:10px;font-weight:800;white-space:nowrap}.logout-form{margin:0}.logout-form button{font:inherit}

@media(max-width:1200px){.main-header{height:auto;min-height:82px;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}.main-header nav{order:3;width:100%;overflow-x:auto}.header-tools{margin-left:auto}.account-link span{display:none}}
@media(max-width:740px){.visual-controls{gap:3px;padding:3px}.lang-switch button{padding:6px}.account-link{min-height:30px;padding:0 5px}.profile-chip div,.profile-chip i{display:none}.header-tools{gap:5px}.main-header{padding-right:60px}}
@media(max-width:390px){.visual-controls .account-link{display:none}.brand{min-width:0}}

/* =========================================================
   DMD Piksel BIG UPDATE · 2026-10-01
   ========================================================= */
.logo-mark{overflow:visible!important;padding:2px!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important}.logo-mark img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}.brand.mini .logo-mark{padding:1px!important}.admin-local-reset{border-color:rgba(255,193,7,.28)!important}

/* Class sharing / QR */
.class-share-actions{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}.class-qr-card{display:grid;grid-template-columns:1fr 180px;align-items:center;gap:18px;margin:10px 0 18px;padding:18px;border:1px solid rgba(57,230,215,.25);border-radius:20px;background:linear-gradient(135deg,rgba(57,230,215,.09),rgba(58,134,255,.05))}.class-qr-card>div{display:grid;gap:5px}.class-qr-card small{font-size:9px;letter-spacing:.16em;color:var(--cyan);font-weight:900}.class-qr-card strong{font:900 38px Space Grotesk;letter-spacing:.12em}.class-qr-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.class-qr-card img{width:180px;height:180px;border-radius:14px;padding:8px;background:#fff;justify-self:end}

/* True mobile joystick */
.mobile-joystick-wrap{display:none;justify-items:center;gap:6px;margin:10px auto 0;width:max-content;user-select:none}.mobile-joystick-wrap>small{font-size:8px;letter-spacing:.14em;color:var(--muted);font-weight:900}.mobile-joystick{position:relative;width:166px;height:166px;border-radius:50%;touch-action:none;background:radial-gradient(circle,rgba(57,230,215,.08) 0 20%,rgba(255,255,255,.055) 21% 54%,rgba(255,255,255,.025) 55%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 0 32px rgba(0,0,0,.28),0 16px 36px rgba(0,0,0,.18)}.mobile-joystick.active{border-color:rgba(57,230,215,.5);box-shadow:inset 0 0 34px rgba(57,230,215,.1),0 0 26px rgba(57,230,215,.1)}.joystick-ring{position:absolute;inset:22%;border:1px dashed rgba(255,255,255,.13);border-radius:50%}.joystick-knob{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,var(--cyan),#4f9dff);box-shadow:0 9px 25px rgba(0,0,0,.35),inset 0 0 0 6px rgba(255,255,255,.12);transition:box-shadow .12s;pointer-events:none}.mobile-joystick.active .joystick-knob{box-shadow:0 9px 28px rgba(0,0,0,.4),0 0 22px rgba(57,230,215,.25),inset 0 0 0 6px rgba(255,255,255,.14)}

/* Runner swipe */
.runner-road{touch-action:pan-y}.runner-hud{display:flex;align-items:center;justify-content:space-between;gap:10px}.runner-hud small{color:var(--muted);font-size:9px;letter-spacing:.08em}.runner-swipe-hint{display:none;position:absolute;left:50%;bottom:3%;transform:translateX(-50%);z-index:6;padding:6px 10px;border-radius:999px;background:rgba(5,16,29,.65);border:1px solid rgba(255,255,255,.1);font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.55);pointer-events:none}

/* Expanded calendar */
.calendar-expanded .day-head p{margin:5px 0 0;color:var(--muted);font-size:11px}.calendar-expanded .timeline{display:grid;gap:8px}.calendar-expanded .time-row{grid-template-columns:72px minmax(0,1fr) auto;align-items:center}.calendar-expanded .time-row>span{display:grid;gap:3px;text-align:left}.calendar-expanded .time-row>span small{color:var(--muted);font-size:9px;font-weight:500}.calendar-feedback{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.12em;padding:6px 8px;border-radius:999px}.calendar-feedback.ok{color:#63e6b2;background:rgba(68,225,169,.12)}.calendar-feedback.bad{color:#ff7d88;background:rgba(255,82,99,.12)}.time-row.bad{border-color:rgba(255,82,99,.48)!important;background:rgba(255,82,99,.08)!important}.calendar-pool-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 9px}.calendar-pool-head b{font-size:12px}.calendar-pool-head small{color:var(--muted)}.activity-cards.expanded{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.activity-cards.expanded button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;gap:2px 8px;min-height:66px}.activity-cards.expanded button>span{font-size:24px;grid-row:1/3}.activity-cards.expanded button>b{font-size:10px}.activity-cards.expanded button>small{font-size:8px;color:var(--muted)}

/* Memory Match complete rebuild */
.memory-rebuild{padding:18px}.memory-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px}.memory-hero small{font-size:9px;letter-spacing:.15em;color:var(--cyan);font-weight:900}.memory-hero h2{margin:4px 0;font:800 30px Space Grotesk}.memory-hero p{margin:0;color:var(--muted);font-size:11px}.memory-stats{display:flex;gap:8px}.memory-stats span{display:grid;justify-items:center;min-width:86px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);font-size:9px;color:var(--muted)}.memory-stats b{font-size:18px;color:var(--text)}.memory-grid-large{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px}.memory-card-v2{aspect-ratio:1/.92;min-height:150px;border:0;background:transparent;padding:0;perspective:900px}.memory-card-v2 .card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .46s cubic-bezier(.2,.8,.2,1)}.memory-card-v2.flipped .card-inner{transform:rotateY(180deg)}.memory-card-v2 .card-back,.memory-card-v2 .card-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;border:1px solid var(--line);overflow:hidden}.memory-card-v2 .card-back{display:grid;place-content:center;justify-items:center;background:radial-gradient(circle at 50% 20%,rgba(57,230,215,.14),transparent 40%),linear-gradient(145deg,#102840,#091727);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}.memory-card-v2 .card-back>span{font-size:34px;color:var(--cyan)}.memory-card-v2 .card-back>b{font:900 19px/.9 Space Grotesk;letter-spacing:.08em}.memory-card-v2 .card-back>small{margin-top:9px;font-size:9px;letter-spacing:.2em;color:var(--muted)}.memory-card-v2 .card-front{transform:rotateY(180deg);display:grid;place-content:center;justify-items:center;text-align:center;padding:12px;background:linear-gradient(155deg,rgba(27,69,91,.96),rgba(9,25,43,.98));border-color:rgba(57,230,215,.28)}.memory-card-v2.matched .card-front{box-shadow:inset 0 0 0 2px rgba(64,230,169,.35),0 0 24px rgba(64,230,169,.1)}.value-visual{position:relative;width:92px;height:92px;display:grid;place-items:center;border-radius:27px;background:radial-gradient(circle,rgba(255,255,255,.13),rgba(57,230,215,.045));margin-bottom:10px}.value-visual>span{font-size:52px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.26))}.value-visual>i{position:absolute;right:-5px;bottom:-3px;font-style:normal;font-size:26px}.memory-card-v2 .card-front>b{font:900 16px Space Grotesk}.memory-card-v2 .card-front>small{margin-top:4px;font-size:9px;color:var(--muted)}

/* Defense energy-drain shields */
.defense-hud .energy-low{color:#ff7c86;animation:energyPulse .65s ease-in-out infinite alternate}.lane-shield{display:grid;justify-items:center;gap:2px;transform:translate(-50%,-50%)}.lane-shield>span{font-size:inherit}.lane-shield>i{--life:100%;width:34px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--cyan) var(--life),rgba(255,255,255,.1) var(--life));box-shadow:0 0 9px rgba(57,230,215,.18)}.lane-shield.expiring{animation:shieldWarning .42s steps(2,end) infinite}.lane-shield.expiring>i{background:linear-gradient(90deg,#ff6875 var(--life),rgba(255,255,255,.08) var(--life))}@keyframes shieldWarning{50%{opacity:.25;filter:drop-shadow(0 0 10px #ff6675)}}@keyframes energyPulse{to{opacity:.48}}

/* Rhythm generated background music */
.rhythm-music-toggle{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);padding:7px 11px;color:var(--muted);font-size:9px;font-weight:900}.rhythm-music-toggle.on{color:#8df6ed;border-color:rgba(57,230,215,.28);background:rgba(57,230,215,.07)}

/* Prediction Arena */
.prediction-duel-screen{background:radial-gradient(circle at 50% 8%,rgba(57,230,215,.08),transparent 30%),var(--bg)}.prediction-scoreboard .duelist>i{margin-top:6px;font-style:normal;font-size:8px;letter-spacing:.08em;color:var(--muted)}.prediction-scoreboard .duelist>i.submitted{color:#63e6b2}.prediction-arena-card{width:min(900px,calc(100% - 24px));margin:18px auto 40px;padding:clamp(20px,4vw,44px);text-align:center;border:1px solid rgba(57,230,215,.2);border-radius:30px;background:radial-gradient(circle at 50% 0,rgba(57,230,215,.11),transparent 35%),linear-gradient(155deg,rgba(16,37,59,.95),rgba(7,18,31,.98));box-shadow:0 28px 80px rgba(0,0,0,.25);position:relative;overflow:hidden}.prediction-arena-card>small{font-size:9px;letter-spacing:.17em;color:var(--cyan);font-weight:900}.prediction-arena-card>h1{max-width:720px;margin:12px auto 8px;font:800 clamp(25px,4vw,44px)/1.08 Space Grotesk}.prediction-hint{margin:0 auto 20px;color:var(--muted);font-size:12px}.prediction-orbit{width:78px;height:78px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;font:900 42px Space Grotesk;color:#06141e;background:linear-gradient(145deg,var(--cyan),#77a7ff);box-shadow:0 15px 38px rgba(57,230,215,.18);transform:rotate(-4deg)}.prediction-timer{display:inline-flex;align-items:baseline;gap:5px;margin:4px 0 18px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}.prediction-timer b{font-size:24px}.prediction-timer small{color:var(--muted)}.prediction-timer.urgent{color:#ff737f;border-color:rgba(255,82,99,.3);animation:energyPulse .55s infinite alternate}.prediction-form{display:flex;align-items:end;justify-content:center;gap:10px;max-width:620px;margin:auto}.prediction-form label{display:grid;gap:7px;text-align:left;flex:1;font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--muted)}.prediction-form label span{font-weight:600}.prediction-form input{width:100%;padding:16px 18px;border-radius:15px;border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.18);color:var(--text);font:900 26px Space Grotesk;outline:none}.prediction-form input:focus{border-color:rgba(57,230,215,.58);box-shadow:0 0 0 4px rgba(57,230,215,.07)}.prediction-form button{min-height:60px}.prediction-wait{display:grid;justify-items:center;gap:5px;padding:18px}.prediction-wait>span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(64,230,169,.14);color:#63e6b2;font-size:28px}.prediction-wait h2{margin:5px 0 0}.prediction-wait p{margin:0;color:var(--muted)}.prediction-result{display:grid;justify-items:center;gap:11px}.prediction-result .result-icon{font-size:58px}.prediction-result h2{margin:0;font:800 31px Space Grotesk}.correct-answer{display:grid;justify-items:center;padding:12px 24px;border-radius:16px;background:rgba(57,230,215,.08);border:1px solid rgba(57,230,215,.2)}.correct-answer small{font-size:8px;letter-spacing:.15em;color:var(--cyan)}.correct-answer strong{font-size:27px}.prediction-comparison{width:min(650px,100%);display:grid;grid-template-columns:1fr 1fr;gap:10px}.prediction-comparison>div{display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}.prediction-comparison>div.best{border-color:rgba(64,230,169,.45);background:rgba(64,230,169,.08)}.prediction-comparison small{font-size:8px;letter-spacing:.12em;color:var(--muted)}.prediction-comparison b{font-size:20px}.prediction-comparison span{font-size:9px;color:var(--muted)}.prediction-transfer{margin:0;color:#72e9bb;font-weight:900}.prediction-timeout{margin:0;color:#f8c36d}.prediction-lobby .arena-kicker{color:var(--cyan)}

@media(max-width:900px){.activity-cards.expanded{grid-template-columns:repeat(2,minmax(0,1fr))}.memory-grid-large{grid-template-columns:repeat(3,minmax(115px,1fr))}.class-qr-card{grid-template-columns:1fr 150px}.class-qr-card img{width:150px;height:150px}}
@media(max-width:700px){.mobile-joystick-wrap{display:grid}.mobile-dpad{display:none!important}.runner-swipe-hint{display:block}.runner-hud small{display:none}.activity-cards.expanded{grid-template-columns:1fr 1fr}.calendar-expanded .time-row{grid-template-columns:54px minmax(0,1fr);position:relative}.calendar-feedback{grid-column:2;justify-self:start}.memory-hero{align-items:flex-start;flex-direction:column}.memory-stats{width:100%}.memory-stats span{flex:1}.memory-grid-large{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.memory-card-v2{min-height:142px}.value-visual{width:74px;height:74px}.value-visual>span{font-size:42px}.class-qr-card{grid-template-columns:1fr;justify-items:center;text-align:center}.class-qr-card img{justify-self:center;width:190px;height:190px}.prediction-form{display:grid}.prediction-form button{width:100%}.prediction-comparison{grid-template-columns:1fr}.prediction-arena-card{border-radius:22px}.prediction-scoreboard{grid-template-columns:1fr 46px 1fr}.prediction-orbit{width:62px;height:62px;font-size:34px}.prediction-result h2{font-size:25px}}
@media(max-width:420px){.mobile-joystick{width:146px;height:146px}.joystick-knob{width:56px;height:56px}.activity-cards.expanded{grid-template-columns:1fr}.memory-card-v2{min-height:126px}.memory-grid-large{grid-template-columns:repeat(2,minmax(0,1fr))}.value-visual{width:62px;height:62px}.value-visual>span{font-size:35px}.memory-card-v2 .card-front>b{font-size:13px}.memory-card-v2 .card-front>small{font-size:8px}.prediction-arena-card>h1{font-size:24px}}


/* DMD QUESTION-MANAGER UPDATE · fullscreen QR */
.class-qr-button{border:0;background:transparent;padding:0;display:grid;justify-items:center;gap:6px;color:var(--muted)}
.class-qr-button img{cursor:zoom-in}
.class-qr-button span{font-size:9px;font-weight:900;letter-spacing:.08em}
.qr-fullscreen{position:fixed;inset:0;z-index:10000;background:radial-gradient(circle at 50% 25%,rgba(57,230,215,.16),transparent 32%),rgba(2,8,15,.96);backdrop-filter:blur(20px);display:grid;place-items:center;padding:24px}
.qr-fullscreen-content{width:min(760px,94vw);height:min(760px,90dvh);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;justify-items:center;align-items:center;gap:10px;padding:clamp(18px,4vw,40px);border:1px solid rgba(255,255,255,.12);border-radius:32px;background:linear-gradient(155deg,rgba(16,38,60,.95),rgba(7,18,31,.98));box-shadow:0 35px 100px rgba(0,0,0,.48)}
.qr-fullscreen-content>small{font-size:10px;letter-spacing:.22em;color:var(--cyan);font-weight:900}
.qr-fullscreen-content>strong{font:900 clamp(38px,8vw,72px) Space Grotesk;letter-spacing:.16em}
.qr-fullscreen-content>img{width:min(54vh,70vw,480px);height:min(54vh,70vw,480px);max-width:100%;max-height:100%;object-fit:contain;border-radius:24px;padding:14px;background:#fff;box-shadow:0 18px 55px rgba(0,0,0,.28)}
.qr-fullscreen-content>p{margin:0;font:800 clamp(16px,2.5vw,24px) Space Grotesk;text-align:center}
.qr-fullscreen-content>span{font-size:11px;color:var(--muted);text-align:center}
.qr-fullscreen-close{position:fixed;right:clamp(16px,3vw,36px);top:clamp(14px,3vw,30px);z-index:10001;width:48px;height:48px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);font-size:30px;color:#fff}
@media(max-width:600px){.qr-fullscreen{padding:12px}.qr-fullscreen-content{width:100%;height:86dvh;border-radius:24px;padding:18px}.qr-fullscreen-content>img{width:min(76vw,430px);height:min(76vw,430px)}.qr-fullscreen-close{width:42px;height:42px;font-size:26px}}


/* UPDATE 2 — PNG certificate logo */
.cert-logo{background:transparent!important;box-shadow:none!important;overflow:visible!important;padding:2px!important}
.cert-logo img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.14))}


/* =========================================================
   DMD LOGO - HORIZONTAL ALIGNMENT FIX · LOCAL BASELINE
   Gercek yatay PNG logo icin kalici kaynak duzenlemesi.
   ========================================================= */
.dmd-logo-frame,
.logo-mark,
.brand-mark.logo-mark,
.brand .logo-mark {
    width: 118px !important;
    height: 52px !important;
    min-width: 118px !important;
    min-height: 52px !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    place-items: center !important;
}

.dmd-logo-frame img,
.logo-mark img,
.brand-mark.logo-mark img,
.brand .logo-mark img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.16)) !important;
}

.brand {
    gap: 12px !important;
}

.brand > div:last-child {
    min-width: 0 !important;
}

.brand.mini .logo-mark {
    width: 92px !important;
    height: 40px !important;
    min-width: 92px !important;
    min-height: 40px !important;
    margin-right: 6px !important;
}

.brand.mini .logo-mark img {
    transform: none !important;
}

@media (max-width: 650px) {
    .dmd-logo-frame,
    .logo-mark,
    .brand-mark.logo-mark,
    .brand .logo-mark {
        width: 96px !important;
        height: 42px !important;
        min-width: 96px !important;
        min-height: 42px !important;
        margin-right: 5px !important;
    }

    .brand {
        gap: 8px !important;
    }

    .brand.mini .logo-mark {
        width: 78px !important;
        height: 34px !important;
        min-width: 78px !important;
        min-height: 34px !important;
    }
}

/* =========================================================
   2026-10-02 · logo, avatar presets and game 16
   ========================================================= */
.logo-mark,.brand-mark.logo-mark,.brand .logo-mark{width:160px!important;height:60px!important;min-width:160px!important;min-height:60px!important;margin-right:10px!important;overflow:visible!important}.brand.mini .logo-mark{width:122px!important;height:46px!important;min-width:122px!important;min-height:46px!important}.logo-mark img,.brand-mark.logo-mark img,.brand .logo-mark img{object-fit:contain!important;object-position:center!important}

.profile-picture-row{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:stretch;margin:16px 0}.profile-picture-row .avatar-editor{height:160px;margin:0}.avatar-editor small{font-size:8px;color:var(--muted)}.avatar-current-copy{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}.avatar-current-copy small,.avatar-preset-head small{font-size:8px;letter-spacing:.15em;color:var(--cyan);font-weight:900}.avatar-current-copy b{font:800 18px Space Grotesk}.avatar-current-copy span{font-size:10px;line-height:1.5;color:var(--muted)}.avatar-preset-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:17px 0 9px}.avatar-preset-head>div{display:grid;gap:3px}.avatar-preset-head b{font-size:13px}.avatar-preset-head>span{font-size:9px;color:var(--muted)}.avatar-preset-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:16px}.avatar-preset{display:grid;justify-items:center;gap:5px;padding:6px 4px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);min-width:0;transition:.15s}.avatar-preset:hover{transform:translateY(-1px);border-color:rgba(57,230,215,.35)}.avatar-preset.selected{background:rgba(57,230,215,.1);border-color:rgba(57,230,215,.62);box-shadow:0 0 0 2px rgba(57,230,215,.08)}.avatar-preset img{width:46px;height:46px;border-radius:12px;display:block}.avatar-preset span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:var(--muted)}.avatar-preset.selected span{color:var(--text);font-weight:900}

.tower-defense-wrap{position:relative;padding:16px}.td-hud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.td-hud span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.045);font-size:10px;font-weight:900}.td-loadout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}.td-loadout button{display:flex;align-items:center;gap:10px;text-align:left;padding:11px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}.td-loadout button.selected{border-color:rgba(57,230,215,.55);background:rgba(57,230,215,.09);box-shadow:inset 0 0 0 1px rgba(57,230,215,.08)}.td-loadout button>span{font-size:29px}.td-loadout button div{display:grid;gap:2px;min-width:0}.td-loadout button b{font-size:11px}.td-loadout button small{font-size:8px;color:var(--muted);line-height:1.35}.td-board{position:relative;width:min(980px,100%);margin:auto;aspect-ratio:8/6;border:1px solid rgba(57,230,215,.2);border-radius:24px;overflow:hidden;background:radial-gradient(circle at 75% 25%,rgba(57,230,215,.12),transparent 30%),linear-gradient(145deg,#0a1d31,#07111f);box-shadow:inset 0 0 45px rgba(0,0,0,.25)}.td-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr)}.td-cell{position:relative;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.015);padding:0}.td-cell:not(.path):hover{background:rgba(57,230,215,.08)}.td-cell.path{cursor:default;background:linear-gradient(135deg,rgba(129,150,168,.17),rgba(74,95,116,.11));border-color:rgba(180,204,222,.08)}.td-path-dot{color:rgba(255,255,255,.2);font-size:18px}.td-tower{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(64%,58px);aspect-ratio:1;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,rgba(57,230,215,.2),rgba(58,134,255,.2));border:1px solid rgba(255,255,255,.14);font-size:clamp(18px,3vw,31px);box-shadow:0 8px 20px rgba(0,0,0,.24)}.td-tower.fire{animation:tdFire .18s ease}.td-entry{position:absolute;left:1%;top:34%;z-index:8;font:900 clamp(7px,1vw,10px) Space Grotesk;letter-spacing:.08em;color:#ff9ba5;text-align:center;pointer-events:none}.td-base{position:absolute;right:1%;top:3%;z-index:9;width:10%;min-width:54px;display:grid;justify-items:center;text-align:center;gap:2px;font:900 clamp(7px,1vw,10px) Space Grotesk;pointer-events:none}.td-base img,.td-base>span{width:clamp(36px,5vw,58px);height:clamp(36px,5vw,58px);border-radius:14px;object-fit:cover;display:grid;place-items:center;background:#102b44;border:1px solid var(--line);font-size:28px}.td-enemy{position:absolute;z-index:12;transform:translate(-50%,-50%);width:clamp(30px,5vw,52px);pointer-events:none;transition:left .09s linear,top .09s linear}.td-enemy>span{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;background:rgba(99,22,35,.86);border:1px solid rgba(255,112,126,.42);font-size:clamp(17px,2.8vw,28px);box-shadow:0 7px 18px rgba(0,0,0,.26)}.td-enemy i{display:block;height:4px;margin-top:2px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}.td-enemy i b{display:block;height:100%;background:linear-gradient(90deg,#ff6774,#ffd166)}.td-status{display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(980px,100%);margin:12px auto 0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}.td-status p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.td-status .big{white-space:nowrap}.td-result{position:absolute;left:50%;top:58%;z-index:30;transform:translate(-50%,-50%);width:min(440px,calc(100% - 40px));padding:24px;text-align:center;border-radius:24px;border:1px solid var(--line);background:rgba(6,17,31,.94);backdrop-filter:blur(18px);box-shadow:0 28px 80px rgba(0,0,0,.45)}.td-result>span{font-size:48px}.td-result h2{margin:5px 0;font:800 27px Space Grotesk}.td-result p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.td-result.win{border-color:rgba(57,230,215,.35)}.td-result.lose{border-color:rgba(255,103,116,.35)}@keyframes tdFire{50%{transform:translate(-50%,-50%) scale(1.18);filter:drop-shadow(0 0 12px var(--cyan))}}

@media(max-width:760px){.logo-mark,.brand-mark.logo-mark,.brand .logo-mark{width:122px!important;height:46px!important;min-width:122px!important;min-height:46px!important}.brand.mini .logo-mark{width:96px!important;height:36px!important;min-width:96px!important;min-height:36px!important}.profile-picture-row{grid-template-columns:1fr}.profile-picture-row .avatar-editor{height:135px}.avatar-preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.td-loadout{grid-template-columns:1fr}.td-loadout button{min-height:58px}.tower-defense-wrap{padding:8px}.td-board{border-radius:16px}.td-status{align-items:stretch;flex-direction:column}.td-status .big{width:100%}.td-base{right:0}.td-entry{left:0}}
@media(max-width:420px){.avatar-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-preset img{width:44px;height:44px}.td-hud span{padding:6px 8px;font-size:8px}.td-loadout button small{font-size:7px}.td-enemy{width:29px}.td-enemy>span{font-size:17px}.td-cell{min-width:0}.td-tower{border-radius:10px}}


.archery-wrap{padding:18px;min-width:0;max-width:100%}.archery-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(900px,100%);margin:0 auto 12px}.archery-hud>div{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04)}.archery-hud small{font-size:9px;letter-spacing:.13em;color:var(--muted)}.archery-hud b{font-size:15px}.wind-value{color:#76e6ff}.archery-field{width:min(1000px,100%);height:clamp(390px,58vw,520px);margin:auto;position:relative;overflow:hidden;touch-action:none;user-select:none;cursor:crosshair;border:2px solid rgba(57,230,215,.17);border-radius:24px;background:linear-gradient(#153c64 0 54%,#174d35 54% 100%);box-shadow:inset 0 0 80px rgba(0,0,0,.28),0 22px 55px rgba(0,0,0,.24)}.archery-field:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:10% 100%;pointer-events:none}.archery-sky-glow{position:absolute;width:42%;aspect-ratio:1;left:44%;top:-58%;border-radius:50%;background:radial-gradient(circle,rgba(125,222,255,.28),transparent 65%)}.archery-cloud{position:absolute;width:12.5%;min-width:54px;height:24px;border-radius:99px;background:rgba(255,255,255,.09);filter:blur(1px);animation:archeryCloud 14s linear infinite}.archery-cloud:before,.archery-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.archery-cloud:before{width:34%;aspect-ratio:1;left:16%;bottom:0}.archery-cloud:after{width:44%;aspect-ratio:1;left:43%;bottom:0}.cloud-a{top:14%;left:-14%}.cloud-b{top:27%;left:-22%;animation-delay:-7s;transform:scale(.7)}.archery-mountains{position:absolute;left:0;right:0;bottom:46%;height:19%;opacity:.4;background:linear-gradient(135deg,transparent 0 24%,#15344b 25% 45%,transparent 46%),linear-gradient(45deg,transparent 0 56%,#102c42 57% 76%,transparent 77%);background-size:27% 100%}.archery-ground{position:absolute;inset:54% 0 0;background:linear-gradient(180deg,rgba(57,144,87,.26),rgba(6,43,29,.74)),repeating-linear-gradient(165deg,transparent 0 28px,rgba(255,255,255,.025) 29px 30px)}.archery-lane-line{position:absolute;left:10%;right:7%;bottom:15%;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.03))}.archery-distance{position:absolute;right:8%;bottom:8%;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.45)}.archery-player{position:absolute;left:5.7%;top:57%;width:55px;height:135px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35));pointer-events:none;transform-origin:left center}.archery-player-head{position:absolute;left:17px;top:0;width:28px;height:28px;border-radius:50%;background:#f0c1a2;color:transparent}.archery-player-body{position:absolute;left:17px;top:28px;width:30px;height:63px;border-radius:10px 10px 5px 5px;background:linear-gradient(#24a0c4,#126988)}.archery-player-body:before,.archery-player-body:after{content:"";position:absolute;top:57px;width:11px;height:50px;border-radius:7px;background:#122b3c}.archery-player-body:before{left:1px;transform:rotate(5deg)}.archery-player-body:after{right:1px;transform:rotate(-5deg)}.archery-player-arm{position:absolute;left:38px;top:38px;width:52px;height:10px;border-radius:8px;background:#f0c1a2;transform:rotate(-8deg);transform-origin:left center}.archery-bow{position:absolute;z-index:7;width:78px;height:126px;transform-origin:center center;pointer-events:none;transition:filter .12s}.archery-bow .bow-limb{position:absolute;inset:0;border:7px solid #e6a54d;border-left-color:transparent;border-radius:0 90px 90px 0;filter:drop-shadow(0 4px 4px rgba(0,0,0,.28))}.archery-bow .bow-string{--draw:0;position:absolute;left:5px;top:6%;width:2px;height:88%;background:rgba(245,251,255,.9);transform-origin:center;transform:translateX(calc(var(--draw)*-17px)) scaleY(calc(1 - var(--draw)*.04))}.archery-bow .bow-grip{position:absolute;right:-1px;top:50%;width:24px;height:12px;border-radius:4px;background:#6d4329;transform:translateY(-50%)}.archery-field.bow-kick .archery-bow{animation:bowKick .18s ease-out}.ready-arrow,.flying-arrow{position:absolute;z-index:10;width:95px;height:16px;transform-origin:0 50%;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}.ready-arrow i,.flying-arrow i{position:absolute;left:0;top:7px;width:82px;height:3px;border-radius:4px;background:linear-gradient(90deg,#e1e5e9,#fff)}.ready-arrow b,.flying-arrow b{position:absolute;right:0;top:3px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:13px solid #dce8f2}.ready-arrow em,.flying-arrow em{position:absolute;left:3px;top:2px;width:15px;height:6px;border-radius:90% 0 90% 0;background:#ff6868}.flying-arrow:not(.impacted){will-change:left,top,transform}.flying-arrow:not(.impacted):after{content:"";position:absolute;right:35px;top:7px;width:45px;height:2px;background:linear-gradient(90deg,transparent,rgba(180,235,255,.38));transform:translateX(-75px)}.archery-target{position:absolute;z-index:4;left:83.8%;width:clamp(92px,15.5vw,158px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.target-face{position:absolute;inset:0;border-radius:50%;background:#f4f5f3;box-shadow:0 18px 30px rgba(0,0,0,.28),inset 0 0 0 4px rgba(80,58,37,.22)}.target-face .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}.target-face .r5{width:81.2%;height:81.2%;background:#232830}.target-face .r4{width:62.4%;height:62.4%;background:#389dde}.target-face .r3{width:43.6%;height:43.6%;background:#e04f4f}.target-face .r2{width:25.7%;height:25.7%;background:#ffd84a}.target-face .r1{width:10.9%;height:10.9%;background:#ffe875}.target-pin{position:absolute;left:50%;top:50%;width:2.5%;aspect-ratio:1;border-radius:50%;background:#242424;transform:translate(-50%,-50%)}.target-stand{position:absolute;z-index:-1;left:50%;top:88%;width:4.5%;min-width:5px;height:74%;background:#8b5f36;transform:translateX(-50%)}.target-stand i,.target-stand b{position:absolute;bottom:0;width:85%;height:70%;border-radius:7px;background:#704b2d;transform-origin:bottom}.target-stand i{left:-300%;transform:rotate(18deg)}.target-stand b{right:-300%;transform:rotate(-18deg)}.archery-crosshair{position:absolute;z-index:6;width:32px;height:32px;border:2px solid rgba(255,255,255,.82);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 5px rgba(255,255,255,.06),0 0 18px rgba(83,222,255,.18)}.archery-crosshair i,.archery-crosshair b{position:absolute;left:50%;top:50%;background:rgba(255,255,255,.85);transform:translate(-50%,-50%)}.archery-crosshair i{width:44px;height:1px}.archery-crosshair b{width:1px;height:44px}.archery-power{position:absolute;z-index:15;left:22px;right:22px;bottom:19px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(2,13,25,.55);backdrop-filter:blur(8px)}.archery-power>div{height:9px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.1)}.archery-power>div span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3ae0ae,#ffd753,#ff6d61);transition:width .03s linear}.archery-power small{font-size:9px;letter-spacing:.11em;color:rgba(255,255,255,.62)}.archery-field.charging .archery-power{box-shadow:0 0 24px rgba(57,230,215,.08)}.archery-result{position:absolute;z-index:18;left:50%;top:14%;min-width:190px;display:grid;justify-items:center;padding:12px 17px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(3,15,29,.84);backdrop-filter:blur(10px);transform:translate(-50%,-50%);animation:impactPop .35s cubic-bezier(.2,.9,.2,1) both}.archery-result strong{font-size:28px}.archery-result span{font-weight:900;font-size:11px;letter-spacing:.12em}.archery-result small{margin-top:3px;color:var(--muted)}.archery-result.hit strong{color:#59e3ad}.archery-result.miss strong{color:#ff747b}.archery-finish{position:absolute;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;text-align:center;padding:18px;background:radial-gradient(circle,rgba(50,208,159,.12),transparent 26%),rgba(2,11,22,.85);backdrop-filter:blur(9px);animation:finishFade .35s ease both}.archery-medal{font-size:66px;animation:medalFloat 1.8s ease-in-out infinite}.archery-finish>small{margin-top:8px;letter-spacing:.18em;color:#70dfff}.archery-finish h2{font-size:38px;margin:7px 0}.archery-finish p{margin:0 0 10px;color:var(--muted)}.archery-legend{width:min(900px,100%);margin:12px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.archery-legend span{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);font-size:10px;color:var(--muted)}.legend-dot{width:9px;height:9px;border-radius:50%}.legend-dot.gold{background:#ffd84a}.legend-dot.red{background:#e04f4f}.legend-dot.blue{background:#389dde}.legend-dot.black{background:#232830}.legend-dot.white{background:#f4f5f3}@keyframes archeryCloud{from{transform:translateX(0)}to{transform:translateX(115vw)}}@keyframes bowKick{0%{filter:brightness(1);margin-left:0}45%{filter:brightness(1.4);margin-left:-8px}100%{filter:brightness(1);margin-left:0}}@keyframes impactPop{from{opacity:0;transform:translate(-50%,-38%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes finishFade{from{opacity:0}to{opacity:1}}@keyframes medalFloat{50%{transform:translateY(-7px) rotate(2deg)}}
@media(max-width:700px){.archery-wrap{padding:6px}.archery-hud{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.archery-hud>div{padding:8px 9px}.archery-field{height:clamp(390px,118vw,520px);border-radius:16px}.archery-player{left:1.5%;transform:scale(.68)}.archery-bow{width:58px;height:94px}.archery-bow .bow-limb{border-width:5px}.archery-bow .bow-string{transform:translateX(calc(var(--draw)*-12px)) scaleY(calc(1 - var(--draw)*.04))}.ready-arrow,.flying-arrow{width:69px;transform-origin:0 50%}.ready-arrow i,.flying-arrow i{width:59px;height:2px;top:7px}.ready-arrow b,.flying-arrow b{right:0;border-top-width:4px;border-bottom-width:4px;border-left-width:10px;top:4px}.ready-arrow em,.flying-arrow em{width:11px;height:5px}.archery-crosshair{width:28px;height:28px}.archery-crosshair i{width:38px}.archery-crosshair b{height:38px}.archery-power{left:8px;right:8px;bottom:8px;grid-template-columns:1fr;padding:8px}.archery-power small{text-align:center;font-size:8px}.archery-result{top:11%;min-width:150px;padding:9px 12px}.archery-result strong{font-size:22px}.archery-finish h2{font-size:27px}.archery-medal{font-size:54px}.archery-legend{gap:5px}.archery-legend span{padding:6px 8px;font-size:9px}}
@media(max-width:390px){.archery-field{height:430px;min-height:0}.archery-target{width:88px}.archery-distance{font-size:8px}.archery-hud small{font-size:8px}.archery-hud b{font-size:13px}}
@media(max-height:520px) and (orientation:landscape){.archery-field{height:calc(100dvh - 158px);min-height:300px}.archery-hud{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:6px}.archery-legend{display:none}.archery-target{width:clamp(88px,14vw,138px)}}
@media(prefers-reduced-motion:reduce){.archery-cloud,.archery-field.bow-kick .archery-bow,.archery-medal{animation:none!important}}

.game-stage:has(.tower-defense-wrap){max-width:1320px}

/* 2026-10-02 Tower Defense animation + difficulty revision */
.game-stage.tower-defense-stage{max-width:1320px}
.tower-defense-stage .tower-defense-wrap{padding:18px 20px 22px}
.tower-defense-stage .td-board{width:min(1240px,100%);aspect-ratio:10/7;min-height:0;border-color:rgba(57,230,215,.26);background:radial-gradient(circle at 78% 18%,rgba(57,230,215,.15),transparent 30%),radial-gradient(circle at 18% 82%,rgba(58,134,255,.10),transparent 34%),linear-gradient(145deg,#0b2137,#06101c)}
.tower-defense-stage .td-grid{grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(7,1fr)}
.tower-defense-stage .td-cell{overflow:visible;transition:background .15s,border-color .15s,transform .12s}
.tower-defense-stage .td-cell:not(.path):active{transform:scale(.96)}
.tower-defense-stage .td-cell.path{background:linear-gradient(135deg,rgba(137,157,177,.20),rgba(56,76,96,.13));box-shadow:inset 0 0 18px rgba(255,255,255,.018)}
.tower-defense-stage .td-path-dot{animation:tdPathPulse 1.25s ease-in-out infinite}
.tower-defense-stage .td-entry{left:.45%;top:46%;transform:translateY(-50%);text-shadow:0 0 16px rgba(255,91,110,.38)}
.tower-defense-stage .td-base{right:.35%;top:.7%;width:9%;min-width:50px}
.tower-defense-stage .td-hud span.low{color:#ff9ba5;border-color:rgba(255,103,116,.35);background:rgba(255,103,116,.08);animation:tdEnergyWarn .9s ease-in-out infinite alternate}
.tower-defense-stage .td-tower{width:min(67%,64px);overflow:visible;isolation:isolate;transition:filter .12s,transform .12s}
.tower-defense-stage .td-tower>i{position:absolute;z-index:-1;inset:-8px;border:1px solid rgba(57,230,215,.12);border-radius:50%;opacity:.45}
.tower-defense-stage .td-tower.td-health>i{border-color:rgba(94,227,141,.18)}
.tower-defense-stage .td-tower.td-fair>i{border-color:rgba(255,211,90,.2)}
.tower-defense-stage .td-tower.fire.ranged{animation:tdRangedRecoil .28s ease}
.tower-defense-stage .td-tower.fire.melee{animation:tdMeleeSwing .42s cubic-bezier(.18,.8,.2,1)}
.tower-defense-stage .td-enemy{width:clamp(28px,4.5vw,50px);z-index:18;transition:left .09s linear,top .09s linear,filter .12s}
.tower-defense-stage .td-enemy.hit>span{filter:brightness(1.55) saturate(1.35);box-shadow:0 0 22px rgba(255,255,255,.28),0 7px 18px rgba(0,0,0,.26)}
.tower-defense-stage .td-enemy.knocked>span{animation:tdKnockback .34s cubic-bezier(.2,.9,.35,1)}
.tower-defense-stage .td-shot{position:absolute;z-index:22;height:4px;transform-origin:0 50%;pointer-events:none;filter:drop-shadow(0 0 5px currentColor);opacity:.92}
.tower-defense-stage .td-shot.energy{color:#5cf5e8;background:linear-gradient(90deg,rgba(92,245,232,.12),rgba(92,245,232,.62),transparent)}
.tower-defense-stage .td-shot.dart{height:2px;color:#7df2a8;background:linear-gradient(90deg,rgba(125,242,168,.1),rgba(125,242,168,.7),transparent)}
.tower-defense-stage .td-shot>i{position:absolute;left:0;top:50%;display:block;width:13px;height:13px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);box-shadow:0 0 13px currentColor;animation:tdProjectile .38s linear forwards}
.tower-defense-stage .td-shot.dart>i{width:18px;height:6px;border-radius:6px;box-shadow:0 0 9px currentColor}
.tower-defense-stage .td-fx{position:absolute;z-index:24;pointer-events:none;transform:translate(-50%,-50%)}
.tower-defense-stage .td-fx.sweep{width:clamp(54px,7vw,96px);aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,220,103,.78);border-left-color:transparent;border-bottom-color:transparent;filter:drop-shadow(0 0 12px rgba(255,220,103,.45));animation:tdSweep .48s cubic-bezier(.12,.75,.18,1) forwards}
.tower-defense-stage .td-fx.sweep:after{content:'💨';position:absolute;right:-10px;top:4px;font-size:clamp(16px,2vw,25px);transform:rotate(20deg)}
.tower-defense-stage .td-fx.burst{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff 0 12%,#ffda66 13% 28%,#ff6b79 29% 44%,transparent 46%);animation:tdBurst .46s ease-out forwards}
@keyframes tdProjectile{0%{left:0;opacity:.35;transform:translate(-50%,-50%) scale(.65)}15%{opacity:1}100%{left:100%;opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes tdSweep{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-80deg)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25) rotate(72deg)}}
@keyframes tdBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}}
@keyframes tdRangedRecoil{0%,100%{transform:translate(-50%,-50%)}45%{transform:translate(-50%,-50%) scale(.88) rotate(-7deg);filter:drop-shadow(0 0 14px #63eee2)}}
@keyframes tdMeleeSwing{0%,100%{transform:translate(-50%,-50%) rotate(0)}35%{transform:translate(-50%,-50%) scale(1.16) rotate(-22deg)}65%{transform:translate(-50%,-50%) scale(1.1) rotate(18deg)}}
@keyframes tdKnockback{0%{transform:translateX(0) rotate(0)}38%{transform:translateX(-12px) rotate(-16deg) scale(.9)}70%{transform:translateX(5px) rotate(7deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes tdPathPulse{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:.55;transform:scale(1.2)}}
@keyframes tdEnergyWarn{to{box-shadow:0 0 16px rgba(255,103,116,.18)}}
@media(max-width:760px){
 .game-stage.tower-defense-stage{max-width:100%}
 .tower-defense-stage .tower-defense-wrap{padding:7px 5px 12px}
 .tower-defense-stage .td-board{border-radius:13px;width:100%;aspect-ratio:10/7}
 .tower-defense-stage .td-tower{border-radius:10px;font-size:clamp(15px,5vw,24px)}
 .tower-defense-stage .td-enemy{width:clamp(24px,8vw,38px)}
 .tower-defense-stage .td-entry,.tower-defense-stage .td-base b{font-size:6px}
 .tower-defense-stage .td-base img,.tower-defense-stage .td-base>span{width:34px;height:34px;font-size:19px;border-radius:9px}
 .tower-defense-stage .td-shot>i{width:9px;height:9px}
 .tower-defense-stage .td-shot.dart>i{width:13px;height:5px}
}


/* 2026-10-02: transparent logo, approximately 8% smaller */
.logo-mark,.brand-mark.logo-mark,.brand .logo-mark{
  width:148px!important;height:56px!important;
  min-width:148px!important;min-height:56px!important;
  background:transparent!important;
}
.brand.mini .logo-mark{
  width:112px!important;height:42px!important;
  min-width:112px!important;min-height:42px!important;
}
.cert-logo{width:61px!important;height:61px!important;background:transparent!important}
/* Retain contrast for white lettering on light surfaces. */
html[data-theme=light] .logo-mark img,
.cert-logo img{filter:brightness(0) saturate(100%) invert(56%) sepia(87%) saturate(961%) hue-rotate(153deg) brightness(91%) contrast(90%)!important}
@media(max-width:760px){
  .logo-mark,.brand-mark.logo-mark,.brand .logo-mark{
    width:112px!important;height:42px!important;
    min-width:112px!important;min-height:42px!important;
  }
  .brand.mini .logo-mark{
    width:88px!important;height:33px!important;
    min-width:88px!important;min-height:33px!important;
  }
}

/* Routed game header follows the selected theme. */
html[data-theme="light"] .game-shell {
  color: var(--text);
  background: radial-gradient(circle at 50% 0%, #dceefa, transparent 40%), #f3f8fc;
}

html[data-theme="light"] .game-topbar {
  color: var(--text);
  background: rgba(248, 252, 255, .96);
}

html[data-theme="light"] .game-title small {
  color: #087c76;
}

html[data-theme="light"] .game-hint {
  color: #455d73;
}

html[data-theme="light"] .score-pill {
  color: #725000;
  background: #fff2cc;
  border-color: #d6b75b;
}

/* DMD Piksel branding and score-only progress layout. */
.brand > .brand-wordmark { display: flex; min-width: 0; }
.brand-wordmark b { font: 800 18px/1.15 "Space Grotesk", sans-serif; letter-spacing: .3px; white-space: nowrap; }
.mascot .mascot-logo { display: block; width: 190px; height: 104px; object-fit: contain; margin: 0 0 22px; filter: brightness(0) saturate(100%) invert(56%) sepia(87%) saturate(961%) hue-rotate(153deg) brightness(91%) contrast(90%); }
.mascot .mascot-title { font-size: 27px; line-height: 1.15; letter-spacing: -.6px; }
.developer-credit { font-size: 12px; line-height: 1.6; }
.player-dashboard { grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(110px,.65fr)); }
.leader-row { grid-template-columns: 46px 44px minmax(0,1fr) 100px 42px; }
html[data-theme="light"] .mascot-logo { filter: brightness(0) saturate(100%) invert(39%) sepia(45%) saturate(1200%) hue-rotate(137deg) brightness(84%) contrast(101%); }
@media(max-width:900px) {
  .player-dashboard { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dash-profile { grid-column: 1 / -1; }
  .leader-row { grid-template-columns: 36px 40px minmax(0,1fr) 74px 38px; }
}
@media(max-width:760px) {
  .brand-wordmark b { font-size: 14px; }
  .mascot .mascot-logo { width: 155px; height: 82px; margin-bottom: 16px; }
  .mascot .mascot-title { font-size: 23px; }
}
@media(max-width:650px) {
  .main-header .brand .logo-mark { width: 76px!important; height: 30px!important; min-width: 76px!important; min-height: 30px!important; margin-right: 0!important; }
  .main-header .brand { gap: 5px; }
  .main-header .brand-wordmark b { font-size: 12px; }
  .leader-row { grid-template-columns: 32px 36px minmax(0,1fr) 62px 34px; }
}

/* 2026-10-08: one light palette for hub, routed games, Arena and score toasts. */
html[data-theme="light"]:root {
  --bg: #f3f8fc;
  --panel: #ffffff;
  --panel2: #edf5fb;
  --text: #17283b;
  --muted: #455d73;
  --cyan: #06665f;
  --blue: #245bb0;
  --violet: #6546b5;
  --pink: #b32c64;
  --green: #12653f;
  --yellow: #805600;
  --danger: #b52f43;
  --line: rgba(23, 57, 87, .18);
  color: var(--text);
  background: var(--bg);
}

html[data-theme="light"] .toast {
  color: var(--text);
  background: #ffffff;
  border-color: #a5ccc9;
  box-shadow: 0 16px 44px rgba(42, 79, 108, .18);
}
html[data-theme="light"] .toast b { color: var(--text); }
html[data-theme="light"] .toast small { color: var(--muted); }

/* Keep the Arena feature card bright, including its fixed-colour labels. */
html[data-theme="light"] .arena-home-section {
  color: var(--text);
  background: linear-gradient(135deg, #fff0f4, #f8fbff 52%, #e4f6f3);
  border-color: #dec0cc;
  box-shadow: 0 20px 55px rgba(42, 79, 108, .12);
}
html[data-theme="light"] .arena-home-copy h2 {
  color: var(--text);
  text-shadow: none;
}
html[data-theme="light"] :is(.arena-home-copy>span, .arena-home-copy p b, .arena-kicker) {
  color: #a32950;
}
html[data-theme="light"] .arena-home-tags i {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .arena-home-tags i:first-child { color: var(--green); }
html[data-theme="light"] .arena-home-action .primary {
  color: #ffffff;
  background: linear-gradient(135deg, #b72b55, #a0204c);
}

/* All 16 routes use GameShell. Do not force a dark palette on its stage. */
html[data-theme="light"] :is(.game-stage, .arena-duel-screen) {
  color: var(--text);
  color-scheme: light;
  background: #f3f8fc;
  border-color: var(--line);
  box-shadow: 0 20px 55px rgba(42, 79, 108, .12);
}
html[data-theme="light"] .arena-duel-screen {
  background: radial-gradient(circle at 50% 0%, #fceaf0, transparent 40%), #f3f8fc;
}
html[data-theme="light"] .game-stage {
  background: linear-gradient(155deg, #ffffff, #edf5fb);
}
html[data-theme="light"] .primary,
html[data-theme="light"] .runner-controls .primary {
  color: #10283b;
  background: linear-gradient(135deg, #63e2d5, #9bc5ff);
}
html[data-theme="light"] :is(.game-stage, .arena-duel-screen) .ghost {
  color: var(--text);
  background: #e7f0f7;
  border-color: var(--line);
}

/* Question cards, start screens, score panels and every result state. */
html[data-theme="light"] :is(
  .result-card, .center-panel, .final-screen, .answer-info, .case-card,
  .myth-card, .penalty-question, .floating-question, .td-result,
  .arena-lobby-hero>div:first-child, .arena-player-card, .prediction-arena-card
) {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 12px 32px rgba(42, 79, 108, .12);
}
html[data-theme="light"] :is(
  .answers button, .choice-stack button, .penalty-question button,
  .card-pool button, .activity-cards button, .time-row, .mission-slot,
  .td-hud span, .td-loadout button, .td-status, .archery-hud>div,
  .archery-legend span, .memory-stats span, .duelist, .prediction-timer,
  .prediction-comparison>div, .arena-empty
) {
  color: var(--text);
  background: #edf5fb;
  border-color: var(--line);
}
html[data-theme="light"] :is(
  .answers button:hover:not(:disabled), .choice-stack button:hover:not(:disabled),
  .card-pool button:hover:not(:disabled), .activity-cards button.selected,
  .td-loadout button.selected
) {
  background: #dff3f0;
  border-color: var(--cyan);
}
html[data-theme="light"] :is(.correct, .time-row.ok) {
  color: #155c3e;
  background: #dff3e6 !important;
  border-color: #489872 !important;
}
html[data-theme="light"] :is(.wrong, .time-row.bad) {
  color: #962b3b;
  background: #fbe6e9 !important;
  border-color: #c16878 !important;
}
html[data-theme="light"] :is(.celebrate-banner, .myth-feedback.good, .calendar-feedback.ok) {
  color: #155c3e;
  background: #dff3e6;
  border-color: #489872;
}
html[data-theme="light"] :is(.myth-feedback.bad, .calendar-feedback.bad, .arena-error) {
  color: #962b3b;
  background: #fbe6e9;
  border-color: #c16878;
}
html[data-theme="light"] :is(
  .case-card>p, .mission-message, .time-row span, .memory-top,
  .rhythm-lane b, .runner-swipe-hint
) { color: var(--muted); }
html[data-theme="light"] .mission-slot span { color: var(--text); background: #dceaf3; }
html[data-theme="light"] .mission-slot b { color: var(--muted); }
html[data-theme="light"] .mission-slot.filled { background: #dff3e6; border-color: #489872; }
html[data-theme="light"] .mission-slot.filled b { color: #155c3e; }
html[data-theme="light"] :is(.calendar-streak, .streak) { color: #805600; }
html[data-theme="light"] .calendar-streak { background: #fff2cc; border-color: #d6b75b; }
html[data-theme="light"] .danger-btn { color: #962b3b; background: #fbe6e9; }
html[data-theme="light"] .success-btn { color: #155c3e; background: #dff3e6; }

/* Daytime backgrounds for the playing fields; geometry stays with each game. */
html[data-theme="light"] .runner-road {
  background: linear-gradient(#d3e4ee, #ecf5fa);
  box-shadow: inset 0 0 50px rgba(70, 106, 135, .12);
}
html[data-theme="light"] .runner-road:before {
  background: repeating-linear-gradient(0deg, transparent 0 48px, rgba(23, 57, 87, .09) 49px 50px);
}
html[data-theme="light"] :is(.topdown-arena, .rescue-bg) {
  background: radial-gradient(circle at center, #e9faf2, transparent 48%), linear-gradient(135deg, #cfe9df, #dcebf5);
  box-shadow: inset 0 0 60px rgba(70, 106, 135, .12);
}
html[data-theme="light"] :is(.blaster, .reflex-stage) {
  background: radial-gradient(circle at center, #ffffff, #e0edf6 70%);
}
html[data-theme="light"] .quiz-stage {
  background: radial-gradient(circle at top, #e8ddf5, #f1f7fc 55%);
}
html[data-theme="light"] :is(.host>span, .contestant>span, .timer) {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .scanner-stage { background: linear-gradient(160deg, #e1f4ef, #edf5fb); }
html[data-theme="light"] .scanner-device { background: #ffffff; border-color: #a5ccc9; }
html[data-theme="light"] :is(.meter i, .risk-meter i) { background: #d2e1ec; }
html[data-theme="light"] .sequence-stage {
  background: radial-gradient(circle at top, #e1f4ef, transparent 55%);
}
html[data-theme="light"] :is(.target, .reflex-orb) { border-color: var(--line); }
html[data-theme="light"] :is(.target.danger, .reflex-orb.bad) { background: #f8dce1; }
html[data-theme="light"] :is(.target.safe, .reflex-orb.good) { background: #d2eee0; }
html[data-theme="light"] :is(.threat-tag, .threat-badge, .lane-threat small) {
  color: #962b3b;
  background: #fbe6e9;
  border-color: #c16878;
}
html[data-theme="light"] .runner-controls {
  background: linear-gradient(180deg, transparent, #edf5fb 25%);
}
html[data-theme="light"] .rhythm-buttons { background: #edf5fb; }
html[data-theme="light"] :is(
  .runner-controls button:not(.primary), .arena-actions>button:not(.primary),
  .rhythm-buttons button, .defense-lane button, .mobile-dpad button,
  .rhythm-music-toggle
) { color: var(--text); background: #e7f0f7; border-color: var(--line); }
html[data-theme="light"] .rhythm-music-toggle.on { color: var(--cyan); background: #dff3f0; }
html[data-theme="light"] .runner-swipe-hint { background: #ffffff; border-color: var(--line); }
html[data-theme="light"] .mobile-dpad { background: rgba(237, 245, 251, .85); }
html[data-theme="light"] .mobile-joystick {
  background: radial-gradient(circle, #d8eee9 0 20%, #e7f0f7 21% 54%, #f3f8fc 55%);
  border-color: #a5bfce;
  box-shadow: inset 0 0 24px rgba(70, 106, 135, .12), 0 12px 28px rgba(42, 79, 108, .12);
}
html[data-theme="light"] .joystick-ring { border-color: #a5bfce; }

/* Memory, shields, rhythm and tower defence. */
html[data-theme="light"] :is(.card-back, .memory-card-v2 .card-back) {
  color: var(--text);
  background: radial-gradient(circle at 50% 20%, #d8f1ec, transparent 50%), #e7f0f7;
  border-color: var(--line);
}
html[data-theme="light"] :is(.card-front, .memory-card-v2 .card-front) {
  color: var(--text);
  background: linear-gradient(155deg, #ffffff, #e3f4ee);
  border-color: #a5ccc9;
}
html[data-theme="light"] .value-visual { background: radial-gradient(circle, #ffffff, #d8eee9); }
html[data-theme="light"] .defense-field {
  background: linear-gradient(90deg, #c7e7d6 0 12%, #e0edf6 12% 100%);
  box-shadow: inset 0 0 55px rgba(70, 106, 135, .12);
}
html[data-theme="light"] .rhythm-board {
  background: linear-gradient(#e8e3f6, #e1eff7 75%);
  box-shadow: inset 0 0 55px rgba(70, 106, 135, .12);
}
html[data-theme="light"] .rhythm-note { border-color: var(--line); }
html[data-theme="light"] .rhythm-note.clean { background: #c3eae4; }
html[data-theme="light"] .rhythm-note.risk { background: #f8dce1; }
html[data-theme="light"] :is(.defense-hud .energy-low, .tower-defense-stage .td-hud span.low) {
  color: #962b3b;
  background: #fbe6e9;
  border-color: #c16878;
}
html[data-theme="light"] .td-board,
html[data-theme="light"] .tower-defense-stage .td-board {
  background: radial-gradient(circle at 78% 18%, #e2f5ee, transparent 40%), linear-gradient(145deg, #edf5fb, #d7e7f2);
  border-color: #a5bfce;
  box-shadow: inset 0 0 45px rgba(70, 106, 135, .12);
}
html[data-theme="light"] .td-cell { border-color: rgba(23, 57, 87, .11); }
html[data-theme="light"] .td-cell:not(.path):hover { background: #cbe8e3; }
html[data-theme="light"] .td-cell.path,
html[data-theme="light"] .tower-defense-stage .td-cell.path {
  background: linear-gradient(135deg, #b7cddd, #cbdde9);
  border-color: #9bb4c6;
}
html[data-theme="light"] .td-path-dot { color: #355369; }
html[data-theme="light"] .td-entry { color: #962b3b; }
html[data-theme="light"] .td-tower { background: #b5dfd8; border-color: #76a8a0; }

/* Bright sky and pitch for penalty and archery, plus readable field overlays. */
html[data-theme="light"] .penalty-stage {
  background: linear-gradient(#d8ecfb 0 43%, #b8dfc3 43% 100%);
}
html[data-theme="light"] .goal { border-color: #526f83; }
html[data-theme="light"] .goal-interactive { background: rgba(255, 255, 255, .28); }
html[data-theme="light"] .goal-answer { color: var(--text); background: #ffffff; border-color: #9bb4c6; }
html[data-theme="light"] .goal-answer:hover:not(:disabled) { background: #dff3f0; border-color: var(--cyan); }
html[data-theme="light"] .goal-answer.correct { color: #155c3e; background: #dff3e6 !important; border-color: #489872 !important; }
html[data-theme="light"] .goal-answer.wrong { color: #962b3b; background: #fbe6e9 !important; border-color: #c16878 !important; }
html[data-theme="light"] .goal-text { color: #155c3e; }
html[data-theme="light"] .miss-text { color: #962b3b; }
html[data-theme="light"] .penalty-result-text { background: #ffffff; text-shadow: none; }
html[data-theme="light"] .archery-field {
  background: linear-gradient(#d5ecfc 0 54%, #c7e5cd 54% 100%);
  border-color: #a5bfce;
  box-shadow: inset 0 0 60px rgba(70, 106, 135, .12), 0 18px 40px rgba(42, 79, 108, .12);
}
html[data-theme="light"] .archery-cloud { background: rgba(255, 255, 255, .72); }
html[data-theme="light"] .archery-ground {
  background: linear-gradient(180deg, rgba(101, 176, 118, .12), rgba(78, 145, 96, .25)), repeating-linear-gradient(165deg, transparent 0 28px, rgba(23, 57, 87, .06) 29px 30px);
}
html[data-theme="light"] .archery-distance { color: #355d48; }
html[data-theme="light"] .wind-value { color: #245b8c; }
html[data-theme="light"] :is(.archery-power, .archery-result) {
  color: var(--text);
  background: rgba(255, 255, 255, .94);
  border-color: var(--line);
}
html[data-theme="light"] .archery-power>div { background: #d2e1ec; }
html[data-theme="light"] .archery-power small { color: var(--muted); }
html[data-theme="light"] .archery-result.hit strong { color: #155c3e; }
html[data-theme="light"] .archery-result.miss strong { color: #962b3b; }
html[data-theme="light"] .archery-finish { background: rgba(243, 248, 252, .96); }
html[data-theme="light"] .archery-finish>small { color: #245b8c; }
html[data-theme="light"] .archery-crosshair { border-color: #245b8c; }
html[data-theme="light"] :is(.archery-crosshair i, .archery-crosshair b) { background: #245b8c; }

/* Arena lobby, prediction input and completed duels use the same palette. */
html[data-theme="light"] .arena-wager { background: #fff0f4; border-color: #dec0cc; }
html[data-theme="light"] .arena-wager small { color: #a32950; }
html[data-theme="light"] .arena-wager strong { color: var(--text); text-shadow: none; }
html[data-theme="light"] :is(.arena-duel-top small, .arena-invite.incoming small, .arena-rules b) { color: #a32950; }
html[data-theme="light"] :is(.arena-duel-top>span, .arena-list-head>span, .arena-stake b, .prediction-transfer, .prediction-scoreboard .duelist>i.submitted) { color: var(--green); }
html[data-theme="light"] :is(.arena-duel-top>span.offline, .prediction-timeout) { color: #805600; }
html[data-theme="light"] .arena-challenge { color: #a32950; background: #fff0f4; border-color: #dec0cc; }
html[data-theme="light"] .arena-challenge:hover:not(:disabled) { background: #f9dde6; }
html[data-theme="light"] :is(.arena-rules, .arena-empty) { border-color: var(--line); }
html[data-theme="light"] .duelist.me { background: #e2f4ef; border-color: #a5ccc9; }
html[data-theme="light"] .versus span { color: #a32950; background: #fff0f4; border-color: #dec0cc; }
html[data-theme="light"] .prediction-form input { color: var(--text); background: #edf5fb; border-color: #a5bfce; }
html[data-theme="light"] .prediction-form input::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="light"] .prediction-timer.urgent { color: #962b3b; border-color: #c16878; }
html[data-theme="light"] .prediction-wait>span { color: #155c3e; background: #dff3e6; }
html[data-theme="light"] .correct-answer { background: #e2f4ef; border-color: #a5ccc9; }
html[data-theme="light"] .prediction-comparison>div.best { color: #155c3e; background: #dff3e6; border-color: #489872; }

/* Hub labels and shared controls must also retain contrast in light mode. */
html[data-theme="light"] :is(.live-pill, .difficulty, .game-card-foot span) { color: var(--muted); }
html[data-theme="light"] .lang-switch button.active { color: #10283b; background: #aee5df; }
html[data-theme="light"] .prediction-orbit { color: #10283b; background: linear-gradient(145deg, #63e2d5, #9bc5ff); }
html[data-theme="light"] .stadium-lights { color: #355369; text-shadow: 0 0 22px #ffffff; }
html[data-theme="light"] .classroom-quick button { color: var(--text); background: #e7f0f7; }
html[data-theme="light"] .dock-cert { color: #241500; background: linear-gradient(135deg, #f6d77a, #ffcc99); }
html[data-theme="light"] :is(.profile-chip>span, .dash-avatar, .td-base>span, .chat-avatar) { background: #dceaf3; }
html[data-theme="light"] :is(.chat-head span, .chat-head span.connected) { color: var(--muted); }
html[data-theme="light"] :is(.chat-empty strong, .chat-meta b, .chat-bubble p) { color: var(--text); }
html[data-theme="light"] :is(.chat-meta time, .chat-compose>small) { color: var(--muted); }
html[data-theme="light"] :is(.chat-compose, .chat-compose textarea, .chat-bubble) { color: var(--text); background: #edf5fb; border-color: var(--line); }
html[data-theme="light"] .chat-error { color: #962b3b; background: #fbe6e9; }
html[data-theme="light"] :is(.chat-fab, .chat-send) { color: #10283b; background: linear-gradient(145deg, #63e2d5, #9bc5ff); }

/* Trainer moderation and persistent classroom history, 2026-10-12. */
.trainer-history { margin: 18px 0; }
.trainer-history-content { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel2); }
.trainer-history-content>p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.trainer-history-list { display: grid; gap: 8px; }
.trainer-history-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; width: 100%; padding: 12px; text-align: left; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.trainer-history-item.selected { border-color: var(--cyan); }
.trainer-history-item>span { display: grid; gap: 4px; min-width: 0; }
.trainer-history-item b { font-size: 12px; overflow-wrap: anywhere; }
.trainer-history-item small { color: var(--muted); font-size: 10px; }
.trainer-history-pages { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 14px; font-size: 12px; }
.leader-row.moderated { align-items: start; grid-template-columns: 46px 44px minmax(0,1fr) 100px minmax(110px,auto); }
.player-moderation-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.player-moderation-actions button { min-height: 38px; }
.player-score-details { margin-top: 6px; font-size: 10px; color: var(--muted); }
.player-score-details summary { cursor: pointer; color: var(--cyan); }
.player-score-details ul { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 5px; }
.player-score-details li { display: flex; justify-content: space-between; gap: 12px; }
.player-score-details li b { color: var(--text); }
.trainer-live-chat { margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel2); }
.trainer-live-chat>.muted { font-size: 11px; line-height: 1.6; }
.trainer-chat-feed { max-height: 360px; overflow: auto; display: grid; gap: 10px; padding: 3px; overscroll-behavior: contain; }
.trainer-chat-message { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
.trainer-chat-message>div { display: flex; gap: 10px; align-items: start; justify-content: space-between; }
.trainer-chat-message b { overflow-wrap: anywhere; }
.trainer-chat-message time { white-space: nowrap; color: var(--muted); font-size: 10px; }
.trainer-chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.65; margin: 9px 0; }
.trainer-chat-message>small { color: var(--danger); font-size: 11px; font-weight: 800; }
.trainer-chat-message.banned { border-color: var(--danger); }
.trainer-chat-message button { min-height: 36px; }
.trainer-banned { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 16px 0; background: var(--panel2); }
.trainer-banned>summary { cursor: pointer; font-weight: 800; font-size: 12px; }
.trainer-banned-player { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.trainer-banned-player:last-child { border-bottom: 0; }
.trainer-banned-player>div { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.trainer-banned-player small { color: var(--muted); font-size: 11px; }
.trainer-banned-player p { margin: 0; color: var(--muted); font-size: 11px; }
.trainer-banned-player button { flex-shrink: 0; }
.moderation-notice { border: 1px solid var(--green); color: var(--green); background: var(--panel2); padding: 12px; border-radius: 12px; font-size: 12px; }
html[data-theme="light"] .trainer-panel .danger-button { color: #962b3b; background: #fbe6e9; border-color: #c16878; }
html[data-theme="light"] .trainer-panel :is(input, select) { background: #edf5fb; color: var(--text); border-color: var(--line); }
html[data-theme="light"] .trainer-panel .join-link code { background: #edf5fb; color: var(--text); }
html[data-theme="light"] .trainer-panel :is(.visibility-badge.public, .session-state.on) { color: #155c3e; background: #dff3e6; border-color: #489872; }
html[data-theme="light"] .trainer-panel .visibility-badge.private { color: #805600; background: #fff2cc; border-color: #d6b75b; }
html[data-theme="light"] .trainer-panel :is(.session-state.off, .inline-error) { color: #962b3b; background: #fbe6e9; border-color: #c16878; }
html[data-theme="light"] .trainer-panel .mini-avatar { background: #dceaf3; }
@media(max-width:650px) {
  .trainer-live-chat { padding: 12px; }
  .trainer-chat-message>div { flex-direction: column; gap: 4px; }
  .trainer-history-item { grid-template-columns: 1fr; gap: 8px; }
  .trainer-history-item>span:last-child { display: flex; gap: 10px; align-items: center; }
  .leader-row.moderated { grid-template-columns: 28px 38px minmax(0,1fr) auto; }
  .leader-row.moderated .player-moderation-actions { grid-column: 3 / -1; justify-content: end; }
  .trainer-banned-player { flex-wrap: wrap; }
}

/* Arcade clarity and balanced shield defense — 2026-10-19. */
.site-footer { flex-wrap: wrap; row-gap: 12px; }
.site-footer .site-development-notice {
  flex-basis: 100%; order: 100; margin: 4px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--muted); text-align: center;
  font-size: 11px; line-height: 1.6;
}

/* Only visual scale changes: the same 10x7 grid and wave rules remain. */
.game-stage.tower-defense-stage { max-width: 1440px; }
.tower-defense-stage .td-board { width: min(1360px,100%); aspect-ratio: 10/7; }
.tower-defense-stage .td-path-arrow {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: #b7f5e9; font: 900 clamp(16px,2vw,28px)/1 system-ui,sans-serif;
  pointer-events: none; user-select: none;
}
.td-route-help { text-align: center; font-size: 11px; line-height: 1.6; color: var(--muted); margin: 12px 0 6px; }
html[data-theme="light"] .tower-defense-stage .td-path-arrow { color: #18475f; }

/* Keyboard keys appear once. Touch controls use coloured lane markers. */
.rhythm-lane { box-shadow: inset 0 3px var(--lane-color); }
.rhythm-buttons button { border-top: 3px solid var(--lane-color); }
.rhythm-touch-icon { display: none; color: var(--lane-color); font-size: 26px; line-height: 1; }
.rhythm-key { display: inline; }
@media(max-width:700px) {
  .tower-defense-stage .tower-defense-wrap { padding: 7px 3px 12px; }
  .tower-defense-stage .td-path-arrow { font-size: clamp(15px,4.6vw,24px); }
  .rhythm-key { display: none; }
  .rhythm-touch-icon { display: inline; }
}
@media(hover:none) and (pointer:coarse) {
  .rhythm-key { display: none; }
  .rhythm-touch-icon { display: inline; }
}

/* Three readable lanes, large controls and a clear energy economy. */
.defense-v2-stage { max-width: 1180px; }
.defense-v2 { padding: 16px; }
.defense-v2 .defense-hud { justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.defense-v2 .defense-hud>span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.defense-energy { position: relative; height: 28px; margin: 0 0 12px; overflow: hidden; border-radius: 8px; background: var(--panel2); }
.defense-energy>i { position: absolute; height: 4px; bottom: 0; left: 0; background: var(--cyan); transition: width .12s linear; }
.defense-energy>small { position: relative; display: block; padding: 3px 10px; color: var(--muted); font-size: 10px; }
.defense-v2 .defense-field {
  height: clamp(360px,46dvh,500px); min-height: 360px; border: 1px solid var(--line);
  background: linear-gradient(90deg,rgba(57,230,215,.08) 0 13%,transparent 13% 100%),var(--panel);
  box-shadow: inset 0 0 50px rgba(0,0,0,.12);
}
.defense-v2 .defense-base { left: 6.5%; font-size: 35px; }
.defense-v2 .defense-base b { color: var(--text); font-size: 8px; }
.defense-lane-track { position: absolute; left: 14%; right: 0; height: 72px; transform: translateY(-50%); border-block: 1px dashed var(--line); background: rgba(127,155,178,.045); }
.defense-lane-track>span { position: absolute; left: 8px; top: 4px; font-size: 10px; color: var(--muted); }
.defense-lane-track.incoming { border-color: var(--yellow); background: rgba(221,162,54,.08); }
.defense-incoming { position: absolute; top: 4px; right: 10px; font-size: 10px; color: var(--yellow); }
.defense-shield-line { position: absolute; top: 5%; bottom: 5%; width: 1px; background: var(--line); }
.defense-v2 .lane-shield { font-size: 37px; }
.defense-v2 .lane-shield>small { padding: 2px 5px; border-radius: 6px; background: var(--panel2); color: var(--text); font-size: 10px; }
.defense-v2 .lane-threat { font-size: 30px; transition: left .1s linear; }
.defense-v2 .lane-threat small { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.defense-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.defense-lane-control { display: grid; justify-items: center; gap: 5px; min-height: 88px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--panel2); touch-action: manipulation; }
.defense-lane-control>span { font-size: 24px; }
.defense-lane-control>b { font-size: 12px; }
.defense-lane-control>small { font-size: 10px; color: var(--muted); }
.defense-lane-control.active { border-color: var(--cyan); }
.defense-lane-control.incoming { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.defense-lane-control:disabled { opacity: 1; cursor: default; }
.defense-support { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.defense-support>p { margin: 0; max-width: 610px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.defense-pulse { min-width: 190px; min-height: 48px; }
.defense-v2 .defense-result { position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 440px; max-width: calc(100% - 24px); padding: 24px; box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.defense-result-icon { font-size: 44px; }
.defense-result h2 { margin: 8px 0; font-size: 26px; }
.defense-result p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0 0 16px; }
.defense-effect { position: absolute; z-index: 7; transform: translate(-50%,-50%); font-size: 36px; pointer-events: none; animation: defenseImpact .65s ease-out both; }
.defense-effect.wave { font-size: 100px; animation: defenseWave .85s ease-out both; }
@keyframes defenseImpact { from { opacity: 1; transform: translate(-50%,-50%) scale(.6); } to { opacity: 0; transform: translate(-50%,-70%) scale(1.4); } }
@keyframes defenseWave { from { opacity: .9; transform: translate(-50%,-50%) scale(.5); } to { opacity: 0; transform: translate(-50%,-50%) scale(3); } }
@media(max-width:650px) {
  .defense-v2 { padding: 8px; }
  .defense-v2 .defense-hud { font-size: 10px; gap: 5px; }
  .defense-v2 .defense-hud>span { padding: 7px; }
  .defense-v2 .defense-field { height: 360px; min-height: 360px; }
  .defense-v2 .defense-base { font-size: 27px; }
  .defense-v2 .defense-base b { font-size: 6px; }
  .defense-v2 .lane-shield { font-size: 29px; }
  .defense-v2 .lane-threat { font-size: 25px; }
  .defense-lane-track { height: 65px; }
  .defense-controls { gap: 6px; }
  .defense-lane-control>b { font-size: 11px; }
  .defense-lane-control>small { font-size: 9px; }
  .defense-support { flex-direction: column; align-items: stretch; }
  .defense-pulse { width: 100%; }
  .defense-v2 .defense-result { padding: 18px; }
  .defense-result h2 { font-size: 23px; }
}
@media(prefers-reduced-motion:reduce) {
  .defense-effect { animation: none; }
  .defense-v2 .lane-shield.expiring { animation: none; }
}


/* 2026-10-19: distinct offer course and rescue expedition. */
.escape-v3{--esc-accent:var(--cyan);--esc-soft:var(--panel2);padding:24px;max-width:1120px;margin:auto;color:var(--text);background:var(--panel)}
.escape-v3 *{box-sizing:border-box}.escape-v3 button{font:inherit;cursor:pointer;min-height:46px}.escape-v3 button:disabled{cursor:default;opacity:.48}.escape-v3 button:focus-visible{outline:3px solid var(--esc-accent);outline-offset:3px}
.offer-v3{--esc-accent:#bda2ff}html[data-theme="light"] .offer-v3{--esc-accent:#6546b5}.rescue-v3{--esc-accent:var(--green)}
.escape-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.escape-heading small{color:var(--esc-accent);font-size:11px;font-weight:850;letter-spacing:1.6px}.escape-heading h2{font-size:clamp(21px,3vw,32px);margin:7px 0 0;letter-spacing:-.7px;line-height:1.15}.escape-tag{border:1px solid var(--line);border-radius:30px;padding:9px 12px;font-size:10px;font-weight:800;white-space:nowrap;color:var(--muted)}
.escape-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}.escape-hud>span{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 10px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;color:var(--esc-accent)}.escape-hud b{color:var(--text);font-size:14px}
.offer-course{position:relative;height:530px;overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:20px;isolation:isolate}.offer-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}.offer-lanes>div{border-right:1px dashed var(--line);position:relative;background:linear-gradient(180deg,transparent,var(--panel2))}.offer-lanes>div:last-child{border:0}.offer-lanes>div.selected{background:linear-gradient(180deg,var(--panel2),transparent)}.offer-lanes b{position:absolute;left:50%;top:28px;transform:translateX(-50%);font-size:44px;font-weight:900;color:var(--muted);opacity:.35}.offer-lanes i{position:absolute;left:50%;height:42%;top:24%;border-left:2px dashed var(--line)}
.offer-distance{position:absolute;top:0;left:0;right:0;height:6px;background:var(--panel2);z-index:3}.offer-distance>i{display:block;background:var(--esc-accent);height:100%}.offer-distance>span{position:absolute;top:-4px;transform:translateX(-100%);color:var(--muted);font-size:13px}.offer-distance .passed{color:var(--esc-accent)}
.offer-refusal-zone{position:absolute;top:56%;height:27%;width:100%;background:var(--panel2);border-top:1px dashed var(--esc-accent);border-bottom:2px solid var(--esc-accent);opacity:.8}.offer-refusal-zone>span{position:absolute;left:10px;top:5px;font-size:9px;font-weight:850;letter-spacing:2px;color:var(--esc-accent)}.offer-refusal-zone.armed{box-shadow:inset 0 0 30px var(--line);opacity:1}
.offer-obstacle{position:absolute;transform:translate(-50%,-50%);width:28%;max-width:230px;background:var(--panel);border:1px solid var(--danger);border-radius:12px;padding:10px 5px;display:grid;justify-items:center;gap:3px;text-align:center;box-shadow:0 8px 14px #0002;z-index:3}.offer-obstacle>span{font-size:26px}.offer-obstacle>b{font-size:11px;color:var(--danger);line-height:1.2}.offer-obstacle>small{font-size:10px;color:var(--muted)}.offer-obstacle.resolved{opacity:.2;filter:grayscale(1)}.offer-obstacle.substance{border-style:dashed}
.offer-player{position:absolute;top:82%;transform:translate(-50%,-50%);width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:var(--panel);border:3px solid var(--esc-accent);z-index:5;transition:left .14s ease}.offer-player>span{font-size:31px}.offer-player>img,.rescue-player>img{width:100%;height:100%;border-radius:50%;object-fit:cover}.offer-player>b{position:absolute;top:100%;font-size:9px;background:var(--esc-accent);color:var(--bg);padding:3px 6px;border-radius:5px;white-space:nowrap}.offer-player.refusing{box-shadow:0 0 0 18px var(--line)}
.escape-notice{position:absolute;top:13px;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;padding:9px 14px;border-radius:12px;border:1px solid var(--esc-accent);background:var(--panel);color:var(--text);z-index:8;font-size:12px;font-weight:750;text-align:center;pointer-events:none}
.escape-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:var(--bg);z-index:10}.escape-result{text-align:center;max-width:450px}.escape-result>span{display:block;font-size:48px;margin-bottom:16px}.escape-result>small{color:var(--esc-accent);font-weight:800;letter-spacing:2px;font-size:10px}.escape-result>h3{font-size:clamp(22px,3vw,34px);line-height:1.15;margin:12px 0;letter-spacing:-.5px}.escape-result>p{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 22px}.escape-result>.primary{color:var(--bg);background:var(--esc-accent);padding:13px 25px;border:0;border-radius:12px;font-weight:850}
.offer-controls{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:12px;margin:14px auto 0;max-width:540px}.offer-controls>button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:14px;font-size:25px;font-weight:800}.offer-controls>.offer-refuse{display:grid;gap:3px;padding:12px;color:var(--esc-accent);border-color:var(--esc-accent)}.offer-refuse>b{font-size:22px}.offer-refuse>small{font-size:10px;color:var(--muted)}.offer-refuse.armed{box-shadow:0 0 0 3px var(--line)}
.escape-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.escape-bottom>p{color:var(--muted);font-size:11px;line-height:1.5;margin:0}.escape-bottom>button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:8px 12px;font-size:12px}
.rescue-map{position:relative;isolation:isolate;width:100%;aspect-ratio:1.5;min-height:410px;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:var(--bg)}.rescue-map-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:10% 10%;opacity:.55}.rescue-sector{position:absolute;color:var(--muted);font-size:10px;letter-spacing:2px;font-weight:850}.sector-a{left:3%;top:3%}.sector-b{right:3%;top:3%}.rescue-patrol-track{position:absolute;border-color:var(--danger);opacity:.27;pointer-events:none}.rescue-patrol-track.x{left:9%;right:9%;border-top:2px dashed var(--danger)}.rescue-patrol-track.y{top:9%;bottom:9%;border-left:2px dashed var(--danger)}
.rescue-safe-zone{position:absolute;left:33%;top:79%;width:34%;height:20%;border:2px solid var(--esc-accent);background:var(--panel2);border-radius:20px 20px 0 0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;color:var(--esc-accent);text-align:center}.rescue-safe-zone>span{font-size:23px}.rescue-safe-zone>b{font-size:11px}.rescue-safe-zone>small{font-size:8px;color:var(--muted)}.rescue-safe-zone.delivered{box-shadow:0 0 0 7px var(--line)}
.rescue-athlete,.rescue-hazard,.rescue-player{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;z-index:4}.rescue-athlete>span{font-size:29px}.rescue-athlete>b{border:1px solid var(--esc-accent);background:var(--panel);color:var(--esc-accent);border-radius:6px;padding:2px 6px;font-size:8px}.rescue-athlete.following{z-index:3}.rescue-athlete.following>span{font-size:24px}.rescue-hazard{z-index:3}.rescue-hazard>span{font-size:27px}.rescue-hazard>b{font-size:9px;background:var(--panel);color:var(--danger);padding:3px 6px;border-radius:6px;border:1px solid var(--line);white-space:nowrap}.rescue-hazard.frozen{opacity:.4;filter:grayscale(1)}.rescue-player{border:3px solid var(--esc-accent);width:43px;height:43px;justify-content:center;border-radius:50%;background:var(--panel);z-index:6}.rescue-player>span{font-size:25px}.rescue-player.protected{border-style:dashed}.rescue-beacon-ring{position:absolute;width:95px;height:95px;border:2px dashed var(--esc-accent);border-radius:50%;pointer-events:none}.rescue-map.beacon-active{border-color:var(--esc-accent);box-shadow:inset 0 0 30px var(--line)}
.rescue-controls{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:14px}.rescue-controls .mobile-joystick-wrap{display:flex!important;flex-direction:column;align-items:center;margin:0}.rescue-controls .mobile-joystick{width:106px;height:106px;background:var(--panel2);border-color:var(--line);touch-action:none}.rescue-controls .joystick-ring{border-color:var(--esc-accent)}.rescue-controls .joystick-knob{background:var(--esc-accent);box-shadow:none}.rescue-controls .mobile-joystick-wrap>small{color:var(--muted);font-size:9px;margin-top:6px}.rescue-action-stack{flex:1;max-width:330px}.rescue-beacon{display:grid;gap:7px;width:100%;padding:16px 10px;border:1px solid var(--esc-accent);color:var(--esc-accent);background:var(--panel2);border-radius:14px}.rescue-beacon>b{font-size:14px}.rescue-beacon>small{font-size:11px;color:var(--muted)}.rescue-action-stack>p{font-size:11px;color:var(--muted);text-align:center;margin:9px 0}
@media(max-width:650px){.escape-v3{padding:12px}.escape-heading{margin-bottom:14px;gap:8px}.escape-heading small{font-size:9px;letter-spacing:1px}.escape-tag{display:none}.escape-hud{gap:5px}.escape-hud>span{padding:10px 5px;gap:5px;font-size:13px}.escape-hud b{font-size:12px}.offer-course{height:480px}.offer-obstacle{padding:7px 3px}.offer-obstacle>span{font-size:22px}.offer-obstacle>b{font-size:9px}.offer-obstacle>small{font-size:8px}.offer-player{width:48px;height:48px}.offer-controls{grid-template-columns:52px minmax(0,1fr) 52px;gap:8px}.escape-result>p{font-size:12px}.escape-result>span{font-size:38px;margin-bottom:10px}.escape-bottom{gap:8px}.escape-bottom>p{font-size:10px}.rescue-map{aspect-ratio:1;min-height:340px}.rescue-hazard>b{font-size:8px;padding:2px 3px}.rescue-athlete>span{font-size:25px}.rescue-safe-zone>b{font-size:9px}.rescue-safe-zone>small{font-size:7px}.rescue-controls{gap:15px}.rescue-beacon>b{font-size:12px}.rescue-beacon>small{font-size:10px}.escape-notice{font-size:10px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.offer-player{transition:none}}

/* 2026-10-19: DMD Piksel mission interface — shared panels, fields and controls. */
.game-shell.game-interface {
  --ui-cyan: #39e6d7;
  --ui-green: #5ee38d;
  --ui-violet: #bda2ff;
  --ui-pink: #ff8bbc;
  --ui-blue: #82b7ff;
  --ui-yellow: #ffd35a;
  color: var(--text);
  padding: 18px 0 28px;
  max-width: 1440px;
  margin: auto;
}
html[data-theme="light"] .game-shell.game-interface {
  --ui-cyan: #06665f;
  --ui-green: #12653f;
  --ui-violet: #6546b5;
  --ui-pink: #a5215b;
  --ui-blue: #245bb0;
  --ui-yellow: #805600;
}
.game-interface .game-topbar {
  min-height: 72px;
  height: auto;
  padding: 12px 0;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.game-interface .game-topbar .ghost {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  min-height: 44px;
  border-radius: 12px;
  box-shadow: none;
}
.game-interface .game-title {
  gap: 12px;
  min-width: 0;
}
.game-interface .game-title>span {
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 9px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 23px;
}
.game-interface .game-title small {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 1.8px;
}
.game-interface .game-title b {
  color: var(--text);
  font-size: 15px;
}
.game-interface .score-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 9px 15px;
  min-width: 85px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--game-accent);
}
.game-interface .score-pill>small {
  font-size: 8px;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.game-interface .score-pill>b {
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.game-mission-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 24px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  margin-top: 18px;
}
.game-mission-head>div {
  min-width: 0;
}
.game-mission-label {
  color: var(--game-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.7px;
  display: block;
  line-height: 1.5;
}
.game-mission-label>span {
  font-variant-numeric: tabular-nums;
}
.game-mission-head h2 {
  font-size: clamp(22px,3vw,32px);
  font-weight: 850;
  line-height: 1.16;
  margin: 8px 0 0;
  letter-spacing: -.7px;
  color: var(--text);
}
.game-mission-mode {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 9px 13px;
  white-space: nowrap;
}
.game-interface .game-hint {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0 24px 20px;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  border-radius: 0;
  text-align: left;
}
.game-interface .game-hint>span {
  color: var(--game-accent);
  font-weight: 850;
  font-size: 17px;
}
.game-interface .game-hint>p {
  margin: 0;
}
.game-interface .game-stage {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 16px 32px #0000000a;
}
.game-interface .game-stage button {
  font-family: inherit;
}
.game-interface button:focus-visible {
  outline: 3px solid var(--game-accent);
  outline-offset: 3px;
}
.game-interface :is(.runner-wrap,.scanner-stage,.sequence-stage,.calendar-game,.memory-stage,.myth-stage,.archery-wrap,.defense-wrap,.rhythm-wrap,.tower-defense-wrap) {
  padding: 20px 24px 24px;
}
.game-interface :is(.runner-hud,.rhythm-hud,.defense-hud,.td-hud,.archery-hud,.memory-stats,.reflex-hud) {
  gap: 8px;
  margin-bottom: 14px;
  color: var(--text);
  font-weight: 750;
}
.game-interface :is(.rhythm-hud,.defense-hud,.td-hud)>span,
.game-interface .archery-hud>div,
.game-interface .memory-stats>span,
.game-interface .reflex-hud>b {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  color: var(--text);
  box-shadow: none;
}
.game-interface .runner-hud {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
}
.game-interface :is(.archery-hud small,.archery-hud .wind-value,.memory-stats b) {
  color: var(--game-accent);
}
.game-interface :is(.runner-hud small,.td-route-help,.defense-support p,.day-head p,.memory-hero p) {
  color: var(--muted);
}
html .game-shell.game-interface :is(.runner-road,.blaster,.reflex-stage,.defense-field,.rhythm-board,.archery-field,.td-board) {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
  background-color: var(--bg);
}
html .game-shell.game-interface :is(.runner-road,.blaster,.reflex-stage,.defense-field) {
  background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 48px 48px;
}
html .game-shell.game-interface :is(.blaster,.reflex-stage) {
  margin: 0;
}
.game-interface .runner-road {
  max-width: 760px;
  margin-inline: auto;
}
.game-interface .lane {
  border-color: var(--line);
}
.game-interface .runner-swipe-hint {
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
}
.game-interface .runner-player {
  filter: drop-shadow(0 6px 8px #0003);
}
.game-interface .runner-controls {
  gap: 12px;
  margin-top: 16px;
}
.game-interface .runner-controls>button {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  min-height: 48px;
  min-width: 54px;
  border-radius: 12px;
}
.game-interface .runner-controls>.primary {
  background: var(--game-accent);
  color: var(--bg);
}
.game-interface .blaster .timer {
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 15px;
  box-shadow: none;
}
.game-interface .target {
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  box-shadow: 0 8px 18px #0002;
  border: 1px solid var(--line);
}
.game-interface .target.danger {
  border-color: var(--danger);
}
.game-interface .target.safe {
  border-color: var(--green);
}
.game-interface .target small {
  background: var(--panel);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 6px;
}
html .game-shell.game-interface .quiz-stage {
  background: var(--panel);
}
.game-interface .quiz-people {
  height: 165px;
  margin-bottom: 12px;
}
.game-interface .spotlight {
  opacity: .2;
}
.game-interface :is(.host>span,.contestant>span) {
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 5px 8px;
  border-radius: 7px;
}
html .game-shell.game-interface :is(.quiz-console,.case-card,.myth-card,.penalty-question,.final-screen,.result-card) {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
  color: var(--text);
}
.game-interface :is(.question-count,.case-card>small,.myth-card>small,.penalty-question>small) {
  color: var(--game-accent);
  font-size: 10px;
  letter-spacing: 1.4px;
}
.game-interface :is(.quiz-console h2,.case-card h2,.myth-card h2,.penalty-question h3) {
  color: var(--text);
}
.game-interface :is(.answers,.choice-stack) {
  gap: 10px;
}
html .game-shell.game-interface :is(.answers,.choice-stack)>button:not(.correct):not(.wrong):not(.dim) {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
  min-height: 52px;
}
.game-interface .answers>button>b {
  color: var(--game-accent);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
html .game-shell.game-interface :is(.answer-info,.myth-feedback) {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.game-interface .answer-info p {
  color: var(--muted);
}
.game-interface .scanner-device {
  box-shadow: inset 0 0 30px var(--line);
  border-color: var(--game-accent);
  background: var(--bg);
}
.game-interface .scanner-device>span {
  color: var(--game-accent);
}
.game-interface .risk-meter {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  color: var(--text);
}
.game-interface .risk-meter>i {
  background: var(--line);
}
.game-interface .risk-meter>strong {
  color: var(--danger);
}
.game-interface .mission-line {
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 18px;
}
html .game-shell.game-interface .mission-slot {
  background: var(--panel);
  border-color: var(--line);
  color: var(--muted);
  border-radius: 13px;
  box-shadow: none;
}
.game-interface .mission-slot>span {
  color: var(--game-accent);
  background: var(--panel2);
  border: 1px solid var(--line);
}
.game-interface .mission-slot.filled {
  border-color: var(--game-accent);
  color: var(--text);
}
.game-interface .mission-message {
  color: var(--muted);
  line-height: 1.5;
}
html .game-shell.game-interface .card-pool>button {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 13px;
  min-height: 70px;
  box-shadow: none;
}
.game-interface .day-head {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.game-interface :is(.day-head small,.memory-hero small,.calendar-streak,.streak) {
  color: var(--game-accent);
}
.game-interface .calendar-streak {
  background: var(--panel2);
  border: 1px solid var(--line);
}
html .game-shell.game-interface .time-row:not(.ok):not(.bad) {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
}
.game-interface .time-row b {
  color: var(--game-accent);
}
.game-interface .time-row span {
  color: var(--muted);
}
html .game-shell.game-interface .activity-cards>button {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 13px;
}
.game-interface .activity-cards>button.selected {
  border-color: var(--game-accent);
  box-shadow: 0 0 0 2px var(--line);
}
.game-interface .activity-cards small {
  color: var(--muted);
}
.game-interface .reflex-orb.good {
  background: var(--panel2);
  border-color: var(--game-accent);
  box-shadow: 0 0 0 8px var(--line);
}
.game-interface .reflex-orb.bad {
  background: var(--panel2);
  border-color: var(--danger);
  box-shadow: none;
}
.game-interface .myth-card {
  min-height: 360px;
}
.game-interface .brain {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  font-size: 48px;
}
.game-interface .myth-actions button {
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 52px;
}
.game-interface .myth-actions .danger-btn {
  color: var(--danger);
  background: var(--panel2);
  border-color: var(--danger);
}
.game-interface .myth-actions .success-btn {
  color: var(--green);
  background: var(--panel2);
  border-color: var(--green);
}
.game-interface .memory-hero {
  border-bottom: 1px solid var(--line);
  padding: 0 0 18px;
  margin: 0 0 18px;
  background: var(--panel);
  border-radius: 0;
}
.game-interface .memory-hero h2 {
  display: none;
}
html .game-shell.game-interface .card-back {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--game-accent);
  box-shadow: none;
}
html .game-shell.game-interface .card-front {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: none;
}
.game-interface .card-back>span {
  color: var(--game-accent);
  font-size: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
}
.game-interface .card-back>b {
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 1.3;
}
.game-interface .card-back>small {
  color: var(--muted);
}
.game-interface .card-front>small {
  color: var(--muted);
}
.game-interface .memory-card.matched .card-front {
  border-color: var(--green);
}
html .game-shell.game-interface .penalty-stage {
  background: linear-gradient(180deg,var(--bg) 0 42%,var(--panel2) 42% 100%);
}
.game-interface .stadium-lights {
  color: var(--game-accent);
  text-shadow: none;
  opacity: .7;
}
.game-interface .goal-interactive {
  border-color: var(--muted);
  background-color: var(--bg);
  box-shadow: none;
}
.game-interface .goal-net {
  opacity: .45;
}
.game-interface .goal-answer:not(.correct):not(.wrong):not(.dim) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}
.game-interface .goal-answer>b {
  color: var(--game-accent);
  background: var(--panel2);
}
.game-interface .penalty-spot {
  border-color: var(--game-accent);
}
.game-interface .archery-sky-glow {
  opacity: .12;
}
.game-interface .archery-cloud {
  opacity: .2;
}
.game-interface .archery-mountains {
  opacity: .3;
}
.game-interface .archery-ground {
  background: var(--panel2);
  border-top-color: var(--line);
}
.game-interface .archery-legend {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--muted);
  gap: 12px;
}
.game-interface .defense-base {
  background: var(--panel2);
  border-color: var(--game-accent);
  box-shadow: none;
}
.game-interface .defense-base>b {
  color: var(--game-accent);
}
.game-interface .defense-energy {
  background: var(--bg);
  border: 1px solid var(--line);
}
.game-interface .defense-energy>small {
  color: var(--muted);
}
.game-interface .defense-lane-control {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--line);
  border-radius: 13px;
  box-shadow: none;
}
.game-interface .defense-lane-control.active {
  border-color: var(--game-accent);
}
.game-interface .defense-lane-control small {
  color: var(--muted);
}
.game-interface .rhythm-board {
  background: var(--bg);
}
.game-interface .rhythm-lane {
  border-color: var(--line);
  background: linear-gradient(180deg,transparent,var(--panel2));
}
.game-interface .hit-line {
  border-color: var(--game-accent);
  box-shadow: 0 0 16px var(--line);
}
.game-interface .rhythm-buttons>button {
  background: var(--panel2);
  border-color: var(--line);
  border-bottom: 3px solid var(--lane-color);
  border-radius: 12px;
  color: var(--text);
  box-shadow: none;
}
.game-interface .rhythm-music-toggle {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--line);
  border-radius: 12px;
}
.game-interface .td-loadout {
  gap: 10px;
}
.game-interface .td-loadout>button {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--line);
  border-radius: 13px;
  box-shadow: none;
}
.game-interface .td-loadout>button.selected {
  border-color: var(--game-accent);
  box-shadow: 0 0 0 2px var(--line);
}
.game-interface .td-loadout small {
  color: var(--muted);
}
.game-interface .td-status {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.game-interface .td-status p {
  color: var(--muted);
}
html .game-shell.game-interface :is(.center-panel,.archery-finish,.td-result) {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 40px #0002;
  padding: 26px;
}
.game-interface :is(.center-panel h2,.archery-finish h2,.td-result h2) {
  color: var(--text);
  font-size: clamp(21px,3vw,30px);
  letter-spacing: -.5px;
}
.game-interface :is(.center-panel p,.archery-finish p,.td-result p) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
html .game-shell.game-interface .primary {
  background: var(--game-accent);
  color: var(--bg);
  border: 0;
  box-shadow: none;
  border-radius: 12px;
  min-height: 46px;
  font-weight: 850;
}
.game-interface :is(.celebrate-banner,.td-result.win) {
  border-color: var(--green);
  background: var(--panel2);
  color: var(--green);
}
.game-interface .escape-v3 {
  --esc-accent: var(--game-accent);
  padding-top: 8px;
}
.game-interface .escape-overlay {
  border: 0;
}
.game-interface .escape-result>.primary {
  background: var(--game-accent);
  color: var(--bg);
}
@media (max-width:650px) {
  .game-shell.game-interface {
    padding: 8px 0 20px;
  }
  .game-interface .game-topbar {
    min-height: 65px;
    gap: 8px;
    padding: 9px 0;
  }
  .game-interface .game-topbar .ghost {
    min-width: 40px;
    padding: 9px;
  }
  .game-interface .game-title {
    gap: 7px;
  }
  .game-interface .game-title>span {
    width: 33px;
    height: 33px;
    font-size: 19px;
    padding: 5px;
    border-radius: 10px;
  }
  .game-interface .game-title b {
    font-size: 11px;
    max-width: 170px;
    white-space: normal;
    line-height: 1.3;
  }
  .game-interface .score-pill {
    min-width: 60px;
    padding: 9px;
  }
  .game-interface .score-pill>b {
    font-size: 17px;
  }
  .game-mission-head {
    padding: 19px 14px 13px;
    margin-top: 12px;
    border-radius: 17px 17px 0 0;
    display: block;
  }
  .game-mission-label {
    font-size: 9px;
    letter-spacing: 1.1px;
  }
  .game-mission-head h2 {
    font-size: 23px;
  }
  .game-mission-mode {
    display: inline-block;
    font-size: 8px;
    padding: 6px 9px;
    margin-top: 12px;
  }
  .game-interface .game-hint {
    padding: 0 14px 16px;
    font-size: 11px;
  }
  .game-interface .game-stage {
    border-radius: 0 0 17px 17px;
  }
  .game-interface :is(.runner-wrap,.scanner-stage,.sequence-stage,.calendar-game,.memory-stage,.myth-stage,.archery-wrap,.defense-wrap,.rhythm-wrap,.tower-defense-wrap) {
    padding: 10px 12px 16px;
  }
  .game-interface :is(.rhythm-hud,.defense-hud,.td-hud)>span,.game-interface .archery-hud>div,.game-interface .memory-stats>span,.game-interface .reflex-hud>b {
    padding: 9px 6px;
    font-size: 11px;
    border-radius: 10px;
  }
  .game-interface .archery-hud small {
    font-size: 8px;
  }
  .game-interface .archery-hud b {
    font-size: 14px;
  }
  .game-interface .quiz-people {
    height: 130px;
  }
  .game-interface .quiz-console {
    padding: 16px;
  }
  .game-interface .mission-line {
    padding: 10px;
    gap: 8px;
  }
  .game-interface .mission-slot {
    min-height: 90px;
  }
  .game-interface :is(.center-panel,.archery-finish,.td-result) {
    padding: 18px;
  }
  .game-interface .myth-card {
    padding: 22px 15px;
  }
  .game-interface .memory-hero {
    gap: 10px;
  }
  .game-interface .td-status {
    padding: 11px;
    flex-wrap: wrap;
  }
  .game-interface .td-loadout {
    gap: 6px;
  }
  .game-interface .td-loadout>button {
    padding: 9px 7px;
  }
}
.game-interface .archery-distance {
  color: var(--text);
  background: var(--panel);
  padding: 5px 8px;
  border-radius: 8px;
  opacity: 1;
  text-shadow: none;
}

/* Tactical escape map and expanded rescue operations. */
.offer-tactical {
  --esc-accent: var(--game-accent);
}
.offer-map-wrap {
  position: relative;
  max-width: 620px;
  margin: auto;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 18px;
  overflow: hidden;
}
.offer-map-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.offer-map-top>span:first-child {
  color: var(--game-accent);
  font-weight: 850;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
.offer-tile-map {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  position: relative;
  padding: 12px;
  gap: 5px;
  aspect-ratio: 1;
}
.offer-tile-map>.offer-tile {
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  opacity: 1;
  overflow: visible;
  cursor: default;
}
.offer-tile-map>.offer-tile.reachable:not(.wall) {
  border-color: var(--game-accent);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--game-accent);
}
.offer-tile-map>.offer-tile.danger {
  background: var(--panel2);
  border: 1px dashed var(--danger);
  color: var(--danger);
}
.offer-tile-map>.offer-tile.wall {
  background: var(--panel2);
  border-color: var(--line);
  box-shadow: inset 0 -7px 0 var(--line);
}
.offer-wall-block {
  position: absolute;
  inset: 15%;
  border: 1px solid var(--line);
  border-top-width: 4px;
  border-radius: 4px;
  background: var(--panel);
}
.offer-tile-player {
  width: 80%;
  height: 80%;
  font-size: 29px;
  border-radius: 50%;
  border: 2px solid var(--game-accent);
  background: var(--panel2);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px #0002;
}
.offer-tile-player>img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.offer-tile-guard {
  font-size: 29px;
  position: relative;
  display: block;
  line-height: 1;
}
.offer-tile-guard>i {
  position: absolute;
  right: -7px;
  top: -5px;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  color: var(--danger);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 2px 4px;
  border-radius: 5px;
}
.offer-tile-card {
  font-size: 27px;
  width: 68%;
  height: 77%;
  display: grid;
  place-items: center;
  border: 1px solid var(--game-accent);
  border-radius: 8px;
  background: var(--panel2);
  transform: rotate(-7deg);
  box-shadow: 0 4px 0 var(--line);
}
.offer-tile-exit {
  color: var(--game-accent);
  font-size: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.offer-tile-exit>small {
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 1px;
}
.offer-tile-warning {
  font-weight: 900;
  font-size: 19px;
  opacity: .8;
}
.offer-tile-step {
  font-size: 28px;
  color: var(--game-accent);
}
.offer-tile.stunned {
  border-color: var(--game-accent);
}
.offer-tile.stunned .offer-tile-guard {
  opacity: .55;
}
.offer-map-legend {
  max-width: 620px;
  margin: 12px auto;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 10px;
}
.offer-map-legend>span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.offer-map-legend i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--game-accent);
  border-radius: 3px;
}
.offer-map-legend i.danger {
  border-color: var(--danger);
  border-style: dashed;
}
.offer-tactical-controls {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  max-width: 740px;
  margin: 16px auto 0;
}
.offer-direction-pad {
  display: grid;
  grid-template-columns: repeat(3,44px);
  grid-template-rows: repeat(2,44px);
  gap: 4px;
}
.offer-direction-pad>button {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 9px;
  font-size: 19px;
  min-height: 0;
}
.offer-direction-pad>button:nth-child(1) {
  grid-column: 2;
}
.offer-direction-pad>button:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.offer-direction-pad>button:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
.offer-direction-pad>button:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}
.offer-no-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex: 1;
  max-width: 350px;
  background: var(--panel2);
  color: var(--game-accent);
  border: 1px solid var(--game-accent);
  border-radius: 13px;
  padding: 12px;
}
.offer-no-action>b {
  font-size: 23px;
}
.offer-no-action>small {
  color: var(--muted);
  font-size: 10px;
}
.offer-wait {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  font-size: 11px;
}
.offer-wait>small {
  color: var(--muted);
  font-size: 9px;
}
.rescue-operation-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.rescue-operation-strip>div:first-child {
  display: grid;
  gap: 6px;
}
.rescue-operation-strip small {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.7px;
  color: var(--game-accent);
}
.rescue-operation-strip b {
  font-size: 18px;
  letter-spacing: -.3px;
  color: var(--text);
}
.rescue-sector-steps {
  display: flex;
  gap: 6px;
}
.rescue-sector-steps>span {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 850;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel2);
}
.rescue-sector-steps>span.current,.rescue-sector-steps>span.complete {
  border-color: var(--game-accent);
  color: var(--game-accent);
}
.rescue-evacuation-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
  margin: 0 0 13px;
}
.rescue-evacuation-progress>div {
  display: flex;
  gap: 5px;
  flex: 1;
  max-width: 260px;
}
.rescue-evacuation-progress i {
  height: 6px;
  flex: 1;
  background: var(--line);
  border-radius: 10px;
}
.rescue-evacuation-progress i.saved {
  background: var(--game-accent);
}
.rescue-evacuation-progress>b {
  font-size: 10px;
  color: var(--game-accent);
}
.rescue-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.rescue-guide path {
  stroke: var(--game-accent);
  stroke-width: .35;
  stroke-dasharray: 1.3 1;
  fill: none;
  opacity: .6;
}
.rescue-risk-zone {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 22%;
  height: 22%;
  border-radius: 50%;
  border: 1px dashed var(--line);
  background: var(--panel2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  opacity: .5;
  z-index: 1;
  pointer-events: none;
}
.rescue-risk-zone>span {
  font-weight: 900;
  font-size: 20px;
  color: var(--muted);
}
.rescue-risk-zone>small {
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .6px;
  color: var(--muted);
  max-width: 95%;
  text-align: center;
}
.rescue-risk-zone.warning {
  border-color: var(--yellow);
  opacity: 1;
}
.rescue-risk-zone.warning>span,.rescue-risk-zone.warning>small {
  color: var(--yellow);
}
.rescue-risk-zone.active {
  border: 2px solid var(--danger);
  opacity: 1;
  background: var(--panel);
}
.rescue-risk-zone.active>span,.rescue-risk-zone.active>small {
  color: var(--danger);
}
.rescue-supply {
  position: absolute;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  gap: 3px;
  z-index: 3;
}
.rescue-supply>span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 29px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--game-accent);
  border: 1px solid var(--game-accent);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 4px 0 var(--line);
}
.rescue-supply>small {
  color: var(--game-accent);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .5px;
  background: var(--panel);
  padding: 2px 4px;
  border-radius: 4px;
}
.rescue-sprint {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 9px;
  padding: 12px 14px 16px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 12px;
  overflow: hidden;
}
.rescue-sprint>b {
  font-size: 12px;
}
.rescue-sprint>span {
  font-size: 10px;
  color: var(--game-accent);
}
.rescue-sprint>i {
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 0;
  background: var(--game-accent);
}
.rescue-player.boosting {
  box-shadow: 0 0 0 7px var(--line);
}
.rescue-expanded .rescue-safe-zone.delivered {
  animation: rescue-delivery .6s ease-out;
}
@keyframes rescue-delivery {
  50% {
    box-shadow: 0 0 0 13px var(--line);
  }
}
@media (max-width:650px) {
  .offer-tile-map {
    padding: 7px;
    gap: 3px;
  }
  .offer-map-top {
    padding: 10px;
    font-size: 8px;
    gap: 10px;
  }
  .offer-tile-map>.offer-tile {
    border-radius: 6px;
  }
  .offer-tile-player {
    font-size: 20px;
  }
  .offer-tile-guard {
    font-size: 21px;
  }
  .offer-tile-card {
    font-size: 18px;
    border-radius: 5px;
  }
  .offer-tile-exit {
    font-size: 17px;
  }
  .offer-tile-exit>small {
    font-size: 6px;
  }
  .offer-tile-warning {
    font-size: 14px;
  }
  .offer-tactical-controls {
    flex-wrap: wrap;
    gap: 9px;
  }
  .offer-direction-pad {
    grid-template-columns: repeat(3,44px);
    grid-template-rows: repeat(2,44px);
  }
  .offer-no-action {
    padding: 9px;
    min-width: 110px;
  }
  .offer-no-action>small {
    font-size: 8px;
  }
  .offer-wait {
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 40px;
  }
  .offer-map-legend {
    font-size: 8px;
    gap: 9px;
  }
  .offer-tile-map .escape-overlay {
    padding: 12px;
  }
  .offer-tile-map .escape-result>span {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .offer-tile-map .escape-result>h3 {
    font-size: 20px;
    margin: 8px 0;
  }
  .offer-tile-map .escape-result>p {
    font-size: 10px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .offer-tile-map .escape-result>.primary {
    padding: 10px 15px;
    min-height: 40px;
    font-size: 12px;
  }
  .rescue-operation-strip b {
    font-size: 15px;
  }
  .rescue-evacuation-progress {
    font-size: 8px;
    gap: 7px;
  }
  .rescue-evacuation-progress>b {
    font-size: 8px;
  }
  .rescue-expanded .rescue-controls {
    gap: 15px;
  }
  .rescue-risk-zone>small {
    font-size: 5px;
  }
  .rescue-risk-zone>span {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .rescue-expanded .rescue-safe-zone.delivered {
    animation: none;
  }
}

/* 2026-10-19: continuous maze chase for Escape the Offer. */
.offer-maze-operation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 15px;
}
.offer-maze-operation>div:first-child {
  display: grid;
  gap: 6px;
}
.offer-maze-operation small {
  color: var(--game-accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.7px;
}
.offer-maze-operation b {
  color: var(--text);
  font-size: 19px;
  letter-spacing: -.3px;
}
.offer-maze-status {
  color: var(--game-accent);
  font-size: 9px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 10px;
  white-space: nowrap;
}
.offer-maze-field {
  --maze-size: calc(100% / 13 * .76);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 13/11;
  margin: auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 45px #0000000a;
}
.offer-maze-field.shield-active {
  border-color: var(--game-accent);
  box-shadow: 0 0 0 3px var(--line);
}
.offer-maze-walls,.offer-maze-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.offer-maze-wall {
  fill: var(--panel2);
  stroke: var(--game-accent);
  stroke-width: .035;
  stroke-opacity: .42;
}
.offer-maze-dots {
  fill: var(--game-accent);
  opacity: .65;
}
.offer-maze-player,.offer-maze-coach,.offer-maze-card,.offer-maze-power,.offer-maze-exit {
  position: absolute;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  width: var(--maze-size);
  aspect-ratio: 1;
  pointer-events: none;
}
.offer-maze-player {
  border: 2px solid var(--game-accent);
  background: var(--panel);
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 4px 12px #0003;
  will-change: left,top;
}
.offer-maze-player>svg {
  width: 70%;
  height: 70%;
  fill: var(--game-accent);
}
.offer-maze-player .offer-avatar-check {
  stroke: var(--bg);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offer-maze-player>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.offer-maze-player>i {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(var(--facing));
  border-radius: 50%;
  pointer-events: none;
}
.offer-maze-player>i:after {
  content: "";
  position: absolute;
  right: -5px;
  top: calc(50% - 3px);
  width: 5px;
  height: 6px;
  background: var(--game-accent);
  clip-path: polygon(0 0,100% 50%,0 100%);
}
.offer-maze-player.invulnerable {
  border-style: dashed;
  box-shadow: 0 0 0 4px var(--line);
}
.offer-maze-coach {
  background: var(--panel);
  border: 2px solid var(--danger);
  border-radius: 35%;
  z-index: 4;
  box-shadow: 0 3px 10px #0002;
  will-change: left,top;
}
.offer-maze-coach>span {
  font-size: clamp(13px,2.5vw,28px);
  line-height: 1;
}
.offer-maze-coach>b {
  position: absolute;
  right: -4px;
  top: -5px;
  font-size: 8px;
  background: var(--panel);
  border: 1px solid var(--danger);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: var(--danger);
}
.offer-maze-coach.retreating {
  border-color: var(--game-accent);
  border-style: dashed;
}
.offer-maze-coach.retreating>b {
  color: var(--game-accent);
  border-color: var(--game-accent);
}
.offer-maze-coach.respawning {
  opacity: .4;
}
.offer-maze-card {
  width: calc(var(--maze-size) * .9);
  border-radius: 7px;
  border: 1px solid var(--game-accent);
  background: var(--panel2);
  z-index: 2;
  box-shadow: 0 3px 0 var(--line);
}
.offer-maze-card>span {
  font-size: clamp(12px,2.2vw,25px);
}
.offer-maze-power {
  width: calc(var(--maze-size) * .7);
  border: 1px solid var(--game-accent);
  background: var(--panel);
  border-radius: 50%;
  color: var(--game-accent);
  font-size: clamp(13px,2.3vw,27px);
  font-weight: 850;
  z-index: 2;
  animation: offer-maze-power 1.7s ease-in-out infinite;
}
.offer-maze-exit {
  width: calc(var(--maze-size) * .95);
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  z-index: 2;
  font-size: clamp(12px,2.1vw,26px);
}
.offer-maze-exit.unlocked {
  color: var(--green);
  border: 2px solid var(--green);
  box-shadow: 0 0 0 5px var(--line);
}
.offer-maze-pulse {
  position: absolute;
  width: calc(100% / 13 * 8);
  aspect-ratio: 1;
  border: 3px solid var(--game-accent);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
  opacity: .4;
  pointer-events: none;
  animation: offer-maze-wave .6s ease-out both;
}
.offer-maze-field .escape-overlay {
  padding: 24px;
}
.offer-maze-field .escape-result {
  max-width: 480px;
}
.offer-maze-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.offer-maze-legend>span {
  display: flex;
  gap: 5px;
  align-items: center;
}
.offer-maze-legend .light {
  width: 5px;
  height: 5px;
  background: var(--game-accent);
  border-radius: 50%;
}
.offer-maze-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 19px auto 0;
  max-width: 600px;
}
.offer-maze-controls .mobile-joystick-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.offer-maze-controls .mobile-joystick {
  width: 116px;
  height: 116px;
  background: var(--panel2);
  border-color: var(--line);
  touch-action: none;
  box-shadow: none;
}
.offer-maze-controls .joystick-ring {
  border-color: var(--game-accent);
}
.offer-maze-controls .joystick-knob {
  width: 50px;
  height: 50px;
  background: var(--game-accent);
  box-shadow: none;
}
.offer-maze-controls .mobile-joystick-wrap>small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 7px;
}
.offer-maze-actions {
  flex: 1;
  max-width: 340px;
}
.offer-maze-no {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--game-accent);
  background: var(--panel2);
  color: var(--game-accent);
  border-radius: 13px;
  padding: 14px 12px 18px;
  overflow: hidden;
}
.offer-maze-no>b {
  font-size: 24px;
}
.offer-maze-no>small {
  font-size: 10px;
  color: var(--muted);
}
.offer-maze-no>i {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--game-accent);
}
.offer-maze-actions>div {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.offer-maze-actions>div>button {
  flex: 1;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 9px;
  font-size: 11px;
  border-radius: 10px;
  min-height: 44px;
}
.offer-maze-feedback {
  padding: 12px 14px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  min-height: 43px;
}
@keyframes offer-maze-power {
  50% {
    box-shadow: 0 0 0 4px var(--line);
  }
}
@keyframes offer-maze-wave {
  from {
    opacity: .7;
    scale: .3;
  }
  to {
    opacity: 0;
    scale: 1.1;
  }
}
@media (max-width:650px) {
  .offer-maze-operation {
    gap: 10px;
    align-items: flex-start;
  }
  .offer-maze-operation b {
    font-size: 15px;
  }
  .offer-maze-status {
    font-size: 7px;
    padding: 7px;
  }
  .offer-maze-field {
    border-radius: 14px;
  }
  .offer-maze-player,.offer-maze-coach {
    border-width: 1px;
  }
  .offer-maze-coach>b {
    width: 10px;
    height: 10px;
    font-size: 6px;
    top: -3px;
    right: -3px;
  }
  .offer-maze-card {
    border-radius: 4px;
  }
  .offer-maze-field .escape-overlay {
    padding: 12px;
  }
  .offer-maze-field .escape-result>span {
    display: none;
  }
  .offer-maze-field .escape-result>small {
    font-size: 8px;
  }
  .offer-maze-field .escape-result>h3 {
    font-size: 20px;
    margin: 7px 0 10px;
  }
  .offer-maze-field .escape-result>p {
    font-size: 10px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .offer-maze-field .escape-result>.primary {
    font-size: 12px;
    padding: 10px 17px;
    min-height: 42px;
  }
  .offer-maze-legend {
    font-size: 8px;
    gap: 10px;
  }
  .offer-maze-controls {
    gap: 18px;
    margin-top: 16px;
  }
  .offer-maze-controls .mobile-joystick {
    width: 110px;
    height: 110px;
  }
  .offer-maze-no {
    padding: 12px 8px 16px;
  }
  .offer-maze-no>b {
    font-size: 22px;
  }
  .offer-maze-no>small {
    font-size: 8px;
  }
  .offer-maze-feedback {
    font-size: 10px;
    padding: 10px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .offer-maze-power,.offer-maze-pulse {
    animation: none;
  }
}

@media (max-height:520px) and (orientation:landscape) {
  .game-interface .offer-maze {
    display:grid;
    grid-template-columns:minmax(0,1fr) 190px;
    gap:8px 14px;
    align-items:start;
    padding:8px;
  }
  .offer-maze-operation {grid-column:1/-1; grid-row:1; margin:0;}
  .offer-maze-operation>div:first-child {display:flex; gap:10px; align-items:center;}
  .offer-maze-operation b {font-size:12px;}
  .offer-maze .escape-hud {grid-column:2; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin:0;}
  .offer-maze .escape-hud>span {padding:6px; font-size:10px;}
  .offer-maze .escape-hud b {font-size:11px;}
  .offer-maze-field {grid-column:1; grid-row:2/6; width:min(100%,calc((100dvh - 90px)*13/11));}
  .offer-maze-legend {grid-column:1; grid-row:6; margin:0; font-size:8px; gap:8px;}
  .offer-maze-controls {grid-column:2; grid-row:3/5; flex-direction:column; gap:6px; margin:0; width:100%;}
  .offer-maze-controls .mobile-joystick {width:72px; height:72px;}
  .offer-maze-controls .joystick-knob {width:34px; height:34px;}
  .offer-maze-controls .mobile-joystick-wrap>small {display:none;}
  .offer-maze-actions {width:100%;}
  .offer-maze-no {padding:8px; min-height:44px;}
  .offer-maze-no>b {font-size:18px;}
  .offer-maze-no>small {display:none;}
  .offer-maze-actions>div {margin-top:6px;}
  .offer-maze-feedback {grid-column:2; grid-row:5; margin:0; min-height:0; padding:6px; font-size:9px; line-height:1.4;}
  .offer-maze-field .escape-result>span {display:none;}
  .offer-maze-field .escape-result>h3 {font-size:20px;}
  .offer-maze-field .escape-result>p {font-size:10px; line-height:1.5; margin-bottom:12px;}
}

/* 2026-10-19: phone play view. Desktop layouts and game rules are preserved. */

.game-help-toggle,.game-help-close,.game-mobile-pause,.control-compact,.td-mobile-zoom {
  display: none;
}

.fitted-game-field {
  display: contents;
}

@media (max-width:700px), (max-height:520px) and (pointer:coarse) {
  html.dmd-game-active,html.dmd-game-active body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .game-shell.game-interface.mobile-game-shell {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: var(--game-viewport-height,100dvh);
    min-height: 0 !important;
    max-height: none;
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--panel);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-game-shell.game-interface .game-topbar {
    display: flex;
    flex: 0 0 48px;
    height: 48px;
    min-height: 48px;
    gap: 3px;
    padding: 0 48px 0 3px;
    margin: 0;
    border-bottom: 1px solid var(--line);
  }

  .mobile-game-shell.game-interface .game-topbar>.ghost {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 20px;
    border: 0;
    background: transparent;
    color: var(--text);
  }

  .mobile-game-shell .game-topbar>.ghost>span {
    display: none;
  }

  .mobile-game-shell .game-topbar>.ghost:after {
    content: none;
  }

  .mobile-game-shell.game-interface .game-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    justify-self: auto;
  }

  .mobile-game-shell .game-title>span,.mobile-game-shell .game-title small {
    display: none;
  }

  .mobile-game-shell .game-title>div {
    min-width: 0;
  }

  .mobile-game-shell.game-interface .game-title b {
    font-size: 12px;
    line-height: 1.15;
    max-width: none;
  }

  .mobile-game-shell.game-interface .score-pill {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 2px 5px;
    height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
    justify-content: center;
    gap: 2px;
  }

  .mobile-game-shell .score-pill>small {
    font-size: 7px;
  }

  .mobile-game-shell .score-pill>b {
    font-size: 16px;
  }

  .mobile-game-shell .game-help-toggle,.mobile-game-shell .game-mobile-pause {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel2);
    color: var(--game-accent);
  }

  .mobile-game-shell.game-interface .game-mission-head {
    flex: 0 0 22px;
    height: 22px;
    min-height: 22px;
    padding: 2px 10px;
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .mobile-game-shell .game-mission-head h2,.mobile-game-shell .game-mission-mode {
    display: none;
  }

  .mobile-game-shell .game-mission-label {
    font-size: 9px;
    line-height: 18px;
    letter-spacing: .8px;
    white-space: nowrap;
  }

  .mobile-game-shell.game-interface .game-hint {
    display: none;
    position: absolute;
    top: calc(70px + env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    z-index: 70;
    margin: 0;
    padding: 14px;
    max-height: calc(100% - 100px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 14px 45px #0004;
    font-size: 13px;
    line-height: 1.6;
    touch-action: pan-y;
  }

  .mobile-game-shell[data-help-open="true"] .game-hint {
    display: flex;
  }

  .mobile-game-shell .game-help-close {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel2);
    color: var(--text);
  }

  .mobile-game-shell.game-interface .game-stage {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
  }

  .mobile-game-shell:is(.game-ui-offer,.game-ui-rescue,.game-ui-runner,.game-ui-defense,.game-ui-rhythm,.game-ui-tower,.game-ui-archery,.game-ui-blaster,.game-ui-reflex,.game-ui-memory,.game-ui-myth,.game-ui-whereabouts) .game-stage {
    overflow: hidden;
  }

  .mobile-game-shell.game-interface :is(.runner-wrap,.defense-wrap,.rhythm-wrap,.tower-defense-wrap,.archery-wrap,.memory-stage,.myth-stage,.calendar-game,.escape-v3) {
    height: 100%;
    min-height: 0;
    max-height: none;
    max-width: none;
    padding: 6px;
  }

  .mobile-game-shell.game-interface :is(.runner-road,.reflex-stage,.blaster,.defense-field,.rhythm-board,.archery-field) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    margin: 0;
    border-radius: 12px;
    aspect-ratio: auto;
  }

  .mobile-game-shell .fitted-game-field {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
  }

  .mobile-game-shell .fitted-game-field>:is(.offer-maze-field,.rescue-map,.td-board) {
    width: var(--fit-field-width,100%);
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100%;
    margin: 0;
    grid-area: auto;
    aspect-ratio: var(--fit-field-ratio,1);
  }

  .mobile-game-shell .offer-field-slot>.offer-maze-field {
    aspect-ratio: var(--fit-field-ratio,13/11);
  }

  .mobile-game-shell .tower-field-slot>.td-board {
    aspect-ratio: var(--fit-field-ratio,10/7);
  }

  .mobile-game-shell.game-interface :is(.escape-hud,.runner-hud,.rhythm-hud,.defense-hud,.td-hud,.archery-hud,.memory-stats) {
    height: 30px;
    min-height: 0;
    margin: 0;
    gap: 4px;
    font-size: 11px;
  }

  .mobile-game-shell.game-interface :is(.escape-hud,.rhythm-hud,.defense-hud,.td-hud)>span,
  .mobile-game-shell.game-interface .archery-hud>div,
  .mobile-game-shell.game-interface .memory-stats>span {
    padding: 4px 6px;
    border-radius: 8px;
    min-width: 0;
    font-size: 11px;
    line-height: 18px;
  }

  .mobile-game-shell.game-interface :is(.escape-hud,.rhythm-hud,.defense-hud,.td-hud) b {
    font-size: 11px;
  }

  .mobile-game-shell :is(.offer-maze-operation,.offer-maze-legend,.rescue-operation-strip,.escape-bottom) {
    display: none;
  }

  .mobile-game-shell.game-interface .offer-maze {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: 30px minmax(0,1fr) 76px;
    gap: 4px;
    position: relative;
    overflow: hidden;
  }

  .mobile-game-shell .offer-maze>.escape-hud {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-game-shell .offer-field-slot {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-game-shell.game-interface .offer-maze-controls {
    grid-column: 1;
    grid-row: 3;
  }

  .mobile-game-shell.game-interface :is(.offer-maze-controls,.rescue-controls) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 76px;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 2px 8px;
  }

  .mobile-game-shell :is(.offer-maze-controls,.rescue-controls) .mobile-joystick-wrap {
    display: flex !important;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    margin: 0;
    gap: 0;
  }

  .mobile-game-shell :is(.offer-maze-controls,.rescue-controls) .mobile-joystick {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    margin: 0;
  }

  .mobile-game-shell :is(.offer-maze-controls,.rescue-controls) .joystick-knob {
    width: 30px;
    height: 30px;
  }

  .mobile-game-shell :is(.offer-maze-controls,.rescue-controls) .mobile-joystick-wrap>small {
    display: none;
  }

  .mobile-game-shell .offer-maze-actions {
    flex: 1;
    width: auto;
    max-width: 210px;
  }

  .mobile-game-shell .offer-maze-actions>div {
    display: none;
  }

  .mobile-game-shell .offer-maze-no {
    display: grid;
    align-content: center;
    height: 48px;
    min-height: 48px;
    padding: 5px 10px;
    border-radius: 12px;
  }

  .mobile-game-shell .offer-maze-no>b {
    font-size: 18px;
    line-height: 24px;
  }

  .mobile-game-shell .offer-maze-no>small {
    display: none;
  }

  .mobile-game-shell .offer-maze-feedback {
    display: none;
  }

  .mobile-game-shell .offer-maze-feedback[data-live-notice="true"] {
    display: block;
    position: absolute;
    top: 40px;
    left: 14px;
    right: 14px;
    z-index: 8;
    margin: 0;
    padding: 4px 8px;
    min-height: 0;
    height: 26px;
    line-height: 18px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    background: var(--panel);
  }

  .mobile-game-shell.game-interface .rescue-expanded {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: 30px 14px minmax(0,1fr) 76px;
    gap: 4px;
    overflow: hidden;
  }

  .mobile-game-shell .rescue-expanded>.escape-hud {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-game-shell .rescue-evacuation-progress {
    grid-column: 1;
    grid-row: 2;
    height: 14px;
    min-height: 0;
    margin: 0;
    gap: 6px;
    font-size: 9px;
  }

  .mobile-game-shell .rescue-evacuation-progress>b {
    font-size: 9px;
  }

  .mobile-game-shell .rescue-field-slot {
    grid-column: 1;
    grid-row: 3;
  }

  .mobile-game-shell .rescue-controls {
    grid-column: 1;
    grid-row: 4;
  }

  .mobile-game-shell .rescue-action-stack {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    flex: 1;
    max-width: none;
  }

  .mobile-game-shell :is(.rescue-beacon,.rescue-sprint) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 7px;
    position: relative;
  }

  .mobile-game-shell .rescue-beacon b,.mobile-game-shell .rescue-sprint b {
    font-size: 12px;
  }

  .mobile-game-shell .rescue-sprint {
    flex-direction: column;
  }

  .mobile-game-shell .rescue-sprint>span {
    font-size: 9px;
  }

  .mobile-game-shell .rescue-beacon>small,.mobile-game-shell .control-full {
    display: none;
  }

  .mobile-game-shell .control-compact {
    display: inline;
  }

  .mobile-game-shell .escape-notice {
    top: 5px;
    max-width: 95%;
    padding: 5px 8px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-game-shell .rescue-player {
    width: 32px;
    height: 32px;
  }

  .mobile-game-shell .rescue-player>span {
    font-size: 21px;
  }

  .mobile-game-shell .rescue-athlete>span {
    font-size: 24px;
  }

  .mobile-game-shell .rescue-hazard>span {
    font-size: 23px;
  }

  .mobile-game-shell .rescue-beacon-ring {
    width: 72px;
    height: 72px;
  }

  .mobile-game-shell :is(.offer-maze-field,.rescue-map) {
    touch-action: auto;
  }

  .mobile-game-shell .escape-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12px;
    overflow: auto;
    touch-action: pan-y;
  }

  .mobile-game-shell .escape-result {
    flex-shrink: 0;
    margin: auto 0;
    width: 100%;
    max-width: 480px;
  }

  .mobile-game-shell .escape-result>span {
    display: none;
  }

  .mobile-game-shell .escape-result>small {
    font-size: 9px;
  }

  .mobile-game-shell .escape-result>h3 {
    font-size: 21px;
    line-height: 1.2;
    margin: 8px 0;
  }

  .mobile-game-shell .escape-result>p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 12px;
  }

  .mobile-game-shell .escape-result>.primary {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 13px;
  }

  .mobile-game-shell.game-interface .runner-wrap {
    display: grid;
    grid-template-rows: 30px minmax(0,1fr) 48px;
    gap: 6px;
  }

  .mobile-game-shell .runner-hud {
    padding: 5px 9px;
  }

  .mobile-game-shell .runner-controls {
    display: flex;
    gap: 8px;
    margin: 0;
  }

  .mobile-game-shell .runner-controls>button {
    min-height: 44px;
    height: 44px;
    padding: 7px 12px;
  }

  .mobile-game-shell .runner-controls>.primary {
    flex: 1;
  }

  .mobile-game-shell .runner-swipe-hint {
    display: none;
  }

  .mobile-game-shell .runner-player {
    font-size: 34px;
  }

  .mobile-game-shell .runner-item {
    font-size: 29px;
  }

  .mobile-game-shell .runner-wrap>.result-card {
    position: absolute;
    inset: 20% 8% auto;
    z-index: 15;
  }

  .mobile-game-shell.game-interface .rhythm-wrap {
    display: grid;
    grid-template-rows: 32px minmax(0,1fr) 52px;
    gap: 5px;
    position: relative;
  }

  .mobile-game-shell .rhythm-hud {
    align-items: center;
  }

  .mobile-game-shell .rhythm-music-toggle {
    height: 30px;
    min-height: 30px;
    font-size: 10px;
    padding: 4px 9px;
  }

  .mobile-game-shell .rhythm-buttons {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 6px;
    margin: 0;
  }

  .mobile-game-shell .rhythm-buttons>button {
    min-height: 48px;
    height: 48px;
    padding: 7px;
  }

  .mobile-game-shell .rhythm-key {
    display: none !important;
  }

  .mobile-game-shell .rhythm-touch-icon {
    display: inline !important;
    font-size: 24px;
  }

  .mobile-game-shell .rhythm-start {
    width: 88%;
    max-height: 80%;
  }

  .mobile-game-shell.game-interface .defense-v2 {
    display: grid;
    grid-template-rows: 30px 14px minmax(0,1fr) 54px 44px;
    gap: 5px;
  }

  .mobile-game-shell .defense-energy {
    height: 14px;
    min-height: 0;
    margin: 0;
  }

  .mobile-game-shell .defense-energy>small {
    font-size: 8px;
    line-height: 12px;
  }

  .mobile-game-shell .defense-controls {
    height: 54px;
    min-height: 0;
    gap: 5px;
    margin: 0;
  }

  .mobile-game-shell .defense-lane-control {
    height: 54px;
    min-height: 44px;
    padding: 5px;
    gap: 2px;
  }

  .mobile-game-shell .defense-lane-control>span {
    font-size: 18px;
  }

  .mobile-game-shell .defense-lane-control>b {
    font-size: 10px;
  }

  .mobile-game-shell .defense-lane-control>small {
    font-size: 8px;
  }

  .mobile-game-shell .defense-support {
    margin: 0;
    min-height: 0;
  }

  .mobile-game-shell .defense-support>p {
    display: none;
  }

  .mobile-game-shell .defense-pulse {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 7px 12px;
    font-size: 12px;
  }

  .mobile-game-shell .defense-base {
    width: 66px;
    padding: 6px;
  }

  .mobile-game-shell .defense-base b {
    font-size: 8px;
  }

  .mobile-game-shell .lane-threat {
    font-size: 25px;
  }

  .mobile-game-shell .lane-threat small {
    font-size: 8px;
  }

  .mobile-game-shell.game-interface .archery-wrap {
    display: grid;
    grid-template-rows: 36px minmax(0,1fr) 24px;
    gap: 5px;
  }

  .mobile-game-shell .archery-hud {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    height: 36px;
  }

  .mobile-game-shell .archery-hud>div {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 2px;
  }

  .mobile-game-shell .archery-hud small {
    font-size: 7px;
    line-height: 10px;
  }

  .mobile-game-shell .archery-hud b {
    font-size: 12px;
    line-height: 16px;
  }

  .mobile-game-shell .archery-legend {
    height: 24px;
    min-height: 0;
    padding: 3px;
    margin: 0;
    gap: 3px;
    justify-content: space-around;
    flex-wrap: nowrap;
  }

  .mobile-game-shell .archery-legend span {
    font-size: 8px;
    padding: 2px;
    gap: 3px;
    border: 0;
    background: transparent;
  }

  .mobile-game-shell .legend-dot {
    width: 6px;
    height: 6px;
  }

  .mobile-game-shell .archery-power {
    left: 7px;
    right: 7px;
    bottom: 6px;
    padding: 6px;
    gap: 4px;
  }

  .mobile-game-shell .archery-power small {
    font-size: 8px;
    letter-spacing: 0;
  }

  .mobile-game-shell .archery-target {
    width: clamp(76px,22vw,102px);
  }

  .mobile-game-shell .archery-finish {
    max-height: 100%;
    overflow: auto;
  }

  .mobile-game-shell .blaster,.mobile-game-shell .reflex-stage {
    position: relative;
  }

  .mobile-game-shell .target {
    width: 70px;
    height: 70px;
    min-height: 44px;
  }

  .mobile-game-shell .target>span {
    font-size: 29px;
  }

  .mobile-game-shell .target>small {
    font-size: 10px;
    max-width: 110px;
    line-height: 1.2;
  }

  .mobile-game-shell .reflex-orb {
    width: 62px;
    height: 62px;
    min-height: 44px;
    font-size: 30px;
  }

  .mobile-game-shell .reflex-hud {
    left: 7px;
    right: 7px;
    top: 7px;
    margin: 0;
  }

  .mobile-game-shell .reflex-hud>b {
    padding: 6px 9px;
    font-size: 12px;
  }

  .mobile-game-shell.game-interface .blaster .timer {
    top: 7px;
    left: 7px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .mobile-game-shell.game-interface .center-panel {
    padding: 16px;
    width: min(440px,92%);
    max-height: calc(100% - 16px);
    overflow: auto;
    touch-action: pan-y;
  }

  .mobile-game-shell .center-panel h2 {
    font-size: 22px;
    margin: 8px 0;
  }

  .mobile-game-shell .center-panel p {
    font-size: 13px;
    line-height: 1.5;
  }

  .mobile-game-shell .center-panel>.primary {
    min-height: 44px;
    font-size: 13px;
    padding: 10px 16px;
  }

  .mobile-game-shell.game-interface .tower-defense-wrap {
    display: grid;
    grid-template-rows: 30px 54px minmax(0,1fr) 52px;
    gap: 5px;
    overflow: hidden;
  }

  .mobile-game-shell .td-hud {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
  }

  .mobile-game-shell .td-hud>span {
    overflow: hidden;
    white-space: nowrap;
    font-size: 10px;
  }

  .mobile-game-shell .td-loadout {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    height: 54px;
    min-height: 0;
    gap: 5px;
    margin: 0;
  }

  .mobile-game-shell .td-loadout>button {
    display: flex;
    gap: 4px;
    padding: 5px;
    min-height: 48px;
    align-items: center;
    border-radius: 9px;
  }

  .mobile-game-shell .td-loadout>button>span {
    font-size: 20px;
  }

  .mobile-game-shell .td-loadout b {
    font-size: 10px;
    line-height: 1.2;
  }

  .mobile-game-shell .td-loadout small {
    font-size: 8px;
    line-height: 1.2;
  }

  .mobile-game-shell .td-route-help {
    display: none;
  }

  .mobile-game-shell .td-mobile-zoom {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--panel2);
    color: var(--game-accent);
    border-radius: 9px;
    font-size: 11px;
  }

  .mobile-game-shell .fitted-game-field.is-zoomed {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  .mobile-game-shell .fitted-game-field.is-zoomed>.td-board {
    max-width: none;
  }

  .mobile-game-shell .td-cell {
    touch-action: pan-x pan-y;
  }

  .mobile-game-shell .tower-field-slot {
    grid-row: 3;
  }

  .mobile-game-shell .td-status {
    display: flex;
    flex-direction: row;
    height: 52px;
    min-height: 0;
    padding: 3px 6px;
    gap: 6px;
    margin: 0;
    overflow: auto;
    flex-wrap: nowrap;
    align-items: center;
  }

  .mobile-game-shell .td-status>p {
    font-size: 10px;
    line-height: 1.2;
    margin: 0;
  }

  .mobile-game-shell .td-status .primary {
    min-height: 44px;
    font-size: 11px;
    padding: 6px 9px;
    white-space: nowrap;
  }

  .mobile-game-shell .td-result {
    position: absolute;
    inset: 15% 7% auto;
    z-index: 40;
    max-height: 70%;
    overflow: auto;
  }

  .mobile-game-shell.game-interface .quiz-stage {
    padding: 8px;
    min-height: 0;
  }

  .mobile-game-shell .quiz-people {
    height: 76px;
    gap: 60px;
    margin-bottom: 7px;
  }

  .mobile-game-shell :is(.host,.contestant) {
    font-size: 38px;
  }

  .mobile-game-shell .quiz-avatar {
    width: 54px;
    height: 54px;
  }

  .mobile-game-shell .quiz-console {
    padding: 14px;
  }

  .mobile-game-shell .quiz-console h2 {
    font-size: 17px;
    line-height: 1.45;
  }

  .mobile-game-shell .answers {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .mobile-game-shell .answers>button {
    min-height: 48px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .mobile-game-shell .answers>button>b {
    flex-shrink: 0;
  }

  .mobile-game-shell .answer-info {
    padding: 12px;
  }

  .mobile-game-shell .answer-info p {
    font-size: 13px;
    line-height: 1.5;
  }

  .mobile-game-shell .answer-info>.primary {
    display: block;
    float: none;
    min-height: 44px;
    width: 100%;
  }

  .mobile-game-shell.game-interface .scanner-stage {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr);
    padding: 10px;
    gap: 10px;
    align-items: center;
    min-height: 0;
  }

  .mobile-game-shell .scanner-device {
    transform: none;
    width: 72px;
    height: 72px;
    margin: 0;
    border-radius: 18px;
  }

  .mobile-game-shell .scanner-icon {
    font-size: 35px;
  }

  .mobile-game-shell .scanner-device>span {
    display: none;
  }

  .mobile-game-shell .risk-meter {
    padding: 9px;
    margin: 0;
    min-width: 0;
    font-size: 12px;
  }

  .mobile-game-shell .case-card,.mobile-game-shell .scanner-stage>.final-screen {
    grid-column: 1/-1;
    width: 100%;
    padding: 14px;
  }

  .mobile-game-shell .case-card h2 {
    font-size: 19px;
  }

  .mobile-game-shell .case-card p {
    font-size: 14px;
    line-height: 1.5;
  }

  .mobile-game-shell .choice-stack>button {
    min-height: 48px;
    font-size: 14px;
    line-height: 1.4;
    padding: 10px;
  }

  .mobile-game-shell.game-interface .sequence-stage {
    padding: 10px;
    min-height: 0;
  }

  .mobile-game-shell .mission-line {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding: 8px;
    gap: 7px;
  }

  .mobile-game-shell .mission-slot {
    min-height: 76px;
    padding: 10px 7px;
    font-size: 12px;
  }

  .mobile-game-shell .mission-slot b {
    font-size: 12px;
  }

  .mobile-game-shell .mission-message {
    min-height: 30px;
    font-size: 12px;
  }

  .mobile-game-shell .card-pool {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin: 8px 0;
  }

  .mobile-game-shell .card-pool>button {
    min-height: 56px;
    font-size: 12px;
    padding: 9px;
  }

  .mobile-game-shell.game-interface .calendar-expanded {
    display: grid;
    grid-template-rows: 30px minmax(0,1fr) 20px 160px;
    gap: 6px;
    overflow: hidden;
  }

  .mobile-game-shell .day-head {
    min-height: 0;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 0;
    align-items: center;
  }

  .mobile-game-shell .day-head h2,.mobile-game-shell .day-head p,.mobile-game-shell .calendar-streak {
    display: none;
  }

  .mobile-game-shell .day-head small {
    font-size: 10px;
    letter-spacing: .7px;
  }

  .mobile-game-shell .timeline {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    gap: 6px;
  }

  .mobile-game-shell .time-row {
    min-height: 58px;
    grid-template-columns: 48px minmax(0,1fr);
    padding: 9px;
    gap: 4px;
    font-size: 12px;
  }

  .mobile-game-shell .calendar-feedback {
    font-size: 9px;
    padding: 3px 5px;
  }

  .mobile-game-shell .calendar-pool-head {
    height: 20px;
    min-height: 0;
    margin: 0;
    font-size: 11px;
  }

  .mobile-game-shell .activity-cards.expanded {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding-right: 3px;
  }

  .mobile-game-shell .activity-cards>button {
    min-height: 64px;
    padding: 8px;
    gap: 4px;
  }

  .mobile-game-shell .activity-cards>button>span {
    font-size: 22px;
  }

  .mobile-game-shell .activity-cards>button>b {
    font-size: 12px;
  }

  .mobile-game-shell .activity-cards>button>small {
    font-size: 10px;
    line-height: 1.3;
  }

  .mobile-game-shell.game-interface .memory-rebuild {
    display: grid;
    grid-template-rows: 34px minmax(0,1fr);
    gap: 6px;
    position: relative;
  }

  .mobile-game-shell .memory-hero {
    height: 34px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .mobile-game-shell .memory-hero>div:first-child {
    display: none;
  }

  .mobile-game-shell .memory-stats {
    display: flex;
    width: 100%;
    gap: 5px;
  }

  .mobile-game-shell .memory-stats>span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
  }

  .mobile-game-shell .memory-stats b {
    font-size: 15px;
  }

  .mobile-game-shell .memory-grid-large {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: repeat(4,minmax(0,1fr));
    gap: 6px;
    min-height: 0;
  }

  .mobile-game-shell .memory-card-v2 {
    min-height: 0;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
  }

  .mobile-game-shell .card-inner {
    min-height: 0;
  }

  .mobile-game-shell .card-back,.mobile-game-shell .card-front {
    border-radius: 11px;
    padding: 6px;
  }

  .mobile-game-shell .value-visual {
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 13px;
  }

  .mobile-game-shell .value-visual>span {
    font-size: 31px;
  }

  .mobile-game-shell .value-visual>i {
    font-size: 15px;
  }

  .mobile-game-shell .memory-card-v2 .card-front>b {
    font-size: 12px;
    margin-top: 3px;
  }

  .mobile-game-shell .memory-card-v2 .card-front>small {
    font-size: 9px;
    margin-top: 3px;
  }

  .mobile-game-shell .card-back>span {
    width: 32px;
    height: 32px;
    font-size: 21px;
  }

  .mobile-game-shell .card-back>b {
    font-size: 10px;
  }

  .mobile-game-shell .card-back>small {
    display: none;
  }

  .mobile-game-shell .memory-stage>.celebrate-banner,.mobile-game-shell .calendar-game>.celebrate-banner {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 10;
    padding: 12px;
    font-size: 12px;
  }

  .mobile-game-shell.game-interface .myth-stage {
    display: grid;
    grid-template-rows: 28px minmax(0,1fr) 52px;
    gap: 6px;
  }

  .mobile-game-shell .streak {
    margin: 0;
    padding: 4px;
    font-size: 12px;
  }

  .mobile-game-shell .myth-card {
    justify-content: flex-start;
    min-height: 0;
    padding: 24px 16px 16px;
    overflow: auto;
  }

  .mobile-game-shell .myth-card>small {
    position: static;
    font-size: 10px;
  }

  .mobile-game-shell .brain {
    font-size: 32px;
    padding: 9px;
    border-radius: 16px;
    margin-top: 10px;
  }

  .mobile-game-shell .myth-card h2 {
    font-size: 19px;
    line-height: 1.4;
    margin: 14px 0;
  }

  .mobile-game-shell .myth-actions {
    margin: 0;
    gap: 8px;
  }

  .mobile-game-shell .myth-actions>button {
    min-height: 48px;
    padding: 10px;
    font-size: 13px;
  }

  .mobile-game-shell .myth-feedback {
    font-size: 14px;
    line-height: 1.5;
  }

  .mobile-game-shell .myth-feedback small {
    font-size: 12px;
    line-height: 1.5;
  }

  .mobile-game-shell.game-interface .penalty-stage {
    min-height: 0;
    padding: 10px 10px 80px;
  }

  .mobile-game-shell .stadium-lights {
    display: none;
  }

  .mobile-game-shell .penalty-question {
    padding: 12px;
    margin: 0 0 12px;
  }

  .mobile-game-shell .penalty-question h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 8px 0;
  }

  .mobile-game-shell .penalty-question>p {
    font-size: 12px;
    margin: 6px 0 0;
  }

  .mobile-game-shell .goal-interactive {
    width: calc(100% - 10px);
    height: clamp(260px,43dvh,360px);
    margin: 15px auto 0;
  }

  .mobile-game-shell .goal-answer {
    min-height: 72px;
    width: 44%;
    max-width: 46%;
    padding: 6px;
    font-size: 12px;
    line-height: 1.3;
    overflow: auto;
  }

  .mobile-game-shell .goal-answer>b {
    flex-shrink: 0;
    font-size: 11px;
    padding: 4px;
  }

  .mobile-game-shell .goal-answer>span {
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.3;
  }

  .mobile-game-shell .goal-answer-tl,.mobile-game-shell .goal-answer-tr {
    top: 5%;
  }

  .mobile-game-shell .goal-answer-bl,.mobile-game-shell .goal-answer-br {
    bottom: 5%;
  }

  .mobile-game-shell .keeper-v2 {
    font-size: 44px;
  }

  .mobile-game-shell .ball-v2 {
    font-size: 30px;
  }

  .mobile-game-shell .penalty-spot {
    display: none;
  }

  .mobile-game-shell .final-screen {
    padding: 18px;
    min-height: 0;
  }

  .mobile-game-shell .final-screen h1,.mobile-game-shell .final-screen h2 {
    font-size: 25px;
  }

  html.dmd-game-active .chat-fab {
    width: 44px;
    min-width: 44px;
    height: 44px;
    top: calc(env(safe-area-inset-top) + 2px);
    right: calc(env(safe-area-inset-right) + 3px);
    border-radius: 12px;
  }

  html.dmd-game-active .chat-fab span {
    font-size: 21px;
  }

  html.dmd-game-active .toast {
    top: calc(env(safe-area-inset-top) + 76px);
    bottom: auto;
    right: 8px;
    max-width: calc(100% - 16px);
    padding: 9px 12px;
    font-size: 11px;
    pointer-events: none;
  }
}

@media (max-height:520px) and (orientation:landscape) and (pointer:coarse), (max-width:700px) and (orientation:landscape) {
  .mobile-game-shell.game-interface .game-topbar {
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }

  .mobile-game-shell.game-interface .game-mission-head {
    height: 20px;
    min-height: 20px;
    flex-basis: 20px;
    padding: 0 10px;
  }

  .mobile-game-shell.game-interface .offer-maze {
    grid-template-columns: minmax(0,1fr) 116px;
    grid-template-rows: 30px minmax(0,1fr);
    gap: 4px 8px;
  }

  .mobile-game-shell .offer-maze>.escape-hud {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-game-shell .offer-field-slot {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-game-shell.game-interface .offer-maze-controls {
    grid-column: 2;
    grid-row: 1/3;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 4px;
    gap: 12px;
  }

  .mobile-game-shell .offer-maze-actions {
    width: 100%;
    flex: none;
  }

  .mobile-game-shell .offer-maze-feedback[data-live-notice="true"] {
    right: 138px;
  }

  .mobile-game-shell.game-interface .rescue-expanded {
    grid-template-columns: minmax(0,1fr) 124px;
    grid-template-rows: 30px 14px minmax(0,1fr);
    gap: 4px 8px;
  }

  .mobile-game-shell .rescue-field-slot {
    grid-column: 1;
    grid-row: 3;
  }

  .mobile-game-shell.game-interface .rescue-controls {
    grid-column: 2;
    grid-row: 1/4;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 10px;
    padding: 4px;
  }

  .mobile-game-shell .rescue-action-stack {
    grid-template-columns: 1fr;
    flex: none;
    width: 100%;
    gap: 6px;
  }

  .mobile-game-shell.game-interface .tower-defense-wrap {
    grid-template-columns: minmax(0,1fr) 180px;
    grid-template-rows: 30px minmax(0,1fr) 52px;
    gap: 5px 8px;
  }

  .mobile-game-shell .td-hud {
    grid-column: 1/-1;
    grid-row: 1;
  }

  .mobile-game-shell .tower-field-slot {
    grid-column: 1;
    grid-row: 2/4;
  }

  .mobile-game-shell .td-loadout {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .mobile-game-shell .td-loadout>button {
    width: 100%;
    min-height: 44px;
  }

  .mobile-game-shell .td-status {
    grid-column: 2;
    grid-row: 3;
    height: 52px;
  }

  .mobile-game-shell .td-status>p {
    display: none;
  }

  .mobile-game-shell.game-interface .defense-v2 {
    grid-template-columns: minmax(0,1fr) 136px;
    grid-template-rows: 30px 14px minmax(0,1fr) 44px;
    gap: 4px 7px;
  }

  .mobile-game-shell .defense-hud {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-game-shell .defense-energy {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-game-shell .defense-field {
    grid-column: 1;
    grid-row: 3/5;
  }

  .mobile-game-shell .defense-controls {
    grid-column: 2;
    grid-row: 1/4;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 4px;
  }

  .mobile-game-shell .defense-lane-control {
    flex: 1;
    width: 100%;
    min-height: 44px;
  }

  .mobile-game-shell .defense-support {
    grid-column: 2;
    grid-row: 4;
  }

  .mobile-game-shell .archery-legend {
    display: none;
  }

  .mobile-game-shell.game-interface .archery-wrap {
    grid-template-rows: 30px minmax(0,1fr);
  }

  .mobile-game-shell .archery-target {
    width: 82px;
  }

  .mobile-game-shell .archery-player {
    transform: scale(.62);
  }

  .mobile-game-shell .archery-power small {
    display: none;
  }

  .mobile-game-shell .quiz-people {
    display: none;
  }

  .mobile-game-shell .answers {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .mobile-game-shell .quiz-console {
    max-width: none;
  }

  .mobile-game-shell.game-interface .calendar-expanded {
    grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
    grid-template-rows: 20px minmax(0,1fr);
    gap: 6px 9px;
  }

  .mobile-game-shell .day-head {
    display: none;
  }

  .mobile-game-shell .timeline {
    grid-column: 1;
    grid-row: 1/3;
  }

  .mobile-game-shell .calendar-pool-head {
    grid-column: 2;
    grid-row: 1;
  }

  .mobile-game-shell .activity-cards.expanded {
    grid-column: 2;
    grid-row: 2;
  }

  .mobile-game-shell .memory-grid-large {
    grid-template-columns: repeat(6,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
  }

  .mobile-game-shell .value-visual {
    width: 38px;
    height: 38px;
  }

  .mobile-game-shell .value-visual>span {
    font-size: 27px;
  }

  .mobile-game-shell .brain {
    display: none;
  }

  .mobile-game-shell .myth-card {
    padding: 12px 18px;
  }

  .mobile-game-shell.game-interface .penalty-stage {
    display: grid;
    grid-template-columns: minmax(0,.75fr) minmax(0,1fr);
    gap: 16px;
    min-height: 100%;
    padding: 8px 12px 65px;
  }

  .mobile-game-shell .penalty-question {
    margin: 0;
    max-height: calc(var(--game-viewport-height,100dvh) - 90px);
    overflow: auto;
  }

  .mobile-game-shell .goal-interactive {
    height: calc(var(--game-viewport-height,100dvh) - 158px);
    min-height: 170px;
    margin: 6px auto 0;
  }

  .mobile-game-shell .goal-answer {
    font-size: 11px;
    min-height: 60px;
  }

  .mobile-game-shell .goal-answer>span {
    font-size: 11px;
  }
}

@media (max-width:700px) and (max-height:700px) and (orientation:portrait) {
  .mobile-game-shell .memory-card-v2 .card-front>small {
    display: none;
  }

  .mobile-game-shell .value-visual {
    width: 40px;
    height: 40px;
  }

  .mobile-game-shell .memory-card-v2 .card-front>b {
    font-size: 13px;
    line-height: 16px;
  }
}

/* Game 17: platform, timing and balance. */
.lift-game {
  --lift-good: var(--ui-green);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
  grid-template-rows: 54px minmax(390px, 1fr);
  gap: 14px;
  padding: 18px;
  min-height: 520px;
  background: var(--panel);
  color: var(--text);
}
.lift-hud {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 14px;
}
.lift-hud > span {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lift-hud small, .lift-kicker, .lift-cue > small, .lift-result-summary small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--muted);
}
.lift-hud b {
  font-size: 19px;
  white-space: nowrap;
}
.lift-attempt-dots {
  display: flex;
  gap: 6px;
}
.lift-attempt-dots i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.lift-attempt-dots i.good {
  color: var(--ui-green);
  border-color: currentColor;
}
.lift-attempt-dots i.bad {
  color: var(--ui-pink);
  border-color: currentColor;
}
.lift-attempt-dots i.current {
  color: var(--game-accent);
  border-color: currentColor;
}
.lift-platform {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding-bottom: 38px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel2);
}
.lift-scene {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.lift-athlete, .lift-bar {
  transition: transform .06s linear;
}
.lift-stage-track {
  position: absolute;
  inset: auto 8px 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.lift-stage-track > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.lift-stage-track b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.lift-stage-track .current {
  color: var(--game-accent);
  font-weight: 800;
}
.lift-stage-track .done {
  color: var(--ui-green);
}
.lift-console {
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel2);
}
.lift-console h2 {
  margin: 8px 0 12px;
  font-size: 25px;
  line-height: 1.15;
  color: var(--text);
}
.lift-console p {
  margin: 8px 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.lift-weight-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 20px 0 12px;
}
.lift-weight-picker button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  font-size: 26px;
}
.lift-weight-picker strong {
  font-size: 42px;
  line-height: 1;
  color: var(--text);
}
.lift-weight-picker strong small {
  font-size: 18px;
  color: var(--muted);
}
.lift-weight-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 10px;
  color: var(--muted);
}
.lift-weight-scale i {
  flex: 1;
  height: 5px;
  border-radius: 8px;
  background: linear-gradient(to right, var(--game-accent) var(--weight), var(--line) var(--weight));
}
.lift-game .lift-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 11px 12px;
  font-size: 16px;
  font-weight: 900;
  border-radius: 14px;
  touch-action: manipulation;
}
.lift-primary > small {
  font-size: 11px;
  font-weight: 600;
}
.lift-value-note {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.lift-cue {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
}
.lift-cue > small {
  grid-column: 1 / -1;
}
.lift-cue > b {
  font-size: 20px;
  line-height: 1.2;
}
.lift-cue > span {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--game-accent);
}
.lift-meter {
  position: relative;
  height: 40px;
  margin: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.lift-safe-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--ui-green);
  opacity: .28;
  border-left: 2px solid var(--ui-green);
  border-right: 2px solid var(--ui-green);
}
.lift-meter-centre {
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  border-left: 2px solid var(--ui-green);
}
.lift-meter-cursor {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 7px;
  border: 1px solid var(--panel);
  border-radius: 6px;
  background: var(--text);
  transform: translateX(-50%);
  box-shadow: 0 3px 8px #0003;
}
.lift-meter-copy {
  display: flex;
  justify-content: space-between;
  margin: 12px 10px 20px;
  font-size: 10px;
  color: var(--muted);
}
.lift-meter-copy b {
  color: var(--ui-green);
  font-size: 10px;
}
.lift-hold-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--line);
}
.lift-hold-progress i {
  display: block;
  height: 100%;
  background: var(--ui-green);
}
.lift-stability {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 12px;
  font-size: 11px;
  color: var(--muted);
}
.lift-stability > span:last-child {
  margin-left: auto;
}
.lift-balance-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lift-balance-buttons > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  font-size: 28px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lift-balance-buttons small {
  font-size: 11px;
  font-weight: 800;
}
.lift-balance-buttons > button:active {
  border-color: var(--game-accent);
  color: var(--game-accent);
}
.lift-inline-pause {
  width: 100%;
  margin-top: 14px;
  min-height: 44px;
}
.lift-result-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.lift-result-summary > span {
  display: grid;
  gap: 5px;
}
.lift-result-summary b {
  font-size: 26px;
}
.lift-records {
  list-style: none;
  margin: 10px 0 18px;
  padding: 0;
  color: var(--text);
}
.lift-records li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.lift-results > .ghost {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
}
.lift-pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
  background: #051120b8;
  backdrop-filter: blur(6px);
}
.lift-pause-overlay > div {
  display: grid;
  gap: 12px;
  width: min(360px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  text-align: center;
}
.lift-pause-overlay h2, .lift-pause-overlay p {
  margin: 0;
}
.lift-pause-overlay p {
  color: var(--muted);
  font-size: 13px;
}
.lift-pause-overlay button {
  min-height: 48px;
}
.profile-sport-help {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 4px 0 12px;
}
.profile-modal .avatar-preset span {
  font-size: 10px;
}
.profile-modal .avatar-editor {
  color: var(--text);
}
@media (max-width: 900px) and (min-width: 701px) and (min-height: 521px) {
  .lift-game {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 10px;
    padding: 10px;
  }
  .lift-console {
    padding: 16px;
  }
}
@media (max-width: 700px), (max-height: 520px) and (pointer: coarse) {
  .mobile-game-shell.game-interface .game-stage.lift-stage {
    overflow: hidden;
    padding: 0;
    border-radius: 0;
  }
  .mobile-game-shell .lift-game {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 36px minmax(100px, 1fr) auto;
    gap: 6px;
    padding: 6px;
  }
  .mobile-game-shell .lift-hud {
    grid-column: 1;
    grid-row: 1;
    padding: 3px 8px;
    gap: 6px;
    border-radius: 10px;
  }
  .mobile-game-shell .lift-hud > span {
    display: grid;
    gap: 1px;
  }
  .mobile-game-shell .lift-hud small {
    font-size: 8px;
  }
  .mobile-game-shell .lift-hud b {
    font-size: 13px;
  }
  .mobile-game-shell .lift-attempt-dots {
    gap: 4px;
  }
  .mobile-game-shell .lift-attempt-dots i {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  .mobile-game-shell .lift-platform {
    grid-row: 2;
    padding-bottom: 28px;
    border-radius: 12px;
  }
  .mobile-game-shell .lift-stage-track {
    bottom: 5px;
    gap: 9px;
  }
  .mobile-game-shell .lift-stage-track > span {
    font-size: 10px;
  }
  .mobile-game-shell .lift-stage-track b {
    width: 18px;
    height: 18px;
  }
  .mobile-game-shell .lift-console {
    grid-row: 3;
    max-height: 260px;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px;
    border-radius: 12px;
    touch-action: pan-y;
  }
  .mobile-game-shell .lift-console h2 {
    font-size: 20px;
    margin: 5px 0 7px;
  }
  .mobile-game-shell .lift-console p {
    font-size: 12px;
    line-height: 1.4;
    margin: 6px 0 9px;
  }
  .mobile-game-shell .lift-kicker {
    font-size: 8px;
  }
  .mobile-game-shell .lift-weight-picker {
    margin: 10px 0 8px;
  }
  .mobile-game-shell .lift-weight-picker strong {
    font-size: 32px;
  }
  .mobile-game-shell .lift-weight-picker button {
    height: 44px;
    width: 44px;
    flex-basis: 44px;
  }
  .mobile-game-shell .lift-weight-scale {
    margin-bottom: 10px;
  }
  .mobile-game-shell .lift-value-note {
    font-size: 10px;
    margin-top: 7px;
  }
  .mobile-game-shell .lift-cue {
    margin-bottom: 14px;
    gap: 3px;
  }
  .mobile-game-shell .lift-cue > b {
    font-size: 17px;
  }
  .mobile-game-shell .lift-cue > small {
    font-size: 9px;
  }
  .mobile-game-shell .lift-cue > span {
    font-size: 13px;
  }
  .mobile-game-shell .lift-meter {
    height: 28px;
    margin: 0 7px;
  }
  .mobile-game-shell .lift-meter-copy {
    margin: 10px 7px 12px;
    font-size: 9px;
  }
  .mobile-game-shell .lift-meter-copy b {
    font-size: 9px;
  }
  .mobile-game-shell .lift-primary {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 16px;
  }
  .mobile-game-shell .lift-inline-pause {
    display: none;
  }
  .mobile-game-shell .lift-balance-buttons > button {
    min-height: 52px;
    touch-action: none;
  }
  .mobile-game-shell .lift-stability {
    margin: 6px 0 8px;
    font-size: 10px;
  }
  .mobile-game-shell .lift-records {
    margin: 8px 0 12px;
  }
  .mobile-game-shell .lift-records li {
    padding: 4px 0;
  }
  .mobile-game-shell .lift-result-summary {
    margin: 9px 0;
  }
  .mobile-game-shell .lift-result-summary small {
    font-size: 8px;
  }
  .mobile-game-shell .lift-result-summary b {
    font-size: 22px;
  }
  .profile-modal .avatar-preset {
    min-height: 72px;
  }
  .profile-modal .avatar-editor {
    width: 100%;
  }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse), (max-width: 700px) and (orientation: landscape) {
  .mobile-game-shell .lift-game {
    grid-template-columns: minmax(0, 1fr) 265px;
    grid-template-rows: 34px minmax(0, 1fr);
    gap: 5px 8px;
  }
  .mobile-game-shell .lift-hud {
    grid-column: 1 / -1;
  }
  .mobile-game-shell .lift-platform {
    grid-column: 1;
    grid-row: 2;
  }
  .mobile-game-shell .lift-console {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    max-height: none;
    align-items: start;
    padding: 10px;
  }
  .mobile-game-shell .lift-console h2 {
    font-size: 18px;
  }
  .mobile-game-shell .lift-setup > p {
    display: none;
  }
  .mobile-game-shell .lift-weight-picker {
    margin: 8px 0;
  }
  .mobile-game-shell .lift-value-note {
    display: none;
  }
}

.phase-drive .lift-bar {
  animation: lift-pull-rise .24s ease-out;
}
.phase-balance .lift-bar {
  animation: lift-pull-rise .3s ease-out;
}
@keyframes lift-pull-rise {
  from { transform: translateY(80px); }
}
@media (prefers-reduced-motion: reduce) {
  .lift-athlete, .lift-bar {
    animation: none;
    transition: none;
  }
}

.profile-modal label {
  color: var(--text);
  font-size: 12px;
}
.profile-modal input, .profile-modal select {
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}
.profile-modal .modal-x {
  width: 44px;
  height: 44px;
}
@media (max-width: 700px), (max-height: 520px) and (pointer: coarse) {
  .mobile-game-shell .lift-live-console .lift-cue > small {
    display: none;
  }
  .mobile-game-shell .lift-live-console .lift-cue {
    margin-bottom: 10px;
  }
  .mobile-game-shell .lift-live-console .lift-meter-copy {
    margin: 6px 7px 8px;
  }
  .mobile-game-shell .phase-balance .lift-meter-copy {
    display: none;
  }
  .mobile-game-shell .phase-balance .lift-meter {
    margin-bottom: 10px;
  }
  .mobile-game-shell .lift-game.phase-pull .lift-console,
  .mobile-game-shell .lift-game.phase-drive .lift-console,
  .mobile-game-shell .lift-game.phase-balance .lift-console {
    max-height: 200px;
  }
}

/* Larger, complete game guides above every playing field. */
.game-shell.game-interface .game-guide-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1180px;
  margin: 12px auto 0;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
  color: var(--text);
}
.game-guide-bar > div {
  display: grid;
  gap: 4px;
}
.game-guide-bar small {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 800;
}
.game-guide-bar b {
  font-size: 18px;
}
.game-guide-toggle {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.game-shell.game-interface .game-hint.game-guide-content {
  display: none;
  position: relative;
  max-width: 1180px;
  margin: 10px auto 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}
.game-shell.game-interface[data-help-open="true"] .game-hint.game-guide-content {
  display: block;
}
.game-guide-content h3 {
  margin: 0 60px 12px 0;
  color: var(--text);
  font-size: 23px;
  line-height: 1.25;
}
.game-guide-content h4 {
  margin: 18px 0 9px;
  color: var(--game-accent);
  font-size: 16px;
  line-height: 1.4;
}
.game-shell.game-interface .game-guide-content p {
  margin: 7px 0 12px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}
.game-guide-content .game-guide-goal {
  max-width: 950px;
  font-weight: 700;
}
.game-guide-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
}
.game-guide-content ol {
  margin: 0;
  padding-left: 25px;
}
.game-guide-content li {
  padding-left: 5px;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}
.game-guide-content li::marker {
  color: var(--game-accent);
  font-weight: 800;
}
.game-guide-controls p > b {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--muted);
}
.game-guide-tip {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
}
.game-guide-tip > b {
  font-size: 14px;
  color: var(--game-accent);
}
.game-shell.game-interface .game-guide-tip p {
  margin-bottom: 0;
}
.game-shell.game-interface .game-guide-content .game-help-close {
  display: grid;
  place-items: center;
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--text);
  font-size: 24px;
}
.game-shell.game-interface .game-title b {
  font-size: 22px;
}
/* Animated joints and bar positions come from the same model clock as gameplay. */
.lift-game .lift-bar {
  animation: none;
  transition: none;
}
.lift-game .lift-athlete {
  transition: none;
}
.lift-chalk circle {
  opacity: 0;
}
.phase-drive .lift-chalk circle, .phase-balance .lift-chalk circle {
  animation: lift-chalk-burst .55s ease-out var(--dust-delay) both;
}
.lift-success-sparks path {
  animation: lift-sparkle .8s ease-out var(--spark-delay) both;
  transform-box: fill-box;
  transform-origin: center;
}
.lift-referee-light {
  animation: lift-lamp-on .35s ease-out var(--lamp-delay) both;
}
.lift-danger .lift-meter {
  border-color: var(--ui-pink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-pink) 15%, transparent);
}
.lift-danger .lift-stability b {
  color: var(--ui-pink);
}
.lift-strain .lift-spotlights {
  opacity: .1;
}
@keyframes lift-chalk-burst {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  25% { opacity: .45; }
  100% { opacity: 0; transform: translate(var(--dust-x), var(--dust-y)) scale(1.8); }
}
@keyframes lift-sparkle {
  0% { opacity: 0; transform: scale(.2); }
  35% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(.6) translateY(-15px); }
}
@keyframes lift-lamp-on {
  from { opacity: .15; }
  to { opacity: 1; }
}
@media (max-width: 700px), (max-height: 520px) and (pointer: coarse) {
  .mobile-game-shell.game-interface .game-guide-bar {
    display: none;
  }
  .mobile-game-shell.game-interface .game-hint.game-guide-content {
    position: absolute;
    inset: calc(70px + env(safe-area-inset-top)) 8px auto;
    z-index: 70;
    max-height: calc(100% - 90px - env(safe-area-inset-top));
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 14px 45px #0004;
    touch-action: pan-y;
    font-size: 15px;
  }
  .mobile-game-shell.game-interface .game-guide-content h3 {
    font-size: 21px;
    margin-bottom: 16px;
  }
  .mobile-game-shell.game-interface .game-guide-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .mobile-game-shell.game-interface .game-guide-content p,
  .mobile-game-shell.game-interface .game-guide-content li {
    font-size: 15px;
    line-height: 1.65;
  }
  .mobile-game-shell.game-interface .game-title b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
  }
  .mobile-game-shell.game-interface .game-mission-label {
    font-size: 11px;
    letter-spacing: .35px;
  }
  .mobile-game-shell .score-pill > b {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lift-game .lift-chalk circle,
  .lift-game .lift-success-sparks path,
  .lift-game .lift-referee-light {
    animation: none;
  }
  .lift-game .lift-success-sparks {
    display: none;
  }
}

/* DMD Piksel / 18 — catalogue navigation and padel court */
.game-next-nav{width:min(1120px,100%);margin:14px auto 0;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:14px}
.game-next-nav>div{min-width:0;display:flex;flex-direction:column;gap:4px}.game-next-nav>div>b{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.game-next-nav>div>small{font-size:11px;color:var(--muted)}
.game-next-nav button{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:2px 12px;text-align:left;min-height:48px;max-width:65%;padding:7px 15px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);cursor:pointer}
.game-next-nav button>span{font-size:10px;color:var(--muted)}.game-next-nav button>strong{font-size:13px;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-next-nav button>i{font-style:normal;font-size:24px;grid-column:2;grid-row:1/3;color:var(--game-accent)}
.game-next-nav button:hover{border-color:var(--game-accent)}.game-next-nav button:focus-visible,.padel-game button:focus-visible{outline:3px solid var(--game-accent);outline-offset:2px}
.game-interface .padel-stage{padding:0;min-height:0;background:var(--panel)}
.padel-game{--padel-far:#123e50;--padel-near:#165d67;--padel-line:#a7e3dc;--padel-label:#e1f7ed;--padel-glass:#6c9eaf;--padel-ball:#ebff70;--padel-ball-edge:#506516;height:700px;max-height:85dvh;min-height:480px;display:flex;flex-direction:column;color:var(--text);background:radial-gradient(ellipse at 50% 40%,var(--panel2),var(--panel));overflow:hidden}
html[data-theme="light"] .padel-game{--padel-far:#cee5e1;--padel-near:#afdbcf;--padel-line:#3c8077;--padel-label:#174a43;--padel-glass:#538e9c;--padel-ball:#f4ff89;--padel-ball-edge:#536218}
.padel-scoreboard{flex:0 0 62px;display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.padel-scoreboard>div:not(.padel-focus){display:flex;align-items:center;gap:9px}.padel-scoreboard small{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--muted)}.padel-scoreboard b{font-size:29px;font-variant-numeric:tabular-nums;line-height:1;color:var(--text)}.padel-scoreboard>div:first-child b{color:var(--game-accent)}.padel-versus{font-size:24px;color:var(--muted)}
.padel-scoreboard .padel-clock{margin-left:auto;display:flex;flex-direction:column;gap:3px}.padel-clock>b{font-size:24px}.padel-clock span{font-size:10px;color:var(--muted)}.padel-clock b>small{font-size:12px;margin-left:2px}.padel-focus{width:90px}.padel-focus>div{height:6px;margin-top:7px;border-radius:8px;background:var(--line);overflow:hidden}.padel-focus i{display:block;height:100%;background:var(--game-accent);border-radius:8px}
.padel-court-wrap{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate}.padel-court{display:block;width:100%;height:100%;user-select:none;touch-action:none;cursor:crosshair}
.padel-return-ring{fill:var(--game-accent);fill-opacity:.06;stroke:var(--game-accent);stroke-width:1;stroke-dasharray:4 4;opacity:.55}.padel-return-ring.hot{fill-opacity:.25;stroke-width:3;stroke-dasharray:none;opacity:1}
.padel-feedback{position:absolute;top:9px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;border:1px solid var(--line);border-radius:99px;padding:6px 12px;background:var(--panel);color:var(--muted);font-size:11px;font-weight:700;text-align:center;pointer-events:none}.padel-feedback.ready{color:var(--game-accent);border-color:var(--game-accent)}
.padel-controls{flex:0 0 82px;display:flex;align-items:center;gap:20px;padding:10px 20px;border-top:1px solid var(--line);background:var(--panel)}.padel-aim>small{display:block;font-size:9px;letter-spacing:1.3px;font-weight:800;color:var(--muted);margin-bottom:4px}.padel-aim>div{display:flex;gap:4px}.padel-aim button{width:44px;height:40px;border:1px solid var(--line);border-radius:9px;font-size:22px;background:var(--panel2);color:var(--text);cursor:pointer}.padel-aim button[aria-pressed="true"]{background:var(--game-accent);color:#06261f;border-color:var(--game-accent)}
.padel-shots{display:flex;gap:7px;flex:1}.padel-shots button{min-height:52px;flex:1;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer}.padel-shots button.padel-drive{border-color:var(--game-accent);color:var(--game-accent)}.padel-shots button b{font-size:13px}.padel-key{font-size:9px;color:var(--muted)}.padel-shots button:disabled{opacity:.5;cursor:default}.padel-shots button:not(:disabled):active{transform:translateY(2px)}
.padel-coaching{flex:0 0 28px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 20px;color:var(--muted);font-size:10px;border-top:1px solid var(--line);background:var(--panel)}
.padel-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(5px);overflow:auto;z-index:3;touch-action:pan-y}
.padel-overlay-card{width:min(410px,100%);max-height:100%;overflow:auto;background:var(--panel);color:var(--text);padding:26px;border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 60px #0003;text-align:center}.padel-eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--game-accent);font-weight:800}.padel-overlay-card h2{font-size:30px;line-height:1.12;letter-spacing:-1px;margin:12px 0}.padel-overlay-card p{font-size:13px;line-height:1.65;color:var(--muted);margin:12px 0 18px}.padel-start-steps{display:grid;gap:7px;text-align:left;margin:16px 0;color:var(--game-accent);font-size:11px}.padel-start-steps>span{display:flex;align-items:center;gap:16px;padding:8px 11px;background:var(--panel2);border-radius:9px}.padel-start-steps b{color:var(--text);font-size:12px}.padel-main-action{width:100%;min-height:46px;font-size:14px}.padel-arcade-note{display:block;margin-top:12px;font-size:10px;color:var(--muted)}.padel-result{display:flex;flex-direction:column;gap:8px;color:var(--game-accent)}.padel-result b{font-size:42px;letter-spacing:2px}.padel-result span{font-size:19px}
@media(max-width:700px), (max-height:520px) and (pointer:coarse){
 .mobile-game-shell .game-next-nav{flex:0 0 46px;height:46px;min-height:46px;width:100%;margin:0;padding:2px 8px;border:0;border-top:1px solid var(--line);border-radius:0;gap:8px}.mobile-game-shell .game-next-nav>div>small{display:none}.mobile-game-shell .game-next-nav>div>b{font-size:10px}.mobile-game-shell .game-next-nav button{max-width:calc(100% - 48px);min-height:42px;height:42px;padding:3px 8px;border:0;background:transparent;gap:0 9px}.mobile-game-shell .game-next-nav button>span{font-size:9px}.mobile-game-shell .game-next-nav button>strong{font-size:11px}.mobile-game-shell .game-next-nav button>i{font-size:20px}
 .mobile-game-shell.game-ui-padel .game-stage{overflow:hidden}.mobile-game-shell .padel-game{height:100%;max-height:none;min-height:0}.padel-scoreboard{flex-basis:44px;gap:8px;padding:5px 10px}.padel-scoreboard b{font-size:23px}.padel-scoreboard small{font-size:8px}.padel-scoreboard .padel-clock{flex-direction:row;align-items:center;gap:6px}.padel-clock>b{font-size:21px}.padel-clock span{font-size:8px;width:40px}.padel-focus{width:42px}.padel-focus>div{margin-top:3px;height:4px}.padel-scoreboard>div:not(.padel-focus){gap:5px}.padel-feedback{font-size:9px;top:5px;padding:4px 9px}
 .padel-controls{flex-basis:71px;padding:6px 9px;gap:10px}.padel-aim>small{font-size:8px;letter-spacing:.7px}.padel-aim button{height:44px;width:44px;font-size:21px}.padel-aim>div{gap:3px}.padel-shots{gap:5px}.padel-shots button{min-height:46px;padding:4px 2px;border-radius:8px}.padel-shots button b{font-size:11px}.padel-key{display:none}.padel-coaching{flex-basis:22px;padding:0 10px;font-size:8px;justify-content:center}.padel-coaching>span:last-child{display:none}
 .padel-overlay{padding:10px}.padel-overlay-card{padding:18px;border-radius:16px;max-width:350px}.padel-overlay-card h2{font-size:25px;margin:8px 0}.padel-overlay-card p{font-size:12px;line-height:1.5;margin:9px 0 12px}.padel-start-steps{gap:4px;margin:10px 0}.padel-start-steps>span{padding:6px 9px}.padel-start-steps b{font-size:11px}.padel-main-action{min-height:44px}.padel-arcade-note{font-size:9px;margin-top:8px}
}
@media(max-height:520px) and (orientation:landscape){
 .mobile-game-shell .padel-game{display:grid;grid-template-columns:minmax(0,1fr) 162px;grid-template-rows:44px minmax(0,1fr)}.padel-court-wrap{grid-column:1;grid-row:1/3;min-height:0;min-width:0}.padel-scoreboard{grid-column:2;grid-row:1;padding:4px 8px;gap:4px;border-left:1px solid var(--line)}.padel-scoreboard small{font-size:7px}.padel-scoreboard b{font-size:19px}.padel-scoreboard .padel-clock{margin-left:auto}.padel-clock span,.padel-focus{display:none}.padel-controls{grid-column:2;grid-row:2;flex-direction:column;gap:8px;padding:7px 9px;border-top:0;border-left:1px solid var(--line);justify-content:center;overflow:auto}.padel-aim>small{text-align:center}.padel-aim button{width:44px}.padel-shots{width:100%;flex:0 0 auto;gap:4px}.padel-shots button{min-height:44px}.padel-shots button b{font-size:9px}.padel-coaching{display:none}.padel-overlay-card{padding:12px;max-width:380px}.padel-overlay-card h2{font-size:21px}.padel-overlay-card p{font-size:11px}.padel-start-steps{display:none}.padel-arcade-note{display:none}.padel-result{gap:2px}.padel-result b{font-size:28px}.padel-result span{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.padel-shots button:not(:disabled):active{transform:none}}

html[data-theme="light"] .padel-aim button[aria-pressed="true"]{color:#fff}

@media(max-width:700px), (max-height:520px) and (pointer:coarse){
 .mobile-game-shell.game-interface .game-title small{display:block;font-size:8px;line-height:1;margin-bottom:3px;letter-spacing:0}
}

.padel-start-hint{display:none;font-size:10px;color:var(--game-accent);line-height:1.5;margin:10px 0}
@media(max-width:700px) and (max-height:700px){.padel-start-steps{display:none}.padel-start-hint{display:block}.padel-overlay-card{padding:16px}.padel-overlay-card h2{font-size:23px}.padel-arcade-note{display:none}}
@media(max-height:520px) and (orientation:landscape){.padel-scoreboard>div:not(.padel-clock){flex-direction:column;gap:1px}.padel-start-hint{display:none}}

/* Padel 2: continuous aim, one charge control, responsive court camera. */
.padel-game.padel-v2{--padel-power:#ffd073;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:46px minmax(0,1fr) 66px;height:700px;max-height:85dvh;min-height:480px}
html[data-theme="light"] .padel-v2{--padel-power:#946004}
.padel-v2 .padel-v2-hud{grid-column:1;grid-row:1;display:flex;align-items:center;gap:12px;padding:5px 18px;background:var(--panel);border-bottom:1px solid var(--line);min-width:0}
.padel-v2-hud>span{display:flex;align-items:center;gap:8px}.padel-v2-hud small{font-size:10px;letter-spacing:.5px;font-weight:800;color:var(--muted)}.padel-v2-hud b{font-size:25px;line-height:1;font-variant-numeric:tabular-nums}.padel-v2-hud>span:first-child b{color:var(--game-accent)}.padel-v2-hud>i{font-style:normal;color:var(--muted)}
.padel-v2-hud>.padel-v2-time{margin-left:auto;gap:10px}.padel-v2-time b small{margin-left:2px}.padel-v2-focus{width:68px;display:grid;gap:5px}.padel-v2-focus>span{font-size:8px;color:var(--muted);font-weight:800}.padel-v2-focus>i{height:4px;background:var(--line);border-radius:4px;overflow:hidden}.padel-v2-focus b{display:block;height:100%;background:var(--game-accent)}
.padel-v2 .padel-court-wrap{grid-column:1;grid-row:2;min-width:0;min-height:0}.padel-v2 .padel-court:focus-visible{outline:2px solid var(--game-accent);outline-offset:-3px}
.padel-live-callout{position:absolute;top:4px;left:50%;transform:translateX(-50%);padding:5px 11px;border-radius:20px;max-width:calc(100% - 16px);width:max-content;font-size:11px;font-weight:700;text-align:center;color:var(--muted);background:var(--panel);border:1px solid var(--line);pointer-events:none;line-height:1.25}.padel-live-callout.hot{color:var(--game-accent);border-color:var(--game-accent)}
.padel-v2 .padel-touch-dock{grid-column:1;grid-row:3;display:flex;gap:16px;align-items:center;padding:7px 16px;background:var(--panel);border-top:1px solid var(--line);min-width:0;min-height:0}
.padel-charge-readout{display:grid;gap:4px;flex:1;min-width:0}.padel-charge-readout>b{font-size:12px;color:var(--text)}.padel-charge-readout>div{height:5px;background:var(--line);border-radius:6px;overflow:hidden}.padel-charge-readout i{display:block;height:100%;background:linear-gradient(90deg,var(--game-accent),var(--padel-power));border-radius:6px}.padel-charge-readout>small{font-size:10px;color:var(--muted);line-height:1.2}
.padel-charge-button{width:164px;min-height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--game-accent);border-radius:12px;background:var(--panel2);color:var(--game-accent);touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}.padel-charge-button b{font-size:13px;letter-spacing:.5px}.padel-charge-button small{font-size:9px;opacity:.85}.padel-charge-button.charging{border-color:var(--padel-power);color:var(--padel-power);box-shadow:inset 0 0 18px color-mix(in srgb,var(--padel-power) 12%,transparent)}.padel-charge-button:disabled{opacity:.4;cursor:default}
.padel-v2-overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:14px;overflow:hidden;background:color-mix(in srgb,var(--panel) 65%,transparent);backdrop-filter:blur(5px)}
.padel-v2-modal{width:min(380px,100%);max-height:100%;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text);text-align:center;box-shadow:0 18px 60px #0003;touch-action:pan-y;box-sizing:border-box}.padel-v2-modal>small:first-child{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--game-accent)}.padel-v2-modal h2{font-size:30px;line-height:1.1;letter-spacing:-.8px;margin:12px 0}.padel-v2-modal p{font-size:13px;line-height:1.6;color:var(--muted);margin:12px 0}.padel-v2-intro-hint{padding:9px;border-radius:9px;background:var(--panel2);color:var(--text);font-size:11px;line-height:1.5;margin:12px 0}.padel-v2-modal .primary{width:100%;min-height:46px;margin-top:6px;font-size:14px}.padel-v2-format{display:block;font-size:9px;color:var(--muted);margin-top:11px}.padel-v2-result{display:grid;gap:5px;color:var(--game-accent)}.padel-v2-result>b{font-size:38px}.padel-v2-result>span{font-size:18px}.padel-mobile-copy{display:none}
@media(max-width:700px), (pointer:coarse){.padel-v2 .padel-desktop-copy{display:none}.padel-v2 .padel-mobile-copy{display:inline}}
@media(max-width:700px), (max-height:520px) and (pointer:coarse){
 .mobile-game-shell .padel-game.padel-v2{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:40px minmax(0,1fr) 60px;height:100%;max-height:none;min-height:0}
 .padel-v2 .padel-v2-hud{padding:4px 10px;gap:8px}.padel-v2-hud b{font-size:22px}.padel-v2-hud small{font-size:8px}.padel-v2-hud>span{gap:5px}.padel-v2-hud>.padel-v2-time{gap:7px}.padel-v2-focus{width:34px;gap:4px}.padel-v2-focus>span{font-size:7px}.padel-v2-time>small{max-width:39px;font-size:7px;line-height:1.2}
 .padel-v2 .padel-touch-dock{padding:5px 9px;gap:10px}.padel-charge-readout>b{font-size:11px}.padel-charge-readout>small{font-size:9px}.padel-charge-button{width:116px;min-height:48px;flex-direction:column;gap:3px;border-radius:10px}.padel-charge-button b{font-size:12px}.padel-charge-button small{font-size:8px}.padel-live-callout{font-size:9px;padding:4px 8px}
 .padel-v2-overlay{padding:10px}.padel-v2-modal{padding:18px;max-width:330px;border-radius:16px}.padel-v2-modal h2{font-size:25px;margin:9px 0}.padel-v2-modal p{font-size:12px;line-height:1.5;margin:9px 0}.padel-v2-intro-hint{font-size:10px;margin:9px 0}.padel-v2-format{margin-top:8px}
}
@media(max-height:520px) and (orientation:landscape){
 .mobile-game-shell .padel-game.padel-v2{grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:34px minmax(0,1fr)}
 .padel-v2 .padel-v2-hud{grid-column:1;grid-row:1;padding:3px 12px}.padel-v2-hud b{font-size:20px}.padel-v2-hud>.padel-v2-time{margin-left:auto}.padel-v2-focus{width:42px}.padel-v2 .padel-court-wrap{grid-column:1;grid-row:2}
 .padel-v2 .padel-touch-dock{grid-column:2;grid-row:1/3;flex-direction:column;justify-content:center;gap:12px;border-top:0;border-left:1px solid var(--line);padding:8px;overflow:auto}.padel-charge-readout{width:100%;flex:0 0 auto;gap:5px}.padel-charge-readout>b{font-size:10px}.padel-charge-readout>small{font-size:9px;line-height:1.4}.padel-charge-button{width:100%;min-height:64px;gap:5px}.padel-charge-button b{font-size:10px}.padel-charge-button small{font-size:8px}
 .padel-v2-modal{padding:12px;max-width:420px;border-radius:12px}.padel-v2-modal>small:first-child{font-size:8px}.padel-v2-modal h2{font-size:21px;margin:5px 0}.padel-v2-modal p{font-size:11px;line-height:1.35;margin:6px 0}.padel-v2-intro-hint{font-size:10px;padding:5px;margin:5px 0}.padel-v2-modal .primary{min-height:44px;margin-top:3px;font-size:12px}.padel-v2-format{display:none}.padel-v2-result>b{font-size:24px}.padel-v2-result>span{font-size:14px}.padel-live-callout{top:2px;font-size:9px;padding:3px 8px}
}
.game-interface .padel-v2 .padel-charge-button{touch-action:none}

/* Padel 4: larger thumb control and a calmer pace; desktop court preserved. */
.padel-v3 .padel-joystick{display:none;position:relative;flex:0 0 112px;width:112px;height:112px;margin:0;border:1px solid var(--line);border-radius:50%;background:var(--panel2);touch-action:none;user-select:none;-webkit-user-select:none;isolation:isolate}
.padel-v3 .padel-joystick.active{border-color:var(--game-accent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--game-accent) 12%,transparent)}.padel-v3 .padel-joystick[aria-disabled="true"]{opacity:.4}
.padel-stick-ring{position:absolute;inset:25px;border:1px dashed var(--muted);border-radius:50%;opacity:.4;pointer-events:none}
.padel-stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;border:2px solid var(--panel);border-radius:50%;background:var(--game-accent);box-shadow:0 3px 8px #0003;pointer-events:none}
.padel-stick-arrow{position:absolute;color:var(--muted);font-size:14px;font-weight:800;line-height:1;pointer-events:none}.padel-stick-arrow.up{top:6px;left:50%;transform:translateX(-50%)}.padel-stick-arrow.down{bottom:6px;left:50%;transform:translateX(-50%)}.padel-stick-arrow.left{left:6px;top:50%;transform:translateY(-50%)}.padel-stick-arrow.right{right:6px;top:50%;transform:translateY(-50%)}
@media(min-width:701px){
 .game-ui-padel .game-stage{max-width:1320px}.game-ui-padel :is(.game-topbar,.game-mission-head,.game-guide-bar,.game-hint,.game-next-nav){max-width:1320px;margin-left:auto;margin-right:auto}.game-ui-padel .game-next-nav{width:min(1320px,100%)}
 .padel-game.padel-v3{height:820px;max-height:90dvh;min-height:520px}
}
@media(pointer:coarse){.padel-v3 .padel-joystick{display:block}.padel-game.padel-v3{grid-template-rows:46px minmax(0,1fr) 128px}}
@media(max-width:700px), (max-height:520px) and (pointer:coarse){
 .mobile-game-shell .padel-game.padel-v3{height:100%;max-height:none;min-height:0;grid-template-rows:40px minmax(0,1fr) 128px}
 .padel-v3 .padel-joystick{display:block}.padel-v3 .padel-touch-dock{gap:10px;padding:7px 9px}.padel-v3 .padel-charge-button{width:100px;min-height:60px}.padel-v3 .padel-charge-readout>b{font-size:10px}.padel-v3 .padel-charge-readout>small{font-size:9px;line-height:1.3}
}
@media(max-height:520px) and (orientation:landscape){
 .mobile-game-shell .padel-game.padel-v3{grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:34px minmax(0,1fr)}
 .padel-v3 .padel-touch-dock{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 60px;align-content:center;align-items:center;gap:8px;padding:8px;overflow:auto}
 .padel-v3 .padel-joystick{grid-column:1;grid-row:1/3}.padel-v3 .padel-charge-readout{grid-column:2;grid-row:1;min-width:0;width:100%;gap:4px}.padel-v3 .padel-charge-button{grid-column:2;grid-row:2;width:100%;min-width:0;min-height:60px;padding:4px}.padel-v3 .padel-charge-button b{font-size:10px;letter-spacing:0}.padel-v3 .padel-charge-button small{font-size:8px}.padel-v3 .padel-charge-readout>small{font-size:8px}
}

@media(min-width:701px) and (max-height:520px) and (pointer:fine){
 .mobile-game-shell .padel-game.padel-v3{grid-template-columns:minmax(0,1fr);grid-template-rows:46px minmax(0,1fr) 66px}
 .padel-v3 .padel-v2-hud{grid-column:1;grid-row:1}.padel-v3 .padel-court-wrap{grid-column:1;grid-row:2}.padel-v3 .padel-touch-dock{grid-column:1;grid-row:3;display:flex;flex-direction:row;padding:7px 16px;border-top:1px solid var(--line);border-left:0}.padel-v3 .padel-charge-button{width:164px;min-height:48px;flex-direction:row}.padel-v3 .padel-charge-readout{flex:1}.padel-v3 .padel-joystick{display:none}
}

/* Padel difficulty selection. */
.padel-mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:15px 0 8px}
.padel-mode-option{min-height:58px;min-width:0;padding:8px 4px;display:grid;align-content:center;gap:4px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);cursor:pointer}.padel-mode-option b{font-size:14px}.padel-mode-option small{font-size:9px;color:var(--muted)}
.padel-mode-option[aria-pressed="true"]{border:2px solid var(--game-accent);background:color-mix(in srgb,var(--game-accent) 12%,var(--panel));color:var(--text)}.padel-mode-option.mode-hard[aria-pressed="true"]{border-color:var(--ui-pink)}
.padel-mode-option:focus-visible{outline:3px solid var(--game-accent);outline-offset:2px}
.padel-v2-hud>.padel-mode-pill{display:inline-flex;justify-content:center;flex-shrink:0;font-size:9px;font-weight:800;line-height:1;padding:5px 7px;border:1px solid var(--line);border-radius:7px;color:var(--game-accent);background:var(--panel2)}.padel-v2-hud>.padel-mode-pill.mode-hard{color:var(--ui-pink)}
.padel-ready-modal h2{font-size:28px}.padel-ready-modal .padel-ready-copy{min-height:36px;margin:8px 0;font-size:12px;line-height:1.5}
@media(max-width:360px){.padel-v7 .padel-v2-focus{display:none}}
@media(max-width:700px) and (max-height:760px), (max-height:520px) and (orientation:landscape){
 .padel-ready-modal{padding:10px}.padel-ready-modal>small:first-child{font-size:8px;letter-spacing:1px}.padel-ready-modal h2{font-size:19px;line-height:1.1;margin:5px 0}
 .padel-ready-modal .padel-mode-picker{margin:5px 0;gap:5px}.padel-ready-modal .padel-mode-option{min-height:44px;padding:4px;border-radius:8px}.padel-ready-modal .padel-mode-option b{font-size:12px}.padel-ready-modal .padel-mode-option small{display:none}
 .padel-ready-modal .padel-ready-copy{min-height:0;font-size:10px;line-height:1.25;margin:5px 0}.padel-ready-modal .padel-v2-intro-hint,.padel-ready-modal .padel-v2-format{display:none}.padel-ready-modal .primary{min-height:44px;margin-top:4px;font-size:12px}
 .padel-v2-hud>.padel-mode-pill{font-size:8px;padding:4px 5px}
}
@media(max-width:360px) and (max-height:640px){.padel-ready-modal h2{display:none}}
@media(max-height:520px) and (orientation:landscape){
 .padel-ready-modal{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:6px 8px;max-width:520px;text-align:left}
 .padel-ready-modal>small:first-child{grid-column:1;grid-row:1}.padel-ready-modal h2{display:none}.padel-ready-modal .padel-mode-picker{grid-column:1;grid-row:2;margin:0}.padel-ready-modal .padel-ready-copy{grid-column:1;grid-row:3;margin:0}.padel-ready-modal .primary{grid-column:2;grid-row:1/4;align-self:stretch;margin:0;padding:6px;line-height:1.4;min-height:60px}
}