/* game.css -- Hoardkeeper UI. Dark stone + gold, to sit next to the board art
   without competing with it. */

:root{
  --ink:#0d0c10;
  --stone:#16151b;
  --stone-2:#1e1c25;
  --stone-3:#2a2733;
  --line:#3a3644;
  --text:#e9e5dd;
  --dim:#a49d93;
  --gold:#f0c04a;
  --gold-dim:#8a6f28;
  --silver:#cfd6e0;
  --danger:#e2604e;
  --good:#7ad86a;
  --accent:#ff8c2e;           /* matches the Iron Pixel site */
  --r:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
h1,h2,h3,.brand{font-family:Cinzel,Georgia,serif; letter-spacing:.01em; margin:0}
button{font:inherit; color:inherit}

#app{position:fixed; inset:0}
.screen{position:absolute; inset:0; display:none; flex-direction:column}
.screen.is-on{display:flex}

/* ------------------------------------------------------------- buttons */
.btn{
  border:1px solid var(--line); background:linear-gradient(#2b2833,#201e28);
  color:var(--text); padding:.62rem 1.05rem; border-radius:var(--r);
  cursor:pointer; font-weight:600; line-height:1.1;
  transition:transform .08s ease, border-color .15s, background .15s;
}
.btn:hover:not(:disabled){border-color:var(--gold); transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.42; cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.small{padding:.42rem .68rem; font-size:.86rem}
.btn.danger:hover{border-color:var(--danger); color:var(--danger)}
.btn small{display:block; font-size:.68rem; color:var(--gold); font-weight:600}

/* ------------------------------------------------------------- loading */
#loading{align-items:center; justify-content:center;
  background:radial-gradient(1200px 700px at 50% 35%,#221f2a,#0b0a0e 70%)}
.load-box{width:min(560px,88vw); text-align:center}
.brand{font-size:clamp(2rem,5vw,3.2rem); color:var(--gold);
  text-shadow:0 2px 0 #000,0 0 32px rgba(240,192,74,.22)}
.tagline{color:var(--dim); margin:.5rem 0 1.4rem; line-height:1.55}
.bar{height:10px; background:#100f14; border:1px solid var(--line);
  border-radius:99px; overflow:hidden}
#load-bar{height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  transition:width .2s ease}
.load-text{color:var(--dim); font-size:.9rem; margin-top:.7rem}

/* -------------------------------------------------------- stage select */
#menu{overflow:auto; padding:clamp(1rem,3vw,2.4rem);
  background:radial-gradient(1100px 620px at 20% -10%,#241f2b,#0b0a0e 65%)}
.menu-head{display:flex; gap:1.5rem; flex-wrap:wrap;
  align-items:flex-start; justify-content:space-between; margin-bottom:1.8rem}
.menu-head .tagline{max-width:56ch; margin:.5rem 0 0}
.menu-actions{display:flex; gap:.6rem; flex-wrap:wrap}

.stage-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  padding-bottom:3rem;
}
.stage-card{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--stone); cursor:pointer; text-align:left;
  padding:0; transition:transform .1s ease, border-color .15s;
}
.stage-card:hover:not(.locked){transform:translateY(-3px); border-color:var(--gold)}
.stage-card.locked{cursor:not-allowed; opacity:.5}
.stage-card img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  background:#111}
.stage-card .meta{padding:.7rem .85rem .85rem}
.stage-card .no{color:var(--dim); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase}
.stage-card h3{font-size:1.02rem; margin:.15rem 0 .3rem}
.stage-card .biome{color:var(--dim); font-size:.82rem}
.stage-card .lock{position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(8,7,10,.62); font-size:1.9rem}
.stars{display:flex; gap:.22rem; margin-top:.45rem}
.star{width:15px; height:15px; opacity:.24}
.star.on{opacity:1}
.overlay .stars{justify-content:center; gap:.5rem; margin:.8rem 0 1rem}
.overlay .star{width:34px; height:34px}

/* ------------------------------------------------------------------ hud */
#play{background:#08080b}
#hud{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.55rem clamp(.6rem,2vw,1.2rem);
  background:linear-gradient(#1b1922,#131118);
  border-bottom:1px solid var(--line); z-index:5;
}
.hud-stage{min-width:0; flex:1 1 180px}
.hud-stage span{font-family:Cinzel,serif; font-size:1.06rem; display:block}
.hud-stage small{color:var(--dim); font-size:.76rem}
.hud-stats{display:flex; gap:.55rem}
.stat{
  display:flex; align-items:center; gap:.4rem; padding:.34rem .74rem;
  border:1px solid var(--line); border-radius:99px; background:#100f14;
  font-variant-numeric:tabular-nums; font-weight:700; min-width:88px;
}
.stat .ico{font-size:.9rem}
.stat.gold{color:var(--gold); border-color:var(--gold-dim)}
.stat.silver{color:var(--silver)}
.stat.wave{color:var(--dim)}
.stat.flash{animation:flash .5s ease}
@keyframes flash{0%{background:#4a1a14}100%{background:#100f14}}
.hud-controls{display:flex; gap:.45rem; align-items:center}

/* ---------------------------------------------------------------- board */
#board-wrap{
  position:relative; flex:1; display:grid; place-items:center;
  min-height:0; padding:.5rem; background:#08080b;
}
#board{
  max-width:100%; max-height:100%; width:auto; height:auto;
  aspect-ratio:16/9; border-radius:6px; cursor:pointer;
  box-shadow:0 18px 60px rgba(0,0,0,.7); image-rendering:auto;
}
.countdown{
  position:absolute; top:.8rem; left:50%; transform:translateX(-50%);
  background:rgba(12,11,15,.82); border:1px solid var(--line);
  padding:.35rem .9rem; border-radius:99px; font-weight:600; font-size:.9rem;
  color:var(--dim); pointer-events:none;
}
.countdown b{color:var(--gold)}

.overlay{position:absolute; inset:0; display:none; place-items:center;
  background:rgba(6,5,9,.78); backdrop-filter:blur(3px); z-index:6}
.overlay.is-on{display:grid}
.overlay-card{
  width:min(460px,92%); text-align:center; padding:1.8rem 1.6rem;
  background:linear-gradient(#221f2b,#17151d);
  border:1px solid var(--line); border-radius:16px;
}
.overlay-card h2{font-size:2rem; color:var(--gold)}
.overlay-card.lost h2{color:var(--danger)}
.overlay-card p{color:var(--dim); margin:.4rem 0 0}
.ov-stats{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  margin:1rem 0 1.3rem; font-size:.88rem}
.ov-stats div{background:#100f14; border:1px solid var(--line);
  border-radius:8px; padding:.5rem}
.ov-stats b{display:block; color:var(--text); font-size:1.1rem}
.ov-stats span{color:var(--dim)}
.overlay-actions{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}

/* ---------------------------------------------------------------- panel */
#panel{
  background:linear-gradient(#15131b,#100e15); border-top:1px solid var(--line);
  padding:.55rem clamp(.6rem,2vw,1.2rem); min-height:112px; z-index:5;
}
.panel-body{display:none; gap:.5rem; align-items:stretch; flex-wrap:wrap}
.panel-body.is-on{display:flex}
.hint{color:var(--dim); font-size:.86rem; padding:.5rem 0}
.hint.is-off{display:none}

.buy{
  display:flex; gap:.6rem; align-items:center; text-align:left;
  padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--r);
  background:#1a1822; cursor:pointer; min-width:184px; flex:1 1 184px;
  transition:border-color .12s, transform .08s;
}
.buy:hover:not(:disabled){border-color:var(--gold); transform:translateY(-2px)}
.buy:disabled{opacity:.4; cursor:not-allowed}
.buy .pic{width:46px; height:46px; flex:none; border-radius:8px;
  background:#0e0d12 center/contain no-repeat; border:1px solid #2c2937}
.buy .nm{font-weight:700; font-size:.92rem; line-height:1.2}
.buy .ct{color:var(--silver); font-size:.82rem; font-weight:600}
.buy .bl{color:var(--dim); font-size:.74rem; line-height:1.3; margin-top:.15rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}

.tower-info{display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  width:100%}
.tower-info .pic{width:64px; height:64px; border-radius:10px;
  background:#0e0d12 center/contain no-repeat; border:1px solid #2c2937;
  flex:none}
.tower-info h3{font-size:1.06rem}
.tower-info .lvl{color:var(--gold); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase}
.statline{display:flex; gap:.9rem; flex-wrap:wrap; color:var(--dim);
  font-size:.84rem; margin-top:.25rem}
.statline b{color:var(--text)}
.tower-actions{margin-left:auto; display:flex; gap:.5rem; align-items:center}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed; inset:0; display:none; place-items:center;
  background:rgba(6,5,9,.8); z-index:20; padding:1rem}
.modal.is-on{display:grid}
.modal-card{width:min(620px,94%); max-height:86vh; overflow:auto;
  background:linear-gradient(#221f2b,#17151d); border:1px solid var(--line);
  border-radius:16px; padding:1.6rem}
.modal-card h2{color:var(--gold); margin-bottom:.8rem}
.modal-card ul{margin:0 0 1.2rem; padding-left:1.1rem; line-height:1.62;
  color:var(--dim)}
.modal-card li{margin-bottom:.55rem}
.modal-card b{color:var(--text)}

/* --------------------------------------------------------------- mobile */
@media (max-width:720px){
  #hud{gap:.5rem; padding:.45rem .6rem}
  .hud-stage{flex-basis:100%; order:-1}
  .stat{min-width:0; padding:.3rem .6rem; font-size:.86rem}
  .buy{min-width:150px; flex-basis:150px}
  .buy .bl{display:none}
  #panel{min-height:96px}
}

/* ------------------------------------------------- dungeonmaster + perks */
.dm{min-width:210px; padding:.4rem .7rem; border:1px solid var(--line);
  border-radius:var(--r); background:#100f14}
.dm-top{display:flex; justify-content:space-between; gap:.8rem;
  font-size:.78rem; margin-bottom:.34rem}
.dm-lvl{color:var(--dim)}
.dm-lvl b{color:var(--gold); font-size:.92rem}
.dm-xp{color:var(--dim); font-variant-numeric:tabular-nums}
.dm-bar{height:6px; background:#07070a; border-radius:99px; overflow:hidden}
#dm-fill{height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#7a5cc4,#c39cff); transition:width .3s ease}

.pip{display:none; margin-left:.35rem; min-width:20px; padding:0 .35rem;
  border-radius:99px; background:var(--gold); color:#241a02;
  font-size:.74rem; font-weight:800; line-height:1.5}
.pip.is-on{display:inline-block}

.modal-card.wide{width:min(880px,95%)}
.perks-head{display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; margin-bottom:1.1rem}
.perks-head .tagline{margin:.3rem 0 0; font-size:.86rem}
.points{text-align:center; padding:.5rem .9rem; border:1px solid var(--gold-dim);
  border-radius:var(--r); background:#140f04}
.points b{display:block; font-size:1.6rem; color:var(--gold);
  font-family:Cinzel,serif; line-height:1}
.points span{font-size:.72rem; color:var(--dim); letter-spacing:.1em;
  text-transform:uppercase}

.perk-grid{display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.perk{display:flex; gap:.7rem; padding:.7rem .8rem; text-align:left;
  border:1px solid var(--line); border-radius:var(--r); background:#1a1822;
  cursor:pointer; transition:border-color .12s, transform .08s}
.perk:hover:not(:disabled){border-color:var(--gold); transform:translateY(-2px)}
.perk:disabled{cursor:default}
.perk.maxed{border-color:var(--gold-dim); background:#171208}
.perk.locked{opacity:.55}
.perk .ic{width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:8px; background:#0e0d12; border:1px solid #2c2937;
  font-size:1.05rem; color:var(--gold)}
.perk .nm{font-weight:700; font-size:.92rem}
.perk .ef{color:var(--gold); font-size:.8rem; font-weight:600; margin-top:.1rem}
.perk .bl{color:var(--dim); font-size:.74rem; line-height:1.35; margin-top:.2rem}
.ranks{display:flex; gap:3px; margin-top:.35rem}
.rank{width:22px; height:5px; border-radius:99px; background:#33303c}
.rank.on{background:var(--gold)}
.perks-foot{display:flex; justify-content:space-between; align-items:center;
  gap:.6rem; margin-top:1.2rem}

.ov-xp{margin:.9rem 0 .2rem; padding:.6rem .8rem; border-radius:var(--r);
  background:#140f04; border:1px solid var(--gold-dim); font-size:.9rem}
.ov-xp b{color:var(--gold)}
.ov-xp .lvup{display:block; margin-top:.3rem; color:#c39cff; font-weight:700}

/* ----------------------------------------------------------- difficulty */
.diff-row{display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  margin:0 0 1.5rem; padding:.75rem .9rem; border:1px solid var(--line);
  border-radius:var(--r); background:#100f14}
.diff-label{min-width:190px}
.diff-label span{display:block; font-family:Cinzel,serif; font-size:.98rem;
  color:var(--gold)}
.diff-label small{color:var(--dim); font-size:.78rem; line-height:1.35;
  display:block; margin-top:.15rem}
.diff-picker{display:flex; gap:.35rem; flex-wrap:wrap; flex:1}
.diff-opt{padding:.45rem .8rem; border:1px solid var(--line); border-radius:99px;
  background:transparent; cursor:pointer; font-size:.86rem; font-weight:600;
  color:var(--dim); transition:border-color .12s, color .12s, background .12s}
.diff-opt:hover{border-color:var(--gold); color:var(--text)}
.diff-opt.on{background:linear-gradient(#3a2f10,#241d07);
  border-color:var(--gold); color:var(--gold)}
.diff-opt .mult{display:block; font-size:.68rem; font-weight:500; opacity:.75}

.diff-tag{padding:.22rem .6rem; border-radius:99px; font-size:.74rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap}
.diff-tag[data-tier="2"]{color:#ffc46a; border-color:#7a5a1c}
.diff-tag[data-tier="3"]{color:#ff9a6a; border-color:#7a3a1c}
.diff-tag[data-tier="4"]{color:#ff7b7b; border-color:#7a1c1c}

.stage-card .cleared{position:absolute; top:.5rem; right:.5rem;
  padding:.16rem .5rem; border-radius:99px; font-size:.68rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  background:rgba(10,9,13,.82); border:1px solid var(--gold-dim);
  color:var(--gold)}

/* --------------------------------------------------------------- sound */
.sound{display:flex; align-items:center; gap:.55rem; padding:.35rem .6rem;
  border:1px solid var(--line); border-radius:var(--r); background:#100f14}
.sound .vol{display:flex; align-items:center; gap:.35rem; font-size:.72rem;
  color:var(--dim)}
.sound .vol span{letter-spacing:.06em; text-transform:uppercase}
.sound input[type=range]{width:72px; accent-color:var(--gold);
  cursor:pointer; height:4px}
#mute-btn.off, #hud-mute.off{color:var(--danger); border-color:var(--danger)}

@media (max-width:720px){
  .sound .vol{display:none}
}