:root{
  --ink:#0b2540; --card:rgba(255,255,255,.92); --glass:rgba(8,32,64,.55);
  --gold:#ffc93c; --green:#2ecc71; --red:#ff5d5d;
  --r-common:#9aa7b5; --r-uncommon:#4cd07d; --r-rare:#4aa8ff; --r-epic:#c07bff; --r-legendary:#ff9d3c; --r-mythic:#ffd23c;
  font-size:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:#0a5e9c;font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;user-select:none;-webkit-user-select:none}
#game{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
button{font-family:inherit}
img.art{image-rendering:auto;vertical-align:middle}
.ic{display:inline-block;vertical-align:-3px}

/* ---------- HUD ---------- */
.pill{position:fixed;display:flex;align-items:center;gap:.4em;background:var(--glass);color:#fff;
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:.45em .95em;font-weight:800;font-size:1.05rem;z-index:10;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.4);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.pillIc{display:flex;align-items:center}
#coinsPill{top:max(10px,env(safe-area-inset-top));left:10px}
#depthPill{top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);transition:opacity .3s}
#feverPill{top:calc(max(10px,env(safe-area-inset-top)) + 52px);left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#ff9d3c,#ff5d9d);animation:pulse 1s infinite}
.hidden{opacity:0 !important;visibility:hidden}

#settingsBtn{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;z-index:10}
#autoBtn{position:fixed;right:12px;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 108px);z-index:10}
#autoBtn.on{border-color:#2ecc71;box-shadow:0 0 14px rgba(46,204,113,.8),0 4px 14px rgba(0,0,0,.3)}
.themeBtns{display:flex;gap:6px}
.themeBtns button{border:2px solid #dde7f0;background:#fff;border-radius:10px;padding:.4em .7em;font-weight:800;
  cursor:pointer;color:#456;font-size:.8rem}
.themeBtns button.sel{border-color:#2b8de0;background:#e8f1fb;color:#2b6cb0}

.roundBtn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  background:var(--glass);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .12s ease;position:relative;
  display:inline-flex;align-items:center;justify-content:center}
.roundBtn:active{transform:scale(.88)}
.roundBtn img{width:28px;height:28px}
.roundBtn .lbl{position:absolute;bottom:-1.15em;left:50%;transform:translateX(-50%);
  font-size:.62rem;font-weight:800;letter-spacing:.03em;text-shadow:0 1px 3px #000;white-space:nowrap}
.roundBtn .dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--red);border:2px solid #fff;display:none}
.roundBtn.notify .dot{display:block;animation:pulse 1.2s infinite}

#bottomBar{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;gap:14px;z-index:10;padding-bottom:14px}

#castHint{position:fixed;left:50%;bottom:22%;transform:translateX(-50%);z-index:5;pointer-events:none;
  color:#fff;font-weight:900;font-size:1.35rem;text-shadow:0 2px 8px rgba(0,0,0,.5);
  animation:bob 1.6s ease-in-out infinite;text-align:center;transition:opacity .3s}
#castHint small{font-size:.8rem;font-weight:700;display:block}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-10px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ---------- Toasts (bottom-center, above the button bar) ---------- */
#toasts{position:fixed;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 108px);left:50%;transform:translateX(-50%);
  z-index:60;display:flex;flex-direction:column-reverse;gap:8px;align-items:center;pointer-events:none}
.toast{background:linear-gradient(135deg,#1e3a5f,#0b2540);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:14px;padding:.6em 1.1em;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.4);
  animation:toastIn .35s cubic-bezier(.2,1.4,.4,1);max-width:88vw;text-align:center}
.toast img{vertical-align:-3px}
.toast.gold{background:linear-gradient(135deg,#b8860b,#8a5a00);border-color:var(--gold)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transition:opacity .4s}

/* ---------- Modal ---------- */
#modalWrap{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(4,14,30,.55);backdrop-filter:blur(4px);animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#modalCard{background:var(--card);color:var(--ink);width:min(560px,94vw);max-height:min(760px,88vh);
  border-radius:22px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:popIn .28s cubic-bezier(.2,1.5,.4,1);overflow:hidden}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}
#modalHead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px}
#modalHead h2{margin:0;font-size:1.3rem;font-weight:900;display:flex;align-items:center;gap:.4em}
#modalHead h2 img{background:var(--glass);border-radius:9px;padding:4px}
.setRow img{background:var(--glass);border-radius:7px;padding:3px}
#modalClose{border:0;background:#e6edf5;width:36px;height:36px;border-radius:50%;font-size:1rem;
  cursor:pointer;font-weight:900;color:#456}
#modalClose:active{transform:scale(.9)}
#modalBody{overflow-y:auto;padding:6px 16px 18px;-webkit-overflow-scrolling:touch}

.row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #dde7f0;border-radius:16px;
  padding:10px 12px;margin-bottom:10px;box-shadow:0 2px 6px rgba(20,50,90,.06)}
