/* ============================================
   ARKÁDA - retro pixelart herna (kartotéka)
   Záměrně tmavý vizuál nezávislý na theme -
   všechny barvy explicitní na vlastním pozadí.
   ============================================ */

@font-face {
    font-family: 'ArkadaPixel';
    src: local('Courier New');
}

.arkada-wrap {
    --ark-bg: #0d0b1e;
    --ark-panel: #1a1633;
    --ark-neon: #4ade80;
    --ark-neon2: #f472b6;
    --ark-amber: #fbbf24;
    --ark-text: #e5e7eb;
    --ark-muted: #9ca3af;
    background: var(--ark-bg);
    color: var(--ark-text);
    padding: 2rem 1rem 4rem;
    margin: 0 auto;
    min-height: 70vh;
    font-family: 'Courier New', monospace;
    image-rendering: pixelated;
    position: relative;
    overflow: hidden;
}

/* CRT scanlines přes celou sekci */
.arkada-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 2px,
        rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px
    );
    z-index: 5;
}

.arkada-hero { text-align: center; margin-bottom: 2.5rem; position: relative; z-index: 2; }

.arkada-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    letter-spacing: 0.35em;
    color: var(--ark-neon);
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.7), 3px 3px 0 #14532d;
    margin: 0 0 0.5rem;
    font-weight: 900;
}

.arkada-subtitle { color: var(--ark-muted); font-size: 1rem; margin: 0; }

/* ============ KARTOTÉKA ============ */

.kartoteka { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }

.kartoteka-drawer {
    background: linear-gradient(180deg, #3b2f23 0%, #2a2119 100%);
    border: 4px solid #57432e;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 1.6rem 1.2rem 0;
    box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.6);
}

.kartoteka-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.4rem 0.8rem; /* větší row-gap kvůli štítkům vyčnívajícím nahoru */
    padding: 1.2rem 0.4rem 0;
    align-items: flex-end;
}

.karta {
    flex: 0 0 240px;
    background: #efe6cf;
    color: #2d2416;
    border: 2px solid #b8a888;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    transform: translateY(14px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

.karta-active { cursor: pointer; }

.karta-active:hover, .karta-active:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 10px 24px rgba(74, 222, 128, 0.35);
    outline: none;
    z-index: 3;
}

.karta-soon { filter: grayscale(0.55) brightness(0.8); }

