:root {
  --ink: #2b2a33;
  --card: #fffdf7;
  --moss: #5a8f4a;
  --accent: #e07a3d;
  --shadow: rgba(40, 30, 20, 0.16);
  --energy: #5cb87a;
  --mood: #e0a84a;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top, #d8eef7 0%, transparent 50%),
    linear-gradient(180deg, #cfe9b8 0%, #e8d7b5 55%, #d2b48c 100%);
}

/* Immediate, static boot state: hide partial zeroed HUD/canvas initialization. */
.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 38%, rgba(241, 251, 225, 0.96), rgba(198, 226, 175, 0.98) 48%, #b6d49d 100%);
}
.boot-loader[hidden] { display: none; }
/* Nothing else shows through while loading; visibility keeps the layout for sizing. */
body.is-booting #wrap > :not(#boot-loader),
body.is-booting #wrap ~ * { visibility: hidden; }
.boot-loader-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(410px, 92vw);
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(88, 111, 61, 0.38);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: 0 16px 48px rgba(55, 75, 38, 0.2);
  color: #344a2d;
}
.boot-loader-card img {
  width: 58px;
  height: 86px;
  object-fit: contain;
  object-position: center bottom;
}
.boot-loader-card div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.24rem;
}
.boot-loader-card strong { font-size: 1.1rem; }
.boot-loader-card span { color: #697260; font-size: 0.86rem; }
.boot-loader.is-error .boot-loader-card { border-color: #b97465; }
.boot-loader.is-error .boot-loader-card strong { color: #9d3f32; }

#wrap {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 0.75rem 1rem;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

header h1 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
}

.badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #eef6e6;
  color: #3d6b32;
  border: 1px solid #c5dfb4;
}

.street-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #3d5a32;
  line-height: 1.35;
}

/* —— Map panel —— */
.map-panel {
  position: absolute;
  inset: 0;
  /* Stop above the pack (z 45) so the map's lower edge is never under it. */
  bottom: var(--pack-live-height, 112px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 28, 0.55);
  backdrop-filter: blur(2px);
  line-height: 1.35;
}
.map-panel[hidden] { display: none !important; }
.map-card {
  width: min(420px, 92%);
  max-height: 80%;
  overflow: auto;
  background: #fffdf7;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  padding: 1rem 1.15rem 1.1rem;
  color: #2b2a33;
}
.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.map-head h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #3d5a32;
}
.map-sub {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.9rem;
  opacity: 0.75;
}
.map-quest-teleport {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.18rem 0.8rem;
  margin-top: 0.8rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid #9a79bb;
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.72), transparent 28%),
    linear-gradient(135deg, #eee5fa, #d9caee);
  box-shadow: inset 0 1px rgba(255,255,255,0.7);
}
.map-quest-teleport strong {
  color: #5c3d78;
  font-size: 0.9rem;
}
.map-quest-teleport span {
  grid-column: 1;
  color: #675a70;
  font-size: 0.78rem;
}
.map-quest-teleport .content-action-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  white-space: nowrap;
}
.map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.map-list li button {
  width: 100%;
  text-align: left;
  border: 1px solid #c5dfb4;
  background: #f3f8ee;
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: #2b3a20;
  transition: background 0.12s, border-color 0.12s;
}
.map-list li button:hover:not(:disabled) {
  background: #e5f0d8;
  border-color: #8fbf6a;
}
.map-list li button.current {
  background: #dcecc8;
  border-color: #5a8f4a;
  cursor: default;
}
.map-list li button:disabled {
  opacity: 0.85;
}
.map-list .tsid {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.55;
  margin-top: 0.15rem;
}
.map-list .badge-here {
  float: right;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3d6b32;
}
.map-hint {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  opacity: 0.65;
}
.map-hint kbd {
  font-size: 0.78rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: #eee8dc;
  border: 1px solid #d4ccb8;
}

.quest-done {
  color: #3d6b32;
  font-weight: 600;
}

.mute-btn {
  margin-left: auto;
  border: 1px solid #c5bdaa;
  background: #fffdf7;
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.mute-btn:hover { background: #f3ecdf; }

header .sub {
  margin: 0.4rem 0 0.9rem;
  max-width: 46rem;
  opacity: 0.82;
  line-height: 1.4;
  font-size: 0.95rem;
}

#game-root {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px var(--shadow);
  background: #8ec8e8;
  /* Canvas is display:block (no baseline gap). Do not set line-height:0 —
     it collapses text in side panels / HUD overlays inside #game-root. */
}

#game-root canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 30, 40, 0.42);
  backdrop-filter: blur(2px);
  z-index: 5;
  line-height: 1.4;
}

.overlay.hidden { display: none; }
/* BACKDROP (js/start-backdrop.js): the start card fades in once its street has drawn, under the
   loading card until then; past the cap it comes in over a calm backdrop (the loading card's
   meadow), which clears to the street when the street has drawn. */
.overlay { transition: opacity 0.35s ease; }
.overlay.is-waiting { opacity: 0; pointer-events: none; }
.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(241, 251, 225, 0.96), rgba(198, 226, 175, 0.98) 48%, #b6d49d 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.overlay.is-calm::before { opacity: 1; }
.overlay > .card { position: relative; }
.boot-loader { transition: opacity 0.3s ease; }
.boot-loader.is-leaving { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay::before, .boot-loader { transition: none; }
}

.card {
  width: min(440px, 92%);
  background: var(--card);
  border-radius: 16px;
  padding: 1.25rem 1.4rem 1.1rem;
  box-shadow: 0 10px 30px var(--shadow);
}

.card h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.card p { margin: 0.5rem 0; }

.quest-preview {
  background: #eef6e6;
  border-left: 4px solid var(--moss);
  padding: 0.55rem 0.75rem;
  border-radius: 0 8px 8px 0;
}

kbd {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  border: 1px solid #c5bdaa;
  background: #f7f2e7;
  font-size: 0.85em;
}

#start-btn {
  margin-top: 0.75rem;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(180deg, #f09a55, var(--accent));
  cursor: pointer;
  box-shadow: 0 3px 0 #b85a24;
}

#start-btn:hover { filter: brightness(1.05); }
#start-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b85a24; }

.fine {
  margin-top: 0.85rem !important;
  font-size: 0.75rem;
  opacity: 0.7;
}

#hud {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.hud-row {
  background: var(--card);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 4px 16px var(--shadow);
  line-height: 1.35;
}

.hud-row .label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-bottom: 0.4rem;
}

.metabolics .meter {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0.4rem;
  align-items: center;
  margin: 0.28rem 0;
  font-size: 0.85rem;
}

.meter-name { opacity: 0.75; }

.meter-track {
  height: 10px;
  border-radius: 999px;
  background: #ebe4d4;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 70%;
  border-radius: inherit;
  transition: width 0.2s ease;
}

.meter-fill.energy { background: linear-gradient(90deg, #3d9a5f, var(--energy)); }
.meter-fill.mood { background: linear-gradient(90deg, #d4922a, var(--mood)); }

.img-stat {
  margin-top: 0.45rem;
  font-size: 0.9rem;
}

.img-stat strong {
  color: #7b4db8;
  font-size: 1.05rem;
}

.inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 48px;
  align-items: center;
}

.inventory .empty {
  opacity: 0.5;
  font-size: 0.9rem;
}

.inv-slot {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f0e9d8;
  border: 1px solid #d4c8ae;
  display: grid;
  place-items: center;
  position: relative;
}

.inv-slot img {
  max-width: 34px;
  max-height: 34px;
  image-rendering: auto;
}

.inv-slot .count {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 0 3px;
}

.quest div { margin: 0.18rem 0; font-size: 0.92rem; }

.quest.done {
  background: #e7f6df;
  margin: -0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}

.toast {
  grid-column: 1 / -1;
  background: #2b2a33;
  color: #fff8ea;
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  animation: pop 0.25s ease;
}

.toast[hidden] { display: none; }

@keyframes pop {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

footer {
  margin-top: 1rem;
  font-size: 0.78rem;
  opacity: 0.65;
}

footer a { color: inherit; }

/* —— Verb / interaction menu (Glitch-style) —— */
.verb-menu {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(18, 24, 32, 0.35);
  backdrop-filter: blur(1px);
  line-height: 1.35;
  pointer-events: auto;
}

.verb-menu[hidden] {
  display: none !important;
}

.verb-menu-card {
  width: min(320px, 90%);
  background: #fffdf8;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  border: 1px solid #e4d9c4;
  overflow: hidden;
  animation: pop 0.18s ease;
}

.verb-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.85rem 0.35rem;
  background: linear-gradient(180deg, #f7f0e2, #fffdf8);
}

.verb-menu-title {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.verb-menu-x {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0 0.25rem;
}

.verb-menu-sub {
  margin: 0;
  padding: 0 0.85rem 0.5rem;
  font-size: 0.82rem;
  opacity: 0.7;
}

.verb-menu-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  max-height: 280px;
  overflow-y: auto;
}

.verb-menu-list li {
  margin: 0;
}

.verb-choice {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.95rem;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border-top: 1px solid #f0e8d8;
}

.verb-choice:hover:not(:disabled) {
  background: #f3ebe0;
}

.verb-choice:focus {
  outline: none;
}

.verb-choice:focus-visible:not(:disabled),
.verb-choice:focus:not(:disabled) {
  background: #e8f0dc;
  box-shadow: inset 3px 0 0 #6aaa3a;
}

.verb-choice:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.verb-choice-label {
  font-weight: 700;
  text-transform: lowercase;
  color: #2b4a7a;
}

.verb-choice:not(:disabled) .verb-choice-label {
  color: #1a4a9c;
}

.verb-choice-tip {
  font-size: 0.78rem;
  opacity: 0.75;
}

.verb-choice-reason {
  font-size: 0.75rem;
  color: #a04a2a;
}

.verb-menu-hint {
  margin: 0;
  padding: 0.45rem 0.85rem 0.65rem;
  font-size: 0.72rem;
  opacity: 0.55;
  border-top: 1px solid #efe6d6;
}

/* Original Glitch target-item chooser used after verbs such as Feed. */
.feed-picker {
  z-index: 9;
  background: rgba(18, 24, 32, 0.42);
}

/* G217: the Enter chooser sits over the local chat dock (z 26), which covered
   its hint line on a 390 px phone; the shade dims the dock while you choose. */
.enter-chooser {
  z-index: 27;
}

.feed-picker-card {
  width: min(430px, 92%);
}

.feed-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.85rem;
  max-height: min(330px, 55vh);
  overflow-y: auto;
}

.feed-picker-choice {
  position: relative;
  min-width: 0;
  min-height: 92px;
  padding: 0.45rem 0.35rem 0.4rem;
  border: 1px solid #dfd3bd;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffefb, #f6efe3);
  box-shadow: 0 2px 5px rgba(63, 44, 20, 0.1);
  color: #274b79;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
}

.feed-picker-choice:hover,
.feed-picker-choice:focus-visible,
.feed-picker-choice.is-selected {
  outline: none;
  border-color: #77a94b;
  background: #eef5df;
  box-shadow: 0 0 0 2px rgba(113, 164, 63, 0.2), 0 3px 8px rgba(63, 44, 20, 0.14);
}

.feed-picker-choice img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 2px rgba(44, 31, 17, 0.18));
}

.feed-picker-choice-label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 750;
}

.feed-picker-choice-count {
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  min-width: 1.25rem;
  padding: 0.05rem 0.25rem;
  border-radius: 999px;
  background: #335b8c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Second step of the picker: how many of the chosen stack. */
.feed-picker-qty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.75rem;
  align-items: center;
  padding: 0.4rem 0.85rem 0.85rem;
}

.feed-picker-qty[hidden],
.feed-picker-grid[hidden] { display: none; }

.feed-picker-qty-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 0.3rem;
  border: 1px solid #77a94b;
  border-radius: 10px;
  background: #eef5df;
}

.feed-picker-qty-label {
  color: #274b79;
  font-size: 0.82rem;
  font-weight: 750;
  margin-bottom: 0.35rem;
}

.feed-picker-qty-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.feed-picker-qty-step,
.feed-picker-qty-max,
.feed-picker-qty-back,
.feed-picker-qty-go {
  border: 1px solid #dfd3bd;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffefb, #f6efe3);
  color: #274b79;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.feed-picker-qty-step {
  width: 2rem;
  height: 2rem;
  font-size: 1.05rem;
  line-height: 1;
}

.feed-picker-qty-max { padding: 0.3rem 0.6rem; font-size: 0.78rem; }

.feed-picker-qty-input {
  width: 3.6rem;
  height: 2rem;
  border: 1px solid #dfd3bd;
  border-radius: 8px;
  background: #fff;
  color: #274b79;
  font: inherit;
  font-weight: 800;
  text-align: center;
}

.feed-picker-qty-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.feed-picker-qty-back { padding: 0.35rem 0.8rem; }

.feed-picker-qty-go {
  padding: 0.35rem 0.95rem;
  border-color: #77a94b;
  background: #e8f0dc;
}

.feed-picker-qty-step:hover,
.feed-picker-qty-max:hover,
.feed-picker-qty-back:hover,
.feed-picker-qty-go:hover,
.feed-picker-qty-step:focus-visible,
.feed-picker-qty-max:focus-visible,
.feed-picker-qty-back:focus-visible,
.feed-picker-qty-go:focus-visible {
  outline: none;
  border-color: #77a94b;
  box-shadow: 0 0 0 2px rgba(113, 164, 63, 0.2);
}

