/* The cards live on the 3D table; this strip provides names and keyboard picks. */
.tp-setup-cover {position:fixed;inset:0;z-index:1800;pointer-events:none;color:#f5edda;font-family:system-ui,sans-serif}
.tp-setup-panel {position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(920px,calc(100% - 28px));box-sizing:border-box;max-height:42vh;display:flex;flex-direction:column;overflow:hidden;padding:12px 20px;background:rgba(17,34,36,.97);border:1px solid #b49c71;border-radius:12px;box-shadow:0 8px 40px #0009;pointer-events:auto}
.tp-setup-panel h2 {font:600 22px Georgia,serif;margin:0 0 6px}.tp-setup-note {font-size:14px;line-height:1.4;margin:0 0 8px}
/* The spoken line (F3-058): the opening line, and online each dealt card's meaning. */
.tp-setup-voice {margin:-6px 0 6px;padding:2px 8px;font-size:14px;line-height:1.35}
/* It sits in the note's own bottom margin, so the cards keep the height C17 sized them for (UX-DEAL-05). */
.tp-setup-note:has(+ .tp-setup-voice:not([hidden])) {margin-bottom:4px}
.tp-setup-decks {display:flex;gap:16px;flex:0 1 auto;min-height:0;overflow-y:auto}.tp-setup-decks section.tp-setup-active{flex:3 1 0}.tp-setup-decks section {flex:1;min-width:0;border-top:2px solid #6da99e;padding-top:5px}.tp-setup-decks section:nth-child(2){border-color:#cfaf72}.tp-setup-decks section:nth-child(3){border-color:#ae95bb}
.tp-setup-decks h3 {margin:0 0 3px;font-size:14px}.tp-setup-picks {display:flex;flex-wrap:wrap;gap:4px;font-size:13px}.tp-setup-picks span{opacity:.7}
.tp-setup-cover button {border:1px solid #829c98;border-radius:6px;padding:8px 11px;background:#2b4645;color:#fff9e8;cursor:pointer;font:inherit}.tp-setup-cover button:hover{background:#44645f}.tp-setup-cover button:focus-visible{outline:3px solid #f3d494;outline-offset:2px}.tp-setup-cover button:disabled{opacity:.45;cursor:default}.tp-setup-picks button{font-size:12px;padding:5px 8px}
.tp-setup-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;flex:none;font-size:14px}.tp-setup-actions [data-setup="auto"],.tp-setup-actions [data-setup="ready"]{background:#876b36}.tp-setup-actions [data-setup="ready"]{font-weight:600;padding:9px 18px}.tp-setup-actions [data-setup="cancel"]{margin-left:auto;background:transparent}
.tp-setup-preview {pointer-events:auto;position:absolute;right:16px;top:16px;width:min(220px,23vw);padding:8px;border:1px solid #b49c71;background:#16282b;border-radius:8px}.tp-setup-preview canvas{display:block;width:100%;height:auto}.tp-setup-preview p{margin:5px 0 0;font-size:14px}
.tp-setup-handover {position:absolute;inset:0;background:#142528;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:auto;text-align:center;padding:30px}.tp-setup-handover[hidden],.tp-setup-panel[hidden],.tp-setup-preview[hidden]{display:none}
body.tp-setup-open #net-lobby,body.tp-setup-open #enlarge,body.tp-setup-open #inspector {visibility:hidden}
@media(max-width:600px){.tp-setup-panel{padding:10px;max-height:48vh}.tp-setup-panel h2{font-size:18px}.tp-setup-note,.tp-setup-voice{font-size:12px}.tp-setup-decks{gap:8px}.tp-setup-preview{width:min(260px,calc((52vh - 84px)*.714))}.tp-setup-actions{font-size:12px}}
/* The seat pane during the deal: where js/solo.css #tp-solo-you sits in play
   (style.css #tp-dock: 74px down, 20px in, 344px wide), in its colours, with
   larger type because here it is for reading rather than glancing. It stops
   above the chooser, and grows once the chooser shrinks to the review step. */
.tp-setup-hand[hidden] { display: none; }
.tp-setup-hand {pointer-events:auto;position:absolute;top:74px;left:20px;width:min(calc(100vw - 40px),344px);box-sizing:border-box;max-height:calc(58vh - 104px);overflow-y:auto;padding:10px 12px;background:rgba(6,22,27,.97);border:1px solid var(--teal-line,#1d4a52);border-radius:4px;color:var(--text,#cfe3e6);scrollbar-width:thin}
.tp-setup-cover.tp-reviewing .tp-setup-hand {max-height:calc(var(--tp-panel-top, calc(100vh - 240px)) - 74px - 12px)}
.tp-setup-hand .you-head {padding-bottom:4px}
.tp-setup-hand .you-title {font:700 10px var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dim,#b56a26)}
.tp-hand-who {margin:0 0 4px;font:600 12px system-ui,sans-serif;color:var(--text,#cfe3e6)}.tp-hand-who[hidden]{display:none}
.tp-hand-intro {margin:0 0 8px;font-size:12px;line-height:1.4;color:var(--text-dim,#7fa0a6)}
.tp-hand-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tp-hand-card {display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;padding:6px;border-radius:5px;border:1px solid transparent}
.tp-hand-slot {display:block;width:64px;height:90px;box-sizing:border-box;border:1px dashed var(--teal-line,#1d4a52);border-radius:4px}
.tp-hand-words {min-width:0;display:flex;flex-direction:column;gap:3px;transition:opacity .35s ease-out}
.tp-hand-kind {font:700 10px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim,#7fa0a6)}
.tp-hand-wait {font-size:12px;color:var(--text-dim,#7fa0a6)}
.tp-setup-cover .tp-hand-face {padding:0;border:0;background:none;line-height:0;border-radius:4px;cursor:zoom-in}
.tp-hand-face canvas {display:block;width:64px;height:90px;border-radius:4px;box-shadow:0 2px 8px #0008}
.tp-setup-cover .tp-hand-title {align-self:flex-start;padding:0;border:0;border-bottom:1px dotted var(--amber-dim,#b56a26);border-radius:0;background:none;font:600 15px system-ui,sans-serif;color:var(--amber,#ff9a3c);text-align:left;cursor:zoom-in}
.tp-setup-cover .tp-hand-title:hover,.tp-setup-cover .tp-hand-face:hover{background:none}.tp-setup-cover .tp-hand-title:hover{border-bottom-style:solid}
.tp-hand-meaning {margin:2px 0 0;padding:4px 6px;font-size:13px;line-height:1.4}
.tp-hand-effect {margin:0;font-size:12.5px;line-height:1.4;color:var(--text,#cfe3e6)}
.tp-hand-arriving .tp-hand-face {visibility:hidden}.tp-hand-arriving .tp-hand-words {opacity:0}
.tp-hand-new {animation:tp-hand-arrive 1.8s ease-out}
@keyframes tp-hand-arrive {0%{border-color:var(--amber,#ff9a3c);background:rgba(255,154,60,.16)}100%{border-color:transparent;background:transparent}}
.tp-hand-flyer {position:fixed;z-index:1;border-radius:4px;box-shadow:0 10px 30px #000a;pointer-events:none;transform-origin:0 0}
@media(prefers-reduced-motion:reduce){.tp-hand-new{animation:none;border-color:var(--amber-dim,#b56a26)}.tp-hand-words{transition:none}}
/* A phone: the pane runs across the top and shows names only while cards are
   still being chosen, so the table stays visible; the review step shows all. */
@media(max-width:600px){
  .tp-setup-hand{top:8px;left:8px;width:calc(100vw - 16px);max-height:24vh;padding:6px 8px}
  .tp-setup-cover.tp-reviewing .tp-setup-hand{max-height:calc(100vh - 16px - 190px)}
  .tp-hand-intro{display:none}
  .tp-setup-cover:not(.tp-reviewing) .tp-hand-card{grid-template-columns:28px 1fr;gap:8px;padding:2px 4px}
  .tp-setup-cover:not(.tp-reviewing) .tp-hand-slot,.tp-setup-cover:not(.tp-reviewing) .tp-hand-face canvas{width:28px;height:39px}
  .tp-setup-cover:not(.tp-reviewing) .tp-hand-meaning,.tp-setup-cover:not(.tp-reviewing) .tp-hand-effect{display:none}
  .tp-setup-cover:not(.tp-reviewing) .tp-hand-list{gap:2px}
}
/* The table's area headings as page text over their plates (js/setup-cards.js
   placeHeadings): sharp at any angle. Above the table, under the page's
   controls and every panel, as the plates themselves are. */
.tp-setup-headings {position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;color:#f5edda}
/* Who is choosing (F3-001): seat, colour and shape as the placemat shows them,
   and the House once dealt. The glow on the ◎ Your area button as play begins
   is F3-003: the way back to your own placemat, pointed out once. */
.tp-setup-you {display:flex;gap:10px;align-items:flex-start;margin:0 0 6px;padding:6px 10px;border:1px solid #3d5b58;border-radius:8px;background:#0c1d1fcc;font-size:13px;line-height:1.4}
.tp-setup-swatch {flex:none;font-size:22px;line-height:1;text-shadow:0 0 6px currentColor}
.tp-setup-you-seat {font-size:14px}.tp-setup-you-house {font-weight:600;color:#f3d494}.tp-setup-you-where {color:#c8d7d4}
#tp-view .tp-zoom-area.tp-find-me {animation:tp-find-me 1.6s ease-out 5;outline:2px solid currentColor;outline-offset:2px}
@keyframes tp-find-me {0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){#tp-view .tp-zoom-area.tp-find-me{animation:none}}
@media(max-width:600px){.tp-setup-you{font-size:12px;padding:4px 8px}.tp-setup-you-where{display:none}}
.tp-setup-heading {position:absolute;transform:translate(-50%,-52%);white-space:nowrap;font-family:Georgia,serif;font-weight:700;color:#f7eedb;line-height:1;text-shadow:0 1px 2px #000a;pointer-events:none}
/* Hide cards (C15, F3-054): js/setup-cards.js SECRET_DECKS. The button is the
   first in the row and outlined in amber so a player sharing their screen can
   find it at once; its two labels follow body.tp-secrets-hidden (js/solo.css). */
.tp-setup-cover .tp-setup-hide {font:600 14px system-ui,sans-serif;letter-spacing:0;border:2px solid #f3d494;background:#16282b;color:#f3d494;padding:8px 14px}
.tp-setup-cover .tp-setup-hide[aria-pressed="true"] {background:#f3d494;color:#16282b}
.tp-hand-card .tp-hand-kind-plain,.tp-hand-card .tp-hand-masked {display:none}
body.tp-secrets-hidden .tp-hand-secret .tp-hand-kind-full,
body.tp-secrets-hidden .tp-hand-secret .tp-hand-title,
body.tp-secrets-hidden .tp-hand-secret .tp-hand-role-note,
body.tp-secrets-hidden .tp-hand-secret .tp-hand-effect {display:none}
body.tp-secrets-hidden .tp-hand-secret .tp-hand-kind-plain {display:inline}
body.tp-secrets-hidden .tp-hand-secret .tp-hand-masked:not([hidden]) {display:inline-block;font:italic 12px system-ui,sans-serif;border:1px dashed currentColor;border-radius:3px;padding:0 6px;align-self:flex-start}
body.tp-secrets-hidden .tp-hand-secret .tp-hand-face canvas,
body.tp-secrets-hidden .tp-hand-secret-flyer {visibility:hidden}
body.tp-secrets-hidden .tp-hand-secret .tp-hand-face {pointer-events:none}
/* What an online seat was dealt, shown on Continue after "Deal for me" (play-test E20). */
.tp-setup-dealt {list-style:none;margin:0;padding:0;display:flex;gap:16px}
.tp-setup-dealt li {flex:1;min-width:0;border-top:2px solid #6da99e;padding-top:5px}.tp-setup-dealt li:nth-child(2){border-color:#cfaf72}.tp-setup-dealt li:nth-child(3){border-color:#ae95bb}
.tp-setup-dealt b {display:block;font:700 11px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#c8d7d4}
.tp-setup-dealt-title {display:block;margin-top:2px;font:600 17px Georgia,serif;color:#f3d494}
.tp-setup-dealt p {margin:3px 0 0;font-size:13px;line-height:1.35}
@media(max-width:600px){.tp-setup-dealt{flex-direction:column;gap:6px}.tp-setup-dealt-title{font-size:15px}.tp-setup-dealt p{display:none}}
/* The chooser keeps its words and its buttons whole; only the lists of picks scroll if a small window cannot hold them (play-test E25). */
.tp-setup-panel > :not(.tp-setup-decks) {flex-shrink:0}
/* The guide opened from the dealing screen lies over it, whole, so all its buttons can be pressed (play-test E03). */
body.tp-setup-open #tp-help {z-index:1900}
/* The rules in force (lobby plan 3.4): one compact line while cards are chosen. The
   review of your own cards keeps its height, so the seat pane still clears it. */
.tp-setup-rules {font-size:12px;line-height:1.35;margin:0 0 6px;color:#b6ece0}
.tp-setup-rules[hidden],.tp-setup-cover.tp-reviewing .tp-setup-rules {display:none}