/* World planner shell: the set planner's look (Century Gothic Bold, navy glass panels, yellow labels). */
@font-face { font-family: 'Century Gothic GT'; src: url(/ui/font.ttf) format('truetype'); font-weight: 700; font-display: swap; }
:root {
  --bg: #0b2233; --panel: rgba(9, 28, 42, .86); --panel-solid: #0c2435; --edge: rgba(160, 220, 255, .12); --edge-strong: rgba(160, 220, 255, .22);
  --well: rgba(255, 255, 255, .045); --well-hover: rgba(255, 255, 255, .09); --well-on: rgba(255, 226, 110, .16);
  --text: #f4f8fb; --dim: rgba(222, 236, 245, .62); --faint: rgba(222, 236, 245, .38); --label: #ffe27a; --cyan: #9eeaff; --green: #58d06a; --red: #ff6b6b;
  color-scheme: dark;

  /* ---- design tokens (W27): one scale for the whole shell ---- */
  /* the Growtopia gold: active / selected / focused-row states (--label stays the lighter gold for text) */
  --accent: #f5bd24; --accent-hi: #ffd85a; --on-accent: #2a1d00;
  --accent-soft: rgba(245, 189, 36, .15); --accent-line: rgba(245, 189, 36, .62); --accent-glow: rgba(245, 189, 36, .32);
  --accent-fill: linear-gradient(180deg, rgba(255, 216, 90, .26), rgba(245, 189, 36, .11));
  /* radii: tiny chips · controls · cards / rows · panels / menus / floating bars · dialogs / the dock */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r: 14px; --r-lg: 18px;
  /* spacing and control heights */
  --s1: 4px; --s2: 6px; --s3: 8px; --s4: 12px; --s5: 16px; --s6: 20px;
  --h-xs: 22px; --h-sm: 28px; --h-md: 34px; --h-icon: 32px;
  /* type */
  --fs-xs: 10.5px; --fs-sm: 11.5px; --fs-md: 12.5px; --fs-base: 13px; --fs-lg: 15px; --fs-xl: 17px;
  /* icon sizes (the line icons: 24 grid, 1.75 stroke) */
  --ic-sm: 16px; --ic-md: 18px; --ic-lg: 20px;
  /* lines and shadows */
  --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .16);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .22);
  --sh-2: 0 1px 3px rgba(0, 0, 0, .28), 0 14px 36px rgba(0, 0, 0, .46);
  --sh-3: 0 2px 6px rgba(0, 0, 0, .3), 0 28px 64px rgba(0, 0, 0, .58);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .07);
  /* solid panels: calm, dense content */
  --panel-fill: linear-gradient(180deg, #0f2a3c, #0b2131);
  /* glass: only what floats over the world. Warm-dark and clear (not frost): a thin smoky tint, a small blur with a
     little more saturation, a 1 px light rim on the top edge, a soft shadow */
  --glass: linear-gradient(180deg, rgba(34, 29, 24, .5), rgba(16, 14, 12, .6));
  --glass-strong: linear-gradient(180deg, rgba(30, 26, 22, .7), rgba(14, 12, 11, .78));
  --glass-solid: rgba(20, 22, 26, .94);
  --glass-edge: rgba(255, 244, 225, .14);
  --glass-hi: inset 0 1px 0 rgba(255, 248, 235, .2);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 32px rgba(0, 0, 0, .34);
  --glass-blur: blur(12px) saturate(1.5);
  /* focus: a cyan ring, distinct from the gold selection */
  --focus: #9eeaff;
  --ease-out: cubic-bezier(.2, .9, .3, 1); --ease-spring: cubic-bezier(.3, 1.5, .5, 1);
  --t-fast: .12s; --t-med: .16s;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--text); background: var(--bg) url(/ui/menu-bg.png) center / cover fixed;
  font: 700 13px/1.4 'Century Gothic GT', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 32, .72), rgba(6, 20, 32, .9)); pointer-events: none; }
#app { position: relative; height: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .38; }
kbd { font: inherit; font-size: 10.5px; color: var(--faint); letter-spacing: .02em; }

.app {
  position: relative; height: 100%; display: grid; gap: 6px; padding: 6px; --panelw: 300px;
  grid-template-columns: var(--railw) minmax(0, 1fr) var(--panelw); grid-template-rows: 42px minmax(0, 1fr) 24px;
  grid-template-areas: "top top top" "rail stage panel" "status status status";
}
/* the shell's panels are solid (no backdrop blur): calm and readable, nothing to repaint under them */
.topbar, .rail, .panel, .status {
  background: var(--panel-fill); border: 1px solid var(--edge); border-radius: var(--r);
  box-shadow: var(--sh-1), var(--hi);
}

/* ---------- top bar ---------- */
.topbar { grid-area: top; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 10px; min-width: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); margin-right: 6px; }
.logo { width: 28px; height: 28px; transform: scale(.85); display: grid; place-items: center; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .45)); }
.beta { font-size: 9.5px; letter-spacing: .08em; padding: 2px 5px; border-radius: var(--r-xs); background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-accent); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), 0 0 10px rgba(245, 189, 36, .25); }
.menus { display: flex; gap: 2px; }
.menu { position: relative; }
.menubtn { background: none; border: 0; border-radius: var(--r-sm); padding: 5px 10px; color: var(--dim); transition: background var(--t-fast), color var(--t-fast); }
.menubtn:hover { background: var(--well-hover); color: var(--text); }
/* (an open menu lifts the bar over the canvas's own layers: the hint, the hotbar, the dock) */
.topbar:has(.menu.open) { z-index: 40; }
.menu.open .menubtn { background: var(--accent-soft); color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(245, 189, 36, .3); }
/* the dropdowns: a solid panel (dense content), a line icon per entry, the shortcut chip / value / switch on the right */
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes menuin { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.dropdown {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 50; min-width: 252px; max-width: min(340px, calc(100vw - 16px)); padding: 5px;
  display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(180deg, #11304a, #0c2436); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform-origin: top left; animation: menuin .15s var(--ease-out);
}
.dropdown .item {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: var(--h-icon); padding: 3px 8px 3px 4px;
  background: none; border: 0; border-radius: var(--r-sm); text-align: left; color: var(--text); outline: none; transition: background .1s;
}
/* the row under the pointer / keyboard: the gold, faintly, the icon in full gold */
.dropdown .item:hover:not(:disabled), .dropdown .item:focus-visible, .dropdown .item.open { background: linear-gradient(90deg, rgba(245, 189, 36, .17), rgba(245, 189, 36, .06)); }
.dropdown .item:focus-visible { box-shadow: inset 0 0 0 1.5px var(--focus); }
.dropdown .item .mi { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-xs); color: var(--dim); transition: color .1s; }
.dropdown .item .mi svg { width: var(--ic-sm); height: var(--ic-sm); }
.dropdown .item:hover:not(:disabled) .mi, .dropdown .item:focus-visible .mi, .dropdown .item.open .mi { color: var(--accent); }
.dropdown .item .lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown .item .lbl small { font-size: var(--fs-xs); line-height: 1.3; color: var(--faint); white-space: normal; }
.dropdown .item .val { flex: none; font-size: var(--fs-sm); color: var(--faint); }
.dropdown .item kbd { flex: none; min-width: 20px; padding: 1px 6px; border-radius: var(--r-xs); text-align: center; background: rgba(255, 255, 255, .07); color: var(--dim); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3); }
.dropdown .item .more { flex: none; display: grid; place-items: center; width: 14px; margin-right: -3px; color: var(--faint); }
.dropdown .item .more svg { width: 14px; height: 14px; }
.dropdown .item.open .more { color: var(--accent); }
/* a toggle's switch */
.dropdown .switch { position: relative; flex: none; width: 26px; height: 15px; border-radius: 8px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); transition: background .15s; }
.dropdown .switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: rgba(222, 236, 245, .7); transition: transform .15s var(--ease-spring), background .15s; }
.dropdown .switch.on { background: var(--accent); }
.dropdown .switch.on::after { transform: translateX(11px); background: var(--on-accent); }
.dropdown .sep { flex: none; height: 1px; margin: 4px 8px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
/* submenus: beside the entry (the side that fits), or inline under it on a narrow screen */
.subwrap { position: relative; display: flex; flex-direction: column; }
.dropdown.sub { top: -6px; left: calc(100% + 4px); min-width: 220px; animation-name: subin; }
@keyframes subin { from { opacity: 0; transform: translateX(-6px); } }
.dropdown.sub[data-place="left"] { left: auto; right: calc(100% + 4px); }
.dropdown.sub[data-place="inline"] {
  position: static; min-width: 0; max-width: none; margin: 1px 0 3px 17px; padding: 3px 0 3px 8px; border: 0; border-left: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
}
.divider { width: 1px; height: 24px; background: var(--edge); margin: 0 4px; }
.spacer { flex: 1; }
.toolopts { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.toolopts .hint { color: var(--faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: flex; padding: 3px; gap: 3px; background: rgba(0, 0, 0, .3); border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.seg button { background: none; border: 0; border-radius: var(--r-xs); padding: 4px 10px; color: var(--dim); font-size: 12px; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.seg.wide button { flex: 1; padding: 8px 10px; }
.worldname { background: var(--well); border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px 9px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .03em; }
.worldname:hover:not(:disabled) { background: var(--well-hover); }
.worldname .dim { color: var(--faint); letter-spacing: 0; }
input.worldname.editing { outline: none; border-color: var(--label); background: rgba(0, 0, 0, .3); width: 200px; text-transform: uppercase; user-select: text; }
.iconbtn { display: grid; place-items: center; width: var(--h-icon); height: var(--h-icon); border: 0; border-radius: var(--r-sm); background: none; color: var(--dim); }
.iconbtn:hover:not(:disabled) { background: var(--well-hover); color: var(--text); }
.hist { display: flex; gap: 2px; }
.savestate { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; padding: 0 6px; min-width: 74px; }
.savestate .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.savestate.pending .dot, .savestate.saving .dot { background: var(--label); box-shadow: 0 0 6px var(--label); }
.savestate.error .dot { background: var(--red); box-shadow: 0 0 6px var(--red); }

.weather { position: relative; }
.chip { display: flex; align-items: center; gap: 6px; background: var(--well); border: 0; border-radius: var(--r-sm); padding: 3px 7px 3px 3px; color: var(--text); max-width: 200px; }
.chip:hover { background: var(--well-hover); }
.chip img, .chip .sky { width: 34px; height: 20px; border-radius: 6px; object-fit: cover; display: block; flex: none; }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.chip svg { width: 14px; height: 14px; color: var(--dim); flex: none; }
.sky { background: linear-gradient(180deg, #7cc8f5, #5fb6ee); }
.wxpop {
  position: absolute; right: 0; top: calc(100% + 6px); width: 420px; max-height: 70vh; overflow: auto; z-index: 50; padding: 12px;
  background: linear-gradient(180deg, #11304a, #0c2436); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform-origin: top right; animation: menuin .15s var(--ease-out);
}
.wxgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.wxgrid button { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--well); border: 0; border-radius: 9px; font-size: 11px; color: var(--dim); text-align: left; }
.wxgrid button:hover { background: var(--well-hover); color: var(--text); }
.wxgrid button.on { background: var(--well-on); color: var(--text); box-shadow: inset 0 0 0 1px var(--label); }
.wxgrid img, .wxgrid .sky { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; object-fit: cover; display: block; }
.wxgrid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ---------- rail: the tools, grouped, labels beside the icons (or icons only) ---------- */
.app { --railw: 52px; }
.app.raillabels { --railw: 124px; }
.rail { grid-area: rail; display: flex; flex-direction: column; gap: 2px; padding: 6px 5px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.railgroup { display: flex; flex-direction: column; gap: 4px; }
.railgroup + .railgroup { margin-top: 6px; }
.railhead { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--label); text-shadow: 1px 1px 0 rgba(0, 0, 0, .75); padding: 0 3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail:not(.labels) .railhead { height: 1px; margin: 2px 8px 3px; background: var(--edge-strong); }
.rail:not(.labels) .railgroup:first-child .railhead { display: none; }
.railgrid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.rail.labels .railgrid { grid-template-columns: 1fr 1fr; }
.slot, .tool {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 40px; padding: 4px 2px 3px; border-radius: 10px; color: var(--dim);
  background: linear-gradient(180deg, rgba(130, 200, 245, .13), rgba(80, 150, 200, .07));
  border: 1px solid rgba(170, 225, 255, .16); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background .08s, transform .08s, border-color .08s;
}
.rail.labels .tool { min-height: 54px; }
.tool:hover { background: linear-gradient(180deg, rgba(150, 215, 255, .22), rgba(90, 160, 210, .12)); color: var(--text); border-color: rgba(190, 235, 255, .3); }
.tool:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28); }
.tool.on {
  color: var(--label); border: 2px solid var(--label); padding: 3px 1px 2px;
  background: linear-gradient(180deg, rgba(255, 226, 110, .26), rgba(255, 190, 40, .12));
  box-shadow: 0 0 12px rgba(255, 210, 80, .25), inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.tool:focus-visible, .railmini:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.ticon { display: grid; place-items: center; width: 32px; height: 32px; }
.tlabel { font-size: 10.5px; line-height: 1.1; text-align: center; color: inherit; text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.iicon { display: block; width: 32px; height: 32px; flex: none; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .4)); }
.licon { display: grid; place-items: center; width: 32px; height: 32px; color: #dcebf5; }
.licon svg { width: 24px; height: 24px; }
.tool:hover .licon, .flyitem:hover .licon { color: #fff; }
.tool.on .licon, .flyitem.on .licon { color: var(--label); }
/* accents only where the colour means something: water blue, fire orange (the paint brush carries its colour) */
.licon .ic-water .acc { stroke: #5cc8ff; }
.licon .ic-water path:first-child { fill: rgba(92, 200, 255, .16); }
.licon .ic-fire .acc { stroke: #ff9a3d; fill: rgba(255, 154, 61, .14); }
.licon .ic-fire .core { stroke: none; fill: #ffc24d; }
.licon .ic-paint .bristles { stroke: currentColor; }
.railgrow { flex: 1; min-height: 8px; }
.railfoot { display: flex; flex-direction: column; gap: 2px; }
.railmini { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--dim); font-size: 11.5px; }
.railmini:hover { background: var(--well-hover); color: var(--text); }
.railmini svg { width: 18px; height: 18px; flex: none; }
.rail.labels .railmini { justify-content: flex-start; padding: 0 10px; }

/* ---------- tooltips ---------- */
.wtip {
  position: fixed; left: -9999px; top: 0; z-index: 400; max-width: 300px; padding: 7px 10px 8px; pointer-events: none;
  background: #0f2c41; border: 1px solid var(--accent-line); border-radius: var(--r-sm); box-shadow: var(--sh-2);
  opacity: 0; transition: opacity .1s;
}
.wtip.in { opacity: 1; }
.wtip .tt { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.wtip .tt b { color: var(--label); font-size: 13px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .75); white-space: nowrap; }
.wtip .td { margin-top: 3px; color: var(--text); opacity: .85; font-size: 11.5px; line-height: 1.4; }

/* ---------- hint bar ---------- */
.hintbar {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); z-index: 4; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 5px 6px; border-radius: var(--r); font-size: 12px; color: var(--dim); pointer-events: none;
}
.hintbar .hicon { display: grid; place-items: center; width: var(--h-icon); height: var(--h-icon); border-radius: var(--r-sm); background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--line); }
.hintbar .hname { color: var(--label); font-size: 13px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .75); }
.hintbar .hp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hintbar .hp + .hp::before { content: '·'; color: var(--faint); margin-right: 6px; }
.hintbar .kb { font-size: 11px; padding: 1px 6px; }
.hintbar .hclose { pointer-events: auto; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--faint); }
.hintbar .hclose:hover { background: var(--well-hover); color: var(--text); }
.hintbar .hclose svg { width: 14px; height: 14px; }

/* ========== guide (onboarding: welcome, steps, chapter list, What's this?) — one block, keep it together ==========
   Motion: the spot and the card glide (transform, width / height on the spot only) with one calm ease-out; the card's
   words cross-fade; a step done on the world (.guide.live) keeps the world bright and shows a ghost pointer (.ghint). */
.guide { --gease: cubic-bezier(.22, 1, .36, 1); --gmove: .38s; --gdimc: rgba(2, 10, 16, .62); position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.guide.task, .guide.whats { pointer-events: none; }
.gblock { position: fixed; inset: 0; pointer-events: auto; }
.gdim { position: fixed; inset: 0; background: rgba(2, 10, 16, .66); backdrop-filter: blur(2px); animation: gfade .3s var(--gease, ease-out); }
/* the spot: a hole in the dim (its 9999px shadow) with a ring; moved by transform, sized by width / height */
.gspot {
  position: fixed; left: 0; top: 0; border-radius: 14px; pointer-events: none; will-change: transform;
  box-shadow: 0 0 0 9999px rgba(2, 10, 16, 0), 0 0 0 2px var(--label);
  transition: transform var(--gmove) var(--gease), width var(--gmove) var(--gease), height var(--gmove) var(--gease), box-shadow .32s ease-out, opacity .25s ease-out;
}
.gspot.dim { box-shadow: 0 0 0 9999px var(--gdimc), 0 0 0 2px var(--label); }
.gspot.none { box-shadow: 0 0 0 9999px rgba(2, 10, 16, 0), 0 0 0 2px transparent; }
.gspot.none.dim { box-shadow: 0 0 0 9999px var(--gdimc), 0 0 0 2px transparent; }
/* (the glow pulses on its own layer: opacity only, never a repaint of the big shadow) */
.gspot::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 22px 2px rgba(255, 226, 110, .5); animation: gglow 2.4s ease-in-out infinite; }
.gspot.none::after { display: none; }
.gspot.soft { box-shadow: 0 0 0 2px var(--label), 0 0 26px rgba(255, 226, 110, .4); transition: none; }
.gspot.soft::after { display: none; }
@keyframes gfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gglow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes gslide { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes gin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.gcard {
  position: fixed; left: -9999px; top: 0; width: min(390px, calc(100vw - 32px)); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; outline: none;
  background: var(--panel-solid); border: 2px solid var(--label); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); animation: gslide .3s var(--gease, ease-out);
}
/* a step's card: placed by transform (left / top stay 0), unseen until its first place, then gliding (not the centred
   panels — the welcome choice, the chapter list — which nothing places: hidden until placed, they never showed) */
.guide > .gcard:not(.gcenter) { left: 0; opacity: 0; will-change: transform; transition: transform var(--gmove) var(--gease), opacity .28s ease-out; animation: none; }
.guide > .gcard[data-placed] { opacity: 1; }
.guide > .gcard.instant { transition: none; }
.guide > .gcard.live { width: min(350px, calc(100vw - 32px)); }
.ginner { display: flex; flex-direction: column; gap: 8px; animation: gin .3s var(--gease, ease-out) both; }
.gcard.gwide { width: min(520px, calc(100vw - 24px)); }
.gcard.gcenter { left: 50%; top: 50%; transform: translate(-50%, -50%); animation: gfade .3s ease-out; max-height: calc(100vh - 24px); overflow-y: auto; }
.gtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gch { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.gcount { font-size: 11px; color: var(--dim); }
.gcard h3 { margin: 0; font-size: 17px; color: var(--label); text-shadow: 1px 1px 0 rgba(0, 0, 0, .75); }
.gcard p { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.55; opacity: .92; }
.gchips { display: flex; gap: 6px; flex-wrap: wrap; }
.gtask { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 226, 110, .1); border: 1px dashed rgba(255, 226, 110, .55); color: var(--label); font-size: 12.5px; transition: background .25s, border-color .25s, color .25s; }
.gtick { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--label); display: grid; place-items: center; font-size: 11px; line-height: 1; color: #1b1500; flex: none; transition: background .25s; }
.gtask.done { background: rgba(88, 208, 106, .14); border: 1px solid var(--green); color: var(--green); }
.gtask.done .gtick { background: var(--green); border-color: var(--green); }
.gprogn { margin-left: auto; padding: 1px 7px; border-radius: 8px; background: rgba(255, 226, 110, .16); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.gprog { display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.gbar { all: unset; flex: 1; height: 4px; border-radius: 2px; background: var(--faint); cursor: pointer; transition: background .3s; }
.gbar.past { background: rgba(255, 226, 110, .55); }
.gbar.on { background: var(--label); }
.gprog .dots { display: flex; gap: 4px; margin-left: auto; padding-left: 8px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: background .3s, transform .3s var(--gease, ease-out); }
.dots i.on { background: var(--label); transform: scale(1.3); }
.gactions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.gactions button { white-space: nowrap; }
.gactions .skip { color: var(--dim); }
.gesc { opacity: .55; font-size: 10.5px; margin-left: 3px; }
.gsp { flex: 1; }
.gopts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gopt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.gopt:hover, .gopt:focus-visible { background: rgba(255, 226, 110, .12); border-color: var(--label); outline: none; transform: translateY(-1px); }
.gopt b { font-size: 14px; color: var(--label); } .gopt span { font-size: 12px; color: var(--dim); }
.gopt.ghost b { color: var(--text); }
.gstart { display: flex; flex-wrap: wrap; gap: 6px; }
.gchapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gchap { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid transparent; color: var(--text); cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }
.gchap:hover, .gchap:focus-visible { background: rgba(255, 226, 110, .1); border-color: var(--label); outline: none; }
.gnum { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; background: rgba(255, 255, 255, .1); color: var(--label); }
.gnum.done { background: var(--green); color: #06210c; }
.gtext { display: flex; flex-direction: column; flex: 1; min-width: 0; } .gtext b { font-size: 13px; } .gtext span { font-size: 11.5px; color: var(--dim); }
.gn { font-size: 11px; color: var(--faint); white-space: nowrap; }
.gx { font-size: 18px; line-height: 1; }
.gbar-top { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; max-width: calc(100vw - 16px); pointer-events: auto; background: var(--panel-solid); border: 2px solid var(--label); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 12.5px; animation: gslide .2s ease-out; z-index: 2; }
.gq { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--label); color: #2a2000; font-weight: 700; flex: none; }
.ginfo { width: min(340px, calc(100vw - 16px)); }
.guide.whats .gspot.soft { animation: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- what to do on the world: the pointer presses at (--ax, --ay) and drags by (--dx, --dy); the zone outlines
   (--zx, --zy, --zw, --zh). One 2.6 s loop, transform and opacity only. */
.ghint { position: fixed; inset: 0; pointer-events: none; transition: opacity .3s ease-out; animation: gfade .4s ease-out; --ax: -99px; --ay: -99px; --dx: 0px; --dy: 0px; --zx: -99px; --zy: -99px; --zw: 0px; --zh: 0px; }
.ghint > * { position: absolute; left: 0; top: 0; display: none; }
.gzone { width: var(--zw); height: var(--zh); transform: translate3d(var(--zx), var(--zy), 0); outline: 2px dashed var(--label); outline-offset: 3px; border-radius: 3px; background: rgba(255, 226, 110, .12); animation: gzone 1.6s ease-in-out infinite; }
@keyframes gzone { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.gptr { transform: translate3d(var(--ax), var(--ay), 0); }
.gptr svg { display: block; fill: #fff; stroke: #1b1500; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); transform-origin: 5px 3px; margin: -3px 0 0 -5px; }
.gptr .gfing { display: block; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .8); border: 2px solid #1b1500; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.gptr > * { animation: gdrag 2.6s var(--gease, ease-out) infinite; }
@keyframes gdrag {
  0% { transform: translate(-22px, 26px); opacity: 0; }
  14% { transform: translate(0, 0); opacity: 1; }
  22% { transform: translate(0, 0) scale(.82); opacity: 1; }
  66% { transform: translate(var(--dx), var(--dy)) scale(.82); opacity: 1; }
  76% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }
  92%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.gband { width: max(2px, var(--dx)); height: max(2px, var(--dy)); transform: translate3d(var(--ax), var(--ay), 0); }
.gband::before { content: ''; position: absolute; inset: 0; border: 2px dashed #fff; background: rgba(120, 200, 255, .2); transform-origin: 0 0; animation: gbandgrow 2.6s var(--gease, ease-out) infinite; }
@keyframes gbandgrow { 0%, 22% { transform: scale(0); opacity: 0; } 24% { opacity: 1; } 66%, 80% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(1); opacity: 0; } }
.gripple { width: 0; height: 0; transform: translate3d(var(--ax), var(--ay), 0); }
.gripple::before { content: ''; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--label); animation: gripple 2.6s ease-out infinite; }
@keyframes gripple { 0%, 20% { transform: scale(.3); opacity: 0; } 23% { opacity: .95; } 45%, 100% { transform: scale(1.4); opacity: 0; } }
.gcap { transform: translate3d(calc(var(--zx) + var(--zw) / 2), calc(var(--zy) + var(--zh) + 14px), 0); }
.gcap { white-space: nowrap; translate: -50% 0; padding: 4px 10px; border-radius: 999px; background: var(--panel-solid); border: 1px solid var(--label); color: var(--label); font-size: 12px; font-weight: 600; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.gcap[hidden] { display: none !important; }
/* (a mouse with its wheel rolling; two fingers pinching; a key being pressed — in the middle of the world) */
.gmouse { width: 30px; height: 44px; margin: -22px 0 0 -15px; transform: translate3d(calc(var(--ax) + var(--dx) / 2), var(--ay), 0); border: 2px solid #fff; border-radius: 15px; background: rgba(0, 0, 0, .35); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.gmouse span { position: absolute; left: 50%; top: 7px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--label); animation: gwheel 1.3s ease-in-out infinite; }
@keyframes gwheel { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.gpinch { width: 0; height: 0; transform: translate3d(var(--ax), var(--ay), 0); }
.gpinch span { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .8); border: 2px solid #1b1500; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); animation: gpinch1 2s var(--gease, ease-out) infinite; }
.gpinch span + span { animation-name: gpinch2; }
@keyframes gpinch1 { 0%, 15% { transform: translate(-10px, 10px); } 60%, 100% { transform: translate(-38px, 38px); } }
@keyframes gpinch2 { 0%, 15% { transform: translate(10px, -10px); } 60%, 100% { transform: translate(38px, -38px); } }
.gkeycap { min-width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0 10px; place-items: center; transform: translate3d(calc(var(--ax) + var(--dx) / 2), var(--ay), 0); border-radius: 10px; background: linear-gradient(#fdf6d6, #e7d9a0); border: 2px solid #1b1500; color: #1b1500; font: 700 20px/1 system-ui, sans-serif; box-shadow: 0 5px 0 #1b1500, 0 8px 16px rgba(0, 0, 0, .5); }
.gkeycap { animation: gkey 1.6s ease-in-out infinite; }
@keyframes gkey { 0%, 40%, 100% { translate: 0 0; box-shadow: 0 5px 0 #1b1500, 0 8px 16px rgba(0, 0, 0, .5); } 55%, 70% { translate: 0 4px; box-shadow: 0 1px 0 #1b1500, 0 4px 10px rgba(0, 0, 0, .5); } }
/* which parts each kind shows */
.ghint.k-drag .gptr, .ghint.k-tap .gptr, .ghint.k-drag .gripple, .ghint.k-tap .gripple, .ghint.k-drag .gcap, .ghint.k-tap .gcap, .ghint.k-area .gzone, .ghint.k-area .gcap,
.ghint.k-wheel .gmouse, .ghint.k-wheel .gcap, .ghint.k-pinch .gpinch, .ghint.k-pinch .gcap, .ghint.k-key .gkeycap, .ghint.k-key .gcap { display: block; }
.ghint.k-drag.band .gband { display: block; }
.ghint.k-key .gkeycap { display: grid; }
/* (the tool's own hint line sits over the world on a phone: it steps aside while the guide shows what to do there) */
@media (max-width: 600px) { html[data-guide-hint] .stage .hintbar { opacity: 0; pointer-events: none; transition: opacity .2s; } }
.ghint.k-wheel .gcap, .ghint.k-pinch .gcap, .ghint.k-key .gcap { transform: translate3d(calc(var(--zx) + var(--zw) / 2), calc(var(--zy) + var(--zh) + 44px), 0); }
.ghint.k-drag:not(.band) .gcap, .ghint.k-tap .gcap { transform: translate3d(calc(var(--zx) + var(--zw) / 2), calc(var(--zy) - 40px), 0); }

@media (max-width: 600px) {
  .gcard.sheet { width: auto; border-radius: 18px; padding-bottom: 14px; max-height: 46vh; overflow-y: auto; }
  .guide > .gcard.sheet { left: 8px; right: 8px; width: auto; }
  .gcard.sheet.mini .ginner p, .gcard.sheet.mini .ginner .gchips, .gcard.sheet.mini .gprog { display: none; }
  .gcard h3 { font-size: 16px; }
  .gbar-top { font-size: 12px; }
  .gn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gspot, .gcard, .gdim, .gbar-top, .ginner, .ghint, .guide > .gcard { animation: none !important; transition: none !important; }
  .gspot::after, .gzone, .gmouse span, .gkeycap { animation: none !important; }
  /* the hint holds still at the end of its gesture: the pointer where the drag ends, the box drawn */
  .gptr > * { animation: none !important; transform: translate(var(--dx), var(--dy)); }
  .gband::before { animation: none !important; }
  .gripple, .gpinch span { animation: none !important; }
}
/* ========== end guide ========== */

/* ---------- stage ---------- */
.stage { grid-area: stage; position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--edge); background: #09121a; box-shadow: var(--sh-1); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; image-rendering: pixelated; }
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--dim); }
.loading.err { color: var(--red); padding: 20px; text-align: center; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--label); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.banner {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px;
  border-radius: var(--r); white-space: nowrap; border-color: var(--accent-line) !important;
}
.toast {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--r-md); pointer-events: none;
  animation: pop .15s var(--ease-out); white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--h-md);
  border: 0; border-radius: var(--r-sm); padding: 0 15px; background: var(--well-hover); color: var(--text);
}
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.btn svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.btn.primary { background: linear-gradient(180deg, #6ee282, var(--green)); color: #06301a; box-shadow: 0 2px 0 #2f8a3d; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #82ea94, #66da78); }

/* ---------- block panel ---------- */
.panel { grid-area: panel; position: relative; display: flex; flex-direction: column; min-height: 0; padding: 10px 10px 0; gap: 8px; }
.selected { display: flex; gap: var(--s4); align-items: center; padding: var(--s3); background: var(--well); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.selected .bicon { border-radius: var(--r-sm); background-color: rgba(0, 0, 0, .25); }
.selected .meta { min-width: 0; }
.selected .name { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); }
.selected .sub { color: var(--dim); font-size: 11.5px; margin-top: 2px; }
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.search input { width: 100%; min-height: var(--h-md); padding: 0 34px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(0, 0, 0, .28); outline: none; user-select: text; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.search input:focus { border-color: var(--accent-line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 3px var(--accent-soft); }
.search input::placeholder { color: var(--faint); }
.search .swatch { position: absolute; right: 9px; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .2); }
.sect { display: flex; flex-direction: column; gap: 6px; }
.recent { display: flex; flex-wrap: wrap; gap: 3px; max-height: 76px; overflow: hidden; }
.cats { flex-direction: row; align-items: center; gap: 8px; }
.cats select { flex: 1; min-width: 0; min-height: var(--h-md); padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(0, 0, 0, .28); outline: none; }
.cats select option { background: var(--panel-solid); }
.cats .count { color: var(--faint); font-size: 11px; white-space: nowrap; }
.grid { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -12px; padding: 0 8px; }
.gridinner { position: relative; }
.grid .empty { color: var(--faint); text-align: center; padding: 30px 0; }
.scroll { scrollbar-width: thin; scrollbar-color: rgba(160, 220, 255, .25) transparent; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(160, 220, 255, .25); border-radius: 4px; }
.cell { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px; background: var(--well); transition: background .08s; }
.grid .cell { position: absolute; }
.cell:hover { background: var(--well-hover); }
.cell.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent), 0 0 10px var(--accent-glow); }
.cell.sm { width: 36px; height: 36px; border-radius: 8px; }
.bicon { display: block; position: relative; overflow: hidden; flex: none; }
.bicon > span { display: block; position: absolute; left: 0; top: 0; background-repeat: no-repeat; image-rendering: pixelated; }

/* ---------- status ---------- */
.status { grid-area: status; display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s4); font-size: var(--fs-sm); color: var(--dim); white-space: nowrap; border-radius: var(--r-sm); }
.status b { color: var(--label); font-weight: 700; margin-right: 3px; }
.status .pos { color: var(--text); min-width: 54px; font-variant-numeric: tabular-nums; }
.status .cell-fg, .status .cell-bg { overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.status .zoom { background: none; border: 0; padding: 2px 6px; border-radius: 6px; color: var(--text); font-variant-numeric: tabular-nums; }
.status .zoom:hover { background: var(--well-hover); }
.status .dim { color: var(--faint); }
.stage > .music {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 6; display: inline-flex; align-items: center; gap: var(--s1);
  padding: var(--s1) var(--s2) var(--s1) var(--s1); border-radius: var(--r); color: var(--text);
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); animation: pop .15s var(--ease-out);
}
.stage > .music .iconbtn { width: var(--h-sm); height: var(--h-sm); min-width: var(--h-sm); padding: 0; font-size: 12px; line-height: 1; border-radius: var(--r-sm); color: var(--text); }
.stage > .music .iconbtn.on { color: var(--accent); }
.stage > .music .mus-play.on { background: var(--accent-soft); }
.stage > .music .mus-bpm { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font-size: var(--fs-sm, 12px); }
.stage > .music .mus-bpm input { width: 46px; height: 24px; padding: 0 4px; font: inherit; color: var(--text); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: var(--r-xs); font-variant-numeric: tabular-nums; }
.stage > .music .mus-vol { width: 70px; height: 14px; accent-color: var(--accent); }
@media (pointer: coarse), (prefers-reduced-transparency: reduce) { .stage > .music { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); } }
@media (max-width: 600px) { .stage > .music { top: var(--s2); right: var(--s2); } .stage > .music .mus-vol { display: none; } }
/* the glue option: a labelled three-way switch (it was one chip that cycled through three states) */
.seg.gluemode .seglabel { align-self: center; padding: 0 6px 0 4px; color: var(--dim); font-size: var(--fs-sm, 12px); font-weight: 600; }

/* ---------- dialogs ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(2, 10, 16, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .14s; }
@keyframes fade { from { opacity: 0; } }
@keyframes dlgin { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialog { width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--panel-fill); border-radius: var(--r-lg); animation: dlgin .16s var(--ease-out); }
.dhead { display: flex; align-items: center; justify-content: space-between; }
.dialog h2 { margin: 0; font-size: var(--fs-xl); }
.dialog label { display: flex; flex-direction: column; gap: var(--s2); color: var(--dim); font-size: 12px; flex: 1; }
.dialog input { min-height: var(--h-md); padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(0, 0, 0, .3); outline: none; color: var(--text); user-select: text; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.dialog input:focus { border-color: var(--accent-line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 3px var(--accent-soft); }
.dialog .row { display: flex; gap: 10px; }
.dialog .note { margin: 0; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.dialog .actions { display: flex; justify-content: flex-end; gap: var(--s3); }

/* ---------- smaller screens ---------- */
@media (max-width: 1500px) { .toolopts .hint { display: none; } }
@media (max-width: 1100px) {
  .toolopts .hint, .brand .beta { display: none; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: var(--railw) minmax(0, 1fr); grid-template-rows: 42px minmax(0, 1fr) 38vh 24px;
         grid-template-areas: "top top" "rail stage" "panel panel" "status status"; }
  .menus .menubtn { padding: 6px 7px; }
  .brand { font-size: 0; gap: 0; }
  .weather .chip span, .savestate, .worldname .dim, .status .cell-bg { display: none; }
}
.savestate.ro .dot { background: var(--faint); box-shadow: none; }

/* ---------- overlay, floating bar ---------- */
.stage canvas.overlay { pointer-events: none; cursor: auto; }
.floatbar {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px;
  border-radius: var(--r); white-space: nowrap; font-size: 12px; z-index: 6;
}
.floatbar kbd { color: inherit; opacity: .6; margin-left: 4px; }

/* ---------- tool options ---------- */
.opgroup { display: flex; gap: 2px; padding: 3px; background: rgba(0, 0, 0, .3); border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.iconbtn.sm svg { width: var(--ic-sm); height: var(--ic-sm); }
.iconbtn.pressed { background: var(--accent-fill); color: var(--accent-hi); box-shadow: inset 0 0 0 1px var(--accent-line); }
.chipbtn { background: rgba(0, 0, 0, .3); border: 0; border-radius: var(--r-sm); padding: 7px 11px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.chipbtn:hover { color: var(--text); background: rgba(0, 0, 0, .42); }
.swatches { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, .3); border-radius: 10px; }
.swatch { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .15); display: grid; place-items: center; color: var(--dim); }
.swatch.none { background: transparent; }
.swatch svg { width: 13px; height: 13px; }
.swatch.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 2px var(--label); }
.limit { font-size: 11px; color: var(--cyan); background: rgba(158, 234, 255, .1); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.btn.sm svg { width: 15px; height: 15px; }
.btn kbd { margin-left: 6px; }
.link { background: none; border: 0; padding: 0; color: var(--cyan); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; }
.link:disabled { opacity: .3; text-decoration: none; }
.faint { color: var(--faint); font-size: 11px; }

/* ---------- right panel tabs ---------- */
.tabs { display: flex; gap: 2px; padding: 3px; background: rgba(0, 0, 0, .3); border-radius: var(--r-md); flex: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--dim); font-size: 12px; min-width: 0; }
.tab svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.tabbody { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.note { margin: 0; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.none { color: var(--faint); font-size: 12px; padding: 6px 2px; line-height: 1.5; }

/* layers */
.layerlist { display: flex; flex-direction: column; gap: 6px; }
.layerrow { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; background: var(--well); border-radius: var(--r-md); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); }
.layerrow.on { border-color: var(--accent-line); background: var(--accent-soft); }
.lname { flex: 1; display: flex; align-items: center; gap: 10px; background: none; border: 0; text-align: left; padding: 4px 0; min-width: 0; }
.lname .radio { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--faint); flex: none; }
.layerrow.on .radio { border-color: var(--label); background: radial-gradient(circle, var(--label) 0 38%, transparent 42%); }
.lname .t { display: flex; flex-direction: column; min-width: 0; }
.lname .sub { color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn.tog.off { color: var(--faint); }
.iconbtn.tog.locked { color: var(--label); }

/* minimap */
.mapwrap { flex: 1; min-height: 120px; display: grid; place-items: center; background: rgba(0, 0, 0, .28); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; padding: 8px; }
.mapwrap canvas { display: block; image-rendering: pixelated; cursor: crosshair; touch-action: none; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }

/* history */
.history { gap: 8px; }
.commitbar { display: flex; gap: 6px; }
.commitbar input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .28); outline: none; user-select: text; }
.commitbar input:focus { border-color: rgba(255, 226, 110, .55); }
.commits { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(160, 220, 255, .25) transparent; }
.commit { display: flex; align-items: center; gap: 2px; padding-right: 4px; background: var(--well); border-radius: 10px; border: 1px solid transparent; }
.commit.on { border-color: rgba(255, 190, 40, .6); background: rgba(255, 190, 40, .12); }
.cmain { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; background: none; border: 0; padding: 6px 8px; }
.cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm { color: var(--faint); font-size: 11px; }
.difflegend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; background: var(--well); border-radius: 10px; font-size: 11.5px; color: var(--dim); }
.difflegend .k { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: -3px; }
.k.add { background: #46dc64; } .k.rem { background: #ff5050; } .k.chg { background: #ffbe28; }
.difflegend .tot { flex-basis: 100%; color: var(--text); }
.difflegend .btn { margin-left: auto; }
.steps { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; }
.step { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 5px 8px; flex: none; }
.step:hover:not(:disabled) { background: var(--well-hover); }
.step .n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step .m { color: var(--faint); font-size: 11px; white-space: nowrap; }
.step.future { color: var(--faint); font-style: italic; }
.step.current { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.step:disabled.current { opacity: 1; }

/* ---------- dialogs ---------- */
.dialog.wide { width: min(720px, calc(100vw - 32px)); }
.dialog .seg { align-self: flex-start; }
.dialog .seg.wide { align-self: stretch; }
.dialog input[type=number] { width: 100%; }
.setupgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.setupgrid .fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.previewcol { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rangehint { font-size: 11.5px; color: var(--faint); display: flex; gap: 10px; align-items: center; min-height: 18px; }
.rangehint.bad { color: var(--red); }
.anchor { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; padding: 5px; background: rgba(0, 0, 0, .3); border-radius: 10px; }
.anchor button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: var(--well); display: grid; place-items: center; }
.anchor button span { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.anchor button:hover { background: var(--well-hover); }
.anchor button.on { background: var(--well-on); box-shadow: inset 0 0 0 1px rgba(255, 226, 110, .5); }
.anchor button.on span { background: var(--label); }
.resizeprev { background: rgba(0, 0, 0, .28); border-radius: 10px; }
.resizeprev .new { fill: none; stroke: var(--cyan); stroke-width: 1.5; }
.resizeprev .old { fill: rgba(255, 226, 110, .1); stroke: rgba(255, 226, 110, .7); stroke-width: 1; stroke-dasharray: 3 3; }
.resizeprev .kept { fill: rgba(255, 226, 110, .38); }
.resizeprev .ground { fill: rgba(140, 96, 50, .6); }
.formrow { display: flex; align-items: center; gap: 12px; }
.formrow > .lbl, .blockfield > .lbl { width: 108px; flex: none; color: var(--dim); font-size: 12px; }
.formrow .seg { flex-wrap: wrap; }
.ratebox { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ratebox input[type=range] { flex: 1; accent-color: var(--label); min-width: 0; }
.ratebox input[type=number] { width: 74px; flex: none; }
.warn { color: var(--label); font-size: 12px; background: rgba(255, 226, 110, .08); border-radius: 8px; padding: 6px 10px; }
.summary { padding: 9px 12px; background: var(--well); border-radius: 10px; color: var(--text); }
.summary.none { color: var(--faint); }
.blockfield { display: flex; align-items: center; gap: 12px; position: relative; }
.blockfield .pick { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px 4px 4px; background: rgba(0, 0, 0, .3); border: 1px solid var(--edge); border-radius: 10px; text-align: left; }
.blockfield .pick:hover { border-color: var(--edge-strong); }
.blockfield .pick .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blockfield .pick svg { width: 14px; height: 14px; color: var(--dim); flex: none; }
.blockfield .pick .bicon { border-radius: 6px; background: rgba(0, 0, 0, .25); }
.bfpop { position: absolute; left: 120px; right: 0; top: calc(100% + 4px); z-index: 5; padding: 8px; background: var(--panel-solid); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 8px; }
.bfpop input { width: 100%; }
.bfgrid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 190px; overflow-y: auto; }
.bfgrid .cell { position: static; width: 38px; height: 38px; }
.countsum { display: flex; gap: 14px; flex-wrap: wrap; color: var(--dim); font-size: 12px; }
.countsum b { color: var(--text); }
.exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; max-height: min(62vh, 560px); overflow-y: auto; padding: 2px; }
.excard { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 4px 8px; text-align: left; padding: 8px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.12)); background: var(--well); color: var(--text); cursor: pointer; font: inherit; }
.excard:hover:not(:disabled) { background: var(--well-hover); border-color: var(--accent, #ffd34d); }
.excard:disabled { opacity: .6; cursor: default; }
.excard.busy { opacity: 1; border-color: var(--accent, #ffd34d); }
.excard .exthumb { grid-column: 1 / 3; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0d1a26; display: block; }
.excard .exthumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.excard .exname { font-weight: 700; letter-spacing: .02em; }
.excard .exsize { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; align-self: center; }
.excard .exblurb { grid-column: 1 / 3; color: var(--dim); font-size: 11.5px; line-height: 1.35; white-space: normal; }
.countcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-height: min(52vh, 440px); overflow-y: auto; align-items: start; }
.countrows { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.crow { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 7px; }
.crow:hover { background: var(--well); }
.crow .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .bicon { border-radius: 5px; background: rgba(0, 0, 0, .25); }
.pg { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--dim); font-size: 12px; }
.pg .sw { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.hkbar { display: flex; gap: 8px; }
.hkbar input { flex: 1; }
.hklist, .helpcols { max-height: min(56vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 6px; }
.hkrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 6px; border-radius: 8px; }
.hkrow:hover { background: var(--well); }
.hkrow .an { flex: 1; min-width: 150px; }
.hkrow .chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kb { font-size: 11.5px; color: var(--text); background: rgba(255, 255, 255, .09); border-radius: 6px; padding: 2px 7px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35); letter-spacing: .02em; }
.chip.kb { display: inline-flex; align-items: center; padding: 0; overflow: hidden; max-width: none; }
.chip.kb button { background: none; border: 0; padding: 3px 7px; color: var(--text); font-size: 11.5px; }
.chip.kb button:hover { background: var(--well-hover); }
.chip.kb .x { padding: 3px 6px; color: var(--faint); }
.chip.kb.cap { box-shadow: 0 0 0 1.5px var(--label); }
.addkey { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); display: grid; place-items: center; }
.addkey:hover { background: var(--well-hover); color: var(--text); }
.addkey svg { width: 14px; height: 14px; }
.unbound { color: var(--faint); font-size: 11.5px; }
.conflict { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; background: rgba(255, 226, 110, .09); border-radius: 8px; color: var(--label); font-size: 12px; }
.conflict span { flex: 1; min-width: 200px; }
.helpcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; align-items: start; }
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.hrow .keys { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hrow .kb { white-space: nowrap; }
.helpimport p { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.helpimport code { color: var(--text); }
@media (max-width: 820px) { .setupgrid, .helpcols, .countcols { grid-template-columns: 1fr; } .tab span { display: none; } }

/* ---------- timelapse ---------- */
.dialog.wide:has(.tl) { width: min(880px, calc(100vw - 32px)); }
.tl { display: flex; flex-direction: column; gap: 12px; }
.tlview { position: relative; height: min(46vh, 420px); background: #04141c; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--edge); }
.tlview canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tlmark { position: absolute; right: 10px; bottom: 7px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none; }
.tlbar { display: flex; align-items: center; gap: 6px; }
.tlbar .playbtn { background: var(--well-on); }
.tltime { font-variant-numeric: tabular-nums; min-width: 82px; text-align: right; color: var(--text); font-size: 12px; }
.tltime i { color: var(--faint); font-style: normal; }
.scrub { position: relative; flex: 1; min-width: 0; padding: 6px 0 12px; }
.scrub input[type=range] { width: 100%; accent-color: var(--label); margin: 0; display: block; }
.scrub .ticks { position: absolute; left: 7px; right: 7px; bottom: 2px; height: 8px; pointer-events: none; }
.scrub .tick { position: absolute; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: var(--cyan); pointer-events: auto; }
.tlinfo { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 12px; flex-wrap: wrap; }
.tlinfo b { color: var(--text); }
.tlopts { display: flex; flex-direction: column; gap: 10px; }
.tlopts .formrow { flex-wrap: wrap; row-gap: 6px; }
.tlopts .ratebox input[type=number] { width: 84px; }
.tlopts .u { color: var(--faint); font-size: 12px; }
.chk { flex-direction: row !important; align-items: center; gap: 6px !important; flex: none !important; margin-left: auto; }
.chk input { width: auto; accent-color: var(--label); }
.seg button:disabled { opacity: .4; }
.dialog .actions { align-items: center; }
.progress { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--green); transition: width .1s; }
.tlprog { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.tlbtn { align-self: flex-start; }

/* ---------- wrench ---------- */
.wrenchhead { display: flex; align-items: center; gap: 8px; margin-top: -6px; color: var(--faint); font-size: 12px; }
.wrenchhead .chip { background: var(--well); border-radius: 6px; padding: 2px 8px; color: var(--dim); font-variant-numeric: tabular-nums; }
.dialog .fields { display: flex; flex-direction: column; gap: 12px; }
.dialog textarea { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .3); outline: none; color: var(--text); resize: vertical; font: inherit; user-select: text; min-height: 62px; }
.dialog textarea:focus { border-color: rgba(255, 226, 110, .55); }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.swatches .sw { width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; font-size: 11.5px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.swatches .sw:hover:not(:disabled) { filter: brightness(1.15); }
.swatches .sw.reset { width: auto; padding: 0 8px; background: var(--well-hover); color: var(--text); box-shadow: none; }
.swatches .count { margin-left: auto; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.signprev { min-height: 54px; padding: 10px 12px; border-radius: 10px; background: #1b1308; box-shadow: inset 0 0 0 2px #5a3d1c; white-space: pre-wrap; word-break: break-word; line-height: 1.4; font-weight: 600; }
.colorrow { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.colorrow input[type=color] { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(0, 0, 0, .3); cursor: pointer; }
.colorrow .hex { color: var(--dim); font-size: 12px; }
.signprev .none { color: var(--faint); font-weight: 400; }
.slots { display: grid; gap: 10px; }
.slots.one { grid-template-columns: minmax(0, 1fr); }
.slots.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slots.nine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itemslot { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.itemslot .slbl { color: var(--dim); font-size: 11.5px; }
.itemslot .sbtns { display: flex; align-items: center; gap: 4px; }
.itemslot .pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: rgba(0, 0, 0, .3); border: 1px solid var(--edge); border-radius: 10px; text-align: left; }
.itemslot .pick:hover:not(:disabled) { border-color: var(--edge-strong); }
.itemslot .pick .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itemslot .pick .bicon { border-radius: 6px; background: rgba(0, 0, 0, .25); flex: none; }
.ipop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 6; width: min(320px, 86vw); padding: 8px; background: var(--panel-solid); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 8px; }
.ipop input { width: 100%; }
.slots.nine .itemslot:nth-child(3n) .ipop, .slots.four .itemslot:nth-child(2n) .ipop { left: auto; right: 0; }

.bicon.noitem { display: inline-block; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--edge-strong); background: rgba(0, 0, 0, .2); flex: none; }

/* ---------- clear world / new world choices ---------- */
.radiolist { display: flex; flex-direction: column; gap: 6px; }
.radiolist button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; background: var(--well); border: 1px solid transparent; border-radius: 12px; }
.radiolist button:hover { background: var(--well-hover); }
.radiolist button.on { border-color: rgba(255, 226, 110, .55); background: var(--well-on); }
.radiolist .radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--faint); flex: none; }
.radiolist button.on .radio { border-color: var(--label); background: radial-gradient(circle, var(--label) 0 38%, transparent 42%); }
.radiolist .t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.radiolist .sub { color: var(--faint); font-size: 11.5px; }
.btn.danger { background: #e2564d; color: #fff; box-shadow: 0 3px 0 #9c2e28; text-shadow: 1px 1px 0 rgba(0, 0, 0, .35); }
.btn.danger:hover:not(:disabled) { background: #f0665c; }
.tplpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tplpick button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px; text-align: left; background: var(--well); border: 2px solid transparent; border-radius: 12px; color: var(--dim); font-size: 11px; }
.tplpick button b { color: var(--text); font-size: 13px; }
.tplpick button:hover { background: var(--well-hover); }
.tplpick button.on { border-color: var(--label); background: var(--well-on); }
.tplpick button.on b { color: var(--label); text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); }
.tplart { width: 100%; height: 46px; border-radius: 7px; margin-bottom: 3px; background: linear-gradient(180deg, #7cc8f5, #5fb6ee); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.tplart.default { background: linear-gradient(180deg, #7cc8f5 0 40%, #5d9b3a 40% 44%, #6b4423 44% 86%, #4a4552 86%); }

/* ---------- game-like polish: chunky buttons, yellow labels, bigger targets ---------- */
.btn { box-shadow: 0 3px 0 rgba(0, 0, 0, .35), var(--hi); transition: transform .06s, box-shadow .06s, background var(--t-fast); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.btn.primary { box-shadow: 0 3px 0 #2f8a3d; text-shadow: none; }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 #2f8a3d; }
.btn.sm { min-height: var(--h-sm); padding: 0 11px; }
.iconbtn { width: var(--h-icon); height: var(--h-icon); border-radius: var(--r-sm); }
.iconbtn.sm { width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-sm); }
/* one keyboard focus ring for every control: cyan, 2 px, outside (the gold means "selected", not "focused") */
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.iconbtn:focus-visible, .btn:focus-visible, .seg button:focus-visible, .tab:focus-visible, .chip:focus-visible, .chipbtn:focus-visible, .cell:focus-visible, .menubtn:focus-visible, .savestate:focus-visible, .swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg button { padding: 4px 10px; transition: color var(--t-fast), background var(--t-fast); }
.seg button.on { background: var(--accent-fill); color: var(--label); box-shadow: inset 0 0 0 1px var(--accent-line), var(--hi); text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); animation: selin var(--t-med) var(--ease-out); }
.tab { padding: 8px 4px; transition: color var(--t-fast), background var(--t-fast); }
.tab.on { background: var(--accent-fill); color: var(--label); box-shadow: inset 0 0 0 1px var(--accent-line), var(--hi); text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); animation: selin var(--t-med) var(--ease-out); }
.tab.on svg { color: var(--accent); }
@keyframes selin { from { background-color: transparent; box-shadow: inset 0 0 0 1px transparent; transform: scale(.96); } }
.h, .sect .h { color: var(--label); text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); }
.dialog { border: 1px solid var(--accent-line); box-shadow: var(--sh-3), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 236, 170, .14); }
.dialog h2 { color: var(--label); text-shadow: 1px 2px 0 rgba(0, 0, 0, .7); }
.brand { color: #fff; text-shadow: 1px 2px 0 rgba(0, 0, 0, .7); }
.cell { border: 1px solid rgba(170, 225, 255, .1); background: linear-gradient(180deg, rgba(130, 200, 245, .1), rgba(80, 150, 200, .05)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.cell.on { border-color: transparent; }

/* the paint colours: the game's Paint Bucket items (their 32 px cells, 1:1, crisp), the held one lit; Varnish
   (takes the paint off) set apart at the end */
.swatches.buckets { flex: none; flex-wrap: nowrap; gap: 1px; padding: 2px 3px; align-items: center; }
.swatches.buckets .swatch { width: 32px; height: 32px; background: transparent; box-shadow: none; border-radius: 8px; transition: background .12s; }
.swatches.buckets .swatch .iicon { transition: transform .12s; }
.swatches.buckets .swatch:hover { background: var(--well-hover); }
.swatches.buckets .swatch:hover .iicon { transform: translateY(-1px); }
.swatches.buckets .swatch.on { background: linear-gradient(180deg, rgba(255, 226, 110, .24), rgba(255, 190, 40, .1)); box-shadow: inset 0 0 0 1.5px rgba(255, 226, 110, .75); }
.swatches.buckets .swatch.varnish { position: relative; margin-left: 5px; }
.swatches.buckets .swatch.varnish::before { content: ''; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 1px; background: var(--edge-strong); }
.chipbtn { padding: 6px 10px; }

/* ---------- compact chrome: slim panel, hotbar, focus mode ---------- */
.panel.slim { padding: 6px 5px; gap: 4px; align-items: center; overflow: hidden; }
.panel.slim .iconbtn { width: 34px; height: 34px; }
.panelgrip { position: absolute; left: -6px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3; touch-action: none; }
.panelgrip::after { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--edge-strong); transition: background .1s; }
.panelgrip:hover::after, .panelgrip:focus-visible::after { background: var(--label); }
.tabclose { flex: none; display: grid; place-items: center; width: 30px; border: 0; border-radius: 8px; background: none; color: var(--dim); }
.tabclose:hover { background: var(--well-hover); color: var(--text); }
.tabclose svg { width: 18px; height: 18px; }
.tab { padding: 6px 4px; }
.tab:active, .seg button:active, .menubtn:active, .iconbtn:active:not(:disabled), .chipbtn:active { transform: scale(.95); }
.tab, .menubtn, .iconbtn, .chipbtn { transition: color var(--t-fast), background var(--t-fast), transform .08s; }

.hotbar { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); }
.hbslots { display: flex; gap: 3px; padding: 4px; border-radius: var(--r); }
.hbslot {
  position: relative; display: grid; place-items: center; width: 43px; height: 43px; padding: 0; border-radius: 8px; flex: none;
  background: linear-gradient(180deg, rgba(130, 200, 245, .13), rgba(80, 150, 200, .07)); border: 1px solid rgba(170, 225, 255, .18);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hbslot:hover:not(.empty) { background: linear-gradient(180deg, rgba(150, 215, 255, .22), rgba(90, 160, 210, .12)); }
.hbslot.empty { opacity: .55; }
.hbslot.over { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); opacity: 1; }
.hbslot.on { border: 2px solid var(--label); background: linear-gradient(180deg, rgba(255, 226, 110, .26), rgba(255, 190, 40, .12)); box-shadow: 0 0 12px rgba(255, 210, 80, .25); }
.hbslot .bicon { pointer-events: none; }
.hbnum { position: absolute; left: 3px; top: 1px; font-size: 9.5px; line-height: 1; color: var(--label); text-shadow: 1px 1px 0 rgba(0, 0, 0, .85); pointer-events: none; z-index: 1; }
.hbpin { position: absolute; right: 2px; bottom: 2px; width: 11px; height: 11px; color: var(--cyan); pointer-events: none; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .8)); }
.hbpin svg { width: 11px; height: 11px; stroke-width: 2.6; }
.hbtoggle { display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); padding: 0; border-radius: var(--r-sm); color: var(--dim); transition: color var(--t-fast); }
.hbtoggle:hover { color: var(--accent-hi); }
.hbtoggle svg { width: 16px; height: 16px; }
.hotbar.closed { gap: 0; }

.focusbar { position: absolute; right: 10px; top: 10px; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 3px 4px; border-radius: var(--r-md); }
.focusbar:not(:hover) { opacity: .7; }
.fbblock { display: grid; place-items: center; width: 30px; height: 28px; margin-right: 2px; border-radius: 7px; background: rgba(0, 0, 0, .25); }

.app.focus { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "stage"; padding: 0; gap: 0; }
.app.focus > .topbar, .app.focus > .rail, .app.focus > .panel, .app.focus > .status { display: none; }
.app.focus .stage { border-radius: 0; border: 0; }
@media (max-width: 820px) { .app.panelslim { grid-template-rows: 42px minmax(0, 1fr) 46px 24px; } .panel.slim { flex-direction: row; justify-content: center; } }

/* ---------- fit: tabs show the name only on the active one, a tighter rail, a leaner top bar on narrow windows ---------- */
.tabs .tab:not(.on) span { display: none; }
.tabs .tab.on { flex: 1 1 auto; }
.rail:not(.labels) .tool { min-height: 36px; padding: 2px; }
.rail:not(.labels) .tool.on { padding: 1px; }
.rail:not(.labels) .ticon { width: 30px; height: 30px; }
.rail.labels .tool { min-height: 50px; padding: 3px 2px 2px; }
.rail.labels .ticon { width: 30px; height: 30px; }
@media (max-height: 800px) {
  .rail:not(.labels) .tool { min-height: 32px; }
  .rail:not(.labels) .ticon { width: 28px; height: 28px; }
  .rail:not(.labels) .licon { transform: scale(.9); }
  .railmini { height: 26px; }
}
@media (max-width: 1250px) {
  .brand { font-size: 0; gap: 0; margin-right: 2px; }
  .brand .beta { display: none; }
  .savestate { font-size: 0; min-width: 0; padding: 0 4px; }
  .worldname .dim, .weather .chip > span:not(.sky) { display: none; }
}

/* =====================================================================================================================
   W14: the tool area's two looks (Settings → Appearance), the inventory, the hint bar that comes and goes, the
   weather picker grid, the Appearance dialog.
   ===================================================================================================================== */
.rail .railbody { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 100%; }
.rail .tool { position: relative; z-index: 1; }
.tool .ticon, .flyitem .ticon { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- A. glass dock: floats over the canvas's left edge ----------
   Clear glass, not frost: a thin dark neutral tint so the world shows through (blurred, a little more saturated), a
   1 px light rim brighter along the top edge, a soft shadow. The icons carry a faint shadow of their own so they read
   over a bright sky as well as over a night. */
.app.look-dock:not(.focus) { grid-template-columns: minmax(0, 1fr) var(--panelw); grid-template-areas: "top top" "stage panel" "status status"; }
.rail.dock {
  grid-area: stage; align-self: center; justify-self: start; margin-left: 12px; z-index: 7; width: auto; max-height: calc(100% - 24px);
  padding: 5px; border-radius: var(--r-lg); overflow-y: auto; overflow-x: hidden;
  animation: dockin .35s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes dockin { from { opacity: 0; transform: translateX(-14px); } }
.rail.dock .railbody { gap: 1px; }
.rail.dock .railgrid { gap: 1px; }
.rail.dock .tool, .rail.dock.labels .tool { padding: 0; }
.rail.dock .ticon, .rail.dock:not(.labels) .ticon { width: 30px; height: 30px; }
.rail.dock .railgroup + .railgroup { margin-top: 2px; }
.rail.dock:not(.labels) .railhead { height: 1px; margin: 3px 7px 4px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); }
.rail.dock .licon { color: #f2f6f9; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }
.rail.dock .tool {
  width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: var(--dim);
  transition: background .12s, transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.rail.dock .tool:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
.rail.dock .tool:hover .ticon { transform: scale(1.14) translateY(-1px); }
.rail.dock .tool:active .ticon { transform: scale(.9); transition-duration: .06s; }
.rail.dock .tool.on { background: transparent; border: 0; padding: 0; box-shadow: none; color: var(--label); }
.rail.dock .tool.on .ticon { transform: scale(1.06); }
.rail.dock .tool.on .licon { color: var(--label); }
.rail.dock .tool[data-act="grid"].on { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.dockglow {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 11px; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 240, 170, .5), rgba(255, 196, 60, .2) 60%, rgba(255, 170, 30, .14));
  box-shadow: 0 0 0 1.5px rgba(255, 226, 110, .9), 0 0 18px rgba(255, 205, 70, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .32s cubic-bezier(.3, 1.35, .45, 1), width .2s, height .2s, opacity .2s;
}
.rail.dock .railfoot { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .12); }
.rail.dock .railmini { width: 36px; height: 26px; border-radius: 9px; color: rgba(242, 246, 249, .8); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5)); }
.rail.dock .railmini svg { width: 16px; height: 16px; }
.rail.dock .railgrow { display: none; }
.rail.dock.labels .railgrid { grid-template-columns: 1fr; }
.rail.dock.labels .tool { width: 144px; min-height: 40px; flex-direction: row; justify-content: flex-start; gap: 9px; padding: 0 10px 0 5px; }
.rail.dock.labels .tlabel { font-size: 12px; }
.rail.dock.labels .railhead { padding: 4px 8px 2px; }
.rail.dock.labels .railmini { width: auto; justify-content: flex-start; padding: 0 10px; }
.app.look-dock .stagemsgs { --hx: 26px; }
/* a short window: the dock folds into two columns */
@media (max-height: 900px) {
  .rail.dock:not(.labels) .railgrid { grid-template-columns: 36px 36px; gap: 1px 2px; }
  .rail.dock:not(.labels) .railfoot { flex-direction: row; justify-content: center; }
  .rail.dock:not(.labels) .railmini { width: 26px; }
}
@media (max-width: 820px) { .app.look-dock:not(.focus) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "stage" "panel" "status"; } }
@media (max-width: 820px) { .app.look-dock.panelslim:not(.focus) { grid-template-rows: 42px minmax(0, 1fr) 46px 24px; } }

/* ---------- B. slim toolbar: one button per group, flyouts with the group's tools ---------- */
.app.look-slim { --railw: 50px; }
.rail.slim { position: relative; z-index: 8; overflow: visible; padding: 7px 5px; }
.rail.slim .railbody { align-items: center; gap: 4px; }
.slimgroup { position: relative; }
.rail.slim .tool { width: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 11px; background: none; box-shadow: none; color: var(--dim); transition: background .12s; }
.rail.slim .tool:hover { background: rgba(255, 255, 255, .09); color: var(--text); }
.rail.slim .tool:hover .ticon { transform: scale(1.1); }
.rail.slim .tool.on { background: linear-gradient(180deg, rgba(255, 226, 110, .24), rgba(255, 190, 40, .1)); box-shadow: inset 0 0 0 1.5px rgba(255, 226, 110, .7), 0 0 12px rgba(255, 210, 80, .2); padding: 0; border: 0; }
.rail.slim .slimgroup.open .tool.grp { background: rgba(255, 255, 255, .14); }
.rail.slim .ticon { width: 30px; height: 30px; }
.rail.slim .ticon .licon { transform: scale(.96); }
.caret { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-left: 6px solid transparent; border-bottom: 6px solid rgba(222, 236, 245, .55); pointer-events: none; }
.tool.on .caret { border-bottom-color: var(--label); }
.slimsep { width: 22px; height: 1px; margin: 3px 0; background: var(--edge-strong); }
.rail.slim .railfoot { align-items: center; }
.rail.slim .railmini { width: 38px; }
.flyout {
  position: absolute; left: calc(100% + 12px); top: -8px; z-index: 60; min-width: 236px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(12, 36, 53, .97); border: 1px solid var(--edge-strong); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  animation: flyin .16s cubic-bezier(.2, 1.3, .4, 1); transform-origin: left top;
}
.flyout::before { content: ''; position: absolute; left: -6px; top: 22px; width: 10px; height: 10px; background: inherit; border-left: 1px solid var(--edge-strong); border-bottom: 1px solid var(--edge-strong); transform: rotate(45deg); }
@keyframes flyin { from { opacity: 0; transform: translateX(-8px) scale(.97); } }
.flyhead { padding: 3px 8px 5px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--label); text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); }
.flyitem { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 3px 10px 3px 4px; border: 0; border-radius: 9px; background: none; color: var(--text); text-align: left; }
.flyitem:hover { background: var(--well-hover); }
.flyitem:hover .ticon { transform: scale(1.1); }
.flyitem.on { background: var(--well-on); box-shadow: inset 0 0 0 1px rgba(255, 226, 110, .5); color: var(--label); }
.flyitem .ticon { display: grid; place-items: center; width: 34px; height: 34px; }
.flyname { flex: 1; white-space: nowrap; }
.flyitem kbd { min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--dim); }
.flyitem:focus-visible, .rail .railmini:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* ---------- the hint bar: rises when the tool changes, fades after a few seconds ---------- */
/* the canvas's messages: one column over the hotbar, a note (toast) stacked above the hint so the two never overlap */
.stagemsgs {
  position: absolute; left: 50%; bottom: 84px; z-index: 5; width: max-content; max-width: min(900px, calc(100% - 140px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  transform: translateX(calc(-50% + var(--hx, 0px)));
}
.stage:has(.hotbar.closed) .stagemsgs { bottom: 50px; }
.app.focus .stagemsgs { bottom: 16px; }
.stagemsgs .toast { position: static; transform: none; max-width: 100%; white-space: normal; text-align: center; line-height: 1.4; }
.stage .hintbar {
  position: relative; left: auto; right: auto; bottom: auto; width: max-content; max-width: 100%; justify-content: center; gap: 3px 10px;
  padding: 4px 6px 4px 5px; border-radius: var(--r); font-size: var(--fs-sm);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
/* (a hidden hint takes no room in the stack: the note drops to its place) */
.stage .hintbar:not(.in) { position: absolute; bottom: 0; left: 50%; translate: -50% 0; }
.stage .hintbar.in { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease-out, transform .3s cubic-bezier(.2, 1.4, .4, 1), visibility 0s; }
.stage .hintbar .hicon { width: 28px; height: 28px; }
.stage .hintbar .hicon .licon { transform: scale(.85); }
.stage:has(.hotbar.expanded) .hintbar { position: absolute; bottom: 0; left: 50%; translate: -50% 0; opacity: 0; visibility: hidden; }
/* a phone: the hint as a compact wrapped line (no orphaned dots), the close button in its corner */
@media (max-width: 600px) {
  .stagemsgs, .app.look-dock .stagemsgs { max-width: calc(100% - 24px); --hx: 0px; }
  .stage .hintbar { justify-content: flex-start; gap: 2px 8px; padding: 5px 30px 5px 6px; font-size: 11px; }
  .stage .hintbar .hp + .hp::before { content: none; }
  .stage .hintbar .hicon { width: 24px; height: 24px; }
  .stage .hintbar .hclose { position: absolute; right: 3px; top: 3px; }
}

/* ---------- hotbar: the tab above it, the inventory it opens ---------- */
.hbwrap { position: relative; display: flex; }
.hbslots { position: relative; z-index: 2; }
.hbexpand {
  position: absolute; left: 50%; top: -17px; z-index: 1; transform: translateX(-50%); height: 18px; min-width: 46px; padding: 0 9px 1px;
  display: flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--glass-edge); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--glass-solid); box-shadow: var(--glass-hi); color: var(--dim); transition: color .1s, height .12s, top .12s;
}
.hbexpand:hover { color: var(--accent-hi); height: 21px; top: -20px; }
.hbexpand svg { width: 15px; height: 15px; stroke-width: 2.4; }
.hbmore { font-size: 10px; line-height: 1; color: var(--cyan); }
.hbexpand:focus-visible, .invpick:focus-visible, .invpin:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.invpanel {
  position: absolute; left: -9px; right: -9px; bottom: -8px; z-index: 1; display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px calc(51px + 16px); border-radius: var(--r-lg); border: 1px solid var(--glass-edge);
  background: var(--glass-solid);
  box-shadow: 0 -12px 44px rgba(0, 0, 0, .5), var(--glass-hi);
  animation: invup .22s cubic-bezier(.2, 1.15, .4, 1); transform-origin: bottom center;
}
@keyframes invup { from { opacity: 0; transform: translateY(14px) scaleY(.92); } }
.invpanel .hbexpand.top { top: -18px; color: var(--accent-hi); }
.invhead { display: flex; align-items: baseline; gap: 10px; padding: 0 2px; white-space: nowrap; min-width: 0; }
.invhead b { color: var(--label); font-size: 13px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .75); }
.invcount { color: var(--dim); font-size: 11.5px; }
.invhelp { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.invgrid { display: grid; grid-template-columns: repeat(var(--cols), 43px); gap: 3px; padding: 0 0 0 4px; max-height: min(46vh, 300px); overflow-y: auto; overflow-x: hidden; }
.invcell { position: relative; width: 43px; height: 43px; animation: invcell .25s ease-out both; }
@keyframes invcell { from { opacity: 0; transform: translateY(6px); } }
.invcell.over .invpick { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }
.invpick {
  display: grid; place-items: center; width: 43px; height: 43px; padding: 0; border-radius: 8px;
  background: linear-gradient(180deg, rgba(130, 200, 245, .13), rgba(80, 150, 200, .07)); border: 1px solid rgba(170, 225, 255, .18);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .12s, background .1s;
}
.invpick:hover:not(:disabled) { background: linear-gradient(180deg, rgba(150, 215, 255, .24), rgba(90, 160, 210, .13)); transform: translateY(-2px); }
.invpick:active:not(:disabled) { transform: translateY(0) scale(.95); }
.invpick .bicon { pointer-events: none; }
.invcell.on .invpick { border: 2px solid var(--label); background: linear-gradient(180deg, rgba(255, 226, 110, .26), rgba(255, 190, 40, .12)); box-shadow: 0 0 12px rgba(255, 210, 80, .25); }
.invcell.pinned .invpick { border-color: rgba(158, 234, 255, .55); }
.invpin {
  position: absolute; right: -4px; top: -4px; z-index: 2; display: none; place-items: center; width: 19px; height: 19px; padding: 0;
  border: 1px solid var(--edge-strong); border-radius: 50%; background: var(--panel-solid); color: var(--dim);
}
.invpin svg { width: 11px; height: 11px; stroke-width: 2.6; }
.invpin:hover { color: var(--label); border-color: var(--label); }
.invcell:hover .invpin, .invcell.pinned .invpin { display: grid; }
.invcell.pinned .invpin { color: var(--cyan); border-color: rgba(158, 234, 255, .6); }
.invnone { grid-column: 1 / -1; padding: 14px 6px; color: var(--faint); font-size: 12px; text-align: center; }

/* ---------- weather picker: one size and crop for every weather ---------- */
.chip.open { background: var(--well-hover); box-shadow: inset 0 0 0 1px rgba(255, 226, 110, .45); }
.wxpop { width: min(660px, calc(100vw - 24px)); max-height: min(78vh, 720px); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.wxhead { display: flex; align-items: center; gap: 12px; }
.wxsearch { position: relative; flex: 1; display: flex; align-items: center; }
.wxsearch svg { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.wxsearch input { width: 100%; padding: 6px 10px 6px 30px; border-radius: 9px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .28); outline: none; user-select: text; }
.wxsearch input:focus { border-color: rgba(255, 226, 110, .55); }
.wxcats { display: flex; flex-wrap: wrap; gap: 4px; }
.wxcats button { border: 0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; background: var(--well); color: var(--dim); }
.wxcats button:hover { background: var(--well-hover); color: var(--text); }
.wxcats button.on { background: var(--label); color: #2a2000; text-shadow: none; }
.wxpop .wxgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 2px 4px 4px 2px; overflow-y: auto; min-height: 0; flex: 1 1 auto; align-content: start; }
.wxcard { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 4px 4px 6px; border: 0; border-radius: 11px; background: var(--well); color: var(--dim); font-size: 11.5px; text-align: center; transition: background .1s, transform .12s; }
.wxcard:hover { background: var(--well-hover); color: var(--text); transform: translateY(-2px); }
.wxcard.on { background: var(--well-on); color: var(--label); box-shadow: inset 0 0 0 2px var(--label), 0 0 14px rgba(255, 210, 80, .22); }
.wxthumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: #0a1a26; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.wxpop .wxthumb img, .wxpop .wxthumb .sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 0; aspect-ratio: auto; }
.wxcheck { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--label); color: #2a2000; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.wxcheck svg { width: 13px; height: 13px; stroke-width: 3; }
.wxname { display: block; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.wxnone { grid-column: 1 / -1; padding: 24px 0; text-align: center; color: var(--faint); }
.wxsettings { border-top: 1px solid var(--edge); padding-top: 10px; }
.wxfoot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--edge); padding-top: 8px; font-size: 12px; color: var(--dim); }
.wxtoggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.wxtoggle input { accent-color: var(--label); }
@media (max-width: 820px) { .wxpop .wxgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Appearance dialog ---------- */
.lookpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lookpick button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 8px 10px; text-align: left; border: 2px solid transparent; border-radius: 13px; background: var(--well); color: var(--dim); font-size: 11.5px; line-height: 1.4; transition: transform .12s, background .1s; }
.lookpick button:hover { background: var(--well-hover); transform: translateY(-2px); }
.lookpick button b { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
.lookpick button.on { border-color: var(--label); background: var(--well-on); }
.lookpick button.on b { color: var(--label); text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); }
.lookpick .tag { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); color: var(--dim); text-shadow: none; }
.lookart { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 4px; border-radius: 8px; overflow: hidden; background: #061520; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lookart > span { position: absolute; display: block; border-radius: 3px; }
.la-top { left: 4%; right: 4%; top: 5%; height: 8%; background: rgba(160, 220, 255, .22); }
.la-stage { left: 4%; right: 27%; top: 17%; bottom: 6%; background: linear-gradient(180deg, #6fc6f2 0 58%, #5d9b3a 58% 61%, #6b4423 61%); }
.la-panel { right: 4%; width: 20%; top: 17%; bottom: 6%; background: rgba(160, 220, 255, .2); }
.la-hot { position: absolute; left: 30%; right: 30%; bottom: 6%; height: 9%; border-radius: 2px; background: rgba(9, 28, 42, .85); }
.la-rail { z-index: 1; display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 3px 0; }
.la-rail i { display: block; width: 62%; aspect-ratio: 1; border-radius: 2px; background: rgba(222, 236, 245, .5); }
.la-rail i.on { background: #ffe27a; box-shadow: 0 0 4px #ffe27a; }
.lookart.dock .la-rail { left: 6%; top: 30%; bottom: 18%; width: 6%; border-radius: 4px; background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); justify-content: center; }
.lookart.slim .la-stage { left: 14%; }
.lookart.slim .la-rail { left: 4%; top: 17%; bottom: 6%; width: 7%; background: rgba(160, 220, 255, .18); overflow: visible; }
.lookart.slim .la-rail::after { content: ''; position: absolute; left: 115%; top: 22%; width: 130%; height: 34%; border-radius: 3px; background: rgba(12, 36, 53, .95); box-shadow: 0 0 0 1px rgba(160, 220, 255, .4); }
.chkrow { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--text) !important; font-size: 12.5px !important; cursor: pointer; }
.chkrow input { width: auto; accent-color: var(--label); }
@media (max-width: 820px) { .lookpick { grid-template-columns: 1fr; } }

/* ---------- image to pixel art ---------- */
.dialog.wide:has(.pa) { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.pa { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; min-height: 0; height: min(76vh, 760px); }
.pa-opts { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-right: 6px; min-height: 0; }
.pa-opts section { display: flex; flex-direction: column; gap: 8px; }
.pa-opts .seg { flex-wrap: wrap; }
.pa-opts .h { color: var(--label); }
.pa-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pa-file .nm { flex: 1; min-width: 0; color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pa-chips .chipbtn { padding: 5px 9px; }
.pa-chips .chipbtn.on { color: var(--text); box-shadow: inset 0 0 0 1px var(--label); }
.pa-slider { flex-direction: column !important; gap: 2px !important; }
.pa-slider span { display: flex; justify-content: space-between; }
.pa-slider b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.dialog .pa-slider input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--label); }
.pa-check { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--text) !important; font-size: 12.5px !important; cursor: pointer; }
.dialog .pa-check input { width: auto; accent-color: var(--label); }
.pa-checks { display: flex; flex-direction: column; gap: 6px; }
.pa-shelves { display: flex; flex-direction: column; gap: 4px; }
.pa-shelves button { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; background: var(--well); border: 1px solid transparent; border-radius: 10px; color: var(--text); text-align: left; font-size: 12.5px; }
.pa-shelves button.on { border-color: rgba(255, 226, 110, .55); background: var(--well-on); }
.pa-paints { display: flex; align-items: center; flex-wrap: wrap; }
.pa-paints .lbl { color: var(--dim); font-size: 12px; margin-right: 6px; }
.pa-custom { display: flex; flex-direction: column; gap: 6px; }
.pa-custom .bfgrid .cell.on { box-shadow: inset 0 0 0 2px var(--label); border-radius: 8px; }
.pa-picked { display: flex; flex-wrap: wrap; gap: 4px; }
.pa-picked .chip { font-size: 12px; }
.pa-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.pa-views { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1.6; min-height: 220px; }
.pa-pane { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.pa-pane-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.pa-canvas { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: repeating-conic-gradient(#0b1b26 0 25%, #0e2230 0 50%) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px var(--edge); }
.pa-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pa-empty { position: absolute; left: 0; right: 0; bottom: 0; top: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: 2px dashed var(--edge-strong); border-radius: 12px; color: var(--dim); }
.pa-empty b { color: var(--text); font-size: 14px; }
.pa-empty:hover { border-color: var(--label); }
.pa-busy { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; }
.pa-busy .spinner { width: 14px; height: 14px; border-width: 2px; }
.countsum .dim { color: var(--faint); }
.pa-list { flex: 1; min-height: 120px; overflow-y: auto; border-radius: 10px; background: rgba(0, 0, 0, .18); }
.pa-list table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pa-list th { position: sticky; top: 0; background: var(--panel-solid); color: var(--dim); font-weight: 500; text-align: left; padding: 6px; font-size: 11.5px; }
.pa-list td { padding: 2px 6px; border-top: 1px solid rgba(255, 255, 255, .04); vertical-align: middle; }
.pa-list .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-list td.nm { width: 100%; }
.pa-list .lay { margin-left: 8px; color: var(--faint); font-size: 11px; }
.pa-list .pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.pa-list .short { color: var(--red); }
.dialog .pa-list input[type=number] { width: 76px; padding: 3px 6px; text-align: right; }
.pa-list tfoot td { border-top: 1px solid var(--edge-strong); padding: 6px; }
.iconbtn.xs { width: 22px; height: 22px; border-radius: 6px; }
.iconbtn.xs svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .pa { grid-template-columns: 1fr; height: auto; } .pa-views { grid-template-columns: 1fr; min-height: 420px; } }

/* ---------- the cloud (ui/cloud-ui.tsx) ---------- */
.cloudbtn { margin-left: 4px; white-space: nowrap; }
.cloudchip { display: flex; align-items: center; gap: 6px; margin-left: 4px; padding: 3px 9px 3px 3px; border: 1px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .2); color: var(--dim); font-size: 12px; white-space: nowrap; }
.cloudchip:hover { background: var(--well-hover); color: var(--text); }
.cloudchip img, .cloudchip .initial, .cloudme img, .cloudme .initial { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cloudchip .initial, .cloudme .initial { display: grid; place-items: center; background: var(--well-hover); color: var(--text); font-weight: 700; font-size: 11px; }
.cloudchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.cloudchip.synced .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.cloudchip.syncing .dot { background: var(--label); box-shadow: 0 0 6px var(--label); }
.cloudchip.offline .dot, .cloudchip.error .dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dialog .signins { display: flex; flex-direction: column; gap: 8px; }
.btn.signin { padding: 10px 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn.signin svg { flex: none; width: 20px; height: 20px; }
.btn.signin.discord { background: #5865f2; color: #fff; }
.btn.signin.google { background: #fff; color: #1f1f1f; }
.dialog .note.growid { color: var(--dim); }
.cloudme { display: flex; align-items: center; gap: 10px; }
.cloudme img, .cloudme .initial { width: 34px; height: 34px; }
.cloudme .who { display: flex; flex-direction: column; flex: 1; }
.cloudme .sub { color: var(--faint); font-size: 11.5px; }
.cloudthis { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 12.5px; color: var(--dim); background: rgba(255, 255, 255, .04); border-radius: 10px; padding: 8px 10px; }
.dialog h3.sub { margin: 4px 0 0; font-size: 13px; color: var(--dim); }
.worldlist { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.wrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.wrow.open { background: rgba(255, 226, 110, .07); }
.wrow.check { flex-direction: row; color: var(--text); font-size: 13px; }
.wrow .wname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; }
.wrow input.wname { font-weight: 700; text-transform: uppercase; }
.wrow .wmeta { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.wrow .tag { margin-left: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--well-hover); color: var(--dim); }
.wrow .tag.bad { background: rgba(255, 90, 90, .2); color: var(--red); }
.wrow select { background: rgba(0, 0, 0, .3); color: var(--text); border: 1px solid var(--edge); border-radius: 8px; padding: 3px 6px; font-size: 12px; }
@media (max-width: 720px) { .cloudchip .lbl { display: none; } .wrow { flex-wrap: wrap; } }

/* ---------- About & FAQ, the footer links ---------- */
.about { max-height: min(62vh, 560px); overflow: auto; padding-right: 4px; font-size: 13px; line-height: 1.5; }
.about .lead { margin: 0 0 10px; color: var(--text); }
.about .note { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--well); color: var(--dim); }
.about .note b { color: var(--text); }
.about h3 { margin: 6px 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.about details { border-top: 1px solid var(--edge); padding: 6px 0; }
.about summary { cursor: pointer; color: var(--text); font-weight: 700; }
.about details p { margin: 6px 0 2px; color: var(--dim); }
.dialog .actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.footlinks { display: inline-flex; gap: 10px; }
.footlinks a { color: var(--faint); text-decoration: none; }
.footlinks a:hover { color: var(--text); text-decoration: underline; }


/* the layer chip (Erase, Picker, Fill, Wand): Auto · Front · Back, an eye beside Front and Back */
.layerchip { align-items: center; flex: none; }
.layerchip button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; }
.layerchip button svg { width: 16px; height: 16px; flex: none; }
.layerchip button.eye { padding: 4px; margin-left: -3px; color: var(--faint); }
.layerchip button.eye svg { width: 14px; height: 14px; }
.layerchip button.eye:hover { color: var(--text); }
/* a hairline between the modes, so each eye reads as its layer's */
.layerchip button[data-layer-mode]:not(:first-child) { position: relative; margin-left: 5px; }
.layerchip button[data-layer-mode]:not(:first-child)::before { content: ''; position: absolute; left: -5px; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, .1); }
.layerchip button.eye.off { color: #ff9b7a; background: rgba(255, 120, 80, .14); box-shadow: inset 0 0 0 1px rgba(255, 120, 80, .35); }
/* the wand's long bar (mode, clipboard, transform): the chip shows its icons only (the tooltips name them) */
@media (max-width: 1900px) {
  .toolopts:has(.opgroup[aria-label="Selection actions"]) .layerchip button[data-layer-mode] { padding: 4px 6px; }
  .toolopts:has(.opgroup[aria-label="Selection actions"]) .layerchip .lbl { display: none; }
}
@media (max-width: 600px) {
  .layerchip button { padding: 4px 7px 4px 6px; gap: 4px; }
}

/* =====================================================================================================================
   W27: one look. Glass only on what floats over the world; solid panels for dense content; the game's gold for every
   active / selected state; small, quick motion (none under prefers-reduced-motion).
   ===================================================================================================================== */
/* ---- glass: the dock, the hotbar, the stage's bars, the hint, the notes ---- */
.rail.dock, .hbslots, .hbtoggle, .stage .hintbar, .stage .toast, .stage .banner, .floatbar, .focusbar, .dhud, .rbar, .dwlabel {
  background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
/* the bars that carry sentences get a deeper tint, so the text holds over a bright sky */
.stage .hintbar, .stage .toast, .stage .banner, .floatbar, .dhud, .rbar, .dwlabel { background: var(--glass-strong); }
.rbar { box-shadow: var(--glass-shadow), var(--glass-hi), 0 0 28px rgba(245, 189, 36, .14); }
.stage .hintbar, .stage .toast, .dhud, .floatbar { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
/* the hotbar's slots sit in the glass as darker wells */
.hbslot, .invpick { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06); }
.hbslot:hover:not(.empty), .invpick:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); }
.hbslot.empty { background: rgba(0, 0, 0, .14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
/* phones, low-power, or "reduce transparency": no backdrop blur over the animated canvas (it would repaint every
   frame) — the same surfaces as a solid, slightly translucent smoke */
@media (pointer: coarse), (prefers-reduced-transparency: reduce) {
  .rail.dock, .hbslots, .hbtoggle, .stage .hintbar, .stage .toast, .stage .banner, .floatbar, .focusbar, .dhud, .rbar, .dwlabel, .modal, .gdim {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .rail.dock, .hbslots, .hbtoggle, .focusbar { background: rgba(22, 20, 18, .86); }
  .stage .hintbar, .stage .toast, .stage .banner, .floatbar, .dhud, .rbar, .dwlabel { background: var(--glass-solid); }
}

/* ---- the gold: active tool, held slot, selected cell / row ---- */
.tool.on { border-color: var(--accent); background: var(--accent-fill); box-shadow: 0 0 12px var(--accent-glow), inset 0 -2px 0 rgba(0, 0, 0, .25); color: var(--accent-hi); }
.tool.on .licon, .flyitem.on .licon { color: var(--accent-hi); }
.rail.dock .tool.on, .rail.dock .tool.on .licon { color: var(--accent-hi); }
.rail.slim .tool.on { background: var(--accent-fill); box-shadow: inset 0 0 0 1.5px var(--accent-line), 0 0 12px var(--accent-glow); }
.flyitem.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-hi); }
.hbslot.on, .invcell.on .invpick { border: 2px solid var(--accent); background: var(--accent-fill); box-shadow: 0 0 12px var(--accent-glow), inset 0 1px 0 rgba(255, 240, 190, .25); }
.dockglow {
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 228, 140, .5), rgba(245, 189, 36, .22) 60%, rgba(245, 170, 20, .14));
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 18px rgba(245, 189, 36, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.radiolist button.on, .pa-shelves button.on { border-color: var(--accent-line); background: var(--accent-soft); }
.tplpick button.on, .lookpick button.on { border-color: var(--accent); background: var(--accent-soft); }
.wxcard.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent), 0 0 14px var(--accent-glow); }
.anchor button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.anchor button.on span, .wxcats button.on { background: var(--accent); }
.wxcats button.on { color: var(--on-accent); }

/* ---- motion: a newly active tool / slot gives a quick pop; a pressed button dips ---- */
@keyframes toolpop { 0% { transform: scale(.86); } 55% { transform: scale(1.16); } 100% { transform: scale(1.06); } }
@keyframes slotpop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.rail .tool.on .ticon, .flyitem.on .ticon { animation: toolpop .26s var(--ease-out); }
.rail:not(.dock) .tool.on .ticon { animation-name: slotpop; }
.hbslot.on, .invcell.on .invpick, .cell.on, .layerrow.on, .wxcard.on { animation: slotpop .2s var(--ease-out); }
.btn:active:not(:disabled), .hbslot:active, .wxcard:active { transform: translateY(1px) scale(.98); }
.stage .toast { animation: toastin .18s var(--ease-out); }
@keyframes toastin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.tabbody { animation: tabin .16s var(--ease-out); }
@keyframes tabin { from { opacity: 0; transform: translateY(3px); } }

/* ---- a small pixel touch: the dialog's title gets a stepped gold underline, like the game's menus ---- */
.dialog h2 { position: relative; padding-bottom: 7px; }
.dialog h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; background: var(--accent);
  box-shadow: 3px 0 0 var(--accent), 6px 0 0 rgba(245, 189, 36, .6), 9px 0 0 rgba(245, 189, 36, .3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- our Discord: the mark in white on blurple (a button) or in blurple beside the text (a link), never re-drawn ---- */
:root { --discord: #5865f2; --discord-hi: #6d78f5; }
.discordbtn { text-decoration: none; }
.btn.discordbtn { background: var(--discord); color: #fff; box-shadow: 0 3px 0 #3c45a5, var(--hi); }
.btn.discordbtn:hover:not(:disabled) { background: var(--discord-hi); }
.btn.discordbtn:active { box-shadow: 0 1px 0 #3c45a5; }
.btn.discordbtn .ic-discord { width: var(--ic-sm); height: var(--ic-sm); }
.topdiscord { margin-left: var(--s2); padding: 0 10px; }
.dlink { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.dlink .ic-discord { width: 14px; height: 14px; flex: none; color: var(--discord-hi); }
.dropdown .item .mi .ic-discord { color: var(--discord-hi); }
.gdiscord { align-self: flex-start; padding: 4px 9px 4px 7px; border-radius: var(--r-sm); background: rgba(88, 101, 242, .14); box-shadow: inset 0 0 0 1px rgba(88, 101, 242, .45); color: #c9cdfb; font-size: var(--fs-md); transition: background var(--t-fast); }
.gdiscord:hover { background: rgba(88, 101, 242, .26); color: #fff; }
.gdiscord .ic-discord { width: var(--ic-sm); height: var(--ic-sm); }
/* narrower windows: the mark alone */
@media (max-width: 1500px) { .topdiscord .lbl { display: none; } .topdiscord { padding: 0 8px; } }

/* =====================================================================================================================
   W28: phones. Portrait (≤ 600 px wide) and landscape (≤ 500 px tall) get layouts of their own instead of a squeezed
   desktop: the top bar as three fixed rows (menus + undo · world + weather + account · the tool's strip, which scrolls
   sideways with faded edges and never changes height), bottom sheets for dialogs and the weather picker, 40 px touch
   targets (the size tokens grow), the safe areas kept clear (notch, home indicator). Desktop and tablets are untouched:
   everything here is inside the media queries, except the phone-only parts, hidden by default.
   ===================================================================================================================== */
.toolopts .optname, .toolopts .opthint, .wxscrim, .wxclose { display: none; }
.topbar:has(.wxpop) { z-index: 40; }
@keyframes sheetin { from { opacity: 0; transform: translateY(28px); } }

/* ---------- both: touch sizes, sheets, the compact hint ---------- */
@media (max-width: 600px), (max-height: 500px) {
  :root { --h-sm: 38px; --h-md: 42px; --h-icon: 40px; }
  .app:not(.focus) {
    padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
    gap: 5px;
  }
  .app.focus .focusbar { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
  .menus .menubtn { min-height: 40px; }
  .dropdown .item { min-height: 42px; }
  .dropdown .switch { width: 34px; height: 20px; border-radius: 10px; }
  .dropdown .switch::after { width: 16px; height: 16px; }
  .dropdown .switch.on::after { transform: translateX(14px); }
  .menu > .dropdown { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }

  /* the tool's options: one strip, scrolled sideways; every control in it a full-size target */
  .toolopts { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .toolopts::-webkit-scrollbar { display: none; }
  .toolopts > * { flex: none; }
  .toolopts .seg button { min-height: 34px; }
  .toolopts .iconbtn.sm { width: 38px; height: 34px; }
  .toolopts .chipbtn { min-height: 40px; padding: 0 12px; }
  .toolopts .swatches.buckets .swatch { width: 38px; height: 38px; }
  .layerchip button { padding: 4px 9px 4px 7px; }
  .layerchip button.eye { width: 34px; justify-content: center; }
  .layerchip button.eye svg { width: 16px; height: 16px; }

  /* the hint: one line — the tool and its main gesture (the rest are keyboard and mouse extras) — and its close */
  .stage .hintbar { flex-wrap: nowrap; justify-content: flex-start; padding: 4px 4px 4px 5px; gap: 8px; max-width: 100%; font-size: var(--fs-sm); }
  .stage .hintbar .hp ~ .hp { display: none; }
  @media (max-width: 600px) { .stage .hintbar .hname { display: none; } }   /* (the strip at the top already names the tool) */
  .stage .hintbar .hp { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .stage .hintbar .hclose { position: static; flex: none; width: 32px; height: 32px; }
  .stagemsgs, .app.look-dock .stagemsgs { max-width: calc(100% - 24px); --hx: 0px; }
  .stagemsgs .toast { font-size: var(--fs-md); padding: 8px 14px; }

  /* hotbar: a bigger arrow; the inventory tab and the pins get an invisible margin to hit */
  .hbtoggle { width: 30px; height: 43px; }
  .hbexpand::before { content: ''; position: absolute; inset: -12px -10px -4px; }
  .invhelp { display: none; }
  .invpin::before { content: ''; position: absolute; inset: -8px; }

  /* dialogs: a sheet that scrolls as a whole, its buttons kept in reach at the bottom */
  .modal { overscroll-behavior: contain; }
  .dialog, .dialog.wide, .dialog.wide:has(.tl), .dialog.wide:has(.pa), .dialog[data-dialog="commit"] {
    position: relative; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(160, 220, 255, .25) transparent;
  }
  .dialog > .actions {
    position: sticky; bottom: -18px; z-index: 3; margin: 0 -18px -18px; padding: 12px 18px 16px; flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(11, 33, 49, 0), #0b2131 14px);
  }
  .exgrid, .about, .hklist, .helpcols, .countcols, .worldlist { max-height: none; overflow: visible; }
  .dialog input:not([type=checkbox], [type=radio], [type=range], [type=color]), .dialog select { min-height: var(--h-md); font-size: 16px; }
  .dialog textarea { font-size: 16px; }
  .swatches .sw { width: 34px; height: 32px; }
  .anchor { grid-template-columns: repeat(3, 34px); }
  .anchor button { width: 34px; height: 34px; }

  /* the weather picker: a sheet over a dimmed screen */
  .wxscrim { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(2, 10, 16, .6); animation: fade .14s; }
  .wxclose { display: grid; flex: none; }
  .wxpop {
    position: fixed; top: auto; left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom));
    width: auto; max-height: min(78dvh, 640px); padding: 12px; border-radius: var(--r-lg); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: bottom center; animation: sheetin .22s var(--ease-out);
  }
  .wxhead .h { display: none; }
  .wxsearch input { min-height: 40px; font-size: 16px; }
  .wxcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; flex: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 16px), transparent); }
  .wxcats::-webkit-scrollbar { display: none; }
  .wxcats button { flex: none; min-height: 34px; padding: 0 13px; font-size: var(--fs-md); }
  .wxfoot { flex-wrap: wrap; row-gap: 6px; }
  .wxtoggle input { width: 18px; height: 18px; }

  /* the panel: full-height tabs, a compact chosen-block row, one scroll for the history */
  .tabs .tab { min-height: 38px; }
  .tabclose { width: 40px; }
  .panel .selected { padding: 6px 8px; gap: 10px; }
  .panel .selected .bicon { zoom: .5; }
  .panel .selected .name { font-size: var(--fs-base); }
  .panel .selected .sub { font-size: var(--fs-xs); margin-top: 0; }
  .search input, .cats select { min-height: 40px; font-size: 16px; }
  .hsteps .step, .hstepshead { min-height: 40px; }
  .htl-tab { overflow-y: auto; scrollbar-width: thin; }
  .htl-tab .htimeline { flex: none; overflow: visible; min-height: 0; }
  .htl-tab .hsteps, .htl-tab .hsteps.open { flex: none; min-height: 0; }
  .htl-tab .hsteps .steps { flex: none; max-height: 260px; }

  /* status: the essentials, a real zoom button */
  .status { gap: 12px; padding: 0 10px; font-size: var(--fs-sm); }
  .status .pos, .status .cell-fg, .status .cell-bg, .status .dim, .status .footlinks { display: none; }
  .status .zoom { min-height: 26px; padding: 0 8px; }
}

/* ---------- portrait phones ---------- */
@media (max-width: 600px) {
  .app:not(.focus), .app.look-dock:not(.focus) {
    grid-template-columns: var(--railw) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) clamp(190px, 34%, 330px) 30px;
    grid-template-areas: "top top" "rail stage" "panel panel" "status status";
  }
  .app.panelslim:not(.focus), .app.look-dock.panelslim:not(.focus) { grid-template-rows: auto minmax(0, 1fr) 50px 30px; }
  /* (the glass dock becomes a column of its own: over a phone's narrow stage it would cover a third of it) */
  .app.look-dock:not(.focus) { grid-template-columns: auto minmax(0, 1fr); }
  .rail.dock { grid-area: rail; align-self: stretch; justify-self: stretch; margin: 0; max-height: none; border-radius: var(--r); animation: none; }
  .rail.dock:not(.labels) .railgrid { grid-template-columns: 38px; }
  .rail.dock:not(.labels) .railfoot { flex-direction: column; }
  .rail.dock .tool { width: 38px; min-height: 40px; }
  .rail.slim .tool { width: 40px; min-height: 40px; }
  .rail.slim .railmini, .rail.dock .railmini { width: 40px; height: 38px; }
  .flyitem { min-height: 44px; }
  /* (the rail's foot — keyboard shortcuts, Appearance — is in the Help and Settings menus; on a phone the tools get
     its room) */
  .rail .railfoot, .rail .railgrow { display: none; }

  /* the top bar: menus + undo / redo · the world, its weather, the account · the tool strip */
  .topbar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "brand menus menus menus hist" "name name save wx acct" "opts opts opts opts opts";
    align-items: center; gap: 3px 4px; padding: 3px 4px 0 6px; min-height: 0;
  }
  .topbar > .brand { grid-area: brand; margin: 0 2px 0 0; }
  .topbar > .menus { grid-area: menus; min-width: 0; gap: 0; }
  .menus .menubtn { padding: 0 6px; font-size: 13.5px; }
  .topbar > .hist { grid-area: hist; gap: 0; }
  .topbar > .worldname { grid-area: name; justify-self: start; max-width: 100%; min-height: 38px; padding: 0 12px; font-size: 13.5px; }
  .topbar > input.worldname.editing { width: 100%; font-size: 16px; }
  .topbar > .savestate { grid-area: save; padding: 0 6px; }
  .topbar > .weather { grid-area: wx; }
  .topbar > .weather .chip { min-height: 38px; padding: 4px 8px 4px 4px; }
  .topbar > .weather .chip img, .topbar > .weather .chip .sky { width: 44px; height: 28px; border-radius: 7px; }
  .topbar > .cloudbtn, .topbar > .cloudchip { grid-area: acct; margin: 0; min-height: 38px; }
  .topbar > .cloudchip { padding: 3px 10px 3px 4px; }
  .topbar > .cloudchip img, .topbar > .cloudchip .initial { width: 30px; height: 30px; }
  .topbar > .divider, .topbar > .spacer, .topbar > .topdiscord { display: none; }
  .topbar > .toolopts {
    grid-area: opts; height: 48px; gap: 8px; margin: 1px -4px 0 -6px; padding: 0 14px 0 10px; border-top: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent);
  }
  .toolopts .optname { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding-right: 12px; border-right: 1px solid var(--line-strong);
    color: var(--label); font-size: var(--fs-md); white-space: nowrap; text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); }
  .toolopts .optname .licon { width: 24px; height: 24px; color: var(--accent-hi); }
  .toolopts .optname .licon svg { width: 18px; height: 18px; }
  .toolopts:not(:has(> :not(.optname, .opthint))) .opthint { display: inline; color: var(--dim); font-size: var(--fs-sm); white-space: nowrap; }

  /* a sheet from the bottom edge */
  .modal { place-items: end stretch; padding-top: max(8px, env(safe-area-inset-top)); }
  .dialog, .dialog.wide, .dialog.wide:has(.tl), .dialog.wide:has(.pa), .dialog[data-dialog="commit"] {
    width: 100%; max-width: none; max-height: calc(100dvh - 8px - env(safe-area-inset-top));
    border-radius: 20px 20px 0 0; border-bottom: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    animation: sheetin .24s var(--ease-out);
  }
  .dialog > .actions { bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 0 -16px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .dialog .row { flex-wrap: wrap; }
  .formrow { flex-wrap: wrap; row-gap: 6px; }
  .formrow > .lbl, .blockfield > .lbl { width: 100%; }
  .blockfield { flex-wrap: wrap; row-gap: 6px; }
  .bfpop { left: 0; }
  .slots.nine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slots.nine .itemslot:nth-child(3n) .ipop { left: 0; right: auto; }
  .slots.nine .itemslot:nth-child(2n) .ipop { left: auto; right: 0; }
  .exgrid { grid-template-columns: 1fr; }
  .cd-items { grid-template-columns: 1fr; }
  .hkrow .an { min-width: 0; flex-basis: 100%; }
  .wxpop .wxgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
/* the narrowest phones: the logo gives the menus its room */
@media (max-width: 380px) {
  .topbar > .brand { display: none; }
  .menus .menubtn { padding: 0 5px; font-size: 13px; }
}

/* ---------- landscape phones: one slim top row, the dock in a column of its own, a narrower panel ---------- */
@media (max-height: 500px) and (min-width: 601px) {
  .app:not(.focus), .app.look-dock:not(.focus) {
    --railw: 52px; grid-template-rows: 44px minmax(0, 1fr) 26px;
    grid-template-columns: var(--railw) minmax(0, 1fr) min(var(--panelw), 31vw);
    grid-template-areas: "top top top" "rail stage panel" "status status status";
  }
  .app.look-dock:not(.focus) { grid-template-columns: auto minmax(0, 1fr) min(var(--panelw), 31vw); }
  .app.panelslim:not(.focus) { grid-template-columns: var(--railw) minmax(0, 1fr) 50px; }
  .app.look-dock.panelslim:not(.focus) { grid-template-columns: auto minmax(0, 1fr) 50px; }
  .rail.dock { grid-area: rail; align-self: stretch; justify-self: stretch; margin: 0; max-height: none; border-radius: var(--r); animation: none; }
  .rail.dock:not(.labels) .railgrid { grid-template-columns: 38px 38px; }
  .rail.dock .tool { width: 38px; min-height: 38px; }
  .rail .railfoot, .rail .railgrow { display: none; }
  .topbar > .weather .chip { min-height: 36px; }
  .panel.slim .iconbtn { width: 40px; height: 40px; }
  .topbar { padding: 0 4px 0 8px; gap: 2px; }
  .topbar > .divider { margin: 0 2px; }
  .menus .menubtn { padding: 0 8px; }
  .topbar > .topdiscord, .brand .beta { display: none; }
  .topbar > .toolopts { flex: 1 1 0; height: 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .topbar > .worldname { max-width: 120px; min-height: 36px; }
  .topbar > .cloudbtn, .topbar > .cloudchip { min-height: 36px; }
  /* dialogs and the weather picker: centred, as tall as the screen allows */
  .modal { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .dialog { padding: 14px 18px 18px; gap: 10px; }
  .wxpop { left: 50%; right: auto; top: max(6px, env(safe-area-inset-top)); width: min(680px, calc(100vw - 24px)); max-height: none; transform: translateX(-50%); animation: none; }
  .wxpop .wxgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tlview { height: 46dvh; }
}