/* PARLOUR — the paged client's sheet. Cosy-industrial: dense, warm, one
   amber accent, 44px rows, system UI + mono for facts. A parlour at night by
   default; a cream parlour by day when the device asks for light. */
:root {
  color-scheme: dark light;
  --p-bg: #1a1613; --p-panel: #241f1b; --p-panel-hi: #2e2823;
  --p-ink: #f2ebe0; --p-dim: #a3978a; --p-line: #3a332c;
  --p-accent: #e0a458; --p-accent-soft: rgba(224,164,88,.16); --p-on-accent: #1f1408;
  --p-good: #7fbf7a; --p-bad: #e07a63;
  --p-row: 44px; --p-tabs: 58px; --p-head: 54px;
  --p-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --p-bg: #f4efe7; --p-panel: #fbf8f2; --p-panel-hi: #efe8dc;
    --p-ink: #2a241f; --p-dim: #6f665c; --p-line: #d9cfc0;
    --p-accent: #b4701e; --p-accent-soft: rgba(180,112,30,.14); --p-on-accent: #fff7ea;
    --p-good: #3f8a4c; --p-bad: #b8503b;
  }
}
.proom { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--p-bg); color: var(--p-ink); font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* the head bar — on every page */
.pbar { flex: 0 0 var(--p-head); display: flex; align-items: center; gap: 8px; padding: 0 8px; border-bottom: 1px solid var(--p-line); background: var(--p-panel); }
.pback { width: 40px; height: 40px; border-radius: 10px; font-size: 22px; line-height: 1; background: var(--p-panel-hi); border: 1px solid var(--p-line); color: var(--p-ink); }
.pback.ghost { font-size: 16px; }
.ptitles { flex: 1; min-width: 0; }
.ptitle { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead { font-family: var(--p-mono); font-size: 12px; color: var(--p-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead .pph { margin-right: 4px; }
.pclock.urgent { color: var(--p-bad); font-weight: 700; }
.plock { color: var(--p-good); }
.pover { color: var(--p-accent); }
.pyour { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--p-on-accent); background: var(--p-accent); padding: 6px 10px; border-radius: 999px; }

/* the body */
.pbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.pbody.act { padding: 0; gap: 0; overflow: hidden; }
.pfelt { position: relative; height: 100%; display: flex; flex-direction: column; }
.pfelt .stageroot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pdim { color: var(--p-dim); font-size: 12px; }
.plabel { font-family: var(--p-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-dim); padding: 4px 2px; }

/* lists */
.plist { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 4px 6px; }
.prow { display: flex; align-items: center; gap: 8px; min-height: var(--p-row); padding: 4px 6px; border-bottom: 1px solid var(--p-line); }
.prow:last-child { border-bottom: 0; }
.prow.current { background: var(--p-accent-soft); border-radius: 8px; }
.prlabel { flex: 0 1 auto; font-weight: 550; }
.prsub { flex: 1 1 auto; min-width: 0; color: var(--p-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prbadge { font-family: var(--p-mono); font-size: 12px; color: var(--p-dim); background: var(--p-panel-hi); padding: 2px 8px; border-radius: 999px; }
.pchev { color: var(--p-dim); }

/* tiles */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 4px 0; }
.ptile { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.ptile.you { border-color: var(--p-accent); }
.ptile.out { opacity: .55; }
.ptile.out .pname { text-decoration: line-through; }
.ptile.active { box-shadow: inset 0 0 0 1px var(--p-accent); }
.ptile.target { outline: 2px solid var(--p-accent); outline-offset: 1px; }
.ptile.picked { background: var(--p-accent-soft); }
.ptop { display: flex; align-items: center; gap: 8px; }
.ptop .avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid; flex: 0 0 auto; }
.pnames { flex: 1 1 auto; min-width: 0; }
.pname { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmark { color: var(--p-accent); }
.prole .pcard.mini { --cw: 34px; --ch: 45px; }
.pmeters { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.pmeters .meter { display: inline-flex; align-items: center; gap: 4px; }
.pmeters .pips { display: inline-flex; gap: 2px; }
.pmeters .pip { width: 7px; height: 7px; border-radius: 2px; background: var(--p-line); }
.pmeters .pip.on { background: var(--p-accent); }
.pidentity { display: flex; flex-wrap: wrap; gap: 4px; }
.pchipline { font-size: 12px; background: var(--p-panel-hi); border-radius: 999px; padding: 2px 8px; }
.pslot, .patt, .pcards { display: flex; flex-wrap: wrap; gap: 6px; }
.pslot .pcard.mini, .patt .pcard.mini { --cw: 40px; --ch: 53px; }
.pattc { position: relative; }
.pbadge { position: absolute; right: -4px; bottom: -4px; font-size: 10px; font-family: var(--p-mono); background: var(--p-panel-hi); border: 1px solid var(--p-line); border-radius: 999px; padding: 1px 5px; }
.ppiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ppile { font-family: var(--p-mono); font-size: 11px; color: var(--p-dim); background: var(--p-panel-hi); border-radius: 6px; padding: 3px 7px; }

/* the transcript */
.ptranscript { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.ptranscript.recent { flex: 0 0 auto; }
.pmark-row { font-family: var(--p-mono); font-size: 11px; color: var(--p-dim); text-align: center; padding: 8px 0 4px; letter-spacing: .06em; }
.prec { padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--p-line); }
.prec:last-child { border-bottom: 0; }
.prec.major { font-weight: 650; color: var(--p-accent); }
.prec.cont { padding-left: 18px; color: var(--p-dim); border-bottom: 0; }
.prec.cont::before { content: "↳ "; }
.psay { padding: 6px 0; display: flex; gap: 8px; align-items: baseline; }
.pby { font-weight: 700; flex: 0 0 auto; }
.pcomposer { display: flex; gap: 6px; position: sticky; bottom: 0; background: var(--p-bg); padding: 6px 0; }
.pinput { flex: 1 1 auto; min-height: var(--p-row); border-radius: 10px; border: 1px solid var(--p-line); background: var(--p-panel); color: var(--p-ink); padding: 0 12px; font: inherit; }
.psend { min-height: var(--p-row); padding: 0 16px; border-radius: 10px; background: var(--p-accent); color: var(--p-on-accent); font-weight: 700; border: 0; }

/* piles, cards, verbs, info, the table page */
.ppile-page, .pcard-page, .pinfo, .ptable, .pverbs { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pcards.ghosts { opacity: .5; }
.phero { display: flex; justify-content: center; padding: 8px 0; }
.prules { font-size: 14px; line-height: 1.45; }
.pverbs { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.pverb { min-height: var(--p-row); padding: 0 16px; border-radius: 10px; background: var(--p-accent); color: var(--p-on-accent); font-weight: 700; border: 0; font: inherit; font-weight: 700; }
.pobjective { font-weight: 650; }
.psummary { font-size: 13px; line-height: 1.45; }
.pchrome { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.pmkt { position: relative; }
.pmkt.buyable .pcard { outline: 2px solid var(--p-accent); }
.pmkt.claimed { opacity: .5; }
.pcost { position: absolute; right: -2px; top: -2px; font-family: var(--p-mono); font-size: 10px; background: var(--p-panel-hi); border-radius: 999px; padding: 1px 5px; }
.ptracks, .proster, .pdice { display: flex; flex-wrap: wrap; gap: 6px; }
.ptrack, .prosterc, .pdie { font-size: 12px; background: var(--p-panel-hi); border-radius: 999px; padding: 4px 10px; }
.prosterc.gone { opacity: .45; text-decoration: line-through; }
.pdie.picked { outline: 2px solid var(--p-accent); }

/* the tabs */
.ptabs { flex: 0 0 var(--p-tabs); display: flex; border-top: 1px solid var(--p-line); background: var(--p-panel); padding-bottom: env(safe-area-inset-bottom); }
.ptab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: var(--p-dim); font: inherit; font-size: 11px; position: relative; }
.ptab.on { color: var(--p-accent); }
.pticon { font-size: 20px; line-height: 1; }
.pdot { position: absolute; top: 8px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); }

/* ---------------------------------------------------------------- the ACT page */
/* a scrolling READING region above a fixed PHYSICAL STRIP (dice · hand · dock) */
.pbody.act { overflow: hidden; display: flex; flex-direction: column; padding: 0; gap: 0; }
.pact { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pact-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pact-strip { flex: 0 0 auto; border-top: 1px solid var(--p-line); background: var(--p-panel); padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
.pband { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 6px; }
.pband-row { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.pband.tiles .pband-row { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: minmax(96px, 1fr); }
.pband.plate .pband-row { justify-content: center; }
.pbt { flex: 0 0 auto; min-width: 96px; background: var(--p-panel-hi); border: 1px solid var(--p-line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; transition: outline-color .2s, box-shadow .2s, opacity .2s; }
.pband.plate .pbt { min-width: 60%; }
.pbt.out { opacity: .5; }
.pbt.active { box-shadow: inset 0 0 0 1px var(--p-accent); }
.pbt.picked { background: var(--p-accent-soft); }
.pbt-top { display: flex; align-items: center; gap: 6px; }
.pbt-top .avatar { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid; flex: 0 0 auto; }
.pbt-name { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbt-slot .pcard.mini { --cw: 30px; --ch: 40px; }
.pbt-slot { display: flex; gap: 4px; }
.pmore { min-width: 44px; border-radius: 10px; background: var(--p-panel-hi); border: 1px dashed var(--p-line); color: var(--p-dim); }

/* the flip card — one node, two faces */
.pflip { perspective: 600px; width: var(--cw, 84px); height: var(--ch, 112px); }
.pflip.mini { --cw: 30px; --ch: 40px; }
.pflip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--dur-flip, 500ms) var(--ease-pop, ease); }
.pflip.up .pflip-inner { transform: rotateY(180deg); }
.pflip-back, .pflip-front { position: absolute; inset: 0; backface-visibility: hidden; }
.pflip-front { transform: rotateY(180deg); }
.pflip .pcard { width: 100%; height: 100%; --cw: 100%; --ch: 100%; }

/* the table band */
.ptable-band { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.ptable-band.bare { padding: 0; border: 0; background: none; min-height: 1px; }
.pmarket { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.pmarket .pmkt .pcard.mini { --cw: 58px; --ch: 77px; }
.ptb-piles { display: flex; gap: 10px; flex-wrap: wrap; }
.ptb-pile { display: inline-flex; align-items: center; gap: 6px; }
.ptb-pile .pcard.mini { --cw: 34px; --ch: 45px; }

/* the rail */
.prail { background: var(--p-accent-soft); border: 1px solid var(--p-accent); border-radius: 12px; padding: 8px; }
.prail-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prail-label { font-family: var(--p-mono); font-size: 12px; color: var(--p-ink); width: 100%; }
.pchip { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--p-panel-hi); border: 1px solid var(--p-line); color: var(--p-ink); font: inherit; font-weight: 600; }
.pchip.picked { background: var(--p-accent); color: var(--p-on-accent); }
.pchip.stg { display: inline-flex; align-items: center; }
.palloc { display: flex; flex-direction: column; gap: 6px; }
.arow { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.arow.hot { color: var(--p-accent); }
.alabel { flex: 1 1 auto; }
.arow .step { width: 40px; height: 36px; border-radius: 8px; background: var(--p-panel-hi); border: 1px solid var(--p-line); color: var(--p-ink); font-size: 20px; font-weight: 700; line-height: 1; }
.aval { font-family: var(--p-mono); min-width: 24px; text-align: center; }

/* your plate */
.pyou { background: var(--p-panel); border: 1px solid var(--p-accent); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pyou-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pyou-name { font-weight: 700; }

/* the hand — the fan */
.phand { display: flex; gap: 0; padding: 12px 6px 4px; overflow-x: auto; min-height: 124px; align-items: flex-end; }
.phc { flex: 0 0 auto; margin-left: -22px; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .18s var(--ease-snap, ease); }
.phc:first-child { margin-left: 0; }
.phc .pcard { --cw: 84px; --ch: 112px; }
.phc.playable { transform: translateY(-6px); }
.phc.playable .pcard { outline: 2px solid var(--p-accent); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.phc.dragging { transition: none; opacity: .35; pointer-events: none; }
.phc.dragging.playable { transform: none; }

/* THE GHOST — the dragged card rides the finger above everything; it is
   pointer-transparent so the drop lands on what is beneath it */
/* (the machine sets its transform each frame — translate only; the card
   inside carries the lift, and shrinks to land over a lit landing) */
.pdrag-ghost { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; will-change: transform; filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); }
.pdrag-ghost .pcard { width: 100%; height: 100%; --cw: 100%; --ch: 100%; scale: 1.08; transition: scale .12s ease-out; border-radius: 8px; box-shadow: 0 0 0 3px var(--p-accent); }
.pdrag-ghost.over .pcard { scale: .82; }

/* LANDING ZONES — lit by the page model (:target? on a seat, :drop? on
   YOUR tile), never by the renderer: an accent ring and a breathing glow,
   unmistakable; the one the finger means says HERE (.over — the gesture's
   forgiving `landing-at`, a class on the node) */
@keyframes ppulse { 0%,100% { box-shadow: 0 0 0 2px var(--p-accent), 0 0 0 0 var(--p-accent-soft); } 50% { box-shadow: 0 0 0 2px var(--p-accent), 0 0 0 12px var(--p-accent-soft); } }
@keyframes pglow { 0%,100% { box-shadow: 0 0 0 2px var(--p-accent), 0 0 8px 1px var(--p-glow); } 50% { box-shadow: 0 0 0 2px var(--p-accent), 0 0 16px 4px var(--p-glow); } }
.pbt.target, .pyou.target { outline: none; cursor: pointer; border-color: var(--p-accent); background-image: linear-gradient(var(--p-accent-soft), var(--p-accent-soft)); animation: pglow 1.2s ease-in-out infinite; }
.pbt.picked, .pyou.picked { background: var(--p-accent-soft); box-shadow: 0 0 0 2px var(--p-accent); }
/* HERE — the lit landing under the finger: bigger, brighter, solid */
.pbt.target.over, .pyou.target.over { scale: 1.06; z-index: 3; animation: none; background-image: linear-gradient(var(--p-glow), var(--p-glow));
                                      box-shadow: 0 0 0 3px var(--p-accent), 0 0 0 6px var(--p-accent-soft), 0 0 22px 6px var(--p-glow); }
.pbt, .pyou { transition: box-shadow .15s, opacity .2s, scale .12s ease-out; }

/* DICE are chips — big faces in the strip's tray */
.pdice { display: flex; gap: 8px; justify-content: center; padding: 2px 0; }
.pdice .pdie { background: none; border: 0; padding: 0; min-width: 0; min-height: 0; border-radius: 8px; }
.pdice .pdie .pcard.mini { --cw: 46px; --ch: 58px; }
.pdice .pdie.picked .pcard { outline: 3px solid var(--p-accent); box-shadow: 0 0 14px var(--p-accent-soft); }
.pdice .pdie.picked { animation: ppulse 1.1s ease-in-out infinite; border-radius: 8px; }

/* staged + the dock */
.pstaged { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pdock { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 56px; padding: 8px; background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; }
.pdock button { min-height: 44px; border-radius: 10px; padding: 0 16px; font: inherit; font-weight: 700; }
.pdock .dverb { background: var(--p-panel-hi); color: var(--p-ink); border: 1px solid var(--p-line); }
.pdock .confirm { background: var(--p-accent); color: var(--p-on-accent); border: 0; }
.pdock .ghost { background: none; color: var(--p-dim); border: 1px solid var(--p-line); }
.pprompt { flex: 1 1 auto; font-weight: 600; }
.pprompt.dim { color: var(--p-dim); font-weight: 500; }
.pfinish { background: var(--p-panel); border: 1px solid var(--p-accent); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pfinish-line { font-weight: 700; font-size: 16px; }

/* the sheet — over the page */
.psheet-scrim { position: fixed; inset: 0 0 calc(var(--p-tabs) + env(safe-area-inset-bottom)) 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 90; }
.psheet { width: 100%; max-width: 560px; max-height: 88%; background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
.psheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--p-line); }
.psheet-body { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
/* THE SHEET opens with one finite pop (--dur-pop) — the page under it never moves */
@keyframes psheet-in { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pscrim-in { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,.55); } }
.psheet { animation: psheet-in var(--dur-pop) var(--ease-pop, ease-out) both; }
.psheet-scrim { animation: pscrim-in var(--dur-pop) ease-out both; }
@media (prefers-reduced-motion: reduce) { .psheet, .psheet-scrim { animation: none; } }
/* A CARD in the sheet stands at full size: its face, its rules, its plays */
.psheet .pcard-page { background: none; border: 0; padding: 0; align-items: center; text-align: center; }
.psheet .phero .pcard { --cw: 156px; --ch: 208px; }
.psheet .pcard-page .prules { font-size: 15px; line-height: 1.4; max-width: 34ch; }
.psheet .pcard-page .pverbs { background: none; border: 0; padding: 0; flex-direction: row; justify-content: center; width: 100%; }
.psheet .pcard-page .pverb { flex: 1 1 0; max-width: 220px; min-height: 48px; font-size: 16px; }
.pcontinue { margin: 8px 10px 12px; min-height: 48px; border-radius: 12px; background: var(--p-accent); color: var(--p-on-accent); border: 0; font: inherit; font-weight: 700; }

/* view transitions: the glide */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .001s; }


/* ---------------------------------------------------------------- THE FRONT DOOR + THE LOBBY */
.pdoor .pbody { gap: 12px; padding-top: 12px; }
.pwordmark { letter-spacing: .32em; font-size: 20px; color: var(--p-accent); font-weight: 800; }
.pdoor .pbar h1.ptitle { margin: 0; font-size: 22px; letter-spacing: .18em; font-family: var(--p-mono); }
.pjoin { gap: 8px; padding: 8px; }
.pjoin .pinput { width: 100%; box-sizing: border-box; }
.pjoinrow { display: flex; gap: 8px; align-items: stretch; }
.pjoinrow .pinput.code { width: 92px; flex: 0 0 auto; text-align: center; letter-spacing: .2em; text-transform: uppercase; font-family: var(--p-mono); }
.pjoinrow .confirm { flex: 1 1 auto; min-height: var(--p-row); border-radius: 10px; background: var(--p-accent); color: var(--p-on-accent); border: 0; font: inherit; font-weight: 700; }
.pjoinrow .dverb { min-height: var(--p-row); padding: 0 16px; border-radius: 10px; background: var(--p-panel-hi); color: var(--p-ink); border: 1px solid var(--p-line); font: inherit; font-weight: 700; }
.pgame { cursor: pointer; }
.pgame .gicon { font-size: 22px; width: 32px; text-align: center; flex: 0 0 auto; }
.pgame .prlabel { min-width: 96px; }
.prow.picked { background: var(--p-accent-soft); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--p-accent); }
.lseat.bot .prlabel { color: var(--p-dim); }
.pdial input, .pdial select { margin-left: auto; min-height: 36px; border-radius: 8px; border: 1px solid var(--p-line); background: var(--p-panel-hi); color: var(--p-ink); font: inherit; padding: 0 8px; max-width: 120px; }
.pdoordock { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); justify-content: flex-end; }
/* FILL THE TABLE — a seat-count stepper and one tap */
.pfill { gap: 8px; }
.pfill .pstepper { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pfill button { min-height: 36px; min-width: 36px; border-radius: 8px; border: 1px solid var(--p-line); background: var(--p-panel-hi); color: var(--p-ink); font: inherit; font-weight: 700; padding: 0 10px; }
.pfill .pfillgo { background: var(--p-accent); color: var(--p-on-accent); border: 0; padding: 0 16px; }
.pfill .pclear { margin-left: auto; }
.pfill .pstepn { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.pfill button:disabled { opacity: .4; }
/* THE VARIANTS — a game's named dial bundles as big tiles above the dials:
   icon, name, the line that sells it; the picked one lit (a guest's is the
   one coming, read-only). Custom picks light none and say so. */
.hostpanel { display: flex; flex-direction: column; gap: 12px; }
.pvariants { padding: 4px 6px 8px; }
.pvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; padding: 2px 0 0; }
.pvariant { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; min-width: 0;
            box-sizing: border-box; padding: 12px 12px 12px; border-radius: 12px; text-align: left;
            background: var(--p-panel-hi); color: var(--p-ink); border: 1px solid var(--p-line); font: inherit; cursor: pointer;
            transition: border-color .15s, background .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
button.pvariant:active { transform: scale(.98); }
.pvariant.picked { background: var(--p-accent-soft); border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.pvicon { font-size: 28px; line-height: 1; }
.pvtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%; }
.pvlabel { font-size: 15px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.pvblurb { font-size: 12px; line-height: 1.35; color: var(--p-dim); overflow-wrap: anywhere; }
.pvariant.picked .pvblurb { color: var(--p-ink); opacity: .82; }
.pvcheck { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
           font-size: 13px; font-weight: 900; background: var(--p-accent); color: var(--p-on-accent); }
.pvcustom { padding: 8px 2px 0; font-size: 12px; }
.pvariants.guest { padding: 0; }
.lwait .pvcustom { padding: 0 2px; }
.pvariants.guest .pvariant { min-height: 0; cursor: default; flex-direction: row; align-items: center; gap: 12px; width: 100%; }
.pvariants.guest .pvicon { font-size: 30px; flex: 0 0 auto; }
.err { color: var(--p-bad); font-size: 13px; padding: 4px 2px; }
.histblock { display: flex; flex-direction: column; gap: 6px; }
.feedstrip { display: flex; flex-wrap: wrap; gap: 6px; }
.feedchip { font-size: 12px; background: var(--p-panel-hi); border-radius: 999px; padding: 4px 10px; color: var(--p-dim); }
.pmark { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }

/* THE MOOD — a phase's declared :mood tints the room (the head says which) */
.proom[data-mood="night"] { --p-bg: #14161f; --p-panel: #1c1f2b; --p-panel-hi: #252a38; --p-ink: #dfe3ee; --p-dim: #9aa1b5; --p-line: #323849; background: var(--p-bg); color: var(--p-ink); }
.proom[data-mood="day"] .pbar, .proom[data-mood="day"] [data-block="head"] { background: linear-gradient(180deg, rgba(255,200,90,.18), transparent); }

/* THE STEPS — a composite answered one key at a time */
.psteps { display: flex; flex-direction: column; gap: 6px; }
/* a lit seat SAYS what happens to it */
.pbt-verb { font-size: 11px; font-weight: 700; color: var(--p-on-accent); background: var(--p-accent); border-radius: 999px; padding: 1px 8px; align-self: flex-start; }

/* ------------------------------------------------------------ PEOPLE = players + conversations */
.psaid { font-size: 12px; color: var(--p-ink); background: var(--p-panel-hi); border-radius: 10px 10px 10px 2px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: ppop .25s ease-out; }
.ptyping { font-size: 12px; color: var(--p-dim); font-style: italic; }
.punread, .pbadge-n { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--p-accent); color: var(--p-on-accent); font-size: 11px; font-weight: 700; text-align: center; margin-left: 6px; }
.pbadge-n { position: absolute; top: 4px; right: calc(50% - 26px); margin: 0; }
.plabel > button { float: right; min-height: 28px; font-size: 12px; padding: 0 10px; }
.plabel > .pnewgroup { font-size: 18px; line-height: 1; min-width: 36px; padding: 0 8px; }
/* THE GROUP SHEET — faces to pick, a name, Create */
.pgroup-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.pgroup-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: var(--p-panel); border: 1px solid var(--p-line); font-size: 12px; min-height: 0; }
.pgroup-seat.on { border-color: var(--p-accent); background: var(--p-accent-soft); box-shadow: inset 0 0 0 1px var(--p-accent); }
.pgroup-seat span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcreate { margin: 0 10px 10px; min-height: 48px; }

/* a line spoken over a seat — pops when it lands, then rests */
.pbubble { position: relative; font-size: 12px; background: var(--p-panel); color: var(--p-ink); border: 1px solid var(--p-line); border-radius: 10px 10px 10px 2px; padding: 2px 8px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: ppop .25s ease-out; }
.pbubble.typing { color: var(--p-dim); letter-spacing: 2px; }
@keyframes ppop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* a conversation's line: who · #channel · the words (or the voice) */
.pch { font-family: var(--p-mono); font-size: 11px; color: var(--p-dim); }
.pvoice { display: inline-flex; align-items: center; gap: 8px; background: var(--p-panel-hi); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.pvplay { width: 20px; text-align: center; font-weight: 700; }
.pwave { display: inline-flex; align-items: center; gap: 1px; height: 22px; width: 120px; }
.pwave .pbar { flex: 1 1 0; background: var(--p-dim); border-radius: 1px; min-height: 2px; }
.pwave .pbar.on { background: var(--p-accent); }
.prate { font-family: var(--p-mono); font-size: 11px; border: 1px solid var(--p-line); border-radius: 6px; padding: 0 4px; }
.precdot { color: #d94a3a; font-size: 18px; }
.psend.mic { font-size: 18px; }

/* the Play page's talk: the strip remembers and lets you answer in place */
.pact-scroll > .pcomposer { position: static; background: transparent; padding: 0; }

/* TAP SELECTS IN PLACE — the card open above the dock, the table in view */

/* ------------------------------------------------------------ a desktop: three columns */
.pcols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; }
.pcols > .pbody { border-left: 1px solid var(--p-line); border-right: 1px solid var(--p-line); }
.pside { min-height: 0; overflow-y: auto; padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--p-bg); }
.pside-title { font-weight: 700; font-size: 13px; color: var(--p-dim); text-transform: uppercase; letter-spacing: .06em; }
.pside .pgrid { grid-template-columns: 1fr; }

/* a desktop's talk column IS the table composer — the Play page's own hides */
.pcols .pact-scroll > .pcomposer { display: none; }

/* VICTORY IN PLACE — the winners' seats glow */
.ptile.winner, .pbt.winner, .pyou.winner { border-color: #e0b340; box-shadow: 0 0 0 2px rgba(224,179,64,.55), 0 0 18px rgba(224,179,64,.35); }

/* THE KIT — tracks as pips, piles as stacks */
.ptrack { display: inline-flex; align-items: center; gap: 6px; }
.ppips { display: inline-flex; gap: 3px; }
.ppip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--p-accent); }
.ppip.on { background: var(--p-accent); }
.pstack { position: relative; display: inline-block; }
.pstack.deep::before { content: ""; position: absolute; inset: 0; transform: translate(3px, 3px); border-radius: 6px; background: var(--p-panel-hi); border: 1px solid var(--p-line); z-index: -1; }
.pcount { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; background: var(--p-ink); color: var(--p-bg); font-size: 11px; font-weight: 700; text-align: center; padding: 0 4px; }
.pchip.popt { display: flex; align-items: center; gap: 8px; text-align: left; border-radius: 12px; padding: 6px 10px; min-height: 56px; max-width: 100%; }
.popt-t { display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; }

/* ONE COMMIT LANGUAGE — your plays (each chip its own ✕), Lock in at the dock's end */
.pchip.stg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pchip.stg .px { font-size: 11px; color: var(--p-dim); margin-left: 2px; }
.pdock .plock { margin-left: auto; }
.pdock .punlock { margin-left: auto; }

/* THE ROUND CLOCK — the head's foot drains; amber in the last ten seconds */
.pbar { position: relative; }
.ptimer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--p-line); }
.ptimer-fill { height: 100%; background: var(--p-accent); transition: width 1s linear; }
.ptimer.urgent .ptimer-fill { background: #e0892c; }

/* ── push ── the reminders offer: a season room, your seat taken (never a block) */
.premind { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           padding: 8px 12px; border-bottom: 1px solid var(--p-line); background: var(--p-panel); font-size: 13px; }
.premind-text { flex: 1 1 180px; min-width: 0; line-height: 1.3; }
.premind button { min-height: 44px; padding: 0 14px; border-radius: 22px; font-weight: 700; font-size: 13px;
                  border: 1px solid var(--p-line); background: transparent; color: var(--p-ink); cursor: pointer; }
.premind .premind-on { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
.premind .premind-on[disabled] { opacity: .6; }
.pclock { font-weight: 700; }
.pclock.urgent { color: #e0892c; }
/* ── season ── a season's head says its day and its close, never seconds;
   its timer bar drains over hours, quietly */
.pseason { font-weight: 600; color: var(--p-dim); }
.ptimer.season .ptimer-fill { opacity: .55; }
.pformat { display: flex; gap: 8px; }
.pformat > button { flex: 1; }
.pformat > button.on { outline: 2px solid currentColor; }
.pseasonrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pseasonrow input, .pseasonrow select { min-height: 40px; border-radius: 8px; border: 1px solid var(--p-line);
  background: var(--p-panel-hi); color: var(--p-ink); font: inherit; padding: 0 8px; }
.pseasonrow .prlabel { flex: 1 1 100%; }
.pdial.pseasonrow select { margin-left: 0; max-width: none; }
.pdial select.plens { max-width: 200px; }

/* ------------------------------------------------------------ ONE PLAY LAYOUT ---
   seats · table (scrolls inside itself) · story line · you + your plays · strip.
   Nothing else scrolls; the regions never move between games. */
.pact { overflow: hidden; }
.pseats { flex: 0 0 auto; padding: 6px 10px 0; }
.pseats .pband { padding: 4px; }
.pband-row { overflow-x: auto; overflow-y: hidden; }
.pband.tiles .pband-row { display: flex; }
.pact-table { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 10px; display: flex; flex-direction: column; gap: 6px; }
.pstory { flex: 0 0 auto; padding: 0 10px 4px; cursor: pointer; }
.pstory .ptranscript { padding: 4px 8px; max-height: 64px; overflow: hidden; }
.pstaged { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; align-items: center; }

/* THE SEAT — one shape, one height per density */
.pbt { position: relative; flex: 0 0 136px; width: 136px; height: 94px; min-width: 0; overflow: hidden; gap: 3px; padding: 5px 6px; }
.pband.plate .pbt { flex: 1 1 auto; width: auto; height: 100px; }
.pband.tiles .pbt { flex: 0 0 108px; width: 108px; height: 86px; }
.pbt-top { min-width: 0; }
.pbt-marks { font-size: 12px; display: inline-flex; gap: 2px; }
.pbt-mid { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; min-height: 0; }
.pbt .pmeters { flex-wrap: nowrap; overflow: hidden; gap: 4px; font-size: 12px; }
.pbt-slot .pcard.mini, .pbt .pflip.mini { --cw: 24px; --ch: 32px; }
.pbt .patt { display: flex; gap: 2px; }
.pbt .pattc .pcard.mini { --cw: 20px; --ch: 27px; }
.pbt .ppiles { white-space: nowrap; overflow: hidden; font-size: 10px; color: var(--p-dim); display: flex; gap: 6px; }
.pbt .ppile { padding: 0; background: none; border: 0; }
.pbt-verb { position: absolute; top: 4px; right: 4px; }
.pbubble { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 2; max-width: none; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* the fixed regions, sized so the TABLE gets what is left — even on a
   375×667 phone every region stands and nothing but the table scrolls */
.pseats .pband { padding: 3px; }
.pbt { height: 84px; flex-basis: 128px; width: 128px; }
.pband.plate .pbt { height: 88px; }
.pband.tiles .pbt { height: 78px; flex-basis: 100px; width: 100px; }
.pstory .plabel { display: none; }
.pstory .ptranscript { max-height: 50px; padding: 3px 8px; gap: 0; }
.pstory .prec, .pstory .psay { padding: 2px 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 0; }
.pact-strip { padding: 4px 10px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
.phand { min-height: 98px; padding: 10px 6px 2px; }
.phc { margin-left: -18px; }
.phc .pcard { --cw: 66px; --ch: 88px; }
.pdock { min-height: 48px; padding: 4px 6px; }
.pdock button { min-height: 40px; }
.pdice .pdie .pcard.mini { --cw: 40px; --ch: 50px; }
/* a seat's role and its "what happens" label never cover the name */
.pbt-verb { top: auto; bottom: 4px; left: 4px; right: auto; }
/* TAP TO KEEP — a kept die wears its mark; the rest will roll again */
.pdice .pdie { position: relative; }
.pdice .pdie.kept .pcard { outline: 3px solid var(--p-accent); }
.pkeep { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 9px; font-weight: 800; text-transform: uppercase; background: var(--p-accent); color: var(--p-on-accent); border-radius: 6px; padding: 0 4px; }

/* WHAT JUST HAPPENED — the table's reveal facet: the round's story, every line whole */
.preveal { display: flex; flex-direction: column; gap: 2px; }
.preveal .plabel { font-family: var(--p-mono); font-size: 10px; letter-spacing: .06em; color: var(--p-dim); text-transform: uppercase; }
.prev-line { font-size: 13px; line-height: 1.3; animation: prev-in .25s ease-out both; }
.prev-line.major { font-weight: 700; }
@keyframes prev-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .prev-line { animation: none; } }
/* the empty tray keeps its place — the first play never shifts the page */
.pstaged { min-height: 24px; }
.pstaged.empty .plabel { color: var(--p-dim); opacity: .7; }

/* ------------------------------------------------------------ THE SEATS ---
   every rival visible, never a sideways scroll: a grid sized by count */
.pband-row { display: grid !important; overflow: hidden; gap: 6px; }
.pband.plate .pband-row { grid-template-columns: 1fr; }
.pband.row .pband-row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pband.grid .pband-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pband.tiles .pband-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pbt, .pband.plate .pbt, .pband.tiles .pbt { width: auto; flex: none; min-width: 0; }
.pband.plate .pbt { height: 104px; }
.pband.row .pbt { height: 98px; }
.pband.grid .pbt { height: 74px; }
.pband.tiles .pbt { height: 58px; padding: 3px 4px; gap: 1px; }
.pband.plate .pbt-slot .pcard.mini, .pband.plate .pbt .pflip.mini,
.pband.row .pbt-slot .pcard.mini, .pband.row .pbt .pflip.mini { --cw: 40px; --ch: 54px; }
.pband.grid .pbt-slot .pcard.mini, .pband.grid .pbt .pflip.mini { --cw: 26px; --ch: 35px; }
.pband.tiles .pbt-slot .pcard.mini, .pband.tiles .pbt .pflip.mini { --cw: 18px; --ch: 24px; }
.pband.grid .pbt .ppiles, .pband.tiles .pbt .ppiles { display: none; }
.pband.tiles .pbt .pmeters { font-size: 10px; }
.pband.tiles .pbt-name { font-size: 11px; }
.pband.tiles .pbt .pav, .pband.tiles .pbt .avatar { transform: scale(.8); transform-origin: left center; }
.pband-row, .pband.tiles .pband-row, .pband.grid .pband-row { grid-auto-flow: row; grid-template-rows: none; }
.pband.row .pband-row { grid-auto-flow: column; }
/* a thumb that drags never selects text */
.pact { -webkit-user-select: none; user-select: none; }
.pact input, .pact textarea { -webkit-user-select: text; user-select: text; }
.pbt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ------------------------------------------------------------ CHAT ---
   Slack's reading order on a phone: the conversation list; a channel is its
   messages (runs by author, the latest at the foot) and a composer pinned
   below them. The game's rules may close a composer — it says why. */
.plist .prow { gap: 10px; }
.prav .avatar { width: 32px; height: 32px; font-size: 13px; }
.prtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prtext .prlabel { font-weight: 600; }
.prtext .prsub { font-size: 12px; color: var(--p-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow.muted { opacity: .55; }
.prow.left .prlabel { font-style: italic; }
.prbadge { margin-left: auto; }

.pbody.chat { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.pbody.chat .pmsgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
                     display: flex; flex-direction: column-reverse; padding: 8px 10px; }
.pmsgs-in { display: flex; flex-direction: column; gap: 1px; }
.pmsgs-empty { text-align: center; padding: 24px 0; }
.psay.pmsg { display: flex; gap: 8px; align-items: flex-start; padding: 2px 6px; border-radius: 8px; }
.psay.pmsg:hover { background: var(--p-panel); }
.psay.pmsg.lead { margin-top: 8px; }
.psay.pmsg.follow { padding-left: 50px; }
.pmsg-av .avatar { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; }
.pmsg-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pmsg-head { display: flex; gap: 8px; align-items: baseline; }
.pmsg-head .pby { font-weight: 800; }
.pmsg-time { font-size: 11px; color: var(--p-dim); }
.pmsg .ptext { white-space: pre-wrap; word-break: break-word; line-height: 1.38; }
/* WHO SAYS IT — a tag the game announces (⚖️ the jury) rides the name; a line
   from the OUT reads apart: a cooler name, a quieter line */
.ptag { font-weight: 400; }
.psay.out .pby { color: var(--violet); }
.psay.out .ptext { color: var(--p-dim); }
.psay.out .pmsg-av .avatar { filter: grayscale(.85); opacity: .75; }
.prec.psys { font-size: 12px; color: var(--p-dim); text-align: center; padding: 4px 0; border: 0; }
/* (a round's divider and a channel's people: THE CHAT, below) */
.prec.psys.major { color: var(--p-text, inherit); font-weight: 700; }
.pbody.chat .ptyping { font-size: 12px; color: var(--p-dim); padding: 2px 6px; }
.pbody.chat .pcomposer { position: static; flex: 0 0 auto; border-top: 1px solid var(--p-line); background: var(--p-panel);
                         padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; align-items: center; }
.pbody.chat .pcomposer .pinput { flex: 1 1 auto; border-radius: 20px; padding: 10px 14px; }
.pcomposer.locked { justify-content: center; text-align: center; font-size: 13px; }

/* WHO IS WHERE — the rooms facet: each room a box, its people as chips */
.prooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.proom-box { border: 1px solid var(--p-line); border-radius: 10px; padding: 6px; background: var(--p-panel-hi); }
.proom-box.mine { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.proom-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.proom-seats { display: flex; flex-wrap: wrap; gap: 4px; }
.proom-seat { display: inline-flex; align-items: center; border-radius: 50%; cursor: pointer; }
.proom-seat .avatar { width: 26px; height: 26px; font-size: 11px; border-width: 1px; }

/* ------------------------------------------------------------ THE MIDDLE ---
   seats keep their natural size; the table takes what its content needs;
   THE STORY fills what is left — a live feed, the newest line at the foot,
   older lines fading up into the room (no dead space, no stretched boxes) */
.pband.plate .pbt, .pband.row .pbt, .pband.grid .pbt, .pband.tiles .pbt { height: auto; }
.pband.plate .pbt { min-height: 72px; }
.pband.row .pbt { min-height: 64px; }
.pband.grid .pbt { min-height: 54px; }
.pband.tiles .pbt { min-height: 46px; }
.pband.plate .pbt-slot .pcard.mini, .pband.plate .pbt .pflip.mini { --cw: 48px; --ch: 64px; }
.pact-table { flex: 0 1 auto; }
.pact-table:empty { display: none; }
.pstory { flex: 1 1 56px; min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.pstory .ptranscript { max-height: none; flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.pstory .prec, .pstory .psay { flex: 0 0 auto; opacity: .55; }
.pstory .prec:last-child, .pstory .psay:last-child { opacity: 1; font-weight: 600; }
.pstory .prec:nth-last-child(2), .pstory .psay:nth-last-child(2) { opacity: .8; }
.pstory .pround { display: none; }
/* NOW — the phase and whose move, large, where the story has not reached */
.pnow { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--p-dim); text-align: center; }
.pnow-icon { font-size: 40px; line-height: 1.1; }
.pnow-line { font-size: 14px; }
.pnow.mine .pnow-line { font-size: 16px; font-weight: 800; color: var(--p-text, inherit); }
@media (max-height: 700px) { .pnow-icon { font-size: 30px; } }
.pstory .ptranscript { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
/* the table region may shrink and scroll inside itself; what stands on it
   (a pile, a market, the open card) keeps its own size — never crushed */
.pact-table { flex: 0 1 auto; min-height: 56px; max-height: none; }
.pact-table > * { flex-shrink: 0; }
/* a pile is a real stack: its box is the card's box */
.ptb-pile { min-height: 48px; }
.ptb-pile .pstack { display: inline-block; width: 34px; height: 45px; flex: 0 0 auto; }
.ptb-pile .pstack > .pcard { display: block; }
/* THE FAN — cards sit side by side while they fit, and overlap only as the
   hand grows (a two-card hand never hides a name) */
.phand { justify-content: safe center; overflow-x: hidden; }
.phand .phc { margin-left: 0; flex: 0 0 auto; }
/* the overlap each hand size needs to fit the fan's own width — `--fan-gap`
   (an unregistered property: its cqw resolve where it is USED, against the
   fan), the margin between cards; a card the next one covers keeps its badge
   pill to the strip still in view, ellipsized (the sheet says it whole) */
.phand { container-type: inline-size; }
.phand > .phc + .phc { margin-left: var(--fan-gap, 0px); }
.phand > .phc:not(:last-child) .cbadge { max-width: min(calc(100% - 8px), calc(var(--hcw, 66px) - 7px + var(--fan-gap, 0px))); }
.phand:has(> .phc:nth-child(2):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 2 * var(--hcw, 66px)) / 1))); }
.phand:has(> .phc:nth-child(3):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 3 * var(--hcw, 66px)) / 2))); }
.phand:has(> .phc:nth-child(4):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 4 * var(--hcw, 66px)) / 3))); }
.phand:has(> .phc:nth-child(5):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 5 * var(--hcw, 66px)) / 4))); }
.phand:has(> .phc:nth-child(6):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 6 * var(--hcw, 66px)) / 5))); }
.phand:has(> .phc:nth-child(7):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 7 * var(--hcw, 66px)) / 6))); }
.phand:has(> .phc:nth-child(8):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 8 * var(--hcw, 66px)) / 7))); }
.phand:has(> .phc:nth-child(9):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 9 * var(--hcw, 66px)) / 8))); }
.phand:has(> .phc:nth-child(10):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 10 * var(--hcw, 66px)) / 9))); }
.phand:has(> .phc:nth-child(11):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 11 * var(--hcw, 66px)) / 10))); }
.phand:has(> .phc:nth-child(12):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 12 * var(--hcw, 66px)) / 11))); }
.phand:has(> .phc:nth-child(13):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 13 * var(--hcw, 66px)) / 12))); }
.phand:has(> .phc:nth-child(14):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 14 * var(--hcw, 66px)) / 13))); }
.phand:has(> .phc:nth-child(15):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 15 * var(--hcw, 66px)) / 14))); }
.phand:has(> .phc:nth-child(16):last-child) { --fan-gap: max(calc(14px - var(--hcw, 66px)), min(6px, calc((100cqw - 12px - 16 * var(--hcw, 66px)) / 15))); }
.pnow.gone { flex: 0 0 0; }
/* the tightest seat counts still fit: the flexible middle may give more */
.pact-table { min-height: 44px; }
.pstory { min-height: 32px; flex-basis: 40px; }
/* a seat grows with what it shows — up to its density's cap */
.pband.plate .pbt { max-height: 132px; }
.pband.row .pbt { max-height: 112px; }
.pband.grid .pbt { max-height: 84px; }
.pband.tiles .pbt { max-height: 62px; }
.pband.grid .pbt-slot, .pband.tiles .pbt-slot { flex-wrap: nowrap; overflow: hidden; }
/* a seat's played cards are real boxes on its page — never spilling */
.pslot > span, .patt > span { display: inline-block; flex: 0 0 auto; }
.pslot .pcard.mini, .patt .pcard.mini { display: block; }
/* a page's blocks are never squeezed — the page body scrolls instead */
.pbody:not(.act):not(.chat) > * { flex-shrink: 0; }

