/*
 * Coal = the rating unit. 1-10 maps to 0-5 coals; a coal can be partly lit.
 * Markup: .coal[style=--fill:0..1] > svg.coal__ash + svg.coal__lit
 */
.coal {
    --size: 22px;
    --fill: 1;
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--size);
    height: var(--size);
}

.coal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.coal__glow {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 calc(var(--size) * 0.14) var(--glow));
}

.coal__lit {
    clip-path: inset(0 calc((1 - var(--fill)) * 100%) 0 0);
}

.coals {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--size, 22px) * 0.12);
}

.coals .coal { --size: inherit; }

.coals--xs { --size: 14px; }
.coals--sm { --size: 18px; }
.coals--md { --size: 24px; }
.coals--lg { --size: 34px; }
.coals--xl { --size: 52px; }

.score {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.score__num {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--display-tracking);
}

.score__count { color: var(--text-3); font-size: var(--step--1); font-weight: 600; }

/* Card score: the number carries it, no coals */
.card-score { display: inline-flex; align-items: baseline; gap: 4px; line-height: 1; }
.card-score__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-4); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; color: var(--text); }
.card-score__max { font-size: var(--step-0); font-weight: 800; color: var(--text-3); }
.card-score__count { margin-left: var(--space-2); white-space: nowrap; font-size: var(--step--1); font-weight: 700; color: var(--text-3); }
.card-score--empty { font-size: var(--step--1); font-weight: 700; color: var(--text-3); }

/* Subtle living glow on lit coals in hero spots */
.coals--alive .coal__glow { animation: flicker 3.2s ease-in-out infinite; }
.coals--alive .coal:nth-child(2) .coal__glow { animation-delay: -0.7s; }
.coals--alive .coal:nth-child(3) .coal__glow { animation-delay: -1.4s; }
.coals--alive .coal:nth-child(4) .coal__glow { animation-delay: -2.1s; }
.coals--alive .coal:nth-child(5) .coal__glow { animation-delay: -2.8s; }

/* ---------- Rating input ---------- */
.coal-input {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-radius: var(--radius-l);
    background:
        radial-gradient(90% 70% at 50% 110%, color-mix(in oklab, var(--accent) calc(var(--heat, 0) * 22%), transparent), transparent 70%),
        var(--bg-raised);
    border: 1px solid var(--line);
    transition: background var(--dur-3);
    container-type: inline-size;
    user-select: none;
    -webkit-user-select: none;
}

.coal-input__label { font-weight: 800; color: var(--text-2); }

.coal-input__readout {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-height: 1em;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--step-5);
    line-height: 0.9;
    letter-spacing: var(--display-tracking);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.coal-input__readout small { font-size: 0.32em; color: var(--text-3); }
.coal-input__readout[data-empty] { color: var(--text-3); }
.coal-input__readout b { display: inline-block; }
.coal-input__readout b.bump { animation: bump var(--dur-2) var(--ease-spring); }

.coal-input__track {
    --size: min(64px, 15cqi);
    position: relative;
    display: flex;
    gap: calc(var(--size) * 0.1);
    padding: 10px 6px;
    touch-action: pan-y;
    cursor: pointer;
    border-radius: var(--radius-m);
}

.coal-input__track:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
.coal-input__track .coal { --size: inherit; }
.coal-input__track .coal__lit { transition: clip-path var(--dur-1) var(--ease-out); }
.coal-input__track .coal.hit { animation: bump var(--dur-2) var(--ease-spring); }

.coal-input__hint { font-size: var(--step--1); color: var(--text-3); text-align: center; min-height: 1.4em; }

.coal-input__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--text-3);
}
.coal-input__status[data-state="saving"] { color: var(--text-2); }
.coal-input__status[data-state="saved"] { color: var(--ok); }
.coal-input__status[data-state="queued"] { color: var(--warn); }
.coal-input__status[data-state="error"] { color: var(--danger); }
.coal-input__status svg { width: 18px; height: 18px; }
.coal-input__status[data-state="saving"] svg { animation: spin 0.8s linear infinite; }

/* Compact inline variant for secondary targets (tobacco, tea, event) */
.coal-input--compact {
    grid-template-columns: 1fr auto;
    justify-items: stretch;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1) var(--space-3);
}
.coal-input--compact .coal-input__track { --size: 34px; grid-column: 1 / -1; justify-self: start; padding: 4px 0; }
.coal-input--compact .coal-input__readout { font-size: var(--step-2); justify-self: end; grid-row: 1; grid-column: 2; }
.coal-input--compact .coal-input__label { grid-row: 1; }