.row .rowIc{width:48px;flex:none;display:flex;align-items:center;justify-content:center}
.row .info{flex:1;min-width:0}
.row .info > b{display:block;font-size:1rem}
.row .info small{color:#5b7186;display:block;font-size:.78rem;line-height:1.3}
.buyBtn{border:0;border-radius:12px;padding:.55em .9em;font-weight:900;cursor:pointer;flex:none;
  background:linear-gradient(180deg,#ffd75e,#f5b41d);color:#5a3c00;box-shadow:0 3px 0 #c8930f;
  transition:transform .1s;min-width:86px;font-size:.9rem}
.buyBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #c8930f}
.buyBtn:disabled{background:#d7dee6;color:#8a97a5;box-shadow:0 3px 0 #b8c2cc;cursor:default}
.buyBtn.own{background:linear-gradient(180deg,#69e08d,#2ecc71);color:#0a4d26;box-shadow:0 3px 0 #1f9c53}
.buyBtn img{vertical-align:-3px}
.lvlTag{font-size:.7rem;font-weight:900;background:#e8f1fb;color:#2b6cb0;border-radius:8px;padding:.15em .5em;margin-left:.4em}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.cell{background:#fff;border:1px solid #dde7f0;border-radius:14px;padding:8px 6px;text-align:center;position:relative}
.cell img.sprite{width:40px;height:40px}
.cell.locked img.sprite{filter:brightness(0) opacity(.28)}
.cell b{display:block;font-size:.68rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell small{display:block;font-size:.62rem;color:#5b7186}
.rtag{display:inline-block;font-size:.55rem;font-weight:900;color:#fff;border-radius:6px;padding:.1em .45em;margin-top:3px;text-transform:uppercase;letter-spacing:.04em}

.qbar{height:8px;background:#e3ebf3;border-radius:99px;overflow:hidden;margin-top:5px}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,#4aa8ff,#2ecc71);border-radius:99px;transition:width .4s}

.bigNum{font-size:2rem;font-weight:900;text-align:center;margin:.3em 0;color:#a86e00;display:flex;align-items:center;justify-content:center;gap:.25em}
.center{text-align:center}
.claimBtn{display:block;margin:12px auto 4px;font-size:1.05rem;padding:.7em 2.2em}

input[type=range]{width:150px;accent-color:#2b8de0}
.setRow{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid #e6edf5}
.setRow label{flex:1;font-weight:700}
.switch{appearance:none;width:46px;height:26px;border-radius:99px;background:#cfd9e3;position:relative;cursor:pointer;transition:background .2s;flex:none}
.switch:checked{background:#2ecc71}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch:checked::after{left:23px}
.dangerBtn{background:linear-gradient(180deg,#ff8080,#e84c4c);color:#fff;box-shadow:0 3px 0 #b53232}

/* ---------- Tally ---------- */
#tally{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(4,14,30,.45);backdrop-filter:blur(3px)}
#tallyCard{background:var(--card);border-radius:22px;width:min(420px,92vw);max-height:80vh;display:flex;
  flex-direction:column;padding:18px;color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:popIn .3s cubic-bezier(.2,1.5,.4,1)}
#tallyCard h2{margin:0 0 6px;text-align:center;font-size:1.35rem}
#tallyList{overflow-y:auto;margin:4px 0;max-height:44vh}
.tRow{display:flex;align-items:center;gap:10px;padding:5px 6px;border-bottom:1px dashed #dfe8f0;font-weight:700}
.tRow .tIc{width:36px;flex:none;text-align:center}
.tRow .tIc img{width:30px;height:30px}
.tRow .nm{flex:1;font-size:.92rem}
.tRow .vl{color:#a86e00;font-weight:900}
#tallyTotal{text-align:center;font-size:1.5rem;font-weight:900;color:#a86e00;margin:8px 0 4px;
  display:flex;align-items:center;justify-content:center;gap:.3em}
#tallyBtns{display:flex;gap:10px;justify-content:center}
#tallyBtns .buyBtn{font-size:1rem}

@media (max-width:520px){
  .roundBtn{width:50px;height:50px}
  .roundBtn img{width:24px;height:24px}
  #bottomBar{gap:9px}
  .pill{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s !important;transition-duration:.01s !important}
}