:root{--ink:#27251f;--muted:#726c60;--paper:#f8f1df;--panel:#fffaf0;--line:#d8c9a8;--teal:#176b64;--teal2:#0d4c49;--coral:#d85c41;--gold:#d6a943;--shadow:0 14px 34px rgba(62,50,28,.12)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 8% 8%,#fff9df 0,transparent 28%),radial-gradient(circle at 90% 0,#d9eee8 0,transparent 32%),#eee5d3;font:16px/1.45 system-ui,"Microsoft YaHei",sans-serif}.hidden{display:none!important}button,input,select{font:inherit}.shell{width:min(1480px,calc(100% - 28px));margin:auto;padding:26px 0 60px}.hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.hero h1{font:900 clamp(50px,8vw,92px)/.8 Georgia,serif;letter-spacing:-6px;margin:8px 0;color:var(--teal)}.hero h1 span{color:var(--coral)}.hero p{margin:4px 0;color:var(--muted)}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--teal)}.status,.notice{padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,250,240,.85)}.panel{background:rgba(255,250,240,.94);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.setup-wrap{max-width:820px;margin:42px auto}.mode-tabs{display:flex;gap:8px;margin-bottom:10px}.mode-tabs button{border:1px solid var(--line);border-radius:999px;padding:10px 18px;background:#fff8e9}.mode-tabs .active{color:#fff;background:var(--teal)}.setup-card{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:16px;align-items:end;padding:24px}.setup-card label,.host-tools label{display:grid;gap:6px;font-size:13px;color:var(--muted)}input,select{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:white}.primary,.danger,.actions button,.small{border:0;border-radius:12px;padding:11px 16px;cursor:pointer;font-weight:750}.primary{color:white;background:var(--teal)}.danger{color:white;background:var(--coral)}button:disabled{opacity:.42;cursor:not-allowed}.room-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px}.room-layout aside{display:grid;align-content:start;gap:14px}.room-card,.score-card,.rules-card{padding:18px}.room-code{font:900 38px/1 monospace;letter-spacing:.13em;margin:12px 0 18px;color:var(--coral)}.host-tools{display:grid;gap:10px}.game-area{display:grid;gap:14px}.notice{border-radius:14px}.table-panel{padding:18px;overflow:hidden}.table-head{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.player{position:relative;padding:13px;border:1px solid var(--line);border-radius:16px;background:#fffdf7}.player.current{border-color:var(--teal);box-shadow:0 0 0 2px rgba(23,107,100,.14)}.player.self{background:#f2fbf7}.player-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.player-meta{font-size:11px;color:var(--muted)}.slots{display:flex;gap:7px;min-height:80px;overflow-x:auto;padding:2px}.card{position:relative;flex:0 0 54px;width:54px;height:76px;border-radius:10px;border:2px solid #f5e9c9;box-shadow:0 5px 12px rgba(44,35,18,.16);display:grid;place-items:center;background:#fff;color:var(--ink);font:900 27px/1 Georgia,serif}.card.back{color:#f5e5b8;background:repeating-linear-gradient(45deg,#176b64 0 7px,#0f5651 7px 14px);border-color:#f5e5b8}.card.back span{font-size:12px;transform:rotate(-10deg);letter-spacing:.04em}.card.faceup{background:linear-gradient(145deg,#fffef8,#f0e4c8)}.card.power::after{content:attr(data-power);position:absolute;bottom:4px;font:700 8px/1 system-ui;color:var(--coral)}.slot-button{padding:0;cursor:pointer}.slot-button.selected{transform:translateY(-8px);outline:3px solid var(--gold)}.slot-button.temporary{animation:pulse 1s infinite alternate;outline:3px solid var(--coral)}.kick{border:0;background:none;color:var(--coral);font-size:11px;cursor:pointer}.piles{display:flex;justify-content:center;align-items:end;gap:28px;margin:26px 0 8px}.piles p{font-size:12px;color:var(--muted);text-align:center;margin:0 0 5px}.pile-card{width:74px;height:102px}.pile-card.back{cursor:pointer}.pile-card.back small{position:absolute;bottom:-22px;width:110px;color:var(--muted)}.pile-card.empty{border-style:dashed;background:transparent;box-shadow:none;color:var(--muted);font:13px system-ui}.pending-wrap{text-align:center}.pending-wrap .card{margin:auto;width:74px;height:102px}.action-panel,.result-panel,.log-panel{padding:18px}.action-head{display:flex;justify-content:space-between;align-items:center}.action-head h2{margin:3px 0}.timer{width:110px;text-align:right}.timer i{display:block;height:5px;border-radius:5px;background:var(--coral);margin-top:5px;transition:width .2s}.selection-hint{min-height:24px;color:var(--muted);margin:10px 0}.actions{display:flex;flex-wrap:wrap;gap:9px}.actions button{background:#e9dfc8}.actions .primary{background:var(--teal)}.actions .cabo{color:#fff;background:var(--coral)}.actions .power-action{color:#fff;background:#95642a}.cabo-banner{margin-top:12px;padding:10px;border-radius:10px;text-align:center;color:#fff;background:var(--coral)}.score-row,.result-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid #e9dfca}.score-row small{color:var(--muted)}.result-row{grid-template-columns:1fr auto auto}.log{max-height:230px;overflow:auto;margin-top:12px}.log.collapsed{max-height:75px}.log-item{padding:7px 0;border-bottom:1px solid #eee2c9;color:var(--muted);font-size:13px}@keyframes pulse{to{box-shadow:0 0 20px rgba(216,92,65,.55)}}
@media(max-width:850px){.hero{align-items:flex-start}.hero>p{display:none}.room-layout{grid-template-columns:1fr}.room-layout aside{grid-template-columns:1fr 1fr}.rules-card{display:none}.setup-card{grid-template-columns:1fr 1fr}.setup-card>div{grid-column:1/-1}.players{grid-template-columns:1fr}.score-card{grid-column:auto}.piles{gap:16px}}
@media(max-width:540px){.shell{width:min(100% - 16px,1480px);padding-top:16px}.hero h1{font-size:54px}.hero>div>p:last-child{display:none}.status{font-size:12px}.setup-card{grid-template-columns:1fr}.room-layout aside{grid-template-columns:1fr}.score-card{display:none}.card{flex-basis:48px;width:48px;height:68px}.table-panel,.action-panel{padding:13px}.piles{margin-bottom:20px}}

/* CABO table seating: seats move around the table, but every .slots row keeps
   the authoritative server order from left to right for every viewer. */
.table-panel{padding:18px 22px 22px}
.table-stage{position:relative;display:grid;grid-template-columns:minmax(205px,1fr) minmax(310px,1.45fr) minmax(205px,1fr);grid-template-rows:minmax(118px,auto) minmax(220px,1fr) auto minmax(118px,auto);grid-template-areas:". top ." "left center right" "action action action" "self self self";gap:12px 18px;min-height:700px;margin-top:12px;padding:10px 4px 4px;isolation:isolate}
.table-stage::before{position:absolute;z-index:0;top:76px;right:9%;bottom:185px;left:9%;border:8px solid #6c4935;border-radius:50%;background:radial-gradient(ellipse at 48% 43%,#2f877c,#176b64 65%,#0e514c);box-shadow:inset 0 0 0 2px #fff5,inset 0 18px 42px #ffffff18,0 18px 30px #51392338;content:""}
.players{display:contents}
.player{z-index:2;width:100%;min-width:0;align-self:center;justify-self:center;background:rgba(255,253,247,.96);box-shadow:0 8px 20px rgba(52,38,22,.13)}
.player.current{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,169,67,.32),0 9px 24px rgba(52,38,22,.17)}
.player.current::before{position:absolute;top:-11px;left:50%;padding:3px 9px;border-radius:999px;color:#fff;background:var(--coral);content:"行动中";font-size:10px;font-weight:800;transform:translateX(-50%)}
.player.self{background:rgba(242,251,247,.98);border-color:#8bbdb4}
.seat-top{grid-area:top;max-width:540px}
.seat-left{grid-area:left;max-width:295px}
.seat-right{grid-area:right;max-width:295px}
.seat-self{grid-area:self;max-width:760px}
.seat-self .player-head{justify-content:center;text-align:center}
.seat-self .kick{position:absolute;right:12px}
.slots{flex-direction:row;justify-content:flex-start;scrollbar-width:thin;scrollbar-color:#bda786 transparent}
.seat-top .slots,.seat-self .slots{justify-content:center}
.slots .slot-button{order:initial}
.piles{z-index:2;grid-area:center;align-self:center;margin:0;padding:20px 12px;border-radius:45%;background:rgba(255,255,255,.08)}
.table-actions{z-index:3;grid-area:action;justify-self:center;width:min(760px,88%);margin:0;padding:14px 18px;border:1px solid rgba(216,201,168,.95);border-radius:17px;background:rgba(255,250,240,.96);box-shadow:0 10px 26px rgba(54,38,23,.17);backdrop-filter:blur(8px)}
.table-actions .selection-hint{margin:6px 0;min-height:18px;font-size:12px}
.table-actions .actions{justify-content:center}
.table-actions .action-head h2{font-size:18px}

@media(max-width:1050px){.table-stage{grid-template-columns:minmax(180px,1fr) minmax(280px,1.3fr) minmax(180px,1fr);gap:10px}.seat-left,.seat-right{max-width:250px}.table-actions{width:min(720px,94%)}}
@media(max-width:700px){.table-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(170px,auto) auto auto;grid-template-areas:"top top" "left right" "center center" "action action" "self self";min-height:760px;gap:10px;padding-inline:0}.table-stage::before{top:118px;right:4%;bottom:220px;left:4%;border-width:6px}.seat-top{max-width:72%}.seat-left,.seat-right{width:100%;max-width:none}.seat-left{justify-self:start}.seat-right{justify-self:end}.seat-left .slots,.seat-right .slots{justify-content:flex-start}.piles{padding:18px 8px}.table-actions{width:96%}.seat-self{width:96%}}
@media(max-width:470px){.table-panel{padding:12px 9px 15px}.table-stage{min-height:730px}.player{padding:9px}.player-head{margin-bottom:8px}.player-head b{font-size:13px}.player-meta{font-size:9px}.seat-top{max-width:88%}.seat-left .slots,.seat-right .slots{gap:4px}.table-actions{padding:11px}.table-actions .action-head{flex-direction:row}.table-actions .action-head h2{font-size:15px}.table-actions .actions button{padding:9px 10px;font-size:12px}}

/* Integrated felt surface: the whole play area is the table. Seats are no
   longer separate white cards, so cards and controls share one visual space. */
.table-panel{position:relative;border:1px solid #456f65;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.1),transparent 34%),radial-gradient(circle at 12% 8%,rgba(255,244,199,.08),transparent 25%),repeating-linear-gradient(118deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px),linear-gradient(145deg,#277d72,#17685f 58%,#11554f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 18px 48px rgba(255,255,255,.05),0 16px 34px rgba(42,54,43,.2);overflow:hidden}
.table-panel::after{position:absolute;inset:8px;border:1px solid rgba(255,244,211,.12);border-radius:14px;content:"";pointer-events:none}
.table-panel .table-head{position:relative;z-index:4;padding:2px 4px 10px;color:rgba(255,249,229,.86);border-bottom:1px solid rgba(255,249,229,.14)}
.table-panel .table-head b{color:#fff8dc}
.table-stage::before{display:none}
.table-stage{min-height:680px;padding-top:14px}
.player,.player.self{padding:4px 8px;border:0;background:transparent;box-shadow:none}
.player.current{border:0;background:transparent;box-shadow:none}
.player.current::before{top:-8px;box-shadow:0 3px 10px rgba(47,31,20,.24)}
.player-head{position:relative;justify-content:center;min-height:38px;margin-bottom:7px;color:#fff8e4;text-align:center;text-shadow:0 1px 2px rgba(22,52,47,.5)}
.player-head>div{min-width:0}
.player-head b{font-size:15px;letter-spacing:.02em}
.player-meta{color:rgba(255,247,222,.72)}
.player.current .player-head b{color:#ffe28a}
.player.current .slots{filter:drop-shadow(0 0 7px rgba(255,213,91,.5))}
.player.self .player-head b::after{display:block;width:42px;height:2px;margin:4px auto 0;border-radius:999px;background:#8fd3c7;content:""}
.kick{position:absolute;top:0;right:2px;padding:4px 7px;border:1px solid rgba(255,244,219,.28);border-radius:999px;color:#ffe5d8;background:rgba(98,42,31,.32);text-shadow:none}
.seat-self .kick{right:2px}
.slots,.seat-top .slots,.seat-left .slots,.seat-right .slots,.seat-self .slots{justify-content:safe center;min-height:82px;padding:4px 5px 7px}
.piles{padding:18px 12px;border:0;background:transparent}
.piles p{color:rgba(255,247,222,.76);text-shadow:0 1px 2px rgba(20,54,48,.55)}
.pile-card.empty{color:rgba(255,247,222,.75);border-color:rgba(255,247,222,.72);background:rgba(255,255,255,.05)}
.pile-card.back small{color:rgba(255,247,222,.76)}
.table-actions{border:1px solid rgba(255,249,226,.27);color:#fff9e8;background:linear-gradient(135deg,rgba(15,72,66,.78),rgba(23,92,84,.72));box-shadow:0 10px 25px rgba(19,50,45,.28),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.table-actions .eyebrow{color:#a9ddd4}
.table-actions .selection-hint{color:rgba(255,249,226,.73)}
.table-actions .timer{color:#fff6d8}
.table-actions .actions button{border:1px solid rgba(255,255,255,.16);color:#3e3327;background:#f0e1c3;box-shadow:0 4px 10px rgba(17,49,44,.17)}
.table-actions .actions .primary{color:#fff;background:#d48a3f}
.table-actions .actions .cabo{color:#fff;background:var(--coral)}
.table-actions .actions .power-action{color:#fff;background:#9f7441}
.cabo-banner{position:relative;z-index:4;margin:10px 4px 0;background:rgba(216,92,65,.9);box-shadow:0 6px 16px rgba(50,30,20,.18)}

@media(max-width:700px){.table-stage{min-height:740px}.player,.player.self{padding:2px 4px}.table-panel::after{inset:5px}.table-actions{width:98%}}
@media(max-width:470px){.table-panel{padding:11px 7px 14px}.player-head b{font-size:12px}.slots,.seat-top .slots,.seat-left .slots,.seat-right .slots,.seat-self .slots{padding-inline:2px}.table-actions{padding:10px 9px}}

/* Extend the felt beyond the old table panel so the complete play column reads
   as one table surface instead of a table illustration inside a white page. */
.game-area{position:relative;padding:12px;border:1px solid #456f65;border-radius:22px;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.1),transparent 34%),radial-gradient(circle at 12% 8%,rgba(255,244,199,.08),transparent 25%),repeating-linear-gradient(118deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px),linear-gradient(145deg,#277d72,#17685f 58%,#11554f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 18px 48px rgba(255,255,255,.05),0 16px 34px rgba(42,54,43,.2);overflow:hidden}
.game-area>.notice{position:relative;z-index:3;border-color:rgba(255,249,228,.32);background:rgba(255,250,239,.92);box-shadow:0 7px 18px rgba(18,54,48,.16)}
.table-panel{border:0;background:transparent;box-shadow:none;overflow:visible}
.table-panel::after{display:none}
.game-area>.result-panel,.game-area>.log-panel{position:relative;z-index:3;box-shadow:0 9px 22px rgba(18,54,48,.18)}
@media(max-width:850px){.game-area{padding:9px}}

/* The journey log belongs with room information, not on the enchanted table. */
.sidebar-log{min-height:190px;padding:16px}
.sidebar-log .action-head{align-items:center;flex-direction:row}
.sidebar-log .action-head h2{margin:2px 0 0;font-size:17px}
.sidebar-log .small{min-width:48px;padding:6px 8px;border:1px solid var(--line);color:var(--muted);background:#f3ead7;font-size:10px}
.sidebar-log .log{max-height:290px;margin-top:10px;padding-right:3px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c5b18d transparent}
.sidebar-log .log.collapsed{max-height:106px}
.sidebar-log .log-item{padding:7px 0;font-size:11px;line-height:1.55}

/* Enchanted CABO landscape: moonlit mist and starlight replace poker felt. */
.game-area{border-color:rgba(102,91,157,.42);background:radial-gradient(circle at 72% 10%,rgba(255,242,196,.38),transparent 15%),radial-gradient(circle at 16% 24%,rgba(209,248,241,.3),transparent 22%),radial-gradient(circle at 52% 58%,rgba(231,202,245,.2),transparent 34%),linear-gradient(145deg,#6e91b6 0%,#7779ad 42%,#9274ac 72%,#c08eaf 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 20px 60px rgba(255,255,255,.08),0 16px 34px rgba(63,52,91,.24);isolation:isolate}
.game-area::before{position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle,rgba(255,249,210,.86) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(220,255,247,.72) 0 1.2px,transparent 2px),radial-gradient(ellipse at 50% 100%,rgba(214,244,225,.2),transparent 52%);background-position:12px 18px,48px 61px,center;background-size:83px 83px,127px 127px,100% 100%;content:"";opacity:.72;pointer-events:none}
.game-area::after{position:absolute;right:-12px;bottom:20%;z-index:0;color:rgba(255,247,222,.075);content:"🦄";font-size:clamp(120px,17vw,250px);filter:drop-shadow(0 0 24px rgba(255,240,194,.16));pointer-events:none;transform:rotate(-8deg)}
.table-panel{position:relative;z-index:1}
.table-panel .table-head{color:rgba(255,252,235,.88);border-bottom-color:rgba(255,249,229,.19)}
.table-panel .table-head b{color:#fff1b8}
.player-head{color:#fffbea;text-shadow:0 1px 3px rgba(52,41,90,.65)}
.player-meta{color:rgba(246,246,229,.76)}
.player.current .player-head b{color:#fff0a4;text-shadow:0 0 9px rgba(255,232,142,.4)}
.player.current .slots{filter:drop-shadow(0 0 8px rgba(255,230,143,.6))}
.target-notice{position:relative;padding:13px 17px;border:2px solid rgba(151,105,190,.62);border-radius:14px;color:#563b73;background:linear-gradient(135deg,rgba(255,250,240,.98),rgba(238,224,251,.98));box-shadow:0 0 0 4px rgba(246,221,255,.2),0 10px 28px rgba(91,56,122,.24);font-weight:850;animation:target-notice-in .38s cubic-bezier(.2,.9,.25,1.25)}.target-notice::before{content:"✦";display:inline-block;margin-right:8px;color:#9a5db3;animation:target-star 700ms ease-in-out infinite alternate}.slots:has(.slot-button.targeted) .slot-button:not(.targeted){opacity:.42;filter:saturate(.55) brightness(.82);transform:scale(.94);transition:opacity .2s ease,filter .2s ease,transform .2s ease}.slot-button.targeted{z-index:5;outline:5px solid #fff0a4;filter:brightness(1.18) saturate(1.25)}.slot-button.targeted-spy{animation:targeted-spy 780ms ease-in-out infinite}.slot-button.targeted-swap{animation:targeted-swap 680ms ease-in-out infinite}.slot-button.targeted .target-marker{position:absolute;z-index:6;top:-22px;left:50%;width:max-content;padding:5px 9px;border:2px solid #fff4c9;border-radius:999px;color:#fff;background:#8e4ba0;box-shadow:0 5px 14px rgba(57,25,68,.42);font:900 11px/1 system-ui;transform:translateX(-50%);animation:target-marker 620ms ease-in-out infinite alternate}@keyframes target-notice-in{from{opacity:0;transform:translateY(-12px) scale(.96)}}@keyframes target-star{to{color:#d887e9;transform:rotate(35deg) scale(1.35)}}@keyframes targeted-spy{0%,100%{transform:translateY(-4px) scale(1.08);box-shadow:0 0 0 4px rgba(255,240,164,.55),0 0 20px 8px rgba(193,116,219,.55)}50%{transform:translateY(-9px) scale(1.18);box-shadow:0 0 0 7px rgba(255,250,210,.82),0 0 34px 14px rgba(193,116,219,.82)}}@keyframes targeted-swap{0%,100%{transform:translateX(0) translateY(-6px) rotate(0) scale(1.11);box-shadow:0 0 0 5px rgba(255,240,164,.72),0 0 26px 10px rgba(193,116,219,.7)}25%{transform:translateX(-9px) translateY(-6px) rotate(-5deg) scale(1.14)}75%{transform:translateX(9px) translateY(-6px) rotate(5deg) scale(1.14)}}@keyframes target-marker{to{transform:translateX(-50%) translateY(-4px) scale(1.08)}}@media(prefers-reduced-motion:reduce){.target-notice,.target-notice::before,.slot-button.targeted,.slot-button.targeted .target-marker{animation:none}.slot-button.targeted{transform:translateY(-5px) scale(1.1);box-shadow:0 0 0 6px rgba(255,240,164,.8),0 0 28px 12px rgba(193,116,219,.72)}}
.player.self .player-head b::after{background:linear-gradient(90deg,#b7efe2,#f8dca0,#e5c1f2);box-shadow:0 0 7px rgba(224,246,226,.35)}
.card.back{color:#fff0b5;border-color:#ead69a;background:radial-gradient(circle at 24% 23%,rgba(255,244,177,.86) 0 1.5px,transparent 2.2px),radial-gradient(circle at 72% 69%,rgba(205,248,238,.72) 0 1.3px,transparent 2px),linear-gradient(145deg,#514c8e,#527da3 53%,#8a5d9e);background-size:27px 27px,35px 35px,100% 100%;box-shadow:0 6px 14px rgba(46,37,79,.25),inset 0 0 16px rgba(216,244,235,.12)}
.card.back::before{position:absolute;top:5px;right:7px;color:rgba(255,240,170,.74);content:"✦";font:10px Georgia,serif}
.card.back span{color:#fff0b5;text-shadow:0 1px 3px rgba(34,30,77,.65)}
.card.faceup{border-color:#f0deb3;background:linear-gradient(145deg,#fffdf2,#ece9f7 55%,#e2f2ec);box-shadow:0 6px 14px rgba(53,43,84,.2)}
.piles p,.pile-card.back small{color:rgba(255,251,230,.82);text-shadow:0 1px 3px rgba(49,41,86,.6)}
.pile-card.empty{color:rgba(255,248,226,.82);border-color:rgba(255,244,210,.76);background:rgba(235,240,255,.08)}
.table-actions{border-color:rgba(239,231,255,.3);background:linear-gradient(135deg,rgba(67,71,126,.78),rgba(111,73,130,.72));box-shadow:0 10px 28px rgba(49,38,84,.3),inset 0 1px rgba(255,255,255,.15)}
.table-actions .eyebrow{color:#c9f0e6}
.table-actions .selection-hint{color:rgba(255,249,228,.76)}
.table-actions .actions .primary{background:linear-gradient(135deg,#d5925e,#bf6f6f)}
.cabo-banner{background:linear-gradient(90deg,rgba(197,99,112,.94),rgba(143,92,157,.94))}
.game-area>.notice{border-color:rgba(224,207,242,.48);background:rgba(255,251,240,.92);box-shadow:0 7px 20px rgba(56,45,92,.19)}

@media(max-width:850px){.sidebar-log{grid-column:1/-1}.game-area::after{right:-25px;bottom:27%;font-size:150px}}
@media(max-width:540px){.sidebar-log{display:block}.sidebar-log .action-head{align-items:center;flex-direction:row}.game-area::after{font-size:115px;opacity:.7}}

/* Tablet and phone seats always show at least the four initial cards without
   horizontal scrolling. Extra penalty cards wrap onto another row. */
@media(max-width:1050px){.slots,.seat-top .slots,.seat-left .slots,.seat-right .slots,.seat-self .slots{display:grid;grid-template-columns:repeat(4,minmax(0,54px));justify-content:center;gap:clamp(2px,.55vw,7px);overflow:visible}.slots .slot-button{width:100%;min-width:0;max-width:54px;height:auto;aspect-ratio:27/38;font-size:clamp(18px,3vw,27px)}.slots .card.back span{font-size:clamp(8px,1.5vw,12px)}}

/* Shared spectator controls span the room and keep the CABO table read-only. */
.room-layout>.room-role-banner{grid-column:1/-1}
#joinIntentField{grid-column:1/-1}
.slot-button.read-only{cursor:default}
.slot-button.read-only:hover{transform:none}
.spectator-action-note{width:100%;margin:0;padding:10px 12px;border:1px dashed rgba(255,240,180,.55);border-radius:10px;color:#fff5d5;background:rgba(45,39,86,.35);line-height:1.55}