:root {
  --ink: #17211f;
  --ink-soft: #2d3a36;
  --paper: #efe9cf;
  --paper-bright: #fff9df;
  --moss: #173f39;
  --moss-2: #24564d;
  --fern: #4d8c68;
  --mint: #83c99a;
  --sun: #f4c95d;
  --orange: #e9804d;
  --rose: #d66d72;
  --sky: #62b4db;
  --violet: #a786c8;
  --panel: #0f1b19;
  --panel-2: #152723;
  --panel-border: #2d4540;
  --muted: #8ca39d;
  --text: #ecf2df;
  --world-width: 5600px;
  --world-height: 3600px;
  --card-width: 320px;
  --card-image-height: 180px;
  --card-header-height: 42px;
  --shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08110f;
  color: var(--text);
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 2px;
}

.app-shell { height: 100%; display: grid; grid-template-rows: 72px minmax(0, 1fr) 30px; }
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 14px 10px 18px;
  background: linear-gradient(180deg, #18312c, #11241f);
  border-bottom: 1px solid #36564e;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .26);
  z-index: 20;
}
.brand-block { min-width: 300px; display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 15px 15px 18px 12px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #ffd975 0 18%, #e8994a 19% 42%, #33795c 43% 100%);
  border: 2px solid #f6df8d;
  box-shadow: inset 0 0 0 3px rgba(17, 59, 48, .35), 0 6px 16px rgba(0, 0, 0, .3);
  transform: rotate(-3deg);
}
.brand-mark span { font-family: Georgia, serif; font-size: 26px; font-weight: 900; color: #12332b; transform: rotate(3deg); }
.brand-block h1 { margin: 0; font-family: Georgia, serif; font-size: 18px; letter-spacing: .02em; }
.brand-block p { margin: 2px 0 0; color: #a9bdb7; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; }
.search-box {
  flex: 1 1 320px; max-width: 560px; height: 42px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: rgba(5, 15, 13, .56); border: 1px solid #3a5b52; border-radius: 11px;
  color: #9db2ac;
}
.search-box:focus-within { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(244, 201, 93, .12); }
.search-box input { flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; min-width: 0; }
.search-box input::placeholder { color: #748c86; }
kbd { padding: 2px 7px; border: 1px solid #46635c; border-bottom-width: 2px; border-radius: 5px; background: #1b312c; color: #a6bab4; font-size: 11px; }
.toolbar { margin-left: auto; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
button {
  border: 1px solid #46645d; background: #203a34; border-radius: 8px; padding: 8px 11px;
  cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
body:not(.playtest-active) button:hover:not(:disabled) { background: #2b4b43; border-color: #66877e; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.primary { background: #d79d3f; border-color: #f4cd72; color: #17211f; }
button.primary:hover { background: #edb44f; }
button.small { padding: 6px 9px; font-size: 11px; }
button.icon-button { min-width: 34px; padding: 7px 9px; font-size: 18px; line-height: 1; }
button.icon-button.large { width: 40px; height: 40px; font-size: 24px; padding: 0; }
.toolbar-divider { width: 1px; height: 28px; background: #38544e; margin: 0 2px; }

.workspace { min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr) 370px; }
.panel { min-height: 0; background: var(--panel); border-color: var(--panel-border); display: flex; flex-direction: column; }
.left-panel { border-right: 1px solid var(--panel-border); }
.right-panel { border-left: 1px solid var(--panel-border); }
.panel-heading { min-height: 62px; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--panel-border); background: #13231f; }
.panel-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 17px; }
.panel-heading span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.project-summary { padding: 11px 13px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; border-bottom: 1px solid #223a34; }
.summary-stat { padding: 8px 6px; border: 1px solid #29443d; border-radius: 8px; background: #152923; text-align: center; }
.summary-stat strong { display: block; color: var(--sun); font-size: 17px; }
.summary-stat span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
.scene-list { min-height: 0; overflow: auto; padding: 8px; scrollbar-color: #49645d #0d1816; }
.scene-list-group h3 { margin: 10px 7px 5px; color: #718b84; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.scene-list-item {
  width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  margin: 3px 0; padding: 6px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 9px;
}
.scene-list-item:hover { background: #192e29; border-color: #2f4a43; }
.scene-list-item.selected { background: #293e32; border-color: var(--sun); box-shadow: inset 3px 0 0 var(--sun); }
.scene-list-item.dimmed { opacity: .28; }
.scene-list-thumb { width: 42px; height: 27px; object-fit: cover; border-radius: 4px; border: 1px solid #4c655e; }
.scene-list-copy { min-width: 0; }
.scene-list-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.scene-list-copy span { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.scene-list-count { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #29433c; color: #c5d5ca; font-size: 10px; }
.legend-block { padding: 12px 15px 15px; border-top: 1px solid #29423c; color: var(--muted); font-size: 10px; line-height: 1.9; }
.legend-block h3 { margin: 0 0 4px; color: #c7d5ca; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.legend-line, .legend-box { display: inline-block; width: 22px; height: 8px; margin-right: 7px; vertical-align: middle; }
.legend-line.travel { border-top: 3px solid var(--sun); }
.legend-box.hotspot { border: 2px dashed #f2d77e; background: rgba(244, 201, 93, .2); }
.legend-box.selected { border: 2px solid #fff4bd; background: var(--orange); }

.graph-region { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0a1513; }
.viewport { position: absolute; inset: 0; overflow: auto; background: #0b1714; scrollbar-color: #56736b #0a1311; scrollbar-width: auto; overscroll-behavior: contain; }
.stage-sizer { position: relative; width: calc(var(--world-width) * .7); height: calc(var(--world-height) * .7); }
.world {
  position: absolute; left: 0; top: 0; width: var(--world-width); height: var(--world-height);
  transform-origin: 0 0; transform: scale(.7); overflow: hidden;
  background-color: #15241f;
}
.world.grid-visible {
  background-image:
    linear-gradient(rgba(129, 164, 151, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 164, 151, .08) 1px, transparent 1px),
    linear-gradient(rgba(129, 164, 151, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 164, 151, .04) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.connections { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 1; }
.connections.hidden { display: none; }
.connection-path { fill: none; stroke-width: 5; stroke-linecap: round; opacity: .72; pointer-events: stroke; cursor: pointer; transition: opacity .12s ease, stroke-width .12s ease; }
.connection-path:hover, .connection-path.selected { opacity: 1; stroke-width: 9; }
.connection-path.dimmed { opacity: .08; }
.connection-origin { stroke: #10201c; stroke-width: 3; pointer-events: none; }
.connection-label { paint-order: stroke; stroke: #14231f; stroke-width: 8px; stroke-linejoin: round; fill: #f6edca; font-size: 17px; font-weight: 800; pointer-events: none; opacity: .9; }
.scene-cards { position: absolute; inset: 0; z-index: 2; }
.scene-card {
  position: absolute; width: var(--card-width); height: calc(var(--card-header-height) + var(--card-image-height) + 38px);
  border: 3px solid #47675e; border-radius: 13px; overflow: hidden; background: #f0ead0; color: var(--ink);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .34); user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease, filter .12s ease;
}
.scene-card:hover { border-color: #7da696; box-shadow: 0 22px 42px rgba(0, 0, 0, .42); }
.scene-card.selected { border-color: #fff2a9; box-shadow: 0 0 0 5px rgba(244, 201, 93, .24), 0 22px 44px rgba(0,0,0,.48); z-index: 5; }
.scene-card.dimmed { opacity: .18; filter: grayscale(.65); }
.scene-card-header {
  height: var(--card-header-height); display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: linear-gradient(180deg, #244d43, #193b34); color: #f8f2d8; cursor: grab;
}
.scene-card-header:active { cursor: grabbing; }
.scene-card-header strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Georgia, serif; font-size: 16px; }
.scene-card-header code { color: #a8c2b8; font-size: 9px; }
.scene-card-index { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #e7b64e; color: #18352e; font-size: 11px; font-weight: 900; }
.scene-image-wrap { position: relative; height: var(--card-image-height); background: #182922; overflow: hidden; }
.scene-image-wrap > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hotspot-layer { position: absolute; inset: 0; }
.hotspot-layer.hidden { display: none; }
.hotspot-box {
  position: absolute; padding: 0; border: 3px dashed currentColor; border-radius: 9px; background: color-mix(in srgb, currentColor 22%, transparent);
  color: var(--sun); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); transition: background .1s ease, border-style .1s ease, transform .1s ease;
}
.hotspot-box:hover { border-style: solid; background: color-mix(in srgb, currentColor 38%, transparent); transform: scale(1.025); z-index: 5; }
.hotspot-box.selected { border-style: solid; box-shadow: 0 0 0 4px rgba(255,255,255,.75), inset 0 0 0 2px rgba(0,0,0,.35); z-index: 6; }
.hotspot-box span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 130px; padding: 3px 6px;
  border-radius: 5px; background: rgba(12, 29, 25, .86); color: #fff6d2; font-size: 9px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.scene-card-footer { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; background: #e8e2c7; border-top: 1px solid #c6bea0; }
.scene-card-footer span { font-size: 10px; color: #4c5a54; }
.biome-pill { padding: 3px 7px; border: 1px solid #94a59e; border-radius: 999px; background: #d8ddca; text-transform: uppercase; letter-spacing: .08em; font-size: 8px !important; font-weight: 800; }
.floating-card { position: absolute; z-index: 10; border: 1px solid #3f5e56; border-radius: 10px; background: rgba(14, 29, 25, .94); box-shadow: var(--shadow); backdrop-filter: blur(7px); }
.graph-toolbar { top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 7px 9px; }
.graph-toolbar label { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #c5d5cf; }
.graph-toolbar input[type="range"] { width: 100px; accent-color: var(--sun); }
.graph-toolbar output { width: 38px; font-size: 10px; color: var(--sun); }
.canvas-help { left: 13px; bottom: 13px; max-width: 680px; padding: 8px 11px; color: #9fb4ae; font-size: 10px; pointer-events: none; }
.selection-badge { right: 13px; bottom: 13px; max-width: 410px; padding: 8px 11px; color: #ebf3df; font-size: 10px; pointer-events: none; }

.inspector { min-height: 0; overflow: auto; padding: 13px; scrollbar-color: #49645d #0d1816; }
.inspector-empty { padding: 22px 10px; color: var(--muted); line-height: 1.55; }
.inspector-empty h3 { color: #e6eedc; font-family: Georgia, serif; font-size: 19px; }
.inspector-section { margin-bottom: 14px; padding: 12px; border: 1px solid #2c4841; border-radius: 10px; background: #142722; }
.inspector-section h3 { margin: 0 0 9px; color: var(--sun); font-family: Georgia, serif; font-size: 15px; }
.inspector-section h4 { margin: 12px 0 7px; color: #dce8d8; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.inspector-section p { margin: 6px 0; color: #a9bab5; font-size: 11px; line-height: 1.5; }
.field { display: grid; gap: 5px; margin: 9px 0; }
.field > span, .field label { color: #9bb0aa; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.field input, .field textarea, .field select, .inline-field input, .inline-field select {
  width: 100%; border: 1px solid #405f57; border-radius: 7px; background: #0c1a17; color: #edf3df; padding: 8px 9px; font-size: 11px;
}
.field textarea { min-height: 74px; resize: vertical; line-height: 1.45; }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.field-grid.four { grid-template-columns: repeat(4, 1fr); }
.inline-field { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; margin: 6px 0; }
.inline-field span { color: #9bb0aa; font-size: 9px; text-transform: uppercase; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-chip, .condition-chip, .step-type {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; border: 1px solid #44645b; background: #1c332d; color: #c4d4ce; font-size: 9px;
}
.condition-chip { border-color: #735f37; background: #3a311e; color: #f3d684; }
.step-list { display: grid; gap: 6px; }
.step-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 7px; border: 1px solid #2b4740; border-radius: 7px; background: #10211d; }
.step-index { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #2c4840; color: #c7d8d1; font-size: 9px; }
.step-copy strong { display: block; color: #dce8da; font-size: 10px; }
.step-copy span { display: block; margin-top: 2px; color: #88a099; font-size: 9px; line-height: 1.35; }
.step-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.step-field { display: grid; gap: 3px; min-width: 0; color: #a9beb7; font-size: 9px; }
.step-field.wide { display: grid; grid-column: 1 / -1; gap: 3px; margin-top: 7px; }
.step-field input, .step-field select, .step-field textarea { width: 100%; min-width: 0; border: 1px solid #45645b; border-radius: 5px; background: #0b1916; color: #e2eee9; padding: 5px 6px; font: inherit; }
.step-field textarea { min-height: 48px; resize: vertical; }
.inspector-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 10px 0; }
.inspector-actions button { width: 100%; }
.inspector-actions .wide { grid-column: 1 / -1; }
.hotspot-mini-list { display: grid; gap: 5px; }
.hotspot-mini-button { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; background: #10211d; border-color: #2b4740; font-size: 10px; }
.hotspot-color-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.16); }
.danger-zone { border-color: #6b3838; background: #2b1b1b; }
.danger-zone button { border-color: #865050; background: #552d2f; }
.raw-json { min-height: 180px !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px !important; tab-size: 2; }
.connection-summary { padding: 9px; border-left: 3px solid var(--sun); background: #10211d; color: #aabeb6; font-size: 10px; line-height: 1.5; }

.statusbar { display: flex; align-items: center; gap: 20px; padding: 0 11px; border-top: 1px solid #29433c; background: #0e1b18; color: #819891; font-size: 10px; }
.statusbar #graphStatus { margin-left: auto; }
.status-pill { padding: 3px 8px; border-radius: 999px; background: #2b3935; color: #a9bbb5; }
.status-pill.pass { background: #224d36; color: #baf1c9; }
.status-pill.warn { background: #594725; color: #ffe39b; }
.status-pill.fail { background: #5c2d31; color: #ffbdc0; }

.popover-menu { position: fixed; right: 14px; top: 64px; z-index: 80; width: 245px; padding: 7px; border: 1px solid #47675e; border-radius: 10px; background: #142722; box-shadow: var(--shadow); }
.popover-menu button { width: 100%; margin: 2px 0; text-align: left; background: transparent; border-color: transparent; }
.popover-menu button:hover { background: #203b34; }
.danger-text { color: #f3a0a5; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 30px; background: rgba(3, 9, 8, .78); backdrop-filter: blur(6px); }
.modal-overlay[hidden] { display: none; }
.modal-card { width: min(960px, 94vw); max-height: 88vh; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 2px solid #54736a; border-radius: 15px; overflow: hidden; background: #12241f; box-shadow: 0 28px 90px rgba(0,0,0,.6); }
.modal-card > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #3a554e; background: #18312b; }
.modal-card h2 { margin: 0; font-family: Georgia, serif; font-size: 22px; }
.modal-card header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.modal-body { min-height: 0; overflow: auto; padding: 18px; }
.validation-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.validation-stat { padding: 12px; border: 1px solid #35534a; border-radius: 10px; background: #0d1d19; text-align: center; }
.validation-stat strong { display: block; color: var(--sun); font-size: 24px; }
.validation-stat span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.issue-list { display: grid; gap: 7px; }
.issue { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid #344f48; border-radius: 8px; background: #0e1d19; }
.issue-kind { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.issue.error .issue-kind { color: #ff969d; }
.issue.warning .issue-kind { color: #f5d27d; }
.issue.info .issue-kind { color: #8bd2c2; }
.issue p { margin: 0; color: #bdcbc6; font-size: 11px; }
.issue button { padding: 5px 7px; font-size: 9px; }
.toast-region { position: fixed; right: 18px; bottom: 45px; z-index: 200; display: grid; gap: 8px; pointer-events: none; }
.toast { width:min(440px,calc(100vw - 36px)); min-width:260px; padding:11px 13px; border:1px solid #59776e; border-radius:9px; background:#17302a; box-shadow:var(--shadow); color:#e7efdf; font-size:11px; animation:toastIn .18s ease both; }
.playtest-active .toast-region { top:10px; right:auto; bottom:auto; left:50%; width:min(360px,calc(100vw - 36px)); transform:translateX(-50%); }
.playtest-active .toast { width:100%; min-width:0; text-align:center; }
.toast.error { border-color: #8b4c51; background: #402225; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }


.playtest-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 14px; background: rgba(3, 7, 12, .93); }
.playtest-overlay[hidden] { display: none; }
.playtest-window { width: min(1180px, 96vw, calc((100vh - 62px) * 4 / 3)); max-height: calc(100vh - 20px); display: grid; grid-template-rows: 42px auto; }
.playtest-chrome { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 5px 8px 5px 13px; border: 1px solid #5d716b; border-bottom: 0; border-radius: 11px 11px 0 0; background: #172a27; color: #f5efdc; box-shadow: 0 18px 60px rgba(0,0,0,.55); }
.playtest-chrome > div:first-child { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.playtest-chrome strong { font-family: Georgia, serif; font-size: 15px; white-space: nowrap; }
.playtest-chrome span { color: #9eb3ac; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playtest-header-actions { display: flex; align-items: center; gap: 7px; }
.classic-game-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; display: grid; grid-template-rows: 75% 25%; overflow: hidden; border: 3px solid #38213f; border-radius: 0 0 16px 16px; background: #5f2778; box-shadow: 0 30px 100px rgba(0,0,0,.72); isolation: isolate; }
.playtest-stage { position: relative; min-height: 0; overflow: hidden; background: #1e96c8; cursor: none; touch-action: manipulation; }
.playtest-stage > #playtestBackground { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: opacity .22s ease, filter .22s ease; }
.playtest-variant-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%, rgba(33,11,35,.05)); }
.playtest-scene-props { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.playtest-scene-props img { position:absolute; display:block; object-fit:contain; filter:drop-shadow(0 5px 3px rgba(38,24,25,.28)); transform-origin:50% 82%; }
.playtest-hotspots { position: absolute; inset: 0; z-index: 4; }
.playtest-hotspot { position: absolute; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent !important; box-shadow: none !important; color: transparent; cursor: none; -webkit-tap-highlight-color: transparent; }
.playtest-hotspot::before, .playtest-hotspot::after { display: none !important; content: none !important; }
.playtest-hotspot:focus-visible { outline: 0; }
.playtest-avatar-shadow { position: absolute; z-index: 5; width: 14%; aspect-ratio: 2.2 / 1; border-radius: 50%; background: rgba(41,36,39,.26); filter: blur(5px); transform: translate(-50%,-22%); transition: left .66s cubic-bezier(.22,.72,.18,1), top .66s cubic-bezier(.22,.72,.18,1), width .66s ease, opacity .18s ease; pointer-events: none; }
.playtest-avatar { position: absolute; z-index: 6; width: 22%; max-width: 290px; height: auto; object-fit: contain; transform: translate(-50%, -74%) scaleX(var(--avatar-flip, 1)); transform-origin: 50% 84%; filter: drop-shadow(0 10px 5px rgba(36,25,27,.26)); transition: left .66s cubic-bezier(.22,.72,.18,1), top .66s cubic-bezier(.22,.72,.18,1), width .66s ease, opacity .18s ease, transform .22s ease; pointer-events: auto; cursor: none; user-select: none; }
.playtest-avatar.painted-parade-coat { filter:hue-rotate(-112deg) saturate(1.55) brightness(1.08) drop-shadow(0 0 10px rgba(96,255,224,.78)) drop-shadow(0 10px 5px rgba(36,25,27,.26)); }
.playtest-companion { display: none !important; }
.playtest-cursor { position: absolute; z-index: 30; width: 64px; height: 64px; transform: translate(-17%, -18%); pointer-events: none; filter: drop-shadow(0 4px 2px rgba(0,0,0,.22)); }
.playtest-cursor[hidden] { display: none; }
.playtest-cursor img { width: 100%; height: 100%; display: block; object-fit: contain; }
.playtest-cursor.navigation-cursor { width: clamp(64px, 6.4vw, 82px); height: clamp(64px, 6.4vw, 82px); transform: translate(-50%, -50%); }
.playtest-cursor.item-cursor { width: 74px; height: 74px; transform: translate(-50%, -50%); padding: 4px; border: 4px solid rgba(255,250,220,.94); border-radius: 18px; background: rgba(91,35,116,.88); }
.playtest-scene-card, .playtest-tooltip { display: none !important; }

.classic-dashboard { position: relative; z-index: 12; display: grid; grid-template-columns: 19% 15% minmax(0,1fr) 14%; align-items: stretch; min-height: 0; border-top: 7px solid #40214f; background: linear-gradient(180deg,#c06ed0 0%,#9c50b6 44%,#7a3d9b 100%); box-shadow: inset 0 8px 0 rgba(255,220,255,.3), inset 0 -8px 0 rgba(55,18,68,.33); }
.playtest-overlay.world-input-blocked .classic-dashboard { pointer-events:none; }
.dashboard-left { position: relative; display: grid; grid-template-columns: 40% 60%; grid-template-rows: 64% 36%; padding: 7px 8px 7px 12px; border-right: 4px solid rgba(67,25,79,.65); }
.fuel-gauge { position: relative; grid-column:1; grid-row:1; min-height:0; display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 8px 16px; border: 5px solid #4f2e56; border-radius: 55% 55% 18px 18px; background: #f3eee2; color:#4b3644; font:800 12px/1 sans-serif; box-shadow:inset 0 0 0 3px #c7b9ae; }
.fuel-gauge::before { content:""; position:absolute; left:50%; bottom:18px; width:5px; height:43%; border-radius:5px; background:#d44e42; transform:rotate(19deg); transform-origin:50% 100%; }
.fuel-gauge i { position:absolute; left:50%; bottom:13px; width:13px; height:13px; margin-left:-6px; border:3px solid #4f2e56; border-radius:50%; background:#e9c657; }
.quit-key { grid-column:1 / 3; grid-row:2; align-self:stretch; justify-self:stretch; min-width:44px; min-height:44px; margin:2px 2px 0; padding:3px 6px; border:3px solid #4d2c53; border-radius:12px; background:linear-gradient(#f2c862,#d79238); color:#4b204e; font-size:clamp(8px,.85vw,12px); font-weight:1000; text-shadow:0 1px #ffe8a2; box-shadow:inset 0 0 0 2px #e59acb,0 3px 0 #48214f; }
.horn-button { --wheel-angle:0deg; position:relative; grid-column:2; grid-row:1; align-self:center; justify-self:center; width:min(86%,100px); aspect-ratio:1/1; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; box-shadow:none; transform:rotate(var(--wheel-angle)); transition:transform .22s ease; overflow:visible; }
.horn-button img { width:100%; height:100%; display:block; object-fit:contain; filter:drop-shadow(0 4px 0 #37183e); pointer-events:none; }
.horn-button i { position:absolute; left:44%; bottom:49%; width:12%; height:43%; border-radius:7px; background:#4b2555; transform-origin:50% 100%; pointer-events:none; }
.horn-button i:nth-child(1) { transform:rotate(0deg); }
.horn-button i:nth-child(2) { transform:rotate(120deg); }
.horn-button i:nth-child(3) { transform:rotate(240deg); }
.horn-button span { position:relative; z-index:2; width:44%; aspect-ratio:1/1; display:grid; place-items:center; border:3px solid #56275c; border-radius:50%; background:#f8d641; color:#5b215c; font-size:clamp(22px,3vw,40px); line-height:1; }
.dashboard-middle { display:grid; grid-template-rows:62% 38%; gap:3px; padding:10px 6px 7px; border-right:4px solid rgba(67,25,79,.55); }
.speedometer { position:relative; display:flex; justify-content:space-around; align-items:flex-start; padding:11px 9px 0; border:5px solid #4d2d55; border-radius:50% 50% 22px 22px; background:#efeae0; color:#493945; font:800 11px/1 sans-serif; }
.speedometer i { --speed-angle:-46deg; position:absolute; left:50%; bottom:13px; width:5px; height:44%; border-radius:5px; background:#d64f3f; transform:rotate(var(--speed-angle)); transform-origin:50% 100%; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.speedometer::after { content:""; position:absolute; left:50%; bottom:8px; width:12px; height:12px; margin-left:-6px; border:3px solid #4d2d55; border-radius:50%; background:#edc85a; }
.radio { position:relative; width:100%; min-height:44px; display:grid; grid-template-columns:1fr repeat(3,minmax(8px,20px)); align-items:start; gap:4px; padding:3px 5px; border:4px solid #4d2d55; border-radius:10px 10px 18px 18px; background:#ebb83a; box-shadow:0 3px 0 #4d2d55; }
.radio b { padding:3px 6px 11px; border:2px solid #5a4d23; border-radius:5px; background:#263c2f; color:#73db75; font:800 13px/1 monospace; text-align:center; }
.radio em { position:absolute; left:10px; bottom:5px; max-width:55%; overflow:hidden; color:#a7ee9d; font:700 6px/1 system-ui,sans-serif; font-style:normal; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
.radio span { width:15px; height:8px; border-radius:5px; background:#fff3aa; box-shadow:inset 0 0 0 2px #765b26; }
.dashboard-glovebox { position:relative; min-width:0; display:flex; align-items:flex-end; gap:7px; margin:10px 4px 10px 10px; padding:8px 12px 7px; overflow:hidden; border:6px solid #4e2e58; border-radius:44px 20px 33px 40px; background:linear-gradient(180deg,#e8e6de,#c8cbc8); box-shadow:inset 0 0 0 3px #8a8285; }
.dashboard-glovebox::before { content:""; position:absolute; inset:7px; border-radius:35px 15px 27px 33px; background:linear-gradient(180deg,#eee9df 0 70%,#b5b8b6 71%); pointer-events:none; }
.quest-paper { position:relative; z-index:2; flex:0 0 132px; align-self:center; padding:7px 7px 6px 18px; border:2px solid #817262; border-radius:2px; background:#fffdf2; color:#51493f; transform:rotate(-2deg); box-shadow:2px 3px 0 rgba(70,52,49,.2); text-align:left; }
.quest-paper::before { content:""; position:absolute; left:6px; top:7px; bottom:7px; width:5px; background:repeating-linear-gradient(#d46962 0 2px,transparent 2px 9px); }
.quest-paper .eyebrow { display:block; font-size:7px; letter-spacing:.08em; }
.quest-paper strong { display:block; margin-top:2px; color:#6d2c73; font-size:10px; line-height:1.1; }
.quest-paper span:last-child { display:block; margin-top:3px; font-size:9px; font-weight:800; }
.dashboard-companion { position:relative; z-index:2; align-self:flex-end; flex:0 0 auto; width:88px; max-height:92%; object-fit:contain; filter:drop-shadow(0 5px 3px rgba(0,0,0,.2)); }
.dashboard-companion-button { position:relative; z-index:2; align-self:stretch; flex:0 0 88px; display:grid; place-items:end center; min-width:44px; padding:0; border:0; background:transparent; box-shadow:none; }
.dashboard-companion-button .dashboard-companion { width:100%; max-height:100%; pointer-events:none; }
.playtest-inventory { position:relative; z-index:2; min-width:0; flex:1 1 auto; display:flex; align-items:flex-end; gap:2px; overflow-x:auto; overflow-y:hidden; padding:0 2px 1px; scrollbar-width:thin; }
.playtest-item { flex:0 0 72px; height:78px; display:grid; place-items:center; padding:1px; border:0; border-radius:12px; background:transparent; box-shadow:none; transition:transform .12s ease, filter .12s ease; }
.playtest-item:hover { transform:translateY(-5px) scale(1.04); filter:drop-shadow(0 5px 3px rgba(0,0,0,.22)); }
.playtest-item:focus-visible { outline:3px solid #fff2a2; outline-offset:-3px; }
.playtest-item img { width:100%; height:100%; object-fit:contain; }
.playtest-item.selected { transform:translateY(-8px) scale(1.08); background:rgba(255,221,74,.38); box-shadow:0 0 0 4px rgba(255,245,179,.9),0 5px 0 rgba(91,39,94,.25); }
.playtest-inventory-empty { align-self:center; color:#665e5b; font-size:10px; font-style:italic; }
.dashboard-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); place-items:stretch; gap:5px; padding:10px 8px 10px 2px; }
.dashboard-round-button { width:72px; max-width:100%; aspect-ratio:1/1; padding:0; border:6px solid #4c2455; border-radius:50%; background:radial-gradient(circle at 38% 32%,#f4d84f,#d29425 72%); color:#642661; font:1000 clamp(30px,4vw,56px)/1 Georgia,serif; box-shadow:inset 0 0 0 4px #b65692,0 4px 0 #48214f; }
.dashboard-tool-button { min-width:0; min-height:0; overflow:hidden; padding:1px; border:3px solid #4c2455; border-radius:14px; background:radial-gradient(circle at 38% 32%,#efe1aa,#c39a4f 74%); color:#642661; font:1000 clamp(7px,.8vw,12px)/1.05 system-ui,sans-serif; letter-spacing:-.025em; white-space:nowrap; box-shadow:inset 0 0 0 2px #c477a7,0 3px 0 #48214f; }
#playtestQuickSettingsButton { font-size:clamp(7px,.64vw,10px); }
.dashboard-tool-button.help { border-radius:50%; background:radial-gradient(circle at 38% 32%,#f4d84f,#d29425 72%); }

.playtest-window button, .playtest-window select, .playtest-window input { touch-action:manipulation; }
.playtest-window button { transition:transform .08s ease,filter .08s ease,box-shadow .08s ease; }
.playtest-window button:hover:not(:disabled), .playtest-window button:focus-visible:not(:disabled) { filter:brightness(1.1) saturate(1.06); outline:3px solid #fff2a2; outline-offset:2px; }
.playtest-window button:active:not(:disabled) { transform:translateY(3px) scale(.97); box-shadow:0 1px 0 rgba(45,22,50,.8); }
.playtest-window button:disabled { cursor:not-allowed; filter:grayscale(.8); opacity:.48; box-shadow:none; }
.playtest-window .playtest-hotspot,
.playtest-window .playtest-hotspot:hover:not(:disabled),
.playtest-window .playtest-hotspot:focus:not(:disabled),
.playtest-window .playtest-hotspot:focus-visible:not(:disabled),
.playtest-window .playtest-hotspot:active:not(:disabled) { border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; filter:none !important; transform:none !important; }

.playtest-title-screen { position:absolute; inset:0; z-index:55; display:grid; grid-template-rows:75% 25%; overflow:hidden; background:#451b55; }
.playtest-title-screen[hidden] { display:none; }
.playtest-title-screen > img { width:100%; height:100%; object-fit:cover; }
.playtest-title-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:1.3%; padding:3% 6%; border-top:7px solid #40214f; background:linear-gradient(180deg,#bd6bcd,#7a3d9b); }
.playtest-title-actions button { min-height:52px; padding:8px 7px; border:4px solid #4d2956; border-radius:16px; background:#f0ce73; color:#44283f; font-size:clamp(10px,1.25vw,18px); font-weight:1000; box-shadow:0 5px 0 #48214f; }
.playtest-title-actions button.primary { background:#f7b943; }

.playtest-card-overlay { position:absolute; inset:0; z-index:60; display:grid; place-items:center; padding:4%; background:rgba(31,14,39,.86); backdrop-filter:blur(4px); }
.playtest-card-overlay[hidden] { display:none; }
.playtest-confirm-card { z-index:1; }
#playtestConfirmOverlay { z-index:90; }
#playtestSettingsOverlay, #playtestSaveLoadOverlay, #playtestInfoOverlay { z-index:75; }
#playtestCompletionOverlay { z-index:80; background:radial-gradient(circle,rgba(98,54,120,.72),rgba(24,64,58,.95)); }
.playtest-toy-card { width:min(720px,92%); max-height:92%; overflow:auto; padding:4%; border:6px solid #5d2b67; border-radius:28px; background:linear-gradient(180deg,#fff8d7,#efcf81); color:#402d40; text-align:center; box-shadow:0 20px 70px rgba(0,0,0,.62),inset 0 0 0 4px #d781b2; }
.playtest-toy-card > header { display:flex; align-items:start; justify-content:space-between; gap:20px; text-align:left; }
.playtest-toy-card h2 { margin:0 0 6px; color:#713071; font:1000 clamp(24px,3vw,40px)/1.1 Georgia,serif; }
.playtest-toy-card p { margin:5px 0 16px; font-size:clamp(12px,1.4vw,17px); }
.playtest-toy-card > header > button { flex:0 0 44px; min-height:44px; padding:0; border:3px solid #57305f; border-radius:50%; background:#df8e75; color:#4f244f; font-size:24px; }
.playtest-card-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px; }
.playtest-card-actions button, .slot-actions button { min-width:120px; min-height:46px; border:4px solid #59305d; border-radius:14px; background:#e9c96d; color:#442c42; font-weight:1000; box-shadow:0 4px 0 #4c2850; }
.playtest-card-actions button.primary, .slot-actions button.primary { background:#79c58d; }
.playtest-card-actions button.danger, .slot-actions button.danger { background:#df8378; }

.playtest-settings-card { width:min(900px,96%); }
.playtest-settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; text-align:left; }
.playtest-settings-grid fieldset { min-width:0; margin:0; padding:14px; border:3px solid #7c4b72; border-radius:16px; background:rgba(255,255,255,.35); }
.playtest-settings-grid legend { padding:0 6px; color:#6d306c; font-weight:1000; }
.playtest-settings-grid label { display:grid; gap:4px; margin:9px 0; font-size:12px; font-weight:800; }
.playtest-settings-grid .toggle-label { display:flex; align-items:center; gap:8px; }
.playtest-settings-grid input[type=range], .playtest-settings-grid select { width:100%; min-height:44px; }
.playtest-settings-grid .toggle-label { min-height:44px; }
.playtest-settings-grid output { display:block; margin-top:10px; color:#685568; font-size:10px; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.segmented button { min-height:44px; padding:5px; border:3px solid #59305d; border-radius:11px; background:#e8c56c; color:#442c42; font-weight:900; }

.playtest-save-slots { display:grid; gap:10px; text-align:left; }
.playtest-save-slot { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:3px solid #78506f; border-radius:15px; background:rgba(255,255,255,.43); }
.playtest-save-slot > div:first-child { min-width:0; display:grid; gap:4px; }
.playtest-save-slot span { overflow:hidden; color:#675467; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.slot-actions { display:flex; gap:7px; }
.slot-actions button { min-width:76px; min-height:44px; }

.playtest-info-card { width:min(930px,96%); text-align:left; }
.playtest-info-body { max-height:58vh; overflow:auto; }
.playtest-map-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.map-location { padding:8px; border:3px solid #694169; border-radius:12px; background:#f2dea6; }
.map-location.current { box-shadow:0 0 0 4px #e655a4; }
.map-location.undiscovered { filter:grayscale(.8); opacity:.62; }
.map-location span { display:block; margin-top:3px; font-size:10px; }
.picture-list-grid h3, .picture-inventory h3 { color:#6d306c; }
.picture-list-animals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.picture-animal { display:grid; gap:4px; padding:12px; border:3px dashed #8b7777; border-radius:13px; background:#eee1bc; }
.picture-animal.rescued { border-style:solid; background:#bce3b3; box-shadow:inset 0 0 0 3px rgba(255,255,255,.5); }
.picture-animal span { font-size:11px; }
.hint-copy { padding:18px; border:3px solid #86537d; border-radius:16px; background:#fff9df; text-align:center; }
.hint-copy p { font-size:clamp(16px,2vw,24px); font-weight:900; }
.hint-copy small { color:#6e5d69; }

.playtest-dialogue.subtitles-muted span { visibility:hidden; }
.playtest-overlay:fullscreen { padding:10px; background:#100a18; }
.playtest-overlay:fullscreen .playtest-window { width:min(96vw,calc((100vh - 56px) * 4 / 3)); }

.playtest-dialogue { position:absolute; z-index:40; left:7%; right:7%; bottom:26.8%; min-height:68px; display:grid; grid-template-columns:145px minmax(0,1fr) 90px; align-items:center; gap:11px; padding:9px 13px; border:4px solid #5f2b65; border-radius:18px; background:rgba(255,249,219,.96); color:#2f2929; box-shadow:0 10px 28px rgba(35,18,36,.35); text-align:left; cursor:pointer; }
.playtest-dialogue[hidden] { display:none; }
.playtest-dialogue strong { color:#7b2d78; font-family:Georgia,serif; font-size:17px; }
.playtest-dialogue span { font-size:15px; font-weight:700; line-height:1.25; }
.playtest-dialogue em { color:#806e5b; font-size:9px; text-align:right; }
.playtest-dialogue.is-revealing { animation:playtestDialogueReveal .16s ease-out both; }
@keyframes playtestDialogueReveal { from { opacity:.72; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.playtest-minigame { position:absolute; inset:0 0 25% 0; z-index:45; display:grid; place-items:center; background:rgba(28,18,42,.9); backdrop-filter:blur(3px); }
.playtest-minigame[hidden] { display:none; }
.playtest-minigame section { width:min(690px,88%); padding:24px; border:6px solid #5e2a67; border-radius:24px; background:linear-gradient(180deg,#fff6ce,#f0c879); color:#3e2940; text-align:center; box-shadow:0 22px 70px rgba(0,0,0,.55),inset 0 0 0 4px #d588b9; }
.playtest-minigame h3 { margin:0; color:#7a2c78; font-family:Georgia,serif; font-size:29px; }
.playtest-minigame p { color:#55444f; font-size:14px; }
#playtestMinigameButtons { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:20px 0; }
#playtestMinigameButtons button { min-width:118px; min-height:66px; border:5px solid #5c335e; border-radius:18px; color:#2f2630; font-size:15px; font-weight:1000; box-shadow:0 5px 0 #4d2a51; }
#playtestMinigameProgress { display:block; min-height:48px; color:#60345f; font-size:18px; font-weight:900; white-space:pre-line; }
#playtestMinigameCancel { min-width:120px; min-height:44px; margin-top:6px; padding:8px 18px; border:4px solid #57305f; border-radius:14px; background:#fff1ba; color:#35243a; font-size:14px; font-weight:1000; box-shadow:0 4px 0 #4d2a51; }

.playtest-overlay.reduced-motion *, .playtest-overlay.reduced-motion *::before, .playtest-overlay.reduced-motion *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }

@media (max-width: 900px), (max-height: 720px) {
  .playtest-window { width:min(960px,98vw,calc((100vh - 48px) * 4 / 3)); grid-template-rows:34px auto; }
  .playtest-chrome { height:34px; padding-block:3px; }
  .playtest-chrome span { display:none; }
  .quest-paper { flex-basis:105px; }
  .dashboard-companion { width:68px; }
  .playtest-item { flex-basis:58px; height:62px; }
  .playtest-dialogue { grid-template-columns:110px minmax(0,1fr); bottom:26%; }
  .playtest-dialogue em { display:none; }
  .playtest-settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .playtest-settings-grid fieldset { padding:7px; }
  .playtest-toy-card { padding:2.5%; }
  .dashboard-tools { grid-template-rows:repeat(3,minmax(44px,1fr)); gap:1px; padding:1px 3px 1px 0; }
}

@media (max-width: 620px) {
  .playtest-title-actions { grid-template-columns:repeat(2,minmax(0,1fr)); padding:1.6% 4%; }
  .playtest-title-actions button { min-height:44px; }
  .playtest-settings-grid { grid-template-columns:1fr; }
  .playtest-map-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .picture-list-animals { grid-template-columns:1fr; }
}

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 230px minmax(0, 1fr) 330px; }
  .brand-block { min-width: 245px; }
  .toolbar button:not(.icon-button):not(.primary) { display: none; }
}
@media (max-width: 960px) {
  .workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .right-panel { position: absolute; z-index: 40; right: 0; top: 72px; bottom: 30px; width: 360px; box-shadow: -14px 0 35px rgba(0,0,0,.45); }
  .brand-block p { display: none; }
  .search-box { display: none; }
}