@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:wght@300;400;500;700&display=swap');
:root{--bgGrad:radial-gradient(circle at 50% -12%,#fffdfb 0,#fcf6f1 50%,#f5e8e1 100%);--bg:#fcf6f1;--panel:#fffdfb;--ink:#2a1320;--espresso:#2a1320;--muted:#6b5560;--fill:#8c1c40;--onFill:#fff8f2;--onFillMuted:#f6dfe5;--gold:#f2b233;--star:#b8790a;--goldHalo:#f2b23355;--goldText:#8c1c40;--accentText:#8c1c40;--line:#e8d6d3;--soft:#f7ebe7;--btnLight:#fffdfb;--key:#f4e6e2;--keyOp:#f1dadf;--displayBg:#f7ebe7;--roll:#fffaf7;--rollLine:#f1e1dc;--brokenLine:#d9bfc4;--brokenText:#b99aa3;--brokenSlash:#c8949f;--starOff:#e6d2d2;--coral:#b3261e;--mint:#2e6b52;--shadow:#2a132014;--shadowSoft:#2a13200a;--shadowBig:#1a081266;--overlay:#2a0f1ce6;--toastBg:#2a0f1cf2;--toastInk:#fff8f2;color-scheme:light}
:root[data-theme="night"]{--bgGrad:radial-gradient(circle at 50% -12%,#36302a 0,#26221d 55%,#201c18 100%);--bg:#26221d;--panel:#322d27;--ink:#f3ede2;--espresso:#f3ede2;--muted:#c9bfaf;--fill:#d9ae4a;--onFill:#26221d;--onFillMuted:#4a3b1c;--gold:#d9ae4a;--star:#d9ae4a;--goldHalo:#d9ae4a44;--goldText:#d9ae4a;--accentText:#d9ae4a;--line:#4d463c;--soft:#3a342d;--btnLight:#322d27;--key:#3e3830;--keyOp:#463e32;--displayBg:#211e1a;--roll:#2c2823;--rollLine:#3c362e;--brokenLine:#5c5448;--brokenText:#7a7062;--brokenSlash:#8a6f3a;--starOff:#524a3f;--coral:#f08a7e;--mint:#7fcaa6;--shadow:#00000040;--shadowSoft:#00000026;--shadowBig:#000000aa;--overlay:#080706e6;--toastBg:#1f1c18f2;--toastInk:#f3ede2;color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bgGrad);background-attachment:fixed;color:var(--ink);font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{display:flex;justify-content:center}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hidden{display:none!important}
.app{width:min(100%,460px);min-height:100svh;padding:max(10px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:7px}
header{display:flex;align-items:center;justify-content:space-between;min-height:54px;border-bottom:1px solid var(--line);padding:0 2px 8px;gap:8px}
.brand{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(20px,5.5vw,26px);line-height:1.05;color:var(--espresso)}
.brand::before{content:"Nacho Ruiz · Técnicas Védicas";display:block;font-family:"Inter",sans-serif;font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;white-space:nowrap}
.brand b{color:var(--accentText)}
.hdrbtns{display:flex;gap:5px}
.iconbtn{min-width:38px;height:38px;border-radius:19px;padding:0 10px;font-size:16px;font-weight:800;background:var(--btnLight);color:var(--espresso);border:1px solid var(--line);box-shadow:0 2px 7px var(--shadow)}
.screen{display:none;flex:1;flex-direction:column;gap:8px}
.screen.active{display:flex}

/* Menu */
.hero{padding:10px 2px 2px}
.tagline{font-family:"Fraunces",Georgia,serif;font-size:clamp(20px,6vw,26px);line-height:1.2;margin:0;color:var(--espresso)}
.tagline em{font-style:normal;color:var(--accentText)}
.modes{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.modeBtn{border:1px solid var(--line);border-radius:999px;padding:13px 20px;text-align:left;background:var(--soft);color:var(--espresso)}
.modeBtn strong{display:block;font-size:17px;font-weight:800}
.modeBtn span{display:block;font-size:13px;margin-top:2px;color:var(--muted);line-height:1.3}
.modeBtn.main{background:var(--fill);border-color:var(--fill);color:var(--onFill)}
.modeBtn.main span{color:var(--onFillMuted)}
.startRow{display:flex;flex-direction:column;gap:6px;padding:0 4px 4px}
.startRow>span{font-size:12px;color:var(--muted);font-weight:600}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chip{border:1px solid var(--line);background:var(--btnLight);color:var(--espresso);border-radius:999px;padding:7px 4px;font-weight:700;font-size:13px}
.foot{margin-top:auto;text-align:center;padding-top:12px;font-size:12px}
.foot a{color:var(--muted);text-decoration:none;letter-spacing:.04em}

/* Game */
.levelRow{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.dots{display:flex;gap:5px}.dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--gold);display:block}.dots i.on{background:var(--gold)}.dots i.cur{box-shadow:0 0 0 3px var(--goldHalo)}
.mission{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px}
.m{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:5px 8px;text-align:center;box-shadow:0 5px 20px var(--shadowSoft)}
.m small{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m strong{font-size:20px;color:var(--espresso)}
.m.target{border-color:var(--gold)}.m.target strong{font-family:"Fraunces",Georgia,serif;font-size:26px;line-height:1.1;color:var(--espresso)}
.calc{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:8px;box-shadow:0 8px 28px var(--shadow);display:flex;flex-direction:column;gap:6px}
.roll{height:58px;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;padding:4px 10px;background:repeating-linear-gradient(var(--roll) 0 18px,var(--rollLine) 18px 19px);border-radius:10px 10px 4px 4px;border:1px dashed var(--line);font-variant-numeric:tabular-nums;scrollbar-width:none}
.roll::-webkit-scrollbar{display:none}
.roll div{font-size:14px;line-height:19px;text-align:right;color:var(--muted);white-space:nowrap}
.roll div:first-child{margin-top:auto}
.roll div.last{color:var(--espresso);font-weight:700}
.roll div.hit{color:var(--mint);font-weight:800}
.display{display:flex;align-items:center;justify-content:space-between;background:var(--displayBg);border:1px solid var(--line);border-radius:12px;padding:4px 12px;min-height:50px}
.opInd{font-size:20px;font-weight:800;color:var(--goldText);min-width:18px}
.display output{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--espresso);overflow:hidden;text-overflow:ellipsis}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.key{height:50px;border:0;border-radius:999px;background:var(--key);color:var(--espresso);font-size:21px;font-weight:700;position:relative;transition:transform .08s}
.key:active{transform:scale(.95)}
.key.op{background:var(--keyOp);color:var(--goldText)}
.key.eq{background:var(--fill);color:var(--onFill)}
.key.clear{color:var(--coral)}
.key.broken{background:transparent;border:1.5px dashed var(--brokenLine);color:var(--brokenText);cursor:not-allowed}
.key.broken::after{content:"";position:absolute;left:28%;right:28%;top:50%;height:2px;background:var(--brokenSlash);transform:rotate(-28deg);border-radius:2px}
.fnkeys{grid-template-columns:repeat(2,1fr)}
.fnkeys .key{height:62px;font-size:24px}
.fnkeys .key.fn{background:var(--keyOp);color:var(--goldText)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.action{border:0;border-radius:999px;padding:12px;font-weight:800;font-size:15px}
.reset{background:var(--key);color:var(--espresso)}
.hintbtn{background:var(--keyOp);color:var(--goldText)}
.hintbtn:disabled{opacity:.45}
.pass{background:var(--fill);color:var(--onFill)}
.solvedBar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--gold);border-radius:999px;padding:5px 5px 5px 18px}
.solvedBar .pass{padding:11px 18px}
.solvedInfo small{display:block;font-size:12px;color:var(--muted)}
.stars{color:var(--star);font-size:20px;letter-spacing:2px}.stars .off{color:var(--starOff)}
.msg{min-height:18px;margin:0;text-align:center;font-size:13px;line-height:1.35;color:var(--muted)}
.msg.err{color:var(--coral);font-weight:700}.msg.hint{color:var(--goldText);font-weight:700}

/* Overlay / modal */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:20;display:flex;padding:16px;overflow:auto}.overlay>.modal{margin:auto}
.modal{width:min(100%,410px);background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:20px;text-align:center;box-shadow:0 24px 70px var(--shadowBig);color:var(--espresso)}
.modal h2{font-family:"Fraunces",Georgia,serif;font-size:26px;margin:2px 0 6px}
.modal h2 b{color:var(--accentText)}
.modal p{color:var(--muted);line-height:1.45;margin:6px 0;font-size:15px}
.modal ul{text-align:left;padding-left:20px;margin:8px 0;line-height:1.45;font-size:14.5px}
.modal li{margin-bottom:4px}
.modal .primary{width:100%;border:0;border-radius:999px;padding:13px;background:var(--fill);color:var(--onFill);font-weight:800;font-size:16px;margin-top:10px}
.modal .secondary{width:100%;border:1px solid var(--line);border-radius:999px;padding:11px;background:var(--soft);color:var(--espresso);font-weight:700;margin-top:8px}
.bigStars{font-size:30px;color:var(--star);letter-spacing:3px}.bigStars .off{color:var(--starOff)}
.routes{list-style:none;padding:0!important;text-align:center!important}
.routes li{background:var(--soft);border-radius:12px;padding:6px 10px;font-variant-numeric:tabular-nums}
.badgeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 6px;margin:10px 0 4px}.badge em{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:500}
.badge{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;line-height:1.2;color:var(--muted)}
.badge i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:17px;border:2px dashed var(--brokenLine);color:var(--brokenText);background:var(--soft)}
.badge.got{color:var(--espresso);font-weight:700}
.badge.got i{border:2px solid var(--gold);color:var(--onFill);background:var(--fill)}
.newBadges{display:flex;justify-content:center;gap:12px;margin:8px 0}
.toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--toastBg);color:var(--toastInk);padding:12px 18px;border-radius:16px;font-weight:800;opacity:0;pointer-events:none;z-index:30;text-align:center;max-width:86vw;border:1px solid var(--gold)}
.toast.show{animation:toast 1.6s ease}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-44%)}15%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0}}

