:root{--leaf:#8fe36a;--leaf-deep:#4f9a44;--neon:#ff5fa2;--cop:#3f7bff;--amber:#ffb43a;--cream:#f7f2e2;--dim:#c9bce0;--red:#ff3b3b;--font:"Trebuchet MS",system-ui,"Segoe UI",sans-serif;}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;background:#08080e;height:100%;}
  #wrap{position:relative;width:min(99vw,calc(96vh*1.5));margin:6px auto;aspect-ratio:3/2;border-radius:14px;overflow:hidden;font-family:var(--font);color:var(--cream);user-select:none;touch-action:none;box-shadow:0 20px 60px -24px #000,0 0 0 1px #ffffff12;}
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
  #hud{position:absolute;inset:12px auto auto 14px;z-index:5;display:flex;gap:9px;flex-wrap:wrap;align-items:center;pointer-events:none;font-weight:bold;text-shadow:0 2px 5px #000c;}
  .pill{display:flex;align-items:center;gap:6px;font-size:clamp(14px,1.7vw,18px);background:#12121ccc;padding:6px 13px;border-radius:999px;border:1px solid #ffffff22;}
  .pill b{color:var(--leaf);font-size:1.08em;min-width:1ch;} #cats b{color:var(--amber);} #mult{color:var(--neon);}
  #vibe{letter-spacing:2px;font-size:clamp(15px,2vw,22px);}
  #score{position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:5;font-size:clamp(22px,3vw,34px);font-weight:900;letter-spacing:1px;text-shadow:0 2px 6px #000,0 0 18px #ff5fa244;pointer-events:none;}
  .ctrls{position:absolute;bottom:12px;right:14px;z-index:6;display:flex;gap:8px;}
  .ctrls button{background:#12121ccc;border:1px solid #ffffff22;color:var(--cream);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;}
  .screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:26px;background:radial-gradient(120% 90% at 50% 30%,#241a3ad8,#08080ef4);}
  .hidden{display:none;}

  .game-icon{position:relative;width:clamp(76px,11vw,126px);height:clamp(76px,11vw,126px);margin:-4px 0 -6px;padding:5px;border-radius:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffffff24,#00000024),var(--entry-icon) center/74% no-repeat;border:2px solid #ffffff38;box-shadow:0 12px 28px -12px #000,0 0 38px #8fe36a42,0 0 0 6px #12121c88;overflow:hidden;}
  .game-icon:before{content:"";position:absolute;inset:-28%;background:radial-gradient(circle at 35% 25%,#8fe36a55,#ff5fa233 45%,#0000 72%);animation:iconPulse 2.8s ease-in-out infinite;pointer-events:none;}
  .game-icon img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 9px #000b);}
  .game-icon.missing-icon img{display:none!important;}
  .game-icon.missing-icon:after{content:"🐱";position:relative;z-index:1;font-size:clamp(42px,7vw,76px);filter:drop-shadow(0 4px 9px #000b);}
  @keyframes iconPulse{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.18);opacity:1}}
  .logo{line-height:.9;margin:0;}
  .logo span{display:block;font-size:clamp(40px,8vw,80px);font-weight:900;letter-spacing:2px;}
  .logo .a{color:var(--leaf);text-shadow:3px 3px 0 var(--leaf-deep),0 0 30px #8fe36a55,6px 6px 0 #0007;}
  .logo .amp{color:var(--amber);font-size:clamp(28px,5vw,50px);text-shadow:2px 2px 0 #b06a10,6px 6px 0 #0007;}
  .logo .b{color:var(--neon);text-shadow:3px 3px 0 #b0296a,0 0 30px #ff5fa255,6px 6px 0 #0007;}
  .tag{color:var(--dim);font-size:clamp(14px,2vw,17px);max-width:52ch;margin:-2px 0 2px;font-style:italic;}
  .how{color:var(--cream);font-size:clamp(13px,1.9vw,16px);line-height:1.8;max-width:48ch;opacity:.95;}
  .how kbd{background:#ffffff1e;border:1px solid #ffffff44;border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-family:var(--font);font-weight:bold;font-size:.92em;color:var(--leaf);}
  .btn{margin-top:6px;cursor:pointer;border:none;font-family:var(--font);font-weight:900;letter-spacing:1px;font-size:clamp(18px,2.6vw,24px);color:#12121c;padding:15px 46px;border-radius:14px;background:linear-gradient(180deg,#aef083,#7bd15f);box-shadow:0 6px 0 #47893a,0 12px 24px -6px #8fe36a66;transition:transform .08s,box-shadow .08s;}
  .btn:active{transform:translateY(4px);box-shadow:0 2px 0 #47893a;}
  .btn.retry{background:linear-gradient(180deg,#ff8dbe,#ff5fa2);box-shadow:0 6px 0 #a02766,0 12px 24px -6px #ff5fa266;}
  #busted{font-size:clamp(46px,10vw,96px);font-weight:900;color:var(--red);letter-spacing:2px;text-shadow:4px 4px 0 #7a0c0c,0 0 40px #ff3b3b66;margin:0;}
  .stats{display:flex;gap:30px;font-size:clamp(15px,2.4vw,20px);} .stats div{display:flex;flex-direction:column;gap:2px;} .stats span{font-size:1.9em;font-weight:900;color:var(--leaf);}
  .best{color:var(--amber);font-size:clamp(14px,2vw,17px);font-weight:bold;}
  .credit{position:absolute;bottom:14px;color:#ffffff55;font-size:12px;letter-spacing:1px;}
  .spent{opacity:.25;filter:grayscale(1);}
  #joy{position:absolute;bottom:18px;left:18px;z-index:7;width:138px;height:138px;border-radius:34px;background:radial-gradient(circle at 50% 50%,#ffffff14 0 32%,#12121cb8 33% 100%);border:2px solid #ffffff30;display:none;touch-action:none;box-shadow:0 12px 32px -16px #000,0 0 0 1px #0008 inset;}
  #joy:before{content:"MOVER";position:absolute;left:0;right:0;top:11px;text-align:center;font-size:10px;font-weight:900;letter-spacing:1.2px;color:#ffffff80;pointer-events:none;text-shadow:0 2px 5px #000;}
  #joy:after{content:"arrastra";position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:10px;font-weight:900;letter-spacing:.8px;color:#ffffff5f;pointer-events:none;text-shadow:0 2px 5px #000;}
  #joy.active{border-color:#8fe36a88;box-shadow:0 12px 32px -16px #000,0 0 28px #8fe36a38,0 0 0 1px #0008 inset;}
  #stick{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#f7f2e2 54%,#cfc8ae);border:2px solid #ffffff90;box-shadow:0 4px 14px #000b,0 0 16px #8fe36a35;pointer-events:none;}
  #catBtn,#smokeBtn{position:absolute;z-index:7;border-radius:50%;border:2px solid #ffffff3d;color:#12121c;font-weight:900;display:none;cursor:pointer;touch-action:none;box-shadow:0 7px 0 #9c6215,0 14px 26px -12px #000;transition:transform .06s,box-shadow .06s,filter .12s;}
  #catBtn{bottom:112px;right:24px;width:70px;height:70px;background:linear-gradient(180deg,#ffd67b,#ffb43a);font-size:34px;}
  #smokeBtn{bottom:24px;right:22px;width:82px;height:82px;background:linear-gradient(180deg,#ff9ccc,#ff5fa2);font-size:40px;box-shadow:0 7px 0 #9c2360,0 14px 26px -12px #000;}
  #catBtn:after,#smokeBtn:after{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);font-size:10px;font-weight:900;letter-spacing:.7px;color:#f7f2e2;text-shadow:0 2px 5px #000;pointer-events:none;}
  #catBtn:after{content:"GATO";}
  #smokeBtn:after{content:"FUMAR";}
  #catBtn:active,#smokeBtn:active{transform:translateY(4px);filter:brightness(1.08);box-shadow:0 3px 0 #9c6215,0 8px 18px -12px #000;}
  #smokeBtn:active{box-shadow:0 3px 0 #9c2360,0 8px 18px -12px #000;}
  @media (pointer:coarse){#joy,#catBtn,#smokeBtn{display:block}.ctrls{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));bottom:auto}}
  :focus-visible{outline:2px solid var(--leaf);outline-offset:3px;}

/* ---------- layout extra: móvil, ads y ranking ---------- */
.screen{
  justify-content:flex-start;
  overflow-y:auto;
  gap:12px;
  padding:clamp(16px,3vw,28px) 24px max(28px,env(safe-area-inset-bottom));
}
#menu .logo span{font-size:clamp(34px,7vw,72px);}
#over{padding-top:clamp(18px,4vw,42px);}
.mobile-choice{display:flex;align-items:center;gap:10px;cursor:pointer;background:#12121ccc;border:1px solid #ffffff22;border-radius:999px;padding:8px 14px;font-weight:900;color:var(--cream);}
.mobile-choice input{position:absolute;opacity:0;pointer-events:none;}
.switch{width:44px;height:24px;border-radius:999px;background:#ffffff24;border:1px solid #ffffff33;position:relative;box-shadow:inset 0 2px 6px #0006;}
.switch:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#f7f2e2;transition:transform .16s;}
.mobile-choice input:checked + .switch{background:#8fe36a88;border-color:#8fe36a;}
.mobile-choice input:checked + .switch:after{transform:translateX(20px);}
.mobile-choice-text{font-size:clamp(12px,1.7vw,15px);}

.ad-host{display:block;position:relative;z-index:12;text-align:center;}
.ad-box{width:min(94vw,336px);min-height:250px;margin:4px auto;border-radius:12px;overflow:visible;background:#0d0d1680;border:1px solid #ffffff12;}
.ad-host ins{display:block!important;min-height:inherit;}
.bottom-ad{width:min(100vw,970px);min-height:90px;margin:8px auto 14px;background:#0d0d1680;border:1px solid #ffffff12;border-radius:12px;overflow:visible;}
.ad-host[data-ad-empty="1"]{display:none!important;}

.leaderboard{width:min(94vw,460px);background:#10101ad8;border:1px solid #ffffff22;border-radius:16px;padding:10px 12px;box-shadow:0 10px 28px -18px #000,0 0 22px #ff5fa21a;text-align:left;}
.leaderboard-title{text-align:center;font-weight:900;letter-spacing:1px;color:var(--amber);font-size:clamp(15px,2vw,18px);margin-bottom:6px;text-shadow:0 2px 6px #000;}
.top10-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.top10-list li{display:grid;grid-template-columns:46px 1fr auto;gap:8px;align-items:center;background:#ffffff0d;border:1px solid #ffffff10;border-radius:9px;padding:5px 8px;font-weight:900;min-height:28px;}
.top-rank{color:var(--amber);text-align:center;font-variant-numeric:tabular-nums;}
.top-player{color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.5px;}
.top-score{color:var(--leaf);font-variant-numeric:tabular-nums;text-shadow:0 0 12px #8fe36a55;}
.empty-top{display:block!important;text-align:center;color:var(--dim);font-weight:700;}
.top10-status{margin-top:6px;text-align:center;color:#ffffff88;font-size:12px;font-weight:700;}
.top10-status[data-kind="ok"]{color:#8fe36a;}
.top10-status[data-kind="warn"]{color:#ffcf74;}
.top10-status[data-kind="error"]{color:#ff8d8d;}


.top-entry{position:relative;width:min(94vw,500px);background:linear-gradient(180deg,#332143f2,#161525f4 62%,#0f101cf5);border:2px solid #ffcf7480;border-radius:24px;padding:16px;box-shadow:0 18px 44px -20px #000,0 0 42px #ffcf7430,0 0 0 1px #ffffff14 inset;text-align:center;overflow:hidden;}
.top-entry:before{content:"";position:absolute;inset:-2px;border-radius:24px;background:radial-gradient(circle at 18% 10%,#8fe36a33,#0000 36%),radial-gradient(circle at 84% 14%,#ff5fa244,#0000 35%);pointer-events:none;}
.top-entry-shine{position:absolute;inset:-45% -25% auto;height:95px;background:linear-gradient(90deg,#0000,#ffffff22,#0000);transform:rotate(-8deg);animation:topEntryShine 3.4s ease-in-out infinite;pointer-events:none;}
@keyframes topEntryShine{0%,45%{translate:-58% 0;opacity:0}62%{opacity:1}100%{translate:78% 0;opacity:0}}
.top-entry-head,.top-entry-row,.top-name-label,.top-entry-status{position:relative;z-index:1;}
.top-entry-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:10px;}
.top-entry-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 11px;border-radius:999px;background:linear-gradient(180deg,#ffcf74,#ff9d36);color:#231300;font-size:12px;font-weight:900;letter-spacing:.9px;box-shadow:0 4px 0 #8d4e0d,0 0 18px #ffcf7444;text-shadow:none;}
.top-entry-msg{font-weight:900;color:var(--amber);font-size:clamp(16px,2.25vw,20px);line-height:1.15;text-shadow:0 2px 6px #000,0 0 16px #ffcf7444;}
.top-name-label{display:block;width:min(100%,410px);margin:0 auto 6px;text-align:left;color:#ffffffb0;font-size:12px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;}
.top-entry-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;justify-content:center;width:min(100%,410px);margin:0 auto;}
.top-name-wrap{position:relative;min-width:0;display:flex;align-items:center;background:linear-gradient(180deg,#0b0b14,#151426);border:2px solid #ffffff2d;border-radius:17px;box-shadow:0 7px 18px #0008,0 0 0 3px #00000040 inset;transition:border-color .14s,box-shadow .14s,transform .14s;}
.top-name-wrap:focus-within{border-color:#8fe36a;box-shadow:0 10px 24px #0009,0 0 26px #8fe36a44,0 0 0 4px #8fe36a14;transform:translateY(-1px);}
.top-name-icon{flex:0 0 auto;width:38px;text-align:center;font-size:20px;filter:drop-shadow(0 2px 4px #000);}
.top-name{min-width:0;width:100%;border:0;background:transparent;color:var(--cream);border-radius:15px;padding:14px 48px 14px 0;font:900 clamp(17px,2.3vw,22px) var(--font);text-align:left;letter-spacing:.6px;outline:none;text-transform:none;caret-color:var(--leaf);}
.top-name::placeholder{color:#f7f2e275;font-style:italic;font-weight:900;}
.top-name-count{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#ffffff70;background:#ffffff12;border:1px solid #ffffff18;border-radius:999px;padding:3px 7px;font-size:11px;font-weight:900;font-variant-numeric:tabular-nums;pointer-events:none;}
.top-name-count[data-full="1"]{color:#231300;background:#ffcf74;border-color:#ffcf74;}
.top-save{position:relative;border:0;border-radius:17px;padding:0 17px;min-width:112px;background:linear-gradient(180deg,#aef083,#77d35d);color:#13200d;font:900 15px var(--font);letter-spacing:.7px;cursor:pointer;box-shadow:0 5px 0 #47893a,0 11px 22px -10px #8fe36a;transition:transform .08s,box-shadow .08s,filter .12s;overflow:hidden;}
.top-save:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff00,#ffffff55,#ffffff00);transform:translateX(-120%);transition:transform .45s;}
.top-save:hover:before,.top-save:focus-visible:before{transform:translateX(120%);}
.top-save:active{transform:translateY(3px);box-shadow:0 2px 0 #47893a;}
.top-save span{position:relative;z-index:1;}
.top-save:disabled{opacity:.55;cursor:wait;filter:grayscale(.5);box-shadow:0 3px 0 #555;}
.top-entry-status{font-size:12px;color:#ffffffaa;margin-top:9px;font-weight:800;line-height:1.35;}
.top-entry-status[data-kind="ok"]{color:#8fe36a;text-shadow:0 0 12px #8fe36a55;}
.top-entry-status[data-kind="error"]{color:#ff8d8d;text-shadow:0 0 12px #ff5a5a55;}

@media (max-width:900px), (orientation:portrait), (pointer:coarse){
  html,body{width:100%;min-height:100%;overflow-x:hidden;}
  #wrap{width:100vw;height:100dvh;max-height:none;margin:0;border-radius:0;aspect-ratio:auto;}
  .screen{padding:14px 12px max(24px,env(safe-area-inset-bottom));gap:9px;}
  .game-icon{width:78px;height:78px;border-radius:20px;margin:0;padding:4px;background-size:76%;}
  .tag{font-size:12px;line-height:1.35;max-width:42ch;}
  .how{font-size:12px;line-height:1.5;max-width:42ch;}
  .credit{position:static;margin-top:4px;font-size:10px;line-height:1.35;max-width:92vw;}
  .leaderboard{padding:8px 9px;border-radius:13px;}
  .top10-list{gap:3px;}
  .top10-list li{grid-template-columns:38px 1fr auto;padding:4px 7px;min-height:24px;font-size:12px;}
  .top10-status,.top-entry-status{font-size:10px;}
  .top-entry{padding:12px;border-radius:18px;width:min(94vw,430px);}
  .top-entry-badge{font-size:10px;padding:4px 9px;}
  .top-entry-msg{font-size:14px;}
  .top-entry-row{grid-template-columns:1fr;gap:8px;width:min(100%,330px);}
  .top-name-label{width:min(100%,330px);font-size:10px;}
  .top-name{font-size:17px;padding:12px 48px 12px 0;}
  .top-name-icon{width:36px;font-size:18px;}
  .top-save{min-height:44px;width:100%;font-size:14px;}
  .ad-host,.ad-box,.bottom-ad{display:none!important;width:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;}
  .btn{padding:12px 28px;font-size:17px;}
  #joy{left:max(12px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:min(50vw,230px);height:min(30dvh,250px);min-width:178px;min-height:178px;border-radius:36px;background:radial-gradient(circle at 50% 50%,#ffffff18 0 30%,#11111ac8 31% 100%);}
  #joy:before{top:13px;font-size:11px;}
  #joy:after{bottom:12px;font-size:11px;}
  #stick{width:64px;height:64px;margin:-32px 0 0 -32px;}
  #smokeBtn{left:auto;right:max(18px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));width:96px;height:96px;font-size:46px;}
  #catBtn{left:auto;right:max(36px,calc(env(safe-area-inset-right) + 36px));bottom:max(136px,calc(env(safe-area-inset-bottom) + 136px));width:78px;height:78px;font-size:38px;}
  #catBtn:after,#smokeBtn:after{bottom:-21px;font-size:11px;}
  .ctrls{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));bottom:auto;}
}

body.mobile-controls-off #joy,
body.mobile-controls-off #catBtn,
body.mobile-controls-off #smokeBtn{display:none!important;}
body.mobile-controls-on #joy,
body.mobile-controls-on #catBtn,
body.mobile-controls-on #smokeBtn{display:block;}

/* En móvil o en vertical, los anuncios se desactivan para no quitar espacio jugable. */
body.ads-disabled-mobile .ad-host,
body.ads-disabled-mobile .ad-box,
body.ads-disabled-mobile .bottom-ad{display:none!important;width:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;}

@media (max-width:900px), (orientation:portrait), (pointer:coarse){
  body{overflow:hidden;}
  .ad-host,.ad-box,.bottom-ad{display:none!important;width:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;}
}
.top-entry-pop{animation:topEntryPop .34s cubic-bezier(.2,1.35,.25,1);}
@keyframes topEntryPop{0%{transform:scale(.94);filter:brightness(1.2)}100%{transform:scale(1);filter:brightness(1)}}


@media (max-height:560px) and (pointer:coarse){
  #joy{width:min(36vw,190px);height:min(42dvh,190px);min-width:145px;min-height:145px;bottom:max(12px,env(safe-area-inset-bottom));}
  #stick{width:54px;height:54px;margin:-27px 0 0 -27px;}
  #smokeBtn{width:82px;height:82px;font-size:40px;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));}
  #catBtn{width:68px;height:68px;font-size:33px;right:max(104px,calc(env(safe-area-inset-right) + 104px));bottom:max(24px,calc(env(safe-area-inset-bottom) + 24px));}
}

@media (max-width:380px) and (pointer:coarse){
  #joy{width:48vw;min-width:158px;height:178px;}
  #smokeBtn{width:88px;height:88px;font-size:42px;}
  #catBtn{width:72px;height:72px;font-size:35px;bottom:max(124px,calc(env(safe-area-inset-bottom) + 124px));}
}

/* ---------- menú en dos columnas: ranking a la derecha ---------- */
#menu{
  justify-content:center;
  align-items:center;
  overflow:hidden;
  padding:clamp(12px,2vw,22px);
}
.menu-layout{
  width:min(96%,1120px);
  max-height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(285px,.82fr);
  gap:clamp(16px,2.4vw,34px);
  align-items:center;
}
.menu-main,
.menu-side{
  min-height:0;
  min-width:0;
}
.menu-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.5vh,14px);
  text-align:center;
}
.menu-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:10px;
}
.game-icon-bg{
  position:absolute;
  z-index:0;
  inset:8px;
  border-radius:22px;
  background:var(--entry-icon) center/contain no-repeat;
  filter:drop-shadow(0 4px 9px #000b);
}
.game-icon.icon-loaded .game-icon-bg{opacity:.22;filter:blur(5px) drop-shadow(0 4px 9px #000b);}
#menu .game-icon{width:clamp(72px,8vw,112px);height:clamp(72px,8vw,112px);margin:0;}
#menu .logo span{font-size:clamp(38px,6.2vw,74px);}
#menu .logo .amp{font-size:clamp(26px,3.8vw,46px);}
#menu .tag{max-width:52ch;margin:0;font-size:clamp(13px,1.45vw,16px);line-height:1.35;}
#menu .how{max-width:60ch;margin:0;font-size:clamp(12px,1.35vw,15px);line-height:1.55;}
#menu .mobile-choice{margin:0;}
#menu .btn{margin:0;padding:clamp(12px,1.6vw,15px) clamp(34px,4.2vw,52px);}
#menu .credit{position:static;margin:0;max-width:58ch;line-height:1.35;font-size:11px;letter-spacing:.6px;}
#menu .leaderboard{width:100%;max-width:none;}
#menu .leaderboard-title{font-size:clamp(15px,1.5vw,19px);}
#menu .top10-list{gap:3px;}
#menu .top10-list li{min-height:25px;padding:4px 8px;font-size:clamp(11px,1.08vw,14px);grid-template-columns:40px 1fr auto;}
#menu .top10-status{min-height:14px;margin-top:5px;}
#menu .ad-menu{width:100%;min-height:72px;max-height:92px;margin:0;border-radius:12px;}

@media (max-height:720px) and (min-width:901px) and (orientation:landscape){
  #menu{padding:12px 18px;}
  .menu-layout{gap:18px;}
  .menu-main{gap:8px;}
  #menu .game-icon{width:72px;height:72px;border-radius:20px;}
  #menu .logo span{font-size:clamp(34px,5.5vw,58px);}
  #menu .logo .amp{font-size:clamp(23px,3.2vw,36px);}
  #menu .tag{font-size:12px;line-height:1.28;}
  #menu .how{font-size:11.5px;line-height:1.38;}
  #menu .mobile-choice{padding:6px 12px;}
  #menu .btn{padding:11px 34px;font-size:18px;}
  #menu .credit{font-size:10px;}
  #menu .top10-list li{min-height:23px;padding:3px 7px;font-size:11.5px;}
  #menu .ad-menu{min-height:58px;max-height:72px;}
}

@media (max-height:610px) and (min-width:901px) and (orientation:landscape){
  #menu .ad-menu{display:none!important;}
  #menu .tag{max-width:46ch;}
  #menu .how{max-width:54ch;}
  #menu .top10-list li{min-height:21px;font-size:11px;}
}

@media (max-width:900px), (orientation:portrait), (pointer:coarse){
  #menu{
    justify-content:flex-start;
    overflow-y:auto;
    padding:14px 12px max(24px,env(safe-area-inset-bottom));
  }
  .menu-layout{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:9px;
    max-height:none;
  }
  .menu-main{gap:8px;}
  .menu-side{width:min(94vw,460px);margin:0 auto;gap:8px;}
  #menu .game-icon{width:78px;height:78px;}
  #menu .logo span{font-size:clamp(32px,11vw,58px);}
  #menu .logo .amp{font-size:clamp(24px,7vw,36px);}
  #menu .tag{font-size:12px;line-height:1.35;max-width:42ch;}
  #menu .how{font-size:12px;line-height:1.5;max-width:42ch;}
  #menu .credit{font-size:10px;max-width:92vw;}
}

/* ---------- FIX DEFINITIVO: menú en dos columnas reales ----------
   La versión anterior se apilaba en algunos dispositivos porque el media query
   usaba (pointer:coarse). Eso hacía que portátiles/tablets con táctil vieran
   el menú en columna aunque hubiera ancho de sobra. */
@media (min-width: 820px) and (orientation: landscape){
  #menu.screen{
    display:grid !important;
    place-items:center !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    overflow:hidden !important;
    padding:clamp(12px,2vw,22px) !important;
  }
  #menu .menu-layout{
    width:min(96vw,1120px) !important;
    height:min(100%,720px) !important;
    max-height:100% !important;
    margin:auto !important;
    display:grid !important;
    grid-template-columns:minmax(410px,1.12fr) minmax(310px,400px) !important;
    grid-template-areas:"main ranking" !important;
    gap:clamp(18px,2.6vw,36px) !important;
    align-items:center !important;
  }
  #menu .menu-main{
    grid-area:main !important;
    min-width:0 !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:clamp(8px,1.45vh,14px) !important;
    text-align:center !important;
  }
  #menu .menu-side{
    grid-area:ranking !important;
    min-width:0 !important;
    min-height:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  #menu .leaderboard{
    width:100% !important;
    max-width:none !important;
  }
  #menu .ad-menu{
    width:100% !important;
    min-height:64px !important;
    max-height:90px !important;
    margin:0 !important;
  }
}

@media (max-width: 819px), (orientation: portrait){
  #menu.screen{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    overflow-y:auto !important;
    padding:14px 12px max(24px,env(safe-area-inset-bottom)) !important;
  }
  #menu .menu-layout{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;
  }
  #menu .menu-main,
  #menu .menu-side{
    width:min(94vw,460px) !important;
    margin:0 auto !important;
  }
}

/* ---------- FIX REAL: menú en columnas por ANCHO, no por orientación/puntero ----------
   Antes se apilaba en tablets, devtools o equipos táctiles porque había reglas con
   (orientation:portrait) y (pointer:coarse). Esta regla va al final y manda sobre ellas:
   si hay ancho suficiente, siempre son dos columnas. */
@media (min-width: 760px){
  #menu.screen{
    display:grid !important;
    place-items:center !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    overflow:hidden !important;
    padding:clamp(10px,1.8vw,22px) !important;
  }
  #menu .menu-layout{
    width:min(96vw,1120px) !important;
    height:auto !important;
    max-height:100% !important;
    margin:auto !important;
    display:grid !important;
    grid-template-columns:minmax(330px,1fr) minmax(260px,380px) !important;
    grid-template-rows:1fr !important;
    grid-template-areas:"main ranking" !important;
    gap:clamp(14px,2vw,30px) !important;
    align-items:center !important;
  }
  #menu .menu-main{
    grid-area:main !important;
    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:clamp(7px,1.25vh,13px) !important;
    text-align:center !important;
  }
  #menu .menu-side{
    grid-area:ranking !important;
    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:9px !important;
  }
  #menu .leaderboard{
    width:100% !important;
    max-width:none !important;
  }
  #menu .ad-menu{
    width:100% !important;
    min-height:58px !important;
    max-height:82px !important;
    margin:0 !important;
  }
}

@media (max-width: 759.98px){
  #menu.screen{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    overflow-y:auto !important;
  }
  #menu .menu-layout{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:9px !important;
  }
  #menu .menu-main,
  #menu .menu-side{
    width:min(94vw,460px) !important;
    margin:0 auto !important;
  }
}

@media (min-width: 760px) and (max-height: 620px){
  #menu .game-icon{width:64px !important;height:64px !important;}
  #menu .logo span{font-size:clamp(30px,5vw,54px) !important;}
  #menu .logo .amp{font-size:clamp(21px,3vw,34px) !important;}
  #menu .tag{font-size:12px !important;line-height:1.25 !important;}
  #menu .how{font-size:11px !important;line-height:1.32 !important;}
  #menu .btn{padding:10px 32px !important;font-size:17px !important;}
  #menu .credit{font-size:9.5px !important;}
  #menu .top10-list li{min-height:21px !important;font-size:11px !important;padding:3px 7px !important;}
  #menu .ad-menu{display:none !important;}
}

/* ---------- FIX CRÍTICO: no romper el arranque del juego ----------
   Las reglas responsive de #menu.screen usan display:grid/flex !important para forzar
   dos columnas. Cuando input.js añade .hidden al menú al pulsar PLAY, esas reglas
   estaban ganando a .hidden y el menú seguía encima del canvas. Esta regla debe ir
   al final del archivo para que ocultar pantallas vuelva a mandar. */
.screen.hidden,
#menu.screen.hidden,
#over.screen.hidden,
#topEntry.hidden{
  display:none !important;
}