/* Game appearance: style (kids / teens / adults), its theme (6a..6i), shape (round / sharp) and the avatar
   switch, for the player pages. Loaded only when a unit chose any of them (UnitAppearance.IsStyled); the
   classic look loads nothing, so those units render exactly as before.

   APPEARANCE ONLY. These rules change colours, fonts, borders, shadows and corner radii. They never touch
   transform, transition, animation, order, sizes of game areas or anything a game's script reads, so no
   game plays differently under any theme. The one display rule hides the player's avatar block in the
   header when the unit turned it off. Colours come from the palette variables the layout already sets
   (--wa-*) and the derived ones on <body> (--aq-*, UnitAppearance.CssVars): with a theme's own colours
   chosen, the palette is the theme's.

   Styles and themes follow the design handoff (C:\_Aristoqle\design_handoff_izgled_igre, theme-engine.js).
   Fonts are self-hosted in /fonts/appearance.css. */

/* ── Common to every style ─────────────────────────────────────────────────────────────── */
body.aq-style {
    /* Text by its ground (UnitAppearance.CssVars): the palette's text where it reads, else near-black or white. */
    --aq-ink: var(--aq-ink-bg, var(--wa-text));
    --aq-head-ink: var(--aq-ink-surface, var(--wa-text));
    --aq-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 18px -12px rgba(0,0,0,.35);
    --aq-answer-r: 12px;
    --aq-answer-sh: inset 0 -3px 0 rgba(0,0,0,.14);
    --aq-card-r: 12px;
    --aq-back-bg: var(--aq-back);
    --aq-back-ink: var(--wa-accent);
    --aq-back-sh: var(--aq-shadow);
    --aq-q-r: 16px;
}
/* A calm, flat screen instead of the gradient. */
body.aq-style.wa-bg { background: var(--wa-bg-m); }
html:has(body.aq-style) { background-color: var(--wa-bg-m); }

/* Body text in the style's font; icons keep their own font. */
body.aq-style :where(*):not(.material-symbols-outlined) { font-family: var(--aq-font); }

/* The playful outlines and drop shadows belong to the classic look on a coloured ground. */
body.aq-style .text-shadow-playful,
body.aq-style .drop-shadow { text-shadow: none !important; filter: none !important; }
/* Unit page tiles: the dark halo under dark ink reads as blur. */
body.aq-style .module-label { text-shadow: none; }
body.aq-style .module-icon-wrap img,
body.aq-style .module-icon-wrap .material-symbols-outlined { filter: none; }
/* The same halo on the games' own titles and texts on the ground. */
body.aq-style :is(.cat-title, .mp-title, .jig-title, .mem-title, .ws-title, .cat-bucket-head, .clz-title, .clz-text, .hs-title, .hs-prompt,
                  .sort-title, .th-outro-icon, .th-outro-title, .qa-tile) { text-shadow: none; }

/* Header: a plain surface bar by default (themes below change it); the style's fonts and colours. */
body.aq-style #header-panel {
    background: var(--aq-surface);
    border: none;
    border-radius: 16px;
    box-shadow: var(--aq-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.aq-style #header-panel .centre-panel { background: transparent; border: none; }
body.aq-style #wa-main-title {
    color: var(--aq-title-ink, var(--aq-head-ink)) !important;
    font-family: var(--aq-title-font) !important;
    font-weight: var(--aq-title-w, 800) !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
}
body.aq-style #header-panel .text-yellow-400 { color: var(--wa-accent) !important; }
body.aq-style #header-panel .border-yellow-400 { border-color: var(--wa-accent) !important; }
body.aq-style #header-panel .bg-blue-900 { background-color: var(--wa-accent) !important; }
body.aq-style #stopwatch,
body.aq-style #current-points { font-family: var(--aq-num-font) !important; }
body.aq-style .exit-btn { background: transparent; border-color: transparent; box-shadow: none; }
body.aq-style .exit-btn .material-symbols-outlined { color: var(--aq-head-ink) !important; }
body.aq-style #header-panel .text-white { color: var(--aq-head-ink) !important; }

