/* Base: reset, document, typography, focus, scrollbars. */
* { box-sizing: border-box; }

/* The `hidden` attribute must always win, even over author display rules
   (e.g. .drafting-overlay { display: flex }) — otherwise toggled-hidden
   elements stay visible. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    background-color: var(--ink);
    background-image:
        radial-gradient(55rem 55rem at 8% -12%, rgba(22, 255, 101, 0.07), transparent 60%),
        radial-gradient(48rem 48rem at 112% 114%, rgba(0, 254, 222, 0.07), transparent 55%);
    background-attachment: fixed;
    color: var(--halo);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--surge); color: #0b0d0e; }

* { scrollbar-width: thin; scrollbar-color: #2b2f31 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2b2f31; border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #3a4042; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(22, 255, 101, 0.7);
    border-radius: 8px;
}

/* motion */
.reveal { opacity: 0; animation: reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; }
    .btn-charge:hover, .deck-card:hover { transform: none; }
}