/* Team Building Questions - "Campfire" theme
 *
 * The look of a 1930s national park poster: a night sky over a fir forest,
 * a campfire just below the screen (its glow, embers and marshmallow sticks),
 * and every question cut into a wooden trail sign with an arrow end.
 *
 * All colors live in :root below. tests/contrast.test.js reads them and checks
 * every text/background pair against WCAG AA, so change colors here and rerun:
 *     node tests/run-all.js
 */

:root {
    /* Night sky */
    --night: #172435;
    --dusk: #26384b;
    --forest-floor: #33403f;
    --glow: rgba(226, 118, 52, 0.35);          /* soft glow around the app title */

    /* Campfire light. The animations only dim these, never brighten them,
       so tests/contrast.test.js checks them at full strength. */
    --glow-hot: rgba(235, 85, 25, 0.3);        /* campfire glow at the bottom of the screen */
    --forest-lit: rgba(240, 110, 40, 0.35);    /* firelight on the firs */
    --firelight: rgba(255, 110, 30, 0.22);     /* warm light on the lower part of the signs */
    --firelight-rim: rgba(255, 170, 90, 0.45); /* lit lower edge of the signs, below the text */
    --toasted: #e3a85e;                        /* golden crust of a marshmallow */
    --toasted-dark: #b8733a;                   /* the side closest to the fire */

    /* Text and accents on the sky */
    --cream: #f3e6c8;
    --gold: #f6d080;                           /* history heading, focus ring, sparks */
    --ink: #2a2017;                            /* dark text on cream */
    --line-soft: rgba(243, 230, 200, 0.6);     /* outline of the small buttons */
    --halo: var(--night);                      /* dark outline around text that can pass over a marshmallow */

    /* Main button: embers */
    --ember: #a8441f;
    --ember-pressed: #8a3818;
    --ember-glow: rgba(226, 118, 52, 0.35);
    --spark: #e0662c;

    /* Trail sign wood */
    --wood-light: #6e4a2c;
    --wood: #5c3b22;
    --wood-dark: #4c301b;
    --grain-light: rgba(255, 255, 255, 0.05);  /* lightest streak in the wood grain */
    --grain-dark: rgba(0, 0, 0, 0.12);
    --routed: #f1e4c4;                         /* letters routed into the plank */
    --nail: #8d8a84;
    --nail-rim: #3b2a1b;
    --post: #3a2414;
    --post-light: #5a3b22;

    /* Wood texture shared by the question sign and the history signs.
       The specks image (img/noise.svg) is added where it is used: a relative url()
       inside a variable may resolve against the page instead of this file. */
    --wood-texture:
        repeating-linear-gradient(179.4deg, transparent 0 13px, var(--grain-dark) 13px 15px, transparent 15px 41px),
        repeating-linear-gradient(180deg, transparent 0 7px, var(--grain-dark) 7px 8px, transparent 8px 19px, var(--grain-light) 19px 20px, transparent 20px 31px),
        linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 45%, var(--wood-dark) 100%);

    --font-display: "Yanone Kaffeesatz", "Arial Narrow", sans-serif;
    --font-text: "PT Serif", Georgia, "Times New Roman", serif;

    --arrow: 30px;          /* depth of the arrow end of the question sign */
    --arrow-small: 22px;    /* same for the history signs */
}

/* ---------- Page: night sky and stars (the forest and the fire are layers below) ---------- */
body {
    background-color: var(--night);
    background-image:
        url("../img/stars.svg"),
        linear-gradient(180deg, var(--night) 0%, var(--dusk) 75%, var(--forest-floor) 100%);
    background-repeat: repeat, no-repeat;
    background-position: 0 0, center;
    background-size: 220px 220px, 100% 100%;
    background-attachment: fixed;
    color: var(--cream);
    font-family: var(--font-text);
    font-size: 16px;
    min-height: 100vh;
}

/* ---------- Campfire just below the screen ----------
   Layers behind the content, back to front: the glow, the firs, the firelight on the firs,
   the marshmallow sticks and the embers. Only opacity and transform are animated,
   so the browser does not have to repaint the page. */
.fire-glow,
.forest,
.forest-lit,
.roast-sticks,
.embers {
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

/* The app stays in front of the scene */
.container {
    position: relative;
    z-index: 1;
}

/* The glow breathes slowly and its ::before flickers fast; the two opacities multiply */
.fire-glow {
    inset: 0;
    animation: glow-breathe 7s ease-in-out infinite;
}

.fire-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 95% 55% at 50% 100%, var(--glow-hot), transparent 78%);
    animation: fire-flicker 2.3s linear infinite;
}

