/* hyperlite — styles */

:root {
    --ink: #1a1a1a;
    --paper: #ffffff;
    --desktop: #9a9a9a;
    --bar: #e8e8e8;
    --shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
    --trash: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAIdJREFUSIntltsKgCAMQDMC3f7/W7We1pMQupEONYKdJxVxh82b2xSAB+LG05WcZr0hApLUG5WxdqFWyiwd3KR4xinBMWA1tk+J1AGbAc50FuKuBQ80qhQYUDwhn5fABJoFyo3Z2+8GPFDm2db2pTj/KYEJmIAJLGfE5dNyEdlzzP6IMit+RjcFRpi1fEfujQAAAABJRU5ErkJggg==);
    --align-left: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAFdJREFUSIntlDEKACAMA6M4iP9/q7jVDwitosQhmUtzw5FkZgZiMrNcAAIQAAAU76DVFn7WR98GSBoiNsBVB1bxvJADdIBrDpxsAOTADwBPdyDihRygA0wa9CAgt/OwNQAAAABJRU5ErkJggg==);
    --align-center: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAF1JREFUSIntlDEKACAMA6M4iP9/q7jVF4ipSxzSObQHPVIiIiCcqjxuAAMYAABaJjz6oHJzTXpncRGpAa4OsH8/zc0HOyAHSPUACCcyHQA78AMA5cBrFzA+2AE5wAbpJSAgACodMgAAAABJRU5ErkJggg==);
    --align-right: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAFhJREFUSIntlDEOACAIA6txMP7/rcYNP2AUcIChrEC4hEuLiAgCq0YeJwABCAAAzbM0+lDPzjWv/cIgigZ4OmD596noQHoAVw7A4AYdSA+gcuAnC+hAeoANiuUgIFd2sYsAAAAASUVORK5CYII=);
    --send-back: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAH1JREFUSIljZCAAONk5/xNSQwlgIUbRtx/faGI5FwcXAxNNTCYBDLgDGGkdx7Do4+LgwipGlxBAthwd0MUB+BIxUbmAlo4Y8EQ46oBRB9DVAdjKA7pkQ5jF2LIiXRyAryAaWWkAG6B5bUgI0DwNfP/5nRGf/IBHwagDBtwBADYvG0zMbvOIAAAAAElFTkSuQmCC);
    --send-front: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAJlJREFUSIntlLEOgCAMRIshEfn/bwWcdNKhGI5aEAfeCA299K4YAmzrdqAaDUvPx6eAGkxvjxGWiCik0OVx7zysGW7BFGD5AfKN54XXS/OUCUANaoIlQWxBSOEW2WJ7sgk8NdTcI4aHcLgAaAGndQjFAlp/28MtKArwzsORay0pWnCNu9QEWRL3aF4LqG2i4d8Z+AJLHXZbwglrziwhQ0u/RwAAAABJRU5ErkJggg==);
}

/* mac trash-can icon for delete controls */
.has-trash::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 5px;
    background: var(--trash) center / contain no-repeat;
}
.trash-only::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    background: var(--trash) center / contain no-repeat;
}

