/* ── tokens ─────────────────────────────────────────────────────────────
   Palette: wet slate rock, carbide-lamp amber, verdigris copper, ore red.
   Deliberately cool-dark rather than the usual warm brown "dungeon".      */
:root{
  --rock-0:#0a1013;
  --rock-1:#0e1519;
  --rock-2:#152026;
  --rock-3:#1e2d35;
  --rock-4:#2b3d47;
  --edge:#3a5260;
  --lamp:#ffbe3d;
  --lamp-dim:#a87c22;
  --ore:#4fb3a5;
  --rust:#c0483a;
  --sand:#d9b877;
  --sand-dark:#8d7040;
  --bone:#e6ecef;
  --mute:#7e939e;

  --cell-w:64px;
  --cell-h:80px;
  --zoom:1;

  --f-display:"Saira Condensed","Arial Narrow",Impact,sans-serif;
  --f-body:"Saira",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--rock-1);color:var(--bone);
  font-family:var(--f-body);font-size:15px;line-height:1.55;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 700px at 50% -10%,rgba(255,190,61,.07),transparent 70%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 2px,transparent 2px 7px);
}
.hidden{display:none !important}
button{font:inherit;color:inherit}

/* ── shared bits ─────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--f-display);font-weight:700;font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--lamp-dim);margin:0 0 6px;
}
.muted{color:var(--mute)}
.small{font-size:13px}
.err{color:var(--rust);min-height:20px;margin:10px 0 0;font-size:14px}

.btn{
  background:var(--rock-3);border:1px solid var(--edge);color:var(--bone);
  padding:11px 18px;border-radius:3px;cursor:pointer;
  font-family:var(--f-display);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:14px;
  transition:background .15s,border-color .15s,transform .06s;
}
.btn:hover{background:var(--rock-4);border-color:var(--lamp-dim)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primary{background:var(--lamp);color:#20160a;border-color:var(--lamp)}
.btn-primary:hover{background:#ffd06e;border-color:#ffd06e}
.btn-sm{padding:7px 12px;font-size:12.5px}
.linkish{background:none;border:0;color:var(--mute);text-decoration:underline;
  text-underline-offset:4px;cursor:pointer;padding:8px;font-size:14px}
.linkish:hover{color:var(--lamp)}
.icon-btn{
  width:32px;height:32px;border:1px solid var(--edge);background:var(--rock-2);
  border-radius:3px;cursor:pointer;line-height:1;font-size:16px;flex:0 0 auto;
}
.icon-btn:hover{border-color:var(--lamp-dim);color:var(--lamp)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}

input{
  background:var(--rock-0);border:1px solid var(--edge);color:var(--bone);
  padding:11px 13px;border-radius:3px;font:inherit;width:100%;
}
input::placeholder{color:#4d626d}
input:focus{border-color:var(--lamp-dim);outline:none}

/* ── entry ───────────────────────────────────────────────────────────── */
.entry{min-height:100%;display:grid;place-items:center;padding:28px 20px;position:relative;z-index:1}
.entry-inner{width:min(460px,100%);text-align:center}
.wordmark{
  font-family:var(--f-display);font-weight:900;font-size:clamp(56px,16vw,104px);
  letter-spacing:.06em;margin:0;line-height:.9;
  color:var(--sand);
  text-shadow:0 2px 0 #6b5327,0 5px 22px rgba(255,190,61,.28);
}
.tagline{color:var(--mute);margin:14px auto 26px;max-width:34ch}
.entry-card{
  background:linear-gradient(180deg,var(--rock-2),var(--rock-1));
  border:1px solid var(--edge);border-radius:5px;padding:22px;text-align:left;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.field span{
  display:block;font-family:var(--f-display);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:6px;
}
.entry-actions{margin-top:18px;display:grid;gap:12px}
.or{text-align:center;color:#4d626d;font-size:12px;letter-spacing:.28em;text-transform:uppercase}
.join-row{display:flex;gap:8px}
.join-row input{
  text-transform:uppercase;letter-spacing:.34em;font-family:var(--f-mono);
  text-align:center;font-size:19px;
}
.join-row .btn{flex:0 0 auto}

/* ── lobby ───────────────────────────────────────────────────────────── */
.lobby{min-height:100%;display:grid;place-items:center;padding:28px 20px;position:relative;z-index:1}
.lobby-inner{width:min(500px,100%);text-align:center}
.room-code{
  font-family:var(--f-mono);font-size:clamp(44px,13vw,72px);letter-spacing:.22em;
  margin:0;color:var(--lamp);text-shadow:0 0 30px rgba(255,190,61,.35);
}
.lobby-share{display:flex;gap:8px;margin:16px 0 22px}
.lobby-share input{font-size:12.5px;font-family:var(--f-mono)}
.lobby-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}

.crew{list-style:none;padding:0;margin:0;display:grid;gap:7px;text-align:left}
.crew li{
  display:flex;align-items:center;gap:10px;
  background:var(--rock-2);border:1px solid var(--rock-3);border-radius:3px;padding:9px 12px;
}
.crew .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew .tag{
  font-family:var(--f-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--rock-4);padding:1px 6px;border-radius:2px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ore);flex:0 0 auto}
