/* Shared finishing layer: same typography, gold, paper and focus language in every room. */
:root{--pc-gold:#f2b544;--pc-cream:#fbf6ea;--pc-plum:#2a1330;--pc-focus:#ffd98a}
button,input,select,textarea{font-family:var(--sans)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pc-focus);outline-offset:3px}
.sheet,.places-dialog,#voice-guide{border-top:3px solid var(--pc-gold)}
.sheet h2,.places-dialog h2,#voice-guide h2{font-family:var(--disp);letter-spacing:-.035em}
#rulesheet .sheet,#histsheet .sheet,#menusheet .sheet{scroll-padding:16px}
.tk-p.has-portrait{position:relative}.tk-p.has-portrait>.cast-avatar{flex-shrink:0}
.gr-dialog{--gr-green:#163e35;--gr-clay:#983b24;--gr-paper:var(--pc-cream);--gr-gold:var(--pc-gold);font-family:var(--sans);background:var(--gr-paper);border-color:#bd944d}
.gr-top{background:#231229;color:var(--pc-cream);border-bottom:2px solid var(--gr-gold);padding-top:max(10px,env(safe-area-inset-top));}
.gr-top .gr-secondary{color:var(--pc-cream);border-color:#9c829e}
.gr-body{background:radial-gradient(ellipse at 100% 0,#f2b54418,transparent 42%),var(--pc-cream);padding-bottom:max(24px,env(safe-area-inset-bottom))}
.gr-body h2,.gr-game strong,.gr-social-prompt{font-family:var(--disp);letter-spacing:-.035em}
.gr-body h2{font-weight:800;font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.12;overflow-wrap:anywhere}
.gr-kicker,.gr-top strong{font-family:var(--mono);letter-spacing:.1em}
.gr-culture-ribbon{display:flex;align-items:center;gap:12px;padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid #b9a57666}
.gr-culture-ribbon strong{display:block;font-size:.78rem;line-height:1.4}.gr-culture-ribbon span:not(.cast-avatar):not(.cast-portrait){display:block;font-size:.72rem;line-height:1.4;color:#596a5d;margin-top:3px}
.gr-cousins{display:flex;flex-shrink:0;padding-left:5px}.gr-cousins .cast-avatar{width:38px;height:38px;margin-left:-5px;border:2px solid var(--pc-cream);box-shadow:0 2px 5px #0002}
.gr-game{border-radius:18px;min-height:136px;border:1px solid #c4b697;box-shadow:0 4px 0 #d6c5a5;background:linear-gradient(150deg,#fffdf5,#f4ead4)}
.gr-game strong{font-size:1.25rem;font-weight:800}.gr-game .gr-icon{width:44px;height:44px;border-radius:13px;background:#ead7b1;display:grid;place-items:center;color:#68401b;font-size:1.8rem}
.gr-score{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:9px;align-items:center;background:#f3ead5;padding:10px;min-width:120px}.gr-score>.cast-avatar{grid-row:span 2;width:34px;height:34px;margin:0}.gr-score strong{font-size:.85rem;overflow-wrap:anywhere}.gr-score span:not(.cast-avatar):not(.cast-portrait){font-size:.75rem}.gr-score.gr-current{border-color:#1a5945;box-shadow:inset 0 3px #1a5945;background:#e2ead8}.gr-score.gr-p2.gr-current{border-color:#983b24;box-shadow:inset 0 3px #983b24}
.gr-heritage{margin:16px 0;border:1px solid #c2b598;border-radius:14px;padding:0 13px;font-size:.82rem;line-height:1.6;background:#eee5d2}.gr-heritage summary{padding:12px 0;min-height:44px;font-weight:700;cursor:pointer}.gr-heritage .place-art{height:110px;border-radius:10px;margin:0}.gr-heritage a{color:#185441;font-weight:700;display:inline-block;padding:6px 0}.gr-heritage .gr-muted{font-size:.72rem}
.gr-board,.gr-domino-chain{border:2px solid #b69048;box-shadow:0 6px 0 #0d2923,0 12px 24px #122d291c;background-color:#143d33;background-image:radial-gradient(ellipse at 30% 0,#4d7c5322,transparent 80%)}
.gr-cell{font-family:var(--disp);font-weight:800}.gr-cell:focus-visible{outline:3px solid #d87218;outline-offset:-4px}.gr-domino-hand{border:1px solid #c0b18a;background:#ece3ce}.gr-word{background:#eadfca;border-radius:16px;border:1px solid #c2ab79}.gr-help summary{min-height:44px}
.gr-button{border-radius:12px}.gr-button:focus-visible,.gr-heritage summary:focus-visible,.gr-heritage a:focus-visible,.gr-body input:focus-visible,.gr-body select:focus-visible,.gr-body textarea:focus-visible{outline-color:#a95b16}
.gr-button[aria-pressed=true]{background:#e4b75f;color:#2d210d;border-color:#8d601e;box-shadow:inset 0 0 0 2px #6f4615}
.gr-night{background:radial-gradient(ellipse at 100% 0,#73425b55,transparent 60%),#25152d;color:var(--pc-cream)}.gr-dialog[data-room-tone=night]{background:#25152d}.gr-night .gr-culture-ribbon{border-color:#bc8c6e55}.gr-night .gr-culture-ribbon span:not(.cast-avatar):not(.cast-portrait){color:#d5c1d2}.gr-night .gr-cousins .cast-avatar{border-color:#25152d}.gr-night .gr-game{background:linear-gradient(135deg,#493044,#302136);box-shadow:0 4px 0 #180e20;border-color:#936878}.gr-night .gr-social-prompt{font-size:clamp(1.4rem,5vw,2rem);line-height:1.4;padding:24px 18px;border:1px solid #ac805c;border-radius:18px;background:#ffffff08}.gr-night .gr-button:focus-visible{outline-color:var(--pc-focus)}
.gr-dialog h2:focus{outline:none}.gr-body [hidden]{display:none!important}
@media(max-width:480px){.gr-culture-ribbon{gap:9px}.gr-cousins .cast-avatar{width:32px;height:32px}.gr-score{min-width:115px}.gr-body{padding:16px 14px 28px}.gr-game{min-height:128px}.gr-cols-7{gap:2px;padding:5px}.gr-cols-7 .gr-cell{height:auto;min-height:36px}.gr-top strong{max-width:65%;line-height:1.6}}
@media(prefers-reduced-motion:no-preference){.gr-button:not(.gr-cell):not(.gr-edge):not(.gr-memory){transition:background-color .15s,box-shadow .15s,transform .15s}.gr-game:hover{box-shadow:0 6px 0 #bbaa8c}.gr-night .gr-game:hover{box-shadow:0 6px 0 #170d1c}}

/* Bid sheet: your hand rides along so nobody bids blind; the table stays readable behind it. */
#bid{background:rgba(6,2,8,.38);backdrop-filter:none;-webkit-backdrop-filter:none}
.bid-hand{display:flex;justify-content:center;padding:6px 0 14px 22px;margin:0 0 6px;overflow:hidden}
.bid-hand .card{flex:0 0 auto;margin-left:-22px;box-shadow:-2px 2px 6px rgba(0,0,0,.35);animation:none;transform:none}
@media(max-width:360px){.bid-hand .card{margin-left:-26px}}

/* Invite landing: a guest's first ten seconds. */
#invite{justify-content:space-between;gap:22px;min-height:100dvh}
.invite-hero{padding-top:18px}
.invite-hero .brand{font-size:clamp(52px,16vw,84px);margin:10px 0 0;text-shadow:0 2px 0 rgba(0,0,0,.3),0 12px 40px rgba(0,0,0,.5)}
.invite-line{color:var(--muted);font-size:18px;line-height:1.35;margin:14px 0 18px;max-width:30ch}
.invite-line b{color:var(--white)}
.invite-ticket{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:18px;overflow:hidden}
.invite-ticket>div{background:rgba(10,4,12,.6);padding:12px 12px 13px;display:flex;flex-direction:column;gap:5px;min-width:0}
.invite-ticket .eyebrow{font-size:9.5px;color:var(--dim)}
.invite-ticket b{font-size:17px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.invite-ticket b.mono{font-family:var(--mono);letter-spacing:.14em}
.invite-label{font-weight:700;font-size:15px}
.invite-form .field{font-size:18px}
.invite-note{text-align:center;margin:2px 0 0}
.invite-foot{text-align:center}
.invite-closed .invite-ticket{opacity:.55}

/* Parked from Home for the family-night release (code kept, see PC.flags in index.html). */
html:not(.flag-motion) #home .home-tools,html:not(.flag-neighborhoods) #place-spotlight{display:none!important}

/* Card table (Spades, Bid Whist): the cards in play always win. Seat pods are compact chips at the
   edges, and the trick sits in a diamond sized to the felt, drawn above the pods. */
.arena{container-type:size}
.arena .pos{width:auto;max-width:44%}
.arena .pos.left,.arena .pos.right{top:50%}
.arena .tag-name.has-portrait{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:7px;align-items:center;text-align:left;padding:5px 10px 5px 5px;min-width:0;border-radius:999px}
.arena .tag-name.has-portrait::before{display:none}
.arena .tag-name.has-portrait>.cast-avatar{grid-row:1/3;width:28px;height:28px;float:none;margin:0;box-shadow:0 0 0 2px var(--teamA)}
.arena .tag-name.has-portrait.teamB>.cast-avatar{box-shadow:0 0 0 2px var(--teamB)}
.arena .tag-name.has-portrait .n{padding-left:0;font-size:12.5px;max-width:92px;line-height:1.15}
.arena .tag-name.has-portrait .b{font-size:10px;line-height:1.2}
.arena .tag-name.turn::after{inset:-4px;border-radius:999px}
.arena .pos .cards{display:none}
.trick{z-index:5}
.trick .card.top{--dy:calc(-1 * clamp(30px, 50cqh - 84px, 64px))}
.trick .card.bottom{--dy:clamp(30px, 50cqh - 84px, 64px)}
.trick .card.left{--dx:calc(-1 * clamp(40px, 50cqw - 136px, 64px))}
.trick .card.right{--dx:clamp(40px, 50cqw - 136px, 64px)}
/* Side seats stand tall and narrow so the left and right cards land beside them, not on them. */
.arena .pos.left .tag-name.has-portrait,.arena .pos.right .tag-name.has-portrait{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:2px;padding:6px 6px 7px;border-radius:16px;width:84px}
.arena .pos.left .tag-name.has-portrait>.cast-avatar,.arena .pos.right .tag-name.has-portrait>.cast-avatar{grid-row:auto}
.arena .pos.left .tag-name.has-portrait .n,.arena .pos.right .tag-name.has-portrait .n{max-width:74px}
.arena .pos.left .tag-name.has-portrait .b,.arena .pos.right .tag-name.has-portrait .b{white-space:normal;line-height:1.25}
.arena .pos.left .tag-name.turn::after,.arena .pos.right .tag-name.turn::after{border-radius:20px}

/* Family tables (Pitty Pat, Crazy Eights, Go Fish, War, Gin): opponents are compact chips so the
   pile and the card in play stay on screen; the arena grows instead of hiding cards in a scroll box. */
#ctable>#ct-arena,#tonk>.tk-arena{flex:1 0 auto;overflow:visible;max-height:none}
.fam-tile.has-portrait{display:grid;grid-template-columns:30px auto minmax(0,1fr);column-gap:7px;row-gap:0;align-items:center;justify-items:start;text-align:left;min-width:0;padding:6px 10px 6px 6px}
.fam-tile.has-portrait>.cast-avatar{grid-row:1/4;grid-column:1;width:30px;height:30px;margin:0}
.fam-tile.has-portrait .n{grid-column:2/4;max-width:88px;font-size:12.5px;line-height:1.2}
.fam-tile.has-portrait .big{grid-column:2;font-size:16px}
.fam-tile.has-portrait>div:not(.n):not(.big):not(.fam-books){grid-column:3;font-size:10.5px;line-height:1.2;white-space:nowrap}
.fam-tile.has-portrait .fam-books{grid-column:2/4;font-size:10px;min-height:0}
.fam-tile.has-portrait .bk{grid-column:2/4}
.fam-row{gap:6px}