.forest,
.forest-lit {
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
}

.forest,
.forest-lit::before {
    background: url("../img/firs.svg") repeat-x center bottom / 360px 130px;
}

/* The firs catch the firelight: the same firs painted orange by the #fireTint filter
   in index.html, fading out away from the fire. (A CSS mask with the fir image would
   be simpler, but it does not load when index.html is opened as a local file.) */
.forest-lit {
    animation: glow-breathe 7s ease-in-out infinite;
}

.forest-lit::before {
    content: "";
    position: absolute;
    inset: 0;
    filter: url("#fireTint");
    -webkit-mask-image: radial-gradient(ellipse 75% 220% at 50% 100%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 75% 220% at 50% 100%, #000, transparent 75%);
    animation: fire-flicker 2.3s linear infinite;
}

#fireTint feFlood {
    flood-color: var(--forest-lit);
}

/* Marshmallows over the fire: people sit just below the screen, so it reads as a campfire,
   not a forest fire. utils.js draws the sticks; each stands at its own spot (--x from the
   middle) and tilt, and sways a little around the hand that holds it. */
.roast-sticks {
    inset: 0;
    overflow: hidden;
}

.roast {
    position: absolute;
    bottom: -18px;
    left: calc(50% + var(--x));
    width: calc(32px * var(--length));
    translate: -50% 0;
    rotate: var(--tilt);
    transform-origin: 50% 100%;
    animation: roast-sway var(--sway) ease-in-out var(--delay) infinite;
}

.roast svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.roast .stick,
.roast .stick-lit {
    fill: none;
    stroke-width: 3.6;
    stroke-linecap: round;
}

.roast .stick { stroke: var(--wood-light); }
.roast .stick-thin { stroke-width: 2; }
.roast .stick-lit { stroke: var(--spark); opacity: 0.7; }
.roast .marshmallow { fill: var(--cream); }
.roast .toasted { fill: var(--toasted); }
.roast .toasted-dark { fill: var(--toasted-dark); }

/* Embers: utils.js gives each one its place, size, color, speed and path */
.embers {
    inset: 0;
    overflow: hidden;
}

.ember {
    position: absolute;
    bottom: -4px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 calc(var(--size) + 2px) var(--spark);
    opacity: 0;
    animation: ember-rise var(--time) linear var(--delay) infinite;
}

@keyframes ember-rise {
    0%   { opacity: 0; transform: translate(0, 0); }
    6%   { opacity: 0.9; }
    33%  { transform: translate(calc(var(--drift) * -0.5), calc(var(--rise) * 0.36)); }
    60%  { opacity: 0.75; }
    66%  { transform: translate(calc(var(--drift) * 0.6), calc(var(--rise) * 0.7)); }
    100% { opacity: 0; transform: translate(var(--drift), var(--rise)) scale(0.4); }
}

/* Slow breathing of the light: it only dims below full strength */
@keyframes glow-breathe {
    0%, 100% { opacity: 1; }
    22%      { opacity: 0.72; }
    40%      { opacity: 0.92; }
    61%      { opacity: 0.58; }
    80%      { opacity: 0.85; }
}

/* Quick uneven flicker on top of the breathing */
@keyframes fire-flicker {
    0%, 100% { opacity: 1; }
    9%       { opacity: 0.86; }
    17%      { opacity: 0.97; }
    31%      { opacity: 0.8; }
    44%      { opacity: 0.93; }
    58%      { opacity: 0.78; }
    71%      { opacity: 0.96; }
    86%      { opacity: 0.84; }
}

@keyframes roast-sway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-2.5deg); }
}

/* App title: painted camp lettering */
header h1 {
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 24px var(--glow);
}

/* ---------- Trail signs: the question and the history ---------- */
/* Each sign is a plank with an arrow end added outside it, so the plank and its text
   stay in place whichever way the arrow points; side margins keep room for the arrow.
   The wood is drawn by ::before, reaching past the plank on the arrow side, and cut
   into an arrow with clip-path; ::after lays the firelight over it in the same shape.
   --tip-left / --tip-right say which end has the arrow. */
#questionCard::before,
#historyList .list-group-item::before,
#questionCard::after,
#historyList .list-group-item::after {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--tip-right)) 0 calc(-1 * var(--tip-left));
    z-index: -1;
    clip-path: polygon(var(--tip-left) 0, calc(100% - var(--tip-right)) 0, 100% 50%,
                       calc(100% - var(--tip-right)) 100%, var(--tip-left) 100%, 0 50%);
}