/* ============================================================ SLACK POLISH
   The chat home as Slack's sidebar (a # or a face, bold when unread, the
   time on the right), a line's life (sending, failed, THE NEW LINE, a
   mention of you), reactions, the composer that grows, the @ picker, the
   typing dots, and a peek from any other page. */
.prglyph { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px;
           background: var(--p-panel-hi); color: var(--p-dim); font-weight: 800; font-size: 16px; }
.prav { position: relative; }
.prav .pbot { position: absolute; right: -4px; bottom: -4px; font-size: 11px; line-height: 1; }
.prtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.prtext .prsub { flex: 0 0 auto; }
.prtext.unread .prlabel { font-weight: 800; }
.prtext.unread .prsub { color: var(--p-ink); }
.prsub.typing { color: var(--p-accent); font-style: italic; }
.prmeta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.prmeta .prbadge { margin-left: 0; }
.prtime { font-size: 11px; color: var(--p-dim); font-variant-numeric: tabular-nums; }
.prbadge.mention { background: var(--p-bad); color: #fff; }
#convos .prow.left .prlabel, .prow.left .prlabel { color: var(--p-dim); }

.pintro { padding: 18px 8px 10px; }
.pintro-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.psay.pmsg { animation: pmsg-in .16s ease-out; }
@keyframes pmsg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.psay.pmsg.pending { opacity: .55; }
.psay.pmsg.failed .ptext { color: var(--p-bad); }
.psay.pmsg.failed .pmsg-time { color: var(--p-bad); font-weight: 700; }
.psay.pmsg.mentioned { background: var(--p-accent-soft); box-shadow: inset 3px 0 0 var(--p-accent); }
.psay.pmsg.new { position: relative; margin-top: 18px; }
.psay.pmsg.new::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; border-top: 1px solid var(--p-bad); }
.psay.pmsg.new::after { content: "New"; position: absolute; right: 4px; top: -17px; padding: 0 6px; font-size: 11px;
                        font-weight: 800; color: var(--p-bad); background: var(--p-bg); }
