/* Iron Clash — game-specific stylesheet. Loaded AFTER shared-game.css
   so these rules override the studio defaults where they need to.

   Currently this file only customizes mobile touch controls. The
   pattern matches Rift Drifter's (see public/games/rift-drifter/
   styles.css) so the two games behave the same way on phones:

     - Invisible .touch-joystick-zone covers the lower-left half;
       touching it spawns the real floating joystick at the touch
       point.
     - .touch-joystick-ghost is a visible placeholder shown when the
       real joystick is idle, so the player can SEE where the
       joystick lives. Hidden while the real joystick is active.
     - .touch-joystick (the real one) is position: fixed so its
       style.left/top in JS uses raw viewport coordinates and
       matches touch event clientX/clientY — avoids the iOS WKWebView
       rect-translation bugs Rift Drifter ran into.

   Joystick ghost and fire button are the SAME size (80x80) and at
   the SAME edge distance (40px from side, 60px from bottom) so they
   read as a level, parallel pair. */

/* ── Touch zone (invisible, captures touches in the lower-left) ── */
.touch-joystick-zone {
    position: fixed;
    top: 120px;                      /* clear the top HUD row */
    left: 0;
    bottom: 0;
    width: 50%;
    pointer-events: auto;
    touch-action: none;
}

/* ── Ghost joystick (visible placeholder by default) ── */
.touch-joystick-ghost {
    position: fixed;
    left: calc(40px + env(safe-area-inset-left, 0px));
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 170, 0.32);
    background: rgba(0, 255, 170, 0.04);
    pointer-events: none;            /* zone receives touches; this is decoration */
    opacity: 1;
    transition: opacity 0.18s ease-out;
}
.touch-joystick-ghost-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 255, 170, 0.18);
    border: 1.5px solid rgba(0, 255, 170, 0.42);
}
.touch-joystick-ghost.hidden {
    opacity: 0;
}

/* ── Real floating joystick (overrides shared-game.css) ── */
.touch-joystick {
    position: fixed;                 /* raw viewport coords match touch events */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 170, 0.50);
    background: rgba(0, 255, 170, 0.06);
    pointer-events: none;
    touch-action: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
}
.touch-joystick.active {
    opacity: 1;
}
.touch-joystick-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 255, 170, 0.26);
    border: 1.5px solid rgba(0, 255, 170, 0.55);
    transition: background 0.1s;
}
.touch-joystick.active .touch-joystick-thumb {
    background: rgba(0, 255, 170, 0.42);
}

/* ── Fire button (overrides shared-game.css; symmetric with ghost) ── */
.touch-fire {
    width: 80px;
    height: 80px;
    right: calc(40px + env(safe-area-inset-right, 0px));
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    border-color: rgba(0, 255, 170, 0.50);
    background: rgba(0, 255, 170, 0.06);
    color: rgba(0, 255, 170, 0.80);
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.12em;
}
.touch-fire.active {
    background: rgba(0, 255, 170, 0.26);
    border-color: rgba(0, 255, 170, 0.75);
    color: rgba(0, 255, 170, 1);
}

/* ── Hide ghost + fire during title and game-over so they don't
       compete with the canvas-drawn screens. JS toggles "playing"
       on .touch-controls when gameState === PLAYING. ─────────────── */
.touch-controls:not(.playing) .touch-joystick-ghost,
.touch-controls:not(.playing) .touch-fire {
    opacity: 0;
    pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────
   Phase 5: real menus
   - State-dependent corner button (pause during play, fullscreen
     otherwise) — both share the bottom-right corner; JS toggles
     .hidden on whichever one is inactive for the current state.
   - Screen overlays for title buttons, pause, game-over, settings.
     All hidden by default; JS shows the appropriate one.
   ─────────────────────────────────────────────────────────────── */

/* Pause button — matches the .hud-fullscreen style + position so
   the corner looks the same and just changes glyph based on state. */
.hud-pause {
    position: fixed;
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    right:  calc(1rem   + env(safe-area-inset-right,  0px));
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #444;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: #888;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
    z-index: 20;
}
.hud-pause:hover,
.hud-pause:focus-visible {
    border-color: var(--accent);
    background: rgba(0, 255, 170, 0.08);
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.2);
    color: var(--accent);
    outline: none;
}
.hud-pause svg {
    width: 14px;
    height: 14px;
}
.hud-pause.hidden,
.hud-fullscreen.hidden {
    display: none;
}

