:root { --oro: #ffcf3a; --sangue: #c2180f; --fondo: #110505; --titolo: 'Anton', Impact, 'Arial Black', sans-serif; --testo: 'Barlow Condensed', 'Arial Narrow', sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fondo); color: #fff; font-family: var(--testo); user-select: none; -webkit-user-select: none; touch-action: none; }
#gioco { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.nascosto { display: none !important; }
button { font: inherit; cursor: pointer; touch-action: manipulation; } /* niente zoom col doppio tocco */

/* schermate sopra il gioco */
#carica, #menu, #scelta, #fine, #guida, #gira { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
#carica b, #gira b { font-family: var(--titolo); font-size: 40px; color: var(--oro); }
#carica { background: var(--fondo); z-index: 20; gap: 8px; }
#gira { background: var(--fondo); z-index: 30; font-size: 20px; }
#menu { background: linear-gradient(transparent 30%, rgba(0,0,0,.75)); }
h1 { font-family: var(--titolo); font-weight: 400; font-size: clamp(44px, 11vh, 110px); line-height: .95; margin: 0 0 4vh; color: var(--oro);
  text-shadow: 0 0 18px #ff3300, 4px 4px 0 #000, -2px -2px 0 #000; letter-spacing: 2px; transform: skewX(-6deg); }
h2 { font-family: var(--titolo); font-weight: 400; color: var(--oro); font-size: clamp(26px, 6vh, 48px); margin: 0 0 2vh; text-shadow: 3px 3px 0 #000; }
.pulsanti { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pulsanti button, #guida-chiudi { min-width: 240px; font-family: var(--titolo); font-size: 26px; padding: 8px 24px; border: 3px solid #000; border-radius: 8px;
  background: var(--sangue); color: #fff; text-shadow: 2px 2px 0 #000; box-shadow: 0 4px 0 #000; }
.pulsanti button:focus-visible, .pulsanti button.sel { outline: 3px solid var(--oro); }
.pulsanti button.secondario { background: #333; font-size: 20px; }
#menu small { margin-top: 14px; color: #ccc; font-size: 16px; }

#scelta { background: rgba(0,0,0,.55); }
#ritratti { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ritratto { width: clamp(84px, 16vh, 150px); aspect-ratio: 1; border: 4px solid #444; border-radius: 8px; background: #2a1010; overflow: hidden; position: relative; }
.ritratto canvas { width: 100%; height: 100%; display: block; }
.ritratto.p1 { border-color: #3fa9f5; } .ritratto.p2 { border-color: var(--sangue); } .ritratto.p1.p2 { border-color: #c050ff; }
.ritratto span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); font-weight: 800; font-size: 15px; }
#scelta-info { margin-top: 2vh; min-height: 3em; font-size: 20px; } #scelta-info b { color: var(--oro); font-family: var(--titolo); font-weight: 400; font-size: 28px; }

#fine { background: rgba(0,0,0,.6); z-index: 6; }
#fine p { font-size: 22px; margin: 0 0 3vh; }

#guida { background: rgba(10,0,0,.95); z-index: 10; overflow-y: auto; justify-content: flex-start; }
#guida > div { margin: auto; max-width: 640px; }
#guida table { border-collapse: collapse; margin: 0 auto 12px; font-size: 18px; }
#guida td, #guida th { padding: 4px 12px; border-bottom: 1px solid #333; text-align: left; } #guida th { color: var(--oro); }
#guida p { font-size: 17px; color: #ddd; }

/* comandi touch */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 4; left: env(safe-area-inset-left); right: env(safe-area-inset-right); }
#stick { position: absolute; left: 24px; bottom: 20px; width: 140px; height: 140px; border-radius: 50%; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.35); pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 45px; top: 45px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.55); }
#tasti { position: absolute; right: 18px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 70px); gap: 8px; pointer-events: auto; }
#tasti button { height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: rgba(0,0,0,.35); color: #fff; font-weight: 800; font-size: 13px; touch-action: none; }
#tasti button.largo { grid-column: span 3; border-radius: 29px; background: rgba(255,207,58,.3); }
#tasti button.giu { background: rgba(255,207,58,.85); color: #000; }
#pausa { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); margin-top: 60px; width: 40px; height: 32px; border-radius: 6px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); color: #fff; pointer-events: auto; font-size: 13px; }
@media (pointer: fine) { .solo-touch { display: none !important; } }
@media (pointer: coarse) { .solo-pc { display: none !important; } }