:root{color-scheme:dark;--bg:#090d1b;--panel:#11182a;--panel2:#151e32;--line:#26314a;--blue:#95e4ff;--mint:#70f2ce;--white:#f4f8ff;--muted:#8995ae;--pink:#ff8fc1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -25%,#1c3152 0,transparent 46%),var(--bg);color:var(--white);font-family:'DM Sans',system-ui,sans-serif;min-height:100vh}.app-shell{max-width:1120px;margin:auto;padding:0 28px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #202a40}.brand{display:flex;align-items:center;gap:10px;color:#dcecff;text-decoration:none;font-size:11px;line-height:1.15;letter-spacing:1.4px;font-weight:700}.brand b{color:var(--blue);font-size:14px}.brand-mark{width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#a6eeff,#5ac8ef);color:#10182d;display:grid;place-items:center;font-size:32px;line-height:20px;box-shadow:0 0 24px #71dfff55}.install-btn{border:1px solid #547a9b;background:#17243a;color:var(--blue);padding:9px 15px;border-radius:12px;font-weight:700}.hero{display:grid;grid-template-columns:1fr .9fr;align-items:center;min-height:270px;padding:23px 30px 20px;overflow:hidden}.eyebrow{font-size:10px;color:#9dafca;letter-spacing:1.6px;font-weight:800}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);margin-right:7px;box-shadow:0 0 9px var(--mint)}h1{font:700 clamp(38px,5vw,58px)/.98 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:13px 0;color:#f6f8ff}h1 em{font-style:normal;color:var(--blue);text-shadow:0 0 25px #79dfff55}.hero-copy p{color:#a5b2c9;max-width:400px;line-height:1.55;font-size:14px;margin:15px 0 18px}.hero-actions{display:flex;align-items:center;gap:16px}.primary{border:0;border-radius:13px;background:linear-gradient(120deg,#9cedff,#73d9ff);color:#10172a;font-size:14px;font-weight:900;letter-spacing:.4px;padding:13px 23px;box-shadow:0 5px 22px #63c9ec40;cursor:pointer;transition:.15s}.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.key-hint{font-size:10px;color:#92a0b8}.key-hint kbd{border:1px solid #3b4863;background:#172136;border-radius:4px;padding:3px 5px;margin-left:3px;color:#dceaff}.hero-art{height:215px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #49678655;border-radius:50%;transform:rotate(-20deg)}.orbit-one{width:280px;height:142px}.orbit-two{width:200px;height:220px;transform:rotate(54deg)}.snake-illustration{position:relative;z-index:1;display:flex;align-items:center;transform:rotate(-20deg);filter:drop-shadow(0 7px 16px #50dffc55)}.snake-illustration i{display:block;width:38px;height:35px;background:linear-gradient(145deg,#abf3ff,#66d4ed);border:3px solid #18253a;border-radius:12px;margin-left:-5px;box-shadow:inset -4px -5px 0 #56bedb}.snake-illustration i:nth-child(2),.snake-illustration i:nth-child(4){transform:translateY(17px)}.snake-illustration i:nth-child(3),.snake-illustration i:nth-child(5){transform:translateY(33px)}.snake-illustration .snake-head{width:48px;height:43px;border-radius:15px;background:#a4edff;position:relative}.snake-head b{width:6px;height:6px;background:#10172a;border-radius:50%;position:absolute;right:9px;top:8px}.snake-head b:last-child{top:auto;bottom:8px}.star-big{position:absolute;z-index:2;color:#ffe77c;text-shadow:0 0 20px #ffd761aa;font-size:43px;right:20%;top:28%}.spark{position:absolute;color:#9be9ff}.s1{top:22%;left:24%;font-size:22px}.s2{bottom:14%;right:28%;font-size:28px}.s3{top:21%;right:13%;font-size:17px}.game-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);gap:17px;margin:2px 0 28px}.game-card,.panel{border:1px solid #26334b;background:linear-gradient(145deg,#131b2e,#0e1424);border-radius:19px;padding:17px}.game-head{display:flex;align-items:center;justify-content:space-between;padding:1px 2px 14px}.game-head h2{font:600 18px 'Space Grotesk',sans-serif;margin:5px 0 0}.score-box{display:flex;align-items:center;gap:10px;background:#1a2740;border:1px solid #31425f;border-radius:12px;padding:7px 12px}.score-box span{font-size:9px;letter-spacing:1px;color:#a5b2c8}.score-box b{color:var(--mint);font:700 22px 'Space Grotesk',sans-serif}.board-wrap{height:310px;position:relative;background:#090f1d;border:1px solid #23324b;border-radius:13px;overflow:hidden}canvas{width:100%;height:100%;display:block}.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#080d1abf;backdrop-filter:blur(3px);padding:18px}.game-overlay.hidden{display:none}.overlay-icon{color:#ffdf70;font-size:30px;text-shadow:0 0 16px #ffdf70}.game-overlay h3{font:600 18px 'Space Grotesk',sans-serif;margin:5px}.game-overlay p{font-size:12px;color:#a4b2c9;margin:5px 0 14px}.small{font-size:12px;padding:10px 17px}.game-controls{display:flex;justify-content:space-between;align-items:center;padding:12px 2px 0}.control-tip{font-size:10px;color:#9aa8c0}.sound-toggle{background:transparent;border:0;color:#a9bad0;font-size:12px;cursor:pointer}.sound-toggle[aria-pressed=true]{color:var(--mint)}.dpad{display:none}.side-column{display:flex;flex-direction:column;gap:13px}.panel{padding:16px}.panel-title{display:flex;gap:10px;align-items:center;margin-bottom:13px}.panel-title>span{width:34px;height:34px;border-radius:11px;background:#1b2e46;color:var(--blue);display:grid;place-items:center;font-size:17px}.panel-title h3{font:600 14px 'Space Grotesk',sans-serif;margin:0}.panel-title p{font-size:10px;color:var(--muted);margin:3px 0 0}.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.skin{position:relative;min-height:60px;background:#192238;border:1px solid #2a3650;border-radius:11px;color:#dce7f8;cursor:pointer;font-size:10px;padding:8px 3px 6px}.skin:hover{border-color:#6cb7d6}.skin.selected{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:#1b3045}.skin.locked{opacity:.57;cursor:default}.skin .skin-icon{display:block;font-size:19px;margin-bottom:3px}.skin small{color:#a1afc4;font-size:8px}.difficulty-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.difficulty-options button{border:1px solid #2c3851;border-radius:9px;background:#182137;color:#aab8cf;padding:8px 3px;font-size:9px;cursor:pointer}.difficulty-options button span{display:block;font-size:17px;margin-bottom:4px}.difficulty-options button.active{border-color:#72cde7;background:#193149;color:#dff8ff}.best-card{display:flex;align-items:center;gap:11px;border-radius:14px;padding:13px 15px;background:linear-gradient(105deg,#242742,#19213a);border:1px solid #3d3d5b}.best-card>span:first-child{font-size:27px}.best-card div{display:flex;flex-direction:column;gap:1px}.best-card small{font-size:8px;letter-spacing:1px;color:#b7bad2}.best-card b{font:700 21px 'Space Grotesk';color:#ffe37c}.best-label{margin-left:auto;color:#cfbaff;font-size:8px;letter-spacing:.7px}footer{text-align:center;color:#77849d;font-size:10px;padding:0 0 20px}footer span{color:var(--blue);margin:0 5px}@media(max-width:760px){.app-shell{padding:0 15px}.topbar{height:65px}.hero{grid-template-columns:1fr .6fr;padding:23px 5px 14px;min-height:230px}.hero-art{transform:scale(.78);margin-left:-20px}.hero-copy p{font-size:12px}.key-hint{max-width:95px;line-height:1.6}.game-layout{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.side-column .best-card{grid-column:1/-1}.board-wrap{height:min(62vw,340px);min-height:245px}.game-card{padding:13px}.game-controls{padding-bottom:5px}.dpad{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0 0}.dpad>div{display:flex;gap:4px}.dpad button{width:43px;height:36px;border:1px solid #34435e;border-radius:9px;background:#1b2840;color:#d9f5ff;font-size:14px;touch-action:manipulation}.dpad button:active{background:#286081}.difficulty-options{gap:4px}.difficulty-options button{font-size:8px}}@media(max-width:430px){.hero{grid-template-columns:1fr .43fr;min-height:218px}.hero-art{transform:scale(.6);margin-left:-68px;width:200px}.hero-copy p{max-width:250px}.hero-actions{gap:9px}.primary{padding:12px 16px}.side-column{grid-template-columns:1fr}.side-column .best-card{grid-column:auto}.panel{padding:14px}.board-wrap{min-height:240px}.control-tip{font-size:9px}}

/* El menú agrupa las opciones y libera espacio para el juego. */
.menu-btn{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:10px;border:1px solid #34435e;border-radius:11px;background:#17243a;color:#dff7ff;padding:9px 13px;font:700 12px system-ui,sans-serif;cursor:pointer}
.options-menu{width:min(420px,calc(100vw - 28px));max-height:min(86svh,720px);overflow:auto;padding:18px;border:1px solid #3a5272;border-radius:20px;background:linear-gradient(145deg,#151f34,#0a1020);color:var(--white);box-shadow:0 20px 80px #000a}
.options-menu::backdrop{background:#030713c9;backdrop-filter:blur(7px)}
.menu-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.menu-heading h2{font:700 20px 'Space Grotesk',sans-serif;margin:5px 0 0}
.close-menu{width:42px;height:42px;border:1px solid #34435e;border-radius:12px;background:#1b2840;color:#dff7ff;font-size:26px;cursor:pointer}
.options-menu .side-column{display:flex}
.menu-sound{width:100%;text-align:left;padding:14px;border:1px solid #34435e;border-radius:12px;background:#17243a}
@media(max-width:760px){
  html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  body{background:radial-gradient(ellipse at 50% -10%,#1c3152 0,transparent 48%),var(--bg)}
  .app-shell{height:100dvh;min-height:0;max-width:none;padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom);display:flex;flex-direction:column}
  .topbar{height:50px;min-height:50px;border-bottom:1px solid #202a40}
  .brand-mark{width:34px;height:34px;font-size:28px}
  .brand{font-size:9px;gap:8px}
  .brand b{font-size:12px}
  .menu-btn{min-height:40px;margin-right:8px;padding:8px 12px}
  .install-btn{padding:8px 10px;font-size:11px}
  .hero,footer{display:none}
  .game-layout{flex:1;min-height:0;display:flex;margin:8px 0 0}
  .game-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px;border-radius:18px}
  .game-head{flex:none;padding:0 2px 9px}
  .game-head .eyebrow{font-size:8px}
  .game-head h2{font-size:14px}
  .score-box{padding:5px 10px;gap:8px}
  .score-box b{font-size:20px}
  .board-wrap{height:auto;min-height:0;flex:1;border-radius:14px;touch-action:none}
  .game-controls{display:none}
  .dpad{display:grid;flex:none;grid-template-columns:repeat(3,minmax(62px,76px));grid-template-rows:repeat(2,54px);justify-content:center;gap:5px;padding:8px 0 2px}
  .dpad>button{grid-column:2;grid-row:1}
  .dpad>div{display:contents}
  .dpad>div button:nth-child(1){grid-column:1;grid-row:2}
  .dpad>div button:nth-child(2){grid-column:2;grid-row:2}
  .dpad>div button:nth-child(3){grid-column:3;grid-row:2}
  .dpad button{width:100%;height:100%;min-width:62px;min-height:52px;border:1px solid #466486;border-radius:15px;background:linear-gradient(145deg,#233752,#15243b);color:#dff7ff;font-size:19px;box-shadow:inset 0 1px #ffffff16,0 4px 12px #0004;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .dpad button:active{background:#286081;transform:scale(.96)}
}
@media(max-width:380px){.dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,49px)}.game-head h2{font-size:12px}}

/* Mantiene visible la interfaz en navegadores móviles con barras dinámicas. */
@media(max-width:760px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}
  .app-shell{height:auto;min-height:100svh;min-height:100dvh;padding-top:max(env(safe-area-inset-top),4px);padding-bottom:max(env(safe-area-inset-bottom),8px);overflow:visible}
  .topbar{position:relative;z-index:2;flex:none;gap:7px}
  .brand{flex:0 1 auto;min-width:0}
  .menu-btn{display:flex!important;flex:none;position:relative;z-index:3;min-width:74px;min-height:42px;justify-content:center;margin-left:auto;margin-right:0;white-space:nowrap}
  .install-btn{flex:none;white-space:nowrap}
  .game-layout{flex:none;min-height:calc(100svh - 68px);min-height:calc(100dvh - 68px);margin:8px 0 8px}
  .game-card{flex:none;min-height:calc(100svh - 78px);min-height:calc(100dvh - 78px)}
  .board-wrap{flex:1 0 36svh;min-height:220px;height:auto}
  .dpad{flex:none}
}
@media(max-width:380px){
  .app-shell{padding-left:7px;padding-right:7px}
  .topbar{gap:5px}
  .menu-btn{min-width:68px;padding-left:8px;padding-right:8px}
  .brand{font-size:8px;letter-spacing:1px}
  .brand b{font-size:11px}
  .brand-mark{width:31px;height:31px}
  .install-btn{font-size:10px;padding:7px 8px}
}
@media(max-height:620px) and (max-width:760px){
  .game-layout,.game-card{min-height:0}
  .board-wrap{flex-basis:32svh;min-height:190px}
  .dpad{grid-template-rows:repeat(2,46px);padding-top:6px}
}