:root {
  --ui-ink: #f2e6bd;
  --ui-muted: #a9b79e;
  --ui-dim: #73806b;   /* disabled states and decorative hairlines only — never running text */
  --ui-well: #0f1813;
  --ui-panel: #1c2921;
  --ui-raised: #2a3a2f;
  --ui-hairline: rgba(198, 168, 91, .5);
  --ui-hairline-soft: rgba(198, 168, 91, .16);
  --font-body: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --ui-moss-0: #09110d;
  --ui-moss-1: #152119;
  --ui-moss-2: #1b2f22;
  --ui-moss-3: #244534;
  --ui-leaf: #78c884;
  --ui-leaf-bright: #a9e69a;
  --ui-brass: #c6a85b;
  --ui-brass-hi: #f2e6bd;
  --ui-leaded-teal: #2e6e6a;
  --ui-leaded-violet: #5c3b78;
  --ui-berry: #8a3b52;
  --ui-wood: #553b26;
  --ui-blue: #7fc8da;
  --ui-plan: #7fc8da;
  --ui-reflex: #e0c36f;
  --ui-violet: #bfa6f5;
  --ui-danger: #e77d72;
  --ui-shadow: rgba(1, 5, 3, .78);
}

/* Visually hidden labels/status remain available to assistive technology. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Canvas actions gain a real DOM mirror for screen readers and keyboard play.
   It stays off-stage until one of its buttons receives focus, then becomes a
   compact ordinary panel instead of leaving a sighted keyboard user stranded
   on an invisible control. */
