:root{
  /* brighter BBQ palette */
  --bg:#2b1820; --bg2:#3a1c25;
  --panel:#3f1f28; --muted:#ffd7de; --ink:#fff9fb;
  --accent:#ff7a7a; --accent2:#ffd06e;
  --danger:#ff596e; --ok:#87ffa6;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 70% -10%, #6a2e3b 0%, var(--bg2) 55%),
    radial-gradient(1400px 900px at -20% 120%, #5a2631 0%, var(--bg) 60%);
  color:var(--ink);
  font:600 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",Arial
}
.wrap{min-height:100%;display:grid;grid-template-rows:auto auto 1fr auto}

/* Top */
.topbar{
  display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  background:linear-gradient(90deg,#6d2a35,#863443);
  border-bottom:1px solid rgba(255,255,255,.12);color:#fff9fb;letter-spacing:.3px
}
.brand{font-weight:900;letter-spacing:1px;color:#fff3f5;text-shadow:0 0 10px rgba(255,224,224,.7)}
.bank{display:flex;gap:10px;align-items:center}
.pill{color:#422; background:#ffd9de; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.08)}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:2px 8px;margin-left:8px;font-size:12px;color:#fff0f3; background:rgba(255,255,255,.08)}

/* Tabs */
.nav{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08)}
.tab{border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 14px;background:#ef8995;color:#2d0e14;cursor:pointer;font-weight:900}
.tab.active{outline:2px solid var(--accent);background:linear-gradient(135deg,#ffd1d6,#ffb2b7)}

/* Sections */
.content{display:none;padding:16px}
.content.show{display:block}
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.12)), var(--panel);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px
}
.footer{text-align:center;color:#ffe6ea;padding:12px 0 18px}

/* Controls (Mines) */
.controls .row{display:flex;align-items:center;gap:10px;margin:8px 0}
.lbl{width:86px;color:#ffe1e6}
.betbox{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
input[type="number"]{
  width:120px;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15);
  background:#fff6f7;color:#301015;font-weight:800
}
.mini{width:36px;height:36px;border-radius:10px;border:1px solid rgba(0,0,0,.15);background:#ffe9ec;color:#351017;cursor:pointer;font-weight:900}
.mini:hover{filter:brightness(1.05)}
input[type="range"]{flex:1;accent-color:#ff8a8a}
#bombsOut{min-width:2ch;text-align:right;color:#ffe1b2;font-weight:900}
.actions{gap:8px}
.cta,.ghost,.chip{
  border:1px solid rgba(0,0,0,.15);border-radius:12px;cursor:pointer;
  padding:10px 14px;font-weight:900;letter-spacing:.3px;box-shadow:var(--shadow)
}
.cta{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#3a0f14}
.ghost{background:#fff2f4;color:#3a0f14}
.chip{background:#ffe9ec;color:#3a0f14}
.stats{color:#ffe1e6;display:grid;gap:6px;margin-top:10px}
.tiny{font-size:12px}

/* Mines board */
.board{display:grid;place-items:center}
.grid{
  --size:min(90vw,560px);
  width:var(--size);height:var(--size);
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
  gap:10px;padding:10px
}
.tile{
  position:relative;
  appearance:none;border:2px solid rgba(255,255,255,.3);border-radius:16px;
  background:linear-gradient(180deg,#ffe9eb,#ffd6d9);color:#2b0c11;font-weight:900;
  font-size:clamp(16px,2.4vw,24px);display:grid;place-items:center;cursor:pointer;
  transition:transform .06s ease,filter .15s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 8px 20px rgba(0,0,0,.2);
  user-select:none;height:100%;aspect-ratio:1/1
}
.tile:hover{filter:brightness(1.04);transform:translateY(-1px)}
.tile[disabled]{opacity:.75;cursor:default}

.tile.safe{background:linear-gradient(180deg,#fff5f0,#ffe5cf);border-color:#ffd4a2}
.tile.bomb{background:linear-gradient(180deg,#ffe3e6,#ffc2c9);border-color:#ff9aa7}
.tile.shield{outline:2px dashed rgba(255,179,107,.9)}

/* Profit micro-tag on tiles */
.tile .gain{
  position:absolute;bottom:4px;right:6px;
  font-size:14px;color:#0a7a2b;font-weight:900;opacity:0;
  transform:translateY(4px);transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;text-shadow:0 1px 0 #fff
}
.tile.show-gain .gain{opacity:1;transform:translateY(0)}

/* Shop */
.shop{display:grid;gap:14px}
.item{
  display:flex;justify-content:space-between;align-items:center;background:#ffeef1;border:1px solid rgba(0,0,0,.12);
  border-radius:14px;padding:12px;color:#2d0e14
}
.item .meta{display:grid}
.item .meta small{color:#7a2a35}
.price{color:#e2576e;font-weight:900}
.disabled{opacity:.6;pointer-events:none}

/* Arena scene */
.boss-wrap{display:grid;gap:12px;grid-template-columns:1fr}
.boss-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.arena{
  margin-top:8px;margin-bottom:6px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;
  background:#ffeef1;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:12px;color:#2d0e14
}
.side{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.avatar{
  font-size:54px;width:88px;height:88px;display:grid;place-items:center;background:#fff;border:1px solid rgba(0,0,0,.12);
  border-radius:16px;transition:transform .25s ease,filter .2s ease
}
.avatar.hit{filter:brightness(1.2)}
.avatar.hero.attack{transform:translateX(18px)}
.avatar.boss.attack{transform:translateX(-18px)}
.avatar.shake{animation:shake .35s both}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

.hpbar{height:14px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;overflow:hidden}
.hpbar>div{height:100%;background:linear-gradient(90deg,#87ffa6,#ffd06e);width:100%}
.hp{display:grid;gap:6px}

/* Timing bar */
.timing{
  position:relative;height:24px;width:min(80ch,90vw);background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;overflow:hidden
}
.timing .zone.ok{position:absolute;left:40%;width:20%;height:100%;background:rgba(104,203,134,.35)}
.timing .cursor{position:absolute;top:0;left:0;width:4px;height:100%;background:#6d2a35;border-radius:2px}
.spatula{background:linear-gradient(180deg,#f9e1d4,#c7b2a6)}

/* Grill Heat Bar */
.powerWrap{display:grid;gap:6px;margin:8px 0 4px}
.powerLabel{color:#ffe1e6;font-size:13px}
.powerBar{height:10px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;overflow:hidden}
.powerBar>div{height:100%;width:25%;background:linear-gradient(90deg,#87ffa6,#ff7a7a)}
.powerPct{font-size:12px;color:#ffe1e6}

/* Toast */
.toast{
  position:fixed; top:70px; right:14px;
  background:linear-gradient(180deg, rgba(255,179,107,.25), rgba(255,122,122,.25));
  border:1px solid rgba(255,179,107,.6);
  color:#2d0e14; padding:10px 14px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  font-weight:900; letter-spacing:.3px; background-clip: padding-box;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* Overlays */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:20px;z-index:9000
}
.overlay.show{display:flex}
.card{
  width:min(92vw,460px);background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:18px;box-shadow:var(--shadow);padding:18px;text-align:center;color:#2d0e14
}
.card h2{margin:6px 0 8px}

/* Popup */
.popup{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);z-index:9500;
}
.popup.show{display:flex;}
.card.small{
  width:min(90vw,360px);
  background:#fff;border:1px solid rgba(0,0,0,.15);
  border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.35);
  padding:22px;text-align:center;color:#2d0e14
}
.card.small p{margin:0 0 18px;color:#6b1f2b}

/* 🥩 Steak rain */
#steakRain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9200}
.steakDrop{
  position:absolute;top:-60px;font-size:36px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
  animation:fall linear forwards;
}
@keyframes fall{
  to{transform:translateY(120vh) rotate(180deg);opacity:.9}
}