/* ============================================================================
   The game shell's look (platform/client/shell.js lists the parts): the same
   layout and components in every game. A game only sets these tokens (in its
   base.css, on :root) to dress them in its palette and type:

     --cp-font, --cp-font-display   body text, titles and big buttons
     --cp-scale                     multiplies every size (a UI scale)
     --cp-surface, --cp-surface-2   sheets and panels; chips, inputs, rows
     --cp-text, --cp-muted, --cp-line
     --cp-accent, --cp-accent-text  the main button
     --cp-on, --cp-on-text          a selected tab or chip
     --cp-good, --cp-bad, --cp-focus
     --cp-border                    border width of sheets, buttons, chips
     --cp-radius, --cp-shadow       corners; the drop shadow of raised parts
     --cp-caps, --cp-tracking       text-transform and letter-spacing of
                                    buttons and labels
     --cp-backdrop                  behind an open window
     --cp-side-w                    width of the side column

   Page layout (every game):

     <div class="cp-app">
       <header class="cp-bar">...</header>
       <main class="cp-table">...the game...</main>
       <aside class="cp-side">[the game's side bits] scoreboard, journal</aside>
     </div>
   ============================================================================ */
:root{
  --cp-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cp-font-display:var(--cp-font);
  --cp-scale:1;
  --cp-surface:#1b1b20;
  --cp-surface-2:#24242b;
  --cp-text:#ececef;
  --cp-muted:#9a9aa4;
  --cp-line:#34343c;
  --cp-accent:#c0392b;
  --cp-accent-text:#fff;
  --cp-on:#ececef;
  --cp-on-text:#1b1b20;
  --cp-good:#3c9a5f;
  --cp-bad:#d0463b;
  --cp-focus:#f2b705;
  --cp-border:1px;
  --cp-radius:12px;
  --cp-shadow:none;
  --cp-caps:none;
  --cp-tracking:normal;
  --cp-backdrop:rgba(0,0,0,.55);
  --cp-side-w:300px;
}

/* ---------- Layout ---------- */
.cp-app{
  display:grid;gap:10px;
  grid-template-columns:minmax(0,1fr) var(--cp-side-w);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"bar bar" "table side";
  height:100dvh;max-width:calc(1600px * var(--cp-scale));margin:0 auto;padding:10px 12px 12px;
  font-family:var(--cp-font);color:var(--cp-text);
}
.cp-bar{grid-area:bar}
.cp-table{grid-area:table;position:relative;min-width:0;min-height:0}
.cp-side{grid-area:side;display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
@media (max-width:980px){
  .cp-app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
    grid-template-areas:"bar" "table" "side";height:auto;min-height:100dvh}
  .cp-table{min-height:62dvh}
  .cp-side .cp-journal{max-height:200px}
}

/* ---------- Top bar ---------- */
.cp-bar{position:relative;z-index:25;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.cp-bar-game{min-width:0}
.cp-bar-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.cp-bar-status,.cp-bar-net{
  font-size:calc(12.5px * var(--cp-scale));font-weight:700;padding:5px 12px;white-space:nowrap;
  border-radius:999px;background:var(--cp-surface);color:var(--cp-text);
  border:var(--cp-border) solid var(--cp-line);box-shadow:var(--cp-shadow);
  text-transform:var(--cp-caps);letter-spacing:var(--cp-tracking);
}
.cp-bar-net.warn{border-color:var(--cp-focus)}
.cp-bar-net.bad{border-color:var(--cp-bad);color:var(--cp-bad)}
@media (max-width:560px){
  .cp-bar{gap:6px}
  .cp-bar-btn{padding:5px 8px;font-size:calc(11.5px * var(--cp-scale))}
}

/* ---------- Buttons, chips, tabs, fields ---------- */
.cp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  background:var(--cp-surface);color:var(--cp-text);text-decoration:none;
  border:var(--cp-border) solid var(--cp-line);border-radius:calc(var(--cp-radius) * .8);
  padding:7px 14px;cursor:pointer;font:inherit;font-weight:700;font-size:calc(13.5px * var(--cp-scale));
  text-transform:var(--cp-caps);letter-spacing:var(--cp-tracking);
  box-shadow:var(--cp-shadow);transition:transform .08s,box-shadow .08s,filter .15s;
}
.cp-btn:hover:not(:disabled){filter:brightness(1.08)}
.cp-btn:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.cp-btn:disabled{opacity:.5;cursor:not-allowed}
.cp-btn.cp-primary{background:var(--cp-accent);color:var(--cp-accent-text);border-color:var(--cp-accent)}
.cp-btn.cp-small{padding:3px 9px;font-size:calc(12px * var(--cp-scale))}
.cp-btn:focus-visible,.cp-chip:focus-visible,.cp-mode:focus-visible,.cp-input:focus-visible{
  outline:3px solid var(--cp-focus);outline-offset:2px}