/* Quiz: a solid question card on the light ground, answers in the palette's colours. */
body.aq-style .quiz-question-card {
    background: var(--aq-surface);
    border: var(--aq-q-border, none);
    border-radius: var(--aq-q-r);
    box-shadow: var(--aq-card-shadow, var(--aq-shadow));
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.aq-style .quiz-question-image { background: var(--wa-accent-img, rgba(0,0,0,.04)); }
body.aq-style .quiz-question-text,
body.aq-style .quiz-progress { text-shadow: none; }
body.aq-style .quiz-progress { background: var(--wa-accent); color: var(--aq-on-accent); font-family: var(--aq-num-font); }
body.aq-style .quiz-question-text { color: var(--aq-ink-surface, var(--aq-ink)); }
body.aq-style .quiz-answer {
    border-radius: var(--aq-answer-r);
    border: var(--aq-answer-border, none);
    box-shadow: var(--aq-answer-sh);
    text-shadow: none;
}

/* Memory: card backs in the theme, fronts white; the flip itself is untouched. */
body.aq-style .mem-face { border-radius: var(--aq-card-r); box-shadow: var(--aq-card-shadow, var(--aq-shadow)); }
body.aq-style .mem-back {
    background: var(--aq-back-bg);
    background-image: var(--aq-back-img, none);
    background-size: var(--aq-back-size, auto);
    border: var(--aq-back-border, none);
    color: var(--aq-back-ink);
    text-shadow: none;
    box-shadow: var(--aq-back-sh);
}
body.aq-style .mem-front { color: var(--aq-ink-white, var(--aq-ink)); }

/* End of a game: the message in the style's ink on the light card. */
body.aq-style #win-popup-card { background: var(--wa-bg-m); }
body.aq-style #win-message { color: var(--aq-ink); text-shadow: none; font-family: var(--aq-title-font); }
body.aq-style #win-rating-prompt { color: var(--aq-ink); text-shadow: none; }
body.aq-style .win-rating-face { color: color-mix(in srgb, var(--aq-ink) 35%, transparent); }
body.aq-style .win-rating-face:hover { color: var(--aq-ink); }
body.aq-style .win-rating-face.selected,
body.aq-style #win-rating-thanks { color: var(--wa-accent); }
body.aq-style #win-lobby-btn { background: var(--wa-accent); box-shadow: none; color: var(--aq-on-accent); }

/* Log-out question (game pages and the unit page): the light card of the end of a game, the style's letters,
   flat buttons like the Play button: stay in the line colour, leave in the accent (no classic green/red 3D). */
body.aq-style #exit-modal-card { background: var(--wa-bg-m); }
body.aq-style #exit-modal-card > .material-symbols-outlined { color: var(--wa-accent) !important; }
body.aq-style #exit-modal-msg { color: var(--aq-ink) !important; font-family: var(--aq-title-font); }
body.aq-style #exit-modal-card :is(.modal-no, .modal-yes) {
    box-shadow: none; text-shadow: none; text-transform: none;
    border-radius: var(--aq-card-r) !important; font-family: var(--aq-title-font);
}
body.aq-style #exit-modal-card .modal-no {
    background: var(--aq-surface); color: var(--aq-ink-surface, var(--aq-ink)) !important; box-shadow: inset 0 0 0 1.5px var(--aq-line);
}
body.aq-style #exit-modal-card .modal-yes { background: var(--wa-accent); color: var(--aq-on-accent) !important; }
body.aq-style #exit-modal-card :is(.modal-no, .modal-yes):active { box-shadow: none; }
body.aq-style #exit-modal-card .modal-no:active { box-shadow: inset 0 0 0 1.5px var(--aq-line); }

/* Intro overlays (before a game) follow the ground. */
body.aq-style .intro-card { background: var(--wa-bg-m); }
body.aq-style .intro-card p { color: var(--aq-ink); text-shadow: none; }
/* Its Play button in the style's accent, flat, like the other buttons of the style (no classic green 3D). */
body.aq-style .intro-play-btn {
    background: var(--wa-accent) !important; color: var(--aq-on-accent) !important;
    box-shadow: none !important; text-shadow: none !important;
    border-radius: var(--aq-card-r) !important; font-family: var(--aq-title-font);
}
body.aq-style .intro-play-btn .material-symbols-outlined { color: var(--aq-on-accent) !important; }
body.aq-style .intro-play-btn:active { box-shadow: none !important; }

