/* Enchanted Isles visual layer. Decoration stays on the frame. Data stays readable. */
:root {
  --ink: #1c2438;
  --cream: #f7f4ec;
  --gold: #e4c27a;
  --gold-deep: #b8893d;
  --navy: #152038;
  --navy-2: #243456;
  --moss: #2f7a4a;
  --line: rgba(28, 36, 56, 0.12);
}

/* ---------- shared sky behind every panel ---------- */
body.realm-page {
  background: #8eb8dc;
}
body.realm-page::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: -2;
  background:
    radial-gradient(ellipse at 70% 0%, rgba(255, 220, 170, 0.55), transparent 42%),
    linear-gradient(#6ea4d4 0%, #d5e8f6 48%, #f7fbfe 100%);
}
body.realm-page::after {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: -1;
  background:
    url("/world/far-isle.png") 12% 18% / 28% no-repeat,
    url("/world/fast/sleepy-hollow-isle.webp") 78% 70% / 36% no-repeat,
    url("/world/the-queens-chambers.png") 60% 8% / 24% no-repeat;
  filter: blur(7px) saturate(1.05);
  opacity: 0.72;
  animation: realm-drift 80s linear infinite alternate;
  pointer-events: none;
}
@keyframes realm-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-24px, 10px, 0); }
}

.realm-nav {
  position: sticky;
  top: 10px;
  z-index: 30;
  width: min(980px, calc(100% - 28px));
  margin: 10px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
  min-height: 52px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #2a3c62 0%, #141c30 100%);
  color: #f4efe4;
  border: 1px solid rgba(228, 194, 122, 0.65);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 12px 28px rgba(12, 18, 32, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.realm-nav a, .realm-nav button {
  color: #eef3fb;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;
  font: 600 13px/1 "Segoe UI", system-ui, sans-serif;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.realm-nav a:hover, .realm-nav button:hover,
.realm-nav a[aria-current="page"] {
  color: #f6e4b4;
  background: rgba(228, 194, 122, 0.12);
}
.realm-nav .count {
  display: inline-block;
  min-width: 16px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 99px;
  background: #d4534a;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* ---------- map chrome ---------- */
#app .ql {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(1040px, calc(100vw - 108px));
  min-height: 54px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 56px 6px 12px;
  background: linear-gradient(180deg, #2a3c62 0%, #141c30 100%);
  border: 1px solid rgba(228, 194, 122, 0.7);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 14px 34px rgba(8, 12, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
#app .ql button, #app .ql a.nav-map {
  background: transparent !important;
  color: #f3f6fb !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
}
#app .ql button:hover, #app .ql a.nav-map:hover { color: #f6e4b4 !important; background: rgba(228, 194, 122, 0.12) !important; }
#app .ql .nav-extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#app .ql #account-btn {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 2px solid var(--gold) !important;
  background: #1a2744 url("/world/fast/queen-normal.webp") center 18% / cover !important;
  color: transparent !important;
  overflow: hidden;
}
#app #projects-toggle {
  position: fixed !important;
  left: 0;
  top: 42%;
  z-index: 42;
  width: 42px;
  height: 64px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  background: #141c30 !important;
  color: #f6e4b4 !important;
  border: 1px solid rgba(228, 194, 122, 0.7) !important;
  border-left: 0 !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
}
#account-label, #account-avatar { display: none !important; }
#account-slot { position: absolute; right: 8px; top: 7px; z-index: 2; }
#account-pop {
  position: absolute;
  right: 0;
  top: 46px;
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 14px;
  min-width: 210px;
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
#account-pop button { color: var(--ink) !important; background: transparent !important; }

#realm-badge {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 42;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  padding: 0;
  background: #12203a url("/world/fast/queen-normal.webp") center 20% / 140% no-repeat;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(20, 28, 48, 0.45);
  cursor: pointer;
}
#realm-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, #7ec8ff 36% 70%, transparent 72%);
  box-shadow: 0 0 8px #bfe6ff;
}

.dock {
  position: fixed !important;
  right: 16px;
  bottom: 16px;
  z-index: 42;
  display: flex !important;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}
#minimap {
  width: 168px !important;
  height: 112px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(228, 194, 122, 0.75) !important;
  background: rgba(12, 20, 36, 0.72) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.zoom { display: flex; flex-direction: column; gap: 6px; }
.zoom button {
  width: 36px;
  height: 36px;
  border-radius: 10px !important;
  background: rgba(16, 24, 40, 0.88) !important;
  color: #f6e4b4 !important;
  border: 1px solid rgba(228, 194, 122, 0.55) !important;
  font-size: 0 !important;
  padding: 0 !important;
}
#zoom-in::after, #zoom-out::after, #zoom-reset::after {
  font-size: 18px;
  line-height: 36px;
}
#zoom-in::after { content: "+"; }
#zoom-out::after { content: "−"; }
#zoom-reset::after { content: "⌖"; font-size: 16px; }

/* ---------- world motion ---------- */
#sky .cloud { animation-duration: 70s !important; }
#far .far-isle { animation: isle-bob 9s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes isle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.island { overflow: visible; }
.island.realm-off .falls,
.island.realm-off .vine,
.island.realm-off .fairy,
.paused .falls, .paused .vine, .paused .orbit-screen { animation-play-state: paused !important; }

