/* Tower Defense map editor: Game Lab's Cyber Yellow & Obsidian look, flat colours. */

@font-face {
    font-family: 'Chakra Petch';
    src: url('../../assets/fonts/chakra-petch-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Albert Sans';
    src: url('../../assets/fonts/albert-sans-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Albert Sans';
    src: url('../../assets/fonts/albert-sans-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

:root {
    --bg: #09090b;
    --panel: #12131a;
    --panel-2: #1a1c24;
    --panel-3: #252833;
    --line: #2a2d38;
    --line-hi: rgba(250, 204, 21, 0.45);
    --accent: #facc15;
    --ink: #09090b;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --red: #f87171;
    --display: 'Chakra Petch', system-ui, sans-serif;
    --body: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font: 14px/1.35 var(--body);
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    -webkit-tap-highlight-color: transparent;
}

header, aside, #sketch-holder {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
}

header {
    margin: 4px 4px 0;
    padding: 10px 14px;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
}

h1 {
    font-size: 22px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 12px;
}

h2 {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0 6px;
}

main {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 250px;
    grid-template-areas: "tiles sketch side";
    gap: 4px;
    padding: 4px;
    min-height: 0;
}

aside {
    overflow-y: auto;
    padding: 10px 12px;
    scrollbar-width: thin;
}

p {
    margin: 6px 0;
}

.group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.group p {
    margin: 0;
}

#tiles {
    grid-area: tiles;
}

#sketch-holder {
    grid-area: sketch;
    background: var(--bg);
    overflow: hidden;
    position: relative;
    min-height: 0;
}

canvas {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    touch-action: none;
    cursor: crosshair;
}

/* ---------- Buttons ---------- */

main button, .td-dialog button {
    --sw: transparent;
    font: 600 13px/1.1 var(--body);
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    min-height: 36px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

main button::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--sw);
    border: 1px solid rgba(255, 255, 255, 0.25);
    flex: none;
}

main button:hover {
    border-color: var(--line-hi);
    background: var(--panel-3);
}

main button:active {
    transform: translateY(1px);
}

main button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#tiles button.active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--panel-3);
}

.layer-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.layer-seg button {
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    min-height: 34px;
}

.layer-seg button::before {
    display: none;
}

.layer-seg button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--ink);
}

/* ---------- Side panel ---------- */

.aside-holder {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

#status {
    flex: none;
}

#status h2, #utils h2 {
    margin-top: 0;
}

#dim, #coord {
    font: 700 15px var(--display);
    margin: 2px 0;
}

#coord {
    color: var(--muted);
    font-size: 13px;
}

.size-row {
    display: grid;
    grid-template-columns: 1fr 44px 44px;
    gap: 4px;
    align-items: center;
    margin: 4px 0;
}

.size-row button, button.zoom {
    justify-content: center;
    font-size: 18px;
    min-height: 40px;
}

.size-row button::before {
    display: none;
}

.theme-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    align-items: center;
    gap: 6px;
    margin: 6px 0 8px;
    font-size: 13px;
}

.theme-row select {
    min-height: 44px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 7px;
    font: 600 13px var(--body);
    padding: 0 8px;
}

#status .play {
    min-height: 46px;
    justify-content: center;
    font-size: 15px;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}

#status .play::before {
    display: none;
}

#utils {
    flex: 1;
}

#utils .group + .group, #utils .group + p {
    margin-top: 8px;
}

#deco-picker {
    display: none;
}

/* ---------- Dialogs and toasts (../TowerDefense/scripts/ui.js) ---------- */

.td-dialog {
    background: var(--panel);
    border: 1px solid var(--line-hi);
    border-radius: 14px;
    color: var(--text);
    font-family: var(--body);
    width: min(440px, calc(100vw - 32px));
    padding: 18px;
}

.td-dialog h2 {
    font-size: 18px;
    color: var(--accent);
    margin: 0 0 10px;
}

.td-dialog::backdrop {
    background: rgba(9, 9, 11, 0.8);
}

.td-dialog form {
    margin: 0;
}

.td-dialog textarea {
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    font: 12px/1.4 ui-monospace, monospace;
    padding: 8px;
    resize: vertical;
    word-break: break-all;
}

.dialog-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.dialog-buttons button {
    flex: 1;
    min-height: 44px;
    justify-content: center;
}

.dialog-ok {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}

#toasts {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 2147483100;
    pointer-events: none;
}

.toast {
    background: var(--panel-2);
    border: 1px solid var(--line-hi);
    border-radius: 8px;
    color: var(--text);
    padding: 8px 14px;
    font-size: 14px;
    max-width: calc(100vw - 32px);
}

.toast-error {
    border-color: var(--red);
}

/* ---------- Phones and narrow tablets in portrait: map on top, tools below ---------- */

@media (max-width: 899px) and (orientation: portrait) {
    header {
        padding: 8px;
    }

    h1 {
        font-size: 17px;
        text-align: left;
    }

    main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, 42%);
        grid-template-areas: "sketch sketch" "tiles side";
    }

    aside {
        padding: 8px;
    }

    .aside-holder {
        overflow-y: auto;
    }

    #status, #utils {
        overflow: visible;
    }

    main button {
        min-height: 40px;
    }
}

/* ---------- Phones in landscape: tools in two side columns, no header ---------- */

@media (max-height: 560px) and (orientation: landscape) {
    body {
        grid-template-rows: minmax(0, 1fr);
    }

    header {
        display: none;
    }

    main {
        grid-template-columns: 190px minmax(0, 1fr) 200px;
    }

    #tiles {
        padding-top: 8px;
    }

    .aside-holder {
        overflow-y: auto;
    }

    #status, #utils {
        overflow: visible;
    }

    main button {
        min-height: 40px;
    }
}


/* Touch screens: full-size targets */
@media (pointer: coarse) {
    main button, .size-row button, button.zoom {
        min-height: 44px;
    }
}

/* ---------- Swatch colours ---------- */

/* Grid tile types, in the colours the terrain draws them */
.empty { --sw: #5c9443; }
.wall { --sw: #8b8d84; }
.path { --sw: #c9a46b; }
.tower { --sw: #a5acb4; }
.enemy { --sw: #d9b77a; }

/* Special types */
.spawn { --sw: #7c4dff; }
.exit { --sw: #facc15; }

/* Path types and utilities */
.dir { --sw: rgb(248, 148, 6); }
.fill { --sw: rgb(54, 215, 183); }
.io { --sw: rgb(224, 130, 131); }
.zoom { --sw: rgb(82, 179, 217); }
.disp { --sw: rgb(191, 85, 236); }

/* City */
.road { --sw: rgb(210, 77, 87); }
.sidewalk { --sw: rgb(149, 165, 166); }
.grass { --sw: rgb(30, 130, 76); }

/* Decorative */
.emptyD { --sw: #000; }
.wallD { --sw: rgb(1, 50, 67); }
.towerD { --sw: rgb(51, 110, 123); }

/* Color Set 0 */
.c0_lightBrown { --sw: rgb(206, 171, 171); }
.c0_lightPurple { --sw: rgb(123, 95, 167); }
.c0_mediumPurple { --sw: rgb(117, 65, 129); }
.c0_darkPurple { --sw: rgb(55, 12, 63); }
.c0_paleGreen { --sw: rgb(212, 244, 194); }

/* Color Set 1 */
.c1_darkBlue { --sw: rgb(10, 25, 50); }
.c1_mediumBlue { --sw: rgb(22, 64, 122); }
.c1_lightBlue { --sw: rgb(34, 189, 197); }
.c1_darkPurple { --sw: rgb(112, 35, 143); }
.c1_neonPink { --sw: rgb(232, 33, 215); }

/* Color Set 2 */
.c2_darkRed { --sw: rgb(135, 6, 13); }
.c2_navyBlue { --sw: rgb(1, 18, 57); }
.c2_darkBlue { --sw: rgb(3, 36, 97); }
.c2_paleYellow { --sw: rgb(232, 228, 197); }
.c2_lightYellow { --sw: rgb(248, 241, 193); }

/* Neon */
.neon_pink { --sw: rgb(255, 0, 153); }
.neon_yellow { --sw: rgb(243, 243, 21); }
.neon_green { --sw: rgb(131, 245, 44); }
.neon_orange { --sw: rgb(255, 102, 0); }
.neon_purple { --sw: rgb(110, 13, 208); }