:root{--bg:#0a0a0a;--panel:#131315;--panel2:#19191c;--ink:#ecebe7;--dim:#8a8c91;--line:rgba(255,255,255,.1);--up:#3ddc97;--down:#ff5a4f;
  --disp:'Big Shoulders Display','Arial Narrow',sans-serif;--ui:'Chakra Petch',system-ui,sans-serif;--gut:clamp(10px,1.6vw,18px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;padding:calc(var(--gut) + env(safe-area-inset-top)) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom));display:grid;gap:var(--gut);grid-template-rows:auto auto 1fr}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.disp{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
.btn{font-size:13px;font-weight:600;padding:0 16px;min-height:44px;border:1px solid rgba(255,255,255,.55);border-radius:6px;transition:background .15s,transform .15s}
.btn:hover{background:rgba(255,255,255,.1)}.btn:active{transform:scale(.97)}
.btn.solid{background:#e9e8e4;color:#0a0a0a;border-color:#e9e8e4}.btn.solid:hover{background:#fff}
.btn.ghost{border-color:var(--line);color:var(--dim)}
.btn:disabled{opacity:.35;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap}
.tags{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:600;color:#c4c5c2}
.tags span::before{content:'[ '}.tags span::after{content:' ]'}
.up{color:var(--up)}.down{color:var(--down)}

/* top */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.34em}
.px{--u:3px;display:block;width:calc(var(--u)*5);height:calc(var(--u)*7);background:linear-gradient(#fff,#fff) 0 0/calc(var(--u)*4) var(--u) no-repeat,linear-gradient(#fff,#fff) 0 100%/calc(var(--u)*4) var(--u) no-repeat,linear-gradient(#fff,#fff) 0 0/var(--u) 100% no-repeat,linear-gradient(#fff,#fff) 100% 50%/var(--u) calc(var(--u)*5) no-repeat}
.ctl{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 4px 4px 14px}
.who{font-size:13px;font-weight:600}
.ctl .btn{min-height:44px}
body.you .ctl{border-color:#ffc83d}body.you .who{color:#ffc83d}
.eq{justify-self:end;text-align:right;display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:baseline}
.eq small{grid-column:1/-1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.eq b{font-family:var(--disp);font-weight:500;font-size:26px}
.eq em{font-style:normal;font-size:12px;font-weight:600}

/* crew strip */
.crew{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dot{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;min-width:0}
.dot img{width:44px;height:44px;border-radius:8px;object-fit:cover;display:block}
.dot b{font-size:13px;display:block}
.dot span{font-size:11.5px;color:#b3b4b1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot.busy{border-color:var(--c)}

/* desk */
.desk{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(280px,380px);gap:var(--gut);min-height:0;align-items:start}
.plan{display:grid;gap:14px}
.plan h2{font-size:24px}
.styles{display:grid;gap:8px}
.style{text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel2);display:grid;gap:2px;min-height:44px}
.style b{font-size:14px}.style span{font-size:12px;color:#a9aaa7}
.style.on{border-color:#e9e8e4;box-shadow:inset 0 0 0 1px #e9e8e4}
.fields{display:grid;gap:8px}
.fields label{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#c4c5c2}
.fields span{color:var(--dim);font-size:12px}
.fields input{width:84px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:9px 10px;text-align:right;font-weight:600;margin-right:4px}
.rules{list-style:none;display:grid;gap:5px;font-size:12.5px;color:#b3b4b1;border-top:1px solid var(--line);padding-top:12px}
.rules b{color:var(--ink);font-weight:600}
.plan .row .solid{flex:1}

.coin{display:grid;gap:12px}
.coin-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.coin-h h2{font-size:34px;margin-bottom:6px;word-break:break-all}
.coin-r{text-align:right;display:grid;gap:2px}
.coin-r b{font-family:var(--disp);font-weight:500;font-size:30px}
.coin-r small{font-size:12px;color:var(--dim);font-weight:600}
.chart{position:relative;height:clamp(220px,38vh,380px);background:#0d0d0f;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.chart canvas{position:absolute;inset:0;width:100%;height:100%}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:var(--dim);font-size:13px}
.hands[hidden],.empty[hidden]{display:none}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs button{font-size:12px;font-weight:600;padding:0 12px;min-height:40px;color:var(--dim);border-bottom:2px solid transparent}
.tabs button.on{color:var(--ink);border-color:var(--ink)}
.tabs i{font-style:normal;opacity:.7;margin-left:4px}
.list{list-style:none;display:grid;gap:6px}
.list li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;cursor:pointer;min-height:44px}
.list li.on{border-color:rgba(255,255,255,.55)}
.list li small{color:var(--dim);font-size:11.5px}
.list li b{font-weight:600}
.list .none{cursor:default;color:var(--dim);grid-template-columns:1fr;background:none;border-style:dashed}

.logc{display:grid;grid-template-rows:auto 1fr;gap:10px;max-height:calc(100dvh - 190px);min-height:320px}
.log-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.log-h h2{font-size:24px}.log-h span{font-size:11px;color:var(--dim);font-weight:600}
.log{list-style:none;display:flex;flex-direction:column-reverse;gap:8px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.log li{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:13px;line-height:1.4}
.log img{width:30px;height:30px;border-radius:6px;object-fit:cover}
.log .me{width:30px;height:30px;border-radius:6px;background:#ffc83d;color:#0a0a0a;display:grid;place-items:center;font-weight:700;font-size:11px}
.log b{font-weight:600;margin-right:6px}.log time{font-size:10.5px;color:var(--dim)}
.log p{color:#c9cac7;overflow-wrap:anywhere}
.log li.warn p{color:#ffc83d}

@media (max-width:1080px){
  .desk{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .logc{grid-column:1/-1;max-height:520px}
}
@media (max-width:760px){
  .top{grid-template-columns:auto 1fr;row-gap:10px}
  .brand span{display:none}
  .ctl{grid-column:1/-1;grid-row:2;justify-content:space-between}
  .crew{grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);grid-template-columns:none;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .desk{grid-template-columns:minmax(0,1fr)}
  .coin{order:-1}
  .coin-h h2{font-size:28px}.coin-r b{font-size:26px}
  .logc{max-height:460px}
}
#take[hidden]{display:none}

/* watch-only desk: the crew runs on its own and nothing is clickable */
body.view .plan .row,body.view .style:not(.on),body.view #cTags a{display:none}
body.view .style.on{box-shadow:none;border-color:var(--line)}
body.view .fields input{background:none;border-color:transparent;padding-right:0}
body.view .list li,body.view .tabs button,body.view .style{cursor:default}
body.view .ctl{padding:10px 14px}
body.view{user-select:none;-webkit-user-select:none}