@font-face{
  font-family:'Bungee';
  src:url('fonts/Bungee-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Press Start 2P';
  src:url('fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --honey:#ffc84a;
  --honey-hi:#fff0bd;
  --amber:#ff9a1f;
  --ink:#160b20;
  --plum:#2a1338;
  --cream:#fff5df;
}

*{box-sizing:border-box}
html,body{
  margin:0;height:100%;overflow:hidden;
  background:radial-gradient(120% 85% at 50% -10%, #4a2168 0%, #2a1338 42%, #120a1a 100%);
  color:var(--cream);
  font-family:'Bungee',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
body{position:fixed;inset:0;overscroll-behavior:none;touch-action:none}

#game{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;
  touch-action:none;cursor:grab;outline:none;
}
#game:active{cursor:grabbing}

/* ---------------------------------------------------------------- overlays */
.overlay{
  position:absolute;inset:0;z-index:10;
  display:grid;place-items:center;
  padding:22px;
  background:radial-gradient(120% 90% at 50% 18%, rgba(46,18,62,.6), rgba(7,3,12,.88));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:overlay-in .25s ease both;
}
.overlay.hidden{display:none}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}

.panel{
  position:relative;
  width:min(660px,94vw);
  padding:clamp(22px,4vw,40px) clamp(20px,4vw,44px) clamp(20px,3vw,30px);
  text-align:center;
  border-radius:26px;
  border:2px solid rgba(255,200,74,.34);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,170,50,.13), transparent 60%),
    linear-gradient(165deg, rgba(58,27,74,.97), rgba(20,10,28,.98));
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 70px rgba(255,140,20,.08);
  animation:panel-in .32s cubic-bezier(.2,.9,.25,1.1) both;
}
@keyframes panel-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.kicker{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(8px,1.4vw,10px);
  letter-spacing:.22em;
  color:var(--amber);
  text-shadow:0 0 16px rgba(255,140,30,.6);
  margin-bottom:14px;
}

.title{
  margin:4px 0 6px;
  font-family:'Bungee',system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(44px,9vw,88px);
  line-height:.92;
  letter-spacing:.01em;
  background:linear-gradient(180deg,#fff6d0 0%,#ffd75f 42%,#ff961c 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 0 rgba(116,50,4,.95)) drop-shadow(0 0 26px rgba(255,150,30,.45));
}
.title.small{font-size:clamp(30px,5.6vw,52px)}
.title span{filter:brightness(1.1)}

.lede{
  margin:14px auto 0;
  max-width:46ch;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(13px,1.6vw,15.5px);
  line-height:1.55;
  color:#e2d3ea;
}
.lede em{color:var(--honey);font-style:normal;font-weight:700}

.how{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:22px 0 24px;
}
.how-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 6px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,200,74,.16);
}
.how-item span{font-size:24px;line-height:1.1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.how-item b{font-size:11px;letter-spacing:.08em;color:var(--honey)}
.how-item small{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:11px;color:#b7a6c4;
}

.btn{
  position:relative;
  display:inline-block;
  margin:4px 0 2px;
  padding:16px 42px;
  border:none;border-radius:999px;
  font-family:'Bungee',system-ui,sans-serif;
  font-size:clamp(16px,2vw,20px);
  letter-spacing:.04em;
  color:#3a1c02;
  background:linear-gradient(180deg,#fff0bb 0%,#ffd35c 32%,#ff961c 100%);
  box-shadow:
    0 6px 0 #a1500a,
    0 12px 26px rgba(255,130,20,.35),
    0 0 0 2px rgba(255,220,140,.35) inset,
    0 1px 0 rgba(255,255,255,.8) inset;
  cursor:pointer;
  transition:transform .1s ease,box-shadow .1s ease,filter .15s ease;
  animation:btn-glow 2.6s ease-in-out infinite;
}
@keyframes btn-glow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.09)}
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #a1500a,0 16px 32px rgba(255,130,20,.45),0 0 0 2px rgba(255,230,160,.5) inset}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #a1500a,0 8px 16px rgba(255,130,20,.3)}