/* Current question: a large sign nailed at the corners */
#questionCard {
    --tip-left: 0px;
    --tip-right: var(--arrow);
    margin-left: var(--arrow);
    margin-right: var(--arrow);
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--routed);
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55));
}

/* Every next question turns the arrow the other way (utils.js sets the class) */
#questionCard.points-left {
    --tip-left: var(--arrow);
    --tip-right: 0px;
}


#questionCard::before,
#resetModal .modal-content {
    background:
        radial-gradient(circle at calc(var(--tip-left) + 16px) 16px, var(--nail) 0 3px, var(--nail-rim) 3.3px 4.2px, transparent 4.6px),
        radial-gradient(circle at calc(var(--tip-left) + 16px) calc(100% - 16px), var(--nail) 0 3px, var(--nail-rim) 3.3px 4.2px, transparent 4.6px),
        radial-gradient(circle at calc(100% - var(--tip-right) - 16px) 16px, var(--nail) 0 3px, var(--nail-rim) 3.3px 4.2px, transparent 4.6px),
        radial-gradient(circle at calc(100% - var(--tip-right) - 16px) calc(100% - 16px), var(--nail) 0 3px, var(--nail-rim) 3.3px 4.2px, transparent 4.6px),
        url("../img/noise.svg"),
        var(--wood-texture);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

/* The text area of the big sign is always --sign-lines lines of question text tall,
   so the sign does not jump when a shorter or longer question comes. A short question
   sits in the middle; utils.js fitQuestionText makes the letters of a long one smaller
   (--fit) until it fits. */
#questionArea {
    --sign-lines: 5;
    display: flex;
    align-items: center;
    min-height: calc(var(--sign-lines) * 1.5em);
}

/* Wider screens fit more words on a line, so fewer lines are needed */
@media (min-width: 768px) {
    #questionArea {
        --sign-lines: 3;
    }
}

/* Question text: routed letters */
#currentQuestion {
    width: 100%;
    color: var(--routed);
    font-family: var(--font-text);
    font-size: calc(var(--fit, 1) * 1em);
    font-weight: 400;
    line-height: 1.5;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* Text on the sky that can scroll over the marshmallows (they hang low on the screen).
   A thin dark outline keeps it readable on a cream marshmallow too; on the night sky
   it is hardly visible. tests/contrast.test.js checks this text against --halo.
   The title and the language buttons stay at the top of the page, far above them. */
#historyHeading,
#resetBtn {
    text-shadow:
        -1.4px -1.4px 0 var(--halo), 0 -2px 0 var(--halo), 1.4px -1.4px 0 var(--halo),
        -2px 0 0 var(--halo), 2px 0 0 var(--halo),
        -1.4px 1.4px 0 var(--halo), 0 2px 0 var(--halo), 1.4px 1.4px 0 var(--halo);
}

/* History heading and the reset dialog title: camp lettering */
#historyHeading,
#resetModalTitle {
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------- Reset dialog: a wooden board nailed at the corners ----------
   Bootstrap draws the modal from its --bs-modal-* variables; the wood comes
   from the #questionCard::before rule above (no arrow, so both tips are 0). */

/* Hidden until the reset button opens it. Bootstrap's CSS does the same; this keeps
   the board out of the page when Bootstrap could not load (no internet): utils.js
   then asks with the browser's confirm() instead. */
#resetModal {
    display: none;
}

#resetModal .modal-content {
    --tip-left: 0px;
    --tip-right: 0px;
    --bs-modal-color: var(--routed);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 0;
    --bs-modal-footer-border-width: 0;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55));
}

/* On the wood the title is routed into the plank like the question text */
#resetModalTitle {
    color: var(--routed);
}

#resetModalText {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* The sky behind the dialog darkens to night */
.modal-backdrop {
    --bs-backdrop-bg: var(--night);
    --bs-backdrop-opacity: 0.75;
}

/* History: the signpost. The post runs down the middle, behind the signs. */
#historyCard {
    background: linear-gradient(90deg,
        transparent calc(50% - 10px), var(--post) calc(50% - 10px),
        var(--post-light) 50%,
        var(--post) calc(50% + 10px), transparent calc(50% + 10px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 1.1rem 0 2.2rem;
}

#historyList {
    gap: 0.75rem;
}

/* Each past question is a smaller sign; arrows alternate left and right
   (utils.js sets points-left with the same rule as the big sign) */