@media (max-height:620px){
  .app{gap:5px;padding-top:max(6px,env(safe-area-inset-top))}
  header{min-height:46px;padding-bottom:5px}
  .brand{font-size:20px}.iconbtn{min-width:34px;height:34px;font-size:15px}
  .screen{gap:5px}
  .m{padding:3px 6px}.m strong{font-size:18px}.m.target strong{font-size:22px}
  .calc{padding:6px;gap:5px;border-radius:18px}
  .roll{height:42px}.display{min-height:42px}.display output{font-size:26px}
  .keys{gap:5px}.key{height:42px;font-size:19px}
  .fnkeys .key{height:52px}
  .action{padding:10px}.solvedBar .pass{padding:9px 16px}
  .modeBtn{padding:10px 18px}.modeBtn strong{font-size:16px}
  .hero{padding-top:4px}
}

.actions.single{grid-template-columns:1fr}
.textlink{border:0;background:none;color:var(--goldText);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:2px;align-self:center}
.yest{list-style:none;padding:0!important;text-align:left}
.yest li{background:var(--soft);border-radius:14px;padding:8px 12px;margin-bottom:8px}
.yest b{font-family:'Fraunces',Georgia,serif;font-size:18px}
.yest span{display:block;font-variant-numeric:tabular-nums;color:var(--espresso)}
.broke{font-size:13px}

