/* DevEx Reflex · tema "Entorno Plataformas": pixel art arcade amarillo y azul marino sobre fondo claro.
   Los marcos de píxeles se hacen con sombras escalonadas (sin bordes redondeados) para que las esquinas
   queden en escalera, como en el cartel del gabinete arcade. */
/* Press Start 2P (SIL OFL 1.1, assets/fonts/OFL.txt) va dentro del juego para que funcione sin internet. */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/press-start-2p-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/press-start-2p-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  color-scheme:light;
  --y:#fdda24;--y-hi:#fff1a1;--y-lo:#eaa900;--y-deep:#b97c00;
  --n0:#061639;--n1:#0b2a6f;--n2:#0a2160;--n3:#2463d6;--n4:#123a92;
  --blue:#2f80ff;--sky:#62b3ff;--green:#2fcf5b;--red:#ec3b3b;--orange:#ff8a1f;
  --ink:#0b2a6f;--ink-soft:#3b5592;--bg:#f3f6fc;
  --text:#ffffff;--muted:#b5c8ef;--line:#2463d6;
  /* alias de la paleta anterior por si algún módulo los usa */
  --cyan:var(--sky);--pink:var(--y);--purple:var(--n3);--yellow:var(--y);
  --px:"Press Start 2P","Cascadia Mono",Consolas,ui-monospace,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* marco grande: 4 px amarillo + 4 px contorno, esquinas en escalera */
  --frame:0 -4px 0 0 var(--y),0 4px 0 0 var(--y),-4px 0 0 0 var(--y),4px 0 0 0 var(--y),
    -4px -4px 0 0 var(--n0),4px -4px 0 0 var(--n0),-4px 4px 0 0 var(--n0),4px 4px 0 0 var(--n0),
    0 -8px 0 0 var(--n0),0 8px 0 0 var(--n0),-8px 0 0 0 var(--n0),8px 0 0 0 var(--n0);
  /* contorno fino de 3 px en escalera para botones y fichas */
  --edge:0 -3px 0 0 var(--n0),0 3px 0 0 var(--n0),-3px 0 0 0 var(--n0),3px 0 0 0 var(--n0);
  --drop:12px 14px 0 0 #06163922;
  --bevel:inset -4px -4px 0 0 #0000002e,inset 4px 4px 0 0 #ffffff40;
  --screen-line:inset 0 0 0 2px #2a5fc9;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-width:320px;min-height:100vh;font-family:var(--sans);color:var(--ink);overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -20%,#dbe8ff 0,transparent 55%),
    linear-gradient(180deg,#f7f9fe 0,#eef3fb 100%)}
button,input{font:inherit}button{cursor:pointer}
button:focus-visible,input:focus-visible,.btn:focus-visible,.icon-btn:focus-visible{outline:4px solid var(--blue);outline-offset:6px}
img{max-width:100%}code{color:var(--n3);font-weight:700}
h1,h2,h3{font-family:var(--px);font-weight:400;letter-spacing:0;line-height:1.35}
b,strong{font-weight:800}

/* ---------- fondo: confeti (canvas) + nubes de píxeles ---------- */
#three-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-4;pointer-events:none}
.px-sky{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.cloud{position:absolute;display:block;width:12px;height:12px;background:#fff;
  box-shadow:12px 0 #fff,24px 0 #fff,36px 0 #fff,48px 0 #fff,-12px 12px #fff,0 12px #fff,12px 12px #fff,24px 12px #fff,36px 12px #fff,48px 12px #fff,60px 12px #fff,
    12px -12px #fff,24px -12px #fff,36px -12px #fff,24px -24px #fff,
    -12px 24px #cfe0fb,0 24px #cfe0fb,12px 24px #cfe0fb,24px 24px #cfe0fb,36px 24px #cfe0fb,48px 24px #cfe0fb,60px 24px #cfe0fb;
  filter:drop-shadow(0 0 1px #9fbbe8);opacity:.95;animation:drift 70s linear infinite}
.cloud.c1{top:16%;left:6%}.cloud.c2{top:62%;left:84%;scale:.8;animation-duration:90s;animation-direction:reverse}.cloud.c3{top:86%;left:30%;scale:.65;animation-duration:110s}
@keyframes drift{50%{transform:translateX(60px)}}

/* ---------- estructura ---------- */
.app-shell{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:22px 0 48px}
.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:72px;margin-bottom:22px;position:relative;z-index:5}
.brand{border:0;background:transparent;display:flex;align-items:flex-end;gap:10px;padding:4px 2px}
.px-word{display:inline-block;line-height:0}.px-word svg{display:block;height:100%;width:auto}
.brand .brand-devex{height:46px}.brand .brand-reflex{height:24px}
.hud-mini{justify-self:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hud-mini span{background:var(--n1);color:var(--muted);padding:8px 12px;font-size:12px;box-shadow:var(--edge)}
.hud-mini strong{color:var(--y);font-family:var(--px);font-weight:400;font-size:10px;margin-left:4px}
.top-actions{display:flex;gap:12px}
.icon-btn{width:44px;height:44px;border:0;border-radius:0;background:var(--y);color:var(--n0);font-size:19px;display:grid;place-items:center;box-shadow:var(--bevel),var(--edge);transition:transform .1s}
.icon-btn:hover{background:#ffe55c}.icon-btn:active{transform:translateY(2px)}
.screen{display:none;animation:screenIn .22s steps(4) both}.screen.active{display:block}
@keyframes screenIn{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

/* ---------- panel: el módulo azul marino con marco amarillo ---------- */
.panel{position:relative;background:var(--n1);color:var(--text);border:0;border-radius:0;
  box-shadow:inset 0 0 0 6px var(--n1),inset 0 0 0 8px var(--n3),var(--frame),var(--drop)}
.neon-panel{background:var(--n1)}
.panel p{color:var(--muted)}
.panel b,.panel strong{color:#fff}
.eyebrow{margin:0 0 8px;color:var(--n3);font-family:var(--px);font-size:10px;letter-spacing:.06em;line-height:1.6}
.panel .eyebrow,.arcade .eyebrow{color:var(--y)}

/* ---------- botones arcade ---------- */
.btn{min-height:50px;border:0;border-radius:0;padding:14px 20px;color:#fff;font-family:var(--px);font-size:11px;line-height:1.6;letter-spacing:.02em;
  background:var(--n4);box-shadow:var(--bevel),var(--edge),0 6px 0 0 var(--n0);transition:transform .08s,filter .12s;margin-bottom:6px}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(4px);box-shadow:var(--bevel),var(--edge),0 2px 0 0 var(--n0)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--y);color:var(--n0)}
.btn.ghost{background:var(--n1);color:#fff}
.btn.success{background:var(--green);color:var(--n0)}
.btn.danger{background:var(--red)}
.btn.gold{background:var(--orange);color:var(--n0)}
.secondary-actions,.reward-actions,.admin-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.reward-actions{justify-content:center}

/* ---------- portada ---------- */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.hero-copy{padding:6px 0 10px}
.hero-banner{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 16px;background:var(--n1);color:#fff;font-family:var(--px);font-size:11px;line-height:1.4;box-shadow:var(--frame)}
.hero-banner span{color:var(--y);font-size:16px}
.hero-copy h1{margin:8px 0 18px;font-size:clamp(26px,4.3vw,50px);line-height:1.25}
.hero-copy h1 span{display:block}
.hero-copy h1 span:nth-child(1){color:var(--n1)}
.hero-copy h1 span:nth-child(2){color:var(--blue)}
.hero-copy h1 span:nth-child(3){color:var(--y);text-shadow:3px 0 0 var(--n0),-3px 0 0 var(--n0),0 3px 0 var(--n0),0 -3px 0 var(--n0),3px 3px 0 var(--n0),-3px -3px 0 var(--n0),3px -3px 0 var(--n0),-3px 3px 0 var(--n0),6px 6px 0 var(--n0)}
.hero-lead{color:var(--ink-soft);font-size:clamp(15px,1.7vw,18px);line-height:1.6;max-width:640px;margin:0 0 26px}
.hero-lead b{color:var(--n1)}
.start-form label{display:block;font-family:var(--px);font-size:10px;color:var(--n1);margin-bottom:10px}
.start-form small{display:block;margin-top:8px;color:var(--ink-soft)}
.start-form small.error{color:var(--red);font-weight:700}
.start-form input[readonly]{background:#eef3fb;color:var(--ink-soft)}
.input-row{display:flex;gap:16px;align-items:flex-start}
.input-row input,.admin-login input{min-width:0;flex:1;min-height:50px;background:#fff;border:0;border-radius:0;color:var(--n0);padding:14px 16px;font-size:17px;font-weight:700;box-shadow:inset 3px 3px 0 0 #d6e2f7,var(--edge)}
.input-row input:focus,.admin-login input:focus{outline:4px solid var(--y);outline-offset:3px}
.input-row .btn{min-width:150px}
.server-status{display:inline-flex;margin-top:16px;padding:6px 10px;background:#fff;color:var(--ink-soft);font-size:11px;font-weight:700;box-shadow:var(--edge)}
.server-status.online{color:#137a35}.server-status.offline{color:#9a5b00}
.home-daily{display:inline-flex;align-items:center;gap:12px;margin:0 0 20px;padding:10px 14px;background:var(--y);color:var(--n0);font-size:13px;font-weight:800;box-shadow:var(--bevel),var(--edge)}
.home-daily img{width:32px;height:32px}.home-daily:empty{display:none}

/* gabinete arcade */
.hero-visual{display:flex;flex-direction:column;align-items:stretch;gap:14px;position:relative}
.arcade{background:var(--y);padding:14px 16px 18px;box-shadow:inset -6px -6px 0 0 var(--y-lo),inset 6px 6px 0 0 var(--y-hi),var(--edge),0 -6px 0 0 var(--n0),0 6px 0 0 var(--n0),-6px 0 0 0 var(--n0),6px 0 0 0 var(--n0),var(--drop)}
.arcade-marquee{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 14px;background:linear-gradient(180deg,#ffe55c,#f7c600);box-shadow:inset 0 0 0 3px var(--n0),inset 0 -6px 0 0 var(--y-lo)}
.arcade-logo{display:grid;gap:4px;flex:0 0 auto}
.arcade-logo i{display:block;height:7px;background:var(--n0);transform:skewX(-24deg)}
.arcade-logo i:nth-child(1){width:22px;margin-left:8px}.arcade-logo i:nth-child(2){width:30px;margin-left:4px}.arcade-logo i:nth-child(3){width:26px}
.arcade-title{font-family:var(--px);font-size:12px;color:var(--n0);line-height:1.5;text-align:center}
.arcade-screen{position:relative;min-height:340px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(180deg,transparent 0 62%,#0b2a6f 62% 100%),
    repeating-linear-gradient(90deg,transparent 0 31px,#ffffff14 31px 32px),
    linear-gradient(180deg,#4f9dff 0,#2f80ff 40%,#1d55c4 62%);
  box-shadow:inset 0 0 0 4px var(--n0),inset 0 0 0 8px #1d4fb8}
.arcade-screen:before{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:repeating-linear-gradient(90deg,transparent 0 46px,#ffffff1a 46px 48px),repeating-linear-gradient(180deg,transparent 0 22px,#ffffff1a 22px 24px);pointer-events:none}
.arcade-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 10px 4px}
.arcade-controls .stick{position:relative;width:12px;height:26px;background:var(--n0);margin-right:18px}
.arcade-controls .stick:before{content:"";position:absolute;left:-8px;top:-20px;width:28px;height:28px;background:var(--n3);box-shadow:inset -4px -4px 0 #0000003d,inset 4px 4px 0 #ffffff4d,var(--edge);clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}
.arcade-controls .stick:after{content:"";position:absolute;left:-14px;bottom:-6px;width:40px;height:8px;background:var(--n0)}
.arcade-controls .pad{width:30px;height:24px;background:var(--c,var(--n3));box-shadow:inset -4px -4px 0 #0000003d,inset 4px 4px 0 #ffffff4d,var(--edge)}
.pad.b1{--c:var(--n3)}.pad.b2{--c:#ffe55c}.pad.b3{--c:var(--green)}.pad.b4{--c:var(--red)}
.mascot-orbit{position:relative;width:300px;height:320px}
.hero-mascot{position:absolute;inset:0;margin:auto;max-width:250px;max-height:300px;object-fit:contain;mix-blend-mode:screen;clip-path:inset(16% 0 0 0)}
.orb{position:absolute;width:64px;height:64px;box-shadow:var(--edge)}
.o1{left:5px;top:42px;animation:float 3s steps(6) infinite}.o2{right:0;top:84px;animation:float 3.5s steps(6) infinite .3s}.o3{left:110px;bottom:6px;animation:float 4s steps(6) infinite .6s}
@keyframes float{50%{transform:translateY(-12px)}}
.mascot-stage{position:relative;width:100%;height:340px;flex:0 0 auto}.mascot-stage:not(.hidden)+.mascot-orbit{display:none}.mascot-canvas{display:block}
.prize-ladder{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:6px 4px 0}
.prize-rotation{margin:2px 0 0;text-align:center;font-size:12px;font-weight:800;color:var(--n1)}
.prize-rotation:empty{display:none}
.locked{font-family:var(--px);font-size:8px;line-height:1.5;padding:7px 9px;background:var(--n2);color:#8fa6d6;box-shadow:var(--edge)}
.locked.unlocked{background:#fff;color:var(--n0)}
.locked.elite{background:var(--n3);color:#fff}
.locked.gold{color:var(--y)}
.home-tournament{margin:4px 0 0;display:grid;gap:4px;text-align:center;padding:12px 14px;background:var(--n1);color:#fff;box-shadow:var(--edge)}
.home-tournament strong{color:var(--y);font-family:var(--px);font-weight:400;font-size:10px;line-height:1.6}
.home-tournament span{font-size:13px;color:var(--muted)}.home-tournament span[data-leader]{color:#fff;font-weight:800}
.home-winner{margin:0;text-align:center;padding:12px 14px;background:var(--n0);color:var(--y);font-weight:800;font-size:13px;box-shadow:var(--edge);animation:winnerGlow 1s steps(2) infinite alternate}
@keyframes winnerGlow{from{background:var(--n0)}to{background:var(--n4)}}

/* ---------- encabezados de pantalla ---------- */
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.screen-head h2{margin:0;font-size:clamp(18px,3vw,30px);color:var(--n1)}
.screen-head.compact h2{font-size:clamp(17px,2.8vw,28px)}
.timer-chip,.prize-chip{padding:12px 16px;background:var(--y);color:var(--n0);font-family:var(--px);font-size:13px;line-height:1.3;white-space:nowrap;box-shadow:var(--bevel),var(--edge)}
.subtle{color:var(--ink-soft);line-height:1.55}

/* ---------- cómo jugar ---------- */
.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.rule-grid article{padding:24px}
.rule-grid .step{width:44px;height:44px;background:var(--y);color:var(--n0);display:grid;place-items:center;font-family:var(--px);font-size:16px;box-shadow:var(--bevel)}
.rule-grid h3{margin:16px 0 10px;font-size:13px;color:#fff}
.rule-grid p{line-height:1.55;margin:0}
.rule-grid .danger .step{background:var(--red);color:#fff}.rule-grid .gold .step{background:var(--orange)}
.callout{margin-top:28px;background:var(--y);color:var(--n0);padding:16px 18px;line-height:1.55;box-shadow:var(--bevel),var(--edge)}
.callout strong{color:var(--n0)}
.route-visual{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px;padding:22px}
.route-visual div{min-width:110px;display:grid;place-items:center;gap:4px;background:var(--n2);padding:10px;box-shadow:var(--screen-line)}
.route-visual b{font-size:24px}.route-visual span{font-weight:800;font-size:12px;color:#fff}.route-visual small{color:var(--muted);font-size:10px}
.route-visual i{font-style:normal;color:var(--y);font-family:var(--px);font-size:12px}
.credits{margin-top:20px;color:var(--ink-soft);font-size:11px;line-height:1.5}
.guide-image{display:block;width:100%;margin-top:18px}

/* ---------- Sharp Eye ---------- */
.mission,.question-card,.result-card,.prep-card{max-width:860px;margin:20px auto;padding:30px;text-align:center}
.mission h3,.question-card h3{font-size:clamp(15px,2.4vw,24px);margin:6px 0 14px;color:#fff}
.mission p,.question-card p,.prep-card p{line-height:1.55}
.result-card h2{font-size:clamp(18px,3vw,28px);color:#fff;margin:6px 0 12px}
.sharp-targets{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:22px 0}
.sharp-targets figure{margin:0;display:grid;justify-items:center;gap:8px;width:150px;padding:14px 10px;background:var(--n2);box-shadow:inset 0 0 0 3px var(--c,var(--n3))}
.sharp-targets img{width:84px;height:84px;object-fit:contain}
.sharp-targets figcaption b{display:block;font-size:14px;line-height:1.25}
.sharp-targets figcaption small{display:block;margin-top:4px;font-family:var(--px);font-size:8px;color:var(--y)}
.sharp-targets.compact{margin:0;gap:12px}
.sharp-targets.compact figure{width:auto;padding:6px}
.sharp-targets.compact img{width:52px;height:52px}
.sharp-watch{display:flex;align-items:center;justify-content:center;gap:16px;width:max-content;max-width:100%;margin:0 auto 22px;padding:10px 16px;background:var(--y);color:var(--n0);box-shadow:var(--bevel),var(--edge);font-family:var(--px);font-size:11px}
.icon-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;padding:18px;max-width:1000px;margin:0 auto;background:var(--n1);box-shadow:inset 0 0 0 6px var(--n1),inset 0 0 0 8px var(--n3),var(--frame)}
.sharp-icon{aspect-ratio:1;background:var(--n2);display:grid;place-items:center;animation:pop .22s steps(3) both;overflow:hidden;box-shadow:var(--screen-line)}
.sharp-icon img{width:90%;height:90%;object-fit:contain}
@keyframes pop{from{scale:.85;opacity:.2}to{scale:1;opacity:1}}
.question-category{display:inline-flex;align-items:center;gap:10px;margin:8px auto 12px;padding:8px 12px;background:var(--n2);font-size:14px;font-weight:800;color:#fff;box-shadow:var(--screen-line)}
.question-category img{width:56px;height:56px}
.question-category:empty{display:none}
.answer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.answer-grid button,.answer-list button{min-height:64px;border:0;border-radius:0;background:var(--n3);color:#fff;font-family:var(--px);font-size:20px;box-shadow:var(--bevel),var(--edge);transition:transform .08s}
.answer-grid button:hover,.answer-list button:hover{background:var(--blue)}
.answer-grid button:active{transform:translateY(3px)}
.answer-grid button:disabled{opacity:.6}
.answer-list{display:grid;gap:14px;margin-top:18px}
.answer-list button{text-align:left;padding:13px 16px;font-family:var(--sans);font-weight:800;font-size:16px}
.answer-list button.correct{background:var(--green);color:var(--n0)}.answer-list button.wrong{background:var(--red)}
.explain{background:var(--n2);padding:12px;color:#d6e3ff!important;box-shadow:var(--screen-line)}
.wide{max-width:920px}

/* ---------- categorías ---------- */
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 26px;margin-top:34px}
.category-card{position:relative;border:0;border-radius:0;background:var(--n1);color:#fff;padding:28px 14px 16px;min-height:178px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  box-shadow:inset 0 0 0 5px var(--n1),inset 0 0 0 8px var(--c,var(--n3)),var(--frame);transition:transform .1s}
.category-card:hover{transform:translateY(-4px)}
.category-card:active{transform:translateY(0)}
.cat-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.cat-head img{width:54px;height:54px}
.cat-head strong{position:absolute;top:-16px;left:50%;transform:translateX(-50%);max-width:92%;width:max-content;padding:7px 10px;background:var(--n0);color:#fff;font-family:var(--px);font-weight:400;font-size:9px;line-height:1.5;box-shadow:0 0 0 3px var(--y)}
.cat-symbols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.cat-symbols figure{margin:0;min-width:0;text-align:center}
.cat-symbols img{width:100%;max-width:48px;aspect-ratio:1;object-fit:contain}
.cat-symbols figcaption{margin-top:3px;font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-card.featured{box-shadow:inset 0 0 0 5px var(--n1),inset 0 0 0 8px var(--y),var(--frame),0 0 0 14px #fdda2455}
.daily-tag{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--px);font-size:8px;line-height:1.4;color:var(--n0);background:var(--y);padding:6px 8px;box-shadow:var(--edge)}

/* ---------- preparación de etapa ---------- */
.prep-card{max-width:760px}
.level-pill{display:inline-flex;gap:6px;padding:8px 12px;background:var(--y);color:var(--n0);font-family:var(--px);font-size:10px;line-height:1.4;margin:6px 0 14px;box-shadow:var(--bevel)}
.prep-card h2{font-size:clamp(17px,3.2vw,30px);margin:6px 0 10px;color:#fff}
.prep-symbols{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:20px 0}
.prep-symbols figure{margin:0}.prep-symbols img{width:100px;height:100px}
.prep-symbols figcaption{font-weight:800;font-size:12px;color:#d6e3ff}
.prep-symbols .adaptive-chip{align-self:center;flex:0 0 auto;margin:0}
.prep-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.prep-stats div{background:var(--n2);padding:12px 8px;box-shadow:var(--screen-line)}
.prep-stats small{display:block;color:var(--muted);font-family:var(--px);font-size:8px;line-height:1.5}
.prep-stats strong{display:block;margin-top:4px;font-family:var(--px);font-weight:400;font-size:15px;color:var(--y)}

/* ---------- Practice Hunt ---------- */
.game-hud{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 18px;margin-bottom:26px}
.game-hud div{text-align:center;border-right:2px dashed #2a5fc9;padding:0 6px;min-width:0}
.game-hud div:last-child{border:0}
.game-hud small{display:block;color:var(--muted);font-family:var(--px);font-size:8px;line-height:1.6}
.game-hud strong{display:block;font-family:var(--px);font-weight:400;font-size:clamp(11px,1.3vw,15px);line-height:1.5;color:var(--y);overflow-wrap:break-word}
.hunt-layout{display:grid;grid-template-columns:240px 1fr;gap:28px}
.target-panel{padding:20px;align-self:start}
.hunt-biome{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--y)!important}.hunt-biome:empty{display:none}
.target-symbols{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.target-symbols img{width:100%;box-shadow:var(--edge)}
#huntHint{font-size:13px;line-height:1.45}
.target-rule{margin-top:12px;padding:8px;background:var(--n2);color:#d6e3ff;font-size:11px;box-shadow:var(--screen-line)}
.arena-wrap{min-width:0}
.arena{position:relative;overflow:hidden;background:linear-gradient(180deg,#4f9dff 0,#1d55c4 55%,#0b2a6f 100%);height:clamp(320px,56vh,460px);isolation:isolate;
  box-shadow:inset 0 0 0 4px var(--n0),var(--frame)}
.arena:before,.arena:after{content:"";position:absolute;left:0;right:0;height:4px;background:#ffffff33}
.arena:before{top:33%}.arena:after{top:66%}
.arena-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(#fff 2px,transparent 2px),linear-gradient(90deg,#fff 2px,transparent 2px);background-size:60px 60px;transform:perspective(500px) rotateX(55deg) scale(1.5);transform-origin:bottom center}
.arena .arena-canvas{position:absolute;inset:0;display:block;z-index:2}.arena.arena-3d:before,.arena.arena-3d:after{display:none}
.arena.collapsed{height:72px!important;transition:height .25s}
.runner{position:absolute;width:116px;height:144px;will-change:transform;pointer-events:none;filter:drop-shadow(0 8px 10px #0008);transform-origin:center center}
.runner .char{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:.9;border-radius:34px;clip-path:inset(15% 0 0 0);filter:grayscale(.72) saturate(.38) brightness(.82) contrast(1.08);-webkit-mask-image:radial-gradient(ellipse 78% 84% at 50% 50%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 78% 84% at 50% 50%,#000 64%,transparent 100%)}
.runner .badge{position:absolute;width:36px;height:36px;border:2px solid #fff;box-shadow:0 0 4px #fff,0 0 14px currentColor;background:#061020;object-fit:contain;z-index:4}
.runner.pos-chest .badge{left:40px;top:60px}.runner.pos-head .badge{left:62px;top:22px;width:30px;height:30px}.runner.pos-arm .badge{left:10px;top:64px;width:30px;height:30px}.runner.pos-pack .badge{right:6px;top:50px;width:32px;height:32px}
.runner.air .char{filter:grayscale(.65) saturate(.42) brightness(.9) contrast(1.08)}
.runner.small{width:98px;height:124px}
.runner.fast:after{content:"";position:absolute;left:-24px;top:73px;width:28px;height:3px;background:linear-gradient(90deg,transparent,currentColor);opacity:.7}
.runner.target-runner .badge,.runner.distractor-runner .badge{animation:none}
.hunt-question{margin-top:28px;padding:22px;text-align:center}
.hunt-question h3{font-size:clamp(13px,2vw,18px);color:#fff;margin:6px 0 4px}
.answer-grid.count button{font-size:24px}
.replay-bar{display:flex;align-items:center;gap:14px;justify-content:space-between;margin-bottom:18px;padding:10px 14px;background:var(--green);color:var(--n0);box-shadow:var(--bevel),var(--edge)}
.replay-bar strong{font-family:var(--px);font-weight:400;font-size:11px}.replay-count b{font-family:var(--px);font-weight:400;font-size:15px}
.replay-bar .btn{padding:8px 14px;min-height:0;margin:0}

/* ---------- modalidades ---------- */
.mode-body{min-height:470px;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:20px;overflow:hidden;position:relative}
.mode-title{text-align:center}.mode-title h2{margin:6px 0 10px;font-size:clamp(16px,3vw,28px);color:#fff}.mode-title p{margin:0;font-size:15px}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;width:100%}
.mode-card{min-height:116px;border:0;border-radius:0;background:var(--n2);color:#fff;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;font-weight:800;box-shadow:var(--screen-line),var(--edge);transition:transform .1s,background .1s}
.mode-card:hover{background:var(--n4);transform:translateY(-2px)}
.mode-card img{width:64px;height:64px;object-fit:contain}.mode-card small{color:var(--muted);font-size:11px}
.mode-card.correct{background:var(--green);color:var(--n0)}.mode-card.wrong{background:var(--red)}
.practice-card{align-items:flex-start;text-align:left}.practice-card strong{font-size:14px;line-height:1.25}
.practice-card .practice-cat{font-family:var(--px);font-size:7px;line-height:1.5;color:var(--y)}
.practice-card .practice-dot{width:36px;height:36px;display:grid;place-items:center;font-size:18px;background:var(--n1);color:var(--sky);box-shadow:inset 0 0 0 2px currentColor}
.scenario-card{max-width:880px;margin:0 auto;background:var(--n2);padding:22px;text-align:center;box-shadow:inset 0 0 0 3px var(--y)}
.scenario-card h3{font-family:var(--sans);font-weight:800;font-size:clamp(19px,3vw,28px);line-height:1.3;margin:8px 0;color:#fff}
.scenario-card p{margin:0}
.follow-board{position:relative;min-height:350px;background:linear-gradient(180deg,#2f80ff 0,#1d55c4 60%,#0b2a6f 100%);overflow:hidden;box-shadow:inset 0 0 0 4px var(--n0)}
.follow-token{position:absolute;width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--n1);display:grid;place-items:center;color:#fff;transition:left .38s ease,top .38s ease,transform .18s,box-shadow .18s;box-shadow:inset 0 0 0 3px #4f9dff,var(--edge);z-index:2}
.follow-token .token-back{font-family:var(--px);font-size:24px}.follow-token img{width:66px;height:66px}
.follow-token.memorize{box-shadow:inset 0 0 0 4px var(--y),0 0 0 4px var(--n0),0 0 0 9px var(--y);transform:scale(1.12)}
.follow-token.clickable{cursor:pointer}.follow-token.clickable:hover{box-shadow:inset 0 0 0 4px var(--y),var(--edge)}
.follow-token.hit{box-shadow:inset 0 0 0 5px var(--green),0 0 0 6px var(--green)}.follow-token.miss{box-shadow:inset 0 0 0 5px var(--red),0 0 0 6px var(--red)}
.mode-instruction{text-align:center;padding:12px;color:#d6e3ff;background:var(--n2);box-shadow:var(--screen-line)}.mode-instruction strong{color:var(--y)}
.adaptive-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0 auto;padding:7px 11px;color:#fff;background:var(--n3);font-size:12px;font-weight:800;box-shadow:var(--edge)}
.adaptive-chip.daily{background:var(--y);color:var(--n0)}

/* ---------- premio y riesgo ---------- */
.reward-stage{max-width:700px;margin:20px auto;padding:34px;text-align:center;overflow:hidden}
.reward-stage:before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;background:repeating-conic-gradient(from 0deg,#ffffff0d 0 10deg,transparent 10deg 20deg);animation:spin 30s linear infinite}
.reward-stage>*{position:relative;z-index:1}
@keyframes spin{to{transform:rotate(1turn)}}
.reward-burst{font-size:58px;color:var(--y);text-shadow:4px 4px 0 var(--n0);margin-bottom:6px}
.reward-stage h2{font-size:clamp(18px,3.4vw,32px);margin:8px 0;color:var(--y);text-shadow:4px 4px 0 var(--n0)}
.reward-icon{font-size:96px}
.reward-mascot{width:min(280px,80%);height:220px;margin:-8px auto 0}.reward-mascot:not(.hidden)+.reward-burst{display:none}.reward-mascot:not(.hidden)~.reward-icon{display:none}
.risk-box{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.risk-box div{background:var(--n2);padding:12px;box-shadow:var(--screen-line)}
.risk-box small{display:block;color:var(--muted);font-family:var(--px);font-size:8px;line-height:1.6}
.risk-box strong{display:block;margin-top:4px;font-size:19px}
.fineprint{font-size:12px;color:var(--ink-soft)}
.panel .fineprint{color:var(--muted)}
.quick-result .reward-burst.fail{color:var(--red)}
.night-offer{background:radial-gradient(circle at 50% 0,#1d3a8a 0,#061639 75%)}
.night-offer h2{color:#fff;text-shadow:4px 4px 0 #000}

/* ---------- resultado y ranking ---------- */
.end-grid{display:grid;grid-template-columns:1fr .85fr;gap:36px;align-items:start}
.end-grid>*,.hero-grid>*,.admin-grid>*,.hunt-layout>*{min-width:0}
.result-final,.leaderboard-panel{padding:28px}
.result-final h2{color:#fff;font-size:clamp(16px,2.6vw,24px);margin:6px 0 12px}
.final-score{font-family:var(--px);font-size:clamp(34px,6vw,60px);color:var(--y);text-shadow:4px 4px 0 var(--n0);line-height:1.2}
.final-score small{font-family:var(--sans);font-size:14px;color:var(--muted);margin-left:8px;text-shadow:none}
.end-prize{font-size:24px;font-weight:800;margin:12px 0;color:#fff}
.end-category{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;margin-top:8px;color:#fff;background:var(--n2);box-shadow:var(--screen-line)}
.end-category img{width:30px;height:30px}
.end-mascot{float:right;width:170px;height:170px;margin:-10px -6px 0 8px}
.leaderboard-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.leaderboard-head h3{margin:4px 0;color:#fff;font-size:16px}
.mode-pill{padding:6px 8px;background:var(--n2);color:var(--muted);font-family:var(--px);font-size:8px;box-shadow:var(--screen-line)}
.tournament-close{margin:6px 0 0;color:var(--y)!important;font-size:12px;font-weight:800}
.leaderboard-panel ol{list-style:none;padding:0;margin:18px 0}
.leaderboard-panel li{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 6px;border-bottom:2px dashed #2a5fc9}
.leaderboard-panel li small{display:block;color:var(--muted)}
.leaderboard-panel li.me{background:var(--n4)}
.leaderboard-panel li.leader strong{color:var(--y)}.leaderboard-panel li.leader small{color:#ffe98a}
.rank{width:30px;height:30px;display:grid;place-items:center;background:var(--n3);color:#fff;font-family:var(--px);font-size:10px}
.leaderboard-panel li:first-child .rank{background:var(--y);color:var(--n0)}
.eligibility-chip{display:none;margin:12px auto 0;width:max-content;max-width:100%;padding:8px 12px;background:var(--n2);color:var(--muted);font-family:var(--px);font-size:8px;line-height:1.6}
.eligibility-chip.valid{display:block;background:var(--green);color:var(--n0)}.eligibility-chip.invalid{display:block;background:var(--y);color:var(--n0)}
.achievement-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}
.achievement{display:inline-flex;gap:6px;align-items:center;padding:7px 10px;background:var(--n2);color:#fff;font-size:11px;font-weight:800;box-shadow:var(--screen-line)}.achievement b{color:var(--y)}
.panel-inset{margin-top:16px;padding:14px;background:var(--n2);box-shadow:var(--screen-line)}
.breakdown-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-family:var(--px);font-size:8px;line-height:1.6;color:var(--muted)}
.breakdown-head strong{font-size:10px;color:var(--y);font-weight:400}
.breakdown-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.breakdown-item{background:var(--n1);padding:8px}.breakdown-item small{display:block;color:var(--muted);font-size:10px}.breakdown-item strong{display:block;margin-top:2px;font-size:15px}
.profile-bars{display:grid;gap:10px;margin-top:10px}
.profile-row{display:grid;grid-template-columns:96px 1fr 40px;gap:8px;align-items:center;font-size:11px;color:#d6e3ff}
.profile-track{height:10px;background:var(--n0)}
.profile-fill{height:100%;background:repeating-linear-gradient(90deg,var(--y) 0 8px,var(--y-lo) 8px 10px)}
.profile-row b{text-align:right}

/* ---------- administración ---------- */
.admin-login{max-width:500px;margin:60px auto;padding:30px;text-align:center}
.admin-login h2{color:#fff;font-size:20px}
.admin-login form{display:grid;gap:14px}
.admin-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
.admin-panel{padding:22px}.admin-panel h3{margin-top:0;color:#fff;font-size:13px}
.admin-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:30px}
.stat-card{background:var(--n1);color:#fff;padding:14px;box-shadow:var(--edge)}
.stat-card small{display:block;color:var(--muted);font-family:var(--px);font-size:7px;line-height:1.6}
.stat-card strong{display:block;font-family:var(--px);font-weight:400;font-size:18px;margin-top:6px;color:var(--y)}
.admin-board{margin-top:14px;max-height:350px;overflow:auto}
.admin-board table{width:100%;border-collapse:collapse;font-size:12px;color:#fff}
.admin-board th,.admin-board td{padding:8px;border-bottom:1px solid #2a5fc9;text-align:left}
.rules-summary{display:grid;gap:8px}
.rules-summary div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #2a5fc9;padding:7px 0;color:var(--muted)}
.category-bars{display:grid;gap:8px}
.catbar{display:grid;grid-template-columns:110px 1fr 30px;gap:8px;align-items:center;font-size:11px;color:#fff}
.catbar-track{height:10px;background:var(--n0);overflow:hidden}.catbar-fill{height:100%;background:var(--bar,var(--y))}
.toggle-row{display:flex;gap:9px;align-items:center;margin:12px 0;color:#fff}.toggle-row input{width:20px;height:20px;accent-color:var(--y)}

/* ---------- avisos ---------- */
.toast{position:fixed;z-index:80;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--n1);color:#fff;padding:12px 18px;opacity:0;pointer-events:none;transition:.2s;max-width:min(92vw,600px);text-align:center;font-weight:800;box-shadow:var(--frame)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:100;background:#061639cc;display:grid;place-items:center;padding:24px}
.modal-card{max-width:500px;padding:28px;text-align:center}
.modal-card h3{font-size:18px;margin:0 0 10px;color:#fff}.modal-card p{line-height:1.5}

/* ---------- acceso con Cognito (auth.js) ---------- */
.auth-gate{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px 16px;overflow:auto;
  background:radial-gradient(circle at 50% 0,#dbe8ff 0,transparent 60%),linear-gradient(180deg,#f7f9fe,#eef3fb)}
.auth-card{width:min(440px,100%);padding:30px 26px;text-align:center}
.auth-brand{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:0 0 14px}
.auth-brand .px-word:first-child{height:48px}.auth-brand .px-word:last-child{height:24px}
.auth-card h2{margin:0 0 12px;font-size:14px;color:#fff}
.auth-msg{min-height:20px;margin:0 0 10px;font-size:13px;font-weight:700;color:#bff5cf!important}
.auth-msg.error{color:#ffb3b3!important}
.auth-card form{display:grid;gap:14px;text-align:left}
.auth-card label{display:grid;gap:8px;font-family:var(--px);font-size:9px;line-height:1.5;color:var(--y)}
.auth-card input{min-height:48px;border:0;border-radius:0;padding:12px 14px;font-size:16px;font-weight:700;color:var(--n0);background:#fff;box-shadow:inset 3px 3px 0 0 #d6e2f7,var(--edge)}
.auth-card input:focus{outline:4px solid var(--y);outline-offset:3px}
.auth-card small{color:var(--muted);font-size:12px;line-height:1.5}
.auth-card .btn{width:100%;margin-top:4px}
.auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.auth-link{border:0;background:none;padding:6px 0;color:#fff;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.auth-link:hover{color:var(--y)}
.auth-guest{display:grid;gap:10px;margin-top:6px;text-align:center}
.auth-guest span{font-family:var(--px);font-size:9px;color:var(--muted)}

/* ---------- modo exhibición ---------- */
.attract{position:fixed;inset:0;z-index:60;background:var(--n0);cursor:pointer}.attract.active{display:block}
.attract-arena{position:absolute;inset:0}.attract-arena .arena-canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.attract-overlay{position:absolute;inset:0;display:grid;grid-template-columns:1fr 380px;grid-template-rows:auto 1fr auto;gap:20px;padding:36px 44px;pointer-events:none;background:linear-gradient(180deg,#061639e6 0,#06163900 32%,#06163900 70%,#061639e6 100%)}
.attract-head{grid-column:1/2}
.brand-big{margin:0;display:flex;gap:16px;align-items:flex-end}
.brand-big .brand-devex{height:96px}.brand-big .brand-reflex{height:44px}
.attract-prize{margin:16px 0 6px;font-family:var(--px);font-size:18px;line-height:1.5;color:var(--y);text-shadow:3px 3px 0 var(--n0)}
.attract-winner{margin:10px 0;font-size:24px;font-weight:800;color:var(--n0);padding:10px 14px;display:inline-block;background:var(--y);box-shadow:var(--edge)}
.attract-side{grid-column:2;grid-row:1/3;padding:22px;align-self:start}
.attract-countdown{font-family:var(--px);font-size:26px;margin:0 0 16px;color:var(--y)!important;font-variant-numeric:tabular-nums}
.attract-board{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.attract-board li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;color:#fff}
.attract-board .rank{color:#fff}.attract-board small{display:block;font-size:10px;color:var(--muted)}.attract-board strong{color:var(--y)}
.attract-daily{margin:14px 0 0;color:#ffe98a!important;font-weight:800;font-size:13px}
.attract-cta{grid-column:1/-1;align-self:end;justify-self:center;text-align:center;font-family:var(--px);font-size:22px;line-height:1.5;color:var(--n0);background:var(--y);padding:14px 22px;margin:0;box-shadow:var(--bevel),var(--edge);animation:ctaBlink 1s steps(2) infinite}
@keyframes ctaBlink{50%{opacity:.55}}

/* ---------- cacería nocturna ---------- */
.arena.night-on{cursor:crosshair;touch-action:none}
.night-mask{position:absolute;inset:0;z-index:6;pointer-events:none;--r:100px;--x:50%;--y:50%;
  background:radial-gradient(circle at var(--x) var(--y),rgba(255,236,180,.10) 0,rgba(255,236,180,.04) calc(var(--r)*.7),rgba(2,4,12,.995) calc(var(--r) + 34px))}
.night-mask:after{content:"";position:absolute;left:var(--x);top:var(--y);width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 1px #ffe9b030,inset 0 0 40px #ffe9b018}
#huntAnswers.keypad{grid-template-columns:repeat(3,minmax(64px,96px));justify-content:center;gap:12px}
#huntAnswers.keypad .keypad-display{grid-column:1/-1;font-family:var(--px);font-size:30px;text-align:center;padding:12px;background:var(--n0);color:var(--y);min-height:66px;box-shadow:var(--screen-line)}
#huntAnswers.keypad button{font-size:20px;min-height:58px}
#huntAnswers.keypad button.ok{background:var(--y);color:var(--n0)}
#huntAnswers.keypad button:disabled{opacity:.45}

/* ---------- alto contraste ---------- */
#contrastBtn svg{display:block;margin:auto}
#contrastBtn[aria-pressed="true"]{background:var(--n0);color:var(--y)}
html.hc body{background:#fff}html.hc .px-sky,html.hc #three-bg{display:none}
html.hc{--muted:#e3ecff;--ink-soft:#061639;--n1:#031a4d;--n2:#020f30}
html.hc .panel{box-shadow:inset 0 0 0 6px var(--n1),inset 0 0 0 8px #fff,var(--frame)}
html.hc .sharp-icon{box-shadow:inset 0 0 0 3px #fff}html.hc .sharp-icon img{filter:contrast(1.15) saturate(1.2)}
html.hc .runner .badge{width:46px;height:46px;border-width:3px}html.hc .runner .char{opacity:.55}
html.hc .target-symbols img{outline:3px solid #fff;outline-offset:-3px}
html.hc .mode-card,html.hc .answer-grid button{box-shadow:inset 0 0 0 3px #fff,var(--edge)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-grid{gap:30px}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .icon-board{grid-template-columns:repeat(8,minmax(0,1fr))}
  .admin-stats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:880px){
  .topbar{grid-template-columns:1fr auto;gap:14px}
  .hud-mini{grid-column:1/-1;grid-row:2;justify-self:stretch}
  .hero-grid,.end-grid{grid-template-columns:1fr}
  .hero-visual{max-width:560px;width:100%;margin:0 auto}
  .arcade-screen{min-height:300px}.mascot-stage{height:300px}
  .rule-grid{grid-template-columns:1fr 1fr}
  .hunt-layout{grid-template-columns:1fr;gap:22px}
  .target-panel{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:16px;padding:16px}
  .target-panel .hunt-biome,.target-panel .eyebrow,.target-rule{grid-column:1/-1}
  .target-symbols{grid-template-columns:repeat(3,60px);margin:0}
  .admin-grid{grid-template-columns:1fr}
  .attract-overlay{grid-template-columns:1fr;padding:20px}.attract-side{grid-column:1;grid-row:auto}
  .brand-big .brand-devex{height:60px}.brand-big .brand-reflex{height:30px}
  .attract-prize{font-size:13px}.attract-cta{font-size:14px}
  .end-mascot{width:120px;height:120px}
}
@media(max-width:600px){
  .app-shell{width:calc(100% - 32px);padding-top:14px}
  .topbar{margin-bottom:18px}
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .brand{gap:6px;min-width:0}.brand .brand-devex{height:26px}.brand .brand-reflex{height:14px}
  .top-actions{gap:8px}.icon-btn{width:36px;height:36px;font-size:15px}
  .hud-mini{gap:10px}.hud-mini span{font-size:10px;padding:6px 8px}.hud-mini strong{font-size:8px}
  .hero-banner{font-size:9px;padding:8px 12px}
  .hero-copy h1{font-size:clamp(22px,7.4vw,30px)}
  .input-row{flex-direction:column;align-items:stretch}.input-row .btn{width:100%}
  .home-daily{display:flex}
  .arcade{padding:10px 12px 14px}.arcade-title{font-size:9px}
  .arcade-screen{min-height:250px}.mascot-stage{height:250px}.mascot-orbit{scale:.8}
  .screen-head{margin-bottom:18px}.screen-head .btn{padding:10px 12px;min-height:42px;font-size:9px}
  .screen-head.compact h2{font-size:16px}
  .timer-chip,.prize-chip{padding:9px 10px;font-size:10px}
  .rule-grid{grid-template-columns:1fr;gap:24px}
  .mission,.question-card,.result-card,.prep-card{padding:22px 16px;margin:12px auto}
  .sharp-targets{gap:12px}.sharp-targets figure{width:calc(50% - 8px);max-width:150px}.sharp-targets img{width:64px;height:64px}
  .sharp-targets.compact figure{width:auto}.sharp-targets.compact img{width:40px;height:40px}
  .sharp-watch{gap:10px;padding:8px 10px;font-size:9px;margin-bottom:18px}
  .icon-board{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:14px}
  .answer-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 18px}
  .category-card{padding:26px 8px 14px;min-height:0;gap:8px}
  .cat-head img{width:44px;height:44px}.cat-head strong{font-size:8px;padding:6px 8px}
  .cat-symbols{gap:4px}.cat-symbols figcaption{display:none}
  .prep-stats{gap:8px}.prep-stats div{padding:8px 4px}.prep-stats strong{font-size:12px}
  .prep-symbols img{width:76px;height:76px}
  .game-hud{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 0;padding:12px 10px;margin-bottom:20px}
  .game-hud div{padding:0 6px}.game-hud div:nth-child(2){border:0}
  .game-hud small{font-size:7px}.game-hud strong{font-size:10px}
  .target-panel{grid-template-columns:auto 1fr;padding:12px 14px;row-gap:4px}
  .target-panel .eyebrow{margin:0}
  .target-symbols{grid-template-columns:repeat(3,44px);gap:8px}
  #huntHint{font-size:12px;margin:0}.target-rule{display:none}
  .arena{height:clamp(260px,46vh,340px)}
  .runner{width:92px;height:116px}
  .runner.pos-chest .badge{width:28px;height:28px;left:32px;top:50px}.runner.pos-head .badge{width:24px;height:24px;left:50px;top:16px}.runner.pos-arm .badge{width:24px;height:24px;left:8px;top:52px}.runner.pos-pack .badge{width:26px;height:26px;right:4px;top:40px}
  .hunt-question{margin-top:22px;padding:18px 14px}
  .mode-body{min-height:410px;padding:18px 14px}
  .mode-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .mode-card{min-height:100px;padding:10px}.mode-card img{width:54px;height:54px}
  .follow-board{min-height:310px}.follow-token{width:68px;height:68px;margin:-34px 0 0 -34px}.follow-token img{width:52px;height:52px}.follow-token .token-back{font-size:18px}
  .route-visual i{display:none}.route-visual div{min-width:calc(50% - 8px)}
  .reward-stage{padding:26px 16px}.reward-mascot{height:180px}
  .risk-box{grid-template-columns:1fr}
  .reward-actions .btn{flex:1 1 100%}
  .result-final,.leaderboard-panel{padding:22px 16px}
  .final-score small{display:block;margin:6px 0 0}
  .breakdown-grid{grid-template-columns:repeat(2,1fr)}
  .profile-row{grid-template-columns:80px 1fr 36px}
  .achievement-row{justify-content:flex-start}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .catbar{grid-template-columns:90px 1fr 24px}
  .brand-big .brand-devex{height:44px}.brand-big .brand-reflex{height:22px}
}
@media(max-width:380px){
  .hud-mini span{font-size:9px}
}
@media(max-width:370px){
  .brand .brand-reflex{display:none}
  .top-actions{gap:6px}.icon-btn{width:34px;height:34px}
}
@media(max-width:340px){
  .category-grid{gap:44px 14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}