:root {
    --ink: #432754;
    --ink-soft: #7b4f8f;
    --gold: #ffd76f;
    --gold-deep: #f6a300;
    --cyan: #5cccf3;
    --mint: #6de6b8;
    --rose: #ff6b9a;
    --pink: #ff9fce;
    --lavender: #c6b3ff;
    --card: #ffffff;
    --line: #eeddf9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Baloo 2', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 14%, rgba(255,255,255,0.2), transparent 33%),
        radial-gradient(circle at 86% 18%, rgba(136, 120, 255, 0.35), transparent 40%),
        radial-gradient(circle at 24% 86%, rgba(92, 214, 255, 0.28), transparent 34%),
        linear-gradient(160deg, #060718, #10153a 45%, #1c1450 100%);
    overflow-x: hidden;
}

.game-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    background: rgba(255, 241, 249, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
}

.topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.profile-icon,
.today-game-open {
    border: 2px solid #ffe5f3;
    background: #fff9fd;
    color: var(--ink-soft);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(141, 71, 126, 0.2);
}

.profile-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.today-menu { position: relative; }

.today-game-open {
    border-radius: 999px;
    padding: 9px 15px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    cursor: pointer;
}

.today-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 194px;
    border-radius: 10px;
    background: #8a4aa4;
    box-shadow: 0 10px 18px rgba(96, 33, 122, 0.34);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: 0.2s ease;
}

.today-menu.open .today-menu-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.today-menu-dropdown a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 11px;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    font-family: 'Fredoka', sans-serif;
    font-size: 0.86rem;
}

.today-menu-dropdown a:hover { background: rgba(255, 170, 214, 0.28); }

.arena {
    position: relative;
    min-height: 100vh;
    padding: 132px 16px 18px 140px;
}

.arena > * {
    position: relative;
    z-index: 2;
}

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

.galaxy-sky::before,
.galaxy-sky::after {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.45;
    animation: nebula-drift 14s ease-in-out infinite alternate;
}

.galaxy-sky::before {
    background: radial-gradient(circle at 30% 35%, rgba(151, 116, 255, 0.35), transparent 55%);
}

.galaxy-sky::after {
    background: radial-gradient(circle at 70% 58%, rgba(72, 170, 255, 0.3), transparent 60%);
    animation-delay: 2.4s;
}

.star-field {
    position: absolute;
    inset: 0;
}

.star-field::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(255,255,255,0.75) 0.8px, transparent 1.8px),
        radial-gradient(circle at 24% 68%, rgba(255,255,255,0.7) 0.8px, transparent 1.9px),
        radial-gradient(circle at 40% 22%, rgba(255,255,255,0.8) 0.9px, transparent 2px),
        radial-gradient(circle at 58% 80%, rgba(255,255,255,0.68) 0.8px, transparent 1.8px),
        radial-gradient(circle at 72% 34%, rgba(255,255,255,0.74) 0.9px, transparent 1.9px),
        radial-gradient(circle at 90% 18%, rgba(255,255,255,0.72) 0.8px, transparent 1.8px);
    opacity: 0.6;
    animation: star-blink-bg 4s ease-in-out infinite;
}

.star {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    opacity: 0.3;
    animation: star-blink var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
}

.space-stickers {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.sticker {
    position: absolute;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    filter: drop-shadow(0 4px 8px rgba(18, 10, 47, 0.45));
    animation: sticker-float 4.8s ease-in-out infinite;
}

.st-1 { left: 4%; top: 20%; }
.st-2 { left: 16%; top: 78%; animation-delay: 0.6s; }
.st-3 { right: 5%; top: 24%; animation-delay: 1.2s; }
.st-4 { right: 10%; bottom: 10%; animation-delay: 1.8s; }
.st-5 { left: 40%; top: 8%; animation-delay: 2.2s; }
.st-6 { right: 35%; top: 14%; animation-delay: 2.8s; }
.st-7 { left: 6%; bottom: 22%; animation-delay: 3.3s; }
.st-8 { right: 20%; bottom: 16%; animation-delay: 3.8s; }

.sparkle-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.spark {
    position: absolute;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 6px 10px rgba(122, 69, 140, 0.28);
    animation: twinkle 3.6s ease-in-out infinite;
}

.s1 { left: 8%; top: 19%; font-size: 1.2rem; }
.s2 { left: 30%; top: 10%; font-size: 1.1rem; animation-delay: 0.6s; }
.s3 { right: 18%; top: 18%; font-size: 1.3rem; animation-delay: 1.1s; }
.s4 { left: 12%; bottom: 12%; font-size: 1rem; animation-delay: 1.6s; }
.s5 { right: 8%; bottom: 17%; font-size: 1.2rem; animation-delay: 2.1s; }
.s6 { right: 34%; bottom: 9%; font-size: 1rem; animation-delay: 2.8s; }

.hud-strip {
    position: fixed;
    top: 63px;
    left: 50%;
    transform: translateX(-50%);
    width: min(980px, calc(100vw - 30px));
    z-index: 40;
    border: 3px solid #fff;
    border-radius: 18px;
    background: linear-gradient(140deg, #fff2f9, #ffd9ea 42%, #ffe7c7 100%);
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    box-shadow: 0 12px 24px rgba(124, 69, 134, 0.24);
}

.hud-strip p {
    margin: 0;
    text-align: center;
    font-family: 'Fredoka', sans-serif;
    color: #7a4c87;
    font-size: 0.82rem;
    font-weight: 600;
}

#hud-coins {
    color: #a15f00;
    font-weight: 700;
}

.quick-controls {
    position: fixed;
    top: 152px;
    right: 12px;
    z-index: 42;
    display: grid;
    gap: 6px;
    width: min(230px, calc(100vw - 20px));
    border: 3px solid #fff;
    border-radius: 14px;
    background: rgba(255, 247, 252, 0.92);
    box-shadow: 0 8px 16px rgba(99, 43, 128, 0.26);
    padding: 10px;
}

.quick-label {
    font-family: 'Fredoka', sans-serif;
    font-size: 0.78rem;
    color: #764a84;
    font-weight: 700;
}

.quick-topic-select {
    width: 100%;
    border: 2px solid #efd6ff;
    border-radius: 10px;
    background: #fff;
    color: #5e3d6c;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.86rem;
    padding: 7px 8px;
    outline: none;
}

.quick-topic-select:focus {
    border-color: #ff9fce;
    box-shadow: 0 0 0 2px rgba(255, 159, 206, 0.2);
}

.quick-restart-btn {
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6aa2, #ffa74f);
    color: #fff;
    padding: 8px 12px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.left-panel {
    position: fixed;
    top: 142px;
    left: 10px;
    z-index: 41;
    width: 170px;
    display: grid;
    gap: 10px;
}

.reward-card {
    border: 3px solid #fff;
    border-radius: 15px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 8px 16px rgba(128, 66, 137, 0.22);
    padding: 10px 8px;
}

.reward-card h2 {
    margin: 0 0 8px;
    font-size: 0.78rem;
    line-height: 1.1;
    color: #8a4aa4;
    font-family: 'Fredoka', sans-serif;
    text-transform: uppercase;
}

.reward-card h2::before { content: "[R] "; }

.mode-tip,
.reward-card p {
    margin: 8px 0 0;
    font-size: 0.65rem;
    line-height: 1.2;
    color: #845c90;
}

.play-ground {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    border: 3px solid #fff;
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 172, 213, 0.2), transparent 22%),
        radial-gradient(circle at 84% 82%, rgba(124, 204, 255, 0.24), transparent 24%),
        linear-gradient(160deg, rgba(255,255,255,0.74), rgba(255,252,255,0.45));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75), 0 14px 30px rgba(118, 62, 126, 0.23);
    overflow: hidden;
    min-height: 68vh;
}

