/* =========================================================================
   style.css — shell + studio-grade menus. Offline-safe fonts only
   (Impact / Bahnschrift / Segoe UI ship with Windows).
   ========================================================================= */
:root{
  --ink:#eaf2ff;
  --steel:#9fb2d6;
  --accent:#3a86ff;
  --accent2:#2bd4ff;
  --gold:#ffd21e;
  --red:#e8231b;
  --panel:rgba(10,16,32,.82);
  --display:"Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
  --cond:"Bahnschrift","Arial Narrow","Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#05070f;overflow:hidden;font-family:var(--cond);color:var(--ink)}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(120% 120% at 50% 0%,#0c1426 0%,#05070f 70%)}

/* the game canvas fills the viewport, letterboxed, crisp pixels */
#game{
  width:100%;height:100%;object-fit:contain;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
  transition:filter .3s ease;
}
body.paused-blur #game{filter:blur(5px) brightness(.55) saturate(.8)}

/* ---- screens (overlays) ---- */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:10;animation:fade .35s ease}
.screen.hidden{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---- emblem (S shield, pure CSS) ---- */
.emblem{width:74px;height:84px;margin:0 auto 14px;
  background:
    linear-gradient(#ffe169,#ffc400);
  clip-path:polygon(50% 0,100% 33%,80% 100%,20% 100%,0 33%);
  position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.emblem::after{content:"S";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:Georgia,"Times New Roman",serif;font-weight:800;font-size:54px;color:var(--red);
  text-shadow:0 1px 0 rgba(0,0,0,.25);transform:translateY(-2px)}
.emblem.big{width:104px;height:118px}
.emblem.big::after{font-size:76px}

/* ---- loading ---- */
#loading{background:radial-gradient(120% 120% at 50% 30%,#0c1426,#05070f)}
.loadbox{text-align:center}
.loadlabel{font-family:var(--cond);letter-spacing:.34em;font-size:14px;color:var(--steel);margin:6px 0 16px}
.loadtrack{width:280px;height:8px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;margin:0 auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
#load-bar{width:0;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent2),var(--accent));
  box-shadow:0 0 12px var(--accent2);transition:width .2s ease}

/* ---- main menu ---- */
#menu{background:none}
.menu-inner{text-align:center;transform:translateY(-4%)}
.kicker{font-family:var(--cond);letter-spacing:.5em;font-size:13px;color:var(--accent2);
  text-shadow:0 0 14px rgba(43,212,255,.6);margin-bottom:6px;padding-left:.5em}
.title{
  font-family:var(--display);font-size:118px;line-height:.86;letter-spacing:2px;
  background:linear-gradient(#bfe0ff 0%,#3a86ff 48%,#1c4fd6 52%,#9fc2ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px #0b1e44;
  filter:drop-shadow(0 4px 0 #b3160f) drop-shadow(0 8px 22px rgba(0,0,0,.6));
  transform:skewX(-6deg);
}
.subtitle{font-family:var(--cond);font-weight:700;letter-spacing:.42em;font-size:16px;color:#ffd21e;
  text-shadow:0 2px 8px rgba(0,0,0,.6);margin:4px 0 30px;padding-left:.4em}
.note{margin-top:18px;color:var(--steel);font-size:13px;letter-spacing:.1em;opacity:0;transition:opacity .4s}

/* ---- buttons ---- */
.btns{display:flex;flex-direction:column;gap:13px;align-items:center}
.btn{
  font-family:var(--cond);font-weight:700;letter-spacing:.22em;font-size:18px;color:var(--ink);
  width:260px;padding:13px 0;border:none;border-radius:10px;cursor:pointer;position:relative;
  background:linear-gradient(180deg,rgba(58,90,150,.55),rgba(20,32,60,.65));
  box-shadow:inset 0 0 0 1px rgba(160,200,255,.25), 0 6px 18px rgba(0,0,0,.45);
  text-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(80,120,200,.7),rgba(28,44,84,.8));
  box-shadow:inset 0 0 0 1px rgba(180,220,255,.5), 0 10px 26px rgba(0,0,0,.5)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(180deg,#2bd4ff,#2a64e8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 8px 22px rgba(42,100,232,.5), 0 0 22px rgba(43,212,255,.35);
  color:#04101f;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-2px)}

/* ---- panels (pause / controls / end) ---- */
.panel{background:var(--panel);border-radius:16px;padding:34px 40px;min-width:360px;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(160,200,255,.18), 0 20px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(2px);animation:rise .3s ease}
.panel.wide{min-width:540px}
.panel.center{display:flex;flex-direction:column;align-items:center}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.panel-title{font-family:var(--display);letter-spacing:2px;font-size:46px;margin-bottom:22px;transform:skewX(-5deg);
  background:linear-gradient(#eaf2ff,#9fb2d6);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.panel-title.danger{background:linear-gradient(#ffd0c0,#ff5a44);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel-title.win{background:linear-gradient(#fff0a8,#ffc400);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- suit select ---- */
.suit-row{display:flex;gap:30px;justify-content:center;margin:18px 0 26px}
.suit-card{position:relative;width:200px;padding:18px 14px 14px;border:none;cursor:pointer;border-radius:16px;
  background:linear-gradient(180deg,rgba(40,60,104,.45),rgba(14,22,44,.7));
  box-shadow:inset 0 0 0 1px rgba(160,200,255,.22), 0 10px 30px rgba(0,0,0,.5);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
.suit-card:hover{transform:translateY(-6px) scale(1.03);
  background:linear-gradient(180deg,rgba(70,110,190,.6),rgba(20,32,64,.8));
  box-shadow:inset 0 0 0 1px rgba(190,224,255,.55), 0 16px 40px rgba(0,0,0,.55), 0 0 28px rgba(43,212,255,.35)}
.suit-card:active{transform:translateY(-2px) scale(1.0)}
.suit-preview{width:172px;height:172px;margin:0 auto;overflow:hidden;border-radius:12px;
  background:radial-gradient(circle at 50% 38%, rgba(120,170,230,.28), rgba(8,12,26,.5) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.suit-sprite{height:172px;width:auto;display:block;image-rendering:pixelated;image-rendering:crisp-edges;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.suit-name{font-family:var(--cond);font-weight:700;letter-spacing:.22em;font-size:17px;color:#dce8ff;margin-top:12px;
  text-shadow:0 2px 6px rgba(0,0,0,.6)}
.suit-card:hover .suit-name{color:#fff}

/* ---- controls keycaps ---- */
.ctrl-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:26px;text-align:left}
.ctrl{display:flex;align-items:center;gap:16px}
.keys{display:flex;gap:5px;align-items:center;min-width:150px;justify-content:flex-end}
.cap{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;
  font-family:var(--cond);font-weight:700;font-size:15px;color:#dce8ff;
  background:linear-gradient(180deg,#2a3a5e,#16223c);border-radius:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.4), 0 3px 0 #0b1424, 0 4px 6px rgba(0,0,0,.4)}
.cap.wide-cap{min-width:74px}
.sep{color:var(--steel);font-size:13px;padding:0 2px}
.ctrl-label{font-size:16px;color:#cdd9f0;letter-spacing:.02em}
.ctrl-label b{color:var(--gold)}

/* ---- end screens ---- */
.go-score-wrap{font-family:var(--cond);font-weight:700;letter-spacing:.28em;font-size:17px;color:var(--steel);margin-bottom:4px}
.go-score-wrap span{display:block;font-size:46px;color:#fff;letter-spacing:.06em;margin-top:4px;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.go-sub{color:var(--steel);font-size:14px;letter-spacing:.12em;margin:6px 0 22px}

/* ---- in-play hint ---- */
#hudwrap{position:absolute;inset:0;pointer-events:none;z-index:5}
#hudwrap.hidden{display:none}
#hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-family:var(--cond);letter-spacing:.12em;font-size:12px;color:rgba(220,232,255,.55);
  background:rgba(8,12,24,.4);padding:6px 14px;border-radius:20px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(160,200,255,.12)}
#hint b{color:var(--accent2);font-weight:700}

@media (max-width:680px){
  .title{font-size:74px}
  .panel.wide{min-width:0;width:92vw}
  #hint{font-size:10px;letter-spacing:.06em}
}