.isle-plaque {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.isle-plaque .nameplate {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 24, 42, 0.88);
  color: #f7f1e4;
  border: 1px solid rgba(228, 194, 122, 0.8);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-family: Palatino, Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.isle-plaque .plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a2744;
  color: #f6e4b4;
  border: 1px solid var(--gold);
  font-size: 18px;
  line-height: 26px;
  padding: 0;
}
.isle-plaque .status {
  border-radius: 999px;
  padding: 2px 8px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: #123024;
  color: #b7f0cb;
}
.isle-plaque .status.idle { background: #2a3142; color: #d5d8e2; }
.isle-plaque .status.inactive { background: #3a2430; color: #f0b7c4; }
.isle-plaque .assign {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  color: #f6e4b4;
  background: transparent;
  border: 0;
  text-decoration: underline;
  padding: 0;
}
.isle-name { display: none !important; }

.falls {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -6%;
  height: 22%;
  pointer-events: none;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  mask-image: linear-gradient(#000 20%, transparent 96%);
}
.falls i {
  display: block;
  width: 10px;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(210,236,255,0.85) 30%, rgba(255,255,255,0.2));
  background-size: 100% 40px;
  animation: water 1.1s linear infinite;
  filter: blur(0.2px);
  opacity: 0.85;
}
.falls i:nth-child(2) { animation-duration: 0.85s; width: 16px; opacity: 0.95; }
.falls i:nth-child(3) { animation-duration: 1.35s; width: 8px; }
.falls i:nth-child(4) { animation-duration: 0.95s; }
@keyframes water {
  from { background-position: 0 -40px; }
  to { background-position: 0 40px; }
}
.mist {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -2%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.7), transparent 70%);
  animation: mist 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes mist {
  0%, 100% { opacity: 0.35; transform: scaleX(0.9); }
  50% { opacity: 0.8; transform: scaleX(1.05); }
}

.vine {
  position: absolute;
  z-index: 5;
  width: 70px;
  height: 110px;
  pointer-events: none;
  transform-origin: 50% 0;
  background:
    radial-gradient(circle at 20px 18px, #6e9a55 0 7px, transparent 8px),
    radial-gradient(circle at 40px 36px, #d7b0d4 0 6px, transparent 7px),
    radial-gradient(circle at 28px 58px, #87b56a 0 8px, transparent 9px),
    radial-gradient(circle at 48px 78px, #f2f2f2 0 5px, transparent 6px),
    linear-gradient(#3d6a34, #3d6a34) 32px 0 / 3px 100% no-repeat;
  animation: sway 5.5s ease-in-out infinite;
}
.vine.r { right: -8px; top: -10px; transform-origin: 80% 0; animation-duration: 6.4s; animation-delay: -1.6s; }
.vine.l { left: -8px; top: 4px; animation-delay: -2.4s; }
.vine.b { left: 30%; bottom: 8%; top: auto; height: 60px; animation-duration: 7s; animation-delay: -3s; }
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3.5deg); }
}

.fairy .body { animation: breathe 4.2s ease-in-out infinite; transform-origin: 50% 82%; }
.fairy.queen .bob { animation: none !important; }
.fairy.queen .body { animation: queen-idle 5.6s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1, 1) rotate(-0.6deg); }
  50% { transform: translateY(-3px) scale(1.03, 1.04) rotate(0.7deg); }
}
@keyframes queen-idle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.02, 1.015) rotate(-0.5deg); }
  70% { transform: scale(1.01) rotate(0.4deg); }
}
.fairy.blink .body img { filter: brightness(0.62) saturate(0.8); }
.fairy.hot { z-index: 30; }
.fairy.hot .body {
  animation: none !important;
  transform: scale(2.5);
  filter: drop-shadow(0 0 16px rgba(255, 214, 120, 0.9));
  transition: transform 0.28s ease;
}
.fairy .card {
  background: linear-gradient(180deg, #1b2742, #10182b) !important;
  color: #f6f1e6 !important;
  border: 1px solid rgba(228, 194, 122, 0.85) !important;
  border-radius: 16px !important;
  padding: 12px 12px 10px !important;
  min-width: 230px;
  text-align: left !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.fairy .card .name { font-family: Palatino, Georgia, serif; font-size: 16px !important; color: #fff !important; text-align: left; }
.fairy .card .meta { font-size: 12px; color: #d5deea; margin: 4px 0; }
.fairy .card .bar { height: 6px; background: #2a354c; border-radius: 99px; overflow: hidden; margin: 6px 0 8px; }
.fairy .card .bar span { display: block; height: 100%; background: linear-gradient(90deg, #7a5cff, #d4b0ff); }
.fairy .card button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(228, 194, 122, 0.45) !important;
  border-radius: 10px !important;
  color: #f6e4b4 !important;
}
.fairy.realm-hidden { display: none !important; }

.orbit-screen {
  position: absolute;
  width: 54px;
  height: 32px;
  margin: -16px 0 0 -27px;
  border-radius: 6px;
  background: linear-gradient(180deg, #16365f, #0c1c34);
  border: 1px solid #8fd4ff;
  box-shadow: 0 0 10px rgba(120, 200, 255, 0.45);
  color: #d7f1ff;
  font-size: 8px;
  line-height: 30px;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
.stone-wrap { position: absolute; z-index: 5; }

/* ---------- panels ---------- */
#sheet-dim.on, #sheet-dim { backdrop-filter: blur(5px); background: rgba(18, 28, 48, 0.28) !important; }
.sheet {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 2px solid #e0c27a !important;
  border-radius: 26px !important;
  box-shadow: 0 30px 80px rgba(8, 14, 28, 0.38) !important;
  width: min(1120px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 36px) !important;
}
.sheet::before, .sheet::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 78px;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(circle at 16px 18px, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 34px 12px, #f3c6ea 0 6px, transparent 7px),
    radial-gradient(circle at 18px 36px, #7ea35a 0 8px, transparent 9px),
    radial-gradient(circle at 40px 34px, #6f9450 0 7px, transparent 8px),
    linear-gradient(#4d7a3d, #4d7a3d) 28px 0 / 2px 70px no-repeat;
}
.sheet::before { left: -6px; top: -8px; }
.sheet::after { right: -6px; bottom: -8px; transform: rotate(180deg); }
.sheet h2, .sheet h3 { font-family: "Segoe UI", system-ui, sans-serif; color: #1a2340; }
.sheet .x, #sheet-x {
  background: #fff !important;
  color: #1a2340 !important;
  border: 1px solid #e0c27a !important;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.sheet input, .sheet select, .sheet textarea {
  background: #fff;
  border: 1px solid #ddd4c6;
  border-radius: 10px;
  color: var(--ink);
}
.sheet button.action, .sheet .tabs button.on {
  background: #241b4a !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 0 !important;
}
.realm-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; }
.realm-preview {
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 18px;
  padding: 12px;
}
.realm-preview img.hero {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  background: #d7e6f4;
}
.realm-steps { margin: 8px 0 0; padding: 0; list-style: none; }
.realm-steps li { display: flex; gap: 8px; margin: 8px 0; font-size: 13px; }
.styles { display: flex; gap: 8px; flex-wrap: wrap; }
.styles button {
  width: 64px;
  padding: 4px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #fff;
}
.styles button.on { border-color: #3d6b4e; }
.styles img { width: 100%; height: 54px; object-fit: cover; border-radius: 8px; display: block; }
.counter { float: right; color: #7a7368; font-size: 12px; }
@media (max-width: 860px) {
  .realm-split { grid-template-columns: 1fr; }
  #app .ql { width: calc(100vw - 16px); padding-right: 12px; }
  #account-slot { position: static; }
}

/* ---------- dashboard / inbox / connections inside the sky ---------- */
body.realm-page .frame {
  margin: 8px 16px 20px;
  background: rgba(247, 244, 236, 0.94);
  border-radius: 28px;
  border: 2px solid rgba(224, 194, 122, 0.9);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.18);
}
body.realm-page .welcome { margin: 0 0 8px; font-size: 28px; color: #1a2340; }
body.realm-page .welcome span { display: block; font-size: 15px; font-weight: 400; color: #5c6578; }
body.realm-page .tile, body.realm-page .card, body.realm-page .inner {
  background: #fff;
  border-radius: 18px;
}
body.realm-page .tile strong { font-size: 1.7rem; display: block; margin-top: 4px; }
body.realm-page.page-queens { color: #e8eef8; }
body.realm-page.page-queens .frame { background: rgba(12, 22, 48, 0.9); color: #e8eef8; border-color: #c9a35a; }
body.realm-page.page-queens h1, body.realm-page.page-queens h2, body.realm-page.page-queens p,
body.realm-page.page-queens .meta, body.realm-page.page-queens .card { color: #e8eef8; }
body.realm-page.page-queens .card { background: rgba(255,255,255,0.06); border-color: rgba(228,194,122,0.35); }
body.realm-page.page-queens button.ok { background: #1f8a4c; }
body.realm-page.page-queens button.bad { background: #a33b3b; }
.alert-layout { display: grid; grid-template-columns: 1.4fr 0.7fr; gap: 14px; }
.alert-card { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; background: #fff; border: 1px solid #eee6da; border-radius: 14px; padding: 12px; margin: 8px 0; color: #1c2438; }
.alert-card .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: #d4534a; }
.alert-card .dot.warn { background: #e2a63a; }
.alert-card .dot.info { background: #3d7ec9; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chips button { border-radius: 999px; border: 1px solid #e4dccb; background: #fff; padding: 6px 10px; }
.chips button.on { background: #1a2340; color: #fff; }
@media (max-width: 900px) { .alert-layout { grid-template-columns: 1fr; } }

#projects {
  background: rgba(247, 244, 236, 0.96) !important;
  color: var(--ink) !important;
  border-right: 1px solid rgba(224, 194, 122, 0.8);
}
#alert-badge:empty, #approval-badge:empty { display: none !important; }
#alert-badge.count, #approval-badge.count {
  display: inline-block;
  min-width: 16px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 99px;
  background: #d4534a;
  color: #fff !important;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0;
}
#realm-more { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#realm-more button {
  text-align: left;
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
}

/* Top bar exact match to mockup */
.menu-toggle {
  position: fixed;
  left: 12px;
  top: 14px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a3c62 0%, #141c30 100%);
  color: #f4efe4;
  border: 1px solid rgba(228, 194, 122, 0.7);
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(8, 12, 24, 0.35);
}
.menu-toggle:hover { background: #1e2d4d; }

#app .ql {
  width: min(920px, calc(100vw - 140px));
  padding: 8px 16px;
  border-radius: 0 0 28px 28px;
  gap: 4px;
}
#app .ql .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-weight: 600;
}
#app .ql .ico {
  flex-shrink: 0;
  opacity: 0.95;
}
#app .ql #account-btn {
  width: 42px;
  height: 42px;
  margin-left: 8px;
  border: 2px solid #e4c27a !important;
  box-shadow: 0 0 0 2px rgba(20, 28, 48, 0.6);
}
#app .ql #account-slot {
  margin-left: auto;
}

/* Active highlight on top bar */
#app .ql .nav-item.active,
#app .ql .nav-item[aria-current="page"] {
  background: rgba(228, 194, 122, 0.22) !important;
  color: #fff8e0 !important;
  box-shadow: inset 0 -2px 0 #e4c27a;
}
#app .ql .nav-item:hover {
  background: rgba(228, 194, 122, 0.12) !important;
}

/* Sidebar matching Alerts popup style: light, gold edge, greenery */
#projects {
  background: #f4f7fb !important;
  color: #1c2438 !important;
  border: 2px solid #e0c27a !important;
  border-left: 0 !important;
  border-radius: 0 20px 20px 0;
  box-shadow: 8px 0 30px rgba(8, 14, 28, 0.25);
  padding: 18px 16px 20px;
}
#projects::before, #projects::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 14px 16px, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 30px 10px, #f3c6ea 0 5px, transparent 6px),
    radial-gradient(circle at 16px 32px, #7ea35a 0 7px, transparent 8px),
    linear-gradient(#4d7a3d, #4d7a3d) 26px 0 / 2px 50px no-repeat;
}
#projects::before { left: -4px; top: -4px; }
#projects::after { right: -4px; bottom: -4px; transform: rotate(180deg); }
#projects h2 { font-family: "Segoe UI", system-ui, sans-serif; color: #1a2340; margin-top: 8px; }
#projects .muted { color: #5c6778; }
#projects-list article, #projects .proj-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
}
#realm-more button {
  background: #fff !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 10px !important;
  color: #1c2438 !important;
}

/* Minimap: real island plates + red fairy dots */
#minimap .mini-isle {
  position: absolute;
  height: auto;
  pointer-events: none;
  border-radius: 6px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  opacity: 0.92;
}
#minimap .fairy-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #e23b3b;
  box-shadow: 0 0 4px #ff6b6b;
  pointer-events: none;
  z-index: 3;
}
#minimap {
  background: rgba(8, 18, 36, 0.85) url("/world/fast/far-isle.webp") center / cover no-repeat !important;
}

/* Thinking Bot stays visible. Do not hide the toggle. */
#think-pop[hidden] { display: none !important; }
#think-pop.on, #thinking-dock.open #think-pop { display: block; }

/* ---------- pass: contrast, sidebar, think bot, active bar ---------- */
/* Contrast rule: light panels use #1a2340 text. The dark bar uses #f7f4ee. Never light text on a light panel. */
#app .ql,
#projects,
.sheet,
#account-pop,
#thinking-dock,
#opt-modal,
#name-pop {
  font-family: Manrope, "Segoe UI", sans-serif;
}
#app .ql a.nav-item,
#app .ql a.nav-item:visited,
#app .ql a.nav-item:hover,
#app .ql button.nav-item,
#app .ql button.nav-item:hover {
  color: #f7f4ee !important;
  background: transparent !important;
  text-decoration: none !important;
}
#app .ql .nav-item.active,
#app .ql a.nav-item.active,
#app .ql button.nav-item.active,
#app .ql .nav-item[aria-current="page"] {
  color: #fff !important;
  background: rgba(228, 194, 122, 0.28) !important;
  box-shadow: inset 0 -3px 0 #e4c27a !important;
  border-radius: 999px !important;
}
#app .ql { overflow: visible !important; }
#app .ql .ico { display: block; }

#account-pop[hidden] { display: none !important; }
#account-pop:not([hidden]) {
  display: block !important;
  background: #ffffff !important;
  color: #1a2340 !important;
  border: 2px solid #e0c27a !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.28) !important;
  z-index: 90;
  padding: 8px !important;
  min-width: 220px;
}
#app .ql #account-pop,
#app .ql #account-pop p,
#app .ql #account-pop button,
#app .ql #account-pop a {
  color: #1a2340 !important;
  background: transparent !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-align: left;
}
#app .ql #account-pop button {
  display: block;
  width: 100%;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}
#app .ql #account-pop button:hover {
  background: #f4f7fb !important;
  color: #1a2340 !important;
}
#account-name { color: #1a2340 !important; font-weight: 700; }

.menu-toggle {
  color: #f7f4ee !important;
  display: grid;
  place-items: center;
}
.menu-toggle .ico { width: 20px; height: 20px; }
.menu-toggle.active {
  background: #e4c27a !important;
  color: #1a2340 !important;
  border-color: #e4c27a !important;
}

#projects {
  position: fixed !important;
  top: 76px !important;
  left: 0 !important;
  right: auto !important;
  bottom: 12px !important;
  width: min(360px, 92vw) !important;
  height: auto !important;
  z-index: 70 !important;
  transform: translateX(-110%) !important;
  transition: transform .28s ease !important;
  overflow: auto !important;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%) !important;
  color: #1a2340 !important;
  border: 2px solid #e0c27a !important;
  border-left: 0 !important;
  border-radius: 0 22px 22px 0 !important;
  box-shadow: 14px 10px 40px rgba(8, 14, 28, 0.28) !important;
  padding: 54px 18px 64px 20px !important;
}
#projects.open { transform: translateX(0) !important; }
#projects::before, #projects::after,
.sheet::before, .sheet::after { content: none !important; display: none !important; background: none !important; }
#projects h2, #projects h3, .sheet h2, .sheet h3 {
  font-family: Manrope, "Segoe UI", sans-serif;
  color: #1a2340 !important;
  font-weight: 700;
}
#projects .muted, .sheet .muted, #account-pop .muted {
  color: #3e4a5e !important;
}
#projects p, #projects-list p, #recent-updates .proj-card, #realm-more button {
  position: relative;
  z-index: 2;
  background: #fff !important;
  color: #1a2340 !important;
  border: 1px solid #e3eaf3 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(20, 32, 56, 0.06);
  padding: 10px 12px !important;
  margin: 8px 0 !important;
}
#projects button.linkish, #projects .linkish {
  color: #1a2340 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: none !important;
}
#projects button.action {
  background: #1a2340 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
}
.greenery {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: min(190px, 52%);
  height: auto;
  user-select: none;
}
.greenery.tl { top: -4px; left: -6px; }
.greenery.tr { top: -4px; right: -6px; }
.greenery.bl { bottom: -6px; left: -8px; }
.greenery.br { bottom: -6px; right: -8px; }
.sheet { position: fixed; }
.sheet > .greenery { width: min(160px, 28%); }

