/* ============================================================
   Rift Delver — styles. Mobile-first, dark fantasy theme.
   ============================================================ */
:root {
  --bg: #0d0b14;
  --bg2: #16121f;
  --panel: #1e1830;
  --panel2: #271f3d;
  --line: #382c54;
  --txt: #ece7f7;
  --muted: #9a90b8;
  --gold: #fbbf24;
  --gem: #22d3ee;
  --shard: #c084fc;
  --hp: #ef4444;
  --hp2: #22c55e;
  --energy: #38bdf8;
  --xp: #a78bfa;
  --accent: #7c3aed;
  --accent2: #a855f7;
  --danger: #f43f5e;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: radial-gradient(1200px 800px at 50% -10%, #1c1330 0%, var(--bg) 60%);
  color: var(--txt);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
#app { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b); }

.screen { flex: 1; display: flex; flex-direction: column; padding: 14px; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes floatUp { from{transform:translateY(0);opacity:1} to{transform:translateY(-40px);opacity:0} }

/* ---------- Top bar ---------- */
.topbar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: linear-gradient(180deg, var(--bg2), transparent);
  position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 800; font-size: 18px; letter-spacing: .5px; background: linear-gradient(90deg,#c084fc,#38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: auto; }
.cur { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.cur .ic { font-size: 14px; }
.cur.gems { color: var(--gem); } .cur.shards { color: var(--shard); } .cur.gold { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--txt);
  padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform .08s, filter .15s; width: 100%; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, var(--accent2), var(--accent)); border-color: #6d28d9; box-shadow: 0 6px 18px rgba(124,58,237,.35); }
.btn.gold { background: linear-gradient(180deg,#f59e0b,#b45309); border-color:#92400e; color:#1a1206; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 9px 12px; font-size: 14px; border-radius: 10px; width: auto; }
.btn.danger { background: linear-gradient(180deg,#fb7185,#e11d48); border-color:#9f1239; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn .ad { font-size: 11px; background: #16a34a; color: #fff; padding: 1px 6px; border-radius: 6px; font-weight: 800; }
.btn .ad.free { background: #7c5cf0; letter-spacing: .02em; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }

h1,h2,h3 { margin: 0 0 8px; }
.h-title { font-size: 26px; font-weight: 900; letter-spacing: .5px; }
.sub { color: var(--muted); font-size: 13px; }
.center { text-align: center; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid var(--line); }

/* ---------- Cards ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.card + .card { margin-top: 10px; }
.choice { text-align: left; }
.choice .emoji { font-size: 30px; }
.choice .label { font-weight: 800; font-size: 16px; }
.choice .desc { color: var(--muted); font-size: 12px; }

/* ---------- Hero panel / combat ---------- */
.combatant { background: var(--panel); border:1px solid var(--line); border-radius: 16px; padding: 12px; }
.combatant.enemy { border-color:#5b2130; background: linear-gradient(180deg,#241320,#1a1020); }
.sprite { font-size: 64px; text-align: center; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); transition: transform .15s; }
.sprite.hurt { animation: shake .3s; }
.bar { height: 12px; background: #0c0912; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.bar > span { display: block; height: 100%; transition: width .35s ease; }
.bar.hp > span { background: linear-gradient(90deg,#ef4444,#f97316); }
.bar.xp > span { background: linear-gradient(90deg,#7c3aed,#a78bfa); }
.bar .txt { position: absolute; inset: 0; text-align: center; font-size: 10px; font-weight: 800; line-height: 12px; text-shadow: 0 1px 2px #000; }
.energy-dots { display: flex; gap: 4px; }
.energy-dots i { width: 14px; height: 14px; border-radius: 50%; background: #241a3a; border: 1px solid var(--line); display:inline-block; }
.energy-dots i.on { background: radial-gradient(circle at 40% 35%, #7dd3fc, #0284c7); box-shadow: 0 0 6px #38bdf8; }
.statuses { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; min-height: 18px; }
.status { font-size: 11px; padding: 1px 6px; border-radius: 6px; background:#2a1f42; border:1px solid var(--line); }

.log { flex: 1; overflow-y: auto; background: #0c0912; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 13px; margin: 8px 0; min-height: 90px; max-height: 26vh; }
.log div { padding: 2px 0; border-bottom: 1px dashed #1c1630; animation: fade .2s; }
.log .hitEnemy { color: #fca5a5; } .log .hitHero { color: #fda4af; } .log .heal { color: #86efac; }
.log .skill { color: #c4b5fd; font-weight: 700; } .log .win { color: #86efac; font-weight: 800; }
.log .lose { color: #fb7185; font-weight: 800; } .log .dot { color: #fbbf24; } .log .dodge,.log .shield{color:#67e8f9;}
.log .info { color: var(--muted); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions .btn { padding: 12px; font-size: 15px; }
.skillbtn { flex-direction: column; gap: 2px; padding: 10px; }
.skillbtn small { font-size: 10px; color: var(--muted); font-weight: 600; }

.dmgfloat { position: absolute; font-weight: 900; font-size: 22px; pointer-events: none; animation: floatUp .9s ease forwards; text-shadow: 0 2px 4px #000; z-index: 30; }

/* ---------- Item / rarity ---------- */
.item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); }
.item .ic { font-size: 26px; }
.item .nm { font-weight: 800; font-size: 14px; }
.item .st { font-size: 11px; color: var(--muted); }
.rar-common { border-left: 4px solid #b8c0cc; }
.rar-uncommon { border-left: 4px solid #4ade80; }
.rar-rare { border-left: 4px solid #38bdf8; }
.rar-epic { border-left: 4px solid #c084fc; }
.rar-legendary { border-left: 4px solid #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.25); }

/* ---------- Modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(6,4,12,.72); display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px; backdrop-filter: blur(3px); animation: fade .2s; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; max-width: 420px; width: 100%; animation: pop .2s; }
.adbox { text-align: center; }
.adbox .spin { width: 46px; height: 46px; border: 4px solid var(--line); border-top-color: var(--accent2); border-radius: 50%; margin: 14px auto; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mock-tag { position: absolute; top: 8px; right: 10px; font-size: 10px; color: var(--muted); }

/* ---------- Meta upgrades / lists ---------- */
.uprow { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); margin-bottom:8px;}
.uprow .em{font-size:24px} .uprow .info{flex:1} .uprow .nm{font-weight:800;font-size:14px} .uprow .ds{font-size:11px;color:var(--muted)}
.dots{display:flex;gap:3px;margin-top:4px}
.dots i{width:9px;height:9px;border-radius:2px;background:#2a1f42;border:1px solid var(--line)}
.dots i.on{background:linear-gradient(180deg,#c084fc,#7c3aed);border-color:#7c3aed}

.tabbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tab{flex:1;text-align:center;padding:9px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--muted)}
.tab.active{background:var(--panel2);color:var(--txt);border-color:var(--accent)}

.lb-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--line)}
.lb-rank{width:26px;text-align:center;font-weight:900;color:var(--gold)}
.lb-name{flex:1;font-weight:700}
.lb-floor{color:var(--shard);font-weight:800}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--safe-b));background:var(--panel2);border:1px solid var(--line);
  padding:10px 16px;border-radius:12px;z-index:200;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:pop .2s;max-width:90%}

.floor-flag{display:inline-flex;gap:6px;align-items:center;font-weight:800}
.biome{color:var(--muted);font-size:12px}

.hpnum{font-variant-numeric:tabular-nums}
.small{font-size:12px} .mt{margin-top:10px} .mb{margin-bottom:10px}
.gemcolor{color:var(--gem)} .shardcolor{color:var(--shard)} .goldcolor{color:var(--gold)}
.hidden{display:none!important}
.foot-note{color:var(--muted);font-size:11px;text-align:center;margin-top:8px}

/* ---------- Party combat (2.0) ---------- */
.cbt-enemies{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.ecard{flex:1;max-width:170px;background:linear-gradient(180deg,#241320,#1a1020);border:1px solid #5b2130;border-radius:14px;padding:8px 8px 10px;text-align:center;position:relative}
.ecard.selected{box-shadow:0 0 0 2px var(--danger),0 0 14px rgba(244,63,94,.55);border-color:var(--danger)}
.ecard.down{opacity:.35;filter:grayscale(1)}
.ecard .spr{font-size:38px;filter:drop-shadow(0 5px 6px rgba(0,0,0,.5))}
.ecard .enm{font-weight:800;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecard .tag-boss{position:absolute;top:5px;left:6px;font-size:9px;color:var(--danger);font-weight:900;border:1px solid #5b2130;border-radius:6px;padding:0 4px}
.ecard .tgt{position:absolute;top:5px;right:6px;font-size:12px}
.cbt-party{display:grid;gap:7px;margin-bottom:8px}
.hcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 7px;text-align:center;position:relative}
.hcard.active{border-color:var(--accent2);box-shadow:0 0 0 2px var(--accent2),0 0 16px rgba(168,85,247,.45)}
.hcard.down{opacity:.45;filter:grayscale(1)}
.hcard .spr{font-size:28px}
.hcard .hn{font-weight:800;font-size:12px}
.turnbar{text-align:center;font-weight:700;font-size:13px;padding:6px;min-height:28px}
.card.choice.picked{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
.selbar-run{position:sticky;bottom:0;background:linear-gradient(0deg,var(--bg) 60%,transparent);padding-top:10px;margin-top:auto}
.btn.guard{background:linear-gradient(180deg,#38bdf8,#0284c7);border-color:#075985;color:#04121c}


/* ---------- The Delver's Handbook (manual.js) ---------- */
.m-search{position:sticky;top:0;z-index:2;background:var(--panel);padding:2px 0 10px;margin-bottom:4px}
.m-search input{width:100%;padding:9px 12px;border-radius:9px;font:inherit;font-size:14px;
  color:var(--txt);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.m-search input:focus{outline:2px solid var(--accent);outline-offset:1px}
.m-part{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.m-sec{margin-bottom:18px}
.m-sec h3{font-size:16px;margin:0 0 6px}
.m-sec h4{font-size:13px;margin:12px 0 6px;color:var(--accent2);letter-spacing:.02em}
.m-sec p{margin:0 0 8px}
.m-sec ul{padding-left:18px;margin:6px 0}
.m-sec li{margin-bottom:4px}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.m-cell{background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.m-cell b{font-size:13px}
.m-cell span{color:var(--muted);line-height:1.45}
.m-role{color:var(--muted);font-size:12px}
.m-count{font-size:11px;color:var(--muted);font-weight:400}
.m-fac{border-left:3px solid var(--accent);padding:7px 0 7px 11px;margin-bottom:9px;font-size:13px}
.m-chips{display:flex;flex-wrap:wrap;gap:7px}
.m-chip{font-size:12px;padding:3px 10px;border-radius:99px;border:1px solid currentColor}
.m-foot{font-size:12px;color:var(--muted);margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:420px){ .m-grid{grid-template-columns:1fr} }

/* ---------- Combat visual effects ---------- */
/* Floating numbers live on <body> (fixed) so a full re-render of the combat
   screen mid-flight can't delete them. */
.fxnum{
  position:fixed; z-index:9000; pointer-events:none; transform:translate(-50%,-50%);
  font-weight:900; font-size:22px; line-height:1; letter-spacing:-.01em;
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.45);
  animation:fxFloat .95s cubic-bezier(.2,.75,.3,1) forwards;
}
.fxnum.dmg{ color:#ff8f7a }
.fxnum.dmg.magic{ color:#9ec5ff }
.fxnum.dmg.crit{ color:#ffd24a; font-size:32px; animation:fxFloatCrit 1s cubic-bezier(.2,.75,.3,1) forwards }
.fxnum.heal{ color:#7ee07e }
.fxnum.shield{ color:#8fd8ff; font-size:18px }
.fxnum.miss{ color:var(--muted); font-size:17px; letter-spacing:.08em }

@keyframes fxFloat{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.7) }
  18%{ opacity:1; transform:translate(-50%,-64%) scale(1.08) }
  36%{ transform:translate(-50%,-70%) scale(1) }
  100%{ opacity:0; transform:translate(-50%,-150%) scale(.95) }
}
@keyframes fxFloatCrit{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-7deg) }
  16%{ opacity:1; transform:translate(-50%,-66%) scale(1.35) rotate(3deg) }
  34%{ transform:translate(-50%,-72%) scale(1.05) rotate(0deg) }
  100%{ opacity:0; transform:translate(-50%,-160%) scale(1) }
}

/* attacker lunges toward the other side of the board */
.fx-lunge-up{ animation:fxLungeUp .3s ease-out }
.fx-lunge-down{ animation:fxLungeDown .3s ease-out }
@keyframes fxLungeUp{
  0%{ transform:translateY(0) } 34%{ transform:translateY(-13px) scale(1.05) } 100%{ transform:translateY(0) }
}
@keyframes fxLungeDown{
  0%{ transform:translateY(0) } 34%{ transform:translateY(13px) scale(1.05) } 100%{ transform:translateY(0) }
}

/* target reacts */
.fx-hit{ animation:fxHit .34s ease-out }
.fx-hit-crit{ animation:fxHitCrit .46s ease-out }
@keyframes fxHit{
  0%{ transform:translateX(0); filter:none }
  15%{ transform:translateX(-7px); filter:brightness(2.1) saturate(.4) }
  35%{ transform:translateX(6px); filter:brightness(1.3) }
  60%{ transform:translateX(-3px) }
  100%{ transform:translateX(0); filter:none }
}
@keyframes fxHitCrit{
  0%{ transform:translateX(0) scale(1); filter:none }
  12%{ transform:translateX(-11px) scale(1.07); filter:brightness(2.6) saturate(.2) }
  30%{ transform:translateX(10px) scale(1.03); filter:brightness(1.6) }
  52%{ transform:translateX(-6px) scale(1) }
  72%{ transform:translateX(3px) }
  100%{ transform:translateX(0); filter:none }
}
.fx-heal{ animation:fxHeal .46s ease-out }
@keyframes fxHeal{
  0%{ filter:none } 40%{ filter:brightness(1.35) hue-rotate(38deg) } 100%{ filter:none }
}
.fx-dodge{ animation:fxDodge .34s ease-out }
@keyframes fxDodge{
  0%{ transform:translateX(0); opacity:1 } 40%{ transform:translateX(14px); opacity:.35 } 100%{ transform:translateX(0); opacity:1 }
}
.fx-down{ animation:fxDown .52s ease-in forwards }
@keyframes fxDown{
  0%{ transform:scale(1) rotate(0); opacity:1 }
  40%{ transform:scale(1.08) rotate(-4deg); filter:brightness(2) }
  100%{ transform:scale(.9) rotate(6deg); opacity:.55 }
}
/* whole-board kick on a crit */
.fx-shake{ animation:fxShake .26s ease-out }
@keyframes fxShake{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-4px,2px) } 45%{ transform:translate(4px,-2px) }
  70%{ transform:translate(-2px,1px) }
}
/* HP bars ease instead of snapping */
.bar.hp > span{ transition:width .34s cubic-bezier(.3,.8,.35,1) }

@media (prefers-reduced-motion: reduce){
  .fxnum{ animation:fxFade .8s linear forwards }
  @keyframes fxFade{ 0%{opacity:0} 15%{opacity:1} 100%{opacity:0} }
  .fx-lunge-up,.fx-lunge-down,.fx-hit,.fx-hit-crit,.fx-heal,.fx-dodge,.fx-down,.fx-shake{ animation:none }
  .bar.hp > span{ transition:none }
}

/* ---------- Travelling attack projectile ---------- */
/* The projectile IS the skill's own emoji; damage type sets its colour,
   trail and how it flies. Lives on <body> so a mid-flight re-render of the
   combat screen can't delete it. */
.fxproj{
  position:fixed; z-index:8990; pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--ang,0deg));
  font-size:27px; line-height:1; will-change:left,top;
}
.fxproj.crit{ font-size:38px }
.fxproj.spin{ animation:fxSpin .42s linear infinite }
@keyframes fxSpin{ to{ transform:translate(-50%,-50%) rotate(calc(var(--ang,0deg) + 360deg)) } }

/* trail */
.fxproj::after{
  content:''; position:absolute; left:50%; top:50%;
  width:48px; height:5px; border-radius:99px;
  transform:translate(-100%,-50%) rotate(0deg);
  background:linear-gradient(90deg, transparent, currentColor);
  opacity:.6;
}
.fxproj.spin::after{ display:none }

/* per damage type */
.fxproj.k-physical{ color:#ffe3bd; filter:drop-shadow(0 0 8px rgba(255,190,120,.85)) }
.fxproj.k-magic   { color:#bcd8ff; filter:drop-shadow(0 0 14px rgba(130,180,255,.95)) }
.fxproj.k-fire    { color:#ffb27a; filter:drop-shadow(0 0 16px rgba(255,120,40,.95)) }
.fxproj.k-frost   { color:#cdeeff; filter:drop-shadow(0 0 14px rgba(150,220,255,.95)) }
.fxproj.k-holy    { color:#ffeaa8; filter:drop-shadow(0 0 16px rgba(255,220,120,.95)) }
.fxproj.k-poison  { color:#b8f08a; filter:drop-shadow(0 0 14px rgba(140,230,110,.9)) }

.fxproj.burst{ animation:fxBurst .2s ease-out forwards }
@keyframes fxBurst{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--ang,0deg)) scale(1) }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--ang,0deg)) scale(2.2) }
}

/* damage numbers tinted to match the damage type */
.fxnum.dmg.d-physical{ color:#ff8f7a }
.fxnum.dmg.d-magic   { color:#9ec5ff }
.fxnum.dmg.d-fire    { color:#ff9d5c }
.fxnum.dmg.d-frost   { color:#a9e2ff }
.fxnum.dmg.d-holy    { color:#ffe08a }
.fxnum.dmg.d-poison  { color:#a6e878 }
.fxnum.dmg.crit      { color:#ffd24a }

@media (prefers-reduced-motion: reduce){ .fxproj{ display:none } }

/* clickable hint in the home footer / prompt */
.sign-link { color: #a78bfa; text-decoration: underline; cursor: pointer; }
.sign-link:hover { color: #c4b5fd; }
.foot-note .sign-link { font-weight: 700; }