/* Language picker on the light ground. */
body.aq-style #wa-lang-btn { border-color: var(--aq-line); }

/* ── Styles: the letters ───────────────────────────────────────────────────────────────── */
body.aq-style-kids {
    --aq-font: 'Baloo 2', system-ui, sans-serif;
    --aq-title-font: 'Baloo 2', system-ui, sans-serif;
    --aq-num-font: 'Baloo 2', system-ui, sans-serif;
}
body.aq-style-teens {
    --aq-font: 'Bricolage Grotesque', system-ui, sans-serif;
    --aq-title-font: 'Bricolage Grotesque', system-ui, sans-serif;
    --aq-num-font: 'Geist Mono', ui-monospace, monospace;
}
body.aq-style-adults {
    --aq-font: 'Geist', system-ui, sans-serif;
    --aq-title-font: 'Manrope', system-ui, sans-serif;   /* Aristoqle's own sans: calm, wide, readable when small */
    --aq-title-w: 700;
    --aq-num-font: 'Geist Mono', ui-monospace, monospace;
}
body.aq-style-adults #wa-main-title { font-size: 1.15rem !important; }
body.aq-style-adults #stopwatch,
body.aq-style-adults #current-points { font-weight: 400 !important; }

/* ── Kids themes ───────────────────────────────────────────────────────────────────────── */
/* 6a Med: soft white pill, a sunny card back with dots. */
body.aq-theme-6a {
    --aq-answer-r: 18px;
    --aq-answer-sh: inset 0 -4px 0 rgba(0,0,0,.14);
    --aq-card-r: 22px;
    --aq-q-r: 22px;
    --aq-back-bg: var(--wa-accent);
    --aq-back-img: radial-gradient(rgba(255,255,255,.35) 2px, transparent 2.5px);
    --aq-back-size: 14px 14px;
    --aq-back-ink: var(--aq-on-accent);
    --aq-back-sh: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.16), 0 10px 16px -10px rgba(0,0,0,.45);
}
body.aq-theme-6a #header-panel { border-radius: 28px; }
body.aq-theme-6a .exit-btn { background: var(--wa-bg-m); border-radius: 999px; }
body.aq-theme-6a .exit-btn { --aq-head-ink: var(--aq-ink-bg, var(--wa-text)); }

/* 6b Livada: no bar, separate bubbles with a hard shadow; striped card back in the second colour. */
body.aq-theme-6b {
    --aq-answer-r: 16px;
    --aq-answer-sh: 0 3px 0 rgba(0,0,0,.2);
    --aq-card-r: 22px;
    --aq-q-r: 22px;
    --aq-card-shadow: 0 3px 0 var(--aq-line);
    --aq-back-bg: var(--aq-alt);
    --aq-back-img: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 6px, transparent 6px 12px);
    --aq-back-ink: var(--aq-on-alt);
    --aq-back-sh: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.16), 0 10px 16px -10px rgba(0,0,0,.45);
}
body.aq-theme-6b #header-panel { background: transparent; box-shadow: none; }
body.aq-theme-6b #header-panel .centre-panel,
body.aq-theme-6b .exit-btn { background: var(--aq-surface); border-radius: 16px; box-shadow: 0 3px 0 var(--aq-line); }
/* The player block stands on the ground; the title bubble and the exit button are surfaces. */
body.aq-theme-6b #header-panel { --aq-head-ink: var(--aq-ink-bg, var(--wa-text)); }
body.aq-theme-6b #header-panel .centre-panel,
body.aq-theme-6b .exit-btn { --aq-head-ink: var(--aq-ink-surface, var(--wa-text)); }

/* 6c Bojice: a sticker with an ink outline and offset shadow. */
body.aq-theme-6c {
    --aq-answer-r: 14px;
    --aq-answer-border: 1.5px solid var(--aq-ink);
    --aq-answer-sh: 2px 2px 0 var(--aq-ink);
    --aq-card-r: 18px;
    --aq-q-r: 18px;
    --aq-q-border: 1.5px solid var(--aq-ink);
    --aq-card-shadow: 2px 2px 0 var(--aq-ink);
    --aq-back-bg: var(--wa-accent);
    --aq-back-img: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px);
    --aq-back-border: 1.5px solid var(--aq-ink);
    --aq-back-ink: var(--aq-on-accent);
    --aq-back-sh: 2px 2px 0 var(--aq-ink);
}
body.aq-theme-6c #header-panel { border: 1.5px solid var(--aq-ink); box-shadow: 2px 2px 0 var(--aq-ink); }
body.aq-theme-6c .exit-btn { border-left: 1.5px solid var(--aq-ink); border-radius: 0; }

