:root {
  --gold: #c8a84b;
  --gold-bright: #f0d060;
  --gold-dark: #6a4e1a;
  --brown-deep: #1a0f05;
  --brown-mid: #2d1a08;
  --brown-panel: #3a2210;
  --parchment: #e8d5a3;
  --parchment-dark: #c4a96b;
  --text-light: #f5e6c8;
  --green: #2dc52d;
  --red: #c52d2d;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size: 21px; }
body {
  background: var(--brown-deep);
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  color: var(--text-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(90,40,10,.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(60,30,5,.3) 0%, transparent 50%);
}

/* ── HEADER ── */
header { width:100%; text-align:center; padding:26px 20px 0; }
header::after { content:''; display:block; height:2px; background:linear-gradient(90deg,transparent,var(--gold),var(--gold-bright),var(--gold),transparent); margin-top:16px; box-shadow:0 0 14px rgba(200,168,75,.5); }
.title-rs { font-family:'Cinzel', 'Palatino Linotype', Georgia, serif; font-size:clamp(26px,4vw,44px); font-weight:900; color:var(--gold-bright); text-shadow:2px 2px 0 #000,0 0 30px rgba(240,208,96,.4); letter-spacing:3px; word-break:keep-all; overflow-wrap:break-word; padding:0 10px; }
.subtitle { font-size:15px; color:var(--parchment-dark); letter-spacing:2px; margin-top:5px; font-style:italic; }

/* ── FREE ROLLS BANNER ── */
.free-rolls-banner {
  width:calc(100% - 32px);
  max-width:1200px;
  margin: 14px 16px 0;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(200,168,75,.12) 0%, rgba(240,208,96,.06) 100%);
  border: 2px solid var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 0 20px rgba(200,168,75,.15), inset 0 1px 0 rgba(200,168,75,.1);
  animation: bannerGlow 3s ease-in-out infinite alternate;
}
@keyframes bannerGlow { from { box-shadow: 0 0 20px rgba(200,168,75,.15); } to { box-shadow: 0 0 35px rgba(240,208,96,.3); } }
.banner-text { flex:1; }
.banner-title { font-family:'Cinzel',serif; font-size:15px; color:var(--gold-bright); font-weight:700; letter-spacing:2px; margin-bottom:3px; }
.banner-desc { font-size:13px; color:var(--parchment-dark); font-style:italic; }
.banner-claim-btn { font-family:'Cinzel',serif; font-size:13px; font-weight:600; letter-spacing:1.5px; padding:12px 22px; background:linear-gradient(180deg,#9a6820 0%,#5e3c10 100%); border:2px solid var(--gold-bright); border-radius:3px; color:var(--gold-bright); cursor:pointer; text-transform:uppercase; transition:all .2s; white-space:nowrap; flex-shrink:0; }
.banner-claim-btn:hover:not(:disabled) { background:linear-gradient(180deg,#b07a28 0%,#724818 100%); box-shadow:0 0 18px rgba(240,208,96,.5); transform:scale(1.03); }
.banner-claim-btn:disabled { opacity:.4; cursor:not-allowed; }
.free-rolls-banner.claimed { display:none !important; }

/* ── NAV TABS ── */
.nav-tabs { display:flex; gap:5px; padding:12px 16px 0 16px; width:100%; max-width:1200px; }
.nav-tab { font-family:'Cinzel',serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; padding:9px 20px; background:rgba(0,0,0,.3); border:1px solid var(--gold-dark); border-bottom:none; border-radius:2px 2px 0 0; cursor:pointer; color:var(--parchment-dark); transition:all .14s; }
.nav-tab:hover { color:var(--gold); background:rgba(200,168,75,.08); }
.nav-tab.active { background:var(--brown-panel); color:var(--gold-bright); border-color:var(--gold); }

/* ── PANELS ── */
.panel { background:linear-gradient(160deg,var(--brown-panel) 0%,var(--brown-mid) 100%); border:2px solid var(--gold-dark); border-radius:3px; box-shadow:inset 0 1px 0 rgba(200,168,75,.1),0 4px 20px rgba(0,0,0,.55); }
.panel-title { font-family:'Cinzel',serif; font-size:13px; font-weight:600; color:var(--gold); text-align:center; padding:10px 14px 8px; border-bottom:1px solid var(--gold-dark); letter-spacing:2px; text-transform:uppercase; }

/* ── VIEWS ── */
.view { display:none; width:100%; max-width:1200px; padding:0 16px 24px; }
.view.active { display:flex; gap:20px; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; }
.view-single { display:none; width:100%; max-width:1200px; padding:0 16px 24px; }
.view-single.active { display:block; }

/* ── ROLL VIEW ── */
.panel-left { flex:2 1 200px; min-width:180px; max-width:260px; }
.eq-grid { display:grid; grid-template-columns:repeat(3,66px); grid-template-rows:repeat(5,66px); gap:5px; padding:12px; justify-content:center; }
.eq-slot { width:66px; height:66px; background:rgba(0,0,0,.55); border:2px solid #3a2008; border-radius:2px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:all .14s ease; user-select:none; }
.eq-slot:hover { border-color:var(--gold); background:rgba(200,168,75,.12); transform:scale(1.07); }
.eq-slot.selected { border-color:var(--gold-bright); background:rgba(0,0,0,.55); box-shadow:0 0 12px rgba(240,208,96,.4); }
.eq-slot.disabled-slot { opacity:.28; cursor:not-allowed; pointer-events:none; }
.eq-slot.empty { opacity:0; pointer-events:none; }
.eq-slot img.slot-icon { width:38px; height:38px; image-rendering:pixelated; opacity:.75; transition:opacity .14s; object-fit:contain; }
.eq-slot:hover img.slot-icon, .eq-slot.selected img.slot-icon { opacity:1; }
.slot-label { font-size:9px; color:var(--parchment-dark); font-family:'Cinzel',serif; letter-spacing:.3px; text-align:center; line-height:1; }
.slot-head   { grid-column:2; grid-row:1; }
.slot-cape   { grid-column:1; grid-row:2; }
.slot-neck   { grid-column:2; grid-row:2; }
.slot-ammo   { grid-column:3; grid-row:2; }
.slot-weapon { grid-column:1; grid-row:3; }
.slot-body   { grid-column:2; grid-row:3; }
.slot-shield { grid-column:3; grid-row:3; }
.slot-legs   { grid-column:2; grid-row:4; }
.slot-hands  { grid-column:1; grid-row:5; }
.slot-feet   { grid-column:2; grid-row:5; }
.slot-ring   { grid-column:3; grid-row:5; }

.toggles { display:flex; flex-direction:column; gap:8px; padding:10px 12px 8px; border-top:1px solid var(--gold-dark); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; }
.toggle-label { font-family:'Cinzel',serif; font-size:13px; color:var(--parchment-dark); letter-spacing:.5px; }
.toggle-switch { position:relative; width:40px; height:20px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { position:absolute; inset:0; background:rgba(0,0,0,.5); border:1px solid #4a3010; border-radius:10px; cursor:pointer; transition:background .2s,border-color .2s; }
.toggle-switch input:checked + .toggle-track { background:rgba(200,168,75,.25); border-color:var(--gold); }
.toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#5a3a10; transition:transform .2s,background .2s; }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(20px); background:var(--gold-bright); }

/* ── MULTI ROLL BUTTONS ── */
.multi-roll-row { display:flex; flex-direction:column; gap:5px; padding:8px 12px 0; }
.multi-roll-label { font-family:'Cinzel',serif; font-size:12px; color:var(--parchment-dark); letter-spacing:.5px; }
.multi-roll-btns { display:flex; gap:5px; }
.multi-roll-btn { flex:1; padding:7px 12px; min-width:36px; background:rgba(0,0,0,.4); border:1px solid var(--gold-dark); border-radius:3px; color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:13px; font-weight:600; cursor:pointer; transition:all .14s; white-space:nowrap; }
.multi-roll-btn:hover { border-color:var(--gold); color:var(--gold); background:rgba(200,168,75,.08); }
.multi-roll-btn.active { background:rgba(200,168,75,.2); border-color:var(--gold-bright); color:var(--gold-bright); box-shadow:0 0 8px rgba(240,208,96,.2); }
/* Pill toggle */
/* Pill toggle — state driven by data-on attribute set by JS, not DOM sibling order */
.pill-toggle { display:flex; align-items:center; gap:0; border:1px solid var(--gold-dark); border-radius:20px; overflow:hidden; cursor:pointer; transition:all .15s; background:rgba(0,0,0,.35); }
.pill-toggle:hover { border-color:var(--gold); }
.pill-toggle input { display:none; }
.pill-toggle-label { font-family:'Cinzel',serif; font-size:12px; letter-spacing:.8px; padding:6px 13px; color:var(--parchment-dark); transition:all .15s; user-select:none; white-space:nowrap; }
.pill-toggle[data-on="true"] .pill-toggle-label { display:none; }
.pill-toggle-label-on { display:none; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.8px; padding:6px 13px; color:var(--gold-bright); background:rgba(200,168,75,.18); transition:all .15s; white-space:nowrap; }
.pill-toggle[data-on="true"] .pill-toggle-label-on { display:block; }

/* ── BANK DISPLAY ── */
.bank-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid var(--gold-dark); background:rgba(0,0,0,.2); }
.bank-label { font-family:'Cinzel',serif; font-size:12px; color:var(--parchment-dark); letter-spacing:1px; text-transform:uppercase; }
.bank-count { font-family:'Cinzel',serif; font-size:17px; color:var(--gold-bright); font-weight:600; }

.roll-btn { width:100%; padding:14px; background:linear-gradient(180deg,#7a5215 0%,#4c300a 100%); border:2px solid var(--gold); border-radius:2px; color:var(--gold-bright); font-family:'Cinzel',serif; font-size:14px; font-weight:600; letter-spacing:2px; cursor:pointer; text-transform:uppercase; transition:all .14s; text-shadow:0 1px 0 rgba(0,0,0,.8); }
.roll-btn:hover:not(:disabled) { background:linear-gradient(180deg,#9a6820 0%,#5e3c10 100%); box-shadow:0 0 14px rgba(200,168,75,.35); }
.roll-btn:disabled { opacity:.4; cursor:not-allowed; }
.roll-btn.no-rolls { border-color:#8b4513; color:#c4a96b; }

/* ── CENTER ── */
.panel-center { flex:5 1 320px; min-width:280px; max-width:560px; }
.roller-area { padding:14px 16px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.slot-banner { font-family:'Cinzel',serif; font-size:15px; color:var(--parchment); letter-spacing:2px; text-transform:uppercase; min-height:24px; text-align:center; }
.center-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 8px; border-bottom:1px solid var(--gold-dark); gap:10px; flex-wrap:wrap; overflow:hidden; }
.center-controls { display:flex; align-items:center; gap:10px; flex-shrink:1; flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.toggle-stack { display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.toggle-row { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.toggle-row .toggle-label-full { display:none; }
.toggle-row .toggle-label-icon { display:inline-flex; line-height:1; cursor:default; color:var(--gold); align-items:center; }
.reel-outer { width:100%; height:216px; overflow:hidden; border:2px solid var(--gold-dark); border-radius:2px; background:rgba(0,0,0,.7); position:relative; }
.reel-outer::before,.reel-outer::after { content:''; position:absolute; left:0; right:0; height:60px; z-index:3; pointer-events:none; }
.reel-outer::before { top:0; background:linear-gradient(180deg,rgba(26,15,5,.98) 0%,transparent 100%); }
.reel-outer::after  { bottom:0; background:linear-gradient(0deg,rgba(26,15,5,.98) 0%,transparent 100%); }
.reel-center-band { position:absolute; top:50%; left:0; right:0; height:68px; transform:translateY(-50%); border-top:2px solid rgba(200,168,75,.6); border-bottom:2px solid rgba(200,168,75,.6); background:rgba(200,168,75,.05); z-index:2; pointer-events:none; transition:all .2s; }
.reel-center-band.winner-glow { border-top:2px solid var(--gold-bright); border-bottom:2px solid var(--gold-bright); background:rgba(240,208,96,.14); box-shadow:0 0 20px rgba(240,208,96,.45), inset 0 0 20px rgba(240,208,96,.1); animation:winnerPulse 0.6s ease-out; }
@keyframes winnerPulse { 0%{background:rgba(240,208,96,.4);box-shadow:0 0 40px rgba(240,208,96,.8);} 100%{background:rgba(240,208,96,.12);box-shadow:0 0 18px rgba(240,208,96,.35);} }
.reel-track { display:flex; flex-direction:column; }
.reel-item { height:72px; min-height:72px; display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.04); flex-shrink:0; }
.reel-item-winner { background:rgba(200,168,75,.08); }
.reel-item-img { width:42px; height:42px; image-rendering:pixelated; flex-shrink:0; object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
.reel-item-info { flex:1; overflow:hidden; }
.reel-item-name { font-family:'Cinzel',serif; font-size:14px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.result-box { width:100%; background:rgba(0,0,0,.35); border:1px solid var(--gold-dark); border-radius:2px; padding:12px 16px; display:flex; align-items:center; gap:14px; min-height:74px; }
.result-box.revealed { border-color:var(--gold-bright); box-shadow:0 0 18px rgba(240,208,96,.4); }
.result-img { width:46px; height:46px; image-rendering:pixelated; flex-shrink:0; object-fit:contain; }
.result-name { font-family:'Cinzel',serif; font-size:16px; color:var(--gold-bright); }
.result-sub  { font-size:13px; color:var(--parchment-dark); margin-top:3px; font-style:italic; }
.result-placeholder { color:#444; font-style:italic; font-size:14px; }

/* Multi-roll reel container - side by side full reels */
.multi-reel-container { width:100%; display:flex; gap:6px; align-items:flex-start; }
.multi-reel-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.multi-reel-outer { height:216px; overflow:hidden; border:2px solid var(--gold-dark); border-radius:2px; background:rgba(0,0,0,.7); position:relative; }
.multi-reel-outer::before,.multi-reel-outer::after { content:''; position:absolute; left:0; right:0; height:60px; z-index:3; pointer-events:none; }
.multi-reel-outer::before { top:0; background:linear-gradient(180deg,rgba(26,15,5,.98) 0%,transparent 100%); }
.multi-reel-outer::after  { bottom:0; background:linear-gradient(0deg,rgba(26,15,5,.98) 0%,transparent 100%); }
.multi-reel-band { position:absolute; top:50%; left:0; right:0; height:68px; transform:translateY(-50%); border-top:2px solid rgba(200,168,75,.6); border-bottom:2px solid rgba(200,168,75,.6); background:rgba(200,168,75,.05); z-index:2; pointer-events:none; transition:all .2s; }
.multi-reel-band.multi-band-glow { border-top:2px solid var(--gold-bright); border-bottom:2px solid var(--gold-bright); background:rgba(240,208,96,.14); box-shadow:0 0 20px rgba(240,208,96,.45), inset 0 0 20px rgba(240,208,96,.1); animation:winnerPulse 0.6s ease-out; }
.multi-reel-track { display:flex; flex-direction:column; will-change:transform; }
.multi-reel-item { height:72px; min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0 6px; border-bottom:1px solid rgba(255,255,255,.04); flex-shrink:0; }
.multi-reel-item img { width:36px; height:36px; image-rendering:pixelated; object-fit:contain; }
.multi-reel-item span { font-family:'Cinzel',serif; font-size:9px; color:var(--parchment); text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; line-height:1.3; width:100%; }
.multi-reel-result { padding:6px 8px; background:rgba(0,0,0,.3); border:1px solid var(--gold-dark); border-radius:2px; display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .3s; }
.multi-reel-result.revealed { border-color:rgba(200,168,75,.5); opacity:1; }
.multi-reel-result img { width:28px; height:28px; image-rendering:pixelated; object-fit:contain; flex-shrink:0; }
.multi-reel-result-name { font-family:'Cinzel',serif; font-size:10px; color:var(--parchment); line-height:1.3; }
.multi-reel-result-ge { font-size:10px; color:var(--gold); }

/* Save button */
.save-btn { margin-top:4px; width:100%; padding:8px; background:rgba(0,0,0,.2); border:1px solid #2a3a2a; border-radius:2px; color:#4a7a4a; font-family:'Cinzel',serif; font-size:12px; font-weight:600; letter-spacing:1.2px; cursor:pointer; text-transform:uppercase; transition:all .2s; }
.save-btn:hover:not(:disabled):not(.already-saved) { background:rgba(45,197,45,.08); border-color:#3a6a3a; color:#6ef06e; }
.save-btn:disabled { opacity:.35; cursor:not-allowed; }
.save-btn.already-saved { border-color:#333; color:#3a4a3a; background:transparent; }
.save-btn.ready { border-color:#2dc52d; color:#6ef06e; background:linear-gradient(180deg,#1a4a1a 0%,#0d2a0d 100%); box-shadow:0 0 8px rgba(45,197,45,.2); }
.save-btn.rolling-pulse { border-color:var(--gold-dark); color:var(--gold-dark); background:rgba(200,168,75,.05); animation:savePulse 0.7s ease-in-out infinite alternate; cursor:not-allowed; }
@keyframes savePulse { from { box-shadow:0 0 4px rgba(200,168,75,.2); opacity:.5; } to { box-shadow:0 0 16px rgba(240,208,96,.5); opacity:1; } }
@keyframes beerPulse { from { box-shadow:0 0 10px rgba(240,160,48,.4); transform:scale(1); } to { box-shadow:0 0 28px rgba(240,160,48,.9); transform:scale(1.03); } }

/* ── JS-GENERATED ELEMENT CLASSES ── */
.js-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); transition:background .12s; }
.js-row:hover { background:rgba(200,168,75,.05); }
.js-item-img { width:28px; height:28px; image-rendering:pixelated; object-fit:contain; flex-shrink:0; }
.js-item-name { font-family:'Cinzel',serif; font-size:12px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.js-item-name-link { cursor:pointer; }
.js-badge-custom { font-size:9px; color:var(--gold); border:1px solid var(--gold-dark); border-radius:2px; padding:1px 4px; flex-shrink:0; white-space:nowrap; }
.js-badge-slot { font-size:9px; color:#666; text-transform:uppercase; letter-spacing:.4px; border:1px solid #333; border-radius:2px; padding:1px 3px; }
.js-remove-btn { padding:3px 8px; background:transparent; border:1px solid #5a1a1a; border-radius:2px; color:#8a3a3a; font-size:11px; cursor:pointer; flex-shrink:0; transition:all .14s; }
.js-remove-btn:hover { color:#e05050; border-color:var(--red); }
.js-msave-item { display:flex; align-items:center; gap:6px; padding:5px 10px; background:rgba(0,0,0,.3); border-radius:2px; transition:all .14s; }
.js-msave-item[data-saved="0"] { border:1px solid var(--gold-dark); cursor:pointer; }
.js-msave-item[data-saved="1"] { border:1px solid #333; cursor:pointer; }
.js-msave-item[data-saved="beer"] { border:1px solid #8B4513; cursor:default; }
.js-msave-item[data-saved="0"]:hover { border-color:var(--gold); }
.js-msave-item[data-saved="1"]:hover { border-color:var(--red); }

/* ── BEER FLOOD ── */
/* The trick: foam sits ON TOP of liquid via z-index. Liquid grows upward behind foam. */
#beerFlood { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }

/* Liquid: grows from bottom, stays BEHIND foam */
#beerLiquid {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  background: linear-gradient(180deg, rgba(240,160,20,.9) 0%, rgba(200,110,10,.97) 55%, rgba(150,75,5,1) 100%);
  height:0%;
  transition: height 3.5s cubic-bezier(0.2,0.8,0.4,1);
}

/* Foam: fixed height strip, moves up with liquid, sits IN FRONT */
#beerFoam {
  position:absolute; left:0; right:0; z-index:3;
  height:100px;
  bottom:-100px; /* starts off-screen */
  transition: bottom 3.5s cubic-bezier(0.2,0.8,0.4,1);
  pointer-events:none;
}
#beerFoamBody {
  position:absolute; bottom:0; left:0; right:0; height:100%;
  background: rgba(255,255,255,0.97);
}
#beerFoamSvg {
  position:absolute; top:-55px; left:0; width:100%; height:60px; overflow:visible;
}
@keyframes waveShift1 {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(-90px); }
}
@keyframes waveShift2 {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(90px); }
}
#waveGroup1 { animation: waveShift1 2.4s ease-in-out infinite; }
#waveGroup2 { animation: waveShift2 3.1s ease-in-out infinite; }

/* Bubbles inside liquid */
.beer-bubble {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,230,120,.85), rgba(220,130,10,.3));
  border:1px solid rgba(255,200,80,.4);
  animation: bubbleRise linear forwards;
  pointer-events:none;
}
@keyframes bubbleRise {
  0%   { transform:translateY(0) scale(1); opacity:.7; }
  80%  { opacity:.4; }
  100% { transform:translateY(calc(-1 * var(--travel,80px))) scale(1.15); opacity:0; }
}

/* Msg and button: anchored to bottom so they sit inside the liquid */
#beerFloodMsg {
  position:absolute; left:50%; bottom:42%; transform:translateX(-50%) translateY(20px);
  font-family:'Cinzel',serif; font-size:clamp(28px,5vw,52px); font-weight:900;
  color:#fff; text-shadow: 0 0 24px rgba(240,160,20,1), 0 0 50px rgba(240,160,20,.7), 2px 2px 0 rgba(0,0,0,.6);
  letter-spacing:4px; text-align:center; white-space:nowrap; z-index:2;
  opacity:0; transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events:none;
}
#beerDismiss {
  position:absolute; left:50%; bottom:30%; transform:translateX(-50%); z-index:4;
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:2px; text-transform:uppercase;
  padding:13px 36px; background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.7);
  border-radius:3px; color:#fff; cursor:pointer;
  opacity:0; transition:opacity 0.4s ease; pointer-events:none;
}
#beerDismiss:hover { background:rgba(0,0,0,.7); border-color:#fff; }

input[type=number].setting-input::-webkit-outer-spin-button,
input[type=number].setting-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number].setting-input { -moz-appearance:textfield; }
/* ── LOOT BANK ── */
.loot-panel { width:100%; background:rgba(0,0,0,.2); border-top:1px solid var(--gold-dark); padding:10px 12px; }
.loot-input-row { display:flex; gap:7px; align-items:center; }
.loot-input { flex:1; background:rgba(0,0,0,.4); border:1px solid var(--gold-dark); border-radius:2px; padding:7px 10px; color:var(--parchment); font-family:'Cinzel',serif; font-size:13px; outline:none; transition:border-color .14s; }
.loot-input:focus { border-color:var(--gold); }
.loot-input::placeholder { color:#7a5a30; }
.loot-submit { padding:7px 12px; background:linear-gradient(180deg,#7a5215 0%,#4c300a 100%); border:1px solid var(--gold); border-radius:2px; color:var(--gold-bright); font-family:'Cinzel',serif; font-size:13px; letter-spacing:1px; cursor:pointer; white-space:nowrap; transition:all .14s; }
.loot-submit:hover { background:linear-gradient(180deg,#9a6820 0%,#5e3c10 100%); }
.loot-hint { font-size:13px; color:var(--parchment); margin-top:5px; font-style:italic; opacity:.8; }

/* ── RIGHT PANEL ── */
.panel-right { flex:2.5 1 220px; min-width:200px; max-width:300px; }
.history-list { max-height:480px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-dark) transparent; }
.history-list::-webkit-scrollbar { width:5px; }
.history-list::-webkit-scrollbar-thumb { background:var(--gold-dark); border-radius:2px; }
.history-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.04); transition:background .12s; animation:slideIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes slideIn { from{transform:translateX(16px);opacity:0;} to{transform:translateX(0);opacity:1;} }
.history-row:hover { background:rgba(200,168,75,.07); }
.history-img { width:32px; height:32px; image-rendering:pixelated; flex-shrink:0; object-fit:contain; }
.history-info { flex:1; overflow:hidden; }
.history-name  { font-family:'Cinzel',serif; font-size:12px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-slot  { font-size:11px; color:#555; text-transform:uppercase; letter-spacing:.4px; margin-top:1px; }
.history-saved { font-size:10px; color:#2dc52d; }
.history-footer { border-top:1px solid var(--gold-dark); padding:10px 12px; }
.total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.total-label  { font-size:13px; color:var(--parchment-dark); font-family:'Cinzel',serif; letter-spacing:1px; }
.total-amount { font-size:14px; color:var(--gold-bright); font-family:'Cinzel',serif; font-weight:600; }
.empty-msg { padding:24px 14px; text-align:center; color:#3a2a10; font-style:italic; font-size:14px; line-height:1.7; }
.clear-btn { width:100%; margin-top:7px; padding:6px; background:transparent; border:1px solid #6a3820; border-radius:2px; color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:12px; letter-spacing:1px; cursor:pointer; text-transform:uppercase; transition:all .14s; }
.clear-btn:hover { border-color:var(--gold); color:var(--gold); background:rgba(200,168,75,.06); }

/* ── UNLOCKS VIEW ── */
.unlocks-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--gold-dark); }
.unlocks-count { font-size:14px; color:var(--parchment-dark); font-style:italic; }
.unlocks-clear { font-family:'Cinzel',serif; font-size:11px; color:var(--parchment-dark); letter-spacing:1px; background:transparent; border:1px solid #6a3820; padding:5px 10px; border-radius:2px; cursor:pointer; text-transform:uppercase; transition:all .14s; }
.unlocks-clear:hover { border-color:var(--gold); color:var(--gold); }
.unlocks-grid { display:flex; flex-wrap:wrap; gap:8px; padding:16px; align-items:flex-start; }
.unlock-card { position:relative; background:rgba(0,0,0,.35); border:1px solid var(--gold-dark); border-radius:2px; padding:8px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; transition:all .14s; animation:cardPop .3s cubic-bezier(.34,1.56,.64,1); cursor:default; width:90px; min-width:90px; max-width:90px; flex-shrink:0; overflow:visible; }
@keyframes cardPop { from{transform:scale(.85);opacity:0;} to{transform:scale(1);opacity:1;} }
.unlock-card:hover { border-color:var(--gold); background:rgba(200,168,75,.08); }
.unlock-card.no-wiki { cursor:default; }
.unlock-card.no-wiki:hover { border-color:var(--gold-dark); background:rgba(0,0,0,.35); }
.unlock-card img { width:40px; height:40px; image-rendering:pixelated; object-fit:contain; }
.unlock-card-name { font-family:'Cinzel',serif; font-size:9px; color:var(--parchment); text-align:center; line-height:1.2; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.unlock-card-slot { font-size:9px; color:#666; text-transform:uppercase; letter-spacing:.4px; }
.unlock-card-remove { position:absolute; top:-5px; right:-5px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#ff4444; cursor:pointer; transition:all .14s; border-radius:50%; background:rgba(30,5,5,.9); border:1px solid #882222; z-index:10; line-height:1; font-family:monospace; font-weight:bold; }
.unlock-card-remove:hover { color:#fff; background:rgba(197,45,45,.85); border-color:#cc3333; }
.unlocks-empty { padding:24px 20px; text-align:left; color:var(--parchment-dark); font-style:italic; font-size:14px; line-height:1.6; grid-column:1/-1; }
.slot-filter { display:flex; flex-wrap:wrap; gap:5px; padding:12px 16px 0; }
.slot-filter-btn { font-family:'Cinzel',serif; font-size:11px; letter-spacing:.8px; text-transform:uppercase; padding:5px 10px; background:transparent; border:1px solid var(--gold-dark); border-radius:2px; color:var(--parchment-dark); cursor:pointer; transition:all .14s; }
.slot-filter-btn:hover { border-color:var(--gold); color:var(--gold); }
.slot-filter-btn.active { background:rgba(200,168,75,.15); border-color:var(--gold-bright); color:var(--gold-bright); }

/* ── SETTINGS VIEW ── */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; }
.setting-block { background:rgba(0,0,0,.25); border:1px solid var(--gold-dark); border-radius:2px; padding:14px; }
.setting-title { font-family:'Cinzel',serif; font-size:13px; color:var(--gold); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:7px; }
.setting-desc { font-size:13px; color:var(--parchment-dark); font-style:italic; margin-bottom:10px; line-height:1.5; }
.setting-input-row { display:flex; gap:7px; align-items:center; }
.setting-input { flex:1; background:rgba(0,0,0,.4); border:1px solid var(--gold-dark); border-radius:2px; padding:7px 10px; color:var(--parchment); font-family:'Cinzel',serif; font-size:14px; outline:none; transition:border-color .14s; }
.setting-input:focus { border-color:var(--gold); }
.setting-save { padding:7px 14px; background:linear-gradient(180deg,#7a5215 0%,#4c300a 100%); border:1px solid var(--gold); border-radius:2px; color:var(--gold-bright); font-family:'Cinzel',serif; font-size:13px; letter-spacing:1px; cursor:pointer; transition:all .14s; }
.setting-save:hover { background:linear-gradient(180deg,#9a6820 0%,#5e3c10 100%); }
.setting-current { font-size:13px; color:var(--gold); margin-top:6px; }

/* Ammo toggle in settings */
.ammo-setting-toggle { display:flex; align-items:center; gap:12px; margin-top:6px; }
.ammo-toggle-label-big { font-size:14px; color:var(--parchment-dark); flex:1; }

.settings-reset { flex:1; padding:11px 8px; background:rgba(197,45,45,.06); border:1px solid #8a2a2a; border-radius:2px; color:#e05050; font-family:'Cinzel',serif; font-size:13px; letter-spacing:1px; cursor:pointer; text-transform:uppercase; transition:all .14s; }
.settings-reset:hover { border-color:var(--red); color:#f07070; background:rgba(197,45,45,.14); }
.settings-defaults { flex:1; padding:11px 8px; background:transparent; border:1px solid var(--gold-dark); border-radius:2px; color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:13px; letter-spacing:1px; cursor:pointer; text-transform:uppercase; transition:all .14s; }
.settings-defaults:hover { border-color:var(--gold); color:var(--gold); background:rgba(200,168,75,.06); }
.settings-btn-row { display:flex; gap:10px; margin:0 16px 16px; }

/* ── SOUND OPTIONS ── */
/* ── TOAST ── */
.toast { position:fixed; top:35px; left:50%; transform:translateX(-50%) translateY(-60px); background:var(--brown-panel); border:2px solid var(--gold); border-radius:3px; padding:11px 22px; font-family:'Cinzel',serif; font-size:14px; color:var(--gold-bright); z-index:200; opacity:0; transition:all .25s; pointer-events:none; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.toast-save { border-color:#2dc52d; color:#6ef06e; }
.toast.toast-error { border-color:#c52d2d; color:#f06e6e; }

/* ── PARTICLES ── */
.particle { position:fixed; pointer-events:none; z-index:300; font-size:15px; animation:pfly 1.1s ease-out forwards; }
@keyframes pfly { 0%{transform:translateY(0) scale(1) rotate(0deg);opacity:1;} 100%{transform:translateY(-110px) scale(.2) rotate(360deg);opacity:0;} }

/* ── CONFIRM MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:400; display:none; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal-box { background:linear-gradient(160deg,var(--brown-panel) 0%,var(--brown-mid) 100%); border:2px solid var(--gold); border-radius:3px; padding:24px 28px 20px; max-width:360px; width:90%; text-align:center; box-shadow:0 0 40px rgba(0,0,0,.8); }
.modal-title { font-family:'Cinzel',serif; font-size:13px; color:var(--gold-bright); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(200,168,75,.2); }
.modal-body { font-size:15px; color:var(--parchment); line-height:1.7; margin-bottom:20px; }
.modal-body .modal-loot-val { display:block; font-family:'Cinzel',serif; font-size:22px; color:var(--gold-bright); letter-spacing:1px; margin:4px 0 2px; }
.modal-body .modal-rolls-val { display:block; font-size:13px; color:#8ecf8e; letter-spacing:.5px; margin-bottom:8px; }
.modal-body .modal-total { display:block; font-size:12px; color:var(--parchment-dark); margin-top:6px; border-top:1px solid rgba(200,168,75,.1); padding-top:6px; }
.modal-btns { display:flex; gap:8px; justify-content:center; }
.modal-btn { padding:8px 0; font-family:'Cinzel',serif; font-size:12px; letter-spacing:1.5px; border-radius:2px; cursor:pointer; text-transform:uppercase; transition:all .14s; flex:1; max-width:130px; }
.modal-btn-confirm { background:linear-gradient(180deg,#1a5a1a 0%,#0d350d 100%); border:1px solid #2dc52d; color:#6ef06e; }
.modal-btn-confirm:hover { background:linear-gradient(180deg,#225a22 0%,#143814 100%); box-shadow:0 0 10px rgba(45,197,45,.25); }
.modal-btn-cancel { background:transparent; border:1px solid var(--gold-dark); color:var(--parchment-dark); }
.modal-btn-cancel:hover { border-color:var(--gold-dark); color:var(--parchment-dark); }

/* ── MOBILE SLOT PICKER STRIP (≤ 1006px) ── */
.mobile-slot-strip { display:none; }
.mobile-back-btn { display:none; }
.mobile-history { display:none; }
.mobile-loot { display:none; }

@media(max-width:1006px) {
  .view { flex-direction:column; align-items:center; }
  .settings-grid { grid-template-columns:1fr; }
  .free-rolls-banner { flex-direction:column; text-align:center; }
  /* Hide desktop left/right panels */
  .panel-left, .panel-right { display:none !important; }

  /* Show the mobile slot strip */
  .mobile-slot-strip {
    display:flex;
    gap:2px;
    padding:5px 4px;
    overflow-x:hidden;
    width:100%;
    max-width:1200px;
    background:linear-gradient(160deg,var(--brown-panel) 0%,var(--brown-mid) 100%);
    border:2px solid var(--gold-dark);
    border-radius:3px;
    box-shadow:inset 0 1px 0 rgba(200,168,75,.1),0 4px 20px rgba(0,0,0,.55);
    align-items:center;
    flex-shrink:0;
  }

  .mobile-slot-strip .ms-slot {
    flex:1 1 0;
    min-width:0;
    height:46px;
    background:rgba(0,0,0,.55);
    border:1.5px solid #3a2008;
    border-radius:2px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    transition:all .14s;
    user-select:none;
    padding:2px 0;
  }
  .mobile-slot-strip .ms-slot:hover,
  .mobile-slot-strip .ms-slot:active { border-color:var(--gold); background:rgba(200,168,75,.12); }
  .mobile-slot-strip .ms-slot.selected { border-color:var(--gold-bright); box-shadow:0 0 8px rgba(240,208,96,.4); background:rgba(200,168,75,.15); }
  .mobile-slot-strip .ms-slot.disabled-slot { opacity:.28; pointer-events:none; }
  .mobile-slot-strip .ms-slot img { width:26px; height:26px; image-rendering:pixelated; opacity:.75; object-fit:contain; }
  .mobile-slot-strip .ms-slot.selected img { opacity:1; }
  .mobile-slot-strip .ms-slot span { font-size:7px; color:var(--parchment-dark); font-family:'Cinzel',serif; letter-spacing:.2px; text-align:center; line-height:1; white-space:nowrap; overflow:hidden; }

  .mobile-slot-strip .ms-bank {
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 5px;
    gap:0px;
    border-left:1px solid var(--gold-dark);
    margin-left:2px;
    min-width:40px;
  }
  .mobile-slot-strip .ms-bank-label { font-family:'Cinzel',serif; font-size:6px; color:var(--parchment-dark); letter-spacing:.3px; text-transform:uppercase; white-space:nowrap; }
  .mobile-slot-strip .ms-bank-count { font-family:'Cinzel',serif; font-size:14px; color:var(--gold-bright); font-weight:600; }

  /* Adjust center panel for mobile — always visible */
  .panel-center { min-width:0; max-width:100%; width:100%; }

  /* Stack center header on mobile */
  .center-header { flex-direction:column; align-items:stretch; padding:8px 10px 6px; gap:4px; }
  .center-controls { gap:6px; flex-wrap:nowrap; justify-content:flex-start; }
  .toggle-stack { gap:6px; flex-wrap:nowrap; }

  /* Mobile loot input section */
  .mobile-loot { display:block; }
  .mobile-loot-inner {
    display:flex; gap:6px; align-items:center; padding:8px 10px;
    background:linear-gradient(160deg,var(--brown-panel) 0%,var(--brown-mid) 100%);
    border:2px solid var(--gold-dark); border-radius:3px;
    box-shadow:inset 0 1px 0 rgba(200,168,75,.1),0 4px 20px rgba(0,0,0,.55);
  }
  .mobile-loot-inner input {
    flex:1; min-width:0; padding:7px 10px;
    background:rgba(0,0,0,.5); border:1px solid var(--gold-dark); border-radius:2px;
    color:var(--parchment); font-family:'Cinzel',serif; font-size:13px; outline:none;
  }
  .mobile-loot-inner input::placeholder { color:rgba(196,169,107,.4); }
  .mobile-loot-inner input:focus { border-color:var(--gold); }
  .mobile-loot-inner button {
    padding:7px 14px; background:linear-gradient(180deg,#3a2508 0%,#1a0f04 100%);
    border:2px solid var(--gold-dark); border-radius:2px; color:var(--gold);
    font-family:'Cinzel',serif; font-size:12px; font-weight:600; letter-spacing:1px;
    cursor:pointer; white-space:nowrap; text-transform:uppercase; transition:all .14s;
  }
  .mobile-loot-inner button:hover { border-color:var(--gold-bright); color:var(--gold-bright); }

  /* Toast fix for mobile */
  .toast { max-width:calc(100vw - 32px); white-space:normal; text-align:center; font-size:13px; padding:9px 16px; }

  /* Prevent iOS zoom on input focus — inputs must be >= 16px */
  input[type="text"], input[type="number"], select { font-size:16px !important; }

  /* Mobile history — shown below center panel */
  .mobile-history {
    display:block;
    width:100%;
    background:linear-gradient(160deg,var(--brown-panel) 0%,var(--brown-mid) 100%);
    border:2px solid var(--gold-dark);
    border-radius:3px;
    box-shadow:inset 0 1px 0 rgba(200,168,75,.1),0 4px 20px rgba(0,0,0,.55);
  }
  .mobile-history .panel-title { font-family:'Cinzel',serif; font-size:13px; font-weight:600; color:var(--gold); text-align:center; padding:8px 14px 6px; border-bottom:1px solid var(--gold-dark); letter-spacing:2px; text-transform:uppercase; }
  .mobile-history .m-history-list { max-height:220px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-dark) transparent; }
  .mobile-history .m-history-list::-webkit-scrollbar { width:5px; }
  .mobile-history .m-history-list::-webkit-scrollbar-thumb { background:var(--gold-dark); border-radius:2px; }
  .mobile-history .m-history-footer { border-top:1px solid var(--gold-dark); padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .mobile-history .m-total-label { font-size:13px; color:var(--parchment-dark); font-family:'Cinzel',serif; letter-spacing:1px; }
  .mobile-history .m-total-amount { font-size:13px; color:var(--gold-bright); font-family:'Cinzel',serif; font-weight:600; }
  .mobile-history .m-clear-btn { padding:5px 10px; background:transparent; border:1px solid #6a3820; border-radius:2px; color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:11px; letter-spacing:1px; cursor:pointer; text-transform:uppercase; transition:all .14s; }
  .mobile-history .m-clear-btn:hover { border-color:var(--gold); color:var(--gold); }

  /* View layout on mobile */
  .view.active { padding:0 8px 16px; gap:10px; }
  .view-single.active { padding:0 8px 16px; }
}

/* ── VERY NARROW — allow controls to wrap ── */
@media(max-width:410px) {
  .center-controls { flex-wrap:wrap; }
  .title-rs { letter-spacing:1px; font-size:clamp(20px,5vw,30px); }
}

/* ── 360px settings fixes ── */
@media(max-width:390px) {
  .settings-grid { padding:8px; gap:8px; }
  .setting-block { padding:8px; }
  .setting-title { font-size:11px; letter-spacing:.5px; }
  .setting-desc { font-size:11px; }
  .setting-input { font-size:13px !important; padding:6px 8px; }
  .setting-save { padding:6px 8px; font-size:11px; letter-spacing:.3px; }
  .setting-current { font-size:11px; }
  .settings-btn-row { flex-wrap:wrap; gap:6px; margin:0 8px 8px; }
  .settings-btn-row button { flex:1 1 calc(50% - 3px); min-width:0; font-size:10px; letter-spacing:.3px; padding:9px 4px; }
  .settings-reset, .settings-defaults { font-size:10px; letter-spacing:.3px; }
  /* prevent toggle rows overflowing */
  .setting-block [style*="justify-content:space-between"] { gap:6px; }
  .setting-block [style*="justify-content:space-between"] span { font-size:11px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
}