/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */
:root {
    --font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --color-ink: #25283d;
    --color-muted: #667085;
    --color-paper: #fffdf8;
    --color-panel: #ffffff;
    --color-panel-soft: #fff6df;
    --color-line: #eadfcf;
    --color-accent: #ff6f91;
    --color-accent-strong: #df3f74;
    --color-mint: #72d6c9;
    --color-sky: #92b8ef;
    --color-leaf: #5f9f72;
    --color-danger: #d94444;
    --color-danger-dark: #aa2525;
    --color-bg-warm: #f8ecd8;
    --color-hover-soft: #ffeed0;
    --color-disabled: #f2f2f2;
    --surface-glass: rgba(255, 253, 248, 0.66);
    --surface-glass-strong: rgba(255, 253, 248, 0.84);
    --surface-pill: rgba(255, 255, 255, 0.76);
    --surface-tag: rgba(255, 253, 248, 0.94);
    --line-glass: rgba(234, 223, 207, 0.86);
    --line-glass-strong: rgba(234, 223, 207, 0.9);
    --focus-ring: rgba(114, 214, 201, 0.8);
    --veil: rgba(37, 40, 61, 0.42);
    --shadow-card: rgba(37, 40, 61, 0.08);
    --shadow-dot: rgba(37, 40, 61, 0.1);
    --shadow-accent: rgba(223, 63, 116, 0.28);
    --bg-mint-haze: rgba(114, 214, 201, 0.24);
    --bg-sky-haze: rgba(146, 184, 239, 0.28);
    --draw-ink: #25283d;
    --draw-berry: #ff6f91;
    --draw-mint: #72d6c9;
    --draw-peach: #ffa69e;
    --draw-sky: #92b8ef;
    --draw-eraser: #ffffff;
    --shadow-soft: 0 16px 42px rgba(37, 40, 61, 0.12);
    --shadow-small: 0 6px 18px rgba(37, 40, 61, 0.12);
    --radius-card: 8px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
}

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

html,
body {
    min-height: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: linear-gradient(135deg, var(--color-paper) 0%, var(--color-bg-warm) 100%);
    min-height: 100vh;
    padding: var(--space-5);
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-5);
    padding: var(--space-5) 30px;
    background: rgba(255, 255, 255, 0.64);
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    backdrop-filter: blur(14px);
}

.header-left {
    min-width: 0;
}

header h1 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(37, 40, 61, 0.14);
    flex: 0 0 auto;
}

.subtitle {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin-top: var(--space-2);
}

.category-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: none;
}

.category-btn,
.icon-btn,
.sound-toggle,
.settings-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid #ffe8f0;
    border-radius: 12px;
    background: var(--color-panel);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 40, 61, 0.08);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.category-btn:hover,
.icon-btn:hover,
.sound-toggle:hover,
.settings-icon:hover {
    transform: translateY(-2px);
    border-color: #ffd6e8;
    box-shadow: 0 4px 12px rgba(37, 40, 61, 0.12);
}

.category-btn:focus-visible,
.icon-btn:focus-visible,
.sound-toggle:focus-visible,
.settings-icon:focus-visible,
.color-btn:focus-visible,
.eraser-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.filter-chip:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.category-btn .emoji {
    font-size: 2rem;
    line-height: 1;
}

.garden {
    margin-top: var(--space-5);
}

.garden-heading {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-bottom: 15px;
    text-align: center;
}

.garden h2 {
    font-size: 1.5rem;
    line-height: 1.2;
}

.garden-status {
    color: var(--color-muted);
    font-size: 0.92rem;
    margin-top: var(--space-1);
}

.wall-tools {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
}

.filter-bar {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.filter-bar:empty {
    display: none;
}

.filter-chip {
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--surface-pill);
    cursor: pointer;
    color: var(--color-muted);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.filter-chip.active,
.filter-chip:hover {
    color: var(--color-ink);
    background: var(--color-panel);
    border-color: var(--color-accent);
}

.garden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    row-gap: 20px;
    padding: 15px;
    min-height: 200px;
    background: rgba(255, 255, 255, 0.42);
    border: 0;
    border-radius: 20px;
    box-shadow: none;
}

.drawing-card {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.drawing-card:hover {
    transform: rotate(-2deg) translateY(-2px);
    box-shadow: none;
}

.drawing-card img {
    width: min(100%, 112px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--radius-card);
}

.category-tag {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--surface-tag);
    border: 1px solid var(--color-line);
    box-shadow: 0 3px 8px var(--shadow-dot);
}

.react-btn {
    position: absolute;
    right: var(--space-2);
    top: var(--space-2);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-panel);
    color: var(--color-accent-strong);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
}

