/* ============================================================
   Let's CRAYte! Pootery — main stylesheet
   ============================================================
   Palette: ONIONCORE (dark teal + hot pink) for UI / chrome.
   The pot and kiln come in chunks 2+ in clay browns + kiln
   orange-red so the warm tones contrast with the cool UI.
   ============================================================ */

/* ----- 1. Tokens ----- */

:root {
    /* Onioncore base */
    --bg-deep:      #06141a;     /* near-black with teal undertone */
    --bg-stage:     #0c1f25;     /* a touch lighter — main canvas bg */
    --bg-panel:     #0f2a32;     /* tool panels */
    --bg-frame:     #143842;     /* raised UI frames */

    --teal:         #00ffcc;     /* primary accent (links, focus) */
    --teal-dim:     #4dd9b8;
    --teal-low:     #0a665a;     /* line work */

    --pink:         #ff2e88;     /* CTA / "go" pink */
    --pink-bright:  #ff5cab;
    --pink-deep:    #b81866;

    --ink:          #eaf6f4;     /* main text on dark */
    --ink-dim:      #9fb8b6;
    --ink-low:      #5a7773;

    /* Warm side — for the pot, glazes, kiln. Chunks 2+ */
    --clay-1:       #a05a2c;
    --clay-2:       #6b3a1a;
    --clay-3:       #4a2510;
    --kiln-1:       #ffb24a;
    --kiln-2:       #ff5a1f;
    --kiln-3:       #b21f0c;

    /* Typography */
    --font-title:   "Bungee", "Impact", "Haettenschweiler",
                    "Arial Narrow Bold", system-ui, sans-serif;
    --font-lcd:     "VT323", "Courier New", monospace;
    --font-mono:    "Press Start 2P", "VT323", "Courier New", monospace;
    --font-ui:      system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

    /* Layout */
    --content-max:  920px;
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    14px;
}

/* ----- 2. Reset / base ----- */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--font-ui);
    min-height: 100vh;
}

body {
    /* Subtle CRT scanline overlay — applied at the body level so it's
       behind UI but covers the whole viewport. */
    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(0, 255, 204, 0.06) 0%,
            transparent 55%),
        linear-gradient(180deg,
            #07181e 0%,
            var(--bg-deep) 60%,
            #04101a 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

body::before {
    /* Scanlines */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.025) 0px,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 3px
    );
    z-index: 9000;
    mix-blend-mode: overlay;
}

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

a {
    color: var(--teal);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--pink-bright);
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ----- 3. Top bar ----- */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--teal-low);
    background: linear-gradient(180deg, #0a1f26 0%, #07171c 100%);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    position: relative;
    z-index: 50;
}

.top .back {
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    padding: 4px 8px;
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    background: rgba(0, 255, 204, 0.04);
}

.top .back:hover {
    color: var(--pink-bright);
    border-color: var(--pink);
    text-decoration: none;
    background: rgba(255, 46, 136, 0.08);
}

.crt-clock {
    color: var(--teal-dim);
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(0, 255, 204, 0.4);
}

/* ----- 4. Screens ----- */

.screen {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 24px 16px 60px;
    min-height: calc(100vh - 110px); /* keep footer near the bottom */
    display: flex;
    flex-direction: column;
}

.screen[hidden] {
    display: none;
}

/* ----- 5. Title screen ----- */

.title-stack {
    margin: 24px auto 0;
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    position: relative;
}

/* Marquee tape — the looping ribbon above the title. Pure CSS,
   uses translateX on a wide single-line span. */
.marquee-tape {
    width: 100%;
    overflow: hidden;
    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--pink);
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 46, 136, 0.12) 0 12px,
        transparent 12px 24px
    );
    padding: 6px 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--ink);
    box-shadow:
        0 0 12px rgba(255, 46, 136, 0.25),
        inset 0 0 24px rgba(0, 0, 0, 0.4);
}

.marquee-tape span {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 28s linear infinite;
    padding-left: 100%;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Big chunky title */
.big-title {
    font-family: var(--font-title);
    margin: 0;
    text-align: center;
    line-height: 0.95;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-shadow:
        4px 4px 0 var(--pink-deep),
        -1px -1px 0 #fff,
        0 0 28px rgba(255, 46, 136, 0.45);
    /* Wobble — subtle on title screen. */
    animation: title-wobble 5.5s ease-in-out infinite;
    transform-origin: 50% 60%;
}

.big-title .line-1,
.big-title .line-2 {
    white-space: nowrap;
}

.big-title .line-1 {
    font-size: clamp(36px, 10vw, 88px);
    color: var(--ink);
    letter-spacing: 0.5px;
}

.big-title .line-2 {
    font-size: clamp(54px, 14vw, 132px);
    color: var(--teal);
    letter-spacing: 1px;
    text-shadow:
        4px 4px 0 var(--pink-deep),
        -2px -2px 0 #fff,
        0 0 36px rgba(0, 255, 204, 0.5);
}

.big-title .crayte {
    color: var(--pink-bright);
    -webkit-text-stroke: 1px #fff;
}

.big-title .oo {
    color: var(--pink);
    -webkit-text-stroke: 1px var(--teal);
    display: inline-block;
    animation: oo-bob 1.6s ease-in-out infinite;
    transform-origin: 50% 60%;
}

@keyframes title-wobble {
    0%, 100% { transform: rotate(-0.6deg) translateY(0); }
    25%      { transform: rotate(0.5deg)  translateY(-2px); }
    50%      { transform: rotate(-0.4deg) translateY(1px); }
    75%      { transform: rotate(0.7deg)  translateY(-1px); }
}

@keyframes oo-bob {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50%      { transform: translateY(-6px) scaleY(0.92); }
}

/* Cursed-LCD subtitle */
.cursed-sub {
    margin: 0;
    font-family: var(--font-lcd);
    font-size: clamp(20px, 3.5vw, 28px);
    letter-spacing: 1.5px;
    color: var(--teal-dim);
    text-align: center;
}

.lcd-frame {
    display: inline-block;
    padding: 8px 16px;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.45) 0 1px,
            transparent 1px 3px
        ),
        linear-gradient(180deg, #021a1a 0%, #052a28 100%);
    border: 2px solid var(--teal-low);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 0 18px rgba(0, 255, 204, 0.15),
        0 0 12px rgba(0, 255, 204, 0.15);
    text-shadow: 0 0 6px rgba(0, 255, 204, 0.55);
}