@media (max-width: 480px) {
  .feed-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Emotional Bear player-target flow and source animation overlay. */
.emotional-bear-picker {
  z-index: 92;
  background: rgba(18, 24, 32, 0.42);
}
.emotional-bear-picker-card {
  width: min(470px, calc(100vw - 28px));
}
.emotional-bear-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 12px 12px;
}
.emotional-bear-target {
  min-width: 0;
  padding: 12px 8px 10px;
  color: #46384c;
  border: 1px solid #b9a6c3;
  border-radius: 11px;
  background: linear-gradient(#fffdf7, #f1eaf4);
  box-shadow: 0 2px 5px rgba(63, 44, 72, 0.12);
  font: inherit;
  cursor: pointer;
}
.emotional-bear-target:hover,
.emotional-bear-target:focus-visible {
  border-color: #89659d;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 9px rgba(63, 44, 72, 0.2);
}
.emotional-bear-target-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 6px;
  place-items: center;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #a782ba, #6d4f81);
  box-shadow: 0 0 0 1px #9a82a6;
  font-size: 1.25rem;
  font-weight: 800;
}
.emotional-bear-target strong,
.emotional-bear-target small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emotional-bear-target small {
  margin-top: 3px;
  color: #716675;
  font-size: 0.68rem;
}
.emotional-bear-target-mood {
  display: block;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #ddd6df;
}
.emotional-bear-target-mood i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #dda242, #f3c65b);
}
.emotional-bear-fx {
  position: absolute;
  z-index: 89;
  left: 50%;
  top: 47%;
  display: grid;
  width: 250px;
  min-height: 250px;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 12px rgba(42, 26, 47, 0.28));
}
.emotional-bear-fx[hidden] { display: none; }
.emotional-bear-fx img {
  display: block;
  width: 220px;
  height: 226px;
  object-fit: contain;
}
.emotional-bear-fx strong {
  position: absolute;
  bottom: -3px;
  max-width: 280px;
  padding: 6px 12px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  background: rgba(91, 61, 106, 0.9);
  box-shadow: 0 3px 9px rgba(36, 25, 41, 0.25);
  font-size: 0.78rem;
  text-align: center;
  white-space: nowrap;
}
.emotional-bear-fx.is-anthropomorphize {
  top: 52%;
  transform: translate(-50%, -50%) scale(1.18);
}
.pack-bear-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 7px 8px;
  color: #5c4667;
  border: 1px solid #d8c7df;
  border-radius: 9px;
  background: #f5eff8;
  font-size: 0.71rem;
}
.pack-bear-state img {
  width: 34px;
  height: 39px;
  object-fit: contain;
}
.pack-bear-state strong,
.pack-bear-state span { display: block; }
.pack-bear-state span {
  margin-top: 2px;
  color: #786d7d;
}
.pack-pop-actions .pack-bear-action {
  border-color: #a882ba;
  color: #624574;
  background: #f3eaf8;
}
.pack-pop-actions .pack-bear-action[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.pack-pop-actions .pack-bear-upgrade {
  border-color: #c89d45;
  color: #745421;
  background: #fff5d8;
}

@media (max-width: 480px) {
  .emotional-bear-picker-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  #hud { grid-template-columns: 1fr; }
}

/* ===== Glitch-inspired chrome overhaul ===== */
.glitch-chrome {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0.45rem 0.65rem 0.75rem;
}
.glitch-chrome #game-root {
  width: 100%;
}
.glitch-chrome #game-root canvas {
  width: 100% !important;
  height: auto !important;
}
.top-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #eef6fb 0%, #dcecf4 100%);
  border: 1px solid #b7c9d4;
  border-radius: 12px 12px 0 0;
  padding: 0.38rem 0.6rem;
  box-shadow: 0 2px 0 #c5d5e0 inset;
  position: relative;
}
.brand {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 6rem;
  font: inherit; color: inherit; text-align: left; background: none; border: 0;
  padding: 0.15rem 0.35rem; margin: -0.15rem -0.35rem; border-radius: 8px; cursor: pointer;
}
.brand:hover, .brand[aria-expanded="true"] { background: rgba(58, 126, 168, 0.1); }
.brand:focus-visible { outline: 2px solid #3a7ea8; outline-offset: 1px; }
.level-meter { cursor: pointer; }

/* Player menu (PlayerInfoUI): the stats panel and its buttons, under the name. */
.player-menu {
  position: absolute; top: calc(100% + 6px); left: 0.5rem; z-index: 60;
  width: 248px; padding: 0.7rem 0.75rem 0.6rem;
  background: #fbfdff; border: 1px solid #a8bcc9; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(30, 60, 80, 0.22);
  color: #2b4a5c; font-size: 0.85rem;
}
.player-menu[hidden] { display: none; }
.pm-head { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.45rem; }
.pm-level-label { font-weight: 700; color: #5b7484; }
.pm-level { font-size: 1.6rem; font-weight: 800; color: #3a7ea8; line-height: 1; }
.pm-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; margin: 0 0 0.6rem; }
.pm-stats dt { color: #5b7484; font-weight: 700; }
.pm-stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pm-stats dd b { color: #2b4a5c; }
.pm-stats dd small { display: block; color: #6c8494; font-size: 0.72rem; }
.pm-img b { color: #8a5aa6; }
.pm-buttons { display: flex; flex-direction: column; gap: 0.2rem; border-top: 1px solid #dbe6ed; padding-top: 0.5rem; }
.pm-buttons .chrome-btn { width: 100%; justify-content: flex-start; }
.brand-mark {
  font-weight: 800;
  font-size: 1.15rem;
  color: #3a7ea8;
  letter-spacing: 0.04em;
}
.brand-sub { font-size: 0.72rem; opacity: 0.7; }
/* Top bar clusters (Austin 2026-10-27): you (name, then mood and energy stacked
   in one card, as PlayerInfoUI.as kept them with the face), progress (level,
   iMG) and wallet (currants, quoins). Every card is two lines tall, like the
   level card. One gap (Austin 2026-10-28): the name, every card and every row
   sit --hud-gap apart, inside and between clusters, and every card has the
   same height, side padding, border and corner. */
.top-bar {
  --hud-card-h: 2.85rem;
  --hud-gap: 0.5rem;
  --hud-pad-x: 0.5rem;
  gap: var(--hud-gap);
}
.hud-cluster {
  display: flex;
  align-items: center;
  gap: var(--hud-gap);
  flex: 0 0 auto;
}
/* The name's hover pad overhangs it (.brand margin), so the gap counts from its text. */
.hud-you .brand { margin-right: -0.35rem; min-width: 0; }
.hud-cluster > .meta-vitals,
.hud-cluster > .level-meter,
.hud-cluster > .meta-stat {
  box-sizing: border-box;
  height: var(--hud-card-h);
  padding: 0 var(--hud-pad-x);
  border: 1px solid #c8d7df;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff, #f6fbfd);
}
.metabolics-cluster {
  display: flex;
  align-items: center;
  gap: var(--hud-gap);
  flex: 1;
  flex-wrap: wrap;
}
.meta-vitals {
  display: grid;
  align-content: center;
  row-gap: 0.26rem;
  min-width: 11.6rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid #c8d7df;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff, #f6fbfd);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
/* The new-player tour hides mood and energy one at a time (newxp-feature.js); with both gone, so is their card. */
body.nx-hide-mood.nx-hide-energy .meta-vitals { visibility: hidden; }
.meta-pill {
  display: grid;
  grid-template-columns: 0.95rem 2.7rem minmax(40px, 1fr) auto;
  align-items: center;
  gap: 0.28rem;
  color: #486272;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.meta-ico {
  font-size: 0.78rem;
  line-height: 1;
  text-align: center;
}
.meta-pill.mood .meta-ico { color: #c98a1a; }
.meta-pill.energy .meta-ico { color: #3aa0d0; }
.meta-num {
  min-width: 2.9rem;
  color: #6f7e86;
  font-size: 0.61rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.meta-ring {
  height: 6px;
  background: #dfe9ee;
  border-radius: 999px;
  box-shadow: 0 1px 1px rgba(40,70,85,0.18) inset;
  overflow: hidden;
}
.meta-fill {
  height: 100%;
  width: 50%;
  border-radius: 999px;
  transition: width 0.2s;
}
.meta-pill.mood .meta-fill { background: linear-gradient(90deg, #f0b84a, #e0a84a); }
.meta-pill.energy .meta-fill { background: linear-gradient(90deg, #6fd0ef, #3aa0d0); }
.level-meter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: center;
  gap: 0.12rem 0.4rem;
  min-width: 138px;
  padding: 0.22rem 0.48rem 0.24rem;
  border: 1px solid #c8d7df;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff, #f6fbfd);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.level-label {
  color: #486272;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.level-label strong {
  color: #2f7ea3;
  font-size: 0.88rem;
}
.level-xp {
  justify-self: end;
  color: #6f7e86;
  font-size: 0.61rem;
  white-space: nowrap;
}
.level-track {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe9ee;
  box-shadow: 0 1px 1px rgba(40,70,85,0.18) inset;
}
.level-track > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #75bcd8, #8acb75 78%, #f0c958);
  box-shadow: 0 0 5px rgba(101,184,211,0.5);
  transition: width 0.28s ease-out;
}
.meta-stat {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid #cfdde6;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
}
.meta-stat.currants { color: #b8860b; }
/* iMG as two lines: the label over the number, like the level card. */
.meta-stat.hud-img {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1rem;
  color: #486272;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.meta-stat.hud-img strong { color: #8a5aa6; font-size: 0.88rem; }
/* Quoins as two lines: today's count over the multiplier. */
.quoin-stat {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 0.22rem;
  row-gap: 0.08rem;
  line-height: 1;
  color: #7654a6;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.quoin-stat > span { grid-row: 1 / 3; color: #a778d0; }
.quoin-stat strong { grid-column: 2; }
.quoin-stat small {
  grid-column: 2;
  color: #7c8990;
  font-size: 0.67rem;
  font-weight: 800;
}
.quoin-stat.at-limit {
  color: #fff;
  background: linear-gradient(180deg, #c17bd2, #8c5bb4);
  border-color: #754197;
}
.quoin-stat.at-limit > span,
.quoin-stat.at-limit small { color: #fff; }
.currant-coin { color: #d4a017; margin-right: 0.15rem; }
.top-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.top-actions { align-items: center; }
.more-menu { position: relative; display: flex; }
.more-chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.1rem 0 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.more-btn[aria-expanded="true"] .more-chevron { transform: translateY(1px) rotate(225deg); }
/* Unread mail sits on Home, inside the menu; show it on the Menu button too. */
.more-menu:has(.mail-unread-badge:not([hidden])) .more-btn::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.3rem;
  border-radius: 50%;
  background: #d9534f;
  vertical-align: middle;
}
.more-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 148px;
  padding: 0.35rem;
  background: #fbfdff;
  border: 1px solid #a8bcc9;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(30, 50, 60, 0.18);
}
.more-list[hidden] { display: none; }
.more-list .chrome-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-color: transparent;
}
.more-list .chrome-btn:hover,
.more-list .chrome-btn:focus-visible { border-color: #a8bcc9; }
.mute-btn { display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.4rem; }
.mute-btn svg { display: block; }
.mute-btn[aria-pressed="true"] .mute-waves,
.mute-btn[aria-pressed="false"] .mute-x { display: none; }
.chrome-btn {
  border: 1px solid #a8bcc9;
  background: #fff;
  border-radius: 8px;
  padding: 0.32rem 0.52rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: #2b3a44;
}
.chrome-btn:hover { background: #f0f7fb; }
.feat-chrome-btn.is-active {
  color: #6a4a85;
  border-color: #a98bc1;
  background: #f4edfa;
}

@media (max-width: 980px) {
  .level-meter { min-width: 112px; }
  .level-xp { display: none; }
}

/* Phone: the you cluster on one row, progress and wallet on the next, the buttons under them. */
@media (max-width: 560px) {
  .top-bar { --hud-card-h: 2.6rem; --hud-gap: 0.4rem; }
  .hud-you,
  .metabolics-cluster,
  .top-actions { flex: 1 1 100%; }
  /* Each row fills the bar with the same gaps: the mood and energy card and the level card stretch. */
  .hud-you .meta-vitals,
  .hud-progress,
  .hud-progress .level-meter { flex: 1; min-width: 0; }
}

@media (min-width: 981px) and (max-width: 1380px) {
  .top-actions { gap: 0.14rem; }
  .chrome-btn {
    padding: 0.27rem 0.34rem;
    font-size: 0.74rem;
  }
}

@media (min-width: 1101px) {
  .top-bar,
  .metabolics-cluster { flex-wrap: nowrap; }
  /* Buttons wrap to a second row instead of running off the right edge
     (Look and Mute disappeared once Upgrades joined the bar). */
  .top-actions {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.2rem;
  }
}

#game-root {
  position: relative;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px var(--shadow);
  border: 1px solid #b7c9d4;
  border-top: 0;
  background: #8ec8e8;
  min-height: 540px;
}

.street-nameplate {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  background: rgba(255,253,247,0.92);
  border: 1px solid #c5bdaa;
  border-radius: 999px;
  padding: 0.28rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #3d5a32;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  line-height: 1.3;
}

.street-time-divider {
  margin: 0 0.28rem;
  color: #9aa68e;
}

.dametime-clock {
  color: #6d6a87;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Dametime atmosphere sits over Pixi's street, beneath every HUD surface. */
.daylight-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: rgb(255 255 255);
  transition: opacity 2s linear, background-color 2s linear;
}

.daylight-overlay[data-phase="dawn"],
.daylight-overlay[data-phase="dusk"] {
  mix-blend-mode: multiply;
}

.daylight-overlay[data-phase="night"] {
  mix-blend-mode: multiply;
}

.activity-feed {
  position: absolute;
  top: 48px;
  left: 10px;
  z-index: 14;
  width: min(320px, 42%);
  overflow: visible;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  line-height: 1.3;
}
.activity-feed .act {
  background: rgba(255,253,247,0.9);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  color: #3a3428;
  border: 1px solid #ddd3c0;
  animation: actIn 0.25s ease;
  overflow-wrap: anywhere;
}
.activity-feed .act .act-base { color: #2b2a33; font-weight: 600; }
/* Original Local Chat: energy loss warm, mood/xp gain green */
.activity-feed .act .act-loss { color: #c0392b; font-weight: 700; }
.activity-feed .act .act-gain { color: #2e7d32; font-weight: 700; }
.activity-feed .act .act-neutral { color: #5a5248; }
@keyframes actIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.activity-feed .act.is-leaving { opacity: 0; transition: opacity 0.4s ease; }

/* The running verb's word (the original's WordProgressBar, js/word-progress.js):
   three atlas layers (empty letters, the fill clipped by its width, the highlight)
   and the cancel button. game.js places it over the item in world px, scaled. */
.word-progress {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 24;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.word-progress[hidden] { display: none !important; }
.word-progress-word {
  position: absolute;
  left: 0;
  top: 0;
  /* A soft dark edge (CSS only, the art keeps the original's colours) so a light word reads on a
     light rock or sky, and is barely there on dark ground (Austin 2026-10-28, the grey Dullite). */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3));
}
.word-progress-word > i {
  position: absolute;
  left: 0;
  top: 0;
  background-image: var(--word-progress-sheet);
  background-size: var(--word-progress-atlas);
  background-repeat: no-repeat;
}
.word-progress-word > i[hidden] { display: none; }
.word-progress-word > .word-progress-fill { overflow: hidden; }
.word-progress-cancel {
  position: absolute;
  width: 20px;
  height: 21px;
  padding: 0;
  border: 0;
  /* cancel.svg redraws the client's 20 x 21 word_dismisser_cancel.png so it stays sharp when the view scales. */
  background: url("assets/sprites/word-progress/cancel.svg?v=df15aba7") no-repeat 0 0 / 20px 21px;
  cursor: pointer;
  pointer-events: auto;
}
.word-progress-cancel:hover,
.word-progress-cancel:focus-visible {
  background-image: url("assets/sprites/word-progress/cancel_hover.svg?v=df15aba7");
}
.word-progress-cancel:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 50%; }
.word-progress-cancel[hidden] { display: none; }

/* The tutorial's Upgrade hand (newxp-feature .nx-up): a card you cannot buy yet stays a solid card,
   so the avatar and street never show through it (it was opacity .38 on the whole card). As the
   client's ImgCardUI.as 287-310 did, only the suit, art, title and cost fade (alpha .5); the
   backdrop layers stay solid. Out-specifies the feature's injected .nx-up.dim rule. */
.nx-hand .nx-up.dim { opacity: 1; filter: saturate(0.55) brightness(0.82); }
.nx-hand .nx-up.dim > img:is([src*="/suit_"], [src*="/art_"], [src*="/icon_"]),
.nx-hand .nx-up.dim > .nx-up-name,
.nx-hand .nx-up.dim > .nx-up-cost { opacity: 0.5; }

/* Persistent quest + activity context. Hidden to keep the street clear: the
   Quests panel and the activity popups carry the same information. The camera
   reserves no rail width while it is hidden (game.js syncCameraSafeArea). */
.play-context[hidden],
.play-context { display: none !important; }
.play-context {
  position: absolute;
  top: 48px;
  right: 10px;
  bottom: 112px;
  z-index: 13;
  width: min(270px, 31%);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
  color: #332f27;
  line-height: 1.25;
}
.play-context-card {
  overflow: hidden;
  border: 1px solid rgba(115, 103, 80, 0.42);
  border-radius: 9px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: 0 3px 12px rgba(28, 35, 24, 0.17);
  backdrop-filter: blur(3px);
}
.play-context-head {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(115, 103, 80, 0.2);
  background: linear-gradient(180deg, rgba(239, 246, 229, 0.98), rgba(222, 235, 207, 0.98));
  color: #3d5a32;
  font: 700 0.76rem/1.2 "Trebuchet MS", sans-serif;
  text-align: left;
}
button.play-context-head {
  cursor: pointer;
  pointer-events: auto;
}
button.play-context-head:hover,
button.play-context-head:focus-visible {
  background: linear-gradient(180deg, #f6faef, #d6e9c0);
  outline: 2px solid rgba(106, 170, 58, 0.35);
  outline-offset: -2px;
}
.play-context-count {
  min-width: 1.25rem;
  padding: 0.08rem 0.3rem;
  border-radius: 999px;
  background: #6aaa3a;
  color: #fff;
  text-align: center;
  font-size: 0.68rem;
}
.quest-tracker-list {
  padding: 0.35rem;
}
.quest-tracker-card + .quest-tracker-card {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid #e3ddcf;
}
.quest-tracker-title {
  margin-bottom: 0.2rem;
  color: #2f4828;
  font-size: 0.74rem;
  font-weight: 800;
}
.quest-tracker-req {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.66rem;
}
.quest-tracker-req span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quest-tracker-req strong {
  flex-shrink: 0;
  color: #526b43;
}
.quest-tracker-bar {
  height: 4px;
  margin: 0.18rem 0 0.32rem;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe7d8;
}
.quest-tracker-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #76b84b, #a5cf63);
  transition: width 220ms ease-out;
}
.quest-tracker-empty,
.activity-history-empty {
  padding: 0.5rem 0.55rem;
  color: #716b61;
  font-size: 0.68rem;
  font-style: italic;
}
.local-activity {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.play-context-label { flex: 0 0 auto; }
.activity-live-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #78ad52;
  box-shadow: 0 0 0 3px rgba(120, 173, 82, 0.15);
}
.activity-history {
  min-height: 0;
  overflow-y: auto;
  padding: 0.18rem 0.45rem 0.35rem;
}
.activity-history-line {
  padding: 0.32rem 0.08rem;
  border-bottom: 1px solid rgba(115, 103, 80, 0.13);
  font-size: 0.66rem;
}
.activity-history-line:last-child { border-bottom: 0; }
.activity-history-line .act-loss { color: #b74838; font-weight: 700; }
.activity-history-line .act-gain { color: #2e7d32; font-weight: 700; }

@media (max-width: 760px) {
  .play-context { display: none; }
  .activity-feed { width: min(300px, 72%); }
  /* One line on phones, so it never wraps under the activity feed. */
  .street-nameplate {
    top: 6px;
    max-width: calc(100% - 24px);
    padding: 0.18rem 0.6rem;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .activity-feed { top: 36px; }
  /* Side panels end above the pack; their cards scroll inside that space. */
  .side-panel {
    bottom: var(--pack-live-height, 112px);
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }
  .side-panel.side-panel > .side-card {
    max-height: 100%;
    min-height: 0;
    pointer-events: auto;
  }
}

/* Bottom pack — dual row like original (items over tools) */
/* The legacy #inventory row stays in the DOM for old code paths; [hidden]
   must win over .pack-slots' display rule or it leaves an empty third row. */
.pack-slots[hidden] { display: none !important; }
.pack-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Keep the pack usable while vendor/making overlays are open, like Glitch. */
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.55rem 0.4rem;
  background: linear-gradient(180deg, rgba(245,240,230,0.94), rgba(232,224,208,0.97));
  border-top: 1px solid #c5bdaa;
  line-height: 1.25;
}
.pack-currants {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
  color: #b8860b;
  min-width: 4.2rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.pack-currants .currant-coin {
  font-size: 1.15rem;
  line-height: 1;
}
.pack-currants-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.pack-currants-label {
  font-size: 0.58rem;
  font-weight: 600;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pack-rows {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  flex: 1;
  min-width: 0;
}
.pack-row-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}
.pack-row-shell.has-overflow {
  grid-template-columns: 22px minmax(0, 1fr) 22px;
}
.pack-scroll {
  display: none;
  position: relative;
  z-index: 2;
  width: 22px;
  min-width: 22px;
  padding: 0;
  border: 1px solid #b9b19f;
  background: linear-gradient(180deg, #fffef9, #ddd5c5);
  color: #59635c;
  font: 800 1.2rem/1 "Trebuchet MS", sans-serif;
  text-shadow: 0 1px #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.pack-row-shell.has-overflow .pack-scroll { display: block; }
.pack-scroll-left {
  border-radius: 9px 0 0 9px;
  border-right: 0;
}
.pack-scroll-right {
  border-radius: 0 9px 9px 0;
  border-left: 0;
}
.pack-scroll:hover:not(:disabled),
.pack-scroll:focus-visible {
  background: linear-gradient(180deg, #f8fff2, #cde4b8);
  color: #3f7333;
  outline: 2px solid rgba(90, 158, 62, 0.35);
  outline-offset: -2px;
}
.pack-scroll:disabled {
  color: #aaa69d;
  cursor: default;
  opacity: 0.58;
}
.pack-row-shell.can-scroll-back::before,
.pack-row-shell.can-scroll-forward::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1px;
  bottom: 1px;
  width: 8px;
  pointer-events: none;
}
.pack-row-shell.can-scroll-back::before {
  left: 22px;
  background: linear-gradient(90deg, rgba(66, 58, 45, 0.18), transparent);
}
.pack-row-shell.can-scroll-forward::after {
  right: 22px;
  background: linear-gradient(270deg, rgba(66, 58, 45, 0.18), transparent);
}
.pack-slots {
  display: flex;
  gap: 0.28rem;
  overflow-x: auto;
  min-width: 0;
  /* The row scrolls sideways, so it clips everything outside its padding box: 5px above and below
     leaves room for a selected slot's lift and ring and an open bag's edge (Austin 2026-10-28), and
     the matching negative margin keeps the pack the height it was (0.08rem padding before). */
  padding: 5px 0;
  margin-block: calc(0.08rem - 5px);
  /* Min heights grow by the same amount, so an empty row keeps its height too. */
  min-height: calc(44px + 10px - 0.16rem);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.pack-slots::-webkit-scrollbar { display: none; }
.pack-slots.pack-tools {
  min-height: calc(42px + 10px - 0.16rem);
}
.pack-slots .inv-slot,
.pack-slots .pack-slot {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #fffdf7;
  border: 1px solid #c5bdaa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  padding: 0;
  font: inherit;
  color: inherit;
}
.pack-slots.pack-tools .pack-slot {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  background: #f7f4ec;
}
.pack-slots .pack-slot:hover { border-color: #8fbf6a; background: #f7fbee; }
.pack-slots .pack-slot.active {
  border-color: #5a9e3e;
  background: #eef8e8;
  box-shadow: 0 0 0 2px rgba(90, 158, 62, 0.28), 0 2px 5px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.pack-slots .pack-slot.is-dragging {
  opacity: 0.42;
  border-color: #5c9cc7;
  transform: translateY(-4px) scale(0.96);
}
.pack-slots .pack-slot.pack-tool { border-color: #b8b0a0; }
.pack-slots .pack-slot img {
  max-width: 30px;
  max-height: 30px;
  image-rendering: auto;
}
.pack-slots .pack-slot .count {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #2b2a33;
  text-shadow: 0 0 2px #fff;
}
.pack-slot-wear {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(42, 48, 42, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.pack-slot-wear i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e1a63f, #8bc762 45%, #5eaa62);
  transition: width 180ms ease;
}
.pack-slots .pack-slot.is-broken {
  filter: saturate(0.35);
  box-shadow: inset 0 0 0 2px rgba(181, 74, 59, 0.72);
}
.pack-slot.is-broken .pack-slot-wear i { background: #b54a3b; }
.pack-slots .pack-empty {
  opacity: 0.45;
  border-style: dashed;
  cursor: default;
}
/* G152 bags: a bag in a pack slot with its opener strip (PackSlot.as:106-176), the open bag's row above the
   pack (PackContainerView.as:213-219 background 0xc6d2d3, border 0xb2bfc0) and the magic rock's chip. */
.pack-slots .pack-slot.pack-bag {
  flex-direction: column;
  /* The icon centred in the space above the 13px opener strip (it hugged the top edge). */
  justify-content: center;
  padding: 0 0 13px;
  overflow: hidden;
}
.pack-slots .pack-slot.pack-bag img { max-width: 26px; max-height: 26px; }
.pack-bag-opener {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  background: #f0f5f7;
  border-top: 1px solid #d1d6d7;
  font-size: 0.56rem;
  line-height: 1;
  color: #4d5659;
}
.pack-bag-opener i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #6d777c;
}
.pack-slots .pack-slot.pack-bag.is-open {
  /* The open bag's slot stays in the row (no lift, which the sideways-scrolling row clipped) and keeps its
     rounded corners: the client squared them where the slot joined the bag panel (PackSlot.as drawFullBox
     127-130), but here the panel sits apart, so square corners read as cut off (Austin 2026-10-28). */
  background: #78898a;
  border-color: #6b7a7b;
}
.pack-slots .pack-slot.pack-bag.is-open .pack-bag-opener { background: #78898a; color: #fff; border-top-color: #6b7a7b; }
.pack-slots .pack-slot.pack-bag.is-open .pack-bag-opener i { background: #fff; }
.pack-bag-row {
  align-self: flex-start;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 6px 5px;
  background: #c6d2d3;
  border: 1px solid #b2bfc0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  animation: pack-bag-in 0.3s ease-in;
}
.pack-bag-row[hidden] { display: none; }
@keyframes pack-bag-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pack-bag-row { animation: none; } }
.pack-bag-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: #3f4a4c;
  margin-bottom: 3px;
}
.pack-bag-head img { width: 16px; height: 16px; }
.pack-bag-head span { opacity: 0.75; }
.pack-bag-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  font: 800 0.95rem/1 "Trebuchet MS", sans-serif;
  color: #4d5659;
  cursor: pointer;
  padding: 0 2px;
}
.pack-slots.pack-bag-slots {
  flex-wrap: wrap;
  overflow: visible;
  min-height: 0;
}
.pack-slots.pack-bag-slots .pack-slot { width: 40px; height: 40px; flex-basis: 40px; }
.pack-slots .pack-slot.is-drop-target {
  border-color: #5c9cc7;
  box-shadow: 0 0 0 2px rgba(92, 156, 199, 0.45);
  opacity: 1;
}
.pack-slots .pack-slot.pack-rock {
  background: #efe6d2;
  border-color: #b9a77f;
}
.pack-slots .pack-slot.pack-rock img { max-width: 28px; max-height: 28px; }
.pack-hint {
  font-size: 0.62rem;
  opacity: 0.5;
  white-space: nowrap;
  max-width: 7.8rem;
  text-align: right;
  flex-shrink: 0;
}

.pack-popover {
  --pack-arrow-left: 50%;
  position: absolute;
  left: 8px;
  bottom: calc(100% + 9px);
  z-index: 52;
  width: min(300px, calc(100vw - 28px));
  padding: 0.72rem;
  background: #fffdf7;
  border: 1px solid #bfb49e;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(44, 35, 22, 0.28);
  color: #342f28;
  line-height: 1.3;
  animation: pack-pop-in 0.14s ease-out;
}
.pack-popover[hidden] { display: none !important; }
.pack-popover::after {
  content: '';
  position: absolute;
  left: var(--pack-arrow-left);
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: #fffdf7;
  border-right: 1px solid #bfb49e;
  border-bottom: 1px solid #bfb49e;
}
.pack-pop-head {
  display: grid;
  grid-template-columns: 54px 1fr 26px;
  align-items: center;
  gap: 0.55rem;
}
.pack-pop-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #f5f1e8;
  border: 1px solid #ded5c4;
  border-radius: 10px;
}
.pack-pop-icon img { max-width: 42px; max-height: 42px; object-fit: contain; }
.pack-pop-title { min-width: 0; }
.pack-pop-title h3 {
  margin: 0.05rem 0 0;
  font-size: 1rem;
  line-height: 1.15;
}
.pack-pop-title h3 b {
  color: #766d60;
  font-size: 0.72rem;
  margin-left: 0.25rem;
}
.pack-pop-kind {
  color: #6f9d49;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pack-pop-close {
  align-self: start;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #766d60;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.pack-pop-close:hover { background: #eee8dc; }
.pack-pop-desc {
  margin: 0.6rem 0 0.5rem;
  color: #5b544a;
  font-size: 0.76rem;
}
.pack-tool-condition {
  margin: 0.55rem 0 0.45rem;
  padding: 0.45rem 0.55rem;
  border-radius: 9px;
  background: rgba(100, 132, 80, 0.1);
}
.pack-tool-condition > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #59654f;
  font-size: 0.78rem;
}
.pack-tool-condition-track {
  height: 7px;
  margin-top: 0.32rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(51, 64, 45, 0.18);
}
.pack-tool-condition-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e1a63f, #8bc762 45%, #5eaa62);
}
.pack-tool-condition.broken { background: rgba(181, 74, 59, 0.12); }
.pack-tool-condition.broken > div:first-child,
.pack-tool-condition.broken strong { color: #a13f34; }
.pack-tool-condition.broken .pack-tool-condition-track i { background: #b54a3b; }
.pack-tool-unlimited {
  margin: 0.45rem 0;
  color: #7a8373;
  font-size: 0.76rem;
  font-style: italic;
}
.pack-pop-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}
.pack-pop-effect {
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
  background: #edf7e7;
  border: 1px solid #c7dfb7;
  color: #39752e;
  font-size: 0.68rem;
  font-weight: 800;
}
.pack-pop-effect.loss {
  background: #fff0eb;
  border-color: #edc0b2;
  color: #a64635;
}
.pack-pop-effect.music {
  background: #f3ecff;
  border-color: #d5c0f1;
  color: #70459d;
}
.pack-food-memory {
  margin: 0.15rem 0 0.55rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid #ddd4c2;
  border-radius: 9px;
  background: #faf7ef;
  color: #655d50;
}
.pack-food-memory > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.67rem;
}
.pack-food-memory strong { color: #645a4e; }
.pack-food-memory.has-bonus {
  border-color: #d6c070;
  background: linear-gradient(180deg, #fffbea, #f8f2d7);
}
.pack-food-memory.has-bonus strong { color: #9a7013; }
.pack-food-track {
  height: 5px;
  margin-top: 0.32rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e3ddd0;
}
.pack-food-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fc370, #e2b64e 75%, #cf714f);
}
.pack-food-memory p {
  margin: 0.35rem 0 0;
  color: #a34e3c;
  font-size: 0.66rem;
  font-weight: 700;
}
.pack-pop-recipes {
  margin: 0 0 0.5rem;
  color: #746b5e;
  font-size: 0.68rem;
}
.pack-pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e6dfd2;
}
.pack-pop-actions button {
  border: 1px solid #bcb29f;
  border-radius: 7px;
  padding: 0.35rem 0.58rem;
  background: #f7f3ea;
  color: #423b32;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}
.pack-pop-actions button:hover { background: #eee8dc; }
.pack-pop-actions button:disabled {
  cursor: default;
  opacity: 0.48;
}
.pack-pop-actions .pack-pop-primary {
  border-color: #5a9e3e;
  background: #6aaa3a;
  color: #fff;
}
/* The plain button hover above outranks this class: keep the green, a shade deeper. */
.pack-pop-actions .pack-pop-primary:hover:not(:disabled) { background: #5c9a2f; border-color: #4d8a33; }
.pack-pop-actions .pack-pop-primary:disabled { background: #6aaa3a; }
.pack-pop-actions .pack-pop-repair {
  color: #fff;
  border-color: #8a6536;
  background: linear-gradient(#d99b45, #b8742f);
}
.pack-pop-actions .pack-pop-repair:hover:not(:disabled) { background: linear-gradient(#cf8f39, #a96826); }
.pack-pop-actions .pack-pop-repair:disabled {
  color: rgba(255, 255, 255, 0.78);
  opacity: 0.55;
  cursor: not-allowed;
}

.tool-repair-fx {
  position: fixed;
  left: 50%;
  bottom: 112px;
  z-index: 1200;
  width: min(270px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem 0.5rem;
  border: 1px solid rgba(112, 83, 45, 0.72);
  border-radius: 13px;
  background: rgba(255, 249, 228, 0.96);
  box-shadow: 0 8px 24px rgba(41, 31, 20, 0.28);
  color: #59452f;
  pointer-events: none;
}
.tool-repair-sprite {
  /* G191: the Tinkertool's own tool_animation, the Make panel's sharp sheet (js/make-tool-sheets.js
     tinkertool: 26 frames of 51 x 46, 2 columns by 13 rows at 3x), played as .mp-tool-sheet plays it,
     30 fps, 2 frames a row (tinkertool.js:473 sends state tool_animation while it repairs). */
  --mp-sheet-w: 102px;
  --mp-sheet-h: 598px;
  --mp-cols: 2;
  --mp-rows: 13;
  --mp-row-dur: 66.667ms;
  grid-row: 1 / span 2;
  width: 51px;
  height: 46px;
  background: url('assets/sprites/making/tinkertool-work@3x.webp?v=df15aba7') 0 0 / var(--mp-sheet-w) var(--mp-sheet-h) no-repeat;
  animation:
    make-tool-sheet-x var(--mp-row-dur) steps(var(--mp-cols), end) infinite,
    make-tool-sheet-y calc(var(--mp-row-dur) * var(--mp-rows)) steps(var(--mp-rows), end) infinite;
}
.tool-repair-copy {
  align-self: end;
  font-size: 0.78rem;
  font-weight: 800;
}
.tool-repair-track {
  align-self: start;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(92, 70, 43, 0.16);
}
.tool-repair-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d58f38, #76af55);
  animation: tool-repair-progress var(--tool-repair-ms) linear forwards;
}
@keyframes tool-repair-progress {
  from { width: 0; }
  to { width: 100%; }
}
.pack-pop-actions .pack-pop-sell { margin-left: auto; color: #a16e08; }
.pack-drop-quantity {
  margin-top: 0.55rem;
  padding: 0.55rem;
  border: 1px solid #ddcfb5;
  border-radius: 9px;
  background: #fbf3df;
}
.pack-drop-quantity p {
  margin: 0 0 0.45rem;
  color: #655a48;
  font-size: 0.68rem;
}
.pack-drop-stepper,
.pack-drop-confirm-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pack-drop-stepper { justify-content: center; }
.pack-drop-stepper output {
  min-width: 5.6rem;
  text-align: center;
  color: #44392b;
  font-size: 0.76rem;
  font-weight: 800;
}
.pack-drop-quantity button {
  border: 1px solid #b9aa8d;
  border-radius: 7px;
  padding: 0.32rem 0.58rem;
  background: #fffdf7;
  color: #44392b;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}
.pack-drop-stepper button {
  width: 2rem;
  height: 1.9rem;
  padding: 0;
  font-size: 1rem;
}
.pack-drop-confirm-row {
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.pack-drop-confirm-row .pack-pop-primary {
  border-color: #5a9e3e;
  background: #6aaa3a;
  color: #fff;
}
/* Eat how many? (js/eat-many.js): the original's count choices above the drop stepper's controls. */
.pack-eat-quantity .pack-eat-title {
  margin: 0 0 0.4rem;
  color: #44392b;
  font-size: 0.74rem;
  font-weight: 800;
}
.pack-eat-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}
.pack-eat-quantity .pack-eat-choice {
  min-width: 2.1rem;
  min-height: 1.9rem;
}
.pack-eat-quantity .pack-eat-choice.is-selected {
  border-color: #5a9e3e;
  background: #edf7e7;
  color: #2f6a24;
}
.pack-eat-quantity button:focus-visible {
  outline: 2px solid #3f7fbf;
  outline-offset: 1px;
}
.pack-eat-quantity button:disabled {
  cursor: default;
  opacity: 0.45;
}
.pack-eat-preview {
  justify-content: center;
  margin: 0.45rem 0 0;
}
.pack-eat-note {
  margin: 0.4rem 0 0;
  color: #6f6352;
  font-size: 0.66rem;
  text-align: center;
}
.pack-eat-note span { white-space: nowrap; }
.pack-eat-quantity .pack-drop-confirm-row .pack-pop-primary:hover { background: #5c9a2f; border-color: #4d8a33; }
@keyframes pack-pop-in {
  from { opacity: 0; transform: translateY(5px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 620px) {
  .pack-hint { display: none; }
  .pack-popover { left: 8px !important; right: 8px; width: auto; }
  .pack-popover::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-popover { animation: none; }
}

/* Character builder */
.avatar-panel .avatar-card {
  max-width: min(560px, 96vw);
}
.avatar-builder-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 560px) {
  .avatar-builder-layout { grid-template-columns: 1fr; }
}
.avatar-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
#avatar-preview {
  width: 140px;
  height: 200px;
  image-rendering: auto;
  background: radial-gradient(ellipse at 50% 70%, #e8f0d8 0%, #c5d4a8 70%, #a8b888 100%);
  border-radius: 12px;
  border: 2px solid #c5bdaa;
  box-shadow: inset 0 0 0 1px #fff8;
}
.avatar-presets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 180px;
}
/* Looks / Starter / Costumes: one group of chips at a time. */
.avatar-preset-groups {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: #ece5d6;
  border: 1px solid #c5bdaa;
}
.avatar-preset-group {
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.18rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5b5648;
  cursor: pointer;
}
.avatar-preset-group:hover { color: #2e5a20; }
.avatar-preset-group.active {
  background: #fffdf7;
  color: #2e5a20;
  box-shadow: 0 1px 2px rgba(60, 50, 30, 0.25);
}
.avatar-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}
@media (max-width: 560px) {
  .avatar-presets { max-width: none; width: 100%; }
  /* #game-root canvas is full width; on one column that made the preview fill the phone. */
  #game-root #avatar-preview { width: 150px !important; height: 214px !important; }
}
.avatar-preset-chip {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #c5bdaa;
  background: #fffdf7;
  cursor: pointer;
  color: #2b2a33;
}
.avatar-preset-chip:hover,
.avatar-preset-chip.active {
  border-color: #5a9e3e;
  background: #eef8e8;
}
.avatar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}
.avatar-tab {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: 8px 8px 0 0;
  border: 1px solid #c5bdaa;
  background: #f0ebe0;
  cursor: pointer;
  font: inherit;
  color: #2b2a33;
}
.avatar-tab.active {
  background: #fffdf7;
  border-bottom-color: #fffdf7;
  color: #2e5a20;
}
.avatar-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  min-height: 120px;
  padding: 0.55rem;
  background: #fffdf7;
  border: 1px solid #c5bdaa;
  border-radius: 0 10px 10px 10px;
  margin-bottom: 0.65rem;
}
.avatar-swatch {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid #c5bdaa;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  padding: 0;
}
.avatar-swatch:hover { transform: scale(1.05); }
.avatar-swatch.active {
  border-color: #2e5a20;
  box-shadow: 0 0 0 2px #8fbf6a;
}
.avatar-swatch .sw-label {
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 1px #000;
  pointer-events: none;
}
.avatar-swatches[data-mode="parts"] {
  display: block;
  max-height: min(340px, 52vh);
  overflow-y: auto;
}
.avatar-section-title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5b5648;
  margin: 0.15rem 0 0.3rem;
}
.avatar-section-title:not(:first-child) { margin-top: 0.6rem; }
.avatar-style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.avatar-style-chip {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #c5bdaa;
  background: #fffdf7;
  color: #2b2a33;
  cursor: pointer;
}
.avatar-style-chip:hover,
.avatar-style-chip.active {
  border-color: #5a9e3e;
  background: #eef8e8;
  color: #2e5a20;
}
.avatar-style-chip[hidden],
.avatar-note[hidden] { display: none; }
.avatar-search {
  display: block;
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.3rem 0.55rem;
  margin: 0 0 0.35rem;
  border-radius: 999px;
  border: 1px solid #c5bdaa;
  background: #fff;
  color: #2b2a33;
}
.avatar-search:focus {
  outline: none;
  border-color: #5a9e3e;
  box-shadow: 0 0 0 2px #cfe6c0;
}
.avatar-more-chip {
  border-style: dashed;
  color: #2e5a20;
}
.avatar-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.avatar-swatch-small { border-radius: 6px; border-width: 1px; }
.avatar-note {
  font-size: 0.66rem;
  margin: 0.3rem 0 0;
  opacity: 0.75;
}
/* Start fresh: Tiny Speck's new-player picker (js/avatar-builder-ui.js). */
.avatar-starter .avatar-note { margin: 0 0 0.4rem; }
.avatar-starter-actions {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}
.avatar-starter-group + .avatar-starter-group {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed #d8d0bd;
}
.avatar-starter-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0;
}
.avatar-starter-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2b2a33;
}
.avatar-starter-arrow {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.55rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #c5bdaa;
  background: #fffdf7;
  color: #2e5a20;
  cursor: pointer;
}
.avatar-starter-arrow:hover { border-color: #5a9e3e; background: #eef8e8; }
.avatar-starter-dots {
  display: flex;
  gap: 0.2rem;
}
.avatar-starter-dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #a99f88;
  background: #fffdf7;
  cursor: pointer;
}
.avatar-starter-dot.active {
  border-color: #2e5a20;
  background: #5a9e3e;
}
.avatar-reimagined-tag {
  margin-left: 0.3em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: #f3e2c9;
  color: #8a4f12;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}
.avatar-hint {
  font-size: 0.68rem;
  opacity: 0.6;
  margin: 0.45rem 0 0;
}
.btn-secondary {
  margin-top: 0.45rem;
  background: transparent;
  border: 1px solid #8fbf6a;
  color: #2e5a20;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.btn-secondary:hover { background: #eef8e8; }

/* Crop garden tend panel */
.garden-panel .garden-card { max-width: min(420px, 94vw); }
.garden-seed-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.55rem;
}
.garden-seed-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #c5bdaa;
  background: #fffdf7;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.garden-seed-chip img { width: 18px; height: 18px; object-fit: contain; }
.garden-seed-chip.active {
  border-color: #5a9e3e;
  background: #eef8e8;
  box-shadow: 0 0 0 1px #8fbf6a;
}
.garden-seed-chip:disabled { opacity: 0.45; cursor: default; }
.garden-plots {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.garden-plot {
  position: relative;
  min-height: 88px;
  border-radius: 10px;
  border: 1px solid #b8a882;
  background: linear-gradient(180deg, #c4a574 0%, #8b6914 55%, #6b4f12 100%);
  padding: 0.35rem;
  cursor: pointer;
  text-align: center;
  color: #fffdf7;
  font-size: 0.68rem;
  line-height: 1.25;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.garden-plot:hover { filter: brightness(1.06); }
.garden-plot.clean { background: linear-gradient(180deg, #d4b896, #9a7340); }
.garden-plot.seeds { background: linear-gradient(180deg, #b8956a, #7a5a30); }
.garden-plot.shoots { background: linear-gradient(180deg, #8fbf6a, #5a8a3a); }
.garden-plot.crop {
  background: linear-gradient(180deg, #7dcea0, #3d8b5a);
  box-shadow: 0 0 0 2px #ffe066, inset 0 1px 0 rgba(255,255,255,0.2);
}
.garden-plot.dirty { background: linear-gradient(180deg, #6b5344, #3d2e24); opacity: 0.95; }
.garden-plot.wet::after {
  content: '💧';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7rem;
}
.garden-plot .gp-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin: 0.15rem auto 0.2rem;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
.garden-plot .gp-state { font-weight: 800; font-size: 0.7rem; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.garden-plot .gp-action {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.garden-plot .gp-bar {
  height: 4px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
  margin-top: 0.3rem;
  overflow: hidden;
}
.garden-plot .gp-bar > i {
  display: block;
  height: 100%;
  background: #7dcea0;
  width: 0;
}
.garden-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: #5a5248;
  margin: 0.25rem 0 0;
}

/* Make progress / result (original multi-craft feedback) */
.make-progress {
  margin-top: 0.65rem;
  padding: 0.85rem 1rem 0.7rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.95), rgba(247,244,236,0.82) 55%),
    #f7f4ec;
  border-radius: 14px;
  border: 1px solid #d8ceb9;
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(71, 57, 35, 0.08);
}
.make-progress .mp-label {
  font-size: 1rem;
  font-weight: 700;
  color: #2b2a33;
  margin: 0 0 0.35rem;
}
.make-progress .mp-stage {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 118px minmax(70px, 1fr);
  align-items: center;
  gap: 0.55rem;
  margin: 0.1rem auto 0.55rem;
}
.make-progress .mp-ingredients {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}
.make-progress .mp-ingredient {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.86);
  border: 1px solid #ddd3c0;
}
.make-progress .mp-ingredient img {
  width: 31px;
  height: 31px;
  object-fit: contain;
}
.make-progress .mp-ingredient b {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #5d5445;
  color: #fff;
  font-size: 0.62rem;
}
.make-progress .mp-tool-wrap {
  position: relative;
  width: 112px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: auto;
}
.make-progress .mp-tool {
  width: 92px;
  height: 92px;
  object-fit: contain;
  transform-origin: 52% 70%;
  filter: drop-shadow(0 5px 4px rgba(67, 49, 24, 0.22));
  animation: make-tool-work 0.62s ease-in-out infinite alternate;
}
.make-progress .mp-tool-sheet {
  /* G188, G191: a making tool's own tool_animation (glitch-client MakingToolAnimator.as), from
     js/make-tool-sheets.js (built by tools/build-make-tool-sheets.py). The span is one cell in CSS
     pixels, scaled to fit the tool box; the sheet is a grid of full rows (sharp FFDec renders at 2x or
     3x, drawn at 1x size), so x steps along a row while y steps down the rows once per row. game.js
     sets the sheet, cell, grid, row time (cols at 30 fps) and scale as custom properties. */
  display: block;
  width: var(--mp-fw);
  height: var(--mp-fh);
  object-fit: none;
  background-position: 0 0;
  background-size: var(--mp-sheet-w) var(--mp-sheet-h);
  background-repeat: no-repeat;
  /* Centred on the box even when the 1x cell is bigger than it (the Frying Pan's 160 x 96, the
     Crystallizer's 122 x 175): a grid item that overflows is start-aligned by Chrome, which pushed
     those six tools off to one side. ItemIconView.as:328-336 centres the art's bounds in the box. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--mp-scale));
  transform-origin: 50% 50%;
  animation:
    make-tool-sheet-x var(--mp-row-dur) steps(var(--mp-cols), end) infinite,
    make-tool-sheet-y calc(var(--mp-row-dur) * var(--mp-rows)) steps(var(--mp-rows), end) infinite;
}
.make-progress .mp-tool-machine,
.make-result .mr-machine {
  /* G193: a machine's own SWF states (js/machine-art.js picks the frame; the span is one cell of
     its sheet from tools/build-machine-art.py, scaled to fit). No wobble: the art moves itself. */
  display: block;
  object-fit: none;
  animation: none;
  /* The cell keeps headroom for the active effects above the machine: stand it on the box floor. */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(var(--mp-scale));
  transform-origin: 50% 100%;
}
.make-result .mr-machine-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto 0.4rem;
}
.make-result .mr-machine-stage > .make-detail-icon { margin: 0; }
.make-result .mr-machine-box {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
/* lowFuelAlert's bubble (fuelmaker.js:1228-1233), over the machine that said it. */
.make-result .mr-machine-say {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.22rem 0.55rem;
  border-radius: 9px;
  background: #fffdf6;
  color: #4a4136;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(67, 49, 24, 0.22);
}
.make-progress .mp-spark {
  position: absolute;
  color: #f3b61f;
  text-shadow: 0 1px #fff;
  animation: make-spark 0.75s ease-in-out infinite alternate;
}
.make-progress .mp-spark-a { left: 2px; top: 21px; }
.make-progress .mp-spark-b { right: 1px; bottom: 22px; animation-delay: -0.38s; }
.make-progress .mp-output-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  color: #5a9e3e;
}
.make-progress .mp-output {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(67, 49, 24, 0.16));
  animation: make-output-pulse 0.8s ease-in-out infinite alternate;
}
.make-progress .mp-arrow { color: #9b927f; font-size: 1.2rem; }
.make-progress .mp-output-wrap b { font-size: 0.72rem; }
.make-progress .mp-unit-row {
  display: flex;
  justify-content: space-between;
  margin: 0.2rem 0 0.18rem;
  color: #675f53;
  font-size: 0.68rem;
  font-weight: 700;
}
.make-progress .mp-overall-row { margin-top: 0.42rem; opacity: 0.82; }
.make-progress .mp-cancel { margin-top: 0.62rem; }
.make-card.is-crafting .make-tool-tabs {
  pointer-events: none;
  opacity: 0.45;
}
.make-progress .mp-bar {
  height: 8px;
  background: #e5dfd2;
  border-radius: 4px;
  overflow: hidden;
}
.make-progress .mp-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7dcea0, #5dade2);
  width: 0;
  transition: width 0.12s ease;
}
.make-progress .mp-total-bar { height: 5px; }
.make-progress .mp-total-bar > i {
  background: linear-gradient(90deg, #f3b61f, #ef8f37);
}
@keyframes make-tool-work {
  from { transform: rotate(-7deg) translateY(3px); }
  to { transform: rotate(8deg) translateY(-3px); }
}
@keyframes make-tool-sheet-x {
  from { background-position-x: 0; }
  to { background-position-x: calc(-1 * var(--mp-sheet-w)); }
}
@keyframes make-tool-sheet-y {
  from { background-position-y: 0; }
  to { background-position-y: calc(-1 * var(--mp-sheet-h)); }
}
@keyframes make-spark {
  from { opacity: 0.25; transform: scale(0.65) rotate(0); }
  to { opacity: 1; transform: scale(1.2) rotate(28deg); }
}
@keyframes make-output-pulse {
  from { opacity: 0.35; transform: scale(0.9); }
  to { opacity: 0.72; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .make-progress .mp-tool,
  .make-progress .mp-spark,
  .make-progress .mp-output { animation: none; }
}
.make-result {
  margin-top: 0.5rem;
  padding: 0.75rem 0.5rem 0.35rem;
  text-align: center;
}
.make-result > .make-detail-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.4rem;
}
.make-result > .make-detail-icon img {
  max-width: 78px;
  max-height: 78px;
}
.make-result .mr-kicker {
  font-size: 1.35rem;
  font-weight: 800;
  color: #5a9e3e;
  margin: 0 0 0.25rem;
}
.make-result .mr-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2b2a33;
  margin: 0 0 0.55rem;
}
.make-result .mr-deltas {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.make-result .mr-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  border: 1px solid #ddd3c0;
  background: #fff;
}
.make-result .mr-delta.loss { color: #c0392b; border-color: #f0c0ba; background: #fff5f4; }
.make-result .mr-delta.gain { color: #2e7d32; border-color: #b9dfb8; background: #f3faf3; }
.make-result .mr-used {
  font-size: 0.78rem;
  color: #5a5248;
  margin: 0.35rem 0 0.5rem;
}
.make-result .mr-used-list {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.make-result .mr-used-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.make-result .mr-used-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #ddd3c0;
  border-radius: 8px;
  padding: 2px;
}
.make-result .mr-actions {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

/* Side panels (quest / vendor / skills / buffs / make) */
.side-panel {
  position: absolute;
  top: 44px;
  left: 10px;
  z-index: 35;
  max-width: min(340px, 92%);
  line-height: 1.35;
  color: #2b2a33;
}
.side-panel.vendor-panel { left: auto; right: 10px; }
.side-panel[hidden] { display: none !important; }
.side-card {
  background: #fffdf7;
  border-radius: 12px;
  border: 1px solid #c5bdaa;
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  padding: 0.75rem 0.85rem;
  max-height: 360px;
  overflow: auto;
}
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.side-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #3d5a32;
}
.quest-log-body { margin-top: 0.5rem; font-size: 0.88rem; }
.quest-log-body .q-card {
  border: 1px solid #dce8d0;
  background: #f6faf1;
  border-radius: 8px;
  padding: 0.5rem 0.55rem;
  margin-bottom: 0.4rem;
}
.quest-log-body .q-card.done {
  background: #e8f5d8;
  border-color: #a8d080;
}
.quest-log-body .q-card.story-offer {
  background: linear-gradient(145deg, #f8f3ff, #fffdf7);
  border-color: #bda6d8;
}
.quest-log-body .q-card.story-offer .content-action-btn {
  width: 100%;
  margin-top: 0.55rem;
  color: #fff;
  border-color: #6d4b89;
  background: linear-gradient(#9b74ba, #744f92);
}
.quest-log-body .q-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
  line-height: 1.3;
  display: block;
}
.quest-log-body .q-req {
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.35;
  display: block;
  margin-bottom: 0.15rem;
}
/* An item or skill name linked in the quest copy (<a href="event:item|...">, js/quest-text.js). */
.q-link {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.quest-log-body .q-bar {
  height: 6px;
  background: #e0e8d8;
  border-radius: 999px;
  margin-top: 0.25rem;
  overflow: hidden;
}
.quest-log-body .q-bar > i {
  display: block;
  height: 100%;
  background: #6aaa3a;
  border-radius: 999px;
}
.quest-dialogue {
  position: absolute;
  inset: 0;
  z-index: 510;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.quest-dialogue[hidden] { display: none; }
/* G192: prompts and conversations wait for the street loading card (PromptView.as 420/440). */
html[data-street-cards] .quest-dialogue { visibility: hidden; }
/* G198: toasts and activity lines too, as GrowlQueue.as moveMoveStarted 243-247 hid growls; their clocks stop (screen-fx cardPausedTimeout). */
html[data-street-cards] .toast,
html[data-street-cards] .activity-feed { visibility: hidden; }
.quest-dialogue-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(111, 80, 137, 0.18), transparent 35%),
    rgba(20, 16, 26, 0.72);
  backdrop-filter: blur(2px);
}
.quest-dialogue-card {
  position: relative;
  width: min(520px, calc(100% - 2rem));
  max-height: min(480px, calc(100% - 2rem));
  overflow: auto;
  text-align: center;
  color: #382c43;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.98), rgba(244,237,250,0.97));
  box-shadow: 0 22px 70px rgba(0,0,0,0.42), inset 0 0 0 1px #cbb7dc;
  padding: 1.2rem 1.45rem 1.1rem;
}
.quest-dialogue-card h2 {
  margin: 0.1rem 0 0.7rem;
  color: #543b69;
  font-size: 1.45rem;
}
.quest-dialogue-copy {
  min-height: 5.4em;
  margin: 0 0 1rem;
  white-space: pre-line;
  font-size: 0.98rem;
  line-height: 1.55;
}
.quest-dialogue-card .btn-glitch-primary {
  min-width: 190px;
}
.quest-dialogue-cancel {
  display: block;
  margin: 0.65rem auto 0;
  padding: 0.2rem 0.5rem;
  color: #6e6474;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.quest-dialogue-cancel[hidden] { display: none; }

.rook-museum-exhibit {
  position: absolute;
  inset: 0;
  z-index: 520;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.rook-museum-exhibit[hidden] { display: none; }
.rook-museum-exhibit-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 36% 45%, rgba(237, 185, 91, 0.18), transparent 35%),
    rgba(25, 14, 8, 0.78);
  backdrop-filter: blur(3px);
}
.rook-museum-exhibit-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1.05fr) minmax(260px, 0.95fr);
  width: min(800px, calc(100% - 2rem));
  max-height: min(470px, calc(100% - 2rem));
  overflow: hidden;
  color: #3d2b1c;
  border: 3px solid #d6b46f;
  border-radius: 18px;
  background: #fff9e9;
  box-shadow: 0 24px 80px rgba(0,0,0,0.56), inset 0 0 0 1px #fff5cf;
}
.rook-museum-exhibit-close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;
  width: 29px;
  height: 29px;
  color: #5a3a23;
  font: 700 1.15rem/1 sans-serif;
  border: 1px solid rgba(91, 58, 34, 0.25);
  border-radius: 50%;
  background: rgba(255, 249, 230, 0.9);
  cursor: pointer;
}
.rook-museum-exhibit-visual {
  position: relative;
  display: grid;
  min-height: 310px;
  place-items: center;
  overflow: hidden;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 226, 147, 0.44), transparent 38%),
    repeating-linear-gradient(90deg, #54321f 0 8px, #604027 8px 16px);
}
.rook-museum-exhibit-visual img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
  transition: transform 220ms ease, opacity 180ms ease, filter 220ms ease;
}
.rook-museum-exhibit-visual.is-painting img {
  width: 100%;
  border: 10px solid #7a4c27;
  outline: 2px solid #d7a95d;
}
.rook-museum-exhibit-visual.is-orb img {
  transform: scale(var(--rook-orb-scale, 0.72));
  filter: drop-shadow(0 0 20px rgba(224, 212, 255, 0.92));
}
.rook-museum-exhibit-visual.is-orb.is-broken img {
  transform: scale(1.14) rotate(4deg);
  opacity: 0.42;
  filter: grayscale(0.7) drop-shadow(0 0 18px rgba(255, 238, 201, 0.72));
}
.rook-museum-orb-glow {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 235, 255, 0.66), rgba(146, 119, 191, 0.28) 45%, transparent 72%);
  animation: rook-museum-orb-pulse 1.2s ease-in-out infinite alternate;
}
.rook-museum-exhibit-copy {
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 30px 34px 24px;
}
.rook-museum-exhibit-copy h2 {
  margin: 0 0 0.85rem;
  color: #70441f;
  font: 700 1.45rem Georgia, serif;
}
.rook-museum-exhibit-copy > p:not(.mr-kicker) {
  flex: 1;
  margin: 0;
  overflow: auto;
  white-space: pre-line;
  line-height: 1.52;
}
.rook-museum-exhibit-copy footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1rem;
}
.rook-museum-exhibit-copy footer span {
  color: #866b4f;
  font-size: 0.78rem;
  font-weight: 800;
}
@keyframes rook-museum-orb-pulse {
  to { transform: scale(1.14); opacity: 0.7; }
}
@media (max-width: 720px) {
  .rook-museum-exhibit-card { grid-template-columns: 1fr; overflow: auto; }
  .rook-museum-exhibit-visual { min-height: 190px; }
  .rook-museum-exhibit-copy { min-height: 240px; }
}

.ghost-vignette {
  position: absolute;
  inset: 0;
  z-index: 480;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  color: rgba(255, 255, 255, 0.94);
  background: radial-gradient(circle, rgba(12, 10, 18, 0.3), rgba(5, 4, 8, 0.78));
  transition: opacity 500ms ease;
}
.ghost-vignette.visible { opacity: 1; }
.ghost-vignette span {
  max-width: 520px;
  padding: 1rem;
  text-align: center;
  font: italic 700 1.45rem/1.4 Georgia, serif;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px #000;
}
.panel-meta {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.75rem;
  opacity: 0.7;
}
.content-action-btn {
  margin-top: 0.35rem;
  border: 1px solid #8fbf6a;
  background: #e8f5d8;
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}
.content-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.side-panel.achieve-panel { left: 10px; top: 44px; max-width: min(420px, 94%); }
.achieve-panel .side-card {
  width: min(390px, calc(100vw - 42px));
  max-height: min(500px, calc(100vh - 180px));
}
.achieve-panel .side-head {
  position: sticky;
  top: -0.75rem;
  z-index: 4;
  margin: -0.75rem -0.15rem 0;
  padding: 0.75rem 0.15rem 0.3rem;
  background: #fffdf7;
}
.badge-browser-tools {
  position: sticky;
  top: 2rem;
  z-index: 3;
  margin: 0.5rem -0.15rem 0;
  padding: 0.15rem 0.15rem 0.4rem;
  background: linear-gradient(#fffdf7 84%, rgba(255, 253, 247, 0));
}
.badge-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c9c1b1;
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  background: #fff;
  color: #2b2a33;
  font: inherit;
}
.badge-search input:focus {
  border-color: #79aa58;
  outline: 2px solid rgba(106, 170, 58, 0.2);
}
.badge-status-filters {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.38rem;
}
.badge-status-filters button {
  flex: 1;
  min-width: 0;
  border: 1px solid #cec7b8;
  border-radius: 999px;
  padding: 0.28rem 0.32rem;
  background: #f4f0e7;
  color: #5d584f;
  font: 700 0.66rem/1.15 "Trebuchet MS", sans-serif;
  cursor: pointer;
}
.badge-status-filters button:hover,
.badge-status-filters button:focus-visible {
  border-color: #8fbf6a;
  outline: none;
}
.badge-status-filters button.active {
  border-color: #6fa84a;
  background: #dff0cf;
  color: #365a28;
}
.badge-category-select {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.38rem;
  color: #716b61;
  font-size: 0.68rem;
  font-weight: 700;
}
.badge-category-select select {
  min-width: 0;
  flex: 1;
  border: 1px solid #cec7b8;
  border-radius: 7px;
  padding: 0.3rem 0.4rem;
  background: #fff;
  color: #3c3934;
  font: inherit;
}
.side-panel.feat-panel { left: 10px; top: 44px; max-width: min(410px, 94%); }
.feat-card {
  width: min(380px, calc(100vw - 56px));
  max-height: min(500px, calc(100vh - 170px));
}
.feat-title-lockup {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}
.feat-title-lockup img {
  width: 30px;
  height: 25px;
  object-fit: contain;
}
.feat-kicker {
  margin: 0.55rem 0 0.08rem;
  color: #8b6a9e;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.feat-card h3 {
  margin: 0 0 0.35rem;
  color: #503666;
  font: 700 1.12rem/1.25 Georgia, serif;
}
.feat-copy {
  margin: 0 0 0.65rem;
  color: #5d5662;
  font-size: 0.78rem;
}
.feat-chain {
  display: grid;
  gap: 0.32rem;
}
.feat-line {
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid #ded6e5;
  border-radius: 8px;
  color: #665c6d;
  background: #faf7fc;
}
.feat-line > b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #9170aa;
}
.feat-line > span {
  font-size: 0.78rem;
  font-style: italic;
}
.feat-line > small {
  font-weight: 800;
  color: #87619f;
}
.feat-line.done {
  color: #48623d;
  border-color: #a8c494;
  background: #edf6e7;
}
.feat-line.current {
  color: #3f294f;
  border-color: #a98bc1;
  background: #f4edfa;
  box-shadow: 0 0 0 2px rgba(169, 139, 193, 0.15);
}
.feat-stats {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.45rem;
  border-radius: 8px;
  color: #5e5165;
  background: #eee8f2;
  font-size: 0.72rem;
}
.feat-stats span { text-align: center; }
.feat-stats b {
  display: block;
  color: #573a6d;
  font-size: 1rem;
}
.feat-prompt {
  min-height: 2.4em;
  margin: 0.62rem 0 0.4rem;
  color: #493554;
  font-weight: 700;
  font-size: 0.8rem;
}
.feat-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.feat-actions .content-action-btn { margin-top: 0; }

/* Original-style local chat restored as a compact dock above the pack. */
.local-chat-dock {
  position: absolute;
  left: 12px;
  bottom: var(--pack-live-height, 112px);
  z-index: 26;
  width: min(390px, calc(100% - 310px));
  pointer-events: none;
}
.local-chat-stream {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.24rem;
  min-height: 0;
  margin-bottom: 0.3rem;
}
.local-chat-bubble {
  max-width: 100%;
  padding: 0.28rem 0.48rem;
  color: #302b34;
  border: 1px solid rgba(113, 99, 119, 0.36);
  border-radius: 7px;
  background: rgba(255, 253, 247, 0.94);
  box-shadow: 0 2px 7px rgba(28, 25, 31, 0.18);
  font-size: 0.72rem;
  animation: local-chat-in 160ms ease-out both;
}
.local-chat-bubble b { color: #74508e; }
.local-chat-bubble.is-feat {
  border-color: rgba(137, 101, 162, 0.64);
  background: rgba(246, 238, 251, 0.96);
}
#local-chat-form {
  display: flex;
  gap: 0.28rem;
  pointer-events: auto;
  opacity: 0.74;
  transition: opacity 150ms ease;
}
#local-chat-form:focus-within,
#local-chat-form:hover { opacity: 1; }
#local-chat-input {
  min-width: 0;
  flex: 1;
  padding: 0.38rem 0.55rem;
  color: #3a3340;
  border: 1px solid rgba(117, 105, 123, 0.5);
  border-radius: 8px;
  outline: none;
  background: rgba(255, 253, 247, 0.94);
  box-shadow: 0 2px 8px rgba(30, 27, 34, 0.16);
  font: inherit;
  font-size: 0.76rem;
}
#local-chat-input:focus {
  border-color: #9170aa;
  box-shadow: 0 0 0 2px rgba(145, 112, 170, 0.2);
}
#local-chat-form button {
  padding: 0.3rem 0.55rem;
  color: #fff;
  border: 1px solid #674879;
  border-radius: 8px;
  background: linear-gradient(#9876ae, #76558e);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
@keyframes local-chat-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .local-chat-dock {
    right: 10px;
    width: auto;
  }
}
.side-panel.skills-panel { left: auto; right: 10px; top: 44px; max-width: min(440px, 94%); }
/* Full skill tree (js/skills-panel.js) */
.skills-panel .side-card {
  width: min(420px, calc(100vw - 42px));
  max-height: min(500px, calc(100vh - 180px));
}
.skills-panel .side-head {
  position: sticky;
  top: -0.75rem;
  z-index: 5;
  margin: -0.75rem -0.15rem 0;
  padding: 0.75rem 0.15rem 0.3rem;
  background: #fffdf7;
}
.skills-panel .panel-meta { margin: 0.1rem 0 0; font-size: 0.72rem; color: #6f695f; }
.skills-panel .quest-log-body { margin-top: 0.35rem; }
.skill-tree-study:empty { display: none; }
.skill-tree-study { display: grid; gap: 0.35rem; margin-bottom: 0.45rem; }
.skill-study-card {
  border: 1px solid #83b8c9;
  background: #edfafd;
  border-radius: 9px;
  padding: 0.45rem 0.55rem;
}
.skill-study-card.paused { border-color: #d6b986; background: #fff8e9; }
.skill-study-title { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.84rem; }
.skill-study-title span { color: #286479; font-weight: 700; font-size: 0.72rem; }
.skill-study-card.paused .skill-study-title span { color: #8a6420; }
.skill-study-card .skill-study-time { font-size: 0.74rem; color: #4c5b60; }
/* G235 (Austin, 2026-10-25): an unlearning card looks like a learning one; the
   client's desk had no red tint, so the teal bar and the word carry it. */
.skill-study-card.unlearning .skill-study-bar i {
  /* G230: the client's unlearning bar (ImaginationSkillsUI.as 208-211, 449-450):
     teal, filling from the right with its tip on the left (ProgressBar.as 142,
     DIRECTION_RIGHT_TO_LEFT; perc is the time gone, 407). */
  margin-left: auto;
  background:
    linear-gradient(180deg, #4d9899, #4e989a) left / 2px 100% no-repeat,
    linear-gradient(180deg, #75c1c2, #42a5a8);
}
.skill-unlearn-btn { margin-top: 0.35rem; color: #8a3a31; border-color: #e0b3ad; background: #fff7f5; }
.skill-unlearn-btn.is-confirm { color: #fff; background: #b8564a; border-color: #9a3d33; }
.skill-tree-toolbar {
  position: sticky;
  top: 1.55rem;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  margin: 0 -0.15rem 0.35rem;
  padding: 0.35rem 0.15rem 0.45rem;
  background: #fffdf7;
  box-shadow: 0 6px 6px -6px rgba(90, 80, 60, 0.25);
}
.skill-row { scroll-margin-top: 7.4rem; }
.skill-tree-search,
.skill-tree-category {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #c9c1b1;
  border-radius: 8px;
  padding: 0.38rem 0.5rem;
  background: #fff;
  color: #2b2a33;
  font: inherit;
  font-size: 0.8rem;
}
.skill-tree-category { max-width: 9.5rem; }
.skill-tree-search:focus,
.skill-tree-category:focus {
  border-color: #79aa58;
  outline: 2px solid rgba(106, 170, 58, 0.2);
}
.skill-tree-filters { grid-column: 1 / -1; display: flex; gap: 0.25rem; }
.skill-tree-chip {
  flex: 1;
  min-width: 0;
  border: 1px solid #cec7b8;
  border-radius: 999px;
  padding: 0.26rem 0.2rem;
  background: #f4f0e7;
  color: #5d584f;
  font: 700 0.66rem/1.15 "Trebuchet MS", sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.skill-tree-chip b { font-weight: 700; opacity: 0.7; margin-left: 0.1rem; }
.skill-tree-chip:hover,
.skill-tree-chip:focus-visible { border-color: #8fbf6a; outline: none; }
.skill-tree-chip.is-active { border-color: #6fa84a; background: #dff0cf; color: #365a28; }
.skill-tree-empty { padding: 1rem 0.3rem; text-align: center; color: #7b756b; font-size: 0.82rem; }
.skill-cat + .skill-cat { margin-top: 0.6rem; }
.skill-cat-title {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7f6b;
}
.skill-family {
  border: 1px solid #e3dccd;
  border-radius: 10px;
  background: #fbf8f1;
  padding: 0.3rem 0.35rem 0.35rem;
  margin-bottom: 0.35rem;
}
.skill-family-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.05rem 0.2rem 0.2rem;
}
.skill-family-name { font-weight: 700; color: #3d5a32; font-size: 0.86rem; }
.skill-pips { display: inline-flex; gap: 3px; }
.skill-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #c9c1b1;
  background: #fff;
  box-sizing: border-box;
}
.skill-pip.is-learned { border-color: #5f9a3c; background: #79b552; }
.skill-pip.is-studying { border-color: #3f8ea6; background: linear-gradient(90deg, #58a6bd 50%, #fff 50%); }
.skill-pip.is-paused { border-color: #c2953f; background: linear-gradient(90deg, #e2b866 50%, #fff 50%); }
.skill-pip.is-available { border-color: #79aa58; }
.skill-pip.is-locked { border-color: #d8d2c6; background: #eeeae2; }
.skill-row {
  border-radius: 7px;
  background: #fff;
  border: 1px solid #ece6da;
}
.skill-row + .skill-row { margin-top: 0.22rem; }
.skill-row.is-learned { background: #f1f8ea; border-color: #cfe5bc; }
.skill-row.is-studying { background: #edfafd; border-color: #b6dbe6; }
.skill-row.is-paused { background: #fff8e9; border-color: #ead4a6; }
.skill-row.is-available { border-color: #b9d99f; }
.skill-row.is-locked .skill-row-name { color: #6f6a62; }
.skill-row-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  border: 0;
  background: none;
  padding: 0.36rem 0.45rem;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.skill-row-head:focus-visible { outline: 2px solid rgba(106, 170, 58, 0.45); border-radius: 7px; }
.skill-row-label { display: grid; min-width: 0; }
.skill-row-name { font-size: 0.82rem; font-weight: 700; }
.skill-row-why { font-size: 0.68rem; color: #8a7f6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-row-why.is-locked { color: #9a6a45; }
.skill-row-why.is-multiplayer { color: #7a64a3; }
.skill-family.is-single { padding: 0; border: 0; background: none; }
.skill-row-time {
  font-size: 0.7rem;
  color: #7b756b;
  font-variant-numeric: tabular-nums;
  min-width: 2.6rem;
  text-align: right;
}
.skill-badge {
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.1rem 0.42rem;
  white-space: nowrap;
  background: #eeeae2;
  color: #6f6a62;
}
.skill-badge.is-learned { background: #d7ecc5; color: #335a1f; }
.skill-badge.is-studying { background: #cdeaf2; color: #1f5a6c; }
.skill-badge.is-paused { background: #f5e2b8; color: #7a5716; }
.skill-badge.is-available { background: #e6f3d9; color: #3c6a24; box-shadow: inset 0 0 0 1px #9cc87c; }
.skill-row .skill-study-bar { margin: 0 0.45rem 0.4rem; }
.skill-row-body { padding: 0 0.5rem 0.5rem; font-size: 0.78rem; line-height: 1.4; }
.skill-desc { margin: 0 0 0.4rem; color: #3f3c37; }
.skill-remake {
  display: grid;
  gap: 0.12rem;
  border-left: 3px solid #9cc87c;
  background: #f3f9ec;
  border-radius: 0 6px 6px 0;
  padding: 0.3rem 0.45rem;
  margin-bottom: 0.4rem;
}
.skill-remake.is-partial { border-left-color: #e0b55c; background: #fff7e6; }
.skill-remake.is-later { border-left-color: #b9b2a5; background: #f4f1eb; }
.skill-remake.is-multiplayer { border-left-color: #9f8bc4; background: #f5f1fb; }
.skill-remake-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5d584f; }
.skill-sub { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a7f6b; }
.skill-prereqs { list-style: none; margin: 0.15rem 0 0.4rem; padding: 0; display: grid; gap: 0.12rem; }
.skill-prereqs li { display: flex; gap: 0.35rem; align-items: baseline; }
.skill-prereqs li.is-met { color: #4d6e3a; }
.skill-prereqs li.is-missing { color: #8a4b2f; }
.skill-prereq-mark { width: 0.8rem; text-align: center; font-weight: 700; }
.skill-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skill-path { margin-bottom: 0.3rem; }
.skill-links { color: #8a7f6b; }
.skill-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: #3f7a2a;
  text-decoration: underline;
  text-decoration-color: rgba(63, 122, 42, 0.35);
  text-underline-offset: 2px;
  cursor: pointer;
}
.skill-link:hover { color: #2c5a1c; }
.skill-meta { color: #8a8379; font-size: 0.7rem; margin-bottom: 0.15rem; }
/* G205: the switch note above Start/Resume (ImaginationSkillDetailsUI.as 222-232). */
.skill-switch-note {
  margin-top: 0.4rem;
  border-left: 3px solid #d6b986;
  background: #fff8e9;
  border-radius: 0 6px 6px 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6d5226;
}
.skill-switch-note.is-accelerated { border-left-color: #c96a5e; background: #fff1ef; color: #8a3a31; font-weight: 700; }
.skill-action { width: 100%; margin-top: 0.4rem; padding: 0.38rem 0.55rem; }
.skill-action.btn-glitch-primary { color: #fff; }
.skill-emblem-btn { border-color: #b79ad6; background: #f1e9fb; color: #5a3d7a; }
.make-skill-note { font-size: 0.76rem; color: #3f6f8a; margin: 0.15rem 0 0.35rem; }
@media (max-width: 480px) {
  .side-panel.skills-panel { right: 6px; left: 6px; max-width: none; }
  .skills-panel .side-card { width: auto; max-height: calc(100vh - 120px); }
  .skill-tree-category { max-width: 7.5rem; }
}
.chrome-btn.is-studying {
  border-color: #83b8c9;
  background: #e4f5f8;
  color: #286479;
}
.quest-log-body .skill-study-card.studying {
  border-color: #83b8c9;
  background: #edfafd;
}
.quest-log-body .skill-study-card.paused {
  border-color: #d6b986;
  background: #fff8e9;
}
.quest-log-body .skill-study-bar > i {
  background: linear-gradient(90deg, #58a6bd, #86d6df);
}
.skill-study-time { font-variant-numeric: tabular-nums; }
/* G222: study bars in the client's look (js/skills-panel.js studyBar):
   ProgressBar.as 20-33 + drawBar 113-150 (the Skills frame below, a
   vertical gradient fill and a 2 px tip), ImaginationSkillsUI.as 200-211 (learn
   and fast colours; unlearning's teal is with .skill-study-card.unlearning, G230), buildArrows 241-263 and animateArrows 508-517 (gold 17x25
   arrows every 24 px over the filled part, one step every 0.4 s). */
.quest-log-body .q-bar.skill-study-bar {
  /* G236/G241: every study bar (learning, fast, paused, unlearning) sits in the
     client's one Skills bar frame (ImaginationSkillsUI.as buildBase 120-125: the
     single progress_bar every state reuses, recoloured only by setBarColors in
     updateSkillTraining 401-460): setFrameColors(0xcfd0d0, 0xb6b7b7), a light
     grey frame under a 2 px top edge (ProgressBar.as drawFrame 91-100,
     setFrameColors 270-277), corner_size 10 (drawRoundRect's ellipse width, so a
     5 px radius; ProgressBar.as 285-290) and a white GlowFilter (blur 8, strength
     20, alpha 0.2; StaticFilters.as 264-272), not ProgressBar's default grey
     0x9ca3a3 / 0x656b6b (ProgressBar.as 22-24). */
  height: 10px;
  border-radius: 5px;
  background: #cfd0d0;
  box-shadow: inset 0 2px 0 #b6b7b7, 0 0 1px 3px rgba(255, 255, 255, 0.2);
}
.quest-log-body .skill-study-bar > i { position: relative; overflow: hidden; }
.quest-log-body .skill-study-bar.is-learn > i,
.quest-log-body .skill-study-bar.is-paused > i {
  background:
    linear-gradient(180deg, #9db52e, #879f08) right / 2px 100% no-repeat,
    linear-gradient(180deg, #afca2f, #95b101);
}
.quest-log-body .skill-study-bar.is-paused > i { opacity: 0.55; }
.quest-log-body .skill-study-bar.is-fast > i {
  background:
    linear-gradient(180deg, #b38b00, #9a7802) right / 2px 100% no-repeat,
    linear-gradient(180deg, #f5e242, #d79305);
}
.skill-study-bar .skill-study-arrows {
  position: absolute;
  inset: 0 2px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25'%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e571'/%3E%3Cstop offset='1' stop-color='%23edcb35'/%3E%3C/linearGradient%3E%3Cpath d='M0 0v25l17-12.5z' fill='url(%23a)'/%3E%3C/svg%3E") 0 0 / 9.6px 10px repeat-x;
  animation: skill-study-arrows 0.4s linear infinite;
}
@keyframes skill-study-arrows {
  from { background-position: -9.6px 0; }
  to { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skill-study-bar .skill-study-arrows { animation: none; }
}
/* imagination_skills_time_fast (ImaginationSkillsUI.as 440-441); its CSS is lost, so gold from the fast bar. */
.skill-study-card .skill-study-time.is-fast { color: #8a6a00; font-weight: 700; }
.side-panel.buffs-panel { left: auto; right: 10px; top: 44px; }

/*
 * G256: the buff chips take the activity feed's top-left corner and the feed
 * steps down below them, so a badge never covers a line. The original kept
 * buffs in one row beside the player info at the top of the screen
 * (BuffViewManager.as 32, 118, 149-150: y 20, 5 px apart); the feed is the
 * remake's own popup column. Strip and feed share each breakpoint's top.
 */
.buff-strip {
  position: absolute;
  z-index: 18;
  top: 48px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}
.buff-strip[hidden] { display: none !important; }
/* One 38 px row of chips (renderBuffStrip shows six at most), then a 6 px gap. */
.buff-strip:not([hidden]) ~ .activity-feed { margin-top: 44px; }
/* G269: a speech bubble with no spot clear of the column (phone widths) shows through it. */
.activity-feed, .buff-strip { transition: opacity 0.2s ease; }
.activity-feed[data-under-speech], .buff-strip[data-under-speech] { opacity: 0.18; }
/* G297: the same fade while the Qurazy banner lands on the feed line that repeats it (760 px and below). */
.activity-feed[data-under-banner] { opacity: 0.18; }
@media (max-width: 760px) {
  .buff-strip { top: 36px; }
}
@media (min-width: 1500px) {
  .buff-strip { top: 58px; left: 14px; }
}
.buff-chip {
  min-width: 52px;
  height: 38px;
  padding: 3px 7px 3px 4px;
  border: 1px solid rgba(86, 114, 55, 0.45);
  border-radius: 19px;
  background: rgba(250, 253, 241, 0.94);
  box-shadow: 0 2px 8px rgba(39, 55, 27, 0.2);
  display: flex;
  align-items: center;
  gap: 4px;
  color: #49622e;
  font: 700 11px/1 system-ui, sans-serif;
  cursor: pointer;
}
.buff-chip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.buff-chip.pending {
  border-color: rgba(130, 61, 160, 0.55);
  color: #77358f;
  animation: buff-breathe 1.25s ease-in-out infinite alternate;
}
.chrome-btn.has-active-buffs {
  box-shadow: inset 0 0 0 2px rgba(129, 183, 72, 0.55), 0 1px 4px rgba(54, 85, 25, 0.2);
}
.buff-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}
.buff-card-head img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}
.buff-time {
  margin-top: 2px;
  color: #6f8b44;
  font-size: 11px;
  font-weight: 700;
}
.buff-card.pending .buff-time { color: #8d4ca5; }
.buff-source-card .content-action-btn,
.buff-card .content-action-btn { margin-top: 7px; }
.pack-pop-effect.buff {
  border-color: rgba(122, 74, 151, 0.3);
  background: #f4e9fa;
  color: #71348c;
}
body.buff-purple-pulse::after {
  content: '';
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(208, 124, 240, 0.15), rgba(116, 22, 150, 0.38));
  mix-blend-mode: screen;
  animation: purple-junk-pulse 1.8s ease-out both;
}
@keyframes buff-breathe {
  from { transform: translateY(0); box-shadow: 0 2px 8px rgba(39, 55, 27, 0.2); }
  to { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(108, 49, 134, 0.32); }
}
@keyframes purple-junk-pulse {
  0% { opacity: 0; }
  20% { opacity: 1; }
  55% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* Centered Glitch-style modals (vendor / making) */
.glitch-modal {
  position: absolute;
  inset: 0;
  /* The original-style pack remains live below modal workflows. */
  bottom: var(--pack-live-height, 105px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 50, 40, 0.22);
  line-height: 1.35;
  color: #2b2a33;
}
.glitch-modal[hidden] { display: none !important; }
.glitch-modal-card {
  background: #f4f2ef;
  border-radius: 10px;
  border: 1px solid #d0cdc6;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
  padding: 0.85rem 1rem 0.75rem;
  width: min(560px, 94vw);
  /* Never taller than the modal area, or centring clips the header and its
     close button off the top on short (phone) game roots. */
  max-height: min(78vh, 640px, calc(100% - 12px));
  overflow: auto;
}
.glitch-modal-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.glitch-modal-head > .verb-menu-x { margin-left: auto; }
.glitch-modal-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3a3a3a;
  flex: 1 1 auto;
  min-width: 8rem;
}
.glitch-modal-tabs {
  display: flex;
  gap: 0;
  margin-left: auto;
}
.glitch-modal-tabs.make-tool-tabs {
  flex: 1 1 100%;
  order: 3;
  max-width: 100%;
  overflow-x: auto;
  padding: 0 0 0.22rem;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.glitch-modal-tabs.make-tool-tabs .make-tool-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}
.glitch-modal-tabs .vendor-tab,
.glitch-modal-tabs .make-tool-chip {
  border: 1px solid #d0cdc6;
  background: #ebe8e3;
  color: #3a6a9a;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  border-radius: 0;
}
.glitch-modal-tabs .vendor-tab:first-child,
.glitch-modal-tabs .make-tool-chip:first-child {
  border-radius: 6px 0 0 6px;
}
.glitch-modal-tabs .vendor-tab:last-child,
.glitch-modal-tabs .make-tool-chip:last-child {
  border-radius: 0 6px 6px 0;
}
.glitch-modal-tabs .vendor-tab.active,
.glitch-modal-tabs .make-tool-chip.active {
  background: #fff;
  color: #2a2a2a;
  border-bottom-color: #fff;
  box-shadow: 0 -1px 0 #fff inset;
}

/* Giant shrine favor and donation panel */
.shrine-panel { --shrine-accent: #6e9b4d; }
.shrine-card {
  width: min(670px, 94vw);
  background:
    radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--shrine-accent) 15%, transparent), transparent 35%),
    #f7f4ed;
}
.shrine-title-lockup {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  flex: 1 1 auto;
}
.shrine-title-lockup h2 { flex: 0 1 auto; }
.shrine-glyph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--shrine-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--shrine-accent) 20%, transparent);
}
.shrine-desc {
  margin: 0.1rem 0 0.65rem;
  padding-left: 0.65rem;
  border-left: 4px solid var(--shrine-accent);
  color: #53534d;
  font-size: 0.82rem;
}
.shrine-favor-card {
  position: relative;
  background: rgba(255,255,255,0.86);
  border: 1px solid color-mix(in srgb, var(--shrine-accent) 35%, #d6d1c7);
  border-radius: 9px;
  padding: 0.55rem 0.65rem 0.6rem;
}
.shrine-favor-head {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.82rem;
}
.shrine-favor-head span { color: #706e67; }
.shrine-favor-track {
  height: 11px;
  margin-top: 0.38rem;
  background: #ddd9d0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.16);
}
.shrine-favor-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--shrine-accent) 72%, white), var(--shrine-accent));
  transition: width 0.35s ease;
}
.shrine-daily {
  margin-top: 0.35rem;
  color: #77736c;
  font-size: 0.72rem;
}
.shrine-favor-card #shrine-claim {
  margin-top: 0.5rem;
  background: var(--shrine-accent);
}
.shrine-all-favor {
  display: flex;
  gap: 0.28rem;
  overflow-x: auto;
  margin: 0.45rem 0 0.55rem;
  padding-bottom: 0.15rem;
  scrollbar-width: thin;
}
.shrine-favor-chip {
  flex: 0 0 auto;
  border: 1px solid #d8d3ca;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: #66615a;
  padding: 0.22rem 0.46rem;
  font-size: 0.66rem;
}
.shrine-favor-chip.active {
  border-color: var(--shrine-accent);
  color: #3d4b34;
  font-weight: 700;
}
.shrine-section-title {
  margin: 0.25rem 0 0.28rem;
  color: #555149;
  font-size: 0.84rem;
}
.shrine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 0.38rem;
  max-height: 185px;
  overflow: auto;
  padding: 0.4rem;
  border: 1px solid #d8d4cc;
  border-radius: 8px;
  background: linear-gradient(180deg, #eceae6, #e4e1db);
}
.shrine-tile {
  position: relative;
  min-height: 91px;
  border: 1px solid #ddd9d0;
  border-radius: 7px;
  background: #fff;
  color: #54514b;
  padding: 0.35rem 0.2rem 0.3rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.shrine-tile:hover,
.shrine-tile.active {
  border-color: var(--shrine-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--shrine-accent) 28%, transparent);
}
.shrine-tile img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.shrine-tile .count {
  position: absolute;
  top: 3px;
  right: 4px;
  min-width: 17px;
  padding: 0 3px;
  border-radius: 999px;
  background: #555;
  color: white;
  font-size: 0.63rem;
}
.shrine-tile-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.65rem;
}
.shrine-tile-reward {
  color: var(--shrine-accent);
  font-size: 0.62rem;
  font-weight: 700;
}
.shrine-detail {
  margin-top: 0.5rem;
  border: 1px solid #ded8cf;
  border-radius: 8px;
  background: rgba(255,255,255,0.86);
  padding: 0.55rem;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.65rem;
}
.shrine-detail[hidden] { display: none !important; }
.shrine-detail-icon {
  width: 68px;
  height: 68px;
  border: 1px solid #ded8cf;
  border-radius: 7px;
  background: #fff;
  display: grid;
  place-items: center;
}
.shrine-detail-icon img { max-width: 56px; max-height: 56px; object-fit: contain; }
.shrine-detail-body h3 { margin: 0 0 0.15rem; font-size: 0.96rem; }
.shrine-rewards { display: flex; flex-wrap: wrap; gap: 0.28rem; margin: 0.3rem 0; }
.shrine-rewards span {
  border-radius: 999px;
  background: #eef3e8;
  color: #49633c;
  padding: 0.18rem 0.42rem;
  font-size: 0.69rem;
  font-weight: 700;
}
.shrine-cap-note { margin: 0.2rem 0; color: #9b5f43; font-size: 0.7rem; }
.shrine-tip { margin: 0.45rem 0 0; color: #77736c; font-size: 0.72rem; font-style: italic; }

/* Vendor shelf grid */
.vendor-sell-drop {
  min-height: 92px;
  margin: 0.25rem 0 0.55rem;
  border: 2px dashed #aab9c1;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(236,242,244,0.9));
  color: #6d7b82;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.vendor-sell-drop[hidden] { display: none !important; }
.vendor-sell-drop strong {
  color: #4b5960;
  font-size: 0.92rem;
}
.vendor-sell-drop > span:last-child {
  font-size: 0.72rem;
}
.vendor-drop-arrow,
.vendor-drop-coin {
  font-size: 1.55rem !important;
  line-height: 1;
  color: #659bc0;
}
.vendor-sell-drop.is-dragover {
  border-color: #4b9ac8;
  background: linear-gradient(180deg, #f1fbff, #dceff7);
  box-shadow: 0 0 0 4px rgba(75,154,200,0.2), 0 8px 18px rgba(51,101,127,0.15);
  transform: translateY(-2px) scale(1.01);
}
.vendor-sell-drop.is-receipt {
  border-style: solid;
  border-color: #83b968;
  background: linear-gradient(180deg, #f5fbef, #e4f2d7);
  color: #397035;
}
.vendor-sell-drop.is-receipt strong { color: #315f2e; }
.vendor-sell-drop.is-receipt .vendor-drop-coin { color: #c59620; }
.vendor-shelf,
.make-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.45rem 0.4rem;
  padding: 0.35rem 0.15rem 0.65rem;
  background: linear-gradient(180deg, #eceae6 0%, #e4e1db 100%);
  border-radius: 8px;
  border: 1px solid #d8d4cc;
  min-height: 140px;
}
.vendor-shelf[hidden],
.vendor-detail[hidden],
.make-grid[hidden],
.make-detail[hidden],
.make-progress[hidden],
.make-result[hidden] {
  display: none !important;
}
.vendor-tile,
.make-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  background: #fff;
  border: 1px solid #ddd9d0;
  border-radius: 6px;
  padding: 0.4rem 0.25rem 0.35rem;
  cursor: pointer;
  min-height: 88px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.vendor-tile:hover,
.make-tile:hover {
  border-color: #7eb8e0;
  box-shadow: 0 0 0 2px rgba(100, 170, 220, 0.35);
}
.vendor-tile img,
.make-tile img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.vendor-tile .tile-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a4a4a;
}
.vendor-tile .tile-label,
.make-tile .tile-label {
  font-size: 0.65rem;
  text-align: center;
  line-height: 1.15;
  color: #555;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.make-tile .tile-req {
  font-size: 0.6rem;
  color: #777;
  text-align: center;
  line-height: 1.15;
}
.make-tile.blocked {
  opacity: 0.55;
}
.make-tile.fruit-change-tile {
  min-height: 104px;
  background: linear-gradient(180deg, #fff 0%, #fffdf6 100%);
  border-color: #dfd5b7;
}
.make-tile.fruit-change-tile img {
  width: 52px;
  height: 52px;
}
.make-tile.fruit-change-tile .tile-req {
  color: #8c5464;
  font-weight: 700;
}
.vendor-detail,
.make-detail {
  margin-top: 0.65rem;
  padding: 0.65rem 0.5rem;
  background: #faf9f7;
  border-radius: 8px;
  border: 1px solid #e0ddd6;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.75rem 1rem;
  align-items: start;
}
.vendor-detail-icon,
.make-detail-icon {
  width: 88px;
  height: 88px;
  background: #fff;
  border: 1px solid #e0ddd6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vendor-detail-icon img,
.make-detail-icon img {
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
}
.vendor-detail-body h3,
.make-detail-body h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}
.vendor-detail-body p,
.make-detail-body p {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: #555;
}
.qty-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.55rem;
}
.qty-row button {
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}
.qty-row input {
  width: 48px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.25rem;
  font-weight: 700;
}
.qty-row .btn-max {
  width: auto;
  padding: 0 0.5rem;
  font-size: 0.78rem;
}
.qty-row .btn-glitch-primary {
  width: auto;
  height: auto;
  min-height: 28px;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
  border: none;
  background: #4a90c8;
  color: #fff;
}
.btn-glitch-primary {
  border: none;
  background: #4a90c8;
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  font-size: 0.88rem;
}
.btn-glitch-primary:hover { filter: brightness(1.06); }
.btn-glitch-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-glitch-back {
  border: none;
  background: transparent;
  color: #3a6a9a;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0;
  margin-bottom: 0.35rem;
}
.make-block {
  color: #a04030;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
}
.make-empty {
  grid-column: 1 / -1;
  padding: 1.5rem 0.5rem;
  text-align: center;
  opacity: 0.7;
  font-size: 0.9rem;
}
.vendor-desc { font-size: 0.82rem; opacity: 0.8; margin: 0.35rem 0 0.5rem; }
.vendor-panel { --vendor-accent: #d87439; }
.vendor-panel[data-vendor="gardening"] { --vendor-accent: #6f9e3b; }
.vendor-panel[data-vendor="produce"] { --vendor-accent: #c74f47; }
.vendor-panel[data-vendor="toys"] { --vendor-accent: #7653a6; }
.vendor-panel .vendor-desc {
  border-left: 4px solid var(--vendor-accent);
  padding: 0.25rem 0 0.25rem 0.55rem;
}
.vendor-panel .vendor-tab.active {
  border-color: var(--vendor-accent);
  box-shadow: inset 0 -2px 0 var(--vendor-accent);
}
.vendor-panel .vendor-tile:hover {
  border-color: var(--vendor-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vendor-accent) 35%, transparent);
}
.vendor-tab {
  border: 1px solid #c5bdaa;
  background: #f3ecdf;
  border-radius: 6px;
  padding: 0.3rem;
  font-weight: 700;
  cursor: pointer;
}
.vendor-tab.active { background: #fff; }
.vendor-list { list-style: none; margin: 0; padding: 0; }
.vendor-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eee6d8;
  font-size: 0.85rem;
}
.vendor-list button {
  border: 1px solid #8fbf6a;
  background: #e8f5d8;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.78rem;
}
.vendor-list button:hover { background: #d4ebbc; }
.vendor-foot {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  text-align: right;
  color: #666;
}
.make-tool-chip {
  border: 1px solid #d0cdc6;
  background: #ebe8e3;
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  color: #3a6a9a;
}
.make-tool-chip.active {
  background: #fff;
  color: #2a2a2a;
}

/* Achievement badge grid */
.achieve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
.badge-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0.5rem;
  align-items: start;
  border: 1px solid #dce8d0;
  background: #f6faf1;
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
}
.badge-card.done {
  background: linear-gradient(135deg, #eef8e0, #e2f0d0);
  border-color: #a8d080;
}
.badge-card .badge-art {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e0d8c0;
}
.badge-card .badge-art-missing {
  display: grid;
  place-items: center;
  color: #8b8170;
  font-size: 1.35rem;
  line-height: 1;
  background:
    radial-gradient(circle at 50% 45%, #fffdf5 0 31%, transparent 32%),
    repeating-conic-gradient(from 0deg, #e7dfca 0 12deg, #f8f3e5 12deg 24deg);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.72);
}
.badge-card.done .badge-art {
  border-color: #c9a227;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
}
.badge-reimagined {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-style: italic;
  color: #9a917f;
}
.badge-condition {
  overflow-wrap: anywhere;
}
.badge-category {
  display: inline-block;
  margin: 0.12rem 0 0.18rem;
  padding: 0.08rem 0.32rem;
  border-radius: 999px;
  background: #e6ecdf;
  color: #637056;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-load-more {
  width: 100%;
  border: 1px solid #8fbf6a;
  border-radius: 8px;
  padding: 0.48rem;
  background: #e8f5d8;
  color: #365a28;
  font: 800 0.78rem/1.2 "Trebuchet MS", sans-serif;
  cursor: pointer;
}
.badge-load-more:hover,
.badge-load-more:focus-visible {
  background: #d7edc2;
  outline: 2px solid rgba(90, 158, 62, 0.24);
}
.badge-browser-empty {
  padding: 1.4rem 0.6rem;
  border: 1px dashed #d0c8b7;
  border-radius: 8px;
  color: #716b61;
  text-align: center;
  font-size: 0.78rem;
}

/*
 * The original client scaled its chrome independently from the location
 * renderer. On large modern displays, enlarge the tactile UI without zooming
 * the street art or avatar.
 */
@media (min-width: 1500px) {
  .top-bar {
    --hud-card-h: 3.3rem;
    --hud-gap: 0.6rem;
    --hud-pad-x: 0.58rem;
    padding: 0.5rem 0.74rem;
  }
  .brand { min-width: 7.2rem; }
  .brand-mark { font-size: 1.34rem; }
  .brand-sub { font-size: 0.82rem; }
  .meta-vitals { min-width: 13.4rem; row-gap: 0.32rem; }
  .meta-pill {
    grid-template-columns: 1.05rem 3.1rem minmax(48px, 1fr) auto;
    gap: 0.34rem;
    font-size: 0.8rem;
  }
  .meta-ico { font-size: 0.88rem; }
  .meta-num { font-size: 0.7rem; }
  .meta-ring { height: 7px; }
  .level-meter { min-width: 158px; }
  .level-label { font-size: 0.82rem; }
  .level-label strong { font-size: 1rem; }
  .level-xp { font-size: 0.7rem; }
  .meta-stat { font-size: 0.94rem; }
  .meta-stat.hud-img { font-size: 0.82rem; }
  .meta-stat.hud-img strong { font-size: 1rem; }
  .quoin-stat small { font-size: 0.74rem; }
  .top-actions { gap: 0.3rem; }
  .chrome-btn {
    padding: 0.4rem 0.58rem;
    font-size: 0.9rem;
  }
  .street-nameplate {
    top: 12px;
    padding: 0.34rem 1.05rem;
    font-size: 0.98rem;
  }
  .dametime-clock { font-size: 0.86rem; }
  .activity-feed {
    top: 58px;
    left: 14px;
    width: min(360px, 38%);
    gap: 0.32rem;
  }
  .activity-feed .act {
    padding: 0.4rem 0.62rem;
    font-size: 0.82rem;
  }
  .play-context {
    top: 58px;
    right: 14px;
    bottom: 124px;
    width: min(310px, 31%);
    gap: 0.55rem;
  }
  .play-context-head {
    min-height: 35px;
    padding: 0.42rem 0.65rem;
    font-size: 0.86rem;
  }
  .play-context-count { font-size: 0.76rem; }
  .quest-tracker-title { font-size: 0.84rem; }
  .quest-tracker-req { font-size: 0.75rem; }
  .quest-tracker-empty,
  .activity-history-empty { font-size: 0.76rem; }
  .activity-history-line {
    padding: 0.4rem 0.1rem;
    font-size: 0.75rem;
  }
  .pack-bar {
    gap: 0.7rem;
    padding: 0.45rem 0.7rem 0.5rem;
  }
  .pack-currants {
    min-width: 4.8rem;
    font-size: 1rem;
  }
  .pack-currants .currant-coin { font-size: 1.28rem; }
  .pack-currants-label { font-size: 0.65rem; }
  .pack-rows { gap: 0.28rem; }
  .pack-slots {
    gap: 0.34rem;
    min-height: calc(52px + 10px - 0.16rem);
  }
  .pack-slots.pack-tools { min-height: calc(48px + 10px - 0.16rem); }
  .pack-slots .inv-slot,
  .pack-slots .pack-slot {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
  .pack-slots.pack-tools .pack-slot {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
  .pack-slots .pack-slot img {
    max-width: 37px;
    max-height: 37px;
  }
  .pack-slots .pack-slot .count { font-size: 0.74rem; }
  .pack-hint {
    max-width: 9rem;
    font-size: 0.7rem;
  }
}

/* Hub map */
.map-card.map-hub {
  width: min(820px, 96%);
  max-height: 88%;
  background:
    radial-gradient(ellipse at 50% 40%, #c8dba8 0%, transparent 55%),
    linear-gradient(180deg, #d8c8a0 0%, #b8a878 40%, #9a8860 100%);
  border: 2px solid #8a7a58;
}
.map-card.map-hub .map-head h2 { color: #3a3420; }
.map-card.map-hub .map-sub { color: #4a4030; }
/* G192: the Map canvas takes the room the cards leave, so it stays in view at
   1280x860; the extra cards fold into one Shortcuts line (game.js arrangeMapCards). */
.map-card.map-hub {
  display: flex;
  flex-direction: column;
}
.map-card.map-hub > * { flex: none; }
.map-card.map-hub > .map-canvas {
  flex: 1 1 420px;
  height: auto;
  min-height: 230px;
  max-height: min(420px, 56vh);
}
.map-card.map-hub .map-sub { margin: 0.2rem 0 0.5rem; }
.map-card.map-hub .map-hint { margin-top: 0.5rem; }
.map-extras {
  margin: 0 0 8px;
  border-radius: 10px;
  background: rgba(255, 253, 247, 0.72);
  border: 1px solid rgba(138, 122, 88, 0.45);
  font-size: 0.82rem;
}
.map-extras > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  list-style: none;
  color: #4a4030;
  white-space: nowrap;
  overflow: hidden;
}
.map-extras > summary::-webkit-details-marker { display: none; }
.map-extras > summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 6px solid #6a5a38;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.15s ease;
}
.map-extras[open] > summary::before { transform: rotate(90deg); }
.map-extras > summary strong { flex: none; color: #3a3420; }
.map-extras > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.map-extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  padding: 0 8px 8px;
  max-height: 150px;
  overflow: auto;
}
.map-extras-grid > * { margin: 0 !important; min-width: 0; }
.map-extras-grid > .map-home-card { padding: 8px 10px; }
.map-hub-picker {
  margin-left: auto;
  margin-right: 0.35rem;
}
.map-hub-picker select {
  max-width: 14rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid #8a7a58;
  border-radius: 8px;
  padding: 0.25rem 0.4rem;
  background: #fffdf7;
  color: #2a2418;
}
/* Camera Mode (features/camera-mode-feature.js) */
.camera-mode {
  position: absolute;
  inset: 0;
  z-index: 78;
  pointer-events: none;
}
.camera-mode[hidden] { display: none; }
.camera-mode-frame {
  position: absolute;
  inset: 18px 18px 150px 18px;
  border-radius: 14px;
  box-shadow: 0 0 0 2000px rgba(10, 20, 30, 0.22);
}
.camera-mode-frame i {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 0 solid rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.camera-mode-frame i:nth-child(1) { top: 12px; left: 12px; border-width: 4px 0 0 4px; border-top-left-radius: 8px; }
.camera-mode-frame i:nth-child(2) { top: 12px; right: 12px; border-width: 4px 4px 0 0; border-top-right-radius: 8px; }
.camera-mode-frame i:nth-child(3) { bottom: 12px; left: 12px; border-width: 0 0 4px 4px; border-bottom-left-radius: 8px; }
.camera-mode-frame i:nth-child(4) { bottom: 12px; right: 12px; border-width: 0 4px 4px 0; border-bottom-right-radius: 8px; }
.camera-mode-reticle {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
.camera-mode-label {
  position: absolute;
  left: 50%;
  top: 58px;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100% - 40px);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20, 30, 40, 0.72);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camera-mode-label b { letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.4rem; }

/* Type-to-search picker (js/combobox.js) */
.combo {
  position: relative;
  width: 15rem;
  max-width: 46vw;
}
.combo-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2a2418;
  background: #fffdf7;
  border: 1.5px solid #8a7a58;
  border-radius: 999px;
  padding: 0.34rem 2rem 0.34rem 0.85rem;
  box-shadow: inset 0 1px 2px rgba(60, 45, 20, 0.12);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.combo-input::placeholder { color: #9a8a68; font-weight: 600; }
.combo-input:hover { border-color: #6f6040; }
.combo-input:focus {
  border-color: var(--moss);
  box-shadow: inset 0 1px 2px rgba(60, 45, 20, 0.12), 0 0 0 3px rgba(90, 143, 74, 0.25);
}
.combo-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6f6040;
  cursor: pointer;
}
.combo-toggle:hover { background: rgba(138, 122, 88, 0.15); }
.combo-toggle svg { transition: transform 0.15s; }
.combo.is-open .combo-toggle svg { transform: rotate(180deg); }
.combo-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(19rem, 55vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #fffdf7;
  border: 1.5px solid #8a7a58;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(50, 38, 18, 0.28), 0 2px 4px rgba(50, 38, 18, 0.12);
  scrollbar-width: thin;
  scrollbar-color: #c9b88e transparent;
}
.combo-list[hidden] { display: none; }
.combo-option {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.38rem 0.6rem;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #2a2418;
  cursor: pointer;
}
.combo-option.is-active { background: #ece3c8; }
.combo-option.is-current { color: var(--moss); font-weight: 800; }
.combo-option.is-current::before {
  content: '';
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
  margin-left: -0.15rem;
}
.combo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-name mark { background: #f6dd8f; color: inherit; border-radius: 3px; padding: 0 1px; }
.combo-count {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a7a58;
  background: rgba(138, 122, 88, 0.12);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.combo-empty { padding: 0.5rem 0.6rem; font-size: 0.82rem; color: #8a7a58; font-style: italic; }
@media (max-width: 520px) {
  .combo { width: 11rem; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.map-canvas {
  position: relative;
  width: 100%;
  height: min(420px, 56vh);
  border-radius: 10px;
  border: 1px solid #8a7a58;
  background: #8a9a58;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(60,50,30,0.25);
}
.map-street-menu {
  position: absolute;
  z-index: 5;
  min-width: 190px;
  max-width: min(260px, calc(100% - 16px));
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #8a7a58;
  background: #fffdf5;
  box-shadow: 0 6px 18px rgba(40, 30, 15, 0.3);
  color: #453b34;
  font-size: 13px;
}
.map-street-menu strong {
  display: block;
  padding: 2px 6px 6px;
  font-size: 13px;
}
.map-street-menu button {
  display: block;
  width: 100%;
  margin: 2px 0 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.map-street-menu button:hover:not([disabled]),
.map-street-menu button:focus-visible {
  background: #f1e9d2;
  outline: none;
}
.map-street-menu button[disabled] {
  cursor: not-allowed;
  color: #9a8e80;
}
.map-street-menu button span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #7f6c55;
}
.map-canvas svg,
.map-canvas .hub-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Original hub geometry segments */
.map-seg {
  stroke: #e8e0c0;
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
}
.map-seg.dim {
  stroke: #d8d0b0;
  stroke-width: 3.5;
  opacity: 0.55;
}
.map-seg.travelable {
  stroke: #f0e86a;
  stroke-width: 7;
  opacity: 0.95;
}
.map-seg.current {
  stroke: #f5e050;
  stroke-width: 8;
}
.map-seg-hit {
  stroke: transparent;
  stroke-width: 18;
  stroke-linecap: round;
  fill: none;
  cursor: pointer;
}
.map-street.travelable { cursor: pointer; }
.map-street.travelable:hover .map-seg.travelable {
  stroke: #fff48a;
  stroke-width: 9;
}
.map-label {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  fill: #2a2418;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: #f4efd8;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}
.map-label.dim {
  font-size: 8.5px;
  font-weight: 600;
  fill: #3a3428;
  opacity: 0.72;
  stroke-width: 2px;
}
.map-label.loaded {
  fill: #1a1810;
  font-size: 11px;
  font-weight: 800;
  stroke-width: 3px;
}
.map-label.current {
  fill: #8a1010;
  font-size: 11.5px;
  font-weight: 800;
  stroke-width: 3px;
}
.map-you {
  fill: #e22;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: none;
}
.map-hub-go { cursor: pointer; }
.map-go-ring {
  fill: #3a8f4a;
  stroke: #fff;
  stroke-width: 2.5;
  opacity: 0.92;
}
.map-hub-go:hover .map-go-ring { fill: #4aaa5a; }
.map-go-text {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 11px;
  font-weight: 800;
  fill: #fff;
  pointer-events: none;
}
.map-go-sub {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 9px;
  font-weight: 700;
  fill: #2a2418;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: #f4efd8;
  stroke-width: 2.5px;
}
/* legacy schematic nodes (unused when hub geometry loads) */
.map-node { cursor: pointer; }
.map-node circle.node-stone {
  fill: #8a8070;
  stroke: #5a5040;
  stroke-width: 2;
}
.map-edge {
  fill: none;
  stroke: #e8e0c0;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.85;
}

.chrome-foot {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  opacity: 0.65;
  text-align: center;
}
.chrome-foot a { color: #3a7ea8; }

/* hide old aside if residual */
#hud { display: none !important; }
header.top-bar + .sub { display: none; }
.map-list-hidden { display: none !important; }

.toast {
  position: absolute;
  left: 50%;
  /* Above the pack and the local chat input row, not over the item slots. */
  bottom: calc(var(--pack-live-height, 112px) + 52px);
  transform: translateX(-50%);
  /* Appears in place: the pop keyframes would override the centring transform and slide it in. */
  animation: none;
  z-index: 50;
  background: rgba(30,28,24,0.9);
  color: #fffdf7;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  max-width: 90%;
  text-align: center;
}

/* —— Full-screen street load (LoadingLocationView) —— */
.screen-transition {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #1a2830 0%, #2a3a32 45%, #1e2a24 100%);
  color: #f4f0e4;
}
.screen-transition.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.screen-transition[hidden] { display: none !important; }
.screen-transition.is-visible[hidden] { display: grid !important; }
/* LoadingLocationView: 10% side gutters, 160 px picture, "Entering" + street
   over the picture's foot, "in <hub>", "Home to:", bar with its label inside. */
.screen-transition-inner.st-card {
  position: relative;
  z-index: 2;
  width: 80%;
  max-width: 980px;
  text-align: left;
  padding: 0 0 3.2rem;
  font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}
.st-split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: 1;
  /* the client's 8 x 48 px scalloped seam */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='48'%3E%3Cpath d='M8 0C8 5 4 12 4 12C0 19 0 24 0 24C0 29 4 36 4 36C8 43 8 48 8 48Z'/%3E%3C/svg%3E") 0 0 / 8px 48px repeat-y,
    linear-gradient(#000, #000) 8px 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='48'%3E%3Cpath d='M8 0C8 5 4 12 4 12C0 19 0 24 0 24C0 29 4 36 4 36C8 43 8 48 8 48Z'/%3E%3C/svg%3E") 0 0 / 8px 48px repeat-y,
    linear-gradient(#000, #000) 8px 0 / 100% 100% no-repeat;
}
.st-split[hidden] { display: none !important; }
.st-split.has-shadow { filter: drop-shadow(-6px 0 8px rgba(0, 0, 0, 0.25)); }
.st-hubs {
  position: absolute;
  top: 6%;
  left: 10%;
  right: 10%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.st-hub-leave,
.st-hub-welcome {
  margin: 0;
  display: grid;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.st-hub-welcome { margin-left: auto; text-align: right; }
.st-hub-leave span,
.st-hub-welcome span { font-size: clamp(0.9rem, 1.9vw, 1.2rem); font-weight: 700; opacity: 0.72; }
.st-hub-leave b,
.st-hub-welcome b { font-size: clamp(1.2rem, 2.6vw, 1.7rem); }
.st-hub-leave[hidden],
.st-hub-welcome[hidden] { display: none !important; }
.st-last {
  min-height: 1.3em;
  margin: 0 0 0.6rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.st-last b { font-weight: 700; }
.st-hl { color: #fff36b; font-weight: 700; }
.st-qurazy { width: 31px; height: 33px; }
.st-qurazy[hidden] { display: none !important; }
.st-snap-wrap {
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(40, 40, 40, 0.28);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 0 15px rgba(255, 255, 255, 0.15);
}
.st-snap[hidden] { display: none !important; }
.st-snap-wrap[hidden] { display: none !important; }
.st-snap {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.st-title {
  position: relative;
  margin-top: -42px;
  padding: 0 10px;
}
/* No picture for this street: the title stands on its own, not over a box's foot. */
.st-card.no-snap .st-title { margin-top: 0; }
.st-entering {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.st-enter {
  margin: -0.15rem 0 0;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  line-height: 1.05;
  font-weight: 800;
  color: #ffff8c;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere;
}
.st-enter-hub {
  margin: 0.15rem 0 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.st-enter-hub[hidden] { display: none !important; }
.st-details {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.7rem;
  padding: 0 10px;
}
.st-home {
  flex: 1;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.82);
  animation: stDetailsIn 0.25s ease-out;
}
.st-home[hidden],
.st-upgrade[hidden],
.st-upgrade-badge[hidden] { display: none !important; }
.st-home ul { margin: 0.25rem 0 0; padding-left: 1.6rem; }
.st-home li { margin: 0.1rem 0; }
.st-upgrade-badge { width: 54px; height: 54px; }
.st-upgrade { margin-left: auto; font-size: 0.74rem; color: rgba(255, 255, 255, 0.82); }
@keyframes stDetailsIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.st-progress {
  position: absolute;
  z-index: 3;
  left: 10%;
  right: 10%;
  bottom: 20px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}
.st-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: #c3d98c;
  transition: width 0.08s linear;
}
.st-status {
  position: absolute;
  left: 6px;
  top: 0;
  line-height: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #4a4a4a;
}
/* G249: the home card (LoadingLocationPOLView) over the street card, under
   the bar. Sizes and offsets are the client's (screen-fx.js polCardLayout);
   the radial fill is set inline. The text colours are ours: the client's
   loading_location_pol_* styles came from a stylesheet that does not survive. */
.st-pol {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #2f5446;
  font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}
.st-pol[hidden] { display: none !important; }
.st-pol-holder {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  align-items: start;
  transform: translate(-50%, -50%) scale(var(--st-pol-scale, 1));
}
.st-pol-art { position: relative; }
.st-pol-door,
.st-pol-owner { position: absolute; display: block; max-width: none; pointer-events: none; }
.st-pol-door[hidden],
.st-pol-owner[hidden],
.st-pol-features[hidden],
.st-pol-neighbours[hidden] { display: none !important; }
.st-pol-text p { margin: 0; }
.st-pol-entering,
.st-pol-street { font-size: 1.35rem; font-weight: 700; opacity: 0.8; line-height: 1.1; }
.st-pol-name {
  margin: -0.1rem 0 -0.05rem 2px !important;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.05;
  color: #23443a;
  white-space: nowrap;
}
.st-pol-street { margin-bottom: 4px !important; }
.st-pol-last {
  min-height: 28px;
  margin-left: 3px !important;
  padding: 5px 8px;
  box-sizing: border-box;
  border-radius: 4px;
  background: rgba(118, 158, 143, 0.7);
  box-shadow: 0 1px 0 #fff, inset 0 3px 3px rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.st-pol-features { margin-top: var(--st-pol-features-pad, 12px) !important; font-size: 0.85rem; }
.st-pol-neighbours { display: flex; align-items: center; gap: 11px; margin-top: 10px; opacity: 1; }
.st-pol-neighbours > span { font-size: 0.85rem; opacity: 0.7; }
.st-pol-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.7); }
@media (max-width: 640px) {
  .screen-transition-inner.st-card { width: calc(100% - 32px); }
  .st-hubs, .st-progress { left: 16px; right: 16px; }
  .st-snap-wrap { height: 110px; }
}

/* —— Award / quest / level full-screen (AchievementView) —— */
.award-screen {
  position: absolute;
  inset: 0;
  /* Above prompts (prompt-stack 95): the client added screen views over the main container that
     held PromptView (TSMainView.as 282, addView 394), so a prompt waits under an open screen. */
  z-index: 96;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: rgba(80, 110, 78, 0.92); /* ~#a7c39c @ high alpha */
  /* Only the OK button (or Enter / Escape) closes it (BaseScreenView.as 171-173). */
  cursor: default;
}
.award-screen.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.award-screen[hidden] { display: none !important; }
.award-screen.is-visible[hidden] { display: grid !important; }
.award-screen[data-kind="quest"] {
  background: rgba(70, 100, 120, 0.93);
}
.award-screen[data-kind="level"] {
  background: rgba(110, 90, 50, 0.93);
}
.award-rays {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,220,0.35), transparent 42%),
    repeating-conic-gradient(from 0deg at 50% 45%,
      rgba(255,255,230,0.14) 0deg 8deg,
      transparent 8deg 16deg);
  animation: awardSpin 18s linear infinite;
  opacity: 0.85;
  pointer-events: none;
}
@keyframes awardSpin {
  to { transform: rotate(360deg); }
}
.award-card {
  position: relative;
  z-index: 1;
  width: min(400px, 90%);
  text-align: center;
  padding: 1.4rem 1.2rem 1.2rem;
  color: #fffdf5;
}
.award-badge {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 800;
  background: radial-gradient(circle at 35% 30%, #fff8d0, #e0c060 55%, #a88430);
  border: 3px solid rgba(255,255,255,0.55);
  box-shadow: 0 6px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
  animation: awardPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: hidden;
  position: relative;
}
.award-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.award-badge img[hidden],
.award-badge span[hidden] {
  display: none !important;
}
.award-badge[data-kind="quest"] {
  background: radial-gradient(circle at 35% 30%, #e8fff0, #6aaa3a 60%, #3d6a20);
}
.award-badge[data-kind="level"] {
  background: radial-gradient(circle at 35% 30%, #fff4d0, #e0a020 55%, #a06010);
}
@keyframes awardPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.award-kicker {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.award-title {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.award-body {
  margin: 0.35rem auto 0;
  max-width: 28rem;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.9;
}
.award-sub {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  opacity: 0.55;
}
.award-next {
  margin: 1rem auto 0;
  min-width: 7.75rem;
  padding: 0.58rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(#66727a, #3d4850);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}
.award-next:hover,
.award-next:focus-visible {
  background: linear-gradient(#75828a, #4b5860);
}
.award-next[hidden] {
  display: none !important;
}
/* BaseScreenView screens (js/screen-fx.js AWARD_BUTTON_IN): the OK button
   animates in after the screen is already listening (ready at the end of the
   .4 s fade-in). AchievementView.as 511-517 and NewDayView.as 566-569: 40 px
   up with easeOutBounce; LevelUpView.as 257-258: a linear fade. The glow is
   StaticFilters.white4px40AlphaGlowA on every ok_bt. */
.award-screen[data-okin="true"] .award-next {
  display: block;
  min-width: 9.5rem;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(180deg, #6aaa3a, #4a8a28);
  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.2);
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fffdf7;
}
.award-screen[data-okin="true"] .award-next:hover,
.award-screen[data-okin="true"] .award-next:focus-visible {
  background: linear-gradient(180deg, #76b744, #52942e);
}
.award-screen[data-okin="true"] .award-next,
.new-day-btn[data-award-ok] {
  animation: awardOkBounce var(--award-ok-time, 0.4s) var(--award-ok-delay, 1.5s) both;
}
.award-screen[data-okin="true"] .award-next[data-award-ok="fade"],
.new-day-btn[data-award-ok="fade"] {
  animation-name: awardOkFade;
  animation-timing-function: linear;
}
@keyframes awardOkFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* easeOutBounce: lands at 36%, hops a quarter, a sixteenth, a sixty-fourth. */
@keyframes awardOkBounce {
  0% { opacity: 0; transform: translateY(var(--award-ok-rise, 40px)); animation-timing-function: ease-in; }
  36.36% { opacity: 1; transform: translateY(0); animation-timing-function: ease-out; }
  54.54% { opacity: 0.75; transform: translateY(calc(var(--award-ok-rise, 40px) * 0.25)); animation-timing-function: ease-in; }
  72.72% { opacity: 1; transform: translateY(0); animation-timing-function: ease-out; }
  81.81% { opacity: 0.94; transform: translateY(calc(var(--award-ok-rise, 40px) * 0.0625)); animation-timing-function: ease-in; }
  90.9% { opacity: 1; transform: translateY(0); animation-timing-function: ease-out; }
  95.45% { opacity: 0.98; transform: translateY(calc(var(--award-ok-rise, 40px) * 0.0156)); animation-timing-function: ease-in; }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .award-screen[data-okin="true"] .award-next,
  .new-day-btn[data-award-ok] {
    animation-name: awardOkFade;
  }
}
.award-close {
  display: none;
}

/* Original quest-completion view: a player-paced dark panel over the live street. */
.award-screen[data-paged="true"] {
  place-items: start center;
  padding-top: clamp(42px, 7vh, 78px);
  background: transparent;
  cursor: default;
}
.award-screen[data-paged="true"] .award-rays {
  display: none;
}
.award-screen[data-paged="true"] .award-card {
  width: min(430px, calc(100% - 32px));
  min-height: 172px;
  padding: 0 22px 20px;
  color: #f4f5f2;
  text-align: left;
  background: rgba(7, 25, 34, 0.97);
  border: 1px solid rgba(123, 150, 159, 0.35);
  border-radius: 3px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.48);
}
.award-screen[data-paged="true"] .award-badge {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 31px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.8rem;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.award-screen[data-paged="true"] .award-badge img {
  object-fit: contain;
}
.award-screen[data-paged="true"] .award-kicker {
  min-height: 48px;
  margin: 0 -22px;
  padding: 13px 48px 11px 58px;
  border-bottom: 1px solid rgba(137, 158, 164, 0.23);
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
.award-screen[data-paged="true"] .award-title {
  display: none;
}
.award-screen[data-paged="true"] .award-body {
  margin: 17px 2px 0;
  min-height: 2.8em;
  max-width: none;
  font-size: 0.94rem;
  line-height: 1.45;
  opacity: 1;
}
.award-screen[data-paged="true"] .award-sub {
  margin: 12px 2px 0;
  color: #eef7d0;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 1;
}
.award-screen[data-paged="true"] .award-sub.has-reward-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.award-reward {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #233329;
  background: #dce8c2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  line-height: 1;
  text-shadow: none;
}
.award-reward--img { background: #bfe3ee; }
.award-reward--energy { background: #d7ed79; }
.award-reward--mood { background: #f2c7da; }
.award-reward--currants { background: #e7dcae; }
.award-reward--favor { background: #dec9ed; }
.award-reward--item { background: #d6e5c4; }
.award-screen[data-paged="true"] .award-close {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  color: #dae1df;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
.award-screen[data-paged="true"] .award-close:hover,
.award-screen[data-paged="true"] .award-close:focus-visible {
  color: #fff;
}
.award-screen[data-paged="true"] .award-close[hidden] {
  display: none !important;
}
.award-screen[data-paged="true"] .award-next {
  display: block;
}

/* —— New Day (NewDayView.as) —— */
.new-day-screen {
  position: absolute;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(170, 179, 198, 0.97) 0%, rgba(168, 150, 177, 0.97) 100%);
}
.new-day-screen.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.new-day-screen[hidden] { display: none !important; }
.new-day-screen.is-visible[hidden] { display: grid !important; }
.new-day-sun {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,199,0.95) 0%, rgba(233,210,82,0.45) 40%, transparent 70%);
  animation: newDaySun 1.2s ease-out;
  pointer-events: none;
}
@keyframes newDaySun {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.new-day-rays {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg at 50% 42%,
    rgba(255,250,210,0.18) 0deg 10deg,
    transparent 10deg 20deg);
  animation: awardSpin 28s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}
.new-day-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-height: 28%;
  object-fit: cover;
  object-position: bottom;
  pointer-events: none;
  image-rendering: auto;
  opacity: 0.95;
}
.new-day-card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1.2rem 1.4rem 1.4rem;
  color: #2a2430;
  max-width: min(420px, 92%);
}
.new-day-date {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.75;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.new-day-title {
  margin: 0.25rem 0 0.15rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #1a1520;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.15);
}
.new-day-refill {
  margin: 0.2rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d5a28;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.new-day-stats {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.85;
}
.new-day-btn {
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 1.15rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  color: #fffdf7;
  background: linear-gradient(180deg, #6aaa3a, #4a8a28);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 4px 14px rgba(0,0,0,0.2);
}
.new-day-btn:hover { filter: brightness(1.06); }
.new-day-btn:focus-visible { outline: 2px solid #fffdf7; outline-offset: 2px; }

/* —— The Great Hog Haul —— */
.hog-haul-hud {
  position: absolute;
  z-index: 54;
  top: 14px;
  left: 50%;
  width: min(560px, calc(100% - 28px));
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.85));
}
.hog-haul-hud[hidden] { display: none; }
.hog-haul-scoreboard {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: clamp(0.9rem, 2.2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.hog-haul-scoreboard strong {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  margin-left: 0.25rem;
  border-radius: 999px;
  color: #3a240c;
  background: #ffd55b;
  box-shadow: inset 0 -2px 0 rgba(145, 91, 8, 0.28);
}
.hog-haul-objective {
  display: inline-block;
  margin: 7px 0 0;
  padding: 5px 15px 6px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  background: rgba(18, 15, 14, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.hog-haul-cargo {
  position: absolute;
  top: 70px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 10px 3px 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  color: #493314;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(255, 247, 211, 0.92);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}
.hog-haul-cargo.is-carrying {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}
.hog-haul-cargo img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  image-rendering: auto;
}
.hog-haul-screen {
  position: absolute;
  z-index: 83;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.hog-haul-screen[hidden] { display: none; }
.hog-haul-screen-shade {
  position: absolute;
  inset: 0;
  background: rgba(16, 13, 10, 0.62);
  backdrop-filter: blur(1px);
}
.hog-haul-ready-card,
.hog-haul-result-card {
  position: relative;
  z-index: 1;
  width: min(580px, 92%);
  padding: 28px 30px 25px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 18px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% -30%, rgba(255, 222, 105, 0.32), transparent 55%),
    linear-gradient(180deg, #493a2e, #251f1c);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 4px rgba(0, 0, 0, 0.22);
  animation: hogHaulCardIn 320ms cubic-bezier(.2, .85, .25, 1.2);
}
/* G395: the games' opening logos (glitch-overlays race_logo and the rest, games_*_splash scale 1). */
.hog-haul-ready-card > img.game-logo {
  width: min(300px, 72%);
  height: auto;
  max-height: 190px;
}
@keyframes hogHaulCardIn {
  from { transform: translateY(18px) scale(0.94); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.hog-haul-ready-card > img,
.hog-haul-result-card > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.35));
}
.hog-haul-ready-card > p,
.hog-haul-result-card > p:first-of-type {
  margin: 5px 0 4px;
  color: #f2d36c;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hog-haul-ready-card h2,
.hog-haul-result-card h2 {
  margin: 6px auto 18px;
  max-width: 470px;
  font-size: clamp(1.3rem, 3.6vw, 2rem);
  line-height: 1.12;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.hog-haul-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
  font-size: 0.78rem;
  font-weight: 800;
}
.hog-haul-loop span {
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}
.hog-haul-loop i {
  color: #f2d36c;
  font-size: 1.35rem;
  font-style: normal;
}
.hog-haul-countdown {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(4rem, 15vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow:
    0 4px 0 #472b13,
    0 8px 24px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.four-letter-hud {
  position: absolute;
  z-index: 79;
  top: 66px;
  left: 50%;
  width: min(620px, calc(100% - 32px));
  padding: 10px 14px 12px;
  transform: translateX(-50%);
  color: #4b3427;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 253, 236, 0.97), rgba(241, 224, 178, 0.96));
  box-shadow:
    0 8px 24px rgba(61, 39, 22, 0.28),
    inset 0 0 0 1px rgba(150, 105, 48, 0.3);
  pointer-events: none;
}
.four-letter-hud[hidden] { display: none; }
.four-letter-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
}
.four-letter-heading img {
  width: 38px;
  height: 36px;
  object-fit: contain;
}
.four-letter-heading strong,
.four-letter-heading span {
  display: block;
}
.four-letter-heading strong {
  font-size: 0.94rem;
  letter-spacing: 0.01em;
}
.four-letter-heading span {
  margin-top: 1px;
  color: #8c6f49;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
}
.four-letter-heading button {
  padding: 5px 11px;
  color: #6b4027;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(117, 70, 39, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  pointer-events: auto;
}
.four-letter-hud > p {
  margin: 8px auto 9px;
  max-width: 540px;
  color: #664d37;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.3;
  text-align: center;
}
.four-letter-word {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.four-letter-word span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  color: #fff8d7;
  font-size: 1rem;
  font-weight: 900;
  border: 2px solid #73523a;
  border-radius: 6px;
  background: linear-gradient(145deg, #d98c50, #9e553c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.24), 0 2px 0 #6f412f;
  transition: transform 150ms ease, background 180ms ease;
}
.four-letter-word span.is-spinning {
  transform: translateY(-4px) rotate(5deg);
  background: linear-gradient(145deg, #77b8c9, #4d7f96);
}

.legalize-hud {
  position: absolute;
  z-index: 79;
  top: 66px;
  left: 50%;
  width: min(640px, calc(100% - 32px));
  padding: 10px 14px 11px;
  transform: translateX(-50%);
  color: #303b3d;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(244, 246, 237, 0.97), rgba(211, 218, 199, 0.96));
  box-shadow:
    0 8px 24px rgba(30, 39, 36, 0.3),
    inset 0 0 0 1px rgba(83, 101, 89, 0.3);
  pointer-events: none;
}
.legalize-hud[hidden] { display: none; }
.legalize-heading {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.legalize-heading img {
  width: 42px;
  height: 34px;
  object-fit: contain;
  image-rendering: auto;
}
.legalize-heading strong,
.legalize-heading span {
  display: block;
}
.legalize-heading strong {
  color: #34483f;
  font-size: 0.95rem;
}
.legalize-heading span {
  margin-top: 1px;
  color: #6e8074;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.legalize-heading > b {
  min-width: 42px;
  color: #657868;
  font-size: 0.78rem;
  text-align: center;
}
.legalize-heading button {
  padding: 5px 11px;
  color: #485a4d;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(73, 91, 77, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  pointer-events: auto;
}
.legalize-hud > p {
  margin: 7px 0 8px;
  color: #58685d;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}
.legalize-progress {
  display: flex;
  justify-content: center;
  gap: 7px;
}
.legalize-progress i {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(82, 100, 87, 0.2);
  box-shadow: inset 0 1px 2px rgba(24, 39, 30, 0.18);
}
.legalize-progress i.is-done {
  background: #75a154;
  box-shadow: 0 0 7px rgba(112, 161, 82, 0.48);
}

.winter-walk-hud {
  position: absolute;
  z-index: 79;
  top: 66px;
  left: 50%;
  width: min(650px, calc(100% - 32px));
  padding: 10px 14px 11px;
  transform: translateX(-50%);
  color: #173d59;
  border: 2px solid rgba(241, 253, 255, 0.92);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(240, 252, 255, 0.96), rgba(179, 222, 239, 0.94));
  box-shadow:
    0 9px 28px rgba(10, 49, 77, 0.3),
    inset 0 0 0 1px rgba(76, 155, 192, 0.32);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.greedy-street-hud {
  position: absolute;
  z-index: 81;
  top: 66px;
  left: 50%;
  width: min(720px, calc(100% - 32px));
  padding: 10px 14px 11px;
  transform: translateX(-50%);
  color: #4f3b6b;
  border: 2px solid rgba(255, 247, 210, 0.94);
  border-radius: 16px;
  background:
    radial-gradient(circle at 7% 18%, rgba(255,255,255,0.86), transparent 26%),
    linear-gradient(180deg, rgba(255, 250, 223, 0.97), rgba(221, 205, 239, 0.95));
  box-shadow:
    0 9px 28px rgba(62, 42, 88, 0.3),
    inset 0 0 0 1px rgba(113, 82, 150, 0.3);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.greedy-street-hud[hidden] { display: none; }
.greedy-street-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.greedy-street-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff4a6;
  font-size: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #7c5b9f, #b987bc);
  box-shadow: 0 2px 8px rgba(58, 38, 81, 0.28);
}
.greedy-street-heading strong,
.greedy-street-heading div > span { display: block; }
.greedy-street-heading strong { font-size: 0.95rem; }
.greedy-street-heading div > span {
  margin-top: 1px;
  color: #7d6792;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
}
.greedy-street-heading time {
  min-width: 54px;
  padding: 4px 8px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  background: rgba(93, 66, 124, 0.84);
}
.greedy-street-heading time.is-low {
  color: #fff4d8;
  background: #a64a4a;
  animation: winter-timer-pulse 1s ease-in-out infinite;
}
.greedy-street-heading button {
  padding: 5px 11px;
  color: #5d4377;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(92, 63, 122, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  pointer-events: auto;
}
.greedy-street-hud > p {
  margin: 7px 0 5px;
  color: #705883;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}
.greedy-street-hud blockquote {
  min-height: 1.2em;
  margin: 5px 0 7px;
  color: #41304f;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}
.greedy-street-progress {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.greedy-street-progress i {
  display: grid;
  width: 24px;
  height: 20px;
  place-items: center;
  color: #866f99;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
}
.greedy-street-progress i.is-done {
  color: #fff;
  background: #76a657;
  box-shadow: 0 0 8px rgba(103, 154, 76, 0.5);
}
.winter-walk-hud[hidden] { display: none; }
.winter-walk-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.winter-walk-heading img {
  width: 38px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(23, 80, 112, 0.3));
}
.winter-walk-heading strong,
.winter-walk-heading span {
  display: block;
}
.winter-walk-heading strong {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.winter-walk-heading span {
  margin-top: 1px;
  color: #477a98;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
}
.winter-walk-heading time {
  min-width: 54px;
  padding: 4px 8px;
  color: #f8feff;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  background: rgba(25, 88, 126, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36);
}
.winter-walk-heading time.is-low {
  color: #fff3d4;
  background: #a84646;
  animation: winter-timer-pulse 1s ease-in-out infinite;
}
.winter-walk-heading button {
  padding: 5px 11px;
  color: #245370;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(43, 106, 142, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  pointer-events: auto;
}
.winter-walk-hud > p {
  margin: 7px 0 6px;
  color: #315f7b;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}
.winter-walk-progress {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #477a98;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.winter-walk-progress b {
  color: #623da0;
  font-size: 0.82rem;
}
@keyframes winter-timer-pulse {
  50% { transform: scale(1.05); }
}

.summers-day-hud {
  position: absolute;
  z-index: 80;
  top: 66px;
  left: 50%;
  width: min(650px, calc(100% - 32px));
  padding: 10px 14px 11px;
  transform: translateX(-50%);
  color: #285a6b;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,0.94), transparent 28%),
    linear-gradient(180deg, rgba(248, 253, 255, 0.97), rgba(186, 224, 236, 0.95));
  box-shadow:
    0 9px 28px rgba(39, 99, 119, 0.25),
    inset 0 0 0 1px rgba(81, 154, 178, 0.28);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.summers-day-hud[hidden] { display: none; }
.summers-day-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.summers-day-mark {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255,255,255,0.94);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 48%, #fafdff 0 4px, transparent 5px),
    radial-gradient(circle at 30% 72%, #c5e7f0 0 5px, transparent 6px),
    linear-gradient(145deg, #80c1d5, #dff4fa);
  box-shadow: 0 2px 8px rgba(32, 91, 112, 0.25);
}
.summers-day-heading strong,
.summers-day-heading div > span {
  display: block;
}
.summers-day-heading strong {
  color: #1f5264;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.summers-day-heading div > span {
  margin-top: 1px;
  color: #5d91a4;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
}
.summers-day-heading time {
  min-width: 54px;
  padding: 4px 8px;
  color: #f9feff;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  background: rgba(58, 126, 151, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
}
.summers-day-heading time.is-low {
  color: #fff4d8;
  background: #a64a4a;
  animation: winter-timer-pulse 1s ease-in-out infinite;
}
.summers-day-heading button {
  padding: 5px 11px;
  color: #285d70;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(66, 133, 157, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  pointer-events: auto;
}
.summers-day-hud > p {
  margin: 7px 0 6px;
  color: #477b8e;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}
.summers-day-progress {
  display: flex;
  justify-content: center;
  gap: 22px;
  color: #6190a0;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.summers-day-progress b {
  color: #397e98;
  font-size: 0.82rem;
}

.rook-woods-hud {
  position: absolute;
  z-index: 79;
  top: 66px;
  left: 50%;
  width: min(650px, calc(100% - 32px));
  padding: 10px 14px 11px;
  transform: translateX(-50%);
  color: #f1e7c8;
  border: 2px solid rgba(215, 203, 168, 0.72);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 10%, rgba(117, 93, 62, 0.42), transparent 32%),
    linear-gradient(180deg, rgba(38, 42, 34, 0.97), rgba(19, 24, 21, 0.97));
  box-shadow:
    0 10px 30px rgba(4, 7, 5, 0.58),
    inset 0 0 0 1px rgba(194, 174, 119, 0.2);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.rook-woods-hud[hidden] { display: none; }
.rook-woods-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.rook-woods-egg-icon {
  width: 32px;
  height: 37px;
  margin-left: 3px;
  border: 2px solid #c8b98b;
  border-radius: 52% 48% 46% 54% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 64% 38%, #252720 0 3px, transparent 4px),
    radial-gradient(circle at 38% 63%, #34362b 0 4px, transparent 5px),
    linear-gradient(145deg, #827c5f, #45483c 62%, #272a24);
  box-shadow: inset 3px 2px 0 rgba(255,255,255,0.12), 0 3px 8px rgba(0,0,0,0.45);
  transform: rotate(7deg);
}
.rook-woods-heading strong,
.rook-woods-heading span {
  display: block;
}
.rook-woods-heading strong {
  color: #fff5d4;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.rook-woods-heading span {
  margin-top: 1px;
  color: #b7aa84;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
}
.rook-woods-heading time {
  min-width: 54px;
  padding: 4px 8px;
  color: #fff7dc;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  background: rgba(113, 83, 49, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}
.rook-woods-heading time.is-low {
  color: #fff3d4;
  background: #963e37;
  animation: winter-timer-pulse 1s ease-in-out infinite;
}
.rook-woods-heading button {
  padding: 5px 11px;
  color: #493e2d;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(207, 188, 137, 0.5);
  border-radius: 999px;
  background: rgba(247, 238, 211, 0.88);
  cursor: pointer;
  pointer-events: auto;
}
.rook-woods-hud > p {
  margin: 7px 0 6px;
  color: #d3c7a7;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}
.rook-woods-progress {
  display: flex;
  justify-content: center;
  gap: 24px;
  color: #9f967d;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.rook-woods-progress b {
  color: #e0ba73;
  font-size: 0.82rem;
}

.rook-museum-hud {
  position: absolute;
  z-index: 80;
  top: 66px;
  left: 50%;
  width: min(650px, calc(100% - 32px));
  padding: 9px 14px 10px;
  transform: translateX(-50%);
  color: #f7ecd0;
  border: 2px solid rgba(235, 205, 132, 0.76);
  border-radius: 15px;
  background:
    radial-gradient(circle at 8% 10%, rgba(205, 151, 69, 0.24), transparent 31%),
    linear-gradient(180deg, rgba(73, 44, 25, 0.97), rgba(40, 25, 18, 0.97));
  box-shadow: 0 10px 32px rgba(21, 10, 5, 0.48), inset 0 0 0 1px rgba(255, 238, 177, 0.17);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.rook-museum-hud[hidden] { display: none; }
.rook-museum-heading {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.rook-museum-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #4b2c19;
  font: 900 1rem Georgia, serif;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2b8, #c9943d 66%, #79521e);
  box-shadow: 0 2px 8px rgba(0,0,0,0.42), inset 0 0 0 2px rgba(255,255,255,0.3);
}
.rook-museum-heading strong,
.rook-museum-heading span { display: block; }
.rook-museum-heading strong { color: #fff5da; font-size: 0.94rem; }
.rook-museum-heading span {
  color: #d4b982;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.rook-museum-heading > b {
  min-width: 50px;
  color: #ffe7a3;
  font-size: 0.83rem;
  text-align: center;
}
.rook-museum-heading button {
  padding: 5px 11px;
  color: #513722;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(235, 205, 132, 0.6);
  border-radius: 999px;
  background: rgba(255, 246, 220, 0.92);
  cursor: pointer;
  pointer-events: auto;
}
.rook-museum-hud > p {
  margin: 6px 0 5px;
  color: #e0cfab;
  font-size: 0.77rem;
  font-style: italic;
  text-align: center;
}
.rook-museum-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.rook-museum-progress i {
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: rgba(237, 218, 172, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.rook-museum-progress i.visited {
  background: linear-gradient(90deg, #d49a3d, #ffe09a);
  box-shadow: 0 0 8px rgba(246, 199, 101, 0.54);
}

.de-embiggenify-hud {
  position: absolute;
  z-index: 80;
  top: 66px;
  left: 50%;
  width: min(670px, calc(100% - 32px));
  padding: 9px 14px 10px;
  transform: translateX(-50%);
  color: #4d3825;
  border: 2px solid rgba(255, 250, 225, 0.9);
  border-radius: 15px;
  background:
    radial-gradient(circle at 8% 15%, rgba(255, 235, 166, 0.42), transparent 30%),
    linear-gradient(180deg, rgba(255, 249, 224, 0.97), rgba(225, 197, 145, 0.96));
  box-shadow: 0 9px 28px rgba(59, 38, 17, 0.3), inset 0 0 0 1px rgba(129, 84, 40, 0.22);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.de-embiggenify-hud[hidden] { display: none; }
.de-embiggenify-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.de-embiggenify-heading img {
  width: 38px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(68, 42, 18, 0.3));
}
.de-embiggenify-heading strong,
.de-embiggenify-heading span { display: block; }
.de-embiggenify-heading strong { color: #56371f; font-size: 0.94rem; }
.de-embiggenify-heading span {
  color: #8a6847;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.de-embiggenify-heading time {
  min-width: 54px;
  padding: 4px 8px;
  color: #fff9e5;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  background: rgba(112, 74, 42, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
}
.de-embiggenify-heading time.is-low {
  background: #a64b3d;
  animation: winter-timer-pulse 1s ease-in-out infinite;
}
.de-embiggenify-heading button {
  padding: 5px 11px;
  color: #604122;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(116, 77, 38, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 241, 0.82);
  cursor: pointer;
  pointer-events: auto;
}
.de-embiggenify-hud > p {
  margin: 6px 0 5px;
  color: #715337;
  font-size: 0.77rem;
  font-style: italic;
  text-align: center;
}
.de-embiggenify-progress {
  display: flex;
  justify-content: center;
  gap: 18px;
  color: #a18768;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}
.de-embiggenify-progress span.done { color: #4e8c3c; }
.de-embiggenify-progress span.active { color: #8d4e24; }

.paradise-flight-hud {
  position: absolute;
  z-index: 80;
  top: 64px;
  left: 50%;
  width: min(660px, calc(100% - 32px));
  padding: 10px 14px 11px;
  transform: translateX(-50%);
  color: #26375e;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgba(249, 245, 255, 0.95), rgba(200, 227, 246, 0.92));
  box-shadow:
    0 9px 30px rgba(15, 26, 65, 0.33),
    inset 0 0 0 1px rgba(119, 90, 170, 0.24);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.paradise-flight-hud[hidden] { display: none; }
.paradise-flight-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 9px;
}
.paradise-flight-heading img {
  width: 33px;
  height: 44px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 3px rgba(32, 41, 77, 0.28));
}
.paradise-flight-heading strong,
.paradise-flight-heading span {
  display: block;
}
.paradise-flight-heading strong {
  color: #563e86;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
.paradise-flight-heading span {
  margin-top: 1px;
  color: #64739a;
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
}
.paradise-flight-heading time {
  min-width: 54px;
  padding: 4px 8px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  background: rgba(72, 71, 130, 0.84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.paradise-flight-heading time.is-low {
  color: #fff3d4;
  background: #a84668;
  animation: winter-timer-pulse 1s ease-in-out infinite;
}
.paradise-flight-heading button {
  padding: 5px 11px;
  color: #4d4676;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(81, 76, 139, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  pointer-events: auto;
}
.paradise-flight-hud > p {
  margin: 6px 0;
  color: #4c5c84;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}
.paradise-flight-progress {
  display: flex;
  justify-content: center;
  gap: 22px;
  color: #6b7697;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.paradise-flight-progress b {
  color: #7654ad;
  font-size: 0.82rem;
}
.hog-haul-countdown[hidden] { display: none; }
.hog-haul-countdown.is-go { color: #ffe260; }
/* G394/G396: Tiny Speck's 321_countdown and game_of_crowns_throbber (js/overlays.js) show instead of the words. */
.hog-haul-countdown.has-art,
.hog-haul-countdown.has-throbber { color: transparent; text-shadow: none; }
.hog-haul-result-card {
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 235, 117, 0.3), transparent 50%),
    linear-gradient(180deg, #59452e, #231d19);
}
.hog-haul-result-card.is-loss {
  background:
    radial-gradient(circle at 50% 15%, rgba(196, 154, 235, 0.24), transparent 50%),
    linear-gradient(180deg, #403548, #211d24);
}
.hog-haul-result-card > p:last-of-type {
  margin: -6px 0 19px;
  font-weight: 800;
}
.hog-haul-result-rays {
  position: absolute;
  z-index: -1;
  inset: -90%;
  background: repeating-conic-gradient(
    rgba(255, 245, 169, 0.13) 0deg 11deg,
    transparent 11deg 22deg
  );
  animation: awardSpin 24s linear infinite;
}
.hog-haul-result-card.is-loss .hog-haul-result-rays { display: none; }

@media (max-width: 620px) {
  .hog-haul-loop { gap: 4px; }
  .hog-haul-loop span { padding: 5px; font-size: 0.68rem; }
  .hog-haul-ready-card,
  .hog-haul-result-card { padding: 22px 15px 20px; }
}
.home-chrome-btn {
  position: relative;
}

.mail-unread-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 3px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 99px;
  background: #db4e62;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 1px 3px #40223b66;
}

.mail-unread-badge[hidden] {
  display: none;
}

.home-panel,
.mail-panel {
  position: absolute;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 78px 24px 112px;
  background: rgb(31 27 47 / 64%);
  backdrop-filter: blur(3px);
}

.home-panel[hidden],
.mail-panel[hidden] {
  display: none;
}

.home-card,
.mail-card {
  /* 100% = the panel's padded box; 96vw overflowed the game root on phones. */
  width: min(920px, 100%);
  max-height: 100%;
  overflow: hidden;
  border: 4px solid #f8f0dc;
  border-radius: 22px;
  background: #fffaf0;
  color: #493d4c;
  box-shadow: 0 18px 50px #1d173a80, inset 0 0 0 2px #cbb993;
}

.home-head,
.mail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 14px 18px 12px 24px;
  border-bottom: 2px solid #d9cbaa;
  background: linear-gradient(#f6e9c9, #e6d4a9);
}

.home-head h2,
.mail-head h2 {
  margin: 0;
  color: #51415a;
  font-size: 30px;
  line-height: 1;
}

.home-kicker,
.mail-kicker {
  display: block;
  margin-bottom: 3px;
  color: #8d7a74;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-body {
  max-height: min(590px, calc(100vh - 220px));
  overflow: auto;
  padding: 24px;
}

.home-intro {
  max-width: 720px;
  margin: 0 0 18px;
  color: #6d6170;
  font-size: 15px;
  line-height: 1.5;
}

.home-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.home-style {
  min-height: 190px;
  padding: 0;
  overflow: hidden;
  border: 3px solid #d4c9ae;
  border-radius: 16px;
  background: #fff;
  color: #51485a;
  text-align: left;
  cursor: pointer;
}

.home-style:hover,
.home-style.is-selected {
  border-color: var(--home-accent, #7ca75c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-accent, #7ca75c) 28%, transparent);
}

.home-style-visual {
  display: block;
  height: 88px;
  background:
    radial-gradient(circle at 80% 20%, #fff7 0 9%, transparent 10%),
    linear-gradient(#9fd6ed 0 60%, var(--home-accent, #7ca75c) 61%);
}

.home-style strong,
.home-style span:last-child {
  display: block;
  padding-inline: 14px;
}

.home-style strong {
  padding-top: 12px;
  font-size: 18px;
}

.home-style span:last-child {
  padding-top: 5px;
  padding-bottom: 14px;
  color: #746978;
  font-size: 12px;
  line-height: 1.35;
}

.home-purchase-bar,
.home-owned-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #eee5cf;
}

.home-purchase-copy strong,
.home-purchase-copy span {
  display: block;
}

.home-purchase-copy span {
  margin-top: 3px;
  color: #756878;
  font-size: 12px;
}

/* G208: the Home Street Selection Machine (js/home-ticket.js). */
.home-ticket {
  display: grid;
  grid-template-columns: 50px 1fr 48px;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #eee5cf;
}

.home-ticket-copy strong,
.home-ticket-copy span {
  display: block;
}

.home-ticket-copy span {
  margin-top: 3px;
  color: #756878;
  font-size: 12px;
}

.home-ticket-copy .home-ticket-have {
  color: #51485a;
  font-weight: 700;
}

.home-style:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.home-owned-hero {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: center;
}

.home-owned-mark {
  display: grid;
  width: 150px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 27%, var(--home-accent) 28% 62%, #5e4a66 63%);
  color: #4f4057;
  font-size: 44px;
  box-shadow: inset 0 0 0 5px #fff9;
}

.home-owned-hero h3 {
  margin: 0 0 7px;
  font-size: 27px;
}

.home-owned-hero p {
  margin: 0;
  color: #6f6372;
  line-height: 1.5;
}

.home-owned-actions {
  justify-content: flex-start;
}

.home-owned-meta {
  margin-left: auto;
  color: #776b77;
  font-size: 12px;
}

.mail-card {
  width: min(1020px, 97vw);
}

.mail-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mail-tabs {
  display: flex;
  gap: 5px;
  padding: 10px 18px 0;
  background: #eee4cd;
}

.mail-tabs button {
  padding: 9px 18px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: #d7c8aa;
  color: #625468;
  font-weight: 800;
  cursor: pointer;
}

.mail-tabs button.active {
  background: #fffaf0;
}

.mail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 36%) 1fr;
  min-height: 430px;
  max-height: min(610px, calc(100vh - 230px));
}

.mail-list {
  overflow: auto;
  border-right: 2px solid #ded3ba;
  background: #f3ecd9;
}

.mail-row {
  display: grid;
  width: 100%;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid #ddd0b6;
  background: transparent;
  color: #5c4e61;
  text-align: left;
  cursor: pointer;
}

.mail-row:hover,
.mail-row.is-selected {
  background: #fffaf0;
}

.mail-row-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: transparent;
}

.mail-row.is-unread .mail-row-dot {
  background: #d54f63;
  box-shadow: 0 0 0 2px #fff;
}

.mail-row-copy strong,
.mail-row-copy span {
  display: block;
}

.mail-row-copy span {
  margin-top: 3px;
  overflow: hidden;
  color: #847783;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row time {
  color: #91828a;
  font-size: 10px;
}

.mail-reader {
  overflow: auto;
  padding: 24px;
  background: #fffaf0;
}

.mail-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  color: #9b8d93;
  text-align: center;
}

.mail-message-from {
  margin: 0 0 5px;
  color: #8d7f87;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.mail-message-title {
  margin: 0;
  color: #4e4055;
  font-size: 25px;
}

.mail-message-time {
  display: block;
  margin-top: 5px;
  color: #998d92;
  font-size: 11px;
}

.mail-message-body {
  min-height: 110px;
  margin: 20px 0;
  color: #5f5261;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.mail-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 2px dashed #c7b995;
  border-radius: 12px;
  background: #f3ead6;
}

.mail-attachment img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.mail-attachment-copy {
  flex: 1;
}

.mail-attachment-copy strong,
.mail-attachment-copy span {
  display: block;
}

.mail-attachment-copy span {
  color: #7c6f79;
  font-size: 11px;
}

.mail-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mail-message-actions button {
  min-height: 36px;
}

.mail-compose-form {
  display: grid;
  gap: 13px;
}

.mail-compose-form label {
  display: grid;
  gap: 5px;
  color: #6e6070;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.mail-compose-form select,
.mail-compose-form textarea,
.mail-compose-form input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #cfc2a6;
  border-radius: 9px;
  background: #fff;
  color: #4f4354;
  font: inherit;
}

.mail-compose-form textarea {
  min-height: 150px;
  resize: vertical;
}

.mail-compose-grid {
  display: grid;
  grid-template-columns: 1fr 86px 110px;
  gap: 10px;
}

.mail-compose-cost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-radius: 10px;
  background: #eee4cf;
  color: #756879;
  font-size: 12px;
}

.mail-compose-cost strong {
  color: #4f4055;
  font-size: 16px;
}

.map-home-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 18px 14px;
  padding: 11px 13px;
  border: 2px solid #d8c69f;
  border-radius: 12px;
  background: #f6edd8;
  color: #5e4d65;
}

.map-home-card strong,
.map-home-card span {
  display: block;
}

.map-home-card span {
  margin-top: 2px;
  color: #81737f;
  font-size: 11px;
}

.map-home-card button {
  margin-left: auto;
}

@media (max-width: 760px) {
  .home-panel,
  .mail-panel {
    padding: 64px 8px 94px;
  }

  .home-style-grid {
    grid-template-columns: 1fr;
  }

  .home-style {
    min-height: 140px;
  }

  .mail-layout {
    grid-template-columns: 42% 58%;
  }

  .mail-reader {
    padding: 16px;
  }

  .mail-compose-grid {
    grid-template-columns: 1fr 72px;
  }

  .mail-compose-grid label:last-child {
    grid-column: 1 / -1;
  }
}

/* Making: owned tools lead; recipe search spans every tool */
.make-tool-chip.unowned {
  opacity: 0.55;
  font-weight: 600;
}
.make-tool-chip.unowned.active {
  opacity: 1;
}
.make-search-row {
  margin: 0.45rem 0 0;
}
.make-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d0cdc6;
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  background: #fffdf8;
  color: #2a2a2a;
}
.make-search:focus {
  outline: 2px solid #8fbf5a;
  outline-offset: 1px;
}

/* —— The Magic Rock familiar, final 2012 form (G211, G218, G219, G220; js/familiar.js) —— */
.pet-rock { display: block; background-repeat: no-repeat; }
.fam-rock { position: relative; width: var(--fam-rock-size, 80px); height: var(--fam-rock-size, 80px); }
.fam-rock-art { position: relative; z-index: 1; }
.fam-rays { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; display: none; }
.fam-rays svg { display: block; width: 100%; height: 100%; animation: famRaySpin var(--fam-ray-spin, 6s) linear infinite; }
@keyframes famRaySpin { to { transform: rotate(60deg); } }
@media (prefers-reduced-motion: reduce) { .fam-rays svg { animation: none; } }
.fam-close {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: #0a181d url('assets/ui/familiar/close_x_small_gray.png?v=df15aba7') center / 20px 20px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(204, 204, 204, 0.25);
}
.fam-close:hover, .fam-close:focus-visible { box-shadow: inset 0 0 0 1px #ccc; }

/* The shared quest card keeps its plain look for everyone else. */
.quest-dialogue-bubble { display: contents; }
.quest-dialogue .fam-rock, .quest-dialogue .fam-head, .quest-dialogue .fam-close { display: none; }

/* QuestConversationUI.as: rock 80 px with a white glow, a 462 px bubble in
   0x0a181d at 0.9 pointing at it, centred 80 px under the header, no shade. */
.quest-dialogue[data-look="familiar"] { place-items: start center; padding: 80px 8px 8px; }
.quest-dialogue[data-look="familiar"] .quest-dialogue-shade,
.quest-dialogue[data-look="familiar"] #quest-dialogue-kicker { display: none; }
.quest-dialogue[data-look="familiar"] .quest-dialogue-card {
  display: grid; grid-template-columns: 80px minmax(0, 462px); column-gap: 10px; align-items: center;
  width: auto; max-width: calc(100% - 8px); max-height: calc(100% - 8px); overflow: visible;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  text-align: left; color: #fff;
}
.quest-dialogue[data-look="familiar"] .fam-rock { display: block; }
.quest-dialogue[data-look="familiar"] .fam-rock-art {
  /* glow 0xececec, alpha 0.8, strength 20 (QuestConversationUI.as 76) */
  filter: drop-shadow(0 0 1.5px rgba(236, 236, 236, 1)) drop-shadow(0 0 4px rgba(236, 236, 236, 0.8));
}
.quest-dialogue[data-look="familiar"][data-urgent="true"] .fam-rays { display: block; }
.quest-dialogue[data-look="familiar"] .quest-dialogue-bubble {
  display: block; position: relative; box-sizing: border-box; width: 462px; max-width: 100%;
  max-height: calc(100vh - 120px); overflow: visible;
  padding: 0 20px 20px; border-radius: 5px; background: rgba(10, 24, 29, 0.9);
  font-size: 13px; line-height: 1.38;
}
.quest-dialogue[data-look="familiar"] .quest-dialogue-bubble::before {
  content: ''; position: absolute; left: -9px; top: 50%; margin-top: -8px;
  border-style: solid; border-width: 8px 9px 8px 0;
  border-color: transparent rgba(10, 24, 29, 0.9) transparent transparent;
}
.quest-dialogue[data-look="familiar"] .fam-head {
  display: flex; align-items: center; gap: 10px; margin: 0 -20px; padding: 7px 40px 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4); font-size: 13px; font-weight: 700; line-height: 22px; color: #fff;
}
.quest-dialogue[data-look="familiar"] .fam-head img { display: block; width: 32px; height: 22px; }
.quest-dialogue[data-look="familiar"] .fam-close:not([hidden]) { display: block; position: absolute; top: 7px; right: 7px; }
.quest-dialogue[data-look="familiar"] .quest-dialogue-card h2 {
  margin: 12px 0 2px; color: #f3e46a; font-size: 17px; line-height: 1.25; font-weight: 800;
}
.quest-dialogue[data-look="familiar"] .quest-dialogue-copy { min-height: 0; margin: 0; font-size: 13px; line-height: 1.4; color: #eef2f2; }
.quest-dialogue[data-look="familiar"] .quest-dialogue-actions,
.quest-dialogue[data-look="vog"] .quest-dialogue-actions,
.quest-dialogue[data-look="vog"] [data-qi-choices] {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px;
}
.quest-dialogue[data-look="familiar"] .quest-dialogue-actions button,
.quest-dialogue[data-look="vog"] .quest-dialogue-actions button,
.quest-dialogue[data-look="vog"] [data-qi-choices] button {
  /* Button TYPE_DARK, SIZE_CONVERSATION */
  min-width: 0; margin: 0; padding: 5px 14px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 4px;
  background: linear-gradient(#66737a, #3d494f); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.quest-dialogue[data-look="familiar"] .quest-dialogue-actions button:hover,
.quest-dialogue[data-look="familiar"] .quest-dialogue-actions button:focus-visible,
.quest-dialogue[data-look="vog"] .quest-dialogue-actions button:hover,
.quest-dialogue[data-look="vog"] [data-qi-choices] button:hover,
.quest-dialogue[data-look="vog"] [data-qi-choices] button:focus-visible {
  background: linear-gradient(#78868d, #4a575d); outline: none; box-shadow: 0 0 0 2px rgba(215, 144, 53, 0.75);
}
.quest-dialogue[data-look="familiar"] .quest-dialogue-actions button[hidden],
.quest-dialogue[data-look="vog"] .quest-dialogue-actions button[hidden] { display: none; }
@media (max-width: 560px) {
  .quest-dialogue[data-look="familiar"] { padding-top: 56px; }
  .quest-dialogue[data-look="familiar"] .quest-dialogue-card { grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; }
  .quest-dialogue[data-look="familiar"] .fam-rock { transform: scale(0.65); margin-left: -14px; }
}

/* Voice of rock (inc_announcements.js bubble_familiar; InWindowAnnouncementOverlay.as
   494-515): the rock with rays at x 50% y 15%, a black 0.7 bubble (radius 15,
   padding 15) at top_y 25% with an 18 x 12 px pointer up at it. */
.quest-dialogue[data-look="vog"]:not([hidden]) { display: block; padding: 0; }
.quest-dialogue[data-look="vog"] .quest-dialogue-shade,
.quest-dialogue[data-look="vog"] .mr-kicker,
.quest-dialogue[data-look="vog"] .quest-dialogue-card h2 { display: none; }
.quest-dialogue[data-look="vog"] .quest-dialogue-card {
  /* G225: placed in the location viewport (familiar.js vogLayout), not the whole game root. */
  position: absolute; left: var(--vog-x, 50%); top: var(--vog-top, calc(25% + 12px)); transform: translateX(-50%);
  box-sizing: border-box; width: min(calc(var(--vog-w, 500px) + 30px), var(--vog-max-w, calc(100% - 24px))); max-height: none; overflow: visible;
  padding: 15px; border: 0; border-radius: 7.5px; background: rgba(0, 0, 0, 0.7); box-shadow: none;
  color: #fff; text-align: center;
}
.quest-dialogue[data-look="vog"] .quest-dialogue-card::before {
  content: ''; position: absolute; left: 50%; top: -12px; margin-left: -9px;
  border-style: solid; border-width: 0 9px 12px; border-color: transparent transparent rgba(0, 0, 0, 0.7);
}
.quest-dialogue[data-look="vog"] .fam-rock {
  display: block; position: absolute; left: 50%; top: var(--vog-dy, -80px); transform: translate(-50%, -50%);
}
.quest-dialogue[data-look="vog"] .fam-rays { display: block; }
.quest-dialogue[data-look="vog"] .quest-dialogue-copy {
  min-height: 0; margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* G225: an offer opened from the Quests dialog sits inside it, at x 10 and the
   list top + 10, with no rays (QuestsDialog.as 229-231, 345-351). */
/* :not([hidden]) so an answered card goes (the attribute selector outranked .quest-dialogue[hidden]). */
.quest-dialogue[data-look="familiar"][data-in-log="true"]:not([hidden]) { display: block; padding: 0; }
.quest-dialogue[data-look="familiar"][data-in-log="true"] .quest-dialogue-card {
  position: absolute; left: var(--fam-log-x, 10px); top: var(--fam-log-y, 80px);
  max-width: calc(100% - var(--fam-log-x, 10px) - 8px);
}

/* G225: FamiliarDialog CONVERSATION, the Magic Rock's other lines (ChoicesDialog.as
   FAM_CONVERSATION 249-344, 614-634, 674-677; FamiliarDialog.as 85-95, 453-475,
   500-509): no shade and no rock; a 360 px panel in 0x0a181d at 0.9, radius 10,
   grown out of the header centre, centred in the location viewport 30 px under
   the header. A titled conversation shows the quest book and its title over a
   1 px 0x49514f rule (ConversationManager.as 155-165); dark buttons; a close X. */
/* :not([hidden]): an answered conversation goes (G208 found the card left on screen). */
.quest-dialogue[data-look="conversation"]:not([hidden]) { display: block; padding: 0; }
.quest-dialogue[data-look="conversation"] .quest-dialogue-shade,
.quest-dialogue[data-look="conversation"] .mr-kicker,
.quest-dialogue[data-look="conversation"] .quest-dialogue-card h2 { display: none; }
.quest-dialogue[data-look="conversation"] .quest-dialogue-card {
  position: absolute; left: var(--fam-vp-cx, 50%); top: 30px; transform: translateX(-50%); transform-origin: 50% -30px;
  box-sizing: border-box; width: 360px; max-width: calc(var(--fam-vp-w, 100%) - 16px); max-height: calc(100% - 40px); overflow: auto;
  padding: 0 25px 25px; border: 0; border-radius: 10px; background: rgba(10, 24, 29, 0.9); box-shadow: none;
  color: #fff; text-align: left; font-size: 13px; line-height: 1.4;
}
.quest-dialogue[data-look="conversation"] .quest-dialogue-card.fam-grow { animation: famConvGrow 0.3s cubic-bezier(0.32, 0, 0.67, 0) both; }
@keyframes famConvGrow { from { transform: translateX(-50%) scale(0.02); } to { transform: translateX(-50%) scale(1); } }
.quest-dialogue[data-look="conversation"] .fam-head {
  display: flex; align-items: center; gap: 11px; margin: 0 -25px 21px; padding: 10px 40px 8px 10px;
  border-bottom: 1px solid #49514f; font-size: 15px; font-weight: 800; line-height: 22px; color: #f3e46a;
}
.quest-dialogue[data-look="conversation"] .fam-head img { display: block; width: 32px; height: 22px; }
.quest-dialogue[data-look="conversation"] .fam-head:has(span:empty) { display: block; height: 0; margin-bottom: 25px; padding: 0; border: 0; }
.quest-dialogue[data-look="conversation"] .fam-head:has(span:empty) img { display: none; }
.quest-dialogue[data-look="conversation"] .fam-close:not([hidden]) { display: block; position: absolute; top: 8px; right: 8px; }
.quest-dialogue[data-look="conversation"] .quest-dialogue-copy { min-height: 0; margin: 0; font-size: 14px; line-height: 1.4; color: #fff; }
.quest-dialogue[data-look="conversation"] .quest-dialogue-actions,
.quest-dialogue[data-look="conversation"] [data-qi-choices] {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 15px;
}
.quest-dialogue[data-look="conversation"] .quest-dialogue-actions button,
.quest-dialogue[data-look="conversation"] [data-qi-choices] button {
  /* Button TYPE_DARK, SIZE_CONVERSATION */
  min-width: 0; margin: 0; padding: 5px 14px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 4px;
  background: linear-gradient(#66737a, #3d494f); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.quest-dialogue[data-look="conversation"] .quest-dialogue-actions button:hover,
.quest-dialogue[data-look="conversation"] .quest-dialogue-actions button:focus-visible,
.quest-dialogue[data-look="conversation"] [data-qi-choices] button:hover,
.quest-dialogue[data-look="conversation"] [data-qi-choices] button:focus-visible {
  background: linear-gradient(#78868d, #4a575d); outline: none; box-shadow: 0 0 0 2px rgba(215, 144, 53, 0.75);
}
.quest-dialogue[data-look="conversation"] .quest-dialogue-actions button[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .quest-dialogue[data-look="conversation"] .quest-dialogue-card.fam-grow { animation: none; } }

/* G225: offers that wait in the quest log. The count rides the Quests button
   (ImaginationButton.as 96-135: 0xb21f00 pill, pops to 1.5, "New Quest Added!"
   for 3 s with QUEST_ADDED) and the Quests dialog says "You have N new quests"
   with "Show me" (QuestToast.as, QuestsDialog.as 241-252). */
#quest-btn { position: relative; }
.quest-btn-count {
  position: absolute; top: -7px; right: -7px; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #b21f00; color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 1px #fff; pointer-events: none;
}
.quest-btn-count[hidden] { display: none; }
.quest-btn-count.is-pop { animation: questCountPop 1.6s ease-out both; }
@keyframes questCountPop { 0% { transform: scale(0.01); } 18% { transform: scale(1.5); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } }
.quest-added-notice {
  position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 800; color: #b21f00; text-shadow: 0 1px 0 #fff; pointer-events: none;
  clip-path: inset(0 0 0 100%); transition: clip-path 0.5s ease 0.3s;
}
.quest-added-notice.is-shown { clip-path: inset(0 0 0 0); }
.quest-offer-toast {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 0.6rem; padding: 0.45rem 0.6rem 0.45rem 0.75rem;
  border-radius: 8px; background: #fff3c4; border: 1px solid #e7cf7a; color: #4a3b12; font-size: 0.85rem;
}
.quest-offer-toast[hidden] { display: none; }
.quest-offer-toast b { color: #b21f00; }
.quest-offer-toast button {
  flex: none; padding: 0.2rem 0.6rem; border: 1px solid #c9b25d; border-radius: 6px; background: #fffbe8; color: #4a3b12;
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.quest-offer-toast button:disabled { opacity: 0.5; cursor: default; }

/* FamiliarDialog SKILL_LEARNED: grows out of the header centre (scale 0.02 to 1,
   0.3 s easeInCubic), centred 30 px under the header, 0x0a181d at 0.9, radius 10. */
.familiar-dialog {
  position: absolute; z-index: 505; top: 30px; left: 50%;
  box-sizing: border-box; width: min(510px, calc(100% - 16px)); min-height: 220px;
  max-height: calc(100% - 40px); overflow: auto;
  padding: 20px; border-radius: 10px; background: rgba(10, 24, 29, 0.9); color: #fff;
  transform: translateX(-50%); transform-origin: 50% -30px;
  font-size: 13px; line-height: 1.4; text-align: left;
}
.familiar-dialog[hidden] { display: none; }
.familiar-dialog.is-grown { animation: famGrow 0.3s cubic-bezier(0.32, 0, 0.67, 0) both; }
.familiar-dialog.is-shrinking { animation: famShrink 0.3s cubic-bezier(0.33, 1, 0.68, 1) both; pointer-events: none; }
@keyframes famGrow { from { transform: translateX(-50%) scale(0.02); } to { transform: translateX(-50%) scale(1); } }
@keyframes famShrink { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(0.02); } }
html[data-street-cards] .familiar-dialog,
#game-root:has(.award-screen.is-visible) .familiar-dialog { visibility: hidden; }
.familiar-dialog .fam-close { position: absolute; top: 8px; right: 8px; }
.fam-learned { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 20px; align-items: start; }
/* The skill tile sits at about (55, 77)-(178, 200) of its 230 x 310 card layer. */
.fam-learned-icon, .fam-skill img { object-fit: contain; object-view-box: inset(76px 51px 109px 54px); }
.fam-learned-icon { width: 100px; height: 100px; }
.fam-learned-copy { padding-right: 18px; }
.fam-learned-header { margin: 0; font-size: 13px; font-weight: 700; color: #a9c2c8; }
.fam-learned-title { margin: 2px 0 4px; font-size: 20px; line-height: 1.2; font-weight: 800; color: #fff; }
.fam-learned-desc { margin: 0; color: #d4dee0; }
.fam-learn-next { display: flex; align-items: center; gap: 10px; margin: 12px -20px 10px; font-size: 13px; font-weight: 700; }
.fam-learn-next::before, .fam-learn-next::after { content: ''; flex: 1; height: 1px; background: #49514f; }
.fam-learn-next[hidden] { display: none; }
.fam-skill-list { display: grid; justify-content: center; column-gap: 10px; }
.fam-skill-list[data-cols="2"] { grid-template-columns: repeat(2, max-content); }
.fam-skill-list[data-cols="3"] { grid-template-columns: repeat(3, 130px); }
.fam-skill {
  display: flex; align-items: center; gap: 5px; padding: 3px 0; border: 0; background: none; cursor: pointer;
  color: #fff; font: inherit; font-size: 11px; font-weight: 700; text-align: left;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.fam-skill img { width: 20px; height: 20px; flex: none; }
.fam-skill:hover, .fam-skill:focus-visible { color: #d79035; outline: none; }
.fam-tree-link {
  display: block; margin: 15px auto 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: #5c96a3; font: inherit; font-size: 12px; text-decoration: underline;
}
@media (max-width: 560px) {
  .familiar-dialog { top: 12px; min-height: 0; padding: 16px; }
  .fam-learned { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
  .fam-learned-icon { width: 64px; height: 64px; }
  .fam-learned-title { font-size: 17px; }
  .fam-learn-next { margin-left: -16px; margin-right: -16px; }
  .fam-skill-list[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* AchievementView.as: pet_rock 68 px drops in beside the badge onto a blurred
   oval, then says "New Achievement!" in a chat bubble. */
.award-familiar {
  position: absolute; z-index: 2; left: calc(50% + 48px + 12px); top: calc(1.4rem + 96px - 68px);
  width: 68px; height: 68px; pointer-events: none; text-align: left;
}
.award-familiar[hidden] { display: none; }
.award-familiar-rock { position: relative; z-index: 1; will-change: transform; }
.award-familiar-shadow {
  position: absolute; left: 17px; bottom: 0; width: 34px; height: 10px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.8); filter: blur(6px); opacity: 0;
}
.award-familiar-bubble {
  position: absolute; z-index: 2; left: -52px; bottom: calc(100% - 2px); width: max-content; max-width: 220px;
  margin: 0; padding: 6px 10px; border-radius: 8px; background: #fff; color: #263238;
  font-size: 12px; line-height: 1.35; text-shadow: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: famBubbleIn 0.18s ease-out both;
}
.award-familiar-bubble[hidden] { display: none; }
.award-familiar-bubble::after {
  content: ''; position: absolute; left: 96px; bottom: -7px;
  border-style: solid; border-width: 8px 6px 0; border-color: #fff transparent transparent;
}
.award-familiar-bubble span { display: block; }
.award-familiar-bubble span[hidden] { display: none; }
@keyframes famBubbleIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.award-screen[data-familiar="true"] .award-kicker { visibility: hidden; }
@media (max-width: 480px) {
  .award-familiar { left: auto; right: 4px; }
  .award-familiar-bubble { left: auto; right: 0; }
  .award-familiar-bubble::after { left: auto; right: 22px; }
}

/* G254: the client's hotkey sheet (js/hotkeys-sheet.js; Hotkeys.as and its art
   TSEngineAssets hotkeys.png, 765x545): a 40% black shade over the game
   (Hotkeys.as refresh 95-97), the card 70% black (sampled 0,0,0,179), white
   labels with the keys in the art's green #9ccc1c, a green "?" on a tab above
   the title and the footer in a darker pill; up to 100 px from the top
   (refresh 99), fading in over 0.1 s (ANI_TIME, 26). */
.hotkeys-shade {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: min(100px, 8vh) 16px 20px;
  background: rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  pointer-events: none;
  animation: hotkeys-in 0.1s linear;
}
.hotkeys-shade[hidden] { display: none; }
@keyframes hotkeys-in { from { opacity: 0; } to { opacity: 1; } }
.hotkeys-card {
  position: relative;
  box-sizing: border-box;
  width: min(765px, 100%);
  margin-top: 2.6rem;
  padding: 2.1rem 1.6rem 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font: 700 0.86rem/1.35 "Trebuchet MS", sans-serif;
}
.hotkeys-badge {
  position: absolute;
  top: -2.6rem;
  left: 50%;
  width: 4.9rem;
  height: 2.7rem;
  transform: translateX(-50%);
  border-radius: 2.45rem 2.45rem 0 0;
  background: rgba(0, 0, 0, 0.7);
  color: #9ccc1c;
  font: 900 2.2rem/3rem "Trebuchet MS", sans-serif;
  text-align: center;
}
.hotkeys-card h2 {
  margin: 0 0 1rem;
  text-align: center;
  font: 900 clamp(1.4rem, 4vw, 2.2rem)/1.1 "Trebuchet MS", sans-serif;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}
.hotkeys-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.4rem 1.6rem;
}
.hotkeys-section h3 { margin: 0.4rem 0 0.35rem; font: 900 1.15rem/1.2 "Trebuchet MS", sans-serif; }
.hotkeys-section ul { margin: 0; padding: 0; list-style: none; }
.hotkeys-section li { margin: 0 0 0.3rem; }
.hotkeys-section b { color: #9ccc1c; }
.hotkeys-section small { display: block; color: #cbcbcb; font-weight: 400; font-size: 0.76rem; }
.hotkeys-foot {
  width: fit-content;
  margin: 0.8rem auto 0;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  background: rgba(35, 35, 35, 0.73);
  font-weight: 400;
  font-size: 0.82rem;
}
@media (prefers-reduced-motion: reduce) { .hotkeys-shade { animation: none; } }