.surface-demo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin: 28px 0 30px; background: var(--panel); }
.surface-canvas { position: relative; min-height: 260px; overflow: hidden; background: #111822; }
.surface-canvas canvas, .surface-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.surface-ready .surface-fallback { display: none; }
.surface-coordinate { position: absolute; bottom: 18px; left: 20px; pointer-events: none; color: #a4bec4; font: .625rem Consolas,monospace; letter-spacing: .1em; }
.surface-copy { padding: 28px; }
.surface-copy h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.03em; margin: 0 0 12px; }
.surface-copy>p:not(.project-type) { color: var(--muted); font-size: .875rem; line-height: 1.75; margin: 0 0 22px; }
.surface-copy a { color: var(--acid); text-underline-offset: 4px; }
.surface-actions { display: flex; align-items: center; gap: 16px; }
.surface-actions button { border: 1px solid var(--acid); background: transparent; color: var(--acid); font: .75rem Consolas,monospace; padding: 12px 16px; min-height: 44px; white-space: nowrap; cursor: pointer; }
.surface-actions button:hover { background: #d5fb7810; }
.surface-actions span[role=status] { color: var(--muted); font-size: .75rem; line-height: 1.6; }
.surface-settings { display: flex; flex-wrap: wrap; gap: 12px 22px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; color: var(--muted); font: .6875rem Consolas,monospace; }
.surface-settings label { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.surface-settings input { accent-color: var(--acid); }
.surface-settings input[type=range] { width: 95px; }
.play-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0; }
.play-actions .acid-button { font: inherit; font-size: .8125rem; cursor: pointer; }
.play-actions>span { color: var(--muted); font: .625rem/1.6 Consolas,monospace; }
#fight-dialog { width: min(1080px,calc(100% - 32px)); max-width: 1080px; max-height: 94vh; max-height: 94svh; overflow-y: auto; overscroll-behavior: contain; background: #15171e; color: var(--text); border: 1px solid #555c69; padding: 0; }
#fight-dialog::backdrop { background: #08090eee; backdrop-filter: blur(6px); }
.fight-dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; gap: 12px; }
.fight-dialog-heading .project-type { margin: 0 0 6px; }
.fight-dialog-heading h2 { font-size: 2rem; font-weight: 500; margin: 0; letter-spacing: -.05em; }
#fight-dialog button { cursor: pointer; border: 1px solid #505560; color: #eef1f7; background: #22252e; min-height: 44px; padding: 10px 15px; font: .75rem Consolas,monospace; }
#fight-dialog button:hover { border-color: var(--acid); }
#fight-dialog button:disabled { cursor: default; opacity: .5; }
.fight-screen { aspect-ratio: 16/9; position: relative; background: #15131c; }
.fight-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
#fight-dialog[data-state=loading] .fight-screen::after, #fight-dialog[data-state=error] .fight-screen::after { content: 'Caricamento arena…'; position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: .875rem Consolas,monospace; color: var(--muted); }
#fight-dialog[data-state=error] .fight-screen::after { content: 'Arena non disponibile. Premi Ricomincia per riprovare.'; }
#fight-dialog[data-state=paused] .fight-screen::after { content: 'IN PAUSA'; position: absolute; inset: 0; display: grid; place-items: center; background: #11121680; color: var(--acid); font: 1.25rem Consolas,monospace; letter-spacing: .1em; pointer-events: none; }
.fight-toolbar { padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.fight-toolbar>p { margin: 0; font: .6875rem/1.6 Consolas,monospace; color: var(--muted); }
.fight-toolbar>div { display: flex; gap: 8px; }
#fight-instructions { color: var(--muted); margin: 16px 24px; font-size: .75rem; line-height: 1.6; }
.fight-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 24px; }
.fight-controls fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.fight-controls legend { width: 100%; display: flex; justify-content: space-between; gap: 8px; font: .6875rem/1.6 Consolas,monospace; margin-bottom: 10px; }
.fight-controls legend>span+span { color: var(--muted); }
.fight-controls fieldset>div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
#fight-dialog .fight-controls button { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 1.125rem; min-height: 58px; padding: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
#fight-dialog .fight-controls button.is-held { background: #d5fb7820; border-color: var(--acid); }
.fight-controls small { font-size: .625rem; color: var(--muted); }
.fight-credit { margin: 18px 24px 22px; font: .625rem/1.7 Consolas,monospace; color: var(--muted); }
.fight-credit a { color: inherit; text-underline-offset: 3px; }
@media(max-width:780px) {
 .surface-demo { grid-template-columns: 1fr; }
 .surface-canvas { min-height: 210px; }
 .surface-copy { padding: 24px; }
}
@media(max-width:600px) {
 #fight-dialog { width: calc(100% - 16px); }
 .fight-dialog-heading { padding: 15px; }
 .fight-toolbar { padding: 12px 15px; flex-wrap: wrap; }
 .fight-toolbar>div { width: 100%; }
 .fight-toolbar button { flex: 1; }
 #fight-instructions { margin: 14px 15px; }
 .fight-controls { grid-template-columns: 1fr; gap: 18px; margin: 16px 15px; }
 .fight-credit { margin: 16px 15px; }
 .surface-actions { flex-wrap: wrap; }
}
@media print {
 .surface-demo, .play-actions, #fight-dialog { display: none; }
}