.lcd-pre {
    color: var(--pink-bright);
    margin-right: 4px;
}

/* Buttons */
.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(360px, 88vw);
    margin-top: 12px;
}

.big-btn {
    --btn-bg:        #0f2a32;
    --btn-bg-hover:  #14404a;
    --btn-border:    var(--teal-low);
    --btn-fg:        var(--ink);
    --btn-glow:      rgba(0, 255, 204, 0.35);

    position: relative;
    width: 100%;
    padding: 18px 22px;
    font-family: var(--font-title);
    font-size: clamp(18px, 3.4vw, 22px);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 2px solid var(--btn-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform 0.06s ease,
                background 0.12s ease,
                border-color 0.12s ease,
                box-shadow 0.12s ease;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 6px 0 #02141a,
        0 8px 16px rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 0 #000;
}

.big-btn:hover,
.big-btn:focus-visible {
    background: var(--btn-bg-hover);
    border-color: var(--teal);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 6px 0 #02141a,
        0 0 18px var(--btn-glow);
    outline: none;
}

.big-btn:active {
    transform: translateY(3px);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 3px 0 #02141a,
        0 0 12px var(--btn-glow);
}

.big-btn .btn-glyph {
    font-size: 1.3em;
    color: var(--teal);
    line-height: 1;
}

.big-btn.primary {
    --btn-bg:        #2a0a1a;
    --btn-bg-hover:  #41122c;
    --btn-border:    var(--pink);
    --btn-fg:        #fff;
    --btn-glow:      rgba(255, 46, 136, 0.55);

    background: linear-gradient(180deg, #3a1024 0%, #20081a 100%);
    text-shadow:
        2px 2px 0 #000,
        0 0 12px rgba(255, 46, 136, 0.5);
}

.big-btn.primary:hover,
.big-btn.primary:focus-visible {
    background: linear-gradient(180deg, #51163a 0%, #2f0e26 100%);
}

.big-btn.primary .btn-glyph {
    color: var(--pink-bright);
}

/* Drifting clay particle behind the title — a tiny rotating blob */
.clay-drifter {
    position: absolute;
    width: 14px;
    height: 18px;
    left: -40px;
    top: 30%;
    background: radial-gradient(circle at 30% 30%,
        #c97a44 0%,
        var(--clay-1) 60%,
        var(--clay-2) 100%);
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    box-shadow: inset -2px -3px 6px rgba(0, 0, 0, 0.4);
    opacity: 0.7;
    animation: clay-drift 14s linear infinite;
    pointer-events: none;
}

@keyframes clay-drift {
    0%   { transform: translate(0, 0) rotate(0deg);    opacity: 0; }
    8%   { opacity: 0.7; }
    50%  { transform: translate(50vw, -30px) rotate(180deg); }
    92%  { opacity: 0.7; }
    100% { transform: translate(100vw, 20px) rotate(360deg); opacity: 0; }
}

/* ----- 6. Specs panel (chunk-8 hook, shipped early but inert
            beyond open/close) ----- */

.specs-hook {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 60;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-frame);
    border: 1px solid var(--teal-low);
    color: var(--teal-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.specs-hook:hover,
.specs-hook:focus-visible {
    opacity: 1;
    color: var(--pink-bright);
    transform: scale(1.08);
}

.specs-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px;
}

/* `display: flex` above wins against the default `[hidden] { display: none }`,
   so reassert it explicitly. */
.specs-panel[hidden] {
    display: none;
}

.specs-frame {
    width: min(420px, 92vw);
    border: 2px solid var(--teal);
    background: #051419;
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px #000,
        0 0 30px rgba(0, 255, 204, 0.35);
    overflow: hidden;
}

.specs-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, var(--teal) 0%, #00b890 100%);
    color: #002b22;
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
}

.specs-close {
    width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0;
    background: #002b22;
    color: var(--teal);
    border-radius: 3px;
    font-size: 12px;
}

.specs-close:hover {
    background: var(--pink-deep);
    color: #fff;
}

.specs-body {
    margin: 0;
    padding: 16px;
    color: var(--teal-dim);
    font-family: var(--font-lcd);
    font-size: 18px;
    line-height: 1.2;
    text-shadow: 0 0 4px rgba(0, 255, 204, 0.4);
    white-space: pre;
    overflow-x: auto;
}

/* ----- 7. Site footer overrides (the shared file expects dark bg) ----- */

.site-footer {
    border-top: 1px solid var(--teal-low);
    background: #04121a;
}

/* ----- 8. SHAPE screen (chunk 2 — wheel-throwing) ----- */

#screen-shape {
    padding-top: 12px;
    padding-bottom: 30px;
}

.screen-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 4px 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--teal-low);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
}