.cp-modes{display:flex;gap:4px;padding:4px;border-radius:var(--cp-radius);
  background:var(--cp-surface-2);border:var(--cp-border) solid var(--cp-line)}
.cp-mode{flex:1;border:0;background:none;color:var(--cp-muted);cursor:pointer;padding:9px;
  border-radius:calc(var(--cp-radius) * .75);font-weight:700;font-size:calc(13.5px * var(--cp-scale));
  text-transform:var(--cp-caps);letter-spacing:var(--cp-tracking)}
.cp-mode.on{background:var(--cp-on);color:var(--cp-on-text)}

.cp-groups{display:flex;flex-direction:column;gap:14px}
.cp-group{display:flex;flex-direction:column;gap:6px}
.cp-group-label{font-weight:700;font-size:calc(13px * var(--cp-scale));
  text-transform:var(--cp-caps);letter-spacing:var(--cp-tracking)}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px}
.cp-chip{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;
  padding:6px 12px;cursor:pointer;font:inherit;font-weight:700;font-size:calc(13.5px * var(--cp-scale));
  background:var(--cp-surface-2);color:var(--cp-text);
  border:var(--cp-border) solid var(--cp-line);border-radius:calc(var(--cp-radius) * .8);box-shadow:var(--cp-shadow);
}
.cp-chip.on{background:var(--cp-on);color:var(--cp-on-text);border-color:var(--cp-on)}
.cp-chip:disabled{opacity:.45;cursor:default}
.cp-chip-sub{font-weight:400;font-size:.75em;opacity:.8}
.cp-input{
  width:100%;padding:9px 12px;font:inherit;font-size:calc(14px * var(--cp-scale));
  background:var(--cp-surface-2);color:var(--cp-text);
  border:var(--cp-border) solid var(--cp-line);border-radius:calc(var(--cp-radius) * .8);
}
.cp-code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:700}
.cp-hint{margin:0;color:var(--cp-muted);font-size:calc(12px * var(--cp-scale));line-height:1.4}
.cp-note{margin:0;padding:9px 12px;border-radius:calc(var(--cp-radius) * .8);
  border:var(--cp-border) dashed var(--cp-line);font-size:calc(13px * var(--cp-scale))}
.cp-status{margin:0;min-height:1.3em;font-weight:700;font-size:calc(13px * var(--cp-scale))}
.cp-status.err{color:var(--cp-bad)}
.cp-status.ok{color:var(--cp-good)}
.cp-actions{display:flex;gap:10px;align-items:stretch;justify-content:space-between;flex-wrap:wrap}
.cp-actions .cp-primary{flex:1 1 auto}
.cp-tag{font-size:calc(11px * var(--cp-scale));padding:1px 8px;border-radius:999px;
  border:var(--cp-border) solid var(--cp-line);color:var(--cp-muted);white-space:nowrap}
.cp-tag.off{color:var(--cp-bad);border-color:var(--cp-bad)}

/* ---------- Windows ---------- */
.cp-overlay{
  position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;
  padding:max(16px,4vh) 16px 16px;overflow:auto;background:var(--cp-backdrop);
  font-family:var(--cp-font);color:var(--cp-text);
}
.cp-overlay.show{display:flex}
.cp-overlay.stack{z-index:70}
.cp-sheet{
  position:relative;width:min(calc(480px * var(--cp-scale)),100%);margin:auto;
  display:flex;flex-direction:column;gap:14px;padding:22px;
  background:var(--cp-surface);color:var(--cp-text);
  border:var(--cp-border) solid var(--cp-line);border-radius:calc(var(--cp-radius) * 1.4);
  box-shadow:var(--cp-shadow);
}
.cp-sheet h2,.cp-sheet h3{margin:0;font-family:var(--cp-font-display);font-weight:400}
.cp-sheet h2{font-size:calc(26px * var(--cp-scale))}
.cp-sheet h3{font-size:calc(17px * var(--cp-scale))}

/* ---------- Start menu ---------- */
.cp-setup-hero{display:flex;flex-direction:column;gap:6px}
.cp-start{display:flex;flex-direction:column;gap:14px}
.cp-user{margin:0;line-height:1.4;overflow-wrap:anywhere;font-size:calc(14px * var(--cp-scale))}
.cp-user-label{color:var(--cp-muted)}
.cp-user-name{font-weight:700}
.cp-user-more{font-size:.85em;color:var(--cp-muted)}
.cp-user-more a{color:inherit;font-weight:700;text-decoration:underline}
.cp-pane{display:flex;flex-direction:column;gap:10px}