.nearby-action-mirror {
  position: fixed;
  left: -120vw;
  top: 88px;
  z-index: 30;
  width: min(320px, calc(100vw - 24px));
  max-height: min(55vh, 420px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(198, 168, 91, 0.58);
  border-radius: 12px;
  background: rgba(19, 31, 24, 0.97);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.nearby-action-mirror:focus-within { left: 12px; }
.nearby-action-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nearby-action-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nearby-action-target { flex: 1 0 100%; color: #f2e6bd; font-size: 12px; }
.nearby-action-list button {
  padding: 7px 9px;
  border: 1px solid rgba(131, 149, 122, 0.45);
  border-radius: 8px;
  background: rgba(39, 61, 46, 0.95);
  color: #e6edf3;
  font: inherit;
  font-size: 11px;
}

html, body {
  color: var(--ui-ink);
  font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}

/* One focus ring for everything interactive; selection and focus may coexist. */
:where(button, [role="switch"], [role="button"], input, select, textarea, summary, a):focus-visible {
  outline: 3px solid #d6e9a7;
  outline-offset: 2px;
}
/* Keyboard-key hints mean nothing to a thumb. */
@media (pointer: coarse) { #plancard .keyhint { display: none; } }

.ui-icon {
  --icon-leaf: #5f7d49;
  --icon-fill: .9;
  --icon-stroke: 2.08;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  overflow: visible;
  color: currentColor;
  vertical-align: -.23em;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
  pointer-events: none;
}

.action-emoji {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  flex: none;
  font: 16px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 1px 0 #0009);
}
#hovermenu .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#hovermenu .btn .action-emoji { font-size: 15px; }

.gbuy, .shoptab, #shop .btn, .mbtn, #namego, #gback, .gbtn { align-items: center; gap: 7px; }
.gbuy .ui-icon, .shoptab .ui-icon, #shop .btn .ui-icon, .mbtn .ui-icon, #namego .ui-icon, #gback .ui-icon { flex: 0 0 auto; width: 16px; height: 16px; }
.gbuy, .shoptab, #shop .btn, .mbtn, #namego, #gback { display: inline-flex; justify-content: center; }
.gbtn { display: flex; }
.gbtn > .ui-icon { flex: 0 0 auto; width: 25px; height: 25px; color: #e4ce7f; }
.gbtn > span { display: flex; min-width: 0; flex-direction: column; }
.shop-title, .shop-section-title, .shop-state, .shop-hint, #shopwallet, .owned { display: inline-flex; align-items: center; gap: 6px; }
.shop-title, .shop-section-title { color: var(--ui-brass-hi); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.shop-section-title { margin-bottom: 6px; }
.shop-section-title.divided { display: flex; margin: 10px 0 7px; padding-top: 8px; border-top: 1px solid rgba(205, 169, 93, .18); }
.shop-title .ui-icon, .shop-section-title .ui-icon, .shop-state .ui-icon, .shop-hint .ui-icon, #shopwallet .ui-icon, .owned .ui-icon { width: 15px; height: 15px; }
.shop-state.installed, .owned { color: var(--ui-leaf-bright); }
.shop-state.locked, .shop-hint { color: var(--ui-muted); }
.shop-hint { margin-top: 8px; font-size: 11.5px; }

.panel {
  position: fixed;
  color: var(--ui-ink);
  /* One background, one border, one shadow. Persistent panels sit light enough
     that they stop punching holes in the sunlit meadow. */
  background: linear-gradient(150deg, rgba(30, 48, 37, .95), rgba(16, 27, 20, .96));
  border: 1px solid var(--ui-hairline);
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .48);
}
.panel > * { position: relative; z-index: 1; }

.btn,
.rpg-button,
.panel-close {
  min-height: 34px;
  color: var(--ui-ink);
  background: linear-gradient(160deg, #2d533d, #162a20);
  border: 1px solid var(--ui-hairline);
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(4, 9, 6, .72);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .09s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
}

.btn:hover,
.rpg-button:hover,
.panel-close:hover {
  border-color: var(--ui-brass-hi);
  filter: brightness(1.12);
}

.btn:active,
.rpg-button:active,
.panel-close:active {
  transform: translateY(2px) scale(.97);
  box-shadow: 0 1px 0 rgba(4, 9, 6, .72);
}

.button-label { margin-left: 7px; }

.game-panel-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: -2px -1px 10px;
  padding: 0 2px 11px;
  border-bottom: 1px solid var(--ui-hairline-soft);
}

.game-panel-header > .ui-icon,
.panel-title-icon {
  box-sizing: content-box;
  width: 23px;
  height: 23px;
  padding: 8px;
  color: #f2e6bd;
  background:
    radial-gradient(circle, rgba(18, 38, 27, .94) 0 48%, transparent 50%),
    conic-gradient(from -15deg, var(--medallion-a, var(--ui-leaded-teal)) 0 12.5%, #304f4b 12.5% 25%, var(--medallion-b, var(--ui-leaded-violet)) 25% 37.5%, #6b4152 37.5% 50%, #496c42 50% 62.5%, var(--medallion-a, var(--ui-leaded-teal)) 62.5% 75%, #53376e 75% 87.5%, var(--ui-berry) 87.5%);
  border: 2px solid #8f743f;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #17231a, inset 0 0 0 3px rgba(242, 230, 189, .28), 0 2px 7px #0009;
}
#places { --medallion-a: #2e6e6a; --medallion-b: #486f5b; }
#bag { --medallion-a: #78633b; --medallion-b: #8a3b52; }
#wardrobe { --medallion-a: #5c3b78; --medallion-b: #8a3b52; }
#instincts { --medallion-a: #4e6b3f; --medallion-b: #2e6e6a; }
#settings { --medallion-a: #7a5f38; --medallion-b: #4e6b3f; }

.panel-heading { min-width: 0; flex: 1; }
.panel-kicker {
  margin-top: 2px;
  color: var(--ui-brass);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--ui-muted);
  cursor: pointer;
}
.panel-close .ui-icon { width: 18px; height: 18px; }
.panel-count {
  color: var(--ui-brass-hi);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A carved field-guide clasp: wood chips, gilded stamps, berry counters. */
#topbtns {
  gap: 7px;
  padding: 7px;
  background: linear-gradient(150deg, rgba(30, 48, 37, .95), rgba(16, 27, 20, .96));
  border: 1px solid var(--ui-hairline);
  border-radius: 14px;
  box-shadow: 0 9px 30px rgba(0, 0, 0, .42);
}

#topbtns .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  color: #f6e6b8;
  --icon-leaf: #6f8d50;
  background: linear-gradient(155deg, #2a3a2f, #16241b);
  border-color: rgba(198, 168, 91, .4);
  border-radius: 12px;
  box-shadow: 0 3px 0 #0b140e;
}

#topbtns .btn .ui-icon { width: 25px; height: 25px; }
#topbtns .btn:hover .ui-icon { animation: fieldguide-wiggle .24s ease-in-out; }
@keyframes fieldguide-wiggle { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-3deg) translateY(-1px); } 70% { transform: rotate(2deg); } }
#topbtns .btn[aria-pressed="true"],
#topbtns .btn[aria-expanded="true"],
#topbtns .btn.open {
  color: #fff5c7;
  border-color: var(--ui-brass-hi);
  --icon-leaf: #88aa60;
  background: radial-gradient(circle at 50% 42%, rgba(171, 221, 112, .42), transparent 58%), linear-gradient(155deg, #526c38, #263a24 58%, #182219);
  box-shadow: inset 0 0 10px rgba(179, 230, 114, .2), inset 0 2px 0 rgba(255, 247, 198, .16), 0 0 18px rgba(142, 212, 125, .3);
}
#topbtns #guidebtn { display: none; }

#topbtns .ct,
#bagbtn .ct,
#instbtn .ct {
  right: -5px;
  top: -6px;
  min-width: 14px;
  height: 16px;
  padding: 0 4px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff0d0;
  background: radial-gradient(circle at 35% 28%, #db7c73, #8a3b52 62%, #4f2232 100%);
  border: 1px solid #f0b39a;
  border-radius: 50%;
  box-shadow: 0 2px 6px #000b;
  font: 700 11px/16px ui-rounded, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
/* The bag count is not actionable information; the instinct points badge is. */
#bagbtn .ct { display: none !important; }

/* Hero HUD: portrait/vitals over two large fantasy verbs. */
#hud {
  width: 232px;
  padding: 11px;
  border-color: var(--ui-hairline);
}
#hud .hudrow { gap: 11px; }
#face, #npcface {
  background: radial-gradient(circle at 50% 30%, #436847, #15241b 70%);
  border: 1px solid rgba(229, 204, 142, .62);
  border-radius: 13px;
  box-shadow: inset 0 0 0 2px rgba(4, 10, 6, .5), 0 3px 12px #0008;
}
#hud b { color: #fff2c7; font: 700 16px/1 var(--font-display); letter-spacing: .02em; }
#conn { display: block; margin-top: 3px; color: var(--ui-muted) !important; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }   /* F46: lifted off --ui-dim for legibility */
#glimmerCt { color: var(--ui-leaf-bright) !important; }
#hpwrap, #xpwrap { border: 1px solid rgba(0, 0, 0, .45); background: #07100b; }
#hpbar { background: linear-gradient(90deg, #477a45, #9ad26f, #d7e985); box-shadow: inset 0 1px 0 #ffffff33; }
#xpbar { background: linear-gradient(90deg, #9a7436, #f0c76d, #fff0a0); }
#xpline { color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#hudbtns { gap: 9px; margin-top: 10px; }
.bigbtn {
  --icon-leaf: #789554;
  position: relative;
  justify-content: flex-start;
  height: 46px;
  padding: 0 12px;
  overflow: hidden;
  color: #fff1c9;
  background: linear-gradient(155deg, #35543c, #182a1e);
  border: 1px solid var(--ui-hairline);
  border-radius: 12px;
  box-shadow: 0 4px 0 #08110c;
}
.bigbtn .ui-icon { width: 26px; height: 26px; z-index: 1; }
.bigbtn .btn-copy { z-index: 1; min-width: 0; margin-left: 8px; text-align: left; }
#hud .bigbtn .btn-copy b { display: block; color: #fff3c9; font: 700 12px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.bigbtn .btn-copy small { display: none; }
.bigbtn:hover { border-color: #f1d27d; box-shadow: 0 4px 0 #08110c, 0 0 22px rgba(135, 209, 120, .24); }
.bigbtn:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 #08110c; }
.bigbtn:disabled { opacity: .46; cursor: not-allowed; filter: saturate(.55); transform: none; }
.bigbtn.listening { color: #fff3d2; border-color: #f29d79; background: radial-gradient(circle at 30% 30%, rgba(238, 143, 102, .35), transparent 50%), linear-gradient(155deg, #6b3d2e, #261b17); }

/* Core inventory/map surfaces. */
#places, #bag, #wardrobe {
  top: 72px;
  right: 14px;
  box-sizing: border-box;
  padding: 13px;
}
#places {
  z-index: 6;
  width: 318px;
  max-height: calc(100dvh - 86px);
  overflow: auto;
}
#places.expanded {
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 20;
  width: min(920px, calc(100vw - 120px));
  max-height: calc(100dvh - 32px);
  transform: translate(-50%, -50%);
  /* scrim law: the takeover map dims the world behind it */
  box-shadow: 0 0 0 100vmax rgba(2, 7, 4, .62), 0 14px 44px rgba(0, 0, 0, .48);
}
#bag { width: 326px; }
#wardrobe { width: 390px; }
#mapexpand {
  width: 34px;
  height: 34px;
  padding: 7px;
  color: #f5dc99;
  cursor: pointer;
}
#mapexpand:hover { border-color: #f1d27d; }
#mapexpand span::before { content: "⛶"; font: 700 18px/1 ui-monospace, monospace; }
#places.expanded #mapexpand span::before { content: "⊡"; }
.map-canvas-wrap {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(205, 169, 93, .44);
  border-radius: 10px;
  background: #101b13;
  box-shadow: inset 0 0 18px #0008;
}
#minimap, #worldmap {
  width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
  cursor: crosshair;
  touch-action: manipulation;
}
.world-map-layout {
  display: block;
  margin-top: 10px;
}
.compact-map-main { display: block; margin-bottom: 8px; }
.world-map-main { display: none; min-width: 0; }
#places.expanded .world-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 13px; align-items: start; }
#places.expanded .compact-map-main { display: none; }
#places.expanded .world-map-main { display: block; }
#maplegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  padding: 8px 3px 3px;
  color: #aebba8;
  font: 700 11px/1 ui-rounded, system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#maplegend span { display: inline-flex; align-items: center; gap: 5px; }
#maplegend i { display: inline-block; width: 8px; height: 8px; box-sizing: border-box; }
.legend-you { border: 2px solid #fff3c4; border-radius: 50%; background: #7fc8da; box-shadow: 0 0 5px #7fc8da; }
.legend-ball { border-radius: 50%; background: #f18b38; box-shadow: 0 0 0 2px #8c3f19; }
.legend-place { transform: rotate(45deg); background: #f1d27d; }
.legend-route { height: 3px !important; background: #a8bc78; box-shadow: 0 1px #32492c; }
#mapstatus {
  min-height: 15px;
  padding: 5px 3px 0;
  color: #d6c99d;
  font: 600 12px/1.35 ui-rounded, system-ui, sans-serif;
}
#maptooltip {
  position: fixed;
  z-index: 70;
  display: none;
  max-width: min(260px, 70vw);
  padding: 7px 9px;
  color: #fff3c4;
  background: rgba(5, 12, 7, .96);
  border: 1px solid rgba(241, 210, 125, .64);
  border-radius: 8px;
  box-shadow: 0 5px 16px #000a;
  font: 700 12px/1.35 ui-rounded, system-ui, sans-serif;
  pointer-events: none;
}
#placelist { display: grid; grid-template-columns: 1fr; gap: 7px; line-height: 1.3; align-content: start; }
#places.expanded #placelist { grid-template-columns: 1fr; }
#placelist .p, #placelist .u { min-width: 0; min-height: 52px; padding: 6px 8px; border-radius: 9px; background: var(--ui-raised); }
#placelist .p {
  appearance: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: #d8e8cf;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#placelist .p:hover { color: #fff0b4; background: rgba(95, 133, 70, .3); }
#placelist .u { display: flex; align-items: center; gap: 9px; color: #849180; }
.place-mystery { display: grid; place-items: center; width: 34px; height: 34px; border: 1px dashed rgba(137, 153, 126, .38); border-radius: 50%; font: 700 16px var(--font-body); }
.place-art { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: radial-gradient(circle, rgba(98, 143, 87, .2), rgba(4, 11, 7, .12)); }
.place-art img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; transform: scale(1.25); }
.place-art .ui-icon { width: 25px; height: 25px; color: var(--ui-plan); }
.place-copy { min-width: 0; }
.place-copy b { display: block; overflow: hidden; color: #eef1da; font: 700 13px/1.2 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.place-copy > span { display: block; margin-top: 2px; overflow: hidden; color: #a9b6a4; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.place-copy .place-warning { display: flex; align-items: center; gap: 4px; color: #e6c98b; }
.place-warning .ui-icon { width: 13px; height: 13px; flex: none; }
.place-badge { padding: 3px 7px; color: var(--threat, #e9cc7e); background: rgba(5, 12, 8, .52); border: 1px solid color-mix(in srgb, var(--threat, #e9cc7e) 48%, transparent); border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.place-badge.safe { color: #a8d6a1; border-color: rgba(139, 200, 132, .35); }
#baggrid { gap: 8px; }
#baggrid .slot {
  position: relative;
  border: 0;
  border-radius: 10px;
  background: var(--ui-raised);
}
#baggrid .slot:not(.filled)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 21px;
  background: linear-gradient(145deg, rgba(126, 160, 83, .12), rgba(126, 160, 83, .035));
  border: 1px solid rgba(166, 191, 119, .13);
  border-radius: 100% 0 100% 0;
  transform: translate(-50%, -50%) rotate(34deg);
  box-shadow: inset -3px -3px 7px rgba(0, 0, 0, .2);
}
#baggrid .slot.filled:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 14px #0007; }
#baggrid .slot.sel { box-shadow: 0 0 0 2px var(--ui-brass-hi), 0 0 14px rgba(242, 230, 189, .35); }
#bagdetail { padding: 11px; border: 0; border-radius: 10px; background: rgba(5, 12, 8, .44); }
.bagdetail-lead { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 11px; align-items: center; }
.bagdetail-art { display: grid; place-items: center; width: 62px; height: 62px; border: 0; border-radius: 12px; background: var(--ui-raised); }
.bagdetail-art img, .bagdetail-art .ph { display: grid; place-items: center; width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; border-radius: 10px; }
.bagdetail-copy { min-width: 0; }
#bagdetail .dn { color: #fff0bd; font: 700 15px/1.25 var(--font-body); }
#bagdetail .dr { margin: 2px 0 4px; font-size: 11.5px; }
#bagdetail .dl { color: #cdd8c2; font-size: 12.5px; font-style: normal; line-height: 1.5; }
#bagdetail .dv { font-size: 12px; }

#dollwrap img.doll {
  box-sizing: border-box;
  width: 112px;
  height: 112px;
  padding: 8px;
  border: 1.5px solid var(--ui-brass);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #2f5137, #182a1e 72%);
  box-shadow: 0 4px 15px #0009;
}
#slotrow { gap: 8px; }
.wslot {
  border: 0;
  border-radius: 10px;
  background: var(--ui-raised);
}
.wslot .se { opacity: .68; color: #9fbf9a; }
.wslot .se .ui-icon { width: 23px; height: 23px; }
.wslot .sl { color: #8f9e87; }
.wslot.filled { box-shadow: 0 0 0 2px var(--ui-brass-hi); }
#wbaglist { border-top-color: rgba(205, 169, 93, .22); }
#wbaglist .wrow { min-height: 42px; padding: 8px 3px; border: 0; border-bottom: 1px solid rgba(130, 155, 114, .17); border-radius: 0; background: transparent; }
#wbaglist .wrow:last-child { border-bottom: 0; }
#wbaglist .wrow img, #wbaglist .wrow .ph { width: 34px; height: 34px; }
#wbaglist .wrow .wn { font-size: 13px; }
#wbaglist .wrow .wn small { font-size: 11px; letter-spacing: .04em; }
#wbaglist .wrow button { font-size: 12px; }

/* The skill builder is a real character-builder surface: three branches, four nodes each. */
#instincts {
  top: 50%;
  left: 50%;
  right: auto;
  width: min(980px, calc(100vw - 42px));
  max-height: min(780px, calc(100dvh - 42px));
  box-sizing: border-box;
  padding: 16px;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  z-index: 18;
  border-color: var(--ui-hairline);
  background: linear-gradient(150deg, rgba(30, 50, 38, .97), rgba(12, 22, 16, .985));
}
#instincts::after {
  content: "";
  position: fixed;
  inset: -100vmax;
  z-index: -1;
  background: rgba(2, 7, 4, .62);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.skill-overview {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: -1px 0 13px;
  padding: 9px 12px;
  color: #c8d8bf;
  background: rgba(4, 12, 7, .35);
  border: 0;
  border-radius: 12px;
}
.skill-overview .ui-icon { width: 36px; height: 36px; color: var(--ui-leaf-bright); }
.skill-overview-copy { min-width: 0; flex: 1; }
.skill-overview-copy b { color: #fff0bf; font: 700 14px var(--font-body); }
.skill-overview-copy small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 12px; }
.skill-points {
  display: grid;
  place-items: center;
  min-width: 60px;
  height: 54px;
  color: #182015;
  background: radial-gradient(circle at 45% 30%, #f7e29d, #cda353 70%);
  border: 2px solid #ffedb0;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(236, 204, 113, .28);
  font: 700 24px/1 ui-rounded, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.skill-points small { display: none; }
.skill-branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.skill-branch {
  --branch: #8bcf8b;
  position: relative;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.skill-branch::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 62px;
  bottom: 27px;
  width: 2px;
  background: linear-gradient(var(--branch), color-mix(in srgb, var(--branch) 15%, transparent));
  opacity: .3;
}
.branch-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--branch) 16%, #131f17);
  border-radius: 10px;
}
.branch-banner > .ui-icon {
  width: 34px;
  height: 34px;
  padding: 6px;
  color: var(--branch);
  background: rgba(0, 0, 0, .25);
  border: 1px solid color-mix(in srgb, var(--branch) 55%, transparent);
  border-radius: 50%;
}
.branch-banner b { display: block; color: color-mix(in srgb, var(--branch) 70%, white); font: 700 16px/1.1 var(--font-display); letter-spacing: .02em; }
.branch-banner small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; }
.branch-spend { margin-left: auto; color: color-mix(in srgb, var(--branch) 70%, white); font-size: 11px; font-weight: 700; white-space: nowrap; }
.skill-node {
  position: relative;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 34px;
  gap: 9px;
  align-items: center;
  min-height: 64px;
  margin: 7px 0;
  padding: 9px;
  background: var(--ui-raised);
  border: 0;
  border-radius: 10px;
}
.skill-node.capstone { border: 1px solid color-mix(in srgb, var(--branch) 65%, #d8bd70); background: color-mix(in srgb, var(--branch) 10%, var(--ui-raised)); }
.skill-node.locked { filter: saturate(.42); }
.skill-node.locked .skill-rune, .skill-node.locked .skill-state { opacity: .58; }
.skill-rune {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: color-mix(in srgb, var(--branch) 75%, white);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--branch) 23%, #213127), #0b1510 70%);
  border: 1px solid color-mix(in srgb, var(--branch) 52%, #6c6345);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #02060466, 0 0 10px color-mix(in srgb, var(--branch) 14%, transparent);
}
.skill-rune .ui-icon { width: 25px; height: 25px; }
.skill-copy { min-width: 0; }
.skill-copy b { display: block; color: #f2ecd7; font-size: 15px; line-height: 1.25; }
.skill-copy small { display: block; margin-top: 3px; color: #b9c6b0; font-size: 12px; line-height: 1.4; }
.rank-pips { display: flex; gap: 3px; margin-top: 5px; }
.rank-pip { width: 14px; height: 4px; background: #253029; border: 1px solid #405046; border-radius: 3px; }
.rank-pip.lit { background: linear-gradient(90deg, var(--branch), color-mix(in srgb, var(--branch) 70%, white)); border-color: color-mix(in srgb, var(--branch) 70%, white); box-shadow: 0 0 5px color-mix(in srgb, var(--branch) 38%, transparent); }
.learn-rank, .skill-state {
  display: grid;
  place-items: center;
  width: 33px;
  min-height: 33px;
  padding: 0;
  color: #fff2bd;
  border-radius: 50%;
}
.learn-rank .ui-icon, .skill-state .ui-icon { width: 17px; height: 17px; }
.skill-state { color: var(--branch); border: 1px solid color-mix(in srgb, var(--branch) 50%, transparent); }
.skill-state.locked { color: #899087; border-color: #555e56; }
#instfoot { display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 11px; padding-top: 10px; color: var(--ui-muted); border-top-color: var(--ui-hairline-soft); }
#instfoot button { display: inline-flex; align-items: center; gap: 6px; }

/* Quest tracker: a compact entry into the full behavior codex. */
#orders {
  width: 318px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-color: var(--ui-hairline);
  background: linear-gradient(150deg, rgba(28, 44, 36, .95), rgba(14, 24, 18, .96));
}
#orders:hover { border-color: var(--ui-blue); }
.orders-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #e8f2df; }
.orders-head > .ui-icon { width: 23px; height: 23px; color: var(--ui-plan); }
.orders-title { font: 700 15px var(--font-display); }
/* the whole panel is the button; a quiet chevron is the only hint */
.orders-open { margin-left: auto; color: var(--ui-muted); font-size: 16px; line-height: 1; }
#rawcmd {
  overflow: hidden;
  margin: 2px 0 5px;
  color: #e6d79f !important;
  font: 700 12.5px/1.45 ui-rounded, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#rules { margin: 5px 0 0; padding-left: 0; color: #b5c4ab; font-size: 12.5px; list-style: none; }
/* the mini panel shows the plan at a glance: the quote plus a strip of action
   marks; the full picture lives one tap deeper in the Behavior view */
#rules .mini-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.mini-act { display: inline-grid; place-items: center; width: 28px; height: 28px; color: #eef0cc; background: var(--ui-raised); border-radius: 50%; }
.mini-act .ui-icon { width: 16px; height: 16px; }
.mini-act .action-emoji { font-size: 15px; }
.mini-act.now { box-shadow: 0 0 0 2px var(--ui-plan); }
.mini-act.done { opacity: .45; }
.mini-act.more, .mini-act.loop { color: var(--ui-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
#rules li { margin-top: 3px; line-height: 1.35; }
#rules code { color: #91d1ad; font-family: inherit; }
#taskinfo { color: #9fc4bc; font-size: 12px; }
#tally .trow { display: flex; flex-wrap: wrap; gap: 5px; color: #a5b6a0; }
#tally .trow span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border: 0; border-radius: 999px; background: var(--ui-raised); font-variant-numeric: tabular-nums; }
#tally .trow .ui-icon, #reflexchip .ui-icon { width: 12px; height: 12px; vertical-align: -2px; }
#reflexchip { display: inline-flex; align-items: center; gap: 3px; color: var(--ui-reflex); }
#reflexchip .ui-icon { color: var(--ui-reflex); }

/* Behavior Codex: plan, actions, triggers, and saved routines share one wide view. */
#plancard, #planview {
  align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 14%, rgba(91, 142, 105, .24), transparent 38%),
    rgba(2, 7, 4, .82);
  backdrop-filter: blur(5px);
}
#plancard .card, #planview .card {
  position: relative;
  box-sizing: border-box;
  max-height: calc(100dvh - 36px);
  padding: 16px;
  color: var(--ui-ink);
  background: linear-gradient(150deg, rgba(30, 50, 38, .99), rgba(10, 20, 14, .995));
  border: 1px solid rgba(198, 168, 91, .6);
  border-radius: 16px;
  box-shadow: 0 24px 90px #000d;
}
#planview .card { width: min(1080px, calc(100vw - 36px)); }
#plancard .card { width: min(820px, calc(100vw - 36px)); }
#plancard .hdr, #planview .hdr { position: relative; align-items: center; margin: 0; padding: 2px 3px 16px; border-bottom: 0; }
#plancard .hdr::after, #planview .hdr::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 1px;
  background: var(--ui-hairline-soft);
}
#plancard .hdr img, #planview .hdr img {
  box-sizing: border-box;
  width: 58px;
  height: 58px;
  padding: 5px;
  border: 2px solid #9b7d42;
  border-radius: 50%;
  background: radial-gradient(circle, #365c3c 0 53%, transparent 55%), conic-gradient(from -12deg, #2e6e6a, #4a4942, #5c3b78, #8a3b52, #4e6b3f, #2e6e6a, #5c3b78, #7a5f38, #2e6e6a);
  box-shadow: inset 0 0 0 2px #142119, 0 3px 10px #0009;
}
#plancard .kicker, #planview .kicker { color: var(--ui-brass); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
#plancard .say, #planview .say { margin-top: 4px; color: #f4efd9; font: 700 16px/1.3 var(--font-body); }
.codex-close { margin-left: auto; }
.behavior-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .92fr); gap: 11px; margin-top: 12px; }
.behavior-grid.empty-plan { grid-template-columns: 1fr; }
.behavior-grid.empty-plan .reflex-pane { order: -1; }
.behavior-pane {
  min-width: 0;
  padding: 11px;
  background: rgba(4, 12, 7, .4);
  border: 0;
  border-radius: 12px;
}
.pane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pane-head > .ui-icon { width: 23px; height: 23px; color: var(--ui-plan); }
.reflex-pane .pane-head > .ui-icon { color: var(--ui-reflex); }
.pane-head b { color: #f5efd7; font: 700 15px var(--font-display); }
.pane-head small { margin-left: auto; color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.plan-command {
  margin-bottom: 8px;
  padding: 9px 11px;
  color: #e8ddb9;
  background: rgba(8, 18, 12, .5);
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#plancard ol.plan, #planview ol.plan { gap: 7px; margin: 7px 0 0; }
#plancard ol.plan li, #planview ol.plan li {
  position: relative;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  color: #dde4d5;
  background: rgba(8, 18, 12, .6);
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}
#plancard ol.plan li .pri, #planview ol.plan li .pri { min-width: 56px; color: var(--ui-brass); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
#plancard ol.plan li .aicon, #planview ol.plan li .aicon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #eef0cc;
  background: linear-gradient(145deg, #3d5334, #1c2c21);
  border: 0;
  border-radius: 50%;
}
#plancard ol.plan li .aicon .ui-icon, #planview ol.plan li .aicon .ui-icon { width: 16px; height: 16px; }
#plancard ol.plan li .aicon .action-emoji, #planview ol.plan li .aicon .action-emoji { width: 22px; height: 22px; font-size: 17px; }
#plancard ol.plan li > .rule-x, #planview ol.plan li > .rule-x, #rules .rule-x {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0;
  color: #cdbd88;
  background: linear-gradient(155deg, #2b3826, #141b14);
  border: 1px solid rgba(198, 168, 91, .3);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font-size: 0;
}
#plancard ol.plan li > .rule-x .ui-icon, #planview ol.plan li > .rule-x .ui-icon, #rules .rule-x .ui-icon { width: 13px; height: 13px; }
#plancard ol.plan li > .rule-x:hover, #planview ol.plan li > .rule-x:hover, #rules .rule-x:hover { color: #f1c2a9; border-color: #a96553; background: #3c261f; }
.chip { padding: 2px 6px; border-radius: 7px; font-size: 12px; }
#planview .sofar, .behavior-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; padding: 0; background: none; border: 0; }
.activity-chip, #planview .sofar > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: #b8c7b2;
  background: var(--ui-raised);
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.activity-chip .ui-icon, #planview .sofar .ui-icon { width: 14px; height: 14px; color: var(--ui-leaf-bright); }
.activity-chip .ui-icon, #planview .sofar .ui-icon, #tally .ui-icon { --icon-stroke: 1.78; --icon-fill: .72; }
#planview .rslots { display: grid; grid-template-columns: 1fr; gap: 7px; }
#planview .rslot {
  position: relative;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 44px 44px;
  gap: 7px;
  min-height: 53px;
  padding: 8px;
  color: #dcd8bd;
  background: rgba(58, 48, 20, .4);
  border: 0;
  border-radius: 10px;
}
#planview .rslot .ricon { width: 34px; height: 34px; color: #f3d278; background: #1b1c0d; border: 1px solid rgba(216, 180, 80, .33); border-radius: 50%; }
#planview .rslot .ricon .ui-icon { width: 19px; height: 19px; }
#planview .rslot .rlabel { display: block; font-size: 13px; line-height: 1.4; }
#planview .rslot .rmeta { display: block; margin-top: 3px; color: #b0ad85; font-size: 12px; }
#planview .rslot.off { background: rgba(11, 16, 11, .68); }
#planview .rslot.open { border: 1px dashed rgba(216, 180, 80, .35); cursor: pointer; }
#planview .rslot.open:hover { border-color: var(--ui-brass); background: rgba(69, 57, 24, .28); }
#planview .rswitch {
  min-width: 39px;
  padding: 4px 7px;
  color: #e7d88f;
  background: #26341d;
  border-color: rgba(168, 196, 102, .42);
  font-size: 11px;
}
#planview button.rslot { font: inherit; text-align: left; color: inherit; cursor: pointer; }
#planview .rswitch .ui-icon, #planview .current .ui-icon, #planview .loopline .ui-icon, #planview .meta .ui-icon { width: 13px; height: 13px; vertical-align: -2px; }
#planview .rslot .rule-x { position: static; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #b7ab8b; background: transparent; border: 0; border-radius: 50%; font-size: 0; }
#planview .rslot .rule-x .ui-icon { width: 15px; height: 15px; }
#planview .reinsrow { margin-top: 7px; }
#planview .reins { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; color: #e7dcae; background: linear-gradient(160deg, #4c421d, #242511); border-color: rgba(218, 183, 91, .52); }
#planview .reins .ui-icon { width: 18px; height: 18px; }
.plan-shelf { margin-top: 10px; padding: 10px; background: rgba(4, 11, 7, .42); border: 0; border-radius: 12px; }
.plan-shelf-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #e8d9aa; font: 700 12.5px var(--font-body); }
.plan-shelf-head .ui-icon { width: 18px; height: 18px; }
.plan-shelf-row { display: flex; flex-wrap: wrap; gap: 6px; }
#planview .shelfbtn { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; min-height: 32px; padding: 6px 9px; color: #e6d28f; background: linear-gradient(145deg, #2d341e, #10180f); border-color: rgba(205, 169, 93, .36); font-size: 11.5px; }
#planview .shelfbtn .ui-icon { width: 15px; height: 15px; }
#plancard .btns, #planview .btns, .plan-actionbar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  position: sticky;
  bottom: -16px;
  z-index: 3;
  margin: 11px -16px -16px;
  padding: 18px 16px 14px;
  background: linear-gradient(transparent, rgba(7, 15, 10, .98) 35%);
}
#plancard .btns button, #planview .btns button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 130px;
  min-height: 48px;
  padding: 8px 11px;
  color: #efe9d0;
  background: linear-gradient(160deg, #31543d, #15271c);
  border: 1px solid var(--ui-hairline);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#plancard .btns button .ui-icon, #planview .btns button .ui-icon { width: 18px; height: 18px; }
/* THE primary action: one butter-gold button per screen. */
#plancard .btns .go, #planview .btns .go { color: #22170e; background: linear-gradient(180deg, #f1d27d, #c99443); border-color: #f1d27d; }
#plancard .btns .go .ui-icon, #planview .btns .go .ui-icon { color: #22170e; }
#plancard .btns .alt, #planview .btns .alt { color: #f2d894; background: linear-gradient(160deg, #534b25, #262711); border-color: rgba(225, 192, 101, .65); }
/* Destructive goes ghost: outline and danger text, never a loud fill. */
#plancard .btns .stop, #planview .btns .stop { color: var(--ui-danger); background: transparent; border-color: rgba(231, 125, 114, .55); }
#plancard .btns .no, #planview .btns .no { flex: 0 1 108px; min-width: 96px; white-space: nowrap; color: #9dac98; background: transparent; border-color: rgba(131, 149, 122, .25); }   /* F25: 76px basis wrapped "Keep current" onto two lines */
#plancard .meta, #planview .meta, #plancard .loopline, #planview .loopline, #plancard .current, #planview .current { color: #a7b6a0; font-size: 11.5px; line-height: 1.5; }
.plan-pane .loopline { color: var(--ui-plan) !important; }
.draft-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); gap: 10px; margin-top: 10px; }
.draft-layout.solo { grid-template-columns: 1fr; }
.draft-side { display: flex; flex-direction: column; gap: 8px; }
.draft-card { padding: 9px; background: rgba(5, 13, 8, .46); border: 1px solid rgba(143, 167, 126, .2); border-radius: 11px; }
.draft-card-title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #e8ddbb; font: 800 11px Georgia, serif; }
.draft-card-title .ui-icon { width: 17px; height: 17px; color: var(--ui-brass-hi); }
/* clauses the compiler couldn't honor — shown so a confirm never ratifies a silent loss */
.draft-card.unparsed { border-color: rgba(214, 158, 96, .45); background: rgba(38, 22, 8, .5); }
.draft-card.unparsed .draft-card-title { color: #e0b070; }
.draft-card.unparsed .meta { color: #cfa878; font-style: italic; }
#plancard .targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
#plancard .tgt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 66px auto auto; align-items: center; min-width: 0; min-height: 112px; padding: 7px 10px 8px; color: #eff1d9; background: linear-gradient(145deg, rgba(33, 79, 68, .78), rgba(13, 37, 31, .9)); border-color: rgba(104, 184, 177, .62); text-align: left; }
#plancard .tgt:hover { border-color: #a9dad2; background: linear-gradient(145deg, rgba(43, 95, 81, .82), rgba(16, 45, 37, .92)); }
#plancard .tgt-art { position: relative; grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: radial-gradient(circle, rgba(116, 176, 112, .18), rgba(4, 12, 8, .18) 68%, transparent 70%); }
#plancard .tgt-art img { position: absolute; top: 50%; left: 50%; display: block; width: 82px; height: 82px; object-fit: contain; image-rendering: pixelated; transform: translate(-50%, -50%) scale(1.18); transform-origin: center; }
#plancard .tgt .tl { grid-column: 1 / -1; grid-row: 2; overflow: hidden; justify-self: center; max-width: 100%; font-size: 13px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
#plancard .tgt .tlv { grid-column: 1; grid-row: 3; justify-self: start; color: #f0ce79; font-size: 11.5px; }
#plancard .tgt .tct { grid-column: 2; grid-row: 3; justify-self: end; color: #aebcb1; font-size: 11.5px; font-variant-numeric: tabular-nums; }
#plancard .tgt.on::after { content: "✓"; position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 20px; height: 20px; color: #112018; background: #a9d7a2; border: 1px solid #d9efc9; border-radius: 50%; box-shadow: 0 2px 6px #0007; font-size: 12px; font-weight: 700; }
#plancard .tgt:not(.on) { color: #91a196; background: rgba(15, 26, 20, .74); border-color: rgba(111, 133, 116, .34); opacity: .82; }
#plancard .tgt:not(.on) .tgt-art { filter: grayscale(1) brightness(.66); }
#plancard .tgt:not(.on) .tlv, #plancard .tgt:not(.on) .tct { display: none; }
#plancard .tgt:not(.on)::after { content: "Not targeted"; grid-column: 1 / -1; grid-row: 3; justify-self: center; color: #9dcea1; font-size: 11.5px; text-transform: none; }
#plancard .pact-target-note { display: flex; align-items: center; gap: 7px; margin: 7px 0 2px; padding: 6px 8px; color: #d8ceaa; background: rgba(76, 61, 24, .25); border-radius: 8px; font-size: 11.5px; line-height: 1.4; }
#plancard .pact-target-note .ui-icon { width: 17px; height: 17px; flex: none; color: var(--ui-reflex); }
#plancard .pact-target-note { font-size: 12px; }
#plancard .pact-meta-list { display: grid; gap: 5px; margin-top: 7px; }
#plancard .pact-meta-row { display: flex; align-items: center; gap: 7px; min-height: 22px; color: #bac7b5; }
#plancard .pact-meta-row > .ui-icon { width: 17px; height: 17px; color: #9fc9c5; }
#plancard .pact-mini-art { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 8px; background: rgba(4, 12, 8, .38); }
#plancard .pact-mini-art img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; transform: scale(1.22); }
#plancard .pact-meta-row.target-meta { color: #e5e7d2; font-weight: 700; }
#plancard .pact-meta-row { font-size: 12.5px; }
#plancard .rxhdr, #planview .rxhdr, #plancard .tgthdr { display: none; }
#plancard ol.plan.rx li { border-color: rgba(218, 183, 91, .36); background: linear-gradient(145deg, rgba(72, 57, 18, .44), rgba(11, 18, 9, .8)); }

/* Companion Pact: one plain-English consent view, with rules and targets in a
   single scan path. */
#plancard .card { display: flex; flex-direction: column; overflow: hidden; }
#plancard .hdr { flex: none; }
#plancard .hdr > div { min-width: 0; flex: 1; }
#plancard .say { overflow-wrap: anywhere; }
#plancard .pact-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 2px 2px; }
#plancard .pact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); gap: 9px; margin-top: 8px; }
#plancard .pact-grid.solo { grid-template-columns: 1fr; }
#plancard .pact-stack { display: flex; flex-direction: column; gap: 7px; }
#plancard .pact-part { padding: 10px 11px; background: rgba(5, 13, 8, .48); border: 0; border-radius: 11px; }
#plancard .pact-part.plan { background: rgba(19, 50, 54, .35); }
#plancard .pact-part.reflex { background: rgba(66, 53, 18, .32); }
#plancard .pact-title { display: flex; align-items: center; gap: 7px; color: #f0e7c8; font: 700 15px var(--font-display); }
#plancard .pact-title .ui-icon { width: 20px; height: 20px; color: #a9bab0; }
#plancard .pact-part.plan .pact-title .ui-icon { color: var(--ui-plan); }
#plancard .pact-part.reflex .pact-title .ui-icon { color: var(--ui-reflex); }
#plancard .pact-title small { margin-left: auto; color: #aebba8; font: 700 11px ui-rounded, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
#plancard .pact-promise { display: flex; align-items: center; gap: 9px; min-height: 42px; margin-top: 6px; padding: 5px 7px; color: #edf1e6; background: rgba(3, 9, 6, .36); border-radius: 8px; font-size: 13.5px; line-height: 1.4; }
#plancard .pact-promise .aicon, #plancard .pact-promise .ricon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: #e8d88e; background: rgba(52, 69, 39, .64); border: 1px solid rgba(205, 169, 93, .26); border-radius: 50%; }
#plancard .pact-promise .aicon .ui-icon { width: 18px; height: 18px; }
#plancard .pact-promise .ricon img { width: 31px; height: 31px; object-fit: contain; image-rendering: pixelated; }
#plancard .pact-effect { margin-top: 7px; padding: 5px 8px; color: #e0d2a5; font-size: 12px; line-height: 1.5; }
#plancard .pact-warning { margin-top: 9px; border-color: rgba(231, 125, 114, .62); background: rgba(63, 27, 19, .58); }
#plancard .pact-warning .draft-card-title, #plancard .pact-warning .meta { color: #f0b2a0; }
#plancard .btns .edit { color: #c9d7c1; background: rgba(20, 34, 25, .82); border-color: rgba(143, 167, 126, .36); }
#plancard .btns .edit { flex: 0 1 92px; min-width: 78px; }
#plancard .pact-close { margin-left: auto; }
#plancard .btns .danger { color: #fff0e9; background: linear-gradient(160deg, #713b30, #381d18); border-color: #d88773; }
#plancard .keyhint { margin-left: auto; padding: 2px 6px; color: #cbe6c3; background: rgba(3, 10, 5, .34); border: 1px solid rgba(206, 239, 190, .22); border-radius: 6px; font-size: 11px; }
#plancard .rxreplace { border-color: rgba(224, 111, 99, .42); background: linear-gradient(145deg, rgba(74, 37, 26, .42), rgba(5, 13, 8, .62)); }
#plancard .rxchoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
#plancard .rxchoice { display: grid; grid-template-columns: auto 28px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 44px; padding: 6px 8px; color: #ded7bd; background: rgba(4, 10, 6, .54); border: 1px solid rgba(199, 158, 96, .28); border-radius: 9px; cursor: pointer; font-size: 11.5px; }
#plancard .rxchoice:has(input:checked) { color: #fff0d2; border-color: #d88773; background: rgba(91, 46, 31, .58); }
#plancard .rxchoice input { width: 18px; height: 18px; accent-color: #d88773; }
#plancard .rxchoice .ricon { display: grid; place-items: center; width: 28px; height: 28px; }
#plancard .rxchoice .ricon img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
#plancard .rxchoice small { display: block; margin-top: 2px; color: #a8aa8f; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
#plancard .pact-face { display: grid; place-items: center; width: 48px; height: 48px; flex: none; background: rgba(54, 58, 25, .72); border: 1px solid rgba(205, 169, 93, .45); border-radius: 50%; }
#plancard .pact-face img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
#plancard .btns { position: static; flex: none; bottom: auto; margin: 9px -16px -16px; padding: 10px 16px 14px; background: linear-gradient(rgba(7, 15, 10, .55), rgba(7, 15, 10, .98) 32%); }
#plancard.committing .card { pointer-events: none; }
#plancard.committing .btns button { opacity: .5; }
#plancard .btns button:disabled { opacity: .48; cursor: not-allowed; filter: saturate(.45); }
body.pactreview #chat { display: none !important; }

#pacthandoff { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 29; min-width: min(330px, 82vw); max-width: 86vw; visibility: hidden; translate: -50% 12px; padding: 10px 16px; text-align: center; color: #f5ecd0; background: linear-gradient(145deg, rgba(47, 91, 59, .97), rgba(11, 25, 16, .98)); border: 1px solid rgba(169, 230, 154, .78); border-radius: 999px; box-shadow: 0 12px 38px #000b; opacity: 0; pointer-events: none; transition: opacity .2s ease, translate .3s cubic-bezier(.2,1,.3,1), visibility 0s linear .3s; font-size: 12px; font-weight: 700; }
#pacthandoff.show { visibility: visible; opacity: 1; translate: -50% 0; transition-delay: 0s; }
#pacthandoff small { display: block; margin-top: 2px; color: #bed4b5; font-size: 11px; font-weight: 600; }

/* Prompt and chat controls join the same visual language. */
#chat {
  background: linear-gradient(150deg, rgba(24, 47, 35, .98), rgba(7, 15, 10, .99));
  border-color: rgba(205, 169, 93, .68);
  border-radius: 16px;
  box-shadow: 0 18px 60px #000a, inset 0 1px 0 rgba(255, 242, 203, .08);
}
#chatin { gap: 7px; border-top-color: rgba(205, 169, 93, .24); }
#promptflow {
  display: none;
  padding: 9px 11px 8px;
  color: #dce9d4;
  border-top: 1px solid var(--ui-hairline-soft);
  background: rgba(5, 13, 8, .42);
  font-size: 12px;
  line-height: 1.5;
}
#promptflow.show { display: block; }
#promptflow .pf-kicker { color: var(--ui-brass); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#promptflow .pf-line { margin-top: 2px; }
#promptflow .pf-utterance { color: #f7f1dd; font-style: italic; }
#promptflow.thinking .pf-line::after { content: ""; display: inline-block; width: 15px; height: 3px; margin-left: 6px; vertical-align: 2px; border-radius: 3px; background: var(--ui-leaf-bright); animation: prompt-breathe .9s ease-in-out infinite; }
body.promptpending #chat { border-color: rgba(169, 230, 154, .9); box-shadow: 0 18px 64px #000a, 0 0 28px rgba(125, 198, 119, .18); }
body.promptpending #cmd { color: #c8d8c1; }
/* Connection state remains visible during a prompt, but leaves the utterance and
   readback lane alone instead of painting over the core interaction. */
body.promptopen #connbanner { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
#chatin button:disabled { opacity: .42; cursor: default; transform: none; }
@keyframes prompt-breathe { 0%,100% { opacity:.2; transform:scaleX(.45); } 50% { opacity:1; transform:scaleX(1); } }
#cmd {
  color: #f7f1dd;
  background: rgba(3, 10, 6, .72);
  border: 1px solid rgba(139, 177, 124, .38);
  border-radius: 10px;
}
#cmd:focus { border-color: #99d58e; box-shadow: 0 0 16px rgba(125, 198, 119, .18); }
#planmode { color: #bac9b1; background: #111e16; border-color: rgba(135, 162, 119, .35); }
#mic, #send { display: none; align-items: center; justify-content: center; width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
#mic .ui-icon, #send .ui-icon { width: 20px; height: 20px; }
#send { display: inline-flex; color: #eaf4df; background: linear-gradient(155deg, #4c7a52, #203d2a); }
#chatlogbtn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; }
#chatlogbtn .ui-icon { width: 23px; height: 23px; }
#chatloghdr { color: #d5dfce; border-bottom-color: rgba(205, 169, 93, .22); }

