/* The WebGL scene supplies the cabinet, metal rails and physical shadows. */
.pb-stage canvas { border-radius: 0; box-shadow: none; }
.pb-stage { background: radial-gradient(ellipse at 50% 42%, #27343c 0%, #101c25 48%, #060c12 100%); }

/* Real HTML controls sit inside the projected LED's bottom strip. */
.cabinet-only .pb-panel { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); border:0; }
.cabinet-controls { position:absolute; z-index:3; container-type:inline-size; }
.cabinet-controls .pb-actions { height:100%; display:flex; flex-wrap:nowrap; gap:1.4%; align-items:stretch; padding:0 2%; }
.cabinet-controls .pb-actions button, .cabinet-controls summary, .cabinet-controls .pb-back { display:flex; align-items:center; justify-content:center; min-height:0; padding:0 4px; font:600 clamp(8px,3cqw,12px)/1.1 monospace; white-space:nowrap; border:1px solid #326470; border-radius:3px; background:#102b35; color:#c9f9f8; text-decoration:none; }
.cabinet-controls .pb-actions button[hidden] { display:none; }
.cabinet-controls details { display:block; border:0; padding:0; flex:1; }
.cabinet-controls summary { height:100%; list-style:none; }
.cabinet-controls summary::-webkit-details-marker { display:none; }
.cabinet-controls .pb-back { flex:1; }
.cabinet-controls details[open] { background:#102b35; }
.cabinet-controls .cabinet-help-content { position:absolute; left:0; width:100%; background:#0a1d28; padding:12px; border:1px solid #427685; color:#e4eff2; font-size:12px; }
.cabinet-controls .cabinet-help-content { top:100%; margin:4px 0 0; z-index:4; box-shadow:0 10px 30px #000b; }
.cabinet-controls .cabinet-help-notes { grid-column:1 / -1; }
.cabinet-controls .cabinet-help-notes .pb-note { display:block; margin-top:8px; font-size:11px; }
.cabinet-controls button:hover, .cabinet-controls summary:hover, .cabinet-controls .pb-back:hover { background:#24515c; }

/* Leaderboard: in the empty space left of the cabinet, on screens wide enough to have some. */
.cabinet-only .pb-board { display:none; position:absolute; z-index:2; left:16px; top:16px; width:250px; user-select:text; -webkit-user-select:text; touch-action:auto; }
@media (min-width:1000px) and (min-aspect-ratio:13/10) { .cabinet-only .pb-board:not(:empty) { display:block; } }

/* Crisp insert lettering, anchored by the renderer to the real playfield. */
.cabinet-labels { position:absolute; inset:0; z-index:1; pointer-events:none; }
.cabinet-label { position:absolute; left:0; top:0; white-space:pre; text-align:center; padding:2px 4px; border-radius:3px; border-bottom:1px solid var(--label-color); background:linear-gradient(#102028eb,#061017e8); box-shadow:0 1px 3px #0006; color:#fff6df; font:700 11px/1.15 Arial,sans-serif; letter-spacing:.02em; text-shadow:0 1px 1px #000; }
.cabinet-label small { display:block; margin-top:1px; font-size:9.5px; line-height:1.1; color:#e2ded0; }
.cabinet-label.is-short { padding:1px 2px; }
.is-paused .cabinet-labels { opacity:.25; }

.cabinet-help-content { max-height:65vh; overflow:auto; text-align:left; }
.cabinet-controls .cabinet-help-content details { padding:8px 0; }
.cabinet-controls .cabinet-help-content summary { justify-content:flex-start; padding:6px; }
.cabinet-controls .cabinet-help-content dl { margin:8px 0; }
.cabinet-help-content .pb-shot-guide h2 { margin:0 0 6px; font:700 15px/1.2 Arial,sans-serif; color:#ffe0a0; }
.cabinet-help-content .pb-shot-guide dl { display:grid; grid-template-columns:85px 1fr; gap:9px; padding-bottom:12px; border-bottom:1px solid #34525c; }
.cabinet-controls .cabinet-help-content .pb-rules { margin:0; padding-left:20px; }
.cabinet-controls .cabinet-help-content .pb-note { font-size:11px; margin-top:10px; }