@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --game-ink: #f4f0e8;
    --game-muted: #b6b7b1;
    --game-paper: #171b1b;
    --game-surface: #212727;
    --game-accent: #ff917e;
    --game-mint: #83bdb0;
    --game-yellow: #eacb71;
    --game-line: rgba(244, 240, 232, .16);
    --game-shadow: 6px 7px 0 rgba(0, 0, 0, .3);
}

[data-theme="light"] {
    --game-ink: #20262e;
    --game-muted: #66717d;
    --game-paper: #f7f4ee;
    --game-surface: #fffdf8;
    --game-accent: #e85d4b;
    --game-mint: #b9ded3;
    --game-yellow: #f4cf70;
    --game-line: rgba(32, 38, 46, .13);
    --game-shadow: 6px 7px 0 rgba(32, 38, 46, .12);
}

[data-theme="dark"] {
    --game-ink: #f4f0e8;
    --game-muted: #b6b7b1;
    --game-paper: #171b1b;
    --game-surface: #212727;
    --game-accent: #ff917e;
    --game-mint: #83bdb0;
    --game-yellow: #eacb71;
    --game-line: rgba(244, 240, 232, .16);
    --game-shadow: 6px 7px 0 rgba(0, 0, 0, .3);
}

body {
    color: var(--game-ink);
    background-color: var(--game-paper);
    background-image: linear-gradient(var(--game-line) 1px, transparent 1px), linear-gradient(90deg, var(--game-line) 1px, transparent 1px);
    background-size: 36px 36px;
    font-family: 'DM Sans', sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle at 8% 8%, rgba(185, 222, 211, .42), transparent 25%), radial-gradient(circle at 90% 75%, rgba(244, 207, 112, .18), transparent 24%);
}

.nav-shell, .hero, .game-card, .game-modal, .panel, .stat-box, .item-card, .cart-item {
    border: 2px solid var(--game-ink) !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--game-shadow) !important;
}

