/* The live rack rests on the table photographed from the player's seat. */
.board-stage:has(.cf-table) {display:block; padding:0; margin:0; border:0; border-radius:0; background:#11291c; overflow:hidden; min-height:0}
.cf-table {display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; min-height:0; color:#f9ecd0; font-family:Arial,sans-serif}
.cf-information {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px max(14px,3%); background:linear-gradient(110deg,#173c2d,#10231c 52%,#211e15); border-bottom:2px solid #a67f43; text-align:left}
.cf-outcome {display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center}
.cf-outcome small {grid-column:1/-1; text-transform:uppercase; font:700 10px/1.3 Arial; letter-spacing:.16em; color:#e5c780}
.cf-outcome strong {font:700 clamp(21px,3.2vw,34px)/1.1 Georgia,serif; color:#fff4d6}
.cf-outcome>span {font:14px/1.2 Arial; color:#f0deb7}
.cf-complete .cf-information {background:linear-gradient(110deg,#483417,#1c2619); border-color:#ffd27a}
.cf-complete .cf-outcome small {color:#ffe2a0}
.cf-seats {display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px 16px; max-width:40%; font-size:12px}
.cf-seat {display:inline-flex; align-items:center; gap:6px; overflow-wrap:anywhere}
.cf-seat .cf-disc {width:16px; height:16px; flex:none; border-radius:50%}
.cf-scene {position:relative; isolation:isolate; container-type:size; min-height:0; background:#143c2a url('./salon-front.webp') center 65%/cover no-repeat}
.cf-stand {--rack-width:min(81cqw,75cqh,620px); position:absolute; width:var(--rack-width); left:50%; transform:translateX(-50%); bottom:23%; z-index:1}
.cf-stand::before {content:''; position:absolute; left:-5%; right:-5%; bottom:-7px; height:15px; background:#10201596; border-radius:50%; filter:blur(4px); z-index:-1}
.cf-frame {position:relative; padding:clamp(5px,.9cqh,10px); border:2px solid #cea260; border-radius:8px 8px 3px 3px; background:repeating-linear-gradient(3deg,#533120 0,#8c5433 7px,#59341d 10px,#784728 15px); box-shadow:inset 0 0 0 2px #351b11,3px 4px 0 #402416,5px 7px 8px #0008}
.cf-face {display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); aspect-ratio:7/6; position:relative; background:linear-gradient(120deg,#63382299,#ab6c3b44)}
.cf-face .cf-column {display:grid; grid-template-rows:repeat(6,minmax(0,1fr)); position:relative; margin:0; padding:0!important; border:0!important; border-radius:0; min-height:0!important; min-width:0; background:transparent!important; box-shadow:none; opacity:1!important; color:inherit; filter:none}
.cf-column .cf-cap {position:absolute; left:2%; width:96%; bottom:calc(100% + 9px); height:clamp(30px,6cqh,46px); display:flex; align-items:center; justify-content:center; gap:3px; border-radius:6px 6px 2px 2px; background:linear-gradient(#ffedb8,#dfba6b); border:1px solid #694e24; box-shadow:0 2px 3px #1b120c88; color:#251d0d; font:700 clamp(15px,3cqh,22px)/1 Arial}
.cf-column .cf-cap span {font-weight:500}
.cf-column:enabled:hover,.cf-column:focus-visible {background:#f7dd792e!important}
.cf-column:enabled:hover .cf-cap,.cf-column:focus-visible .cf-cap {background:#fff0bb; outline:2px solid #fff1cb}
.cf-column:focus-visible {outline:3px solid white!important; outline-offset:0; z-index:2}
.cf-column:disabled .cf-cap {background:#302a20; color:#e4d2a7; border-color:#b89963}
.cf-hole {position:relative; display:grid; place-items:center; min-height:0}
.cf-hole .cf-disc {width:80%; height:80%; display:block; border-radius:50%; box-sizing:border-box}
.cf-color-0 {background:radial-gradient(circle at 55% 75%,#203127,#101710 65%,#080b08); box-shadow:inset 0 4px 7px #000,inset 0 0 0 2px #371e10,0 1px 1px #e8bc7d}
.cf-color-1 {background:radial-gradient(circle at 35% 25%,#ffec9f,#dfb148 62%,#aa7a22); box-shadow:inset 0 0 0 3px #c99b38,inset 0 0 0 5px #ffe19b,0 2px 4px #241308}
.cf-color-2 {background:radial-gradient(circle at 35% 25%,#ff8478,#c44242 60%,#8a262b); box-shadow:inset 0 0 0 3px #9d3436,inset 0 0 0 5px #e27970,0 2px 4px #241308}
.cf-disc.cf-winning {outline:3px solid #fffbe8; outline-offset:0; box-shadow:0 0 0 5px #352414,0 0 11px #ffdd80; position:relative}
.cf-disc.cf-last {position:relative}
.cf-last::after {content:''; position:absolute; border:2px solid #22180f; border-radius:50%; background:#fff9da; width:14%; height:14%; left:43%; top:43%}
.cf-lines {position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.cf-lines line {stroke:#fffbea; stroke-width:4px; vector-effect:non-scaling-stroke; stroke-linecap:round}
.cf-lines .cf-line-shadow {stroke:#382718; stroke-width:8px}
.cf-base {position:relative; text-align:center; margin:4px -4% 0; padding:4px 1%; background:linear-gradient(#825332,#4a301e 45%,#312317); color:#f9db92; border:1px solid #a27c48; border-radius:3px; box-shadow:0 3px 3px #292014aa; font:700 clamp(8px,1.7cqh,13px) Georgia; letter-spacing:.16em}
.cf-base::before,.cf-base::after {content:''; position:absolute; bottom:-3px; width:10%; height:140%; background:linear-gradient(120deg,#925c35,#4e321d); border:1px solid #8f6b3d; border-radius:2px}
.cf-base::before {left:0; transform:skewX(-8deg)} .cf-base::after {right:0; transform:skewX(8deg)}
.cf-drop-record {position:absolute; bottom:8%; left:50%; transform:translateX(-50%); font:600 clamp(11px,2.2cqh,16px) Arial; white-space:nowrap; color:#fff0cb; background:#122b20ee; border:1px solid #bf9656; border-radius:5px; padding:5px 12px}
.cf-reader {position:absolute; clip-path:inset(50%); width:1px;height:1px;overflow:hidden}
#gameDialog[data-game="board-four"][open] {grid-template-rows:clamp(44px,7dvh,62px) minmax(0,1fr) clamp(44px,6dvh,58px)}
#gameDialog[data-game="board-four"] .game-status {position:absolute; clip-path:inset(50%); width:1px;height:1px;overflow:hidden}
#gameDialog[data-game="board-four"] .game-footer button {font-size:15px; min-height:36px; padding:5px 14px; background:#eed292; color:#211d14; font-weight:bold}
#gameDialog[data-game="board-four"] .game-footer span {font-size:12px; line-height:1.2}
#boardDialog .board-stage:has(.cf-table),#table .board-stage:has(.cf-table) {height:clamp(290px,69dvh,690px)}
@media(max-width:650px) {
 .cf-information {padding:8px 10px; gap:6px}
 .cf-outcome {display:block}.cf-outcome small,.cf-outcome strong,.cf-outcome>span {display:block}
 .cf-outcome strong {font-size:23px}.cf-outcome>span {font-size:12px; margin-top:3px}
 .cf-seats {font-size:10px; max-width:32%; flex-direction:column; align-items:start}
 .cf-seat .cf-disc {width:11px;height:11px}
 .cf-stand {--rack-width:min(90cqw,76cqh); bottom:23%}
 .cf-column .cf-cap {height:32px; font-size:16px}
}
@media(orientation:landscape) and (max-height:500px) {
 .cf-information {padding:3px 10px}
 .cf-outcome small {font-size:8px}.cf-outcome strong {font-size:19px}.cf-outcome>span {font-size:11px}
 .cf-stand {--rack-width:min(52cqw,80cqh); bottom:12%}
 .cf-column .cf-cap {height:22px; bottom:calc(100% + 5px); font-size:12px}
 .cf-base {padding:1px; margin-top:2px}
 .cf-drop-record {bottom:2%; left:1%; transform:none; padding:3px; font-size:10px}
}
.board-stage:has([data-salon-game]) {
  background:#134432 url('./salon-overhead.webp') center/100% 100% no-repeat!important;
  border:0; border-radius:10px; padding-inline:clamp(18px,6vw,80px);
}
.board-stage:has([data-salon-game]) .board-score {color:#fff0c9; text-shadow:0 1px 3px #090b08}
.board-stage:has([data-salon-game]) .board-player {padding:3px 9px; border-radius:4px; background:#10251ce6}
.board-stage:has([data-salon-game]) .checker-grid,
.board-stage:has([data-salon-game]) .backgammon-board {border-color:#69462b; box-shadow:0 2px 0 #cdad70,0 8px 9px #09150a9e}
.board-stage:has([data-salon-game]) .domino-chain {background:transparent; border:0; box-shadow:none}
.board-stage:has([data-salon-game]) .board-help {color:#fff0cf;text-shadow:0 1px 3px #081309}
@media(max-width:650px){.board-stage:has([data-salon-game]) {padding-inline:4%}}