:root {
    --il-ink: #3b1d14;
    --il-red: #b3322a;
    --il-red-d: #7d1a14;
    --il-green: #2f6b45;
    --il-green-l: #5c9a63;
    --il-gold: #e2b54a;
    --il-gold-l: #f4d98a;
    --il-cream: #fff4e0;
    --il-snow: #fff;
    --il-sky: #22304f;
    --il-wood: #a8683a;
}
.il { display: block; overflow: visible; }
.il .o { fill: none; stroke: var(--il-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.il .f-red { fill: var(--il-red); }
.il .f-red-d { fill: var(--il-red-d); }
.il .f-green { fill: var(--il-green); }
.il .f-green-l { fill: var(--il-green-l); }
.il .f-gold { fill: var(--il-gold); }
.il .f-gold-l { fill: var(--il-gold-l); }
.il .f-cream { fill: var(--il-cream); }
.il .f-snow { fill: var(--il-snow); }
.il .f-sky { fill: var(--il-sky); }
.il .f-wood { fill: var(--il-wood); }
.il .f-ink { fill: var(--il-ink); }

.logo-mark { width: 32px; height: 32px; flex: none; }

.wave { display: block; width: 100%; height: 44px; fill: currentColor; }
@media (min-width: 768px) { .wave { height: 60px; } }

.deco { position: absolute; pointer-events: none; opacity: .5; }
.deco-float { animation: decoFloat 3.5s ease-in-out infinite; }
.deco-float.slow { animation-duration: 5s; animation-direction: alternate-reverse; }
@keyframes decoFloat {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-20px) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) { .deco-float { animation: none; } }

.hero-snow {
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.55), transparent),
        radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.4), transparent),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.5), transparent);
    background-size: 600px 600px, 500px 500px, 400px 400px, 320px 320px, 250px 250px;
    animation: heroSnow 22s linear infinite;
    opacity: .5;
}
@keyframes heroSnow {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 0 600px, 0 500px, 0 400px, 0 320px, 0 250px; }
}
@media (prefers-reduced-motion: reduce) { .hero-snow { animation: none; } }

.btn-gold {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: linear-gradient(90deg, #D4A843, #E8C969); color: #1C1917;
    font-weight: 700; border-radius: .75rem; transition: transform .15s, box-shadow .15s;
    box-shadow: 0 14px 28px -12px rgba(212, 168, 67, .6);
}
.btn-gold:hover { transform: translateY(-1px) scale(1.02); }
.btn-red {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: linear-gradient(135deg, #a52525, #6b1414); color: #fff; font-weight: 700;
    border-radius: .75rem; transition: transform .15s, box-shadow .15s;
    box-shadow: 0 10px 22px -10px rgba(107, 20, 20, .8);
}
.btn-red:hover { transform: translateY(-1px); }
.btn-red:disabled, .btn-gold:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- wizard ---------- */
.chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 999px;
    border: 1.6px solid #e7e0d6; background: #fff; font-size: .92rem; font-weight: 500; color: #44403c;
    cursor: pointer; transition: all .15s; user-select: none;
}
.chip:hover { border-color: #d6c9b8; }
.chip.on { border-color: #8B1A1A; background: #fdf1ef; color: #6B1414; }
.chip.on::before { content: '✓'; font-weight: 700; }
.field {
    width: 100%; border: 1.6px solid #e7e0d6; border-radius: .8rem; padding: .8rem 1rem; font-size: 1rem;
    background: #fff; transition: border-color .15s, box-shadow .15s; color: #1c1917;
}
.field:focus { outline: none; border-color: #8B1A1A; box-shadow: 0 0 0 4px rgba(139, 26, 26, .1); }
.field.err { border-color: #dc2626; }
.opt-card {
    border: 1.6px solid #e7e0d6; border-radius: .9rem; padding: .85rem 1rem; background: #fff; cursor: pointer;
    text-align: center; font-weight: 600; color: #44403c; transition: all .15s;
}
.opt-card.on { border-color: #8B1A1A; background: #fdf1ef; color: #6B1414; }
.step { animation: stepIn .35s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- player ---------- */
.sp-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1a1220; border-radius: 1.1rem; overflow: hidden;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); user-select: none; }
.sp-wrap:fullscreen { border-radius: 0; }
.sp-wrap svg.sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-sub { position: absolute; left: 6%; right: 6%; bottom: 13%; text-align: center; pointer-events: none; }
.sp-sub span {
    display: inline; background: rgba(20, 12, 10, .72); color: #fff; padding: .18em .5em; line-height: 1.55;
    border-radius: .35em; font-weight: 600; font-size: clamp(.78rem, 2.3vw, 1.45rem);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sp-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: .55rem .8rem; display: flex; align-items: center; gap: .6rem;
    background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0)); color: #fff; font-size: .8rem; }
.sp-btn { background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: .5rem; padding: .3rem .55rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .78rem; }
.sp-btn:hover { background: rgba(255,255,255,.22); }
.sp-btn.off { opacity: .5; text-decoration: line-through; }
.sp-track { position: relative; flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.sp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #E8C969, #D4A843); border-radius: 99px; }
.sp-lock { position: absolute; top: 0; bottom: 0; right: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 5px, rgba(255,255,255,.05) 5px 10px); }
.sp-time { font-variant-numeric: tabular-nums; opacity: .85; min-width: 4.6em; text-align: right; }
.sp-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .8rem;
    background: radial-gradient(ellipse at center, rgba(20,12,10,.15), rgba(20,12,10,.55)); cursor: pointer; border: 0; width: 100%; color: #fff; }
.sp-start .ring { width: clamp(64px, 12vw, 96px); height: clamp(64px, 12vw, 96px); border-radius: 50%;
    background: linear-gradient(135deg, #E8C969, #D4A843); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 10px rgba(232, 201, 105, .25); animation: pulseRing 2s ease-in-out infinite; }
@keyframes pulseRing { 50% { box-shadow: 0 0 0 18px rgba(232, 201, 105, .08); } }
.sp-start .lbl { font-weight: 700; font-size: clamp(.9rem, 2vw, 1.15rem); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sp-locked { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 1.2rem;
    background: rgba(28, 12, 12, .72); backdrop-filter: blur(3px); color: #fff; }
.sp-locked.show { display: flex; animation: stepIn .5s ease both; }

/* fire, twinkle (inside svg) */
.sp-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: fire .5s ease-in-out infinite alternate; }
.sp-fire.b { animation-duration: .38s; animation-delay: -.2s; }
@keyframes fire { from { transform: scale(1, .92) skewX(-2deg); } to { transform: scale(.95, 1.08) skewX(3deg); } }
.sp-tw { animation: tw 1.6s ease-in-out infinite; }
.sp-tw.d1 { animation-delay: -.5s; } .sp-tw.d2 { animation-delay: -1s; } .sp-tw.d3 { animation-delay: -1.3s; }
@keyframes tw { 50% { opacity: .25; } }
.sp-pop { transform-box: fill-box; transform-origin: center; animation: pop .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
.sp-drop { animation: drop .7s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes drop { from { transform: translateY(-420px); } }
.sp-fade { transition: opacity .8s ease; }

/* ---------- wait ---------- */
.wait-star { animation: spinSlow 6s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.wait-bar { height: 8px; border-radius: 99px; background: #f0e9df; overflow: hidden; }
.wait-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #a52525, #D4A843); border-radius: 99px; transition: width .8s ease; }
.wait-quill { animation: quill 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 10% 90%; }
@keyframes quill { 50% { transform: rotate(-8deg) translateX(6px); } }

/* ---------- payment cards (speech-generator layout) ---------- */
.pay-card { border: 2px solid #ece6dc; border-radius: 1rem; background: #fff; padding: 1.1rem; transition: border-color .15s, box-shadow .15s; position: relative; }
.pay-card:hover { border-color: #d6c9b8; box-shadow: 0 12px 30px -18px rgba(28, 25, 23, .35); }
.pay-card.rec { border-color: #8B1A1A; }
.pay-badge { position: absolute; top: -.7rem; left: 1rem; background: #8B1A1A; color: #fff; font-size: .7rem; font-weight: 700;
    padding: .15rem .6rem; border-radius: 99px; letter-spacing: .02em; }
.pm-icons img, .pm-icons svg { height: 22px; width: auto; }

.prose-legal h2 { font-weight: 700; font-size: 1.15rem; margin: 1.6rem 0 .5rem; color: #1c1917; }
.prose-legal p { margin: .4rem 0; line-height: 1.65; color: #44403c; }
.prose-legal a { color: #8B1A1A; text-decoration: underline; }