/* ================= STICKY FEET — retro arcade shell ================= */
@font-face{
  font-family:'Press Start 2P';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/PressStart2P.woff2') format('woff2');
}
:root{
  --bg:#0d0f1d;
  --bezel:#1b1e33;
  --bezel-hi:#2c3052;
  --gold:#ffd23e;
  --gold-dk:#b8860b;
  --cherry:#e43b44;
  --mint:#3ce8a4;
  --sky:#41c7e0;
  --ink:#0a0b14;
  --paper:#f4eede;
  --font:'Press Start 2P','Courier New',monospace;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --viewport-left:0px;
  --viewport-top:0px;
  --viewport-width:100vw;
  --viewport-height:100dvh;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 30%, #181c33 0%, #0d0f1d 70%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.012) 2px 4px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
#room{display:flex;flex-direction:column;align-items:center;gap:10px}
#marquee{
  color:var(--gold);
  text-shadow:0 0 8px rgba(255,210,62,.55),0 2px 0 #7a5b00;
  letter-spacing:.4em;
  font-size:10px;
  animation:marquee-glow 2.4s ease-in-out infinite;
}
@keyframes marquee-glow{0%,100%{opacity:.75}50%{opacity:1}}

#stage{
  position:relative;
  background:#000;
  border:6px solid var(--bezel);
  outline:2px solid #05060c;
  border-radius:10px;
  box-shadow:
    inset 0 0 0 2px var(--bezel-hi),
    0 0 0 1px #000,
    0 18px 60px rgba(0,0,0,.75),
    0 0 90px rgba(65,199,224,.07);
  overflow:hidden;
}
#game{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#000;
}
#scan{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.28) 100%);
  mix-blend-mode:multiply;
}
#scan.off{display:none}

/* ---------------- UI overlay ---------------- */
#ui{
  position:absolute;inset:0;z-index:10;
  font-size:8px; /* scaled by JS with stage */
  color:var(--paper);
  pointer-events:none;
}
#ui .screen{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
}
#ui .screen.show{display:flex}
.ui-block{pointer-events:auto}