/* Screen overlay base. Container is pointer-events:none so clicks
   only land on the panel inside it (let the canvas behind the
   overlay still receive events outside the panel). */
.ic-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    padding:
        env(safe-area-inset-top, 0px)
        env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px)
        env(safe-area-inset-left, 0px);
    pointer-events: none;
}
.ic-screen.hidden {
    display: none;
}
.ic-screen .ic-panel {
    pointer-events: auto;
}
/* Pause + Settings get a dimming backdrop. Title and game-over
   screens DO NOT — the canvas art (wordmark / WRAITH OFFLINE)
   needs to show through. */
#screen-pause,
#screen-settings {
    background: rgba(0, 0, 0, 0.55);
}
/* Push title buttons toward the lower-third so they sit below the
   wordmark on the canvas. */
.ic-screen--title {
    align-items: flex-end;
    padding-bottom: calc(15vh + env(safe-area-inset-bottom, 0px));
}
/* Same for game-over — buttons below the "WRAITH OFFLINE" art. */
.ic-screen--bottom {
    align-items: flex-end;
    padding-bottom: calc(20vh + env(safe-area-inset-bottom, 0px));
}

.ic-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 24px 28px;
    max-width: 90vw;
}
.ic-panel-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--accent);
    letter-spacing: 0.22em;
    text-align: center;
    margin: 0 0 8px;
    text-shadow: 0 0 18px rgba(0, 255, 170, 0.4);
}

/* Buttons. Real <button> elements so accessibility comes free
   (focus rings, keyboard activation, screen reader support). */
.ic-btn {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    padding: 12px 28px;
    min-width: 220px;
    border: 1.5px solid rgba(0, 255, 170, 0.5);
    border-radius: 4px;
    background: rgba(0, 255, 170, 0.05);
    color: rgba(0, 255, 170, 0.85);
    cursor: pointer;
    text-transform: uppercase;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
    -webkit-user-select: none;
}
.ic-btn:hover,
.ic-btn:focus-visible {
    border-color: var(--accent);
    background: rgba(0, 255, 170, 0.16);
    color: var(--accent);
    outline: none;
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.25);
}
.ic-btn:active {
    background: rgba(0, 255, 170, 0.26);
}
.ic-btn--primary {
    background: rgba(0, 255, 170, 0.20);
    color: rgba(0, 255, 170, 1);
}
.ic-btn--primary:hover,
.ic-btn--primary:focus-visible {
    background: rgba(0, 255, 170, 0.32);
}

/* Settings list. */
.ic-panel--settings {
    min-width: 320px;
}
.ic-settings {
    list-style: none;
    margin: 8px 0 14px;
    padding: 0;
    width: 100%;
    max-width: 360px;
    max-height: 60vh;
    overflow-y: auto;
}
.ic-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 255, 170, 0.18);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: rgba(0, 255, 170, 0.85);
    text-transform: uppercase;
}
.ic-setting:last-child {
    border-bottom: 0;
}
.ic-toggle {
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    min-width: 90px;
    border: 1px solid rgba(0, 255, 170, 0.4);
    border-radius: 3px;
    background: rgba(0, 255, 170, 0.04);
    color: rgba(0, 255, 170, 0.65);
    cursor: pointer;
    text-transform: uppercase;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ic-toggle.on {
    background: rgba(0, 255, 170, 0.22);
    border-color: var(--accent);
    color: var(--accent);
}
.ic-toggle:hover,
.ic-toggle:focus-visible {
    border-color: var(--accent);
    outline: none;
}

/* Title-screen briefing line — tiny controls hint at the very
   bottom. Desktop-only (mobile has visible touch controls). */
.ic-briefing {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(200, 220, 215, 0.30);
    text-align: center;
    line-height: 1.7;
    pointer-events: none;
    padding: 0 16px;
    white-space: nowrap;
}
@media (pointer: coarse) {
    .ic-briefing { display: none; }
}

/* Tighten on narrow screens so the panels still fit. */
@media (max-width: 480px) {
    .ic-btn {
        font-size: 0.78rem;
        padding: 10px 20px;
        min-width: 180px;
    }
    .ic-panel-title {
        font-size: 1.3rem;
    }
    .ic-panel {
        padding: 18px 20px;
        gap: 8px;
    }
    .ic-setting {
        font-size: 0.7rem;
    }
    .ic-toggle {
        font-size: 0.7rem;
        padding: 5px 10px;
        min-width: 78px;
    }
    .ic-panel--settings {
        min-width: 0;
    }
}