/* House table: a quiet, compact playing surface. */
:root { --ink:#203a34; --muted:#697770; --paper:#f4f1e9; --line:#dedfd5; --green:#194b40; --gold:#e6c47d; }
.game-body { background:var(--paper); color:var(--ink); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.game-container { max-width:1220px; padding:24px 28px; }
.game-header { margin-bottom:22px; gap:16px; }
.game-title { display:flex; align-items:center; gap:12px; color:var(--ink); background:none; -webkit-text-fill-color:initial; font-family:Georgia,serif; font-weight:500; font-size:32px; letter-spacing:-1.2px; }
.brand-mark { display:grid; place-items:center; width:37px; height:44px; background:var(--green); color:var(--gold); border-radius:8px; font-size:27px; transform:rotate(-8deg); }
.brand-copy { display:flex; flex-direction:column; line-height:1; }
.game-title small { font:10px/1.5 ui-sans-serif,sans-serif; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-top:7px; }
.turn-indicator { font-size:11px; font-weight:600; background:#e5e8df; color:var(--ink); padding:9px 13px; border:1px solid #d7ddcf; }
.turn-indicator::before { content:''; display:inline-block; width:6px; height:6px; background:currentColor; border-radius:50%; margin-right:7px; vertical-align:1px; }
.turn-indicator.your-turn { background:#e4eddf; color:#2b583b; }
.turn-indicator.waiting { background:#e9e8e0; border:1px solid var(--line); color:var(--muted); }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:20px; align-items:start; }
.table-column { display:flex; flex-direction:column; gap:14px; min-width:0; }
.play-table { position:relative; background:radial-gradient(ellipse at 50% 40%, #235c4e, #143e35); border:1px solid #15392f; border-radius:22px; padding:24px; box-shadow:0 12px 28px #16382b14, inset 0 0 0 7px #ffffff04; color:#f3f0df; min-width:0; }
.table-heading { display:flex; justify-content:space-between; gap:8px; color:#b6c9bb; font-size:9px; text-transform:uppercase; letter-spacing:1.8px; margin-bottom:16px; }
.table-heading span:last-child { color:var(--gold); }
.opponents-area { background:none; border:0; padding:0; gap:22px; margin:0; border-radius:0; }
.opponent-name { color:#e9eee3; font-size:12px; font-weight:500; margin-bottom:10px; }
.opp-card-count { display:block; color:#b6c9bb; font-size:10px; margin-top:2px; }
.opp-hand-grid { grid-template-columns:repeat(2,50px); gap:7px; }
.table-center { padding:18px 0; margin:0; gap:28px; align-items:center; }
.table-center::before,.table-center::after { content:''; width:35px; height:1px; background:#aec6b02b; }
.pile-label { color:#b6c9bb; font-size:9px; font-weight:500; letter-spacing:1.2px; margin-top:9px; }
.your-section { margin:0; padding-top:2px; }
.your-label { color:#eceddb; font-size:10px; font-weight:500; letter-spacing:1.4px; margin-bottom:11px; }
.hand-grid { grid-template-columns:repeat(2,74px); gap:10px; }
.card { width:74px; height:100px; border-radius:8px; padding:0; font-family:Georgia,serif; flex-shrink:0; }
.card-sm { width:50px; height:67px; border-radius:6px; }
.card-back { background:repeating-linear-gradient(45deg, transparent,transparent 5px,#d4ba7310 5px,#d4ba7310 6px),#173d35; border:1px solid #91a58a; box-shadow:0 3px 6px #061d2940; }
.card-back::before { inset:5px; border:1px solid #d4ba7350; border-radius:4px; }
.card-back::after { content:'✦'; color:#c6af74; opacity:.85; font-size:26px; font-weight:400; }
.deck-card { box-shadow:3px 3px 0 #13352e,4px 4px 0 #819780,6px 6px 0 #14382f; }
.deck-card::after { display:none; }
.deck-count { font-family:Georgia,serif; color:#e9d6a4; font-size:27px; }
.card-face { background:#fffcf0; border:1px solid #dedac8; box-shadow:0 3px 8px #051e242e; }
.card-face.suit-red { color:#b54b3d; border-color:#eee1cb; }
.card-face.suit-black { color:#273c35; border-color:#eee1cb; }
.card-rank { font-size:25px; line-height:1; }
.card-suit-icon { font-size:27px; margin-top:5px; }
.card-sm .card-rank { font-size:19px; }
.card-sm .card-suit-icon { font-size:18px; margin-top:2px; }
.card-pos-label { font:600 9px/17px ui-sans-serif,sans-serif; position:absolute; right:4px; bottom:3px; min-width:17px; border-radius:4px; background:#ffffff12; color:#d9e4ce; }
.card-face .card-pos-label { background:#223d3510; color:#526252; }
.card-eye { left:4px; top:4px; display:inline-flex; width:13px; height:13px; color:inherit; opacity:.85; filter:none; }
.card-eye svg { width:100%; height:100%; }
.card-back .card-eye { color:#e9d6a4; }
.card:disabled { opacity:1; filter:none; transform:none; cursor:default; }
.card:disabled:hover { filter:none; transform:none; }
.card-clickable { animation:none !important; box-shadow:0 0 0 2px #e6c47d99,0 3px 8px #071f2833 !important; cursor:pointer; }
.card-clickable:hover { transform:translateY(-3px) !important; box-shadow:0 0 0 3px var(--gold),0 6px 12px #071f2840 !important; filter:none; }
.card-selected { transform:translateY(-3px) !important; box-shadow:0 0 0 3px #f6d58a,0 0 0 6px #f6d58a30 !important; }
button:focus-visible,summary:focus-visible { outline:3px solid #b68739; outline-offset:4px; }
.discard-card.empty { background:#ffffff03; border:1px dashed #99b4a377; }
.empty-label { color:#b6c9bb; font:11px ui-sans-serif,sans-serif; }
.table-footnote { color:#b6c9bb; font-size:10px; text-align:center; margin-top:18px; }
.table-sidebar { display:flex; flex-direction:column; gap:16px; min-width:0; }
.prompt-area { background:#fffcf5; border:1px solid var(--line); border-radius:15px; padding:20px; margin:0; box-shadow:0 3px 12px #293b2a04; }
.panel-eyebrow { text-transform:uppercase; letter-spacing:1.7px; font-size:9px; color:var(--muted); margin-bottom:6px; font-weight:600; }
.phase-title { font-family:Georgia,serif; font-size:24px; font-weight:400; letter-spacing:-.5px; margin-bottom:13px; line-height:1.2; }
.prompt-text:empty,.prompt-buttons:empty { display:none; }
.prompt-text { font-size:12px; line-height:1.65; margin-bottom:15px; color:#58665e; }
.prompt-card-area { gap:14px; margin:0 0 12px; }
.prompt-card { width:62px !important; height:86px !important; animation:none; box-shadow:0 3px 8px #203e3118; }
.prompt-card-desc { color:var(--ink); font-size:12px; }
.checked-swap-pair { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.checked-swap-pair > div { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; gap:8px; }
.checked-swap-pair > div > span { font-size:12px; text-align:center; overflow-wrap:anywhere; }
.prompt-hint { font-size:10px; color:var(--muted); font-style:normal; line-height:1.6; }
.prompt-buttons { display:flex; gap:8px; }
.prompt-buttons .btn { flex:1 1 100%; white-space:normal; }
.btn { border-radius:8px; padding:11px 14px; font-size:12px; font-weight:600; }
.btn-primary { background:var(--green); color:#fff9e9; }
.btn-secondary { background:#e9ede3; color:var(--ink); border:1px solid #dce2d4; }
.btn-muted { background:transparent; color:var(--muted); border:1px solid var(--line); }
.btn-cambio { background:#ead5a6; color:#57451f; border:1px solid #debf82; }
button:disabled { opacity:.45; }
.log-section { background:transparent; border:1px solid var(--line); border-radius:15px; }
.log-title { background:transparent; padding:17px 18px 7px; color:var(--ink); font-family:Georgia,serif; font-size:18px; font-weight:400; letter-spacing:-.3px; text-transform:none; }
.log-help { color:var(--muted); font-size:10px; padding:0 18px 12px; }
.game-log { max-height:240px; padding:0 18px 12px; scrollbar-color:#c3c9bc transparent; }
.log-entry { font:11px/1.6 ui-sans-serif,sans-serif; color:#5d6b62; border:0; border-top:1px solid var(--line); padding:10px 0; }
.log-entry:first-child { color:var(--ink); }
.log-turn { display:block; font-size:8px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#879183; margin-bottom:3px; }
.rules-summary { margin:0; padding:0; font-size:12px; color:var(--muted); }
.rules-summary summary { font-weight:600; color:#4e6256; padding:3px 0; }
.rules-summary ol { padding-left:22px; margin-top:12px; }
.rules-summary li { margin-bottom:12px; padding-left:3px; line-height:1.7; }
.rules-summary li::marker { color:var(--ink); font-weight:600; }
.rules-summary strong { color:var(--ink); font-weight:600; }
.rules-powers { display:grid; grid-template-columns:58px 1fr; gap:5px 10px; margin-top:8px; }
.rules-powers dt { font-weight:600; color:var(--ink); }
.rules-powers dd { margin:0; }
.rules-summary .rules-note { padding:10px 0 0; border-top:1px solid var(--line); font-size:10px; }
.cambio-banner { background:#f1e3c3; border:1px solid #dfc88f; color:#785c26; font-size:12px; margin:0 0 16px; padding:10px; }
.game-over-overlay { background:#122f2be0; }
.game-over-panel { background:var(--paper); border:1px solid #e0dfcc; color:var(--ink); padding:30px; }
.go-title { font-family:Georgia,serif; font-weight:400; font-size:32px; background:none; -webkit-text-fill-color:initial; color:var(--ink); }
.go-winner { color:var(--green); }
.game-over-panel p { font-size:12px; color:var(--muted); margin-bottom:18px; }
.go-player { background:#fffcf5; border:1px solid var(--line); text-align:left; }
.go-player > div:first-child { font-size:13px; margin-bottom:10px; }
.go-winner-row { border-color:#75987a; }
@media(min-width:1000px) { .play-table { padding:24px 32px; } .game-container { padding-top:30px; } .game-layout { gap:26px; } }
@media(max-width:900px) and (min-width:680px) { .game-container { padding:18px; } .game-layout { grid-template-columns:minmax(0,1fr) 248px; gap:14px; } .game-header { margin-bottom:16px; } .play-table { padding:18px 12px; } .prompt-area { padding:16px; } .table-center { gap:22px; padding:14px 0; } .table-center::before,.table-center::after { display:none; } .table-heading { font-size:8px; letter-spacing:1px; } .table-footnote { font-size:9px; } }
@media(max-width:679px) { .game-container { padding:16px 12px; } .game-header { margin-bottom:16px; } .game-title { font-size:27px; } .turn-indicator { max-width:48%; font-size:10px; } .game-layout { display:flex; flex-direction:column; gap:14px; } .table-sidebar,.table-column { display:contents; } .prompt-area { order:0; width:100%; padding:16px; } .play-table { order:1; width:100%; padding:20px 14px; } .log-section { order:3; width:100%; } .rules-summary { order:2; width:100%; } .phase-title { font-size:22px; margin-bottom:7px; } .prompt-text { margin-bottom:10px; } .prompt-buttons .btn { flex-basis:auto; } .table-center { padding:18px 0; } .game-log { max-height:200px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
/* Keep the hand and current action together in short desktop panels. */
@media(min-width:680px) and (max-height:760px) {
    .game-container { padding-top:16px; padding-bottom:16px; }
    .game-header { margin-bottom:14px; }
    .play-table { padding-top:16px; padding-bottom:16px; }
    .table-heading,.table-footnote { display:none; }
    .opp-hand-grid { grid-template-columns:repeat(2,42px); gap:6px; }
    .card-sm { width:42px; height:56px; }
    .opponent-name { margin-bottom:8px; }
    .opp-card-count { display:inline; margin-left:5px; }
    .table-center { padding:14px 0; }
    .table-center .card { width:58px; height:78px; }
    .hand-grid { grid-template-columns:repeat(2,62px); gap:9px; }
    .hand-grid .card { width:62px; height:84px; }
    .your-label { margin-bottom:9px; }
    .game-log { max-height:210px; }
}
/* Match the sidebar to the table, independently of the rules disclosure. */
@media(min-width:680px) {
    .game-layout { row-gap:14px; }
    .table-column { display:contents; }
    .play-table { grid-area:1 / 1; align-self:stretch; }
    .rules-summary { grid-area:2 / 1; }
    .table-sidebar { grid-area:1 / 2; align-self:stretch; min-height:380px; contain:size; }
    .table-sidebar .prompt-area { flex:0 0 auto; }
    .table-sidebar .log-section { display:flex; flex-direction:column; flex:1; min-height:0; }
    .table-sidebar .log-title,.table-sidebar .log-help { flex-shrink:0; }
    .table-sidebar .game-log { flex:1; min-height:0; max-height:none; overflow-y:auto; }
}
/* Card travel is sequenced in the browser for human and bot moves alike. */
.motion-card { position:fixed; z-index:150; pointer-events:none; margin:0; transform-origin:top left; box-shadow:0 10px 26px #061d2855; }
.motion-source { visibility:hidden; }
.motion-target { box-shadow:0 0 0 3px var(--gold),0 0 24px #e6c47d70 !important; }
.motion-eye { position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; background:#194b40e8; color:var(--gold); }
.motion-eye svg { width:30px; height:30px; }
.move-caption { position:absolute; z-index:20; bottom:10px; left:12px; right:12px; padding:9px 12px; border-radius:9px; background:#fff8e9f5; color:#203a34; box-shadow:0 3px 14px #09251c22; font-size:11px; line-height:1.5; text-align:center; pointer-events:none; }
.is-playing { cursor:progress; }
.motion-cambio { box-shadow:0 0 0 3px var(--gold),0 8px 30px #dcb65b66; }
@media(prefers-reduced-motion:reduce) { .motion-card { transform:none !important; } }
/* Reserve caption space so moving cards and their position labels stay visible. */
.play-table { padding-bottom:58px; }
.room-toolbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:-4px 0 12px; font-size:12px; }
.room-toolbar a { color:var(--green); text-decoration:none; font-weight:600; letter-spacing:1px; }
.room-toolbar #connection-status { color:var(--muted); flex:1; }
.room-toolbar .btn { padding:8px 12px; }
.presence { color:var(--muted); font-size:11px; line-height:1.7; margin-bottom:16px; overflow-wrap:anywhere; }
#table-error { color:#a54334; font-size:13px; line-height:1.6; margin-bottom:12px; }
#table-error:empty { display:none; }
.opponents-area { flex-wrap:wrap; }
@media(max-width:400px) { .room-toolbar { gap:10px; font-size:11px; } .opponents-area { gap:14px; } }
.opponent-name { max-width:140px; overflow-wrap:anywhere; }
@media(max-width:679px) {
    .many-opponents { gap:14px 10px; }
    .many-opponents .opponent { width:94px; }
    .many-opponents .opp-hand-grid { grid-template-columns:repeat(2,44px); gap:6px; }
    .many-opponents .card-sm { width:44px; height:59px; }
    .many-opponents .opponent-name { font-size:11px; }
}
.recovery-policy { margin:0 0 15px; color:var(--muted); font-size:11px; line-height:1.7; }
.recovery-policy summary { cursor:pointer; }
.recovery-policy p { max-width:750px; margin-top:8px; }
.recovery-panel { margin:0 0 18px; padding:18px 20px; border:1px solid #d8c69d; background:#fbf4e4; border-radius:14px; }
.recovery-panel h2 { font:400 21px Georgia,serif; margin-bottom:10px; }
.recovery-panel p { font-size:12px; line-height:1.7; margin:8px 0; color:#645b46; }
.recovery-panel button { margin:6px 8px 4px 0; }
.recovery-panel .recovery-notice { color:var(--muted); font-size:11px; }
/* Chat is a separate, collapsible surface; it never shifts the playing table. */
.table-chat { position:fixed; right:22px; bottom:18px; z-index:110; width:min(360px,calc(100vw - 24px)); color:var(--ink); font:13px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.chat-toggle { display:flex; align-items:center; justify-content:center; gap:9px; margin-left:auto; padding:12px 18px; border:1px solid #b9cbb9; border-radius:12px; background:var(--green); color:#fff9e9; box-shadow:0 4px 18px #16382b24; font-size:13px; }
.chat-unread { min-width:21px; padding:1px 6px; border-radius:20px; background:var(--gold); color:#244539; font-size:11px; }
#chat-unread[hidden],#chat-panel[hidden] { display:none; }
.chat-panel { display:flex; flex-direction:column; margin-top:8px; background:#fffcf5; border:1px solid #cbd4c2; border-radius:15px; overflow:hidden; box-shadow:0 8px 35px #16382b35; max-height:min(600px,75dvh); }
.chat-heading { display:flex; flex-direction:column; gap:3px; padding:14px 16px 5px; }
.chat-heading strong { font:400 21px Georgia,serif; }
.chat-heading span,.chat-retention { font-size:10px; color:var(--muted); }
.chat-retention { padding:0 16px 10px; line-height:1.5; border-bottom:1px solid var(--line); }
.chat-messages { min-height:100px; max-height:260px; overflow-y:auto; overscroll-behavior:contain; padding:10px 14px; flex:1 1 auto; }
.chat-message { padding:9px 10px; margin:0 0 8px; background:#f0f0e7; border-radius:10px; }
.chat-own { background:#e9efe3; }
.chat-meta { display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; color:#647164; font-size:10px; }
.chat-author { color:var(--green); font-weight:600; overflow-wrap:anywhere; min-width:0; }
.chat-meta time { flex-shrink:0; }
.chat-text { white-space:pre-wrap; overflow-wrap:anywhere; unicode-bidi:plaintext; font-size:13px; line-height:1.5; }
.chat-empty { color:var(--muted); padding:16px 4px; font-size:12px; }
.chat-form { flex:0 0 auto; padding:10px 14px 12px; border-top:1px solid var(--line); }
.chat-form label { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }
#chat-input { display:block; resize:vertical; width:100%; min-height:54px; max-height:110px; padding:8px 10px; border:1px solid #c7d0bf; border-radius:8px; background:#fffdf8; color:var(--ink); font-family:inherit; font-size:14px; line-height:1.4; }
#chat-input:focus { outline:2px solid #b6cba9; outline-offset:1px; }
.chat-form-actions { display:flex; align-items:center; gap:8px; margin-top:8px; }
#chat-help { flex:1; color:var(--muted); font-size:9px; line-height:1.4; }
#chat-count { color:var(--muted); font-size:10px; }
#chat-send { padding:8px 13px; }
.chat-status { min-height:15px; font-size:10px; color:var(--muted); margin-top:6px; overflow-wrap:anywhere; }
@media(max-width:679px) { .table-chat { right:12px; bottom:12px; } .chat-panel { max-height:70dvh; } .chat-messages { max-height:230px; } #chat-input { font-size:16px; } .game-container { padding-bottom:80px; } }

@media(max-height:600px) { .chat-retention,.chat-heading span { display:none; } .chat-messages { min-height:30px; } .chat-heading { padding:9px 14px; } .chat-panel { max-height:calc(100dvh - 85px); } }