/* ==========================================================================
   Three Thimbles Tavern — the shared pirate theme:
   night sea in the background, wood and brass in the UI, parchment in panels.
   ========================================================================== */

:root {
    --sea-deep: #04121a;
    --sea: #0b2b3a;
    --sea-light: #12495e;
    --sky: #071825;

    --wood-dark: #2a1a10;
    --wood: #4a2e1a;
    --wood-light: #7a4c26;
    --wood-hi: #a9713c;

    --gold: #e8b44c;
    --gold-bright: #ffe6a3;
    --gold-deep: #8a5f1a;
    --brass: #c99a3f;

    --parchment: #f3e2be;
    --parchment-dark: #d8c096;
    --ink: #3a2411;

    --blood: #952c1f;
    --blood-light: #d2472f;
    --emerald: #37916b;
    --emerald-light: #56d29b;

    --text: #f6e7c8;
    --text-dim: #c7ab7e;

    --radius: 14px;
    --shadow-deep: 0 24px 60px rgba(0, 0, 0, .6);
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--sea-deep);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: .04em;
    margin: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Background: night sea, moon, ship, fog, embers ---------- */

.sea {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.sea__sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 70% 8%, #16394b 0%, #0a2130 38%, var(--sky) 70%, #030d14 100%),
        var(--sky);
}

.sea__sky::after {
    /* star dust */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 14%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 26% 8%, #ffeec9 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 41% 20%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 58% 6%, #d9f0ff 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 77% 16%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 26%, #ffeec9 50%, transparent 51%),
        radial-gradient(1.1px 1.1px at 33% 30%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 32%, #fff 50%, transparent 51%);
    opacity: .75;
    animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle { from { opacity: .35; } to { opacity: .9; } }

.sea__moon {
    position: absolute;
    top: 6vh;
    right: 12vw;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #fff8e2, #f3dea6 55%, #d8b871 78%, #b89a5e 100%);
    box-shadow: 0 0 60px 20px rgba(255, 226, 160, .22), 0 0 160px 60px rgba(255, 210, 130, .12);
    animation: moon-breathe 9s ease-in-out infinite;
}

@keyframes moon-breathe {
    50% { box-shadow: 0 0 80px 26px rgba(255, 226, 160, .3), 0 0 200px 80px rgba(255, 210, 130, .16); }
}

.sea__ship {
    position: absolute;
    right: 8vw;
    top: 30vh;
    width: 220px;
    height: 120px;
    opacity: .5;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 120'%3E%3Cg fill='%23030d14'%3E%3Cpath d='M18 96h184l-16 18H34z'/%3E%3Cpath d='M40 96V60l58-12v48zM118 96V34l52 14v48z'/%3E%3Crect x='104' y='10' width='4' height='90'/%3E%3Cpath d='M60 20h44v10H60z' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
    animation: ship-sail 14s ease-in-out infinite;
}

@keyframes ship-sail {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50% { transform: translateY(10px) rotate(1.2deg); }
}

.sea__wave {
    position: absolute;
    left: -10%;
    width: 120%;
    bottom: 0;
    background-repeat: repeat-x;
    background-size: 50% 100%;
}

.sea__wave--back {
    height: 46vh;
    opacity: .55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 70c37.5-22 112.5 22 150 0s112.5 22 150 0 112.5 22 150 0 112.5 22 150 0V200H0z' fill='%230b2b3a'/%3E%3C/svg%3E");
    animation: drift 26s linear infinite;
}

.sea__wave--mid {
    height: 34vh;
    opacity: .8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 95c50-28 150 28 200 0s150 28 200 0 150 28 200 0V200H0z' fill='%23081f2b'/%3E%3C/svg%3E");
    animation: drift 18s linear infinite reverse;
}

.sea__wave--front {
    height: 22vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 65c75-30 225 30 300 0s225 30 300 0V200H0z' fill='%23041018'/%3E%3C/svg%3E");
    animation: drift 12s linear infinite;
}

@keyframes drift { to { transform: translateX(-50%); } }

.fog {
    position: absolute;
    inset: -20% -50%;
    background:
        radial-gradient(45% 30% at 20% 60%, rgba(180, 210, 225, .10), transparent 70%),
        radial-gradient(40% 26% at 70% 70%, rgba(200, 220, 235, .09), transparent 70%),
        radial-gradient(50% 34% at 45% 85%, rgba(160, 190, 210, .10), transparent 70%);
    animation: fog-roll 40s ease-in-out infinite alternate;
}

@keyframes fog-roll {
    from { transform: translate3d(-4%, 0, 0) scale(1); }
    to { transform: translate3d(6%, -3%, 0) scale(1.12); }
}

.embers { position: absolute; inset: 0; }

.ember {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd483, #ff8a2b 60%, transparent 70%);
    filter: blur(.4px);
    animation: ember-rise linear infinite;
}

@keyframes ember-rise {
    0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
    12% { opacity: .9; }
    75% { opacity: .55; }
    100% { transform: translate3d(var(--drift, 30px), -105vh, 0) scale(1.25); opacity: 0; }
}

/* ---------- Page frame ---------- */

.shell {
    position: relative;
    z-index: 1;
    max-width: 1220px;
    margin: 0 auto;
    padding: 18px 20px 60px;
}

/* ---------- Wood, brass, parchment ---------- */

.plank {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 220, 160, .10), transparent 30%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, var(--wood-light), var(--wood) 45%, var(--wood-dark));
    border: 2px solid rgba(0, 0, 0, .45);
    border-radius: var(--radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 214, 150, .22),
        inset 0 -14px 26px rgba(0, 0, 0, .38),
        var(--shadow-deep);
}