.back-btn {
    color: var(--teal);
    padding: 5px 10px;
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    background: rgba(0, 255, 204, 0.04);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.back-btn:hover,
.back-btn:focus-visible {
    color: var(--pink-bright);
    border-color: var(--pink);
    background: rgba(255, 46, 136, 0.08);
    outline: none;
}

.screen-title {
    margin: 0;
    font-family: var(--font-title);
    color: var(--pink-bright);
    font-size: clamp(11px, 2.6vw, 20px);
    letter-spacing: 2.5px;
    text-shadow:
        2px 2px 0 #000,
        0 0 10px rgba(255, 46, 136, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    text-align: center;
}

.screen-status {
    color: var(--teal-dim);
    font-family: var(--font-lcd);
    font-size: 16px;
    letter-spacing: 1.5px;
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.4);
    white-space: nowrap;
    flex: 0 0 auto;
}

.shape-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: linear-gradient(180deg, #061319 0%, #03090d 100%);
    border: 2px solid var(--teal-low);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(0, 255, 204, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.6);
    width: fit-content;
    max-width: 100%;
}

#shapeCanvas {
    display: block;
    width: clamp(280px, 88vw, 400px);
    aspect-ratio: 400 / 600;
    height: auto;
    /* The CSS pixel size scales; the backing store is set in JS via DPR. */
    background: #0c1f25;
    border-radius: var(--radius-md);
    touch-action: none;       /* prevent page scroll while shaping */
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

.shape-hint {
    margin: 2px 8px 0;
    text-align: center;
    color: var(--ink-dim);
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 1.2px;
    text-shadow: 0 0 4px rgba(0, 255, 204, 0.2);
    max-width: 420px;
}

/* Clay picker (Day 4 chunk A — material selection) */
.clay-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #082028 0%, #051218 100%);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45);
    width: 100%;
    max-width: 420px;
}

.clay-picker .row-label {
    min-width: 44px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--teal-dim);
    text-shadow: 0 0 4px rgba(0, 255, 204, 0.3);
}

.clay-swatch {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    background: var(--bg-panel);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s ease,
                box-shadow 0.12s ease,
                transform 0.06s ease;
}

.clay-swatch:hover,
.clay-swatch:focus-visible {
    border-color: var(--teal);
    outline: none;
}

.clay-swatch:active {
    transform: translateY(1px);
}

.clay-swatch.active {
    border-color: var(--pink-bright);
    background: rgba(255, 46, 136, 0.10);
    box-shadow:
        inset 0 0 6px rgba(255, 46, 136, 0.20),
        0 0 10px rgba(255, 46, 136, 0.40);
}

.clay-swatch .clay-disc {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.4),
                inset 2px 2px 3px rgba(255, 255, 255, 0.18);
}

.clay-swatch .clay-name {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.2px;
    color: var(--ink-dim);
    text-shadow: 1px 1px 0 #000;
}

.clay-swatch.active .clay-name {
    color: #fff;
}

.shape-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
    max-width: 420px;
}

.btn-control {
    flex: 1;
    padding: 14px 14px;
    font-family: var(--font-title);
    font-size: clamp(13px, 2.4vw, 16px);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--bg-panel);
    color: var(--ink);
    border: 2px solid var(--teal-low);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.06s ease,
                background 0.12s ease,
                border-color 0.12s ease,
                box-shadow 0.12s ease;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 5px 0 #02141a;
    text-shadow: 1.5px 1.5px 0 #000;
}

.btn-control:hover,
.btn-control:focus-visible {
    background: #14404a;
    border-color: var(--teal);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 5px 0 #02141a,
        0 0 14px rgba(0, 255, 204, 0.3);
    outline: none;
}

.btn-control:active {
    transform: translateY(3px);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 2px 0 #02141a;
}

.btn-control.primary {
    background: linear-gradient(180deg, #3a1024 0%, #20081a 100%);
    border-color: var(--pink);
    color: #fff;
    text-shadow:
        1.5px 1.5px 0 #000,
        0 0 10px rgba(255, 46, 136, 0.5);
}

.btn-control.primary:hover,
.btn-control.primary:focus-visible {
    background: linear-gradient(180deg, #51163a 0%, #2f0e26 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 5px 0 #02141a,
        0 0 14px rgba(255, 46, 136, 0.45);
}

.btn-control .btn-glyph {
    color: var(--pink-bright);
    font-size: 1.2em;
    line-height: 1;
}

/* "Just-shaped" pulse: brief teal halo on RESET / FINISH FORM when
   they fire, so the user gets visual confirmation even before audio
   (audio lands in chunk 7).                                          */
.btn-control.is-flash {
    background: #205060;
    border-color: var(--teal);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 5px 0 #02141a,
        0 0 24px var(--teal);
}

/* ----- 9. DECORATE screen (chunk 3 — paint / glaze / stamp) ----- */

#screen-decorate {
    padding-top: 12px;
    padding-bottom: 30px;
}

#decorateCanvas {
    display: block;
    width: clamp(280px, 88vw, 400px);
    aspect-ratio: 400 / 600;
    height: auto;
    background: #0c1f25;
    border-radius: var(--radius-md);
    touch-action: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

.decorate-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.decorate-tools {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.18) 0 1px,
            transparent 1px 2px),
        linear-gradient(180deg, #082028 0%, #051218 100%);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.4);
}

.tool-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.row-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--teal-dim);
    min-width: 52px;
    flex: 0 0 auto;
    text-shadow: 0 0 4px rgba(0, 255, 204, 0.3);
}

.tool-modes {
    gap: 6px;
}

/* Pack tabs (chunk 4) — 6 small tabs above tool-modes that switch
   the active GLAZE_PACK. Scrolls horizontally on tight viewports. */