.ptext.jumbo { font-size: 34px; line-height: 1.15; }
.pment { color: var(--p-accent); font-weight: 700; background: var(--p-accent-soft); border-radius: 4px; padding: 0 2px; cursor: pointer; }
.pment.me { color: var(--p-on-accent); background: var(--p-accent); }
.plink { color: var(--p-accent); text-decoration: underline; word-break: break-all; }
@media (hover: none) { .psay.pmsg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }

.preacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.preact { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 13px;
          border: 1px solid var(--p-line); background: var(--p-panel); color: var(--p-ink); font-size: 14px; cursor: pointer; }
.preact .prn { font-size: 12px; font-weight: 700; }
.preact.mine { border-color: var(--p-accent); background: var(--p-accent-soft); }
.preact.add { color: var(--p-dim); font-size: 12px; opacity: .8; }
.preactpick { display: inline-flex; gap: 2px; padding: 2px; border-radius: 16px; background: var(--p-panel-hi); }
.preact.pick { border: 0; background: transparent; font-size: 18px; padding: 0 6px; }
.preact.pick.x { font-size: 12px; color: var(--p-dim); }

.pbody.chat .ptyping, .ptyping { display: flex; align-items: center; gap: 6px; font-style: normal; }
.pdots { display: inline-flex; gap: 3px; }
.pdots i { width: 5px; height: 5px; border-radius: 50%; background: var(--p-dim); animation: pdot 1.2s infinite ease-in-out; }
.pdots i:nth-child(2) { animation-delay: .15s; } .pdots i:nth-child(3) { animation-delay: .3s; }
@keyframes pdot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

