/* hwagryul.com — 확률 / probability as carnival
   Memphis bold shapes + dopamine color intensity */

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --c-yellow: #ffe156;
    --c-red:    #ff4a4a;
    --c-blue:   #3a5eff;
    --c-green:  #2ee8a0;
    --c-purple: #8a4fff;
    --c-ink:    #1a1a1e;
    --c-white:  #ffffff;
    --c-black:  #0a0a0e;

    --font-han:    'Black Han Sans', 'Noto Sans KR', sans-serif;
    --font-roman:  'Rubik', 'Inter', sans-serif;
    --font-num:    'Bungee', 'Rubik', sans-serif;
    --font-body:   'Nunito', 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-yellow);
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* =========================================================
   Floating nav pill (top-right)
   ========================================================= */
.nav-pill {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 100;
    padding: 12px 26px;
    border-radius: 999px;
    border: 3px solid var(--c-ink);
    background: var(--c-white);
    color: var(--c-ink);
    font-family: var(--font-roman);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    box-shadow: 4px 4px 0 var(--c-ink);
    transition: background-color 200ms ease,
                color 200ms ease,
                transform 200ms ease,
                box-shadow 200ms ease;
}

.nav-pill:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--c-ink);
}

.nav-pill:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--c-ink);
}

/* =========================================================
   Section 1 — Hero
   ========================================================= */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--c-yellow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 4px solid var(--c-ink);
}

.shape-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.shape {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    will-change: transform;
}

/* circle / dot variants */
.shape.circle, .shape.dot {
    border-radius: 50%;
    border: 3px solid var(--c-ink);
}

.shape.circle.ring,
.shape.dot.ring {
    background: transparent !important;
    border-width: 6px;
}

.c-red    { background: var(--c-red);    }
.c-blue   { background: var(--c-blue);   }
.c-green  { background: var(--c-green);  }
.c-purple { background: var(--c-purple); }

/* triangle variants — clip-path */
.shape.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border: none;
    /* simulate bold outline by stacking via filter */
    filter: drop-shadow(2px 2px 0 var(--c-ink))
            drop-shadow(-2px -2px 0 var(--c-ink));
}

.t-red    { background: var(--c-red);    }
.t-blue   { background: var(--c-blue);   }
.t-green  { background: var(--c-green);  }
.t-purple { background: var(--c-purple); }

/* zigzags — sized via SVG width attr; positioned via top/left */
.shape.zigzag {
    width: auto;
    height: auto;
    overflow: visible;
}

/* per-shape animations */
.shape[style*="--anim:rotate"] { animation: shape-rotate var(--dur) linear infinite; }
.shape[style*="--anim:bob"]    { animation: shape-bob    var(--dur) ease-in-out infinite; }
.shape[style*="--anim:pulse"]  { animation: shape-pulse  var(--dur) ease-in-out infinite; }

.shape.zigzag.z-1 { animation: zig-bob 9s  ease-in-out infinite; }
.shape.zigzag.z-2 { animation: zig-bob 12s ease-in-out infinite reverse; }
.shape.zigzag.z-3 { animation: zig-bob 7s  ease-in-out infinite; }
.shape.zigzag.z-4 { animation: zig-bob 10s ease-in-out infinite reverse; }

@keyframes shape-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes shape-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-22px); }
}

@keyframes shape-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

@keyframes zig-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-18px) rotate(3deg); }
}

/* hero title */
.hero-title-wrap {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 0 24px;
}

.hero-title {
    font-family: var(--font-han);
    font-weight: 400;
    font-size: clamp(5rem, 14vw, 14rem);
    line-height: 0.9;
    color: var(--c-ink);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    position: relative;
}

.syllable {
    display: inline-block;
    will-change: transform;
    text-shadow:
        6px 6px 0 var(--c-red),
        -6px 6px 0 var(--c-blue);
}

.syllable.syl-1 { animation: drift-left  6s ease-in-out infinite; }
.syllable.syl-2 { animation: drift-right 6s ease-in-out infinite; }

@keyframes drift-left {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-15px, -5px); }
}

@keyframes drift-right {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(15px, 5px); }
}

.connector {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--c-ink);
    align-self: center;
    margin: 0 0.05em;
    opacity: 0.6;
    transform-origin: center;
    transition: opacity 200ms ease;
    animation: connector-stretch 6s ease-in-out infinite;
}

