/* CISO Fight Arcade CSS Stylesheet */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

html, body { height: 100%; }

body {
    background-color: #0b0c10;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    display: flex;
    justify-content: center;
    align-items: stretch;   /* il cabinato riempie l'altezza disponibile */
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 6px;
}

/* Layout a GRIGLIA: header | schermo | controlli. Lo schermo (riga 1fr) si ridimensiona per
   NON far mai sforare il gioco fuori dal viewport, qualunque sia l'altezza della finestra. */
#arcade-container {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    max-height: 100%;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 6px solid #e94560;
    border-radius: 12px;
    box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.8);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

/* Header Marquee */
#arcade-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #0f0f1b;
    border: 3px solid #ffcc00;
    border-radius: 6px;
    margin-bottom: 10px;
}

.marquee-title {
    color: #ffcc00;
    font-size: 14px;
    text-shadow: 0 0 10px #ffcc00, 2px 2px 0px #ff0055;
    letter-spacing: 1px;
}

#crt-toggle {
    background: #e94560;
    color: #fff;
    border: 2px solid #fff;
    padding: 6px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.1s, background 0.2s;
}

#crt-toggle:hover {
    background: #ff0055;
    transform: scale(1.05);
}

/* Cabinet Screen Wrapper */
#screen-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;   /* come i CRT dei cabinati, non 16:9 */
    max-width: 100%;
    max-height: 100%;        /* non supera mai l'altezza della cella (fix overflow verticale) */
    width: auto;
    height: auto;
    margin: auto;            /* centrato nella riga 1fr */
    background: #000;
    border: 4px solid #333;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}

/* CRT: scanline + maschera RGB (sopra) */
#screen-wrapper.crt-overlay::after {
    content: " ";
    display: block;
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.26) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.012), rgba(0, 0, 255, 0.04));
    z-index: 10;
    background-size: 100% 3px, 5px 100%;
    pointer-events: none;
}
/* CRT: curvatura del vetro (bordi scuri) + riflesso, per l'effetto tubo catodico */
#screen-wrapper.crt-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    border-radius: 12px;
    box-shadow: inset 0 0 55px 8px rgba(0, 0, 0, 0.5);
    background:
        radial-gradient(130% 130% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.4) 100%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 22%);
}
#screen-wrapper.crt-overlay { border-radius: 16px; }
#screen-wrapper.crt-overlay #gameCanvas { border-radius: 12px; }

#gameCanvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* HUD Overlay */
#hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hud-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

/* I tre riquadri devono STARE nello schermo. Con `min-width: 240px` ciascuno servivano 720px: passando
   al 4:3 (schermo piu' stretto) il riquadro di stage/boss collassava a larghezza 0 e finiva fuori campo.
   Ora si restringono in proporzione invece di sparire. */
.hud-top > * { min-width: 0; }

.p1-hud {
    background: rgba(0, 0, 0, 0.75);
    padding: 5px 10px;
    border-left: 4px solid #00ffcc;
    border-radius: 4px;
    flex: 1 1 36%;
    max-width: 40%;
}

.p1-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.p1-label {
    color: #00ffcc;
    font-size: 13px;
    text-shadow: 1px 1px 0 #000;
}

.p1-lives-container {
    color: #ffcc00;
    font-size: 11px;
    text-shadow: 1px 1px 0 #000;
}

/* Barra vita: alta quanto una riga di testo del box HIGH SCORE. Prima era uno spesso nastro da 20px
   (16 + bordo) che con la barra special sotto occupava mezzo pannello e rubava spazio alla scena. */
.health-bar-container {
    width: 100%;
    height: 9px;
    background: #333;
    border: 1px solid #fff;
    margin-bottom: 3px;
    overflow: hidden;
}

.health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffcc00 0%, #ff3300 100%);
    transition: width 0.15s ease-out;
}

/* La barra dello special non esiste piu': la mossa e' sempre disponibile e si paga in vita. */

.p1-character-name {
    color: #fff;
    font-size: 10px;
    margin-top: 2px;
}

/* High Score HUD */
.top-score-hud {
    flex: 0 1 auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.75);
    padding: 6px 14px;
    border-radius: 4px;
    border-bottom: 3px solid #ffcc00;
}

.top-label {
    color: #ff3300;
    font-size: 11px;
}

.top-score {
    color: #ffcc00;
    font-size: 14px;
}

/* Stage & Boss HUD */
.stage-hud {
    text-align: right;
    background: rgba(0, 0, 0, 0.75);
    padding: 8px 10px;
    border-right: 4px solid #ff0055;
    border-radius: 4px;
    flex: 1 1 36%;
    max-width: 42%;
}