.karta-tab {
    position: absolute;
    top: -22px;
    left: 12px;
    background: #efe6cf;
    border: 2px solid #b8a888;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    padding: 2px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.karta:nth-child(2) .karta-tab { left: auto; right: 12px; }
.karta:nth-child(3) .karta-tab { left: 50%; transform: translateX(-50%); }

.karta-body { padding: 0.9rem 0.9rem 1.1rem; }

.karta-art {
    height: 96px;
    border-radius: 4px;
    margin-bottom: 0.7rem;
    border: 2px solid #b8a888;
    image-rendering: pixelated;
    background-size: cover;
    background-position: center;
}

/* Pixelart motivy karet - čisté CSS gradienty jako placeholder art */
.karta-art-invaze {
    background:
        radial-gradient(circle at 20% 30%, #4ade80 3px, transparent 4px),
        radial-gradient(circle at 50% 20%, #4ade80 3px, transparent 4px),
        radial-gradient(circle at 80% 35%, #4ade80 3px, transparent 4px),
        radial-gradient(circle at 35% 50%, #f472b6 3px, transparent 4px),
        radial-gradient(circle at 65% 55%, #f472b6 3px, transparent 4px),
        linear-gradient(to top, #fbbf24 0 12px, transparent 12px),
        #0d0b1e;
}

.karta-art-kejty {
    background:
        linear-gradient(#b45309 0 0) 0% 22% / 100% 6px no-repeat,
        linear-gradient(#b45309 0 0) 0% 55% / 100% 6px no-repeat,
        linear-gradient(#b45309 0 0) 0% 88% / 100% 6px no-repeat,
        linear-gradient(#38bdf8 0 0) 82% 38% / 4px 30px no-repeat,
        linear-gradient(#38bdf8 0 0) 88% 38% / 4px 30px no-repeat,
        linear-gradient(#38bdf8 0 0) 14% 72% / 4px 30px no-repeat,
        linear-gradient(#38bdf8 0 0) 20% 72% / 4px 30px no-repeat,
        radial-gradient(circle at 88% 12%, #f472b6 6px, transparent 7px),
        radial-gradient(circle at 12% 12%, #ef4444 7px, transparent 8px),
        radial-gradient(circle at 45% 45%, #fbbf24 5px, transparent 6px),
        radial-gradient(circle at 10% 92%, #e5e7eb 5px, transparent 6px),
        #0d0b1e;
}

.karta-art-ruda {
    background:
        linear-gradient(#312e51 0 0) 20% 0% / 8px 100% no-repeat,
        linear-gradient(#312e51 0 0) 45% 30% / 8px 100% no-repeat,
        linear-gradient(#312e51 0 0) 70% 0% / 8px 70% no-repeat,
        linear-gradient(#312e51 0 0) 0% 45% / 100% 8px no-repeat,
        linear-gradient(#dc2626 0 0) 55% 48% / 18px 9px no-repeat,
        radial-gradient(circle at 10% 85%, #fb923c 6px, transparent 7px),
        radial-gradient(circle at 90% 12%, #38bdf8 6px, transparent 7px),
        radial-gradient(circle at 88% 22%, #b45309 5px, transparent 6px),
        radial-gradient(circle at 35% 70%, #4ade80 4px, transparent 5px),
        radial-gradient(circle at 60% 20%, #ef4444 4px, transparent 5px),
        #0d0b1e;
}

.karta-art-skladnik {
    background:
        linear-gradient(#f472b6 0 0) 10% 80% / 22px 22px no-repeat,
        linear-gradient(#4ade80 0 0) 32% 80% / 22px 22px no-repeat,
        linear-gradient(#fbbf24 0 0) 32% 58% / 22px 22px no-repeat,
        linear-gradient(#60a5fa 0 0) 54% 80% / 22px 22px no-repeat,
        #0d0b1e;
}

.karta-art-zrout {
    background:
        radial-gradient(circle at 30% 50%, #fbbf24 14px, transparent 15px),
        radial-gradient(circle at 55% 50%, #efe6cf 3px, transparent 4px),
        radial-gradient(circle at 70% 50%, #efe6cf 3px, transparent 4px),
        radial-gradient(circle at 85% 50%, #efe6cf 3px, transparent 4px),
        #0d0b1e;
}

.karta-art-had {
    background:
        linear-gradient(#4ade80 0 0) 15% 30% / 60px 10px no-repeat,
        linear-gradient(#4ade80 0 0) 62% 30% / 10px 40px no-repeat,
        linear-gradient(#4ade80 0 0) 40% 62% / 32px 10px no-repeat,
        radial-gradient(circle at 82% 70%, #f472b6 5px, transparent 6px),
        #0d0b1e;
}

.karta-desc { font-size: 0.82rem; line-height: 1.35; margin: 0 0 0.7rem; min-height: 3.3em; }

.karta-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.karta-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: #b8a888;
    color: #2d2416;
    padding: 3px 8px;
    border-radius: 3px;
}

.karta-badge-play { background: #16a34a; color: #fff; }

.karta-hiscore { font-size: 0.66rem; color: #6b5d43; font-weight: 700; }

.kartoteka-front {
    background: linear-gradient(180deg, #57432e 0%, #3b2f23 100%);
    border: 4px solid #57432e;
    border-top: 3px solid #6f5a3e;
    border-radius: 0 0 10px 10px;
    padding: 1rem;
    text-align: center;
    color: #c9b896;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    font-weight: 700;
}

/* ============ HERNÍ MODAL / KABINET ============ */

.arkada-modal[hidden] { display: none; }

.arkada-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 12, 0.92);
    z-index: 1200; /* nad .sticky-top-wrapper (1100) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    flex-wrap: wrap;
    overflow-y: auto;
}

.arkada-cabinet {
    background: var(--ark-panel, #1a1633);
    border: 3px solid #4ade80;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(74, 222, 128, 0.25);
    overflow: hidden;
    max-width: 520px;
    width: 100%;
}

.cabinet-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #14532d;
    color: #d1fae5;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-family: 'Courier New', monospace;
}

.cabinet-close {
    background: none;
    border: 2px solid #d1fae5;
    color: #d1fae5;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 0.9rem;
}

.cabinet-close:hover { background: #d1fae5; color: #14532d; }

.cabinet-screen { position: relative; background: #000; line-height: 0; display: flex; justify-content: center; }

#arkadaCanvas {
    /* Musí se vejít na výšku viewportu i s lištami kabinetu - jinak hráč
       (se zamčeným scrollem) nevidí spodek hry. Poměr stran drží max-w/max-h. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 210px);
    display: block;
    image-rendering: pixelated;
}

.cabinet-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 4, 12, 0.82);
    text-align: center;
    line-height: 1.5;
}

.cabinet-overlay[hidden] { display: none; }

.overlay-content { font-family: 'Courier New', monospace; color: #e5e7eb; padding: 1rem; width: 100%; }
.overlay-content h3 { color: #4ade80; letter-spacing: 0.25em; font-size: 1.4rem; margin: 0 0 1rem; text-shadow: 0 0 10px rgba(74,222,128,.6); }
.overlay-content p { margin: 0.4rem 0; font-size: 0.9rem; color: #cbd5e1; }

.overlay-btn {
    margin-top: 1.2rem;
    background: #16a34a;
    color: #fff;
    border: none;
    padding: 0.7rem 2rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.15em;
    border-radius: 4px;
    cursor: pointer;
}

.overlay-btn:hover { background: #22c55e; box-shadow: 0 0 16px rgba(74, 222, 128, 0.5); }

.overlay-input {
    display: block;
    margin: 0.8rem auto 0;
    background: #0d0b1e;
    color: #4ade80;
    border: 2px solid #4ade80;
    padding: 0.55rem 0.8rem;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    text-align: center;
    border-radius: 4px;
    width: min(240px, 80%);
}

.overlay-msg { min-height: 1.2em; font-size: 0.8rem; color: #fbbf24; }

.cabinet-bottom {
    display: flex;
    justify-content: space-around;
    padding: 0.6rem 1rem;
    background: #0d0b1e;
    color: #9ca3af;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.cabinet-bottom b { color: #4ade80; }

/* Dotykové ovládání - zobrazí se jen na touch zařízeních (JS) */
.cabinet-touch { display: none; justify-content: center; gap: 0.6rem; padding: 0.7rem; background: #12102a; flex-wrap: wrap; }
.cabinet-touch.touch-visible { display: flex; }

.touch-btn {
    width: 56px;
    height: 52px;
    font-size: 1.4rem;
    background: #1a1633;
    color: #4ade80;
    border: 2px solid #4ade80;
    border-radius: 8px;
    touch-action: none;
    user-select: none;
}

.touch-btn-fire { border-color: #f472b6; color: #f472b6; width: 84px; }

/* Žebříček vedle kabinetu */
.arkada-board {
    background: var(--ark-panel, #1a1633);
    border: 3px solid #f472b6;
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    min-width: 260px;
    max-width: 320px;
    font-family: 'Courier New', monospace;
    color: #e5e7eb;
    align-self: center;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
}

.board-title { color: #f472b6; font-size: 1rem; letter-spacing: 0.2em; margin: 0 0 1rem; text-align: center; }

.board-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }

.board-list li {
    counter-increment: rank;
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed rgba(156, 163, 175, 0.25);
}

.board-list li::before { content: counter(rank) '.'; color: #fbbf24; min-width: 1.6em; }
.board-list li:nth-child(1)::before { content: '🥇'; }
.board-list li:nth-child(2)::before { content: '🥈'; }
.board-list li:nth-child(3)::before { content: '🥉'; }

.board-list .board-nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .board-score { color: #4ade80; font-weight: 700; }
.board-empty { color: #9ca3af; justify-content: center; }

.board-total { text-align: center; color: #9ca3af; font-size: 0.75rem; margin: 0.8rem 0 0; }

/* Mobil */
@media (max-width: 640px) {
    .karta { flex-basis: 200px; }
    .arkada-modal { align-items: flex-start; }
    .arkada-board { max-width: 100%; width: 100%; }
}