@keyframes connector-stretch {
    0%, 100% { transform: scaleX(0.3); opacity: 0.85; }
    50%      { transform: scaleX(1.6); opacity: 0.35; }
}

.hero-sub {
    margin-top: 24px;
    font-family: var(--font-roman);
    font-weight: 700;
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.hero-corner {
    position: absolute;
    z-index: 4;
    font-family: var(--font-num);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--c-ink);
    background: var(--c-white);
    border: 3px solid var(--c-ink);
    padding: 6px 12px;
    box-shadow: 3px 3px 0 var(--c-ink);
}

.hero-corner.top-left     { top: 22px;    left: 22px; }
.hero-corner.top-right    { top: 22px;    right: 100px; }
.hero-corner.bottom-left  { bottom: 22px; left: 22px; }
.hero-corner.bottom-right { bottom: 22px; right: 22px; }

/* =========================================================
   Section 2 — The Dice (panel grid)
   ========================================================= */
.dice-section {
    position: relative;
    background: var(--c-yellow);
    padding: 80px 24px 110px;
    border-bottom: 4px solid var(--c-ink);
}

.section-tag {
    font-family: var(--font-num);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    color: var(--c-ink);
    background: var(--c-white);
    border: 3px solid var(--c-ink);
    padding: 8px 14px;
    display: inline-block;
    margin-bottom: 50px;
    box-shadow: 4px 4px 0 var(--c-ink);
}

.dice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .dice-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .dice-grid { grid-template-columns: 1fr; }
}

.panel {
    position: relative;
    border: 3px solid var(--c-ink);
    padding: 20px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 6px 6px 0 var(--c-ink);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.panel:nth-child(1) { transform: translateY(0); }
.panel:nth-child(2) { transform: translateY(18px); }
.panel:nth-child(3) { transform: translateY(-10px); }
.panel:nth-child(4) { transform: translateY(20px); }
.panel:nth-child(5) { transform: translateY(-6px); }
.panel:nth-child(6) { transform: translateY(12px); }

.panel:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--c-ink);
}

.panel-yellow { background: var(--c-yellow); }
.panel-red    { background: var(--c-red);    color: var(--c-white); }
.panel-blue   { background: var(--c-blue);   color: var(--c-white); }
.panel-green  { background: var(--c-green);  }
.panel-purple { background: var(--c-purple); color: var(--c-white); }
.panel-cyan   { background: var(--c-white);  }

.panel-label {
    font-family: var(--font-num);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}

.panel-card {
    background: var(--c-white);
    border: 3px solid var(--c-ink);
    color: var(--c-ink);
    flex: 1;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 180px;
}

.panel-btn {
    font-family: var(--font-num);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    background: var(--c-ink);
    color: var(--c-yellow);
    border: 3px solid var(--c-ink);
    padding: 8px 16px;
    transition: background-color 150ms ease, color 150ms ease;
}

.panel-btn:hover {
    background: var(--c-red);
    color: var(--c-white);
}

/* pie */
.pie {
    transform-origin: center;
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#pie-slice {
    transition: d 800ms ease;
}

/* progress bar */
.bar-track {
    width: 100%;
    height: 26px;
    background: var(--c-yellow);
    border: 3px solid var(--c-ink);
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    width: 0%;
    background:
        repeating-linear-gradient(
            45deg,
            var(--c-red) 0 10px,
            var(--c-purple) 10px 20px
        );
    border-right: 3px solid var(--c-ink);
    transition: width 1000ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bar-readout {
    font-family: var(--font-num);
    font-size: 1.6rem;
    color: var(--c-ink);
}

/* coin */
.coin {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: transform 1000ms cubic-bezier(0.4, 0.1, 0.2, 1);
}

.coin.flipping {
    /* JS sets dynamic rotation */
}

.coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid var(--c-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-size: 2.4rem;
    backface-visibility: hidden;
}

.coin-face.heads {
    background: var(--c-yellow);
    color: var(--c-ink);
}

.coin-face.tails {
    background: var(--c-blue);
    color: var(--c-white);
    transform: rotateY(180deg);
}

/* card stack */
.card-stack {
    position: relative;
    width: 110px;
    height: 140px;
}

.card-piece {
    position: absolute;
    width: 80px;
    height: 110px;
    background: var(--c-white);
    border: 3px solid var(--c-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-size: 2rem;
    box-shadow: 3px 3px 0 var(--c-ink);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.2, 1);
    top: 15px;
    left: 15px;
}

.card-piece[data-suit="A"] { background: var(--c-red);   color: var(--c-white); }
.card-piece[data-suit="K"] { background: var(--c-blue);  color: var(--c-white); }
.card-piece[data-suit="Q"] { background: var(--c-green); color: var(--c-ink);   }

/* wheel */
.wheel-wrap {
    position: relative;
}

.wheel-rotor {
    transform-origin: 50px 50px;
    transform-box: fill-box;
    transition: transform 2400ms cubic-bezier(0.15, 0.8, 0.15, 1);
}

/* binary */
.binary-toggle {
    display: flex;
    gap: 18px;
    align-items: center;
    font-family: var(--font-num);
    font-size: 3.2rem;
}

.bit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 3px solid var(--c-ink);
    background: var(--c-white);
    color: var(--c-ink);
    transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.bit.active {
    background: var(--c-ink);
    color: var(--c-green);
    transform: scale(1.08) rotate(-4deg);
}

/* =========================================================
   Section 3 — The Strip (ticker)
   ========================================================= */
.ticker-section {
    background: var(--c-black);
    overflow: hidden;
    padding: 22px 0;
    border-top: 4px solid var(--c-ink);
    border-bottom: 4px solid var(--c-ink);
}

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    font-family: var(--font-num);
    font-size: 4rem;
    letter-spacing: 0.05em;
    animation: ticker-scroll 32s linear infinite;
    will-change: transform;
}

.ticker-track .digit {
    padding: 0 0.18em;
    display: inline-block;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =========================================================
   Section 4 — The Statement
   ========================================================= */
.statement-section {
    background: var(--c-white);
    color: var(--c-ink);
    padding: 160px 24px;
    text-align: center;
    border-bottom: 4px solid var(--c-ink);
}

.statement-text {
    font-family: var(--font-han);
    font-weight: 400;
    font-size: clamp(2.2rem, 6vw, 5rem);
    color: var(--c-ink);
    line-height: 1.1;
}

.statement-trans {
    margin-top: 22px;
    font-family: var(--font-roman);
    font-size: 0.95rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-ink);
    opacity: 0.7;
}

/* =========================================================
   Section 5 — Playground
   ========================================================= */
.playground-section {
    position: relative;
    background: var(--c-yellow);
    min-height: 100vh;
    overflow: hidden;
    border-bottom: 4px solid var(--c-ink);
}

.playground-tag {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 6;
    font-family: var(--font-num);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    background: var(--c-white);
    border: 3px solid var(--c-ink);
    padding: 8px 14px;
    box-shadow: 4px 4px 0 var(--c-ink);
}

.playground-canvas {
    position: absolute;
    inset: 0;
    cursor: crosshair;
    z-index: 2;
}

.playground-counter {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 6;
    font-family: var(--font-num);
    font-size: 1.1rem;
    background: var(--c-ink);
    color: var(--c-yellow);
    padding: 10px 16px;
    border: 3px solid var(--c-ink);
    box-shadow: 4px 4px 0 var(--c-red);
    pointer-events: none;
}

.playground-clear {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 6;
    font-family: var(--font-num);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    background: var(--c-red);
    color: var(--c-white);
    border: 3px solid var(--c-ink);
    padding: 10px 18px;
    box-shadow: 4px 4px 0 var(--c-ink);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.playground-clear:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--c-ink);
}

/* spawned circles */
.spawn-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 3px solid var(--c-ink);
    transform: translate(-50%, -50%);
    will-change: transform, opacity, width, height;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    background: var(--c-ink);
    color: var(--c-white);
    padding: 60px 24px 30px;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 700px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

.footer-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 4px solid var(--c-yellow);
    padding-left: 14px;
}

.footer-key {
    font-family: var(--font-num);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--c-yellow);
}

.footer-val {
    font-family: var(--font-roman);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-white);
}

.footer-bottom {
    margin-top: 50px;
    text-align: center;
    font-family: var(--font-roman);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-yellow);
    opacity: 0.85;
}