/* Bloomshire Map Editor -- styles.
   A warm, quiet dark theme: pixel art reads best on a neutral dark ground,
   and the map should always be the brightest thing on screen. */

:root {
  --bg: #17130f;
  --panel: #211c17;
  --panel-2: #29231d;
  --panel-3: #342c24;
  --line: #3a3129;
  --line-2: #4d4137;
  --text: #f2e8da;
  --text-2: #c9b9a5;
  --text-3: #92826f;
  --accent: #8cc26b;
  --accent-2: #a8d98a;
  --accent-ink: #15220d;
  --amber: #ffcf5a;
  --amber-ink: #2b1f05;
  --danger: #e8705e;
  --info: #7ab8e6;
  --radius: 7px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --font: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --left-w: 320px;
  --right-w: 304px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); font: 13px/1.4 var(--font);
  overflow: hidden; user-select: none; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { user-select: text; }
.ico { display: block; flex: none; }
.hidden { display: none !important; }
kbd, .kbd {
  font: 600 10.5px var(--mono); color: var(--text-2); background: var(--panel-3); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; line-height: 16px; display: inline-block; min-width: 18px; text-align: center;
}

/* ------------------------------------------------------------------ layout */

#app { display: grid; grid-template-rows: 46px 1fr 26px; height: 100vh; }
#main { display: grid; grid-template-columns: 48px var(--left-w) 5px 1fr 5px var(--right-w); min-height: 0; }
/* THE SIDE PANELS FOLD AWAY. Either one, or both, and the map takes the room. */
#main.no-left { grid-template-columns: 48px 0 0 1fr 5px var(--right-w); }
#main.no-right { grid-template-columns: 48px var(--left-w) 5px 1fr 0 0; }
#main.no-left.no-right { grid-template-columns: 48px 0 0 1fr 0 0; }
#main.no-left #left, #main.no-left .splitter[data-side="left"] { display: none; }
#main.no-right #right, #main.no-right .splitter[data-side="right"] { display: none; }
/* every part keeps its own column: a hidden panel must not make the map slide
   into the panel's zero-width column (which is what auto-placement does) */
#main > #toolbar { grid-column: 1; grid-row: 1; }
#main > #left { grid-column: 2; grid-row: 1; }
#main > .splitter[data-side="left"] { grid-column: 3; grid-row: 1; }
#main > #stage { grid-column: 4; grid-row: 1; }
#main > .splitter[data-side="right"] { grid-column: 5; grid-row: 1; }
#main > #right { grid-column: 6; grid-row: 1; }

/* the fold button on each panel, and the tab that brings a folded one back */
.fold-btn { margin-left: auto; align-self: center; color: var(--text-3); }
.fold-btn:hover:not(:disabled) { color: var(--text); }
.right-head { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; flex: none;
  border-bottom: 1px solid var(--line); font: 700 10.5px var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.edge-tab {
  position: absolute; top: 34%; z-index: 4; display: none; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; transform: translateY(-50%); background: rgba(33, 28, 23, 0.94); border: 1px solid var(--line-2);
  color: var(--text-2); cursor: pointer; box-shadow: var(--shadow); font: 700 10px var(--font); letter-spacing: 0.08em; text-transform: uppercase;
}
.edge-tab span.lbl { writing-mode: vertical-rl; }
.edge-tab:hover { color: var(--text); background: var(--panel-3); }
.edge-tab.left { left: 0; border-left: 0; border-radius: 0 8px 8px 0; }
.edge-tab.right { right: 0; border-right: 0; border-radius: 8px 0 0 8px; }
.edge-tab.right span.lbl { transform: rotate(180deg); }
#main.no-left .edge-tab.left, #main.no-right .edge-tab.right { display: flex; }

/* --------------------------------------------------------------- top bar */

#topbar {
  display: flex; align-items: center; gap: 6px; padding: 0 10px 0 8px;
  background: linear-gradient(#262019, #1f1a15); border-bottom: 1px solid #0d0b09; box-shadow: inset 0 -1px 0 var(--line);
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 7px; padding: 0 8px 0 4px; color: var(--accent-2); white-space: nowrap; }
.brand b { color: var(--text); font-weight: 700; letter-spacing: 0.01em; }
.brand span { color: var(--text-3); font-weight: 500; }
.sep { width: 1px; align-self: stretch; margin: 10px 4px; background: var(--line); flex: none; }
.spacer { flex: 1; min-width: 4px; }

#menubar { display: flex; gap: 1px; }
.menu-btn {
  height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer;
}
.menu-btn:hover, .menu-btn.open { background: var(--panel-3); color: var(--text); }
/* Places (places.js): a real button beside the map's name -- where am I, where can I go */
#placesBtn { gap: 5px; margin-right: 8px; padding: 0 10px; }
#placesBtn svg:last-child { opacity: 0.6; }
#placesBtn.open { border-color: var(--accent); }

.docinfo { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 6px; }
.docinfo .name { font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; cursor: pointer; border-radius: 5px; padding: 3px 6px; }
.docinfo .name:hover { background: var(--panel-3); }
.docinfo .region { color: var(--text-3); white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; background: var(--panel-3); color: var(--text-2);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.saved { color: var(--accent-2); background: rgba(140, 194, 107, 0.12); }
.pill.dirty { color: var(--amber); background: rgba(255, 207, 90, 0.12); }
.pill.saving { color: var(--info); background: rgba(122, 184, 230, 0.12); }
.pill.error { color: var(--danger); background: rgba(232, 112, 94, 0.14); }

.tb-group { display: flex; align-items: center; gap: 2px; }
.ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.ibtn:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.ibtn.on { background: rgba(140, 194, 107, 0.16); color: var(--accent-2); border-color: rgba(140, 194, 107, 0.35); }
.ibtn:disabled { opacity: 0.35; cursor: default; }
.ibtn.sm { height: 24px; min-width: 24px; padding: 0 4px; }
.ibtn.danger:hover:not(:disabled) { color: var(--danger); }

.zoombox {
  width: 64px; height: 30px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--text);
}
.zoombox:hover { border-color: var(--line-2); }

/* Place: [Tiles ▾ | Free] -- on the grid, or anywhere at all */
.place-seg { display: flex; align-items: center; height: 30px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); flex: none; }
.place-l { padding: 0 7px 0 9px; font: 700 10px var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.seg-b { display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 9px; border: 0; border-left: 1px solid var(--line);
  background: none; color: var(--text-2); cursor: pointer; font: 600 12px var(--font); white-space: nowrap; }
.seg-b:hover { background: var(--panel-3); color: var(--text); }
.seg-b.on { background: rgba(140, 194, 107, 0.18); color: var(--accent-2); }
.seg-b.caret { padding: 0 5px; border-left-color: rgba(140, 194, 107, 0.25); }
.seg-b.caret:not(.on) { color: var(--text-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-3); color: var(--text); cursor: pointer; font-weight: 600; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #3e342b; }
.btn.primary { background: var(--accent); border-color: #a6d489; color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: var(--accent-2); }
.btn.danger { background: #4a231d; border-color: #7d3a30; color: #ffd6cf; }
.btn.ghost { background: none; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--panel-3); color: var(--text); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.small { height: 26px; padding: 0 10px; font-size: 12px; }

/* --------------------------------------------------------------- tool rail */

#toolbar {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0;
  background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; overflow-x: hidden;
}
.tool {
  position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--text-2); cursor: pointer;
}
.tool:hover { background: var(--panel-3); color: var(--text); }
.tool.on { background: var(--amber); color: var(--amber-ink); border-color: #ffe29a; box-shadow: 0 0 0 3px rgba(255, 207, 90, 0.14); }
.tool .k { position: absolute; right: 2px; bottom: 1px; font: 600 8.5px var(--mono); opacity: 0.55; }
.tool.on .k { opacity: 0.7; }
.tool-sep { width: 26px; height: 1px; background: var(--line); margin: 5px 0; flex: none; }
.tool-label { font: 700 8.5px var(--font); letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; margin: 2px 0 1px; }

/* ------------------------------------------------------------------ panels */

aside#left, aside#right { background: var(--panel); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
aside#left { border-right: 1px solid var(--line); }
aside#right { border-left: 1px solid var(--line); }
.splitter { cursor: col-resize; background: var(--bg); position: relative; }
.splitter:hover, .splitter.drag { background: var(--line-2); }

.tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); flex: none; }
.tab {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 7px 7px 0 0; background: none; color: var(--text-3); cursor: pointer; font-weight: 600; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.on { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.tab .count { font-weight: 500; color: var(--text-3); font-size: 11px; }
.tabpane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--panel-2); }

.field {
  height: 30px; width: 100%; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); outline: none;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140, 194, 107, 0.18); }
textarea.field { height: auto; min-height: 54px; padding: 6px 9px; resize: vertical; line-height: 1.35; }
select.field { padding-right: 4px; cursor: pointer; }

/* ---------------------------------------------------------------- library */

.lib-search { position: relative; padding: 9px 9px 6px; flex: none; }
.lib-search .ico { position: absolute; left: 18px; top: 16px; color: var(--text-3); pointer-events: none; }
.lib-search input { padding-left: 32px; padding-right: 30px; height: 32px; }
.lib-search .clear { position: absolute; right: 13px; top: 13px; }
/* ---- asset library sources -------------------------------------------
   Bloomshire draws on more than one art pack. These chips pick which one
   the browser shows; "All" is the default because a designer should see
   the whole library without having to ask for it. */
.lib-sources { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 9px 7px; flex: none; }
.src-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  font: 600 11px var(--font); color: var(--text-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.src-chip:hover { background: var(--panel-3); color: var(--text); border-color: var(--line-2); }
.src-chip.on {
  color: var(--accent-2); background: rgba(140, 194, 107, 0.16);
  border-color: rgba(140, 194, 107, 0.4);
}
.src-chip .n { font: 600 9.5px var(--mono); color: var(--text-3); }
.src-chip.on .n { color: var(--accent); }

.lib-scope { display: flex; align-items: center; gap: 6px; padding: 0 10px 6px; color: var(--text-3); font-size: 11.5px; flex: none; min-height: 18px; }
.lib-scope label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.lib-tree { overflow-y: auto; flex: none; padding: 2px 6px 8px; border-bottom: 1px solid var(--line); }
.tree-h { font: 700 10px var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); padding: 9px 8px 4px; }
.tree-h.fold { display: flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 5px; }
.tree-h.fold:hover { color: var(--text-2); }
.tree-h.fold .tw { display: grid; place-items: center; transform: rotate(90deg); transition: transform 0.12s; }
.tree-h.fold.folded .tw { transform: none; }
.node {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px; border-radius: 6px; cursor: pointer; color: var(--text-2);
  white-space: nowrap; overflow: hidden;
}
.node:hover { background: var(--panel-3); color: var(--text); }
.node.on { background: rgba(140, 194, 107, 0.16); color: var(--accent-2); }
.node .tw { width: 14px; height: 14px; display: grid; place-items: center; flex: none; color: var(--text-3); transition: transform 0.12s; }
.node .tw.open { transform: rotate(90deg); }
.node .tw.none { visibility: hidden; }
.node .label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.node .n { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.node .ico { color: var(--text-3); }
.node.on .ico { color: var(--accent-2); }
.hsplit { height: 5px; cursor: row-resize; flex: none; background: var(--panel); border-bottom: 1px solid var(--line); }
.hsplit:hover, .hsplit.drag { background: var(--line-2); }

.grid-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px 6px; flex: none; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.grid-head .title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.grid-head .n { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.sizes { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; flex: none; }
.sizes button { border: 0; background: none; color: var(--text-3); padding: 2px 7px; cursor: pointer; font-size: 11px; font-weight: 700; }
.sizes button.on { background: var(--panel-3); color: var(--text); }

.lib-grid { flex: 1; overflow-y: auto; padding: 4px 8px 16px; min-height: 60px; }
.sec-h {
  display: flex; align-items: center; gap: 6px; padding: 9px 2px 5px; color: var(--text-2); font-size: 11.5px; font-weight: 650;
  cursor: pointer; position: sticky; top: -4px; background: var(--panel-2); z-index: 1;
}
.sec-h .path { color: var(--text-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sec-h .n { color: var(--text-3); font-weight: 500; }
.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr)); gap: 5px; }
.cell {
  position: relative; border-radius: 7px; background: #1a1612; border: 1px solid var(--line); cursor: grab; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; touch-action: none;
}
.cell:hover { border-color: var(--line-2); background: #221c16; }
.cell.armed { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255, 207, 90, 0.35); }
.cell canvas { width: calc(var(--cell) - 10px); height: calc(var(--cell) - 10px); margin: 4px 4px 0; image-rendering: pixelated; pointer-events: none; }
.cell .cap { width: 100%; padding: 1px 5px 4px; font-size: 10.5px; color: var(--text-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell:hover .cap { color: var(--text-2); }
.cell .badge {
  position: absolute; left: 4px; top: 4px; font: 700 9px var(--font); letter-spacing: 0.03em; padding: 1px 4px; border-radius: 4px;
  background: rgba(20, 16, 12, 0.82); color: var(--text-2); pointer-events: none;
}
.cell .badge.tiles { color: var(--info); }
.cell .badge.src { top: auto; bottom: 3px; left: 3px; right: auto; color: var(--text-3); opacity: 0.85; }
.cell:hover .badge.src { opacity: 1; color: var(--text-2); }
.cell .badge.prefab { color: var(--amber); }
.cell .star {
  position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; display: none; place-items: center; border: 0; border-radius: 5px;
  background: rgba(20, 16, 12, 0.7); color: var(--text-3); cursor: pointer;
}
.cell:hover .star, .cell .star.on { display: grid; }
.cell .star.on { color: var(--amber); }
.more { display: flex; justify-content: center; padding: 12px; }
.empty { padding: 26px 16px; text-align: center; color: var(--text-3); line-height: 1.55; }
.empty b { color: var(--text-2); }

/* ----------------------------------------------------------- tile palette */

.pal-head { display: flex; gap: 6px; padding: 9px 9px 6px; flex: none; }
.pal-bar { display: flex; align-items: center; gap: 3px; padding: 0 9px 6px; flex: none; }
.pal-bar + .pal-bar { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.pal-bar .lbl:first-child { margin-left: 0; }
.pal-bar .lbl { color: var(--text-3); font-size: 11.5px; margin: 0 2px 0 6px; }
.pal-bar .bnum { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pal-sheet { flex: 1; overflow: auto; padding: 10px; background:
  repeating-conic-gradient(#1d1814 0% 25%, #231d18 0% 50%) 0 0 / 16px 16px; }
.pal-sheet canvas { image-rendering: pixelated; cursor: crosshair; display: block; box-shadow: 0 0 0 1px var(--line-2); }
.pal-foot { flex: none; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 11.5px; display: flex; gap: 10px; align-items: center; min-height: 52px; }
.pal-foot canvas { image-rendering: pixelated; background: #1a1612; border: 1px solid var(--line); border-radius: 5px; flex: none; }
.pal-foot b { color: var(--text-2); }

/* -------------------------------------------------------------- stage */

#stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #16130f; }
#canvas { display: block; outline: none; image-rendering: pixelated; }
.stage-card {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.stage-card > div {
  pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 28px 30px; width: min(460px, 90%); text-align: center;
}
.stage-card h2 { margin: 10px 0 6px; font-size: 20px; }
.stage-card p { color: var(--text-2); margin: 0 0 18px; line-height: 1.55; }
.stage-card .row { display: flex; gap: 10px; justify-content: center; }
.armed-bar {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  background: rgba(33, 28, 23, 0.95); border: 1px solid var(--amber); border-radius: 10px; padding: 6px 8px 6px 12px; box-shadow: var(--shadow);
  font-weight: 600; z-index: 3;
}
.armed-bar canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.armed-bar .hint { color: var(--text-3); font-weight: 500; }

/* ----------------------------------------------------------- right panel */

.sec { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; flex: none; }
.sec > .sec-title {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 10px; flex: none; cursor: pointer;
  font: 700 10.5px var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3);
}
.sec > .sec-title:hover { color: var(--text-2); }
.sec > .sec-title .tw { transition: transform 0.12s; }
.sec.open > .sec-title .tw { transform: rotate(90deg); }
.sec > .sec-title .grow { flex: 1; }
.sec > .sec-body { display: none; min-height: 0; }
.sec.open > .sec-body { display: flex; flex-direction: column; }
#secProps { flex: 1 1 auto; min-height: 300px; }
#secProps:not(.open) { min-height: 0; flex: none; }
aside#right { overflow-y: auto; }
#secProps.open > .sec-body { overflow-y: auto; flex: 1; }
.sec-title .ibtn { text-transform: none; letter-spacing: 0; }

.layers { max-height: 236px; overflow-y: auto; padding: 0 6px 4px; }
.layer {
  display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 2px; border-radius: 7px; cursor: pointer; border: 1px solid transparent;
  color: var(--text-2);
}
.layer:hover { background: var(--panel-3); }
.layer.on { background: rgba(255, 207, 90, 0.10); border-color: rgba(255, 207, 90, 0.40); color: var(--text); }
.layer .kind { color: var(--text-3); width: 22px; display: grid; place-items: center; flex: none; }
.layer.on .kind { color: var(--amber); }
.layer .lname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer .lname input { width: 100%; height: 24px; }
.layer .lcount { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.layer .ibtn.sm { color: var(--text-3); }
.layer .ibtn.sm.off { color: var(--danger); opacity: 0.85; }
.layer.hidden-layer .lname { opacity: 0.45; text-decoration: line-through; }
.layer.dragging { opacity: 0.5; }
.layer.drop-above { box-shadow: inset 0 2px 0 var(--amber); }
.layer.drop-below { box-shadow: inset 0 -2px 0 var(--amber); }
.layer-foot { display: flex; align-items: center; gap: 2px; padding: 2px 8px 8px; flex-wrap: wrap; }
.layer-opts { display: flex; align-items: center; gap: 8px; padding: 0 10px 10px; color: var(--text-3); font-size: 11.5px; }
.layer-opts input[type=range] { flex: 1; accent-color: var(--amber); }

.props { padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.props .head { display: flex; gap: 10px; align-items: center; }
.props .head canvas { width: 56px; height: 56px; border-radius: 8px; background: #1a1612; border: 1px solid var(--line); image-rendering: pixelated; flex: none; }
.props .head .t { min-width: 0; }
.props .head .t b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.props .head .t span { display: block; color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.props .grp { display: flex; flex-direction: column; gap: 6px; }
.props .grp-t { font: 700 10px var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.props .grp-t::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.props .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.props .row.three { grid-template-columns: 1fr 1fr 1fr; }
.props .row.one { grid-template-columns: 1fr; }
.num {
  display: flex; align-items: center; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow: hidden;
}
.num:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140, 194, 107, 0.18); }
.num label { padding: 0 3px 0 8px; color: var(--text-3); font: 700 10.5px var(--font); cursor: ew-resize; flex: none; min-width: 20px; }
.num input { border: 0; outline: 0; background: none; width: 100%; min-width: 0; height: 100%; padding: 0 6px 0 2px; font-variant-numeric: tabular-nums; }
.num .unit { color: var(--text-3); font-size: 11px; padding-right: 7px; }
.btnrow { display: flex; gap: 4px; flex-wrap: wrap; }
.btnrow .ibtn { border: 1px solid var(--line); background: var(--panel); height: 28px; }
.btnrow .ibtn:hover:not(:disabled) { border-color: var(--line-2); }
.btnrow .ibtn.on { border-color: rgba(140, 194, 107, 0.45); }
.check { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text-2); }
.check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.muted { color: var(--text-3); }
.small { font-size: 11.5px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; color: var(--text-2); }
.kv span:nth-child(odd) { color: var(--text-3); }
.swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.swatch { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.swatch.on { border-color: var(--text); }

.zones { padding: 0 6px 8px; max-height: 180px; overflow-y: auto; }
.zone-row { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: 7px; cursor: pointer; color: var(--text-2); }
.zone-row:hover { background: var(--panel-3); }
.zone-row.on { background: var(--panel-3); color: var(--text); }
.zone-row .dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.zone-row .zname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-row .zsize { font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------- whole-map panel
   The entire map, editable, floating over the bottom-right of the stage. */
.wholemap {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column;
  min-width: 270px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: var(--shadow); overflow: hidden;
}
.wholemap.collapsed .wm-body, .wholemap.collapsed .wm-foot, .wholemap.collapsed .wm-grip { display: none; }
.wm-head {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 17px; flex: none; cursor: default;
  background: linear-gradient(#2a231c, #241e18); border-bottom: 1px solid var(--line); white-space: nowrap; min-width: 0;
}
.wm-head b { font-size: 12px; }
.wm-ico { color: var(--accent-2); display: grid; place-items: center; }
.wm-sub { flex: none; height: 22px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.wm-size { font: 600 10.5px var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wholemap.collapsed .wm-sub { border-bottom: 0; }
.wm-sizes { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; flex: none; }
.wm-sizes button { border: 0; background: none; color: var(--text-3); padding: 2px 6px; cursor: pointer; font: 700 10px var(--font); }
.wm-sizes button:hover { background: var(--panel-3); color: var(--text); }
.wm-body { flex: 1; min-height: 0; position: relative; background: #120f0c; }
#wholeCanvas { display: block; outline: none; image-rendering: pixelated; }
.wm-foot { flex: none; height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 9px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-foot b { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.wm-grip { position: absolute; left: 0; top: 0; width: 14px; height: 14px; cursor: nwse-resize; z-index: 2;
  background: linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 5px, var(--line-2) 5px 6px, transparent 6px); }

/* ------------------------------------------------------------- status bar */

#statusbar {
  display: flex; align-items: center; gap: 0; padding: 0 8px; background: #1b1713; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden;
}
#statusbar .st { padding: 0 10px; border-right: 1px solid var(--line); display: flex; gap: 6px; align-items: center; height: 100%; }
#statusbar .st b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
#statusbar .st.hint { border: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
#statusbar .st.hint kbd { margin: 0 1px; }

/* ------------------------------------------------------------ overlays */

.menu {
  position: fixed; z-index: 50; min-width: 220px; padding: 5px; background: #2a231c; border: 1px solid var(--line-2); border-radius: 9px;
  box-shadow: var(--shadow); font-size: 13px;
}
.menu .mi {
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px 0 8px; border-radius: 6px; cursor: pointer; color: var(--text); white-space: nowrap;
}
.menu .mi .ico { color: var(--text-3); }
.menu .mi:hover:not(.dis), .menu .mi.hot { background: var(--accent); color: var(--accent-ink); }
.menu .mi:hover:not(.dis) .ico, .menu .mi.hot .ico { color: var(--accent-ink); }
.menu .mi .lbl { flex: 1; }
.menu .mi .sc { color: var(--text-3); font-size: 11.5px; margin-left: 18px; }
.menu .mi:hover:not(.dis) .sc { color: var(--accent-ink); opacity: 0.75; }
.menu .mi.dis { opacity: 0.4; cursor: default; }
.menu .mi .chk { width: 18px; display: grid; place-items: center; }
.menu .msep { height: 1px; background: var(--line); margin: 5px 6px; }
.menu .mh { padding: 6px 10px 3px; font: 700 10px var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.menu .mi.sub::after { content: "\203A"; color: var(--text-3); margin-left: 12px; }

.modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(8, 6, 4, 0.62); display: grid; place-items: center; animation: fade 0.12s ease-out; }
.modal {
  width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: var(--shadow); animation: pop 0.14s ease-out;
}
.modal.wide { width: min(760px, 95vw); }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.modal-h h3 { margin: 0; font-size: 16px; flex: 1; }
.modal-b { padding: 8px 18px 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-b p { margin: 0; color: var(--text-2); line-height: 1.55; }
.modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px 16px; }
.modal-f .left { margin-right: auto; }
.form { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; align-items: center; }
.form label.l { color: var(--text-2); font-weight: 600; }
.form .help { grid-column: 2; color: var(--text-3); font-size: 11.5px; margin-top: -6px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets button { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; color: var(--text-2); font-size: 12px; }
.presets button:hover { border-color: var(--line-2); color: var(--text); }
.presets button.on { border-color: var(--accent); color: var(--accent-2); background: rgba(140, 194, 107, 0.1); }
.anchor { display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; }
.anchor button { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); cursor: pointer; }
.anchor button.on { background: var(--amber); border-color: var(--amber); }
.maplist { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.maprow {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); cursor: pointer;
}
.maprow:hover { border-color: var(--line-2); background: var(--panel-3); }
.maprow.on { border-color: var(--accent); }
.maprow .mn { font-weight: 650; }
.maprow .mm { color: var(--text-3); font-size: 11.5px; grid-column: 1; }
.maprow .ma { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-items: center; }
.maprow.deleted { opacity: 0.82; border-style: dashed; cursor: default; }
.btn.ghost.danger-text:hover { color: var(--danger); }
.bin-toggle { align-self: flex-start; }
.maplist.bin { max-height: 30vh; }
/* New map: a name that is already taken, and the two ways out of it */
.clash { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; margin-top: -4px;
  border: 1px solid rgba(255, 207, 90, 0.4); background: rgba(255, 207, 90, 0.08); border-radius: 8px; color: var(--text-2); font-size: 12px; }
.clash span { flex: 1 1 100%; }
.presets.units { flex-wrap: nowrap; flex: none; gap: 0; }
.presets.units button { min-width: 54px; border-radius: 0; }
.presets.units button:first-child { border-radius: 6px 0 0 6px; }
.presets.units button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
/* Recovered work: what is in each version */
.recover-kv { grid-template-columns: auto 1fr 1fr; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.recover-kv b { color: var(--text); font-size: 11.5px; }
.warn-line { color: var(--amber) !important; font-weight: 600; }
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.shortcuts div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.shortcuts h4 { grid-column: 1 / -1; margin: 10px 0 2px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

#toasts { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(40, 33, 26, 0.97); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); color: var(--text);
  padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow); max-width: 70vw; animation: pop 0.14s ease-out; font-weight: 500;
}
.toast.warn { border-left-color: var(--amber); }
.toast.error { border-left-color: var(--danger); }
.toast.out { opacity: 0; transition: opacity 0.3s; }

#tip {
  position: fixed; z-index: 80; pointer-events: none; background: #0f0c0a; color: var(--text); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 5px 8px; font-size: 12px; box-shadow: var(--shadow); max-width: 280px; display: none; line-height: 1.4;
}
#tip kbd { margin-left: 6px; }
#tip .d { color: var(--text-3); display: block; margin-top: 2px; }

#preview {
  position: fixed; z-index: 45; pointer-events: none; width: 250px; background: #221c16; border: 1px solid var(--line-2); border-radius: 11px;
  box-shadow: var(--shadow); padding: 10px; display: none;
}
#preview .pv-img { height: 190px; display: grid; place-items: center; border-radius: 8px; margin-bottom: 9px;
  background: repeating-conic-gradient(#1d1814 0% 25%, #2a231d 0% 50%) 0 0 / 16px 16px; }
#preview canvas { image-rendering: pixelated; max-width: 100%; max-height: 100%; }
#preview .pv-n { font-weight: 700; margin-bottom: 4px; }
#preview .kv { font-size: 11.5px; }
#preview .pv-h { margin-top: 8px; color: var(--text-3); font-size: 11px; }

#dragGhost { position: fixed; z-index: 90; pointer-events: none; opacity: 0.85; image-rendering: pixelated; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); display: none; }

#loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); }
#loading > div { text-align: center; color: var(--text-2); }
#loading .bar { width: 240px; height: 4px; background: var(--panel-3); border-radius: 2px; overflow: hidden; margin: 14px auto 0; }
#loading .bar i { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: 2px; animation: slide 1.1s ease-in-out infinite; }
#loading .err { color: var(--danger); max-width: 460px; margin-top: 12px; line-height: 1.5; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(0.99); } }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #3b3229; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #4d4137; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------ narrow windows */

.pill .when { font-weight: 500; opacity: 0.8; }
/* the map's name must never be squeezed out of the top bar; optional pieces
   are hidden instead, least needed first (ui.js, fitTopbar) */
.docinfo { flex: 0 1 auto; min-width: 110px; }
#topbar .tb-hide { display: none !important; }
@media (max-width: 1280px) {
  .brand span, .docinfo .region, .pill .when { display: none; }
}
@media (max-width: 1100px) {
  .brand b { display: none; }
  #saveBtn span, #playBtn span, #placesBtn span { display: none; }
  #saveBtn, #playBtn { padding: 0 9px; }
  .docinfo .name { max-width: 150px; }
  #viewBtns .opt { display: none; }
  .menu-btn { padding: 0 8px; }
}
@media (max-width: 900px) {
  #viewBtns .opt2 { display: none; }
  .docinfo .name { max-width: 96px; }
  #topbar { gap: 3px; }
  .sep { margin: 10px 2px; }
}
.pal-bar .ibtn.sm { padding: 0 3px; min-width: 22px; }

/* ---------------------------------------------------- ground picker */

.seg-row { display: flex; gap: 4px; padding: 9px 9px 2px; flex: none; }
.seg {
  flex: 1; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--text-3); font-weight: 650; cursor: pointer;
}
.seg:hover { color: var(--text); border-color: var(--line-2); }
.seg.on { background: rgba(255, 207, 90, 0.14); border-color: rgba(255, 207, 90, 0.5); color: var(--amber); }
.grounds { flex: 1; overflow-y: auto; padding: 2px 8px 14px; min-height: 80px; }
.g-head {
  display: flex; gap: 6px; align-items: center; padding: 10px 2px 5px; font-size: 11.5px; font-weight: 650;
  color: var(--text-2); position: sticky; top: -2px; background: var(--panel-2); z-index: 1;
}
.g-head .n { color: var(--text-3); font-weight: 500; }
.g-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; }
.swatch-g { border: 1px solid var(--line); border-radius: 7px; background: #1a1612; padding: 2px; cursor: pointer; display: grid; place-items: center; }
.swatch-g canvas { width: 44px; height: 44px; image-rendering: pixelated; }
.swatch-g:hover { border-color: var(--line-2); }
.swatch-g.on { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255, 207, 90, 0.35); }

.swatch-g { position: relative; }
.swatch-g .hollow { position: absolute; right: 2px; top: 1px; font-size: 10px; color: var(--info); text-shadow: 0 0 3px #000; }

/* ================================================== reference (tracing) ==
   A blueprint under the map. Opacity and show/hide are used constantly while
   tracing, so they sit at the top of the panel and again in the top bar;
   everything below them is one-time calibration. */
.ref-empty { padding: 14px 10px 12px; text-align: center; }
.ref-empty-ico { color: var(--text-3); margin-bottom: 6px; }
.ref-empty-t { font: 600 12.5px var(--font); color: var(--text); }
.ref-empty-s { font-size: 11px; color: var(--text-3); margin: 3px 0 10px; line-height: 1.45; }

.ref-file { display: flex; align-items: center; gap: 4px; padding: 2px 2px 8px; }
.ref-file .grow { flex: 1; min-width: 0; font: 600 11.5px var(--font); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ref-oprow { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
.ref-oprow label { font: 600 11px var(--font); color: var(--text-2); flex: none; }
.ref-op-v { font: 600 11px var(--mono); color: var(--accent-2); width: 36px; text-align: right; flex: none; }
input.ref-op {
  -webkit-appearance: none; appearance: none; flex: 1; height: 18px; background: transparent; cursor: pointer;
}
input.ref-op::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--panel-3), var(--accent));
}
input.ref-op::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px;
  border-radius: 50%; background: var(--accent-2); border: 2px solid #17130f; box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
input.ref-op::-moz-range-track { height: 5px; border-radius: 3px; background: var(--panel-3); border: 1px solid var(--line); }
input.ref-op::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); border: 2px solid #17130f; }

.ref-quick { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px 8px; }
.chip {
  height: 22px; padding: 0 9px; font: 600 11px var(--font); color: var(--text-2);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.chip:hover { background: var(--panel-3); color: var(--text); }
.chip.on { color: var(--accent-2); background: rgba(140,194,107,.16); border-color: rgba(140,194,107,.4); }
.chip.tiny { padding: 0 7px; font-size: 10px; font-family: var(--mono); }
.ref-lbl { font: 600 11px var(--font); color: var(--text-3); align-self: center; margin-right: 2px; }

.ref-align { display: grid; gap: 5px; padding: 2px 0 6px; }
.ref-align.locked { opacity: .55; }
.ref-align .row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

.ref-toggles { display: flex; gap: 12px; padding: 2px 2px 8px; }
.ref-toggles .check { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); cursor: pointer; }

.ref-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; padding-bottom: 8px; }
.ref-acts.three { grid-template-columns: 1fr 1fr; }
.ref-acts.three > :first-child { grid-column: 1 / -1; }

.ref-lock {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 30px;
  font: 600 11.5px var(--font); color: var(--text-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.ref-lock:hover { background: var(--panel-3); color: var(--text); }
.ref-lock.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent-2); }
.ref-hint { font-size: 10.5px; color: var(--text-3); line-height: 1.45; padding: 7px 2px 2px; }

.ref-known { padding: 8px 2px 2px; border-top: 1px solid var(--line); margin-top: 8px; }
.ref-known-t { font: 700 9.5px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); padding-bottom: 4px; }
.ref-known-i {
  display: flex; width: 100%; height: 24px; align-items: center; padding: 0 7px; margin-bottom: 3px;
  font-size: 11px; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; cursor: pointer; text-align: left;
}
.ref-known-i:hover { background: var(--panel-3); color: var(--text); }

/* the same two controls in the top bar, where they are always within reach */
.ref-bar { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.ref-bar input.ref-op { width: 92px; }
.ref-bar .ref-op-v { width: 32px; font-size: 10.5px; }

/* ---- who is here ----------------------------------------------------------
   Hosted for more than one designer, the top bar says who you are and who else
   has this map open. Alone on your own machine it is never drawn at all. */
.who-bar { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.who-bar.hidden { display: none; }
.who-me {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  font: 600 10.5px var(--font); color: var(--accent-ink); background: var(--accent);
  border-radius: 999px; white-space: nowrap;
}
.who-out { font-size: 10.5px; color: var(--text-3); text-decoration: none; }
.who-out:hover { color: var(--text); text-decoration: underline; }
/* live: the dot, and one round chip per other designer in their cursor colour */
.live-dot {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px;
  font: 650 10.5px var(--font); color: #bfe8c9; background: rgba(60, 170, 100, 0.14);
  border: 1px solid rgba(90, 200, 130, 0.35); border-radius: 999px; white-space: nowrap;
}
.live-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4fd07e; box-shadow: 0 0 0 2px rgba(79, 208, 126, 0.25); }
.live-dot.reconnecting, .live-dot.connecting { color: #f3d9a4; background: rgba(230, 170, 60, 0.14); border-color: rgba(230, 170, 60, 0.4); }
.live-dot.reconnecting::before, .live-dot.connecting::before { background: #e8a93c; animation: live-blink 1s steps(2) infinite; }
@keyframes live-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none !important; } }
.peer {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; flex: none;
  font: 700 11px var(--font); color: #16100b; background: var(--peer);
  border: 2px solid rgba(15, 10, 6, 0.55); cursor: pointer;
}
.peer:hover { box-shadow: 0 0 0 2px var(--peer); }
.peer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.who-me[style*="--peer"] { box-shadow: inset 0 0 0 2px var(--peer); }
.who-also {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  font: 600 10.5px var(--font); color: var(--text-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
}

/* ---- play mode (play.js): the map at the game's own scale, over everything */
#playOverlay { position: fixed; inset: 0; z-index: 9000; background: #000; display: grid; place-items: center; cursor: none; overflow: hidden; }
#playOverlay canvas { image-rendering: crisp-edges; image-rendering: pixelated; display: block; }
/* the pointer: over the game the pack's hand is drawn on the canvas (play.js); over the game's own windows laid on it
   (the chat, the Emporium, the admin's desk, a note...) it is the same hand as the page's pointer (play.js handCursor
   sets --play-hand) -- never the system's arrow, not even on a button or in a text box */
#playOverlay *:not(canvas) { cursor: var(--play-hand, auto) !important; }
#playOverlay canvas { cursor: none !important; }
/* the world's own pixels, enlarged by the browser, with the interface's finer canvas laid over it (play.js) */
#playOverlay .play-view { position: relative; line-height: 0; }
#playOverlay .play-view > canvas.play-ui { position: absolute; left: 0; top: 0; pointer-events: none; }
/* rowing across (play.js cross): the screen dims, then the far shore comes up */
#playOverlay .play-veil { position: fixed; inset: 0; background: #05060d; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
#playOverlay .play-veil.on { opacity: 1; }
/* THE QUESTS: the name box (Marlow asks it), and the Founding Farmers' golden moment */
#playOverlay .play-name { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(340px, 86vw);
  padding: 18px 18px 16px; border-radius: 12px; background: rgba(28, 20, 14, 0.94); border: 2px solid #c9a86a; box-shadow: 0 12px 40px rgba(0,0,0,.55);
  color: #f3e9d2; font: 15px/1.35 system-ui, sans-serif; display: grid; gap: 10px; cursor: auto; }
#playOverlay .play-name-q { font-weight: 600; }
/* the name box in the interface's own look (ui.js askName): the letters go into this box, which is not seen */
.play-name-keys { position: fixed; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
#playOverlay .play-name input { font: 16px system-ui, sans-serif; padding: 9px 11px; border-radius: 8px; border: 1px solid #8a6d44; background: #fff8ea; color: #2b1d10; outline: none; }
#playOverlay .play-name input:focus { border-color: #e0b25a; box-shadow: 0 0 0 3px rgba(224, 178, 90, .35); }
#playOverlay .play-name-err { min-height: 1.2em; color: #ffb4a0; font-size: 13px; }
#playOverlay .play-name button { justify-self: end; font: 600 14px system-ui, sans-serif; padding: 8px 16px; border-radius: 8px; border: 0; background: #e0b25a; color: #2b1d10; cursor: pointer; }
#playOverlay .play-name button:disabled { opacity: .6; cursor: wait; }
#playOverlay .play-name-row { display: flex; justify-content: flex-end; gap: 8px; }
#playOverlay .play-name button.play-name-cancel { background: transparent; color: #f3e9d2; border: 1px solid #8a6d44; }
/* THE GLOBAL CHAT (game/chat.js, 2026-09-27): bottom left over the game, in the interface theme's own colours */
#playOverlay .play-chat { --ch-surface: #f7dbc6; --ch-alt: #d9a88a; --ch-trim: #ab6659; --ch-text: #4b2336; --ch-soft: #714842; --ch-muted: #785e51;
  --ch-gold: #784510; --ch-accent: #ec7c98; --ch-good: #3e7a1e; --ch-ink: #1c0a18; --ch-title: #fff4ea; --ch-pick: #e8c4b0;
  /* (every colour read against what it is on: chat.js chatInks sets these from the theme; these are Blossom's) */
  --ch-name: #78473e; --ch-mark: #f5d0a9; --ch-gold-bg: #eea841; --ch-on-gold: #1c0a18; --ch-on-trim: #fff4ea; --ch-bad: #801426; --ch-state: #5c3b35;
  position: fixed; z-index: 4; width: min(380px, calc(100vw - 24px)); height: 300px; max-height: 60vh; display: flex; flex-direction: column;
  background: var(--ch-surface); color: var(--ch-text); border: 3px solid var(--ch-trim); border-radius: 10px; cursor: auto;
  box-shadow: 0 0 0 2px var(--ch-ink), 0 10px 30px rgba(0, 0, 0, .45); font: 13px/1.35 system-ui, sans-serif; overflow: hidden; }
#playOverlay .play-chat[hidden] { display: none; }
#playOverlay .play-chat .chat-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--ch-alt); border-bottom: 2px solid var(--ch-trim); }
#playOverlay .play-chat .chat-title { font-weight: 800; letter-spacing: .02em; color: var(--ch-title); text-shadow: 1px 0 var(--ch-ink), -1px 0 var(--ch-ink), 0 1px var(--ch-ink), 0 -1px var(--ch-ink); }
#playOverlay .play-chat .chat-tabs { display: inline-flex; gap: 4px; }   /* (the two rooms, 2026-10-28: game/chat.js room) */
#playOverlay .play-chat .chat-tab { position: relative; font: inherit; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: transparent; color: var(--ch-text); border: 1px solid var(--ch-trim); cursor: pointer; opacity: .7; }
#playOverlay .play-chat .chat-tab.on { background: var(--ch-surface); opacity: 1; }
#playOverlay .play-chat .chat-tab.new::after { content: ''; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #eea841; }
#playOverlay .play-chat .chat-list[data-room="town"] .chat-line[data-sc="g"],
#playOverlay .play-chat .chat-list[data-room="global"] .chat-line[data-sc="t"] { display: none; }
#playOverlay .play-chat .chat-town { font-size: 9px; font-weight: 800; padding: 0 4px; margin-right: 4px; border-radius: 4px; background: var(--ch-alt); color: var(--ch-text); border: 1px solid var(--ch-trim); vertical-align: 1px; }
#playOverlay .play-chat .chat-state { flex: 1; font-size: 11px; color: var(--ch-state); }
#playOverlay .play-chat .chat-state.off { color: var(--ch-bad); }
#playOverlay .play-chat button { font: inherit; cursor: pointer; }
#playOverlay .play-chat .chat-x { border: 0; background: transparent; color: var(--ch-text); font-size: 14px; padding: 0 4px; }
#playOverlay .play-chat .chat-list { flex: 1; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
#playOverlay .play-chat .chat-line { position: relative; padding: 2px 6px; border-radius: 6px; word-wrap: break-word; overflow-wrap: anywhere; }
#playOverlay .play-chat .chat-line:hover { background: var(--ch-pick); }
#playOverlay .play-chat .chat-line.sys { background: linear-gradient(90deg, rgba(238, 168, 65, .32), rgba(238, 168, 65, .06)); box-shadow: inset 3px 0 var(--ch-gold-bg); }
#playOverlay .play-chat .chat-line.sys .chat-text { font-weight: 700; color: var(--ch-name); }
#playOverlay .play-chat .chat-sys-star { color: var(--ch-gold-bg); margin-right: 4px; text-shadow: 0 0 1px var(--ch-ink); }
#playOverlay .play-chat .chat-line.atme { background: var(--ch-mark); box-shadow: inset 3px 0 var(--ch-gold-bg); }
#playOverlay .play-chat .chat-line.flash { animation: chatFlash 1.4s ease-out; }
@keyframes chatFlash { 0%, 30% { background: rgba(236, 124, 152, .45); } 100% { background: transparent; } }
#playOverlay .play-chat .chat-time { font-size: 10px; color: var(--ch-muted); margin-right: 5px; font-variant-numeric: tabular-nums; }
#playOverlay .play-chat .chat-name { border: 0; background: none; padding: 0; font-weight: 800; color: var(--ch-name); margin-right: 4px; }
#playOverlay .play-chat .chat-name:hover { text-decoration: underline; }
#playOverlay .play-chat .chat-name.vip { color: #ffcf4a; text-shadow: 0 0 6px rgba(255, 207, 74, 0.45); }   /* a VIP's gold name (rules.js VIP_PERKS) */
#playOverlay .play-chat .chat-line.mine .chat-name, #playOverlay .play-chat .chat-line.mine .chat-text { color: var(--ch-gold); }
#playOverlay .play-chat .chat-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 0 5px; margin-right: 5px; border-radius: 4px; background: #eea841; color: #3b2210; vertical-align: 1px; }
#playOverlay .play-chat .chat-at { font-weight: 700; color: var(--ch-name); }
#playOverlay .play-chat .chat-at.me { color: var(--ch-on-gold); background: var(--ch-gold-bg); border-radius: 4px; padding: 0 3px; }
#playOverlay .play-chat .chat-quote { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0 0 1px 2px; font-size: 11px;
  color: var(--ch-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playOverlay .play-chat .chat-quote-arrow { margin-right: 4px; }
#playOverlay .play-chat .chat-acts { position: absolute; right: 4px; top: 1px; display: none; gap: 3px; }
#playOverlay .play-chat .chat-line:hover .chat-acts { display: flex; }
#playOverlay .play-chat .chat-acts button { font-size: 11px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--ch-trim); background: var(--ch-surface); color: var(--ch-text); box-shadow: 0 1px 0 var(--ch-ink); }
#playOverlay .play-chat .chat-note { font-size: 12px; color: var(--ch-soft); font-style: italic; padding: 2px 6px; }
#playOverlay .play-chat .chat-replying { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; background: var(--ch-pick); border-top: 1px solid var(--ch-trim); }
#playOverlay .play-chat .chat-replying[hidden], #playOverlay .play-chat .chat-suggest[hidden], #playOverlay .play-chat .chat-emojis[hidden] { display: none; }
#playOverlay .play-chat .chat-replying span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playOverlay .play-chat .chat-replying button { border: 0; background: none; color: var(--ch-text); }
/* an admin's Mute on a line (chat.js #muteAsk): for how long */
#playOverlay .play-chat .chat-muting { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; background: rgba(214, 33, 64, .12); border-top: 1px solid var(--ch-trim); }
#playOverlay .play-chat .chat-muting[hidden] { display: none; }
#playOverlay .play-chat .chat-muting button { font-size: 11px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--ch-trim); background: var(--ch-surface); color: var(--ch-text); }
#playOverlay .play-chat .chat-muting button.chat-muting-x { border: 0; background: none; margin-left: auto; }
#playOverlay .play-chat .chat-suggest { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 8px; border-top: 1px solid var(--ch-trim); }
#playOverlay .play-chat .chat-suggest button { font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--ch-trim); background: var(--ch-surface); color: var(--ch-text); }
#playOverlay .play-chat .chat-suggest button.on { background: var(--ch-trim); color: var(--ch-on-trim); }
#playOverlay .play-chat .chat-emojis { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 6px; max-height: 104px; overflow-y: auto; border-top: 1px solid var(--ch-trim); background: var(--ch-alt); }
#playOverlay .play-chat .chat-emojis button { border: 0; background: none; font-size: 18px; line-height: 1; padding: 3px 0; border-radius: 6px; }
#playOverlay .play-chat .chat-emojis button:hover { background: var(--ch-surface); }
#playOverlay .play-chat .chat-form { display: flex; gap: 6px; padding: 7px 8px; border-top: 2px solid var(--ch-trim); background: var(--ch-alt); }
#playOverlay .play-chat .chat-emoji { border: 1px solid var(--ch-trim); background: var(--ch-surface); border-radius: 8px; font-size: 16px; padding: 0 7px; }
#playOverlay .play-chat .chat-input { flex: 1; min-width: 0; font: 14px system-ui, sans-serif; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--ch-trim);
  background: #fffdf8; color: #2b1d10; outline: none; }
#playOverlay .play-chat .chat-input:focus { box-shadow: 0 0 0 2px var(--ch-accent); }
#playOverlay .play-chat .chat-send { border: 0; border-radius: 8px; padding: 0 12px; font-weight: 800; background: var(--ch-trim); color: var(--ch-on-trim); box-shadow: 0 2px 0 var(--ch-ink); }
#playOverlay .play-chat .chat-send:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ch-ink); }
#playOverlay .play-chat-peek { position: fixed; z-index: 3; width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 3px; pointer-events: none;
  font: 13px/1.3 system-ui, sans-serif; }
#playOverlay .play-chat-peek[hidden] { display: none; }
#playOverlay .play-chat-peek .chat-peek-line { align-self: flex-start; max-width: 100%; padding: 3px 9px; border-radius: 8px; background: rgba(28, 10, 24, .62); color: #fff4ea;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .6s; }
#playOverlay .play-chat-peek .chat-peek-line b { color: #ffd35c; }
#playOverlay .play-chat-peek .chat-peek-line.sys { background: rgba(92, 52, 6, .9); color: #ffe7a8; font-weight: 700; box-shadow: inset 0 0 0 1px #eea841; }
#playOverlay .play-chat-peek .chat-peek-line.atme { background: rgba(184, 106, 24, .85); }
#playOverlay .play-chat-peek .chat-peek-line.out { opacity: 0; }
/* THE ADMIN'S DESK (game/admin.js, 2026-09-27): an admin's own window -- parchment and gold */
#playOverlay .play-admin { position: fixed; z-index: 6; right: 16px; top: 50%; transform: translateY(-50%); width: min(460px, calc(100vw - 32px)); max-height: 86vh;
  display: flex; flex-direction: column; background: #f7dbc6; color: #4b2336; border: 3px solid #b86a18; border-radius: 10px; cursor: auto;
  box-shadow: 0 0 0 2px #1c0a18, 0 14px 40px rgba(0, 0, 0, .5); font: 13px/1.35 system-ui, sans-serif; overflow: hidden; }
#playOverlay .play-admin[hidden] { display: none; }
#playOverlay .play-admin button, #playOverlay .play-admin input, #playOverlay .play-admin select { font: inherit; }
#playOverlay .play-admin .adm-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; background: #eea841; border-bottom: 2px solid #b86a18; }
#playOverlay .play-admin .adm-head b { font-size: 15px; color: #3b2210; }
#playOverlay .play-admin .adm-sub { flex: 1; font-size: 11px; color: #5a3a14; }
#playOverlay .play-admin .adm-x { border: 0; background: none; color: #3b2210; font-size: 15px; cursor: pointer; }
/* (eight tabs: they wrap onto a second row rather than run off the desk -- 2026-10-01, the Founders tab pushed Sky out) */
#playOverlay .play-admin .adm-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px 0; background: #d9a88a; }
#playOverlay .play-admin .adm-tab { border: 2px solid #ab6659; border-bottom: 0; border-radius: 8px 8px 0 0; background: #e8bfa5; color: #4b2336; padding: 4px 10px; font-weight: 700; cursor: pointer; }
#playOverlay .play-admin textarea { width: 100%; min-height: 96px; resize: vertical; padding: 6px 8px; border-radius: 7px; border: 1px solid #ab6659; background: #fffdf8; color: #2b1d10;
  font: 12px/1.4 ui-monospace, Consolas, monospace; box-sizing: border-box; margin-bottom: 5px; }
#playOverlay .play-admin .adm-tab.on { background: #f7dbc6; }
#playOverlay .play-admin .adm-body { overflow-y: auto; padding: 4px 12px 10px; }
#playOverlay .play-admin .adm-page[hidden] { display: none; }
#playOverlay .play-admin h4 { margin: 10px 0 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #ab6659; }
#playOverlay .play-admin .adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 5px; }
#playOverlay .play-admin .adm-row label { display: flex; align-items: center; gap: 4px; }
#playOverlay .play-admin input, #playOverlay .play-admin select { padding: 5px 7px; border-radius: 7px; border: 1px solid #ab6659; background: #fffdf8; color: #2b1d10; min-width: 0; }
#playOverlay .play-admin input[type=number] { width: 104px; }
#playOverlay .play-admin .adm-n { width: 70px !important; }
#playOverlay .play-admin .adm-item, #playOverlay .play-admin .adm-quest { flex: 1; min-width: 150px; }
#playOverlay .play-admin .adm-row > input:not([type]) { flex: 1; }
#playOverlay .play-admin .adm-btn { border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 800; background: #ab6659; color: #fff4ea; box-shadow: 0 2px 0 #1c0a18; cursor: pointer; }
#playOverlay .play-admin .adm-btn.gold { background: #eea841; color: #3b2210; }
#playOverlay .play-admin .adm-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #1c0a18; }
/* an admin's dungeon levels (game/dungeonpicker.js, 2026-11-02): a bar on any dungeon level, the whole list behind it */
#playOverlay .dgp-bar { position: fixed; z-index: 6; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; background: #f7dbc6; color: #4b2336; border: 3px solid #b86a18; border-radius: 10px; white-space: nowrap; cursor: auto;
  box-shadow: 0 0 0 2px #1c0a18, 0 8px 24px rgba(0, 0, 0, .45); font: 13px/1.2 system-ui, sans-serif; }
#playOverlay .dgp-bar b { font-size: 14px; color: #3b2210; }
#playOverlay .dgp-bar .dgp-name { font-size: 11px; color: #6a4030; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
#playOverlay .dgp-btn { border: 0; border-radius: 7px; padding: 4px 9px; font: inherit; font-weight: 800; background: #ab6659; color: #fff4ea; box-shadow: 0 2px 0 #1c0a18; cursor: pointer; }
#playOverlay .dgp-btn.gold { background: #eea841; color: #3b2210; }
#playOverlay .dgp-btn.on { background: #4f8a4a; color: #fff; }
#playOverlay .dgp-btn.here { background: #4b2336; color: #ffe6c8; outline: 2px solid #eea841; }
#playOverlay .dgp-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #1c0a18; }
#playOverlay .dgp { position: fixed; z-index: 7; top: 56px; left: 50%; transform: translateX(-50%); width: min(700px, calc(100vw - 24px)); max-height: calc(100vh - 76px);
  overflow-y: auto; background: #f7dbc6; color: #4b2336; border: 3px solid #b86a18; border-radius: 10px; cursor: auto;
  box-shadow: 0 0 0 2px #1c0a18, 0 14px 40px rgba(0, 0, 0, .5); font: 13px/1.35 system-ui, sans-serif; }
#playOverlay .dgp-head { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #eea841; border-bottom: 2px solid #b86a18; }
#playOverlay .dgp-head b { flex: 1; font-size: 15px; color: #3b2210; }
#playOverlay .dgp-x { border: 0; background: none; color: #3b2210; font-size: 15px; cursor: pointer; }
#playOverlay .dgp-note { margin: 6px 12px 0; font-size: 11px; color: #6a4030; }
/* (the three dungeons side by side, every level on one screen; one under another on a narrow one) */
#playOverlay .dgp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px; padding: 2px 12px 12px; }
#playOverlay .dgp-tier h4 { margin: 8px 0 6px; padding-bottom: 3px; font-size: 14px; color: #3b2210; border-bottom: 3px solid var(--dgp-tier, #ab6659); }
#playOverlay .dgp-tier h4 small { display: block; font-size: 11px; font-weight: 600; color: #6a4030; }
#playOverlay .dgp-tier.t-h { --dgp-tier: #3f6f8f; }
#playOverlay .dgp-tier.t-n { --dgp-tier: #9a2a2a; }
#playOverlay .dgp-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
#playOverlay .dgp-row span { width: 50px; font-size: 12px; color: #6a4030; }
#playOverlay .dgp-row .dgp-btn { min-width: 34px; }
/* (a skill's level card comes down below the bar while it is up, never over it: game/skillbook.js LevelUpCard) */
#playOverlay:has(> .dgp-bar) .lb.lvup { inset: 60px 0 auto; }
#playOverlay .play-admin .adm-list { display: grid; gap: 3px; margin: 6px 0; max-height: 170px; overflow-y: auto; }
#playOverlay .play-admin .adm-who { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid #d9a88a; border-radius: 7px; background: #fff4ea; padding: 5px 8px; cursor: pointer; color: inherit; }
#playOverlay .play-admin .adm-who:hover { background: #fff; }
#playOverlay .play-admin .adm-w { color: #8d5a52; font-size: 11px; font-family: ui-monospace, monospace; }
#playOverlay .play-admin .adm-tag { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; background: #eea841; color: #3b2210; border-radius: 4px; padding: 0 5px; }
#playOverlay .play-admin .adm-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8907c; flex: none; }
#playOverlay .play-admin .adm-dot.on { background: #3e9a1e; box-shadow: 0 0 0 2px rgba(62, 154, 30, .25); }
#playOverlay .play-admin .adm-dot.warn { background: #e0a020; }
#playOverlay .play-admin .adm-dot.bad { background: #c8342a; box-shadow: 0 0 0 2px rgba(200, 52, 42, .25); }
#playOverlay .play-admin .adm-loot .adm-who { flex-wrap: wrap; row-gap: 2px; }
#playOverlay .play-admin .adm-card:empty { display: none; }
#playOverlay .play-admin .adm-card { border-top: 2px dashed #d9a88a; margin-top: 8px; padding-top: 6px; }
#playOverlay .play-admin .adm-card-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#playOverlay .play-admin .adm-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 5px 0; font-size: 12px; color: #6d4540; }
#playOverlay .play-admin .adm-facts span { background: #fff4ea; border-radius: 6px; padding: 1px 7px; }
#playOverlay .play-admin .adm-note { margin: 0 0 6px; font-size: 12px; color: #8d5a52; }
#playOverlay .play-admin .adm-note.bad { color: #d62140; font-weight: 700; }
#playOverlay .play-admin .adm-mono { margin: 0 0 6px; font: 12px ui-monospace, monospace; color: #4b2336; word-break: break-all; background: #fff4ea; border-radius: 6px; padding: 3px 7px; }
#playOverlay .play-admin .adm-none { font-size: 12px; color: #8d5a52; padding: 4px; }
/* the Chat tab's words (admin.js #chatPage) */
#playOverlay .play-admin .adm-words { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#playOverlay .play-admin .adm-word { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 9px; border-radius: 99px; background: #fff4ea; border: 1px solid #d9a88a; font-size: 12px; }
#playOverlay .play-admin .adm-word button { border: 0; background: none; color: #ab6659; font-size: 11px; padding: 0 3px; }
#playOverlay .play-admin .adm-msg { min-height: 1.4em; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #3e7a1e; background: #fff4ea; border-top: 2px solid #d9a88a; }
#playOverlay .play-admin .adm-msg.bad { color: #d62140; }
/* THE AVERYN EMPORIUM (game/emporium.js): night blue and gold, a crystal that glows, cards that catch the light */
#playOverlay .emp { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; cursor: auto; outline: none; padding: 16px;
  background: radial-gradient(ellipse at 50% 20%, rgba(40, 52, 120, .55), rgba(4, 6, 18, .82) 70%); backdrop-filter: blur(3px); animation: empFade .25s ease-out; }
@keyframes empFade { from { opacity: 0; } to { opacity: 1; } }
#playOverlay .emp-card { position: relative; width: min(880px, 96vw); max-height: 92vh; overflow: auto; border-radius: 16px; padding: 22px 26px 16px;
  color: #efe7d2; font: 14px/1.4 system-ui, 'Segoe UI', sans-serif; animation: empRise .35s cubic-bezier(.2, .9, .3, 1.2);
  background: radial-gradient(ellipse at 50% -10%, #33397f 0%, #1a1d4c 42%, #0d0f2a 100%);
  box-shadow: 0 0 0 1px rgba(255, 214, 128, .55), 0 0 0 4px #0d0f2a, 0 0 0 5px rgba(255, 214, 128, .35), 0 30px 80px rgba(0, 0, 0, .7), 0 0 90px rgba(110, 150, 255, .25); }
@keyframes empRise { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
#playOverlay .emp-glow { position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: radial-gradient(circle at 12% 8%, rgba(120, 200, 255, .18), transparent 35%), radial-gradient(circle at 90% 100%, rgba(255, 200, 110, .10), transparent 40%); }
#playOverlay .emp-head { position: relative; display: flex; align-items: center; gap: 16px; }
#playOverlay .emp-crest { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 210, 255, .35), rgba(60, 80, 180, .15) 60%, transparent 70%); animation: empFloat 3.6s ease-in-out infinite; }
#playOverlay .emp-crest img { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(130, 210, 255, .9)) drop-shadow(0 0 22px rgba(90, 150, 255, .6)); }
@keyframes empFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#playOverlay .emp-titles { flex: 1; min-width: 0; }
#playOverlay .emp-kicker { font: 600 11px/1 system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #9fb4ff; opacity: .85; }
#playOverlay .emp-title { margin: 6px 0 2px; font: 700 30px/1.05 Georgia, 'Times New Roman', serif; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff3cf 0%, #ffd77a 45%, #d9a441 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60, 30, 0, .6)); }
#playOverlay .emp-sub { font: italic 14px/1.3 Georgia, serif; color: #c7c2e6; }
#playOverlay .emp-purse { display: grid; gap: 6px; }
#playOverlay .emp-coin { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; min-width: 120px;
  background: linear-gradient(180deg, rgba(20, 24, 70, .9), rgba(10, 12, 36, .9)); box-shadow: inset 0 0 0 1px rgba(150, 200, 255, .35); }
#playOverlay .emp-coin.gold { box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .4); }
#playOverlay .emp-coin img { width: 24px; height: 24px; image-rendering: pixelated; }
#playOverlay .emp-sprite { display: inline-block; flex: none; background-repeat: no-repeat; image-rendering: pixelated; }
#playOverlay .emp-coin .emp-sprite { margin: 0 0 0 2px; }
#playOverlay .emp-coin b { font: 700 15px/1 system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#playOverlay .emp-x { position: absolute; top: -8px; right: -12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 214, 128, .6);
  background: rgba(10, 12, 36, .8); color: #ffd77a; font: 400 22px/1 system-ui, sans-serif; cursor: pointer; }
#playOverlay .emp-x:hover { background: #ffd77a; color: #1a1d4c; }
#playOverlay .emp-tabs { position: relative; display: flex; gap: 8px; margin: 18px 0 14px; border-bottom: 1px solid rgba(255, 214, 128, .22); padding-bottom: 12px; }
#playOverlay .emp-tab { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255, 214, 128, .35); background: transparent; color: #e9dfc4;
  font: 600 13px/1 system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; }
#playOverlay .emp-tab:hover { border-color: #ffd77a; }
#playOverlay .emp-tab.on { background: linear-gradient(180deg, #ffe39a, #e0a84a); color: #2a1a06; border-color: transparent; box-shadow: 0 4px 14px rgba(255, 190, 80, .35); }
#playOverlay .emp-note { margin-bottom: 12px; padding: 9px 14px; border-radius: 10px; background: rgba(120, 150, 255, .12); color: #cfd8ff; font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(150, 180, 255, .25); }
#playOverlay .emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
#playOverlay .emp-grid.four { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
#playOverlay .emp-item { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 12px 12px;
  border-radius: 14px; background: linear-gradient(165deg, #252a66 0%, #171a45 55%, #11133a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .28), 0 10px 24px rgba(0, 0, 0, .35); transition: transform .15s ease, box-shadow .15s ease; }
#playOverlay .emp-item:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .7), 0 16px 34px rgba(0, 0, 0, .45), 0 0 26px rgba(120, 170, 255, .25); }
#playOverlay .emp-item.featured { background: linear-gradient(165deg, #34306e 0%, #1f1d52 55%, #15133d 100%); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .6), 0 12px 30px rgba(0, 0, 0, .45); }
#playOverlay .emp-item.featured::after { content: ''; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 200, .16) 50%, transparent 58%); animation: empShine 4.5s ease-in-out infinite; }
@keyframes empShine { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
#playOverlay .emp-ribbon { position: absolute; top: 20px; right: -44px; width: 160px; transform: rotate(35deg); padding: 3px 0; z-index: 1; text-align: center;
  background: linear-gradient(180deg, #b8a4ff, #7d63e0); color: #fff; font: 700 9px/1.3 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
#playOverlay .emp-ribbon.best { background: linear-gradient(180deg, #ffe39a, #e0a84a); color: #3a2206; }
#playOverlay .emp-art { position: relative; height: 72px; width: 100%; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 6px; }
#playOverlay .emp-art img { width: 40px; height: 40px; image-rendering: pixelated; margin: 0 calc(-14px + 4px * (5 - var(--n)));
  transform: translateY(calc(-8px * (var(--i) - (var(--n) - 1) / 2) * (var(--i) - (var(--n) - 1) / 2) / 3)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 12deg));
  filter: drop-shadow(0 0 8px rgba(120, 200, 255, .75)); }
#playOverlay .emp-art.stew { align-items: center; }
#playOverlay .emp-bowl { filter: drop-shadow(0 0 12px rgba(150, 190, 255, .55)); animation: empFloat 3.6s ease-in-out infinite; }
#playOverlay .emp-times { position: absolute; right: 22%; bottom: 2px; font: 800 18px/1 Georgia, serif; color: #ffd77a; text-shadow: 0 2px 0 #2a1a06; }
#playOverlay .emp-amt { font: 700 26px/1 Georgia, serif; color: #fff4d6; font-variant-numeric: tabular-nums; }
#playOverlay .emp-amt.small { font-size: 17px; line-height: 1.2; }
#playOverlay .emp-unit { margin-top: 3px; font-size: 12px; color: #a9b5e8; letter-spacing: .04em; }
#playOverlay .emp-bonus { margin: 8px 0 12px; padding: 3px 10px; border-radius: 999px; font: 700 11px/1.3 system-ui, sans-serif; color: #7ff0b8;
  background: rgba(60, 200, 140, .14); box-shadow: inset 0 0 0 1px rgba(110, 230, 170, .35); }
#playOverlay .emp-bonus.plain { color: #c9c3e6; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-weight: 600; }
/* the $AVYN every pack brings (2026-09-28): ten a dollar -- on the pack, a note under the shelf, what came at the till */
#playOverlay .emp-avyn { display: flex; align-items: center; gap: 5px; margin: -4px 0 12px; font: 700 12px/1.2 system-ui, sans-serif; color: #ffd77a;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
#playOverlay .emp-avyn img, #playOverlay .emp-avyn-note img, #playOverlay .emp-check-avyn img { width: 16px; height: 16px; flex: none; image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(255, 200, 90, .55)); }
#playOverlay .emp-avyn-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; padding: 9px 14px; border-radius: 10px;
  background: rgba(255, 200, 90, .08); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .22); color: #d9cfb2; font-size: 12px; line-height: 1.5; }
#playOverlay .emp-avyn-note b { color: #ffe39a; }
#playOverlay .emp-check-avyn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font: 600 13px/1.3 system-ui, sans-serif; color: #d9cfb2; }
#playOverlay .emp-check-avyn.got { margin: 0 0 8px; font: 700 18px/1.3 system-ui, sans-serif; color: #ffe39a; font-variant-numeric: tabular-nums; }
#playOverlay .emp-check-avyn.got img { width: 22px; height: 22px; }
#playOverlay .emp-buy { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 10px 8px; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #ffe7a6 0%, #f2bd57 55%, #d99a34 100%); color: #2a1a06; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #8a5a14, 0 8px 18px rgba(255, 180, 60, .25); transition: transform .08s ease, filter .15s ease; }
#playOverlay .emp-buy:hover { filter: brightness(1.07); }
#playOverlay .emp-buy:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 #8a5a14; }
#playOverlay .emp-buy:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
#playOverlay .emp-buy.shards { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
#playOverlay .emp-buy.shards img { width: 20px; height: 20px; image-rendering: pixelated; }
#playOverlay .emp-buy.small { width: auto; padding: 9px 18px; }
#playOverlay .emp-price { font: 800 17px/1.1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#playOverlay .emp-eth { width: 100%; font: 600 11px/1.2 system-ui, sans-serif; opacity: .75; }
#playOverlay .emp-foot { position: relative; margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(255, 214, 128, .18); text-align: center; font-size: 12px; color: #9aa3cf; }
#playOverlay .emp-check { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; background: rgba(8, 10, 30, .78); backdrop-filter: blur(2px); z-index: 2; }
#playOverlay .emp-check-card { width: min(380px, 90%); padding: 22px 24px; border-radius: 14px; text-align: center;
  background: linear-gradient(170deg, #2b3074, #15183f); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .5), 0 20px 50px rgba(0, 0, 0, .6); }
#playOverlay .emp-check-title { font: 700 21px/1.2 Georgia, serif; color: #ffe39a; }
#playOverlay .emp-check-sum { margin-top: 6px; font: 700 18px/1.3 system-ui, sans-serif; color: #fff; }
#playOverlay .emp-check-sum small { color: #a9b5e8; font-weight: 600; }
#playOverlay .emp-steps { list-style: none; margin: 16px 0 6px; padding: 0; text-align: left; display: grid; gap: 8px; }
#playOverlay .emp-steps li { display: flex; align-items: center; gap: 10px; color: #8d95c4; }
#playOverlay .emp-steps li i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 12px/1 system-ui; font-style: normal;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
#playOverlay .emp-steps li.now { color: #fff; }
#playOverlay .emp-steps li.now i { background: #ffd77a; color: #2a1a06; box-shadow: 0 0 0 4px rgba(255, 215, 122, .2); animation: empPulse 1.2s ease-in-out infinite; }
#playOverlay .emp-steps li.done { color: #9fe8c3; }
#playOverlay .emp-steps li.done i { background: #4cc98d; color: #062015; }
@keyframes empPulse { 50% { box-shadow: 0 0 0 8px rgba(255, 215, 122, 0); } }
#playOverlay .emp-err { margin: 10px 0 4px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 100, 90, .14); color: #ffb3a8; font-size: 13px; }
#playOverlay .emp-tx { display: inline-block; margin-top: 8px; color: #9fb4ff; font-size: 12px; }
#playOverlay .emp-check-keys { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
#playOverlay .emp-burst { position: relative; height: 104px; margin: 10px 0 4px; }
#playOverlay .emp-burst img { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px; image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(130, 210, 255, .9)); animation: empBurst 1.1s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--j) * 70ms);
  --a: calc(var(--j) * 72deg - 90deg); }
@keyframes empBurst { from { transform: rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))) scale(.3); opacity: 0; }
  to { transform: rotate(var(--a)) translateX(38px) rotate(calc(-1 * var(--a))) scale(1); opacity: 1; } }
/* bringing Averyn Shards in (2026-09-30, emporium.js depositPanel): AVS from the player's wallet, burned by the token */
#playOverlay .emp-deposit { position: relative; overflow: hidden; display: grid; grid-template-columns: 120px 1fr; gap: 10px 18px; align-items: center; padding: 18px 20px;
  border-radius: 14px; background: linear-gradient(165deg, #34306e 0%, #1f1d52 55%, #15133d 100%); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .6), 0 12px 30px rgba(0, 0, 0, .45); }
#playOverlay .emp-deposit .emp-art { grid-row: span 3; margin: 0; }
#playOverlay .emp-dep-text { display: grid; gap: 4px; justify-items: start; text-align: left; }
#playOverlay .emp-dep-text .emp-unit { line-height: 1.45; letter-spacing: .02em; }
#playOverlay .emp-dep-text .emp-bonus { margin: 4px 0 0; }
#playOverlay .emp-dep-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#playOverlay .emp-amount { width: 150px; max-width: 100%; padding: 10px 12px; border-radius: 10px; border: 0; background: rgba(8, 10, 30, .75); color: #fff4d6;
  font: 700 17px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .45); }
#playOverlay .emp-amount:focus { outline: none; box-shadow: inset 0 0 0 2px #ffd77a; }
#playOverlay .emp-dep-row .emp-buy { margin: 0; width: auto; flex-direction: row; gap: 8px; padding: 10px 20px; }
#playOverlay .emp-dep-row .emp-buy img { width: 20px; height: 20px; image-rendering: pixelated; }
#playOverlay .emp-buy.ghost { background: transparent; color: #ffe39a; box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .55); }
#playOverlay .emp-link { justify-self: start; color: #9fd0ff; font: 600 13px/1.3 system-ui, sans-serif; text-decoration: none; border-bottom: 1px dashed rgba(159, 208, 255, .6); }
#playOverlay .emp-link:hover { color: #fff; }
#playOverlay .emp-deposit + .emp-packs { margin-top: 16px; }
/* buying AVS in the Emporium (emporium.js buyPanel): the amount, ETH or USDG, what it brings; then bringing them in */
#playOverlay .emp-deposit + .emp-deposit { margin-top: 14px; }
#playOverlay .emp-buyavs .emp-art { grid-row: 1 / span 6; }
#playOverlay .emp-buyavs > :not(.emp-art) { grid-column: 2; }
#playOverlay .emp-bring { grid-template-columns: 1fr; }
#playOverlay .emp-coins { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(8, 10, 30, .75); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .35); }
#playOverlay .emp-coinpick { padding: 8px 15px; border: 0; border-radius: 999px; background: transparent; color: #e9dfc4; font: 700 13px/1 system-ui, sans-serif; cursor: pointer; }
#playOverlay .emp-coinpick.on { background: linear-gradient(180deg, #ffe39a, #e0a84a); color: #2a1a06; }
#playOverlay .emp-coinpick:disabled { opacity: .5; cursor: not-allowed; }
#playOverlay .emp-quote { min-height: 21px; font: 600 14px/1.5 system-ui, sans-serif; color: #dfe6ff; }
#playOverlay .emp-quote b { color: #fff4d6; font-variant-numeric: tabular-nums; }
#playOverlay .emp-quote small { margin-left: 10px; color: #a9b5e8; font-weight: 600; }
#playOverlay .emp-quote-err { color: #ffb3a8; }
#playOverlay .emp-have { font-size: 12px; color: #a9b5e8; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { #playOverlay .emp-buyavs .emp-art { grid-row: auto; } #playOverlay .emp-buyavs > :not(.emp-art) { grid-column: auto; } }
/* a phone's wallet app (emporium.js bringInPhone): the apps to pick, what to do there, the tap that opens it to confirm */
#playOverlay .emp-wait { margin: 12px 0 4px; padding: 9px 12px; border-radius: 10px; background: rgba(120, 150, 255, .12); color: #dfe6ff; font-size: 13px; line-height: 1.45;
  box-shadow: inset 0 0 0 1px rgba(150, 180, 255, .25); }
#playOverlay .emp-apps { display: grid; gap: 8px; margin: 12px 0 4px; }
#playOverlay .emp-apps-note { font-size: 12px; color: #a9b5e8; }
#playOverlay .emp-app { display: block; padding: 11px 14px; border-radius: 10px; text-decoration: none; text-align: left; font: 700 15px/1.2 system-ui, sans-serif; color: #fff4d6;
  background: linear-gradient(180deg, rgba(40, 46, 110, .95), rgba(22, 25, 66, .95)); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .45); }
#playOverlay .emp-app:active { transform: translateY(1px); }
#playOverlay .emp-confirm { display: inline-flex; margin-top: 12px; text-decoration: none; }
/* (a phone turned sideways is short: the steps' card scrolls, and sits tighter) */
#playOverlay .emp-check-card { max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 520px) {
  #playOverlay .emp-check-card { padding: 14px 18px; }
  #playOverlay .emp-check-title { font-size: 18px; }
  #playOverlay .emp-steps { margin: 10px 0 4px; gap: 5px; font-size: 13px; }
  #playOverlay .emp-steps li i { width: 20px; height: 20px; }
  #playOverlay .emp-apps { gap: 6px; margin-top: 8px; }
  #playOverlay .emp-app { padding: 8px 12px; font-size: 14px; }
  #playOverlay .emp-wait { margin-top: 8px; padding: 7px 10px; }
}
@media (max-width: 600px) { #playOverlay .emp-deposit { grid-template-columns: 1fr; } #playOverlay .emp-deposit .emp-art { grid-row: auto; height: 56px; } }
@media (max-width: 600px) { #playOverlay .emp-card { padding: 16px 14px 12px; } #playOverlay .emp-title { font-size: 22px; } #playOverlay .emp-head { flex-wrap: wrap; } #playOverlay .emp-crest { width: 56px; height: 56px; } #playOverlay .emp-crest img { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { #playOverlay .emp *, #playOverlay .emp { animation: none !important; transition: none !important; } }
/* THE FOUNDING FARMERS WINDOW (game/foundersui.js): the Emporium's card, each farmer standing on its rank's colour */
#playOverlay .ffd-card { width: min(720px, 96vw); }
#playOverlay .ffd-crest { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 128, .3), rgba(180, 120, 40, .12) 60%, transparent 70%); animation: empFloat 3.6s ease-in-out infinite; }
#playOverlay .ffd-crest-pic { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(255, 214, 128, .6)); }
#playOverlay .ffd-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
/* (Your perks: every perk now, one to a line -- game/foundersui.js perksRow) */
#playOverlay .ffd-perk-list { margin: 0 0 12px; padding: 4px 14px 4px 32px; color: #e8ecff; font-size: 13px; line-height: 1.65; }
#playOverlay .ffd-perk-list li::marker { color: #f2c94c; }
#playOverlay .ffd-item { gap: 6px; }
#playOverlay .ffd-pic { width: 128px; height: 128px; image-rendering: pixelated; border-radius: 12px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rank) 38%, transparent), transparent 70%); }
#playOverlay .ffd-name { font: 700 15px/1.2 Georgia, serif; color: #fff4d6; }
#playOverlay .ffd-rank { font: 700 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--rank); margin-bottom: 4px; }
#playOverlay .ffd-item .emp-tab[disabled] { cursor: default; }

/* THE PREVIEWS (game/ridewheel.js, 2026-10-23): the Founders' horse with you on it, the pet walking -- seen before taken */
#playOverlay .ffd-preview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
#playOverlay .ffd-preview-pick { display: grid; gap: 8px; justify-items: start; }
#playOverlay .ffd-ride, #playOverlay .ffd-pet { width: 120px; height: 120px; flex: none; image-rendering: pixelated; border-radius: 12px;
  background: radial-gradient(circle at 50% 60%, rgba(140, 210, 255, .22), rgba(10, 12, 36, .6) 70%); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .3); }
#playOverlay .ffd-coat { align-self: center; padding: 0 10px; font-size: 13px; color: #cfd8ff; white-space: nowrap; }
/* THE RIDE & PETS WHEEL (game/ridewheel.js): the mounts round the top, the pets round the bottom, the one pointed at large in the middle */
#playOverlay .rw { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; outline: none; cursor: auto;
  background: radial-gradient(ellipse at 50% 50%, rgba(40, 52, 120, .45), rgba(4, 6, 18, .78) 70%); animation: empFade .2s ease-out; }
#playOverlay .rw-card { display: grid; justify-items: center; gap: 6px; color: #efe7d2; font: 13px/1.3 system-ui, 'Segoe UI', sans-serif; }
#playOverlay .rw-head { font: 700 22px/1 Georgia, serif; background: linear-gradient(180deg, #fff3cf, #ffd77a 45%, #d9a441); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 2px 0 rgba(60, 30, 0, .6)); }
#playOverlay .rw-ring { position: relative; width: min(470px, 84vmin); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 29, 76, .96) 0 31%, rgba(13, 15, 42, .92) 32% 100%);
  box-shadow: 0 0 0 1px rgba(255, 214, 128, .55), 0 0 0 4px #0d0f2a, 0 0 0 5px rgba(255, 214, 128, .35), 0 24px 60px rgba(0, 0, 0, .6), 0 0 80px rgba(110, 150, 255, .25); }
#playOverlay .rw-item { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; padding: 3px 6px 5px; border: 0; border-radius: 14px; cursor: pointer;
  background: rgba(20, 24, 70, .88); box-shadow: inset 0 0 0 1px rgba(150, 200, 255, .3); color: #dcd6f2; font: 600 11px/1.1 system-ui, sans-serif; touch-action: manipulation; }
#playOverlay .rw-item:hover, #playOverlay .rw-item.on { background: linear-gradient(180deg, #ffe7a3, #d9a441); color: #2a1800; box-shadow: 0 0 18px rgba(255, 215, 120, .6); }
#playOverlay .rw-icon { width: 80px; height: 80px; image-rendering: pixelated; }
#playOverlay .rw-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44%; display: grid; justify-items: center; gap: 3px; text-align: center; }
#playOverlay .rw-big { width: 120px; height: 120px; image-rendering: pixelated; }
#playOverlay .rw-title { font: 700 16px/1.1 Georgia, serif; color: #ffe39a; }
#playOverlay .rw-what { font-size: 11px; color: #c7c2e6; min-height: 2.6em; }
#playOverlay .rw-bar { width: 70%; height: 6px; border-radius: 999px; background: rgba(8, 10, 30, .85); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .35); overflow: hidden; }
#playOverlay .rw-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #7fd36a, #e6d36a); }
#playOverlay .rw-card > .rw-small { margin-top: 2px; }
#playOverlay .picks-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
#playOverlay .picks-item { cursor: pointer; padding: 8px 6px; }
#playOverlay .picks-pic { width: 80px; height: 80px; image-rendering: pixelated; }
#playOverlay .picks-name { font: 700 18px/1.1 Georgia, serif; color: #ffe39a; }
/* THE FARMER'S GENDER (game/genderpick.js, 2026-10-23): the farmer both ways, walking, side by side -- chosen once */
#playOverlay .gender-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin: 0 auto 10px; }
#playOverlay .gender-item { display: grid; justify-items: center; gap: 8px; padding: 12px 8px; cursor: default; }
/* (THE TOWNS, 2026-10-28: game/towns.js -- one card a town, its count and how full it is) */
#playOverlay .town-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 820px; margin: 16px auto 10px; }   /* (2026-10-28: a gap under the words, which touched the cards' tops: there are no tabs here to space them) */
#playOverlay .town-item { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; cursor: default; }
#playOverlay .town-item.full { opacity: .55; }
#playOverlay .town-badge { font: 800 22px/1 Georgia, serif; color: #2b1a10; background: #ffd75a; border-radius: 8px; padding: 6px 10px; box-shadow: 0 2px 0 #8a5a1a; }
#playOverlay .town-count { font-size: 13px; color: #f3e6c8; }
#playOverlay .town-bar { width: 100%; max-width: 140px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
#playOverlay .town-bar i { display: block; height: 100%; background: #9be37a; }
#playOverlay .towns .emp-note.why { color: #ffb4a0; }
/* (2026-10-28, a phone held sideways is about 375 tall: the five towns in one row of smaller cards, so all five and the note
    show without scrolling the picker, the first window a new sign-in meets) */
