:root {
    color-scheme: dark;
    --bg: #09090d;
    --panel: #15151d;
    --panel-strong: #1f1d2b;
    --text: #f7f4ee;
    --muted: #b9b4c8;
    --line: rgba(255, 255, 255, 0.13);
    --accent: #ff335f;
    --accent-2: #20dfc6;
    --warn: #ffb74d;
    --shadow: rgba(0, 0, 0, 0.44);
    --metal: rgba(255, 255, 255, 0.075);
}

body.day {
    color-scheme: light;
    --bg: #f3efe8;
    --panel: #fffaf1;
    --panel-strong: #eee5d8;
    --text: #19151e;
    --muted: #675f6e;
    --line: rgba(35, 25, 45, 0.15);
    --accent: #c51f4a;
    --accent-2: #057c75;
    --warn: #9d5f00;
    --shadow: rgba(85, 60, 30, 0.18);
    --metal: rgba(70, 45, 20, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px),
        linear-gradient(145deg, var(--bg), #111018 62%, var(--bg));
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:not(:disabled) {
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

button:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--accent-2) 46%, var(--line));
    filter: brightness(1.05);
}

button:not(:disabled):active {
    transform: translateY(1px);
}

button:disabled,
select:disabled,
input:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

a {
    color: inherit;
}

.page-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 12px 18px 18px;
    transition: filter 180ms ease, opacity 180ms ease;
}

.page-shell.dimmed {
    filter: blur(2px);
    opacity: 0.28;
    pointer-events: none;
}

.hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 0 6px;
}

.topbar,
.mode-strip,
.edit-head,
.modal-head,
.top-actions,
.edit-actions,
.age-actions,
.lock-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar,
.mode-strip,
.edit-head,
.modal-head {
    justify-content: space-between;
}

.brand {
    text-decoration: none;
    font-weight: 900;
    font-size: 1rem;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent-2);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(2.35rem, 7vw, 4.45rem);
    line-height: 0.95;
    letter-spacing: 0;
    text-shadow: 0 0 22px rgba(255, 51, 95, 0.32), 0 0 48px rgba(32, 223, 198, 0.1);
}

.hero-copy p:last-child {
    max-width: 560px;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.4;
    margin: 8px 0 0;
}

.ghost-button,
.small-button,
.link-button,
.quiet-action,
.primary-action,
.spin-button,
.mode-button,
.add-form button {
    border: 1px solid color-mix(in srgb, var(--line) 80%, var(--metal));
    border-radius: 8px;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        color-mix(in srgb, var(--panel-strong) 72%, transparent);
    min-height: 44px;
    padding: 0 14px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.14);
}

.primary-action,
.spin-button,
.add-form button {
    border-color: transparent;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(135deg, var(--accent), #ff7a2f 58%, #ffb74d);
    color: white;
    box-shadow: 0 16px 32px var(--shadow);
}

.quiet-action {
    background: var(--panel-strong);
}

.mode-strip,
.spin-stage,
.edit-panel,
.history-panel,
.support-footer {
    margin: 10px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    box-shadow: 0 16px 46px var(--shadow);
}

.mode-strip {
    flex-wrap: wrap;
    padding: 9px 10px;
    align-items: center;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 92%, transparent), color-mix(in srgb, var(--panel) 88%, transparent));
}

.segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    max-width: 430px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--line));
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.16)),
        rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22), 0 0 18px rgba(32, 223, 198, 0.05);
}

.mode-button {
    min-height: 42px;
    background: transparent;
    box-shadow: none;
}

.mode-button.active {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 20%, rgba(255, 255, 255, 0.12)), color-mix(in srgb, var(--panel-strong) 88%, var(--accent-2))),
        var(--panel-strong);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    box-shadow: 0 0 18px rgba(32, 223, 198, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.timer-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
    transition: opacity 140ms ease, filter 140ms ease;
}

.timer-choice.inactive {
    opacity: 0.58;
}

.timer-choice select {
    color-scheme: dark;
    appearance: auto;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--line));
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
        linear-gradient(180deg, var(--panel-strong), var(--panel));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.timer-choice select option {
    color: #f7f4ee;
    background: #15151d;
}

body.day .timer-choice select {
    color-scheme: light;
}

body.day .timer-choice select option {
    color: #19151e;
    background: #fffaf1;
}

.timer-choice select:disabled {
    border-color: color-mix(in srgb, var(--line) 72%, transparent);
    color: color-mix(in srgb, var(--muted) 78%, var(--text));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        color-mix(in srgb, var(--panel) 86%, #000);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.day .timer-choice select:disabled {
    color: color-mix(in srgb, var(--muted) 86%, var(--text));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent),
        color-mix(in srgb, var(--panel) 82%, #d8d0c3);
}

.round-status {
    width: 100%;
    margin: 0;
    color: var(--muted);
}

.spin-stage {
    padding: 0;
    text-align: center;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.machine-panel {
    position: relative;
    padding: clamp(15px, 2.8vw, 26px);
    border: 1px solid color-mix(in srgb, var(--accent-2) 34%, var(--line));
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0, rgba(32, 223, 198, 0.14), transparent 32%),
        radial-gradient(circle at 14% 24%, rgba(255, 51, 95, 0.14), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 98%, transparent), color-mix(in srgb, var(--panel) 92%, transparent)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 22px);
    box-shadow:
        0 26px 68px var(--shadow),
        0 0 46px rgba(32, 223, 198, 0.11),
        0 0 32px rgba(255, 51, 95, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -18px 36px rgba(0, 0, 0, 0.26),
        inset 0 0 54px rgba(255, 51, 95, 0.045);
}

.machine-panel::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid color-mix(in srgb, var(--accent-2) 20%, rgba(255, 255, 255, 0.06));
    border-radius: 6px;
    box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.machine-panel::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    pointer-events: none;
}

