/* editor-shell.css — the full game editor's layout: a sticky app bar
   (logo, File/Characters/World/Game/Play/Help menus, game title, Play
   and Send buttons, connection status), the Level Builder as the main
   screen, and every other section as a pop-up window. See
   editor-shell.js. Colours all come from the page's own :root tokens. */

html body { padding: 0 0 24px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ── app bar ─────────────────────────────────────────────────────── */
.app-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--retro-bg);
  border-bottom: 3px solid var(--retro-border);
  box-shadow: inset 0 2px 0 var(--retro-hi), 0 3px 0 rgba(0,0,0,.12);
}
.app-brand { margin: 0; line-height: 0; flex: 0 0 auto; }
.app-brand .brand-title-img { height: 34px; }
.app-brand .brand-title-fallback {
  font-size: 20px; line-height: 1.2; color: var(--retro-text); text-shadow: 1px 1px 0 var(--retro-hi);
}
.app-bar .menu-bar { flex: 0 1 auto; flex-wrap: wrap; }
.app-bar .menu-btn { font-size: 13px; padding: 6px 12px; }
.app-bar .menu-option { font-size: 13px; }
.app-title-input {
  flex: 0 1 220px; min-width: 140px; width: auto; font-size: 14px; padding: 6px 9px;
}
.app-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;
}
.app-actions .status {
  font-size: 12px; color: var(--retro-text); gap: 6px;
  padding-left: 8px; border-left: 2px solid var(--retro-lo);
}
.app-actions .status button { padding: 5px 10px; font-size: 12px; border-radius: 0; }

/* Chunky arcade buttons — the two things kids reach for most. */
.app-play-btn, .app-send-btn {
  font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .5px;
  padding: 7px 16px; border-radius: 0; cursor: pointer; color: #fff;
  border: 2px solid var(--retro-border);
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  transition: transform .06s, filter .1s;
}
.app-play-btn { background: #16a34a; box-shadow: inset 2px 2px 0 #4ade80, inset -2px -2px 0 #166534, 3px 3px 0 var(--retro-border); }
.app-send-btn { background: #ea580c; box-shadow: inset 2px 2px 0 #fdba74, inset -2px -2px 0 #9a3412, 3px 3px 0 var(--retro-border); }
.app-play-btn:hover:not(:disabled), .app-send-btn:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--retro-border); }
.app-play-btn:active:not(:disabled), .app-send-btn:active:not(:disabled) { transform: translate(2px, 2px); }
.app-play-btn:disabled { filter: grayscale(.7); opacity: .6; }

/* ── main workspace ──────────────────────────────────────────────── */
.wrap.workspace { max-width: 1400px; margin: 0 auto; padding: 16px 20px 0; }
.workspace #cardBuilder { margin-bottom: 0; }
.workspace #cardBuilder > .status-tip { margin: 0 0 12px; }

/* ── pop-up windows ──────────────────────────────────────────────── */
.gt-window {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 72px 16px 24px; overflow-y: auto;
  background: rgba(8, 36, 32, .55);
  animation: gtFade .15s ease-out;
}
.gt-window[hidden] { display: none; }
.gt-window-box {
  position: relative; width: min(1040px, 100%);
  background: var(--panel); border: 3px solid var(--retro-border);
  box-shadow: 6px 6px 0 rgba(0,0,0,.28);
  animation: gtPop .18s ease-out;
}
#win-art .gt-window-box, #win-upload .gt-window-box { width: min(820px, 100%); }
.gt-window .card {
  margin: 0; border: none; border-radius: 0; box-shadow: none; animation: none;
  padding: 18px 20px 20px;
}
.gt-window .card > h2 { font-size: 28px; margin: 0 44px 8px 0; }
.gt-window .card > .status-tip { margin-left: 0; }
.gt-window-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; padding: 0; border-radius: 0;
  font: 800 22px/1 inherit; color: var(--retro-text);
  background: var(--retro-slot-bg); border: 2px solid var(--retro-border);
  box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-slot-lo);
}
.gt-window-close:hover { background: var(--retro-hi); border-color: var(--retro-border); }
.gt-window .flash-target { animation: gtFlash 1.2s ease-out; }

@keyframes gtFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gtPop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gtFlash { 0%, 40% { box-shadow: 0 0 0 4px #0e4242; } 100% { box-shadow: 0 0 0 0 rgba(14,66,66,0); } }

/* ── message toasts (mirror of the upload log) ───────────────────── */
.gt-toasts {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 400;
  display: grid; gap: 6px; width: min(560px, calc(100vw - 32px)); pointer-events: none;
}
.gt-toast {
  background: #0c1f1b; color: #6ef2c9; border: 2px solid var(--retro-border);
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
  font: 600 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  padding: 8px 12px; text-shadow: 0 0 4px rgba(110,242,201,.4);
  animation: gtToastIn .2s ease-out;
  transition: opacity .4s, transform .4s;
}
.gt-toast.out { opacity: 0; transform: translateY(8px); }
@keyframes gtToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .app-bar { padding: 8px 12px; }
  .app-title-input { flex: 1 1 100%; order: 5; }
  .app-actions { margin-left: 0; flex: 1 1 100%; order: 6; }
  .app-actions .status { border-left: none; padding-left: 0; }
  .wrap.workspace { padding: 12px 12px 0; }
  .gt-window { padding: 12px 8px; }
  .gt-window .card { padding: 14px 12px; }
}

.app-play-btn.not-ready { filter: grayscale(.7); opacity: .65; }

/* ── full-screen level editor ────────────────────────────────────────
   The Level Builder fills everything under the app bar; the level
   canvas is zoomed to fill the height (previewScale, set in
   editor-shell.js) and scrolls sideways; the tile/skin/object picker
   floats as a tool panel in the top-left corner. --appbar-h is kept in
   sync with the app bar's real height by editor-shell.js. */
:root { --appbar-h: 60px; --panel-w: 380px; }
html, html body { height: 100%; overflow: hidden; }
.wrap.workspace { padding: 0; max-width: none; }
.workspace > #noSerialWarning { display: none !important; }   /* shown as a toast instead */

.workspace #cardBuilder {
  position: fixed; top: var(--appbar-h); left: 0; right: 0; bottom: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; animation: none;
  background: #0b1613;
}
#cardBuilder .builder-layout { display: block; position: relative; height: 100%; }
#cardBuilder .builder-main { position: absolute; inset: 0; }
#cardBuilder .canvas-scroll {
  height: 100%; display: flex; align-items: center;
  padding: 12px 12px 12px calc(var(--panel-w) + 24px);
  border: 0; border-radius: 0; box-shadow: none; background: #0b1613;
  overscroll-behavior-x: contain;
}
#cardBuilder .canvas-scroll::after { content: ""; flex: 0 0 12px; }   /* right-hand breathing room */
#cardBuilder.panel-collapsed .canvas-scroll { padding-left: 12px; }
#cardBuilder canvas#preview { flex: 0 0 auto; border-radius: 0; box-shadow: 0 0 0 3px #0e4242, 0 6px 24px rgba(0,0,0,.5); }