@media (max-height: 500px) { #playOverlay .town-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; } #playOverlay .town-item { gap: 4px; padding: 8px 6px; } #playOverlay .town-badge { font-size: 16px; padding: 4px 8px; } #playOverlay .town-item .picks-name { font-size: 15px; } #playOverlay .town-item .emp-tab { padding: 6px 10px; } }
#playOverlay .rw-go { border: 0; border-radius: 999px; padding: 6px 14px; font: 700 12px/1 system-ui, sans-serif; cursor: pointer; color: #2a1800;
  background: linear-gradient(180deg, #ffe7a3, #d9a441); box-shadow: 0 2px 0 #7a4e10; touch-action: manipulation; }
#playOverlay .rw-go:disabled { opacity: .55; cursor: default; }
#playOverlay .rw-extra { display: flex; gap: 6px; }
#playOverlay .rw-small { border: 0; border-radius: 999px; padding: 4px 10px; font: 600 11px/1 system-ui, sans-serif; cursor: pointer; color: #efe7d2;
  background: rgba(60, 70, 150, .9); box-shadow: inset 0 0 0 1px rgba(150, 200, 255, .4); }
#playOverlay .rw-hint { font-size: 11px; color: #9fb4ff; opacity: .9; }
@media (max-height: 500px) {
  #playOverlay .rw { padding: 4px; } #playOverlay .rw-card { gap: 2px; } #playOverlay .rw-head { font-size: 15px; }
  #playOverlay .rw-ring { width: min(340px, 80vmin); } #playOverlay .rw-icon { width: 40px; height: 40px; } #playOverlay .rw-item { font-size: 10px; padding: 2px 4px 3px; }
  #playOverlay .rw-what, #playOverlay .rw-hint { display: none; } #playOverlay .rw-title { font-size: 13px; } #playOverlay .rw-big { width: 80px; height: 80px; }
}
#playOverlay .ffd-self { display: flex; justify-content: center; margin-top: 16px; }
/* THE ANIMALS' PENS (game/animals.js PenWindow, 2026-10-22): the Emporium's card; a row for each of your animals, how it
   is in its colour (hungry amber, fed blue, ready green), and the pen's buttons under them */
#playOverlay .pen-card { width: min(640px, 96vw); }
#playOverlay .pen-crest { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 128, .28), rgba(180, 120, 40, .1) 60%, transparent 70%); }
#playOverlay .pen-pic { image-rendering: pixelated; flex: none; }
#playOverlay .pen-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#playOverlay .pen-row { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .14); }
#playOverlay .pen-name { font: 700 14px/1.2 Georgia, serif; color: #fff4d6; }
#playOverlay .pen-state { font-size: 13px; color: #cfd8ff; }
#playOverlay .pen-state.hungry { color: #ffc56a; }
#playOverlay .pen-state.ready { color: #8ff0a4; font-weight: 700; }
#playOverlay .pen-age { font-size: 12px; color: #a9a3c4; }
#playOverlay .pen-row .emp-tab { padding: 5px 12px; font-size: 12px; }
#playOverlay .pen-row .emp-tab[disabled] { opacity: .45; cursor: default; }
#playOverlay .pen-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#playOverlay .pen-acts .emp-buy { margin: 0; width: auto; flex-direction: row; gap: 8px; align-items: center; }
#playOverlay .pen-acts .emp-buy[disabled] { opacity: .5; cursor: default; }
#playOverlay .pen-said { background: rgba(255, 214, 128, .14); color: #ffe7b0; }
/* the Feed Bin, under the pen's buttons (2026-11-01): filled once a day, the animals eat from it on their own */
#playOverlay .pen-bin { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px;
  border-radius: 10px; background: rgba(255, 196, 92, .08); box-shadow: inset 0 0 0 1px rgba(255, 196, 92, .28); }
#playOverlay .pen-bin > .pen-pic { grid-row: span 2; }
#playOverlay .pen-bin-name { font: 700 14px/1.2 Georgia, serif; color: #fff4d6; }
#playOverlay .pen-bin-state { font-size: 13px; color: #ffd98a; }
#playOverlay .pen-bin-state.off { color: #ffc56a; }
#playOverlay .pen-bin-left { grid-column: 2; font-size: 12px; color: #cfd8ff; }
#playOverlay .pen-bin .emp-buy { grid-column: 3; grid-row: 1 / span 2; margin: 0; width: auto; flex-direction: row; gap: 8px; align-items: center; }
#playOverlay .pen-bin .emp-buy[disabled] { opacity: .5; cursor: default; }
@media (max-width: 600px) { #playOverlay .pen-row { grid-template-columns: 1fr auto; } #playOverlay .pen-age { display: none; }
  #playOverlay .pen-bin { grid-template-columns: auto 1fr; } #playOverlay .pen-bin .emp-buy { grid-column: 1 / -1; grid-row: auto; justify-content: center; } }
/* THE PICTURE CHECK (game/humancheck.js, 2026-10-22): the thing named, and four pictures to pick from */
#playOverlay .check-card { max-width: 460px; }
#playOverlay .check-q { font: 700 18px/1.3 Georgia, serif; color: #fff4d6; margin: 6px 0 12px; text-align: center; }
#playOverlay .check-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
#playOverlay .check-pic { padding: 6px; border: 0; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .25); display: grid; place-items: center; }
#playOverlay .check-pic:hover { box-shadow: inset 0 0 0 2px rgba(255, 214, 128, .7); }
#playOverlay .check-pic img { image-rendering: pixelated; width: 100%; max-width: 80px; height: auto; }
#playOverlay .check-pic[disabled] { opacity: .5; cursor: default; }
/* THE BLOOMSHIRE WALLET (game/walletui.js, 2026-09-30): the Emporium's night blue and gold, narrower; the address as a
   pill, three coins, four tabs, a card each; the password asked over it */
#playOverlay .wal-card { width: min(640px, 96vw); }
/* the shop, shut until the launch (emporium.js shut): the Emporium's card, small, saying when it opens */
#playOverlay .emp-shut { width: min(420px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 26px 22px; }
#playOverlay .emp-shut .emp-title { margin: 0; font-size: 26px; }
#playOverlay .emp-shut-when { position: relative; font: 600 16px/1.45 Georgia, serif; color: #fff4d6; }
#playOverlay .emp-shut .emp-buy { position: relative; margin-top: 6px; min-width: 110px; }
#playOverlay .wal-card.over { overflow: hidden; }
#playOverlay .wal-card.again { animation: none; }                 /* (it rises when it opens, not at every change) */
#playOverlay .wal .emp-crest { width: 64px; height: 64px; }
#playOverlay .wal .emp-crest img { width: 52px; height: 52px; }
#playOverlay .wal .emp-title { font-size: 27px; }
#playOverlay .wal-addr { display: inline-flex; align-items: center; gap: 9px; margin-top: 5px; padding: 5px 6px 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(8, 10, 30, .7); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .4); color: #dfe6ff; font: 600 13px/1 ui-monospace, Consolas, monospace; }
#playOverlay .wal-addr b { padding: 4px 9px; border-radius: 999px; background: rgba(255, 214, 128, .16); color: #ffe39a; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#playOverlay .wal-addr:hover b { background: #ffd77a; color: #2a1a06; }
#playOverlay .wal-coins { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
#playOverlay .wal-coins.two { grid-template-columns: repeat(2, 1fr); }
#playOverlay .wal-coin { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(165deg, #2b2863 0%, #1b1a49 60%, #141238 100%); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .35); min-width: 0; }
#playOverlay .wal-coin .wal-mark { grid-row: span 2; }
#playOverlay .wal-coin-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#playOverlay .wal-coin-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px/1.2 Georgia, serif; color: #fff4d6; font-variant-numeric: tabular-nums; }
#playOverlay .wal-coin-text span { font: 700 11px/1 system-ui, sans-serif; letter-spacing: .08em; color: #a9b5e8; }
#playOverlay .wal-coin small { min-height: 15px; font-size: 12px; color: #9aa3cf; font-variant-numeric: tabular-nums; }
#playOverlay .wal-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; }
#playOverlay .wal-mark svg { width: 28px; height: 28px; }
#playOverlay img.wal-mark { width: 28px; height: 28px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(130, 210, 255, .7)); }
#playOverlay .wal-tabs { margin: 16px 0 14px; }
#playOverlay .wal-card > .emp-shelf { position: relative; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 214, 128, .22); }
#playOverlay .wal-card > .emp-shelf > .wal-coins:first-child { margin-top: 0; }
#playOverlay .wal .emp-dep-row .emp-buy { min-width: 112px; justify-content: center; }
#playOverlay .wal .emp-dep-row .emp-buy .emp-price { font-size: 15px; }
#playOverlay .wal-panel { gap: 12px 18px; }
#playOverlay .wal-receive { grid-template-columns: 172px 1fr; }
#playOverlay .wal-qr { width: 172px; height: 172px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 214, 128, .6), 0 0 24px rgba(120, 170, 255, .3); }
#playOverlay .wal-qr svg { display: block; width: 100%; height: 100%; }
#playOverlay .wal-receive-text { display: grid; gap: 10px; justify-items: start; min-width: 0; }
#playOverlay .wal-full { display: block; max-width: 100%; padding: 9px 11px; border-radius: 10px; background: rgba(8, 10, 30, .75); color: #fff4d6;
  font: 600 13px/1.45 ui-monospace, Consolas, monospace; word-break: break-all; user-select: all; }