/* --- title --- */
#scr-title{gap:1.4em;background:linear-gradient(180deg, rgba(6,7,16,.18) 0%, rgba(6,7,16,.55) 100%)}
.logo{text-align:center;line-height:1;animation:logo-drop .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes logo-drop{from{transform:translateY(-3em) scale(.6);opacity:0}to{transform:none;opacity:1}}
.logo-sticky{
  font-size:3.4em;color:var(--gold);
  text-shadow:0 .12em 0 var(--gold-dk),0 .24em 0 #4d3a00,0 .3em .3em rgba(0,0,0,.6);
  letter-spacing:.06em;
}
.logo-feet{
  font-size:3.4em;color:var(--cherry);margin-top:.18em;
  text-shadow:0 .12em 0 #7c1c22,0 .24em 0 #3d0d10,0 .3em .3em rgba(0,0,0,.6);
  letter-spacing:.06em;
}
.logo-shoe{font-size:.7em;vertical-align:.25em;margin-left:.2em;display:inline-block;animation:shoe-bounce 1s ease-in-out infinite}
@keyframes shoe-bounce{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-.35em) rotate(6deg)}}
.tagline{margin-top:1.2em;font-size:.9em;color:var(--mint);letter-spacing:.5em;text-shadow:0 0 6px rgba(60,232,164,.6)}
.menu{display:flex;flex-direction:column;gap:.8em;align-items:center}
.title-best{font-size:.85em;color:#9aa3c7;text-shadow:0 1px 0 #000}
.toggles{position:absolute;bottom:.9em;right:.9em;display:flex;gap:.5em}

/* --- buttons --- */
.btn{
  font-family:var(--font);font-size:1em;
  color:var(--ink);background:var(--gold);
  border:none;cursor:pointer;
  padding:.8em 1.6em;
  box-shadow:0 .35em 0 var(--gold-dk),0 .35em 0 .15em rgba(0,0,0,.4),inset 0 -.2em 0 rgba(0,0,0,.14),inset 0 .2em 0 rgba(255,255,255,.45);
  image-rendering:pixelated;
  transition:transform .05s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(.3em);box-shadow:0 .05em 0 var(--gold-dk),inset 0 -.15em 0 rgba(0,0,0,.14)}
.btn-big{font-size:1.35em;background:var(--mint);box-shadow:0 .35em 0 #1a8f60,0 .35em 0 .15em rgba(0,0,0,.4),inset 0 -.2em 0 rgba(0,0,0,.14),inset 0 .2em 0 rgba(255,255,255,.45)}
.btn-big:active{box-shadow:0 .05em 0 #1a8f60}
.btn.back{margin-top:.8em;font-size:.85em;padding:.6em 1.2em}
.tgl{
  font-family:var(--font);font-size:.9em;cursor:pointer;
  width:2.4em;height:2.4em;color:var(--paper);
  background:var(--bezel-hi);border:2px solid #454a78;
  box-shadow:0 .2em 0 #10122a;
}
.tgl.off{opacity:.35;filter:grayscale(1)}
.tgl.danger{color:#ff8890;border-color:#7c2b31}
.tgl:active{transform:translateY(.15em);box-shadow:none}

/* --- panels (shop / awards) --- */
.panel{background:rgba(8,9,18,.92);justify-content:flex-start!important;padding:1.2em 1.6em}
.panel-head{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:.8em}
.panel-head h2{font-size:1.2em;color:var(--gold);text-shadow:0 .15em 0 #4d3a00}
.wallet{display:flex;gap:1.2em;font-size:.9em;color:var(--paper)}
.wallet .c{color:var(--gold)} .wallet .g{color:var(--sky)}
.tabs{display:flex;gap:.4em;margin-bottom:.8em;width:100%}
.tab{
  flex:1;font-family:var(--font);font-size:.72em;padding:.7em .2em;cursor:pointer;
  background:#171a30;color:#8b93b8;border:2px solid #2c3052;
}
.tab.on{background:var(--cherry);color:#fff;border-color:#7c1c22;box-shadow:inset 0 -.25em 0 rgba(0,0,0,.25)}
.shop-grid{
  width:100%;flex:1;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:.6em;align-content:start;
  scrollbar-width:thin;scrollbar-color:#2c3052 transparent;
}
.card{
  background:#12142a;border:2px solid #2c3052;padding:.7em;
  display:flex;flex-direction:column;gap:.45em;
}
.card.owned{border-color:#1a8f60}
.card h3{font-size:.8em;color:var(--paper)}
.card .desc{font-size:.62em;line-height:1.5;color:#8b93b8}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.pips{display:flex;gap:.25em}
.pip{width:.7em;height:.7em;background:#23264a;border:1px solid #3a3f77}
.pip.on{background:var(--mint);border-color:#1a8f60;box-shadow:0 0 4px rgba(60,232,164,.7)}
.buy{
  font-family:var(--font);font-size:.7em;padding:.55em .8em;cursor:pointer;
  background:var(--gold);color:var(--ink);border:none;
  box-shadow:0 .25em 0 var(--gold-dk);
}
.buy.gem{background:var(--sky);box-shadow:0 .25em 0 #1d7c91}
.buy:disabled{background:#33375e;color:#666e97;box-shadow:0 .25em 0 #191b33;cursor:not-allowed}
.buy:not(:disabled):active{transform:translateY(.2em);box-shadow:none}
.buy.equipped{background:var(--mint);box-shadow:0 .25em 0 #1a8f60}
.count{font-size:.68em;color:var(--mint)}

/* --- awards --- */
.ach-list{width:100%;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.45em;scrollbar-width:thin}
.ach{
  display:flex;align-items:center;gap:.8em;padding:.6em .8em;
  background:#12142a;border:2px solid #2c3052;
}
.ach.got{border-color:var(--gold-dk);background:#1b1830}
.ach .medal{font-size:1.3em;filter:grayscale(1);opacity:.35}
.ach.got .medal{filter:none;opacity:1;text-shadow:0 0 8px rgba(255,210,62,.8)}
.ach .a-name{font-size:.75em;color:var(--paper)}
.ach.got .a-name{color:var(--gold)}
.ach .a-desc{font-size:.6em;color:#8b93b8;margin-top:.4em;line-height:1.4}

/* --- game over / pause --- */
#scr-over,#scr-pause{background:rgba(5,6,12,.55)}
.over-card{
  background:#12142a;border:3px solid #2c3052;
  box-shadow:0 .6em 0 rgba(0,0,0,.5),inset 0 0 0 2px #05060c;
  padding:1.4em 2em;display:flex;flex-direction:column;gap:1em;align-items:center;
  animation:card-pop .35s cubic-bezier(.2,1.8,.4,1) both;
  max-width:80%;
}
@keyframes card-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.over-card h2{font-size:1.5em;color:var(--cherry);text-shadow:0 .15em 0 #3d0d10}
.over-card h2.best{color:var(--gold);text-shadow:0 .15em 0 #4d3a00;animation:marquee-glow 1s infinite}
.over-rows{display:flex;flex-direction:column;gap:.55em;width:100%}
.over-rows .r{display:flex;justify-content:space-between;gap:2.5em;font-size:.8em}
.over-rows .r b{color:var(--gold)}
.over-rows .r.hl{color:var(--mint)}
.over-btns{display:flex;gap:.7em;flex-wrap:wrap;justify-content:center}
.over-btns .btn{font-size:.8em}
.over-btns .btn-big{font-size:1em}

/* --- in-run pause chip (mobile-friendly) --- */
#bt-pause{
  position:absolute;top:2.6em;right:.6em;display:none;
  width:3em;height:3em;
  font-family:var(--font);font-size:1em;line-height:1;
  color:var(--paper);background:rgba(8,9,18,.55);
  border:2px solid rgba(139,147,184,.5);cursor:pointer;
}
#bt-pause.show{display:block}
#bt-pause:active{background:rgba(8,9,18,.85)}
.pause-toggles{position:static;display:flex;gap:.6em}

/* --- toasts --- */
#toasts{position:absolute;top:3.5em;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:.5em;z-index:30;pointer-events:none}
.toast{
  background:#12142a;border:2px solid var(--gold-dk);color:var(--gold);
  font-size:.75em;padding:.7em 1.2em;white-space:nowrap;
  box-shadow:0 .3em 0 rgba(0,0,0,.5);
  animation:toast-in .3s cubic-bezier(.2,1.8,.4,1) both, toast-out .4s ease-in 2.6s both;
}
@keyframes toast-in{from{transform:translateY(-2em);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-out{to{transform:translateY(-1em);opacity:0}}

/* --- compact phones / short landscape browsers --- */
@media (pointer: coarse), (max-width: 700px), (max-height: 520px) {
  html.compact-game,
  html.compact-game body{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  html.compact-game body{display:block}
  #room{
    position:fixed;
    left:var(--viewport-left);
    top:var(--viewport-top);
    width:var(--viewport-width);
    height:var(--viewport-height);
    padding:
      calc(var(--safe-top) + 6px)
      calc(var(--safe-right) + 6px)
      calc(var(--safe-bottom) + 6px)
      calc(var(--safe-left) + 6px);
    justify-content:center;
    gap:0;
    overflow:hidden;
  }
  #marquee{display:none}
  #stage{
    border-width:3px;
    border-radius:6px;
    outline:1px solid #05060c;
    box-shadow:
      inset 0 0 0 1px var(--bezel-hi),
      0 0 0 1px #000,
      0 10px 30px rgba(0,0,0,.65);
  }
  .toggles{bottom:.45em;right:.45em;gap:.35em}
  .tgl{border-width:1px}
  .panel{padding:.9em 1em}
  .shop-grid{gap:.5em}
  .over-card{max-width:92%;padding:1em 1.2em}
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  #stage{
    border-width:2px;
    border-radius:4px;
  }
  #bt-pause{top:.55em;right:.55em}
  .panel{padding:.65em .8em}
}