/* Theme palettes mirror the game portal (server/.../web/style.css) so tavakava.lv and
   the game pages read as one brand. Classic is the default (:root). --red is the brand
   red for the ".lv" suffix - tuned per theme so it stays readable on every gradient. */
:root {
    --bg1: #af6222; --bg2: #fad065;
    --surface: #162941; --border: #2c4363;
    --text: #ffffff; --title: #ffffff;
    --accent: #f19e56; --hint: #a0a590;
    --red: #d92b20;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="borealis"] {
    --bg1: #67765c; --bg2: #5a6350;
    --surface: #414b36; --border: #55614a;
    --text: #ffffff; --title: #ffffff;
    --accent: #99903f; --hint: #899383;
    --red: #e8483c;
}
:root[data-theme="source"] {
    --bg1: #578686; --bg2: #44656f;
    --surface: #204d5a; --border: #2f6373;
    --text: #ffffff; --title: #ffffff;
    --accent: #259bb1; --hint: #8999a7;
    --red: #e8483c;
}
:root[data-theme="strawberry"] {
    --bg1: #ac2f41; --bg2: #5e1a21;
    --surface: #680f1a; --border: #8a2530;
    --text: #fff0ee; --title: #fff0ee;
    --accent: #f4a8b0; --hint: #b3626d;
    --red: #ff8a75;
}
:root[data-theme="velvet"] {
    --bg1: #5e3c2c; --bg2: #6e4535;
    --surface: #2a2018; --border: #4a3a2e;
    --text: #f5ede6; --title: #f5ede6;
    --accent: #d47d60; --hint: #9b9489;
    --red: #f05545;
}
:root[data-theme="icecream"] {
    --bg1: #ecddcd; --bg2: #b49e90;
    --surface: #efe3df; --border: #d9c5bc;
    --text: #6b3e2a; --title: #6b3e2a;
    --accent: #a87760; --hint: #b1a89d;
    --red: #c02b20;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b3e2a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
@font-face {
    font-family: "TavaKavaTitle";
    src: url("font_menu.ttf") format("truetype");
}
/* Kills the default blue flash mobile browsers draw over any tapped element - separate
   from the outline:none rules below, which only affect keyboard focus. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: system-ui, sans-serif;
    min-height: 100vh;
    background: var(--bg2);
    color: var(--text);
    padding: 24px 16px;
    /* The fan spreading on hover can poke a few px past a small screen's edge. */
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--bg1), var(--bg2));
}
main { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100vh - 48px); }

/* Switchers - identical control style to the portal. */
.switchers { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 4px; }
.switchers select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface) var(--chevron) no-repeat right 10px center;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 32px;
    padding: 0 28px 0 10px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}
.switchers select:focus { outline: none; }

/* Hero: the suit row above the wordmark is the brand's signature flourish. Kept
   vertically tight so the fan and its play button fit small laptop screens without
   scrolling. */
.hero { text-align: center; padding: 8px 0 20px; }
.hero-suits { display: flex; justify-content: center; gap: 14px; margin-bottom: 6px; }
.suit {
    font-size: 1.6rem;
    color: var(--title);
    opacity: 0.75;
    animation: suit-float 4s ease-in-out infinite;
}
.suit.red { color: var(--accent); }
.suit:nth-child(2) { animation-delay: 0.4s; }
.suit:nth-child(3) { animation-delay: 0.8s; }
.suit:nth-child(4) { animation-delay: 1.2s; }
@keyframes suit-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.brand {
    font-family: "TavaKavaTitle", system-ui, sans-serif;
    font-size: clamp(2rem, 9vw, 5rem);
    color: var(--title);
    line-height: 1;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    flex-wrap: wrap;
}
/* The logo scales with the wordmark (em units follow the h1 font size). */
.brand-logo { height: 1.6em; width: auto; }
.brand-lv { color: var(--red); }
.tagline { color: var(--text); font-size: 1.05rem; margin-top: 6px; }

/* Games: a fan of playing cards like a hand in Zole - one card per game. The cards all
   sit at the container center and script.js rotates each by --angle around a pivot far
   below the card (transform-origin), which spreads them into an arc automatically. The
   pivot distance is in card-height units, so the fan tightens with the cards on narrow
   screens and never outgrows the row. */
.games { flex: 1; --card-w: clamp(120px, 30vw, 200px); --card-h: calc(var(--card-w) * 7 / 5); --fan-scale: 1; }
.card-fan {
    position: relative;
    height: calc(var(--card-h) + 64px);
    --spread: 0deg;
}
.fan-card {
    position: absolute;
    left: 50%;
    top: 34px;
    width: var(--card-w);
    height: var(--card-h);
    margin-left: calc(var(--card-w) / -2);
    transform-origin: 50% 260%;
    --shift: 0;
    transform: rotate(calc((var(--angle, 0deg) + var(--shift) * var(--spread)) * var(--fan-scale, 1)));
    transition: transform 0.25s ease;
    text-decoration: none;
    cursor: pointer;
}
/* Hover/focus lifts the card along its own axis, exactly like the hand in the game.
   The stacking order stays as dealt - a z-order jump on hover looks wrong in a fan. */
