#cfView { --cf-cell: 120px; }
.cf-machine { border: 1px solid var(--line); border-top: 2px solid var(--gold); background: #211b22; padding: clamp(16px,3vw,32px); }
.cf-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,180px) minmax(0,1fr); align-items: center; gap: clamp(10px,3vw,32px); min-height: 210px; }
.cf-player { display: grid; gap: 12px; text-align: center; min-width: 0; }
.cf-player strong { font-size: clamp(15px,2.5vw,24px); overflow-wrap: anywhere; }
.cf-player span { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.cf-player.cf-winner strong { color: var(--gold); }
.cf-reel { height: var(--cf-cell); overflow: hidden; position: relative; background: #121014; border: 1px solid #77614a; box-shadow: 0 0 0 5px #18141b; }
.cf-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 24px 20px -18px #000, inset 0 -24px 20px -18px #000; }
.cf-face { height: var(--cf-cell); display: grid; place-items: center; color: var(--gold); font: 600 clamp(24px,4vw,38px)/1 var(--heading-type); letter-spacing: .03em; }
.cf-pot { text-align: center; color: var(--muted); font-size: 11px; letter-spacing: .12em; min-height: 16px; }
.cf-result { text-align: center; min-height: 24px; margin: 12px 0 24px; font-size: 15px; }
.cf-create { border-top: 1px solid var(--line); padding-top: 22px; display: flex; align-items: end; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cf-create label { display: grid; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.cf-create input { width: 150px; min-height: 44px; }
.cf-sides { display: flex; gap: 4px; }
.cf-sides button { background: #151217; color: var(--muted); border: 1px solid var(--line); padding: 12px 16px; min-height: 44px; font-size: 12px; }
.cf-sides button[aria-pressed=true] { color: var(--gold); border-color: var(--gold); }
.cf-create > button { min-height: 44px; padding: 12px 22px; background: var(--gold); color: #161217; font-weight: 700; font-size: 12px; }
.cf-gate { text-align: center; font-size: 13px; color: var(--muted); margin: 0; }
#cfSignIn { display: block; margin: 16px auto 0; }
.cf-list { margin-top: 30px; }
.cf-list h3, .cf-history summary { font-size: 12px; letter-spacing: .1em; margin: 0 0 16px; }
.cf-game-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.cf-game-person { display: grid; gap: 5px; min-width: 0; }
.cf-game-person strong { overflow-wrap: anywhere; }
.cf-game-person span { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.cf-game-row > strong { font-size: 14px; }
.cf-game-row button { min-width: 80px; min-height: 44px; background: transparent; color: var(--gold); border: 1px solid var(--line); font-size: 12px; }
.cf-empty { padding: 20px 0; margin: 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.cf-history { margin-top: 30px; }
.cf-history-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 16px; text-align: left; width: 100%; min-height: 44px; padding: 12px 0; background: transparent; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.cf-history-row span:first-child { overflow-wrap: anywhere; }
.cf-history-row strong { color: var(--gold); }
#cfView button:disabled { opacity: .4; cursor: not-allowed; }
#cfView button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.casino-machines { flex-wrap: wrap; }
@media(max-width:520px) { .cf-stage { min-height: 180px; } .cf-game-row { gap: 10px; } .cf-game-row button { min-width: 64px; } .cf-history-row { gap: 8px; font-size: 11px; } }

.cf-live-games { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px; }
.cf-mini { --cf-cell:56px; background:#211b22; border:1px solid var(--line); border-top:2px solid var(--gold); padding:16px; min-width:0; }
.cf-mini .cf-stage { grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr); min-height:100px; gap:14px; }
.cf-mini .cf-player { gap:6px; }
.cf-mini .cf-player strong { font-size:14px; }
.cf-mini .cf-player span { font-size:9px; }
.cf-mini .cf-face { font-size:23px; }
.cf-mini-result { text-align:center; font-size:12px; min-height:18px; color:var(--muted); }
#cfTestSpectator { background:transparent; border:1px solid var(--line); color:var(--gold); padding:10px 14px; margin-bottom:14px; font-size:11px; }


/* September 2026: compact broadcast presentation. */
.cf-machine{padding:20px;background:var(--panel);border:1px solid var(--line)}.cf-stage{min-height:160px;gap:20px}.cf-result{margin:8px 0 12px}.cf-create{padding-top:16px}.cf-list{margin-top:24px}.cf-status button{min-height:40px;font-size:12px}.cf-gate:has(+ #cfSignIn:not([hidden])){display:none}
@media(max-width:600px){.cf-machine{padding:14px}.cf-stage{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:8px}.cf-player strong{font-size:14px}}