/* The room shell leaves the first screen to the actual game. */
body[data-party-game] { background: #f6f5ef; }
body[data-party-game] .cover { object-fit: cover; aspect-ratio: 8 / 5; border: 1px solid #23372b12; box-shadow: 0 12px 28px #24382c12; }
body[data-party-game] .entry { gap: clamp(24px, 5vw, 64px); }
body[data-party-game] .entry-art h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tjl-rules-button { flex: none; padding: 5px 12px; border-radius: 99px; font: 650 13px/1.5 system-ui; letter-spacing: 0; vertical-align: middle; margin-inline-start: 10px; background: #fffdf6; border: 1px solid #b5c5b9; }
.tjl-room-rules { width: min(720px, calc(100% - 28px)); max-height: min(82svh, 780px); padding: 0; border: 1px solid #c2cec4; border-radius: 18px; color: #26342e; background: #fffef9; box-shadow: 0 20px 80px #16291e40; }
.tjl-room-rules::backdrop { background: #10251dcc; backdrop-filter: blur(3px); }
.tjl-rules-heading { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 15px; background: #fffef9; border-bottom: 1px solid #dce5da; padding: 14px 20px; z-index: 1; }
.tjl-rules-heading h2 { margin: 0; font-size: 20px; }
.tjl-rules-heading button { padding: 7px 14px; }
.tjl-rules-content { padding: 8px 22px 22px; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.tjl-rules-content p { white-space: pre-line; }
.tjl-rules-content details { margin-top: 15px; padding-top: 14px; border-top: 1px solid #dce5da; }
.tjl-rules-content summary { margin-bottom: 10px; }
.tjl-rules-content .fine { margin-bottom: 10px; }
.tjl-room-barrage { position: fixed; inset: 95px 0 auto; height: 240px; pointer-events: none; z-index: 150; overflow: hidden; direction: ltr; }
.tjl-room-bullet { position: absolute; left: 0; width: max-content; max-width: none; white-space: nowrap; font: 700 16px/1.5 system-ui; color: white; background: #18312ad9; border-radius: 99px; padding: 5px 13px; box-shadow: 0 2px 6px #0002; unicode-bidi: plaintext; }
.tjl-room-bullet-still { left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); white-space: normal; overflow-wrap: anywhere; width: max-content; }
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar { padding-block: 10px; }
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) main { padding-top: 12px; }
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar { padding: 8px 14px; border-radius: 12px; }
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar strong { font-size: 20px; }
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar button { padding: 7px 12px; font-size: 12px; }
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .connection-row { margin: 5px 0; font-size: 11px; }
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-game-title { margin: 9px 0 12px; font-size: clamp(19px, 2.5vw, 25px); }
body[data-party-game] :is(#invite-status, #room-error):empty { display: none; }
body[data-party-game] .chat { position: static; margin-top: 20px; padding: 14px 0 0; width: auto; }
body[data-party-game] .chat h2 { margin-bottom: 8px; font-size: 15px; }
body[data-party-game] .chat-messages { max-height: 150px; }
body[data-party-game] .chat form { margin-top: 9px; }
body[data-party-game] .chat input { min-height: 42px; }
@media(max-width:640px) {
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar { gap: 6px; padding-block: 8px; }
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) main { padding: 8px 10px 20px; }
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar>div { width: auto; margin-inline-start: auto; gap: 9px; }
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar select { max-width: 93px; padding: 5px; }
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar { gap: 8px; padding: 7px 10px; }
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar strong { font-size: 17px; }
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar small { font-size: 10px; }
 body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-game-title { margin-block: 7px 9px; }
 .tjl-rules-button { padding: 4px 10px; font-size: 12px; }
 .tjl-rules-content { padding-inline: 16px; font-size: 14px; }
 .tjl-room-barrage { top: 80px; }
 body[data-party-game] .entry-art .cover { max-height: 210px; }
}

/* Shared kits for words, deduction and simultaneous choices. No game state is hidden. */
.party-game :is(.fm-heading,.wc-heading,.pt-heading){padding:10px 13px;margin-bottom:9px;border-radius:13px;gap:10px}
.party-game :is(.fm-heading,.wc-heading,.pt-heading) h2{font-size:20px;line-height:1.3;margin:3px 0}
.party-game :is(.fm-emblem,.wc-emblem,.pt-emblem){display:none}
.party-game :is(.fm-players,.wc-players,.pt-players){grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-block:8px}
.party-game :is(.fm-player,.wc-player,.pt-player){padding:8px 7px;border-radius:10px;min-width:0}
.party-game :is(.fm-player,.wc-player,.pt-player)>b{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.party-game :is(.fm-player,.wc-player,.pt-player) small{font-size:10px;line-height:1.4;margin-top:4px}
.party-game :is(.fm-player.fm-active,.wc-player.wc-active,.pt-player.pt-active){border-color:#d5393d;box-shadow:0 0 0 2px #d5393d33}
.party-game :is(.fm-panel,.wc-panel,.pt-panel){padding:12px 13px;margin-top:9px;border-radius:13px}
.party-game :is(.fm-panel,.wc-panel,.pt-panel) h3{font-size:14px;margin-bottom:8px}
.party-game :is(.fm-actions,.wc-actions,.pt-actions){gap:12px;margin-top:10px}
.party-game :is(.fm-activity,.wc-activity,.pt-activity){display:none}
.party-game :is(.fm-hint,.wc-hint,.pt-hint){margin-block:6px;line-height:1.5}
.party-game :is(.fm-center,.wc-center,.pt-center){margin-block:9px;padding:14px}
@media(max-width:380px){.party-game :is(.fm-player,.wc-player,.pt-player){padding-inline:5px}.party-game :is(.fm-player,.wc-player,.pt-player)>b{font-size:11px}}

.party-game .tg-team{padding:9px 10px;border-radius:12px}.party-game .tg-team h3{margin-bottom:5px;font-size:12px}.party-game .tg-person{font-size:12px;padding:3px 0}.party-game .tg-number{font-size:22px;margin-top:3px}.party-game .tg-subhead{margin-top:12px!important}.party-game .tg-teams{gap:8px}.party-game .tg-clue{margin-top:9px;padding:10px 13px}.party-game .tg-team.tg-current{border-color:#d5393d;box-shadow:0 0 0 2px #d5393d33}

body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .connection-row:has(#connection[data-state=connected]):not(:has(button:not([hidden]))):not(:has(#turn-clock:not(:empty))){display:none}
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar{padding-block:7px}
body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-game-title{margin-block:7px 9px}
@media(max-width:640px){body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar button{padding:5px 9px;min-height:29px}body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-bar{padding-block:5px}body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .room-game-title{font-size:18px;margin-block:6px 9px}}

/* A consistent red turn outline survives each game's decorative table theme. */
body[data-party-game] .party-game.tjl-play-surface :is(.pc-seat.pc-turn,.mj-player.is-turn,.gd-seat.gd-active,.tc-player.tc-current,.tc-player.tc-active,.ll-player.ll-current,.sg-player.sg-current,.sk-mat.sk-active,.sn-player.sn-active,.gm-player.gm-current,.nt-player.nt-turn,.yd-summary.yd-active,.fm-player.fm-active,.wc-player.wc-active,.pt-player.pt-active,.fk-player.fk-active,.pg-person.pg-active,.nb-person.nb-active,.fw-person.fw-active,.mc-player.mc-active,.tg-team.tg-current){border-color:#d5363e;outline:2px solid #d5363e;outline-offset:1px;box-shadow:0 0 0 3px #d5363e1a}

.party-game .tg-number{position:absolute;top:7px;inset-inline-end:9px;font-size:22px;margin:0}.party-game .tg-team h3{padding-inline-end:24px}.party-game .tg-person{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;margin-inline-end:8px;padding-block:3px}.party-game .tg-person small{display:inline;font-size:9px;margin:0}

@media(max-width:640px){body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar a[data-t=home]{display:none}body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar>.brand{font-size:15px}}
@media(max-width:380px){body[data-party-game]:has(:is(#game-area,#table):not([hidden])) .site-bar a[data-t=partyHome]{display:none}}

.tjl-room-barrage:has(.tjl-room-bullet-still){height:calc(100svh - 105px)}