/* hwakryul.com — soft-pillow probability arcade
   Neomorphism, full-bleed, conic-gradient substrate.
   All shadows live in :root tokens. Never inline a shadow.
*/

:root {
    /* Substrate palette (gradient stops, conic order) */
    --aurora-lavender: #E6DDFF;
    --peach-halo: #FFD9C2;
    --mint-foam: #CFF1E5;
    --cornflower-mist: #C8DBFF;

    /* Neomorphic shadow ingredients */
    --highlight: #FFFFFF;
    --shadow-cool: #A893C9;
    --inset-highlight: #FFFFFF;
    --inset-shadow: #7E6BA0;

    /* Inks */
    --ink-indigo: #3B2E78;
    --ink-sea: #1E5E5A;
    --ink-vermilion: #C24A52;
    --ink-soft: rgba(59, 46, 120, 0.78);
    --ink-faint: rgba(59, 46, 120, 0.42);

    /* Shadow tokens — used everywhere, never inline */
    --shadow-up:
        -9px -9px 22px rgba(255, 255, 255, 0.78),
        11px 11px 28px rgba(168, 147, 201, 0.42);
    --shadow-up-strong:
        -12px -12px 30px rgba(255, 255, 255, 0.82),
        15px 15px 36px rgba(168, 147, 201, 0.50);
    --shadow-up-soft:
        -5px -5px 14px rgba(255, 255, 255, 0.7),
        7px 7px 18px rgba(168, 147, 201, 0.32);
    --shadow-down:
        inset 4px 4px 10px rgba(255, 255, 255, 0.60),
        inset -6px -6px 14px rgba(126, 107, 160, 0.38);
    --shadow-knot:
        -3px -3px 8px rgba(255, 255, 255, 0.80),
        4px 4px 10px rgba(168, 147, 201, 0.45);

    /* The conic-gradient body — the only background */
    --page-bg:
        conic-gradient(
            from 0deg at 48vw 36vh,
            var(--aurora-lavender) 0deg,
            var(--peach-halo) 90deg,
            var(--mint-foam) 180deg,
            var(--cornflower-mist) 270deg,
            var(--aurora-lavender) 360deg
        );
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

body {
    font-family: 'Gowun Batang', 'Noto Serif KR', Georgia, serif;
    color: var(--ink-indigo);
    background: var(--peach-halo);
    position: relative;
}

/* Fixed conic substrate — the only background.
   Slow rotation handled by JS via custom property --conic-rot. */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--page-bg);
    background-attachment: fixed;
    transform: rotate(var(--conic-rot, 0deg));
    transform-origin: 48vw 36vh;
    transition: transform 0.18s linear;
    pointer-events: none;
}

/* Cursor glow follows pointer */
.cursor-glow {
    position: fixed;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.4s ease;
    will-change: left, top;
}

/* Page corner controls */
.page-corner-controls {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 50;
    display: flex;
    gap: 12px;
}

.soft-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: inherit;
    border: none;
    border-radius: 999px;
    box-shadow: var(--shadow-up-soft);
    color: var(--ink-indigo);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.soft-toggle[data-state="on"] {
    box-shadow: var(--shadow-down);
    color: var(--ink-sea);
}

.soft-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-up);
}

.soft-toggle-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ink-indigo);
    box-shadow: inset -2px -2px 3px rgba(126, 107, 160, 0.5),
                inset 2px 2px 3px rgba(255,255,255,0.7);
}

.soft-toggle[data-state="on"] .soft-toggle-icon {
    background: var(--ink-sea);
}

/* WAVE-SPINE NAVIGATION (right margin) */
.wave-spine {
    position: fixed;
    right: 24px;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 40;
    pointer-events: none;
}

.wave-spine-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wave-spine-knots {
    position: relative;
    list-style: none;
    height: 100%;
    pointer-events: none;
}

.wave-spine-knots li {
    position: absolute;
    right: 6px;
    pointer-events: auto;
    transform: translateY(-50%);
}

.spine-knot {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: inherit;
    box-shadow: var(--shadow-knot);
    cursor: pointer;
    position: relative;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.32s ease;
}

.spine-knot::after {
    content: attr(data-label);
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: inherit;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: var(--shadow-up-soft);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-sea);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.spine-knot:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.spine-knot:hover {
    transform: translateX(-8px);
    box-shadow: var(--shadow-up-strong);
}

/* BANDS */
.bands {
    width: 100%;
    position: relative;
    z-index: 1;
}

