/* ============================================================
   TMS — one stylesheet. Mobile first, dark, warm.
   The look is a lamp over a table, not a spotlight on a stage.
   ============================================================ */

:root{
  --brand:#C0632F; --brand-rgb:192,99,47; --brand-dark:#6A3619; --brand-lite:#E8A87C;
  --bg:#14110F; --panel:#1E1A17; --panel2:#29231F; --panel3:#342C26;
  --text:#F0E9E3; --muted:#9A8F86; --line:#3A322C;
  --ok:#5FA463; --bad:#C4574F; --gold:#D9A441;
  --radius:14px;
  /* The five columns. Muted enough to sit under the brand, distinct enough to
     read as five different questions at a glance. */
  --cS:#5B7C99; --cT:#6E9B6B; --cO:#8C7BA6; --cR:#B5705A; --cY:#C2A24C;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y:none;
}
#app{min-height:100dvh}
.wrap{max-width:560px;margin:0 auto;padding:14px 12px 24px;display:flex;flex-direction:column;gap:12px}
.center{min-height:80dvh;display:flex;flex-direction:column;justify-content:center}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:11.5px}
.spacer{flex:1}
.row{display:flex;gap:8px;align-items:center}
.between{display:flex;gap:8px;align-items:center;justify-content:space-between}
.hidden{display:none !important}

/* ---- Type ---------------------------------------------------------- */
.brandmark{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.brandmark em{font-style:normal;color:var(--brand)}
.tagline{color:var(--muted);font-size:14px}
h2{font-size:17px;margin:0}
h3{font-size:14px;margin:0;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px}

/* ---- Buttons ------------------------------------------------------- */
.btn{
  appearance:none;border:0;border-radius:var(--radius);background:var(--brand);color:#fff;
  font:600 16px/1 inherit;padding:15px 16px;width:100%;cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;cursor:default}
.btn.secondary{background:var(--panel2);color:var(--text)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.btn.small{padding:10px 12px;font-size:14px;width:auto}
.btn.tiny{padding:7px 10px;font-size:12.5px;width:auto;border-radius:9px}
.btn.wide{width:100%}
.btnrow{display:flex;gap:8px}
.btnrow .btn{flex:1}

/* ---- Panels & fields ----------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.panel.tight{padding:10px 12px}
label.fld{display:block;font-size:13px;color:var(--muted);margin:0 0 5px}
input.txt{
  width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font:16px inherit;
}
input.txt:focus{outline:2px solid var(--brand);outline-offset:0;border-color:transparent}
input.code{text-transform:uppercase;letter-spacing:3px;font-weight:700;text-align:center;font-size:20px}
a.link{color:var(--brand-lite);text-decoration:none;font-size:14px;cursor:pointer}
.err{background:rgba(196,87,79,.14);border:1px solid var(--bad);color:#F0BDB8;
     padding:10px 12px;border-radius:11px;font-size:13.5px}

/* ---- Join code ----------------------------------------------------- */
.codebox{background:var(--panel2);border:1px dashed var(--line);border-radius:var(--radius);
         padding:14px;text-align:center}
.codebox .c{font-size:32px;font-weight:800;letter-spacing:6px;color:var(--brand-lite)}

/* ---- Player chips -------------------------------------------------- */
.players{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.players::-webkit-scrollbar{height:4px}
.players::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:13px;white-space:nowrap;
}
.chip.me{border-color:var(--brand)}
.chip.telling{border-color:var(--gold);background:rgba(217,164,65,.12)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 auto}
.chip .dot.on{background:var(--ok)}
.chip .sc{color:var(--brand-lite);font-weight:700}
.chip .ft{color:var(--gold)}
.chip .done{color:var(--muted);font-size:11px}
.chip .x{color:var(--muted);cursor:pointer;padding:0 2px;font-size:15px}

/* ---- The board ----------------------------------------------------- */
.boardwrap{display:flex;flex-direction:column;gap:4px}
.colhead{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.colhead div{text-align:center;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.colhead div b{display:block;font-size:14px;line-height:1.1}
.colhead .h0 b{color:var(--cS)} .colhead .h1 b{color:var(--cT)} .colhead .h2 b{color:var(--cO)}
.colhead .h3 b{color:var(--cR)} .colhead .h4 b{color:var(--cY)}

.board{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.cell{
  position:relative;min-height:66px;border-radius:9px;padding:5px 3px;
  background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(7.6px,2.25vw,11px);line-height:1.2;
  color:var(--text);cursor:default;overflow:hidden;word-break:break-word;hyphens:auto;
  transition:background .12s,border-color .12s;
}
.cell.c0{border-top:2px solid var(--cS)} .cell.c1{border-top:2px solid var(--cT)}
.cell.c2{border-top:2px solid var(--cO)} .cell.c3{border-top:2px solid var(--cR)}
.cell.c4{border-top:2px solid var(--cY)}

/* A heavy tile — the ones the Veto exists for. */
.cell.heavy::after{
  content:"";position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;
  background:var(--bad);opacity:.75;
}
.cell.rare{font-style:italic}

.cell.marked{background:rgba(var(--brand-rgb),.9);border-color:var(--brand);color:#fff;font-weight:600}
.cell.inline{box-shadow:inset 0 0 0 2px var(--gold)}
.cell.tappable{cursor:pointer}
.cell.tappable:active{transform:scale(.97)}
.cell.sel{background:var(--panel3);border-color:var(--brand-lite);box-shadow:0 0 0 2px rgba(var(--brand-rgb),.5)}
.cell.called{box-shadow:inset 0 0 0 2px var(--brand-lite)}
.cell.landed{background:rgba(95,164,99,.25);border-color:var(--ok)}
.cell .pin{position:absolute;bottom:2px;right:3px;font-size:9px;opacity:.85}

/* Someone else's board, viewed */
.board.mini .cell{min-height:52px;font-size:clamp(6.6px,1.95vw,9.5px)}

/* ---- Board switcher ------------------------------------------------ */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font:13px inherit;cursor:pointer;color:var(--muted);white-space:nowrap;appearance:none;
}
.tab.on{background:var(--panel3);color:var(--text);border-color:var(--brand)}

/* ---- The prompt ---------------------------------------------------- */
.prompt{
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);padding:16px 15px;
}
.prompt .lbl{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--brand-lite);font-weight:700}
.prompt .q{font-size:19px;font-weight:650;line-height:1.3;margin-top:5px}
.prompt .meta{color:var(--muted);font-size:12px;margin-top:7px}

/* ---- Status banner ------------------------------------------------- */
.banner{border-radius:12px;padding:11px 13px;font-size:14px;background:var(--panel2);border:1px solid var(--line)}
.banner.act{border-color:var(--brand);background:rgba(var(--brand-rgb),.13)}
.banner.warn{border-color:var(--gold);background:rgba(217,164,65,.12)}
.banner b{color:var(--brand-lite)}

/* ---- The Call bar -------------------------------------------------- */
.callbar{position:sticky;bottom:0;background:var(--panel);border:1px solid var(--line);
         border-radius:var(--radius);padding:11px 12px;display:flex;flex-direction:column;gap:9px;
         box-shadow:0 -6px 20px rgba(0,0,0,.35);z-index:5}
.deal{font-size:13px;text-align:center}
.deal.safe{color:var(--muted)}
.deal.risk{color:var(--gold);font-weight:650}
.deal.perfect{color:var(--brand-lite);font-weight:750}
.chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.tchip{background:var(--panel3);border-radius:8px;padding:4px 8px;font-size:11.5px;max-width:100%}

/* ---- Catch / Steal ------------------------------------------------- */
.claimrow{display:flex;gap:7px;align-items:center;justify-content:space-between;
          background:var(--panel2);border-radius:10px;padding:9px 11px;font-size:13px}
.claimrow.upheld{border-left:3px solid var(--bad)}
.claimrow.rejected{border-left:3px solid var(--ok)}
.claimrow.open{border-left:3px solid var(--gold)}
.votes{font-size:12px;color:var(--muted);white-space:nowrap}

/* ---- Tally --------------------------------------------------------- */
.scoretab{width:100%;border-collapse:collapse;font-size:14px}
.scoretab th{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
             text-align:right;padding:0 0 7px;font-weight:700}
.scoretab th:first-child{text-align:left}
.scoretab td{padding:8px 0;border-top:1px solid var(--line);text-align:right}
.scoretab td:first-child{text-align:left;font-weight:600}
.scoretab td.pts{color:var(--brand-lite);font-weight:750}
.scoretab tr.win td{color:var(--gold)}

.stile{background:var(--panel2);border-radius:11px;padding:11px;text-align:center;flex:1}
.stile .sv{font-size:22px;font-weight:800;color:var(--brand-lite)}
.stile .sl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}

/* ---- Toast, modal -------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(14px);
       background:var(--panel3);color:var(--text);padding:11px 16px;border-radius:11px;
       font-size:14px;opacity:0;pointer-events:none;transition:.22s;z-index:60;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(3px);
             display:flex;align-items:center;justify-content:center;padding:22px;z-index:70;animation:scrimin .16s}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;
       max-width:340px;width:100%;animation:modalin .18s}
.modal .mi{width:44px;height:44px;border-radius:50%;background:rgba(var(--brand-rgb),.2);
           display:flex;align-items:center;justify-content:center;font-size:21px;margin:0 auto 11px}
.modal h3{color:var(--text);text-transform:none;letter-spacing:0;font-size:17px;text-align:center;margin-bottom:7px}
.modal p{color:var(--muted);font-size:14px;text-align:center;margin:0 0 16px}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
@keyframes modalin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.pulse{animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ---- Chat (lives on <body>, outside #app, so a repaint never eats a
        half-typed message) ------------------------------------------- */
body.chat-on .wrap{padding-bottom:78px}
body.chat-on .toast{bottom:86px}
.chatroot{position:fixed;left:0;right:0;bottom:0;z-index:50;
          padding-bottom:env(safe-area-inset-bottom)}
.chatbar{background:var(--panel);border-top:1px solid var(--line);padding:11px 13px;
         display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer}
.chatbar .lbl{color:var(--muted);font-size:14px}
.chatbadge{background:var(--brand);color:#fff;border-radius:999px;min-width:19px;height:19px;
           font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chatpanel{display:none;background:var(--panel);border-top:1px solid var(--line);height:56dvh;
           flex-direction:column}
.chatroot.open .chatpanel{display:flex}
.chatroot.open .chatbar{border-bottom:1px solid var(--line)}
.chatlist{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:7px}
.chatempty{color:var(--muted);text-align:center;font-size:13px;padding:22px}
.msg{max-width:82%;padding:8px 11px;border-radius:13px;font-size:14px;position:relative;word-break:break-word}
.msg .who{font-size:11px;color:var(--muted);margin-bottom:2px}
.msg.them{background:var(--panel2);align-self:flex-start}
.msg.me{background:var(--brand-dark);align-self:flex-end}
.msg.sys{background:transparent;color:var(--muted);font-size:12.5px;align-self:center;
         text-align:center;max-width:96%;padding:3px 6px}
.likepill{position:absolute;bottom:-11px;background:var(--panel3);border:1px solid var(--line);
          border-radius:999px;padding:1px 6px;font-size:10.5px}
.msg.them .likepill{right:6px} .msg.me .likepill{left:6px}
.likepill.mine{border-color:var(--brand)}
.chatform{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chatform input{flex:1;padding:11px;border-radius:11px;border:1px solid var(--line);
                background:var(--panel2);color:var(--text);font:15px inherit}
.chatform button{background:var(--brand);color:#fff;border:0;border-radius:11px;padding:0 16px;
                 font:600 15px inherit;cursor:pointer}

/* ---- Setup dials --------------------------------------------------- */
.opts{display:flex;gap:7px}
.opt{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:11px;
     padding:11px 8px;text-align:center;cursor:pointer;font:13px inherit;color:var(--text);appearance:none}
.opt.sel{background:rgba(var(--brand-rgb),.18);border-color:var(--brand)}
.opt .t{font-weight:700;display:block}
.opt .d{font-size:10.5px;color:var(--muted);margin-top:2px;display:block}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;
        border-top:1px solid var(--line)}
.toggle:first-child{border-top:0}
.toggle .tt{font-size:14px}
.toggle .td{font-size:11.5px;color:var(--muted)}
.sw{flex:0 0 auto;width:46px;height:27px;border-radius:999px;background:var(--panel3);
    border:1px solid var(--line);position:relative;cursor:pointer;padding:0;appearance:none}
.sw i{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
      background:var(--muted);transition:.15s}
.sw.on{background:rgba(var(--brand-rgb),.35);border-color:var(--brand)}
.sw.on i{left:22px;background:var(--brand-lite)}

/* ---- Rules sheet --------------------------------------------------- */
.rules{font-size:13.5px;color:var(--muted);line-height:1.5}
.rules b{color:var(--text)}
.rules ul{margin:6px 0;padding-left:18px}
.rules li{margin:3px 0}