/* menu-bar action icons (icon + label) */
.has-ico {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
}
.has-ico::before {
    content: "";
    flex: none;
    width: 24px;
    height: 18px;
    background: var(--ico) center / contain no-repeat;
}
.ico-load {
    --ico: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAI1JREFUSIntljEKwCAMRW0paFy9/xFdtZ3SKdChpiEJlFLfkkHkPzWKIUwmf2fhBiECjsb60dm5ZiACIjbkqkfOcBUU0PYacirDKoHbLVag7VUUwJFTYQVWc4KRKWASyKmIG9Fd4BpskVAJ3AVqJTbNJLqeFGq5rt9uQg9UR0B4vJSv78AUUH9IpDx9XE42XD37OaWQNgAAAABJRU5ErkJggg==);
}
.ico-map {
    --ico: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAMpJREFUSInNVl0LgzAMrEPQ9P//1uieugfZ2EK+W6cHUokld7k00lIuxsQFYYE2Ivn23Nj8KmCB1hq2Hhw5jtXie2Sr8wB3NN1UBdS1flb6SPsyIn4wsgU0FnZgJCQnZn47dBNy7eAgCOgD7sjGOVFhAVZlErmElAORCi387RBKSDmQqXSYgLf9da3s+2kCrKrpd6+gkANSUhqPtEgVIP3zKTFH+B3T3DAd8I5cdjTvP4befmZHUxXgPcnZESx3aMHlAk69FVNwt+QXDJ3cXCws+I4AAAAASUVORK5CYII=);
}
.ico-save {
    --ico: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAJBJREFUSIntlsEKgCAMQFcE6f7/W6ed6qTEaEtt6CEfeJBwe9MmAvydRfrgd39aJQlHEPOIye/weSlpnVbMalEhAAA6zINDkcQdNRFAh0CR8qiRMNuBVjaLILxqitRXoDZptYB0riXrTARKg7Uw/CecAlPgtQta2o+jdZAqkO74r2hxhh/BFJgCXR6liafH6QXganwRraq2kwAAAABJRU5ErkJggg==);
}
.ico-roles {
    --ico: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAL5JREFUSInNls0OgCAMg9GYKLz/s4qe9CQhxM0WptjEiz/0s4OBc5011HzkZ3+0mMY9Jl8awM/+WLe1xd+FJSSIsWkkA03IS2XkYQmUiZbYI4BV5NIY/ymBNrORyGtTmpxxzFrcd+peAnMANkkRQKs7uwyrAN40hQC0KFsnLATwlSAAJn62VNBegEbO9gAYAJVmnieTnwc+W4Zxj8N15ffFBK62Kj2zkloC1kgCLv8aBmClGUnq3gcSseVJl9EJ6Z9VDh8FrdUAAAAASUVORK5CYII=);
}
.ico-new {
    --ico: url(data:image/png;base64,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);
}
.ico-present {
    --ico: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAOVJREFUSIndlksOwyAMBV+kSmDf/6xJu6KbUrkuBmORVCo7FMSMH78A/9YoUaFExTt+WwkGgP2+AwA4MwDgeBzLGCaYEhWrjdII2+mKe40zm0lMC8yAPRJugSh4JDEUsMCcOSSjJUyBUcV1l0cl8DohXwLeqOskUYk6x1tgdo2lwKyETG+r8Miu1s2bmrysPhKIVOGBt8C1f5Pw6MbyblR3Ap4j1pP1gCHfiXqXy3u9d79b3/W7YPWbFemBHoklYC2h4aOXbgnYSqO1NKeCexKXgS2JS8EtibPArv+Bn/3vtURWR/0EFET2YEeHpKUAAAAASUVORK5CYII=);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
body {
    font-family: Geneva, Verdana, "Lucida Grande", sans-serif;
    font-size: 13px;
    color: var(--ink);
    /* classic 50% dither desktop pattern */
    background: repeating-conic-gradient(#808080 0% 25%, #a8a8a8 0% 50%) 0 0 /
        4px 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

/* ---------- menu bar ---------- */
#menubar {
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
}
/* three sections: left group grows, center group centered, right group right */
.mb-left,
.mb-center,
.mb-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.mb-left {
    flex: 1 1 0;
    justify-content: flex-start;
    min-width: 0;
}
.mb-center {
    flex: 0 0 auto;
    justify-content: center;
}
.mb-right {
    flex: 1 1 0;
    justify-content: flex-end;
    min-width: 0;
}
#browseRoleWrap {
    font-size: 11px;
    display: none;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
#menubar .logo {
    font-weight: bold;
    letter-spacing: 1px;
    padding-right: 10px;
    border-right: 1px solid var(--ink);
    margin-right: 6px;
    white-space: nowrap;
}
.mbtn {
    font-family: inherit;
    font-size: 12px;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    box-shadow: 1.5px 1.5px 0 var(--ink);
    white-space: nowrap;
}
.mbtn:active {
    transform: translate(1.5px, 1.5px);
    box-shadow: none;
}
.mbtn:focus-visible {
    outline: 2px dashed var(--ink);
    outline-offset: 2px;
}
#cardSelect {
    font-family: inherit;
    font-size: 12px;
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    padding: 3px 6px;
    background: var(--paper);
    max-width: 160px;
}
#cardCounter {
    font-size: 12px;
    padding: 0 4px;
    white-space: nowrap;
}
#saveStatus {
    font-size: 11px;
    opacity: 0.65;
    margin-left: 6px;
    white-space: nowrap;
}
#moreBtn {
    display: none;
}