.dot.off{background:#4a5b64}

/* ── table ───────────────────────────────────────────────────────────── */
.table{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}
.topbar{
  display:flex;align-items:center;gap:12px;padding:8px 12px;
  background:var(--rock-0);border-bottom:1px solid var(--rock-3);flex:0 0 auto;
  padding-top:calc(8px + env(safe-area-inset-top));
}
.tb-left,.tb-right{display:flex;align-items:center;gap:8px}
.tb-mid{flex:1;text-align:center;font-family:var(--f-display);letter-spacing:.1em;
  text-transform:uppercase;font-size:14px;color:var(--lamp);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-code{font-family:var(--f-mono);letter-spacing:.2em;color:var(--sand);font-size:15px}
.tb-round,.tb-deck{font-size:12.5px;color:var(--mute);white-space:nowrap}
.tb-deck::after{content:" left";color:#4d626d}

.stage{flex:1;display:flex;min-height:0;position:relative}

.board-wrap{
  flex:1;overflow:auto;position:relative;background:var(--rock-0);
  background-image:
    radial-gradient(circle at 30% 20%,rgba(79,179,165,.045),transparent 45%),
    repeating-linear-gradient(78deg,rgba(255,255,255,.02) 0 1px,transparent 1px 9px);
  cursor:grab;-webkit-overflow-scrolling:touch;
}
.board-wrap.dragging{cursor:grabbing}
.board{position:relative;transform-origin:0 0;transform:scale(var(--zoom))}
/* lamplight falls off towards the edges of the shaft */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 62% 68% at 42% 46%,
    transparent 0,transparent 46%,rgba(4,8,10,.30) 74%,rgba(4,8,10,.62) 100%);
}
.rail{position:relative;z-index:2}

/* optional hand-drawn artwork, layered over the built-in vector faces.
   Drop a matching PNG into art/ and it appears automatically; if the file is
   absent the vector face below simply shows through. */
.art{position:absolute;inset:0;background-size:cover;background-position:center;
  border-radius:2px;pointer-events:none}
.art.flip{transform:rotate(180deg)}

/* board cells */
.cell{position:absolute;width:var(--cell-w);height:var(--cell-h)}
.cell svg{display:block;width:100%;height:100%}
.cell.placed{
  border-radius:2px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.55);
  animation:drop .22s ease-out;
}
@keyframes drop{from{transform:translateY(-8px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.cell.spot{
  border:1px dashed rgba(255,190,61,.55);border-radius:2px;cursor:pointer;
  background:rgba(255,190,61,.09);
}
.cell.spot:hover{background:rgba(255,190,61,.24);border-color:var(--lamp)}
.cell.rocktarget{cursor:crosshair;box-shadow:0 0 0 2px var(--rust),0 0 14px rgba(192,72,58,.6)}
.cell.maptarget{cursor:pointer;box-shadow:0 0 0 2px var(--ore),0 0 16px rgba(79,179,165,.6)}
.cell.goal-lit{box-shadow:0 0 0 2px var(--lamp),0 0 22px rgba(255,190,61,.45)}
/* one-time private map reveal */
.peek-sheet{width:min(340px,100%);text-align:center}
.peek-icon{
  width:74px;height:74px;margin:2px auto 12px;display:grid;place-items:center;
  border-radius:50%;
}
.peek-icon svg{width:42px;height:42px}
.peek-icon.gold{
  color:var(--lamp);
  background:radial-gradient(circle,rgba(255,190,61,.26),rgba(255,190,61,.05));
  box-shadow:0 0 0 1px rgba(255,190,61,.45),0 0 30px rgba(255,190,61,.4);
}
.peek-icon.coal{
  color:var(--mute);
  background:radial-gradient(circle,rgba(126,147,158,.22),rgba(126,147,158,.05));
  box-shadow:0 0 0 1px rgba(126,147,158,.4);
}
.peek-body{margin:0;color:var(--sand);font-size:15px;line-height:1.55}
.peek-body b{color:var(--bone)}

/* rail */
.rail{
  width:264px;flex:0 0 auto;border-left:1px solid var(--rock-3);background:var(--rock-1);
  display:flex;flex-direction:column;min-height:0;
}
.crew-live{padding:9px;gap:6px;overflow-y:auto;flex:0 0 auto;max-height:52%}
.crew-live li{padding:7px 9px;gap:8px;font-size:13.5px;flex-wrap:wrap}
.crew-live li.active{border-color:var(--lamp);box-shadow:0 0 16px rgba(255,190,61,.2) inset}
.crew-live li.pickable{cursor:pointer;border-color:var(--ore)}
.crew-live li.pickable:hover{background:var(--rock-3)}
.tools{display:flex;gap:4px;flex:0 0 auto}
.tools svg{width:17px;height:17px;color:var(--ore)}
.tools .bad{color:var(--rust);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.gold-chip{font-family:var(--f-mono);font-size:12.5px;color:var(--lamp);white-space:nowrap}
.gold-chip svg{width:13px;height:13px;vertical-align:-2px;margin-right:2px}

.log{
  flex:1;overflow-y:auto;padding:10px 12px;border-top:1px solid var(--rock-3);
  font-size:13px;color:var(--mute);min-height:0;
}
.log p{margin:0 0 6px}
.log p.hi{color:var(--sand)}

/* tray */
.tray{
  flex:0 0 auto;background:var(--rock-0);border-top:1px solid var(--rock-3);
  padding:8px 12px calc(10px + env(safe-area-inset-bottom));
}
.tray-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.role{
  display:flex;align-items:center;gap:7px;font-family:var(--f-display);
  letter-spacing:.14em;text-transform:uppercase;font-size:13px;flex:0 0 auto;
}
.role svg{width:19px;height:19px}
.role.digger{color:var(--ore)}
.role.saboteur{color:var(--rust)}
.prompt{flex:1;font-size:13.5px;color:var(--mute);min-width:120px}
.prompt.go{color:var(--lamp)}
.tray-btns{display:flex;gap:6px;flex:0 0 auto}

.hand{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.card{
  flex:0 0 auto;width:82px;height:110px;border-radius:4px;position:relative;cursor:pointer;
  background:var(--rock-2);border:1px solid var(--rock-4);overflow:hidden;
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.card:hover{transform:translateY(-5px);border-color:var(--lamp-dim)}
.card.sel{border-color:var(--lamp);box-shadow:0 0 0 2px var(--lamp),0 0 24px rgba(255,190,61,.4);transform:translateY(-8px)}
.card.dud{opacity:.42;cursor:not-allowed}
.card.dud:hover{transform:none}
.card svg.face{width:100%;height:100%;display:block}
.card .cap{
  position:absolute;left:0;right:0;bottom:0;padding:3px 4px;
  background:linear-gradient(transparent,rgba(6,10,12,.95) 55%);
  font-family:var(--f-display);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;color:var(--sand);line-height:1.15;
}
.card .rotmark{
  position:absolute;right:3px;top:3px;width:15px;height:15px;border-radius:50%;
  background:var(--lamp);color:#20160a;font-size:10px;font-weight:700;
  display:grid;place-items:center;font-family:var(--f-mono);
}
.act-face{display:grid;place-items:center;height:100%;padding-bottom:14px}
.act-face svg{width:44px;height:44px}
.act-break{color:var(--rust)}
.act-fix{color:var(--ore)}
.act-tool{color:var(--sand)}
.slash{position:absolute;inset:0;pointer-events:none}
.slash line{stroke:var(--rust);stroke-width:3.5;stroke-linecap:round}

/* ── overlays ────────────────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(4,8,10,.86);z-index:50;
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px);
}
.sheet{
  background:var(--rock-2);border:1px solid var(--edge);border-radius:5px;
  padding:26px;width:min(560px,100%);box-shadow:0 24px 70px rgba(0,0,0,.65);
}
.sheet-scroll{max-height:84vh;overflow-y:auto}
.sheet h3{font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 14px;font-size:22px;color:var(--lamp)}
.sheet h4{font-family:var(--f-display);letter-spacing:.16em;text-transform:uppercase;
  font-size:13px;color:var(--sand);margin:20px 0 6px}
.sheet ul{padding-left:19px;margin:8px 0}
.sheet li{margin-bottom:7px}
.sheet .btn{margin-top:18px}
.result-row{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:3px;
  background:var(--rock-1);border:1px solid var(--rock-3);margin-bottom:6px;
}
.result-row.win{border-color:var(--lamp)}
.result-row .nm{flex:1}
.result-row .rl{font-family:var(--f-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.rl.digger{color:var(--ore)}
.rl.saboteur{color:var(--rust)}
.goal-strip{display:flex;gap:10px;justify-content:center;margin:14px 0}
.goal-strip .gc{width:56px;height:70px;border-radius:3px;overflow:hidden;border:1px solid var(--rock-4)}
.tool-pick{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

.toast{
  position:fixed;left:50%;bottom:calc(126px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;
  background:var(--rust);color:#fff;padding:9px 16px;border-radius:3px;
  font-size:14px;max-width:88vw;text-align:center;box-shadow:0 8px 26px rgba(0,0,0,.5);
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:820px){
  .rail{
    position:absolute;right:0;top:0;bottom:0;width:min(300px,84vw);z-index:20;
    transform:translateX(100%);transition:transform .22s ease;
    box-shadow:-14px 0 40px rgba(0,0,0,.55);
  }
  .rail.open{transform:none}
  .crew-live{max-height:46%}
  .card{width:72px;height:97px}
  .tb-round{display:none}
}
@media (max-width:430px){
  .tb-deck::after{content:""}
  .prompt{font-size:12.5px}
  .card{width:64px;height:86px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}