.band {
    position: relative;
    min-height: var(--band-h);
    width: 100%;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.band.lifted {
    transform: translateY(-8px);
}

.band-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.band-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 6vh 8vw;
    display: block;
}

/* HERO BAND 1 */
.band-1 .band-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 6vw;
}

.hero-stage {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.hero-eyebrow {
    margin-bottom: 12px;
}

.hero-numerals {
    font-family: 'Fraunces', 'Playfair Display', serif;
    font-size: clamp(7rem, 24vw, 22rem);
    font-weight: 480;
    line-height: 0.96;
    color: var(--ink-indigo);
    text-shadow:
        -3px -3px 6px rgba(255,255,255,0.8),
        4px 4px 10px rgba(168, 147, 201, 0.4);
    letter-spacing: -0.02em;
    user-select: none;
}

.hero-prefix {
    color: var(--ink-faint);
}

.hero-digit {
    display: inline-block;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
    will-change: transform, font-variation-settings;
}

.hero-digit.tick {
    transform: translateY(-8px) scale(1.04);
}

.hero-headline {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 600;
    font-variation-settings: "wdth" 88;
    letter-spacing: -0.018em;
    color: var(--ink-indigo);
    margin-top: 14px;
}

.hero-marginalia {
    margin-top: 8px;
}

/* COMMON BAND TITLES */
.band-title {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    font-weight: 600;
    font-variation-settings: "wdth" 88;
    letter-spacing: -0.018em;
    color: var(--ink-indigo);
    margin-bottom: 24px;
    line-height: 1.06;
    max-width: 70%;
}

.band-title.undulate {
    display: inline-block;
}

.band-title.undulate .ch {
    display: inline-block;
    transition: transform 0.6s ease;
}

/* TILE FIELD */
.tile-field {
    position: relative;
    width: 100%;
    height: calc(var(--band-h) - 14vh);
    min-height: 200px;
}

.tile {
    position: absolute;
    left: var(--tx, 50%);
    top: 50%;
    transform: translate(-50%, calc(-50% + var(--y-off, 0px))) translate3d(0, calc(-1px * var(--lift, 0)), 0);
    background: inherit;
    border-radius: 22px;
    padding: 18px 22px;
    box-shadow: var(--shadow-up);
    transition: box-shadow 0.28s ease;
    will-change: transform;
    width: calc(140px * var(--weight, 1));
    min-height: calc(120px * var(--weight, 1));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink-indigo);
    font-family: 'Gowun Batang', serif;
}

.tile.tile-large {
    width: calc(220px * var(--weight, 1));
    min-height: calc(200px * var(--weight, 1));
}

.tile-glyph {
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    background: inherit;
    border-radius: 50%;
    box-shadow: var(--shadow-up-soft);
    position: relative;
    flex-shrink: 0;
}