.pack-tabs {
    gap: 4px;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px dashed var(--teal-low);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.pack-tabs::-webkit-scrollbar { display: none; }

.pack-tab {
    flex: 1 0 auto;
    padding: 7px 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    background: var(--bg-deep);
    color: var(--teal-dim);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    transition: background 0.12s ease,
                color 0.12s ease,
                border-color 0.12s ease,
                box-shadow 0.12s ease,
                transform 0.06s ease;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}

.pack-tab:hover,
.pack-tab:focus-visible {
    color: var(--teal);
    border-color: var(--teal);
    background: rgba(0, 255, 204, 0.06);
    outline: none;
}

.pack-tab:active {
    transform: translateY(1px);
}

.pack-tab.active {
    background: linear-gradient(180deg, #ff3d96 0%, #b81866 100%);
    color: #fff;
    border-color: var(--pink-bright);
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.20),
        0 0 12px rgba(255, 46, 136, 0.55);
}

/* MODDED's @rgb-cycle glaze — the swatch itself cycles through
   the rainbow so the user knows the strokes will too. */
.swatch.dynamic-rgb {
    background:
        linear-gradient(135deg,
            #ff0040 0%,
            #ff8800 14%,
            #ffee00 28%,
            #00ff44 42%,
            #00bbff 56%,
            #2200ff 70%,
            #ff00aa 84%,
            #ff0040 100%);
    background-size: 360% 360%;
    animation: rgb-slide 3.6s linear infinite;
}

@keyframes rgb-slide {
    0%   { background-position: 0%   50%; }
    100% { background-position: 360% 50%; }
}

.tool-btn {
    flex: 1;
    padding: 10px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.6px;
    background: var(--bg-panel);
    color: var(--ink);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    transition: background 0.12s ease,
                color 0.12s ease,
                border-color 0.12s ease,
                box-shadow 0.12s ease,
                transform 0.06s ease;
    text-shadow: 1px 1px 0 #000;
}

.tool-btn:hover,
.tool-btn:focus-visible {
    background: #14404a;
    border-color: var(--teal);
    outline: none;
}

.tool-btn:active {
    transform: translateY(1px);
}

.tool-btn.active {
    background: linear-gradient(180deg, #ff3d96 0%, #b81866 100%);
    color: #fff;
    border-color: var(--pink-bright);
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.18),
        0 0 12px rgba(255, 46, 136, 0.5);
}

.size-btn {
    width: 38px;
    height: 38px;
    background: var(--bg-panel);
    border: 1px solid var(--teal-low);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.size-btn:hover,
.size-btn:focus-visible {
    border-color: var(--teal);
    outline: none;
}

.size-btn:active {
    transform: translateY(1px);
}

.size-btn.active {
    border-color: var(--pink-bright);
    box-shadow:
        inset 0 0 8px rgba(255, 46, 136, 0.3),
        0 0 10px rgba(255, 46, 136, 0.5);
}

.size-dot {
    display: block;
    background: var(--ink);
    border-radius: 50%;
}

.size-dot.s-thin  { width: 6px;  height: 6px; }
.size-dot.s-med   { width: 14px; height: 14px; }
.size-dot.s-thick { width: 22px; height: 22px; }

.palette-row {
    align-items: flex-start;
}

.palette-row .row-label {
    padding-top: 8px;
}

.palette {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 4px 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--teal-low) transparent;
    /* iOS smooth scroll */
    -webkit-overflow-scrolling: touch;
}

.palette::-webkit-scrollbar { height: 6px; }
.palette::-webkit-scrollbar-track { background: transparent; }
.palette::-webkit-scrollbar-thumb {
    background: var(--teal-low);
    border-radius: 3px;
}

.swatch {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.55);
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--teal-low);
    transition: transform 0.1s ease, box-shadow 0.12s ease;
}

.swatch:hover,
.swatch:focus-visible {
    box-shadow: 0 0 0 1px var(--teal);
    outline: none;
}

.swatch.active {
    transform: scale(1.18);
    box-shadow:
        0 0 0 1px #fff,
        0 0 0 3px var(--pink-bright),
        0 0 10px rgba(255, 46, 136, 0.6);
}

.stamp-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--bg-panel);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    padding: 3px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stamp-btn:hover,
.stamp-btn:focus-visible {
    border-color: var(--teal);
    outline: none;
}

.stamp-btn canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.stamp-btn.active {
    background: rgba(255, 46, 136, 0.18);
    border-color: var(--pink-bright);
    box-shadow:
        inset 0 0 6px rgba(255, 46, 136, 0.25),
        0 0 10px rgba(255, 46, 136, 0.45);
}

.decorate-controls {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 420px;
}

/* ----- 10. KILN screen (chunk 5 — firing animation) ----- */

#screen-kiln {
    padding-top: 12px;
    padding-bottom: 30px;
}

.kiln-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.kiln-wrap {
    position: relative;
}

#kilnCanvas {
    display: block;
    width: clamp(280px, 88vw, 400px);
    aspect-ratio: 400 / 600;
    height: auto;
    background: #06141a;
    border-radius: var(--radius-md);
    touch-action: manipulation;
    user-select: none;
}

/* Celebration overlay — appears after the firing reveal */
.kiln-celebrate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8%;
    pointer-events: none;
    text-align: center;
    animation: celebrate-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.kiln-celebrate[hidden] {
    display: none;
}

.celebrate-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(48px, 12vw, 96px);
    line-height: 1;
    letter-spacing: 6px;
    color: #fff;
    text-shadow:
        4px 4px 0 var(--pink-deep),
        -2px -2px 0 var(--teal),
        0 0 28px rgba(255, 90, 31, 0.7),
        0 0 56px rgba(255, 200, 60, 0.5);
    transform: rotate(-3deg);
}

.celebrate-sub {
    margin: 12px 0 0;
    font-family: var(--font-title);
    font-size: clamp(18px, 4vw, 28px);
    letter-spacing: 3px;
    color: var(--kiln-1);
    text-shadow:
        2px 2px 0 #000,
        0 0 14px rgba(255, 140, 30, 0.55);
}

/* Exploded variant — red/violent palette instead of celebratory
   orange. The text shake reads as a small "this hurts" tremor. */
.kiln-celebrate.is-exploded .celebrate-title {
    color: #fff;
    text-shadow:
        4px 4px 0 #7a1818,
        -2px -2px 0 #ff3a3a,
        0 0 28px rgba(255, 60, 30, 0.85),
        0 0 56px rgba(255, 30, 20, 0.55);
    transform: rotate(-2deg);
    animation: explode-jitter 0.10s steps(2) 8;
}

.kiln-celebrate.is-exploded .celebrate-sub {
    color: #ff9060;
    text-shadow:
        2px 2px 0 #000,
        0 0 14px rgba(255, 90, 30, 0.7);
}

@keyframes explode-jitter {
    0%   { transform: translate(0, 0) rotate(-2deg); }
    25%  { transform: translate(-3px, 1px) rotate(-3deg); }
    50%  { transform: translate(3px, -2px) rotate(-1deg); }
    75%  { transform: translate(-2px, 2px) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(-2deg); }
}

.celebrate-saved {
    margin: 22px 0 0;
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 1.5px;
    color: var(--teal);
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.45);
    animation: saved-blink 1.2s ease-in-out infinite alternate;
}

@keyframes celebrate-in {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes saved-blink {
    from { opacity: 0.55; }
    to   { opacity: 1; }
}

.kiln-controls {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    justify-content: center;
}

.kiln-controls[hidden] {
    display: none;
}

.kiln-controls .btn-control {
    flex: 1;
}

/* ----- 11. GALLERY screen (chunk 6 — localStorage thumb grid + PNG export) ----- */

#screen-gallery {
    padding-top: 12px;
    padding-bottom: 30px;
}

.gallery-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Gallery tabs — Day 5 chunk E (MINE / EVERYONE) */
.gallery-tabs {
    width: 100%;
    max-width: 720px;
    display: flex;
    gap: 8px;
}

.gallery-tab {
    flex: 1;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    background: var(--bg-deep);
    color: var(--teal-dim);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-shadow: 1px 1px 0 #000;
    transition: background 0.12s ease,
                color 0.12s ease,
                border-color 0.12s ease,
                box-shadow 0.12s ease,
                transform 0.06s ease;
}

.gallery-tab:hover,
.gallery-tab:focus-visible {
    color: var(--teal);
    border-color: var(--teal);
    background: rgba(0, 255, 204, 0.06);
    outline: none;
}

.gallery-tab.active {
    background: linear-gradient(180deg, #ff3d96 0%, #b81866 100%);
    color: #fff;
    border-color: var(--pink-bright);
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.18),
        0 0 12px rgba(255, 46, 136, 0.45);
}

/* Author byline on public pot cards */
.pot-author {
    font-family: var(--font-lcd);
    font-size: 13px;
    letter-spacing: 0.8px;
    color: var(--pink-bright);
    text-shadow: 0 0 5px rgba(255, 46, 136, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty-state / message text inside the grid */
.gallery-msg {
    grid-column: 1 / -1;
    margin: 24px 0;
    text-align: center;
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--ink-dim);
}

.a-lot-of-pots {
    width: 100%;
    max-width: 720px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, rgba(255,46,136,0.15), rgba(0,255,204,0.10));
    border: 1px solid var(--pink);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--ink);
    box-shadow: 0 0 14px rgba(255, 46, 136, 0.25);
}

.a-lot-of-pots[hidden] { display: none; }

.lop-glyph {
    color: var(--pink-bright);
    font-size: 18px;
    text-shadow: 0 0 8px rgba(255, 46, 136, 0.6);
}

.gallery-grid {
    width: 100%;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.gallery-grid:empty { display: none; }

.pot-card {
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.18) 0 1px,
            transparent 1px 2px),
        linear-gradient(180deg, #082028 0%, #051218 100%);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-md);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.12s ease,
                box-shadow 0.12s ease,
                transform 0.06s ease;
    text-align: left;
}

.pot-card:hover,
.pot-card:focus-visible {
    border-color: var(--pink-bright);
    box-shadow: 0 0 14px rgba(255, 46, 136, 0.35);
    outline: none;
    transform: translateY(-2px);
}

.pot-thumb {
    aspect-ratio: 400 / 600;
    background: #06141a;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--teal-low);
}

.pot-thumb canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.pot-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pot-name {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--ink);
    text-shadow: 1px 1px 0 #000;
    /* truncate */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pot-date {
    font-family: var(--font-lcd);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--teal-dim);
}

.pot-pack-tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.2px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 255, 204, 0.1);
    color: var(--teal);
    border: 1px solid var(--teal-low);
}

/* Empty state */
.gallery-empty {
    width: 100%;
    max-width: 420px;
    margin-top: 30px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.18) 0 1px,
            transparent 1px 2px),
        linear-gradient(180deg, #082028 0%, #051218 100%);
    border: 1px dashed var(--teal-low);
    border-radius: var(--radius-lg);
    text-align: center;
}

.gallery-empty[hidden] { display: none; }

.empty-glyph {
    font-size: 64px;
    color: var(--teal-low);
    line-height: 1;
}

.empty-title {
    margin: 0;
    font-family: var(--font-title);
    color: var(--pink-bright);
    font-size: 22px;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #000;
}

.empty-sub {
    margin: 0;
    font-family: var(--font-lcd);
    font-size: 18px;
    color: var(--ink-dim);
    letter-spacing: 1px;
}

.gallery-empty .big-btn {
    width: 100%;
    max-width: 280px;
    margin-top: 8px;
}

/* Detail modal */
.pot-detail {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pot-detail[hidden] { display: none; }

.pot-detail-card {
    width: min(440px, 96vw);
    max-height: 96vh;
    overflow-y: auto;
    background: #051419;
    border: 2px solid var(--teal);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px #000,
        0 0 30px rgba(0, 255, 204, 0.35);
}

.detail-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, var(--teal) 0%, #00b890 100%);
    color: #002b22;
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
}

.detail-pack {
    background: rgba(0, 0, 0, 0.45);
    color: var(--teal);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 1.6px;
}

.detail-date {
    flex: 1;
    color: #002b22;
    font-family: var(--font-lcd);
    font-size: 13px;
    text-align: right;
    margin-right: 8px;
}

.detail-canvas-wrap {
    background: #06141a;
    padding: 8px;
}

#detailCanvas {
    display: block;
    width: 100%;
    aspect-ratio: 400 / 600;
    height: auto;
    background: #0c1f25;
    border-radius: var(--radius-sm);
}

.detail-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px dashed var(--teal-low);
}

.detail-name-row .row-label {
    min-width: 56px;
}

.detail-name-input {
    flex: 1;
    padding: 8px 10px;
    background: var(--bg-deep);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-lcd);
    font-size: 18px;
    letter-spacing: 1px;
    -webkit-text-fill-color: var(--ink); /* iOS dark-mode safety */
}

.detail-name-input:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 8px rgba(255, 46, 136, 0.3);
}

.detail-actions {
    display: flex;
    gap: 10px;
    padding: 12px 14px 14px;
}

.detail-actions .btn-control {
    flex: 1;
    padding: 12px 10px;
}

/* ----- 12. Easter eggs (chunk 8 — Konami dev menu, PINGAS flash, OVERCLOCKED toast) ----- */

/* DEV_MENU.EXE — opens on the Konami code at the title screen */
.dev-menu {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dev-menu[hidden] { display: none; }

.dev-frame {
    width: min(420px, 92vw);
    border: 2px solid var(--pink);
    background: #051419;
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px #000,
        0 0 32px rgba(255, 46, 136, 0.5);
    overflow: hidden;
    animation: dev-shake 0.12s steps(2) 4;
}

@keyframes dev-shake {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2px, 1px); }
    50%  { transform: translate(2px, -1px); }
    75%  { transform: translate(-1px, 2px); }
    100% { transform: translate(0, 0); }
}

.dev-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, var(--pink) 0%, var(--pink-deep) 100%);
    color: #fff;
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-shadow: 1px 1px 0 #000;
}

.dev-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-lcd);
    font-size: 18px;
    color: var(--teal-dim);
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.3);
}

.dev-warn,
.dev-foot {
    margin: 0;
    color: var(--pink-bright);
    text-shadow: 0 0 6px rgba(255, 46, 136, 0.45);
}

.dev-foot {
    color: var(--teal-dim);
    font-size: 14px;
    margin-top: 4px;
}

.dev-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
}

.dev-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--pink);
}

.dev-toggle span {
    flex: 1;
}

.dev-toggle em {
    color: var(--ink-low);
    font-style: normal;
    font-size: 14px;
}

/* PINGAS flash overlay */
.pingas-flash {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: pingas-flash 1.2s ease-out forwards;
}

.pingas-flash[hidden] { display: none; }

@keyframes pingas-flash {
    0%   { opacity: 0; transform: scale(0.4); }
    20%  { opacity: 1; transform: scale(1.15); }
    50%  { opacity: 1; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(1.4); }
}

.robotnik-silhouette {
    width: 180px;
    height: 216px;
    filter: drop-shadow(0 0 18px rgba(255, 46, 136, 0.7))
            drop-shadow(0 0 32px rgba(0, 255, 204, 0.4));
}

.pingas-text {
    position: absolute;
    bottom: 22%;
    font-family: var(--font-title);
    font-size: clamp(48px, 12vw, 96px);
    letter-spacing: 8px;
    color: #fff;
    text-shadow:
        5px 5px 0 var(--pink-deep),
        -2px -2px 0 var(--teal),
        0 0 24px rgba(255, 46, 136, 0.8);
    transform: rotate(-4deg);
}

/* OVERCLOCKED toast — corner notification */
.overclocked-toast {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 260;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(90deg,
        rgba(255, 46, 136, 0.95),
        rgba(0, 255, 204, 0.95));
    background-size: 200% 100%;
    color: #02141a;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 2px #000,
        0 0 24px rgba(255, 46, 136, 0.6),
        0 0 32px rgba(0, 255, 204, 0.4);
    animation:
        oc-slide-in 0.4s ease-out both,
        oc-rainbow  2.4s linear infinite,
        oc-slide-out 0.5s ease-in 3.6s forwards;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.overclocked-toast[hidden] { display: none; }

.oc-glyph {
    font-size: 18px;
    text-shadow: 0 0 6px #fff;
}

@keyframes oc-slide-in {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes oc-slide-out {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

@keyframes oc-rainbow {
    from { background-position: 0%   50%; }
    to   { background-position: 200% 50%; }
}

/* Kiln overheat glitch — shaking + RGB split filter on the canvas */
.kiln-overheat #kilnCanvas {
    animation: kiln-shake 0.06s steps(2) infinite;
    filter: drop-shadow(2px 0 0 rgba(255, 0, 0, 0.6))
            drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.6));
}