/* ── Teens themes ──────────────────────────────────────────────────────────────────────── */
/* 6e Kapsula: dark capsule bar, gold score, dotted dark card back. */
body.aq-theme-6e {
    --aq-answer-r: 14px;
    --aq-card-r: 14px;
    --aq-q-r: 18px;
    --aq-title-ink: var(--aq-on-head);
    --aq-back-bg: var(--aq-head);
    --aq-back-img: repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--wa-accent) 30%, transparent) 0 1px, transparent 1px 7px);
    --aq-back-sh: inset 0 1px 0 rgba(255,240,210,.1), 0 10px 16px -10px rgba(0,0,0,.7);
}
body.aq-theme-6e #header-panel { background: var(--aq-head); border-radius: 28px; box-shadow: none; }
body.aq-theme-6e #header-panel .text-white { color: var(--aq-on-head) !important; }
body.aq-theme-6e #current-points { color: var(--wa-accent) !important; }
body.aq-theme-6e .exit-btn { background: color-mix(in srgb, var(--aq-on-head) 10%, transparent); border-radius: 999px; }
body.aq-theme-6e .exit-btn .material-symbols-outlined { color: var(--aq-on-head) !important; }

/* 6d Grafit: always a dark screen with an accent glow at the top; a see-through bar. */
body.aq-theme-6d {
    --wa-text: var(--aq-on-head);
    --aq-ink: var(--aq-on-head);
    --aq-surface: rgba(255,255,255,.06);
    --aq-line: rgba(255,255,255,.14);
    --aq-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    --aq-answer-r: 12px;
    --aq-card-r: 12px;
    --aq-q-r: 16px;
    --aq-card-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    --aq-back-bg: rgba(255,255,255,.05);
    --aq-back-img: radial-gradient(color-mix(in srgb, var(--wa-accent) 35%, transparent) 1px, transparent 1.4px);
    --aq-back-size: 8px 8px;
    --aq-back-sh: inset 0 0 0 1px color-mix(in srgb, var(--wa-accent) 30%, transparent), 0 10px 18px -10px rgba(0,0,0,.8);
}
body.aq-theme-6d.wa-bg {
    background: radial-gradient(100% 50% at 50% 0%, color-mix(in srgb, var(--wa-accent) 14%, transparent), transparent 65%), var(--aq-head);
}
html:has(body.aq-theme-6d) { background-color: var(--aq-head); }
body.aq-theme-6d #header-panel { box-shadow: inset 0 0 0 1px var(--aq-line); }
body.aq-theme-6d { --aq-head-ink: var(--aq-on-head); }
body.aq-theme-6d #current-points { color: var(--wa-accent) !important; }
body.aq-theme-6d .quiz-question-text,
body.aq-theme-6d #win-message,
body.aq-theme-6d #win-rating-prompt,
body.aq-theme-6d .intro-card p { color: var(--aq-on-head); }
body.aq-theme-6d #win-popup-card,
body.aq-theme-6d .intro-card { background: var(--aq-head); }

/* 6f Kontra: a bar in two blocks, accent on the left, dark on the right. */
body.aq-theme-6f {
    --aq-answer-r: 10px;
    --aq-card-r: 10px;
    --aq-q-r: 12px;
    --aq-title-ink: var(--aq-on-accent);
    --aq-back-bg: var(--wa-accent);
    --aq-back-img: repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 3px, transparent 3px 9px);
    --aq-back-ink: var(--aq-on-accent);
    --aq-back-sh: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 16px -10px rgba(0,0,0,.5);
}
body.aq-theme-6f #header-panel {
    background: linear-gradient(90deg, var(--wa-accent) 0 58%, var(--aq-head) 58% 100%);
    border-radius: 12px;
    box-shadow: none;
}
body.aq-theme-6f #header-panel .text-white { color: var(--aq-on-head) !important; }
body.aq-theme-6f #stopwatch { color: var(--wa-accent) !important; }
body.aq-theme-6f .exit-btn .material-symbols-outlined { color: var(--aq-on-head) !important; }