#toast { color: #f4ecd7; background: linear-gradient(150deg, rgba(35, 60, 44, .98), rgba(10, 18, 13, .98)); border-color: var(--ui-brass); border-radius: 12px; box-shadow: 0 8px 28px #0009; }

@media (max-width: 900px) {
  .skill-branches { grid-template-columns: 1fr; }
  .skill-branch::before { bottom: 27px; }
  .behavior-grid, .draft-layout, #plancard .pact-grid { grid-template-columns: 1fr; }
  #planview .rslots { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  #hud { width: calc(100vw - 72px); padding: 8px; }
  #hud .hudrow { gap: 7px; }
  #hudbtns { margin-top: 7px; }
  .bigbtn { height: 44px; padding: 0 8px; }
  .bigbtn .ui-icon { width: 24px; height: 24px; }
  .bigbtn .btn-copy { margin-left: 5px; }
  #topbtns { right: calc(7px + env(safe-area-inset-right, 0px)); gap: 6px; padding: 5px; }
  #topbtns .btn { width: 42px; height: 42px; }
  #places, #bag, #wardrobe {
    top: 8px;
    right: 58px;
    width: calc(100vw - 66px);
    max-width: none;
    max-height: calc(100dvh - 16px);
  }
  /* a near-full-width panel owns the top lane — the HUD steps aside instead of
     sitting on the panel's header and close button (same move promptopen makes) */
  body.menuopen #hud { display: none; }
  #places.expanded {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
  }
  #places.expanded .world-map-layout { grid-template-columns: 1fr; gap: 9px; }
  #places.expanded #placelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #maplegend { gap: 5px 9px; }
  #instincts {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 11px;
  }
  .skill-overview { padding: 7px 9px; }
  .skill-overview-copy small { display: none; }
  .skill-branches { gap: 8px; }
  .skill-branch { padding: 9px; }
  .skill-node { min-height: 50px; }
  #orders { right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: min(304px, calc(100vw - 72px)); }
  #plancard, #planview {
    padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
    align-items: flex-start;
  }
  #plancard .card, #planview .card { width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 11px; border-radius: 14px; }
  #plancard .hdr img, #planview .hdr img { width: 43px; height: 43px; }
  #plancard .say, #planview .say { font-size: 16px; }
  #planview .rslots { grid-template-columns: 1fr; }
  #planview .rslot { grid-template-columns: 35px minmax(0, 1fr) 44px 44px; }
  #plancard .btns, #planview .btns { bottom: -11px; margin: 10px -11px -11px; padding: 12px 11px 10px; }
  #plancard .btns button, #planview .btns button { flex-basis: 42%; }
  #plancard .btns .no, #planview .btns .no { flex-basis: 108px; }   /* F25: keep "Keep current" on one line on phones too */
  #plancard .rxchoices { grid-template-columns: 1fr; }
  .behavior-pane { padding: 8px; }
}