.nav-shell { background: color-mix(in srgb, var(--game-paper) 90%, transparent) !important; border-color: var(--game-ink) !important; box-shadow: 4px 5px 0 var(--game-ink) !important; }
.modal-backdrop { z-index: 100; }
.logo, .hero-title, .section-heading h2, .modal-title, .game-title, .panel-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.035em; color: var(--game-ink) !important; }
.logo { letter-spacing: -.02em; }
.logo::before { display: none; }
.nav-link { color: var(--game-muted) !important; border-radius: 999px !important; }
.nav-link:hover, .nav-link:focus-visible { color: var(--game-ink) !important; background: var(--game-mint) !important; }
.theme-toggle { color: var(--game-ink) !important; background: var(--game-surface) !important; border: 2px solid var(--game-ink) !important; border-radius: 999px !important; box-shadow: 2px 3px 0 var(--game-ink); }
.theme-toggle:hover { transform: translate(-1px, -1px); }
.hero { margin-top: 3rem; background: var(--game-surface) !important; padding: clamp(1.5rem, 5vw, 3rem) !important; }
.hero-title { font-size: clamp(2.7rem, 8vw, 6.2rem); line-height: .94; max-width: 720px; }
.hero-subtitle, .hero-text, .section-subtext, .game-copy, .panel-copy, .small-text, .hint-line, .summary-note, .stat-label, .item-desc { color: var(--game-muted) !important; }
.hero-text { line-height: 1.7; }
.section-heading { margin-bottom: 1.5rem; }
.section-heading h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; }
.game-card { grid-column: span 2; padding: 1.4rem !important; background: var(--game-surface) !important; transition: transform .18s ease, box-shadow .18s ease; }
.game-card:nth-child(1) { grid-column: span 3; border-top: 7px solid var(--game-accent) !important; }
.game-card:nth-child(2) { grid-column: span 3; border-top: 7px solid var(--game-mint) !important; }
.game-card:nth-child(3) { border-top: 7px solid var(--game-yellow) !important; }
.game-card:nth-child(4) { border-top: 7px solid var(--game-mint) !important; }
.game-card:nth-child(5) { border-top: 7px solid var(--game-accent) !important; }
.game-card:hover, .game-card:focus-within { transform: translate(-3px, -5px) !important; border-color: var(--game-ink) !important; box-shadow: 10px 12px 0 rgba(32, 38, 46, .14) !important; }
.game-icon { width: 3.4rem; height: 3.4rem; border: 2px solid var(--game-ink); border-radius: 1rem !important; background: var(--game-mint) !important; color: var(--game-ink) !important; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.game-title { font-size: 1.35rem; }
.badge { color: var(--game-ink) !important; background: var(--game-yellow) !important; border: 2px solid var(--game-ink) !important; border-radius: 999px !important; }
.game-card button, .btn.primary { color: #fff !important; background: var(--game-accent) !important; border: 2px solid var(--game-ink) !important; border-radius: 999px !important; box-shadow: 3px 4px 0 var(--game-ink); }
.game-card button:hover, .game-card button:focus-visible, .btn.primary:hover { background: var(--game-accent) !important; transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--game-ink); }
.btn.secondary { color: var(--game-ink) !important; background: var(--game-surface) !important; border: 2px solid var(--game-ink) !important; border-radius: 999px !important; }
.btn.secondary:hover { background: var(--game-mint) !important; border-color: var(--game-ink) !important; }
.game-modal { background: var(--game-surface) !important; border-color: var(--game-ink) !important; }
.modal-close { color: var(--game-ink); }
.panel, .stat-box, .item-card, .cart-item { background: var(--game-paper) !important; border-color: var(--game-ink) !important; box-shadow: none !important; }
input[type="text"], textarea { color: var(--game-ink) !important; background: var(--game-surface) !important; border: 2px solid var(--game-ink) !important; border-radius: .8rem !important; }
.meter { background: var(--game-mint) !important; }
.meter-fill { background: var(--game-accent) !important; }
.footer { color: var(--game-muted); border-top: 2px solid var(--game-ink); }
.footer a { color: var(--game-accent) !important; }
.compile-score { text-align: center; background: var(--game-yellow) !important; }
.compile-points { margin: 0; color: var(--game-ink); font: 700 clamp(3rem, 10vw, 6rem)/.9 'Space Grotesk', sans-serif; letter-spacing: -.08em; }
.compile-button { min-height: 9rem; border: 3px solid var(--game-ink); border-radius: 2rem; color: var(--game-ink); background: var(--game-mint); box-shadow: 7px 8px 0 var(--game-ink); font: 700 clamp(1.4rem, 4vw, 2.4rem) 'Space Grotesk', sans-serif; letter-spacing: .08em; touch-action: manipulation; transition: transform .12s ease, box-shadow .12s ease; }
.compile-button:hover, .compile-button:focus-visible { transform: translate(-3px, -3px); box-shadow: 10px 11px 0 var(--game-ink); outline: none; }
.compile-button:active, .compile-button.compile-pop { transform: translate(3px, 4px) scale(.985); box-shadow: 2px 3px 0 var(--game-ink); }
.upgrade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.upgrade-card { display: grid; gap: .65rem; padding: 1rem; border: 2px solid var(--game-ink); border-radius: 1rem; background: var(--game-surface); }
.upgrade-card .game-title { margin: 0; font-size: 1.1rem; }
.upgrade-card .game-copy { font-size: .9rem; }
.upgrade-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .8rem; background: var(--game-accent); color: #fff; font: 700 1.25rem 'Space Grotesk', sans-serif; }
.upgrade-button { width: 100%; padding: .65rem .8rem !important; font-size: .82rem; }
.upgrade-button:disabled { cursor: not-allowed; opacity: .5; }
.upgrade-button.not-enough { animation: shake .3s ease; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.byte-visual { min-height: 12rem; display: grid; align-content: center; padding: 1.5rem; border: 2px solid var(--game-ink); border-radius: 1.25rem; background: linear-gradient(90deg, var(--game-mint) var(--byte-progress, 0%), var(--game-surface) var(--byte-progress, 0%)); transition: background .25s ease; }
.byte-size { margin: 0; color: var(--game-ink); font: 700 clamp(3rem, 12vw, 7rem)/.9 'Space Grotesk', sans-serif; letter-spacing: -.08em; }
.byte-range { width: 100%; accent-color: var(--game-accent); cursor: grab; }
.byte-title { margin: 0; font-size: 1.8rem; }
.choice-prompt { max-width: 760px; margin: 1rem 0; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.05; }
.choice-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.choice-button { min-height: 7rem; padding: 1.1rem; border: 2px solid var(--game-ink); border-radius: 1rem; color: var(--game-ink); background: var(--game-surface); box-shadow: 4px 5px 0 var(--game-ink); font: 700 1rem 'Space Grotesk', sans-serif; transition: transform .16s ease, background .16s ease; }
.choice-button:hover, .choice-button:focus-visible { background: var(--game-mint); transform: translate(-2px, -2px); outline: none; }
.choice-button:disabled { cursor: default; opacity: .7; }
.choice-feedback { padding: 1rem; border: 2px solid var(--game-ink); border-radius: 1rem; background: var(--game-yellow); color: var(--game-ink); font-weight: 700; }

@media (max-width: 992px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .game-card, .game-card:nth-child(n) { grid-column: span 1; } }
@media (max-width: 680px) { .game-grid { grid-template-columns: 1fr; } .game-card, .game-card:nth-child(n) { grid-column: span 1; } }
@media (max-width: 600px) { .upgrade-grid { grid-template-columns: 1fr; } .choice-buttons { grid-template-columns: 1fr; } .compile-button { min-height: 7rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }