/* ==========================================================================
   MARVDLE — shared design system
   The whole thing reads like a printed comic: cream paper, black ink, four-color
   process plates, halftones, Kirby krackle, hand-lettered display + setwork body.
   ========================================================================== */

:root {
    /* Process inks — limited palette, used like comic plates */
    --ink:        #0e0d0b;
    --ink-soft:   #2a2622;
    --paper:      #f3e7c8;          /* aged newsprint */
    --paper-hi:   #f8efd6;          /* page highlight */
    --paper-lo:   #e8d8a8;          /* shadow under panels */

    --red:        #d4202c;          /* CMYK red plate */
    --red-deep:   #9d1620;
    --yellow:     #f6c632;          /* yellow plate */
    --yellow-hot: #ffdc4c;
    --blue:       #1f4ea8;          /* blue plate */
    --blue-deep:  #122d63;
    --magenta:    #c8237a;          /* dot accent */
    --cyan:       #2aa3c2;
    --green:      #2c8a3f;

    --correct:    var(--green);
    --partial:    var(--yellow);
    --incorrect:  var(--red);

    /* Type stack */
    --display:    'Bangers', 'Bungee', Impact, sans-serif;
    --hand:       'Coming Soon', 'Caveat', cursive;
    --body:       'Familjen Grotesk', system-ui, sans-serif;
    --mono:       'JetBrains Mono', ui-monospace, monospace;

    /* Strokes / shadows that read as INK */
    --ink-1: 2px;
    --ink-2: 3px;
    --ink-3: 4px;
    --ink-4: 6px;

    /* Page geometry */
    --page-max: 1240px;
    --gutter: 1.25rem;
}

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

html, body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    line-height: 1.4;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* iOS Safari needs the hard clip on the root element too — `overflow-x:
       hidden` on body alone lets some `position: fixed` decorations push the
       viewport sideways on phones. `overflow: clip` is the modern variant
       that doesn't establish a scroll container. */
    overscroll-behavior-x: none;
}
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100vw; }

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   Newsprint paper texture — tiny halftone speckles + faint warm bands
   -------------------------------------------------------------------------- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: 0.7;
    background-image:
        radial-gradient(circle at 17% 23%, rgba(0,0,0,0.04) 0.5px, transparent 1px),
        radial-gradient(circle at 73% 67%, rgba(0,0,0,0.03) 0.4px, transparent 0.9px),
        radial-gradient(circle at 47% 87%, rgba(0,0,0,0.025) 0.4px, transparent 0.8px),
        linear-gradient(160deg, transparent 30%, rgba(157, 22, 32, 0.025) 50%, transparent 70%);
    background-size: 5px 5px, 8px 8px, 13px 13px, 100% 100%;
}
/* ink fingerprint smudge in corners */
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 1;
    inset: auto 0 0 auto;
    width: 280px; height: 280px;
    background:
        radial-gradient(ellipse at bottom right, rgba(14,13,11,0.10), transparent 60%);
}

/* --------------------------------------------------------------------------
   Reusable atoms
   -------------------------------------------------------------------------- */

.page {
    position: relative;
    z-index: 2;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 1.75rem 1.5rem 4rem;
}
@media (max-width: 720px) { .page { padding: 1rem; } }

/* PANEL — the fundamental comic frame */
.panel {
    background: var(--paper-hi);
    border: var(--ink-3) solid var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
    position: relative;
}
.panel--flat   { box-shadow: 4px 4px 0 var(--ink); }
.panel--heavy  { box-shadow: 10px 10px 0 var(--ink); }
.panel--ink    { background: var(--ink); color: var(--paper); }
.panel--yellow { background: var(--yellow); }
.panel--red    { background: var(--red); color: var(--paper); }
.panel--blue   { background: var(--blue); color: var(--paper); }

/* Panel header tag — the "panel sticker" at the top of every frame */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    padding: 0.28rem 0.85rem 0.22rem;
    line-height: 1;
}
.tag--yellow { background: var(--yellow); color: var(--ink); }
.tag--red    { background: var(--red);    color: var(--paper); }
.tag--blue   { background: var(--blue);   color: var(--paper); }
.tag--paper  { background: var(--paper-hi); color: var(--ink); border: 2px solid var(--ink); }

.tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ink);
    color: var(--paper);
    padding: 0.35rem 0.85rem;
    font-family: var(--display);
    letter-spacing: 0.12em;
    font-size: 0.95rem;
}

/* CAPTION BOX — yellow narrator panel ("MEANWHILE...") */
.caption {
    background: var(--yellow);
    border: var(--ink-2) solid var(--ink);
    padding: 0.7rem 1rem;
    font-family: var(--hand);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    transform: rotate(-0.6deg);
    position: relative;
}
.caption::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(14,13,11,0.4);
    pointer-events: none;
}

/* SPEECH BUBBLE — hovers, hints */
.bubble {
    background: var(--paper-hi);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: 0.45rem 1rem 0.4rem;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    position: relative;
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-1deg);
    display: inline-block;
}
.bubble--tail-bl::after {
    content: '';
    position: absolute;
    left: 1.5rem;
    bottom: -14px;
    width: 22px;
    height: 16px;
    background: var(--paper-hi);
    border-right: 2.5px solid var(--ink);
    border-bottom: 2.5px solid var(--ink);
    transform: skew(-15deg) rotate(20deg);
    border-bottom-right-radius: 80%;
}