.slot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: clamp(10px, 2.6vw, 24px);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.slot-reel {
    width: min(100%, 286px);
    display: grid;
    justify-items: center;
    gap: 9px;
    position: relative;
    padding: 10px 10px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--metal));
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
        rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -12px 18px rgba(0, 0, 0, 0.16);
}

.slot-reel.spinning {
    filter: drop-shadow(0 0 26px rgba(32, 223, 198, 0.22));
}

.reel-label {
    color: color-mix(in srgb, var(--accent-2) 62%, var(--muted));
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
}

.reel-window {
    --reel-offset: 0px;
    --reel-duration: 1200ms;
    width: min(100%, 258px);
    height: 174px;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-2) 36%, var(--line));
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.095), transparent 13%, transparent 87%, rgba(255, 255, 255, 0.095)),
        radial-gradient(ellipse at 50% 50%, rgba(32, 223, 198, 0.085), transparent 58%),
        linear-gradient(180deg, #050509, color-mix(in srgb, var(--panel-strong) 90%, #000) 48%, #050509);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.36),
        0 0 20px rgba(32, 223, 198, 0.1),
        inset 0 0 0 4px rgba(0, 0, 0, 0.28),
        inset 0 0 0 6px rgba(255, 255, 255, 0.025),
        inset 0 0 24px rgba(32, 223, 198, 0.085);
}

.reel-window::before,
.reel-window::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    height: 56px;
    pointer-events: none;
}

.reel-window::before {
    top: 0;
    background:
        linear-gradient(180deg, rgba(5, 5, 9, 0.99), rgba(5, 5, 9, 0.62) 56%, rgba(5, 5, 9, 0)),
        linear-gradient(90deg, rgba(32, 223, 198, 0.05), transparent, rgba(255, 51, 95, 0.04));
}

.reel-window::after {
    bottom: 0;
    background:
        linear-gradient(0deg, rgba(5, 5, 9, 0.99), rgba(5, 5, 9, 0.62) 56%, rgba(5, 5, 9, 0)),
        linear-gradient(90deg, rgba(255, 51, 95, 0.04), transparent, rgba(32, 223, 198, 0.05));
}

.reel-glass {
    position: absolute;
    inset: 6px;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.085), transparent 23%, transparent 74%, rgba(255, 255, 255, 0.04)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 40%);
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.032);
    pointer-events: none;
}

.reel-track {
    position: relative;
    z-index: 2;
    transform: translateY(var(--reel-offset));
    transition: transform var(--reel-duration) cubic-bezier(0.08, 0.78, 0.08, 1);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12), #000 28%, #000 72%, rgba(0, 0, 0, 0.12));
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12), #000 28%, #000 72%, rgba(0, 0, 0, 0.12));
}

.slot-reel.spinning .reel-track {
    transition-duration: var(--reel-duration);
}

.reel-item {
    height: 58px;
    display: grid;
    place-items: center;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: color-mix(in srgb, var(--text) 76%, var(--muted));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01)),
        rgba(0, 0, 0, 0.1);
    font-size: clamp(0.88rem, 2.15vw, 1.08rem);
    font-weight: 820;
    line-height: 1.08;
    text-align: center;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.36);
}

.reel-item.active {
    color: #fff7bd;
    font-weight: 950;
    text-shadow: 0 0 12px rgba(255, 247, 189, 0.58), 0 0 17px rgba(255, 51, 95, 0.3);
}