/* ---------- People: room players, standings ---------- */
.cp-people,.cp-standings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cp-people li,.cp-standings li{
  display:flex;align-items:center;gap:8px;padding:6px 10px;min-width:0;
  background:var(--cp-surface-2);border:var(--cp-border) solid var(--cp-line);border-radius:calc(var(--cp-radius) * .8);
}
.cp-people li.off{opacity:.6}
.cp-people li.bot{color:var(--cp-muted);font-style:italic}
.cp-person,.cp-st-name{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:700}
.cp-person em,.cp-st-name em,.cp-score-name em{font-style:normal;font-weight:400;color:var(--cp-muted)}
.cp-st-name small{display:block;font-weight:400;color:var(--cp-muted);font-size:.85em}
.cp-st-icon{flex:none;width:28px;height:28px;display:inline-flex}
.cp-st-icon svg{width:100%;height:100%}
.cp-st-pos{flex:none;width:1.4em;color:var(--cp-muted);font-weight:700}
.cp-st-gain{color:var(--cp-good);font-weight:700}
.cp-st-pts{font-weight:700;white-space:nowrap}
.cp-standings li.winner{border-color:var(--cp-good);box-shadow:inset 4px 0 0 var(--cp-good)}
.cp-standings li.me .cp-st-name{text-decoration:underline;text-underline-offset:3px}

/* ---------- Room ---------- */
.cp-room-code{letter-spacing:.2em;font-family:var(--cp-font)}
.cp-room-link{display:flex;gap:8px}
.cp-room-link .cp-input{flex:1;min-width:0;font-size:calc(12px * var(--cp-scale))}

/* ---------- Result ---------- */
.cp-result{text-align:left}
.cp-result-art{height:96px;display:flex;justify-content:center}
.cp-result-art svg{height:100%;width:auto}
.cp-result-title{text-align:center}
.cp-result-text{margin:-6px 0 0;text-align:center;color:var(--cp-muted)}
.cp-result-goal{margin:0;text-align:center;font-weight:700;font-size:calc(13px * var(--cp-scale));
  text-transform:var(--cp-caps);letter-spacing:var(--cp-tracking)}
.cp-overlay[data-mood="win"] .cp-result-title{color:var(--cp-good)}

/* ---------- Rules ---------- */
.cp-rules{width:min(calc(620px * var(--cp-scale)),100%)}
.cp-rules-body{line-height:1.55;font-size:calc(14px * var(--cp-scale))}
.cp-rules-body ul{margin:0;padding-left:1.2em}
.cp-rules-body li{margin-bottom:6px}

/* ---------- Side panel: scoreboard and journal ---------- */
.cp-scoreboard,.cp-journal,.cp-side-box{
  background:var(--cp-surface);color:var(--cp-text);
  border:var(--cp-border) solid var(--cp-line);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow);
}
.cp-scoreboard{padding:10px 12px;flex-shrink:0}
.cp-score-head,.cp-journal-title{
  margin:0 0 8px;font-family:var(--cp-font);font-weight:700;font-size:calc(12.5px * var(--cp-scale));
  color:var(--cp-muted);text-transform:var(--cp-caps);letter-spacing:var(--cp-tracking);
}
.cp-score-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cp-score-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 8px;align-items:baseline;
  font-size:calc(13px * var(--cp-scale))}
.cp-score-list li.me .cp-score-name{font-weight:700}
.cp-score-list li.current .cp-score-name::before{content:"▸ ";color:var(--cp-accent)}
.cp-score-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-score-pts{font-weight:700}
.cp-score-gain{color:var(--cp-good);font-weight:700;font-size:.9em}
.cp-score-bar{grid-column:1 / -1;height:4px;border-radius:4px;background:var(--cp-surface-2);overflow:hidden}
.cp-score-bar i{display:block;height:100%;width:0;background:var(--cp-accent);transition:width .4s}
.cp-score-list li.lead .cp-score-bar i{background:var(--cp-good)}

.cp-journal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:10px 0 6px}
.cp-journal-title{padding:0 12px}
.cp-journal-list{list-style:none;margin:0;padding:0 12px;overflow:auto;flex:1;min-height:0;
  font-size:calc(12.5px * var(--cp-scale));line-height:1.45}
.cp-journal-list li{padding:3px 0;border-bottom:1px solid var(--cp-line)}
.cp-journal-list li:last-child{border-bottom:0;font-weight:700}
.cp-j-head{padding-top:8px !important;font-family:var(--cp-font-display);color:var(--cp-accent)}
.cp-j-turn{color:var(--cp-text)}
.cp-j-good{color:var(--cp-good)}
.cp-j-bad{color:var(--cp-bad)}
.cp-j-win{color:var(--cp-good);font-weight:700}
.cp-j-sys{color:var(--cp-muted)}

@media (prefers-reduced-motion: reduce){
  .cp-btn,.cp-score-bar i{transition:none}
}