.fan-card:hover, .fan-card:focus-visible {
    transform: rotate(calc((var(--angle, 0deg) + var(--shift) * var(--spread)) * var(--fan-scale, 1))) translateY(-26px);
}
/* The other cards step aside along the arc while one is hovered - as if the hovered
   card had grown wider in the hand. Cards after it (~) are the ones stacked ON TOP of
   it (left is dealt first, so later cards cover earlier ones), so they slide away
   further to fully reveal the hovered card's face; the cards before it (:has) sit
   behind it and only need a small nudge. --spread is set by script.js from the step. */
.fan-card:hover ~ .fan-card, .fan-card:focus-visible ~ .fan-card { --shift: 1.6; }
.fan-card:has(~ .fan-card:hover), .fan-card:has(~ .fan-card:focus-visible) { --shift: -0.6; }
.fan-card:focus-visible { outline: none; }
.card-face, .card-back {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.25s ease;
}
/* While lifted, an invisible extension keeps covering the vacated strip below the
   card - otherwise a pointer near the bottom edge loses the card as it lifts,
   un-hovers it, and the card flickers up and down. */
.fan-card:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 26px;
}
/* Sliding rightward across the fan: the next card has stepped away 1.6 steps, which
   opens a dead gap past the hovered card's right edge - the pointer landing there
   un-hovers everything and the fan snaps back mid-slide. This extension keeps the
   current card hovered across the gap; the moment the pointer reaches the next card's
   body (stacked above), hover hands over seamlessly. Leftward needs none: the cards
   behind only step 0.6 and never open a gap. */
.fan-card:hover::before {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
    width: calc(var(--card-w) * 0.5);
}
.fan-card:hover .card-face, .fan-card:hover .card-back,
.fan-card:focus-visible .card-face, .fan-card:focus-visible .card-back {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}
.card-face {
    background: #ffffff;
    color: #162941;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
/* The game logo fills the card center. */
.card-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 82%;
    max-height: 62%;
    object-fit: contain;
}
/* Corner index like a real card: the rank letter with the suit pip underneath. */
.card-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: "TavaKavaTitle", system-ui, sans-serif;
    font-size: calc(var(--card-w) * 0.13);
    line-height: 1;
    color: #162941;
}
.corner-suit { font-family: system-ui, sans-serif; font-size: 0.6em; }
.card-corner.top { top: 8px; left: 10px; }
.card-corner.bottom { bottom: 8px; right: 10px; transform: rotate(180deg); }
/* Face-down card: the brand deck back, tuned to the current theme accent. */
.card-back {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255, 255, 255, 0.06) 8px, rgba(255, 255, 255, 0.06) 16px),
        linear-gradient(135deg, var(--surface), var(--border));
    border: 3px solid var(--accent);
}
.back-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "TavaKavaTitle", system-ui, sans-serif;
    font-size: calc(var(--card-w) * 0.3);
    color: var(--accent);
    opacity: 0.7;
}

/* Caption under the fan: the hovered/focused game's name, blurb and call to action. */
.fan-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    margin-top: 16px;
    min-height: 132px;
}
.caption-name {
    font-family: "TavaKavaTitle", system-ui, sans-serif;
    font-size: 1.6rem;
    color: var(--title);
}
/* Fixed to exactly 2 lines' height (line-clamp as a hard safety net) - every blurb is
   written to fit 1-2 lines, and reserving the space up front means switching between a
   1-line and a 2-line game never shifts the caption/button below it. */
.caption-blurb {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 320px;
    min-height: calc(1.4em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The call to action is a pill on the surface color so it stays readable on every
   theme's gradient (plain accent text washes out on the classic orange). */
.caption-cta {
    margin-top: 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}
.caption-cta:not(.muted):hover { border-color: var(--accent); color: var(--accent); }
.caption-cta.muted { color: var(--hint); font-weight: 400; cursor: default; }

/* Footer - identical to the portal footer (socials + legal links + credit). */
footer {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.social-icons { display: flex; gap: 12px; }
.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--hint);
    border: 1px solid var(--border);
}
.social-icons a:hover { color: var(--accent); border-color: var(--accent); }
.footer-links { display: flex; align-items: center; gap: 8px; color: var(--hint); font-size: 0.85rem; }
.footer-links a { color: var(--hint); }
.footer-links a:hover { color: var(--accent); }
.footer-credit { color: var(--hint); font-size: 0.8rem; }

@media (max-width: 520px) {
    .hero { padding: 8px 0 16px; }
    /* Tighten the arc on phones so the full fan still fits the screen. */
    .games { --fan-scale: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
    .suit { animation: none; }
    .fan-card, .card-face, .card-back { transition: none; }
}