.plank::after {
    /* brass rivets in the corners */
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: calc(var(--radius) - 6px);
    pointer-events: none;
    background:
        radial-gradient(circle at 0 0, var(--brass) 2.5px, transparent 3px),
        radial-gradient(circle at 100% 0, var(--brass) 2.5px, transparent 3px),
        radial-gradient(circle at 0 100%, var(--brass) 2.5px, transparent 3px),
        radial-gradient(circle at 100% 100%, var(--brass) 2.5px, transparent 3px);
    opacity: .8;
}

.parchment {
    background:
        radial-gradient(120% 100% at 50% 0, rgba(255, 255, 255, .5), transparent 60%),
        linear-gradient(170deg, var(--parchment), var(--parchment-dark));
    color: var(--ink);
    border-radius: 10px;
    box-shadow: inset 0 0 40px rgba(140, 100, 50, .35), var(--shadow-deep);
}

.rope-line {
    height: 8px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(115deg, #c79a5c 0 6px, #8a6437 6px 12px);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------- Buttons ---------- */

.btn {
    --btn-a: var(--wood-hi);
    --btn-b: var(--wood);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 2px solid rgba(0, 0, 0, .5);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
    color: var(--text);
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    box-shadow: inset 0 1px 0 rgba(255, 226, 170, .35), inset 0 -6px 12px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .45);
    transition: transform .12s cubic-bezier(.34, 1.56, .64, 1), filter .18s, box-shadow .18s;
}

.btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .5); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.btn:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.btn--gold { --btn-a: var(--gold-bright); --btn-b: #b8802a; color: #38210a; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.btn--blood { --btn-a: var(--blood-light); --btn-b: #6d1d13; }
.btn--emerald { --btn-a: var(--emerald-light); --btn-b: #1f6547; color: #05261a; text-shadow: none; }
.btn--ghost { --btn-a: rgba(255, 255, 255, .10); --btn-b: rgba(255, 255, 255, .03); }
.btn--sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; }
.btn--wide { width: 100%; }

/* ---------- Inputs ---------- */

.field { display: block; margin-bottom: 14px; }

.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.input, .select, .textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, .5);
    background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .22));
    color: var(--text);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
    transition: border-color .2s, box-shadow .2s;
}

.input::placeholder { color: rgba(215, 190, 145, .45); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5), 0 0 0 3px rgba(232, 180, 76, .25);
}

.select option { background: #2a1a10; }

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    border: 1px solid rgba(0, 0, 0, .4);
    background: rgba(0, 0, 0, .3);
}