.pcomposer, .pbody.chat .pcomposer { position: relative; }
.pcomposer textarea.pinput { resize: none; font: inherit; line-height: 1.35; min-height: 40px; max-height: 120px; overflow-y: auto; }
.pbody.chat .pcomposer { align-items: flex-end; }
.psend.up { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 20px; font-weight: 800; flex: 0 0 40px; }
.psend.up:disabled { opacity: .35; }
.pmentions { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 4px); display: flex; flex-direction: column;
             background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 4px;
             box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 5; }
.pmention { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: transparent; color: var(--p-ink);
            font: inherit; text-align: left; border-radius: 8px; cursor: pointer; }
.pmention:hover, .pmention:focus { background: var(--p-accent-soft); }
.pmention .avatar { width: 24px; height: 24px; font-size: 11px; border-radius: 6px; }

.ptoast { position: absolute; top: calc(var(--p-head) + 6px); left: 10px; right: 10px; z-index: 30; display: flex; gap: 10px;
          align-items: center; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--p-line);
          background: var(--p-panel); color: var(--p-ink); font: inherit; text-align: left;
          box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: ptoast-in .2s ease-out; cursor: pointer; }
.ptoast .avatar { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px; }
.ptoast-body { display: flex; flex-direction: column; min-width: 0; }
.ptoast-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
@keyframes ptoast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.pbadge-n.mention { background: var(--p-bad); color: #fff; }
/* "+ group" reads as Slack's "add" — an accent link, not a floating chip */
.plabel > button.ghost { float: right; border: 0; background: transparent; color: var(--p-accent); font-family: inherit;
                         letter-spacing: inherit; text-transform: none; font-weight: 700; min-height: 20px; padding: 0 2px; }

/* ============================================================ PASS 21
   The rest of the room: the lobby's faces, the wait, a live round, the
   front door's seat counts on one line. */
.prbadge { white-space: nowrap; }
.lseats { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px 6px; padding: 6px 2px 4px; }
.lseat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.lseat .lav { position: relative; }
.lseat .lav .avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }
.lseat .lbadge { position: absolute; right: -6px; top: -8px; font-size: 16px; line-height: 1; }
.lseat .lname { font-weight: 700; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lseat.bot .lname { color: var(--p-dim); }
.lseat.you .lav .avatar { box-shadow: 0 0 0 2px var(--p-accent); }
.lseat .prsub { font-size: 11px; }
.lwait { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.lwait-game { display: flex; gap: 12px; align-items: center; }
.lwait-game .gicon { font-size: 34px; }
.lwait-text { display: flex; flex-direction: column; min-width: 0; }
.lwait-text .prlabel { font-size: 17px; font-weight: 800; }
.lwait-text .prsub { white-space: normal; }
.lwait-line { display: flex; align-items: center; gap: 8px; }
.plive { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--p-good);
         text-transform: uppercase; letter-spacing: .06em; }
.plive::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p-good); animation: plive 1.6s infinite; }
@keyframes plive { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.pfinish { align-items: stretch; gap: 10px; }
.pfinish.won { background: linear-gradient(135deg, var(--p-accent-soft), var(--p-panel)); box-shadow: 0 0 0 2px var(--p-accent); }
/* ── story ── THE STORY's long read: a document in History's vocabulary —
   a display serif for the title, the round divider for each chapter, plain
   paragraphs at a reading measure */
.pprose { --p-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
          max-width: 62ch; width: 100%; margin: 0 auto; padding: 14px 6px 4px; color: var(--p-ink); }
.pprose-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--p-line); }
.pprose-title { margin: 0; font-family: var(--p-serif); font-size: clamp(24px, 6vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pprose-by { font-family: var(--p-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-dim); }
.pprose-writing { font-size: 13px; color: var(--p-accent); font-style: italic; }
.pprose-ch { padding-top: 6px; }
.pprose-ch-title { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-family: var(--p-mono); font-size: 11px; font-weight: 600;
                   letter-spacing: .08em; text-transform: uppercase; color: var(--p-dim); text-align: center; }
.pprose-ch-title::before, .pprose-ch-title::after { content: ""; flex: 1; height: 1px; background: var(--p-line); }
.pprose-p { margin: 0 0 12px; font-family: var(--p-serif); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.pfinish-top { display: flex; gap: 12px; align-items: center; }
.pfinish-faces { display: flex; flex: 0 0 auto; }
.pfinish-faces > span + span { margin-left: -12px; }
.pfinish-faces .avatar { width: 44px; height: 44px; border-radius: 12px; font-size: 17px; box-shadow: 0 0 0 2px var(--p-panel); }
.pfinish-text { display: flex; flex-direction: column; min-width: 0; }
.pfinish-line { font-size: 18px; font-weight: 800; }
.pfinish-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================ PASS 23
   Presence: a dot on the face (green here, hollow away); the link bar. */
.avatar { position: relative; }
.ppres { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%;
         box-shadow: 0 0 0 2px var(--p-panel); }
.ppres.online { background: var(--p-good); }
.ppres.away { background: var(--p-panel); box-shadow: 0 0 0 2px var(--p-panel), inset 0 0 0 2px var(--p-dim); }
.plinkbar { flex: 0 0 auto; text-align: center; font-size: 12px; font-weight: 700; padding: 3px 8px;
            background: var(--p-bad); color: #fff; animation: plive 1.6s infinite; }
.pleave.armed { background: var(--p-bad); color: #fff; border-color: var(--p-bad); }
.dopts-label { font-size: 11px; font-weight: 800; color: var(--p-dim); white-space: nowrap; align-self: center; margin-right: 2px; }

/* ============================================================ PASS 26
   The desktop: the front door and the lobby read as a centred column; the
   peek sits over the page, not across the columns. */
@media (min-width: 1024px) {
  .proom.pdoor > .pbar, .proom.pdoor > .pbody, .proom.pdoor > .pdoordock { width: 100%; max-width: 780px; margin-left: auto; margin-right: auto; }
  .proom.pdoor > .pdoordock { margin-bottom: 14px; }
  .ptoast { left: auto; right: 360px; width: 380px; }
}

/* ============================================================ THE TOUCH LAYER
   Every tappable says so. The renderer stamps `data-tap` on every node it
   draws with a click handler (arena.client.touch) — ONE rule set here gives
   each the pointer, a hover (a mouse only) and a press (`.pressed`, marked
   the instant a finger lands — `:active` answers late or never on a
   phone). A card a finger can pick up says grab; mid-drag the whole room
   says grabbing; the lit landings glow and everything else steps back. */
:root { --p-hover: rgba(255,255,255,.05); --p-press: rgba(224,164,88,.24); --p-glow: rgba(224,164,88,.5); }
@media (prefers-color-scheme: light) {
  :root { --p-hover: rgba(42,36,31,.05); --p-press: rgba(180,112,30,.2); --p-glow: rgba(180,112,30,.42); }
}
.proom[data-mood="night"] { --p-hover: rgba(255,255,255,.05); --p-press: rgba(224,164,88,.24); }

/* TAP — the pointer; the tint is a layer over the node's own background, so
   it reads on a panel, a chip and the accent alike */
.proom [data-tap] { cursor: pointer; }
.proom [data-tap]:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .proom [data-tap]:not(:disabled):hover { background-image: linear-gradient(var(--p-hover), var(--p-hover)); }
}
.proom [data-tap]:not(:disabled):is(:active, .pressed) { background-image: linear-gradient(var(--p-press), var(--p-press)); }
/* small things and seats also give under the thumb; a button scales, as ever */
.proom :is(span, .pbt, .pyou)[data-tap]:is(:active, .pressed) { scale: .96; }
.proom button[data-tap]:not(:disabled).pressed { transform: scale(.97); }
/* the sheet's backdrop closes it — but it never flashes, and the sheet on it
   is no button */
.proom .psheet-scrim[data-tap]:is(:hover, :active, .pressed) { background-image: none; }
.psheet { cursor: auto; }
/* a lit seat under a mouse IS the "here" (the drag says it with .over) */
@media (hover: hover) and (pointer: fine) {
  .proom :is(.pbt, .pyou).target:hover { background-image: linear-gradient(var(--p-glow), var(--p-glow)); }
}

/* GRAB — the cards a finger picks up: never selected, called out, scrolled
   or natively dragged; a press LIFTS the card at once and its ring fills
   through the hold, so the hold feels alive before the ghost rises */
.proom .phc { cursor: grab; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.proom .phand { touch-action: none; -webkit-touch-callout: none; }
.proom .phc:not(.dragging) { transition: transform .18s var(--ease-snap, ease), translate .12s ease-out, scale .12s ease-out; }
@media (hover: hover) and (pointer: fine) { .proom .phc:not(.dragging):hover { translate: 0 -5px; } }
.proom .phc.pressing { translate: 0 -12px; scale: 1.06; z-index: 4; }
.proom .phc.pressing .pcard { box-shadow: 0 0 0 3px var(--p-accent), 0 0 18px 3px var(--p-glow), 0 12px 24px rgba(0,0,0,.4);
                                                 transition: box-shadow .28s ease-out; }

/* MID-DRAG — the room says grabbing, wherever the pointer is */
.proom:has(.pdrag-ghost), .proom:has(.pdrag-ghost) * { cursor: grabbing !important; }

/* WHILE AIMING — the page model lit the legal landings (a seat-aimed play
   armed, a card in hand); what can't take it steps back, and mid-drag the
   strip does too (the dock is no use with a card in the hand) */
.pact :is(.pstory, .pdock, .pdice, .ptable-band) { transition: opacity .2s; }
.pact:has(:is(.pbt.target, .pbt.drop))
  :is(.pbt:not(.target):not(.picked):not(.drop), .pstory, .pact-table > .ptable-band) { opacity: .42; }
.pact:has(.pdrag-ghost) :is(.pdock, .pdice, .phc:not(.dragging)) { opacity: .42; }
/* the seats' grid keeps room for a lit seat's ring and its HERE */
.pact .pband-row { padding: 5px; margin: -5px; }

/* ── YOUR CARD ON A SEAT (THE CARD LAW, one control): a card dropped on a seat
   STANDS on its tile — a small card at the tile's corner, tilted like one laid
   down; pick it up to move it to another seat or take it back ── */
.pbt, .pyou { position: relative; }
.paimed { position: absolute; right: 4px; top: 4px; z-index: 3; display: flex; gap: 2px; }
.paimed-card { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
               transform: rotate(6deg); filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); transition: transform .15s ease; }
.paimed-card .pcard { --cw: 34px; --ch: 46px; }
.paimed-card .pcard .cname, .paimed-card .pcard .csub { display: none; }
@media (hover: hover) { .paimed-card:hover { transform: rotate(0deg) scale(1.08); } }
.paimed-card.pressing { transform: rotate(0deg) scale(1.12); }
.paimed-card.dragging { opacity: .25; }
/* THE SETTLE — everyone is in: the round's last seconds */
/* (no running animation: the gates' rest frames — and a reader's eye — stay still) */
.pdock .pprompt.settled { color: var(--p-accent); font-weight: 800; outline: none; box-shadow: none; border: 0; background: none; }

/* ---------------------------------------------------------------- HISTORY, TOLD
   A round reads as a story: SCENES (one per phase it entered), each its
   cards put down (side by side by room), its votes (each target with who
   chose it), what came of it (the verdicts loud), the talk between, and one
   quiet line of what it did to the meters and the piles. */
.pscene { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 10px; }
.pscene-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--p-line); }
.pscene-title { font-size: 16px; font-weight: 750; line-height: 1.25; }
.pscene-sub { font-size: 12px; color: var(--p-dim); }
.pdown { display: flex; flex-direction: column; gap: 8px; }
.pside { display: flex; flex-direction: column; gap: 4px; }
.pside-label { font-family: var(--p-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-dim); }
.pside-plays { display: flex; flex-wrap: wrap; gap: 6px 4px; }
/* ONE PLAYER'S CARDS — fanned when several, the name once beneath */
.pplayer { display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 8px; padding: 2px 0; }
.pplayer-cards { display: flex; }
.pplayer.many .pplay + .pplay { margin-left: -14px; }
.pplay { position: relative; border-radius: 8px; }
.pplay .pcard.mini { --cw: 52px; --ch: 70px; }
.pplay .pcard.mini .cicon { font-size: 22px; }
/* a card put down says its NAME (Rest or Push is the whole story) */
.pplay .pcard.mini .cname { display: block; font-size: 9px; padding: 0 3px; }
.pplayer.you .pcard .pface { box-shadow: 0 0 0 2px var(--p-accent); }
.pplay-name { font-size: 11px; color: var(--p-dim); max-width: 80px; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pplayer.you .pplay-name { color: var(--p-accent); font-weight: 700; }
/* on whom a card was played rides the card itself */
.pplay-on { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); z-index: 2; font-size: 9px; font-weight: 700;
  color: var(--p-on-accent); background: var(--p-accent); border-radius: 999px; padding: 0 5px; white-space: nowrap;
  max-width: 58px; overflow: hidden; text-overflow: ellipsis; }
.pvoter-x { font-family: var(--p-mono); font-size: 11px; font-weight: 700; color: var(--p-accent); }
.pvotes { display: flex; flex-direction: column; gap: 6px; }
.pvotes > .plabel { padding: 0; }
.ptally { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--p-panel-hi); }
.ptally.you { box-shadow: inset 0 0 0 1px var(--p-accent); }
.ptally-who { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: 104px; }
.ptally-who .avatar { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid; }
.ptally-who .pcard.mini { --cw: 30px; --ch: 40px; }
.ptally-who .pcard.mini .cicon { font-size: 15px; }
.ptally-name { font-weight: 700; }
.ptally-n { font-family: var(--p-mono); font-size: 12px; font-weight: 700; color: var(--p-on-accent); background: var(--p-accent); border-radius: 999px; padding: 1px 7px; }
.ptally-by { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.pvoter { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 999px; padding: 1px 8px 1px 2px; }
.pvoter .avatar { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; font-weight: 700; border: 1px solid; }
.pvoter.you { border-color: var(--p-accent); }
.ptold { display: flex; flex-direction: column; gap: 4px; }
.pline { font-size: 13px; line-height: 1.4; }
.pline.major { font-size: 14px; font-weight: 700; color: var(--p-accent); }
.pfx { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--p-line); }
.pfx-item { font-family: var(--p-mono); font-size: 11px; color: var(--p-dim); background: var(--p-panel-hi); border-radius: 999px; padding: 2px 8px; }
/* THE ROUNDS — each round's outcomes a line each, never cut short */
.prlines { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.prline { font-size: 12px; color: var(--p-dim); line-height: 1.35; white-space: normal; }
.prline:first-child { color: var(--p-ink); }
.prout { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; align-self: center; align-items: flex-end; }
.prout-face { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--p-bad); background: var(--p-panel-hi); border-radius: 999px; padding: 1px 7px 1px 2px; white-space: nowrap; }
.prout-face .avatar { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; font-weight: 700; border: 1px solid; filter: grayscale(.7); opacity: .75; }

/* ---------------------------------------------------------------- THE ACT PAGE, TIGHTENED (2026-10-11)
   Names never yield: a seat's known role rides its face as a badge. Your
   role reads as words. The dock says HOW (the NOW panel says what). Several
   of your cards on one seat fan instead of spilling past it. */
.pbt-av { position: relative; flex: 0 0 auto; display: inline-flex; }
.pbt-roleicon { position: absolute; right: -6px; bottom: -5px; width: 17px; height: 17px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; line-height: 1; background: var(--p-panel);
  border: 1px solid var(--p-line); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pband.tiles .pbt-roleicon { width: 15px; height: 15px; font-size: 9px; right: -5px; bottom: -4px; }
.pbt-top { gap: 8px; }
.pband.tiles .pbt-top { gap: 6px; }
.pyou-role { font-size: 12px; font-weight: 650; background: var(--p-panel-hi); border: 1px solid var(--p-line);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pyou-role.unknown { color: var(--p-dim); font-weight: 500; }
.pdock.slim { min-height: 0; padding: 0 6px 2px; background: none; border: 0; justify-content: center; }
.phint { font-size: 11px; color: var(--p-dim); text-align: center; line-height: 1.3; }
.paimed-card + .paimed-card { margin-left: -22px; }

/* a short screen: the story's icon gives way first */
@media (max-height: 760px) {
  .pnow-icon { display: none; }
}
/* NOW gives way when the story has no room for it (the head's pill still says it) */
.pstory { container-type: size; }
@container (max-height: 64px) { .pnow { display: none; } }

/* ================================================================ THE CHAT (2026-10-12)
   Slack and Discord on a phone. THE LIST is a full screen: PEOPLE (a face
   per seat — one tap whispers), CHANNELS and DIRECT MESSAGES as flat rows
   (a # · a face · a group's faces — the name, the last line, when, the
   unread count), an unread row LIT (bold, an accent edge) and risen to the
   top. A CONVERSATION is the screen: its head (‹ back, with what waits
   elsewhere · the title · its faces, a tap lists them), the person on top
   of a whisper, the lines divided by ROUND, the composer pinned at the foot. */

/* the list: flat, full-bleed sections */
.pbody.home { padding: 0 0 16px; gap: 0; }
.plist:is(.pstrip, [data-block="convos"], [data-block="dms"]) { background: none; border: 0; border-radius: 0; padding: 4px 0 6px; }
.plist:is(.pstrip, [data-block="convos"], [data-block="dms"]) > .plabel {
  padding: 10px 16px 4px; font-family: inherit; font-size: 12px; font-weight: 750; letter-spacing: .06em; }
.plist:is([data-block="convos"], [data-block="dms"]) + .plist { border-top: 1px solid var(--p-line); }
.plist-hint { padding: 6px 16px 10px; font-size: 13px; color: var(--p-dim); line-height: 1.4; }

/* a conversation's row */
.prow.convo { position: relative; min-height: 62px; padding: 8px 16px; gap: 12px; border: 0; border-radius: 0; }
.prow.convo .prav .avatar, .prow.convo .prglyph { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.prow.convo .prglyph { font-size: 19px; }
.prow.convo .prtext { gap: 2px; }
.prow.convo .prlabel { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow.convo .prsub { font-size: 13px; line-height: 1.3; }
.prow.convo .prmeta { align-self: flex-start; padding-top: 3px; gap: 5px; }
.prow.convo .prtime { font-size: 12px; }
.prow.convo .prbadge { min-width: 22px; height: 22px; line-height: 22px; padding: 0 7px; text-align: center; border-radius: 11px;
  background: var(--p-accent); color: var(--p-on-accent); font-weight: 800; font-family: inherit; }
.prow.convo .prbadge.mention { background: var(--p-bad); color: #fff; }
.prow.convo.unread .prlabel { font-weight: 800; }
.prow.convo.unread .prsub { color: var(--p-ink); }
.prow.convo.unread .prtime { color: var(--p-accent); font-weight: 700; }
.prow.convo.unread::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--p-accent); }
.prow.convo.current { background: var(--p-accent-soft); border-radius: 0; }
.prow.convo.left .prlabel { font-style: normal; }
/* a group's face: two of its people, overlapping */
.pgroupav .pwho { position: relative; width: 42px; height: 42px; margin: 0; }
.pgroupav .pwho-face { position: absolute; }
.pgroupav .pwho-face:first-child { left: 0; top: 0; }
.pgroupav .pwho-face:nth-child(2) { right: 0; bottom: 0; }
.prow.convo .pgroupav .avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; font-size: 12px; box-shadow: 0 0 0 2px var(--p-bg); }
.pgroupav .pwho-more { display: none; }

/* PEOPLE — a face per seat, one tap whispers; dimmed when the game says no */
.ppeople { display: flex; gap: 2px; overflow-x: auto; padding: 2px 10px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ppeople::-webkit-scrollbar { display: none; }
.pperson { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px 4px;
  border: 0; border-radius: 12px; background: none; color: var(--p-ink); font: inherit; min-height: 76px; }
.pperson-av { position: relative; display: inline-flex; }
.pperson-av .avatar { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 17px; font-weight: 700; border: 2px solid; }
.pperson-av .ppres { width: 12px; height: 12px; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--p-bg); }
.pperson-name { font-size: 12px; line-height: 1.2; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pperson.unread .pperson-name { font-weight: 800; }
.pperson-n { position: absolute; top: -5px; right: -7px; min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--p-accent); color: var(--p-on-accent); font-size: 11px; font-weight: 800; text-align: center; box-shadow: 0 0 0 2px var(--p-bg); }
.pperson-tag { position: absolute; left: -6px; bottom: -5px; font-size: 14px; line-height: 1; }
.pperson.muted { opacity: .38; }
.pperson.out .avatar { filter: grayscale(1); }

/* WHO'S IN IT — faces overlapping, in a head */
.pwho { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: -4px; }
.pwho-face { display: inline-flex; }
.pwho-face + .pwho-face { margin-left: -4px; }
.pwho .avatar { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  border: 1px solid; box-shadow: 0 0 0 2px var(--p-panel); font-family: system-ui, sans-serif; }
.pwho-more { font-size: 11px; color: var(--p-dim); margin-left: 3px; }

/* A CONVERSATION's head: back (with what waits elsewhere), the title, its faces */
.pback { position: relative; flex: 0 0 auto; }
/* (iOS's "‹ 3": what waits elsewhere rides the back button, inside it) */
.pbar.talk .pback:has(.pback-n) { width: auto; min-width: 40px; padding: 0 8px 0 6px; display: inline-flex; align-items: center; gap: 4px; }
.pback-n { min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; text-align: center;
  background: var(--p-accent); color: var(--p-on-accent); font-size: 11px; font-weight: 800; font-family: system-ui, sans-serif; }
.pbar.talk .ptitle { font-size: 16px; }
.ptitle-chev { color: var(--p-dim); margin-left: 5px; font-weight: 500; }

/* THE PERSON ON TOP of a whisper — one compact card */
.pprofile { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--p-panel);
  border-bottom: 1px solid var(--p-line); }
.pprofile-av { flex: 0 0 auto; display: inline-flex; }
.pprofile-av .avatar { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 17px; font-weight: 700; border: 2px solid; }
.pprofile-av .ppres { width: 12px; height: 12px; }
.pprofile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pprofile-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.pprofile-nm { font-size: 16px; font-weight: 800; }
.pprofile-tag { font-size: 12px; font-weight: 650; background: var(--p-panel-hi); border: 1px solid var(--p-line); border-radius: 999px; padding: 1px 8px; }
.pprofile-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.pprofile-facts .pmeters { gap: 8px; }
.pprofile-card { position: relative; display: inline-flex; }
.pprofile-card .pcard.mini { --cw: 28px; --ch: 37px; }
.pprofile .prole { flex: 0 0 auto; }
.pprofile .prole .pcard.mini { --cw: 42px; --ch: 56px; }
.pprofile.out .pprofile-av .avatar { filter: grayscale(1); }
.pprofile.out .pprofile-nm { color: var(--p-dim); }

/* THE ROUND DIVIDER — Slack's day line, for a round */
.pdivider { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px 0 8px; }
.pdivider-rule { position: relative; width: 100%; display: flex; justify-content: center; }
.pdivider-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--p-line); }
.pdivider-pill { position: relative; font-size: 12px; font-weight: 750; letter-spacing: .02em; padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--p-line); background: var(--p-bg); color: var(--p-ink); }
.pdivider-sub { font-size: 12px; line-height: 1.4; color: var(--p-dim); text-align: center; max-width: 92%; padding: 0 6px; }
.pdivider.before .pdivider-pill { color: var(--p-dim); font-weight: 600; }
.pmsgs-in > .pdivider:first-child, .pintro + .pdivider { margin-top: 4px; }