@keyframes kiln-shake {
    0%   { transform: translate(0,  0); }
    25%  { transform: translate(-2px, 1px); }
    50%  { transform: translate(2px, -2px); }
    75%  { transform: translate(-1px, 2px); }
    100% { transform: translate(1px,  0); }
}

/* ----- 13. Achievements (Day 4 chunk C — TROPHY grid + toast) ----- */

#screen-achievements {
    padding-top: 12px;
    padding-bottom: 30px;
}

.ach-grid {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ach-card {
    padding: 14px 14px 18px;
    border-radius: var(--radius-md);
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.18) 0 1px,
            transparent 1px 2px),
        linear-gradient(180deg, #082028 0%, #051218 100%);
    border: 1px solid var(--teal-low);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ach-card.is-unlocked {
    border-color: var(--pink);
    box-shadow: 0 0 14px rgba(255, 46, 136, 0.30);
}

.ach-card.is-locked {
    opacity: 0.55;
}

.ach-icon {
    font-size: 36px;
    line-height: 1;
    color: var(--pink-bright);
    text-shadow: 0 0 12px rgba(255, 46, 136, 0.55);
    margin-bottom: 2px;
}

.ach-card.is-locked .ach-icon {
    color: var(--ink-low);
    text-shadow: none;
}

.ach-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--ink);
    text-shadow: 1.5px 1.5px 0 #000;
}

.ach-desc {
    margin: 0;
    font-family: var(--font-lcd);
    font-size: 16px;
    letter-spacing: 0.8px;
    color: var(--ink-dim);
    line-height: 1.2;
}

.ach-reward {
    margin-top: 4px;
    align-self: center;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(0, 255, 204, 0.10);
    border: 1px solid var(--teal-low);
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.3px;
}

/* Achievement unlock toast — pink/gold gradient, slides in
   from the right like the OVERCLOCKED toast. */
.ach-toast {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 260;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(90deg,
        rgba(255, 210, 70, 0.95),
        rgba(255, 46, 136, 0.95));
    color: #1a0e08;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 2px #000,
        0 0 22px rgba(255, 210, 70, 0.55),
        0 0 30px rgba(255, 46, 136, 0.45);
    animation:
        ach-slide-in 0.4s ease-out both,
        ach-slide-out 0.5s ease-in 3.6s forwards;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
}

.ach-toast[hidden] { display: none; }