#playOverlay .wal-text { margin: 0; color: #d9d3f0; line-height: 1.5; max-width: 62ch; }
#playOverlay .wal-text.small { font-size: 12px; color: #a9b5e8; }
#playOverlay .wal-input { width: 100%; }
#playOverlay .wal-input::placeholder, #playOverlay .wal-area::placeholder { color: #7f88b8; }
#playOverlay .wal-wide { font: 600 14px/1.3 ui-monospace, Consolas, monospace; }
#playOverlay .wal-rows { display: grid; gap: 8px; margin: 12px 0 4px; max-width: 360px; }
#playOverlay .wal-over .wal-rows { margin: 14px auto 0; }
#playOverlay .wal-area { width: 100%; margin-top: 12px; padding: 10px 12px; border: 0; border-radius: 10px; resize: none; background: rgba(8, 10, 30, .75); color: #fff4d6;
  font: 600 14px/1.5 ui-monospace, Consolas, monospace; box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .35); }
#playOverlay .wal-area:focus { outline: none; box-shadow: inset 0 0 0 2px #ffd77a; }
#playOverlay .wal-err { min-height: 18px; margin: 4px 0 8px; color: #ffb3a8; font-size: 13px; }
#playOverlay .wal-warn { margin: 12px 0; padding: 10px 13px; border-radius: 10px; background: rgba(255, 190, 80, .12); color: #ffe0a8; font-size: 13px; line-height: 1.5;
  box-shadow: inset 0 0 0 1px rgba(255, 190, 80, .4); text-align: left; }
#playOverlay .wal-step { margin-bottom: 8px; font: 700 19px/1.2 Georgia, serif; color: #fff4d6; }
#playOverlay .wal-step b { margin-right: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 214, 128, .18); color: #ffe39a; font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px; }
#playOverlay .wal-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; padding: 0; list-style: none; counter-reset: w; }
#playOverlay .wal-words li { counter-increment: w; display: flex; align-items: baseline; gap: 7px; padding: 8px 10px; border-radius: 9px; background: rgba(8, 10, 30, .75);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .25); text-align: left; }
#playOverlay .wal-words li::before { content: counter(w); min-width: 16px; color: #8d95c4; font: 700 11px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#playOverlay .wal-words li span { color: #fff4d6; font: 700 15px/1.2 ui-monospace, Consolas, monospace; user-select: text; }
#playOverlay .wal-over .wal-words { grid-template-columns: repeat(2, 1fr); }
#playOverlay .wal-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; color: #e9dfc4; cursor: pointer; }
#playOverlay .wal-check input { width: 17px; height: 17px; accent-color: #e0a84a; }
#playOverlay .wal-start { display: grid; gap: 18px; padding: 12px 0 4px; }
#playOverlay .wal-hello { display: grid; gap: 8px; }
#playOverlay .wal-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#playOverlay .wal-choices .emp-buy { padding: 14px 10px; }
#playOverlay .wal-swap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#playOverlay .wal-label { width: 34px; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #a9b5e8; }
#playOverlay .wal-flip { width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(8, 10, 30, .75); color: #ffe39a; font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .45); }
#playOverlay .wal-flip:hover { background: #ffd77a; color: #2a1a06; }
#playOverlay .wal-lines { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; text-align: left; font-variant-numeric: tabular-nums; }
#playOverlay .wal-lines dt { color: #8d95c4; font-size: 13px; }
#playOverlay .wal-lines dd { margin: 0; min-width: 0; color: #fff4d6; font-weight: 600; text-align: right; }
#playOverlay .wal-lines .wal-addr { font: 600 12px/1.35 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }   /* (the address paid, whole) */
#playOverlay .wal-to { display: block; font: 600 12px/1.4 ui-monospace, Consolas, monospace; word-break: break-all; text-align: left; }
#playOverlay .wal-bar { height: 6px; margin: 10px 0 2px; border-radius: 999px; overflow: hidden; background: rgba(8, 10, 30, .75); }
#playOverlay .wal-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e0a84a, #ffe39a); transition: width .15s linear; }
#playOverlay .wal-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; }
#playOverlay .wal-link { padding: 0; border: 0; background: none; cursor: pointer; color: #9fb4ff; font: 600 12px/1.4 system-ui, sans-serif; border-bottom: 1px dashed rgba(159, 180, 255, .5); }
#playOverlay .wal-link:hover { color: #fff; }
/* a private key, shown to be copied and kept (2026-10-03): one selectable line that wraps, in a box */
#playOverlay .wal-key { margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(159, 180, 255, .35); border-radius: 8px; background: rgba(8, 10, 24, .55); color: #e8ecff; font: 600 13px/1.5 ui-monospace, Consolas, monospace; word-break: break-all; user-select: all; }
#playOverlay .wal-copied { align-self: center; color: #9fe0b0; font: 600 12px/1.4 system-ui, sans-serif; }
/* restoring from words: which of the accounts they open (2026-10-03) -- each with what it holds */
#playOverlay .wal-pick { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; }
#playOverlay .wal-pick .emp-eth { opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
#playOverlay .wal-impact { margin-top: 4px; font: 600 12px/1.45 system-ui, sans-serif; color: #ffd98a; }
#playOverlay .wal-impact.bad { color: #ffb3a8; }
@media (max-width: 600px) {
  #playOverlay .wal-coins { grid-template-columns: 1fr; }
  #playOverlay .wal-receive { grid-template-columns: 1fr; }
  #playOverlay .wal-qr { width: 150px; height: 150px; }
  #playOverlay .wal-choices { grid-template-columns: 1fr; }
  #playOverlay .wal-words { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 520px) {
  #playOverlay .wal .emp-crest { display: none; }
  #playOverlay .wal-coins { margin-top: 10px; }
  #playOverlay .wal-coin { padding: 7px 10px; }
  #playOverlay .wal-tabs { margin: 10px 0 10px; padding-bottom: 8px; }
  #playOverlay .wal-qr { width: 132px; height: 132px; }
  #playOverlay .wal-receive { grid-template-columns: 132px 1fr; }
}
/* the strongbox's dial (play.js askCode) */
#playOverlay .play-dial-row { display: flex; gap: 10px; justify-content: center; }
#playOverlay .play-dial-wheel { display: grid; gap: 4px; justify-items: center; }
#playOverlay .play-dial-wheel button { justify-self: stretch; padding: 2px 12px; font-size: 12px; background: #5a4424; color: #f3e9d2; }
#playOverlay .play-dial-n { width: 44px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: #2b1d10; border: 2px solid #8a6d44;
  font: 700 28px/1 ui-monospace, monospace; color: #ffe2a0; }
#playOverlay .play-dial-keys { display: flex; justify-content: space-between; }
#playOverlay .play-dial-keys button:first-child { background: transparent; color: #f3e9d2; border: 1px solid #8a6d44; }
/* a paper read from the bag (play.js showPaper): a book's pages, a note, the Founders' Map */
#playOverlay .play-paper { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(520px, 92vw); max-height: 88vh; overflow: auto;
  padding: 22px 24px 18px; border-radius: 6px; background: #efe0bd; border: 3px solid #8a6d44; box-shadow: 0 14px 44px rgba(0,0,0,.6), inset 0 0 40px rgba(120, 80, 30, .25);
  color: #2b1d10; font: 16px/1.5 Georgia, 'Times New Roman', serif; display: grid; gap: 12px; cursor: auto; outline: none; }
#playOverlay .play-paper-title { font: 700 18px/1.2 Georgia, serif; color: #5a3a14; border-bottom: 1px solid rgba(90, 58, 20, .35); padding-bottom: 8px; }
#playOverlay .play-paper-pic { width: 100%; image-rendering: pixelated; border: 1px solid rgba(90, 58, 20, .5); }
#playOverlay .play-paper-text p { margin: 0 0 .6em; }
#playOverlay .play-paper button { justify-self: end; font: 600 14px system-ui, sans-serif; padding: 8px 16px; border-radius: 8px; border: 0; background: #8a6d44; color: #fff8ea; cursor: pointer; }
#playOverlay .play-golden { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; overflow: hidden; pointer-events: auto; cursor: auto;
  background: rgba(40, 24, 4, 0); transition: background 1.2s, opacity .9s; }
#playOverlay .play-golden.on { background: rgba(40, 24, 4, .55); }
/* (2026-09-28) under the interface: the rays between the world and the interface's canvas, whose card is drawn over them */
#playOverlay .play-golden.under { position: absolute; z-index: auto; pointer-events: none; }
#playOverlay .play-golden.out { opacity: 0; }
/* THE RAYS (2026-10-01, the designer: "in the middle the rays much more dense and much brighter, and as it goes to
   the edges of the screen it will fade slowly"): broad gold rays and fine pale ones between them, turning slowly the
   opposite ways, from behind the scroll (--gx, --gy: play.js golden puts them there) -- a ray's lines converge, so they
   crowd together in the middle; the mask makes the middle brightest and lets them die away gradually past the edges */
#playOverlay .play-golden-rays { position: absolute; left: var(--gx, 50%); top: var(--gy, 50%); width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 206, 92, .62) 0deg 4.5deg, rgba(255, 206, 92, 0) 4.5deg 12deg);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.95) 3%, rgba(0,0,0,.7) 9%, rgba(0,0,0,.45) 17%, rgba(0,0,0,.24) 26%, rgba(0,0,0,.1) 34%, transparent 42%);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.95) 3%, rgba(0,0,0,.7) 9%, rgba(0,0,0,.45) 17%, rgba(0,0,0,.24) 26%, rgba(0,0,0,.1) 34%, transparent 42%);
  transform: scale(.25); transition: opacity 1.4s, transform 2.4s cubic-bezier(.2, .8, .2, 1); animation: goldenTurn 70s linear infinite; }
#playOverlay .play-golden-rays.fine { background: repeating-conic-gradient(from 5deg, rgba(255, 246, 206, .4) 0deg 1.4deg, rgba(255, 246, 206, 0) 1.4deg 7.5deg);
  animation: goldenTurnBack 110s linear infinite; }
#playOverlay .play-golden.on .play-golden-rays { opacity: 1; transform: scale(1); }
/* ...and the light at their heart, breathing */
#playOverlay .play-golden-glow { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 250, 220, .95) 0, rgba(255, 228, 140, .72) 5vmax, rgba(255, 196, 84, .34) 14vmax, rgba(255, 160, 40, .12) 28vmax, rgba(255, 140, 20, 0) 46vmax); }
#playOverlay .play-golden.on .play-golden-glow { opacity: 1; animation: goldenBreathe 3.2s ease-in-out 1.6s infinite alternate; }
/* the sparkles round it: four-pointed, twinkling where they are (play.js golden scatters them) */
#playOverlay .play-golden-spark { position: absolute; width: var(--s, 12px); height: var(--s, 12px); margin: calc(var(--s, 12px) / -2) 0 0 calc(var(--s, 12px) / -2);
  background: radial-gradient(circle, #ffffff 0 14%, #fff3b8 26%, #ffd65c 44%, rgba(255, 196, 70, .5) 62%, rgba(255, 190, 60, 0) 78%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; transform: scale(0);
  animation: goldenTwinkle var(--t, 2.4s) ease-in-out var(--d, 0s) infinite; }
@keyframes goldenTurnBack { to { rotate: -360deg; } }
@keyframes goldenBreathe { from { opacity: .82; } to { opacity: 1; } }
@keyframes goldenTwinkle { 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(25deg); } 60% { opacity: .9; transform: scale(.85) rotate(35deg); } }
#playOverlay .play-golden-card { position: relative; text-align: center; color: #3a2408; padding: 22px 30px 20px; border-radius: 14px; max-width: min(460px, 88vw);
  background: linear-gradient(#fff7dc, #f6dc9a); border: 2px solid #b8862b; box-shadow: 0 0 0 6px rgba(255, 230, 150, .35), 0 18px 60px rgba(60, 30, 0, .55);
  opacity: 0; transform: translateY(18px) scale(.96); transition: opacity 1s 1s, transform 1.2s 1s cubic-bezier(.2, .8, .2, 1); font-family: system-ui, sans-serif; }
#playOverlay .play-golden.on .play-golden-card { opacity: 1; transform: none; }
#playOverlay .play-golden-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #8a5a12; }
#playOverlay .play-golden-title { font: 700 30px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: .04em; margin: 6px 0 2px; color: #7a4a06; }
#playOverlay .play-golden-name { font: 600 18px/1.3 system-ui, sans-serif; margin-bottom: 8px; }
#playOverlay .play-golden-line { font-size: 14px; line-height: 1.45; margin-bottom: 14px; }
#playOverlay .play-golden-card button { font: 600 14px system-ui, sans-serif; padding: 8px 20px; border-radius: 8px; border: 0; background: #7a4a06; color: #fff4d6; cursor: pointer; }
@keyframes goldenTurn { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { #playOverlay .play-golden-rays, #playOverlay .play-golden.on .play-golden-glow { animation: none; } #playOverlay .play-golden-spark { animation: none; opacity: .8; transform: none; } }
#playOverlay .play-hud { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 8px;
  background: rgba(16, 13, 10, 0.78); color: #f3e9d2; font: 13px/1.3 system-ui, sans-serif; transition: opacity 1.2s; pointer-events: none; }
#playOverlay .play-hud b { color: #bfe3a3; margin-right: 6px; }
#playOverlay .play-hud kbd { background: #3a332b; border-radius: 4px; padding: 1px 5px; font: inherit; }
#playOverlay .play-hud.faded { opacity: 0; }
#playOverlay .play-where { position: fixed; right: 12px; bottom: 10px; color: rgba(243, 233, 210, 0.55); font: 12px system-ui, sans-serif; pointer-events: none; }
/* where you are, for a moment after walking through a door */
#playOverlay .play-place { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -6px); padding: 8px 18px; border-radius: 10px;
  background: rgba(26, 20, 16, 0.82); color: #f3e9d2; font: 600 17px system-ui, sans-serif; letter-spacing: 0.02em;
  max-width: min(560px, 86vw); width: max-content; text-align: center; line-height: 1.35;   /* a sign's words wrap */
  opacity: 0; transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
#playOverlay .play-place.on { opacity: 1; transform: translate(-50%, 0); }
/* (2026-10-07) while a fish is on, the line goes to the top of the view: over the middle it hid the fishing bar on a phone */
#playOverlay .play-place.high { top: 8px; }
/* the hotbar (js/game/hud.js): twelve things to use, the pack's RPG icons */
#playOverlay .play-bar { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px;
  border-radius: 9px; background: rgba(16, 13, 10, 0.72); cursor: auto; }
#playOverlay .play-slot { position: relative; width: 36px; height: 36px; border-radius: 6px; background: #2c251e; border: 2px solid #4a3f33;
  display: grid; place-items: center; cursor: pointer; }
#playOverlay .play-slot.on { border-color: #bfe3a3; background: #3b3226; }
#playOverlay .play-slot canvas { width: 32px; height: 32px; }
#playOverlay .play-slot-key { position: absolute; left: 2px; top: 0; font: 600 9px system-ui, sans-serif; color: rgba(243, 233, 210, 0.7); }
#playOverlay .play-status { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); color: rgba(243, 233, 210, 0.8);
  font: 12px system-ui, sans-serif; pointer-events: none; white-space: nowrap; }
/* energy (the pack's lightning), what you carry, and what Space would do here */
#playOverlay .play-energy { position: fixed; left: 14px; top: 14px; display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  border-radius: 8px; background: rgba(16, 13, 10, 0.72); pointer-events: none; }
#playOverlay .play-energy canvas { width: 24px; height: 24px; }
#playOverlay .play-energy-track { width: 150px; height: 10px; border-radius: 5px; background: #2c251e; border: 2px solid #4a3f33; overflow: hidden; }
#playOverlay .play-energy-fill { height: 100%; background: linear-gradient(#b8e86a, #6fbf3a); transition: width 0.25s; }
#playOverlay .play-energy-fill.low { background: linear-gradient(#f3b35b, #d9642e); }
#playOverlay .play-energy-num { color: #f3e9d2; font: 600 12px system-ui, sans-serif; min-width: 22px; text-align: right; }
#playOverlay .play-bag { position: fixed; left: 14px; top: 52px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; pointer-events: none; }
#playOverlay .play-bag-item { display: flex; align-items: center; gap: 3px; padding: 2px 6px 2px 3px; border-radius: 6px; background: rgba(16, 13, 10, 0.72);
  color: #f3e9d2; font: 600 11px system-ui, sans-serif; }
#playOverlay .play-bag-item canvas { width: 20px; height: 20px; }
#playOverlay .play-prompt { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); padding: 4px 12px; border-radius: 7px;
  background: rgba(16, 13, 10, 0.78); color: #f3e9d2; font: 600 13px system-ui, sans-serif; pointer-events: none; white-space: nowrap; }
#playOverlay .play-prompt.no { color: #f0b98a; }
#playOverlay .play-prompt[hidden] { display: none; }
#playOverlay .play-look button { margin-top: 8px; font: inherit; background: #3b3226; color: #f3e9d2; border: 1px solid #5a4d3e; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
/* the card of keys (?) and the look panel (L) */
#playOverlay .play-help, #playOverlay .play-look { position: fixed; right: 14px; top: 56px; padding: 12px 14px; border-radius: 10px;
  background: rgba(20, 16, 12, 0.9); color: #f3e9d2; font: 12.5px/1.45 system-ui, sans-serif; cursor: auto; max-height: calc(100vh - 140px); overflow: auto; }
#playOverlay .play-help[hidden], #playOverlay .play-look[hidden] { display: none; }
#playOverlay .play-help b, #playOverlay .play-look b { display: block; color: #bfe3a3; margin-bottom: 6px; font-size: 13px; }
#playOverlay .play-help div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
#playOverlay .play-help kbd { background: #3a332b; border-radius: 4px; padding: 0 5px; font: inherit; justify-self: start; }
#playOverlay .play-help .play-help-guide { display: block; margin-top: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 7px;
  background: #bfe3a3; color: #1e2a14; font: 700 12.5px system-ui, sans-serif; cursor: pointer; }
#playOverlay .play-help .play-help-guide:hover { background: #d4efbf; }
#playOverlay .play-look small { display: block; color: rgba(243, 233, 210, 0.6); margin: -3px 0 8px; }
#playOverlay .play-look label { display: grid; grid-template-columns: 100px 150px; align-items: center; gap: 8px; margin: 3px 0; }
#playOverlay .play-look select { font: inherit; background: #2c251e; color: #f3e9d2; border: 1px solid #4a3f33; border-radius: 5px; padding: 2px 4px; }

/* ---------------------------------------------------------------- PLAYING BY TOUCH (game/touch.js, 2026-09-29) */
/* the game's canvas is the fingers' own: no zoom, no scroll, no selection, no grey flash, no press-and-hold menu */
#playOverlay { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#playOverlay .play-view canvas { touch-action: none; }
#playOverlay input, #playOverlay textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* the joystick: nowhere until a thumb is down, then a faint ring where it came down and the knob it pushes */
#playOverlay .play-joy { position: fixed; z-index: 4; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); pointer-events: none; opacity: 0; transition: opacity .12s; }
#playOverlay .play-joy.on { opacity: 1; }
#playOverlay .play-joy i { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255, 255, 255, .26); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
/* the action button (2026-10-26): on a phone or a tablet only, round, on the right, named for what it does now */
#playOverlay .play-act { position: fixed; z-index: 4; right: max(18px, 5vw); bottom: max(96px, 26vh); width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); background: rgba(40, 30, 20, .42); color: #fff; font: 700 13px/1 system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); touch-action: none; padding: 0; }
#playOverlay .play-act.down { background: rgba(255, 255, 255, .3); transform: scale(.94); }
#playOverlay .play-act.off { display: none; }
/* the arrow buttons (2026-11-02, game/touch.js): Settings' Arrow buttons, four arrows low on the left in the joystick's place */
#playOverlay .play-pad { position: fixed; z-index: 4; left: 0; top: 0; width: 138px; height: 138px; margin: -69px 0 0 -69px; touch-action: none; }
#playOverlay .play-pad.off { display: none; }
#playOverlay .play-pad i { position: absolute; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, .42); background: rgba(40, 30, 20, .4); box-shadow: 0 2px 6px rgba(0, 0, 0, .28); pointer-events: none;
  color: rgba(255, 255, 255, .9); font: 700 17px/1 system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); font-style: normal; }
