:root {
  --green: #123c35; --green-dk: #0c2924; --cream: #f5f0e5; --cream-dim: #e9e1cf;
  --blue: #8daeb0; --gold: #d8ad62; --gold-lt: #e8c98a; --ink: #172421;
  --panel: rgba(12, 41, 36, 0.92);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c1412;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif; color: var(--cream); }
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }
#loader { position: fixed; inset: 0; background: var(--green-dk); z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.spin { width: 44px; height: 44px; border: 4px solid rgba(216,173,98,.25);
  border-top-color: var(--gold); border-radius: 50%; animation: sp 0.9s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

#topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: linear-gradient(rgba(12,41,36,.94), rgba(12,41,36,.78)); border-bottom: 1px solid rgba(216,173,98,.35); }
.brand h1 { margin: 0; font-family: Georgia, serif; font-size: 20px; letter-spacing: .04em; }
.brand p { margin: 0; font-size: 11px; color: var(--gold-lt); letter-spacing: .14em; text-transform: uppercase; }
.badge { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dk);
  background: var(--gold); padding: 4px 10px; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.topbtns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

button { font: inherit; cursor: pointer; border: 1px solid rgba(216,173,98,.5);
  background: rgba(216,173,98,.1); color: var(--cream); border-radius: 8px; padding: 8px 12px; }
button:hover { background: rgba(216,173,98,.28); }
button.active { background: var(--gold); color: var(--green-dk); font-weight: 700; border-color: var(--gold); }
button.wide { width: 100%; margin-top: 8px; }
button.danger { border-color: #c96a5a; background: rgba(201,106,90,.12); }
select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid rgba(216,173,98,.5);
  background: #0e2b26; color: var(--cream); font: inherit; margin-bottom: 6px; }
input[type=range] { width: 100%; accent-color: var(--gold); }

#panel { position: fixed; left: 12px; top: 76px; bottom: 76px; width: 300px; z-index: 15;
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.card { background: var(--panel); border: 1px solid rgba(216,173,98,.3); border-radius: 12px; padding: 12px; }
.card h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 16px; color: var(--gold-lt); }
.lbl { display: block; font-size: 12px; margin: 8px 0 4px; color: var(--cream-dim); }
.fine { font-size: 11px; color: #b9ac93; line-height: 1.45; }
.cur { font-size: 12px; margin: 4px 0; }
.hidden { display: none !important; }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; }
.btnrow.wrap button { flex: 1 1 45%; font-size: 12px; padding: 7px 6px; }

.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sw { aspect-ratio: 1.35; border-radius: 8px; border: 2px solid rgba(255,255,255,.25);
  position: relative; padding: 0; overflow: hidden; }
.sw span { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 9px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.sw.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.sh.active { background: var(--gold); color: var(--green-dk); font-weight: 700; }
.cmpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

#viewbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 15;
  display: flex; gap: 6px; max-width: 96vw; overflow-x: auto; padding: 8px 10px;
  background: rgba(12,41,36,.9); border: 1px solid rgba(216,173,98,.3); border-radius: 12px; }
#viewbar button { white-space: nowrap; font-size: 12px; padding: 7px 10px; }

#toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%) translateY(20px);
  background: var(--green-dk); border: 1px solid var(--gold); color: var(--cream);
  padding: 10px 18px; border-radius: 10px; opacity: 0; transition: all .25s; z-index: 40; pointer-events: none;
  max-width: 90vw; text-align: center; font-size: 13px; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#tourBar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 18;
  width: min(620px, 94vw); background: var(--panel); border: 1px solid var(--gold);
  border-radius: 12px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
.tourtext { flex: 1; } .tourtext p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
#tourBar .btnrow { flex-wrap: nowrap; }

.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5,10,9,.7);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.sheet { background: var(--green-dk); border: 1px solid var(--gold); border-radius: 14px;
  padding: 22px; max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; position: relative; }
.wide-sheet { max-width: 720px; }
.sheet h2 { font-family: Georgia, serif; margin-top: 0; color: var(--gold-lt); }
.sheet ul, .sheet ol { line-height: 1.6; font-size: 14px; }
.sheet .x { position: absolute; top: 10px; right: 10px; }
#planSvg { width: 100%; height: auto; background: #0e2b26; border-radius: 8px; }
#planSvg .plan-zone:hover { fill: rgba(216,173,98,.35); }
#proposalTabs { margin-bottom: 12px; }
#proposalTabs button.active { background: var(--gold); }
.prose { font-size: 14px; line-height: 1.65; }
.prose .tagline { font-family: Georgia, serif; font-style: italic; color: var(--gold-lt); font-size: 16px; }
.prose .cta { display: inline-block; margin-top: 8px; background: var(--gold); color: var(--green-dk);
  font-weight: 700; padding: 10px 18px; border-radius: 8px; text-decoration: none; }