.ach-toast-icon {
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

@keyframes ach-slide-in {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes ach-slide-out {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

/* ----- 14. Pot battles (Day 5 chunk F) ----- */

/* Battle card in the BATTLES tab — replaces the pot grid layout */
.battle-list {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.battle-list:empty { display: none; }

.battle-card {
    text-align: left;
    width: 100%;
    padding: 14px 16px;
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.18) 0 1px,
            transparent 1px 2px),
        linear-gradient(180deg, #082028 0%, #051218 100%);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.12s ease,
                box-shadow 0.12s ease,
                transform 0.06s ease;
}

.battle-card:hover,
.battle-card:focus-visible {
    border-color: var(--pink);
    box-shadow: 0 0 14px rgba(255, 46, 136, 0.35);
    transform: translateY(-1px);
    outline: none;
}

.battle-card.is-expired {
    opacity: 0.7;
    border-style: dashed;
}

.battle-card .battle-theme {
    font-family: var(--font-title);
    font-size: clamp(18px, 4vw, 26px);
    letter-spacing: 2.5px;
    color: var(--pink-bright);
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 46, 136, 0.45);
    text-transform: uppercase;
}

.battle-card .battle-meta-line {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--teal-dim);
}

.battle-card .battle-meta-line .live  { color: #33ff66; }
.battle-card .battle-meta-line .ended { color: var(--ink-low); }

/* "+ NEW THEME" CTA at the top of the BATTLES tab */
.battle-new-cta {
    width: 100%;
    max-width: 720px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #3a1024 0%, #20081a 100%);
    border: 2px solid var(--pink);
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 2px;
    cursor: pointer;
    text-shadow: 2px 2px 0 #000;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.battle-new-cta:hover {
    background: linear-gradient(180deg, #51163a 0%, #2f0e26 100%);
    box-shadow: 0 0 14px rgba(255, 46, 136, 0.45);
}

/* Battle detail modal */
.battle-detail,
.create-battle,
.submit-picker {
    position: fixed;
    inset: 0;
    z-index: 230;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.battle-detail[hidden],
.create-battle[hidden],
.submit-picker[hidden] { display: none; }

.battle-detail-card,
.create-battle-card,
.submit-picker-card {
    width: min(560px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    background: #051419;
    border: 2px solid var(--teal);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px #000,
        0 0 30px rgba(0, 255, 204, 0.35);
}

.battle-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-family: var(--font-lcd);
    font-size: 16px;
    color: var(--teal-dim);
    border-bottom: 1px dashed var(--teal-low);
}

.battle-author { color: var(--pink-bright); }
.battle-entries {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--ink-dim);
}

.battle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 14px;
    min-height: 80px;
}

.battle-entry-card {
    background: var(--bg-panel);
    border: 1px solid var(--teal-low);
    border-radius: var(--radius-sm);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.battle-entry-card.is-winner {
    border-color: #ffea00;
    box-shadow: 0 0 14px rgba(255, 234, 0, 0.5);
}

.battle-entry-thumb {
    aspect-ratio: 400 / 600;
    background: #06141a;
    border-radius: 3px;
    overflow: hidden;
}

.battle-entry-thumb canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.battle-entry-author {
    font-family: var(--font-lcd);
    font-size: 13px;
    color: var(--ink);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-vote-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.battle-vote-btn {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-deep);
    border: 1px solid var(--teal-low);
    border-radius: 3px;
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #000;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.battle-vote-btn:hover {
    background: rgba(0, 255, 204, 0.10);
    border-color: var(--teal);
}

.battle-vote-btn.voted {
    background: var(--pink-deep);
    color: #fff;
    border-color: var(--pink-bright);
    cursor: default;
}

.battle-vote-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.battle-vote-count {
    font-family: var(--font-title);
    font-size: 14px;
    color: var(--pink-bright);
    min-width: 24px;
    text-align: center;
}

.battle-winner-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    background: #ffea00;
    color: #1a0e08;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    align-self: center;
}

.battle-actions {
    display: flex;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px dashed var(--teal-low);
}

.battle-actions .btn-control { flex: 1; }

/* Create-battle body */
.create-battle-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.create-battle-hint {
    margin: 0;
    font-family: var(--font-lcd);
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.2;
}

/* Submit picker body */
.submit-picker-body {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.submit-picker-body:empty::before {
    content: "No local pots to submit. Fire some first.";
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ink-dim);
    font-family: var(--font-lcd);
    font-size: 16px;
    padding: 24px 12px;
}

.detail-titlebar em {
    font-style: normal;
    font-weight: normal;
    background: rgba(0,0,0,0.45);
    color: var(--teal);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 1.6px;
}

/* ----- 15. Responsive nudges ----- */

@media (max-width: 480px) {
    .title-stack { gap: 22px; }
    .crt-clock { font-size: 14px; }
    .specs-hook { width: 28px; height: 28px; bottom: 8px; right: 8px; }

    .screen-titlebar { font-size: 9px; gap: 6px; padding: 4px 0 10px; }
    .back-btn { font-size: 9px; padding: 4px 7px; }
    .screen-status { font-size: 13px; }
    .canvas-wrap { padding: 5px; border-width: 2px; }
    .shape-hint { font-size: 14px; }
    .shape-controls { gap: 10px; }
    .btn-control { padding: 12px 10px; }

    .decorate-tools { padding: 10px 8px; gap: 8px; }
    .row-label { font-size: 9px; min-width: 44px; }
    .tool-btn { font-size: 10px; padding: 8px 4px; letter-spacing: 1.2px; }
    .size-btn { width: 34px; height: 34px; }
    .size-dot.s-thick { width: 18px; height: 18px; }
    .swatch { width: 28px; height: 28px; }
    .stamp-btn { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .big-title,
    .big-title .oo,
    .clay-drifter,
    .marquee-tape span,
    .swatch.dynamic-rgb,
    .celebrate-saved,
    .dev-frame,
    .kiln-overheat #kilnCanvas,
    .pingas-flash,
    .overclocked-toast {
        animation: none;
    }
    /* Keep the kiln glitch filter visible even without the shake
       so the overheated state still reads correctly. */
}

/* ----- 18. Moderation (UGC report + content-guidelines modal) -----
   Sits above every other overlay (z-index 10000+) so the guidelines
   prompt can interrupt mid-submission and so the Report flow can
   appear over the open gallery / battle detail panels. */

.mod-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 10000;
}
.mod-modal-overlay[hidden] { display: none; }

.mod-modal {
    background: var(--bg-panel);
    border: 2px solid var(--teal);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 24px rgba(0, 255, 204, 0.25);
    padding: 22px 22px 18px;
    max-width: 480px;
    width: 100%;
    color: var(--ink);
    font-family: var(--font-ui);
    line-height: 1.45;
}

.mod-modal-title {
    margin: 0 0 12px;
    font-family: var(--font-title);
    color: var(--pink-bright);
    font-size: 22px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.mod-modal-body { font-size: 15px; }
.mod-modal-body p:first-child { margin-top: 0; }
.mod-modal-body p:last-child  { margin-bottom: 0; }
.mod-modal-body ul {
    margin: 8px 0 12px;
    padding-left: 22px;
}
.mod-modal-body li { margin: 4px 0; }

.mod-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

.mod-modal-actions button {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.4px;
    padding: 10px 16px;
    border: 2px solid var(--teal-low);
    border-radius: var(--radius-md);
    background: var(--bg-frame);
    color: var(--ink);
    cursor: pointer;
    min-height: 44px;
}
.mod-modal-actions button:hover,
.mod-modal-actions button:focus-visible {
    border-color: var(--teal);
    color: var(--teal);
    outline: none;
}
.mod-modal-actions .mod-modal-confirm.primary {
    background: var(--pink-deep);
    border-color: var(--pink);
    color: var(--ink);
}
.mod-modal-actions .mod-modal-confirm.primary:hover,
.mod-modal-actions .mod-modal-confirm.primary:focus-visible {
    background: var(--pink);
    border-color: var(--pink-bright);
    color: #fff;
}
.mod-modal-actions button[hidden] { display: none; }

/* Report flag on each public gallery / battle entry card. Sits
   top-right so it's reachable without obscuring the pot thumbnail.
   stopPropagation in JS keeps card-level click from firing. */
.report-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ink-low);
    background: rgba(6, 20, 26, 0.85);
    color: var(--ink-dim);
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: color 120ms ease, border-color 120ms ease;
}
.report-btn:hover,
.report-btn:focus-visible {
    color: var(--pink);
    border-color: var(--pink);
    outline: none;
}

.pot-card, .battle-entry-card { position: relative; }