/* =========================================================
   AKIRACH.COM — Universal Mobile-First Stylesheet
   Loaded on every game. Only touches layout / chrome / HUD.
   Never modifies game logic.
   ========================================================= */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --akira-accent: #a78bfa;
    --akira-accent2: #60a5fa;
}

html, body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior: none;
}

/* Make canvas-based games truly fullscreen on mobile */
/* Generic game body: only add minor mobile polish */
body.akira-game {
    -webkit-user-select: none;
    user-select: none;
}
/* Fullscreen canvas games: take over the viewport */
body.akira-fullscreen {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #000;
}
/* During active gameplay (canvas visible & focused), lock scroll */
body.akira-fullscreen.akira-playing {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    inset: 0;
}
body.akira-fullscreen canvas {
    display: block;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    touch-action: none;
}

/* Tap-friendly buttons (44px min tap target) */
.akira-touch-btn,
button.akira-touch,
a.akira-touch {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 1rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Home button overlay (back to site) */
#akira-home-btn {
    position: fixed;
    top: calc(10px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    z-index: 99999;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(10,14,39,0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.2s;
    touch-action: manipulation;
}
#akira-home-btn:active { transform: scale(0.9); }

/* Orientation hint for landscape-preferred games */
#akira-rotate {
    position: fixed; inset: 0;
    background: rgba(10,14,39,0.96);
    color: #fff; z-index: 999998;
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 30px; text-align: center;
}
#akira-rotate .icon {
    font-size: 5rem; margin-bottom: 20px;
    animation: akira-rotate-anim 2s ease-in-out infinite;
}
@keyframes akira-rotate-anim {
    0%, 100% { transform: rotate(-90deg); }
    50% { transform: rotate(0deg); }
}
#akira-rotate h3 { font-size: 1.5rem; margin-bottom: 10px; }
#akira-rotate p { color: #cbd5e1; font-size: 1rem; max-width: 320px; }

body.akira-force-landscape.akira-portrait #akira-rotate { display: flex; }

/* Virtual joystick */
#akira-joystick {
    position: fixed;
    left: calc(20px + var(--safe-left));
    bottom: calc(20px + var(--safe-bottom));
    width: 130px; height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,139,250,0.15) 0%, rgba(10,14,39,0.4) 70%);
    border: 2px solid rgba(167,139,250,0.4);
    z-index: 99997;
    touch-action: none;
    display: none;
}
#akira-joystick .stick {
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #a78bfa, #60a5fa);
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(167,139,250,0.6);
    transition: background 0.1s;
    pointer-events: none;
}

/* Action buttons */
#akira-action-buttons {
    position: fixed;
    right: calc(15px + var(--safe-right));
    bottom: calc(20px + var(--safe-bottom));
    display: none;
    flex-direction: column-reverse;
    gap: 12px;
    z-index: 99997;
}
.akira-action-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,0.8), rgba(96,165,250,0.4));
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.akira-action-btn.primary {
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(239,68,68,0.9), rgba(239,68,68,0.5));
    font-size: 1.6rem;
}
.akira-action-btn:active { transform: scale(0.9); }

/* Show touch controls only on touch devices */
body.akira-touch #akira-joystick,
body.akira-touch #akira-action-buttons {
    display: flex;
}

/* Generic responsive helpers for all pages */
@media (max-width: 768px) {
    .global-header {
        padding: 10px 14px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    .nav-links {
        gap: 14px !important;
        font-size: 0.9rem;
    }
    .nav-links a { font-size: 0.9rem; }
    .logo { font-size: 1.2rem !important; }
    .logo-diamond { font-size: 1.4rem !important; }
    body { padding-top: 70px; }

    .page-title { font-size: 2rem !important; }
    .main-title { font-size: clamp(2.5rem, 10vw, 5rem) !important; }
    .games-grid { grid-template-columns: 1fr !important; }
    .content { grid-template-columns: 1fr !important; gap: 20px !important; padding: 0 15px !important; }

    .section { padding: 30px 20px !important; }

    .game-card-large { padding: 25px 18px !important; }
    .game-icon { font-size: 3rem !important; }

    /* featured-strip on index */
    .featured-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 420px) {
    .nav-links { width: 100%; justify-content: center; }
}

/* Prevent zoom on iOS input focus */
input, select, textarea { font-size: 16px; }