/* small screens: menubar stacks as two centered rows —
   card navigation + New/Delete on top, "browse as" + More below —
   and the center actions collapse into the single "More ▾" button */
@media (max-width: 1000px) {
    #menubar {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
        padding: 6px 10px;
    }
    #menubar .logo {
        display: none;
    }
    /* row 1: arrows, card selector, counter, New, Delete — centered */
    .mb-left {
        flex: 0 0 100%;
        justify-content: center;
    }
    /* row 2: browse-as selector first, then More */
    .mb-right {
        order: 1;
        flex: 0 0 auto;
    }
    .mb-center {
        order: 2;
        flex: 0 0 auto;
    }
    .mb-center > .mbtn {
        display: none;
    }
    #moreBtn {
        display: inline-block;
    }
}

/* ---------- layout ---------- */
#main {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* ---------- tool palette ---------- */
#tools {
    background: var(--paper);
    border-right: 2px solid var(--ink);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 84px;
    flex-shrink: 0;
    overflow-y: auto;
}
#tools .title {
    font-size: 10px;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.tool {
    font-family: inherit;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    padding: 6px 2px;
    cursor: pointer;
}
.tool svg {
    width: 22px;
    height: 22px;
}
.tool.active {
    background: var(--ink);
    color: var(--paper);
}
.tool.active svg * {
    stroke: var(--paper);
}
.tool:focus-visible {
    outline: 2px dashed var(--ink);
    outline-offset: 2px;
}

/* ---------- card area ---------- */
#stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 18px;
    overflow: auto;
}
#window {
    position: relative; /* hosts the .fx-overlay animation layer */
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 8px 8px 2px 2px;
    box-shadow: var(--shadow);
}
#titlebar {
    height: 24px;
    border-bottom: 2px solid var(--ink);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    border-radius: 6px 6px 0 0;
    /* classic racing stripes */
    background: repeating-linear-gradient(
        to bottom,
        var(--paper) 0 2px,
        var(--ink) 2px 3px
    );
}
#titlebar .name {
    background: var(--paper);
    padding: 0 10px;
    font-weight: bold;
    font-size: 12px;
    margin: 0 auto;
    line-height: 18px;
    cursor: text;
}
#card {
    position: relative;
    width: 640px;
    height: 400px;
    background: var(--paper);
    overflow: hidden;
    cursor: crosshair;
}
#card.browse {
    cursor: default;
}

/* the card's freehand painting, under every object and never clickable */
.paintlayer {
    position: absolute;
    left: 0;
    top: 0;
    width: 640px;
    height: 400px;
    pointer-events: none;
}

/* ---------- objects ---------- */
.obj {
    position: absolute;
}
.obj .body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
    padding: 2px;
}
.obj[data-type="rect"] .body {
    border: 2px solid var(--ink);
}
.obj[data-type="ellipse"] .body {
    border: 2px solid var(--ink);
    border-radius: 50%;
}
.obj[data-type="button"] .body {
    border: 1.5px solid var(--ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--ink);
    font-weight: bold;
}
.obj[data-type="text"] .body {
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
}
.fill-white .body {
    background: var(--paper);
}
.fill-black .body {
    background: var(--ink);
    color: var(--paper);
}
.fill-gray .body {
    background: repeating-conic-gradient(
            var(--ink) 0% 25%,
            var(--paper) 0% 50%
        )
        0 0 / 4px 4px;
}
.fill-gray .body span {
    background: var(--paper);
    padding: 0 3px;
}
.fill-none .body {
    background: transparent;
}