.reel-center-line {
    position: absolute;
    z-index: 6;
    left: 9px;
    right: 9px;
    top: 50%;
    height: 58px;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--accent-2) 48%, rgba(255, 255, 255, 0.28));
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(32, 223, 198, 0.055), rgba(255, 247, 189, 0.028), rgba(255, 51, 95, 0.05));
    box-shadow:
        0 0 16px rgba(32, 223, 198, 0.18),
        inset 0 0 14px rgba(32, 223, 198, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

.reel-result {
    min-height: 22px;
    max-width: 100%;
    color: color-mix(in srgb, var(--text) 76%, var(--accent-2));
    font-size: clamp(0.84rem, 1.8vw, 1rem);
    font-weight: 850;
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-shadow: 0 0 10px rgba(32, 223, 198, 0.12);
}

.plus-mark {
    display: grid;
    place-items: center;
    width: clamp(38px, 6vw, 52px);
    height: clamp(38px, 6vw, 52px);
    border: 1px solid color-mix(in srgb, var(--accent-2) 28%, var(--line));
    border-radius: 50%;
    color: var(--accent-2);
    background:
        radial-gradient(circle, rgba(32, 223, 198, 0.1), transparent 66%),
        rgba(0, 0, 0, 0.2);
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 900;
    text-shadow: 0 0 16px rgba(32, 223, 198, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 18px rgba(32, 223, 198, 0.1);
}

.current-result {
    min-height: 30px;
    margin: 12px 0 4px;
    color: var(--muted);
    font-weight: 800;
}

.spin-helper {
    min-height: 18px;
    margin: 0 0 6px;
    color: color-mix(in srgb, var(--muted) 78%, var(--accent-2));
    font-size: 0.84rem;
    font-weight: 800;
}

.message {
    min-height: 22px;
    margin: 0 0 10px;
    color: var(--warn);
    font-weight: 800;
}

.spin-button {
    width: min(390px, 100%);
    min-height: 58px;
    font-size: 1.12rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 16px 32px color-mix(in srgb, var(--shadow) 84%, var(--accent)),
        0 0 24px rgba(255, 122, 47, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.edit-panel,
.history-panel,
.support-footer {
    padding: 14px;
}

.edit-head h2,
.history-panel h2,
.list-editor h3 {
    margin: 0;
}

.setup-copy {
    max-width: 620px;
    margin: 4px 0 0;
    color: var(--muted);
    line-height: 1.38;
}

.edit-grid {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.list-editor {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.add-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 9px 0;
}

.add-form input {
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text);
    background: var(--panel);
}

.item-list {
    display: grid;
    gap: 6px;
}

.item-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.item-row span {
    overflow-wrap: anywhere;
}

.remove-item {
    min-width: 38px;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: transparent;
}

.danger,
.remove-item {
    color: #ff9aa8;
}

.history-list {
    display: grid;
    gap: 8px;
    min-height: 34px;
    margin: 12px 0 0;
    padding-left: 22px;
    color: var(--muted);
}

.support-footer {
    color: var(--muted);
    line-height: 1.5;
}

.support-footer p {
    margin: 0 0 8px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.link-button {
    min-height: 0;
    padding: 0;
    border: 0;
    color: var(--accent-2);
    background: transparent;
    text-decoration: underline;
}

.support-tip {
    color: color-mix(in srgb, var(--accent-2) 72%, var(--muted));
}

.age-gate,
.lock-layer,
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(4, 4, 8, 0.82);
}

.age-gate[hidden],
.lock-layer[hidden],
.modal-backdrop[hidden],
.edit-panel[hidden] {
    display: none;
}

.age-panel,
.lock-card,
.support-modal {
    width: min(560px, 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    border-radius: 8px;
    padding: 24px;
    background: linear-gradient(155deg, var(--panel), var(--panel-strong));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 46px rgba(255, 51, 95, 0.26);
}

.age-panel h1,
.lock-card h2 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 10vw, 4.2rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.age-panel p,
.lock-card p {
    color: var(--muted);
    line-height: 1.5;
}

.lock-card {
    position: relative;
    text-align: center;
    animation: reveal 360ms ease-out;
}

.lock-card h2 {
    text-shadow: 0 0 22px rgba(32, 223, 198, 0.36);
}

.lock-actions,
.age-actions {
    flex-wrap: wrap;
    justify-content: center;
}

.lock-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: color-mix(in srgb, var(--text) 78%, var(--muted));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(0, 0, 0, 0.14);
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lock-or {
    color: color-mix(in srgb, var(--muted) 82%, var(--text));
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.support-modal ul {
    display: grid;
    gap: 12px;
    margin: 14px 0 0;
    padding-left: 20px;
}

.icon-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    font-size: 1.5rem;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 760px) {
    .page-shell {
        padding: 18px 24px 24px;
    }

    .edit-grid {
        grid-template-columns: 1fr 1fr;
    }

    .round-status {
        width: auto;
    }

    .mode-strip {
        margin-top: 6px;
    }
}

@media (max-width: 560px) {
    .page-shell {
        padding: 10px 12px 16px;
    }

    .hero {
        gap: 14px;
    }

    .hero-copy h1 {
        font-size: clamp(2.25rem, 13vw, 3.5rem);
    }

    .hero-copy p:last-child {
        font-size: 0.93rem;
    }

    .topbar,
    .edit-head {
        align-items: stretch;
        flex-direction: column;
    }

    .top-actions,
    .edit-actions,
    .age-actions,
    .lock-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .top-actions button,
    .edit-actions button,
    .age-actions button,
    .lock-actions button {
        width: 100%;
    }

    .lock-or {
        align-self: center;
    }

    .slot-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .machine-panel {
        padding: 14px 12px 16px;
    }

    .slot-reel {
        width: min(100%, 330px);
        padding: 9px;
    }

    .plus-mark {
        width: 36px;
        height: 36px;
        line-height: 0.8;
    }

    .reel-window {
        width: min(100%, 300px);
    }

    .spin-button {
        min-height: 54px;
    }
}