body.ui-hidden #panel, body.ui-hidden #viewbar, body.ui-hidden #topbar .topbtns { display: none; }

@media (max-width: 760px) {
  #panel { left: 8px; right: 8px; top: auto; bottom: 66px; width: auto; max-height: 44vh; }
  .brand p { display: none; }
  .brand h1 { font-size: 16px; }
  #topbar { padding: 8px; gap: 8px; }
  .topbtns button { padding: 6px 8px; font-size: 12px; }
  #tourBar { flex-direction: column; align-items: stretch; bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
}

/* ---------- Floating contextual panel (anchored to selected object) ---------- */
#ctxPanel {
  position: fixed; z-index: 40; width: 230px;
  background: rgba(14, 24, 19, 0.94);
  border: 1px solid rgba(216, 173, 98, 0.45);
  border-radius: 12px; padding: 10px 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  transition: opacity 0.18s ease;
}
#ctxHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#ctxTitle { font-family: "Playfair Display", Georgia, serif; font-size: 1rem; color: #f0e6cf; }
#ctxClose {
  background: none; border: 1px solid rgba(240, 230, 207, 0.35); color: #f0e6cf;
  border-radius: 50%; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
#ctxClose:hover { border-color: #d8ad62; color: #d8ad62; }
#ctxActions { display: flex; flex-direction: column; gap: 8px; }
.ctx-btn {
  background: rgba(240, 230, 207, 0.08); color: #f0e6cf;
  border: 1px solid rgba(240, 230, 207, 0.25); border-radius: 8px;
  padding: 10px 12px; font-size: 0.95rem; cursor: pointer; min-height: 44px;
}
.ctx-btn:hover { border-color: #d8ad62; }
.ctx-btn.primary { background: #d8ad62; border-color: #d8ad62; color: #14211a; font-weight: 700; }
.ctx-slider label { display: block; font-size: 0.85rem; color: #cfc4a6; margin-bottom: 4px; }
.ctx-slider .fine { font-style: normal; opacity: 0.7; }
.ctx-slider input[type="range"] { width: 100%; accent-color: #d8ad62; }

/* ---------- Drag-and-drop swatch ---------- */
.drag-chip {
  position: fixed; z-index: 200; pointer-events: none;
  width: 54px; height: 54px; border-radius: 12px;
  border: 2px solid #d8ad62; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.drag-chip span {
  font-size: 0.6rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  padding-bottom: 3px; white-space: nowrap;
}
#undoBtn:disabled { opacity: 0.4; cursor: default; }

/* ---------- Mode switcher ---------- */
#modeSwitch { display: flex; gap: 2px; background: rgba(240,230,207,.08); border: 1px solid rgba(240,230,207,.2); border-radius: 10px; padding: 3px; }
#modeSwitch button { background: none; border: none; color: #cfc4a6; padding: 8px 12px; border-radius: 8px; font-size: .85rem; cursor: pointer; min-height: 40px; }
#modeSwitch button.active { background: #d8ad62; color: #14211a; font-weight: 700; }
#modeSwitch button:focus-visible, button:focus-visible, a.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #d8ad62; outline-offset: 2px; }

/* ---------- Studio / moodboard ---------- */
.tabs { display: flex; gap: 8px; margin: 10px 0; }
.tabs button { background: rgba(240,230,207,.08); color: #f0e6cf; border: 1px solid rgba(240,230,207,.25); border-radius: 8px; padding: 10px 16px; cursor: pointer; min-height: 44px; }
.tabs button.active { background: #d8ad62; color: #14211a; font-weight: 700; border-color: #d8ad62; }
#moodPalette { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mood-src { width: 52px; height: 52px; border-radius: 10px; border: 2px solid rgba(240,230,207,.3); cursor: grab; display: flex; align-items: flex-end; justify-content: center; touch-action: none; }
.mood-src span { font-size: .55rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#moodBoard { position: relative; min-height: 260px; border: 1px dashed rgba(216,173,98,.5); border-radius: 12px; background: rgba(0,0,0,.25); margin-bottom: 10px; overflow: hidden; touch-action: none; }
.mood-chip { position: absolute; width: 84px; height: 84px; border-radius: 12px; border: 2px solid rgba(240,230,207,.5); cursor: grab; display: flex; align-items: flex-end; justify-content: center; touch-action: none; user-select: none; }
.mood-chip span { font-size: .6rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); padding-bottom: 4px; pointer-events: none; }
.mood-chip .mx { position: absolute; top: 2px; right: 6px; color: #fff; font-size: .9rem; text-shadow: 0 1px 3px #000; cursor: pointer; }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.stack .row { display: flex; gap: 8px; align-items: center; background: rgba(240,230,207,.06); border: 1px solid rgba(240,230,207,.15); border-radius: 8px; padding: 8px 10px; }
.stack .row .grow { flex: 1; }
.stack .row button { min-height: 40px; }
#configName, #paletteName { flex: 1; background: rgba(0,0,0,.3); border: 1px solid rgba(240,230,207,.3); color: #f0e6cf; border-radius: 8px; padding: 10px; min-height: 44px; }
#configSummary { width: 100%; background: rgba(0,0,0,.3); border: 1px solid rgba(240,230,207,.3); color: #f0e6cf; border-radius: 8px; padding: 10px; font-family: ui-monospace, monospace; font-size: .8rem; }
a.btn { display: inline-block; background: #d8ad62; color: #14211a; font-weight: 700; border-radius: 8px; padding: 12px 18px; text-decoration: none; min-height: 44px; line-height: 20px; }
.linklike { background: none; border: none; color: #d8ad62; text-decoration: underline; cursor: pointer; font-size: inherit; padding: 0; }

/* ---------- Manager dashboard ---------- */
.dashgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.dashcard { background: rgba(240,230,207,.06); border: 1px solid rgba(240,230,207,.18); border-radius: 10px; padding: 14px; }
.dashcard h3 { margin: 0 0 8px; font-size: 1rem; color: #f0e6cf; }
.dashcard .big { font-size: 1.6rem; font-weight: 700; color: #d8ad62; }
.dashcard li { font-size: .85rem; color: #cfc4a6; margin: 4px 0; list-style: none; }
.dashcard ul { padding: 0; margin: 0; }

/* ---------- Scroll story ---------- */
.story-sheet { max-height: 92vh; display: flex; flex-direction: column; }
#storyScroll { overflow-y: auto; max-height: 52vh; border: 1px solid rgba(216,173,98,.35); border-radius: 12px; padding: 6px 14px; background: rgba(0,0,0,.25); }
.story-chapter { min-height: 44vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .25s; }
.story-chapter.lit { opacity: 1; }
.story-chapter h3 { color: #d8ad62; margin: 0 0 8px; }
.story-chapter p { color: #f0e6cf; line-height: 1.6; }

/* ---------- Intro overlay ---------- */
#introOverlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(8,14,11,.72); backdrop-filter: blur(4px); }
#introOverlay.hidden { display: none; }
.intro-card { max-width: 520px; margin: 16px; background: #101d16; border: 1px solid rgba(216,173,98,.5); border-radius: 16px; padding: 28px; text-align: center; }
.intro-card h2 { font-family: "Playfair Display", Georgia, serif; color: #f0e6cf; margin: 10px 0; }
.intro-card p { color: #cfc4a6; line-height: 1.6; }
.intro-card .btnrow { justify-content: center; margin: 18px 0; }
button.primary { background: #d8ad62; border-color: #d8ad62; color: #14211a; font-weight: 700; }

/* ---------- WebGL fallback ---------- */
#webglFail { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: #101d16; padding: 24px; text-align: center; }
#webglFail .intro-card { max-width: 560px; }

/* ---------- Loader ---------- */
#loader { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: #0d1712; color: #f0e6cf; }
#loader .bar { width: 220px; height: 6px; border-radius: 3px; background: rgba(240,230,207,.15); overflow: hidden; }
#loader .bar i { display: block; height: 100%; width: 30%; background: #d8ad62; border-radius: 3px; animation: loadslide 1.2s infinite ease-in-out; }
@keyframes loadslide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
#loadMsg { font-size: .9rem; color: #cfc4a6; }

@media (max-width: 760px) {
  #modeSwitch button { padding: 8px 7px; font-size: .75rem; }
  #ctxPanel { width: 200px; }
}