#playOverlay .play-pad i.on { background: rgba(255, 255, 255, .32); transform: scale(.94); }
#playOverlay .play-pad .up { left: 47px; top: 0; }
#playOverlay .play-pad .left { left: 0; top: 47px; }
#playOverlay .play-pad .right { left: 94px; top: 47px; }
#playOverlay .play-pad .down { left: 47px; top: 94px; }
#playOverlay .play-pad .up::after { content: '\25B2'; }
#playOverlay .play-pad .left::after { content: '\25C0'; }
#playOverlay .play-pad .right::after { content: '\25B6'; }
#playOverlay .play-pad .down::after { content: '\25BC'; }
/* THE DUNGEON'S BOON CARDS (2026-10-26, game/dungeon.js): three, one to choose, over the waiting world */
#playOverlay .dg-boons { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(8, 6, 16, .62); padding: 16px; font: 600 15px/1.35 Georgia, 'Times New Roman', serif; color: #ffe9a8; text-shadow: 0 1px 0 #1c0a18; }
#playOverlay .dg-boons-head { font: 700 26px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .04em; color: #ffd75a; }
#playOverlay .dg-boons-sub { font-size: 14px; color: #f3d9ff; text-align: center; }
#playOverlay .dg-boons-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 640px; }
#playOverlay .dg-card { width: 170px; min-height: 190px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px;
  border: 0; border-radius: 12px; background: linear-gradient(#5a1f5e, #2b0f33); color: #ffe9a8; cursor: pointer;
  box-shadow: 0 0 0 2px #e0a93a, 0 0 0 4px #2b0f33, 0 10px 24px rgba(0, 0, 0, .55); font: inherit; text-shadow: inherit; transition: transform .08s; }
#playOverlay .dg-card:hover, #playOverlay .dg-card:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 2px #ffe08a, 0 0 0 4px #2b0f33, 0 12px 28px rgba(0, 0, 0, .6); outline: none; }
#playOverlay .dg-card-pic { width: 48px; height: 48px; image-rendering: pixelated; }
#playOverlay .dg-card-name { font: 700 18px/1.2 Georgia, 'Times New Roman', serif; color: #ffd75a; }
#playOverlay .dg-card-text { font-size: 14px; line-height: 1.35; text-align: center; color: #f3d9ff; }
/* (a weapon card's rarity, in the rarity's own colour: game/dungeon.js chooseWeapon, 2026-10-28) */
#playOverlay .dg-card-rarity { font: 700 13px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: .04em; text-transform: uppercase; color: #d9d2c5; }
#playOverlay .dg-card-rarity[data-rarity="uncommon"] { color: #8fe39a; }
#playOverlay .dg-card-rarity[data-rarity="rare"] { color: #7cc4ff; }
#playOverlay .dg-card-rarity[data-rarity="epic"] { color: #e3a6ff; }
#playOverlay .dg-card-rarity[data-rarity="legendary"] { color: #ffb44d; text-shadow: 0 0 8px rgba(255, 170, 60, .45); }
#playOverlay .dg-card-held { font-size: 11px; opacity: .7; margin-top: auto; }
#playOverlay .dg-boons-keys { font-size: 12px; opacity: .6; }
#playOverlay .dg-weapons-back { margin-top: 2px; padding: 6px 18px; border: 1px solid rgba(255, 224, 138, .45); border-radius: 6px; background: rgba(43, 15, 51, .7); color: #f3d9ff; font: 600 14px/1.2 Georgia, 'Times New Roman', serif; cursor: pointer; }   /* (the weapon chooser's way back: game/dungeon.js) */
#playOverlay .dg-weapons-back:hover { color: #ffd75a; border-color: #ffd75a; }
@media (max-width: 600px) { #playOverlay .dg-card { width: 140px; min-height: 160px; padding: 12px 8px; } }
/* (how hard, above the weapons at the Steps: Normal, Hard, Nightmare -- game/dungeon.js chooseWeapon, 2026-11-02) */
#playOverlay .dg-tiers-head { font: 700 16px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .06em; color: #ffd75a; opacity: .9; margin-top: 2px; }
#playOverlay .dg-tiers { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 660px; }
#playOverlay .dg-tier { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; border: 0; border-radius: 10px;
  background: linear-gradient(#3a2440, #1d0f22); color: #f3d9ff; cursor: pointer; font: inherit; text-shadow: inherit; opacity: .72;
  box-shadow: 0 0 0 2px #6b4a70, 0 0 0 4px #1d0f22, 0 8px 18px rgba(0, 0, 0, .5); transition: transform .08s, opacity .08s; }
#playOverlay .dg-tier:hover { opacity: .92; transform: translateY(-2px); }
#playOverlay .dg-tier.shut { opacity: .62; cursor: default; transform: none; }
#playOverlay .dg-tier.on { opacity: 1; box-shadow: 0 0 0 2px #ffe08a, 0 0 0 4px #2b0f33, 0 10px 22px rgba(0, 0, 0, .6); }
#playOverlay .dg-tier-hard { background: linear-gradient(#1f3550, #0d1828); }
#playOverlay .dg-tier-nightmare { background: linear-gradient(#2f3b2c, #0f150e); }
#playOverlay .dg-tier-name { font: 700 18px/1.15 Georgia, 'Times New Roman', serif; color: #ffd75a; }
#playOverlay .dg-tier-hard .dg-tier-name { color: #a9d8ff; }
#playOverlay .dg-tier-nightmare .dg-tier-name { color: #9dffb8; }
#playOverlay .dg-tier-place { font-size: 12px; letter-spacing: .05em; opacity: .85; }
#playOverlay .dg-tier-text { font-size: 12px; line-height: 1.35; text-align: center; }
@media (max-width: 600px) { #playOverlay .dg-tier { width: 140px; padding: 8px 6px 10px; } #playOverlay .dg-tier-text { font-size: 11px; } }
/* (a phone on its side, or any short window: the difficulties and the weapons smaller, and the window scrolls rather than
   cut its foot off -- 2026-11-02) */
#playOverlay .dg-weapons { overflow-y: auto; justify-content: safe center; padding-block: 8px; }
@media (max-height: 560px) {
  #playOverlay .dg-weapons { gap: 5px; }
  #playOverlay .dg-weapons .dg-boons-head { font-size: 19px; }
  #playOverlay .dg-weapons .dg-boons-sub { font-size: 11px; max-width: 560px; }
  #playOverlay .dg-tiers-head { font-size: 12px; margin-top: 0; }
  #playOverlay .dg-tier { width: 168px; padding: 5px 6px 6px; gap: 1px; }
  #playOverlay .dg-tier-name { font-size: 14px; }
  #playOverlay .dg-tier-place { font-size: 10px; }
  #playOverlay .dg-tier-text { font-size: 9.5px; line-height: 1.25; }
  #playOverlay .dg-weapons .dg-card { width: 118px; min-height: 0; padding: 6px 6px 8px; gap: 2px; }
  #playOverlay .dg-weapons .dg-card-pic { width: 24px; height: 24px; }
  #playOverlay .dg-weapons .dg-card-name { font-size: 13px; }
  #playOverlay .dg-weapons .dg-card-text, #playOverlay .dg-weapons .dg-boons-keys { font-size: 10px; }
  #playOverlay .dg-weapons-back { padding: 3px 14px; font-size: 12px; }
}
/* (2026-10-28: four weapons or more make two rows of cards, which on a phone held sideways (about 360 tall) ran off the top
    and the bottom, the title and "Not yet" with them, and nothing scrolled, so a phone could not back out. The cards scroll
    now, and a short screen has smaller ones, five to a row) */
#playOverlay .dg-boons { overflow-y: auto; justify-content: safe center; }
@media (max-height: 500px) { #playOverlay .dg-boons { gap: 6px; padding: 8px 12px; } #playOverlay .dg-boons-head { font-size: 20px; } #playOverlay .dg-boons-sub { font-size: 12px; max-width: 640px; } #playOverlay .dg-boons-row { max-width: 96vw; gap: 10px; } #playOverlay .dg-card { width: 132px; min-height: 0; gap: 4px; padding: 8px 8px 10px; } #playOverlay .dg-card-pic { width: 32px; height: 32px; } #playOverlay .dg-card-name { font-size: 15px; } #playOverlay .dg-card-text { font-size: 12px; } }
#playOverlay .col-prize-list li.ore { color: #cfe3ff; }
/* the fight's buttons (2026-10-26): the heavy attack's and, in the dungeon, the dash's -- each ring filling as it comes back */
#playOverlay .play-fight { position: fixed; z-index: 4; width: 52px; height: 52px; border-radius: 50%; padding: 0; touch-action: none;
  border: 2px solid rgba(255, 255, 255, .45); color: #fff; font: 700 11px/1 system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  background: radial-gradient(circle, rgba(40, 30, 20, .55) 58%, transparent 60%),
    conic-gradient(rgba(255, 236, 170, .75) calc(var(--fill, 1) * 360deg), rgba(20, 16, 28, .45) 0); }
#playOverlay .play-fight.heavy { right: calc(max(18px, 5vw) + 76px); bottom: calc(max(96px, 26vh) + 8px); }
#playOverlay .play-fight.dash { right: calc(max(18px, 5vw) + 136px); bottom: calc(max(96px, 26vh) + 8px);
  background: radial-gradient(circle, rgba(40, 30, 20, .55) 58%, transparent 60%),
    conic-gradient(rgba(143, 216, 255, .8) calc(var(--fill, 1) * 360deg), rgba(20, 16, 28, .45) 0); }
#playOverlay .play-fight.down { transform: scale(.94); filter: brightness(1.25); }
#playOverlay .play-fight.off { display: none; }
/* a phone held upright: the game is played on its side */
#playOverlay .play-rotate { display: none; }
@media (orientation: portrait) {
  #playOverlay.phone .play-rotate { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 26px; padding: 24px; background: #0b1330; color: #fff4e0; text-align: center; font: 18px/1.4 'Bloomshire Pixel', ui-rounded, 'Segoe UI', system-ui, sans-serif; }
  #playOverlay.phone .play-rotate p { margin: 0; max-width: 16em; }
}
/* (2026-10-07) a phone whose rotation is locked: full screen on its side, from a button, and what to do where it cannot */
#playOverlay .play-rotate-go { padding: 10px 22px; border: 0; border-radius: 10px; background: #ffcb4f; color: #0b1330; font: inherit; cursor: pointer; }
#playOverlay .play-rotate-tip { margin: 0; max-width: 22em; font-size: 13px; opacity: .78; }
#playOverlay .play-rotate-phone { position: relative; width: 46px; height: 78px; border: 4px solid #ffcb4f; border-radius: 10px; animation: playTurn 2.6s ease-in-out infinite; }
#playOverlay .play-rotate-phone::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 10px; height: 3px; margin-left: -5px; border-radius: 2px; background: #ffcb4f; }
@keyframes playTurn { 0%, 22% { transform: rotate(0deg); } 50%, 82% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { #playOverlay .play-rotate-phone { animation: none; transform: rotate(-90deg); } }
/* the card of controls for a finger (Settings, Controls): what you do, what it does */
#playOverlay .play-help.play-help-touch { top: 12px; right: 12px; width: min(440px, calc(100vw - 24px)); max-height: calc(100% - 24px); box-sizing: border-box;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
#playOverlay .play-help.play-help-touch div { grid-template-columns: minmax(96px, 150px) 1fr; }
#playOverlay .play-help .play-k { font-style: normal; background: #3a332b; border-radius: 4px; padding: 0 6px; justify-self: start; }
/* the line of hints at the top: a finger's, a little smaller on a phone */
#playOverlay.touch .play-hud { max-width: calc(100vw - 24px); box-sizing: border-box; text-align: center; }
/* a box a phone's keyboard types into: 16px, or an iPhone zooms the page in on it */
.play-name-keys { font-size: 16px; }
#playOverlay.touch .play-chat .chat-input, #playOverlay.touch .play-admin input, #playOverlay.touch .play-admin select, #playOverlay.touch .play-name input { font-size: 16px; }
/* the Emporium on a phone held on its side: the height the screen really has (a phone's toolbars aside), less padding */
#playOverlay .emp-card { max-height: 92dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-height: 500px) { #playOverlay .emp { padding: 8px; } #playOverlay .emp-card { max-height: calc(100dvh - 16px); padding: 12px 16px 10px; } }
#playOverlay .play-help .play-k { align-self: start; }
#playOverlay .play-help .play-help-close { display: block; margin-top: 8px; text-align: center; color: rgba(243, 233, 210, .6); font-size: 12px; }
/* A PAGE DRAWN ON ITS SIDE (game/turn.js, 2026-09-29: a wallet app's browser, or a phone whose rotation is locked):
   the rotate screen is not wanted then; and what was sized by the window (vw, vh) is sized by the page as it lies
   (--turn-w x --turn-h), a phone's height on its side */
html.play-turned { overflow: hidden; }
html.play-turned #playOverlay.phone .play-rotate { display: none; }
html.play-turned #playOverlay .play-help, html.play-turned #playOverlay .play-look { max-height: calc(var(--turn-h) - 140px); }
html.play-turned #playOverlay .play-help.play-help-touch { width: min(440px, calc(var(--turn-w) - 24px)); max-height: calc(100% - 24px); }
html.play-turned #playOverlay .play-admin { max-height: calc(var(--turn-h) * .86); width: min(460px, calc(var(--turn-w) - 32px)); }
html.play-turned #playOverlay .play-paper { width: min(520px, calc(var(--turn-w) * .92)); max-height: calc(var(--turn-h) * .88); }
html.play-turned #playOverlay .emp { padding: 8px; }
html.play-turned #playOverlay .emp-card { width: min(880px, calc(var(--turn-w) * .96)); max-height: calc(var(--turn-h) - 16px); padding: 12px 16px 10px; }
html.play-turned #playOverlay .play-chat { width: min(380px, calc(var(--turn-w) - 24px)); }
html.play-turned #playOverlay .play-chat-peek { width: min(360px, calc(var(--turn-w) - 24px)); }
html.play-turned #playOverlay.touch .play-hud { max-width: calc(var(--turn-w) - 24px); }

/* ------------------------------------------------------------------ THE TOWN'S BOARDS (game/leaderboard.js, 2026-10-02)
   A village fair's prize board: a leaf-green banner with pink bunting over a parchment card, wooden crates for the first
   three, a ledger for the rest. The game's own letters (the site's Bloomshire Pixel) and its own art; no blue, no purple. */
@font-face { font-family: 'Bloomshire Pixel'; src: url(/fonts/bloomshire-pixel.woff) format('woff'); font-display: swap; }
#playOverlay .lb {
  --paper: #f7eedb; --paper-2: #fdf7ea; --paper-3: #efe2c6; --line: #dcc6a2;
  --ink: #45291d; --ink-2: #7b5844; --ink-3: #a3836c;
  --leaf: #5c9b42; --leaf-2: #3f7430; --leaf-3: #2c5423; --leaf-soft: #d6e9bd; --sprout: #8cc265;
  --rose: #ee93ae; --rose-2: #cf6584; --rose-3: #a8455f; --rose-soft: #fbdde6;
  --gold: #f4c246; --gold-2: #c98f1d; --wood: #b07a4d; --wood-2: #8a5733; --wood-3: #5f3a20;
  --px: 'Bloomshire Pixel', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; cursor: auto; outline: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(60, 34, 20, .45), rgba(34, 18, 10, .72));
  color: var(--ink); font: 13px/1.35 var(--px); -webkit-font-smoothing: none; animation: lb-in .18s ease-out;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
#playOverlay .lb * { box-sizing: border-box; }
#playOverlay .lb button { font: inherit; color: inherit; cursor: pointer; }
#playOverlay .lb-sprite, #playOverlay .lb-img { display: inline-block; flex: none; image-rendering: pixelated; background-repeat: no-repeat; vertical-align: middle; }

/* the card: parchment in a wooden frame, a cream line inside it */
#playOverlay .lb-card {
  position: relative; display: flex; flex-direction: column; width: min(740px, 100%); height: min(650px, 100%);
  background: var(--paper); border: 3px solid var(--wood-3); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 5px var(--line), 0 6px 0 var(--wood-3), 0 18px 40px rgba(20, 8, 2, .45);
  animation: lb-up .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes lb-up { from { transform: translateY(14px) scale(.98); } to { transform: none; } }

/* the banner: leaf green, the title in the game's letters, pink bunting along its foot */
#playOverlay .lb-head { position: relative; flex: none; display: flex; align-items: center; justify-content: center; padding: 12px 52px 18px;
  background: var(--leaf); border-bottom: 3px solid var(--leaf-3); box-shadow: inset 0 3px 0 #7bb85c, inset 0 -3px 0 var(--leaf-2); }
#playOverlay .lb-title { display: flex; align-items: center; gap: 12px; }
#playOverlay .lb-title h2 { margin: 0; font: 26px/1 var(--px); color: #fff8e8; letter-spacing: 1px;
  text-shadow: 2px 0 var(--leaf-3), -2px 0 var(--leaf-3), 0 2px var(--leaf-3), 0 -2px var(--leaf-3), 2px 2px var(--leaf-3), -2px 2px var(--leaf-3), 2px -2px var(--leaf-3), -2px -2px var(--leaf-3), 0 4px var(--leaf-3); }
#playOverlay .lb-bunting { position: absolute; left: 0; right: 0; bottom: -12px; height: 14px; background-repeat: repeat-x; background-size: 24px 14px; image-rendering: pixelated; pointer-events: none; z-index: 2; }
#playOverlay .lb-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--rose-3);
  background: var(--rose); color: #fff; font-size: 14px; line-height: 1; box-shadow: inset 0 -3px 0 var(--rose-2), 0 2px 0 var(--leaf-3); }
#playOverlay .lb-x:hover { background: #f4a9bf; }
#playOverlay .lb-x:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--rose-2); }

/* the tabs: three seed packets; the one open is pink, raised */
#playOverlay .lb-tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px 18px 10px; }
#playOverlay .lb-tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; text-align: left;
  background: var(--paper-2); border: 2px solid var(--line); border-radius: 10px; box-shadow: 0 3px 0 var(--line); transition: transform .12s, background .12s; }
#playOverlay .lb-tab:hover { transform: translateY(-1px); border-color: var(--ink-3); }
#playOverlay .lb-tab.on { background: var(--rose-soft); border-color: var(--rose-2); box-shadow: 0 3px 0 var(--rose-2), inset 0 0 0 2px #fff3f7; transform: translateY(-2px); }
#playOverlay .lb-tab-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--paper-3); }
#playOverlay .lb-tab.on .lb-tab-icon { background: #fff; }
#playOverlay .lb-tab-words { display: flex; flex-direction: column; min-width: 0; }
#playOverlay .lb-tab b { font: 15px/1.1 var(--px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playOverlay .lb-tab small { margin-top: 3px; font-size: 11px; color: var(--ink-2); white-space: nowrap; }
#playOverlay .lb-tab.on small { color: var(--rose-3); }

/* the body: scrolls; a soft grain of paper */
#playOverlay .lb-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 12px; scrollbar-width: thin; scrollbar-color: var(--wood) var(--paper-3);
  background-image: radial-gradient(rgba(139, 94, 52, .07) 1px, transparent 1px); background-size: 6px 6px; }
#playOverlay .lb-empty { margin: 30px 0; text-align: center; color: var(--ink-2); font-size: 14px; }
#playOverlay .lb-again { margin-left: 8px; padding: 3px 10px; border: 2px solid var(--leaf-2); border-radius: 8px; background: var(--leaf-soft); }

/* the story: the tallies, and where everyone is */
#playOverlay .lb-road { display: grid; grid-template-columns: 190px 1fr; gap: 12px; margin: 4px 0 8px; }
#playOverlay .lb-tallies { display: grid; gap: 8px; }
#playOverlay .lb-tally { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 2px solid; }
#playOverlay .lb-tally b { display: block; font: 22px/1 var(--px); }
#playOverlay .lb-tally small { font-size: 11px; color: var(--ink-2); }
#playOverlay .lb-tally.gold { background: #fff3cf; border-color: var(--gold-2); box-shadow: 0 3px 0 #e7c47a; }
#playOverlay .lb-tally.gold b { color: #9a6a0c; }
#playOverlay .lb-tally.leaf { background: var(--leaf-soft); border-color: var(--leaf-2); box-shadow: 0 3px 0 #a9cf8c; }
#playOverlay .lb-tally.leaf b { color: var(--leaf-3); }
#playOverlay .lb-chart { --bar-max: 78px; padding: 8px 10px 6px; border-radius: 10px; background: var(--paper-2); border: 2px solid var(--line); }
#playOverlay .lb-chart-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
#playOverlay .lb-chart-label small { color: var(--rose-3); }
#playOverlay .lb-cols { display: grid; grid-template-columns: repeat(18, 1fr); align-items: end; gap: 3px; height: calc(var(--bar-max) + 26px); margin-top: 4px; }
#playOverlay .lb-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
#playOverlay .lb-col-n { font-size: 9px; color: var(--ink-2); line-height: 1; margin-bottom: 2px; }
#playOverlay .lb-bar { display: block; width: 100%; max-width: 18px; height: calc(var(--f, 0) * var(--bar-max)); background: var(--sprout); border: 2px solid var(--leaf-2); border-bottom: 0; border-radius: 3px 3px 0 0; box-shadow: inset 2px 0 0 #aedc86; }
#playOverlay .lb-col-ch { width: 100%; text-align: center; font-size: 9px; color: var(--ink-3); border-top: 2px solid var(--wood); padding-top: 2px; line-height: 1; }
#playOverlay .lb-col.mine .lb-bar { background: var(--rose); border-color: var(--rose-3); box-shadow: inset 2px 0 0 #f7bccd; }
#playOverlay .lb-col.mine .lb-col-ch { color: var(--rose-3); }

/* the first three: their medals, their names, on crates */
#playOverlay .lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 14px; padding: 6px 30px 0; margin-bottom: 12px; }
#playOverlay .lb-spot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
#playOverlay .lb-medal { filter: drop-shadow(0 2px 0 rgba(69, 41, 29, .35)); animation: lb-bob 2.6s ease-in-out infinite; }
#playOverlay .lb-spot.p2 .lb-medal { animation-delay: -.8s; } #playOverlay .lb-spot.p3 .lb-medal { animation-delay: -1.6s; }
@keyframes lb-bob { 50% { transform: translateY(-3px); } }
#playOverlay .lb-spot .lb-name { max-width: 100%; font: 15px/1.2 var(--px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playOverlay .lb-spot.you .lb-name { color: var(--rose-3); }
#playOverlay .lb-crate { position: relative; width: 100%; display: grid; place-items: center; margin-top: 4px; border: 3px solid var(--wood-3); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(180deg, var(--wood) 0 13px, var(--wood-2) 13px 15px); box-shadow: inset 3px 0 0 #c99266, inset -3px 0 0 var(--wood-2); }
#playOverlay .lb-crate span { font: 24px/1 var(--px); color: #fff3dc; text-shadow: 2px 2px 0 var(--wood-3), -2px 0 0 var(--wood-3), 0 -2px 0 var(--wood-3), 2px 0 0 var(--wood-3), 0 2px 0 var(--wood-3); }
#playOverlay .lb-spot.p1 .lb-crate { height: 62px; background: repeating-linear-gradient(180deg, #d8a95f 0 13px, #b9853a 13px 15px); box-shadow: inset 3px 0 0 #eac27c, inset -3px 0 0 #a87428; }
#playOverlay .lb-spot.p2 .lb-crate { height: 46px; }
#playOverlay .lb-spot.p3 .lb-crate { height: 34px; }
#playOverlay .lb-spot.p1 .lb-crate::before { content: ''; position: absolute; top: -3px; left: 12%; right: 12%; height: 3px; background: var(--rose); }

/* what a row is worth */
#playOverlay .lb-val { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#playOverlay .lb-val b { font: 14px/1 var(--px); }
#playOverlay .lb-val.gold b { color: #8f6309; }
#playOverlay .lb-val.shard b { color: var(--ink); }
#playOverlay .lb-val.done b { color: #8f6309; }
#playOverlay .lb-val.road b { color: var(--leaf-3); }
#playOverlay .lb-spot .lb-val { padding: 3px 9px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--line); }
#playOverlay .lb-spot.p1 .lb-val { background: #fff3cf; border-color: #e3bb5c; }

/* the ledger: everyone after the first three */
#playOverlay .lb-list { list-style: none; margin: 0; padding: 0; border: 2px solid var(--line); border-radius: 10px; background: var(--paper-2); overflow: hidden; }
#playOverlay .lb-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 7px 12px; border-top: 2px dashed var(--paper-3); }
#playOverlay .lb-row:first-child { border-top: 0; }
#playOverlay .lb-row:nth-child(even) { background: #fbf2e1; }
#playOverlay .lb-rank { justify-self: start; min-width: 34px; padding: 3px 6px; text-align: center; font: 13px/1 var(--px); color: var(--ink-2); background: var(--paper-3); border-radius: 6px; }
#playOverlay .lb-who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#playOverlay .lb-who .lb-name { font: 14px/1.2 var(--px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#playOverlay .lb-ch { flex: none; max-width: 46%; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playOverlay .lb-chip { flex: none; padding: 1px 7px; border-radius: 999px; font: 10px/1.4 var(--px); font-style: normal; color: #fff; background: var(--rose-2); }
#playOverlay .lb-row.you { background: var(--rose-soft) !important; box-shadow: inset 4px 0 0 var(--rose-2); }
#playOverlay .lb-row.you .lb-rank { background: var(--rose); color: #fff; }

/* the story's row: the eighteen chapters as plots -- grown, the one on now, bare */
#playOverlay .lb-track { display: inline-grid; grid-template-columns: repeat(18, 6px); gap: 2px; }
#playOverlay .lb-track i { display: block; height: 10px; border-radius: 2px; background: #e6d5b6; box-shadow: inset 0 -2px 0 #d3bd97; }
#playOverlay .lb-track i.grown { background: var(--sprout); box-shadow: inset 0 -2px 0 var(--leaf-2); }
#playOverlay .lb-track i.now { background: var(--rose); box-shadow: inset 0 -2px 0 var(--rose-3); animation: lb-now 1.4s ease-in-out infinite; }
@keyframes lb-now { 50% { opacity: .55; } }

/* the foot: your own place, and when the boards were counted */
#playOverlay .lb-foot { flex: none; padding: 8px 18px 10px; border-top: 3px solid var(--line); background: var(--paper-3); }
#playOverlay .lb-mine { border-color: var(--rose-2); }
#playOverlay .lb-none { margin: 2px 0 4px; font-size: 12px; color: var(--ink-2); }
#playOverlay .lb-when { display: block; margin-top: 6px; font-size: 10px; color: var(--ink-3); text-align: center; }

/* small screens: a phone on its side, a short window */
@media (max-width: 620px) {
  #playOverlay .lb-tabs { gap: 6px; padding: 20px 10px 8px; }
  #playOverlay .lb-tab { padding: 6px; gap: 6px; } #playOverlay .lb-tab small { display: none; }
  #playOverlay .lb-tab-icon { width: 28px; height: 28px; }
  #playOverlay .lb-road { grid-template-columns: 1fr; }
  #playOverlay .lb-tallies { grid-template-columns: 1fr 1fr; }
  #playOverlay .lb-podium { padding: 4px 4px 0; gap: 8px; }
  #playOverlay .lb-track { display: none; }
}
@media (max-height: 460px) {
  #playOverlay .lb { padding: 6px; }
  #playOverlay .lb-medal { zoom: .7; }
  #playOverlay .lb-spot .lb-name { font-size: 13px; }
  #playOverlay .lb-podium { padding: 0 24px; margin-bottom: 8px; }
  #playOverlay .lb-tally { padding: 4px 8px; gap: 6px; min-width: 0; } #playOverlay .lb-tally b { font-size: 18px; } #playOverlay .lb-tally small { font-size: 10px; }
  #playOverlay .lb-tally > .lb-img, #playOverlay .lb-tally > .lb-sprite { zoom: .75; }
  #playOverlay .lb-body { padding: 2px 12px 8px; }
  #playOverlay .lb-card { height: 100%; }
  #playOverlay .lb-head { padding: 6px 48px 12px; } #playOverlay .lb-title h2 { font-size: 20px; } #playOverlay .lb-title-art { display: none; }
  #playOverlay .lb-x { top: 5px; width: 26px; height: 26px; }
  #playOverlay .lb-tabs { padding: 16px 12px 6px; } #playOverlay .lb-tab { padding: 4px 8px; } #playOverlay .lb-tab small { display: none; }
  #playOverlay .lb-tab-icon { width: 28px; height: 28px; }
  #playOverlay .lb-road { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); } #playOverlay .lb-chart { --bar-max: 34px; min-width: 0; }
  #playOverlay .lb-crate { transform: scaleY(.75); transform-origin: bottom; }
  #playOverlay .lb-foot { padding: 6px 12px; } #playOverlay .lb-when { display: none; }
}
@media (prefers-reduced-motion: reduce) { #playOverlay .lb, #playOverlay .lb * { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ FRIENDS (game/friends.js, 2026-10-03)
   The town's boards' parchment and banner (.lb), smaller: the friends with their pictures, the requests, and the trade
   setting at the foot; a farmer's card with their picture, level and how they trade, and the buttons for them. */
#playOverlay .fr .lb-card { width: min(480px, 100%); height: auto; max-height: min(620px, 100%); }
#playOverlay .fr-back { left: 12px; right: auto; }
#playOverlay .fr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 16px 12px; display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: var(--wood) var(--paper-3); }
#playOverlay .fr-sec { display: flex; flex-direction: column; gap: 6px; }
#playOverlay .fr-sec h3, #playOverlay .fr-foot h3 { margin: 0 0 2px; font: 13px/1 var(--px); color: var(--ink-2); letter-spacing: .5px; }
#playOverlay .fr-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 10px;
  border-radius: 10px; background: var(--paper-2); border: 2px solid var(--line); text-align: left; }
#playOverlay button.fr-row:hover { border-color: var(--ink-3); transform: translateY(-1px); }
#playOverlay .fr-pic { display: block; border-radius: 8px; background: var(--paper-3); image-rendering: pixelated; }
#playOverlay .fr-name { display: block; font: 15px/1.2 var(--px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playOverlay .fr-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
#playOverlay .fr-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-3); }
#playOverlay .fr-dot.on { background: var(--sprout); box-shadow: 0 0 0 2px var(--leaf-soft); }
#playOverlay .fr-lv { padding: 3px 9px; border-radius: 999px; background: var(--leaf-soft); border: 2px solid var(--leaf-2); color: var(--leaf-3); font: 12px/1 var(--px); white-space: nowrap; }
#playOverlay .fr-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#playOverlay .fr-btn { padding: 7px 12px; border-radius: 9px; border: 2px solid var(--wood-2); background: var(--paper-2); box-shadow: 0 3px 0 var(--wood-2);
  font: 13px/1 var(--px); white-space: nowrap; }