#card.browse .obj.linked {
    cursor: pointer;
}
#card.browse .obj[data-type="button"]:active .body {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.obj.selected {
    outline: 2px dashed var(--ink);
    outline-offset: 2px;
    animation: ants 0.6s steps(2) infinite;
}
@keyframes ants {
    50% {
        outline-color: rgba(26, 26, 26, 0.25);
    }
}
@media (prefers-reduced-motion: reduce) {
    .obj.selected {
        animation: none;
    }
}

.handle {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--paper);
    border: 2px solid var(--ink);
    cursor: nwse-resize;
}

.linkbadge {
    position: absolute;
    top: -9px;
    left: -9px;
    background: var(--ink);
    color: var(--paper);
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 6px;
    pointer-events: none;
}

/* ---------- inspector ---------- */
#inspector {
    width: 200px;
    flex-shrink: 0;
    background: var(--paper);
    border-left: 2px solid var(--ink);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
#inspector h2 {
    font-size: 12px;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 6px;
}
#inspector label {
    font-size: 11px;
    display: block;
    margin-bottom: 3px;
}
#inspector input[type="text"],
#inspector input[type="number"],
#inspector select,
#inspector textarea {
    width: 100%;
    font-family: inherit;
    font-size: 12px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 4px;
    background: var(--paper);
}
#inspector textarea {
    resize: vertical;
    min-height: 52px;
}
.fillrow {
    display: flex;
    gap: 6px;
}
.fillsw {
    width: 30px;
    height: 24px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    cursor: pointer;
}
.fillsw.white {
    background: var(--paper);
}
.fillsw.black {
    background: var(--ink);
}
.fillsw.gray {
    background: repeating-conic-gradient(
            var(--ink) 0% 25%,
            var(--paper) 0% 50%
        )
        0 0 / 4px 4px;
}
.fillsw.none {
    background: linear-gradient(
        to top right,
        transparent 46%,
        var(--ink) 47%,
        var(--ink) 53%,
        transparent 54%
    );
}
.fillsw.on {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
/* ---------- classic HyperCard-era fonts (modern fallbacks) ---------- */
.font-geneva {
    font-family: Geneva, Verdana, "Lucida Grande", sans-serif;
}
.font-chicago {
    font-family: Chicago, Charcoal, "Arial Black", "Franklin Gothic Medium",
        sans-serif;
}
.font-new-york {
    font-family: "New York", Georgia, "Times New Roman", serif;
}
.font-monaco {
    font-family: Monaco, "Andale Mono", "Courier New", monospace;
}
.font-courier {
    font-family: "Courier New", Courier, monospace;
}
.font-times {
    font-family: "Times New Roman", Times, serif;
}
/* classic QuickDraw text styles */
.txt-bold {
    font-weight: bold;
}
.txt-plain {
    /* buttons are bold by default; this switches them off */
    font-weight: normal;
}
.txt-underline {
    text-decoration: underline;
}
.txt-outline {
    -webkit-text-stroke: 1px currentColor;
    -webkit-text-fill-color: transparent;
}
.txt-shadow {
    text-shadow: 2px 2px 0 rgba(26, 26, 26, 0.35);
}

.alignrow,
.layerrow,
.stylerow {
    display: flex;
    gap: 6px;
}
.stylesw {
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 6px 0;
    background: var(--paper);
    cursor: pointer;
}
.stylesw.on {
    background: var(--bar);
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}
/* each toggle previews its own style */
.stylesw.st-b {
    font-weight: bold;
}
.stylesw.st-u {
    text-decoration: underline;
}
.stylesw.st-o {
    -webkit-text-stroke: 1px var(--ink);
    -webkit-text-fill-color: transparent;
}
.stylesw.st-s {
    text-shadow: 2px 2px 0 rgba(26, 26, 26, 0.35);
}
.alignsw,
.layerbtn {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background-color: var(--paper);
    cursor: pointer;
    white-space: nowrap;
}
.alignsw::before,
.layerbtn::before {
    content: "";
    flex: none;
    width: 22px;
    height: 16px;
    background: var(--btn-icon) center / contain no-repeat;
}
.alignsw.on {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}
/* icon-less variant (multi-select edge alignment) */
.alignsw.no-ico::before {
    display: none;
}
.alignsw.no-ico {
    font-size: 11px;
    padding: 8px 2px;
}
.ai-left {
    --btn-icon: var(--align-left);
}
.ai-center {
    --btn-icon: var(--align-center);
}
.ai-right {
    --btn-icon: var(--align-right);
}
.li-back {
    --btn-icon: var(--send-back);
}
.li-front {
    --btn-icon: var(--send-front);
}
.rotrow {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rotrow input[type="range"] {
    flex: 1;
    accent-color: var(--ink);
}
.rotrow span {
    font-size: 11px;
    min-width: 34px;
    text-align: right;
}

/* ---------- paint tools ---------- */
/* true-size preview of the dab the brush / spray can will lay down */
.brushprev {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background: var(--paper);
    overflow: hidden;
}
.brushdot {
    border-radius: 50%;
    flex: none;
}
.brushdot.black {
    background: var(--ink);
}
.brushdot.white {
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.35);
}
.brushdot.gray {
    background: repeating-conic-gradient(
            var(--ink) 0% 25%,
            var(--paper) 0% 50%
        )
        0 0 / 4px 4px;
}
/* the spray can previews as a soft edge rather than a hard dab */
.brushdot.spray {
    mask-image: radial-gradient(
        circle at center,
        #000 40%,
        rgba(0, 0, 0, 0.35) 75%,
        transparent 100%
    );
}
#inspector .danger {
    border-color: var(--ink);
}
.hint {
    font-size: 11px;
    line-height: 1.5;
    opacity: 0.8;
}
.spacer {
    flex: 1;
}

