/* ============ SERPENT & RUNG ============ */
@font-face { font-family: 'sys'; src: local('Segoe UI'); }
:root{
  --gold:#e8c67a; --gold-dim:#a98d4e;
  --bone:#e9e2d0; --ink:#0b0e14;
  --snake:#7ee87e; --snake-deep:#2e8f4e;
  --trap:#ff9a5c; --hp:#ff6a7a; --ladder:#ffd77a; --shrine:#8ad8ff; --gem:#c58aff;
  --panel:rgba(13,17,26,.88);
  --edge:rgba(232,198,122,.28);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:#06080d;color:var(--bone);
  font-family:Georgia,'Times New Roman',serif;
  user-select:none;
}
#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;cursor:grab}
#scene.dragging{cursor:grabbing}

/* ---------- overlays ---------- */
#vignette{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
  transition:opacity .8s;opacity:.85}
#flash{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;background:#fff}
#fader{position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0;background:#03040a;transition:opacity .45s ease}
#fader.on{opacity:1;pointer-events:auto}
.letterbox{position:absolute;inset:0;pointer-events:none;z-index:6}
.lb-bar{position:absolute;left:0;right:0;height:0;background:#000;transition:height .55s cubic-bezier(.7,0,.3,1)}
.lb-top{top:0}.lb-bot{bottom:0}
.letterbox.on .lb-bar{height:7.5vh}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.screen.visible{opacity:1;pointer-events:auto}
.hud{pointer-events:none !important;background:none}
.hud.visible{pointer-events:none}
.hud *{pointer-events:auto}

.panel{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  padding:2.2rem 2.6rem;max-width:min(92vw,620px);box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);text-align:center}
.panel-wide{max-width:min(94vw,880px)}
.panel-narrow{max-width:min(92vw,460px)}
.panel h2{font-size:1.9rem;letter-spacing:.06em;color:var(--gold);font-weight:normal;margin-bottom:.7rem;font-variant:small-caps}
.panel h3{color:var(--gold-dim);font-variant:small-caps;letter-spacing:.05em;margin:.8rem 0 .25rem;font-size:1.05rem}
.panel p{line-height:1.5;font-size:.95rem;color:#cfc8b8;margin-bottom:.4rem;text-align:left}
.how-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;text-align:left;margin-bottom:1.2rem}
@media(max-width:700px){.how-cols{grid-template-columns:1fr}}
.c-snake{color:var(--snake)} .c-trap{color:var(--trap)} .c-hp{color:var(--hp)}
.c-ladder{color:var(--ladder)} .c-shrine{color:var(--shrine)} .c-gem{color:var(--gem)}
.kbd{display:inline-block;border:1px solid #555;border-bottom-width:2px;border-radius:4px;padding:0 .38em;
  font-family:monospace;font-size:.85em;background:#1a1f2b;color:#ddd}

/* ---------- title ---------- */
#screen-title{background:linear-gradient(to bottom,rgba(3,4,8,.25),rgba(3,4,8,0) 30%,rgba(3,4,8,0) 60%,rgba(3,4,8,.7))}
.title-wrap{text-align:center;animation:titleIn 1.4s ease both;padding-bottom:4vh}
@keyframes titleIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.title-eyebrow{letter-spacing:.42em;text-transform:uppercase;font-size:.72rem;color:var(--gold-dim);margin-bottom:1rem}
.game-title{font-size:clamp(2.6rem,9vw,5.6rem);font-weight:normal;letter-spacing:.08em;line-height:.95;
  display:flex;gap:.18em;justify-content:center;align-items:baseline;flex-wrap:wrap}
.t-serpent{color:var(--snake);text-shadow:0 0 34px rgba(126,232,126,.35),0 4px 0 rgba(0,0,0,.5)}
.t-amp{color:var(--gold-dim);font-size:.45em}
.t-rung{color:var(--gold);text-shadow:0 0 34px rgba(232,198,122,.35),0 4px 0 rgba(0,0,0,.5)}
.title-tag{margin:1.1rem 0 2rem;color:#b9b2a2;font-style:italic;font-size:1.02rem}
.title-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.title-footer{margin-top:2.2rem;font-size:.8rem;color:#7d7566;letter-spacing:.06em}

/* ---------- buttons ---------- */
.btn{font-family:inherit;font-variant:small-caps;letter-spacing:.1em;font-size:1rem;
  color:var(--bone);background:#1b2130;border:1px solid var(--edge);border-radius:9px;
  padding:.65rem 1.6rem;cursor:pointer;transition:all .18s ease}
.btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.btn-primary{background:linear-gradient(160deg,#3a2f16,#241d10);border-color:var(--gold-dim);color:var(--gold)}
.btn-primary:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(232,198,122,.25)}
.btn-big{font-size:1.25rem;padding:.85rem 2.4rem}
.btn-small{font-size:.85rem;padding:.4rem 1rem}
.btn-ghost{background:transparent}
.btn-danger{border-color:rgba(255,106,122,.4)} .btn-danger:hover{border-color:var(--hp);color:var(--hp)}
.row-center{display:flex;gap:1rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}
.col-center{display:flex;flex-direction:column;gap:.8rem;align-items:center;margin-top:1rem}
.col-center .btn{min-width:220px}

/* ---------- setup / draft cards ---------- */
.setup-sub{text-align:center !important;font-style:italic;color:#a89f8d !important;margin-bottom:1.4rem !important}
.card-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:.6rem}
.relic-card{width:200px;background:linear-gradient(170deg,#171c28,#0e1119);border:1px solid #3a4256;border-radius:12px;
  padding:1.1rem 1rem 1rem;cursor:pointer;transition:all .2s ease;text-align:center;position:relative}
.relic-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 24px rgba(232,198,122,.14)}
.relic-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 14px 34px rgba(0,0,0,.55)}
.relic-card .rc-icon{font-size:2.3rem;line-height:1;margin-bottom:.55rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.relic-card .rc-name{font-variant:small-caps;letter-spacing:.06em;color:var(--gold);font-size:1.02rem;margin-bottom:.35rem}
.relic-card .rc-desc{font-size:.8rem;line-height:1.45;color:#b6ae9d}
.relic-card .rc-rarity{position:absolute;top:.5rem;right:.6rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.rar-common{color:#9aa3b5}.rar-uncommon{color:#7ee87e}.rar-rare{color:#c58aff}
.relic-card.rar-b-uncommon{border-color:rgba(126,232,126,.35)}
.relic-card.rar-b-rare{border-color:rgba(197,138,255,.4)}
.setup-opts{display:flex;justify-content:center;margin-top:1rem}
.seed-label{font-size:.85rem;color:#a89f8d;display:flex;gap:.5rem;align-items:center;font-variant:small-caps;letter-spacing:.08em}
#seed-input{background:#0d1119;border:1px solid #333b4e;color:var(--bone);border-radius:6px;padding:.35rem .6rem;
  font-family:monospace;font-size:.9rem;width:180px;text-align:center}
#seed-input:focus{outline:none;border-color:var(--gold-dim)}

/* ---------- HUD ---------- */
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:.9rem 1.2rem;background:linear-gradient(to bottom,rgba(3,5,9,.75),transparent);z-index:11}
.hud-left{min-width:200px}
.hud-level{font-variant:small-caps;letter-spacing:.12em;color:var(--gold);font-size:1.05rem;text-shadow:0 2px 6px #000}
.hud-tile{font-size:.8rem;color:#b0a894;letter-spacing:.05em;margin-top:.15rem}
.hud-center{display:flex;justify-content:center}
.hearts{display:flex;gap:.3rem;font-size:1.35rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.hearts .hp-full{color:var(--hp)} .hearts .hp-empty{color:#3a3f4d}
.hearts .hp-bonus{color:#ffd0d6}
.hearts span{transition:transform .2s}
.hearts.hit span{animation:heartHit .5s ease}
@keyframes heartHit{30%{transform:scale(1.35)}}
.hud-right{display:flex;gap:.5rem;align-items:center;min-width:200px;justify-content:flex-end}
.hud-score{color:var(--gem);font-size:.95rem;letter-spacing:.08em;margin-right:.4rem;text-shadow:0 2px 6px #000}
.icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--edge);background:rgba(13,17,26,.7);
  color:var(--bone);cursor:pointer;font-size:.8rem;transition:all .15s;font-family:inherit}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.icon-btn.active{background:#3a2f16;border-color:var(--gold);color:var(--gold)}
.icon-btn.muted{color:#555;text-decoration:line-through}

.hud-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;
  padding:0 1rem 1.05rem;background:linear-gradient(to top,rgba(3,5,9,.8),transparent);z-index:11}
.roll-cluster{display:flex;align-items:center;gap:.9rem}
.btn-roll{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  width:110px;height:74px;border-radius:14px;cursor:pointer;font-family:inherit;
  background:linear-gradient(165deg,#4a3a17,#241d10);border:1px solid var(--gold-dim);color:var(--gold);
  transition:all .18s ease;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.btn-roll .btn-roll-die{font-size:1.7rem;line-height:1}
.btn-roll .btn-roll-label{font-variant:small-caps;letter-spacing:.22em;font-size:.86rem}
.btn-roll:hover:not(:disabled){border-color:var(--gold);box-shadow:0 0 30px rgba(232,198,122,.3),0 10px 26px rgba(0,0,0,.5);transform:translateY(-2px)}
.btn-roll:disabled{opacity:.35;cursor:default}
.btn-roll.armed{animation:rollPulse 1.8s ease infinite}
@keyframes rollPulse{50%{box-shadow:0 0 30px rgba(232,198,122,.4),0 10px 26px rgba(0,0,0,.5)}}
.roll-history{display:flex;gap:.3rem;min-width:120px;justify-content:flex-end}
.roll-history .rh{width:26px;height:26px;border-radius:6px;border:1px solid #3a4256;display:flex;align-items:center;
  justify-content:center;font-size:.85rem;color:#c9c1af;background:rgba(13,17,26,.7)}
.roll-history .rh:last-child{border-color:var(--gold-dim);color:var(--gold)}
.hud-msg{margin-top:.55rem;min-height:1.3rem;font-style:italic;color:#c5bca8;font-size:.92rem;
  text-shadow:0 2px 6px #000;transition:opacity .3s;text-align:center}
.relic-tray{display:flex;gap:.45rem;margin-bottom:.7rem;flex-wrap:wrap;justify-content:center;max-width:80vw}
.relic-chip{position:relative;width:44px;height:44px;border-radius:10px;background:rgba(13,17,26,.82);
  border:1px solid #3a4256;display:flex;align-items:center;justify-content:center;font-size:1.35rem;cursor:help;
  transition:all .15s}
.relic-chip:hover{border-color:var(--gold);transform:translateY(-2px)}
.relic-chip .charges{position:absolute;bottom:-5px;right:-5px;background:#3a2f16;border:1px solid var(--gold-dim);
  color:var(--gold);font-size:.62rem;border-radius:8px;padding:0 .32em;font-family:monospace}
.relic-chip .tip{position:absolute;bottom:110%;left:50%;transform:translateX(-50%) translateY(4px);width:190px;
  background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:.55rem .65rem;font-size:.75rem;
  color:#cfc8b8;opacity:0;pointer-events:none;transition:all .18s;z-index:40;line-height:1.4;text-align:center}
.relic-chip .tip b{color:var(--gold);display:block;font-variant:small-caps;margin-bottom:.15rem}
.relic-chip:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.relic-chip.flash{animation:chipFlash .9s ease}
@keyframes chipFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 26px var(--gold);border-color:var(--gold);transform:scale(1.18)}}

/* ---------- event banner ---------- */
.event-banner{position:absolute;left:0;right:0;top:20%;z-index:7;text-align:center;pointer-events:none}
.event-banner.hidden{display:none}
#event-banner-text{font-size:clamp(1.6rem,5vw,3rem);font-variant:small-caps;letter-spacing:.2em;
  color:var(--bone);text-shadow:0 0 30px rgba(0,0,0,.9),0 4px 12px #000;animation:bannerIn .5s cubic-bezier(.2,1.4,.4,1) both}
#event-banner-sub{font-style:italic;color:#c5bca8;margin-top:.3rem;font-size:1rem;text-shadow:0 2px 8px #000;
  animation:bannerIn .5s .12s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bannerIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
.event-banner.snake #event-banner-text{color:var(--snake)}
.event-banner.trap #event-banner-text{color:var(--trap)}
.event-banner.ladder #event-banner-text{color:var(--ladder)}
.event-banner.good #event-banner-text{color:var(--shrine)}

/* ---------- level card ---------- */
.level-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:8;pointer-events:none;text-align:center}
.level-card.hidden{display:none}
.lc-floor{letter-spacing:.5em;text-transform:uppercase;font-size:.85rem;color:var(--gold-dim);animation:lcIn 1s ease both}
.lc-name{font-size:clamp(2rem,6vw,3.6rem);font-variant:small-caps;letter-spacing:.12em;color:var(--bone);
  text-shadow:0 0 40px rgba(0,0,0,.8),0 6px 18px #000;margin:.4rem 0;animation:lcIn 1s .15s ease both}
.lc-desc{font-style:italic;color:#b9b09c;font-size:1.05rem;animation:lcIn 1s .3s ease both;max-width:70vw}
@keyframes lcIn{from{opacity:0;transform:translateY(20px);letter-spacing:.3em}to{opacity:1;transform:none}}

/* ---------- pause & end screens ---------- */
.pause-runinfo{font-size:.9rem;color:#b0a894;margin-bottom:.6rem;line-height:1.6}
.pause-hint{text-align:center !important;font-style:italic;color:#6f6758 !important;margin-top:1.2rem !important;font-size:.85rem !important}
.defeat-title{color:var(--hp) !important}
.victory-title{color:var(--ladder) !important}
.end-cause{text-align:center !important;font-style:italic;margin-bottom:1.2rem !important}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:.4rem 1.6rem;margin:0 auto 1rem;max-width:420px;text-align:left}
.stats-grid .sg-row{display:flex;justify-content:space-between;border-bottom:1px dashed #2c3242;padding:.28rem 0;font-size:.9rem}
.stats-grid .sg-k{color:#a89f8d}
.stats-grid .sg-v{color:var(--bone);font-family:monospace}
.stats-grid .sg-v.hi{color:var(--gold)}

/* ---------- toast ---------- */
.toast{position:absolute;top:14%;left:50%;transform:translateX(-50%);z-index:30;background:var(--panel);
  border:1px solid var(--edge);border-radius:10px;padding:.6rem 1.3rem;font-size:.95rem;color:var(--gold);
  pointer-events:none;transition:all .35s ease;font-variant:small-caps;letter-spacing:.08em;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.hidden{opacity:0;transform:translateX(-50%) translateY(-12px)}

.hidden{display:none !important}

@media (max-width:640px){
  .hud-left,.hud-right{min-width:auto}
  .hud-level{font-size:.85rem}
  .roll-history{display:none}
  .btn-roll{width:92px;height:64px}
  .panel{padding:1.4rem 1.2rem}
}