.foot{
  margin:18px 0 0;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:12px;line-height:1.65;
  color:#b9a7c6;
}
.foot b{color:var(--honey);font-weight:700}
.dim{color:#8d7c9b}
.foot.dim{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:.06em;margin-top:20px}

/* ------------------------------------------------------------- level up ui */
.levelup{width:min(940px,95vw);text-align:center}
.lvl-title{
  margin:6px 0 0;
  font-family:'Bungee',system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(20px,3.4vw,34px);
  color:#fff3cf;
  text-shadow:0 0 26px rgba(255,160,40,.45),0 3px 0 rgba(90,40,4,.8);
}
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:24px;
}
.card{
  position:relative;
  display:flex;flex-direction:column;gap:9px;
  padding:18px 16px 30px;
  text-align:left;
  color:inherit;font:inherit;
  border-radius:18px;
  border:2px solid rgba(255,200,74,.26);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,170,40,.14), transparent 65%),
    linear-gradient(170deg,rgba(60,29,74,.96),rgba(23,11,32,.98));
  box-shadow:0 12px 26px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.06) inset;
  cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
  animation:card-in .28s cubic-bezier(.2,.9,.25,1.15) both;
}
.card:nth-child(2){animation-delay:.05s}
.card:nth-child(3){animation-delay:.1s}
@keyframes card-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.card:hover,.card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--honey);
  box-shadow:0 18px 36px rgba(0,0,0,.5),0 0 34px rgba(255,160,30,.28),0 0 0 1px rgba(255,200,74,.35);
  outline:none;
}
.card.is-new{border-color:rgba(120,230,140,.42)}
.card.is-new::after{
  content:'NEW';
  position:absolute;top:-9px;right:14px;
  padding:5px 7px;border-radius:5px;
  font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:.06em;
  color:#0b2712;background:linear-gradient(180deg,#9bf0a8,#4bd269);
  box-shadow:0 4px 12px rgba(60,220,120,.35);
}
.card-icon{
  font-size:34px;line-height:1;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.55));
}
.card-name{
  font-size:clamp(12px,1.5vw,15px);
  letter-spacing:.03em;line-height:1.25;
  color:#ffe6a6;
}
.card-desc{
  min-height:38px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:12.5px;line-height:1.45;
  color:#d6c6e0;
}
.pips{display:flex;gap:4px;margin-top:auto;padding-top:4px}
.pips i{display:block;width:13px;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.pips i.on{background:linear-gradient(90deg,#ffb02e,#ffe4a0);box-shadow:0 0 9px rgba(255,180,40,.55)}
.card-key{
  position:absolute;right:12px;bottom:9px;
  font-family:'Press Start 2P',monospace;font-size:9px;
  color:rgba(255,255,255,.28);
}

/* -------------------------------------------------------------- end screen */
.end-panel{max-width:620px}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin:22px 0 24px;
  padding:16px 10px;
  border-radius:16px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,200,74,.14);
}
.stats div{display:flex;flex-direction:column;gap:5px}
.stats b{
  font-family:'Bungee',system-ui,sans-serif;font-weight:400;
  font-size:clamp(18px,2.6vw,26px);color:var(--honey);
  text-shadow:0 0 18px rgba(255,150,30,.35);
}
.stats small{
  font-family:'Press Start 2P',monospace;font-size:7.5px;
  letter-spacing:.08em;color:#9d8cab;text-transform:uppercase;
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:760px){
  .overlay{padding:14px}
  .panel{padding:22px 18px 22px;border-radius:20px}
  .how{gap:6px;margin:16px 0 18px}
  .how-item{padding:10px 4px}
  .how-item span{font-size:20px}
  .how-item b{font-size:9px}
  .cards{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .card{
    display:grid;
    grid-template-columns:52px 1fr;
    grid-template-areas:'icon name' 'icon desc' 'icon pips';
    align-items:center;
    column-gap:12px;row-gap:3px;
    padding:12px 34px 12px 12px;
    border-radius:14px;
  }
  .card-icon{grid-area:icon;font-size:30px;text-align:center}
  .card-name{grid-area:name}
  .card-desc{grid-area:desc;min-height:0;font-size:12px}
  .pips{grid-area:pips;padding-top:2px}
  .card-key{bottom:8px}
  .stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .foot{font-size:11px}
  .foot.dim{font-size:7px}
}
@media (max-height:640px){
  .how{margin:12px 0 14px}
  .lede{margin-top:10px;font-size:12.5px}
  .panel{padding-top:20px;padding-bottom:18px}
  .title{font-size:clamp(38px,7vw,64px)}
}