.drawing-card:hover .react-btn,
.react-btn.reacted,
.react-btn:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.react-btn:hover,
.react-btn.reacted {
    background: var(--color-accent);
    color: var(--color-panel);
}

.react-count {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    display: none;
    min-width: 24px;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: 999px;
    background: var(--color-ink);
    color: var(--color-panel);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.react-count.visible {
    display: block;
}

.empty-state {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    min-height: 210px;
    color: var(--color-muted);
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--veil);
    backdrop-filter: blur(10px);
}

.modal.active {
    display: flex;
}

.modal-content {
    width: min(100%, 384px);
    padding: var(--space-5);
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}

.settings-content {
    width: min(100%, 640px);
    max-height: 84vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.modal-header h3 {
    font-size: 1.2rem;
    line-height: 1.2;
    min-width: 0;
}

.close-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
}

.close-btn:hover {
    color: var(--color-ink);
    background: var(--color-panel-soft);
}

.drawing-area {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-4);
}

.color-palette {
    display: grid;
    gap: var(--space-2);
}

.color-btn,
.eraser-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.color-btn:hover,
.eraser-btn:hover {
    transform: scale(1.08);
}

.color-btn.active,
.eraser-btn.active {
    border-color: var(--color-ink);
    box-shadow: 0 0 0 3px var(--color-panel), 0 0 0 5px var(--color-ink);
}

.eraser-btn {
    display: grid;
    place-items: center;
    background: var(--color-panel);
    border-color: var(--color-muted);
}

.swatch-ink {
    background: var(--draw-ink);
}

.swatch-berry {
    background: var(--draw-berry);
}

.swatch-mint {
    background: var(--draw-mint);
}

.swatch-peach {
    background: var(--draw-peach);
}

.swatch-sky {
    background: var(--draw-sky);
}

.canvas-container {
    display: grid;
    place-items: center;
    min-width: 0;
}

#drawingCanvas {
    width: min(100%, 240px);
    height: auto;
    border: 2px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    cursor: crosshair;
    touch-action: none;
}

.modal-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
}

.btn-primary,
.btn-secondary,
.btn-danger {
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    cursor: pointer;
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-panel);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--shadow-accent);
}

.btn-secondary {
    background: var(--color-panel-soft);
    color: var(--color-ink);
    border-color: var(--color-line);
}

.btn-secondary:hover {
    background: var(--color-hover-soft);
}

.btn-danger {
    background: var(--color-danger);
    color: var(--color-panel);
}

.btn-danger:hover {
    background: var(--color-danger-dark);
    transform: translateY(-2px);
}

.sound-toggle,
.settings-icon {
    position: fixed;
    top: var(--space-5);
    z-index: 999;
    border-radius: 999px;
    font-size: 1.25rem;
}

.settings-icon {
    right: var(--space-5);
}

.sound-toggle {
    right: 76px;
}

.settings-icon:hover {
    transform: rotate(72deg) scale(1.04);
}

.sound-toggle.muted {
    opacity: 0.58;
    background: var(--color-disabled);
}

.settings-body {
    display: grid;
    gap: var(--space-4);
}

.settings-section {
    padding: var(--space-4);
    background: var(--color-panel-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}

.settings-section h4 {
    margin-bottom: var(--space-3);
    font-size: 1rem;
}

.emoji-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.emoji-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    font-size: 1rem;
}

.emoji-item button {
    border: 0;
    border-radius: 6px;
    padding: var(--space-1) var(--space-2);
    background: var(--color-danger);
    color: var(--color-panel);
    cursor: pointer;
    font-size: 0.8rem;
}

#emojiPickerContainer {
    margin-top: var(--space-3);
}

.number-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.number-action input {
    min-height: 44px;
    min-width: 0;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    color: var(--color-ink);
}

.settings-footer {
    text-align: center;
    margin-top: var(--space-5);
}

.settings-footer .btn-primary {
    min-width: 200px;
}

.toast-message {
    position: fixed;
    top: var(--space-5);
    left: 50%;
    z-index: 2000;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-mint);
    color: var(--color-ink);
    box-shadow: var(--shadow-soft);
    font-weight: 700;
    animation: slideDown 220ms ease both;
}

.confetti-bit {
    position: fixed;
    z-index: 3000;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    pointer-events: none;
    animation: confettiPop 850ms ease-out forwards;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -16px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -16px);
    }
}

@keyframes confettiPop {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--spin)) scale(0.8);
    }
}

body {
    --theme-bg: linear-gradient(135deg, var(--color-paper) 0%, var(--color-bg-warm) 100%);
    --theme-board: rgba(255, 255, 255, 0.42);
    --theme-card: rgba(255, 255, 255, 0.64);
    background: var(--theme-bg);
    transition: background 420ms ease;
}