#playOverlay .fr-btn:hover:not(:disabled) { transform: translateY(-1px); }
#playOverlay .fr-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-2); }
#playOverlay .fr-btn.go { background: var(--leaf); border-color: var(--leaf-3); color: #fff8e8; box-shadow: 0 3px 0 var(--leaf-3); }
#playOverlay .fr-btn.pink { background: var(--rose-soft); border-color: var(--rose-2); color: var(--rose-3); box-shadow: 0 3px 0 var(--rose-2); }
#playOverlay .fr-btn:disabled { opacity: .5; cursor: default; }
#playOverlay .fr-empty { margin: 6px 4px; color: var(--ink-2); font-size: 13px; text-align: center; }
#playOverlay .fr-note { margin: 0; font-size: 12px; color: var(--leaf-3); text-align: center; }
#playOverlay .fr-why { margin: 0; font-size: 12px; color: var(--rose-3); }
#playOverlay .fr-foot { flex: none; padding: 10px 16px 12px; border-top: 3px solid var(--line); background: var(--paper-3); }
#playOverlay .fr-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
#playOverlay .fr-seg button { padding: 8px 4px; border-radius: 9px; border: 2px solid var(--line); background: var(--paper-2); font: 13px/1 var(--px); }
#playOverlay .fr-seg button.on { background: var(--rose-soft); border-color: var(--rose-2); color: var(--rose-3); box-shadow: 0 3px 0 var(--rose-2); transform: translateY(-1px); }
#playOverlay .fr-hint { margin: 6px 0 0; font-size: 11px; color: var(--ink-2); }
/* friend requests on or off, a row under the trade setting (2026-11-01) */
#playOverlay .fr-asks { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
#playOverlay .fr-asks h3 { margin: 0; }
#playOverlay .fr-seg.two { grid-template-columns: repeat(2, 72px); margin-top: 0; }
/* THE BED'S TWO WAYS TO SLEEP (game/bedcard.js, 2026-10-23): the friends' parchment, smaller; a wide button and its line
   for each -- energy (shut, with its timer, while the bed may not fill it) and health (any time) */
#playOverlay .bed .lb-card { width: min(380px, 100%); }
#playOverlay .bed-way .fr-btn { width: 100%; padding: 11px 12px; font-size: 14px; }
#playOverlay .bed-way .fr-hint { margin: 2px 2px 0; line-height: 1.35; }
/* A SKILL'S PAGE AND A LEVEL'S NEWS (game/skillbook.js, 2026-10-26): the friends' parchment for a skill -- its level and
   bar, a fight's numbers (Combat), what it gives, what each level opens -- and a small card at the top of the game when a
   skill goes up, what that level gave in leaf green */
#playOverlay .sk .lb-card { width: min(520px, 100%); }

/* THE GUIDEBOOK (game/guidebook.js, 2026-10-28): the town's parchment, the chapters down the side, a search over it all */
#playOverlay .gb .lb-card { width: min(920px, 100%); height: min(700px, 100%); }
#playOverlay .gb-bar { flex: none; padding: 22px 16px 8px; }
#playOverlay .gb-search { width: 100%; padding: 8px 12px; font: 14px/1.2 var(--px); color: var(--ink); background: var(--paper-2);
  border: 2px solid var(--line); border-radius: 10px; outline: none; }
#playOverlay .gb-search::placeholder { color: var(--ink-3); }
#playOverlay .gb-search:focus { border-color: var(--leaf-2); box-shadow: 0 0 0 2px var(--leaf-soft); }
#playOverlay .gb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; padding: 4px 14px 14px; }
#playOverlay .gb-nav { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
#playOverlay .gb-ch { text-align: left; padding: 6px 10px; border-radius: 8px; border: 2px solid transparent; background: transparent; color: var(--ink-2); font-size: 13px; line-height: 1.25; }
#playOverlay .gb-ch:hover { background: var(--paper-3); color: var(--ink); }
#playOverlay .gb-ch.on { background: var(--leaf-soft); border-color: var(--leaf-2); color: var(--leaf-3); }
#playOverlay .gb-page { min-height: 0; overflow-y: auto; padding: 2px 10px 14px 16px; border-left: 2px dashed var(--line); outline: none; }
#playOverlay .gb-page h3 { margin: 4px 0 8px; font: 22px/1.15 var(--px); color: var(--leaf-3); }
#playOverlay .gb-page h4 { margin: 16px 0 6px; font: 16px/1.2 var(--px); color: var(--ink); }
/* THE GUIDE'S PICTURES (2026-10-28): a picture by every chapter's name and over its page, and rows of cards -- the thing, its
   name, a few words -- before a section's paragraphs (game/guidebook.js, guidetext.js GUIDE_CARDS) */
#playOverlay .gb-ch { display: flex; align-items: center; gap: 7px; }
#playOverlay .gb-ch-pic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
#playOverlay .gb-ch-pic .gb-key { font-size: 9px; padding: 1px 3px; min-width: 0; }
#playOverlay .gb-h3 { display: flex; align-items: center; gap: 10px; }
#playOverlay .gb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 2px 0 10px; }
#playOverlay .gb-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 9px; text-align: center;
  border-radius: 10px; background: var(--paper-2); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
#playOverlay .gb-pic { min-height: 36px; display: grid; place-items: center; }
#playOverlay .gb-card b { font: 13px/1.2 var(--px); color: var(--leaf-3); }
#playOverlay .gb-card span { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
#playOverlay .gb-key { display: inline-block; min-width: 26px; padding: 4px 7px; border-radius: 6px; font: 13px/1 var(--px); color: var(--ink);
  background: var(--paper-3); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
#playOverlay .gb-page p { margin: 0 0 9px; font-size: 14px; line-height: 1.55; color: var(--ink); }
#playOverlay .gb-list { margin: 0 0 6px; padding-left: 20px; }
#playOverlay .gb-list li { margin: 0 0 5px; font-size: 14px; line-height: 1.45; color: var(--ink); }
#playOverlay .gb-list li::marker { color: var(--leaf-2); }
#playOverlay .gb-page mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
#playOverlay .gb-hit { display: block; width: 100%; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; text-align: left;
  background: var(--paper-2); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); font-size: 14px; line-height: 1.5; }
#playOverlay .gb-hit:hover { border-color: var(--leaf-2); }
#playOverlay .gb-where { display: block; margin-bottom: 3px; font-size: 12px; color: var(--leaf-2); }
#playOverlay .gb-none { color: var(--ink-2); }
@media (max-width: 640px) {
  #playOverlay .gb-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #playOverlay .gb-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; }
  #playOverlay .gb-ch { white-space: nowrap; }
  #playOverlay .gb-page { border-left: 0; border-top: 2px dashed var(--line); padding: 10px 2px 12px; }
}
/* YOUR BOOSTS (game/boostsui.js, 2026-10-28): the town boards' parchment, a row a boost with its dish, its words, its time */
#playOverlay .bx .lb-card { width: min(460px, 100%); max-height: min(620px, 100%); }
#playOverlay .bx-body { padding: 20px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
#playOverlay .bx-count { margin: 0 0 2px; font: 16px/1.2 var(--px); color: var(--leaf-3); }
#playOverlay .bx-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--paper-2);
  border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
#playOverlay .bx-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#playOverlay .bx-what b { font: 14px/1.2 var(--px); color: var(--ink); }
#playOverlay .bx-what span { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
#playOverlay .bx-bar { height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
#playOverlay .bx-bar i { display: block; height: 100%; background: var(--leaf-2); }
#playOverlay .bx-left { flex: none; font: 15px/1 var(--px); color: var(--leaf-3); font-variant-numeric: tabular-nums; }
#playOverlay .bx-note { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
#playOverlay .sk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#playOverlay .sk-xp { font-size: 12px; color: var(--ink-2); }
#playOverlay .sk-bar { height: 12px; border-radius: 6px; background: var(--paper-3); border: 2px solid var(--line); overflow: hidden; }
#playOverlay .sk-bar > i { display: block; height: 100%; background: var(--sprout); box-shadow: inset 0 -3px 0 var(--leaf); }
#playOverlay .sk .fr-hint { margin: 0; }
#playOverlay .sk-stat { grid-template-columns: minmax(0, 1fr) auto; }
#playOverlay .sk-stat .fr-sub { white-space: normal; }
#playOverlay .sk-stat > b { min-width: 46px; padding: 6px 8px; border-radius: 8px; background: var(--paper-3); text-align: center; font: 20px/1 var(--px); color: var(--ink); }
#playOverlay .sk-stat.base { background: var(--leaf-soft); border-color: var(--leaf-2); }
#playOverlay .sk-stat.base > b { background: var(--leaf); color: #fff8e8; box-shadow: 0 3px 0 var(--leaf-3); }
#playOverlay .sk-stat.hand { background: var(--rose-soft); border-color: var(--rose-2); }
#playOverlay .sk-weapons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#playOverlay .sk-weapons > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 10px; background: var(--paper-2); border: 2px solid var(--line); }
#playOverlay .sk-weapons b { font: 18px/1 var(--px); color: var(--leaf-3); }
#playOverlay .sk-weapons span { font-size: 11px; color: var(--ink-2); }
#playOverlay .sk-step { grid-template-columns: 50px minmax(0, 1fr); padding: 5px 8px; }
#playOverlay .sk-step > b { text-align: center; color: var(--ink-2); white-space: nowrap; }
#playOverlay .sk-step > span { min-width: 0; font-size: 12px; white-space: pre-line; }
#playOverlay .sk-step.got { background: var(--leaf-soft); border-color: var(--sprout); }
#playOverlay .sk-step.got > b { color: var(--leaf-3); }
#playOverlay .sk-step.later { opacity: .72; }
#playOverlay .sk-step.soon { background: var(--rose-soft); border-color: var(--rose); border-style: dashed; }
#playOverlay .sk-step.soon > b { color: var(--rose-3); }
#playOverlay .sk-wide { width: 100%; padding: 10px 12px; font-size: 14px; }
#playOverlay .sk-gear { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 5px 10px; }
#playOverlay .sk-gear .lb-sprite, #playOverlay .sk-none { width: 32px; height: 32px; border-radius: 6px; }
#playOverlay .sk-none { display: block; background: var(--paper-3); border: 2px dashed var(--line); }
/* THE BUTTERFLY BOOK (game/bugbook.js, 2026-10-26): each set a row of cards, a kind caught in colour, one not yet its shadow */
#playOverlay .bb .lb-card { width: min(600px, 100%); }
#playOverlay .bb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#playOverlay .bb-head h3 { margin: 0; }
#playOverlay .bb-prize { font-size: 12px; color: var(--ink-2); }
#playOverlay .bb-got { font-size: 12px; color: var(--leaf-3); }
#playOverlay .bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
#playOverlay .bb-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 10px; background: var(--leaf-soft);
  border: 2px solid var(--sprout); text-align: center; min-width: 0; }
#playOverlay .bb-card.unseen { background: var(--paper-2); border-color: var(--line); }
#playOverlay .bb-card.unseen .bb-wing, #playOverlay .bb-card.unseen .fb-fish { filter: brightness(0); opacity: .28; }
#playOverlay .bb-card.locked { opacity: .7; }
#playOverlay .bb-name { font-size: 11px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
#playOverlay .bb-sub { font-size: 10px; line-height: 1.15; color: var(--ink-3); }
/* (a level's news just under the top edge, narrow, out of the fight's way -- 2026-11-01, the designer: "it should show up ... at
    the middle, upper middle section of the screen, so the whole screen is not hidden"; in a fight clicks go through it: .through) */
#playOverlay .lb.lvup { inset: 10px 0 auto; display: flex; justify-content: center; padding: 0 12px; background: none; pointer-events: none; z-index: 7; }
#playOverlay .lvup-card.through { pointer-events: none; opacity: .95; }
#playOverlay .lvup-card { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(340px, 100%); padding: 0 0 9px;
  background: var(--paper); border: 3px solid var(--wood-3); border-radius: 12px; overflow: hidden; text-align: center;
  box-shadow: inset 0 0 0 2px var(--paper-2), 0 4px 0 var(--wood-3), 0 12px 26px rgba(20, 8, 2, .42); animation: lb-up .25s cubic-bezier(.2, .9, .3, 1.3); }
#playOverlay .lvup-card:hover { transform: translateY(-1px); }
#playOverlay .lvup-title { align-self: stretch; margin-bottom: 3px; padding: 7px 12px 8px; background: var(--leaf); border-bottom: 3px solid var(--leaf-3);
  box-shadow: inset 0 3px 0 #7bb85c; color: #fff8e8; font: 18px/1 var(--px); letter-spacing: .5px; text-shadow: 0 2px 0 var(--leaf-3); }
#playOverlay .lvup-line { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; font-size: 13px; white-space: pre-line; }
#playOverlay .lvup-line b { padding: 2px 7px; border-radius: 999px; background: var(--leaf-soft); border: 2px solid var(--leaf-2); color: var(--leaf-3); font: 14px/1 var(--px); }
#playOverlay .lvup-more { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
#playOverlay .fr-me { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; }
#playOverlay .fr-me .fr-pic { border: 3px solid var(--wood-2); border-radius: 12px; box-shadow: 0 3px 0 var(--wood-3); }
#playOverlay .fr-me .fr-name { font-size: 22px; }
#playOverlay .fr-facts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-height: 460px) { #playOverlay .fr-body { padding: 18px 12px 8px; gap: 10px; } #playOverlay .fr-foot { padding: 6px 12px 8px; } }

/* THE VIP QUARTER'S WINDOWS (2026-10-08, the designer: in the premium area "their whole UI will change into a premium UI
   ... cream ... blue ... turquoise ... as beautiful and as premium as you can get"): while the player is in the VIP
   Quarter, out of doors or in (play.js marks the overlay .vip), every window laid over the game -- the VIP Shop's counter,
   the Bloomshire Wallet, the Emporium, a book read in the Library -- is cream porcelain trimmed in turquoise (#407d90)
   and the designer's blue (#6fa8dc), its ink a deep teal, as the interface's own VIP theme (ui runtime theme.js vip). */
#playOverlay.vip .emp, #playOverlay .emp.vipdress { background: radial-gradient(ellipse at 50% 20%, rgba(111, 168, 220, .38), rgba(14, 28, 38, .78) 70%); }
#playOverlay.vip .emp-card, #playOverlay .vipdress .emp-card { color: #1f3f50; background: linear-gradient(180deg, #fffaf3 0%, #faf0e3 55%, #f2e4d0 100%);
  box-shadow: 0 0 0 1px #407d90, 0 0 0 4px #faf0e3, 0 0 0 5px rgba(64, 125, 144, .55), 0 30px 80px rgba(10, 22, 30, .55), 0 0 90px rgba(111, 168, 220, .35); }
#playOverlay.vip .emp-glow, #playOverlay .vipdress .emp-glow { background: radial-gradient(circle at 10% 6%, rgba(111, 168, 220, .22), transparent 36%), radial-gradient(circle at 92% 100%, rgba(64, 125, 144, .14), transparent 42%); }
#playOverlay.vip .emp-crest, #playOverlay .vipdress .emp-crest { background: radial-gradient(circle, rgba(111, 168, 220, .42), rgba(64, 125, 144, .14) 60%, transparent 70%); }
#playOverlay.vip .emp-crest img, #playOverlay.vip .emp-crest .emp-sprite, #playOverlay .vipdress .emp-crest img, #playOverlay .vipdress .emp-crest .emp-sprite { filter: drop-shadow(0 0 8px rgba(111, 168, 220, .9)) drop-shadow(0 0 18px rgba(64, 125, 144, .5)); }
#playOverlay.vip .emp-kicker, #playOverlay .vipdress .emp-kicker { color: #407d90; opacity: 1; }
#playOverlay.vip .emp-title, #playOverlay .vipdress .emp-title { background: linear-gradient(180deg, #6fa8dc 0%, #407d90 52%, #2b485c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #ffffff) drop-shadow(0 2px 6px rgba(64, 125, 144, .25)); }
#playOverlay.vip .emp-sub, #playOverlay .vipdress .emp-sub { color: #557a8a; }
#playOverlay.vip .emp-coin, #playOverlay .vipdress .emp-coin { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .35); }
#playOverlay.vip .emp-coin.gold, #playOverlay .vipdress .emp-coin.gold { box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .6); }
#playOverlay.vip .emp-coin b, #playOverlay .vipdress .emp-coin b { color: #1f3f50; }
#playOverlay.vip .emp-x, #playOverlay .vipdress .emp-x { border-color: #407d90; background: #faf0e3; color: #407d90; }
#playOverlay.vip .emp-x:hover, #playOverlay .vipdress .emp-x:hover { background: #407d90; color: #ffffff; }
#playOverlay.vip .emp-tabs, #playOverlay .vipdress .emp-tabs { border-bottom-color: rgba(64, 125, 144, .25); }
#playOverlay.vip .emp-tab, #playOverlay .vipdress .emp-tab { border-color: rgba(64, 125, 144, .4); color: #2b485c; }
#playOverlay.vip .emp-tab:hover, #playOverlay .vipdress .emp-tab:hover { border-color: #407d90; }
#playOverlay.vip .emp-tab.on, #playOverlay .vipdress .emp-tab.on { background: linear-gradient(180deg, #6fa8dc, #407d90); color: #ffffff; box-shadow: 0 4px 14px rgba(64, 125, 144, .35); }
#playOverlay.vip .emp-note, #playOverlay .vipdress .emp-note { background: rgba(111, 168, 220, .14); color: #2b485c; box-shadow: inset 0 0 0 1px rgba(111, 168, 220, .45); }
#playOverlay.vip .emp-item, #playOverlay .vipdress .emp-item { background: linear-gradient(165deg, #ffffff 0%, #faf0e3 60%, #f1e2cc 100%);
  box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .3), 0 10px 22px rgba(29, 51, 66, .16); }