/* ---------- permissions / roles ---------- */
#browseRole {
    font-family: inherit;
    font-size: 12px;
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    padding: 3px 6px;
    background: var(--paper);
}
.permrow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.permchip {
    font-family: inherit;
    font-size: 11px;
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    padding: 2px 8px;
    background: var(--paper);
    cursor: pointer;
    white-space: nowrap;
}
.permchip.on {
    background: var(--ink);
    color: var(--paper);
}
#inspector .subhead {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-top: 4px;
    border-top: 1px solid rgba(26, 26, 26, 0.25);
    padding-top: 8px;
}
.branchrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.branchrow span {
    font-size: 11px;
    min-width: 54px;
}
.branchrow select {
    flex: 1;
}

/* ---------- context menu ---------- */
#ctxmenu {
    position: fixed;
    z-index: 60;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 3px;
    min-width: 140px;
    display: none;
}
#ctxmenu button {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    background: var(--paper);
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}
#ctxmenu button:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
}
#ctxmenu button:disabled {
    opacity: 0.35;
    cursor: default;
}
#ctxmenu .sep {
    height: 1px;
    background: var(--ink);
    margin: 3px 5px;
    opacity: 0.3;
}

/* ---------- modal overlay ---------- */
#overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 8px 8px 2px 2px;
    box-shadow: var(--shadow);
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.modal .mtitle {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-bottom: 2px solid var(--ink);
    border-radius: 6px 6px 0 0;
    background: repeating-linear-gradient(
        to bottom,
        var(--paper) 0 2px,
        var(--ink) 2px 3px
    );
}
.modal .mtitle span {
    background: var(--paper);
    padding: 0 10px;
    font-weight: bold;
    font-size: 12px;
    margin: 0 auto;
    line-height: 18px;
}
.modal .mbody {
    padding: 14px;
    overflow: auto;
}
.modal .mbody label {
    font-size: 11px;
    display: block;
    margin: 8px 0 3px;
}
.modal .mbody select,
.modal .mbody input[type="text"] {
    font-family: inherit;
    font-size: 12px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 4px;
    background: var(--paper);
}
.modal .mfoot {
    padding: 10px 14px;
    border-top: 2px solid var(--ink);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.rolemgr-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
.rolemgr-row input {
    flex: 1;
}
.rolemgr-empty {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 8px;
}
#mapScroll {
    overflow: auto;
    max-width: 86vw;
    max-height: 66vh;
    border: 1.5px solid var(--ink);
    background: #fff;
}
.maplegend {
    font-size: 11px;
    margin-bottom: 8px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- graphic objects (image + optional label below) ---------- */
.obj[data-type="graphic"] .body {
    flex-direction: column;
    gap: 2px;
    padding: 2px;
}
.graphicimg {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}
.graphiclabel {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
}
/* ---------- sound + animation objects (edit-time chips) ---------- */
.soundchip,
.animchip {
    border: 1.5px dashed var(--ink);
    border-radius: 6px;
    background: var(--paper);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    gap: 4px;
}
.animchip .swatch {
    flex: none;
    width: 9px;
    height: 9px;
    border: 1px solid var(--ink);
    border-radius: 2px;
}

/* ---------- animation effects ---------- */
.fx-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 45;
    overflow: hidden;
    border-radius: 6px;
}
.fx-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    animation: fx-burst 900ms ease-out forwards;
}
@keyframes fx-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.4);
        opacity: 0;
    }
}
.fx-laser {
    position: absolute;
    left: -45%;
    width: 40%;
    height: 3px;
    border-radius: 2px;
    animation: fx-laser 800ms linear forwards;
}
@keyframes fx-laser {
    to {
        transform: translateX(2400px);
    }
}
.fx-confetti {
    position: absolute;
    top: -12px;
    width: 7px;
    height: 11px;
    animation: fx-fall var(--t, 1400ms) ease-in forwards;
}
@keyframes fx-fall {
    to {
        transform: translateY(var(--fall, 440px)) rotate(var(--r, 540deg));
        opacity: 0.9;
    }
}
.fx-sparkle {
    position: absolute;
    font-size: 15px;
    opacity: 0;
    animation: fx-twinkle 1100ms ease-in-out forwards;
}
@keyframes fx-twinkle {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(0deg);
    }
    40% {
        opacity: 1;
        transform: scale(1.25) rotate(20deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(40deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .fx-overlay {
        display: none;
    }
}
/* sound picker rows + inspector bits */
.soundlist {
    width: min(56vw, 320px);
    max-height: 60vh;
}
.sndplay {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background: var(--paper);
    font-size: 10px;
    cursor: pointer;
}
.sndplay:hover {
    background: var(--bar);
}
.sndname {
    flex: 1;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* inspector preview row (current graphic + choose button) */
.iconprev {
    display: flex;
    align-items: center;
    gap: 8px;
}
.iconprev img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 2px;
    flex-shrink: 0;
}

/* ---------- graphic picker ---------- */
/* categories stacked on the left, scrollable list on the right */
.gsearch {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
.gcat-tab.dim {
    opacity: 0.4;
}
/* category tag shown on cross-category search results */
.graphicrow .gcat {
    flex-shrink: 0;
    font-size: 10px;
    border: 1px solid var(--ink);
    border-radius: 8px;
    padding: 1px 7px;
    opacity: 0.75;
    white-space: nowrap;
}
.gpick-layout {
    display: flex;
    gap: 10px;
    align-items: stretch;
    max-height: 60vh;
}
.gcat-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    overflow-y: auto;
}
.gcat-tab {
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    padding: 5px 12px;
    background: var(--paper);
    cursor: pointer;
    white-space: nowrap;
}
.gcat-tab.on {
    background: var(--ink);
    color: var(--paper);
}
.graphiclist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(56vw, 400px);
    overflow-y: auto;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 4px;
}
.graphicrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    background: var(--paper);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
}
.graphicrow:hover {
    background: var(--bar);
}
.graphicrow.on {
    border-color: var(--ink);
    background: var(--bar);
}
.graphicrow img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid var(--ink);
    border-radius: 3px;
    background: var(--paper);
    padding: 2px;
}
.graphicrow .gnm {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}