/* ── Daily Wheel · "Le Rituel" renovation layer ──────────────────
   Loaded AFTER obsidian-vault.css (the dw-* base block) — this file
   overrides the geometry/perf-sensitive pieces and adds the new
   surfaces (streak pips, flapper, wedge glow, fineprint fairness).
   Spec: docs/game-renovation-v2/specs/daily-wheel.md

   2026-07-28 identity pass: the modal now speaks the lodge language
   of the roulette screen — walnut-and-brass wheel bezel (palette
   lifted from roulette-physics.js buildLayers: #a5804a/#6b4e28 rim,
   #17100a lip, #c9b061 frets, #efe3c2 cream), warm dark card chrome
   instead of the old navy glass, italic Bodoni display, and the
   lodge-primary brushed-gold CTA recipe (replicated from lodge.css
   .lodge-action--primary, which is scoped under .lodge-wheel and
   can't be consumed directly here).
   Injected by daily-wheel.js on first modal open; index.html may
   promote it to an eager <link> instead. */

/* Perf: flat scrim replaces backdrop-filter blur (Mali/Adreno). */
.dw-modal .dw-modal-backdrop {
    background: rgba(10, 8, 6, 0.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── Card chrome — warm lodge black, gold hairline ─────────────── */
/* px budget (spec §Layout): standard rows total 556px. */
.dw-modal .dw-modal-card {
    padding: 16px 22px;
    max-height: min(90vh, 720px);
    background:
        radial-gradient(130% 55% at 50% -12%,
            rgba(242, 202, 80, 0.13), transparent 62%),
        linear-gradient(180deg, #1b140c 0%, #100b07 55%, #0a0705 100%);
    border: 1px solid rgba(222, 188, 110, 0.40);
    border-radius: 4px;
    box-shadow:
        0 30px 70px -20px rgba(0, 0, 0, 0.75),
        0 0 70px -28px rgba(242, 202, 80, 0.38),
        inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
/* Recessed inner hairline frame (the carved double-border of the
   roulette screen panels). Scrolls with content — acceptable, the
   556px budget fits the viewport in practice. */
.dw-modal .dw-modal-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(222, 188, 110, 0.14);
    border-radius: 2px;
    pointer-events: none;
}
.dw-modal .dw-modal-head { margin-bottom: 8px; }
.dw-modal .dw-modal-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: #e3c878;
}
/* ✦ flanks — the rw2-banner ornament ("LES JEUX SONT FAITS"). */
.dw-modal .dw-modal-eyebrow::before,
.dw-modal .dw-modal-eyebrow::after {
    content: '✦';
    margin: 0 8px;
    font-size: 8px;
    vertical-align: 1px;
    color: rgba(227, 200, 120, 0.65);
}
.dw-modal .dw-modal-title {
    font-style: italic;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.03em;
    color: #f5ecd8;
    text-shadow: 0 2px 16px rgba(242, 202, 80, 0.35);
}
.dw-modal .dw-modal-close {
    border: 1px solid rgba(222, 188, 110, 0.35);
    background: rgba(16, 11, 7, 0.7);
    color: #d8c186;
}
.dw-modal .dw-modal-close:hover {
    background: rgba(242, 202, 80, 0.10);
    color: #f2ca50;
}
.dw-modal .dw-stage {
    width: 280px;
    max-width: 80vw;
    margin: 8px auto;
}
.dw-modal .dw-status {
    min-height: 44px;
    margin-bottom: 8px;
}

/* ── Streak pips (7 SVG lozenges, day-7 gold) ──────────────────── */
.dw-pips {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 18px;
    margin: 0 0 8px;
}
.dw-pip { display: inline-flex; width: 12px; height: 12px; }
.dw-pip svg path {
    fill: rgba(255, 255, 255, 0.10);
    stroke: rgba(242, 202, 80, 0.35);
    stroke-width: 0.8;
}
.dw-pip.is-filled svg path {
    fill: #c9a24a;
    stroke: rgba(242, 202, 80, 0.9);
}
.dw-pip--seven svg path { stroke: rgba(242, 202, 80, 0.7); }
.dw-pip--seven.is-filled svg path {
    fill: #f2ca50;
    filter: drop-shadow(0 0 4px rgba(242, 202, 80, 0.8));
}
.dw-pip.is-pop { animation: dw-pip-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1.4); }
@keyframes dw-pip-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.dw-pip.is-gold-flash { animation: dw-pip-gold 0.6s ease-out; }
@keyframes dw-pip-gold {
    0%   { filter: drop-shadow(0 0 12px rgba(242, 202, 80, 1)); transform: scale(1.4); }
    100% { filter: none; transform: scale(1); }
}

/* Home-CTA mini pips */
.dw-cta-streak {
    display: inline-flex;
    gap: 5px;
    margin-top: 4px;
}
.dw-cta-streak .dw-pip { width: 8px; height: 8px; }
.dw-cta-streak .dw-pip svg { width: 8px; height: 8px; }
.dw-cta-icon-glyph .dw-emblem { display: block; }

/* ── Walnut bezel + wheel + lighting glass ─────────────────────── */
/* Stage stacking is DOM order: .dw-rim (bezel, bottom) → .dw-wheel
   (rotating disc) → .dw-glass (static key light) → .dw-flapper. */
.dw-modal .dw-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* upper-left key light washing over the wood */
        radial-gradient(circle at 32% 26%,
            rgba(255, 235, 190, 0.18), rgba(255, 235, 190, 0) 60%),
        /* walnut ring with brass fillets — roulette bowl palette */
        radial-gradient(circle closest-side,
            #17100a 0 86%,
            #c9b061 86.35% 86.9%,
            #6b4e28 88%,
            #a5804a 91.5%,
            #8a6339 94%,
            #4a3820 96.8%,
            #c9b061 97.9% 98.5%,
            #1a1108 99.3% 100%);
    box-shadow:
        0 16px 44px -12px rgba(0, 0, 0, 0.8),
        0 0 54px -14px rgba(242, 202, 80, 0.4);
}
.dw-modal .dw-wheel {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background: #120c07;
    overflow: hidden;
    border: none;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* Base gold-ball hub (obsidian-vault ::before) retired — the brass
   hub is now an SVG child of the disc so it rotates with the wheel. */
.dw-modal .dw-wheel::before { content: none; }
/* Static lighting glass above the rotating disc: upper-left key
   light, lower-right fall-off, rim occlusion. pointer-events:none
   keeps the stage's tap-to-skip alive. */
.dw-modal .dw-glass {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background:
        radial-gradient(circle at 30% 26%,
            rgba(255, 240, 205, 0.16),
            rgba(255, 240, 205, 0.05) 34%,
            rgba(255, 240, 205, 0) 56%),
        radial-gradient(circle at 72% 82%,
            rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0) 55%),
        radial-gradient(circle closest-side,
            rgba(0, 0, 0, 0) 0 87%, rgba(0, 0, 0, 0.35) 100%);
}
/* Segment dividers — brass frets (#c9b061, roulette fret metal),
   0.8deg wide, faded out over the hub and feathered at the rim. */
.dw-modal .dw-wheel-disc::after {
    background: conic-gradient(
        rgba(201, 176, 97, 0.6) 0deg 0.4deg,
        transparent 0.4deg 44.6deg, rgba(201, 176, 97, 0.6) 44.6deg 45.4deg,
        transparent 45.4deg 89.6deg, rgba(201, 176, 97, 0.6) 89.6deg 90.4deg,
        transparent 90.4deg 134.6deg, rgba(201, 176, 97, 0.6) 134.6deg 135.4deg,
        transparent 135.4deg 179.6deg, rgba(201, 176, 97, 0.6) 179.6deg 180.4deg,
        transparent 180.4deg 224.6deg, rgba(201, 176, 97, 0.6) 224.6deg 225.4deg,
        transparent 225.4deg 269.6deg, rgba(201, 176, 97, 0.6) 269.6deg 270.4deg,
        transparent 270.4deg 314.6deg, rgba(201, 176, 97, 0.6) 314.6deg 315.4deg,
        transparent 315.4deg 359.6deg, rgba(201, 176, 97, 0.6) 359.6deg 360deg);
    mask-image: radial-gradient(circle,
        transparent 0 32%, #000 36% 96%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle,
        transparent 0 32%, #000 36% 96%, transparent 100%);
}
/* Brass hub SVG — child of the disc, rotates with the wedges. */
.dw-modal .dw-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    height: 34%;
    margin: -17% 0 0 -17%;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

/* ── Labels — real radial boxes (kills the 1px-anchor bug) ─────── */
/* 72×16 box centred on the disc, rotated to the wedge centre and
   pushed out to r = 0.72·(wheel radius) (px, --dw-r set by JS).
   Static children of the disc — only the disc animates. No
   will-change layers. Cream #efe3c2 = the roulette pocket numerals. */
.dw-wheel-disc .dw-label {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 16px;
    margin: -8px 0 0 -36px;
    transform: rotate(var(--dw-a, 0deg)) translateY(calc(-1 * var(--dw-r, 95px)));
    transform-origin: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #efe3c2;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 4px rgba(0, 0, 0, 0.7),
        0 0 1px rgba(0, 0, 0, 1);
    pointer-events: none;
    will-change: auto;
    z-index: 2;
}

/* ── Flapper (pivoted SVG — replaces the text ▼) ───────────────── */
/* Pivot pinned on the walnut bezel; brass-gradient arm with a
   two-facet bevel (fills live in the SVG defs in daily-wheel.js). */
.dw-flapper {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 30px;
    height: 42px;
    margin-left: -15px;
    z-index: 5;
    overflow: visible;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 6px rgba(242, 202, 80, 0.35));
}
/* the arm's rotate() is driven per-frame from JS */

/* ── Winning-wedge highlight ───────────────────────────────────── */
.dw-wedge-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
/* 2 pulses (120ms in / 180ms out) then sustained glow — ≤3 flashes/s */
.dw-wedge-glow.is-lit {
    animation: dw-wedge-pulse 0.6s ease-out forwards;
}
@keyframes dw-wedge-pulse {
    0%   { opacity: 0; }
    20%  { opacity: 1; }    /* 120ms in  */
    50%  { opacity: 0.35; } /* 180ms out */
    70%  { opacity: 1; }    /* 120ms in  */
    100% { opacity: 0.55; } /* sustain ≈0.25 effective gold */
}

/* ── Status rows ───────────────────────────────────────────────── */
.dw-modal .dw-status-ready,
.dw-modal .dw-status-cool {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e8d9ae;
}

/* ── CTA — the lodge-primary brushed-gold recipe ───────────────── */
.dw-modal .dw-spin-btn {
    font-family: var(--font-display, 'Bodoni Moda', serif);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    color: oklch(0.15 0.02 75);
    background:
        linear-gradient(180deg,
            oklch(0.96 0.12 90) 0%,
            oklch(0.86 0.14 85) 15%,
            oklch(0.72 0.14 80) 55%,
            oklch(0.55 0.12 75) 100%);
    border: 1px solid oklch(0.48 0.12 75);
    box-shadow:
        inset 0 1px 0 oklch(0.98 0.10 90 / 0.75),
        inset 0 -2px 0 oklch(0 0 0 / 0.22),
        inset 0 0 0 1px oklch(0.90 0.13 88 / 0.35),
        0 2px 0 oklch(0.32 0.08 68),
        0 5px 14px oklch(0.55 0.12 75 / 0.40),
        0 2px 4px oklch(0 0 0 / 0.35);
    text-shadow:
        0 1px 0 oklch(0.98 0.10 90 / 0.55),
        0 0 4px oklch(0.96 0.10 88 / 0.4);
}
.dw-modal .dw-spin-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 oklch(0.98 0.10 90 / 0.75),
        inset 0 -2px 0 oklch(0 0 0 / 0.22),
        inset 0 0 0 1px oklch(0.90 0.13 88 / 0.35),
        0 2px 0 oklch(0.32 0.08 68),
        0 8px 18px oklch(0.55 0.12 75 / 0.5),
        0 2px 4px oklch(0 0 0 / 0.35);
}
.dw-modal .dw-spin-btn:active:not(:disabled) {
    transform: translateY(1px) scale(1);
    box-shadow:
        inset 0 1px 0 oklch(0.98 0.10 90 / 0.4),
        inset 0 -1px 0 oklch(0 0 0 / 0.2),
        inset 0 0 0 1px oklch(0.90 0.13 88 / 0.3),
        0 1px 0 oklch(0.32 0.08 68),
        0 2px 6px oklch(0.55 0.12 75 / 0.3);
}
/* Sliding sheen (lodge-action--primary::before, 4.5s loop) */
.dw-modal .dw-spin-btn:not(:disabled):not(.dw-spin-btn--done)::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -30%;
    width: 30%;
    background: linear-gradient(90deg,
        transparent 0%, oklch(0.98 0.08 88 / 0.45) 50%, transparent 100%);
    transform: skewX(-22deg);
    animation: dw-sheen 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dw-sheen {
    0%, 100% { left: -30%; opacity: 0; }
    45%      { opacity: 0; }
    55%      { opacity: 1; }
    80%      { left: 110%; opacity: 0; }
}
/* Carved/recessed states — the lodge-action--ghost feel. */
.dw-modal .dw-spin-btn--disabled,
.dw-modal .dw-spin-btn:disabled {
    background:
        linear-gradient(180deg,
            oklch(0.13 0.012 80) 0%,
            oklch(0.08 0.008 75) 100%);
    color: rgba(227, 200, 120, 0.55);
    border: 1px solid rgba(222, 188, 110, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
/* …but a busy (mid-spin) button stays gold. */
.dw-modal .dw-spin-btn.is-busy {
    cursor: wait;
    color: oklch(0.15 0.02 75);
    background:
        linear-gradient(180deg,
            oklch(0.96 0.12 90) 0%,
            oklch(0.86 0.14 85) 15%,
            oklch(0.72 0.14 80) 55%,
            oklch(0.55 0.12 75) 100%);
    border: 1px solid oklch(0.48 0.12 75);
    box-shadow:
        inset 0 1px 0 oklch(0.98 0.10 90 / 0.75),
        inset 0 -2px 0 oklch(0 0 0 / 0.22),
        inset 0 0 0 1px oklch(0.90 0.13 88 / 0.35),
        0 2px 0 oklch(0.32 0.08 68),
        0 5px 14px oklch(0.55 0.12 75 / 0.40);
    text-shadow:
        0 1px 0 oklch(0.98 0.10 90 / 0.55),
        0 0 4px oklch(0.96 0.10 88 / 0.4);
}
.dw-modal .dw-spin-btn--done {
    background:
        linear-gradient(180deg,
            oklch(0.13 0.012 80) 0%,
            oklch(0.08 0.008 75) 100%);
    color: oklch(0.78 0.14 85);
    border: 1px solid rgba(222, 188, 110, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
/* Wheel-emblem icon inside the CTA (material glyphs retired). */
.dw-spin-emblem {
    display: inline-flex;
    width: 18px;
    height: 18px;
}
.dw-spin-emblem svg {
    display: block;
    filter: drop-shadow(0 1px 0 oklch(0.98 0.10 90 / 0.4));
}
.dw-spin-emblem.is-turning { animation: dw-emblem-turn 1.2s linear infinite; }
@keyframes dw-emblem-turn {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Result block ──────────────────────────────────────────────── */
.dw-result-prize.is-pending,
.dw-result-xp.is-pending,
.dw-result-stamp.is-pending {
    opacity: 0;
}
.dw-result-prize,
.dw-result-xp,
.dw-result-stamp {
    transition: opacity 0.15s ease-out;
}
.dw-modal .dw-result-headline {
    font-size: 15px;
    letter-spacing: 0.24em;
    color: #e3c878;
}
.dw-modal .dw-result-headline::before,
.dw-modal .dw-result-headline::after {
    content: '✦';
    margin: 0 10px;
    font-size: 9px;
    font-style: normal;
    vertical-align: 2px;
    color: rgba(227, 200, 120, 0.65);
}
.dw-modal .dw-result-prize {
    color: #fdf6e3;
    text-shadow:
        0 0 24px rgba(242, 202, 80, 0.5),
        0 2px 2px rgba(0, 0, 0, 0.6);
}
.dw-result-stamp {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 18px 0;
    border-top: 1px solid rgba(222, 188, 110, 0.25);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #f2ca50;
}
.dw-stamp-sub {
    display: block;
    margin-top: 2px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ov-on-surface-muted, #a39a84);
    font-style: italic;
}

/* ── Skip hint ─────────────────────────────────────────────────── */
.dw-skip-hint {
    margin-top: 6px;
    font-size: 10px;
    font-style: italic;
    letter-spacing: 0.08em;
    color: var(--ov-on-surface-muted, #a39a84);
    animation: dw-hint-in 0.5s ease-out;
}
@keyframes dw-hint-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Fineprint fairness row ────────────────────────────────────── */
.dw-fineprint {
    min-height: 16px;
    margin: 8px 0 0;
}
.dw-fineprint .dw-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.02em;
    color: var(--ov-on-surface-variant, #d0c5af);
}
.dw-seed-input {
    width: 92px;
    margin-left: 4px;
    padding: 1px 5px;
    border: 1px solid rgba(242, 202, 80, 0.35);
    border-radius: 3px;
    background: rgba(16, 11, 7, 0.7);
    color: #d0c5af;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}
.dw-seed-input:focus {
    outline: none;
    border-color: rgba(242, 202, 80, 0.8);
}

/* ── Compact branch (spec table: 476px total) ──────────────────── */
@media (max-height: 620px) {
    .dw-modal .dw-modal-card { padding: 12px 20px; }
    .dw-modal .dw-modal-head { margin-bottom: 6px; }
    .dw-modal .dw-modal-title { font-size: 22px; }
    .dw-modal .dw-stage { width: 240px; margin: 6px auto; }
    .dw-modal .dw-status { min-height: 40px; margin-bottom: 6px; }
    .dw-pips { margin-bottom: 6px; }
    .dw-modal .dw-spin-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .dw-fineprint { margin-top: 6px; }
}

/* Reduced motion: no pip pops, no wedge pulse strobing, no sheen. */
@media (prefers-reduced-motion: reduce) {
    .dw-pip.is-pop,
    .dw-pip.is-gold-flash { animation: none; }
    .dw-wedge-glow.is-lit { animation: none; opacity: 0.5; }
    .dw-skip-hint { animation: none; }
    .dw-modal .dw-spin-btn:not(:disabled):not(.dw-spin-btn--done)::before { animation: none; content: none; }
    .dw-spin-emblem.is-turning { animation: none; }
}