/* Base styles. Component-specific styles live next to their components (scoped CSS, RandomRest.Web.styles.css). */

:root {
    --color-background: #0f1115;
    --color-surface: #1a1d24;
    --color-text: #e8e9ec;
    --color-text-muted: #9aa0ab;
    --color-accent: #ff6b35;
    --color-link: #7cc4ff;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--color-background);
    color: var(--color-text);
}

a {
    color: var(--color-link);
}

/* Blazor renders the layout inside #app, so #app (not body) is the flex column that pins the footer to the bottom */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header, .site-footer {
    padding: 1rem 1.5rem;
}

.site-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    text-decoration: none;
}

.site-main {
    flex: 1;
    padding: 1.5rem;
    max-width: 64rem;
    width: 100%;
    margin: 0 auto;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.site-footer a {
    color: var(--color-text-muted);
}

.legal-section h2 {
    font-size: 1.1rem;
}

.lead {
    color: var(--color-text-muted);
}

/* Boot progress (from the Blazor template): the percentage is pushed through a CSS custom property by blazor.webassembly.js */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--color-surface);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--color-accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    background: #7a1f1f;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Home: tabs, wheel, controls, result card */
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tab, .scale-option, .spin-button {
    font: inherit; color: var(--color-text); background: var(--color-surface);
    border: 1px solid transparent; border-radius: 0.5rem; padding: 0.5rem 1rem; cursor: pointer;
}
.tab-active, .scale-option-active { border-color: var(--color-accent); color: var(--color-accent); }
/* Solo / together: route tabs under the page question, a notch bigger than the option chips */
.play-mode-tabs { border-bottom: 1px solid var(--color-surface); padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
.play-mode-tabs .tab { text-decoration: none; font-weight: 600; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.wheel { position: relative; width: min(40rem, 90vw); margin: 1.5rem auto; }
.wheel-disc { width: 100%; height: auto; display: block; }
.wheel-pointer {
    position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); z-index: 1;
    border-left: 0.9rem solid transparent; border-right: 0.9rem solid transparent; border-top: 1.8rem solid var(--color-text);
}
.wheel-sector-0 { fill: #ff6b35; }
.wheel-sector-1 { fill: #3a86ff; }
.wheel-sector-2 { fill: #8338ec; }
.wheel-sector { stroke: var(--color-background); stroke-width: 1; }
.wheel-hub { fill: var(--color-background); stroke: var(--color-text); stroke-width: 2; }

.wheel-label { fill: #fff; font-size: 5px; font-weight: 700; pointer-events: none; }
.wheel-sector-fading { opacity: 0.1; transition: opacity 0.35s; }
@media (prefers-reduced-motion: reduce) {
    .wheel-sector-fading { transition: none; }
}

/* Candidate list under the elimination wheel */
.candidate-items { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.candidate-items-eliminated { list-style: decimal inside; }
.candidate-item { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; background: var(--color-surface); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.candidate-item-eliminated { opacity: 0.6; text-decoration: line-through; }
.candidate-item-eliminated .result-link { text-decoration: none; }
.candidate-label { font-weight: 700; }
.candidate-chance { margin-left: auto; color: var(--color-text-muted); }
.candidate-item .result-link { margin-top: 0; }

.controls { display: flex; flex-direction: column; gap: 1rem; }
.scale-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.scale-switch legend { color: var(--color-text-muted); margin-bottom: 0.5rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; color: var(--color-text-muted); }
.field input.stay-input { width: 6rem; }
.field select, .field input[type="date"], .field input[type="number"], .field input[type="search"] {
    font: inherit; color: var(--color-text); background: var(--color-surface);
    border: 1px solid var(--color-text-muted); border-radius: 0.5rem; padding: 0.5rem;
}
.spin-button { background: var(--color-accent); color: #fff; font-weight: 700; font-size: 1.1rem; padding: 0.75rem; }

.message-error { color: #ff8a80; }
.muted { color: var(--color-text-muted); }
.result-link { display: inline-block; margin-top: 0.5rem; font-weight: 700; }

/* Result modal */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6); padding: 1rem;
}
.modal {
    background: var(--color-surface); border-radius: 0.75rem; padding: 1.5rem; max-width: 32rem; width: 100%;
    max-height: 90vh; overflow-y: auto; outline: none;
}
.modal h2 { margin-top: 0; }

/* Winner card: a burst of colour behind the content. Pure CSS, no inline styles (CSP style-src 'self'). */
.modal-winner {
    position: relative; isolation: isolate; overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 214, 10, 0.55), transparent 35%),
        radial-gradient(circle at 85% 15%, rgba(255, 64, 129, 0.55), transparent 35%),
        radial-gradient(circle at 80% 85%, rgba(0, 229, 255, 0.45), transparent 40%),
        radial-gradient(circle at 20% 90%, rgba(124, 77, 255, 0.5), transparent 40%),
        linear-gradient(135deg, #2b1055 0%, #7b1fa2 45%, #ff6b35 100%);
    border: 2px solid #ffd60a;
    box-shadow: 0 0 2.5rem rgba(255, 214, 10, 0.45);
    animation: winner-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.modal-winner h2 { font-size: 1.6rem; text-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.45); }
.modal-winner .muted, .modal-winner .disclosure { color: rgba(255, 255, 255, 0.8); }
.modal-winner .result-link { color: #fff3b0; }
.fireworks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.firework {
    position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%;
    --spark: #ffd60a;
    box-shadow:
        0 -3.5rem 0 var(--spark), 2.5rem -2.5rem 0 var(--spark), 3.5rem 0 0 var(--spark), 2.5rem 2.5rem 0 var(--spark),
        0 3.5rem 0 var(--spark), -2.5rem 2.5rem 0 var(--spark), -3.5rem 0 0 var(--spark), -2.5rem -2.5rem 0 var(--spark);
    animation: firework-burst 1.6s ease-out infinite;
    opacity: 0;
}
.firework:nth-child(1) { top: 15%; left: 12%; --spark: #ffd60a; animation-delay: 0s; }
.firework:nth-child(2) { top: 20%; left: 82%; --spark: #ff4081; animation-delay: 0.3s; }
.firework:nth-child(3) { top: 70%; left: 88%; --spark: #00e5ff; animation-delay: 0.6s; }
.firework:nth-child(4) { top: 80%; left: 18%; --spark: #b388ff; animation-delay: 0.9s; }
.firework:nth-child(5) { top: 45%; left: 50%; --spark: #69f0ae; animation-delay: 1.2s; }
.firework:nth-child(6) { top: 10%; left: 50%; --spark: #ff9e40; animation-delay: 0.45s; }
.firework:nth-child(7) { top: 55%; left: 8%; --spark: #ff5252; animation-delay: 0.75s; }
.firework:nth-child(8) { top: 40%; left: 92%; --spark: #ffe57f; animation-delay: 1.05s; }
@keyframes firework-burst {
    0% { transform: scale(0.1); opacity: 1; }
    70% { opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}
@keyframes winner-pop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-winner, .firework { animation: none; }
    .firework { opacity: 0.6; }
}
.modal-close {
    font: inherit; color: var(--color-text); background: transparent; border: 1px solid var(--color-text-muted);
    border-radius: 0.5rem; padding: 0.5rem 1rem; margin-top: 1rem; cursor: pointer; display: block;
}
.disclosure { font-size: 0.8rem; color: var(--color-text-muted); }

/* Header navigation */
.site-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.site-nav a { font-weight: 600; }

/* Rooms: forms, invitation, participants, voting */
.join-form { display: flex; flex-direction: column; gap: 1rem; }
.nickname-input, .invite-link, .origin-search {
    font: inherit; color: var(--color-text); background: var(--color-surface);
    border: 1px solid var(--color-text-muted); border-radius: 0.5rem; padding: 0.5rem; width: 100%;
}
.link-button {
    font: inherit; color: var(--color-link); background: transparent; border: 0; padding: 0.25rem 0;
    cursor: pointer; text-decoration: underline;
}
.message { margin: 1rem 0; }
.invite-row { display: flex; gap: 0.5rem; align-items: center; }
.invite-row .modal-close { margin-top: 0; }
.origin-matches { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.origin-option {
    font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid transparent;
    border-radius: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; width: 100%; text-align: left;
}
.origin-option:hover { border-color: var(--color-accent); }

.participants { list-style: none; padding: 0; margin: 0 0 1.5rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.participant { display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.participant-offline .participant-name { color: var(--color-text-muted); }
.badge { font-size: 0.75rem; padding: 0.1rem 0.45rem; border-radius: 1rem; border: 1px solid var(--color-text-muted); color: var(--color-text-muted); }
.badge-voted { border-color: var(--color-accent); color: var(--color-accent); }

.vote-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.vote-option {
    font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid transparent;
    border-radius: 0.5rem; padding: 0.6rem 0.9rem; cursor: pointer; width: 100%;
    display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; text-align: left;
}
.vote-option progress { grid-column: 1 / -1; width: 100%; height: 0.5rem; accent-color: var(--color-accent); }
.vote-option-selected { border-color: var(--color-accent); }
.vote-tally { color: var(--color-text-muted); }

/* Home: candidate step and trip fields */
.trip-dates { display: flex; flex-wrap: wrap; gap: 0.75rem; border: 0; padding: 0; margin: 0; }
.trip-dates legend { color: var(--color-text-muted); margin-bottom: 0.5rem; }
/* The price in the user's currency reads first; the converted source price stays muted */
/* Candidate rows as chance-to-win bars: the SVG fill sits behind the content of the row */
.candidate-chance-bar { position: relative; overflow: hidden; isolation: isolate; }
.win-chance-fill { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.win-chance-fill rect { fill: rgba(255, 107, 53, 0.22); transition: width 0.4s ease; }
.candidate-win-chance { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.win-chance-caption { text-align: right; margin: 0 0.75rem 0.25rem; font-size: 0.85rem; }
/* Host-only destructive room actions: quiet outline buttons in warning red, top right of the room page */
.room-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; width: 100%; }
.room-header h1 { margin: 0; flex: 1 1 auto; min-width: 0; }
.host-danger-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 0.5rem; }
/* Phones: the heading and the buttons stack instead of squeezing each other */
@media (max-width: 36rem) {
    .room-header { flex-wrap: wrap; }
    .host-danger-actions { flex-wrap: wrap; }
}
.danger-button {
    font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.35rem 0.75rem; border-radius: 0.5rem;
    color: #ff8a80; background: transparent; border: 1px solid #ff5252;
}
.danger-button:hover:not(:disabled) { background: rgba(255, 82, 82, 0.15); }
.danger-button:disabled { opacity: 0.5; cursor: default; }
.voting-host-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.voting-host-actions .step-next { flex: 1 1 12rem; }
.price-primary { color: var(--color-text); font-weight: 600; }
.trip-error { flex-basis: 100%; margin: 0; color: #ff8a8a; font-size: 0.9rem; }
/* FocusOnNavigate moves focus to the h1 for screen readers; the outline is noise for mouse users */
h1:focus { outline: none; }
.candidate-pick-list { list-style: none; padding: 0; margin: 1rem 0; }
.candidate-item-voted { border-color: var(--color-accent); }
.candidates-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.vote-button, .back-button {
    padding: 0.4rem 0.9rem; border: 1px solid var(--color-text-muted); border-radius: 0.5rem;
    background: transparent; color: inherit; cursor: pointer;
}
.vote-button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.message-warning { color: var(--color-text-muted); }

/* Room: spin length picker, candidate step links */
.duration-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }
.duration-slider { flex: 1 1 8rem; }
.duration-preset[aria-pressed="true"] { border-color: var(--color-accent); }
.vote-options li { display: flex; flex-direction: column; gap: 0.25rem; }

.site-nav { display: flex; align-items: center; gap: 1rem; }
.language-switcher select { font: inherit; padding: 0.15rem 0.35rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Room voice chat (ADR-030): seats on a ring. js/interop.js copies each seat's data-angle into --seat-angle (CSSOM, no style attributes). */
.voice { margin: 0 0 1.5rem 0; }
.voice-ring {
    --ring-size: min(20rem, 86vw);
    --ring-radius: calc(var(--ring-size) / 2 - 2.2rem);
    position: relative; width: var(--ring-size); height: var(--ring-size); margin: 1rem auto;
    border-radius: 50%; border: 1px dashed var(--color-surface);
}
.voice-seat {
    --seat-angle: 0deg;
    position: absolute; left: 50%; top: 50%; width: 4.5rem; margin: -1.9rem 0 0 -2.25rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    transform: rotate(var(--seat-angle)) translateY(calc(-1 * var(--ring-radius))) rotate(calc(-1 * var(--seat-angle)));
}
.voice-avatar {
    width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--color-surface); border: 2px solid var(--color-text-muted); font-weight: 700;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.voice-name { font-size: 0.75rem; max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-seat-self .voice-avatar { border-color: var(--color-link); }
.voice-seat-self .voice-name { font-weight: 700; }
.voice-seat-absent .voice-avatar { opacity: 0.45; border-style: dashed; }
.voice-seat-offline .voice-name { color: var(--color-text-muted); }
/* The speaker's circle: a static outline, not an animation, so it stays under prefers-reduced-motion. */
.voice-seat-speaking .voice-avatar { border-color: var(--color-accent); box-shadow: 0 0 0 4px rgb(255 107 53 / 0.45); }
.voice-mic-off {
    position: absolute; top: 0; right: 0.55rem; width: 1.15rem; height: 1.15rem; padding: 0.1rem;
    fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linecap: round;
    background: var(--color-background); border-radius: 50%;
}
.voice-center {
    position: absolute; inset: 27%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.4rem; text-align: center;
}
.voice-button {
    font: inherit; font-size: 0.9rem; color: var(--color-text); background: transparent; border: 1px solid var(--color-text-muted);
    border-radius: 0.5rem; padding: 0.45rem 0.8rem; cursor: pointer;
}
.voice-button-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 700; }
.voice-button:disabled { opacity: 0.6; cursor: default; }
.voice-button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
/* The muted state is the primary call to action (unmute), so it keeps white text on the accent background */
.voice-button-primary[aria-pressed="true"] { color: #fff; }
.voice-button-link {
    font: inherit; font-size: 0.85rem; color: var(--color-link); background: transparent; border: 0; padding: 0.2rem 0;
    cursor: pointer; text-decoration: underline;
}
.voice-privacy, .voice-hint-stun-only { font-size: 0.85rem; text-align: center; }
@media (prefers-reduced-motion: reduce) {
    .voice-avatar { transition: none; }
}

/* Candidate rows read as a table on wider screens: name | price and stops | vote or votes | link | chance.
   Each cell has a fixed column, so rows of one list line up even when a cell is missing; phones keep the wrap. */
@media (min-width: 40rem) {
    .candidate-item {
        display: grid;
        grid-template-columns: minmax(8rem, 1.2fr) minmax(14rem, 2.4fr) 6.5rem 7rem 10rem;
        align-items: center;
        column-gap: 1rem;
    }
    /* One row per item whatever the DOM order of the cells (the chance comes before the link in the markup) */
    .candidate-item > * { grid-row: 1; }
    .candidate-item > .candidate-label { grid-column: 1; }
    .candidate-item > .candidate-details { grid-column: 2; }
    .candidate-item > .vote-button, .candidate-item > .candidate-votes { grid-column: 3; justify-self: start; }
    .candidate-item > .result-link { grid-column: 4; }
    .candidate-item > .candidate-win-chance, .candidate-item > .candidate-chance { grid-column: 5; justify-self: end; margin-left: 0; white-space: nowrap; }

    /* Grid rows lose the list marker, so the drop-out order is numbered with a counter in the gutter */
    .candidate-items-eliminated { counter-reset: dropped; }
    .candidate-items-eliminated .candidate-item { position: relative; padding-left: 2.25rem; }
    .candidate-items-eliminated .candidate-item::before {
        counter-increment: dropped; content: counter(dropped) ".";
        position: absolute; left: 0.75rem; color: var(--color-text-muted);
    }
}