/* D&D Game Table — dark tabletop theme, dependency-free */
:root{
  --bg:#101216; --bg2:#161a21; --panel:#1c212b; --panel2:#222936;
  --line:#2e3542; --ink:#e8e4d8; --muted:#9aa0ad; --faint:#6b7180;
  --gold:#c9a227; --gold-dim:#8a7018; --red:#b3402e; --green:#5ea86a;
  --blue:#5b8fd4; --pc:#4f9e68; --enemy:#b3402e;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:15px; line-height:1.45;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{font-family:Palatino,'Palatino Linotype',Georgia,serif;color:var(--gold);margin:.6em 0 .4em}
h2{font-size:1.35rem;border-bottom:1px solid var(--line);padding-bottom:.25em}
h3{font-size:1.1rem}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:.85em}
.error{color:#ff9d8a;background:#3a1712;border:1px solid #7a2c1f;border-radius:6px;padding:.5em .7em;margin:.5em 0}
.ok{color:#9fe0ab}
button,.btn{
  font-family:inherit;font-size:.95rem;cursor:pointer;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.45em .9em;
}
button:hover,.btn:hover{border-color:var(--gold);color:#fff}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:#3d2f08;border-color:var(--gold);color:#f4e6b0}
.btn.primary:hover{background:#54430c}
.btn.danger{background:#3a1712;border-color:#7a2c1f;color:#ffb3a3}
.btn.small{font-size:.8rem;padding:.3em .6em}
input,select,textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);
  background:#0d0f13;border:1px solid var(--line);border-radius:6px;padding:.45em .6em;
  width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;min-height:70px}
label{display:block;margin:.5em 0 .2em;font-size:.9rem;color:var(--muted)}
.form-row{display:flex;gap:.6em;flex-wrap:wrap}
.form-row>*{flex:1 1 140px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.4em .55em;border-bottom:1px solid var(--line)}
th{color:var(--gold);font-weight:normal;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em}

/* ---- login ---- */
Xmin-height:100vh;display:flex;align-items:center;justify-content:center;padding:1em;
  background:radial-gradient(ellipse at 50% 30%, #1b2030 0%, #101216 70%)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:2em;max-width:380px;width:100%;text-align:center;box-shadow:0 8px 40px #000}
.login-dice{font-size:3rem}
.login-card h1{margin:.2em 0}
.login-card form{text-align:left}

/* ---- shell ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:.6em;
  padding:.55em .9em;background:var(--bg2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.brand{font-size:1.15rem;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:.6em}
.whoami{font-size:.85rem;color:var(--muted);white-space:nowrap}
.conn{color:var(--green);font-size:1.1rem}
.conn.off{color:var(--red)}
.tabnav{display:flex;gap:.25em;padding:.4em .6em;background:var(--bg2);
  border-bottom:1px solid var(--line);position:sticky;top:52px;z-index:49;overflow-x:auto}
.tabbtn{border-radius:8px 8px 0 0;border:1px solid transparent;background:transparent;
  color:var(--muted);padding:.5em 1.1em;white-space:nowrap}
.tabbtn.active{background:var(--panel);border-color:var(--line);color:var(--gold)}
.tabbtn.admin-only{display:none}
body.is-admin .tabbtn.admin-only{display:block}
#main{max-width:1100px;margin:0 auto;padding:.8em .8em 3em}
.tabpage{animation:fade .18s ease-in}
@keyframes fade{from{opacity:.4}to{opacity:1}}

/* ---- cards / panels ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9em 1em;margin:.7em 0}
.card h3{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
details{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin:.6em 0;padding:.5em .9em}
summary{cursor:pointer;color:var(--gold);font-size:1rem;padding:.3em 0}

/* ---- Play tab ---- */
.turn-banner{background:#241d08;border:1px solid var(--gold-dim);border-radius:var(--radius);
  padding:.6em .9em;margin:.4em 0;display:flex;gap:.8em;align-items:center;flex-wrap:wrap}
.turn-banner .now{color:var(--gold);font-weight:bold;font-size:1.05rem}
.init-list{display:flex;flex-wrap:wrap;gap:.35em;margin:.4em 0}
.init-chip{background:var(--panel2);border:1px solid var(--line);border-radius:20px;
  padding:.25em .7em;font-size:.85rem}
.init-chip.current{border-color:var(--gold);background:#2c2408;color:#ffe9a8}
.feed{display:flex;flex-direction:column;gap:.6em;margin:.6em 0}
.feed-item{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:6px;padding:.6em .8em}
.feed-item .who{color:var(--gold);font-size:.85rem}
.feed-item .dice{font-family:'Courier New',monospace;background:#0d0f13;border:1px dashed var(--faint);
  border-radius:6px;padding:.4em .6em;margin:.4em 0;font-size:.88rem;color:#ffd98a;white-space:pre-wrap}
.tray{display:flex;flex-wrap:wrap;gap:.4em;align-items:center;margin:.4em 0}
.char-tray{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:.5em .7em;margin:.4em 0}
.char-tray .nm{font-weight:bold}
.qroll{display:flex;gap:.3em;flex-wrap:wrap;margin-top:.3em;align-items:center}
.qroll select{width:auto;min-width:70px}
.checkline{display:flex;gap:.4em;align-items:center;margin-top:.5em}
.checkline input{max-width:200px}

/* ---- active-turn prompt + declaration input (turn-gated) ---- */
.turn-prompt{margin:.6em 0;padding:.65em 1em;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--panel);font-size:1rem}
.turn-prompt.your-turn{background:#2c2408;border-color:var(--gold);font-size:1.15rem;
  box-shadow:0 0 18px rgba(201,162,39,.25)}
.turn-prompt.your-turn b{color:var(--gold)}
.turn-prompt.waiting{color:var(--muted);font-size:.92rem}
.declare-card .checkline{margin-top:0}
.declare-card .checkline input{max-width:none;flex:1 1 220px}
.declared-note{margin-top:.5em;color:#ffd98a}

/* ---- contextual action cards ---- */
.action-cards{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.7em}
.action-card{display:flex;flex-direction:column;align-items:flex-start;gap:.12em;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:.5em .7em;cursor:pointer;text-align:left;min-width:130px;max-width:240px;
  font-family:inherit}
.action-card:hover:not(:disabled){border-color:var(--gold)}
.action-card:hover:not(:disabled) .ac-name{color:#fff}
.action-card:disabled{opacity:.45;cursor:not-allowed}
.action-card.spent{border-style:dashed}
.action-card .ac-name{font-weight:bold;color:var(--ink);font-size:.95rem}
.action-card .ac-cost{font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:.05em}
.action-card .ac-nums{font-size:.8rem;color:var(--muted)}
.action-card .ac-why{font-size:.78rem;color:#ff9d8a}
.card-tags{font-size:.82rem;color:var(--gold);white-space:nowrap}
.declare-hint{margin-top:.5em}
.declared-round{margin-bottom:.6em}
.declared-list{margin:.4em 0;padding-left:1.2em}
.declared-list li{margin:.2em 0}

/* ---- Map tab ---- */
.map-head{display:flex;gap:.8em;align-items:center;flex-wrap:wrap;margin:.4em 0}
.map-scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#0b0d10;
  max-height:70vh;padding:.4em}
.map-inner{position:relative;display:inline-block}
.map-grid{display:grid;gap:1px;background:#222}
.cell{position:relative;aspect-ratio:1/1;min-width:44px;background:#141a22;border:1px solid #232b38;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.cell .coord{position:absolute;top:1px;left:3px;font-size:.6rem;color:var(--faint);pointer-events:none}
.cell.targetable:hover{outline:2px solid var(--gold)}
.cell .tok{position:relative;width:82%;height:82%;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:bold;font-size:.8rem;color:#fff;
  border:2px solid #000;cursor:pointer;flex-direction:column;line-height:1.1}
.cell .tok.pc{background:var(--pc)} .cell .tok.enemy{background:var(--enemy)}
.cell .tok.selected{outline:3px solid var(--gold);outline-offset:1px}
.cell .tok.owned{box-shadow:0 0 0 2px var(--blue)}
.cell .tok .hpbar{position:absolute;bottom:-4px;left:8%;right:8%;height:5px;background:#333;border-radius:3px;overflow:hidden}
.cell .tok .hpbar i{display:block;height:100%;background:var(--green)}
.cell .tok .conds{position:absolute;top:-6px;right:-2px;font-size:.65rem;background:#000c;
  border-radius:8px;padding:0 .3em}
.cell .tok .nm{font-size:.62rem;position:absolute;bottom:-14px;white-space:nowrap;color:var(--ink);text-shadow:0 1px 2px #000}
.fog{position:absolute;background:rgba(5,6,9,.82);border:1px dashed #3a4256;z-index:5;pointer-events:none}
.legend{display:flex;gap:1em;font-size:.85rem;color:var(--muted);margin:.4em 0;flex-wrap:wrap}
.legend i{display:inline-block;width:.9em;height:.9em;border-radius:50%;margin-right:.3em}
.move-hint{color:var(--gold);font-size:.9rem}

/* ---- Party tab ---- */
.sheet-head{display:flex;gap:.8em;align-items:baseline;flex-wrap:wrap}
.sheet-head h3{margin:0}
.vitals{display:flex;gap:.6em;flex-wrap:wrap;margin:.5em 0}
.vital{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:.35em .7em;text-align:center;min-width:64px}
.vital .v{font-size:1.15rem;font-weight:bold}
.vital .l{font-size:.7rem;color:var(--muted);text-transform:uppercase}
.abilities{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em;margin:.5em 0}
.abil{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.4em;text-align:center}
.abil .s{font-size:1.1rem;font-weight:bold} .abil .n{font-size:.7rem;color:var(--muted)}
.res-track{display:flex;gap:.5em;align-items:center;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:.4em .6em;margin:.3em 0;flex-wrap:wrap}
.res-track .rn{font-weight:bold}
.res-track .rv{font-family:monospace}
.res-track button{padding:.2em .55em;font-size:.85rem}
.hpbtns{display:flex;gap:.3em}
.hpbtns button{padding:.25em .6em;font-size:.85rem}
.cond-chip{display:inline-block;background:#3a2b10;border:1px solid var(--gold-dim);
  border-radius:12px;padding:.15em .6em;margin:.15em;font-size:.82rem;color:#ffd98a}
.equip-row{display:flex;gap:.6em;font-size:.9rem;padding:.25em 0;border-bottom:1px dotted var(--line)}
.cond-Sound{color:#9fe0ab}.cond-Worn{color:#ffd98a}.cond-Damaged{color:#ffab7a}.cond-Broken{color:#ff8a7a}
.admin-row{display:flex;gap:.5em;flex-wrap:wrap;margin-top:.6em;align-items:center}
.admin-row select{width:auto}

/* ---- toasts ---- */
#toasts{position:fixed;bottom:1em;right:1em;display:flex;flex-direction:column;gap:.5em;z-index:200;max-width:min(92vw,380px)}
.toast{background:var(--panel2);border:1px solid var(--gold);border-radius:8px;
  padding:.6em .9em;box-shadow:0 4px 18px #000;animation:fade .2s}
.toast.err{border-color:var(--red)}
.toast button{float:right;margin-left:.6em}

@media(max-width:640px){
  .abilities{grid-template-columns:repeat(3,1fr)}
  .cell{min-width:38px}
  #main{padding:.5em .5em 3em}
  .topbar{flex-wrap:wrap}
}

/* ---- map background art (grid overlaid, themed placeholder fallback) ---- */
.map-inner.map-art{background-size:cover;background-position:center;background-repeat:no-repeat;
  border-radius:var(--radius);box-shadow:inset 0 0 120px rgba(0,0,0,.55)}
.map-inner.theme-water{background:linear-gradient(160deg,#0d2733 0%,#123a4a 45%,#0a1f2b 100%)}
.map-inner.theme-street{background:linear-gradient(160deg,#2a2620 0%,#3a332a 50%,#211d17 100%)}
.map-inner.theme-interior{background:linear-gradient(160deg,#241a10 0%,#3a2a16 50%,#1a120a 100%)}
.map-inner.theme-deck{background:linear-gradient(160deg,#1d2a26 0%,#2c3f36 50%,#141d1a 100%)}
.map-inner.theme-pit{background:linear-gradient(160deg,#2b1210 0%,#431b16 50%,#1c0c0a 100%)}
.map-inner.theme-default{background:linear-gradient(160deg,#1a2029 0%,#232c3a 50%,#12161d 100%)}
.map-grid.art-bg{background:transparent}
.map-grid.art-bg .cell{background:rgba(8,12,18,.58);border-color:rgba(70,82,105,.5)}
.map-inner.has-art .map-grid.art-bg .cell{background:rgba(8,12,18,.45)}

/* ---- leaderboard ---- */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:#fff}
th.sortable .arrow{color:var(--gold)}
.lb-highlights{display:flex;gap:.5em;flex-wrap:wrap;margin:.5em 0}
.hl-chip{background:var(--panel2);border:1px solid var(--gold-dim);border-radius:16px;
  padding:.3em .8em;font-size:.88rem}
.hl-chip b{color:var(--gold)}

/* ---- mechanics-first feed states ---- */
.feed-item.narrating{opacity:.8;border-left-color:var(--blue);font-style:italic}
.feed-item.vetoed{opacity:.65}
.feed-item.vetoed>div:nth-child(3){text-decoration:line-through}
.feed-ctl{margin-top:.4em}
.narr-edit-area{min-height:90px}
.redacted{display:inline-block;background:#3a1712;border:1px dashed #7a2c1f;color:#ff9d8a;
  border-radius:6px;padding:.1em .5em;font-size:.88rem}

/* ---- DM alert banner (DM eyes only) ---- */
#dm-alerts{position:sticky;top:0;z-index:120}
.dm-alert{background:#3a1010;border:2px solid var(--red);border-radius:10px;
  padding:.7em 1em;margin:.5em;color:#ffd9d2;box-shadow:0 4px 24px #000}
.dm-alert b{color:#ff9d8a}
.dm-alert .btn{float:right}

/* ---- presence dots ---- */
.pdot{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--faint);margin-right:.3em}
.pdot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.pdot.off{background:var(--red)}

/* ---- modal overlays (crisis, session start) ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(4,5,8,.78);z-index:150;
  display:flex;align-items:flex-start;justify-content:center;padding:2em 1em;overflow:auto}
.modal-overlay[hidden]{display:none}
.modal-card{background:var(--panel);border:1px solid var(--gold-dim);border-radius:14px;
  padding:1.4em;max-width:640px;width:100%;box-shadow:0 12px 60px #000}
.crisis-cost{display:block;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:.5em .7em;margin:.4em 0;cursor:pointer}
.crisis-cost:hover{border-color:var(--gold)}

/* ---- harbor ledger ---- */
.ledger-grid{display:flex;gap:.6em;flex-wrap:wrap;margin:.4em 0}
.ledger-stat{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:.4em .8em;text-align:center;min-width:90px}
.ledger-stat .v{font-size:1.2rem;font-weight:bold;color:var(--gold)}
.ledger-stat .l{font-size:.72rem;color:var(--muted);text-transform:uppercase}

/* ---- dramatic dice overlay ---- */
#dice-overlay{position:fixed;inset:0;z-index:300;background:rgba(5,6,10,.88);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
#dice-overlay[hidden]{display:none}
#dice-canvas{position:absolute;inset:0}
#dice-top{position:relative;z-index:2;text-align:center;margin-bottom:.4em}
#dice-top .dl{font-size:1.5rem;color:var(--gold)}
#dice-top .fanfare{font-size:2rem;font-weight:bold;color:#ffd94d;margin-top:.2em;
  text-shadow:0 0 24px #c9a227;animation:fanfare 1s ease-in-out infinite alternate}
#dice-top .fanfare.fumb{color:#ff8a7a;text-shadow:0 0 24px #b3402e}
@keyframes fanfare{from{transform:scale(1)}to{transform:scale(1.08)}}
#dice-overlay.fanfare-crit{box-shadow:inset 0 0 180px rgba(201,162,39,.35)}
#dice-overlay.fanfare-fumb{box-shadow:inset 0 0 180px rgba(179,64,46,.4)}
#dice-versus{position:relative;z-index:2;text-align:center;margin:.4em 0;
  background:rgba(20,24,32,.85);border:1px solid var(--line);border-radius:10px;padding:.5em 1.2em}
#dice-versus[hidden]{display:none}
#dice-versus .vs-label{font-size:1.1rem;color:var(--ink)}
#dice-versus .vs-ac{font-size:1.3rem;color:var(--red);font-weight:bold}
#dice-banner{position:relative;z-index:2;text-align:center;margin-top:.5em;
  background:rgba(20,24,32,.9);border:1px solid var(--gold-dim);border-radius:10px;padding:.6em 1.4em}
#dice-banner[hidden]{display:none}
#dice-banner .dl{color:var(--muted);font-size:.95rem}
#dice-banner .dt2{font-size:1.6rem}
#dice-banner .dt2 b{color:var(--gold)}
#dice-banner .outcome-hit,#dice-banner .outcome-success{color:#9fe0ab;font-weight:bold}
#dice-banner .outcome-crit{color:#ffd94d;font-weight:bold;text-shadow:0 0 12px #c9a227}
#dice-banner .outcome-miss,#dice-banner .outcome-fail{color:#ff9d8a;font-weight:bold}
#dice-static{position:relative;z-index:2;display:flex;gap:.6em;flex-wrap:wrap;justify-content:center;margin:.6em 0}
#dice-static[hidden]{display:none}
.die-static{width:64px;height:64px;border-radius:12px;background:#232b38;border:2px solid #5b8fd4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e8e4d8}
.die-static .ds{font-size:1.5rem;font-weight:bold}
.die-static .dt{font-size:.65rem;color:var(--muted)}
.die-static.crit{border-color:#ffd94d;background:#3d2f08;color:#ffe9a8}
.die-static.fumb{border-color:#ff8a7a;background:#3a1712;color:#ffb3a3}
#dice-tap{position:relative;z-index:2;margin-top:1em;color:var(--faint);font-size:.85rem}
@media(prefers-reduced-motion:reduce){
  #dice-top .fanfare{animation:none}
}