:root {--ab: #1f1410;
    --bg: #1e1a28;
    --ol: #1f1410f0;
    --fg: #f4c896;
    --bc: #7a4a3a40;
    --hl: #ff9d6c;
    --err: #ff5577;
    --panel: ##2b1c16;
    --sunken: rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html, body {
    margin: 0; height: 100%;
    background: var(--ab);
    color: var(--fg);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    overflow: hidden;
}
body {
    display: flex; flex-direction: column;
    align-items: stretch;
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--bc);
    padding: 0 14px;
    gap: 2px;
    flex-shrink: 0;
}
.tabs button {
    background: transparent;
    color: var(--fg);
    opacity: .5;
    border: none;
    padding: 12px 18px;
    font: inherit;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: opacity .15s, border-color .15s, color .15s;
}
.tabs button:hover { opacity: .8; }
.tabs button.active {
    opacity: 1;
    color: var(--hl);
    border-bottom-color: var(--hl);
}
.tab-panel {
    display: none;
    flex: 1; min-height: 0; min-width: 0;
    flex-direction: column;
}
.tab-panel.active { display: flex; }

.play-panel { align-items: center; }

.play-panel .hud {
    width: 100%; max-width: 480px;
    padding: 12px 18px 0;
    display: flex; align-items: center; gap: 10px;
    min-height: 40px;
}
.play-panel .lives { display: flex; gap: 8px; align-items: center; }
.play-panel .drop { width: 22px; height: 32px; transition: opacity .25s, transform .25s; color: var(--hl); }
.play-panel .drop.lost { opacity: .15; transform: scale(.7); }
.play-panel .status {
    margin-left: auto;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 13px;
    opacity: .55;
    letter-spacing: .03em;
}

.play-panel #board-wrap {
    flex: 1; display: flex;
    align-items: flex-start; justify-content: center;
    width: 100%;
    padding-top: 24px;
}
.play-panel canvas {
    display: block;
    touch-action: manipulation;
}

.edit-panel { flex: 1; min-height: 0; }
.edit-panel .edit-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--bc);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    flex-shrink: 0;
}
.edit-panel .edit-header h1 {
    font-size: 18px; margin: 0; font-weight: 700; color: var(--hl);
    font-family: 'DM Sans', sans-serif;
}
.edit-panel .group { display: flex; align-items: center; gap: 6px; }
.edit-panel .group label { font-size: 12px; opacity: .55; }

.edit-panel input[type=number] {
    width: 56px; padding: 4px 8px;
    border: 1px solid var(--bc);
    border-radius: 4px;
    background: var(--sunken);
    color: var(--fg);
    font: inherit; font-size: 13px;
}
.edit-panel input[type=number]:focus { outline: none; border-color: var(--fg); }

.edit-panel button {
    padding: 5px 14px;
    border: 1px solid var(--bc);
    background: transparent;
    color: var(--fg);
    border-radius: 999px;
    cursor: pointer;
    font: inherit; font-size: 13px;
}
.edit-panel button:hover { background: rgba(150,223,220,.08); border-color: var(--fg); }
.edit-panel button.primary { border-color: var(--fg); border-width: 2px; padding: 4px 13px; }
.edit-panel button.primary:hover { background: rgba(150,223,220,.14); }
.edit-panel button:disabled { opacity: .35; cursor: progress; }

.edit-panel main {
    flex: 1; display: flex; min-height: 0;
}
.edit-panel .edit-stage {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; overflow: auto;
}
.edit-panel canvas {
    background: var(--sunken);
    border: 1px solid var(--bc);
    border-radius: 6px;
    cursor: crosshair;
    touch-action: none;
}
.edit-panel .edit-aside {
    width: 360px;
    border-left: 1px solid var(--bc);
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--panel);
}
.edit-panel .edit-aside h2 {
    font-size: 11px; font-weight: 700; margin: 0;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--hl);
}
.edit-panel textarea {
    flex: 1; min-height: 200px;
    font-family: 'DM Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
    font-size: 12px;
    padding: 8px;
    border: 1px solid var(--bc);
    border-radius: 4px;
    background: var(--sunken);
    color: var(--fg);
    resize: vertical;
}
.edit-panel textarea:focus { outline: none; border-color: var(--fg); }
.edit-panel .hint { font-size: 11px; line-height: 1.5; opacity: .55; }
.edit-panel .row { display: flex; gap: 6px; }
.edit-panel .row > * { flex: 1; }
.edit-panel .result {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 4px;
    background: var(--sunken);
    border: 1px solid var(--bc);
    min-height: 32px;
    color: var(--fg);
    opacity: .6;
}
.edit-panel .result.ok   { color: var(--fg);  border-color: var(--fg);  opacity: 1; }
.edit-panel .result.warn { color: var(--hl);  border-color: var(--hl);  opacity: 1; }
.edit-panel .result.bad  { color: var(--err); border-color: var(--err); opacity: 1; }

.theme-switcher {
    position: fixed;
    left: 14px; bottom: 14px;
    display: flex; gap: 6px; align-items: center;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--bc);
    border-radius: 999px;
    z-index: 9;
    opacity: .55;
    transition: opacity .2s;
}
.theme-switcher:hover { opacity: 1; }
.theme-switcher button {
    width: 18px; height: 18px;
    padding: 0;
    border: 1px solid var(--bc);
    border-radius: 50%;
    cursor: pointer;
    background: var(--swatch, #888);
    transition: transform .15s, border-color .15s;
}
.theme-switcher button:hover { transform: scale(1.15); }
.theme-switcher button.active {
    border-color: var(--fg);
    border-width: 2px;
}

.overlay {
    position: fixed; inset: 0;
    background: var(--ol);
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
    font-size: 24px; color: var(--fg);
    z-index: 10;
    perspective: 900px;
}
.overlay.show { display: flex; }

@keyframes overlay-arc-in {
    0%   { transform: translate3d(0, 80px, -520px) rotateX(-22deg); opacity: 0; }
    55%  { transform: translate3d(0, -10px, 40px) rotateX(3deg); opacity: 1; }
    100% { transform: translate3d(0, 0, 0) rotateX(0); opacity: 1; }
}
.overlay.show .big {
    animation: overlay-arc-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.overlay.show button {
    animation: overlay-arc-in 750ms cubic-bezier(0.16, 1, 0.3, 1) 110ms both;
}
.overlay.lose .big { color: var(--err); }
.overlay.lose button { border-color: var(--err); color: var(--err); }
.overlay button {
    font: inherit; padding: 10px 22px; border-radius: 999px;
    border: 2px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer;
}
.overlay .big { font-size: 32px; font-weight: 700; }
.overlay .small { font-size: 18px; }