/* Shared room for Hearts, Spades, and Euchre. Geometry remains engine-owned. */
:root { --ink:#223e38; --gold:#eac48c; --cw:96px; --felt-1:#f3efe5; --felt-2:#eae8dc; }
body { background:radial-gradient(ellipse at 20% 0%,#fffaf0,transparent 70%),#eeeae0; color:#223e38; padding:24px 20px 48px; font-family:'Inter',system-ui,sans-serif; }
.game-shell { max-width:1060px; gap:16px; }
.top-bar { background:transparent; color:#233e38; border:0; border-bottom:1px solid #29473e25; border-radius:0; padding:0 0 18px; gap:20px; }
.tb-back { color:#38594e; border:1px solid #38594e30; border-radius:30px; padding:9px 14px; }
.tb-back:hover { border-color:#38594e; color:#233e38; }
.tb-eyebrow { color:#597267; font-size:9px; letter-spacing:.17em; }
.tb-dot { background:#b9824d; }
.tb-title h1 { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:46px; letter-spacing:-.05em; font-weight:600; line-height:1.12; }
.scorebar { gap:20px; }
.scorebar > div { min-width:48px; text-align:left; }
.scorebar .l { color:#62756c; font-size:9px; }
.scorebar .v,.scorebar .v.me { color:#244f43; font-size:24px; }
.scorebar .sub,.scorebar .bags { color:#687b6e; font-size:10px; }
.scorebar > div.turn .l { color:#9b5732; }
.room-heading { align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.room-heading p { font-size:14px; line-height:1.4; color:#617267; }
.room-heading span { font:9px/1.5 monospace; text-transform:uppercase; letter-spacing:.13em; color:#85664d; white-space:nowrap; }
.controls { width:100%; justify-content:flex-end; gap:8px; min-height:42px; }
.controls button { background:#fffcf5; color:#28473b; border:1px solid #b9c4b5; border-radius:8px; padding:10px 16px; box-shadow:0 2px 3px #24352c08; }
.controls button.primary { background:#2d5a48; border-color:#2d5a48; color:#fff9df; }
.controls button:hover:not(:disabled) { border-color:#2d5a48; background:#e4ecde; }
.controls button.primary:hover:not(:disabled) { background:#244936; }
.controls .bidbtn.nil { color:#855326; background:#fbf0da; }
.controls .lbl,.controls label { color:#355348; font-size:13px; }
.controls select { background:#fffdf7; border:1px solid #a8b6a3; color:#294b3c; border-radius:8px; padding:8px; }
.board-fit { border-radius:24px; overflow:hidden; }
.table { isolation:isolate; color:#f6efda; }
.table::before { content:''; position:absolute; inset:12px 12px 4px; z-index:-2; border-radius:120px; border:12px solid #594532; background:radial-gradient(ellipse at 45% 20%,#386554,#173f35 85%); box-shadow:inset 0 0 0 2px #cead7559,inset 0 0 70px #041e1e80,0 8px 16px #1c332d26,0 0 0 2px #b7a089; }
.table::after { content:''; position:absolute; inset:32px; z-index:-1; pointer-events:none; border:1px solid #d9d4a531; border-radius:100px; background-image:radial-gradient(#eddfb80e .7px,transparent .7px); background-size:4px 4px; }
.seat { z-index:2; }
.seat .name { padding:8px 12px; min-width:106px; border:1px solid #b4d5c341; border-radius:9px; background:#123b31; font-size:13px; line-height:1.45; color:#eee8d5; box-shadow:0 3px 8px #082c3340; }
.seat .name.active { color:#173b30; background:#edce94; border-color:#fff1ce; box-shadow:0 0 0 3px #edce9422; }
.seat .name.active::before { content:'● '; font-size:9px; vertical-align:2px; }
.seat .tag { display:block; color:#b8cdbf; font-size:10px; margin:0; }
.seat .name.active .tag { color:#345044; }
.seat-N { top:20px; display:flex; flex-direction:column-reverse; align-items:center; gap:8px; }
.seat-W { left:26px; top:43%; text-align:center; }
.seat-E { right:26px; top:43%; text-align:center; }
.seat-S { bottom:168px; }
.seat-W .mini,.seat-E .mini { flex-direction:row; justify-content:center; margin:9px auto 0; }
.seat .mini .b { background:repeating-linear-gradient(45deg,#d4be851f 0 2px,transparent 2px 6px),#24493f; border:1px solid #d4c393; box-shadow:0 2px 3px #07291e50; }
.seat-W .mini .b,.seat-E .mini .b { width:25px; height:35px; margin:0 0 0 -19px; }
.seat-W .mini .b:first-child,.seat-E .mini .b:first-child { margin:0; }
.seat-N .mini .b { width:25px; height:35px; margin-left:-16px; }
.seat-N .mini .b:first-child { margin-left:0; }
.trick { top:44%; }
.trick::before { content:'THE CARD ROOM'; position:absolute; width:180px; height:210px; transform:translate(-50%,-50%); border:1px solid #c6d9bd20; border-radius:32px; text-align:center; padding-top:96px; font:9px monospace; letter-spacing:.2em; color:#d5dbc154; z-index:-1; }
.hand { bottom:20px; }
.hand .card { border-radius:8px; box-shadow:-1px 3px 8px #001d2259; }
.hand .card.legal { outline:1px solid #e4d1a64d; }
.hand .card.legal:hover { box-shadow:0 0 0 2px #e8c994,0 10px 20px #001d2259; }
.hand .card.sel { box-shadow:0 0 0 3px #f5d187,0 10px 20px #001d2259; }
.hand .card.dim { filter:brightness(.78) saturate(.65); }
.pcard { box-shadow:0 6px 18px #001c2859; border-radius:8px; }
.center-msg { top:46%; background:#103b32e6; border:1px solid #dbd4a35c; border-radius:12px; padding:14px 18px; font-size:15px; line-height:1.5; color:#fff3d7; z-index:4; width:260px; }
.center-msg:empty { display:none; }
#status,.status { color:#45634f; font-size:14px; min-height:24px; line-height:1.5; }
.trump-flag { left:26px; top:24px; background:#e8c991; color:#264936; text-shadow:none; border:0; font-size:12px; }
.trump-flag .red { color:#b74435; }
.upcard { top:42%; }
.ov-card { background:#fffcf2; border:1px solid #c4cfb9; }
.game-overview,#how { color:#3d5948; }
.game-overview h2,#how h2 { color:#234432; }
body[data-room="euchre"] .seat-S { bottom:170px; }
body[data-room="euchre"] .center-msg { top:23%; padding:9px 12px; }
body[data-room="euchre"] .table::before { border-radius:100px; }
button:focus-visible,.card:focus-visible { outline:3px solid #b97742; outline-offset:3px; }
@media(max-width:650px) {
 :root { --cw:108px; }
 body { padding:16px 10px 32px; }
 .game-shell { gap:10px; }
 .top-bar { gap:12px; }
 .tb-title h1 { font-size:36px; }
 .tb-back { font-size:11px; padding:7px 11px; }
 .tb-eyebrow { font-size:8px; }
 .scorebar { width:100%; gap:22px; border-top:1px solid #29473e20; padding-top:10px; }
 .scorebar .v { font-size:21px; }
 .room-heading p { font-size:12px; }
 .room-heading span { display:none; }
 .controls { justify-content:center; }
 .controls button { padding:9px 12px; min-height:42px; }
 .table { width:620px; height:650px; }
 .table::before { inset:4px 4px 0; border-width:9px; border-radius:95px; }
 .table::after { inset:22px; }
 .seat .name { font-size:18px; min-width:112px; }
 .seat .tag { font-size:14px; }
 .seat-N { top:22px; }
 .seat-W,.seat-E { top:36%; }
 .seat-W { left:22px; }.seat-E { right:22px; }
 .seat-S { bottom:202px; }
 .trick { top:49%; }
 .hand { bottom:25px; }
 .center-msg { font-size:21px; max-width:280px; width:280px; }
 .trump-flag { font-size:16px; max-width:170px; white-space:normal; }
 body[data-room="euchre"] .table { height:650px; }
 body[data-room="euchre"] .seat-S { bottom:204px; }
 body[data-room="euchre"] .upcard { top:43%; }
}
@media(prefers-reduced-motion:reduce) { .card { transition:none !important; } }