/**
 * Typing Games Arcade — hub, language pages, play UI
 */
:root {
    --game-bg: #0b1220;
    --game-surface: #141c2e;
    --game-surface-2: #1a2438;
    --game-border: #2a3654;
    --game-text: #f1f5f9;
    --game-muted: #94a3b8;
    --game-glow: rgba(59, 130, 246, 0.35);
}

/* —— Arcade index & language hub —— */
.games-arcade,
.games-hub-page {
    max-width: var(--mkt-max, 1120px);
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.games-arcade-hero,
.games-hub-hero {
    padding: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 1.5rem;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border: 1px solid var(--game-border);
    border-radius: var(--mkt-radius-lg, 20px);
    color: var(--game-text);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.games-arcade-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #60a5fa;
}

.games-arcade-hero h1,
.games-hub-hero h1 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.games-arcade-lead,
.games-hub-lead {
    margin: 0 0 1rem;
    max-width: 40rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--game-muted);
}

.games-hub-lang label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--game-muted);
    margin-bottom: 0.35rem;
}

.games-hub-lang select {
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--game-border);
    background: var(--game-surface);
    color: var(--game-text);
    font-family: inherit;
    min-width: 12rem;
}

.game-back {
    display: inline-block;
    margin-bottom: 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #60a5fa;
    text-decoration: none;
}

.game-back:hover {
    text-decoration: underline;
}

/* Game catalog cards */
.games-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.game-catalog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.4rem 1.2rem;
    background: var(--mkt-surface, #fff);
    border: 1px solid var(--mkt-border, #e2e8f0);
    border-radius: var(--mkt-radius-lg, 18px);
    text-decoration: none;
    color: var(--mkt-text, #0f172a);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.game-catalog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-accent, #3b82f6);
}

.game-catalog-card:hover {
    transform: translateY(-4px);
    border-color: var(--card-accent, #3b82f6);
    box-shadow: 0 12px 28px var(--game-glow);
}

.game-catalog-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.game-catalog-card h2 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.game-catalog-card p {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--mkt-muted, #64748b);
    flex: 1;
}

.game-catalog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.game-catalog-diff,
.game-catalog-skills {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}

.game-catalog-play {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--card-accent, #2563eb);
}

.games-lang-section h2 {
    margin-bottom: 0.5rem;
}

.games-lang-section p {
    color: var(--mkt-muted, #64748b);
    margin-bottom: 1rem;
}

.games-lang-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.games-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    background: var(--mkt-surface, #fff);
    border: 1px solid var(--mkt-border, #e2e8f0);
    border-radius: 999px;
    text-decoration: none;
    color: var(--mkt-text, #0f172a);
    font-weight: 600;
    font-size: 0.88rem;
    transition: border-color 0.15s, background 0.15s;
}

.games-lang-chip:hover {
    border-color: var(--mkt-accent, #2563eb);
    background: var(--mkt-accent-soft, #eff6ff);
}

.games-hub-footer-note {
    padding: 1.5rem 1.75rem;
    background: var(--mkt-surface, #fff);
    border: 1px solid var(--mkt-border, #e2e8f0);
    border-radius: var(--mkt-radius, 14px);
}

.games-hub-footer-note p {
    color: var(--mkt-muted, #64748b);
    line-height: 1.7;
}

/* —— Play page —— */
.game-app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
}

.game-play-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--game-surface) 0%, var(--game-surface-2) 100%);
    border: 1px solid var(--game-border);
    border-radius: 16px;
    color: var(--game-text);
}

.game-play-title {
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 800;
}

.game-play-sub {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--game-muted);
}

.game-play-icon {
    margin-right: 0.25rem;
}

.game-lang-picker label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--game-muted);
    margin-bottom: 0.25rem;
}

.game-lang-picker select {
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--game-border);
    background: var(--game-bg);
    color: var(--game-text);
    font-family: inherit;
}

/* Game tabs */
.game-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    scrollbar-width: thin;
}

.game-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    background: var(--mkt-surface, #fff);
    border: 1px solid var(--mkt-border, #e2e8f0);
    border-radius: 10px;
    text-decoration: none;
    color: var(--mkt-text, #334155);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s;
}

.game-tab:hover {
    border-color: var(--tab-accent, #3b82f6);
}

.game-tab.is-active {
    background: var(--tab-accent, #3b82f6);
    border-color: var(--tab-accent, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.game-tab-icon {
    font-size: 1rem;
}

.game-hint-bar {
    margin: 0 0 0.65rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    color: #1e40af;
    background: #eff6ff;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
}

.game-zh-pinyin-compose {
    margin: 0 0 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: #0f766e;
    background: #ecfdf5;
    border-radius: 8px;
    border: 1px solid #99f6e4;
}

.game-zh-pinyin-compose.hidden {
    display: none;
}

.game-hud {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.game-hud-stat {
    background: var(--game-surface);
    border: 1px solid var(--game-border);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    text-align: center;
    color: var(--game-text);
}

.game-hud-stat span {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--game-muted);
}

.game-hud-stat strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.game-hud-timer strong {
    color: #fbbf24;
}

.game-hud-lives strong {
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.game-intro {
    margin: 0 0 0.65rem;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #e2e8f0;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    animation: game-intro-in 0.45s ease;
}

.game-intro.hidden {
    display: none;
}

@keyframes game-intro-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.game-arena.is-hit-flash {
    box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.55), 0 0 24px rgba(34, 197, 94, 0.2);
}

.game-arena.is-miss-flash {
    box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.55), 0 0 24px rgba(239, 68, 68, 0.15);
    animation: game-arena-shake 0.28s ease;
}

@keyframes game-arena-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.game-prompt {
    text-align: center;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 700;
    color: var(--game-text);
    font-family: 'Fira Code', 'Noto Sans JP', 'Noto Sans Tamil', sans-serif;
}

.game-prompt.hidden {
    display: none;
}

/* Unified game box — arena + controls */
.game-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--game-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--game-bg);
    min-height: clamp(420px, 62vh, 780px);
}

.game-stage .game-hud {
    flex: 0 0 auto;
    margin: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--game-border);
}

.game-stage-intro {
    position: absolute;
    top: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    margin: 0;
    width: min(92%, 28rem);
    pointer-events: none;
}

.game-stage-prompt {
    position: absolute;
    top: 3.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
    width: max-content;
    max-width: min(92%, 32rem);
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    word-break: break-word;
}

.game-arena {
    position: relative;
    flex: 1 1 auto;
    min-height: 240px;
    height: auto;
    background: radial-gradient(ellipse at 50% 0%, #1e293b 0%, var(--game-bg) 70%);
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.game-stage .game-arena.is-hit-flash {
    box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.55), 0 0 24px rgba(34, 197, 94, 0.2);
}

.game-stage .game-arena.is-miss-flash {
    box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.55), 0 0 24px rgba(239, 68, 68, 0.15);
    animation: none;
}

.game-stage-dock {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.65rem 0.75rem;
    background: rgba(11, 18, 32, 0.96);
    border-top: 1px solid var(--game-border);
}

.game-stage-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.4rem;
    align-items: stretch;
}

.game-stage-status {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.4rem 0.85rem 0.55rem;
    min-height: 1.45rem;
    font-size: 0.8rem;
    color: var(--game-muted);
    background: rgba(11, 18, 32, 0.96);
}

.game-fullscreen-btn {
    flex: 0 0 auto;
    min-width: 2.75rem;
    padding: 0 0.75rem;
    font-size: 1.15rem;
    line-height: 1;
    border: 2px solid var(--game-border);
    border-radius: 12px;
    background: var(--game-surface);
    color: var(--game-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.game-fullscreen-btn:hover,
.game-fullscreen-btn.is-active {
    border-color: var(--game-accent, #2563eb);
    color: #fff;
    background: color-mix(in srgb, var(--game-accent, #2563eb) 82%, #000);
}

.game-stage .game-tamil-kb-mount {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border-top: 1px solid var(--game-border);
    background: rgba(11, 18, 32, 0.92);
    max-height: 42vh;
    overflow: auto;
}

.game-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.game-danger-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
    box-shadow: 0 0 10px #ef4444;
    opacity: 0.7;
}

.game-base-line {
    position: absolute;
    left: 0;
    width: 8%;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.25), transparent);
    pointer-events: none;
    opacity: 0;
}

.game-mode-rush .game-danger-line,
.game-mode-defender .game-base-line {
    left: 0;
    right: auto;
    width: 12%;
    bottom: 0;
    top: 0;
    height: auto;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.35), transparent);
    opacity: 1;
}

.game-mode-rush .game-danger-line {
    opacity: 1;
}

/* Falling words */
.game-falling-word {
    position: absolute;
    padding: 0.35rem 0.75rem;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    font-family: 'Fira Code', 'Noto Sans JP', sans-serif;
}

.game-falling-word.is-active {
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.game-falling-word.is-correct {
    color: #4ade80;
    animation: game-pop-vanish 0.2s ease forwards;
}

@keyframes game-pop-vanish {
    to { transform: scale(1.15); opacity: 0; }
}

.game-rush-word.is-correct,
.game-invader.is-destroyed {
    animation: game-pop-vanish 0.18s ease forwards;
}

/* Bubbles */
.game-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.5), rgba(6, 182, 212, 0.15));
    border: 2px solid rgba(6, 182, 212, 0.5);
    text-align: center;
}

.game-bubble-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    padding: 0.25rem;
    line-height: 1.2;
    word-break: break-word;
}