/* ── Adults themes ─────────────────────────────────────────────────────────────────────── */
/* 6g Papir: no frame, thin lines; a paper card back with a fine inner frame. */
body.aq-theme-6g {
    --aq-answer-r: 10px;
    --aq-answer-sh: none;
    --aq-card-r: 10px;
    --aq-q-r: 12px;
    --aq-card-shadow: 0 0 0 1px var(--aq-line);
    --aq-back-sh: inset 0 0 0 4px var(--aq-back), inset 0 0 0 5px color-mix(in srgb, var(--wa-accent) 32%, transparent),
                  inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px color-mix(in srgb, var(--wa-accent) 16%, transparent), 0 6px 12px -8px rgba(0,0,0,.35);
}
body.aq-theme-6g #header-panel {
    background: transparent;
    border-bottom: 1px solid var(--aq-line);
    border-radius: 0;
    box-shadow: none;
}
body.aq-theme-6g .exit-btn { border-color: var(--aq-line); }
body.aq-theme-6g #header-panel { --aq-head-ink: var(--aq-ink-bg, var(--wa-text)); }   /* no bar: the text is on the ground */

/* 6h Tinta: a dark bar to the edges, the time in the accent; a lined card back. */
body.aq-theme-6h {
    --aq-answer-r: 8px;
    --aq-answer-sh: none;
    --aq-card-r: 8px;
    --aq-q-r: 12px;
    --aq-title-ink: var(--aq-on-head);
    --aq-back-img: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 5px);
    --aq-back-ink: var(--aq-ink-back, var(--aq-ink));
    --aq-back-sh: inset 0 0 0 1px color-mix(in srgb, var(--aq-ink) 14%, transparent), 0 6px 12px -8px rgba(0,0,0,.35);
}
body.aq-theme-6h #header-panel {
    background: var(--aq-head);
    border-radius: 0 0 22px 22px;
    box-shadow: none;
    margin-left: 0; margin-right: 0; margin-top: 0;
}
body.aq-theme-6h #header-panel .text-white { color: var(--aq-on-head) !important; }
body.aq-theme-6h #stopwatch { color: var(--wa-accent) !important; }
body.aq-theme-6h .exit-btn .material-symbols-outlined { color: var(--aq-on-head) !important; }
body.aq-theme-6h.aq-shape-sharp #header-panel { border-radius: 0 !important; }

/* 6i Galerija: a floating white card; plain white card backs. */
body.aq-theme-6i {
    --aq-answer-r: 12px;
    --aq-card-r: 12px;
    --aq-q-r: 14px;
    --aq-back-bg: var(--aq-surface);
    --aq-back-sh: 0 0 0 1px var(--aq-line), 0 6px 12px -8px rgba(0,0,0,.3);
}
body.aq-theme-6i #header-panel { border-radius: 14px; }
body.aq-theme-6i #header-panel .centre-panel { background: var(--wa-bg-m); border-radius: 10px; }
body.aq-theme-6i #header-panel .centre-panel { --aq-head-ink: var(--aq-ink-bg, var(--wa-text)); }

/* ── Avatar off: the player block leaves the header (display only; nothing reads it). ─── */
/* Without avatars the picture goes (in a game the name and the visit's total points stay; on the portal the
   whole player block is .wa-avatar). */
body.aq-no-avatar .wa-avatar { display: none !important; }

/* ── Shape: sharp corners ──────────────────────────────────────────────────────────────── */
/* Every rounded surface of the game screen gets a small, even radius (3px); nothing moves. Spinners keep
   their round shape, being what shows a wait. */
body.aq-shape-sharp :is(#header-panel, #header-panel *, .wa-content *, #win-popup-card, #win-popup-card *,
                        #exit-modal-card, #exit-modal-card *, .intro-card, .intro-card *, #wa-lang-btn, #wa-lang-menu,
                        #wa-lang-menu *):not([class*="spin"]) {
    border-radius: 3px !important;
}