/* a channel's people, listed */
.plist[data-block="members"] .prow { min-height: 52px; }
.plist[data-block="members"] .prow.left .prav { filter: grayscale(1); opacity: .6; }

/* THE DESKTOP — the conversations · the page · the open conversation */
.pcols { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(320px, 360px); }
@media (min-width: 1400px) { .pcols { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(360px, 420px); } }
.pside.left { padding: 4px 0 12px; gap: 0; }
.pside.left > .pside-title { padding: 8px 16px 0; }
.pside.left .ppeople { padding-left: 8px; padding-right: 8px; }
.pside.left .pperson { flex-basis: 58px; }
.pside.left .pperson-av .avatar { width: 42px; height: 42px; border-radius: 13px; font-size: 15px; }
.pside.left .prow.convo { min-height: 54px; padding: 6px 14px; }
.pside.left .prow.convo .prav .avatar, .pside.left .prow.convo .prglyph { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
.pside.left .pgroupav .pwho { width: 36px; height: 36px; }
.pside.left .prow.convo .pgroupav .avatar { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; }
.pside-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: var(--p-head);
  border-bottom: 1px solid var(--p-line); background: var(--p-panel); }
.pside-head .ptitles { min-width: 0; cursor: pointer; }
.pside.right:not(.chat) > .pside-head { margin: -8px -10px 0; }
.pside.right.chat { padding: 0; gap: 0; overflow: hidden; display: flex; flex-direction: column; }
.pside.right.chat .pmsgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; padding: 8px 10px; }
.pside.right.chat .pcomposer { flex: 0 0 auto; position: relative; border-top: 1px solid var(--p-line); background: var(--p-panel);
  padding: 8px 10px; gap: 8px; align-items: flex-end; }