.game-bubble.is-active {
    border-color: #fbbf24;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
}

.game-bubble.is-pop {
    transform: scale(1.4);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
}

/* Rush / defender */
.game-rush-word,
.game-invader {
    position: absolute;
    padding: 0.4rem 0.8rem;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 8px;
    font-weight: 600;
    color: #c4b5fd;
    white-space: nowrap;
    font-family: 'Fira Code', sans-serif;
}

.game-invader {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.game-rush-word.is-active,
.game-invader.is-active {
    border-color: #fbbf24;
    color: #fde68a;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

.game-rush-word.is-correct,
.game-invader.is-destroyed {
    opacity: 0;
    transform: scale(1.15);
    transition: opacity 0.15s, transform 0.15s;
}

.game-mode-blitz .game-arena {
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-mode-blitz .game-layer {
    display: none;
}

.game-mode-memory .game-danger-line {
    display: none;
}

.game-mode-memory .game-stage-prompt,
.game-mode-memory .game-stage-intro,
.game-app.is-playing .game-stage-intro {
    display: none !important;
}

.game-mode-memory .game-arena {
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-mode-memory .game-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-memory-flash-word {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    padding: 0.5rem 1rem;
    font-size: clamp(1.85rem, 5.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fbbf24;
    text-align: center;
    max-width: min(92%, 28rem);
    word-break: break-word;
    white-space: normal;
    text-shadow: 0 0 24px rgba(251, 191, 36, 0.55);
    font-family: 'Fira Code', 'Noto Sans JP', 'Noto Sans Tamil', sans-serif;
    animation: game-memory-flash-in 0.22s ease;
}

@keyframes game-memory-flash-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.game-mode-memory .game-arena.is-hit-flash,
.game-mode-memory .game-arena.is-miss-flash {
    animation: none;
}

.game-mode-memory .game-status {
    min-height: 1.45rem;
}

/* Full screen game mode — hide site chrome (toggle via ⛶ button only) */
body.game-fullscreen-active .game-app.is-playing .game-seo-block,
body.game-fullscreen-active .game-app.is-playing .game-hint-bar,
body.game-fullscreen-active .game-seo-block,
body.game-fullscreen-active .game-hint-bar {
    display: none;
}

body.game-fullscreen-active .game-app.is-playing .game-play-header,
body.game-fullscreen-active .game-play-header {
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
}

body.game-fullscreen-active .game-app.is-playing .game-tabs,
body.game-fullscreen-active .game-tabs {
    margin-bottom: 0.5rem;
}

body.game-fullscreen-active .navbar,
body.game-fullscreen-active .footer,
body.game-fullscreen-active .messages-banner,
body.game-fullscreen-active .cookie-consent {
    display: none !important;
}

body.game-fullscreen-active .main-content {
    padding: 0;
    max-width: none;
}

body.game-fullscreen-active .game-app {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body.game-fullscreen-active .game-play-header,
body.game-fullscreen-active .game-tabs,
body.game-fullscreen-active .game-hint-bar,
body.game-fullscreen-active .game-seo-block {
    display: none !important;
}

body.game-fullscreen-active .game-stage {
    flex: 1 1 auto;
    min-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.game-stage-dock .game-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.9rem;
    font-size: 1.05rem;
    border: 2px solid var(--game-border);
    border-radius: 12px;
    font-family: inherit;
    background: var(--game-surface);
    color: var(--game-text);
    resize: none;
    min-height: 2.75rem;
    line-height: 1.5;
}

.game-input-row {
    display: none;
}

.game-sound-toggle {
    flex: 0 0 auto;
    min-width: 2.75rem;
    padding: 0 0.75rem;
    font-size: 1.15rem;
    line-height: 1;
    border: 2px solid var(--game-border);
    border-radius: 12px;
    background: var(--game-surface);
    color: var(--game-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.game-sound-toggle:hover {
    border-color: var(--game-accent, #2563eb);
}

.game-sound-toggle.is-muted {
    opacity: 0.45;
}

.game-stage-dock .game-btn-start {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.75rem 1.1rem;
    background: var(--game-accent, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.game-input {
    flex: 1;
    min-width: 200px;
    padding: 0.9rem 1rem;
    font-size: 1.1rem;
    border: 2px solid var(--mkt-border, #e2e8f0);
    border-radius: 12px;
    font-family: inherit;
    background: #fff;
    resize: none;
    min-height: 2.75rem;
    line-height: 1.5;
}

.game-mode-tamil99 .game-input.script-tamil,
.game-mode-tamil99 .game-prompt.script-tamil,
.script-tamil.ta-letter,
.script-tamil.kj-board-letter,
.script-tamil.mj-letter,
.script-tamil.game-hit-btn,
.script-tamil.game-falling-word,
.script-tamil.game-rush-word,
.script-tamil.game-invader {
    font-family: 'Noto Sans Tamil', 'Latha', 'Vijaya', sans-serif;
}

.game-input:focus {
    outline: none;
    border-color: var(--game-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.game-btn-start {
    padding: 0.85rem 1.5rem;
    background: var(--game-accent, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.game-btn-start:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.game-btn-start:disabled {
    opacity: 0.65;
    cursor: default;
}

.game-btn-secondary {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.65rem 1.2rem;
    color: var(--mkt-text, #334155);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--mkt-border, #e2e8f0);
    border-radius: 10px;
}

.game-status {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--mkt-muted, #64748b);
}

.game-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 18, 32, 0.75);
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.game-overlay.hidden {
    display: none;
}

.game-overlay-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.game-overlay-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.game-overlay-score {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.game-overlay-detail {
    color: var(--mkt-muted, #64748b);
    margin-bottom: 1.25rem;
}

.game-seo-block {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--mkt-surface, #fff);
    border: 1px solid var(--mkt-border, #e2e8f0);
    border-radius: 14px;
}

.game-seo-block h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.game-seo-block p {
    color: var(--mkt-muted, #64748b);
    line-height: 1.7;
}

.game-rtl .game-falling-word,
.game-rtl .game-rush-word,
.game-rtl .game-invader {
    direction: rtl;
}

.script-tamil { font-family: 'Noto Sans Tamil', sans-serif; }
.script-han { font-family: 'Noto Sans SC', sans-serif; }
.script-thai { font-family: 'Noto Sans Thai', sans-serif; }
.script-hindi { font-family: 'Noto Sans Devanagari', sans-serif; }
.script-cyrillic { font-family: 'Noto Sans', sans-serif; }
.script-arabic { font-family: 'Noto Naskh Arabic', sans-serif; }
.script-hebrew { font-family: 'Noto Sans Hebrew', sans-serif; }
.script-hiragana { font-family: 'Noto Sans JP', sans-serif; }

/* —— Keyword SEO landing (keyboard jump, etc.) —— */
.games-keyword-page {
    max-width: var(--mkt-max, 1120px);
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.games-keyword-hero {
    padding: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border: 1px solid var(--game-border);
    border-radius: var(--mkt-radius-lg, 20px);
    color: var(--game-text);
}

.games-keyword-hero h1 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.games-keyword-lead {
    margin: 0 0 1.25rem;
    max-width: 40rem;
    line-height: 1.65;
    color: var(--game-muted);
}

.games-keyword-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.games-keyword-table-wrap {
    margin-bottom: 2rem;
    padding: 1.25rem 1.35rem;
    background: var(--mkt-surface, #fff);
    border: 1px solid var(--mkt-border, #e2e8f0);
    border-radius: var(--mkt-radius-lg, 18px);
}

.games-keyword-table-wrap h2 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    color: var(--mkt-text, #0f172a);
}

.games-keyword-table-note {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: var(--mkt-muted, #64748b);
}

.games-keyword-table-scroll {
    overflow-x: auto;
}

.games-keyword-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.games-keyword-table th,
.games-keyword-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--mkt-border, #e2e8f0);
}

.games-keyword-table th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mkt-muted, #64748b);
    background: #f8fafc;
}

.games-keyword-table tbody tr:hover {
    background: #f8fafc;
}

.games-keyword-play {
    margin-bottom: 2rem;
}

.games-keyword-play h2 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.games-keyword-featured {
    max-width: 22rem;
    margin: 1rem 0;
}

.games-keyword-lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.games-keyword-lang-chips a {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    border-radius: 999px;
    border: 1px solid var(--mkt-border, #e2e8f0);
    text-decoration: none;
    color: var(--mkt-text, #0f172a);
    background: #f8fafc;
}

.games-catalog-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.games-catalog-grid--compact h2 {
    grid-column: 1 / -1;
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

/* —— Keyboard Jump (robot + birds) —— */
.game-mode-keyboard-jump {
    background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 45%, #e0f2fe 100%) !important;
    border-color: #38bdf8;
}

.game-mode-keyboard-jump .game-danger-line,
.game-mode-keyboard-jump .game-base-line {
    display: none;
}

.game-mode-keyboard-jump .game-prompt {
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    border: 2px solid #38bdf8;
    font-weight: 700;
    font-size: 1.15rem;
}

.kj-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.kj-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #38bdf8 0%, #7dd3fc 55%, #bae6fd 100%);
}

.kj-cloud {
    position: absolute;
    width: 72px;
    height: 28px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    box-shadow: 32px 0 0 -4px rgba(255, 255, 255, 0.9), -24px 4px 0 -6px rgba(255, 255, 255, 0.75);
    opacity: 0.9;
    animation: kj-cloud-drift 28s linear infinite;
}

.kj-cloud-1 { top: 12%; left: -10%; animation-duration: 32s; }
.kj-cloud-2 { top: 22%; left: -20%; width: 56px; animation-duration: 24s; animation-delay: -8s; }

.kj-bird {
    position: absolute;
    font-size: 1.25rem;
    opacity: 0.85;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
    animation: kj-bird-fly 18s linear infinite;
}

.kj-bird-1 { top: 18%; animation-duration: 22s; }
.kj-bird-2 { top: 28%; font-size: 1rem; animation-duration: 16s; animation-delay: -5s; }
.kj-bird-3 { top: 14%; font-size: 0.9rem; animation-duration: 26s; animation-delay: -12s; }

.kj-hills {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22%;
    height: 35%;
    background: linear-gradient(180deg, transparent, #86efac 40%, #4ade80 100%);
    border-radius: 50% 50% 0 0 / 20% 20% 0 0;
    opacity: 0.55;
}

.kj-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
}

.kj-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    background: linear-gradient(180deg, #65a30d 0%, #4d7c0f 100%);
    border-top: 4px solid #365314;
}

/* Keyboard Jump — robot on ground, boards stack upward */
.kj-tower {
    position: absolute;
    left: 50%;
    bottom: 28%;
    transform: translateX(-50%);
    width: 120px;
    min-width: 120px;
    height: 72%;
    transition: transform 0.35s cubic-bezier(0.33, 1, 0.4, 1), width 0.2s ease;
}

.kj-boards-col {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    pointer-events: none;
}

.kj-board {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.2s ease;
    animation: kj-board-float 2.8s ease-in-out infinite;
}

.kj-board.kj-board-enter {
    opacity: 0;
    transform: translateX(-50%) scale(0.7) translateY(32px);
}

.kj-board.is-target .kj-board-plank {
    background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.55);
}

.kj-board.is-landed .kj-board-plank {
    background: linear-gradient(180deg, #86efac 0%, #22c55e 100%);
    border-color: #15803d;
}

.kj-board.is-vanish {
    animation: kj-board-vanish 0.25s ease-in forwards;
    pointer-events: none;
}

.kj-board-med .kj-board-plank,
.kj-board-word.kj-board-med .kj-board-plank {
    width: var(--kj-plank-width, 124px);
}

.kj-board-wide .kj-board-plank,
.kj-board-word.kj-board-wide .kj-board-plank {
    width: var(--kj-plank-width, 160px);
}

.script-tamil.kj-board-letter {
    font-size: inherit;
    line-height: 1.25;
    padding: 0.4rem 0.65rem;
}

@keyframes kj-board-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35); }
}

.kj-robot {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 5;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: bottom 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: bottom;
}

.kj-robot.is-jumping {
    transition: bottom 0.26s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.kj-robot-body {
    font-size: 3.25rem;
    line-height: 1;
    filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.22));
    transform-origin: center bottom;
}

.kj-robot.is-jumping .kj-robot-body {
    animation: kj-robot-jump-up 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.kj-robot.is-landing .kj-robot-body {
    animation: kj-robot-land 0.16s ease-out;
}

.kj-robot.is-shake .kj-robot-body {
    animation: kj-robot-shake 0.32s ease;
}

.kj-robot.is-jumping .kj-robot-shadow {
    transform: scale(0.35);
    opacity: 0.2;
    transition: transform 0.26s, opacity 0.26s;
}

@keyframes kj-robot-jump-up {
    0% { transform: translateY(0) scale(1, 1); }
    30% { transform: translateY(-42px) scale(0.92, 1.08) rotate(-6deg); }
    55% { transform: translateY(-52px) scale(1.06, 0.94) rotate(3deg); }
    100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}

.kj-board-plank {
    width: 96px;
    height: 16px;
    background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 5px 0 #92400e, 0 8px 18px rgba(0, 0, 0, 0.12);
}

.kj-board-letter {
    margin-bottom: 0.35rem;
    min-width: 2.75rem;
    max-width: 9rem;
    padding: 0.35rem 0.55rem;
    font-size: clamp(0.85rem, 2vw, 1.25rem);
    font-weight: 800;
    color: #0f172a;
    background: #fff;
    border: 3px solid #38bdf8;
    border-radius: 12px;
    box-shadow: 0 4px 0 #0284c7, 0 0 18px rgba(56, 189, 248, 0.35);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    white-space: nowrap;
}

.kj-board-word .kj-board-plank {
    width: var(--kj-plank-width, min(110px, 28vw));
}

.kj-robot-shadow {
    width: 56px;
    height: 10px;
    margin-top: 0.1rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    transition: transform 0.15s, opacity 0.15s;
}

@keyframes kj-board-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

@keyframes kj-board-vanish {
    0% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(-24px); }
}

@keyframes kj-robot-land {
    0% { transform: translateY(-8px) scale(1.1, 0.9); }
    55% { transform: translateY(5px) scale(0.94, 1.06); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes kj-robot-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes kj-bird-fly {
    0% { left: -8%; transform: translateY(0); }
    25% { transform: translateY(-8px); }
    50% { transform: translateY(4px); }
    75% { transform: translateY(-6px); }
    100% { left: 108%; transform: translateY(0); }
}

@keyframes kj-cloud-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(120vw); }
}

/* —— Monkey Jump (jungle branch game) —— */
.game-mode-monkey-jump {
    background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 50%, #86efac 100%) !important;
    border-color: #16a34a;
}

.game-mode-monkey-jump .game-danger-line,
.game-mode-monkey-jump .game-base-line {
    display: none;
}

.game-mode-monkey-jump .game-prompt {
    background: rgba(255, 255, 255, 0.94);
    color: #14532d;
    border: 2px solid #22c55e;
    font-weight: 700;
}

.mj-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mj-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #38bdf8 0%, #7dd3fc 45%, #bbf7d0 100%);
}

.mj-sun {
    position: absolute;
    top: 8%;
    right: 12%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fef08a, #facc15);
    box-shadow: 0 0 40px rgba(250, 204, 21, 0.5);
}

.mj-cloud {
    position: absolute;
    width: 64px;
    height: 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    animation: mj-cloud-drift 26s linear infinite;
}

.mj-cloud-a { top: 14%; left: -8%; animation-duration: 30s; }
.mj-cloud-b { top: 24%; left: -15%; width: 48px; animation-duration: 22s; animation-delay: -6s; }

.mj-bird {
    position: absolute;
    font-size: 1.2rem;
    animation: mj-bird-fly 20s linear infinite;
    opacity: 0.9;
}

.mj-bird-a { top: 16%; animation-duration: 24s; }
.mj-bird-b { top: 26%; font-size: 1rem; animation-duration: 18s; animation-delay: -7s; }

.mj-tree {
    position: absolute;
    bottom: 18%;
    width: 18px;
    height: 45%;
    background: linear-gradient(180deg, #166534 0%, #14532d 100%);
    border-radius: 4px;
}

.mj-tree-left { left: 8%; transform: rotate(-2deg); }
.mj-tree-right { right: 8%; transform: rotate(2deg); }

.mj-tree::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, #22c55e 0%, #15803d 100%);
    opacity: 0.85;
}

.mj-hills {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    height: 30%;
    background: linear-gradient(180deg, transparent, #4ade80 60%, #22c55e 100%);
    opacity: 0.5;
    border-radius: 50% 50% 0 0 / 15% 15% 0 0;
}

.mj-grass {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14%;
    background: linear-gradient(180deg, #65a30d, #4d7c0f);
    border-top: 3px solid #365314;
}

.mj-stage {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    width: min(240px, 60vw);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mj-branch-slot {
    min-height: 6rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.mj-branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, opacity 0.22s ease;
    animation: mj-branch-float 2.6s ease-in-out infinite;
}

.mj-branch.mj-branch-enter {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
}

.mj-branch.from-left.mj-branch-enter { transform: translateX(-40px) scale(0.7); }
.mj-branch.from-right.mj-branch-enter { transform: translateX(40px) scale(0.7); }

.mj-branch.is-break {
    animation: mj-branch-break 0.22s ease-in forwards;
}

.mj-leaves {
    width: 40px;
    height: 20px;
    margin-bottom: -4px;
    background: radial-gradient(ellipse, #22c55e 0%, #15803d 100%);
    border-radius: 50% 50% 40% 40%;
    opacity: 0.9;
}

.mj-letter {
    display: block;
    min-width: 2.75rem;
    padding: 0.45rem 0.7rem;
    margin-bottom: 0.35rem;
    font-size: 1.85rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #fb923c, #ea580c);
    border: 3px solid #c2410c;
    border-radius: 12px;
    box-shadow: 0 4px 0 #9a3412, 0 0 16px rgba(234, 88, 12, 0.4);
    text-align: center;
}

.mj-plank {
    width: 100px;
    height: 16px;
    background: linear-gradient(180deg, #a16207 0%, #713f12 100%);
    border-radius: 8px;
    border: 2px solid #422006;
    box-shadow: 0 5px 0 #292524, 0 8px 20px rgba(0, 0, 0, 0.15);
}

.mj-vine {
    position: absolute;
    bottom: -20px;
    width: 3px;
    height: 24px;
    background: #15803d;
    border-radius: 2px;
}

.mj-monkey {
    margin-top: -2rem;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mj-monkey-sprite {
    font-size: 3.75rem;
    line-height: 1;
    display: block;
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.25));
    transform-origin: center bottom;
}

.mj-monkey-shadow {
    width: 58px;
    height: 11px;
    margin-top: 0.15rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    transition: transform 0.2s, opacity 0.2s;
}

.mj-monkey.is-leaping .mj-monkey-sprite {
    animation: mj-monkey-leap 0.38s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.mj-monkey.is-leaping .mj-monkey-shadow {
    transform: scale(0.4);
    opacity: 0.2;
}

.mj-monkey.is-landing .mj-monkey-sprite {
    animation: mj-monkey-land 0.16s ease-out;
}

.mj-monkey.is-shake .mj-monkey-sprite {
    animation: mj-monkey-shake 0.35s ease;
}

.mj-monkey.is-celebrate .mj-monkey-sprite {
    animation: mj-monkey-celebrate 0.45s ease;
}

@keyframes mj-branch-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes mj-branch-break {
    0% { transform: rotate(0) scale(1); opacity: 1; }
    100% { transform: rotate(12deg) translateY(40px) scale(0.6); opacity: 0; }
}

@keyframes mj-monkey-leap {
    0% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-56px) rotate(-12deg) scale(1.05); }
    65% { transform: translateY(-20px) rotate(6deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes mj-monkey-land {
    0% { transform: translateY(-8px) scale(1.08); }
    60% { transform: translateY(4px) scale(0.96); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes mj-monkey-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

@keyframes mj-monkey-celebrate {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-8deg) scale(1.1); }
    75% { transform: rotate(8deg) scale(1.1); }
}

@keyframes mj-bird-fly {
    0% { left: -6%; }
    100% { left: 106%; }
}

@keyframes mj-cloud-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(115vw); }
}

/* Hit the Button */
.game-mode-hit-button .game-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.game-hit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.game-hit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.55rem;
    font-size: 1.35rem;
    font-weight: 700;
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    box-shadow: 0 2px 0 #94a3b8;
}

.game-hit-btn.is-lit {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #b45309;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
    transform: scale(1.08);
}

/* Typing Attack — plane bottom, words from any edge, laser per letter */
.game-mode-attack {
    background: radial-gradient(ellipse at 50% 120%, #2e1065 0%, #0f0720 45%, #05010f 100%);
    overflow: hidden;
}

.game-mode-attack .game-danger-line,
.game-mode-attack .game-base-line {
    display: none;
}

.ta-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 30% 65%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 72% 42%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 88% 78%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1px 1px at 18% 88%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1.5px 1.5px at 92% 12%, rgba(196, 181, 253, 0.7), transparent);
    opacity: 0.85;
}

.game-mode-attack::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(168, 85, 247, 0.2), transparent 42%),
        radial-gradient(circle at 80% 25%, rgba(236, 72, 153, 0.14), transparent 38%);
    pointer-events: none;
}

.ta-plane {
    position: absolute;
    left: 50%;
    bottom: 6%;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transform: translateX(-50%) rotate(var(--ta-aim, 0deg));
    transition: transform 0.14s ease-out;
}

.ta-plane-body {
    position: relative;
    width: 44px;
    height: 52px;
}

.ta-plane-fuselage {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 10px;
    height: 34px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 55%, #64748b 100%);
    border-radius: 6px 6px 14px 14px;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.ta-plane-wing {
    position: absolute;
    top: 24px;
    width: 22px;
    height: 8px;
    background: linear-gradient(180deg, #cbd5e1, #64748b);
    border-radius: 3px;
}

.ta-plane-wing-l {
    left: 0;
    transform: rotate(-8deg);
}

.ta-plane-wing-r {
    right: 0;
    transform: rotate(8deg);
}

.ta-plane-cockpit {
    position: absolute;
    left: 50%;
    top: 14px;
    width: 8px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #67e8f9, #0891b2);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
}

.ta-plane-nose {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 4px;
    transform: translateX(-50%);
}

.ta-plane-trail {
    position: absolute;
    top: 46px;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(168, 85, 247, 0.55), transparent 70%);
    filter: blur(3px);
}

.ta-plane.is-locked .ta-plane-fuselage {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.65);
}

.ta-plane.is-firing .ta-plane-body {
    animation: ta-plane-recoil 0.14s ease-out;
}

.ta-plane.is-jam .ta-plane-body {
    animation: ta-plane-shake 0.28s ease;
}

@keyframes ta-plane-recoil {
    0% { transform: translateY(0); }
    40% { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

@keyframes ta-plane-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.ta-word {
    position: absolute;
    display: flex;
    gap: 0.12rem;
    padding: 0.15rem 0.22rem;
    background: rgba(15, 7, 32, 0.82);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.15s;
}

.ta-word.is-active {
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
}

.ta-letter {
    min-width: 0.95rem;
    padding: 0.08rem 0.14rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    color: #ddd6fe;
    background: rgba(76, 29, 149, 0.55);
    border: 1px solid rgba(167, 139, 250, 0.45);
    border-radius: 4px;
    font-family: 'Fira Code', 'Noto Sans JP', sans-serif;
    transition: transform 0.1s, background 0.1s, color 0.1s, opacity 0.1s;
}

.ta-letter.is-next {
    color: #fef08a;
    background: rgba(234, 179, 8, 0.28);
    border-color: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
    transform: scale(1.06);
}

.ta-letter.is-hit {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.28);
    border-color: #fb7185;
    text-decoration: line-through;
    opacity: 0.55;
    transform: scale(0.9);
}

.ta-word.is-blast {
    animation: ta-word-blast 0.32s ease-out forwards;
    pointer-events: none;
}

@keyframes ta-word-blast {
    0% { transform: scale(1); opacity: 1; filter: brightness(1); }
    40% { transform: scale(1.3); opacity: 1; filter: brightness(2); }
    100% { transform: scale(1.55); opacity: 0; filter: brightness(2.4); }
}

.ta-laser {
    position: absolute;
    width: 0;
    height: 3px;
    margin-top: -1.5px;
    transform-origin: 0 50%;
    transform: rotate(var(--ta-laser-angle, 0rad));
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.2), #22d3ee 40%, #f472b6 100%);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.85), 0 0 4px #fff;
    opacity: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: 2px;
}

.ta-laser.is-on {
    width: var(--ta-laser-length, 80px);
    opacity: 1;
    transition: width 0.12s linear, opacity 0.05s;
}

.ta-laser.is-fade {
    opacity: 0;
    transition: opacity 0.08s;
}

.ta-blast-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: radial-gradient(circle, #fde047, #f472b6);
    animation: ta-blast-particle 0.42s ease-out forwards;
    transform: rotate(var(--ta-angle, 0deg)) translateY(0);
    z-index: 7;
}

@keyframes ta-blast-particle {
    0% { opacity: 1; transform: rotate(var(--ta-angle, 0deg)) translateY(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--ta-angle, 0deg)) translateY(-36px) scale(0.15); }
}

.game-rtl .ta-word {
    flex-direction: row-reverse;
}

/* Sheriff Type — jail, outlaws, sheriff shoots */
.game-mode-sheriff {
    background: linear-gradient(180deg, #fdba74 0%, #fed7aa 35%, #d97706 100%) !important;
    border-color: #b45309;
}

.game-mode-sheriff .game-danger-line,
.game-mode-sheriff .game-base-line {
    display: none;
}

.sf-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.sf-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #7dd3fc 0%, #fde68a 55%, #fdba74 100%);
}

.sf-sun {
    position: absolute;
    top: 8%;
    right: 15%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fef08a, #f59e0b);
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.45);
}

.sf-mountains {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    height: 28%;
    background: linear-gradient(180deg, transparent, rgba(120, 53, 15, 0.35));
    clip-path: polygon(0 100%, 15% 40%, 30% 70%, 45% 35%, 60% 65%, 75% 30%, 90% 60%, 100% 45%, 100% 100%);
}

.sf-town {
    position: absolute;
    right: 8%;
    bottom: 26%;
    width: 80px;
    height: 50px;
    background: #92400e;
    border-radius: 4px 4px 0 0;
    opacity: 0.5;
}

.sf-jail {
    position: absolute;
    left: 50%;
    bottom: 24%;
    transform: translateX(-50%);
    z-index: 2;
    width: 88px;
}

.sf-jail-roof {
    height: 14px;
    background: #78350f;
    border-radius: 4px 4px 0 0;
}

.sf-jail-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    background: linear-gradient(180deg, #a8a29e, #78716c);
    border: 3px solid #57534e;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #fef3c7;
}

.sf-jail-bars {
    position: absolute;
    inset: 14px 8px 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(15, 23, 42, 0.55) 10px,
        rgba(15, 23, 42, 0.55) 14px
    );
    pointer-events: none;
}

.sf-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, #ca8a04, #92400e);
    border-top: 3px solid #78350f;
}

.sf-sheriff {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    z-index: 8;
    font-size: 2.75rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.sf-sheriff-gun {
    position: absolute;
    top: 38%;
    right: -18px;
    width: 22px;
    height: 6px;
    background: #44403c;
    border-radius: 3px;
    transform: rotate(-8deg);
}

.sf-sheriff.is-shooting {
    animation: sf-sheriff-recoil 0.18s ease-out;
}

@keyframes sf-sheriff-recoil {
    0% { transform: translateX(-50%) scale(1); }
    40% { transform: translateX(calc(-50% - 4px)) scale(0.96); }
    100% { transform: translateX(-50%) scale(1); }
}

.sf-thief {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.25s, transform 0.25s;
}

.sf-thief-hat {
    position: relative;
    min-width: 3.5rem;
    padding: 0.2rem 0.45rem 0.55rem;
    background: linear-gradient(180deg, #292524, #1c1917);
    border-radius: 8px 8px 2px 2px;
    border: 2px solid #44403c;
    text-align: center;
}

.sf-thief-hat::after {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: 0;
    height: 8px;
    background: #1c1917;
    border-radius: 50%;
}

.sf-thief-word {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.05rem;
    max-width: 5.5rem;
}

.sf-hat-letter {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fef08a;
    line-height: 1.15;
    font-family: 'Fira Code', 'Noto Sans Tamil', sans-serif;
    padding: 0 0.05rem;
}

.sf-hat-letter.is-next {
    color: #fff;
    background: rgba(239, 68, 68, 0.55);
    border-radius: 3px;
    transform: scale(1.15);
}

.sf-hat-letter.is-hit {
    color: #86efac;
    opacity: 0.45;
    text-decoration: line-through;
}

.sf-thief-face {
    font-size: 1.1rem;
    margin-top: -0.15rem;
}

.sf-thief-body {
    width: 28px;
    height: 32px;
    margin-top: 0.1rem;
    background: linear-gradient(180deg, #57534e, #292524);
    border-radius: 6px 6px 4px 4px;
    border: 2px solid #1c1917;
}

.sf-thief.is-active .sf-thief-hat {
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.65);
    border-color: #fbbf24;
}

.sf-thief.is-shot {
    animation: sf-thief-fall 0.28s ease-in forwards;
}

.sf-thief.is-escaped {
    animation: sf-thief-laugh 0.35s ease forwards;
}

@keyframes sf-thief-fall {
    to { transform: rotate(90deg) translateY(30px); opacity: 0; }
}

@keyframes sf-thief-laugh {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px) scale(1.05); }
    75% { transform: translateX(6px) scale(1.05); }
}

.sf-bullet {
    position: absolute;
    width: 0;
    height: 4px;
    margin-top: -2px;
    transform-origin: 0 50%;
    transform: rotate(var(--sf-angle, 0rad));
    background: linear-gradient(90deg, #fef08a, #ef4444);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
    z-index: 7;
    pointer-events: none;
}

.sf-bullet.is-flying {
    width: var(--sf-dist, 100px);
    transition: width 0.18s linear;
}

.script-tamil.sf-thief-word,
.script-tamil.sf-hat-letter {
    font-family: 'Noto Sans Tamil', 'Latha', sans-serif;
    font-size: 0.85rem;
}

/* —— Type Blaster / Type Defense —— */
.game-mode-blaster {
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 45%, #312e81 100%) !important;
    border-color: #6366f1;
}

.game-mode-defense {
    background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 40%, #0284c7 100%) !important;
    border-color: #0ea5e9;
}

.game-mode-blaster .game-base-line,
.game-mode-defense .game-base-line {
    width: 14%;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.45), rgba(239, 68, 68, 0.08));
    box-shadow: inset -4px 0 16px rgba(239, 68, 68, 0.25);
}

.kd-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.kd-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 30% 65%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 70% 15%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 50% 40%, rgba(255, 255, 255, 0.55), transparent);
    animation: kd-stars-drift 24s linear infinite;
}

.kd-nebula {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(139, 92, 246, 0.22), transparent 55%);
}

.kd-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18%;
    height: 28%;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.35));
    clip-path: polygon(0 100%, 8% 55%, 18% 75%, 28% 45%, 100% 100%);
}

.kd-wall {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 14%;
    height: 42%;
    background: linear-gradient(180deg, #64748b, #334155);
    border-right: 4px solid #475569;
    box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.2);
}

.kd-turret {
    position: absolute;
    left: 5%;
    bottom: 28%;
    z-index: 3;
    transform-origin: center bottom;
    transition: transform 0.12s ease;
}

.kd-turret-base {
    width: 44px;
    height: 22px;
    margin: 0 auto;
    background: linear-gradient(180deg, #94a3b8, #475569);
    border-radius: 8px 8px 4px 4px;
    border: 2px solid #334155;
}

.kd-turret-barrel {
    width: 36px;
    height: 10px;
    margin: -2px auto 0;
    background: linear-gradient(90deg, #64748b, #cbd5e1);
    border-radius: 4px;
    transform-origin: left center;
    transform: rotate(-4deg);
}

.kd-turret-blaster .kd-turret-base {
    background: linear-gradient(180deg, #818cf8, #4338ca);
    border-color: #312e81;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.45);
}

.kd-turret-blaster .kd-turret-barrel {
    width: 42px;
    background: linear-gradient(90deg, #6366f1, #c4b5fd);
}

.kd-turret-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
    animation: kd-glow-pulse 2s ease-in-out infinite;
}

.kd-turret-defense .kd-turret-base {
    background: linear-gradient(180deg, #38bdf8, #0369a1);
    border-color: #075985;
}

.kd-turret-defense .kd-turret-barrel {
    background: linear-gradient(90deg, #0ea5e9, #e0f2fe);
}

.kd-turret-flag {
    position: absolute;
    top: -18px;
    right: -8px;
    width: 14px;
    height: 10px;
    background: #ef4444;
    border-radius: 2px;
    animation: kd-flag-wave 1.2s ease-in-out infinite;
}

.kd-turret.is-firing {
    transform: scale(0.94) translateX(-2px);
}

.kd-turret.is-damaged {
    animation: kd-turret-shake 0.35s ease;
}

.kd-beam {
    position: absolute;
    height: 4px;
    width: 0;
    margin-top: -2px;
    transform-origin: 0 50%;
    transform: rotate(var(--kd-angle, 0rad));
    border-radius: 2px;
    z-index: 6;
    pointer-events: none;
    opacity: 0.95;
}

.kd-beam-blaster {
    background: linear-gradient(90deg, #fef08a, #f472b6, #818cf8);
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.85);
}

.kd-beam-defense {
    background: linear-gradient(90deg, #fef08a, #38bdf8);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.75);
}

.kd-beam.is-live {
    width: var(--kd-dist, 80px);
    transition: width 0.12s linear;
}

.kd-burst {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    z-index: 6;
    pointer-events: none;
}

.kd-burst-blaster {
    background: radial-gradient(circle, #fde047, #f472b6);
    box-shadow: 0 0 24px rgba(244, 114, 182, 0.65);
    animation: kd-burst-expand 0.38s ease-out forwards;
}

.kd-burst-defense {
    background: radial-gradient(circle, #fef08a, #0ea5e9);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.55);
    animation: kd-burst-expand 0.38s ease-out forwards;
}

.kd-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #fde047;
    animation: kd-spark-fly 0.4s ease-out forwards;
    transform: rotate(var(--kd-angle, 0deg)) translateY(0);
}

.game-mode-blaster .kd-invader-ship,
.game-mode-defense .kd-invader-soldier {
    border-radius: 10px;
    font-weight: 700;
    animation: kd-invader-pulse 1.6s ease-in-out infinite;
}

.game-mode-blaster .kd-invader-ship {
    background: rgba(244, 63, 94, 0.22);
    border: 2px solid rgba(244, 63, 94, 0.55);
    color: #fda4af;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.25);
}

.game-mode-defense .kd-invader-soldier {
    background: rgba(251, 146, 60, 0.2);
    border: 2px solid rgba(251, 146, 60, 0.5);
    color: #fdba74;
}

.game-mode-blaster .game-invader.is-destroyed,
.game-mode-defense .game-invader.is-destroyed {
    animation: kd-invader-blast 0.26s ease-out forwards;
    opacity: 1;
    transform: scale(1);
}

.game-mode-blaster.kd-base-hit,
.game-mode-defense.kd-base-hit {
    animation: kd-base-flash 0.35s ease;
}

@keyframes kd-stars-drift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

@keyframes kd-glow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes kd-flag-wave {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(-12deg); }
}

@keyframes kd-turret-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(3px); }
}

@keyframes kd-burst-expand {
    0% { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(3.2); opacity: 0; }
}

@keyframes kd-spark-fly {
    0% { opacity: 1; transform: rotate(var(--kd-angle, 0deg)) translateY(0); }
    100% { opacity: 0; transform: rotate(var(--kd-angle, 0deg)) translateY(-28px); }
}

@keyframes kd-invader-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

@keyframes kd-invader-blast {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.35); opacity: 0.85; }
    100% { transform: scale(0.2); opacity: 0; }
}

@keyframes kd-base-flash {
    0%, 100% { filter: brightness(1); }
    30% { filter: brightness(1.35) saturate(1.2); }
}

/* —— Fruit Ninja (arc physics + slice) —— */
.game-mode-fruit-ninja {
    background: linear-gradient(180deg, #1a2e05 0%, #365314 28%, #854d0e 72%, #451a03 100%) !important;
    border-color: #ca8a04;
    overflow: hidden;
}

.game-mode-fruit-ninja .game-danger-line,
.game-mode-fruit-ninja .game-base-line {
    display: none;
}

.game-mode-fruit-ninja .game-prompt {
    background: rgba(254, 243, 199, 0.95);
    color: #451a03;
    border-color: #ca8a04;
}

.fn-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.fn-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(254, 240, 138, 0.25), transparent 55%),
        linear-gradient(180deg, #3f6212 0%, #4d7c0f 35%, transparent 70%);
}

.fn-bamboo {
    position: absolute;
    bottom: 12%;
    width: 14px;
    height: 55%;
    border-radius: 8px;
    background: repeating-linear-gradient(
        180deg,
        #15803d 0,
        #15803d 22px,
        #166534 22px,
        #166534 26px
    );
    opacity: 0.55;
}

.fn-bamboo-l { left: 4%; transform: rotate(-3deg); }
.fn-bamboo-r { right: 5%; transform: rotate(2deg); height: 48%; }

.fn-wood {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14%;
    background:
        repeating-linear-gradient(90deg, #92400e 0, #92400e 20px, #78350f 20px, #78350f 22px),
        linear-gradient(180deg, #b45309, #78350f);
    border-top: 5px solid #451a03;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.fn-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(32px);
    opacity: 0.28;
    animation: fn-glow-float 7s ease-in-out infinite;
}

.fn-glow-a {
    width: 140px;
    height: 140px;
    left: 20%;
    top: 18%;
    background: #fbbf24;
}

.fn-glow-b {
    width: 100px;
    height: 100px;
    right: 18%;
    top: 30%;
    background: #f97316;
    animation-delay: -3s;
}

.fn-fruit-item {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: filter 0.15s ease;
}

.fn-fruit-item.fn-fruit-enter {
    opacity: 0;
    transform: scale(0.4) !important;
}

.fn-fruit-body {
    position: relative;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
        radial-gradient(circle at 50% 60%, var(--fn-fill, #ef4444), var(--fn-rim, #16a34a));
    border: 4px solid var(--fn-rim, #16a34a);
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, 0.15),
        0 10px 22px rgba(0, 0, 0, 0.28),
        0 0 0 2px rgba(255, 255, 255, 0.15);
}

.fn-fruit-emoji {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    line-height: 1;
}

.fn-fruit-word {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 3rem;
    max-width: 110%;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    background: rgba(15, 23, 42, 0.82);
    border: 2px solid #fef08a;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    line-height: 1.15;
    z-index: 2;
}

.fn-fruit-item.is-active .fn-fruit-body {
    animation: fn-fruit-glow 0.7s ease-in-out infinite;
    border-color: #fef08a;
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, 0.15),
        0 0 28px rgba(251, 191, 36, 0.75),
        0 0 48px rgba(249, 115, 22, 0.35);
}

.fn-fruit-item.is-active .fn-fruit-word {
    background: rgba(220, 38, 38, 0.9);
    border-color: #fff;
    transform: translateX(-50%) scale(1.06);
}

.fn-fruit-item.is-sliced .fn-fruit-body,
.fn-fruit-item.is-sliced .fn-fruit-word {
    opacity: 0;
    transition: opacity 0.08s;
}

.fn-fruit-item.is-sliced .fn-half {
    display: block;
}

.fn-half {
    display: none;
    position: absolute;
    top: 8%;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    z-index: 5;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.fn-half-l {
    left: 8%;
    animation: fn-half-fly-l 0.36s ease-out forwards;
}

.fn-half-r {
    right: 8%;
    animation: fn-half-fly-r 0.36s ease-out forwards;
}

.fn-fruit-item.is-missed {
    animation: fn-fruit-miss 0.3s ease-in forwards;
}

.fn-slash {
    position: absolute;
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, transparent, #fff 20%, #fef08a 50%, #fff 80%, transparent);
    border-radius: 999px;
    transform: rotate(-32deg);
    z-index: 8;
    pointer-events: none;
    animation: fn-slash-swipe 0.24s ease-out forwards;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.95);
}

.fn-slash-cross {
    transform: rotate(28deg);
    animation-delay: 0.04s;
}

.fn-juice {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    z-index: 7;
    pointer-events: none;
}

.fn-drop {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--fn-juice, #fde047));
    animation: fn-drop-splash 0.5s ease-out forwards;
    transform: rotate(var(--fn-angle, 0deg)) translateY(0);
}

.fn-score-pop {
    position: absolute;
    margin-left: -20px;
    font-size: 1.15rem;
    font-weight: 900;
    color: #fef08a;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    z-index: 9;
    pointer-events: none;
    animation: fn-score-rise 0.65s ease-out forwards;
}

.script-tamil.fn-fruit-word {
    font-family: 'Noto Sans Tamil', 'Latha', sans-serif;
    font-size: 0.78rem;
}

@keyframes fn-glow-float {
    0%, 100% { transform: translateY(0); opacity: 0.28; }
    50% { transform: translateY(-14px); opacity: 0.42; }
}

@keyframes fn-fruit-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}

@keyframes fn-half-fly-l {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(-38px, 28px) rotate(-48deg); opacity: 0; }
}

@keyframes fn-half-fly-r {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(38px, 32px) rotate(52deg); opacity: 0; }
}

@keyframes fn-fruit-miss {
    to { transform: scale(0.7) translateY(-30px); opacity: 0; }
}

@keyframes fn-slash-swipe {
    0% { opacity: 0; transform: rotate(-32deg) scaleX(0.15); }
    35% { opacity: 1; transform: rotate(-32deg) scaleX(1.15); }
    100% { opacity: 0; transform: rotate(-32deg) scaleX(1.3) translateX(16px); }
}

@keyframes fn-drop-splash {
    0% { opacity: 1; transform: rotate(var(--fn-angle, 0deg)) translateY(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--fn-angle, 0deg)) translateY(calc(-1 * var(--fn-dist, 30px))) scale(0.2); }
}

@keyframes fn-score-rise {
    0% { opacity: 1; transform: translateY(0) scale(0.8); }
    40% { opacity: 1; transform: translateY(-18px) scale(1.15); }
    100% { opacity: 0; transform: translateY(-42px) scale(1); }
}

/* —— Keyboard Ninja (blitz mode with ninja effects) —— */
.game-mode-blitz.ninja-arena {
    background: linear-gradient(145deg, #0f0a1a 0%, #1a0d2e 35%, #0f0a1a 100%);
    position: relative;
    overflow: hidden;
}

.game-mode-blitz.ninja-arena::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(168, 85, 247, 0.15), transparent 42%),
        radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.12), transparent 48%);
    pointer-events: none;
    z-index: 1;
}

.ninja-arena .game-stage-prompt {
    animation: ninja-prompt-pulse 0.4s ease-out !important;
    box-shadow: 
        0 0 20px rgba(168, 85, 247, 0.5),
        inset 0 0 16px rgba(168, 85, 247, 0.2) !important;
}

@keyframes ninja-prompt-pulse {
    0% { transform: translateX(-50%) scale(0.85); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.08); }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Ninja kill effect (X mark) */
.ninja-kill-fx {
    position: absolute;
    font-size: 3.2rem;
    font-weight: 900;
    opacity: 1;
    z-index: 10;
    pointer-events: none;
    animation: ninja-kill-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 0 8px currentColor);
    text-shadow: 0 0 16px currentColor;
}

@keyframes ninja-kill-pop {
    0% { 
        transform: scale(0) rotate(-180deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.4) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: scale(1) rotate(0deg) translateY(-48px);
        opacity: 0;
    }
}

/* Ninja splash effect (colored word splash) */
.ninja-splash-fx {
    position: absolute;
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 12px;
    border: 2px solid;
    z-index: 9;
    pointer-events: none;
    backdrop-filter: blur(4px);
    animation: ninja-splash-burst 0.5s cubic-bezier(0.23, 1, 0.32, 1.2) forwards;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes ninja-splash-burst {
    0% {
        transform: scale(0) rotate(-90deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.15) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(8deg) translateY(-56px);
        opacity: 0;
    }
}

/* Enhanced arena glow for ninja mode */
.ninja-arena {
    box-shadow: 
        inset 0 0 40px rgba(168, 85, 247, 0.15),
        0 0 1px rgba(168, 85, 247, 0.1);
}

.ninja-arena.is-hit-flash {
    box-shadow: 
        inset 0 0 0 2px rgba(168, 85, 247, 0.8),
        0 0 32px rgba(168, 85, 247, 0.4),
        inset 0 0 60px rgba(168, 85, 247, 0.2) !important;
}

/* Ninja-specific prompt styling with colors */
.game-mode-blitz .game-stage-prompt {
    padding: 0.65rem 1.2rem;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    backdrop-filter: blur(8px);
    border-radius: 14px;
}

.game-mode-blitz .game-prompt {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Ninja HUD enhancements */
.game-mode-blitz .game-hud-stat {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.game-mode-blitz .game-hud-stat strong {
    font-variant-numeric: tabular-nums;
    color: #c4b5fd;
}

.game-mode-blitz .game-hud-timer strong {
    color: #fbbf24;
    font-weight: 900;
}

/* Ninja combo multiplier visual feedback */
.game-mode-blitz .game-combo {
    position: relative;
}

.game-mode-blitz .game-combo strong {
    display: inline-block;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ninja-combo-pulse 0.4s ease;
}

@keyframes ninja-combo-pulse {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Ninja arena layer effects */
.game-mode-blitz .game-layer {
    z-index: 11;
}

/* Ninja prompt container */
.game-mode-blitz .game-stage-prompt {
    max-width: 90%;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
}

/* Score popup styling */
.game-mode-blitz .game-status {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.08));
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    font-weight: 600;
    animation: ninja-status-pop 0.3s ease;
}

@keyframes ninja-status-pop {
    0% { transform: translateY(-8px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Ninja input field enhanced */
.game-mode-blitz .game-input {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(59, 130, 246, 0.06));
    border: 2px solid rgba(168, 85, 247, 0.2);
    color: #e2e8f0;
    font-weight: 600;
    transition: all 0.2s ease;
}

.game-mode-blitz .game-input:focus {
    border-color: rgba(168, 85, 247, 0.8);
    box-shadow: 
        0 0 0 3px rgba(168, 85, 247, 0.25),
        inset 0 0 16px rgba(168, 85, 247, 0.1);
}

.game-mode-blitz .game-input::placeholder {
    color: rgba(229, 231, 235, 0.5);
}

/* Ninja button styling */
.game-mode-blitz .game-btn-start {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
    font-weight: 900;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.game-mode-blitz .game-btn-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.game-mode-blitz .game-btn-start:hover:not(:disabled)::before {
    left: 100%;
}

.game-mode-blitz .game-btn-start:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

/* Ninja sound toggle */
.game-mode-blitz .game-sound-toggle {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(59, 130, 246, 0.08));
    border: 2px solid rgba(168, 85, 247, 0.3);
    color: #d8b4fe;
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.game-mode-blitz .game-sound-toggle:hover {
    border-color: rgba(168, 85, 247, 0.8);
    background: rgba(168, 85, 247, 0.25);
    transform: scale(1.05);
}

.game-mode-blitz .game-sound-toggle.is-active {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border-color: #7c3aed;
    color: #fff;
}

/* Ninja fullscreen button */
.game-mode-blitz .game-fullscreen-btn {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(59, 130, 246, 0.08));
    border: 2px solid rgba(168, 85, 247, 0.3);
    color: #d8b4fe;
    transition: all 0.2s ease;
}

.game-mode-blitz .game-fullscreen-btn:hover {
    border-color: rgba(168, 85, 247, 0.8);
    background: rgba(168, 85, 247, 0.25);
}

.game-mode-blitz .game-fullscreen-btn.is-active {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border-color: #7c3aed;
    color: #fff;
}

/* Ninja arena flash animations */
.ninja-arena.is-miss-flash {
    animation: ninja-miss-shake 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes ninja-miss-shake {
    0%, 100% { transform: translateX(0) scale(1); }
    15% { transform: translateX(-8px) scale(0.98); }
    30% { transform: translateX(8px) scale(0.97); }
    45% { transform: translateX(-6px) scale(0.98); }
    60% { transform: translateX(6px) scale(0.99); }
}

/* Ninja overlay */
.game-mode-blitz .game-overlay-card {
    background: linear-gradient(135deg, #1a0d2e 0%, #2e1065 100%);
    border: 2px solid rgba(168, 85, 247, 0.4);
    color: #e2e8f0;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(168, 85, 247, 0.3);
}

.game-mode-blitz .game-overlay-icon {
    animation: ninja-overlay-spin 0.8s ease-in-out;
}

@keyframes ninja-overlay-spin {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1) rotate(0deg); }
}

.game-mode-blitz .game-overlay-score {
    color: #d8b4fe;
    font-size: 1.35rem;
    font-weight: 900;
}

.game-mode-blitz .game-overlay-detail {
    color: #c4b5fd;
    font-size: 1.05rem;
}

.game-mode-blitz #game-final-score {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    font-size: 1.5em;
}

.game-mode-blitz .game-btn-start {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

/* Ninja intro styling */
.game-mode-blitz .game-intro {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.15));
    border: 2px solid rgba(168, 85, 247, 0.4);
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 600;
    animation: ninja-intro-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ninja-intro-in {
    0% { 
        opacity: 0;
        transform: translateY(-16px) scale(0.9);
    }
    100% { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Multi-language support for ninja game */
.game-mode-blitz .script-tamil .game-prompt,
.game-mode-blitz .script-han .game-prompt,
.game-mode-blitz .script-thai .game-prompt,
.game-mode-blitz .script-hindi .game-prompt,
.game-mode-blitz .script-cyrillic .game-prompt,
.game-mode-blitz .script-arabic .game-prompt,
.game-mode-blitz .script-hebrew .game-prompt,
.game-mode-blitz .script-hiragana .game-prompt {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Responsive ninja mode */
@media (max-width: 1024px) {
    .ninja-kill-fx {
        font-size: 2.4rem;
    }
    
    .ninja-splash-fx {
        font-size: 0.95rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .game-mode-blitz .game-stage-prompt {
        font-size: 1.15rem;
    }
    
    .ninja-kill-fx {
        font-size: 1.8rem;
    }
    
    .ninja-splash-fx {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    
    .game-mode-blitz .game-overlay-card {
        max-width: 90%;
    }
}

/* Ninja combo star effect */
.ninja-combo-star {
    animation: ninja-star-float 1s ease-out forwards !important;
}

@keyframes ninja-star-float {
    0% {
        opacity: 1;
        transform: scale(0.5) translateY(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) translateY(-24px) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-56px) rotate(360deg);
    }
}

/* —— NINJA DEFENSE GAME —— */
.ninja-defense-arena {
    background: linear-gradient(90deg, #0f0a1a 0%, #1a0d2e 50%, #0f0a1a 100%) !important;
    position: relative;
}

.ninja-defense-arena::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 5% 50%, rgba(168, 85, 247, 0.1), transparent 30%),
        radial-gradient(ellipse at 95% 50%, rgba(239, 68, 68, 0.1), transparent 30%);
    pointer-events: none;
    z-index: 1;
}

/* Ninja hero on left side */
.game-ninja-hero {
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ninja-sprite {
    font-size: 3.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.6));
    animation: ninja-running 0.6s ease-in-out infinite;
}

.ninja-ball {
    font-size: 1.2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: radial-gradient(circle at 30% 30%, #fef08a, #fbbf24);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ninja-ball-spin 3s linear infinite;
}

@keyframes ninja-running {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    25% { transform: translateY(-6px) rotate(-3deg) scaleX(1.05); }
    50% { transform: translateY(-2px) rotate(0deg); }
    75% { transform: translateY(-6px) rotate(3deg) scaleX(0.95); }
}

@keyframes ninja-ball-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enemy ninja coming from right */
.game-enemy-ninja {
    position: absolute;
    right: 95%;
    width: 80px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid;
    border-radius: 12px;
    transition: all 0.1s ease;
    z-index: 5;
}

.enemy-icon {
    font-size: 1.8rem;
    animation: enemy-bounce 0.8s ease-in-out infinite;
}

.enemy-word {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
}

.enemy-progress {
    width: 0;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    transition: width 0.1s ease;
    opacity: 0;
}

.game-enemy-ninja.enemy-active {
    box-shadow: 0 0 16px currentColor;
    filter: brightness(1.2);
}

.game-enemy-ninja.enemy-targeted {
    box-shadow: 0 0 24px currentColor, inset 0 0 12px currentColor;
    filter: brightness(1.4);
    border-width: 3px;
}

@keyframes enemy-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Blade animation */
.ninja-blade-fx {
    position: absolute;
    font-size: 2.8rem;
    z-index: 12;
    pointer-events: none;
    filter: drop-shadow(0 0 12px #0ea5e9) drop-shadow(0 0 6px #06b6d4);
}

@keyframes ninja-blade-fly {
    0% {
        transform: translateX(0) scaleX(0.6) rotate(0deg);
        opacity: 1;
    }
    40% {
        transform: translateX(40vw) scaleX(1) rotate(15deg);
        opacity: 1;
    }
    70% {
        transform: translateX(75vw) scaleX(1.1) rotate(30deg);
        opacity: 1;
    }
    100% {
        transform: translateX(92vw) scaleX(0.5) rotate(45deg);
        opacity: 0;
    }
}

/* Explosion effect */
.ninja-explosion-fx {
    position: absolute;
    font-size: 2.5rem;
    z-index: 11;
    pointer-events: none;
    animation: ninja-explosion 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ninja-explosion {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(360deg) translateY(-60px);
        opacity: 0;
    }
}

/* Ninja defense arena enhancements */
.ninja-defense-arena .game-stage-prompt {
    display: none;
}

.ninja-defense-arena .game-hud-stat {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.ninja-defense-arena .game-hud-stat strong {
    color: #c4b5fd;
}

.ninja-defense-arena .game-input {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(59, 130, 246, 0.06));
    border: 2px solid rgba(168, 85, 247, 0.2);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.ninja-defense-arena .game-input:focus {
    border-color: rgba(168, 85, 247, 0.8);
    box-shadow: 
        0 0 0 3px rgba(168, 85, 247, 0.25),
        inset 0 0 16px rgba(168, 85, 247, 0.1);
}

.ninja-defense-arena .game-status {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.08));
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    font-weight: 600;
}

.ninja-defense-arena .game-btn-start {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
    font-weight: 900;
}

.ninja-defense-arena .game-btn-start:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

.ninja-defense-arena .game-overlay-card {
    background: linear-gradient(135deg, #1a0d2e 0%, #2e1065 100%);
    border: 2px solid rgba(168, 85, 247, 0.4);
    color: #e2e8f0;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(168, 85, 247, 0.3);
}

.ninja-defense-arena #game-final-score {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

@media (max-width: 720px) {
    .game-hud {
        grid-template-columns: repeat(3, 1fr);
    }

    .game-hud-stat:nth-child(4),
    .game-hud-stat:nth-child(5) {
        grid-column: span 1;
    }

    .game-stage-dock {
        flex-wrap: wrap;
    }

    .game-stage-dock .game-input {
        flex: 1 1 100%;
        min-width: 0;
    }

    .game-stage-actions {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .game-stage-actions .game-sound-toggle,
    .game-stage-actions .game-fullscreen-btn {
        flex: 1 1 auto;
    }

    .game-stage-actions .game-btn-start {
        flex: 1 1 auto;
    }

    body.game-fullscreen-active .game-stage {
        min-height: 100svh;
        height: 100svh;
    }

    .games-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* —— Keyboard Ninja (balloon pop arcade) —— */
.game-mode-keyboard-ninja {
    background: linear-gradient(180deg, #0c1445 0%, #312e81 45%, #581c87 100%) !important;
    border-color: #a78bfa;
    overflow: hidden;
}

.game-mode-keyboard-ninja .game-danger-line,
.game-mode-keyboard-ninja .game-base-line {
    display: none;
}

.kn-arena .game-layer {
    z-index: 8;
}

.kn-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.kn-svg {
    display: block;
}

.kn-svg-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.kn-svg-tree {
    position: absolute;
    left: 0;
    bottom: 8%;
    width: clamp(140px, 22vw, 220px);
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.kn-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0c1445 0%, #312e81 50%, #7c3aed 100%);
}

.kn-escape-line {
    position: absolute;
    top: 7%;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.65), rgba(248, 113, 113, 0.65), transparent);
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.35);
    z-index: 3;
    opacity: 0.55;
}

.kn-ninja {
    position: absolute;
    left: clamp(72px, 11vw, 118px);
    bottom: clamp(18%, 22%, 26%);
    width: clamp(72px, 9vw, 96px);
    z-index: 12;
    pointer-events: none;
    transform-origin: center bottom;
}

.kn-ninja .kn-svg-ninja {
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.kn-ninja-pose {
    animation: kn-ninja-idle 2.6s ease-in-out infinite;
    transform-origin: center bottom;
}

.kn-ninja.is-throwing .kn-ninja-pose {
    animation: kn-ninja-throw 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes kn-ninja-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes kn-ninja-throw {
    0%, 100% { transform: translate(0, 0); }
    35% { transform: translate(10px, -8px) rotate(4deg); }
    70% { transform: translate(4px, -2px); }
}

.kn-balloon {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: center bottom;
}

.kn-balloon-enter {
    animation: kn-balloon-rise-in 0.35s ease-out;
}

@keyframes kn-balloon-rise-in {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.kn-balloon-body {
    width: 100%;
    aspect-ratio: 0.82;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
        radial-gradient(circle at 50% 55%, var(--kn-fill, #ef4444), var(--kn-rim, #991b1b));
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        inset -8px -12px 20px rgba(0, 0, 0, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    animation: kn-balloon-sway 2.8s ease-in-out infinite;
}

.kn-balloon-string {
    width: 2px;
    height: 1.6rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(148, 163, 184, 0.35));
    border-radius: 999px;
}

.kn-balloon-word {
    font-size: clamp(0.68rem, 1.8vw, 0.82rem);
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 1.15;
    word-break: break-word;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    padding: 0 0.15rem;
}

.kn-balloon.is-active .kn-balloon-body {
    border-color: #fde047;
    box-shadow:
        inset -8px -12px 20px rgba(0, 0, 0, 0.18),
        0 0 22px var(--kn-glow, rgba(251, 191, 36, 0.65)),
        0 0 0 3px rgba(253, 224, 71, 0.45);
}

@keyframes kn-balloon-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

.kn-balloon.is-popped {
    pointer-events: none;
}

.kn-balloon.is-popped .kn-balloon-body {
    animation: kn-balloon-pop 0.26s ease-out forwards;
}

.kn-balloon.is-popped .kn-balloon-string {
    opacity: 0;
    transition: opacity 0.12s;
}

@keyframes kn-balloon-pop {
    to { transform: scale(1.35); opacity: 0; }
}

.kn-balloon.is-escaped {
    animation: kn-balloon-escape 0.32s ease-in forwards;
}

@keyframes kn-balloon-escape {
    to { transform: translateY(-24px) scale(0.85); opacity: 0; }
}

.kn-throw-shuriken {
    position: absolute;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    z-index: 14;
    pointer-events: none;
    animation: kn-shuriken-fly 0.24s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.kn-throw-shuriken .kn-svg-shuriken {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85));
    animation: kn-shuriken-spin 0.24s linear infinite;
}

@keyframes kn-shuriken-fly {
    from { transform: translate(0, 0); opacity: 1; }
    to { transform: translate(var(--kn-dx, 120px), var(--kn-dy, -80px)); opacity: 0.95; }
}

@keyframes kn-shuriken-spin {
    to { transform: rotate(-360deg); }
}

.kn-pop-burst {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    z-index: 15;
    pointer-events: none;
}

.kn-pop-burst .kn-svg-pop {
    width: 100%;
    height: 100%;
    animation: kn-pop-ring 0.42s ease-out forwards;
}

@keyframes kn-pop-ring {
    0% { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.kn-pop-bit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    animation: kn-pop-bit-fly 0.42s ease-out forwards;
}

@keyframes kn-pop-bit-fly {
    to {
        transform: rotate(var(--kn-angle, 0deg)) translateX(var(--kn-dist, 24px));
        opacity: 0;
    }
}

.kn-score-pop {
    position: absolute;
    z-index: 16;
    font-size: 1rem;
    font-weight: 800;
    color: #fde047;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    animation: kn-score-float 0.68s ease-out forwards;
    transform: translate(-50%, -50%);
}

@keyframes kn-score-float {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -120%) scale(1.15); }
}

.kn-arena .game-hud-stat {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(167, 139, 250, 0.25);
    backdrop-filter: blur(6px);
}

.kn-arena .game-hud-stat strong {
    color: #c4b5fd;
}

.kn-arena .game-stage-dock {
    background: rgba(15, 23, 42, 0.92);
}

.kn-arena.is-hit-flash {
    box-shadow: inset 0 0 0 2px rgba(74, 222, 128, 0.45), inset 0 0 40px rgba(34, 197, 94, 0.12);
}

.kn-arena.is-miss-flash {
    box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.5), inset 0 0 40px rgba(239, 68, 68, 0.12);
}

@media (max-width: 720px) {
    .kn-ninja {
        left: 58px;
        bottom: 20%;
        width: 64px;
    }

    .kn-svg-tree {
        width: 120px;
    }

    .kn-balloon-word {
        font-size: 0.65rem;
    }
}