body[data-theme="moon"] {
    --theme-bg:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #262545 0%, #5a4b75 58%, #f5cf92 100%);
    --theme-board: rgba(255, 255, 255, 0.24);
    --theme-card: rgba(255, 255, 255, 0.26);
}

body[data-theme="picnic"] {
    --theme-bg:
        linear-gradient(45deg, rgba(255, 111, 145, 0.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 111, 145, 0.12) 25%, transparent 25%),
        linear-gradient(135deg, #fffdf8 0%, #dff4dc 100%);
    --theme-board: rgba(255, 255, 255, 0.56);
    --theme-card: rgba(255, 255, 255, 0.72);
}

header {
    background: var(--theme-card);
}

.category-btn:hover .emoji {
    animation: mascotBounce 560ms ease;
}

.theme-switcher {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 2px 8px rgba(37, 40, 61, 0.08);
}

.theme-btn,
.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-panel);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.theme-btn:hover,
.tool-btn:hover,
.theme-btn.active,
.tool-btn.active {
    transform: translateY(-1px) scale(1.04);
    border-color: var(--color-accent);
    background: #fff0f5;
}

.tool-hint {
    min-height: 28px;
    max-width: min(100%, 300px);
    padding: 7px 12px;
    border: 1px solid rgba(255, 111, 145, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: center;
    transition: transform 160ms ease, color 160ms ease;
}

.tool-hint.is-changing {
    color: var(--color-ink);
    transform: translateY(-1px);
}

.garden-grid {
    background:
        linear-gradient(90deg, rgba(234, 223, 207, 0.35) 1px, transparent 1px),
        linear-gradient(rgba(234, 223, 207, 0.35) 1px, transparent 1px),
        var(--theme-board);
    background-size: 28px 28px, 28px 28px, auto;
}

.drawing-card {
    transform: rotate(var(--tilt, 0deg));
    transition: transform 160ms ease, filter 160ms ease;
}

.drawing-card:hover {
    transform: rotate(calc(var(--tilt, 0deg) * -1)) translateY(-4px) scale(1.04);
    filter: drop-shadow(0 12px 18px rgba(37, 40, 61, 0.16));
}

.drawing-card img {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(37, 40, 61, 0.12);
}

.sticker-tape {
    position: absolute;
    top: -5px;
    width: 34px;
    height: 12px;
    border-radius: 4px;
    background: rgba(255, 232, 240, 0.86);
    box-shadow: 0 1px 3px rgba(37, 40, 61, 0.08);
    transform: rotate(-3deg);
    z-index: 2;
}

.empty-patch {
    display: grid;
    gap: 8px;
    place-items: center;
    padding: 28px;
    color: var(--color-muted);
}

.empty-patch strong {
    color: var(--color-ink);
    font-size: 1.18rem;
}

.empty-sprout {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 2.4rem;
    animation: sproutWave 2.4s ease-in-out infinite;
}

.draw-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 var(--space-4);
}

.brush-sizes {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: var(--color-panel-soft);
}

.preview-content {
    width: min(100%, 420px);
}

.preview-frame {
    display: grid;
    gap: 12px;
    place-items: center;
    margin: 0;
}

.preview-frame img {
    width: min(100%, 300px);
    aspect-ratio: 1;
    object-fit: contain;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(37, 40, 61, 0.18);
    transform: rotate(-1.4deg);
}

.preview-frame figcaption {
    color: var(--color-muted);
    text-align: center;
}

.download-sticker {
    width: 100%;
    margin-top: var(--space-4);
}

@keyframes mascotBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-8px) rotate(-8deg); }
    70% { transform: translateY(2px) rotate(5deg); }
}

@keyframes sproutWave {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}

@media (max-width: 768px) {
    body {
        padding: var(--space-3);
    }

    header,
    .garden-heading {
        align-items: start;
    }

    header {
        flex-direction: column;
        padding: var(--space-4);
    }

    header h1 {
        font-size: 1.72rem;
    }

    .category-buttons,
    .wall-tools,
    .filter-bar {
        justify-content: flex-start;
    }

    .wall-tools {
        position: static;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-top: var(--space-3);
        justify-content: center;
    }

    .garden-grid {
        grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
        padding: var(--space-3);
    }
}

@media (max-width: 420px) {
    .sound-toggle,
    .settings-icon {
        top: var(--space-3);
        width: 42px;
        height: 42px;
    }

    .settings-icon {
        right: var(--space-3);
    }

    .sound-toggle {
        right: 60px;
    }

    .category-btn,
    .icon-btn {
        width: 42px;
        height: 42px;
    }

    .drawing-area,
    .modal-actions,
    .number-action {
        grid-template-columns: 1fr;
    }

    .color-palette {
        grid-template-columns: repeat(6, 38px);
        justify-content: start;
    }

    .modal {
        padding: var(--space-3);
    }
}