/* the eraser gets its own cursor so it's obvious it's on */
canvas#preview.erasing {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ctext x='2' y='22' font-size='22'%3E%F0%9F%A7%B9%3C/text%3E%3C/svg%3E") 4 24, not-allowed;
}

/* floating tool panel */
#cardBuilder #builderPanel {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  width: var(--panel-w); max-height: calc(100% - 24px);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--panel2); border: 3px solid var(--retro-border); border-radius: 0;
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
}
.builder-panel-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--retro-bg); border-bottom: 3px solid var(--retro-border);
  box-shadow: inset 0 2px 0 var(--retro-hi);
}
.builder-panel-title { flex: 1; font-weight: 800; font-size: 14px; color: var(--retro-text); white-space: nowrap; }
.builder-panel-btn {
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 0; cursor: pointer;
  color: var(--retro-text); background: var(--retro-slot-bg); border: 2px solid var(--retro-lo);
  box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-slot-lo);
}
.builder-panel-btn:hover { background: var(--retro-hi); border-color: var(--retro-border); box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-slot-lo); }
.builder-panel-btn[aria-pressed="true"] { background: var(--retro-glow); border-color: var(--retro-border); }
.builder-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 4px; }
.builder-panel-body .tabstrip { margin-bottom: 10px; }
#builderPanel > .status-tip {
  flex: 0 0 auto; margin: 0; border: 0; border-top: 2px solid var(--border); border-radius: 0;
}
#builderPanel.collapsed { width: auto; }
#builderPanel.collapsed .builder-panel-body,
#builderPanel.collapsed > .status-tip,
#builderPanel.collapsed #builderListBtn,
#builderPanel.collapsed .builder-panel-title { display: none; }

/* the one eraser */
.eraser-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 10px; padding: 9px 12px; border-radius: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--retro-text);
  background: var(--retro-slot-bg); border: 3px solid var(--retro-border);
  box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-slot-lo), 3px 3px 0 rgba(0,0,0,.25);
}
.eraser-btn:hover { background: var(--retro-hi); border-color: var(--retro-border); box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-slot-lo), 3px 3px 0 rgba(0,0,0,.25); }
.eraser-btn kbd {
  font: 700 11px ui-monospace, Menlo, Consolas, monospace; padding: 1px 5px;
  background: rgba(255,255,255,.6); border: 1px solid var(--retro-lo);
}
.eraser-btn.active {
  color: #fff; background: #e11d48; border-color: #7f1d1d;
  box-shadow: inset 2px 2px 0 #fb7185, inset -2px -2px 0 #9f1239, 0 0 0 3px rgba(225,29,72,.3);
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.eraser-btn.active kbd { color: var(--text); }

/* 📋 List drawer (the exact-position tables) */
#cardBuilder .builder-lists {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  width: min(640px, calc(100% - var(--panel-w) - 48px)); max-height: 46%; overflow: auto;
  padding: 10px 12px; background: #fff; border: 3px solid var(--retro-border);
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
}
#cardBuilder .builder-lists[hidden] { display: none; }
.builder-lists-close { position: sticky; top: 0; float: right; z-index: 1; }
#cardBuilder .builder-lists table { margin-top: 0; }

@media (max-width: 720px) {
  :root { --panel-w: min(340px, calc(100vw - 24px)); }
  #cardBuilder .canvas-scroll { padding-left: 12px; }
  #cardBuilder .builder-lists { width: calc(100% - 24px); }
}

/* level navigator: mini-map + zoom, pinned along the bottom */
:root { --nav-h: 56px; }
#cardBuilder .builder-main .canvas-scroll { height: calc(100% - var(--nav-h)); }
#cardBuilder #builderPanel { max-height: calc(100% - var(--nav-h) - 24px); }
#cardBuilder .builder-lists { bottom: calc(var(--nav-h) + 12px); max-height: calc(100% - var(--nav-h) - 36px); }
.level-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  background: #081311; border-top: 3px solid #0e4242;
}
#levelMinimap {
  flex: 1 1 auto; min-width: 0; height: 40px; width: 100%;
  image-rendering: auto; cursor: pointer; touch-action: none;
  border: 2px solid #1d5a54; background: #0b1613;
}
.zoom-btns { flex: 0 0 auto; display: flex; gap: 4px; }
.zoom-btns .builder-panel-btn { min-width: 34px; font-size: 15px; padding: 5px 8px; }