/* Vertical balance (v2.1): even air on the menu, keys grow with the screen */
.app{padding-top:max(16px,env(safe-area-inset-top))}
#menu{justify-content:space-evenly;gap:0}
#menu .hero{padding:0 2px}
#menu .modes{margin-top:0}
#menu .foot{margin-top:0;padding-top:0}
#game{justify-content:space-evenly;gap:6px}
.key{height:clamp(42px,calc((100svh - 350px)/4 - 6px),60px)}
.fnkeys .key{height:clamp(52px,calc((100svh - 350px)/3 - 6px),72px)}
@media (max-height:620px){.app{padding-top:max(14px,env(safe-area-inset-top))}header{min-height:48px}}
@media (min-height:700px) and (min-width:600px){#menu{justify-content:center;gap:28px}#game{justify-content:center;gap:12px}}

.themeBtn{font-size:17px;padding:0 9px}
/* gold accents in day mode (large text / graphics only) */
:root:not([data-theme="night"]) .key.eq{color:var(--gold);font-size:24px}
:root:not([data-theme="night"]) .modeBtn.main{box-shadow:inset 0 0 0 2px var(--gold)}
:root:not([data-theme="night"]) .badge.got i{color:var(--gold)}


/* Gimnasia Mental: Memento-style quiet menu. Gameplay controls are unchanged. */
@media(min-width:760px){.app{width:min(100%,720px);padding-inline:22px}#game{width:min(100%,600px);margin-inline:auto}}
#menu{width:min(100%,620px);margin-inline:auto;justify-content:flex-start;gap:0;padding:0 4px}
#menu .hero{padding:38px 0 0}
#menu .hero::before{content:'GIMNASIA MENTAL';display:block;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--muted);margin:0 0 15px}
#menu .tagline{font:400 15px/1.55 Inter,sans-serif;color:var(--ink);max-width:470px;margin-bottom:36px}
#menu .tagline em{font-style:normal;color:var(--ink)}
header{border-bottom:0;min-height:80px}
.brand{font-size:clamp(32px,6vw,50px);font-weight:500;line-height:1.1;letter-spacing:0}
.brand b{color:var(--accentText);font-style:italic;font-weight:500}
.brand::before{color:var(--accentText);font-size:9px;letter-spacing:2px;margin-bottom:24px}
#menu .modes{margin:0;gap:0;border-top:1px solid var(--line)}
#menu .modeBtn,#menu .modeBtn.main{position:relative;display:block;min-height:78px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);box-shadow:none;padding:15px 30px 13px 0}
#menu .modeBtn::after{content:'›';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--accentText)}
#menu .modeBtn strong{font:500 22px/1.18 Fraunces,Georgia,serif}
#menu .modeBtn span,#menu .modeBtn.main span{font-size:12px;color:var(--muted);margin-top:3px}
#menu .startRow{padding:12px 0 15px;border-bottom:1px solid var(--line)}
#menu .foot{padding:25px 0 0}
@media(max-height:620px){header{min-height:57px}.brand{font-size:26px}.brand::before{margin-bottom:5px;font-size:8px}#menu .hero{padding-top:12px}#menu .hero::before{margin-bottom:8px}#menu .tagline{font-size:13px;margin-bottom:10px}#menu .modeBtn,#menu .modeBtn.main{min-height:58px;padding-block:9px}#menu .modeBtn strong{font-size:19px}#menu .startRow{padding:7px 0}#menu .foot{padding-top:10px}}
@media(max-width:390px){header{position:relative;display:block;min-height:115px;padding:0 0 6px}.brand{max-width:205px;font-size:29px}.brand::before{white-space:nowrap;font-size:8px}.hdrbtns{position:absolute;right:0;top:23px;gap:3px}.iconbtn{min-width:33px;height:34px;padding:0 7px;font-size:14px}.app{overflow-x:hidden}#menu{width:100%}}