/* F17: on the narrowest phones the HUD is calc(100vw - 72px) split across two
   summoners — tighten the icon, padding and letter-spacing so "WRITE" stops
   clipping. Placed after the 560px block so it wins the cascade at ≤360px. */
@media (max-width: 360px) {
  .bigbtn { padding: 0 5px; }
  .bigbtn .ui-icon { width: 22px; height: 22px; }
  .bigbtn .btn-copy { margin-left: 4px; }
}

/* The first view after The Descent introduces the durable HUD in layers: the
   character and WRITE/SPEAK controls arrive first, utilities and Behavior next. */
body.arrival-tools-calm #topbtns,
body.arrival-tools-calm #questlog,
body.arrival-behavior-calm #orders {
  opacity: 0;
  pointer-events: none;
}
body.arrival-tools-calm #topbtns,
body.arrival-tools-calm #questlog { transform: translateY(-8px); }
body.arrival-behavior-calm #orders { transform: translateY(10px); }
#topbtns, #questlog, #orders {
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}

/* On a short landscape phone, reserve the left third for a shorter map so its
   legend remains visible; region cards use the wider right column. */
@media (max-height: 430px) and (orientation: landscape) {
  #places:not(.expanded) {
    top: 8px;
    right: 58px;
    width: min(520px, calc(100vw - 80px));
    max-height: calc(100dvh - 16px);
  }
  #places:not(.expanded) .world-map-layout {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(190px, 1fr);
    gap: 10px;
    align-items: start;
  }
  #places:not(.expanded) .compact-map-main { margin-bottom: 0; }
  #places.expanded {
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: 58px;
    width: auto;
    max-height: none;
    transform: none;
  }
  #places.expanded .world-map-layout {
    grid-template-columns: minmax(250px, 36%) minmax(0, 1fr);
    gap: 10px;
  }
  #places.expanded #placelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #places.expanded #maplegend { gap: 4px 8px; padding-top: 6px; }
  #places.expanded #mapstatus { padding-top: 3px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #plancard .card, #planview .card, #plancard .tgt, #plancard .tgt.shake,
  #plancard ol.plan li, #plancard .pact-promise, .skill-node, #topbtns .btn {
    animation: none !important;
    transition: none !important;
  }
  #promptflow.thinking .pf-line::after { animation: none !important; opacity: .7; transform: none; }
  #pacthandoff { transition: none !important; }
}

