:root {
        --stone-dark:   #1a1714;
        --stone-mid:    #2c2820;
        --stone-light:  #3e3830;
        --stone-pale:   #5a5248;
        --ink:          #0d0b09;
        --parchment:    #c8b89a;
        --parchment-dim:#9e8c74;
        --ember:        #c8622a;
        --ember-bright: #f0a050;
        --gold:         #c8a040;
        --gold-dim:     #806830;
        --blood:        #8b1a1a;
        --poison:       #3a6b2a;
        --ice:          #3a6a8a;
        --shadow:       rgba(0,0,0,0.7);

        /* Tile colours */
        --col-floor:    #2a2420;
        --col-wall:     #4a4440;
        --col-door:     #6b4a20;
        --col-chest:    #8a6a10;
        --col-monster:  #7a1818;
        --col-trap:     #5a1e5a;
        --col-stairs-d: #1a3a5a;
        --col-stairs-u: #1a5a3a;
        --col-water:    #1a3050;
        --col-lava:     #8a2800;
        --col-pillar:   #5a5048;
        --col-altar:    #4a1a4a;
        --col-spawn:    #4a1a1a;
        --col-exit:     #1a4a1a;
        --col-empty:    #111008;
      }

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

      body {
        background: var(--ink);
        color: var(--parchment);
        font-family: 'IM Fell English', serif;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      /* ── HEADER ─────────────────────────────────────── */
      header {
        flex-shrink: 0;
        display: flex;
        margin-top:80px;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        background: linear-gradient(180deg, #0d0b09 0%, var(--stone-dark) 100%);
        border-bottom: 2px solid var(--gold-dim);
        gap: 12px;
      }

      header h1 {
        font-family: 'Uncial Antiqua', cursive;
        font-size: 1.4rem;
        color: var(--ember-bright);
        text-shadow: 0 0 18px var(--ember), 0 0 4px #000;
        white-space: nowrap;
        letter-spacing: 0.04em;
      }

      /* ── TOOLBAR ─────────────────────────────────────── */
      .toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
        flex: 1;
        justify-content: center;
      }

      .tile-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top:5px;
        padding: 4px 8px;
        border: 1px solid var(--stone-pale);
        border-radius: 3px;
        background: var(--stone-mid);
        color: var(--parchment-dim);
        font-family: 'IM Fell English', serif;
        font-size: 0.72rem;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
        user-select: none;
      }
      .tile-btn:hover { border-color: var(--parchment-dim); color: var(--parchment); }
      .tile-btn.active {
        border-color: var(--ember-bright);
        color: var(--ember-bright);
        box-shadow: 0 0 8px var(--ember), inset 0 0 6px rgba(200,98,42,0.15);
      }
      .tile-btn .swatch {
        width: 14px; height: 14px;
        border-radius: 2px;
        border: 1px solid rgba(255,255,255,0.15);
        flex-shrink: 0;
      }

      /* ── ACTION BUTTONS ───────────────────────────────── */
      .actions { display: flex; gap: 6px; flex-shrink: 0; }

      .act-btn {
        padding: 5px 11px;
        border-radius: 3px;
        border: 1px solid var(--gold-dim);
        background: transparent;
        color: var(--gold);
        font-family: 'IM Fell English', serif;
        font-size: 0.78rem;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .act-btn:hover { background: var(--gold-dim); color: var(--parchment); }
      .act-btn.danger { border-color: var(--blood); color: #e05050; }
      .act-btn.danger:hover { background: var(--blood); color: var(--parchment); }

      /* ── MAIN AREA ───────────────────────────────────── */
      .main {
        margin-top:80px;
        flex: 1;
        display: flex;
        overflow: hidden;
        gap: 0;
      }

      /* ── GRID CONTAINER ──────────────────────────────── */
      .grid-wrap {
        flex: 1;
        overflow: auto;
        padding: 12px;
        background:
          repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
          repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
          var(--ink);
      }

      #dungeon-grid {
        display: grid;
        grid-template-columns: repeat(21, 28px);
        grid-template-rows:    repeat(21, 28px);
        gap: 1px;
        user-select: none;
        border: 2px solid var(--stone-pale);
        box-shadow: 0 0 32px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.5);
        cursor:crosshair ;
      }

      .cell {
        width: 28px; height: 28px;
        background: var(--col-empty);
        /*cursor:crosshair ;*/
        transition: filter 0.05s;
        position: relative;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }
      .cell:hover { filter: brightness(1.6); z-index: 2; }

      /* Tile type backgrounds */
      .cell[data-lyr0="floor"]    { background: var(--col-floor); }
      .cell[data-lyr0="wall"]     { background: var(--col-wall); box-shadow: inset 0 0 3px rgba(0,0,0,0.6); }
      .cell[data-lyr0="breakwall"]     { background: var(--col-wall); box-shadow: inset 0 0 3px rgba(0,0,0,0.6); }
      .cell[data-lyr0="door"]     { background: var(--col-door); }
      .cell[data-lyr0="stairs-d"] { background: var(--col-stairs-d); }
      .cell[data-lyr0="stairs-u"] { background: var(--col-stairs-u); }
      .cell[data-lyr0="water"]    { background: var(--col-water); }
      .cell[data-lyr0="lava"]     { background: var(--col-lava); }
      /*
      .cell[data-type="floor"]    { background: var(--col-floor); }
      .cell[data-type="wall"]     { background: var(--col-wall); box-shadow: inset 0 0 3px rgba(0,0,0,0.6); }
      .cell[data-type="chest"]    { background: var(--col-chest); }
      .cell[data-type="monster"]  { background: var(--col-monster); }
      .cell[data-type="trap"]     { background: var(--col-trap); }
      .cell[data-type="water"]    { background: var(--col-water); }
      .cell[data-type="lava"]     { background: var(--col-lava); }
      .cell[data-type="pillar"]   { background: var(--col-pillar); }
      .cell[data-type="altar"]    { background: var(--col-altar); }
      .cell[data-type="spawn"]    { background: var(--col-spawn); }
      .cell[data-type="exit"]     { background: var(--col-exit); }
      */

      /* ── TOOLBAR-LEFT────────────────────────────────── */

      .toolbar-left {
        width: 50px;
        /*flex-shrink: 0;*/
        margin-left: 5px;
        background: var(--stone-dark);
        /*border-rleft: 2px solid var(--stone-pale);*/
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-right: 2px solid var(--stone-pale);
      }

      .toolbar-option {
        width:32px;
        height:32px;
        display:flex;
        flex-direction: row;
        text-align: center;
      }

      /* ── ICON-BAR ────────────────────────────────────── */

      .iconbar {
        width:130px;
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-right: 2px solid var(--stone-pale);
      }

      #categoryIcons {
        margin-top:5px;
        text-align: center;
      }

      /* ── SIDEBAR ─────────────────────────────────────── */
      .sidebar {
        width: 300px;
        flex-shrink: 0;
        background: var(--stone-dark);
        border-left: 2px solid var(--stone-pale);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .sidebar-title {
        font-family: 'Uncial Antiqua', cursive;
        font-size: 0.85rem;
        color: var(--gold);
        padding: 10px 12px 6px;
        border-bottom: 1px solid var(--stone-pale);
        text-shadow: 0 0 8px var(--gold-dim);
        letter-spacing: 0.05em;
      }

      .sidebar-section { padding: 8px 12px; border-bottom: 1px solid var(--stone-mid); }
      .sidebar-section label { font-size: 0.9rem; color: var(--parchment-dim); display: block; margin-bottom: 4px; font-style: italic; }
      .sidebar-section .fieldlabel { font-size: 0.9rem; color: var(--parchment-dim); margin-bottom: 4px; display: inline ; margin-right:10px; font-style: italic; }

      .coord-display {
        font-size: 0.8rem;
        color: var(--ember-bright);
        font-family: 'Courier New', monospace;
        letter-spacing: 0.1em;
      }

      .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
      .stat-item { font-size: 0.7rem; }
      .stat-num  { color: var(--ember-bright); font-style: normal; }

      .legend, .props { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding: 8px 12px; flex: 1; }
      .legend-row { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; }
      .legend-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); }

      

      .mode-indicator {
        padding: 8px 12px;
        font-size: 0.72rem;
        color: var(--parchment-dim);
        border-top: 1px solid var(--stone-pale);
        background: var(--stone-mid);
      }
      
      .mode-indicator span { color: var(--ember-bright); font-style: normal; }

      /* ── TOOLTIP ──────────────────────────────────────── */
      #tooltip {
        position: fixed;
        background: var(--stone-dark);
        border: 1px solid var(--gold-dim);
        color: var(--parchment);
        padding: 5px 9px;
        font-size: 0.72rem;
        border-radius: 3px;
        pointer-events: none;
        display: none;
        z-index: 100;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(0,0,0,0.8);
      }

      /* ── EXPORT MODAL ─────────────────────────────────── */
      #modal-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.85);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 200;
      }
      #modal-overlay.open { display: flex; }

      .modalX {
        background: var(--stone-dark);
        border: 2px solid var(--gold-dim);
        border-radius: 4px;
        padding: 20px;
        width: min(90vw, 560px);
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: 0 0 60px rgba(0,0,0,0.9);
      }

      .modalX h2 {
        font-family: 'Uncial Antiqua', cursive;
        color: var(--gold);
        font-size: 1.1rem;
        text-shadow: 0 0 8px var(--gold-dim);
      }

      .modalX textarea {
        flex: 1;
        min-height: 260px;
        background: var(--ink);
        border: 1px solid var(--stone-pale);
        color: var(--parchment-dim);
        font-family: 'Courier New', monospace;
        font-size: 0.7rem;
        padding: 10px;
        border-radius: 3px;
        resize: none;
        outline: none;
      }

      .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

      /* scrollbar */
      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: var(--ink); }
      ::-webkit-scrollbar-thumb { background: var(--stone-pale); border-radius: 3px; }

      #export-area, #load-area {
        width:460px;
        height: 600px;
      }

	.modal-header {
		background-color: #b63a3a;
		color: #fafafa;
	}

	.modal-body {
		background-color: #fafafa;
	}

  .modal-body p {
		color: #000000;
	}

#category-selection select {

    appearance: none;
    -webkit-appearance: none;
    background-color: var(--stone-mid);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='$23c8a040'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid var(--stone-pale);
    border-radius: 3px;
    color: var(--parchment-dim);
    font-family: 'IM Fell English', serif;
    font-size: 0.78em;
    padding: 4px 28px 4px 8px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    outline: none;
}



select:option {
    background-color: var(--stone-dark);
    color: var(--parchment);
}