#stage-title {
    color: #ffcc00;
    font-size: 11px;
}

#boss-hud-container {
    margin-top: 4px;
}

.boss-name {
    color: #ff0055;
    font-size: 10px;
    margin-bottom: 2px;
}

.boss-status {
    color: #ffcc00;
    font-size: 8px;
    margin-bottom: 2px;
}

.boss-health-bar {
    width: 100%;
    height: 12px;
    background: #222;
    border: 2px solid #ff0055;
}

.boss-health-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0055, #ff00aa);
    transition: width 0.15s, background 0.4s;
}

/* Barra del boss a STRATI: il colore dice a colpo d'occhio in che fase sei.
   Fase 1 verde -> Fase 2 gialla -> FURIA rossa fiammeggiante (pulsa). */
.boss-health-fill.phase-1 { background: linear-gradient(90deg, #1e8449, #2ecc71); }
.boss-health-fill.phase-2 { background: linear-gradient(90deg, #b7950b, #f1c40f); }
.boss-health-fill.phase-3 {
    background: linear-gradient(90deg, #7b241c, #ff0055 45%, #ff8c00);
    animation: bossRage 0.55s ease-in-out infinite alternate;
}
@keyframes bossRage {
    from { box-shadow: 0 0 4px #ff0055, inset 0 0 4px rgba(255,140,0,0.5); filter: brightness(1); }
    to   { box-shadow: 0 0 16px #ff8c00, inset 0 0 10px rgba(255,255,0,0.7); filter: brightness(1.35); }
}
/* Tacche che separano visivamente i tre strati della barra */
.boss-health-bar {
    background-image: linear-gradient(90deg, transparent 32.8%, rgba(255,255,255,0.55) 32.8% 33.5%,
                                              transparent 33.5% 65.8%, rgba(255,255,255,0.55) 65.8% 66.5%,
                                              transparent 66.5%);
}
@media (prefers-reduced-motion: reduce) {
    .boss-health-fill.phase-3 { animation: none; }
}

/* Bottom HUD & Blinking Arrow */
.hud-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blinking-arrow {
    color: #00ffcc;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px #00ffcc, 2px 2px 0 #000;
    animation: blink 0.5s infinite alternate;
}

@keyframes blink {
    from { opacity: 0.2; transform: translateX(0); }
    to { opacity: 1; transform: translateX(10px); }
}

#credits-counter {
    color: #ffcc00;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.85);
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid #ffcc00;
}

.hidden {
    display: none !important;
}

/* Controls Legend & Touch Controls */
#controls-panel {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.controls-legend {
    font-size: 9px;
    color: #aaa;
    text-align: center;
    line-height: 1.6;
}

.key-badge {
    background: #e94560;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    margin: 0 2px;
}

/* Modern Arcade Item & Point Dashboard (Game & Web Designer Layout) */
.arcade-item-dashboard {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 6px 0 10px 0;
    flex-wrap: wrap;
}

.dash-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(20, 20, 35, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, border-color 0.2s;
}

.dash-card:hover {
    transform: translateY(-2px);
}

.card-cannolo {
    border-color: #d35400;
    box-shadow: 0 0 10px rgba(211, 84, 0, 0.3);
}

.card-cipollina {
    border-color: #f39c12;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.card-arancino {
    border-color: #ff9900;
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.35);
}

.sprite-icon {
    font-size: 16px;
    line-height: 1;
}

.dash-item-icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dash-item-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #ffcc00;
    text-shadow: 1px 1px 0 #000;
    letter-spacing: 0.5px;
}

.item-canvas-icon {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}

.dash-pts {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* ===== Controlli touch stile CABINATO ARCADE anni 80-90 (Astro City / SNES) ===== */
#touch-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-width: 640px;
    margin: 4px auto 0;
    padding: 0 8px;
    gap: 12px;
}

.touch-btn {
    font-family: 'Press Start 2P', monospace;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* --- JOYSTICK ARCADE a PALLA ROSSA --- */
#dpad {
    position: relative;
    width: 148px; height: 148px;
    flex: 0 0 auto;
    background: radial-gradient(circle at 50% 38%, #262b3d, #0c0e15 72%);
    border: 4px solid #05060a;
    border-radius: 50%;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.55), inset 0 3px 8px rgba(255, 255, 255, 0.08), inset 0 -12px 20px rgba(0, 0, 0, 0.55);
}
.joy-shaft {
    position: absolute; left: 50%; top: 46%;
    width: 20px; height: 42px; margin-left: -10px;
    background: linear-gradient(90deg, #1c1c1c, #6a6a6a, #1c1c1c);
    border-radius: 6px 6px 3px 3px;
    transform-origin: 50% 100%;
    transition: transform .08s ease-out;
    z-index: 1;
}
.joy-ball {
    position: absolute; left: 50%; top: 50%;
    width: 56px; height: 56px; margin-left: -28px; margin-top: -44px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #ff9a9a, #e21030 55%, #8a0018);
    border: 2px solid #5a000f;
    box-shadow: inset 0 5px 9px rgba(255, 255, 255, 0.55), inset 0 -9px 14px rgba(0, 0, 0, 0.45), 0 5px 9px rgba(0, 0, 0, 0.5);
    transition: transform .08s ease-out;
    z-index: 2;
}
/* i 4 bottoni sono zone tattili trasparenti sulla base del joystick */
.dpad-middle { display: contents; }
.dpad-btn {
    position: absolute;
    background: transparent; border: none; box-shadow: none; color: transparent;
    padding: 0;
}
#btn-up { top: 0; left: 22%; width: 56%; height: 52%; }
#btn-down { bottom: 0; left: 22%; width: 56%; height: 52%; }
#btn-left { left: 0; top: 22%; width: 52%; height: 56%; }
#btn-right { right: 0; top: 22%; width: 52%; height: 56%; }

/* la palla (e l'asta) si inclina nella direzione premuta: touch (:active) o tastiera (.pressed) */
#dpad:has(#btn-up.pressed) .joy-ball, #dpad:has(#btn-up:active) .joy-ball { transform: translateY(-16px); }
#dpad:has(#btn-down.pressed) .joy-ball, #dpad:has(#btn-down:active) .joy-ball { transform: translateY(12px); }
#dpad:has(#btn-left.pressed) .joy-ball, #dpad:has(#btn-left:active) .joy-ball { transform: translateX(-16px); }
#dpad:has(#btn-right.pressed) .joy-ball, #dpad:has(#btn-right:active) .joy-ball { transform: translateX(16px); }
#dpad:has(#btn-left.pressed) .joy-shaft, #dpad:has(#btn-left:active) .joy-shaft { transform: rotate(-16deg); }
#dpad:has(#btn-right.pressed) .joy-shaft, #dpad:has(#btn-right:active) .joy-shaft { transform: rotate(16deg); }

/* --- PULSANTI AZIONE: bottoni ROTONDI da cabinato (Astro City): 3 sopra, 2 sotto --- */
#action-buttons {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px 12px;
    align-items: center;
    justify-items: center;
    flex: 0 0 auto;
}
#btn-punch { grid-area: 1 / 1; }
#btn-kick { grid-area: 1 / 2; }
#btn-jump { grid-area: 1 / 3; }
#btn-special { grid-area: 2 / 1; }
#btn-coin { grid-area: 2 / 2; }

.action-btn {
    width: 58px; height: 58px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #1a1a1a;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.55), inset 0 -7px 12px rgba(0, 0, 0, 0.32);
    transition: transform .05s, box-shadow .05s;
}
.action-btn b { font-size: 7px; letter-spacing: 0.3px; font-weight: 700; }
.action-btn i { font-size: 11px; font-style: normal; opacity: 0.8; }
.action-btn:active,
.action-btn.pressed { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 3px 8px rgba(0, 0, 0, 0.45); }

.red-btn { background: radial-gradient(circle at 38% 30%, #ff9a9a, #e21540 55%, #8f0018); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.blue-btn { background: radial-gradient(circle at 38% 30%, #9ad9ff, #1782d8 55%, #093f77); color: #eaf6ff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.yellow-btn { background: radial-gradient(circle at 38% 30%, #fff2a8, #f4c400 55%, #9c7400); color: #3a2c00; }
.green-btn { background: radial-gradient(circle at 38% 30%, #b6ffd0, #17c957 55%, #0a7a34); color: #05351a; }
.coin-btn { background: radial-gradient(circle at 38% 30%, #ffe9a8, #e0a800 55%, #8a6400); color: #3a2c00; }

/* ---------------------------------------------------------------------------
   Responsive: il layout a griglia impedisce già lo sfòro in altezza (lo schermo
   si ridimensiona). Su schermi piccoli/bassi liberiamo altezza nascondendo il
   cruscotto item e portando i controlli in OVERLAY sul gioco (pollici ai lati).
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body { padding: 3px; }
    #arcade-container { padding: 6px; border-width: 4px; }
    .marquee-title { font-size: 9px; }
    #crt-toggle { font-size: 8px; padding: 5px 8px; }
    .p1-hud, .stage-hud { min-width: 0; padding: 5px 7px; }
    .p1-label { font-size: 9px; }
    .p1-lives-container, #stage-title { font-size: 8px; }
    .top-label { font-size: 8px; }
    .top-score { font-size: 10px; }
    .arcade-item-dashboard { display: none; }   /* recupera spazio verticale */
}

/* Schermi piccoli o bassi: controlli come OVERLAY a schermo intero (fuori dalla griglia),
   così lo schermo di gioco usa tutta l'altezza. D-pad a sinistra, azioni a destra. */
@media (max-width: 820px), (max-height: 620px) {
    #controls-panel {
        position: fixed;
        left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom));
        margin: 0;
        z-index: 40;
        pointer-events: none;   /* i click passano al gioco tranne che sui bottoni */
        gap: 0;
    }
    #touch-controls {
        max-width: none;
        margin: 0;
        padding: 0 10px;
        pointer-events: none;
    }
    #dpad, #action-buttons { pointer-events: auto; opacity: 0.92; }
    /* Su schermi piccoli si nasconde SOLO il titolo dello stage, non tutto il riquadro: dentro c'è la
       barra della vita del BOSS (con le fasi colorate), che è informazione di gioco essenziale.
       Prima `display: none` sull'intero .stage-hud la faceva sparire da telefono. */
    .stage-hud { background: transparent; border-right: none; padding: 2px 4px; }
    #stage-title { display: none; }             /* il titolo compare comunque a inizio livello */
}

/* Telefono vero: pulsanti più grandi per il pollice */
@media (max-width: 560px) {
    #dpad { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); }
    .dpad-btn { width: 46px; height: 46px; font-size: 21px; }
    .action-btn { width: 64px; height: 64px; }
    .action-btn b { font-size: 7.5px; }
    .action-btn i { font-size: 12px; }
    #arcade-header { padding: 5px 8px; }
}

/* ---------------------------------------------------------------------------
   TELEFONO IN ORIZZONTALE. Lo schermo di gioco e' 4:3: in landscape e' l'ALTEZZA
   a limitarlo, quindi resta una fascia vuota a SINISTRA e a DESTRA del riquadro.
   E' li' che vanno i comandi — non in overlay sopra il gioco, dove coprivano
   l'azione. Il contenitore diventa una griglia a TRE colonne: joystick | gioco |
   pulsanti, e il gioco al centro non viene mai toccato dai pollici.

   `display: contents` scioglie i due wrapper (#controls-panel, #touch-controls)
   cosi' che joystick e pulsanti diventino direttamente celle di questa griglia,
   senza dover cambiare l'HTML. Sotto una certa larghezza il riquadro di gioco si
   restringe (max-width) per GARANTIRE lo spazio ai lati: meglio un gioco un filo
   piu' piccolo che dei comandi sovrapposti. */
@media (orientation: landscape) and (max-height: 500px) {
    #arcade-header { display: none; }

    #arcade-container {
        grid-template-columns:
            minmax(112px, 1fr)
            auto
            minmax(112px, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: center;
        justify-items: center;
        gap: 4px;
        padding: 3px calc(3px + env(safe-area-inset-right)) 3px calc(3px + env(safe-area-inset-left));
    }

    /* il gioco al centro; il max-width tiene libere le due fasce laterali anche
       sui telefoni piu' stretti, dove l'altezza da sola non basterebbe */
    #screen-wrapper {
        grid-column: 2; grid-row: 1;
        max-height: 100%;
        max-width: calc(100vw - 250px);
        margin: 0;
    }

    /* i wrapper spariscono come scatole: i loro figli passano alla griglia madre */
    #controls-panel, #touch-controls {
        display: contents;
        position: static;   /* annulla il position:fixed dell'overlay in portrait */
    }

    #dpad {
        grid-column: 1; grid-row: 1;
        width: 116px; height: 116px;
        opacity: 0.94;
    }
    .dpad-btn { font-size: 0; }

    /* pulsanti a DUE colonne: piu' stretti, stanno nella fascia destra */
    #action-buttons {
        grid-column: 3; grid-row: 1;
        grid-template-columns: repeat(2, auto);
        gap: 8px 10px;
        opacity: 0.94;
    }
    #btn-punch, #btn-kick, #btn-jump, #btn-special, #btn-coin { grid-area: auto; }
    .action-btn { width: 50px; height: 50px; }
    .action-btn b { font-size: 6.5px; }
    .action-btn i { font-size: 10px; }
}

/* Landscape molto basso (telefoni piccoli): tutto un po' piu' compatto perche' la
   fascia laterale e' piu' stretta. */
@media (orientation: landscape) and (max-height: 380px) {
    #arcade-container { grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr); }
    #screen-wrapper { max-width: calc(100vw - 220px); }
    #dpad { width: 104px; height: 104px; }
    .action-btn { width: 46px; height: 46px; }
    .action-btn b { font-size: 6px; }
}