.badge--pending { background: rgba(232, 180, 76, .2); color: var(--gold-bright); border-color: rgba(232, 180, 76, .5); }
.badge--approved { background: rgba(55, 145, 107, .22); color: var(--emerald-light); border-color: rgba(86, 210, 155, .45); }
.badge--rejected { background: rgba(149, 44, 31, .25); color: #ff9d8a; border-color: rgba(210, 71, 47, .5); }

/* ---------- Thimble: shared palette for the table and the public pages ---------- */

.cup__shadow { fill: rgba(0, 0, 0, .45); }
.cup__body { fill: #5b3a1e; }
.cup__body-shade { fill: rgba(0, 0, 0, .32); }
.cup__body-light { fill: rgba(255, 205, 140, .16); }
.cup__hoop { fill: #c99a3f; }
.cup__rim { fill: #b07f2f; }
.cup__rim-light { fill: rgba(255, 232, 170, .55); }
.cup__gloss { fill: rgba(255, 235, 190, .22); }
.cup__emblem path:first-child { fill: #e6d7bb; }
.cup__emblem .cup__eye { fill: #2b1a0d; }

/* ---------- Coin ---------- */

.coin {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 45%, var(--gold-deep) 100%);
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .45), 0 0 10px rgba(232, 180, 76, .5);
    animation: coin-spin 3.6s linear infinite;
}

@keyframes coin-spin {
    0%, 100% { transform: rotateY(0deg) scaleX(1); }
    50% { transform: rotateY(180deg) scaleX(.25); }
}


/* ---------- Logo: one carved sign, medallion and name together ---------- */

.logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 18px 7px 6px;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.05;
    background:
        linear-gradient(180deg, rgba(255, 220, 160, .12), transparent 42%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, #c08a4e, #a9713c 46%, #7c4d24);
    border: 2px solid rgba(0, 0, 0, .5);
    box-shadow:
        inset 0 1px 0 rgba(255, 214, 150, .3),
        inset 0 -8px 16px rgba(0, 0, 0, .35),
        0 8px 20px rgba(0, 0, 0, .45);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s;
}

/* a slow glint travelling across the sign, like lantern light on varnish */
.logo::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 34%;
    height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 238, 200, .18), transparent);
    transform: rotate(14deg);
    animation: logo-glint 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes logo-glint {
    0%, 62% { left: -40%; }
    88%, 100% { left: 120%; }
}

.logo:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 214, 150, .35),
        inset 0 -8px 16px rgba(0, 0, 0, .3),
        0 12px 26px rgba(0, 0, 0, .5),
        0 0 24px rgba(232, 180, 76, .3);
}

.logo__mark {
    width: 40px;
    height: 40px;
    flex: none;
    overflow: visible;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
    transition: transform .35s cubic-bezier(.34, 1.5, .64, 1);
}

.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.07); }