/* ============================================================ display face
   Pixelify Sans: chunky pixel letterforms that stay legible at menu sizes.
   Display voice only — titles, clasps, big labels; body copy keeps the
   rounded system face for maximum readability. */
@font-face {
  font-family: "Pixelify Sans";
  src: url("/_assets/c68d66004693b56f775f/fonts/pixelify-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
:root { --font-display: "Pixelify Sans", ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif; }
.panel-title { font: 700 20px/1.05 var(--font-display); letter-spacing: .015em; color: #fff5d5; text-shadow: 0 2px 0 #0008; }
/* Takeover screens earn the larger display size. */
#instincts .panel-title, #places.expanded .panel-title { font-size: 24px; }
#signcard .st, #incident .it { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
#hud .bigbtn .btn-copy b, .orders-title { font-family: var(--font-display); letter-spacing: .02em; }

/* ============================================================ quest tracker
   The objectives rail: a clasp under the top buttons, MMO-style. .has = there
   is something to track; .open = pinned open by the player; .peek = the world
   just advanced something, so the rail slides out on its own for a moment. */
#questlog { position: fixed; top: 78px; right: 12px; width: 270px; z-index: 4; display: none; }
#questlog.has { display: block; }
#questhdr {
  display: flex; align-items: center; gap: 7px; width: 100%; cursor: pointer;
  padding: 7px 10px; color: var(--ui-ink);
  background: linear-gradient(180deg, #223828, #17251b);
  border: 1px solid var(--ui-hairline); border-radius: 10px;
  box-shadow: 0 2px 7px #0009;
  font: 700 15px/1 var(--font-display); letter-spacing: .03em;
}
#questhdr:hover { border-color: #c6a85b; }
#questhdr .ui-icon { width: 17px; height: 17px; color: #e4ce7f; }
#questct { color: var(--ui-brass-hi); font-size: 12px; }
#questhdr .qcaret { margin-left: auto; color: var(--ui-muted); transition: transform .2s ease; }
#questlog.open .qcaret { transform: rotate(180deg); }
#questrows { display: none; flex-direction: column; gap: 6px; margin-top: 6px; max-height: min(68vh, 620px); overflow-y: auto; overscroll-behavior: contain; }
#questlog.open #questrows, #questlog.peek #questrows { display: flex; animation: questpeek .22s ease; }
@keyframes questpeek { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
#questrows #eventinfo, #questrows #fittinginfo { margin: 0; background-color: rgba(13, 23, 17, .92); box-shadow: 0 1px 5px #0007; }
.favor {
  padding: 9px; border: 1px solid #3f5a43; border-radius: 8px;
  background: rgba(13, 23, 17, .9); box-shadow: 0 1px 5px #0007;
}
.favor.ready { border-color: #e4ce7f; background: linear-gradient(145deg, rgba(53, 58, 28, .96), rgba(20, 33, 23, .96)); box-shadow: 0 0 18px rgba(228, 206, 127, .2), 0 1px 5px #0007; }
.favor.claimed { border-color: #78c884; background: rgba(20, 45, 27, .94); }
.favor-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; }
.favor-art, .favor-mark { display: grid; place-items: center; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; border-radius: 9px; background: radial-gradient(circle, rgba(106, 164, 94, .18), transparent 72%); }
.favor-mark { font-size: 24px; }
.favor-title { min-width: 0; }
.favor .fname { color: #e9f2d9; font: 600 14px/1.2 var(--font-display); }
.favor .fobj { margin-top: 5px; color: #acb9a8; font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.favor .fcount { color: var(--ui-leaf-bright); font-size: 11.5px; line-height: 1.3; margin-top: 3px; font-weight: 700; }
.favor.ready .fcount { color: #ffe9a8; font-size: 11px; line-height: 1.3; letter-spacing: .04em; }
.favor.claimed .fcount { color: #9ce082; }
.favor .fsteps { margin: 7px 0 0; padding: 0; list-style: none; color: #d6dfcf; font-size: 11.5px; line-height: 1.45; }
.favor .fsteps li { margin: 2px 0; } .favor .fsteps li.checked { color: #9ce082; }
.favor .fwhere { margin-top: 6px; color: #91a08d; font-size: 11px; line-height: 1.35; }
.favor .fbar { height: 5px; margin-top: 4px; background: #101a13; border-radius: 4px; overflow: hidden; }
.favor .fbar i { display: block; height: 100%; background: linear-gradient(90deg, #78c884, #e4ce7f); }
.favor.ready .fbar i, .favor.claimed .fbar i { background: linear-gradient(90deg, #e4ce7f, #fff3c4); }
.favor.flash { animation: favorflash 1.1s ease; }
@keyframes favorflash { 0% { border-color: #3f5a43; } 30% { border-color: #ffe9a8; box-shadow: 0 0 18px rgba(255, 233, 168, .5); } 100% { border-color: #3f5a43; } }
body.tut #questlog, body.convo #questlog, body.cine #questlog, body.selftalk #questlog { display: none !important; }

/* ============================================================ settings */
#settings { top: 52px; right: 12px; width: 288px; padding: 10px 12px; font-size: 12px; display: none; z-index: 6; }
body.dev #settings { width: min(548px, calc(100vw - 24px)); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
.setrow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.setlabel { flex: 1; min-width: 0; }
.setlabel b { display: block; color: #fff5d5; font: 600 15px/1.15 var(--font-display); letter-spacing: .02em; }
.setlabel small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; line-height: 1.45; }
.settoggle {
  position: relative; flex: none; width: 64px; height: 34px; cursor: pointer;
  border: 2px solid #8f743f; border-radius: 18px; background: #1c2a20;
  transition: background .18s ease; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .4);
}
.settoggle::before { content: "Off"; position: absolute; top: 50%; right: 7px; color: #9aa694; font: 700 11px/1 ui-rounded, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; transform: translateY(-50%); }
.settoggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #73806b; transition: left .18s ease, background .18s ease;
  box-shadow: 0 1px 3px #000a;
}
.settoggle[aria-checked="true"] { background: #2c5a37; }
.settoggle[aria-checked="true"]::before { content: "On"; right: auto; left: 9px; color: #d9edcf; }
.settoggle[aria-checked="true"]::after { left: 33px; background: #f2e6bd; }
.setdivider { height: 2px; margin: 7px 0; background: linear-gradient(90deg, transparent, rgba(198, 168, 91, .55) 18% 82%, transparent); }
.setlogout {
  flex: none; padding: 9px 14px; white-space: nowrap; cursor: pointer;
  background: transparent;
  border-color: rgba(231, 125, 114, .55); color: var(--ui-danger);
  font: 700 13px/1 var(--font-body); letter-spacing: .02em;
}
.setlogout.arm { background: var(--ui-danger); color: #1a0c09; box-shadow: 0 0 14px rgba(231, 125, 114, .45); }

/* The test bench is present only after the local server's /dev handshake. It is
   intentionally denser than player settings: this is an instrument panel. */
#devadmin[hidden] { display: none; }
.devhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 2px 9px; }
.devhead > div { display: flex; align-items: center; gap: 8px; }
.devhead b { color: #f3eaff; font: 600 17px/1 var(--font-display); }
.devhead > span { color: #8e83a7; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.devbadge { padding: 4px 7px; border: 1px solid rgba(210,168,255,.65); border-radius: 999px; color: #eadbff; background: rgba(137,87,229,.18); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.devsection { margin: 7px 0; padding: 11px; border: 1px solid rgba(137,87,229,.32); border-radius: 10px; background: linear-gradient(145deg,rgba(25,20,39,.82),rgba(13,18,25,.78)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.devsection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.devsection-head b { color: #f0e9ff; font: 600 15px/1.1 var(--font-display); }
.devsection-head small { color: #8e83a7; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.devticks, .devfilters { display: flex; flex-wrap: wrap; gap: 5px; }
.devticks button, .devfilters button { min-height: 29px; padding: 5px 9px; border: 1px solid #4a4260; border-radius: 7px; color: #aeb5c4; background: #171824; font: 700 11px/1 var(--font-body); cursor: pointer; }
.devticks button:hover, .devfilters button:hover { border-color: #9b77db; color: #f0e9ff; }
.devticks button.active, .devfilters button.active { border-color: #d2a8ff; color: #fff6d8; background: linear-gradient(145deg,#513277,#2b2548); box-shadow: 0 0 12px rgba(137,87,229,.25); }
.devstatgrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.devstatgrid label, .devlibrary-tools label { display: grid; gap: 4px; color: #9790a9; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.devstatgrid input, .devlibrary-tools input, .devlibrary-tools select, .devsearch { min-width: 0; box-sizing: border-box; border: 1px solid #403950; border-radius: 7px; color: #f0edf6; background: #0d1119; font: 600 12px/1 var(--font-body); outline: none; }
.devstatgrid input { width: 100%; height: 33px; padding: 6px 8px; }
.devstatgrid input:focus, .devlibrary-tools input:focus, .devlibrary-tools select:focus, .devsearch:focus { border-color: #b993ef; box-shadow: 0 0 0 2px rgba(137,87,229,.16); }
.devstep { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; }
.devstep button { border: 1px solid #403950; color: #d8c9f2; background: #252038; cursor: pointer; font-size: 15px; }
.devstep button:first-child { border-radius: 7px 0 0 7px; }
.devstep button:last-child { border-radius: 0 7px 7px 0; }
.devstep input { border-radius: 0; text-align: center; border-inline: 0; }
.devactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.devactions .btn, .devlibrary-tools .btn { padding: 7px 9px; font-size: 11px; }
.devprimary { border-color: #9b77db; color: #eadbff; background: rgba(137,87,229,.2); }
.devmoverow { display: flex; align-items: center; gap: 12px; }
.devmoverow span { flex: 1; color: #a69fba; font-size: 11.5px; line-height: 1.45; }
.devmoverow .btn { flex: none; padding: 9px 12px; white-space: nowrap; }
.devsearch { width: 100%; height: 38px; padding: 8px 11px; margin-bottom: 7px; }
.devfilters { margin-bottom: 8px; }
.devlibrary-tools { display: grid; grid-template-columns: 1fr 92px auto auto; align-items: end; gap: 6px; margin-bottom: 8px; }
.devlibrary-tools input, .devlibrary-tools select { width: 100%; height: 31px; padding: 5px 7px; }
.devitems { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; max-height: 288px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; }
.devitem { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 8px; align-items: center; min-width: 0; padding: 8px; border: 1px solid #343044; border-radius: 9px; background: rgba(9,12,18,.72); }
.devitem-art { width: 40px; height: 40px; display: grid; place-items: center; }
.devitem-art img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 4px #0009); }
.devitem-main { min-width: 0; }
.devitem-main b { display: block; overflow: hidden; color: #e9edf7; font: 600 12px/1.2 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.devitem-main small { display: block; margin-top: 2px; color: #7f8798; font-size: 11px; line-height: 1.3; }
.devitem-buttons { display: flex; gap: 4px; margin-top: 6px; }
.devitem-buttons button { min-height: 25px; flex: 1; padding: 4px 6px; border: 1px solid #453b5d; border-radius: 6px; color: #d8c9f2; background: #211b31; font: 700 11px/1 var(--font-body); cursor: pointer; }
.devitem-buttons button:hover { border-color: #b993ef; color: #fff6d8; }
.devempty { grid-column: 1/-1; padding: 24px 8px; color: #81798e; text-align: center; }
.devdanger { border-color: rgba(231,125,114,.35); background: rgba(56,23,30,.22); }
.devresetrow { display: flex; align-items: center; gap: 12px; }
.devresetrow span { flex: 1; color: #a69da5; font-size: 11.5px; line-height: 1.45; }
.devresetrow .setlogout { font-size: 12px; }

@media (max-width: 700px) {
  /* the phone HUD owns the top-left and the button column owns the right edge —
     the tracker hangs just below the buttons, hugging the same edge */
  #questlog { top: 230px; right: 8px; width: min(216px, calc(100vw - 24px)); }
  /* open rows must not sit on the player mid-screen: cap them and scroll inside */
  #questrows { max-height: 34dvh; }
  /* the bunny's bubble is the primary feedback channel at phone zoom — the
     collapsed clasp shares its band, so it ducks while a bubble is live */
  body.selfbubble #questlog:not(.open) { opacity: .12; pointer-events: none; transition: opacity .25s; }
  #settings { top: 12px; right: 60px; max-width: calc(100vw - 72px); }
  body.dev #settings { width: min(548px, calc(100vw - 72px)); }
}
body.menuopen #questlog { display: none; }

/* Compact viewport ownership -------------------------------------------------
   The field guide rail and a single open surface own the right/top lanes on a
   phone. Keep the canvas visible, but remove controls that would sit under an
   open panel and make the controls that remain comfortable touch targets. */
@media (max-width: 560px), (max-height: 430px) and (orientation: landscape) {
  body.menuopen #hud,
  body.menuopen #orders,
  body.menuopen #topbtns,
  body.menuopen #chatlog,
  body.menuopen #chatlogbtn { display: none; }

  #topbtns .btn,
  .panel-close,
  #mapexpand,
  #chatlogbtn,
  #chatloghdr button,
  .learn-rank,
  .skill-state {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .panel-close { flex: 0 0 44px; }
  .panel-close,
  #mapexpand,
  #chatloghdr button { display: inline-grid; place-items: center; padding: 0; }
  .skill-node { grid-template-columns: 43px minmax(0, 1fr) 44px; }
  #questhdr,
  #placelist .p,
  #instfoot button,
  .shoptab,
  .gearcard .gbuy,
  #shop .sellrow button,
  #wbaglist .wrow button,
  .setlogout,
  #setseeya { min-height: 44px; }
  #placelist .p { display: grid; align-items: center; }

  .settoggle { min-height: 44px; border-radius: 23px; }
  .settoggle::after { top: 6px; width: 28px; height: 28px; }
  .settoggle[aria-checked="true"]::after { left: 29px; }
}

/* Match mmo.js's compactMenuQuery exactly. Combat strips the utility rail back
   to Map; survival controls in the HUD and Behavior card remain available. */
@media (max-width: 700px), (max-height: 430px) and (orientation: landscape) {
  body.danger #questlog { display: none !important; }
  body.danger #guidebtn,
  body.danger #gearbtn,
  body.danger #instbtn,
  body.danger #bagbtn,
  body.danger #setbtn,
  body.danger #suitbtn { display: none !important; }
}

@media (max-width: 560px) {
  #hud {
    width: calc(100vw - 72px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
  #topbtns {
    top: calc(7px + env(safe-area-inset-top, 0px));
    right: calc(7px + env(safe-area-inset-right, 0px));
  }

  /* Guide and Map never jump when the secondary tools are disclosed. The suit
     remains a first-class owned tool; its inline ownership visibility still wins. */
  #topbtns #guidebtn { display: inline-flex; order: 0; }
  #topbtns #mapbtn { order: 1; }
  #topbtns #suitbtn { order: 2; }
  #topbtns #gearbtn { order: 3; }
  #topbtns #instbtn { order: 4; }
  #topbtns #bagbtn { order: 5; }
  #topbtns #setbtn { order: 6; }
  #topbtns:not(.guide-open) #gearbtn,
  #topbtns:not(.guide-open) #instbtn,
  #topbtns:not(.guide-open) #bagbtn,
  #topbtns:not(.guide-open) #setbtn { display: none; }
  #topbtns.guide-open ~ #questlog { display: none; }
  /* The Descent hides the disclosure until the loot lesson grants the bag; the
     Between (also body.tut) keeps it, so a traveler can open bag/settings and
     see their things survived the crossing. */
  body.tut:not(.tutbag) #guidebtn { display: none !important; }

  #places {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: auto;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  #places:not(.expanded) .world-map-layout {
    grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  }
  #places.expanded {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: auto;
    max-height: none;
  }
  #bag,
  #wardrobe,
  #settings {
    top: auto;
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: auto;
    max-width: none;
    max-height: min(72dvh, calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.dev #settings { width: auto; }
  .devstatgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .devlibrary-tools { grid-template-columns: 1fr 84px; }
  .devitems { grid-template-columns: 1fr; max-height: 42dvh; }
  #instincts {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: auto;
    max-height: none;
    transform: none;
    overscroll-behavior: contain;
  }
}

/* Short landscape has width to spend. Keep the consent actions fixed, use two
   columns for the plan itself, and let only the compact pact body scroll. */
@media (min-width: 620px) and (max-height: 430px) and (orientation: landscape) {
  #plancard, #planview {
    padding: calc(6px + env(safe-area-inset-top, 0px)) calc(6px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px));
  }
  #plancard .card, #planview .card {
    width: calc(100vw - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 10px;
  }
  #plancard .hdr, #planview .hdr { padding-bottom: 10px; }
  #plancard .hdr img, #planview .hdr img { width: 42px; height: 42px; }
  #plancard .pact-grid:not(.solo) { grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr); gap: 8px; }
  #plancard .pact-promise { min-height: 38px; padding-block: 3px; }
  #plancard .btns { margin: 7px -10px -10px; padding: 9px 10px 8px; }
  #planview .behavior-grid:not(.empty-plan) { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  #planview .rslots { grid-template-columns: 1fr; }
  .skill-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The narrowest portrait gets genuine owned surfaces and a one-glance Behavior
   summary. The full rules, task detail, resume chain, and Stop action remain in
   the Codex opened by tapping the summary card. */
@media (max-width: 360px) {
  #places,
  #places.expanded,
  #bag,
  #wardrobe,
  #settings,
  #instincts {
    top: calc(6px + env(safe-area-inset-top, 0px));
    right: calc(6px + env(safe-area-inset-right, 0px));
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    left: calc(6px + env(safe-area-inset-left, 0px));
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    overflow-y: auto;
    transform: none;
  }

  #orders { padding: 8px 10px; }
  #orders .orders-head { margin-bottom: 3px; }
  #orders #reflexchip,
  #orders #taskinfo,
  #orders #rules { display: none; }
  #orders #rawcmd { margin: 1px 0 2px; }
  #orders #tally .trow { max-height: 44px; overflow: hidden; }
}

/* An open surface owns short landscape and stays inside the safe viewport.
   This also prevents Behavior from sitting beneath the two-column compact map. */
@media (max-height: 430px) and (orientation: landscape) {
  #topbtns {
    top: calc(7px + env(safe-area-inset-top, 0px));
    right: calc(7px + env(safe-area-inset-right, 0px));
  }
  #topbtns #guidebtn { display: inline-flex; order: 0; }
  #topbtns #mapbtn { order: 1; }
  #topbtns #suitbtn { order: 2; }
  #topbtns #gearbtn { order: 3; }
  #topbtns #instbtn { order: 4; }
  #topbtns #bagbtn { order: 5; }
  #topbtns #setbtn { order: 6; }
  #topbtns:not(.guide-open) #gearbtn,
  #topbtns:not(.guide-open) #instbtn,
  #topbtns:not(.guide-open) #bagbtn,
  #topbtns:not(.guide-open) #setbtn { display: none; }
  #topbtns.guide-open ~ #questlog { display: none; }
  /* Same scoping as the narrow block: pre-bag Descent only, never the Between. */
  body.tut:not(.tutbag) #guidebtn { display: none !important; }
  #places:not(.expanded) {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: auto;
    max-width: none;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #places:not(.expanded) .world-map-layout {
    grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  }
  #places.expanded {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: auto;
    max-height: none;
    transform: none;
  }
  #bag {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(326px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-width: none;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #wardrobe {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(390px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-width: none;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #settings {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(288px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-width: none;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #instincts {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: auto;
    max-height: none;
    transform: none;
    overscroll-behavior: contain;
  }
}

/* ============================================================ mobile batch
   Phones are read at arm's length: reading surfaces bump to 15px, the consent
   card becomes a bottom sheet with its actions in the thumb zone, and the
   Instincts points bar stays pinned while the tree scrolls. */
@media (max-width: 560px) {
  #plancard { align-items: flex-end; }
  #plancard .card { border-radius: 16px 16px 10px 10px; }
  #convolog, .sbody, #bagdetail .dl, #plancard .pact-promise, .favor .fobj { font-size: 15px; line-height: 1.5; }
  #plancard .say { font-size: 17px; }
  .skill-overview { position: sticky; top: -11px; z-index: 3; background: #1c2921; }
}

/* The dev bench folds shut inside Settings: one tap opens the instrument panel. */
#devadmin > summary { cursor: pointer; list-style: none; }
#devadmin > summary::-webkit-details-marker { display: none; }
#devadmin > summary .devhead, #devadmin > summary { user-select: none; }
#devadmin[open] > summary { margin-bottom: 2px; }