.tile-glyph::before {
    content: '';
    position: absolute;
    inset: 12px;
    background: var(--ink-indigo);
    -webkit-mask-image: var(--glyph-mask);
    mask-image: var(--glyph-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.78;
}

/* glyph masks (inline SVG via data URI) — uniform 28x28 viewbox, 2px stroke style */
.tile-glyph[data-glyph="coin-heads"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='14' cy='14' r='10'/><path d='M14 8v12M9 14h10'/></svg>"); }
.tile-glyph[data-glyph="coin-tails"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='14' cy='14' r='10'/><path d='M9 14h10M11 11l6 6M17 11l-6 6'/></svg>"); }
.tile-glyph[data-glyph="coin-edge"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='14' cy='14' rx='3' ry='10'/><path d='M11 14h6'/></svg>"); }
.tile-glyph[data-glyph="bell-mode"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 22 C8 22 9 6 14 6 C19 6 20 22 25 22'/><path d='M3 22h22'/></svg>"); }
.tile-glyph[data-glyph="bell-tail-right"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 22 C8 22 10 8 16 8 C22 8 24 22 25 22'/><path d='M16 22 L25 22 L24 18 L20 16 L18 18 Z'/></svg>"); }
.tile-glyph[data-glyph="bell-tail-left"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 22 C4 22 6 8 12 8 C18 8 20 22 25 22'/><path d='M3 22 L12 22 L10 18 L6 16 L4 18 Z'/></svg>"); }
.tile-glyph[data-glyph="dice-d6"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='5' width='18' height='18' rx='3'/><circle cx='10' cy='10' r='1.2' fill='black'/><circle cx='18' cy='10' r='1.2' fill='black'/><circle cx='14' cy='14' r='1.2' fill='black'/><circle cx='10' cy='18' r='1.2' fill='black'/><circle cx='18' cy='18' r='1.2' fill='black'/></svg>"); }
.tile-glyph[data-glyph="dice-d20"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='14,3 24,9 24,19 14,25 4,19 4,9'/><path d='M14 3v22M4 9l20 10M24 9l-20 10'/></svg>"); }
.tile-glyph[data-glyph="dice-d12"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='14,3 22,7 24,15 20,23 8,23 4,15 6,7'/><path d='M14 3v8M14 11l-7 4M14 11l7 4'/></svg>"); }
.tile-glyph[data-glyph="histogram"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='17' width='4' height='7'/><rect x='9' y='12' width='4' height='12'/><rect x='15' y='6' width='4' height='18'/><rect x='21' y='14' width='4' height='10'/></svg>"); }
.tile-glyph[data-glyph="kde"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 22 C7 22 8 10 14 10 C20 10 21 22 25 22'/><circle cx='14' cy='10' r='1.5' fill='black'/></svg>"); }
.tile-glyph[data-glyph="urn"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 8 C7 5 21 5 21 8 L20 22 C20 24 8 24 8 22 Z'/><circle cx='12' cy='15' r='1.6' fill='black'/><circle cx='17' cy='17' r='1.6' fill='black'/><circle cx='14' cy='12' r='1.6' fill='black'/></svg>"); }
.tile-glyph[data-glyph="tree"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='14' cy='5' r='2'/><circle cx='7' cy='14' r='2'/><circle cx='21' cy='14' r='2'/><circle cx='4' cy='23' r='1.6'/><circle cx='10' cy='23' r='1.6'/><circle cx='18' cy='23' r='1.6'/><circle cx='24' cy='23' r='1.6'/><path d='M14 7L7 12M14 7L21 12M7 16L4 21M7 16L10 21M21 16L18 21M21 16L24 21'/></svg>"); }
.tile-glyph[data-glyph="ci"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 14h18'/><path d='M5 10v8M23 10v8'/><circle cx='14' cy='14' r='2' fill='black'/></svg>"); }
.tile-glyph[data-glyph="oracle"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='4' width='16' height='20' rx='2'/><path d='M10 9h8M10 13h8M10 17h6'/></svg>"); }
.tile-glyph[data-glyph="error-bar"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4v20M9 4h10M9 24h10'/><circle cx='14' cy='14' r='2' fill='black'/></svg>"); }
.tile-glyph[data-glyph="roulette"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='14' cy='14' r='10'/><circle cx='14' cy='14' r='4'/><path d='M14 4v6M14 18v6M4 14h6M18 14h6M7 7l4 4M21 7l-4 4M7 21l4-4M21 21l-4-4'/></svg>"); }
.tile-glyph[data-glyph="peg"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='9' r='1.6' fill='black'/><circle cx='20' cy='9' r='1.6' fill='black'/><circle cx='14' cy='14' r='1.6' fill='black'/><circle cx='8' cy='19' r='1.6' fill='black'/><circle cx='20' cy='19' r='1.6' fill='black'/></svg>"); }
.tile-glyph[data-glyph="wave-crest"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 18 C8 8 12 8 14 14 C16 20 20 20 25 10'/></svg>"); }
.tile-glyph[data-glyph="wave-trough"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10 C8 20 12 20 14 14 C16 8 20 8 25 18'/></svg>"); }
.tile-glyph[data-glyph="wave-zero"] { --glyph-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 14h22'/><path d='M3 18 C7 18 8 10 14 14 C20 18 21 10 25 10'/></svg>"); }

.tile-label {
    font-family: 'Gowun Batang', serif;
    font-size: 0.95rem;
    color: var(--ink-indigo);
    margin-top: 4px;
    line-height: 1.32;
}

.readout {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-sea);
}
.readout.small { font-size: 0.68rem; margin-top: 6px; }
.readout.tail-event { color: var(--ink-vermilion); }

.aside {
    margin-top: 18px;
    color: var(--ink-faint);
}

/* CAVEAT marginalia */
.caveat {
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: var(--ink-faint);
    transform: rotate(var(--rot, 0deg));
    display: inline-block;
}

/* YUT BOARD */
.yut-board {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 14px 6px;
    background: inherit;
    border-radius: 18px;
    box-shadow: var(--shadow-down);
    margin-bottom: 10px;
    width: 100%;
}

.yut-stick {
    width: 14px;
    height: 78px;
    border-radius: 8px;
    background: inherit;
    box-shadow: var(--shadow-up-soft);
    transform: rotate(var(--rot-i, 0deg));
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.yut-stick::after {
    content: '';
    position: absolute;
    inset: 12% 35%;
    background: var(--ink-indigo);
    opacity: 0.18;
    border-radius: 4px;
}
.yut-board:hover .yut-stick {
    transform: rotate(calc(var(--rot-i, 0deg) * -0.6));
}

/* SANTONG */
.tile-santong {
    cursor: pointer;
}

.santong-jar {
    width: 80px;
    height: 96px;
    background: inherit;
    border-radius: 14px 14px 22px 22px;
    box-shadow: var(--shadow-up);
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
}

.santong-rim {
    position: absolute;
    top: 8px;
    left: 14%;
    right: 14%;
    height: 8px;
    border-radius: 999px;
    background: inherit;
    box-shadow: var(--shadow-down);
}

.santong-sticks {
    position: absolute;
    inset: 18px 22px 8px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: flex-end;
    justify-content: center;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.santong-stick {
    width: 4px;
    height: calc(40px + (var(--si) * 4px));
    background: inherit;
    box-shadow: var(--shadow-up-soft);
    border-radius: 2px;
    transform: translateY(0) rotate(0deg);
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tile-santong.shake .santong-sticks {
    animation: santong-shake 0.48s cubic-bezier(0.36, 0, 0.66, 1);
}
.tile-santong.shake .santong-stick {
    transform: translateY(calc(-2px - var(--si) * 1.2px)) rotate(calc((var(--si) - 3) * 4deg));
}

@keyframes santong-shake {
    0%   { transform: rotate(-3deg); }
    25%  { transform: rotate(4deg); }
    50%  { transform: rotate(-2deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

.santong-output {
    margin-top: 6px;
    font-family: 'Gowun Batang', serif;
    font-size: 0.92rem;
    color: var(--ink-sea);
    max-width: 220px;
    line-height: 1.4;
    min-height: 1.4em;
    transition: opacity 0.3s ease;
}

/* PLINKO BOARD */
.plinko-board {
    width: 200px;
    height: 200px;
    background: inherit;
    border-radius: 18px;
    box-shadow: var(--shadow-down);
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
}

.plinko-peg {
    position: absolute;
    width: 6px;
    height: 6px;
    background: inherit;
    border-radius: 50%;
    box-shadow: var(--shadow-knot);
}

.plinko-ball {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    border-radius: 50%;
    box-shadow: var(--shadow-up-soft);
    pointer-events: none;
    will-change: transform;
}

.plinko-bins {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    display: flex;
    align-items: flex-end;
    padding: 0 4px;
}

.plinko-bin {
    flex: 1;
    margin: 0 1px;
    background: inherit;
    box-shadow: var(--shadow-up-soft);
    border-radius: 3px 3px 0 0;
    height: var(--h, 4%);
    transition: height 0.4s ease;
}

/* TIDE POOL */
.tide-pool {
    position: relative;
    width: 100%;
    height: 120px;
    margin: 16px 0;
}

.tide-pebble {
    position: absolute;
    border-radius: 50%;
    background: inherit;
    box-shadow: var(--shadow-up-soft);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                left 0.8s ease, width 0.4s ease, height 0.4s ease;
    will-change: left, transform;
}

.page-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--ink-faint);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.footer-mark { color: var(--ink-sea); }

/* STORM LAYER (probability rain) */
.storm-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    overflow: hidden;
}

.raindrop {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: inherit;
    box-shadow: var(--shadow-up-soft);
    will-change: transform;
    animation: raindrop-fall 2.4s linear forwards;
}

@keyframes raindrop-fall {
    from { transform: translate3d(0, -40px, 0); opacity: 0; }
    8%   { opacity: 1; }
    to   { transform: translate3d(var(--rx, 0px), 110vh, 0); opacity: 0.9; }
}

/* RESPONSIVE */
@media (max-width: 880px) {
    .band-inner { padding: 6vh 5vw; }
    .band-title { max-width: 100%; font-size: clamp(1.6rem, 6vw, 2.6rem); }
    .tile { width: calc(110px * var(--weight, 1)); min-height: calc(96px * var(--weight, 1)); padding: 12px 14px; border-radius: 18px; }
    .tile.tile-large { width: calc(170px * var(--weight, 1)); min-height: calc(150px * var(--weight, 1)); }
    .wave-spine { right: 8px; width: 22px; }
    .spine-knot::after { display: none; }
    .page-corner-controls { top: 12px; left: 12px; }
}