* { box-sizing: border-box; }

body {
  margin: 0;
  background: #14151a;
  color: #d6d6dc;
  font-family: 'Segoe UI', system-ui, sans-serif;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The play area scales to the screen. --cw is the canvas box's width: the game draws a 896×608
   view (plus its 2px border), shown 1:1 where the screen has room and scaled down to the width
   and height left otherwise; the sidebar keeps --sw. (1.4737 is 896/608, 0.678571 its inverse.) */
:root {
  --sw: 300px;
  --cw: min(900px, calc(100vw - var(--sw) - 72px), calc((100vh - 40px) * 1.4737));
  --ch: calc((var(--cw) - 4px) * 0.678571 + 4px);
}
@supports (height: 100dvh) {
  :root { --cw: min(900px, calc(100vw - var(--sw) - 72px), calc((100dvh - 40px) * 1.4737)); }
}

#game {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #1d1f27;
  border: 1px solid #2c2f3a;
  border-radius: 10px;
}

#stage {
  position: relative;
  line-height: 0; /* keeps the canvas from adding stray inline spacing */
  overflow: hidden; /* clips the panels' dim-the-game backdrop shadow to the play area */
}

/* …but the overlay panels are real text UI — restore normal line spacing so their
   lines don't collapse on top of each other (the canvas's line-height:0 was leaking in). */
#inventory,
#spellbook,
#craft,
#enchant,
#shop,
#dialogue,
#questlog,
#realmpanel,
#menu,
#charter,
#bank {
  line-height: 1.45;
}

#view {
  width: var(--cw);
  height: var(--ch);
  background: #000;
  border: 2px solid #2c2f3a;
  border-radius: 6px;
  image-rendering: pixelated;
}

/* Item & spell icons in the panels are the same pixel-art the canvas draws — keep them
   crisp (no smoothing) and centered in their cells. */
img.icon { image-rendering: pixelated; display: block; }
.det-icon, .reagent-icon, .grim-icon { display: inline-flex; align-items: center; justify-content: center; }

#mapname {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.55);
  color: #7fe3c9;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
  pointer-events: none;
}

#game { align-items: flex-start; }

/* Never wider than the screen: centring a play area wider than the body once pushed its left side
   off-screen where nothing could scroll to it (and stretched the page, so the fixed start screen
   centred its sign-in card off-screen too). The canvas scales to fit now (see --cw above), and
   the narrow layouts at the end of this file stack the sidebar under it. */
#game { max-width: 100vw; }

#sidebar {
  width: var(--sw);
  height: var(--ch); /* match the canvas box (608 + 2px border each side) so panels never grow the page */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#hud {
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding: 8px;
  background: #0f1014;
  border: 1px solid #2c2f3a;
  border-radius: 6px;
}

#hud[hidden] { display: none; }

#hud .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
}

#hud .lbl {
  width: 12px;
  text-align: center;
  font-weight: 700;
  color: #9a9daa;
}

#hud .track {
  position: relative;
  flex: 1;
  height: 14px;
  background: #05060a;
  border: 1px solid #2c2f3a;
  border-radius: 3px;
  overflow: hidden;
}

#hud .fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  transition: width 0.2s ease;
}

#hud .bar.hp .fill { background: #d64541; }
#hud .bar.en .fill { background: #4fae4f; }
#hud .bar.mp .fill { background: #3f77c9; }
#hud .bar.xp .fill { background: #c9a227; }

#hud .val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #eef;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

#combat {
  margin-top: 6px;
  font-size: 11px;
  color: #b7bacc;
  letter-spacing: 0.2px;
}

/* Active buffs (Might/Reach/Ward) as little countdown chips under the combat line. */
#statuses { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#statuses:empty { display: none; }
.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 11px; font-size: 10px; font-weight: 600;
  background: #0f1014; border: 1px solid #ffd76a;
}
.status-chip .sc-time { color: #9a9daa; font-weight: 400; }

.loghead {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6b6f7d;
  margin: 0 0 2px 2px;
}

#eventlog,
#chatlog {
  flex: 1 1 0;
  min-height: 0; /* let it scroll instead of pushing the layout */
  overflow-y: auto;
  padding: 6px 8px;
  background: #0f1014;
  border: 1px solid #2c2f3a;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}

#eventlog { margin-bottom: 8px; }
#eventlog .event { color: #c8b273; }
#chatlog .msg { color: #cfd2e0; }

#chatform { flex: 0 0 auto; margin-top: 8px; }

#adminlink { flex: 0 0 auto; margin-top: 8px; font-size: 12px; color: #c58aff; text-decoration: none; text-align: center; }
#adminlink:hover { text-decoration: underline; }
#adminlink[hidden] { display: none; }

#chatinput,
#nameinput {
  width: 100%;
  padding: 8px 10px;
  background: #0f1014;
  border: 1px solid #2c2f3a;
  border-radius: 6px;
  color: #e6e6ec;
  font-size: 14px;
}