.pside.right.chat .pcomposer .pinput { border-radius: 20px; padding: 10px 14px; }
.pside.right.chat .ptyping { font-size: 12px; color: var(--p-dim); padding: 2px 6px; }
.pside.right .pprofile { padding: 8px 12px; }
.pbar.talk .phead { font-family: inherit; font-size: 12px; }
/* a face's number reads light on its dark hue, by day too */
.proom :is(.pwho, .pperson-av, .prow.convo .prav, .pprofile-av, .pmsg-av, .plist[data-block="members"] .prav) .avatar { color: #f4efe7; }
.pside-head .phead { font-family: inherit; font-size: 12px; }
/* a conversation you may only read stays on the list as itself — quieter
   words, but what is unread there still lights */
.prow.convo.muted { opacity: 1; }
.prow.convo.muted:not(.unread) .prlabel, .prow.convo.muted .prglyph { color: var(--p-dim); }
.prow.convo.left { opacity: .6; }
/* THE ARCHIVE — the conversations gone quiet (whispers with the out, rooms
   you left or that closed, the out's hindsight), at the foot of Chat,
   collapsed: one thumb-wide header (a tap opens it; the chevron says which).
   Nothing in it lights like the living's: its counts and its unread edge are
   quiet greys, never the accent. */
.plist.parchive { background: none; border: 0; border-radius: 0; padding: 2px 0 12px; }
.parchive-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 7px 16px;
  border: 0; border-radius: 0; background: none; color: var(--p-dim); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.parchive-head:active, .parchive-head:focus-visible { background: var(--p-panel-hi); outline: none; }
.parchive-glyph { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--p-panel-hi); border: 1px dashed var(--p-line); font-size: 18px; filter: grayscale(.7); }
.parchive-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.parchive-label { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.parchive-sub { font-size: 13px; line-height: 1.3; }
.parchive-chev { flex: 0 0 24px; text-align: center; font-size: 14px; }
.parchive-head.open .parchive-label { color: var(--p-ink); }
.parchive .prow.convo:not(.left) { opacity: .8; }
.parchive .prow.convo.unread::before { background: var(--p-dim); }
.parchive .prow.convo :is(.prbadge, .prbadge.mention) { background: var(--p-panel-hi); color: var(--p-dim); }
.parchive .prow.convo.unread .prtime { color: var(--p-dim); }
.pside.left .parchive-head { min-height: 50px; padding: 6px 14px; }
.pside.left .parchive-glyph { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; font-size: 16px; }
.psay.pmsg.new::after { right: 0; }
/* every tap in the talk is a thumb's (≥ 32px) */
.pmore-link { min-height: 32px !important; padding: 0 4px !important; }
.pdivider { min-height: 32px; justify-content: center; padding: 2px 0; border-radius: 10px; }
:is(.pmsgs, .pside) .prec.psys { min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 4px 8px; }
.pprofile .ppile { min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; }
.pperson.current .pperson-av .avatar { box-shadow: 0 0 0 2px var(--p-bg), 0 0 0 4px var(--p-accent); }
/* a section's label is one row — its ＋ / All › at the end, never a float the
   people strip would shrink beside */
.plist:is(.pstrip, [data-block="convos"], [data-block="dms"]) > .plabel { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plist:is(.pstrip, [data-block="convos"], [data-block="dms"]) > .plabel > button { float: none; margin-left: auto; }
.plist:is(.pstrip, [data-block="convos"], [data-block="dms"]) > .plabel { min-height: 32px; padding-top: 6px; padding-bottom: 0; }
.plist:is(.pstrip, [data-block="convos"], [data-block="dms"]) > .plabel > button { margin-top: -2px; margin-bottom: -2px; }

/* ---------------------------------------------------------------- THE BAND, WITH YOU (2026-10-12)
   Your seat is the band's FIRST tile — always top-left, unmistakably you:
   the accent, "You" over your name, your role in words, all your meters.
   The bottom plate is gone (the strip gets its height). The order never
   moves: aiming greys the seats that can't take the card, in place. A line
   a seat speaks is a 💬 on its face (no cut-off words on a phone). A peek
   rides the head, over the titles — never over a seat or a landing. */
.pbt.you { border-color: var(--p-accent); background-color: var(--p-panel-hi);
  background-image: linear-gradient(var(--p-accent-soft), var(--p-accent-soft)); box-shadow: inset 0 0 0 1px var(--p-accent); }
.pbt.you .avatar { box-shadow: 0 0 0 2px var(--p-accent); }
.pbt-you { color: var(--p-accent); font-weight: 800; }
.pbt-me { margin-left: 5px; font-size: 11px; font-weight: 600; color: var(--p-dim); }
.pbt-role { font-size: 11px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pbt-role.unknown { color: var(--p-dim); font-weight: 500; }
.pbt.you .pmeters { flex-wrap: wrap; row-gap: 2px; }
.pbt-ids { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.pbt-id { font-size: 11px; line-height: 1.3; white-space: nowrap; background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 999px; padding: 0 6px; }
/* THE COLUMNS — by shape, and by count: four seats are two by two */
.pband.grid .pband-row:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* your seat takes TWO cells when that costs no row (five in a grid of
   three; any count but a multiple of four in the dense band) — room for
   "You", your name and your role in words; else one cell, your role riding
   your face like everyone's */
.pband.grid .pband-row:has(> :nth-child(5):last-child) > .pbt.you,
.pband.tiles .pband-row:not(:has(> :nth-child(4n):last-child)) > .pbt.you { grid-column: span 2; }
.pband.tiles .pbt.you .pbt-role, .pband.tiles .pbt.you .pbt-ids, .pband.tiles .pbt.you .pbt-me { display: none; }
.pband.tiles .pband-row:not(:has(> :nth-child(4n):last-child)) > .pbt.you .pbt-role { display: block; }
.pband.tiles .pband-row:not(:has(> :nth-child(4n):last-child)) > .pbt.you .pbt-me { display: inline; }
.pband.tiles .pbt.you { max-height: none; }
/* your group, counted — one quiet line over the band */
.pseats .pband > .plabel { padding: 0 4px 3px; font-size: 11px; line-height: 1.2; }

/* THEY SPOKE — a 💬 on the face; typing is three dots. (The words are on
   Chat; a phone's tile has no room for them.) */
.pbt-talk { position: absolute; right: -7px; top: -7px; z-index: 2; width: 18px; height: 18px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; line-height: 1; background: var(--p-panel);
  border: 1px solid var(--p-accent); box-shadow: 0 1px 3px rgba(0,0,0,.3); animation: ppop .25s ease-out; }
.pbt-talk.typing { display: flex; gap: 2px; width: 22px; }
.pbt-talk.typing i { width: 3px; height: 3px; border-radius: 50%; background: var(--p-accent); animation: pdot 1.2s infinite ease-in-out; }
.pbt-talk.typing i:nth-child(2) { animation-delay: .15s; } .pbt-talk.typing i:nth-child(3) { animation-delay: .3s; }
.pband.tiles .pbt-talk { right: -6px; top: -6px; }
.pbt-said { display: none; }
/* a DESKTOP's roomy seat shows the line itself — two lines at most */
.pcols .pband:not(.tiles) .pbt-said { display: block; font-size: 12px; line-height: 1.3; color: var(--p-ink); background: var(--p-panel);
  border: 1px solid var(--p-line); border-radius: 8px 8px 8px 2px; padding: 2px 7px; animation: ppop .25s ease-out; }
.pcols .pband:not(.tiles) .pbt-said > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcols .pband:not(.tiles) .pbt-talk:not(.typing) { display: none; }
.pcols .pband.plate .pbt, .pcols .pband.row .pbt, .pcols .pband.grid .pbt { max-height: none; }

/* WHILE AIMING — the seats that can't take the card GREY OUT in place */
.pact:has(:is(.pbt.target, .pbt.drop)) .pbt:not(.target):not(.picked):not(.drop) { opacity: .38; filter: grayscale(.9); }

/* A PEEK, IN THE HEAD — over the titles only (the info button, your-move
   pill and the clock's bar stay); one line; tap opens the talk */
.ptitles { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.pbar .ptoast { position: absolute; top: 4px; bottom: 4px; left: 0; right: 0; width: auto; max-width: 560px; z-index: 6;
  display: flex; align-items: center; gap: 8px; padding: 0 10px 0 6px; margin: 0;
  border-radius: 12px; border: 1px solid var(--p-accent); background: var(--p-panel-hi); color: var(--p-ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: ptoast-in .18s ease-out; font: inherit; text-align: left; cursor: pointer; }
.pbar .ptoast .avatar { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px; font-size: 12px; }
.pbar .ptoast-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pbar .ptoast .pby { font-size: 12px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar .ptoast-text { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ptoast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* the head's "your move" is a real tap target */
.pyour { min-height: 32px; display: inline-flex; align-items: center; }

/* A LONG CARD NAME FITS — smaller (never under 9px) and, with a space, two
   lines (PUSH HARD · HALF IDOL · NULLIFIER): ten letters stand whole on the
   hand's smallest card; the hero has the room at its own size */
.pcard:not(.hero) .cname.long { font-size: 10px; letter-spacing: 0; padding: 0 3px; line-height: 1.08;
  white-space: normal; overflow-wrap: normal; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard:not(.hero) .cname.xlong { font-size: 9px; }

/* ---------------------------------------------------------------- SIZES BY SCREEN (2026-10-12)
   The Play page spends the screen it has: a short phone keeps everything
   standing; a tall phone grows the seats and the hand into the room the
   bottom plate left; a desktop's middle column is a table, not a phone. */
.phand { --hcw: 66px; }
.phc .pcard { --cw: var(--hcw); --ch: calc(var(--hcw) * 4 / 3); }
.phand { min-height: calc(var(--hcw) * 4 / 3 + 10px); }
/* the dense band's faces are real sizes (no scaled-down text) */
.pband.tiles .pbt .pav, .pband.tiles .pbt .avatar { transform: none; }
.pband.tiles .pbt-top .avatar { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
.pbt-roleicon, .pband.tiles .pbt-roleicon { width: 17px; height: 17px; font-size: 10px; right: -6px; bottom: -5px; }
.pband.tiles .pbt .pmeters { font-size: 11px; }
.pband.tiles .pbt-name { font-size: 12px; }
/* the other rooms' faces are tap targets */
.proom-seat .avatar { width: 32px; height: 32px; font-size: 12px; }

@media (min-height: 780px) {
  .phand { --hcw: 76px; }
  .pbt-top .avatar { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
  .pbt-name { font-size: 15px; }
  .pbt-me { font-size: 12px; }
  .pbt-role { font-size: 12px; }
  .pbt .pmeters { font-size: 13px; }
  .pband.tiles .pbt-top .avatar { width: 26px; height: 26px; font-size: 12px; }
  .pband.tiles .pbt-name { font-size: 13px; }
  .pband.plate .pbt { min-height: 96px; }
  .pband.row .pbt { min-height: 84px; }
  .pband.grid .pbt { min-height: 70px; max-height: 96px; }
  .pband.tiles .pbt { min-height: 54px; max-height: 70px; }
}
/* a short phone: everything stands; the middle gives first */
@media (max-height: 700px) {
  .pband.tiles .pbt { min-height: 44px; }
}
/* A DESKTOP — the middle column is a table: bigger seats, a real hand */
.pcols .phand { --hcw: 96px; }
.pcols .pbt-top .avatar { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }
.pcols .pbt-name { font-size: 16px; }
.pcols .pbt-me, .pcols .pbt-role { font-size: 13px; }
.pcols .pbt .pmeters { font-size: 14px; }
.pcols .pband.tiles .pbt-top .avatar { width: 28px; height: 28px; font-size: 12px; }
.pcols .pband.tiles .pbt-name { font-size: 14px; }
.pcols .pband.plate .pbt { min-height: 120px; }
.pcols .pband.row .pbt { min-height: 104px; }
.pcols .pband.grid .pbt { min-height: 84px; }
.pcols .pband.tiles .pbt { min-height: 62px; max-height: none; }
/* YOUR NAME stands under "You" — two short lines beside your face, never a cut */
.pbt.you .pbt-name { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.pbt.you .pbt-you { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbt.you .pbt-me, .pband.tiles .pbt.you .pbt-me,
.pband.tiles .pband-row:not(:has(> :nth-child(4n):last-child)) > .pbt.you .pbt-me {
  display: block; margin-left: 0; font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcols .phc .cicon { font-size: 46px; }
.pcols .phc .cname { font-size: 11px; }
.pcols .pbt .pmeters .pip { width: 9px; height: 9px; }
.pcols .pbt-roleicon { width: 19px; height: 19px; font-size: 11px; }
@media (min-height: 780px) { .phc .cicon { font-size: 40px; } }
/* LOCKED IN — a green ring round the face and a small tick at its foot,
   so the name keeps the width */
.pbt-lock { position: absolute; left: -5px; bottom: -5px; z-index: 2; width: 14px; height: 14px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; font-weight: 900; line-height: 1;
  color: #fff; background: var(--p-good); box-shadow: 0 0 0 2px var(--p-panel-hi); }
.pbt-av:has(> .pbt-lock) > .avatar { box-shadow: 0 0 0 2px var(--p-good); }
.pbt-marks:empty { display: none; }
/* your seat over two cells: your role stands beside your name, one row less */
:is(.pband.tiles .pband-row:not(:has(> :nth-child(4n):last-child)),
    .pband.grid .pband-row:has(> :nth-child(5):last-child)) > .pbt.you {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-content: start; }
:is(.pband.tiles .pband-row:not(:has(> :nth-child(4n):last-child)),
    .pband.grid .pband-row:has(> :nth-child(5):last-child)) > .pbt.you > :not(.pbt-top):not(.pbt-role) { grid-column: 1 / -1; }
:is(.pband.tiles .pband-row:not(:has(> :nth-child(4n):last-child)),
    .pband.grid .pband-row:has(> :nth-child(5):last-child)) > .pbt.you > .pbt-role { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; max-width: 100%; }
/* two seats are a facing PAIR — side by side, you on the left */
.pband.plate .pband-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the roster's role chips are tap targets */
.prosterc { min-height: 32px; display: inline-flex; align-items: center; }

/* THE STORY'S TALK — one line that ENDS in an ellipsis (a cut word with no
   "…" read as broken); the whole line is a tap away on Chat */
.pstory .psay .ptext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstory .psay .pby { flex: 0 0 auto; }
/* the other rooms read on one run: the room's name, then its faces (a line saved) */
.proom-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 6px; }
.proom-name { margin: 0 4px 0 0; }
.proom-seats { display: contents; }
/* a DENSE seat: the name has the first row; meters (as numbers) and marks share the second */
.pband.tiles .pbt-mid .pbt-marks { margin-left: auto; flex: 0 0 auto; font-size: 12px; }
.pband.tiles .pbt .pmeters { gap: 6px; }
.pband.tiles .pbt .meter.counter .mval { font-size: 12px; }
.pcols .phand { padding-top: 14px; }

/* A STACK in History — a card many put down the same way: one card, ×n,
   its players named beneath (a crowded side: 20 efforts, a camp of Stays) */
.pplayer.stack { max-width: 100%; flex: 1 1 140px; }
.pplayer.stack .pplay { position: relative; }
.pstack-n { position: absolute; right: -8px; top: -6px; min-width: 24px; height: 22px; line-height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--p-accent); color: var(--p-on-accent); font-size: 12px; font-weight: 800; text-align: center;
  box-shadow: 0 0 0 2px var(--p-panel); }
.pplayer.stack .pplay-name { white-space: normal; text-align: left; font-size: 12px; line-height: 1.35; max-width: 220px; }

/* ---------------------------------------------------------------- YOUR TILE IS YOUR SPOT (2026-10-16)
   No "your spot" below the seats: your tile — the band's first, top-left —
   is where a card aimed at no one LANDS (it lights, `.drop`, while one is
   held; the one the finger means says HERE, `.over`) and where what you
   put down STANDS (your committed slot, your cards down), as your cards
   stand on a rival's tile. Pick one up to take it back. */
.pbt.drop { outline: none; border-color: var(--p-accent); background-image: linear-gradient(var(--p-accent-soft), var(--p-accent-soft));
  animation: pglow 1.2s ease-in-out infinite; }
.pbt.drop.over { scale: 1.06; z-index: 3; animation: none; background-image: linear-gradient(var(--p-glow), var(--p-glow));
  box-shadow: 0 0 0 3px var(--p-accent), 0 0 0 6px var(--p-accent-soft), 0 0 22px 6px var(--p-glow); }
/* the lit landing says what lands there — at its foot, over nothing you read */
.pbt.drop .pbt-verb { position: absolute; top: auto; bottom: 4px; left: 4px; right: auto; z-index: 4; }
/* YOUR CARDS on your tile stand at its corner, like yours on a rival's —
   a crowd of them fans tighter, never past the tile */
.pbt.you .paimed { max-width: calc(100% - 48px); justify-content: flex-end; }
.paimed[data-n="4"] .paimed-card + .paimed-card,
.paimed[data-n="5"] .paimed-card + .paimed-card { margin-left: -26px; }
.paimed:is([data-n="6"], [data-n="7"], [data-n="8"], [data-n="9"], [data-n="10"]) .paimed-card + .paimed-card { margin-left: -29px; }
.paimed-card.locked { cursor: default; }
/* a roomy tile (a pair, a row) stands your cards bigger; a dense one smaller */
.pband.plate .pbt.you .paimed-card .pcard { --cw: 46px; --ch: 62px; }
.pband.row .pbt.you .paimed-card .pcard { --cw: 40px; --ch: 54px; }
.pband.plate .pbt.you .paimed[data-n] .paimed-card + .paimed-card { margin-left: -32px; }
.pband.row .pbt.you .paimed[data-n] .paimed-card + .paimed-card { margin-left: -28px; }
/* your tile's name and role keep clear of the cards standing on it */
.pbt.you.holding > .pbt-top, .pbt.you.holding > .pbt-role { padding-right: 34px; }
.pband.plate .pbt.you.holding > .pbt-top, .pband.plate .pbt.you.holding > .pbt-role { padding-right: 52px; }
/* a DENSE tile's first row is your name and role: your cards stand at its
   foot, beside the meters, small */
.pband.tiles .pbt.you .paimed { top: auto; bottom: 3px; right: 5px; }
.pband.tiles .pbt.you .paimed-card .pcard { --cw: 22px; --ch: 30px; }
.pband.tiles .pbt.you .paimed[data-n] .paimed-card + .paimed-card { margin-left: -14px; }
.pband.tiles .pbt.you.holding > .pbt-top, .pband.tiles .pbt.you.holding > .pbt-role { padding-right: 0; }
/* a card standing on a tile is its face alone — never a cut name */
.paimed-card .pcard .cname.long { display: none; }
/* your committed slot reads like everyone's */
.pbt.you .pbt-slot { flex: 0 0 auto; }

/* A LAYER — a person or a talk opened from Play (or History) slides over it;
   ‹ says where it returns */
.pback.layer { width: auto; min-width: 40px; padding: 0 10px 0 7px; display: inline-flex; align-items: center; gap: 5px; }
.pback-to { font-size: 13px; font-weight: 700; font-family: system-ui, sans-serif; }
@keyframes player-in { from { transform: translateX(18px); opacity: .4; } to { transform: none; opacity: 1; } }
.pbody.layer { animation: player-in .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .pbody.layer { animation: none; } }