/* Cray Cray Party instant demo: TV view + your phone controller on one screen. */
html,body{height:100%;overflow:hidden}
.demopage{--bar:52px}
.dbar{position:fixed;top:0;left:0;right:0;height:calc(var(--bar) + var(--safe-t));padding:var(--safe-t) 10px 0;display:flex;align-items:center;gap:10px;z-index:7;background:rgba(255,248,231,.95);border-bottom:3px solid var(--ink)}
.dtitle{display:flex;flex-direction:column;line-height:1.05;min-width:0}.dtitle b{font-family:Chewy;font-weight:400;font-size:24px}.dtitle small{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.dstrip{flex:1;display:flex;gap:6px;justify-content:center;overflow:hidden}.dstrip .pmini.me{background:var(--yellow)}
.dbar .hright{margin-left:auto}.dbar .chip.round{width:40px;height:40px;padding:0}.dvoice{height:40px;padding:0 10px;font-size:16px}
.dwrap{position:fixed;top:calc(var(--bar) + var(--safe-t));left:0;right:0;bottom:0;display:flex}
.dstage{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--paper)}
.dpad{position:relative;display:flex;flex-direction:column;background:#FFFDF6;border-left:3px solid var(--ink);width:400px;flex:none}
.dme-badge{display:flex;align-items:center;gap:8px;padding:4px 10px;border-bottom:2px dashed rgba(43,42,51,.25);font-size:18px}.dme-badge span{flex:1}.dme-badge b{font-family:Chewy;font-weight:400;font-size:22px}
.demopage #ctl{overflow:hidden}
.demopage .rx{position:absolute}
.demopage .timer-ring{position:absolute;top:8px;right:8px;width:58px;height:58px}
.dskip{position:absolute;right:8px;bottom:8px;z-index:6;font-size:16px;padding:2px 10px;opacity:.8}
.dover{position:absolute;inset:0;z-index:5;background:var(--paper);overflow-y:auto;padding:10px 14px 20px;display:flex;flex-direction:column;align-items:center}
.dover .bigtitle{font-size:clamp(32px,4vw,56px)}
.dover .lb{width:100%}.lbrow.me{background:#FFF3C4}.pod.me b{color:var(--red)}
.dcta{width:min(560px,100%);padding:14px 16px;margin-top:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.dwin{font-family:Chewy;font-size:24px;margin:0}.dpitch{font-family:Chewy;font-size:clamp(24px,3vw,32px);margin:0;color:var(--blue)}.dsub{margin:0;font-size:17px}
.dcta .bigbtn{font-size:clamp(24px,3vw,30px)}.drow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.dcta .midbtn{text-decoration:none;color:var(--ink);padding:6px 14px;font-size:20px}
.dcta .rematch{margin:0;font-size:16px}
.dme{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px}
.demopage .podium{margin-top:4px}
/* draw first, full screen */
body[data-lay="draw"] .dpad{position:fixed;inset:calc(var(--bar) + var(--safe-t)) 0 0 0;width:auto;height:auto!important;z-index:6;border:0}
body[data-lay="draw"] .dme-badge{display:none}
@media (min-width:900px){body[data-lay="draw"] .dpad{left:50%;right:auto;transform:translateX(-50%);width:min(620px,96vw);border-left:3px solid var(--ink);border-right:3px solid var(--ink);box-shadow:0 0 0 100vmax rgba(43,42,51,.35)}}
/* laptop: TV on the left, your phone on the right */
@media (min-width:900px){
  .dpad .sc-hold{width:min(300px,34vh)}
  body[data-lay="full"] .dpad{width:320px}
}
/* phones and narrow windows: TV view on top, controller at the bottom */
@media (max-width:899px){
  .dstrip{display:none}.dtitle small{max-width:52vw}
  .dwrap{flex-direction:column}
  .dpad{width:auto;border-left:0;border-top:3px solid var(--ink);height:44%}
  body[data-game="blitz"] .dpad{height:56%}
  body[data-gp="vote"] .dpad{height:58%}
  body[data-lay="full"] .dpad{height:auto;flex:none}
  body[data-lay="full"] .dpad #ctl .dme{padding:6px}
  body[data-lay="full"] .dpad .bigrank{font-size:40px}body[data-lay="full"] .dpad .soft{margin:2px 0}body[data-lay="full"] .dpad .rxbar{margin-top:6px}body[data-lay="full"] .dpad .gainline{font-size:22px;margin:0}
  .dpad .sc-race{padding:4px 10px 8px}.dpad .sc-status{font-size:16px}.dpad .sc-status b{font-size:24px}
  .dpad .sc-hold{width:min(52vw,24vh,230px)}.dpad .sc-hint{font-size:15px}
  .dpad .rxbar{margin-top:8px}.dpad .rxbar button{font-size:20px;min-width:70px;padding:6px}
  .dpad .sc-sab{font-size:18px;padding:6px}
  .dpad .sc-vote h2{font-size:24px}.dpad .sc-grid{grid-template-columns:repeat(3,1fr)}.dpad .opt{font-size:14px}
  .dpad .bzc-q{font-size:16px;margin:2px 0 8px}.dpad .bzb{font-size:17px}
  .demopage .bz{padding:10px 14px}.demopage .bz-q{font-size:clamp(20px,5.4vw,30px);margin:6px 0 10px}.demopage .bz-opts{gap:8px}.demopage .bzo{font-size:16px;padding:6px 10px}.demopage .bzo svg{width:26px;height:26px}.demopage .bz-foot{margin-top:8px;font-size:17px}
  .dover{padding:6px 10px 14px}.lbrow{font-size:18px;padding:2px 10px}
  .demopage .pod .block{width:90px}.demopage .pod.p1 .block{height:90px}.demopage .pod.p2 .block{height:64px}.demopage .pod.p3 .block{height:46px}.demopage .pod .block{font-size:36px}
  .dcta{padding:10px 12px}
  .demopage .timer-ring{width:46px;height:46px}
}
body[data-ph="podium"] .dskip{display:none}
@media (max-width:899px){body[data-ph="podium"] .dpad{display:none}}
/* BUG-007: narrow phones: the game title must never clip; drop the logo (the home button stays), title fits on one line */
@media (max-width:520px){.dbar{gap:6px}.dbar .mini-logo{display:none}.dtitle{flex:1;overflow:hidden}.dtitle b{font-size:clamp(16px,5.4vw,22px);white-space:nowrap}.dtitle small{max-width:none;font-size:12px}.dvoice{padding:0 8px;font-size:14px}.dbar .chip.round{width:36px;height:36px}}