#chatinput:focus,
#nameinput:focus { outline: none; border-color: #4f7fe6; }

#startscreen {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

#startscreen.hidden { display: none; }
/* under the games' top bar (topbar.js), which the body keeps a 40px band for */
body.gtb-on #startscreen { top: 40px; }

.panel {
  text-align: center;
  padding: 32px 40px;
  background: #1d1f27;
  border: 1px solid #2c2f3a;
  border-radius: 12px;
  max-width: 340px;
}

.panel h1 {
  margin: 0 0 8px;
  color: #7fe3c9;
  letter-spacing: 1px;
}

.panel p { color: #9a9daa; font-size: 14px; }

#joinform { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.panel button {
  padding: 10px;
  background: #4f7fe6;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.panel button:hover { background: #6a93ec; }

/* #inventory shares the lightbox panel styling below (with the workbench width bucket). */

.inv-title { font-size: 14px; font-weight: 700; color: #7fe3c9; margin-bottom: 8px; }
.inv-hint { font-size: 11px; font-weight: 400; color: #7b7f8d; }
.inv-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #6b6f7d; margin: 10px 0 4px; }

.inv-equip { display: flex; gap: 6px; }
/* A grid of item squares — shared by the inventory bag and the craft/enchant reagent lists, so
   the crafting UIs pull from your bag with the same look as the inventory. */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }

.slot {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #14151d;
  border: 1px solid #2c2f3a;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
}

.inv-equip .slot { width: 46px; height: 46px; aspect-ratio: auto; }
#stage > [tabindex="-1"]:focus { outline: none; } /* an open panel holds the keyboard start point, no ring */
button.slot { padding: 0; color: inherit; font-family: inherit; } /* item squares are buttons: only the square look */
.slot:focus-visible, .cslot:focus-visible { outline: 2px solid #ffd76a; outline-offset: 1px; } /* where the keyboard is */
.slot.empty { cursor: default; background: #0d0e13; border-style: dashed; }
.slot:not(.empty):hover { border-color: #4f7fe6; background: #1b1d27; }
.slot.sel { border-color: #7fe3c9; background: #16241f; box-shadow: 0 0 8px rgba(127, 227, 201, 0.3); }
.slot.ench { background: #1b1726; } /* enchanted items get a coloured inner ring (set inline) */
.slot.dim { opacity: 0.42; } /* a reagent with no copies left to add */
.slot.base { border-color: #e0a13a; box-shadow: 0 0 8px rgba(224, 161, 58, 0.35); } /* the enchant base */

.slot .slotlabel {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.3px;
  color: #6b6f7d;
  text-transform: uppercase;
  pointer-events: none;
}

.slot .qty {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 10px;
  font-weight: 700;
  color: #eef;
  text-shadow: 0 1px 1px #000;
}

/* Durability pip for a durable ('charges') reagent — a thin bar along the slot's bottom edge
   showing how many casts the current piece has left before it crumbles. */
.slot .charge {
  position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px;
  background: rgba(0, 0, 0, 0.55); border-radius: 2px; overflow: hidden; pointer-events: none;
}
.slot .charge-fill { display: block; height: 100%; background: #6fd0ff; }
.slot .charge-fill.low { background: #e0713a; }

/* Item detail pane (click an inventory item to inspect it) */
.inv-detail {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #2c2f3a;
  border-radius: 8px;
  background: #0f1014;
}
.inv-detail.empty { color: #6b6f7d; font-size: 12px; font-style: italic; }
.det-head { display: flex; align-items: center; gap: 10px; }
.det-icon { font-size: 30px; }
.det-name { font-size: 15px; font-weight: 700; color: #e6e6ec; }
.det-type { font-size: 11px; color: #8a8f9e; text-transform: uppercase; letter-spacing: 0.4px; }
.det-desc { font-size: 12px; color: #9a9daa; font-style: italic; margin-top: 8px; }
.det-magic { font-size: 12px; color: #c58aff; margin-top: 6px; }
.det-ability { font-size: 11px; color: #9a94ac; font-style: italic; margin-top: 4px; }
.det-actions { display: flex; gap: 8px; margin-top: 10px; }
.det-btn {
  padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 7px; cursor: pointer;
  border: 1px solid #2c2f3a; background: #191b24; color: #d6d6dc;
}
.det-btn.primary { background: #2f6f5a; border-color: #3f8f74; color: #eafff7; }
.det-btn.primary:hover { background: #3a8770; }
.det-btn.ghost:hover { border-color: #d64541; color: #ffb3b3; }

/* --- The overlay panels (bag, grimoire, altar, table, shop, dialogue, quests, waygate) ---
   Lightboxes over the play area, not sheets covering it: each centers itself, sizes to its
   content within a width bucket, and dims the game behind it (the huge shadow spread is the
   backdrop — #stage's overflow:hidden clips it to the play area). */
#inventory,
#spellbook,
#craft,
#enchant,
#shop,
#dialogue,
#questlog,
#realmpanel,
#menu,
#charter,
#bank {
  position: absolute;
  inset: 0;
  margin: auto; /* centered both ways (height is fit-content) */
  height: fit-content;
  max-height: calc(100% - 32px);
  z-index: 6;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(120, 80, 180, 0.22), transparent 60%),
    rgba(10, 9, 16, 0.96);
  border: 1px solid #3a3350;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 999px rgba(4, 3, 8, 0.6);
  padding: 18px 22px;
  overflow-y: auto;
  color: #d8d2e6;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Width buckets: workbenches need room for their grids; conversations stay intimate. */
#inventory, #craft, #enchant, #shop, #menu, #bank { width: min(800px, calc(100% - 32px)); }
#spellbook, #questlog { width: min(620px, calc(100% - 32px)); }
#dialogue, #realmpanel, #charter { width: min(540px, calc(100% - 32px)); }

#inventory[hidden], #spellbook[hidden], #craft[hidden], #enchant[hidden], #shop[hidden], #dialogue[hidden], #questlog[hidden], #realmpanel[hidden], #menu[hidden], #charter[hidden], #bank[hidden] { display: none; }

/* The charter's writing box (the realm-founding textarea). */
#charterText {
  width: 100%;
  resize: vertical;
  min-height: 96px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #181420;
  border: 1px solid #3a3350;
  color: #e6e0f2;
  font: inherit;
  font-size: 13px;
}
#charterText:focus { outline: none; border-color: #c58aff; }

/* --- the ⚙ menu (Esc / ☰) --- */
#menubtn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5; /* over the map, under any open panel */
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #3a3350;
  color: #cbc3de;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
#menubtn:hover { border-color: #c58aff; color: #fff; }

.menu-cols { display: flex; gap: 20px; }
.menu-col { flex: 1; min-width: 0; }
.menu-col .sb-section { margin-top: 10px; }
.menu-col .sb-section:first-child { margin-top: 0; }
.menu-name { font-size: 16px; font-weight: 700; color: #f2ecff; }
.menu-dim { font-size: 11px; color: #8a83a0; margin-top: 3px; }
.menu-stats { font-size: 13px; color: #e6e0f2; margin-top: 8px; letter-spacing: 0.3px; }
.menu-wait { font-size: 12px; color: #8a83a0; font-style: italic; }
.menu-xpbar { height: 8px; margin-top: 8px; border-radius: 4px; background: #241f33; overflow: hidden; }
.menu-xpbar .fill { height: 100%; background: linear-gradient(90deg, #7fe3c9, #6fbfe8); }
.menu-code {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #ffd76a;
  user-select: all; /* one click selects the whole gate-word for copying */
}
.ctl-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 2px 0; }
.ctl-key { color: #e9dcff; font-weight: 700; white-space: nowrap; }
.ctl-what { color: #9c94b5; text-align: right; }
.cdx-block { margin-bottom: 10px; }
.cdx-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: #7a7392; margin-bottom: 5px; }
.cdx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cdx-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9px;
  background: #221c30;
  border: 1px solid #3a3350;
  color: #cbc3de;
}
.cdx-chip.unknown { opacity: 0.38; font-style: italic; }

/* --- Pell's shop: gold in the header; Buy/Sell grids + a detail pane (see .shop-cols below) --- */
.shop-gold { margin-left: auto; font-size: 14px; font-weight: 700; color: #e6c66a; align-self: center; }

.sb-head { display: flex; align-items: center; gap: 12px; }
/* The talkable cast's pixel portrait in the dialogue header (48px art shown 2×, crisp). */
.dlg-face {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  border: 1px solid #3a3350;
  border-radius: 10px;
  background: #141020;
  flex: none;
}
/* An *action beat* inside NPC speech — dim italics, clearly not spoken words. */
.dlg-action { color: #9c8fc0; font-style: italic; opacity: 0.9; }
.sb-crest { font-size: 26px; color: #c58aff; text-shadow: 0 0 14px rgba(197, 138, 255, 0.6); }
.sb-title { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #e9dcff; }
.sb-sub { font-size: 11px; color: #8a83a0; font-weight: 400; }
.sb-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #7a7392; margin-bottom: 6px; }
.panel-x { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; background: #221c30; border: 1px solid #3a3350; color: #cbc3de; cursor: pointer; font-size: 13px; }
.panel-x:hover { border-color: #c58aff; color: #fff; }

.pv-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0; }
.pv-badge { font-size: 11px; padding: 3px 9px; border-radius: 12px; background: #211b30; border: 1px solid #35304a; color: #cbc3de; }
.pv-flavor { font-size: 12px; font-style: italic; color: #9d95b4; }

.sb-weave {
  padding: 9px 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
  background: linear-gradient(180deg, #7d4fca, #5a34a0); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; align-self: center;
  box-shadow: 0 3px 0 #3f2373, 0 6px 16px rgba(120, 60, 180, 0.4);
}
.sb-weave:disabled { background: #2c2740; color: #6a6280; box-shadow: none; cursor: default; }
.sb-weave:not(:disabled):hover { filter: brightness(1.1); }
.sb-weave:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #3f2373; }

/* Grimoire — list of crafted spells with a quick-cast toggle */
.grim-list { display: flex; flex-direction: column; gap: 8px; }
.grim-empty { font-size: 13px; color: #8a83a0; font-style: italic; line-height: 1.5; }
.grim-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  background: #14131d; border: 1px solid #2c2f3a;
}
.grim-icon { font-size: 24px; }
.grim-info { flex: 1 1 auto; min-width: 0; }
.grim-name { font-size: 15px; font-weight: 700; }
.grim-meta { font-size: 11px; color: #9a94ac; margin-top: 1px; }
.grim-assign {
  flex: 0 0 auto; padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: #211b30; color: #cbc3de; border: 1px solid #3a3350; border-radius: 8px; cursor: pointer;
}
.grim-assign:hover { border-color: #c58aff; }
.grim-assign.on { background: #2f2147; border-color: #c58aff; color: #eadcff; }

/* Reagent-cost chips under a grimoire spell (spellCostRow) — one per component. */
.grim-row.insufficient { opacity: 0.7; } /* you lack a reagent for it right now */
.grim-cost { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.gc-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: #6b6f7d; }
.gc-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; background: #16121f; border: 1px solid #322a44;
}
.gc-chip.cat { border-color: #e0a13a; } /* a wielded focus — free, not consumed */
.gc-chip.dur { border-color: #4f7fe6; } /* a durable reagent — deteriorates */
.gc-chip.miss { color: #d98a8a; border-color: #6a2f2f; background: #241416; font-weight: 700; font-size: 13px; }
.gc-mark { position: absolute; right: -3px; bottom: -4px; font-size: 10px; color: #e0a13a; text-shadow: 0 1px 1px #000; }

/* Arcane Altar / Enchanting Table — the addition table + detail on top, your bag (as an item
   grid) below. Column layout so the whole panel fits the stage without scrolling. */
.craft-body { display: flex; flex-direction: column; gap: 14px; }
.craft-main { display: flex; gap: 16px; align-items: stretch; }
.craft-altar { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.craft-slots { display: flex; gap: 10px; justify-content: center; }
.cslot {
  position: relative; width: 54px; height: 54px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: #16121f; border: 2px dashed #3a3350; color: #cfc7e0; cursor: pointer; font: inherit;
}
.cslot:disabled { cursor: default; } /* an empty altar or table square has nothing to press */
.cslot.filled { border-style: solid; border-color: #6a5acd; background: #1d1830; }
.cslot .cslot-ph { font-size: 22px; color: #4d4666; }
.craft-preview {
  min-height: 84px; border: 1px solid #322a44; border-radius: 10px; padding: 12px 14px;
  background: rgba(12, 10, 18, 0.75); text-align: center;
}
.cp-title { font-size: 16px; font-weight: 700; }
.cp-sub, .cp-hint { font-size: 12px; color: #9089a3; margin-top: 4px; }
.cp-hint { font-style: italic; padding: 16px 0; }
.cp-reveal { font-size: 11px; color: #7fd6a0; margin-top: 8px; }
.cp-fizzle .cp-title { color: #cc9a9a; }

.craft-bag { display: flex; flex-direction: column; gap: 6px; }
.reagent {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px;
  background: #16121f; border: 1px solid #322a44; color: #d8d2e6; text-align: left;
}
.reagent:hover { border-color: #6a5acd; background: #1d1830; }
.reagent.spent { opacity: 0.4; cursor: default; }
.reagent.is-base { border-color: #e0a13a; background: #241d10; }
.reagent.enchanted { border-color: #4a3d63; background: #1a1626; } /* an enchanted reagent (usable) */
.reagent.sel { border-color: #c58aff; background: #241a33; box-shadow: 0 0 8px rgba(197, 138, 255, 0.3); }

/* Selected-item detail — sits to the RIGHT of the addition table; shows what you've discovered
   about the selected bag item + its Add button. */
.craft-detail { flex: 1 1 260px; padding: 12px 14px; border: 1px solid #322a44; border-radius: 10px; background: rgba(12, 10, 18, 0.75); }
.craft-detail.empty { color: #7a7392; font-size: 12px; font-style: italic; }
.cd-head { display: flex; align-items: center; gap: 9px; }
.cd-icon { display: inline-flex; align-items: center; }
.cd-name { font-size: 14px; font-weight: 700; color: #e9dcff; }
.cd-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #8a83a0; }
.cd-magic { font-size: 12px; color: #7fd6a0; margin-top: 7px; }
.cd-magic.cd-unknown { color: #9089a3; font-style: italic; }
.cd-desc { font-size: 11px; color: #9089a3; font-style: italic; margin-top: 5px; }
.cd-note { font-size: 11px; color: #cc9a9a; margin-top: 7px; }
.cd-add {
  margin-top: 9px; padding: 7px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer;
  background: linear-gradient(180deg, #7d4fca, #5a34a0); color: #fff; border: none; border-radius: 8px;
}
.cd-add:hover:not(:disabled) { filter: brightness(1.1); }
.cd-add:disabled { background: #2c2740; color: #6a6280; cursor: default; }
/* Shop detail: a gold price line + a row of Buy / Sell / Sell-all buttons. */
.cd-price { font-size: 13px; font-weight: 700; color: #e8c15a; margin-top: 9px; }
.cd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cd-actions .cd-add { flex: 1 1 auto; margin-top: 5px; }
/* Shop: Buy + Sell grids stacked on the left (each scrolls if long), detail on the right. */
.shop-cols { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.shop-grid { max-height: 208px; overflow-y: auto; align-content: start; padding-right: 2px; }
.shop-sellbar { display: flex; gap: 8px; margin-top: 8px; }
.slot.multisel { border-color: #e0c04a; box-shadow: inset 0 0 0 2px rgba(224, 192, 74, 0.6); }
.reagent-icon { font-size: 20px; }
.reagent-name { flex: 1 1 auto; }
.reagent-ct { font-size: 11px; color: #9a94ac; }

/* --- Banner: big centered announcements (discovery / learn / level-up) --- */
#banner {
  position: absolute; top: 20%; left: 50%; transform: translate(-50%, -10px);
  text-align: center; pointer-events: none; opacity: 0; z-index: 5; line-height: 1.3;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#banner.show { opacity: 1; transform: translate(-50%, 0); }
.banner-label { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #c8b7ee; text-shadow: 0 0 10px rgba(150, 110, 220, 0.7); }
.banner-main { font-size: 30px; font-weight: 800; letter-spacing: 0.5px; color: #f2ecff; margin-top: 2px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 22px rgba(150, 110, 220, 0.5); }
.banner-sub { font-size: 13px; color: #b9b0d0; margin-top: 4px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }

/* --- Toast: brief bottom feedback (no mana / no target / fizzle) --- */
#toast {
  position: absolute; bottom: 92px; left: 50%; transform: translate(-50%, 8px);
  padding: 7px 16px; border-radius: 16px; font-size: 13px; font-weight: 600;
  pointer-events: none; opacity: 0; z-index: 5; white-space: nowrap;
  background: rgba(20, 18, 28, 0.92); border: 1px solid #3a3350; color: #e0dbec;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { border-color: #a3454a; color: #ffb3b3; }
#toast.fizzle { border-color: #6a5acd; color: #cdbcff; }
#toast.info { border-color: #3a3350; color: #cfd2e0; }

/* --- Hotbar: discovered spells bound to 1–5 --- */
#hotbar {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 4;
}
#hotbar:empty { display: none; }
.hb-slot {
  position: relative; width: 52px; height: 52px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: rgba(16, 14, 22, 0.9); border: 1px solid #3a3350; cursor: pointer;
}
.hb-slot:hover { border-color: #c58aff; }
.hb-slot.low { opacity: 0.45; }
.hb-key { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 700; color: #b9b0d0; }
.hb-mana { position: absolute; bottom: 1px; right: 4px; font-size: 9px; color: #7fb0ff; }

/* --- NPC dialogue (accept / turn in quests) --- */
.dlg-text { font-size: 14px; color: #cfc7e0; font-style: italic; line-height: 1.5; max-width: 640px; }
.dlg-quest { display: flex; flex-direction: column; gap: 8px; }
.dlg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.dlg-btn {
  padding: 8px 18px; font-size: 13px; font-weight: 700; border-radius: 8px; cursor: pointer; border: none;
  background: linear-gradient(180deg, #3a8f74, #2c6f5a); color: #eafff7;
}
.dlg-btn:hover { filter: brightness(1.1); }
.dlg-btn.ghost { background: #211b30; color: #cbc3de; border: 1px solid #3a3350; }
.dlg-btn.gold { background: linear-gradient(180deg, #d8a63a, #b07f22); color: #241a06; }

/* Free-text NPC conversation: the transcript + input under the quest UI. */
.dlg-chat {
  max-height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px; background: #14101f; border: 1px solid #2c2540; border-radius: 8px; font-size: 13px; line-height: 1.4;
}
.dlg-chat[hidden] { display: none; }
.dlg-line.you { color: #9fb7de; }
.dlg-line.npc { color: #e6dfc9; }
.dlg-line.memo { color: #ffd24a; font-size: 12px; font-style: italic; }
.dlg-typing { color: #6b6580; font-style: italic; font-size: 12px; animation: dlgpulse 1.2s ease-in-out infinite; }
@keyframes dlgpulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
#dlgTalkForm { display: flex; gap: 8px; }
#dlgTalkForm[hidden] { display: none; }
#dlgTalkInput {
  flex: 1; padding: 8px 10px; font-size: 13px; color: #e8e4f4; background: #191428;
  border: 1px solid #3a3350; border-radius: 8px; outline: none;
}
#dlgTalkInput:focus { border-color: #6a5a9a; }
#dlgTalkInput:disabled { opacity: 0.5; }
.shop-talk { padding: 6px 12px; font-size: 12px; }

/* Overheard NPC conversations in the chat log — someone talking nearby. */
#chatlog .msg.npc { color: #a89bc8; font-style: italic; }

/* The waygate / realm panel. */
.realm-where { font-size: 13px; color: #8fb6c9; }
.realm-visit { display: flex; flex-direction: column; gap: 6px; }
.realm-visit label { font-size: 12px; color: #9a9daa; }
.realm-visit-row { display: flex; gap: 8px; }
#realmVisitInput {
  width: 110px; padding: 8px 10px; font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
  color: #bfeeff; background: #101a24; border: 1px solid #2c4a5a; border-radius: 8px; outline: none;
  font-family: monospace;
}
#realmVisitInput:focus { border-color: #4f9fc6; }
.realm-code { font-size: 12px; color: #6b7c8a; }
/* The Vault: what is stored on the left, your bag on the right, one detail pane below. */
.vault-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vault-col { min-width: 0; }
/* How an NPC feels about you, beside their name in the talk panel (shared/mood.js). */
.mood-chip {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 9px; border-radius: 11px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px; color: #d9cff0;
  background: #221c30; border: 1px solid #3a3350;
}
.mood-chip[hidden] { display: none; }
/* What is left of today's AI allowance, said before it is spent (charter and waygate panels). */
.allowance { font-size: 12px; line-height: 1.45; color: #9a94ac; padding: 6px 10px; border-left: 2px solid #3a3350; }
.allowance[hidden] { display: none; }
/* Sample stories for the charter box. */
.charter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.charter-chip {
  padding: 5px 11px; border-radius: 14px; font: inherit; font-size: 12px; cursor: pointer;
  background: #221c30; border: 1px solid #3a3350; color: #cbc3de;
}
.charter-chip:hover { border-color: #c58aff; color: #fff; }
.charter-chip:focus-visible { outline: 2px solid #ffd76a; outline-offset: 1px; }
.realm-code b { color: #7fe3ff; font-family: monospace; font-size: 14px; letter-spacing: 3px; }

/* --- Quest cards (shared by the dialogue's offer/progress block and the quest log) --- */
.q-title { font-size: 15px; font-weight: 700; color: #7fe3c9; }
.q-summary { font-size: 12px; color: #9089a3; margin-top: 1px; }
.q-objs { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.q-obj { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d8d2e6; }
.q-obj .box { width: 15px; height: 15px; flex: 0 0 auto; border: 1.5px solid #4a4560; border-radius: 4px; text-align: center; line-height: 13px; font-size: 11px; color: #7fe3c9; }
.q-obj.done { color: #7fce8f; }
.q-obj.done .box { border-color: #3c7a4c; background: #16241a; }
.q-obj .cnt { margin-left: auto; font-size: 12px; color: #8a83a0; font-variant-numeric: tabular-nums; }
.q-rewards { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: #9089a3; }
.q-reward { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #191622; border: 1px solid #322a44; color: #e8c15a; }

/* --- Quest log (J) --- */
.quest-list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.quest-card { padding: 12px 14px; border: 1px solid #322a44; border-radius: 10px; background: rgba(12, 10, 18, 0.6); }
.quest-card.complete { border-color: #3c7a4c; box-shadow: 0 0 8px rgba(127, 227, 201, 0.15); }
.quest-card.done { opacity: 0.6; }
.quest-tag { float: right; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #7fe3c9; }
.quest-tag.done { color: #6b6f7d; }
.grim-empty.quest { padding: 40px 10px; text-align: center; }

/* --- Quest tracker (a compact reminder pinned under the map name) --- */
#questtracker {
  position: absolute; top: 38px; left: 8px; max-width: 260px;
  padding: 7px 11px; background: rgba(0, 0, 0, 0.6); border: 1px solid #322a44; border-left: 3px solid #7fe3c9; border-radius: 6px;
  color: #d8d2e6; font-size: 12px; line-height: 1.4; pointer-events: none;
}
#questtracker[hidden] { display: none; }
#questtracker .qt-name { color: #7fe3c9; font-weight: 700; font-size: 12px; }
#questtracker .qt-obj { color: #b9b0d0; margin-top: 2px; }
#questtracker .qt-obj .cnt { color: #8a83a0; }

/* --- In-game confirm modal (replaces window.confirm) --- */
#confirm, #disconnect {
  position: absolute; inset: 0; z-index: 20; line-height: 1.4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 3, 8, 0.66);
}
#confirm[hidden], #disconnect[hidden] { display: none; }
#disconnect { z-index: 30; } /* over every panel: nothing works until you are back in */
.confirm-box {
  width: min(380px, 82%); padding: 20px 22px; border-radius: 12px; text-align: center;
  background: radial-gradient(120% 90% at 50% -20%, rgba(120, 80, 180, 0.18), transparent 60%), #14121c;
  border: 1px solid #3a3350; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.confirm-title { font-size: 18px; font-weight: 800; color: #f2ecff; }
.confirm-msg { font-size: 13px; color: #b9b0d0; margin-top: 8px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.dlg-btn.danger { background: linear-gradient(180deg, #c24a4a, #9a2f2f); color: #fff; }

/* ====================================================================================
   Phones and small screens: the narrow layouts, and touch play (body.touch, set by game.js
   on a device whose pointer is a finger, or with ?touch=1).
   ==================================================================================== */

/* The on-screen pad. A fixed overlay at the bottom of the screen, over the canvas' side of the
   page; in the stacked layout below it sits in the page, under the canvas and the HUD. */
#touchpad { display: none; }
body.touch #touchpad {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  position: fixed;
  /* spans the canvas: #game is centred, so its left edge is half of what the canvas, the sidebar and
     the padding, border and gap (12 + 24 + 2) leave of the screen, and the canvas starts 12 in */
  left: calc((100vw - var(--cw) - var(--sw) - 38px) / 2 + 12px);
  width: calc(var(--cw) - 4px);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  pointer-events: none; /* only the pad and the buttons catch fingers, not the gap between */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body.touch #touchpad > * { pointer-events: auto; opacity: 0.9; }
#dpad {
  position: relative; flex: none; width: min(156px, 35vw); height: min(156px, 35vw); border-radius: 50%;
  background:
    radial-gradient(circle, rgba(127, 227, 201, 0.12) 0 22%, transparent 23%),
    rgba(15, 16, 20, 0.78);
  border: 2px solid #3a3350;
  touch-action: none;
}
.dp { position: absolute; font-size: 22px; line-height: 1; color: #6b6f7d; pointer-events: none; }
.dp.up { top: 12px; left: 50%; transform: translateX(-50%); }
.dp.down { bottom: 12px; left: 50%; transform: translateX(-50%); }
.dp.left { left: 14px; top: 50%; transform: translateY(-50%); }
.dp.right { right: 14px; top: 50%; transform: translateY(-50%); }
#dpad[data-dir="up"] .dp.up, #dpad[data-dir="down"] .dp.down,
#dpad[data-dir="left"] .dp.left, #dpad[data-dir="right"] .dp.right { color: #7fe3c9; }
#tpact { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tp-menu, .tp-main { display: flex; align-items: flex-end; gap: 8px; }
.tp-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: min(62px, 15vw); height: min(62px, 15vw); padding: 0; border-radius: 50%;
  background: rgba(29, 31, 39, 0.92); border: 2px solid #3a3350; color: #e6e6ec; font: inherit; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.tp-btn.small { width: min(48px, 12.5vw); height: min(48px, 12.5vw); }
.tp-btn.big { width: min(84px, 20vw); height: min(84px, 20vw); border-color: #d64541; background: rgba(110, 28, 28, 0.6); }
.tp-btn:active, .tp-btn.held { background: #2f6f5a; border-color: #7fe3c9; }
.tp-btn:focus-visible { outline: 2px solid #ffd76a; outline-offset: 2px; }
.tp-ico { font-size: 22px; line-height: 1; }
.tp-cap { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: #b9b0d0; }

/* Phones held sideways: less height, so a narrower sidebar and smaller pad. */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --sw: 210px; }
  body.gtb-on:has(.gtb[hidden]) { padding-top: 0; }
  #dpad { width: 126px; height: 126px; }
  .tp-btn { width: 54px; height: 54px; }
  .tp-btn.small { width: 44px; height: 44px; }
  .tp-btn.big { width: 70px; height: 70px; }
}

/* Stacked: phones upright and any narrow window. The canvas takes the width, the HUD sits right
   under it, then the pad, then the logs and chat. (The sidebar's own box dissolves so its parts
   can be ordered among the others.) */
@media (max-width: 700px), (max-width: 1100px) and (orientation: portrait) {
  body { height: auto; min-height: 100vh; min-height: 100dvh; align-items: flex-start; }
  body.gtb-on:has(.gtb[hidden]) { padding-top: 0; } /* the games' top bar only shows on the start screen and the menu */
  #game {
    flex-direction: column; align-items: stretch; width: 100%; padding: 6px; gap: 6px;
    border: 0; border-radius: 0;
  }
  #stage { width: 100%; }
  #view { width: 100%; height: auto; display: block; }
  #sidebar { display: contents; }
  #hud { order: 1; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 6px 8px; }
  #hud .bar { margin: 0; }
  #hud #combat, #hud #statuses { grid-column: 1 / -1; margin-top: 2px; }
  body.touch #touchpad {
    order: 2; position: static; width: auto; padding: 2px 4px 8px; pointer-events: auto;
  }
  #sidebar > :not(#hud) { order: 3; }
  #eventlog, #chatlog { flex: none; height: 110px; }
  .craft-main, .menu-cols { flex-direction: column; }
  .vault-cols { grid-template-columns: 1fr; }
  .craft-altar, .craft-detail { flex: 0 0 auto; } /* their row-direction flex-basis would become a height */
}

.inv-title { display: flex; align-items: center; gap: 8px; } /* room for its close button */

/* Touch panels: a finger needs bigger squares and buttons, and a phone's panels take the whole
   screen (scrolling inside) rather than a lightbox over a small canvas. */
body.touch { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.touch :is(#inventory, #spellbook, #craft, #enchant, #shop, #dialogue, #questlog, #realmpanel, #menu, #charter, #bank) {
  position: fixed; inset: 0; width: auto; height: auto; max-height: none; margin: 0;
  border-radius: 0; box-shadow: none; z-index: 40; padding: 14px 14px 28px;
}
body.touch:has(.gtb:not([hidden])) :is(#inventory, #spellbook, #craft, #enchant, #shop, #dialogue, #questlog, #realmpanel, #menu, #charter, #bank) { top: 40px; }
body.touch #confirm { position: fixed; z-index: 60; }
body.touch .item-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
body.touch .inv-equip .slot { width: 56px; height: 56px; }
body.touch .inv-equip { gap: 8px; }
body.touch .cslot { width: 64px; height: 64px; }
body.touch .shop-grid { max-height: none; }
body.touch .det-btn, body.touch .cd-add, body.touch .dlg-btn, body.touch .sb-weave, body.touch .grim-assign {
  min-height: 44px; padding-inline: 16px; font-size: 14px;
}
body.touch .panel-x { width: 44px; height: 44px; font-size: 16px; flex: none; }
body.touch .inv-hint, body.touch .sb-sub { font-size: 12px; }
body.touch #menubtn { width: 44px; height: 44px; font-size: 20px; }
body.touch .hb-slot { width: 56px; height: 56px; }
body.touch .charter-chip { min-height: 44px; padding-inline: 14px; font-size: 13px; }
#shopMulti { display: none; margin: 6px 0; }
body.touch #shopMulti { display: inline-flex; align-items: center; min-height: 44px; }
#shopMulti[aria-pressed="true"] { background: #4a3d12; border-color: #e0c04a; color: #ffe9a3; }