:root {
    --patch-bg:#07080b;
    --patch-panel:#0d0e13;
    --patch-raised:#15161c;
    --patch-line:rgba(255,255,255,.1);
    --patch-text:#f5f1e8;
    --patch-copy:#d3d0ca;
    --patch-muted:#858894;
    --patch-faint:#555965;
    --patch-accent:#f2b05e;
    color-scheme:dark;
}

* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden; }
body { display:grid;place-items:center;background:#030406;color:var(--patch-text);font-family:Inter,system-ui,sans-serif; }
button,a { font:inherit; }
button { border:0;cursor:pointer; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline:2px solid #f5c27d;outline-offset:2px; }

.patch-shell {
    position:relative;width:min(100%,520px);height:100dvh;min-height:0;display:flex;flex-direction:column;
    overflow:hidden;background:var(--patch-bg);
}

.patch-topbar {
    z-index:20;min-height:54px;padding:0 12px;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;
    border-bottom:1px solid var(--patch-line);background:rgba(7,8,11,.96);
}
.patch-topbar>a,.patch-topbar>button {
    width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:transparent;
    color:var(--patch-muted);text-decoration:none;font-size:16px;
}
.patch-topbar>div { display:grid;justify-items:center;gap:2px; }
.patch-topbar small { color:var(--patch-faint);font:700 7.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase; }
.patch-topbar strong { font:700 13px/1 "Comic Neue","Comic Sans MS",cursive; }

.patch-heading {
    min-height:76px;padding:13px 17px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:15px;
    border-bottom:1px solid var(--patch-line);background:var(--patch-panel);
}
.patch-heading>div:first-child { min-width:0; }
.patch-heading span { color:var(--patch-muted);font:700 8px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase; }
.patch-heading h1 { margin:7px 0 0;font:700 19px/1.05 "Comic Neue","Comic Sans MS",cursive;white-space:nowrap; }
.patch-time { flex:0 0 auto;display:grid;justify-items:end;gap:5px; }
.patch-time small { color:var(--patch-muted);font:600 8px/1 Inter,sans-serif; }
.patch-time strong { color:var(--patch-accent);font:700 13px/1 "Comic Neue","Comic Sans MS",cursive; }

.patch-stage { position:relative;flex:1;min-height:260px;overflow:hidden;background:#08090c;touch-action:none;isolation:isolate; }
#patchCanvas { position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none; }
#patchCanvas.is-panning { cursor:grabbing; }

.patch-board-meta {
    position:absolute;top:11px;right:12px;left:12px;z-index:4;display:flex;justify-content:space-between;
    color:rgba(255,255,255,.48);font:700 8px/1 Inter,sans-serif;pointer-events:none;
}
.patch-board-meta span { padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(8,9,13,.72);backdrop-filter:blur(7px); }
.patch-board-meta i { width:5px;height:5px;display:inline-block;margin-right:4px;border-radius:50%;background:#70d49a;box-shadow:0 0 7px rgba(112,212,154,.5); }

.patch-instruction {
    position:absolute;top:47px;left:50%;z-index:4;padding:6px 9px;border:1px solid rgba(255,255,255,.08);
    border-radius:999px;background:rgba(8,9,13,.74);color:var(--patch-muted);font:600 8px/1 Inter,sans-serif;
    transform:translateX(-50%);pointer-events:none;white-space:nowrap;transition:.25s ease;
}
.patch-instruction.is-hidden { opacity:0;transform:translate(-50%,-5px); }

.patch-zoom-controls {
    position:absolute;right:12px;bottom:12px;z-index:5;display:flex;overflow:hidden;border:1px solid rgba(255,255,255,.12);
    border-radius:11px;background:rgba(11,12,17,.87);box-shadow:0 8px 24px rgba(0,0,0,.25);backdrop-filter:blur(9px);
}
.patch-zoom-controls button { width:36px;height:36px;background:transparent;color:var(--patch-copy);font-size:15px; }
.patch-zoom-controls button+button { border-left:1px solid rgba(255,255,255,.09); }

.patch-info {
    position:absolute;top:10px;right:10px;left:10px;z-index:15;padding:17px;border:1px solid var(--patch-line);
    border-radius:16px;background:rgba(14,15,21,.96);box-shadow:0 22px 55px rgba(0,0,0,.52);backdrop-filter:blur(14px);
}
.patch-info[hidden] { display:none; }
.patch-info>button { position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;background:var(--patch-raised);color:var(--patch-muted);font-size:17px; }
.patch-info>small { color:var(--patch-accent);font:700 8px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase; }
.patch-info h2 { margin:7px 0 10px;font:700 20px/1.05 "Comic Neue","Comic Sans MS",cursive; }
.patch-info p { margin:0;color:var(--patch-copy);font-size:10px;line-height:1.55; }
.patch-credit-setting {
    margin-top:13px;padding:10px;display:flex;align-items:flex-start;gap:9px;border:1px solid var(--patch-line);
    border-radius:11px;background:var(--patch-raised);cursor:pointer;
}
.patch-credit-setting input { width:14px;height:14px;margin:1px 0 0;accent-color:var(--patch-accent); }
.patch-credit-setting>span { display:grid;gap:4px; }
.patch-credit-setting strong { font-size:9px; }
.patch-credit-setting small { color:var(--patch-muted);font-size:7.5px;line-height:1.4; }
.patch-result-preview {
    min-height:37px;margin-top:14px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;
    border-radius:10px;background:var(--patch-text);color:#111216;text-decoration:none;font:700 9.5px/1 Inter,sans-serif;
}

.patch-tray {
    z-index:10;min-height:160px;padding:13px 15px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--patch-line);
    background:var(--patch-panel);box-shadow:0 -16px 35px rgba(0,0,0,.24);
}
.patch-tray-heading { display:flex;align-items:end;justify-content:space-between;gap:12px; }
.patch-tray-heading>span:first-child { display:grid;gap:4px; }
.patch-tray-heading small { color:var(--patch-muted);font:700 7px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase; }
.patch-tray-heading strong { font:700 12px/1 "Comic Neue","Comic Sans MS",cursive; }
#patchTileCount { color:var(--patch-muted);font:600 8px/1 Inter,sans-serif; }

.patch-palette { margin:11px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:5px; }
.patch-color {
    position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:8px;background:var(--tile-color);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.patch-color.is-selected { border-color:var(--patch-text);box-shadow:0 0 0 2px var(--patch-panel),0 0 0 3px rgba(255,255,255,.28);transform:translateY(-2px); }

.patch-place-button {
    width:100%;min-height:40px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-radius:12px;
    background:var(--patch-text);color:#111216;font:700 11px/1 Inter,sans-serif;
}
.patch-place-button:disabled { background:#1b1c22;color:#666974;cursor:not-allowed; }

/* Frenzy: the timer breathes, the stage warms, and the recharge drains in view. */
@keyframes patch-frenzy-breathe { 0%,100% { opacity:1; } 50% { opacity:.62; } }
.is-frenzy .patch-time strong {
    text-shadow:0 0 15px rgba(242,176,94,.45);
    animation:patch-frenzy-breathe 1.8s ease-in-out infinite;
}
.is-frenzy .patch-stage::after {
    content:'';position:absolute;z-index:5;inset:0;pointer-events:none;
    box-shadow:inset 0 0 46px rgba(242,176,94,.13),inset 0 0 3px rgba(242,176,94,.16);
}
.is-frenzy .patch-place-button:disabled {
    background:linear-gradient(90deg,rgba(242,176,94,.26) var(--patch-recharge,0%),#1b1c22 var(--patch-recharge,0%));
    color:#8d8b86;
}
@media (prefers-reduced-motion:reduce) {
    .is-frenzy .patch-time strong { animation:none; }
}

.patch-toast {
    position:absolute;z-index:40;right:15px;bottom:calc(172px + env(safe-area-inset-bottom));left:15px;padding:10px 12px;
    border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(18,19,25,.96);color:var(--patch-copy);
    font:600 9px/1.3 Inter,sans-serif;box-shadow:0 14px 35px rgba(0,0,0,.42);opacity:0;transform:translateY(7px);
    pointer-events:none;transition:.22s ease;
}
.patch-toast.is-visible { opacity:1;transform:none; }

@media (max-height:680px) {
    .patch-heading { min-height:62px;padding-top:9px;padding-bottom:9px; }
    .patch-heading h1 { font-size:17px; }
    .patch-tray { min-height:145px;padding-top:10px;padding-bottom:10px; }
    .patch-palette { margin:8px 0; }
}

@media (min-width:700px) {
    .patch-shell { height:calc(100dvh - 20px);margin:10px 0;border:1px solid var(--patch-line);border-radius:26px;box-shadow:0 35px 90px -30px rgba(0,0,0,.9); }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important;transition:none!important; }
}