#historyList .list-group-item {
    --tip-left: 0px;
    --tip-right: var(--arrow-small);
    margin-left: var(--arrow-small);
    margin-right: var(--arrow-small);
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--routed);
    font-size: 0.95rem;
    line-height: 1.5;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
    padding: 0.8rem 1.1rem;
}

#historyList .list-group-item.points-left {
    --tip-left: var(--arrow-small);
    --tip-right: 0px;
}

/* Two nails where the sign meets the post: the middle of the plank
   (the wood reaches past it on the arrow side, so its own middle is off by half the arrow) */
#historyList .list-group-item::before {
    --nail-x: calc(50% + (var(--tip-left) - var(--tip-right)) / 2);
    background:
        radial-gradient(circle at var(--nail-x) 7px, var(--nail) 0 2.4px, var(--nail-rim) 2.7px 3.5px, transparent 3.9px),
        radial-gradient(circle at var(--nail-x) calc(100% - 7px), var(--nail) 0 2.4px, var(--nail-rim) 2.7px 3.5px, transparent 3.9px),
        url("../img/noise.svg"),
        var(--wood-texture);
}

/* Firelight from below on every sign.
   The bright rim stays in the bottom 3px, below the text. */
#questionCard::after,
#historyList .list-group-item::after {
    background: linear-gradient(0deg, var(--firelight-rim) 0 3px, var(--firelight) 3px, transparent 70%);
}

/* Only the big sign breathes with the glow: the history can hold hundreds of signs,
   and animating every one would keep the phone busy redrawing them */
#questionCard::after {
    animation: glow-breathe 7s ease-in-out infinite;
}

/* ---------- Buttons ---------- */
/* Main button and the dialog's "Reset": embers. Bootstrap draws buttons from its --bs-btn-* variables. */
#getQuestionBtn,
#resetConfirmBtn {
    --bs-btn-color: var(--cream);
    --bs-btn-bg: var(--ember);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: var(--cream);
    --bs-btn-hover-bg: var(--ember);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--cream);
    --bs-btn-active-bg: var(--ember-pressed);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-border-width: 2px;
    --bs-btn-font-size: 1.45rem;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 4px 0 var(--ink), 0 0 28px var(--ember-glow);
}

#getQuestionBtn:active,
#resetConfirmBtn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--ink);
}

/* The dialog button is smaller than the main one */
#resetConfirmBtn {
    --bs-btn-font-size: 1.1rem;
}

/* Small buttons: language switcher, reset and the dialog's "Cancel" */
.language-btn,
#resetBtn,
#resetCancelBtn {
    --bs-btn-font-size: 1rem;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.language-btn.btn-outline-secondary,
#resetBtn.btn-outline-secondary,
#resetCancelBtn.btn-outline-secondary {
    --bs-btn-color: var(--cream);
    --bs-btn-border-color: var(--line-soft);
    --bs-btn-hover-color: var(--cream);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--line-soft);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--cream);
    --bs-btn-active-border-color: var(--cream);
}

/* Active language (i18n.js swaps btn-outline-secondary for btn-secondary) */
.language-btn.btn-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--cream);
    --bs-btn-border-color: var(--cream);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--cream);
    --bs-btn-hover-border-color: var(--cream);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--cream);
    --bs-btn-active-border-color: var(--cream);
}

/* ---------- Sparks from the main button (utils.js launchSparks) ---------- */
.sparks {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

.spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--spark-color);
    box-shadow: 0 0 6px var(--spark-color);
    animation: spark-rise var(--spark-time) ease-out forwards;
}

@keyframes spark-rise {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to   { transform: translate(var(--spark-dx), var(--spark-dy)) scale(0.2); opacity: 0; }
}

/* ---------- Accessibility ---------- */
/* Enhanced focus indicators for keyboard navigation (WCAG 2.4.7) */
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

/* Reduced motion for users with vestibular disorders (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Higher contrast when the system asks for it: plain sky, no campfire, dark wood, white letters */
@media (prefers-contrast: more) {
    body {
        background-image: none;
    }

    .fire-glow,
    .forest,
    .forest-lit,
    .roast-sticks,
    .embers,
    #questionCard::after,
    #historyList .list-group-item::after {
        display: none;
    }

    #questionCard::before,
    #historyList .list-group-item::before,
    #resetModal .modal-content {
        background: var(--wood-dark);
    }

    #currentQuestion,
    #historyList .list-group-item,
    #historyHeading,
    #resetModalTitle,
    #resetModalText {
        color: #ffffff;
        text-shadow: none;
    }
}

/* Ensure touch targets are large enough on mobile (min 44x44px WCAG 2.5.5) */
@media (max-width: 767px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
}