/* COMIC BUTTON — the bordered, drop-shadowed "press me" */
.cbtn {
    appearance: none;
    background: var(--paper-hi);
    color: var(--ink);
    border: var(--ink-2) solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 0.85rem 1.4rem 0.7rem;
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: transform .08s ease, box-shadow .08s ease, background .15s;
    cursor: pointer;
    position: relative;
}
.cbtn:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); background: var(--yellow); }
.cbtn:active { transform: translate(3px, 3px);  box-shadow: 1px 1px 0 var(--ink); }
.cbtn--red   { background: var(--red);    color: var(--paper); }
.cbtn--red:hover { background: var(--yellow); color: var(--ink); }
.cbtn--blue  { background: var(--blue);   color: var(--paper); }
.cbtn--blue:hover { background: var(--yellow); color: var(--ink); }
.cbtn--ink   { background: var(--ink);    color: var(--yellow); }
.cbtn--ink:hover  { background: var(--red); color: var(--paper); }

/* BURST — sticker / explosion shape */
.burst {
    --rot: 8deg;
    width: 110px; height: 110px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--paper);
    background: var(--red);
    font-family: var(--display);
    line-height: 0.95;
    transform: rotate(var(--rot));
    border: var(--ink-2) solid var(--ink);
    /* spiky 24-point starburst */
    clip-path: polygon(
        50% 0%, 58% 13%, 71% 6%,  72% 21%, 86% 18%, 80% 32%, 95% 35%, 84% 45%,
        100% 50%, 84% 55%, 95% 65%, 80% 68%, 86% 82%, 72% 79%, 71% 94%, 58% 87%,
        50% 100%, 42% 87%, 29% 94%, 28% 79%, 14% 82%, 20% 68%, 5% 65%, 16% 55%,
        0% 50%, 16% 45%, 5% 35%, 20% 32%, 14% 18%, 28% 21%, 29% 6%, 42% 13%
    );
    /* clip-path eats the border, but the contrast against page ink looks good */
}
.burst small { font-size: 0.75rem; letter-spacing: 0.1em; opacity: 0.95; }
.burst b     { font-family: var(--display); font-weight: 400; font-size: 2.2rem; letter-spacing: 0.02em; }
.burst--yellow { background: var(--yellow); color: var(--ink); }
.burst--blue   { background: var(--blue);   color: var(--paper); }
.burst--white  { background: var(--paper-hi); color: var(--ink); }

/* HALFTONE backgrounds — used as plate fills */
.ht-red    { background: radial-gradient(circle, rgba(0,0,0,0.18) 1.2px, transparent 1.6px) 0 0/5px 5px, var(--red);    color: var(--paper); }
.ht-yellow { background: radial-gradient(circle, rgba(0,0,0,0.22) 1.2px, transparent 1.6px) 0 0/5px 5px, var(--yellow); color: var(--ink); }
.ht-blue   { background: radial-gradient(circle, rgba(255,255,255,0.30) 1.2px, transparent 1.6px) 0 0/5px 5px, var(--blue); color: var(--paper); }
.ht-green  { background: radial-gradient(circle, rgba(0,0,0,0.20) 1.2px, transparent 1.6px) 0 0/5px 5px, var(--green);  color: var(--paper); }
.ht-paper  { background: radial-gradient(circle, rgba(14,13,11,0.10) 0.9px, transparent 1.3px) 0 0/6px 6px, var(--paper-hi); }
.ht-ink    { background: radial-gradient(circle, rgba(255,236,164,0.18) 1.0px, transparent 1.4px) 0 0/6px 6px, var(--ink); color: var(--paper); }

/* Diagonal STRIPES — "speed lines" backgrounds */
.stripes-y {
    background: repeating-linear-gradient(45deg,
        var(--yellow) 0 14px, var(--ink) 14px 18px);
}
.stripes-r {
    background: repeating-linear-gradient(-45deg,
        var(--red) 0 14px, var(--ink) 14px 18px);
}

/* Display text — comic logo with offset color "misregistration" */
.lockup {
    font-family: var(--display);
    line-height: 0.82;
    letter-spacing: 0.01em;
    -webkit-text-stroke: 3px var(--ink);
    paint-order: stroke fill;
    color: var(--yellow);
    text-shadow:
        4px 4px 0 var(--ink),
        4px 4px 0 var(--ink);
}
.lockup b { font-weight: 400; color: var(--red); }

/* CMYK registration mark (the +) — used as page furniture */
.regmark {
    width: 28px; height: 28px;
    position: relative;
    flex-shrink: 0;
}
.regmark::before, .regmark::after {
    content: ''; position: absolute; background: var(--ink);
}
.regmark::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.regmark::after  { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.regmark > i {
    position: absolute; inset: 4px; border: 2px solid var(--ink);
    border-radius: 50%;
    display: block;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes wobble {
    0%,100% { transform: rotate(var(--rot, -3deg)) scale(1); }
    50%     { transform: rotate(calc(var(--rot, -3deg) + 1.5deg)) scale(1.04); }
}
@keyframes drift {
    0%,100% { transform: rotate(var(--rot, -8deg)) translateY(0); }
    50%     { transform: rotate(calc(var(--rot, -8deg) + 1.5deg)) translateY(-3px); }
}
@keyframes pop {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes shimmer {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(1px,-1px); }
}
@keyframes flicker {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.7; }
}
.anim-wobble { animation: wobble 3s ease-in-out infinite; }
.anim-drift  { animation: drift  6s ease-in-out infinite; }
.anim-pop    { animation: pop 0.5s ease backwards; }

/* --------------------------------------------------------------------------
   Helper utilities
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.tilt-l { transform: rotate(-1.4deg); }
.tilt-r { transform: rotate(1.2deg); }
.tilt-l2 { transform: rotate(-0.6deg); }
.tilt-r2 { transform: rotate(0.5deg); }

.flex { display: flex; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }