.pinball{width:var(--pb-w);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xs);color:var(--pb-cab-ink, var(--ink-on-accent));outline-offset:6px}.pinball__head{background:var(--pb-cab, #161312);border-radius:1.1rem 1.1rem .4rem .4rem;padding:.7rem .8rem .8rem;display:grid;gap:.55rem;box-shadow:inset 0 0 0 2px var(--pb-trim, #ED1C24)}.pinball__marquee{width:72%;height:auto;margin-inline:auto}.pinball__dmd{position:relative;aspect-ratio:4 / 1;background:var(--pb-dmd-bg, #0b0807);border-radius:.35rem;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 0 18px #000c}.pinball__dmd-canvas{position:absolute;inset:0;width:100%;height:100%}.pinball__dmd-static{position:absolute;inset:0;margin:0;display:grid;place-content:center;gap:.1em;text-align:center;font-family:var(--pb-dmd-font, ui-monospace, monospace);font-size:var(--step-0);line-height:1.1;letter-spacing:.14em;text-transform:uppercase;color:var(--pb-dmd-ink, #ff4a2e);-webkit-mask:radial-gradient(circle,#000 52%,transparent 58%) 0 0 / 4px 4px;mask:radial-gradient(circle,#000 52%,transparent 58%) 0 0 / 4px 4px;font-weight:700;max-width:none}.pinball__dmd-static span:last-child{opacity:.75}.pinball.is-live .pinball__dmd-static{display:none}.pinball__table{position:relative;aspect-ratio:600 / 1100;border-radius:.4rem .4rem 1.1rem 1.1rem;overflow:hidden;background:var(--pb-cab, #161312);box-shadow:inset 0 0 0 6px var(--pb-cab, #161312),0 1.5rem 3rem -1.5rem #0000008c}.pinball__poster,.pinball__field{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:.2rem .2rem .8rem .8rem}.pinball__field{touch-action:none;opacity:0}.pinball.is-live .pinball__field{opacity:1}.pinball.is-live .pinball__poster{visibility:hidden}.pinball__start{position:absolute;inset:auto 0 30%;display:grid;justify-items:center;gap:.5rem;padding-inline:1rem}.pinball.is-live .pinball__start{display:none}.pinball__play{box-shadow:0 .75rem 2rem -.5rem #0009}.pinball__nojs{background:var(--pb-cab, #161312);color:var(--pb-cab-ink, #f6f4f0);padding:.5rem .8rem;border-radius:.3rem;margin:0}.pinball__controls{display:grid;gap:.5rem}.pinball__flippers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.pinball__secondary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}.pb-btn{min-height:var(--target-min);border:0;border-radius:.6rem;background:var(--pb-btn-bg, #161312);color:var(--pb-btn-ink, #f6f4f0);font:600 var(--step--1) / 1.1 var(--font-body);padding:.5rem .4rem;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.pb-btn--flip,.pb-btn--launch{min-height:3.5rem;font-size:var(--step-0)}.pb-btn--launch{background:var(--pb-btn-accent, #ED1C24);color:var(--pb-btn-accent-ink, #fff)}.pb-btn[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--pb-btn-accent, #ED1C24)}@media(prefers-reduced-motion:no-preference){.pb-btn:active{scale:.96;transition:scale var(--dur-instant) var(--ease-press)}}.pinball__keys{font-size:var(--step--1);color:var(--pb-keys-ink, var(--ink-muted));margin:0;max-width:none;text-align:center}.pinball__keys kbd{font:inherit;font-weight:700;border:1px solid currentColor;border-radius:.25rem;padding:0 .3em}@media(pointer:coarse){.pinball__keys{display:none}}.pinball{--pb-w: min(100%, 34rem, calc((100svh - var(--header-height) - 12rem) / 2.083))}@media(max-width:63.99rem){.pinball.is-live .pinball__keys,.pinball.is-live .pinball__marquee{display:none}.pinball.is-live .pinball__secondary .pb-btn{min-height:44px}}.pb-playing .action-bar{display:none}@media(min-width:64rem){.pinball{--pb-w: min(100%, 56rem);--pb-table-w: min(34rem, calc((100svh - var(--header-height) - 2.5rem) * 600 / 1100));grid-template-columns:min(var(--pb-table-w),100% - 15rem - var(--space-m)) minmax(15rem,1fr);grid-template-areas:"table head" "table controls" "table keys" "table .";grid-template-rows:auto auto auto 1fr;column-gap:var(--space-m);align-items:start}.pinball__head{grid-area:head;border-radius:1rem}.pinball__table{grid-area:table}.pinball__controls{grid-area:controls}.pinball__keys{grid-area:keys;text-align:left}.pinball__flippers{grid-template-columns:1fr 1fr}.pb-btn--launch{grid-column:1 / -1;order:3}.pinball__secondary{grid-template-columns:1fr 1fr}}