.logo__coin { fill: #e9b95a; }
.logo__rim { fill: none; stroke: #6b4715; stroke-width: 3; }
.logo__groove { fill: none; stroke: #b8862c; stroke-width: 1.2; opacity: .55; }
.logo__barrel { fill: #4a2e1a; }

/* dark thimbles on a bright coin: the silhouette has to survive 20 px */
.logo__cup { fill: #2f1e0e; }
.logo__cup--mid { fill: #1f1308; }

.logo__bead { fill: #fffdf2; stroke: #6b4715; stroke-width: 1.4; }
.logo__spark { fill: #fff; opacity: .95; }

.logo__halo {
    fill: #fff3cf;
    opacity: .35;
    transform-origin: 32px 42px;
    animation: logo-halo 3.2s ease-in-out infinite;
}

@keyframes logo-halo {
    0%, 100% { opacity: .22; transform: scale(.8); }
    50% { opacity: .5; transform: scale(1.12); }
}

/* the middle thimble keeps hovering, as if Joe never stops shuffling */
.logo__cup--mid {
    transform-origin: 32px 37px;
    animation: logo-shuffle 3.2s ease-in-out infinite;
}

@keyframes logo-shuffle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-5deg); }
}


/* the hook the sign hangs from, swaying like a lantern on a chain */
.logo__hanger {
    display: flex;
    align-items: flex-start;
    flex: none;
    margin: -14px 0 0 -2px;
    transform-origin: 50% 0;
    animation: logo-sway 6s ease-in-out infinite;
}

.logo__hook { width: 26px; height: 42px; overflow: visible; }

.logo__hook-shaft,
.logo__hook-claw {
    fill: none;
    stroke: #cbb79a;
    stroke-width: 4.5;
    stroke-linecap: round;
}

.logo__hook-claw { stroke: #d8c9ae; }
.logo__hook-collar { fill: #8a6437; }
.logo__hook-tip { fill: #e6dcc8; }

@keyframes logo-sway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.logo__word { position: relative; display: flex; flex-direction: column; }

.logo__name {
    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: .05em;
    /* burnt into the plank: charred core, scorched halo, sanded edge below */
    color: #2b1408;
    text-shadow:
        0 0 1px rgba(43, 20, 8, .9),
        0 0 6px rgba(74, 34, 10, .55),
        0 1px 0 rgba(255, 214, 150, .28);
}

/* a thin brass rule with a diamond, the way tavern signs are painted */
.logo__tagline {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    font-size: 9px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #4a2712;
    text-shadow: 0 0 4px rgba(74, 34, 10, .45), 0 1px 0 rgba(255, 214, 150, .25);
}

.logo__tagline::before,
.logo__tagline::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 34, 10, .5), transparent);
}

.logo--hero {
    gap: 20px;
    padding: 16px 34px 16px 18px;
    border-radius: 24px;
}

.logo--hero .logo__mark { width: 92px; height: 92px; }
.logo--hero .logo__hook { width: 44px; height: 72px; }
.logo--hero .logo__hanger { margin-top: -26px; }

.logo--hero .logo__name {
    font-size: clamp(30px, 4.2vw, 46px);
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1;
}

.logo--hero .logo__tagline { margin-top: 8px; font-size: 11px; letter-spacing: .34em; }

@media (max-width: 620px) {
    .logo--hero { padding: 12px 20px 12px 12px; }
    .logo--hero .logo__mark { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .logo__halo, .logo__cup--mid, .logo::after, .logo__hanger { animation: none; }
}

/* ---------- Sound toggle ---------- */

.sound { gap: 7px; }

.sound__icon {
    width: 18px;
    height: 18px;
    flex: none;
    overflow: visible;
}

.sound__body { fill: currentColor; }

.sound__wave {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    transform-origin: 13px 12px;
    animation: sound-pulse 1.8s ease-in-out infinite;
}

.sound__wave--2 { animation-delay: .25s; }

.sound__slash {
    stroke: var(--blood-light);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0;
    transform-origin: center;
    transform: scaleX(.2);
    transition: opacity .2s, transform .25s cubic-bezier(.34, 1.5, .64, 1);
}

@keyframes sound-pulse {
    0%, 100% { opacity: .45; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1); }
}

.sound.is-off { color: var(--text-dim); }
.sound.is-off .sound__wave { opacity: 0; animation: none; }
.sound.is-off .sound__slash { opacity: 1; transform: scaleX(1); }

@media (max-width: 720px) {
    .sound__label { display: none; }
}

/* ---------- Modals ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 8, 12, .72);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.modal {
    width: min(520px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 26px 26px 22px;
    transform: translateY(24px) scale(.96);
    opacity: 0;
    transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .3s;
}

.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal__title {
    font-size: 26px;
    margin-bottom: 4px;
    color: var(--gold-bright);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

.modal__sub { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; }

.modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .45);
    background: rgba(0, 0, 0, .35);
    color: var(--text-dim);
    cursor: pointer;
    line-height: 1;
    font-size: 18px;
    transition: transform .2s, color .2s;
}

.modal__close:hover { color: var(--gold-bright); transform: rotate(90deg); }

/* ---------- Toasts ---------- */

.toasts {
    position: fixed;
    z-index: 60;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
}

.toast {
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 5px solid var(--gold);
    background: linear-gradient(150deg, #35210f, #1d1109);
    box-shadow: var(--shadow-deep);
    font-size: 14px;
    animation: toast-in .4s cubic-bezier(.34, 1.5, .64, 1) both;
}

.toast--error { border-left-color: var(--blood-light); }
.toast--win { border-left-color: var(--emerald-light); }
.toast.is-leaving { animation: toast-out .3s ease forwards; }

@keyframes toast-in { from { transform: translateX(120%) rotate(3deg); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(120%); opacity: 0; } }

/* ---------- Odds and ends ---------- */

.muted { color: var(--text-dim); }
.gold { color: var(--gold-bright); }
.win { color: var(--emerald-light); }
.lose { color: #ff9d8a; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.center { text-align: center; }
.hidden { display: none !important; }

.scroll-list { max-height: 320px; overflow-y: auto; padding-right: 6px; }

.scroll-list::-webkit-scrollbar { width: 8px; }
.scroll-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); border-radius: 4px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--wood-light); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}