#realm-badge { display: none !important; }
#think-toggle {
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("/world/fast/think-bot.webp") center / cover no-repeat !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
  color: transparent !important;
  font-size: 0 !important;
}
#thinking-dock {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 80;
  width: 110px;
  color: #1a2340;
}
#thinking-dock .bubble {
  position: absolute;
  left: 0;
  bottom: 108px;
  width: 230px;
  background: #fff !important;
  color: #1a2340 !important;
  border: 2px solid #e0c27a !important;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.22);
  font: 600 13px/1.4 Manrope, "Segoe UI", sans-serif;
}
#think-pop { position: absolute; left: 108px; bottom: 0; width: min(340px, calc(100vw - 140px)); }
#think-pop[hidden] { display: none !important; }
#think-pop.on, #thinking-dock.open #think-pop { display: block !important; }
#think-pop .panel, #opt-modal .card, #name-pop .card {
  position: relative;
  background: #fff !important;
  color: #1a2340 !important;
  border: 2px solid #e0c27a !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.22) !important;
  overflow: hidden;
}
#opt-modal, #opt-modal p, #opt-modal li, #opt-modal h2, #opt-modal h3, #opt-modal pre,
#think-pop, #think-pop h2, #think-pop p, #think-pop textarea {
  color: #1a2340 !important;
}
#opt-modal pre, #think-pop textarea {
  background: #f7f9fc !important;
  border: 1px solid #e3eaf3 !important;
}

/* Overview panel — match the reference. Greenery hangs past the frame and must not cover type. */
.menu-toggle {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #f3d56a 0%, #e2b23a 100%) !important;
  color: #4a3510 !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(180, 130, 30, 0.35) !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 120 !important;
}
.menu-toggle.active {
  background: linear-gradient(180deg, #ffe08a 0%, #e2b23a 100%) !important;
  color: #3a2a08 !important;
}
#app .ql {
  width: min(980px, calc(100vw - 230px)) !important;
  padding-right: 64px !important;
}
.new-command {
  position: fixed;
  top: 8px;
  right: 16px;
  z-index: 41;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 54px;
  padding: 0 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2a3c62 0%, #141c30 100%);
  color: #f7f4ee !important;
  border: 1px solid rgba(228, 194, 122, 0.7);
  box-shadow: 0 14px 34px rgba(8, 12, 24, 0.35);
  font: 600 13.5px/1 Manrope, "Segoe UI", sans-serif;
}
.new-command .ico { width: 16px; height: 16px; }
.nav-drop { position: relative; display: inline-flex; }
#fairies-pop, #account-pop:not([hidden]) {
  background: #f7f8fc !important;
  color: #1a2340 !important;
}
#fairies-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  min-width: 220px;
  padding: 8px;
  border: 2px solid #e0c27a;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.22);
}
#fairies-pop[hidden] { display: none !important; }
#fairies-pop button {
  display: block;
  width: 100%;
  text-align: left;
  background: #f7f8fc !important;
  color: #1a2340 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font: 600 13px/1.3 Manrope, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}
#fairies-pop button:hover { background: #eef1f8 !important; }
#app .ql #account-pop:not([hidden]) { background: #f7f8fc !important; }

#projects {
  top: 84px !important;
  left: 18px !important;
  bottom: 18px !important;
  width: min(440px, calc(100vw - 36px)) !important;
  height: auto !important;
  z-index: 110 !important;
  overflow: visible !important;
  background: #fff !important;
  border: 2px solid #e4c56a !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 50px rgba(30, 40, 70, 0.18) !important;
  padding: 0 !important;
}
#projects.open { transform: translateX(0) !important; }
#projects .overview-scroll {
  position: relative;
  z-index: 2;
  height: 100%;
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: 22px 22px 72px 24px;
  border-radius: 26px;
}
#projects .overview-title {
  margin: 4px 48px 14px 6px;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: #1c2744 !important;
}
#projects .overview-collapse {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff !important;
  color: #1a2340 !important;
  border: 1px solid #e6eaf2 !important;
  box-shadow: 0 4px 10px rgba(20, 30, 50, 0.08);
  font-size: 22px;
  line-height: 30px;
}
#projects .stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
#projects .stat {
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 16px;
  padding: 10px 8px;
  border: 1px solid transparent;
  background: #fff;
}
#projects .stat strong {
  display: block;
  font: 700 22px/1 Manrope, "Segoe UI", sans-serif;
  color: #1c2744;
}
#projects .stat span { font: 600 11px/1.15 Manrope, "Segoe UI", sans-serif; color: #5c6b80; }
#projects .stat-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
#projects .stat.green { background: #f3faf4; border-color: #d7efdc; }
#projects .stat.green .stat-ico { background: #e5f6ea; }
#projects .stat.gold { background: #fbf8ee; border-color: #f0e4bf; }
#projects .stat.gold .stat-ico { background: #f8efd2; }
#projects .stat.purple { background: #f7f3fb; border-color: #eadff3; }
#projects .stat.purple .stat-ico { background: #f0e8f8; }
#projects .ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 8px 10px;
}
#projects .ornament::before, #projects .ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e7d7a4, transparent);
}
#projects .ornament::after { background: linear-gradient(90deg, #e7d7a4, transparent); }
#projects .ov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 2px 8px;
}
#projects .ov-head h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 28px;
  font-weight: 600;
  color: #1c2744 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
#projects .ov-head button, #project-count {
  background: transparent !important;
  border: 0 !important;
  color: #5b6fd6 !important;
  font: 600 13px/1 Manrope, "Segoe UI", sans-serif;
  padding: 0 !important;
  box-shadow: none !important;
}
#projects .mark {
  width: 16px;
  height: 16px;
  display: inline-block;
  background: #e4c56a;
  border-radius: 3px;
}
#projects .mark.leaf { clip-path: polygon(50% 0, 100% 70%, 50% 100%, 0 70%); }
#projects .mark.crown { clip-path: polygon(0 80%, 15% 30%, 35% 55%, 50% 10%, 65% 55%, 85% 30%, 100% 80%); }
#projects .mark.gem { clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); background: #6aa4e8; }
#projects .ov-row, #projects .ov-approve {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr auto 14px;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 8px 0;
  padding: 10px 12px;
  text-align: left;
  background: #fff !important;
  color: #1a2340 !important;
  border: 1px solid #efe8da !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(40, 50, 70, 0.05);
}
#projects .ov-approve { grid-template-columns: 1fr auto; }
#projects .ov-copy { display: flex; flex-direction: column; min-width: 0; }
#projects .ov-copy strong { font: 700 14px/1.2 Manrope, "Segoe UI", sans-serif; color: #1c2744; }
#projects .ov-copy em { font: 500 12px/1.3 Manrope, "Segoe UI", sans-serif; color: #6b7788; font-style: normal; }
#projects .ov-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#projects .ov-meta time { font: 500 11px/1 "DM Mono", ui-monospace, monospace; color: #8b95a5; }
#projects .chev { color: #b0b8c4; font-size: 18px; }
#projects .ov-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
#projects .ov-ico.i0 { background: #e7f1fb; }
#projects .ov-ico.i1 { background: #eef2f8; }
#projects .ov-ico.i2 { background: #f3eaf8; }
#projects .ov-ico.i3 { background: #fdeef3; }
#projects .pill {
  border-radius: 999px;
  padding: 3px 8px;
  font: 700 11px/1.2 Manrope, "Segoe UI", sans-serif;
  white-space: nowrap;
}
#projects .pill.ready { background: #e5f6ea; color: #1f8a45; }
#projects .pill.scheduled { background: #fff4d6; color: #b47b00; }
#projects .pill.updated { background: #e7f1fb; color: #2a6fbf; }
#projects .pill.awaiting { background: #fde8ef; color: #c43b6e; }
#projects .pill.hold { background: #eee; color: #5c6570; }
#projects .pill.progress { background: #fff1d6; color: #c47d12; }
#projects .review-btn {
  background: linear-gradient(180deg, #f6d56a, #e2b033) !important;
  color: #3a2a08 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font: 700 13px/1 Manrope, "Segoe UI", sans-serif !important;
  box-shadow: 0 2px 0 #d4a24a;
}
#projects .ov-empty { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #5c6b80 !important; }
#projects .ov-add { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#projects #add-industry, #projects .ov-add .action {
  background: #f7f8fc !important;
  color: #1a2340 !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 12px !important;
}
#projects .greenery {
  z-index: 4;
  width: 210px;
  max-width: none;
}
#projects .greenery.tl { top: -34px; left: -28px; }
#projects .greenery.br { bottom: -36px; right: -30px; }
.sheet { overflow: visible !important; }
.sheet > .greenery { width: 180px; z-index: 6; }
.sheet > .greenery.tr { top: -30px; right: -26px; }
.sheet > .greenery.bl { bottom: -32px; left: -26px; }
#sheet-body { position: relative; z-index: 2; padding-top: 12px; }
#zoom-reset::after { content: none !important; }
#zoom-reset svg { width: 18px; height: 18px; display: block; }
#thinking-dock { z-index: 60; }
#thinking-dock .bubble { padding-right: 28px; z-index: 2; }
#thinking-dock .bubble-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #e0c27a !important;
  background: #f7f8fc !important;
  color: #1a2340 !important;
  font-size: 14px;
  line-height: 18px;
  padding: 0 !important;
}
#think-pop .panel { overflow: visible !important; padding-top: 28px !important; }
#think-pop .greenery { width: 120px; }
#think-pop .greenery.tr { top: -26px; right: -22px; }
#think-pop .greenery.bl { bottom: -26px; left: -20px; }
#projects .ov-row.proj { grid-template-columns: 1fr auto 14px; }
#projects .ov-ico { display: grid; place-items: center; font-size: 16px; }
#projects .ov-ico.i0::before { content: "◆"; color: #3d7ec9; }
#projects .ov-ico.i1::before { content: "▤"; color: #607089; }
#projects .ov-ico.i2::before { content: "📘"; }
#projects .ov-ico.i3::before { content: "♛"; color: #d45b8c; }

/* Top bar and its menus sit above every panel. Dropdowns open on hover. */
#app, .menu-toggle, .new-command {
  z-index: 1000 !important;
}
#app .ql, #account-slot, #fairies-slot {
  overflow: visible !important;
  z-index: 1000 !important;
}
.nav-extra, #app .ql .nav-extra, #app .ql button.nav-extra, #app .ql a.nav-extra {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
#account-pop, #fairies-pop {
  display: none !important;
  background: #f7f8fc !important;
  color: #1a263e !important;
  z-index: 1001 !important;
  border: 2px solid #e0c27a !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.22) !important;
}
#account-slot:hover #account-pop,
#account-slot:focus-within #account-pop,
#fairies-slot:hover #fairies-pop,
#fairies-slot:focus-within #fairies-pop {
  display: block !important;
}
#account-pop button, #account-pop a, #fairies-pop button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  color: #1a263e !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
}
#account-pop button:hover, #account-pop a:hover, #fairies-pop button:hover {
  background: #fff !important;
  color: #1a263e !important;
  border-radius: 10px !important;
}


/* Final menu layer. These rules are last so they win. */
#app { z-index: auto !important; }
#thinking-dock {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  left: 14px !important;
  bottom: 14px !important;
  width: 110px !important;
  z-index: 70 !important;
}
#think-toggle {
  display: block !important;
  visibility: visible !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: #1a2340 url("/world/fast/think-bot.webp") center / cover no-repeat !important;
}
#app .ql, .menu-toggle, .new-command { z-index: 2000 !important; }
#app .ql { overflow: visible !important; }
.nav-extra, #app .ql button.nav-extra, #app .ql a.nav-extra { display: none !important; }

#app .ql #account-pop,
#app .ql #account-pop:not([hidden]),
#app .ql #account-pop[hidden],
#app .ql #fairies-pop,
#app .ql #fairies-pop:not([hidden]),
#app .ql #fairies-pop[hidden] {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  margin: 0 !important;
  padding: 10px 8px 8px !important;
  background: #f7f8fc !important;
  color: #1a263e !important;
  border: 2px solid #e0c27a !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.22) !important;
  z-index: 2001 !important;
}
#app .ql #account-slot { position: absolute !important; }
#app .ql #fairies-slot { position: relative !important; }
#app .ql #account-slot:hover #account-pop,
#app .ql #account-slot:focus-within #account-pop,
#app .ql #fairies-slot:hover #fairies-pop,
#app .ql #fairies-slot:focus-within #fairies-pop {
  display: block !important;
}
#app .ql #account-pop button,
#app .ql #account-pop a,
#app .ql #account-pop p,
#app .ql #fairies-pop button {
  color: #1a263e !important;
  background: transparent !important;
  border-radius: 10px !important;
}
#app .ql #account-pop button:hover,
#app .ql #account-pop a:hover,
#app .ql #fairies-slot:hover #fairies-pop button:hover,
#app .ql #account-slot:hover #account-pop button:hover,
#app .ql #fairies-pop button:hover {
  background: #ffffff !important;
  color: #1a263e !important;
  border-radius: 10px !important;
}

/* Island nameplates, diamonds, and monitors. Menu rules above stay as they are. */
.isle-name, .isle-plaque .status, .falls, .mist, .vine, .orbit-screen { display: none !important; }
.isle-plaque {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 8;
}
.isle-plaque .nameplate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  background: linear-gradient(180deg, #24365e, #141c33);
  border: 1px solid rgba(228, 194, 122, 0.9);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.isle-plaque .label {
  color: #f7f4ee !important;
  font: 700 15px/1 Manrope, "Segoe UI", sans-serif;
  white-space: nowrap;
}
.isle-plaque .plus {
  width: 30px;
  height: 30px;
  border-radius: 50% !important;
  border: 2px solid #e4c27a !important;
  background: #10182c !important;
  color: #fff !important;
  font: 700 20px/26px Manrope, sans-serif !important;
  padding: 0 !important;
}
.isle-plaque .mark { width: 14px; height: 14px; border-radius: 3px; background: #e4c27a; display: inline-block; }
.stone-wrap { z-index: 8 !important; }
.monitors {
  position: absolute;
  left: 50%;
  top: 0;
  width: 126px;
  height: 62px;
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  background: url("/world/fast/project-monitors.webp") center / contain no-repeat;
  cursor: pointer;
}
.rock {
  background: url("/world/fast/project-stone.webp") center bottom / contain no-repeat !important;
  box-shadow: none !important;
  border: 0 !important;
  width: 78px !important;
  height: 140px !important;
}
.rock .face { display: none !important; }

/* Island titles sit on the cliff, bright, and the sky is the map itself. */
.isle-plaque .plus, .isle-plaque .status { display: none !important; }
.isle-plaque {
  top: auto !important;
  bottom: 16% !important;
  z-index: 7 !important;
}
.isle-plaque .label {
  font-size: 28px !important;
  color: #fff !important;
  text-shadow: 0 2px 6px #000, 0 0 14px rgba(255, 244, 210, 0.85) !important;
}
.fairy.blink .body img { filter: none !important; }
.fairy.posing .body img.pose { opacity: 0 !important; }
.fairy.posing .body img.normal { opacity: 1 !important; }
.rock { animation: none !important; }
.stone-wrap { z-index: 8 !important; }
.stone-wrap .monitors {
  width: 50px !important;
  height: 22px !important;
  left: 4px !important;
  top: auto !important;
  bottom: 54px !important;
  transform: none !important;
  z-index: 3 !important;
  background: url("/world/fast/project-monitors.webp") center / contain no-repeat !important;
}
.stone-wrap .rock {
  width: 44px !important;
  height: 78px !important;
  left: 7px !important;
  bottom: 0 !important;
  z-index: 1 !important;
  animation: none !important;
  transform: none !important;
  background: url("/world/fast/project-stone.webp") center bottom / contain no-repeat !important;
}
.fairy.queen {
  left: 50% !important;
  top: 8% !important;
  width: 300px !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
}
.fairy.queen .bob,
.fairy.queen .body { animation: none !important; }
.fairy.lady { z-index: 8 !important; }
.fairy.queen.hot { z-index: 3 !important; }
.fairy.queen.hot .body,
.fairy.queen:hover .body {
  transform: none !important;
  animation: none !important;
  filter: none !important;
}
.stone-wrap .tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  padding: 4px 10px;
  color: #fff !important;
  font: 600 12px/1.2 Manrope, sans-serif;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.45)) !important;
  border-radius: 8px;
  z-index: 9;
  pointer-events: none;
}
.stone-wrap:hover .tip, .stone-wrap:focus-within .tip { display: block; }
#minimap { background: #071018 url("/world/fast/world-sky.webp") center / cover no-repeat !important; }

.isle-plaque .mark { display: none !important; }
.isle-plaque .nameplate {
  padding: 12px 26px !important;
  gap: 0 !important;
}
.stone-wrap { position: absolute; z-index: 8 !important; }
.stone-wrap .rock {
  width: 62% !important;
  height: 76% !important;
  left: 19% !important;
  bottom: 0 !important;
  z-index: 1 !important;
  animation: none !important;
  transform: none !important;
  background: url("/world/fast/project-stone.webp") center bottom / contain no-repeat !important;
}
.stone-wrap .monitors {
  width: 96% !important;
  height: 30% !important;
  left: 2% !important;
  top: auto !important;
  bottom: 52% !important;
  transform: none !important;
  z-index: 3 !important;
  background: url("/world/fast/project-monitors.webp") center / contain no-repeat !important;
}
.stone-wrap .tip,
.stone-wrap .tip a,
.rock .tip {
  color: #ffffff !important;
  text-decoration: none !important;
  bottom: 78% !important;
  padding: 2px 8px !important;
}
.fairy { width: 30px !important; }
.fairy.lady { width: 92px !important; }
.fairy.queen { width: 300px !important; }
.fairy .body { position: relative; isolation: isolate; }
.fairy .body img { position: relative; z-index: 2; }
.fairy.lady .body::before,
.fairy.queen .body::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 55%;
  width: 140%;
  height: 90%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fairy.lady .body::before {
  background:
    radial-gradient(circle at 30% 40%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 68% 32%, #ffe7a4 0 3px, transparent 4px),
    radial-gradient(circle at 48% 68%, #fff 0 2px, transparent 4px),
    radial-gradient(circle, rgba(255, 220, 140, 0.85), transparent 68%);
}
.fairy.queen .body::before {
  background: radial-gradient(circle, rgba(255, 226, 160, 0.35), transparent 68%);
}
.fairy.queen.hot .body,
.fairy.queen:hover .body,
.fairy.queen.hot .body::after,
.fairy.queen:hover .body::after {
  filter: none !important;
}
.fairy.queen.hot .body::after,
.fairy.queen:hover .body::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.fairy.queen.hot .body::before,
.fairy.queen:hover .body::before {
  background: radial-gradient(circle, rgba(255, 248, 214, 1) 0%, rgba(255, 190, 60, 0.85) 28%, transparent 70%);
}
.fairy .card {
  top: 86% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
}
#app .ql a.nav-item:hover,
#app .ql button.nav-item:hover {
  color: #fff8e8 !important;
  background: rgba(228, 194, 122, 0.34) !important;
  border-radius: 999px !important;
}
#world .stone-wrap > .tip,
#world .island .stone-wrap .tip,
.stone-wrap .tip {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px #000 !important;
}
#minimap .fairy-dot.queen {
  background: #ff8a14 !important;
  box-shadow: 0 0 5px #ffb15a !important;
}

.island canvas.plate-flow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
/* Studio sheets: Add a Fairy, Connect a Bot, View All Fairies */
.sheet.studio {
  width: min(1140px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 84px) !important;
  top: 70px !important;
  transform: translateX(-50%) !important;
  padding: 22px 26px 16px !important;
  border-radius: 28px !important;
  border: 1.5px solid #e6d09a !important;
  background-color: #fbf7f1 !important;
  background-image:
    url("/world/vine-tl.png"),
    url("/world/vine-tr.png"),
    url("/world/vine-bl.png"),
    url("/world/vine-br.png") !important;
  background-repeat: no-repeat !important;
  background-position: left -4px top -6px, right -4px top -6px, left -8px bottom -10px, right -8px bottom -10px !important;
  background-size: 168px auto, 168px auto, 176px auto, 176px auto !important;
  color: #1c2440 !important;
}
.sheet.studio::before,
.sheet.studio::after { display: none !important; }
body:has(.sheet.studio.on) #sheet-dim { top: 58px; }
.sheet.studio #sheet-x {
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 6;
  float: none;
  width: 36px;
  height: 36px;
  font-size: 0 !important;
  background: #fff !important;
  border: 1px solid #e6d09a !important;
}
.sheet.studio #sheet-x::before {
  content: "×";
  font-size: 22px;
  line-height: 32px;
  color: #1c2440;
}
.studio { position: relative; color: #1c2440; font-family: Manrope, "Source Sans 3", sans-serif; padding: 18px 8px 0; }
.studio h2 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 40px;
  line-height: 1;
  font-weight: 600;
  margin: 0 0 6px;
  color: #1b2444 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.studio h2 .ico { width: 28px; height: 28px; color: #c9a15b; }
.studio h3, .studio h4 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: #1b2444 !important;
  margin: 0 0 6px;
}
.studio .sub { color: #3d4862; margin: 0 0 14px; font-size: 14.5px; line-height: 1.4; }
.studio .sub.tight { margin: 0 0 8px; }
.studio-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 22px; align-items: start; }
.studio-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-right: 46px; }
.secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e5f6ea;
  color: #146b38;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.secure .ico { width: 14px; height: 14px; }
.studio label.fld {
  display: block;
  margin: 0 0 12px;
  color: #1c2440;
  font-weight: 700;
  font-size: 14px;
}
.studio label.fld:has(> .ico) {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 6px;
  align-items: center;
}
.studio label.fld > .ico { width: 16px; height: 16px; color: #243056; }
.studio label.fld:has(> .ico) > .ico { grid-column: 1; grid-row: 1; }
.studio label.fld > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.studio label.fld:has(> .ico) > span:not(.help):not(.with-add) { grid-column: 2; grid-row: 1; margin: 0; }
.studio label.fld:has(> .ico) > .with-add { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
.studio label.fld:has(> .ico) > .help { grid-column: 1 / -1; grid-row: 3; }
.studio label.fld:has(> .ico) > :not(.ico):not(span) { grid-column: 1 / -1; }
.studio label.fld > .help {
  display: block;
  grid-column: 1 / -1;
  margin-top: 4px;
  font-weight: 500;
  color: #3e4960;
  font-size: 12px;
}
.studio .count { font-style: normal; font-weight: 600; color: #5c564c; font-size: 12px; }
.studio .req { color: #9d2430; margin-left: 2px; }
.studio input, .studio select, .studio textarea {
  width: 100%;
  border: 1px solid #e3d7c6 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #1c2440 !important;
  padding: 11px 12px !important;
  font: 500 15px/1.4 Manrope, "Source Sans 3", sans-serif !important;
}
.studio textarea { min-height: 78px; resize: vertical; }
.studio input::placeholder, .studio textarea::placeholder { color: #7b7468; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.with-add { display: flex; gap: 8px; align-items: center; }
.with-add select { flex: 1; width: auto !important; }
.studio button.addcat {
  flex: none;
  width: auto;
  height: 44px;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid #e3d7c6 !important;
  background: #fff !important;
  color: #1c2440 !important;
  font-weight: 700;
  white-space: nowrap;
}
.looks { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.studio button.look {
  width: 78px;
  flex: none;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 2px solid transparent !important;
  background: transparent !important;
  color: #1c2440 !important;
  position: relative;
}
.studio button.look img {
  width: 74px;
  height: 86px;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 12px;
  display: block;
  background: #efe4f6;
}
.studio button.look span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; text-align: center; }
.studio button.look.on { border-color: #2f6bff !important; }
.studio button.look .tick {
  display: none;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2f6bff;
}
.studio button.look .tick::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.studio button.look.on .tick { display: block; }
.preview-card {
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(48, 36, 12, 0.06);
}
.preview-card .hero {
  width: 100%;
  height: 290px;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  background: #d5e3f4;
}
.preview-card .pad { padding: 8px 16px 16px; position: relative; }
.studio button.edit-pen {
  position: absolute;
  right: 14px;
  top: -18px;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #eadfce !important;
  color: #243056 !important;
  padding: 0 !important;
}
.studio button.edit-pen .ico { width: 15px; height: 15px; }
.lv {
  float: right;
  background: #f6edd8;
  color: #5c481c;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
}
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef1f8;
  color: #243056;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
}
.preview-card .blurb, .studio .ready p { color: #243049; font-size: 14px; line-height: 1.45; }
.preview-card h4 { font-family: Manrope, "Source Sans 3", sans-serif !important; font-size: 15px; margin: 12px 0 4px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 10px; margin: 10px 0; color: #243049; font-size: 13.5px; font-weight: 500; }
.steps b { display: block; color: #1c2440; }
.num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e7eeff;
  color: #2446b0;
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 800;
  font-style: normal;
}
.scene {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 220px;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  background: #16304a url("/world/the-queens-chambers.png") center/cover;
  color: #fff;
}
.scene-fairy { width: 100%; height: 240px; object-fit: cover; object-position: center 12%; }
.scene-copy {
  padding: 14px 14px 16px;
  background: linear-gradient(90deg, rgba(10, 18, 36, 0.15), rgba(8, 14, 30, 0.78));
}
.scene .eyebrow { font-size: 12px; letter-spacing: 0.04em; color: #f4efe4; }
.scene h3 { color: #fff !important; font-size: 32px; margin: 6px 0; }
.name-pill {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 4px 10px;
  color: #fff;
  font-weight: 700;
}
.meta-line { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #fff; font-size: 14px; font-weight: 650; }
.meta-line .ico { width: 14px; height: 14px; }
.cat-pill { background: #5b46c5; border-radius: 999px; padding: 3px 10px; font-weight: 700; }
.pick-title { margin: 14px 0 2px !important; font-size: 26px !important; }
.foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 8px;
}
.studio.connect .foot { justify-content: space-between; }
.foot-btns { display: flex; gap: 10px; }
.studio button.cancel {
  background: #fff !important;
  color: #1c2440 !important;
  border: 1px solid #ddd2c2 !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 700;
}
.studio button.go {
  background: #1b173f !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-weight: 700;
}
.studio button.go:disabled { opacity: 0.6; }
.form-msg { min-height: 1.2em; color: #8d2430; font-weight: 700; margin: 4px 0; }
.stepper { display: flex; align-items: flex-start; }
.stepper .step {
  width: 86px;
  text-align: center;
  font-size: 12px;
  color: #4d5770;
  font-weight: 650;
  position: relative;
}
.stepper .step i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 auto 4px;
  border-radius: 50%;
  border: 2px solid #cfd6e4;
  background: #fff;
  color: #4d5770;
  font-style: normal;
  font-weight: 800;
}
.stepper .step.on { color: #1c2440; }
.stepper .step.on i { background: #2f6bff; border-color: #2f6bff; color: #fff; }
.stepper .step::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 62%;
  width: 62%;
  height: 2px;
  background: #d5dce8;
}
.stepper .step:last-child::after { display: none; }
.directory .dir-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; }
.dir-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.directory .dir-tools input { width: 230px !important; border-radius: 999px !important; }
.chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.studio .chips button {
  border-radius: 999px !important;
  border: 1px solid #e3d7c6 !important;
  background: #fff !important;
  color: #1c2440 !important;
  padding: 8px 14px !important;
  font-weight: 700;
}
.studio .chips button.on { background: #2a2658 !important; color: #fff !important; border-color: #2a2658 !important; }
.directory .chips select { width: auto !important; border-radius: 999px !important; padding: 8px 12px !important; }
.studio h3.sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-family: Manrope, "Source Sans 3", sans-serif !important;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1c2440 !important;
  font-weight: 800;
}
.studio h3.sec .ico { width: 16px; height: 16px; color: #b8893d; }
.studio h3.sec::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #e4c98a, transparent);
}
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.one { grid-template-columns: 1fr; }
.dir-split { display: grid; grid-template-columns: 0.9fr 1.2fr; gap: 18px; align-items: start; }
.studio button.fcard {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: #fff !important;
  border: 1px solid #eadfce !important;
  border-radius: 16px !important;
  padding: 10px !important;
  color: #1c2440 !important;
}
.studio button.fcard img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 14%;
  border: 2px solid #f0e2c0;
  flex: none;
  background: #efe6f6;
}
.studio button.fcard strong { display: block; font-size: 15px; }
.studio button.fcard em { display: block; font-style: normal; color: #3e4860; font-size: 12px; font-weight: 650; }
.pills { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.lvl, .st {
  font-style: normal;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}
.lvl { background: #f6edd8; color: #5c481c; }
.st.on { background: #e5f6ea; color: #146b38; }
.st.off { background: #f0ebe3; color: #5c564c; }
.studio button.fcard.banner {
  display: grid;
  grid-template-columns: 132px 1fr;
  min-height: 176px;
  align-items: center;
  padding: 16px !important;
  background:
    linear-gradient(90deg, rgba(251, 247, 241, 0.96) 0%, rgba(251, 247, 241, 0.88) 38%, rgba(251, 247, 241, 0.15) 72%),
    url("/world/the-queens-chambers.png") center/cover !important;
}
.studio button.fcard.banner img { width: 112px; height: 112px; border-width: 3px; }
.studio button.fcard.banner strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
}
.studio button.fcard.banner .blurb { display: block; margin-top: 4px; color: #243049; font-size: 14px; max-width: 460px; }
.quiet { opacity: 1; }
@media (max-width: 900px) {
  .studio-grid, .studio-grid.connect, .dir-split, .scene, .pair, .cards, .cards.three, .cards.two { grid-template-columns: 1fr !important; }
  .directory .dir-head, .studio.connect .foot, .studio-top { display: block; }
  .studio h2 { font-size: 32px; }
  .sheet.studio { top: 62px !important; padding: 16px 14px !important; }
  .secure { margin: 8px 0; }
}

/* Keep every open sheet above the map, the sky, and the top bar. */
body:has(.sheet.on) #sheet-dim {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 7900 !important;
}
.sheet.on {
  display: block !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 78px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 8000 !important;
  width: min(1120px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 96px) !important;
  overflow: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #fbf7f1 !important;
  color: #1c2440 !important;
}
#app .ql #fairies-slot.menu-open #fairies-pop {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Popups: Poppins, edge greenery only, full-body picks, gold actions. */
.sheet,
.sheet h2, .sheet h3, .sheet h4, .sheet p, .sheet label, .sheet button, .sheet input, .sheet select, .sheet textarea,
.studio, .studio h2, .studio h3, .studio h4, .studio p, .studio label, .studio button, .studio input, .studio select, .studio textarea,
#think-pop, #think-pop h2, #think-pop p, #think-pop textarea, #think-pop button,
#opt-modal, #opt-modal h2, #opt-modal h3, #opt-modal p, #opt-modal button, #opt-modal pre, #opt-modal li,
#name-pop, #name-pop h2, #name-pop p, #name-pop button,
#account-pop, #account-pop p, #account-pop button {
  font-family: "Poppins", "Inter", sans-serif !important;
}
button.opt-btn { display: none !important; }
.sheet.studio {
  background-image: none !important;
  overflow: visible !important;
}
.sheet.studio #sheet-body {
  position: relative;
  z-index: 2;
  max-height: calc(100vh - 156px);
  overflow: auto;
}
.sheet.studio > .greenery {
  z-index: 3 !important;
  width: 210px !important;
  max-width: none;
  pointer-events: none;
}
.sheet.studio > .greenery.tl { top: -36px !important; left: -30px !important; right: auto !important; bottom: auto !important; }
.sheet.studio > .greenery.tr { top: -36px !important; right: -30px !important; left: auto !important; bottom: auto !important; }
.sheet.studio > .greenery.bl { bottom: -38px !important; left: -32px !important; right: auto !important; top: auto !important; }
.sheet.studio > .greenery.br { bottom: -38px !important; right: -32px !important; left: auto !important; top: auto !important; }
.sheet.studio #sheet-x {
  z-index: 80 !important;
  position: absolute !important;
  right: 14px !important;
  top: 12px !important;
}
.studio-grid, .studio-grid.connect { grid-template-columns: 1fr 1fr !important; gap: 22px; }
.studio input::placeholder, .studio textarea::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio label.fld > .help { white-space: nowrap; }
.studio button.look { width: 86px; }
.studio button.look img {
  width: 82px;
  height: 136px;
  object-fit: contain;
  object-position: center bottom;
  background: linear-gradient(180deg, #e7eef8, #f6f1e8);
}
.preview-card .hero {
  height: 380px;
  object-fit: contain;
  object-position: center bottom;
  background: linear-gradient(180deg, #d5e4f6, #f7f3ea);
}
.scene {
  grid-template-columns: 150px minmax(0, 1fr) 78px;
  align-items: stretch;
  min-height: 280px;
}
.scene-fairy {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: contain;
  object-position: center bottom;
}
.scene-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  align-self: center;
  margin-right: 12px;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.next-card {
  margin-top: 14px;
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 18px;
  padding: 12px 14px 4px;
}
.studio button.go {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #ffe08a 0%, #f0b429 52%, #e09a1a 100%) !important;
  color: #3a2a08 !important;
  border: 1px solid #e7c56a !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 0 #c48a16, 0 8px 16px rgba(160, 110, 20, 0.22) !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
}
.studio button.go .ico { width: 16px; height: 16px; color: #3a2a08; }
.studio button.fcard { align-items: center; }
.studio button.fcard img,
.studio button.fcard.banner img {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px;
  min-height: 96px;
  border-radius: 12px !important;
  object-fit: cover;
  object-position: center 14%;
}
.studio button.fcard.banner {
  grid-template-columns: 120px 1fr;
  background:
    linear-gradient(90deg, rgba(251, 247, 241, 0.99) 0%, rgba(251, 247, 241, 0.98) 48%, rgba(251, 247, 241, 0.92) 70%, rgba(251, 247, 241, 0.45) 88%, rgba(251, 247, 241, 0.08) 100%),
    url("/world/the-queens-chambers.png") right center / cover !important;
}
.studio button.fcard.banner img { object-position: center center; }
@media (max-width: 900px) {
  .studio-grid, .studio-grid.connect { grid-template-columns: 1fr !important; }
  .studio label.fld > .help { white-space: normal; }
}

/* Clock beside New Command */
#command-cluster {
  position: fixed !important;
  top: 8px !important;
  right: 16px !important;
  z-index: 2000 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
#command-cluster .new-command {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: none;
}
#realm-clock { position: relative; flex: none; }
#realm-clock-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  min-width: 196px;
  height: 54px;
  padding: 4px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2a3c62 0%, #141c30 100%);
  color: #f7f4ee !important;
  border: 1px solid rgba(228, 194, 122, 0.7);
  box-shadow: 0 14px 34px rgba(8, 12, 24, 0.35);
  font-family: Manrope, "Poppins", "Segoe UI", sans-serif;
  cursor: pointer;
  text-align: right;
}
#realm-clock-btn .clock-date { font-size: 11px; line-height: 1.15; color: #f4e7c4; font-weight: 600; }
#realm-clock-btn .clock-time { font-size: 14px; line-height: 1.15; color: #ffffff; font-weight: 700; font-variant-numeric: tabular-nums; }
#realm-clock-btn .clock-zone { font-size: 11px; line-height: 1.15; color: #f7f4ee; font-weight: 600; }
#realm-clock-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(440px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  background: #f7f8fc;
  color: #1a2340;
  border: 2px solid #e0c27a;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.28);
  padding: 6px;
  z-index: 5;
}
#realm-clock-pop[hidden] { display: none !important; }
#realm-clock-pop .tz-head {
  position: sticky;
  top: 0;
  background: #f7f8fc;
  color: #5c481c;
  font: 700 11px/1.2 Manrope, "Poppins", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 8px 4px;
}
#realm-clock-pop button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent !important;
  color: #1a2340 !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 7px 8px !important;
  font: 600 13px/1.3 Manrope, "Poppins", sans-serif !important;
  letter-spacing: 0 !important;
  text-align: left;
  cursor: pointer;
}
#realm-clock-pop button .zone-name { color: inherit; }
#realm-clock-pop button .zone-time {
  color: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 700;
}
#realm-clock-pop button:hover { background: #eef1f8 !important; color: #1a2340 !important; }
#realm-clock-pop button.on { background: #1b2444 !important; color: #ffffff !important; }
#realm-clock-pop button.on:hover { background: #1b2444 !important; color: #ffffff !important; }
#app .ql { width: min(860px, calc(100vw - 480px)) !important; }
@media (max-width: 900px) {
  #command-cluster { top: 70px !important; right: 10px !important; }
  #realm-clock-btn { min-width: 0; height: auto; padding: 6px 10px; }
  #app .ql { width: min(980px, calc(100vw - 24px)) !important; }
}

/* Roster faces, queen banner, scenic preview */
.studio button.addcat {
  width: auto !important;
  height: 44px !important;
  min-width: 0;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.studio button.addcat .ico { display: none !important; }
.studio button.edit-pen { display: none !important; }
.studio .ico { width: 16px; height: 16px; flex: none; }
.studio h2 .ico { width: 28px; height: 28px; }
.studio button.look img {
  height: 104px;
  object-fit: cover;
  object-position: center 8%;
  background: #d7e4f4 url("/world/fast/fairy-profile-bg.jpg") center 28% / cover;
}
.preview-card { overflow: hidden; }
.preview-card .hero {
  height: 340px;
  object-fit: contain;
  object-position: center bottom;
  background: #c9d8ea url("/world/fast/fairy-profile-bg.jpg") center 42% / cover;
}
.scene {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  align-items: stretch;
  min-height: 320px;
  overflow: hidden;
  background: #16304a url("/world/fast/fairy-profile-bg.jpg") center 38% / cover !important;
}
.scene-fairy {
  width: 100%;
  height: 340px;
  min-height: 340px;
  object-fit: contain;
  object-position: center bottom;
  align-self: end;
  background: transparent;
}
.scene-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 18px 18px 18px 10px;
  background: linear-gradient(90deg, rgba(10, 16, 32, 0.05) 0%, rgba(8, 14, 28, 0.62) 24%, rgba(8, 14, 28, 0.78) 100%);
  color: #ffffff;
}
.scene .eyebrow, .scene h3, .scene .meta-line, .scene .name-pill { color: #ffffff !important; }
.scene h3 { font-family: "Poppins", "Inter", sans-serif !important; font-size: 32px !important; font-weight: 700 !important; }
.mini-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
  padding: 2px;
  flex: none;
}
.scene-logo { display: none !important; }
.cards, .cards.three, .cards.two { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cards.one { grid-template-columns: 1fr !important; }
.dir-split { display: block !important; }
.studio button.fcard:not(.banner) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 12px !important;
  overflow: hidden;
  background: #fff !important;
}
.studio button.fcard:not(.banner) img {
  width: 100% !important;
  height: 196px !important;
  min-width: 0 !important;
  min-height: 196px !important;
  max-height: 196px;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center 7%;
  background: #d5e2f2 url("/world/fast/fairy-profile-bg.jpg") center 30% / cover;
}
.studio button.fcard:not(.banner) .who { padding: 10px 12px 0; }
.studio button.fcard.banner {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(240px, 42%) 1fr !important;
  align-items: stretch;
  min-height: 380px;
  height: 380px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 18px !important;
  background: url("/world/fast/fairy-profile-bg.jpg") center 40% / cover !important;
}
.studio button.fcard.banner img {
  width: 100% !important;
  height: 130% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center top;
  background: transparent !important;
  align-self: start;
}
.studio button.fcard.banner .who {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 24px 22px 24px 8px;
  background: linear-gradient(90deg, rgba(251, 247, 241, 0.35) 0%, rgba(251, 247, 241, 0.9) 18%, rgba(251, 247, 241, 0.97) 100%);
}
.studio button.fcard.banner strong {
  font-family: "Poppins", "Inter", sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #1b2444 !important;
}
@media (max-width: 720px) {
  .cards, .cards.three, .cards.two, .scene { grid-template-columns: 1fr !important; }
  .studio button.fcard.banner { height: auto; min-height: 0; grid-template-columns: 1fr !important; }
  .studio button.fcard.banner img { height: 280px !important; }
}

/* Clock left, sharp hover, smooth preview */
#realm-clock {
  position: fixed !important;
  top: 16px !important;
  left: 84px !important;
  right: auto !important;
  z-index: 2000 !important;
}
#realm-clock-pop {
  left: 0 !important;
  right: auto !important;
}
#app .ql { width: min(800px, calc(100vw - 520px)) !important; }
.preview-card .role-pill {
  background: transparent !important;
  color: #1b2444 !important;
  border: 1.5px solid #2a3558;
  border-radius: 999px;
}
.preview-card .spec-line,
.scene .meta-line.spec {
  margin: 8px 0 0;
  color: #1b2444;
  font-weight: 650;
  font-size: 14px;
}
.scene .meta-line.spec { color: #ffffff !important; }
.preview-card .cat-pill,
.scene .cat-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 12px;
  color: #ffffff !important;
  background: linear-gradient(180deg, #8d74f2 0%, #6a4de0 48%, #5538cf 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-weight: 700;
}
.scene {
  position: relative !important;
  display: block !important;
  height: 292px;
  min-height: 292px;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #16304a url("/world/fast/fairy-profile-bg.jpg") center 42% / cover !important;
}
.scene-fairy {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 58% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center 16% !important;
  z-index: 1;
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(8, 12, 28, 0) 0%,
    rgba(8, 12, 28, 0) 30%,
    rgba(8, 12, 28, 0.12) 44%,
    rgba(8, 12, 28, 0.28) 56%,
    rgba(8, 12, 28, 0.46) 70%,
    rgba(8, 12, 28, 0.62) 84%,
    rgba(8, 12, 28, 0.7) 100%);
}
.scene-copy {
  position: absolute !important;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  margin: 0;
  padding: 22px 18px 16px 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: none !important;
  color: #ffffff;
}
.scene h3 { font-size: 34px !important; margin: 2px 0 8px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.scene .name-pill {
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
}
.mini-logo { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.fairy:not(.queen):not(.lady) {
  width: 120px !important;
  margin-left: -45px !important;
}
.fairy:not(.queen):not(.lady) .body {
  transform: scale(0.25);
  transform-origin: 50% 0;
  animation: none !important;
  filter: none !important;
}
.fairy.hot:not(.queen):not(.lady) .body {
  transform: scale(0.75) !important;
  transform-origin: 50% 0;
  animation: none !important;
  filter: none !important;
}
.fairy.hot:not(.queen):not(.lady) .body img.pose { opacity: 0 !important; }
.fairy.hot:not(.queen):not(.lady) .body img.normal { opacity: 1 !important; }
.fairy.lady.hot .body,
.fairy.lady:hover .body {
  transform: none !important;
  filter: none !important;
}
.fairy.queen.hot .body,
.fairy.queen:hover .body {
  transform: none !important;
  filter: none !important;
}
.fairy.queen.hot .body::before,
.fairy.queen:hover .body::before {
  background: none !important;
  opacity: 0 !important;
}
@media (max-width: 720px) {
  #realm-clock { left: 74px !important; top: 72px !important; }
  .scene { height: auto; min-height: 240px; }
}

/* One row, original button spacing. Not stretched. */
#app .ql {
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  max-width: calc(100vw - 500px) !important;
  transform: translateX(-50%) !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 6px 78px 6px 12px !important;
}
#app .ql .nav-item {
  white-space: nowrap !important;
  padding: 8px 10px !important;
  font-size: 13.5px !important;
}
#dash-pop {
  position: fixed;
  top: 74px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 7000;
  display: none;
  background: transparent;
}
#dash-pop.on { display: block; }
#dash-pop iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
body.dash-on #menu-toggle,
body.dash-on .dock { display: none !important; }
#tool-pop {
  position: fixed;
  top: 74px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 7800;
  display: none;
}
#tool-pop.on { display: block; }
#tool-pop iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 22px;
  background: #f7f4ee;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
#tool-x {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 3;
  background: #1b2744;
  color: #fff;
  border: 1px solid #e4c27a;
  border-radius: 999px;
  padding: 6px 12px;
}
#profile-pop {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: none;
  background: rgba(8, 12, 24, 0.45);
  place-items: center;
}
#profile-pop.on { display: grid; }
#profile-pop .profile-card {
  width: min(1040px, calc(100vw - 28px));
  max-height: min(90vh, 900px);
  overflow: auto;
  background: #fbf7f1;
  color: #1c2440;
  border-radius: 18px;
  padding: 18px 18px 22px;
  position: relative;
  border: 1px solid rgba(224, 194, 122, 0.8);
}
#profile-pop .profile-board { height: auto; min-height: 460px; }
#profile-pop .profile-stage { min-height: 420px; border-radius: 16px; overflow: hidden; }
#profile-pop .profile-stage img { width: 100%; height: 520px; object-fit: contain; object-position: center bottom; }
#profile-pop img.full { width: min(220px, 46%); display: block; margin: 0 auto 8px; }
#profile-pop h2, #profile-pop p { color: #1c2440; }
#profile-x { position: absolute; top: 10px; right: 10px; }
.other-cat { flex: 1; min-width: 0; }
.other-cat[hidden] { display: none !important; }
.pair-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.preview-card .role-pill,
.preview-card .cat-pill,
.scene .role-pill,
.scene .cat-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-sizing: border-box;
}
.preview-card .role-pill,
.scene .role-pill {
  background: #ffffff !important;
  color: #5b3ad6 !important;
  border: 1.5px solid #6a4de0 !important;
}
.preview-card .cat-pill,
.scene .cat-pill {
  background: linear-gradient(180deg, #8d74f2 0%, #6a4de0 52%, #5538cf 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #6a4de0 !important;
}
.scene {
  height: 268px !important;
  min-height: 268px !important;
}
.scene .eyebrow {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 4;
  margin: 0;
  padding: 4px 28px 6px 2px;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 650;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%);
}
.scene-fairy {
  top: 10px !important;
  height: calc(100% - 10px) !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.scene-copy {
  padding: 20px !important;
  gap: 4px !important;
  justify-content: center !important;
}
.scene h3 { margin: 0 0 2px !important; font-size: 28px !important; }
.scene .meta-line { margin-top: 2px !important; }
.studio button.fcard:not(.banner) {
  flex-direction: row !important;
  align-items: center !important;
  padding: 8px !important;
}
.studio button.fcard:not(.banner) img {
  width: 76px !important;
  height: 88px !important;
  min-width: 76px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.studio button.fcard:not(.banner) .who { padding: 0 0 0 10px !important; }
.studio button.fcard.banner {
  height: 156px !important;
  min-height: 156px !important;
  max-height: 156px !important;
  grid-template-columns: 118px 1fr !important;
  overflow: hidden !important;
}
.studio button.fcard.banner img {
  width: 118px !important;
  height: 156px !important;
  min-width: 118px !important;
  min-height: 0 !important;
  max-height: 156px !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: scale(1.65);
  transform-origin: center top;
  border-radius: 0 !important;
}
.studio button.fcard.banner .who { padding: 12px 16px !important; }
.studio button.fcard.banner strong { font-size: 22px !important; }
.studio button.fcard.banner .blurb {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px !important;
}
@media (max-width: 1100px) {
  #app .ql {
    left: 12px !important;
    right: 12px !important;
    top: 78px !important;
    flex-wrap: wrap !important;
  }
}

/* The map menu and sticky controls stay above the dashboard popup. */
#app .ql {
  position: fixed !important;
  top: 8px !important;
  z-index: 8400 !important;
}
.menu-toggle { z-index: 8400 !important; }
.dock,
#thinking-dock,
#command-cluster,
#realm-clock,
.new-command {
  z-index: 7600 !important;
}
body.dash-on #menu-toggle,
body.dash-on .dock { display: none !important; }

/* Dashboard open: the map behind it is frozen (see holdMap in realm.js). */
body.map-hold #viewport, body.map-hold #viewport *, body.map-hold #viewport *::before, body.map-hold #viewport *::after,
body.map-hold #minimap, body.map-hold #minimap *, body.map-hold::before, body.map-hold::after { animation-play-state: paused !important; transition: none !important; }
/* Integrations hub: the page inside draws its own white panel, gold rim and close button. */
#tool-pop.hub {
  top: 70px;
  bottom: 22px;
  left: 50%;
  right: auto;
  width: min(1180px, calc(100vw - 48px));
  transform: translateX(-50%);
}
#tool-pop.hub iframe { background: transparent; box-shadow: none; border-radius: 26px; color-scheme: light; }
#tool-pop.hub #tool-x { display: none; }
body.hub-on #menu-toggle,
body.hub-on .dock,
body.hub-on #thinking-dock { display: none !important; }
@media (max-width: 700px) {
  /* Full-bleed backdrop: the pop itself covers the whole screen (no transform, so nothing
     from the map, the nav drawer or the menu shows in the 8px gutter), and the panel sits inside. */
  #tool-pop.hub {
    inset: 0;
    width: auto;
    transform: none;
    padding: 8px;
    box-sizing: border-box;
    z-index: 9000;
    background: #0a1024;
  }
}

/* Live fairy work: fly to a project's diamond, hover at its base, rest on Sleepy Hollow when done. */
#world > .fairy { position: absolute; }
#world .fairy.flying, #world .fairy.hovering { z-index: 60 !important; pointer-events: auto; }
#world .fairy.flying .body img.normal { filter: drop-shadow(0 0 8px rgba(255, 226, 140, .95)); }
#world .fairy.hovering .bob { animation: isles-hover 2.4s ease-in-out infinite !important; }
#world .fairy.working .body img.normal { filter: drop-shadow(0 0 6px rgba(255, 214, 110, .95)); }
#world .fairy.resting .body img.normal { filter: saturate(.45) brightness(.92); opacity: .82; }
#world .fairy.resting:hover .body img.normal, #world .fairy.resting.hot .body img.normal { filter: none; opacity: 1; }
@keyframes isles-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { #world .fairy.hovering .bob { animation: none !important; } }
#minimap .fairy-dot.working { background: #ffd34d !important; box-shadow: 0 0 4px #ffd34d; }
#usage-banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 80; max-width: min(760px, 92vw);
  background: #fff4d6; color: #5b3b00; border: 1px solid #e2b04a; border-radius: 12px; padding: 9px 14px; font: 600 13px/1.4 Poppins, system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(60, 40, 0, .18); }
#usage-banner a { color: #7a4b00; margin-left: 6px; }
.sheet .proj-kind { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: #f6f1e3; margin: 6px 0 10px; font-size: 13px; }
.sheet .proj-kind.ongoing { background: #efeaff; }
.sheet .proj-kind strong { color: #3c2a8a; }
.sheet .proj-kind span { color: #5e5a6e; }
.sheet .proj-goal { margin: 4px 0 10px; }
.sheet .proj-sec { margin: 12px 0; }
.sheet dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0; }
.sheet dl.facts div { background: #fbf8ef; border: 1px solid #eadfbe; border-radius: 8px; padding: 6px 8px; }
.sheet dl.facts dt { font-size: 11px; color: #7a705a; margin: 0; }
.sheet dl.facts dd { margin: 2px 0 0; font-weight: 600; }
.sheet .sec-list { margin: 4px 0; padding-left: 18px; }
.sheet .sec-list li { margin: 3px 0; }
.sheet .sec-scroll { overflow-x: auto; }
.sheet table.sec-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.sheet table.sec-table th, .sheet table.sec-table td { border-bottom: 1px solid #eee3c8; padding: 4px 6px; text-align: left; white-space: nowrap; }
.sheet .sec-src { font-size: 11px; }
.sheet .pbar { height: 8px; border-radius: 6px; background: #eee5cf; overflow: hidden; margin: 4px 0 8px; }
.sheet .pbar span { display: block; height: 100%; background: linear-gradient(90deg, #e3b34c, #c9912a); }
.sheet ul.checklist { list-style: none; padding: 0; margin: 4px 0; }
.sheet ul.checklist li { padding: 3px 0 3px 22px; position: relative; }
.sheet ul.checklist li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 12px; border-radius: 3px; border: 2px solid #c9a24a; }
.sheet ul.checklist li.done::before { background: #2f9e5a; border-color: #2f9e5a; }
.sheet .working-now { color: #1f8a4c; font-style: normal; font-weight: 600; }
.sheet details.proj-edit, .sheet details.appoint { margin-top: 14px; }

.realm-nav a.needs-nav.has { background: #fdf3df; color: #8a5600 !important; border-radius: 8px; }
a.needs-banner { display: block; margin: 10px auto; max-width: 900px; padding: 10px 14px; border-radius: 12px; background: #fdf3df; border: 1px solid #e3c27a; color: #8a5600; font-weight: 600; text-decoration: none; }
a.needs-inline { color: #6c5ccf; font-weight: 600; }

.fairy .card .lvl { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; font-size: 11px; line-height: 1.3; }
.fairy .card .lvl:empty { display: none; }
.fairy .card .lvl .lv-bar { display: block; height: 5px; border-radius: 4px; background: rgba(0,0,0,.12); overflow: hidden; }
.fairy .card .lvl .lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f5d36b, #c9912a); }
.fairy .card .lvl .lv-sub { opacity: .8; }

.directory .fcard .xpbar { display: block; height: 6px; border-radius: 4px; background: #eee5cf; overflow: hidden; margin-top: 6px; }
.directory .fcard .xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #f5d36b, #c9912a); }
.directory .fcard .xpline { display: block; font-size: 11px; color: #6b6380; margin-top: 3px; font-style: normal; }

#profile-body .xp-bar { height: 8px; border-radius: 6px; background: #eee5cf; overflow: hidden; }
#profile-body .xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f5d36b, #c9912a); }
#profile-body .xp-scroll { max-height: 220px; overflow: auto; }
#profile-body table.xp-ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
#profile-body table.xp-ledger th, #profile-body table.xp-ledger td { text-align: left; padding: 3px 5px; border-bottom: 1px solid #eee3c8; vertical-align: top; }
/* Working fairies stand out: a little larger while they fly and hover at their project. */
#world > .fairy.flying:not(.hot) .body, #world > .fairy.hovering:not(.hot) .body { transform: scale(1.4); }

/* t176u: only free characters are offered; when all are worn, a placeholder card and a note */
.studio .looks { flex-wrap: wrap; align-items: flex-start; }
.studio .looks .looks-note { flex: 1 1 180px; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: #4a5372; }
.studio button.look.placeholder { cursor: default; }
.studio button.look.placeholder img { opacity: .85; }