.box-trail {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.reason-box {
    position: relative;
    border: 4px solid #fff;
    border-radius: 24px;
    background: linear-gradient(140deg, #ffe4f4 0%, #ffd7cf 40%, #ffe79a 100%);
    box-shadow: 0 0 0 3px rgba(121, 56, 122, 0.35), 0 12px 24px rgba(94, 36, 118, 0.26);
    overflow: hidden;
    transform-origin: top center;
}

.reason-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.55), transparent 35%);
}

.reason-box.active {
    animation: box-pop 0.35s ease, candy-shimmer 1.4s ease;
}

.reason-box.locked {
    opacity: 0.88;
    filter: saturate(0.82);
}

.reason-box.wrong {
    animation: box-shake 0.42s ease;
    border-color: #ff4a4a;
    background: linear-gradient(160deg, #fff1f1, #ffcaca 58%, #ffb0b0);
    box-shadow: 0 0 0 2px rgba(255, 78, 78, 0.32), 0 12px 24px rgba(176, 38, 38, 0.28);
}

.reason-box.correct-win {
    border-color: #ffd86f;
    background: linear-gradient(150deg, #fff7d3 0%, #ffe27c 56%, #ffd45f 100%);
    box-shadow: 0 0 0 2px rgba(255, 227, 130, 0.55), 0 0 26px rgba(255, 206, 72, 0.46), 0 14px 28px rgba(184, 129, 22, 0.32);
    animation: gold-pulse 0.55s ease;
}

.box-head {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 3px dashed #f6b8d5;
    background: linear-gradient(140deg, #ff95c5, #ffba92 45%, #ffd96a 100%);
    font-family: 'Fredoka', sans-serif;
    color: #5d2e66;
    font-size: 0.83rem;
}

.box-timer {
    justify-self: end;
    font-weight: 700;
}

.timer-line {
    grid-column: 1 / -1;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.7);
    overflow: hidden;
    border: 2px solid rgba(132, 72, 140, 0.28);
}

.timer-fill {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #46d99f, #98eec9);
    transition: width 0.2s linear, background 0.2s linear;
}

.box-question {
    margin: 0;
    padding: 14px 12px 10px;
    font-size: clamp(1.05rem, 2.4vw, 1.34rem);
    line-height: 1.25;
    color: #4e2360;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 2px 12px 12px;
}

.option-btn {
    border: 3px solid #fff;
    border-radius: 16px;
    background: linear-gradient(150deg, #fff8ff, #ffe1f1 48%, #ffd0e8 100%);
    color: #5b2d71;
    padding: 11px 12px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 5px 0 rgba(124, 60, 127, 0.34);
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.15s ease;
}

.option-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 7px 0 rgba(124, 60, 127, 0.38);
    background: linear-gradient(140deg, #fff, #ffd4ea);
}

.option-btn.correct {
    border-color: #65dca6;
    background: linear-gradient(140deg, #eafff2, #b8ffd9);
    box-shadow: 0 0 0 2px rgba(101, 220, 166, 0.45), 0 8px 18px rgba(58, 172, 121, 0.34);
    animation: option-correct-glow 0.5s ease;
}

.option-btn.incorrect {
    border-color: #ff3b3b;
    background: linear-gradient(140deg, #ffe9e9, #ffc2c2);
    color: #7f1010;
    box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.34), 0 8px 18px rgba(164, 35, 35, 0.3);
}

.box-status {
    margin: 0;
    padding: 0 12px 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #703f84;
}

.coin-pop {
    position: absolute;
    right: 12px;
    top: 12px;
    border: 2px solid #ffd89e;
    border-radius: 999px;
    background: #fff2d5;
    color: #975c00;
    padding: 4px 10px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    animation: coin-pop 0.95s ease forwards;
}

.happy-reward {
    position: absolute;
    left: 12px;
    top: 12px;
    border: 2px solid #ffe59f;
    border-radius: 999px;
    background: #fff9df;
    color: #7f5700;
    padding: 4px 10px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    animation: happy-pop 1.2s ease forwards;
}

.celebration-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    color: #fff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(99, 40, 112, 0.36);
    animation: congrats-burst 1.05s ease forwards;
}

.burst {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    pointer-events: none;
    animation: burst 0.72s ease forwards;
}

.floating {
    position: absolute;
    font-size: 1.9rem;
    filter: drop-shadow(0 6px 10px rgba(123, 58, 132, 0.22));
    z-index: 1;
    animation: bob 2.8s ease-in-out infinite;
}

.floating-a { left: 3%; top: 12%; }
.floating-b { right: 4%; top: 16%; animation-delay: 0.6s; }
.floating-c { left: 6%; bottom: 12%; animation-delay: 1.2s; }
.floating-d { right: 7%; bottom: 10%; animation-delay: 1.8s; }

.summary-backdrop {
    position: fixed;
    inset: 0;
    z-index: 85;
    background: rgba(57, 24, 66, 0.42);
    backdrop-filter: blur(7px);
}

.summary {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 90;
    width: min(520px, calc(100vw - 24px));
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.7), transparent 42%),
        linear-gradient(150deg, #ffeefa, #ffd7eb 50%, #ffe6be);
    box-shadow: 0 18px 40px rgba(106, 56, 121, 0.36);
    text-align: center;
    padding: 18px 16px;
    animation: summary-pop 0.3s ease;
}

.summary h2 {
    margin: 0 0 6px;
    font-family: 'Fredoka', sans-serif;
    color: #6f3c82;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.summary p { margin: 6px 0; }

.summary-next-tip {
    font-family: 'Fredoka', sans-serif;
    color: #6b3f7a;
    margin-top: 10px;
}

.summary-topic-picks {
    margin: 8px 0 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.summary-topic-btn {
    border: 2px solid #fff;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    color: #724383;
    padding: 7px 9px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
}

.summary-topic-btn.active {
    background: linear-gradient(140deg, #ff89be, #ffbd7d 52%, #95dfff);
    border-color: #fff2f8;
    color: #fff;
}

.start-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: rgba(57, 24, 66, 0.45);
    backdrop-filter: blur(5px);
}

.start-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

.start-card {
    width: min(560px, 92vw);
    border: 3px solid #fff;
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(150deg, #ffe9f6, #ffd6ea 38%, #ffd7ad 72%, #fff0a6);
    box-shadow: 0 20px 32px rgba(95, 42, 105, 0.34);
    text-align: center;
}

.start-kicker {
    margin: 0;
    color: #9a4f84;
    font-family: 'Fredoka', sans-serif;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.start-card h1 {
    margin: 4px 0 8px;
    font-family: 'Fredoka', sans-serif;
    color: #5f356e;
}

.topic-picks {
    margin: 12px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.topic-btn {
    border: 2px solid #fff;
    border-radius: 999px;
    background: rgba(255,255,255,0.84);
    color: #724383;
    padding: 8px 10px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
}

.topic-btn.active {
    background: linear-gradient(140deg, #ff89be, #ffbd7d 52%, #95dfff);
    border-color: #fff2f8;
    color: #fff;
}

.start-btn {
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6aa2, #ffa74f);
    color: #fff;
    padding: 10px 18px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

@keyframes box-pop {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes box-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

@keyframes gold-pulse {
    0% { transform: scale(0.98); filter: brightness(1); }
    45% { transform: scale(1.02); filter: brightness(1.1); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes candy-shimmer {
    0% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(1.08) brightness(1.05); }
    100% { filter: saturate(1) brightness(1); }
}

@keyframes option-correct-glow {
    0% { transform: scale(0.98); }
    40% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes burst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}

@keyframes coin-pop {
    0% { opacity: 0; transform: translateY(8px) scale(0.65); }
    20% { opacity: 1; transform: translateY(0) scale(1.12); }
    100% { opacity: 0; transform: translateY(-22px) scale(1); }
}

@keyframes happy-pop {
    0% { opacity: 0; transform: translateY(8px) scale(0.7); }
    20% { opacity: 1; transform: translateY(0) scale(1.08); }
    100% { opacity: 0; transform: translateY(-18px) scale(1); }
}

@keyframes congrats-burst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2) rotate(35deg); }
}

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

@keyframes twinkle {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.75; }
    50% { transform: scale(1.2) translateY(-3px); opacity: 1; }
}

@keyframes star-blink {
    0%, 100% { opacity: 0.15; transform: scale(0.85); }
    40% { opacity: 0.95; transform: scale(1.2); }
    70% { opacity: 0.45; transform: scale(1); }
}

@keyframes star-blink-bg {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.8; }
}

@keyframes nebula-drift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    100% { transform: translate3d(1.5%, 1.2%, 0) scale(1.06); }
}

@keyframes sticker-float {
    0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
    50% { transform: translateY(-10px) rotate(5deg) scale(1.06); }
}

@keyframes summary-pop {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 980px) {
    .arena { padding: 160px 12px 18px; }
    .quick-controls {
        position: static;
        margin: 0 0 10px auto;
        width: 100%;
    }
    .left-panel {
        position: static;
        width: 100%;
        grid-template-columns: 1fr;
        margin-bottom: 10px;
    }
    .hud-strip { 
        top: 60px; 
        grid-template-columns: repeat(4, minmax(0, 1fr)); 
        width: calc(100vw - 16px);
        padding: 6px;
        gap: 4px;
    }
    .hud-strip p {
        font-size: 0.7rem;
        padding: 4px 2px;
    }
}

@media (max-width: 720px) {
    .arena { padding: 220px 12px 18px; }
    .hud-strip { 
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
    }
    .level-hud-main {
        grid-column: span 3;
    }
    .topic-picks { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .arena { padding: 250px 12px 18px; }
    .hud-strip { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
    .level-hud-main {
        grid-column: span 2;
    }
}

/* Arcade game layer */
:root {
    --ink: #e7f6ff;
    --ink-soft: #bfe7ff;
    --gold: #fdb022;
    --gold-deep: #ce6f00;
    --cyan: #3cc7ff;
    --mint: #20e4bc;
    --rose: #ff6678;
    --pink: #ffd58b;
    --lavender: #a8f3ff;
    --card: #0e2b45;
    --line: #3d6c93;
}

body {
    font-family: 'Fredoka', sans-serif;
    background:
        radial-gradient(circle at 14% 12%, rgba(44, 170, 255, 0.22), transparent 38%),
        radial-gradient(circle at 86% 82%, rgba(20, 210, 255, 0.16), transparent 34%),
        radial-gradient(circle at 55% -10%, rgba(115, 189, 255, 0.2), transparent 30%),
        linear-gradient(165deg, #02101e 0%, #07243e 45%, #0b3356 100%);
}

.game-topbar {
    background: rgba(4, 25, 42, 0.76);
    border-bottom: 1px solid rgba(124, 199, 255, 0.28);
}

.profile-icon,
.today-game-open {
    border: 2px solid #3e82b5;
    background: #0f3556;
    color: #d9f0ff;
    box-shadow: 0 8px 16px rgba(0, 10, 20, 0.4);
}

.today-menu-dropdown {
    background: linear-gradient(165deg, #07243d, #0f4065);
    box-shadow: 0 14px 28px rgba(2, 12, 24, 0.5);
}

.today-menu-dropdown a:hover { background: rgba(118, 232, 255, 0.22); }

.hud-strip {
    position: sticky;
    top: 64px;
    left: auto;
    transform: none;
    width: min(980px, calc(100vw - 24px));
    margin: 0 auto 12px;
    z-index: 35;
    border: 3px solid #ffffff;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(12, 42, 68, 0.92), rgba(16, 58, 90, 0.92));
    box-shadow: 0 14px 28px rgba(3, 14, 27, 0.44);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    animation: hud-float 4.2s ease-in-out infinite;
    overflow: hidden;
}

.hud-strip::before {
    content: "";
    position: absolute;
    inset: -30% auto -30% -20%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(110, 212, 255, 0.2), transparent);
    transform: rotate(12deg);
    animation: hud-scan 4.8s linear infinite;
    pointer-events: none;
}

.hud-strip p {
    color: #d8efff;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid rgba(154, 214, 255, 0.42);
    border-radius: 10px;
    padding: 6px 7px;
    background: rgba(7, 34, 55, 0.56);
}

#hud-coins {
    color: #ffcf57;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: none;
}

#hud-coins.coin-hit {
    animation: coin-hud-hit 0.55s ease;
}

.quick-controls {
    border: 2px solid #ffffff;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(10, 40, 67, 0.94), rgba(14, 52, 82, 0.94));
    box-shadow: 0 12px 26px rgba(3, 14, 26, 0.45);
}

.quick-label {
    color: #cdeeff;
    font-weight: 700;
}

.quick-topic-select {
    border: 2px solid #4d8ec0;
    border-radius: 11px;
    color: #d8eeff;
    background: #113d62;
}

.quick-topic-select:focus {
    border-color: #19b6ff;
    box-shadow: 0 0 0 3px rgba(25, 182, 255, 0.2);
}

.quick-restart-btn,
.quick-secondary-btn {
    border: 2px solid #ffffff;
    border-radius: 12px;
    padding: 9px 10px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.quick-restart-btn {
    background: linear-gradient(145deg, #ff6e3d, #ffaf1d);
    color: #ffffff;
    box-shadow: 0 5px 0 rgba(168, 79, 7, 0.45);
}

.quick-secondary-btn {
    background: linear-gradient(145deg, #14a4ee, #10d4d1);
    color: #ffffff;
    box-shadow: 0 5px 0 rgba(13, 88, 121, 0.45);
}

.quick-restart-btn:hover,
.quick-secondary-btn:hover {
    transform: translateY(-2px);
}

.shortcut-tip {
    margin: 0;
    font-size: 0.72rem;
    color: #a9ddff;
    font-weight: 600;
}

.reward-card {
    border: 3px solid #ffffff;
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(10, 42, 68, 0.94), rgba(16, 60, 92, 0.94));
    box-shadow: 0 10px 20px rgba(2, 13, 25, 0.46);
}

.reward-card h2 {
    color: #d8eeff;
    letter-spacing: 0.04em;
}

.reward-card h2::before { content: "XP "; }

.mode-tip,
.reward-card p {
    color: #b0dcfa;
    font-size: 0.72rem;
}

.play-ground {
    border: 3px solid #ffffff;
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 10%, rgba(25, 182, 255, 0.18), transparent 30%),
        radial-gradient(circle at 8% 90%, rgba(18, 223, 176, 0.14), transparent 30%),
        linear-gradient(160deg, rgba(12, 45, 72, 0.92), rgba(8, 34, 56, 0.94));
    box-shadow: 0 18px 32px rgba(2, 12, 24, 0.52);
}

.reason-box {
    border: 3px solid #ffffff;
    border-radius: 20px;
    background: linear-gradient(150deg, #f8fdff, #e8f6ff 52%, #d7f2ff);
    box-shadow: 0 6px 14px rgba(2, 12, 24, 0.18);
}

.reason-box.active {
    animation: box-pop 0.25s ease;
}

.reason-box.correct-win {
    border-color: #ffd774;
    background: linear-gradient(150deg, #fff7d8 0%, #ffe28b 56%, #ffcb58 100%);
    box-shadow: 0 6px 14px rgba(120, 78, 8, 0.22);
}

.box-head {
    border-bottom: 2px dashed #95daf7;
    background: linear-gradient(145deg, #8be3ff, #47c6f3 52%, #39dbc7);
    color: #093b58;
}

.box-question {
    color: #0f3f5d;
    text-shadow: none;
}

.option-btn {
    border: 2px solid #ffffff;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff, #eef9ff);
    color: #0f3f5d;
    box-shadow: 0 4px 0 rgba(24, 91, 129, 0.35);
}

.option-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 0 rgba(24, 91, 129, 0.35);
    background: linear-gradient(145deg, #ffffff, #dcf5ff);
}

.option-btn.correct {
    border-color: #14d79f;
    background: linear-gradient(145deg, #ecfff8, #b0ffe2);
    box-shadow: 0 4px 10px rgba(16, 141, 105, 0.2);
}

.option-btn.incorrect {
    border-color: #ff5b5b;
    background: linear-gradient(145deg, #fff3f3, #ffc9c9);
    color: #8f1d1d;
    box-shadow: 0 4px 10px rgba(147, 34, 34, 0.2);
}

.box-status {
    color: #195273;
    font-size: 0.9rem;
}

.coin-pop,
.happy-reward {
    border: 2px solid #ffd06a;
    background: #fff6dc;
    color: #6f3d00;
    font-size: 0.92rem;
    font-weight: 800;
    text-shadow: none;
}

.coin-word-fly {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 120;
    pointer-events: none;
    color: #ffffff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 1.32rem;
    letter-spacing: 0.04em;
    border: 2px solid rgba(255, 220, 120, 0.88);
    border-radius: 999px;
    padding: 8px 14px;
    background: linear-gradient(145deg, rgba(255, 195, 68, 0.96), rgba(255, 151, 34, 0.95));
    box-shadow: 0 0 18px rgba(255, 179, 0, 0.7), 0 8px 18px rgba(0, 0, 0, 0.35);
    text-shadow: none;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    transition: transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.62s ease;
}

.coin-stream-token {
    position: fixed;
    z-index: 123;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #ffe18a;
    background: radial-gradient(circle at 32% 28%, #fff5c8, #ffd66e 58%, #f1a41f);
    color: #8e4f00;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px rgba(255, 189, 48, 0.75), 0 8px 14px rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: transform 0.72s cubic-bezier(0.22, 0.8, 0.22, 1), opacity 0.72s ease;
}

.coin-stream-token.move {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + var(--arc))) scale(0.62);
    opacity: 0;
}

.gem-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    pointer-events: none;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #1ac5f1;
    text-shadow: none;
    animation: congrats-burst 1.05s ease forwards;
}

.gem-particle:nth-child(2n) {
    color: #a85bff;
}

.gem-particle:nth-child(3n) {
    color: #1fd8a4;
}

.summary-backdrop {
    background: rgba(11, 53, 79, 0.36);
}

.summary {
    border: 3px solid #ffffff;
    border-radius: 20px;
    background: linear-gradient(150deg, #f7fdff, #e8f7ff 52%, #ffe9bf);
    box-shadow: 0 22px 44px rgba(2, 12, 24, 0.52);
    color: #1f2a6e;
}

.summary h2,
.summary-next-tip {
    color: #0f3f5d;
}

.summary p {
    color: #1f2a6e;
    font-weight: 700;
}

#summary-score,
#summary-accuracy,
#summary-coins,
#summary-avg-time,
#summary-best {
    color: #1f2a6e;
}

.summary-topic-btn,
.topic-btn {
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.95);
    color: #114264;
    border-radius: 999px;
}

.summary-topic-btn.active,
.topic-btn.active {
    background: linear-gradient(145deg, #16abef, #17d2ce 56%, #8becff);
    border-color: #ffffff;
    color: #ffffff;
}

.start-card {
    border: 3px solid #ffffff;
    border-radius: 20px;
    background: linear-gradient(150deg, #ffffff, #ecfbff 48%, #ffe9bf);
    box-shadow: 0 24px 44px rgba(13, 65, 97, 0.28);
}

.start-kicker,
.start-card h1 {
    color: #0f3f5d;
}

.start-btn {
    border: 2px solid #ffffff;
    border-radius: 12px;
    background: linear-gradient(145deg, #ff7a2c, #ffbe28);
    color: #ffffff;
    box-shadow: 0 6px 0 rgba(162, 79, 12, 0.42);
}

@keyframes hud-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes coin-hud-hit {
    0% { transform: scale(1); filter: brightness(1); }
    45% { transform: scale(1.08); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes hud-scan {
    0% { transform: translateX(-28%) rotate(12deg); opacity: 0; }
    14% { opacity: 1; }
    50% { opacity: 0.9; }
    100% { transform: translateX(320%) rotate(12deg); opacity: 0; }
}

/* Kids Puzzle Game Final Theme */
body {
    font-family: 'Baloo 2', 'Fredoka', sans-serif;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 235, 117, 0.35), transparent 30%),
        radial-gradient(circle at 88% 15%, rgba(127, 149, 255, 0.35), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(117, 245, 255, 0.3), transparent 35%),
        linear-gradient(155deg, #49b6ff, #6f78ff 48%, #9c69ff 100%);
}

.arena::before,
.arena::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.arena::before {
    width: 220px;
    height: 220px;
    left: -60px;
    bottom: 80px;
    background: rgba(255, 255, 255, 0.2);
}

.arena::after {
    width: 160px;
    height: 160px;
    right: 40px;
    top: 180px;
    background: rgba(255, 255, 255, 0.16);
}

.hud-strip {
    grid-template-columns: 1.5fr repeat(7, minmax(0, 1fr));
    gap: 8px;
    border: 4px solid #ffffff;
    border-radius: 22px;
    background: linear-gradient(140deg, rgba(255,255,255,0.94), rgba(233, 244, 255, 0.94));
    box-shadow: 0 14px 0 rgba(70, 83, 200, 0.35), 0 24px 36px rgba(28, 38, 110, 0.28);
    padding: 10px;
}

.level-hud-main {
    grid-column: span 2;
    display: grid;
    gap: 6px;
    align-content: center;
    padding: 2px 6px 2px 4px;
}

#hud-level-title {
    margin: 0;
    color: #3f38b8;
    font-size: 0.95rem;
    font-weight: 800;
}

.level-progress {
    height: 14px;
    border-radius: 999px;
    background: rgba(111, 120, 255, 0.16);
    border: 2px solid #ffffff;
    overflow: hidden;
}

#level-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd84a, #7df46f);
    transition: width 0.3s ease;
}

.combo-meter {
    height: 10px;
    border-radius: 999px;
    background: #e2d8ff;
    border: 2px solid #ffffff;
    overflow: hidden;
}

#combo-meter-fill {
    display: block;
    width: 0%;
    height: 100%;
    background: #ff8a2a;
    transition: width 0.25s ease;
}

.hud-strip p {
    margin: 0;
    border: 2px solid #ffffff;
    border-radius: 12px;
    background: linear-gradient(140deg, #6ec6ff, #7f89ff 58%, #b17bff);
    color: #ffffff;
    font-size: 0.79rem;
    font-weight: 800;
    padding: 7px 8px;
    text-align: center;
    box-shadow: 0 4px 0 rgba(66, 55, 179, 0.38);
}

.hud-hidden { display: none !important; }

.play-ground {
    border-radius: 28px;
    border: 4px solid #ffffff;
    background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(220,241,255,0.92));
}

.reason-box {
    border: 4px solid #ffffff;
    border-radius: 26px;
    background: linear-gradient(160deg, #fffef2, #f4f2ff 50%, #e9f8ff);
    box-shadow: 0 0 0 4px rgba(112, 95, 255, 0.3), 0 10px 0 rgba(86, 76, 213, 0.34), 0 20px 28px rgba(53, 50, 145, 0.28);
}

.box-head {
    border-bottom: 3px dashed rgba(87, 100, 255, 0.35);
    background: linear-gradient(145deg, #5ec8ff, #7d89ff 58%, #9f6cff);
    color: #ffffff;
    font-size: 0.84rem;
}

.box-question {
    color: #392f9f;
    font-size: clamp(1.08rem, 2.4vw, 1.4rem);
    font-weight: 700;
}

.options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.option-btn {
    min-height: 78px;
    border: 3px solid #ffffff;
    border-radius: 20px;
    background: linear-gradient(140deg, #ffe56f, #ffbc5f 45%, #ffa8ae 100%);
    color: #3f2f91;
    box-shadow: 0 6px 0 rgba(170, 93, 20, 0.38);
    display: flex;
    align-items: center;
    gap: 10px;
    transform-origin: center;
}

.option-btn:hover {
    transform: translateY(-3px) scale(1.02);
    animation: tile-bounce 0.28s ease;
}

.option-btn:active {
    transform: scale(0.96);
}

.option-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    flex: 0 0 auto;
}

.option-text {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
}

.option-btn.correct {
    border-color: #7df46f;
    background: linear-gradient(145deg, #dbffd9, #9ff49c);
    box-shadow: 0 0 0 3px rgba(76, 223, 93, 0.45), 0 0 20px rgba(90, 255, 142, 0.8), 0 8px 0 rgba(38, 157, 73, 0.35);
}

.reason-box.wrong {
    border-color: #ff6d74;
    box-shadow: 0 0 0 3px rgba(255, 97, 107, 0.4), 0 10px 0 rgba(191, 58, 67, 0.36), 0 18px 26px rgba(116, 30, 37, 0.3);
    animation: box-shake 0.45s ease;
}

.win-star {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 6;
    color: #ffdd59;
    font-size: 1rem;
    text-shadow: 0 0 12px rgba(255, 229, 130, 0.8);
    animation: win-star-burst 0.86s ease forwards;
}

@keyframes tile-bounce {
    0% { transform: translateY(-3px) scale(1.02); }
    50% { transform: translateY(-1px) scale(1.05); }
    100% { transform: translateY(-3px) scale(1.02); }
}

@keyframes win-star-burst {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    25% { transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); }
}

/* Solid mobile game question box UI */
.reason-box {
    border: 4px solid #2c3198;
    border-radius: 24px;
    background: #fff7d6;
    box-shadow: 0 10px 0 #2c3198, 0 16px 20px rgba(32, 35, 112, 0.28);
    filter: none;
}

.reason-box::before {
    display: none;
}

.reason-box.correct-win {
    border-color: #1f9b52;
    background: #d8ffd9;
    box-shadow: 0 10px 0 #1f9b52, 0 16px 20px rgba(22, 95, 52, 0.28);
}

.reason-box.wrong {
    border-color: #d63a3a;
    background: #ffe1e1;
    box-shadow: 0 10px 0 #d63a3a, 0 16px 20px rgba(124, 37, 37, 0.28);
}

.box-head {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 3px solid #2c3198;
    background: #5e6bff;
    color: #ffffff;
}

.box-title {
    margin: 0;
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.04rem;
    font-weight: 800;
    line-height: 1.1;
}

.box-timer {
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #ffcd2e;
    color: #5a3f00;
    padding: 4px 10px;
    font-size: 0.9rem;
    font-weight: 800;
}

.timer-line {
    grid-column: 1 / -1;
    height: 12px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #c6d1ff;
}

.timer-fill {
    background: #22c55e;
    transition: width 0.2s linear;
}

.box-question {
    margin: 0;
    padding: 14px 14px 10px;
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.08rem, 2.5vw, 1.34rem);
    font-weight: 800;
    color: #2a286f;
}

.options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 12px 14px;
}

.option-btn {
    min-height: 84px;
    border: 4px solid #ffffff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: #ffffff;
    text-align: left;
    box-shadow: 0 7px 0 rgba(30, 30, 30, 0.35);
    transform: translateY(0);
    transition: transform 0.14s ease;
    animation: tile-enter 0.32s ease both;
}

.option-btn:hover {
    transform: translateY(-3px);
    color: #ffffff;
}

.option-btn:active {
    transform: translateY(3px);
}

.option-v1 { background: #39b54a; }
.option-v2 { background: #ff8b2c; }
.option-v3 { background: #8b59ff; }
.option-v4 { background: #2a9df4; }

.option-icon {
    width: 34px;
    height: 34px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.24);
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.option-text {
    font-size: 0.95rem;
    line-height: 1.2;
}

.option-btn .option-text,
.option-btn .option-icon {
    color: inherit;
}

.option-v1:hover { background: #2fa243; color: #ffffff; }
.option-v2:hover { background: #e97a1f; color: #ffffff; }
.option-v3:hover { background: #7948eb; color: #ffffff; }
.option-v4:hover { background: #1f90e5; color: #ffffff; }

.option-btn.correct {
    border-color: #ffffff;
    background: #2ecc71;
    box-shadow: 0 7px 0 #18894a;
}

.option-btn.incorrect {
    border-color: #ffffff;
    background: #ef4444;
    box-shadow: 0 7px 0 #a62828;
}

.win-star {
    color: #ffd84a;
    text-shadow: none;
}

@media (max-width: 720px) {
    .options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .option-btn {
        min-height: 76px;
    }
}

/* Addictive loop UI hooks */
#start-streak {
    margin: 6px 0 0;
    color: #2e2d8f;
    font-weight: 700;
}

#hud-combo.hot {
    animation: combo-pulse 0.5s ease;
}

.combo-banner {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    z-index: 7;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #ff8f2c;
    color: #ffffff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    padding: 6px 12px;
    box-shadow: 0 6px 0 #bb5910;
    animation: combo-pop 1s ease forwards;
}

.combo-banner.chest {
    background: #3b82f6;
    box-shadow: 0 6px 0 #1e4da0;
}

.procedural-card h2::before {
    content: "P ";
}

.procedural-banner {
    margin: 10px auto 0;
    width: fit-content;
    padding: 7px 12px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #3b82f6;
    color: #ffffff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    box-shadow: 0 5px 0 #1d4ea0;
}

.heart-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0.35;
}

.heart-rain.unlock-burst {
    opacity: 1;
}

.heart-drop {
    position: absolute;
    top: -10%;
    color: #ff4f8f;
    opacity: 0.75;
    animation: heart-fall linear infinite;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.heart-rain.unlock-burst .heart-drop {
    animation-duration: 3.2s !important;
}

.heart-lock-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.heart-lock-actions button {
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    cursor: pointer;
}

.heart-gate-screen {
    position: fixed;
    inset: 0;
    z-index: 185;
    background: rgba(22, 8, 30, 0.65);
    overflow: hidden;
}

.heart-gate-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.gate-particle {
    position: absolute;
    left: var(--x);
    bottom: -10%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #ffd34f;
    opacity: 0.9;
    animation: gate-particle-rise var(--dur) linear infinite;
    animation-delay: var(--delay);
}

.heart-gate-love-float {
    position: absolute;
    left: 50%;
    top: 15%;
    width: 1px;
    height: 1px;
    z-index: 3;
    pointer-events: none;
}

.gate-love-heart {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: var(--size);
    transform: translateX(var(--x));
    animation: gate-love-float var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
}

.heart-gate-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 3;
}

.heart-gate-center p {
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.heart-gate-center h2 {
    margin: 4px 0 0;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

#heart-gate-lock-btn {
    margin-top: 10px;
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: #fff;
    background: #ff5f98;
    cursor: pointer;
}

#heart-gate-form {
    margin-top: 10px;
}

#heart-gate-password {
    width: min(290px, 78vw);
    border: 2px solid #ffd6ea;
    border-radius: 10px;
    padding: 9px 10px;
    font-family: 'Fredoka', sans-serif;
    outline: none;
}

#heart-gate-message {
    min-height: 20px;
    margin: 8px 0 6px;
    color: #fff4fb;
    font-weight: 700;
}

.heart-gate-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52%;
    z-index: 1;
    display: grid;
    place-items: center;
    font-size: clamp(5rem, 14vw, 10rem);
    color: #ff6da8;
    border: 4px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(160deg, #ffb2d4, #ff7ab6 45%, #ff5f9f);
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);
}

.gate-heart-photo {
    width: clamp(120px, 24vw, 240px);
    height: auto;
}

.gate-heart-photo image {
    transform: scale(1.02);
    transform-origin: center;
}

.gate-heart-outline {
    fill: none;
    stroke: #fff4f9;
    stroke-width: 3.4;
}

.heart-gate-left { left: -2%; border-right: 2px solid rgba(255, 255, 255, 0.9); }
.heart-gate-right { right: -2%; border-left: 2px solid rgba(255, 255, 255, 0.9); }

.heart-gate-screen.opening .heart-gate-left {
    animation: gate-open-left 1.4s ease forwards;
}

.heart-gate-screen.opening .heart-gate-right {
    animation: gate-open-right 1.4s ease forwards;
}

@media (hover: hover) and (pointer: fine) {
    body.heart-cursor-active,
    body.heart-cursor-active * {
        cursor: none !important;
    }
}

.heart-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20000;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.heart-cursor.visible {
    opacity: 1;
    animation: cursor-heart-beat 0.9s ease-in-out infinite;
}

.heart-cursor.is-clickable {
    transform: translate(-50%, -50%) scale(1.2);
}

.heart-cursor.is-clicking {
    transform: translate(-50%, -50%) scale(0.78);
}

.heart-cursor-shape {
    position: absolute;
    left: 50%;
    top: 56%;
    width: 19px;
    height: 19px;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 4px;
    background: radial-gradient(circle at 30% 28%, #ffd8e6 0%, #ff7ca9 35%, #ff2d65 70%, #c90f44 100%);
    box-shadow:
        0 2px 0 rgba(114, 0, 38, 0.55),
        0 0 10px rgba(255, 73, 126, 0.55),
        inset -2px -2px 5px rgba(120, 0, 33, 0.35),
        inset 2px 2px 4px rgba(255, 198, 220, 0.75);
}

.heart-cursor-shape::before,
.heart-cursor-shape::after {
    content: '';
    position: absolute;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: inherit;
}

.heart-cursor-shape::before {
    left: -9.5px;
    top: 0;
}

.heart-cursor-shape::after {
    left: 0;
    top: -9.5px;
}

.heart-cursor-shine {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 9px;
    height: 4px;
    transform: translate(-50%, -50%) rotate(-22deg);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
}

@keyframes combo-pop {
    0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.8); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.95); }
}

@keyframes combo-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes tile-enter {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heart-fall {
    0% { transform: translateY(-10vh) rotate(0deg); }
    100% { transform: translateY(115vh) rotate(210deg); }
}

@keyframes gate-open-left {
    from { transform: translateX(0); }
    to { transform: translateX(-110%); }
}

@keyframes gate-open-right {
    from { transform: translateX(0); }
    to { transform: translateX(110%); }
}

@keyframes gate-love-float {
    0% { transform: translateX(var(--x)) translateY(10px) scale(0.9); opacity: 0; }
    25% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateX(calc(var(--x) + 8px)) translateY(-65px) scale(1.12); opacity: 0; }
}

@keyframes gate-particle-rise {
    0% { transform: translateY(0) scale(0.75); opacity: 0; }
    20% { opacity: 0.85; }
    100% { transform: translateY(-115vh) scale(1.12); opacity: 0; }
}

@keyframes cursor-heart-beat {
    0% { filter: drop-shadow(0 0 0 rgba(255, 43, 97, 0.35)); }
    30% { filter: drop-shadow(0 0 9px rgba(255, 43, 97, 0.62)); }
    55% { filter: drop-shadow(0 0 3px rgba(255, 43, 97, 0.4)); }
    100% { filter: drop-shadow(0 0 0 rgba(255, 43, 97, 0.35)); }
}

/* Upgraded completion popup */
.summary-backdrop {
    background: rgba(8, 14, 40, 0.64);
}

.victory-intro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 89;
    width: min(560px, calc(100vw - 24px));
    border: 4px solid #fff;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.7), transparent 38%),
        radial-gradient(circle at 85% 12%, rgba(255, 232, 154, 0.55), transparent 34%),
        linear-gradient(160deg, #ffd2e7 0%, #ffc2dd 45%, #ffe7ae 100%);
    box-shadow: 0 12px 0 rgba(116, 29, 79, 0.45), 0 24px 44px rgba(16, 10, 40, 0.4);
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}

.victory-intro-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 16px 14px 14px;
}

.victory-intro-kicker {
    margin: 0;
    color: #6a2453;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
    font-weight: 800;
}

#victory-intro-title {
    margin: 4px 0 6px;
    color: #7a124f;
    font-size: clamp(1.45rem, 5vw, 2rem);
    font-weight: 800;
}

.victory-intro-pic {
    width: clamp(86px, 20vw, 122px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 6px 0 rgba(123, 22, 78, 0.3);
}

.victory-intro-line {
    margin: 10px auto 0;
    max-width: 46ch;
    color: #6d1b47;
    font-weight: 800;
    font-size: 0.96rem;
}

.victory-show-result-btn {
    margin-top: 12px;
    min-width: 160px;
    border-radius: 12px;
    box-shadow: 0 5px 0 rgba(108, 31, 72, 0.35);
}

.victory-intro-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.victory-intro-token {
    position: absolute;
    left: var(--x);
    top: -16px;
    transform: translateX(-50%);
    opacity: 0;
    font-size: 18px;
    font-weight: 800;
    animation: victory-intro-drop var(--dur) ease-out forwards;
    animation-delay: var(--delay);
}

.victory-intro-token:nth-child(3n + 1) { color: #ff2f66; }
.victory-intro-token:nth-child(3n + 2) { color: #ffb827; }
.victory-intro-token:nth-child(3n) { color: #fff; text-shadow: 0 1px 0 #734; }

.summary {
    width: min(620px, calc(100vw - 22px));
    border: 4px solid #fff;
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.75), transparent 36%),
        linear-gradient(160deg, #dff4ff 0%, #cde8ff 42%, #ffe8ab 100%);
    box-shadow: 0 12px 0 rgba(28, 44, 116, 0.55), 0 26px 46px rgba(2, 10, 30, 0.46);
    padding: 18px 16px 16px;
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
}

.summary-kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #20507a;
}

.summary h2 {
    margin: 4px 0 6px;
    font-size: clamp(1.5rem, 4.8vw, 2rem);
    color: #0f3f5d;
    text-shadow: none;
}

.summary-message {
    margin: 0 auto 12px;
    max-width: 52ch;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #154c73;
    font-weight: 800;
}

.summary-random-line {
    margin: -2px auto 10px;
    max-width: 50ch;
    font-size: 0.86rem;
    color: #275a7e;
    font-weight: 800;
}

.summary-burst-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.summary-burst-token {
    position: absolute;
    left: var(--x);
    top: -18px;
    transform: translateX(-50%);
    opacity: 0;
    font-family: 'Fredoka', sans-serif;
    animation: summary-burst-drop var(--dur) ease-in forwards;
    animation-delay: var(--delay);
}

.summary-burst-token.coin {
    color: #ffbe2e;
    font-size: 18px;
    text-shadow: 0 1px 0 #6d4600;
}

.summary-burst-token.heart {
    color: #ff3a6e;
    font-size: 16px;
    text-shadow: 0 1px 0 #8d0e38;
}

.summary-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 0 0;
    position: relative;
    z-index: 3;
}

.summary-stat-card {
    margin: 0;
    border: 2px solid #fff;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #15486d;
    font-weight: 800;
    font-size: 0.86rem;
    text-align: left;
    padding: 8px 10px;
    box-shadow: 0 4px 0 rgba(31, 62, 145, 0.2);
}

.summary-best-card {
    grid-column: 1 / -1;
}

.summary-next-tip {
    margin: 0 0 8px;
    color: #1d4a71;
    font-weight: 800;
    position: relative;
    z-index: 3;
    text-align: left;
}

.summary-topic-picks {
    margin: 0 0 10px;
    position: relative;
    z-index: 3;
}

.summary .start-btn {
    min-width: 160px;
    border-radius: 14px;
    position: relative;
    z-index: 3;
}

.summary-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 10px;
    align-items: stretch;
    position: relative;
    z-index: 3;
}

.summary-left,
.summary-right {
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    padding: 10px;
}

.summary-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

    .summary,
    .victory-intro {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
    }

    .summary {
        padding: 14px 12px 12px;
        overflow-y: auto;
    }

    .victory-intro-content {
        padding: 12px 10px 12px;
    }

    .summary-layout {
        grid-template-columns: 1fr;
    }

    .summary-right {
        justify-content: flex-start;
    }
}

@keyframes summary-burst-drop {
    0% {
        opacity: 0;
        transform: translate(-50%, -18px) rotate(0deg) scale(0.85);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--drift)), 360px) rotate(var(--rot)) scale(1.04);
    }
}

@keyframes victory-intro-drop {
    0% {
        opacity: 0;
        transform: translate(-50%, -16px) rotate(0deg) scale(0.8);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), 270px) rotate(var(--rot)) scale(1.05);
    }
}