:root{font-family:'DM Sans',system-ui,sans-serif;color:#f2f8ff;background:#080b1b;font-synthesis:none;--cyan:#5ff5eb;--gold:#ffd073;--rose:#ff629f;--surface:#111930;--border:rgba(165,217,255,.17)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 14% 10%,#172b55 0,transparent 38%),radial-gradient(ellipse at 88% 77%,#381943 0,transparent 38%),#080b1b}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}.app{max-width:1660px;min-height:100svh;margin:auto;padding:clamp(12px,2vw,26px)}.topbar{min-height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-bottom:14px}.back{justify-self:start;text-decoration:none;color:#b7d4e9;font-weight:700;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:#111a31a8}.brand{display:flex;gap:11px;align-items:center}.brand-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#061e32;background:linear-gradient(145deg,#f3ee8e,#6ff4e7 65%,#4298e9);font:bold 42px 'Barlow Condensed';box-shadow:0 0 28px #73f6de55}.brand small{letter-spacing:.22em;color:#82b9cf;font-size:10px;font-weight:800}.brand h1{margin:0;font:900 clamp(24px,3vw,36px)/.95 'Barlow Condensed',sans-serif;letter-spacing:.035em;text-transform:uppercase}.topactions{justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.topactions button,.arena-footer button{background:#14213a;color:#d9ecf7;border:1px solid #355473;border-radius:10px;padding:9px 11px;font-weight:700;font-size:13px}.topactions button:hover,.arena-footer button:hover{background:#203956}.topactions button:disabled,.arena-footer button:disabled{opacity:.45;cursor:default}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:16px;align-items:stretch}.arena{position:relative;min-height:min(780px,calc(100svh - 110px));overflow:hidden;isolation:isolate;border:1px solid #4a749079;border-radius:26px;background:radial-gradient(circle at 50% 50%,#19467270 0,#0d203f 29%,#0b1027 65%),linear-gradient(140deg,#0c2032,#100a26);box-shadow:inset 0 0 80px #030919,0 26px 70px #030513ad}.arena:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 36px,#70b6ef0b 37px 38px),repeating-linear-gradient(90deg,transparent 0 36px,#70b6ef0b 37px 38px);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 75%,transparent)}.arena:after{content:'';position:absolute;width:520px;height:520px;left:50%;top:45%;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;background:radial-gradient(circle,#3dfce918,transparent 65%);pointer-events:none}.arena-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(120deg,transparent 15%,#91f9ff14 15.1%,transparent 15.5%),linear-gradient(63deg,transparent 81%,#e995ff12 81.1%,transparent 81.6%)}.arena-head{position:absolute;top:18px;left:22px;right:22px;z-index:1;display:flex;justify-content:space-between;gap:15px;align-items:center}.arena-label,.stage,.panel-kicker,.overlay-badge{font-size:11px;font-weight:800;letter-spacing:.2em;color:#7aece7}.stage{color:#ffd073;border:1px solid #ffd07355;padding:7px 10px;border-radius:999px;background:#4235254d}.hud{position:absolute;z-index:1;top:55px;left:22px;right:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hud>div{background:linear-gradient(150deg,#213955af,#0d1d35b8);border:1px solid #85c1ed3b;border-radius:13px;min-height:63px;padding:10px 13px;backdrop-filter:blur(5px)}.hud span{display:block;color:#8faec5;font-size:10px;font-weight:800;letter-spacing:.13em}.hud strong{display:block;margin-top:3px;font:800 23px/1 'Barlow Condensed';letter-spacing:.03em;font-variant-numeric:tabular-nums}.hud #lives{color:#ff8bb5;letter-spacing:.1em}.playfield{position:absolute;inset:120px 0 54px;display:flex;flex-direction:column;align-items:center;justify-content:center}.target-rings{position:absolute;top:41%;left:50%;width:min(58vw,380px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.target-rings i{position:absolute;inset:0;border:1px solid #63eaff2b;border-radius:50%;box-shadow:0 0 32px #39b9f01a,inset 0 0 32px #39b9f01a}.target-rings i:nth-child(2){inset:9%;border-style:dashed;border-color:#6ed9f951;animation:rotate 24s linear infinite}.target-rings i:nth-child(3){inset:23%;border-width:3px;border-color:#60e8ee80;box-shadow:0 0 36px #51efe958}.target-wrap{position:relative;z-index:1;text-align:center;display:grid;place-items:center}.target-caption{color:#8bdada;font-weight:800;letter-spacing:.29em;font-size:clamp(10px,1.4vw,13px)}.target{font:900 clamp(160px,27vw,300px)/.85 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.045em;color:#f6feff;-webkit-text-stroke:2px #a8fbf1;text-shadow:0 0 13px #7df7ed,0 0 70px #4df2ef8c,0 16px 15px #051420;filter:drop-shadow(0 25px 25px #040818);font-variant-numeric:tabular-nums}.target-hint{margin-top:8px;color:#85a7bb;font-size:10px;font-weight:700;letter-spacing:.16em}.timer-track{width:min(77%,510px);height:13px;flex:none;border-radius:30px;border:1px solid #80c8ea78;background:#102b45;overflow:hidden;box-shadow:0 0 17px #359cbb4c;margin-top:32px}.timer-track>div{height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#1bb7d7,#75f7e9,#fff0a3);box-shadow:0 0 18px #73f6e9}.keypad{width:min(92%,720px);display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-top:28px}.keypad button{min-width:0;height:clamp(45px,6vw,63px);border-radius:12px;border:1px solid #70cce46b;color:#e8f9ff;background:linear-gradient(150deg,#264261,#101d38);box-shadow:inset 0 1px #b0e5ff35,0 5px 0 #06162d;font:800 clamp(20px,3vw,31px) 'Barlow Condensed';transition:transform .09s,background .09s,box-shadow .09s}.keypad button:hover,.keypad button:focus-visible{background:linear-gradient(150deg,#336e81,#173c5c)}.keypad button.hit{transform:translateY(4px);box-shadow:0 0 21px #62f7de;color:#0b2c36;background:#81f4dc}.keypad button.miss{transform:translateY(4px);box-shadow:0 0 21px #fb5d91;background:#f872a0;color:#300b28}.arena-footer{position:absolute;bottom:10px;left:22px;right:22px;display:flex;gap:12px;align-items:center;justify-content:space-between;color:#a9c8dc;font-size:13px}.arena-footer button{min-width:78px}.feedback{height:28px;position:absolute;top:2%;z-index:4;font:900 25px 'Barlow Condensed';letter-spacing:.1em;opacity:0;transform:translateY(10px);transition:opacity .12s,transform .12s}.feedback.show{opacity:1;transform:translateY(0)}.feedback.good{color:#94ffe1;text-shadow:0 0 24px #31e9bd}.feedback.bad{color:#ff93ae;text-shadow:0 0 24px #ea436e}.arena.good .target{animation:good .25s ease-out}.arena.bad .target{animation:bad .25s ease-out}.arena.fast .target{color:#fff1cf;-webkit-text-stroke-color:#ffca6c;text-shadow:0 0 20px #ffd27d,0 0 75px #e99d30}.sidebar{display:flex;flex-direction:column;gap:14px}.panel{padding:22px;background:linear-gradient(155deg,#172643e8,#111729ed);border:1px solid var(--border);border-radius:20px;box-shadow:inset 0 1px #fff1}.panel h2{font:800 32px/1 'Barlow Condensed';margin:11px 0 12px;text-transform:uppercase}.panel p{color:#bbccdc;font-size:14px;line-height:1.65}.mission{flex:1}.phase-list{display:grid;gap:8px;margin-top:23px}.phase-list div{display:flex;gap:14px;align-items:center;border-top:1px solid #ffffff1e;padding-top:9px;font-size:13px;color:#dbedf8}.phase-list b{color:#f7cf7c;font:800 19px 'Barlow Condensed'}.personal strong{display:block;font:900 48px 'Barlow Condensed';color:#ffe196;text-shadow:0 0 20px #f6c86269}.personal p{margin:0}.duel-summary{margin-top:14px;border-top:1px solid #ffffff30;padding-top:12px;color:#d6edfa;font-size:13px;line-height:1.7}.controls{background:linear-gradient(150deg,#282239,#151526)}.overlay{position:absolute;z-index:8;inset:0;display:grid;place-items:center;padding:18px;background:#060b1ab8;backdrop-filter:blur(9px)}.overlay[hidden]{display:none}.overlay-card{width:min(100%,510px);padding:clamp(24px,4vw,40px);text-align:center;border:1px solid #79d5e88a;border-radius:24px;background:radial-gradient(circle at 50% 0,#26517a,#132442 47%,#0e142d);box-shadow:0 20px 75px #000b,inset 0 1px #ffffff64,0 0 55px #39e2db30}.overlay-badge{display:inline-block;padding:7px 10px;border-radius:999px;background:#66f7e916;border:1px solid #66f7e96b}.overlay-card h2{font:900 clamp(36px,6vw,58px)/.96 'Barlow Condensed';text-transform:uppercase;margin:20px 0 12px;text-shadow:0 2px 25px #5ee4ed88}.overlay-card p{color:#c4d9e8;line-height:1.65;font-size:15px;margin:0 auto 24px;max-width:390px}.mode-actions{display:grid;gap:10px}.primary,.secondary{border-radius:12px;padding:15px 19px;font-weight:800;font-size:16px}.primary{color:#092735;border:1px solid #d5ffde;background:linear-gradient(140deg,#fff4ad,#88ffdf 60%,#4bd4ed);box-shadow:0 7px 22px #59e3c45e}.primary:hover{filter:brightness(1.12)}.primary span{float:right}.secondary{background:#1b3152;color:#e2f5ff;border:1px solid #679bb6}.secondary:hover{background:#31567b}.text-button{margin-top:18px;border:0;background:none;color:#9df5e8;font-weight:800;text-decoration:underline}.mode-actions[hidden]{display:none}.overlay-card .countdown{font:900 72px 'Barlow Condensed';color:#ffde8a}.dialog-content{padding:25px;max-width:530px}dialog{border:1px solid #7cd6e4;border-radius:20px;background:#0e1932;color:#f5fbff;box-shadow:0 30px 100px #000c;max-width:min(92vw,580px);max-height:90vh;overflow:auto}dialog::backdrop{background:#03081bbd;backdrop-filter:blur(4px)}dialog h2{font:900 36px 'Barlow Condensed';margin:13px 0}dialog ol{padding-left:23px;line-height:1.55;color:#d2e3ee}dialog li{margin:9px 0}dialog p{color:#bad2e0}.close{float:right;border:0;background:#1f3654;color:white;border-radius:50%;width:34px;height:34px;font-size:26px}.help-example{display:flex;align-items:center;justify-content:center;gap:25px;background:radial-gradient(circle,#1c5872,#101b37);border:1px solid #64a9c58c;border-radius:16px;padding:14px}.help-digit{font:900 72px 'Barlow Condensed';color:#a8ffe9;text-shadow:0 0 23px #73ffea}.help-timer{width:100px;height:9px;background:#24354e;border-radius:20px}.help-timer i{display:block;width:62%;height:100%;background:#ffe19d;border-radius:20px}.help-key{width:43px;height:43px;display:grid;place-items:center;background:#254968;border:1px solid #65c6dc;border-radius:9px;font:800 28px 'Barlow Condensed'}button:focus-visible,a:focus-visible{outline:3px solid #ffdd8c;outline-offset:3px}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes good{50%{transform:scale(1.12)}}@keyframes bad{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}@media(max-width:1020px){.game-layout{grid-template-columns:1fr}.arena{min-height:720px}.sidebar{display:grid;grid-template-columns:repeat(3,1fr)}.panel{padding:17px}.panel h2{font-size:26px}.phase-list{margin-top:12px}}@media(max-width:700px){.app{padding:8px}.topbar{grid-template-columns:1fr auto;margin:0 0 7px;gap:6px}.back{grid-column:1/2;grid-row:1;font-size:11px;padding:7px}.brand{grid-column:1/2;grid-row:2}.brand-symbol{width:38px;height:38px;font-size:34px}.brand h1{font-size:27px}.brand small{font-size:8px}.topactions{grid-column:2;grid-row:1/3;max-width:185px}.topactions button{font-size:10px;padding:7px}.arena{min-height:calc(100svh - 95px);border-radius:15px}.arena-head{left:12px;right:12px;top:10px}.hud{top:42px;left:10px;right:10px;gap:4px}.hud>div{padding:8px 7px;min-height:51px;border-radius:8px}.hud span{font-size:8px;letter-spacing:.04em}.hud strong{font-size:19px}.playfield{inset:95px 0 44px}.target-rings{top:37%;width:min(85vw,360px)}.target{font-size:clamp(145px,37vw,240px)}.target-caption{font-size:10px}.target-hint{font-size:8px}.timer-track{margin-top:24px}.keypad{width:calc(100% - 20px);grid-template-columns:repeat(5,1fr);gap:8px;margin-top:23px}.keypad button{height:clamp(46px,8svh,65px);font-size:27px}.arena-footer{left:11px;right:11px;font-size:10px}.sidebar{grid-template-columns:1fr}.mission{display:none}.controls{display:none}.personal{display:flex;align-items:center;justify-content:space-between}.personal p{display:none}.personal strong{font-size:34px}.personal .duel-summary{margin:0;padding:0;border:0}}@media(max-height:700px) and (min-width:701px){.arena{min-height:590px}.target{font-size:210px}.keypad{margin-top:12px}.timer-track{margin-top:14px}.playfield{inset:110px 0 48px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Built-in font stack keeps the arcade typography crisp even offline. */
:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.brand-symbol,.brand h1,.hud strong,.target,.keypad button,.panel h2,.phase-list b,.personal strong,.feedback,.overlay-card h2,.overlay-card .countdown,dialog h2,.help-digit,.help-key{font-family:Impact,'Arial Narrow','Segoe UI',sans-serif}
.game-preview{display:block;width:100%;height:auto;max-height:210px;object-fit:cover;object-position:center 45%;border:1px solid #6ba9c5;border-radius:12px;margin:12px 0}
@media(max-width:700px){.arena{min-height:calc(100svh - 145px)}}
@media(max-height:800px) and (min-width:701px){.game-layout{align-items:start}.arena{height:calc(100svh - 165px);min-height:520px}.playfield{inset:105px 0 45px}.target{font-size:clamp(150px,25vh,220px)}.target-rings{width:310px}.timer-track{margin-top:15px}.keypad{margin-top:13px}.keypad button{height:51px}}
#practiceButton{grid-column:1/-1;border-color:#55cecb}
#errorReview{overflow-wrap:anywhere}#errorReview ul{margin:0;padding-left:20px;line-height:1.6}
#overlay{overflow-y:auto;align-items:start}#overlay .overlay-card{margin-block:auto}
@media(min-width:781px) and (max-height:850px){#overlayTitle{font-size:36px;line-height:1.08}#overlay .overlay-card{padding:22px}#modeActions button{padding:12px 18px}}