#playOverlay.vip .emp-item:hover, #playOverlay .vipdress .emp-item:hover { box-shadow: inset 0 0 0 1px #407d90, 0 16px 30px rgba(29, 51, 66, .22), 0 0 26px rgba(111, 168, 220, .35); }
#playOverlay.vip .emp-item.featured, #playOverlay .vipdress .emp-item.featured { background: linear-gradient(165deg, #f2f8fe 0%, #dcebf9 55%, #c9e0f4 100%);
  box-shadow: inset 0 0 0 1px #6fa8dc, 0 12px 28px rgba(29, 51, 66, .2); }
#playOverlay.vip .emp-item.featured::after, #playOverlay .vipdress .emp-item.featured::after { background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%); }
#playOverlay.vip .emp-ribbon, #playOverlay .vipdress .emp-ribbon { background: linear-gradient(180deg, #8cbde8, #6fa8dc); color: #ffffff; box-shadow: 0 2px 6px rgba(29, 51, 66, .3); }
#playOverlay.vip .emp-ribbon.best, #playOverlay .vipdress .emp-ribbon.best { background: linear-gradient(180deg, #4c90a5, #2b485c); color: #ffffff; }
#playOverlay.vip .emp-art img, #playOverlay.vip .emp-art .emp-sprite, #playOverlay .vipdress .emp-art img, #playOverlay .vipdress .emp-art .emp-sprite { filter: drop-shadow(0 0 7px rgba(111, 168, 220, .85)); }
#playOverlay.vip .emp-times, #playOverlay .vipdress .emp-times { color: #407d90; text-shadow: 0 2px 0 #ffffff; }
#playOverlay.vip .emp-amt, #playOverlay .vipdress .emp-amt { color: #1f3f50; }
#playOverlay.vip .emp-unit, #playOverlay .vipdress .emp-unit { color: #557a8a; }
#playOverlay.vip .emp-bonus, #playOverlay .vipdress .emp-bonus { color: #2b6f84; background: rgba(64, 125, 144, .12); box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .35); }
#playOverlay.vip .emp-bonus.plain, #playOverlay .vipdress .emp-bonus.plain { color: #407d90; background: rgba(111, 168, 220, .12); box-shadow: inset 0 0 0 1px rgba(111, 168, 220, .4); }
#playOverlay.vip .emp-avyn, #playOverlay .vipdress .emp-avyn { color: #a8741a; }
#playOverlay.vip .emp-avyn-note, #playOverlay .vipdress .emp-avyn-note { background: rgba(242, 193, 78, .12); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .35); color: #4f6670; }
#playOverlay.vip .emp-avyn-note b, #playOverlay.vip .emp-check-avyn.got, #playOverlay .vipdress .emp-avyn-note b, #playOverlay .vipdress .emp-check-avyn.got { color: #a8741a; }
#playOverlay.vip .emp-check-avyn, #playOverlay .vipdress .emp-check-avyn { color: #4f6670; }
#playOverlay.vip .emp-buy, #playOverlay .vipdress .emp-buy { background: linear-gradient(180deg, #8cc5d6 0%, #4c90a5 52%, #407d90 100%); color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 #2b485c, 0 8px 18px rgba(64, 125, 144, .3); }
#playOverlay.vip .emp-buy:active, #playOverlay .vipdress .emp-buy:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #2b485c; }
#playOverlay.vip .emp-buy:disabled, #playOverlay .vipdress .emp-buy:disabled { filter: grayscale(.55) brightness(1.05); opacity: .6; }
#playOverlay.vip .emp-buy.ghost, #playOverlay .vipdress .emp-buy.ghost { background: transparent; color: #2b485c; box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .6); }
#playOverlay.vip .emp-foot, #playOverlay .vipdress .emp-foot { border-top-color: rgba(64, 125, 144, .22); color: #557a8a; }
#playOverlay.vip .emp-check, #playOverlay .vipdress .emp-check { background: rgba(250, 240, 227, .8); }
#playOverlay.vip .emp-check-card, #playOverlay .vipdress .emp-check-card { background: linear-gradient(170deg, #ffffff, #f2e4d0); box-shadow: inset 0 0 0 1px #407d90, 0 20px 50px rgba(29, 51, 66, .3); }
#playOverlay.vip .emp-check-title, #playOverlay .vipdress .emp-check-title { color: #2b485c; }
#playOverlay.vip .emp-check-sum, #playOverlay .vipdress .emp-check-sum { color: #1f3f50; }
#playOverlay.vip .emp-check-sum small, #playOverlay.vip .emp-steps li, #playOverlay .vipdress .emp-check-sum small, #playOverlay .vipdress .emp-steps li { color: #7c9cab; }
#playOverlay.vip .emp-steps li i, #playOverlay .vipdress .emp-steps li i { background: rgba(64, 125, 144, .08); box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .3); }
#playOverlay.vip .emp-steps li.now, #playOverlay .vipdress .emp-steps li.now { color: #1f3f50; }
#playOverlay.vip .emp-steps li.now i, #playOverlay .vipdress .emp-steps li.now i { background: #6fa8dc; color: #ffffff; box-shadow: 0 0 0 4px rgba(111, 168, 220, .25); }
#playOverlay.vip .emp-steps li.done, #playOverlay .vipdress .emp-steps li.done { color: #2f7d5f; }
#playOverlay.vip .emp-steps li.done i, #playOverlay .vipdress .emp-steps li.done i { background: #3f9c78; color: #ffffff; }
#playOverlay.vip .emp-err, #playOverlay.vip .emp-quote-err, #playOverlay .vipdress .emp-err, #playOverlay .vipdress .emp-quote-err { background: rgba(200, 57, 79, .1); color: #a12a3f; }
#playOverlay.vip .emp-quote-err, #playOverlay .vipdress .emp-quote-err { background: none; }
#playOverlay.vip .emp-tx, #playOverlay.vip .emp-link, #playOverlay.vip .wal-link, #playOverlay .vipdress .emp-tx, #playOverlay .vipdress .emp-link, #playOverlay .vipdress .wal-link { color: #407d90; border-bottom-color: rgba(64, 125, 144, .5); }
#playOverlay.vip .emp-link:hover, #playOverlay.vip .wal-link:hover, #playOverlay .vipdress .emp-link:hover, #playOverlay .vipdress .wal-link:hover { color: #1f3f50; }
#playOverlay.vip .emp-deposit, #playOverlay .vipdress .emp-deposit { background: linear-gradient(165deg, #f2f8fe 0%, #dcebf9 55%, #c9e0f4 100%); box-shadow: inset 0 0 0 1px #6fa8dc, 0 12px 28px rgba(29, 51, 66, .18); }
#playOverlay.vip .emp-amount, #playOverlay .vipdress .emp-amount { background: #ffffff; color: #1f3f50; box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .45); }
#playOverlay.vip .emp-amount:focus, #playOverlay .vipdress .emp-amount:focus { box-shadow: inset 0 0 0 2px #407d90; }
#playOverlay.vip .emp-coins, #playOverlay .vipdress .emp-coins { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .35); }
#playOverlay.vip .emp-coinpick, #playOverlay .vipdress .emp-coinpick { color: #2b485c; }
#playOverlay.vip .emp-coinpick.on, #playOverlay .vipdress .emp-coinpick.on { background: linear-gradient(180deg, #6fa8dc, #407d90); color: #ffffff; }
#playOverlay.vip .emp-quote, #playOverlay .vipdress .emp-quote { color: #2b485c; }
#playOverlay.vip .emp-quote b, #playOverlay .vipdress .emp-quote b { color: #1f3f50; }
#playOverlay.vip .emp-quote small, #playOverlay.vip .emp-shut-when, #playOverlay .vipdress .emp-quote small, #playOverlay .vipdress .emp-shut-when { color: #557a8a; }
/* ...the Bloomshire Wallet, there */
#playOverlay.vip .wal-addr { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .4); color: #2b485c; }
#playOverlay.vip .wal-addr b, #playOverlay.vip .wal-step b, #playOverlay .vipdress .wal-addr b, #playOverlay .vipdress .wal-step b { background: rgba(64, 125, 144, .12); color: #407d90; }
#playOverlay.vip .wal-addr:hover b, #playOverlay .vipdress .wal-addr:hover b { background: #407d90; color: #ffffff; }
#playOverlay.vip .wal-coin, #playOverlay .vipdress .wal-coin { background: linear-gradient(165deg, #ffffff 0%, #faf0e3 60%, #f1e2cc 100%); box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .35); }
#playOverlay.vip .wal-coin-text b, #playOverlay.vip .wal-step, #playOverlay.vip .wal-lines dd, #playOverlay .vipdress .wal-coin-text b, #playOverlay .vipdress .wal-step, #playOverlay .vipdress .wal-lines dd { color: #1f3f50; }
#playOverlay.vip .wal-coin-text span, #playOverlay.vip .wal-label, #playOverlay.vip .wal-text.small, #playOverlay .vipdress .wal-coin-text span, #playOverlay .vipdress .wal-label, #playOverlay .vipdress .wal-text.small { color: #557a8a; }
#playOverlay.vip .wal-coin small, #playOverlay.vip .wal-lines dt, #playOverlay.vip .wal-words li::before, #playOverlay .vipdress .wal-coin small, #playOverlay .vipdress .wal-lines dt, #playOverlay .vipdress .wal-words li::before { color: #7c9cab; }
#playOverlay.vip img.wal-mark, #playOverlay .vipdress img.wal-mark { filter: drop-shadow(0 0 6px rgba(111, 168, 220, .8)); }
#playOverlay.vip .wal-card > .emp-shelf, #playOverlay .vipdress .wal-card > .emp-shelf { border-top-color: rgba(64, 125, 144, .22); }
#playOverlay.vip .wal-qr, #playOverlay .vipdress .wal-qr { box-shadow: 0 0 0 1px #407d90, 0 0 24px rgba(111, 168, 220, .35); }
#playOverlay.vip .wal-full, #playOverlay.vip .wal-area, #playOverlay.vip .wal-words li, #playOverlay.vip .wal-key, #playOverlay .vipdress .wal-full, #playOverlay .vipdress .wal-area, #playOverlay .vipdress .wal-words li, #playOverlay .vipdress .wal-key { background: #ffffff; color: #1f3f50;
  box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .35); border-color: rgba(64, 125, 144, .35); }
#playOverlay.vip .wal-area:focus, #playOverlay .vipdress .wal-area:focus { box-shadow: inset 0 0 0 2px #407d90; }
#playOverlay.vip .wal-words li span, #playOverlay .vipdress .wal-words li span { color: #1f3f50; }
#playOverlay.vip .wal-text, #playOverlay.vip .wal-check, #playOverlay .vipdress .wal-text, #playOverlay .vipdress .wal-check { color: #2b485c; }
#playOverlay.vip .wal-check input, #playOverlay .vipdress .wal-check input { accent-color: #407d90; }
#playOverlay.vip .wal-input::placeholder, #playOverlay.vip .wal-area::placeholder, #playOverlay .vipdress .wal-input::placeholder, #playOverlay .vipdress .wal-area::placeholder { color: #7c9cab; }
#playOverlay.vip .wal-err, #playOverlay.vip .wal-impact.bad, #playOverlay .vipdress .wal-err, #playOverlay .vipdress .wal-impact.bad { color: #a12a3f; }
#playOverlay.vip .wal-warn, #playOverlay .vipdress .wal-warn { background: rgba(217, 130, 43, .1); color: #8a4f12; box-shadow: inset 0 0 0 1px rgba(217, 130, 43, .4); }
#playOverlay.vip .wal-impact, #playOverlay .vipdress .wal-impact { color: #a8741a; }
#playOverlay.vip .wal-flip, #playOverlay .vipdress .wal-flip { background: #ffffff; color: #407d90; box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .45); }
#playOverlay.vip .wal-flip:hover, #playOverlay .vipdress .wal-flip:hover { background: #407d90; color: #ffffff; }
#playOverlay.vip .wal-bar, #playOverlay .vipdress .wal-bar { background: rgba(64, 125, 144, .15); }
#playOverlay.vip .wal-bar i, #playOverlay .vipdress .wal-bar i { background: linear-gradient(90deg, #407d90, #6fa8dc); }
#playOverlay.vip .wal-copied, #playOverlay .vipdress .wal-copied { color: #2f7d5f; }
/* ...and a book read in the VIP Library: cream, its rule and its button turquoise */
#playOverlay.vip .play-paper { background: linear-gradient(180deg, #fffaf3, #faf0e3); border-color: #407d90; color: #1f3f50;
  box-shadow: 0 14px 44px rgba(10, 22, 30, .5), inset 0 0 40px rgba(111, 168, 220, .18); }
#playOverlay.vip .play-paper-title { color: #2b485c; border-bottom-color: rgba(64, 125, 144, .35); }
#playOverlay.vip .play-paper-pic { border-color: rgba(64, 125, 144, .5); }
#playOverlay.vip .play-paper button { background: #407d90; color: #ffffff; }
/* THE VIP PASS WINDOW (game/vippass.js, 2026-10-08): the VIP Quarter's dress wherever it opens (.vipdress); the farmer's
   pass, what it gives, the buy */
#playOverlay .vip-status { margin: 4px 0 14px; padding: 12px 16px; border-radius: 12px; background: rgba(111, 168, 220, .14); box-shadow: inset 0 0 0 1px rgba(111, 168, 220, .45);
  color: #2b485c; font-size: 15px; }
#playOverlay .vip-status.on { background: linear-gradient(180deg, rgba(64, 125, 144, .16), rgba(111, 168, 220, .12)); box-shadow: inset 0 0 0 1px #407d90; }
#playOverlay .vip-status b { color: #1f3f50; }
#playOverlay .vip-boat { font-weight: 600; }
#playOverlay .vip-claim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 207, 74, .22), rgba(255, 207, 74, .1)); box-shadow: inset 0 0 0 1px #c9a227; }
#playOverlay .vip-claim b { color: #6b4f00; }
#playOverlay .vip-perk { padding-top: 14px; }
#playOverlay .vip-art { height: 58px; gap: 4px; align-items: center; }
#playOverlay .vip-art img, #playOverlay .vip-art .emp-sprite { filter: drop-shadow(0 0 6px rgba(111, 168, 220, .85)); }
#playOverlay .vip-emoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 6px rgba(111, 168, 220, .7)); }
#playOverlay .vip-slots { display: grid; grid-template-columns: repeat(10, 9px); gap: 2px; }
#playOverlay .vip-slots i { width: 9px; height: 9px; border-radius: 2px; background: #6fa8dc; box-shadow: inset 0 0 0 1px #2b485c; }
#playOverlay .vip-slots i.new { background: #fff39c; box-shadow: inset 0 0 0 1px #a8741a; }
#playOverlay .vip-buy { justify-content: center; margin-top: 16px; }
#playOverlay .vip-buy .emp-buy { width: auto; min-width: 230px; }
#playOverlay .vip-perks { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* (the rest of the pass's perks, a list under the cards: game/vippass.js) */
#playOverlay .vip-more { margin: 12px 0; padding: 8px 14px 8px 34px; border-radius: 10px; background: rgba(111, 168, 220, .14); box-shadow: inset 0 0 0 1px rgba(111, 168, 220, .45);
  color: #2b485c; font-size: 13px; line-height: 1.65; columns: 2; column-gap: 26px; }
#playOverlay .vip-more li::marker { color: #c9971c; }
@media (max-width: 560px) { #playOverlay .vip-more { columns: 1; } }
#playOverlay .vip-buy .emp-buy { flex-direction: column; gap: 2px; }
/* THE CELESTIAL GARDEN'S PANEL (game/garden.js, 2026-10-08): what is mined and waiting, your crops on its pedestals, how
   few of each mining crop will ever grow -- in the VIP Quarter's dress (.vipdress) */
#playOverlay .gdn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#playOverlay .gdn-stat { padding: 14px 10px 12px; gap: 2px; }
#playOverlay .gdn-stat .emp-buy { margin-top: 8px; }
#playOverlay .gdn-h { margin: 18px 0 8px; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #407d90; }
#playOverlay .gdn-list { display: flex; flex-direction: column; gap: 8px; }
#playOverlay .gdn-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(111, 168, 220, .45); }
#playOverlay .gdn-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle, rgba(255, 233, 160, .9), rgba(111, 168, 220, .25)); }
#playOverlay .gdn-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: #557a8a; font-size: 13px; }
#playOverlay .gdn-what b { color: #1f3f50; font-size: 15px; }
#playOverlay .gdn-take { border: 0; border-radius: 9px; padding: 8px 14px; font: 700 13px system-ui, sans-serif; color: #2b485c; background: #faf0e3; box-shadow: inset 0 0 0 1px #407d90; cursor: pointer; }
#playOverlay .gdn-take:hover:not(:disabled) { background: #ffffff; }
#playOverlay .gdn-take:disabled { opacity: .5; cursor: default; }
#playOverlay .gdn-empty { margin: 0; }
#playOverlay .gdn-rares { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#playOverlay .gdn-art { height: 56px; }
#playOverlay .gdn-art .emp-sprite { filter: drop-shadow(0 0 8px rgba(255, 210, 120, .95)); }
#playOverlay .gdn-bar { width: 100%; height: 8px; margin: 10px 0 6px; border-radius: 99px; background: rgba(64, 125, 144, .16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(64, 125, 144, .35); }
#playOverlay .gdn-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6fa8dc, #407d90); }
#playOverlay .gdn-count { font-size: 14px; color: #2b485c; font-variant-numeric: tabular-nums; }
#playOverlay .gdn-count b { font-size: 18px; color: #1f3f50; }
@media (max-width: 600px) { #playOverlay .gdn-stats { grid-template-columns: 1fr; } #playOverlay .gdn-row { grid-template-columns: auto minmax(0, 1fr); } #playOverlay .gdn-take { grid-column: 1 / -1; } }
/* (a phone on its side: little height -- the three figures shorter, so your crops show without much scrolling) */
@media (max-height: 500px) { #playOverlay .gdn-stat { padding: 8px 8px 8px; } #playOverlay .gdn-stat .emp-amt { font-size: 20px; } #playOverlay .gdn-stat .emp-buy { margin-top: 4px; padding: 6px 16px; }
  #playOverlay .gdn-h { margin: 12px 0 6px; } #playOverlay .gdn-row { padding: 6px 10px; } #playOverlay .gdn-art { height: 44px; } }
/* THE COLOSSEUM'S WAVE LINE (game/colosseum.js): which wave, how many are left, or how long till the next */
#playOverlay .col-hud { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  padding: 6px 16px; border-radius: 999px; font: 700 15px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: .02em; color: #ffe9a8;
  background: linear-gradient(#5a1f5e, #2b0f33); box-shadow: 0 0 0 2px #e0a93a, 0 4px 14px rgba(0, 0, 0, .45); text-shadow: 0 1px 0 #1c0a18; white-space: nowrap; }
#playOverlay .col-hud[hidden] { display: none; }
/* ONE GAME AT A TIME (2026-10-27, play.js stoppedHere): signed in on another device, or open in another window -- the
   game stopped under a veil, its card (the prize card's look) over it */
#playOverlay .play-stopped { position: fixed; inset: 0; z-index: 60; background: rgba(5, 6, 13, .72); pointer-events: auto; }
#playOverlay .play-stopped .col-prize { top: 30%; white-space: normal; }
/* THE COLOSSEUM'S PRIZE (2026-10-26, game/colosseum.js card): what a run earned, over the arena */
#playOverlay .col-prize { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); z-index: 6; min-width: 240px; max-width: min(340px, calc(100% - 32px));
  padding: 16px 22px 14px; border-radius: 12px; text-align: center; color: #ffe9a8; font: 600 15px/1.35 Georgia, 'Times New Roman', serif;
  background: linear-gradient(#5a1f5e, #2b0f33); box-shadow: 0 0 0 2px #e0a93a, 0 0 0 4px #2b0f33, 0 10px 30px rgba(0, 0, 0, .55); text-shadow: 0 1px 0 #1c0a18;
  animation: colPrizeIn .35s ease-out; }
@keyframes colPrizeIn { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
#playOverlay .col-prize-head { font: 700 26px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .04em; color: #ffd75a; }
#playOverlay .col-prize-sub { margin-top: 4px; font-size: 14px; color: #f3d9ff; }
#playOverlay .col-prize-list { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 4px; font-size: 17px; font-variant-numeric: tabular-nums; }
#playOverlay .col-prize-list .fp { color: #b8ffa0; }
#playOverlay .col-prize-list .gold { color: #ffd75a; }
#playOverlay .col-prize-list .seed { color: #ffb0f0; }
#playOverlay .col-prize-list .shard { color: #9fe8ff; }
#playOverlay .col-prize-note { margin-top: 8px; font-size: 13px; color: #e6c7f0; }
#playOverlay .col-prize-total { margin-top: 8px; font-size: 13px; color: #cfe9c2; }
#playOverlay .col-prize-ok { margin-top: 12px; padding: 5px 26px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1.2 Georgia, 'Times New Roman', serif;
  color: #2b0f33; background: linear-gradient(#ffe48a, #e0a93a); box-shadow: 0 2px 0 #8a5a12; }
#playOverlay .col-prize-ok:hover { filter: brightness(1.08); }

/* SETTINGS' CONTROLS (2026-10-29, game/controlsui.js): an action and its key a row, the boosts window's parchment */
#playOverlay .ctl .lb-card { width: min(480px, 100%); max-height: min(680px, 100%); }
#playOverlay .ctl-row { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; background: var(--paper-2); }
#playOverlay .ctl-what { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink); }
#playOverlay .ctl-key { min-width: 72px; padding: 5px 10px; border-radius: 7px; border: 2px solid var(--wood-2); background: var(--paper);
  font: 13px/1 var(--px); color: var(--ink); cursor: pointer; }
#playOverlay .ctl-key.on { background: var(--leaf); border-color: var(--leaf-3); color: #fff8e8; }
#playOverlay .ctl-switch { display: flex; gap: 4px; }
#playOverlay .ctl-switch .ctl-key { min-width: 44px; }
#playOverlay .ctl-said { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--paper-3); font-size: 12px; color: var(--ink); }
#playOverlay .ctl-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }