@font-face{font-family:'Chakra Petch';font-weight:400;font-display:swap;
  src:url('../../vendor/fonts/chakra-400.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:600;font-display:swap;
  src:url('../../vendor/fonts/chakra-600.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:700;font-display:swap;
  src:url('../../vendor/fonts/chakra-700.woff2') format('woff2')}

:root{
  --soot:#14100D; --char:#241C16; --ember:#FF6B2C; --gold:#FFC24B;
  --quench:#7FD8CF; --bone:#F5EFE6; --dim:#9c8f80;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{background:var(--soot);color:var(--bone);font-family:'Chakra Petch',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,#0a0705b8 100%)}
#flash{position:fixed;inset:0;pointer-events:none;z-index:6;background:#fff;opacity:0;transition:opacity .3s}

.screen{position:fixed;inset:0;z-index:10;opacity:0;pointer-events:none;transition:opacity .3s}
.screen.on{opacity:1;pointer-events:auto}
.panelbg{background:
  radial-gradient(120% 90% at 50% -20%,#3a2517cc 0%,transparent 60%),
  linear-gradient(#171210f2,#100c0af7);
  display:flex;flex-direction:column;overflow:hidden}
.centerbg{background:#0c0907d9;backdrop-filter:blur(6px);display:grid;place-items:center}

/* ----- forged plate buttons: cut corners + ember underline ----- */
.bigBtn{position:relative;padding:15px 30px;background:linear-gradient(180deg,#3a2a1c,#2a1d13);
  color:var(--bone);border:1px solid #57402a;font:700 15px 'Chakra Petch',sans-serif;
  letter-spacing:.18em;cursor:pointer;transition:.15s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.bigBtn::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--ember);opacity:.7;transition:.15s}
.bigBtn:hover{filter:brightness(1.25);transform:translateY(-1px)}
.bigBtn:hover::after{opacity:1;box-shadow:0 0 12px var(--ember)}
.bigBtn.ghost{background:#1c15104d;border-color:#3a2d20}
.bigBtn.ghost::after{background:#57402a}
.bigBtn:disabled{opacity:.35;cursor:default;transform:none}
.navBtn{padding:10px 16px;background:#1c1510b3;border:1px solid #3a2d20;color:var(--dim);
  font:600 12px 'Chakra Petch',sans-serif;letter-spacing:.16em;cursor:pointer;text-decoration:none;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.15s}
.navBtn:hover{color:var(--bone);border-color:#57402a}

/* ----- menu layout ----- */
.mHead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 10px}
.mTitle{text-align:center}
.mTitle h1{font-size:clamp(22px,4.5vw,36px);letter-spacing:.22em;text-indent:.22em;
  background:linear-gradient(180deg,#fff2e2,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.mTitle p{font-size:10px;letter-spacing:.3em;color:var(--dim);margin-top:2px}
.mBody{flex:1;overflow-y:auto;padding:8px 18px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:18px}
.mStats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.statPill{display:flex;flex-direction:column;align-items:center;gap:2px;background:#1c1510b3;
  border:1px solid #3a2d20;padding:8px 18px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.statPill i{font-style:normal;font-size:9px;letter-spacing:.22em;color:var(--dim)}
.statPill b{font-size:16px;color:var(--gold)}

#levelGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;width:min(640px,100%)}
.lvTile{position:relative;aspect-ratio:1;background:linear-gradient(180deg,#2b2015,#1d150e);
  border:1px solid #3a2d20;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--bone);font-family:inherit;transition:.15s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.lvTile:hover{filter:brightness(1.3);transform:translateY(-2px)}
.lvTile .n{font-size:22px;font-weight:700}
.lvTile .st{font-size:11px;letter-spacing:.14em;color:#5c5347}
.lvTile .st .got{color:var(--gold)}
.lvTile .bs{font-size:9px;color:var(--dim)}
.lvTile.locked{opacity:.38;cursor:default;transform:none;filter:none}
.lvTile.locked .n{color:#6b5f52}

/* ----- armory ----- */
#bladeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;width:min(820px,100%)}
.bCard{position:relative;background:linear-gradient(180deg,#2b2015,#1d150e);border:1px solid #3a2d20;
  padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  transition:.15s;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.bCard:hover{filter:brightness(1.25)}
.bCard svg{width:100%;height:44px}
.bCard .bn{font-size:13px;font-weight:700;letter-spacing:.12em}
.bCard .bd{font-size:9px;letter-spacing:.08em;color:var(--dim);text-align:center;min-height:22px}
.bCard .bp{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.1em}
.bCard.equipped{border-color:var(--ember);box-shadow:0 0 18px #ff6b2c44 inset}
.bCard.equipped .bp{color:var(--ember)}
.bCard.lockedB{opacity:.55}

/* ----- HUD ----- */
#hud{z-index:8}
#progressWrap{position:absolute;top:0;left:0;right:0;height:4px;background:#ffffff12}
#progressBar{height:100%;width:0%;background:linear-gradient(90deg,var(--ember),var(--gold))}
#progressGauntlet{position:absolute;right:0;top:0;height:100%;width:12%;background:#7FD8CF55;border-left:2px solid var(--quench)}
.hudTop{display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(16px + env(safe-area-inset-top)) 18px 0}
.hudCell{display:flex;flex-direction:column;gap:1px}
.hudCell.right{text-align:right;margin-right:56px}
.hudCell i{font-style:normal;font-size:9px;letter-spacing:.24em;color:var(--dim)}
.hudCell b{font-size:clamp(20px,3.4vw,30px);font-weight:700;text-shadow:0 2px 12px #000}
#comboWrap{text-align:center;min-height:60px}
#hCombo{display:block;font-size:clamp(26px,5vw,44px);font-weight:700;color:var(--gold);
  text-shadow:0 0 24px #ffc24b66;transition:transform .1s}
#hCombo.pump{transform:scale(1.25)}
#hMult{display:block;font-style:normal;font-size:12px;letter-spacing:.3em;color:var(--ember)}
#btnPause{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:40px;height:40px;
  background:#1c1510b3;border:1px solid #3a2d20;color:var(--bone);font:700 13px 'Chakra Petch';
  letter-spacing:.1em;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#hint{position:absolute;bottom:16vh;left:0;right:0;text-align:center;font-size:clamp(14px,2.4vw,20px);
  letter-spacing:.3em;color:var(--bone);text-shadow:0 2px 16px #000;opacity:0;transition:opacity .4s;
  animation:hintPulse 1.6s ease-in-out infinite alternate}
#hint.on{opacity:.95}
@keyframes hintPulse{from{transform:translateY(0)}to{transform:translateY(-6px)}}
#lockBanner{position:absolute;top:22vh;left:0;right:0;text-align:center;font-size:clamp(13px,2vw,18px);
  font-weight:700;letter-spacing:.3em;color:var(--quench);text-shadow:0 0 20px #7FD8CF88;
  opacity:0;transition:opacity .3s}
#lockBanner.on{opacity:1}

/* score popups */
#popLayer{position:fixed;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.pop{position:absolute;font:700 18px 'Chakra Petch';color:var(--bone);text-shadow:0 0 12px #000;
  transform:translate(-50%,-50%);animation:popFly .8s ease-out forwards}
.pop.goldp{color:var(--gold);font-size:22px}
.pop.hazard{color:#ff5f5f}
@keyframes popFly{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-150%) scale(1)}}
#comboBurst{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:9;pointer-events:none;
  font:700 clamp(30px,7vw,64px) 'Chakra Petch';letter-spacing:.18em;color:var(--gold);
  text-shadow:0 0 40px var(--ember);opacity:0}
#comboBurst.go{animation:burst .9s ease-out forwards}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-4deg)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(2deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.05)}}

/* ----- results / pause cards ----- */
.card{width:min(440px,92vw);background:linear-gradient(180deg,#241a12f7,#170f0af7);
  border:1px solid #57402a;padding:26px 26px 22px;text-align:center;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.card.slim{width:min(340px,90vw)}
.cardKicker{font-size:12px;letter-spacing:.34em;color:var(--dim);margin-bottom:14px}
.stars{font-size:44px;letter-spacing:.18em;color:#463a2c;margin-bottom:12px}
.stars .lit{color:var(--gold);text-shadow:0 0 24px #ffc24b88;animation:starPop .4s ease-out backwards}
.stars span:nth-child(2).lit{animation-delay:.18s}
.stars span:nth-child(3).lit{animation-delay:.36s}
@keyframes starPop{from{transform:scale(2.2);opacity:0}to{transform:scale(1);opacity:1}}
.rLine{font-size:12.5px;letter-spacing:.06em;color:var(--dim);font-style:italic;margin:-4px 0 14px}
.rRows{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.rRow{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.12em;color:var(--dim)}
.rRow b{color:var(--bone);font-size:15px}
.rRow.acc b{color:var(--quench)}
.rRow.gold b{color:var(--gold)}
.rRow.big{border-top:1px solid #3a2d20;padding-top:10px;margin-top:4px}
.rRow.big b{font-size:26px;color:var(--bone)}
.newBest{display:none;font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--ember);
  margin-bottom:12px;animation:hintPulse .7s ease-in-out infinite alternate}
.newBest.on{display:block}
.btnRow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btnCol{display:flex;flex-direction:column;gap:10px}

#toast{position:fixed;left:50%;bottom:9vh;transform:translateX(-50%) translateY(20px);z-index:50;
  background:#241a12f0;border:1px solid var(--gold);color:var(--gold);padding:12px 22px;
  font:700 13px 'Chakra Petch';letter-spacing:.16em;opacity:0;transition:.3s;pointer-events:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}