/* ---------- Easter eggs: sparks, puff, flare ---------- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

.spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6d0, var(--ember-2) 60%, transparent 70%);
    box-shadow: 0 0 8px var(--ember-2);
    animation: spark 900ms var(--ease-out) forwards;
}

.puff {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--text-3);
    filter: blur(8px);
    animation: puff 1400ms ease-out forwards;
}

.flare-text {
    position: absolute;
    left: 50%;
    top: -6px;
    translate: -50% 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-2);
    color: var(--accent-2);
    text-shadow: 0 0 20px var(--glow);
    white-space: nowrap;
    animation: flare-up 1600ms var(--ease-out) forwards;
}

.coal-input[data-flare] .coal__glow { animation: flare 900ms var(--ease-out); }
.coal-input[data-dead] .coal-input__track .coal:first-child .coal__glow { animation: die 1200ms ease-out forwards; }

@keyframes flicker {
    0%, 100% { filter: drop-shadow(0 0 calc(var(--size) * 0.12) var(--glow)) brightness(1); }
    45% { filter: drop-shadow(0 0 calc(var(--size) * 0.22) var(--glow)) brightness(1.12); }
    60% { filter: drop-shadow(0 0 calc(var(--size) * 0.1) var(--glow)) brightness(0.95); }
}
@keyframes bump { 0% { scale: 1; } 45% { scale: 1.16; } 100% { scale: 1; } }
@keyframes spark { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: var(--dx) var(--dy); scale: 0.3; } }
@keyframes puff { 0% { opacity: 0; scale: 0.4; } 20% { opacity: 0.8; } 100% { opacity: 0; scale: 2.6; translate: 10px -60px; } }
@keyframes flare-up { 0% { opacity: 0; translate: -50% 10px; scale: 0.8; } 20% { opacity: 1; scale: 1.05; } 80% { opacity: 1; } 100% { opacity: 0; translate: -50% -34px; } }
@keyframes flare { 0% { filter: drop-shadow(0 0 0 var(--glow)) brightness(1); } 35% { filter: drop-shadow(0 0 22px var(--ember-2)) brightness(1.6); } 100% { filter: drop-shadow(0 0 6px var(--glow)) brightness(1); } }
@keyframes die { 0% { opacity: 1; } 100% { opacity: 0.12; filter: grayscale(1); } }

/* ---------- Easter eggs across the screen (assets/lib/fx.js) ---------- */
.fx-screen { position: fixed; inset: 0; z-index: 120; overflow: hidden; pointer-events: none; }
.ash-flake {
    position: absolute;
    top: -14px;
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 30%;
    background: color-mix(in oklab, var(--text-3) 85%, white 15%);
    opacity: 0.85;
    animation: ash-fall 2400ms linear forwards;
}
.ember-rise {
    position: absolute;
    bottom: -10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6d0, var(--ember-2) 60%, transparent 70%);
    box-shadow: 0 0 8px var(--ember-2);
    animation: ember-rise 2000ms var(--ease-out) forwards;
}
.fx-ring {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 4px solid color-mix(in oklab, var(--text-2) 70%, transparent);
    filter: blur(1.2px);
    animation: fx-ring 1600ms var(--ease-out) forwards;
}
.pull-ring {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 68px);
    left: 50%;
    z-index: 40;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border-radius: 50%;
    border: 5px solid color-mix(in oklab, var(--text-2) 70%, transparent);
    filter: blur(1.4px);
    pointer-events: none;
    opacity: calc(var(--pull, 0) * 0.9);
    scale: calc(0.3 + var(--pull, 0) * 0.7);
}
.pull-ring--ready { border-color: color-mix(in oklab, var(--accent-2) 60%, var(--text-2)); }
.pull-ring--blow { animation: ring-out 450ms var(--ease-out) forwards; }

/* Konami code: every coal on the page lights up for a moment. */
[data-kindled] .coal { --fill: 1 !important; }
[data-kindled="1"] .coal__glow { animation: flare 900ms var(--ease-out) 2; }

@keyframes ash-fall { to { translate: var(--dx, 0) 105vh; rotate: var(--spin, 180deg); opacity: 0; } }
@keyframes ember-rise { 0% { opacity: 0; } 10% { opacity: 1; } 100% { translate: var(--dx, 0) -70vh; opacity: 0; scale: 0.4; } }
@keyframes fx-ring { 0% { scale: 0.3; opacity: 0.9; } 100% { scale: 2.4; opacity: 0; translate: 18px -64px; } }