:root {
  color-scheme: dark;
  --ink: #f6f0df;
  --muted: #bdb4c3;
  --panel: #21182a;
  --panel-2: #30213d;
  --purple: #794691;
  --purple-bright: #b982d1;
  --gold: #e0b65a;
  --gold-pale: #ffe3a0;
  --danger: #e16058;
  --focus: #7de5ff;
  --line: rgba(255, 255, 255, 0.16);
  --shadow: 0 18px 60px rgba(5, 2, 9, 0.45);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: #100c14;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, rgba(128, 75, 151, 0.36), transparent 42rem),
    linear-gradient(#16101d, #0c0910);
}

button, select, input { font: inherit; }

button, select {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  background: linear-gradient(#41304f, #2b2036);
}

button {
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

button:hover { border-color: var(--gold); color: var(--gold-pale); }

button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button:disabled { cursor: not-allowed; opacity: 0.48; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.5rem;
  left: 0.5rem;
  transform: translateY(-180%);
  padding: 0.7rem 1rem;
  color: #111;
  background: var(--focus);
}

.skip-link:focus { transform: translateY(0); }

.game-shell {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0.8rem;
}

.game-header, .objective-strip, .scene-meta, .interaction-panel {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(48, 33, 61, 0.96), rgba(25, 19, 32, 0.97));
  box-shadow: var(--shadow);
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem 0.75rem 0 0;
}

.brand-block { display: flex; align-items: center; gap: 0.75rem; }
.brand-block img { filter: drop-shadow(0 2px 8px rgba(224, 182, 90, 0.35)); }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.05rem, 2.2vw, 1.65rem); letter-spacing: 0.02em; }
h2 { margin-bottom: 0; font-size: 1.05rem; }

.eyebrow, .objective-label, .speaker {
  margin: 0 0 0.2rem;
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.progress-block { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; color: var(--muted); font-size: 0.86rem; }
#score-label { color: var(--gold-pale); }

.objective-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-top: 0;
  border-bottom: 0;
}

.objective-strip .objective-label { margin: 0; }
.objective-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.compact-button { min-height: 2.25rem; padding: 0.3rem 0.75rem; }

.scene-frame { position: relative; }

.scene-viewport {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  border: 2px solid #09070b;
  background: #5d443c;
}

.scene-viewport::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background-size: cover;
}

.studio-theme::before {
  background:
    linear-gradient(180deg, transparent 65%, rgba(33, 19, 17, 0.55)),
    radial-gradient(circle at 55% 34%, rgba(255, 205, 120, 0.34), transparent 25%),
    linear-gradient(135deg, #a67a55 0 24%, #655048 24% 25%, #8d664d 25% 61%, #4e3c3a 61%);
}

.green-theme::before {
  background:
    radial-gradient(ellipse at 28% 72%, #edb4cb 0 12%, transparent 12.4%),
    radial-gradient(ellipse at 47% 70%, #9670b1 0 16%, transparent 16.4%),
    radial-gradient(ellipse at 66% 72%, #ddc778 0 14%, transparent 14.4%),
    linear-gradient(150deg, #8fb6a1 0 38%, #5d826f 38% 65%, #405d50 65%);
}

.driveway-theme::before {
  background:
    linear-gradient(180deg, #88bfd2 0 47%, #638c69 47% 58%, #686b70 58% 100%);
}

.airport-theme::before {
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.5) 10.3% 10.8%, transparent 11% 89%, rgba(255,255,255,.5) 89.3% 89.8%, transparent 90%),
    linear-gradient(180deg, #b9d4e2 0 39%, #d7dde0 39% 66%, #74818a 66% 100%);
}

.nana-theme::before {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 226, 145, .42), transparent 22%),
    linear-gradient(180deg, #d8b27d 0 48%, #7b9b76 48% 55%, #775c48 55% 100%);
}

.lux-room-theme::before {
  background:
    radial-gradient(circle at 52% 42%, rgba(150, 83, 183, .36), transparent 28%),
    repeating-linear-gradient(90deg, #15101b 0 8%, #211429 8% 9%, #15101b 9% 17%);
}

.soi4-theme::before {
  background:
    linear-gradient(90deg, rgba(241, 60, 166, .2), transparent 24% 72%, rgba(54, 199, 224, .2)),
    linear-gradient(180deg, #20172d 0 53%, #4f3c43 53% 100%);
}

.courtyard-theme::before {
  background:
    radial-gradient(circle at 50% 30%, rgba(224, 62, 151, .25), transparent 36%),
    linear-gradient(180deg, #25132e 0 52%, #5f344e 52% 64%, #28212d 64%);
}

.lounge-theme::before {
  background:
    radial-gradient(circle at 49% 29%, rgba(226, 182, 90, .28), transparent 22%),
    linear-gradient(135deg, #2a1834, #5d2b69 47%, #1a111f 48%);
}

.japan-street-theme::before {
  background:
    radial-gradient(circle at 48% 26%, rgba(214, 67, 54, .2), transparent 24%),
    linear-gradient(180deg, #20242a 0 54%, #635747 54% 61%, #25282b 61% 100%);
}

.japan-dining-theme::before {
  background:
    linear-gradient(90deg, rgba(139, 38, 32, .18), transparent 24% 76%, rgba(139, 38, 32, .18)),
    linear-gradient(180deg, #2a201d 0 57%, #8a7455 57% 62%, #322723 62%);
}

.japan-private-theme::before {
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 239, 190, .28), transparent 22%),
    linear-gradient(135deg, #292522, #514538 48%, #1d1b1b 49%);
}

.hk-hotel-theme::before {
  background:
    radial-gradient(circle at 72% 18%, rgba(77, 171, 210, .28), transparent 24%),
    linear-gradient(180deg, #18364a 0 36%, #6b4f77 36% 54%, #2b2333 54% 100%);
}

.hk-corridor-theme::before {
  background:
    linear-gradient(90deg, rgba(121, 65, 143, .28), transparent 30% 70%, rgba(213, 174, 80, .16)),
    linear-gradient(180deg, #211628 0 58%, #47394d 58% 64%, #1c1820 64%);
}

.hk-ballroom-theme::before {
  background:
    radial-gradient(circle at 50% 25%, rgba(231, 190, 93, .3), transparent 24%),
    linear-gradient(135deg, #28152f, #6a3477 46%, #16101b 47%);
}

.hk-terrace-theme::before {
  background:
    radial-gradient(circle at 70% 25%, rgba(73, 177, 220, .25), transparent 28%),
    linear-gradient(180deg, #112b42 0 48%, #654b75 48% 55%, #171722 55% 100%);
}

.scene-art { position: absolute; inset: 0; z-index: -1; }

.art-piece {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(255,255,255,.74);
  border: 3px solid rgba(29, 19, 30, 0.56);
  border-radius: 0.35rem;
  background: linear-gradient(145deg, rgba(61,45,68,.92), rgba(31,23,35,.92));
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.15);
  font: 700 clamp(0.55rem, 1.2vw, 0.9rem)/1 ui-monospace, monospace;
  letter-spacing: .08em;
  text-align: center;
}

.art-piece.monitor { border-color: #312544; background: linear-gradient(145deg, #6e3a83, #241632); }
.art-piece.desk { border-radius: .3rem .3rem 0 0; background: linear-gradient(#75523b, #3d2a25); }
.art-piece.shelves { background: repeating-linear-gradient(180deg, #3c2b27 0 15%, #b08a58 15% 17%, #3c2b27 17% 32%); }
.art-piece.door { background: linear-gradient(90deg, #3c2823, #725241 70%, #2f211e); }
.art-piece.person { align-items: flex-start; padding-top: 1rem; border-radius: 50% 50% 12% 12%; background: linear-gradient(90deg, #d19a54, #f0c477 45%, #8c503d); box-shadow: 0 8px 14px rgba(0,0,0,.34); }
.art-piece.person.green { background: linear-gradient(100deg, #4b7568, #83baa5 50%, #c69c75); }
.art-piece.person.buyer { background: linear-gradient(100deg, #5f6c7d, #b7c3cd 50%, #6e7988); }
.art-piece.sofa { border-radius: 2rem 2rem .7rem .7rem; background: radial-gradient(circle at 35% 20%, #b991c6 0 20%, transparent 21%), linear-gradient(#79578b, #4f3a61); }
.art-piece.camera { background: #25272c; }
.art-piece.car { border-radius: 45% 55% 20% 18%; background: linear-gradient(165deg, #e6e9ea 0 32%, #5f6770 33% 48%, #20252b 49% 100%); }
.art-piece.car.skoda { background: linear-gradient(165deg, #b3c3ad 0 35%, #566558 36% 53%, #28312c 54%); }
.art-piece.house { background: linear-gradient(150deg, #785647 0 18%, #c39c76 18%); }
.art-piece.windows { color: #253541; border: 0; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(201,231,242,.68) 0 18%, #708893 18.5% 19.5%); }
.art-piece.airport { background: linear-gradient(#dce5e9 0 42%, #526b7a 43%); color: #1c2e3a; }
.art-piece.charger { background: linear-gradient(90deg, #697682, #cad2d5 50%, #5f6c75); }
.art-piece.kiosk { background: linear-gradient(#31485a 0 26%, #d7e4ea 27% 67%, #4b5b66 68%); }
.art-piece.gate { background: linear-gradient(90deg, #263b4e, #94abb7 48%, #273c4c 50%); }
.art-piece.hotel-desk { background: linear-gradient(#dfc18f 0 28%, #6e4935 29%); color: #2e1e16; }
.art-piece.palms { border-radius: 50% 50% 10% 10%; background: repeating-linear-gradient(110deg, #3f7a50 0 12%, #7dad65 12% 20%, #315f40 20% 31%); }
.art-piece.luggage { background: repeating-linear-gradient(90deg, #7a4738 0 28%, #c68b51 29% 47%, #364b56 48% 74%, #b9a17b 75%); }
.art-piece.person.ez { background: linear-gradient(100deg, #315e59, #73d0bd 50%, #9d7759); }
.art-piece.person.seller { background: linear-gradient(100deg, #65402e, #df9d60 50%, #2e2537); }
.art-piece.person.doorman { background: linear-gradient(100deg, #1d1824, #9a75b6 50%, #17131c); }
.art-piece.person.promoter { background: linear-gradient(100deg, #6a3047, #e98da8 50%, #bd6f9e); }
.art-piece.person.manager { background: linear-gradient(100deg, #3f3430, #d6bd79 50%, #5d4a38); }
.art-piece.purple-door, .art-piece.purple-stairs { background: linear-gradient(90deg, #27172f, #825299 50%, #25152e); }
.art-piece.privacy-screen { border-color: #8b5ba1; background: repeating-linear-gradient(180deg, #2b1e34 0 5%, #563667 5.5% 6.5%); }
.art-piece.silhouette { border-radius: 50% 50% 10% 10%; background: linear-gradient(90deg, #100d14, #271b31 50%, #0d0a10); color: #c99ae0; }
.art-piece.gloved-hand { border-radius: 60% 20% 40% 60%; background: linear-gradient(120deg, #17141c, #5d516b); }
.art-piece.console { background: repeating-linear-gradient(90deg, #202735 0 12%, #6c4c87 12% 15%); }
.art-piece.awning { border: 0; background: repeating-linear-gradient(90deg, #bd316f 0 12%, #322049 12% 24%); }
.art-piece.watch-stall { background: linear-gradient(#6d4653 0 20%, #291d26 21% 72%, #92704e 73%); }
.art-piece.watch-display { border-radius: 50%; color: #2b1c16; background: radial-gradient(circle, #e6c570 0 25%, #4c332c 26% 44%, #c3a579 45%); }
.art-piece.balconies { border: 0; background: repeating-linear-gradient(90deg, #34213f 0 15%, #c54485 15.5% 17%, #34213f 17% 32%); }
.art-piece.velvet-rope { border: 0; border-radius: 1rem; background: linear-gradient(180deg, transparent 0 38%, #9f255c 39% 57%, transparent 58%); }
.art-piece.booths { border-radius: 2rem 2rem .5rem .5rem; background: linear-gradient(#754582, #37213f); }
.art-piece.lounge-emblem { border-color: var(--gold); color: var(--gold-pale); background: radial-gradient(circle, #6b3f78, #25152d); }
.art-piece.video-wall { border-color: #6cb5dc; background: linear-gradient(135deg, #23465c, #182635); }
.art-piece.departure-board { color: var(--gold-pale); background: linear-gradient(#33203c, #17101c); }
.art-piece.japan-street { border: 0; border-radius: 0; background: repeating-linear-gradient(90deg, #3f4243 0 8%, #5c5750 8% 9%); }
.art-piece.steakhouse-front { background: linear-gradient(90deg, #201916, #6b4932 48%, #201916 50%); }
.art-piece.lanterns { border: 0; background: repeating-radial-gradient(circle, #d75e4c 0 10%, #7a2825 11% 17%, transparent 18% 27%); }
.art-piece.piano-window { color: #ece5d4; background: repeating-linear-gradient(90deg, #171717 0 8%, #e5dfd1 8% 13%, #171717 13% 21%); }
.art-piece.tea-display { color: #2a2825; background: radial-gradient(circle at 35% 55%, #d7d2bd 0 16%, transparent 17%), radial-gradient(circle at 65% 55%, #c7b996 0 18%, transparent 19%), #746a58; }
.art-piece.person.blondie { background: linear-gradient(100deg, #8b6944, #f0d875 50%, #d2a95c); }
.art-piece.person.marcelo { background: linear-gradient(100deg, #352827, #d6a85e 50%, #4f332c); }
.art-piece.person.mommy { background: linear-gradient(100deg, #242323, #d8d0bd 50%, #5c4741); }
.art-piece.person.hr { background: linear-gradient(100deg, #30485c, #82b5e2 50%, #32465a); }
.art-piece.person.wizard { background: linear-gradient(100deg, #24172d, #aa78d0 50%, #35203e); }
.art-piece.person.madame { background: linear-gradient(100deg, #231a27, #c8a2da 50%, #563c62); }
.art-piece.dining-table { border-radius: 50% 50% .4rem .4rem; color: #3c3026; background: linear-gradient(#eee4cf 0 25%, #765232 26%); }
.art-piece.ownership-docs { color: #332b22; background: repeating-linear-gradient(180deg, #e8ddc3 0 18%, #8e8068 19% 21%); }
.art-piece.menu { color: var(--gold-pale); background: linear-gradient(#5d2020, #291816); }
.art-piece.private-door { background: linear-gradient(90deg, #171516, #5f4737 48%, #171516 50%); }
.art-piece.authentication-table { color: var(--gold-pale); background: radial-gradient(circle at 20% 48%, #d9b85d 0 9%, transparent 10%), radial-gradient(circle at 50% 48%, #c4a35a 0 9%, transparent 10%), radial-gradient(circle at 80% 48%, #b29355 0 9%, transparent 10%), #382b25; }
.art-piece.task-lights { border: 0; background: radial-gradient(ellipse, rgba(255,241,190,.75) 0 18%, transparent 50%); }
.art-piece.kitchen-pass { color: #2d2923; background: repeating-linear-gradient(90deg, #ded3b9 0 18%, #8c7a62 19% 22%); }
.art-piece.harbor-windows, .art-piece.harbor-skyline { border-color: #5b91ad; background: linear-gradient(180deg, #163b57, #2e6680 58%, #111725 59%); }
.art-piece.gala-desk { color: var(--gold-pale); background: linear-gradient(#6c3e79 0 30%, #2b1b35 31%); }
.art-piece.conference-badges { color: #18232d; background: repeating-linear-gradient(90deg, #a8cbe0 0 27%, #f0d79a 28% 55%, #b89ed1 56% 83%); }
.art-piece.service-lift, .art-piece.ballroom-door, .art-piece.terrace-doors { color: var(--gold-pale); background: linear-gradient(90deg, #17131c, #755083 48%, #17131c 50%); }
.art-piece.cloakroom { background: repeating-linear-gradient(90deg, #241d2a 0 15%, #775f7d 15% 18%); }
.art-piece.birkin-shelf { color: #321526; background: linear-gradient(#ef8dbb, #9f426d); }
.art-piece.gala-screens { border-color: #78b5d5; background: radial-gradient(circle, #eee2c6 0 9%, #8c5a91 10% 23%, #253a4b 24%); }
.art-piece.av-console { background: repeating-linear-gradient(90deg, #202735 0 12%, #8a5aa0 12% 15%); }
.art-piece.ballroom-emblem { color: var(--gold-pale); border-color: var(--gold); background: radial-gradient(circle, #734780, #211429); }
.art-piece.evidence-lectern { color: #30251b; background: repeating-linear-gradient(90deg, #decf9e 0 19%, #6b5237 20% 23%); }
.art-piece.contract-table { color: #2e281f; background: linear-gradient(#e8ddc3 0 38%, #60432e 39%); }

.scene-vignette {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(10, 4, 14, 0.45);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 12% 82%, rgba(5,3,7,.28));
}

.hotspot-layer { position: absolute; z-index: 3; inset: 0; }

.hotspot {
  position: absolute;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 2px dashed rgba(255, 227, 160, 0.2);
  border-radius: 0.75rem;
  color: transparent;
  background: rgba(255,255,255,.015);
  box-shadow: none;
}

.hotspot::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.62rem;
  height: 0.62rem;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 227, 160, 0.72);
  border-radius: 50%;
  background: rgba(68, 38, 82, .65);
  box-shadow: 0 0 0 4px rgba(255, 227, 160, .08), 0 0 18px rgba(255, 227, 160, .5);
  content: "";
}

.hotspot .hotspot-label {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  width: max-content;
  max-width: 12rem;
  padding: 0.28rem 0.5rem;
  transform: translateX(-50%) translateY(.3rem);
  border: 1px solid var(--gold);
  border-radius: .25rem;
  color: var(--ink);
  background: rgba(25, 16, 31, .95);
  opacity: 0;
  pointer-events: none;
  font: 700 .72rem/1.2 ui-monospace, monospace;
  text-align: center;
  transition: opacity .14s ease, transform .14s ease;
}

.hotspot:hover, .hotspot:focus-visible {
  z-index: 4;
  border-color: var(--gold);
  color: var(--ink);
  background: rgba(224, 182, 90, .12);
}

.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label,
.show-hotspots .hotspot .hotspot-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.show-hotspots .hotspot { border-color: rgba(125,229,255,.82); background: rgba(125,229,255,.08); }

.ambient-caption {
  position: absolute;
  z-index: 5;
  right: 1rem;
  bottom: 0.65rem;
  max-width: 70%;
  padding: .3rem .55rem;
  border-radius: .2rem;
  color: #fff;
  background: rgba(0,0,0,.72);
  font: italic .8rem/1.3 Georgia, serif;
  pointer-events: none;
}

.scene-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
  border-top: 0;
}

.scene-meta p { margin-bottom: 0; color: var(--muted); font-size: .83rem; }
.scene-meta > p { max-width: 60%; text-align: right; }

.interaction-panel { padding: .7rem; border-top: 0; border-radius: 0 0 .75rem .75rem; }

.message-panel {
  min-height: 4.3rem;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: .35rem;
  background: rgba(10,7,13,.55);
}

#message-speaker { color: var(--gold); font: 800 .72rem/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
#message-text { margin: .35rem 0 0; line-height: 1.35; }

.controls-grid { display: grid; grid-template-columns: minmax(20rem, .9fr) minmax(24rem, 1.5fr); gap: .75rem; margin-top: .65rem; }
.panel-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: .4rem; }
.panel-heading h2 { color: var(--gold-pale); font: 800 .77rem/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.panel-heading span { color: var(--muted); font-size: .72rem; }

.verb-bar, .inventory { display: grid; gap: .4rem; }
.verb-bar { grid-template-columns: repeat(3, 1fr); }
.verb-bar button { min-width: 0; font-size: .86rem; }
.verb-bar button[aria-pressed="true"] { border-color: var(--gold); color: #21160a; background: linear-gradient(#ffe3a0, #c99335); box-shadow: 0 0 18px rgba(224,182,90,.25); }

.inventory { grid-template-columns: repeat(6, minmax(4.2rem, 1fr)); min-height: 4.6rem; }
.inventory-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 4.6rem; padding: .3rem; line-height: 1.05; }
.inventory-item .item-icon { color: var(--gold-pale); font-size: 1.35rem; }
.inventory-item .item-name { overflow: hidden; width: 100%; margin-top: .28rem; text-overflow: ellipsis; white-space: nowrap; font: 700 .65rem/1.1 ui-monospace, monospace; text-align: center; }
.inventory-item[aria-pressed="true"] { border-color: var(--focus); background: linear-gradient(#285066, #233546); box-shadow: inset 0 0 0 2px rgba(125,229,255,.18); }
.inventory-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 4.6rem; color: var(--muted); border: 1px dashed var(--line); border-radius: .4rem; }

.system-controls { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.system-controls button { min-height: 2.35rem; padding: .35rem .75rem; font-size: .78rem; }

.overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 5, 11, .82);
  backdrop-filter: blur(5px);
}

.overlay[hidden], [hidden] { display: none !important; }

.dialogue-card, .failure-card, .modal-card, .chapter-card, .authentication-card {
  width: min(780px, 100%);
  border: 2px solid var(--gold);
  border-radius: .65rem;
  background: linear-gradient(145deg, #382344, #17111d);
  box-shadow: 0 25px 80px rgba(0,0,0,.65);
}

.dialogue-card { display: grid; grid-template-columns: 110px 1fr; overflow: hidden; }

.portrait {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #24162d;
  background: radial-gradient(circle at 50% 34%, #ffe0a1 0 18%, transparent 19%), linear-gradient(145deg, var(--portrait-color, #d7a15e), #61406f);
  font-size: 3rem;
  font-weight: 900;
  text-shadow: 0 2px rgba(255,255,255,.25);
}

.dialogue-content { display: flex; flex-direction: column; min-height: 220px; padding: 1.1rem; }
.dialogue-content #dialogue-text { margin: .4rem 0 1rem; font-size: 1.08rem; line-height: 1.5; }
.dialogue-content #dialogue-text.is-typing::after { color: var(--gold); content: " ▌"; }
.dialogue-choices { display: grid; gap: .45rem; margin-top: auto; }
.dialogue-choices button { min-height: 2.5rem; text-align: left; }
.dialogue-actions { display: flex; gap: .5rem; margin-top: auto; }
.dialogue-actions button { margin-left: auto; }
.dialogue-actions button + button { margin-left: 0; }
.secondary { color: var(--muted); background: transparent; }

.failure-overlay { background: radial-gradient(circle, rgba(107,31,29,.56), rgba(8,5,11,.94)); }
.failure-card { max-width: 680px; padding: 2rem; border-color: var(--danger); text-align: center; }
.failure-card h2 { margin: .4rem 0 1rem; color: #ffaaa3; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: .05em; }
.failure-card p:not(.eyebrow) { font-size: 1.1rem; line-height: 1.5; }
.failure-card .failure-hint { padding: .65rem; color: var(--gold-pale); border: 1px solid rgba(255, 227, 160, .28); border-radius: .35rem; background: rgba(0, 0, 0, .2); font-size: .95rem; }
.failure-card button { margin-top: 1rem; border-color: #ffaaa3; }

.chapter-card-overlay {
  background: radial-gradient(circle, rgba(103, 57, 126, .72), rgba(8, 5, 11, .96));
}

.chapter-card {
  max-width: 700px;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
}

.chapter-card h2 {
  margin: .4rem 0 1rem;
  color: var(--gold-pale);
  font-size: clamp(2.2rem, 8vw, 5rem);
  letter-spacing: .06em;
}

.chapter-card p:not(.eyebrow) { font-size: 1.1rem; line-height: 1.6; }
.chapter-card button { margin-top: 1rem; min-width: 10rem; border-color: var(--gold); }

.authentication-overlay { align-items: start; overflow: auto; }

.authentication-card {
  width: min(940px, 100%);
  margin: auto;
  padding: 1.1rem;
}

.authentication-heading, .authentication-actions, .assignment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.authentication-heading { padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.authentication-heading h2 { font-size: 1.35rem; }
.authentication-heading button { min-width: 2.5rem; min-height: 2.5rem; padding: 0; font-size: 1.5rem; }
.authentication-card > p { margin: .85rem 0; color: var(--muted); line-height: 1.45; }
.authentication-watch-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.authentication-watch-tabs button[aria-selected="true"] { color: #20150a; border-color: var(--gold); background: var(--gold-pale); }
.authentication-evidence, .authentication-assignments { margin-top: .9rem; padding: .8rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(8, 5, 11, .28); }
.authentication-evidence h3, .authentication-assignments h3 { margin: 0 0 .65rem; color: var(--gold-pale); font-size: .9rem; }
#authentication-evidence-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.evidence-button[data-inspected="true"] { border-color: #7fcf9b; color: #d8ffe5; background: linear-gradient(#28503a, #1d3529); }
.authentication-evidence-text { min-height: 3.7rem; margin: .7rem 0 0; padding: .65rem; border-left: 3px solid var(--gold); background: rgba(0, 0, 0, .26); line-height: 1.4; }
#authentication-assignment-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.assignment-row { align-items: stretch; flex-direction: column; }
.assignment-row span { align-self: flex-start; color: var(--gold-pale); font-weight: 700; }
.assignment-row select { width: 100%; min-height: 2.65rem; padding: .4rem; }
.authentication-status { min-height: 2.8rem; padding: .65rem; color: var(--gold-pale) !important; border: 1px solid rgba(224,182,90,.28); border-radius: .35rem; background: rgba(0,0,0,.2); }
.authentication-actions { justify-content: flex-end; }
.authentication-actions #authentication-submit { border-color: var(--gold); }

.modal-card { max-height: min(85vh, 720px); overflow: auto; padding: 1.1rem; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.modal-heading h2 { font-size: 1.35rem; }
.modal-heading button { min-width: 2.5rem; min-height: 2.5rem; padding: 0; font-size: 1.5rem; }
#panel-content { padding-top: 1rem; line-height: 1.5; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.setting-row input { width: 1.3rem; height: 1.3rem; accent-color: var(--purple-bright); }
.control-list { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
.control-list dt { color: var(--gold-pale); font-family: ui-monospace, monospace; }
.control-list dd { margin: 0; color: var(--muted); }

.debug-panel {
  position: fixed;
  z-index: 120;
  top: .7rem;
  right: .7rem;
  width: min(360px, calc(100vw - 1.4rem));
  max-height: calc(100vh - 1.4rem);
  overflow: auto;
  padding: .8rem;
  border: 2px solid var(--focus);
  border-radius: .5rem;
  background: rgba(10,19,25,.96);
  box-shadow: var(--shadow);
  font-family: ui-monospace, monospace;
  font-size: .75rem;
}
.debug-heading, .debug-jump { display: flex; align-items: center; gap: .4rem; }
.debug-heading { justify-content: space-between; margin-bottom: .7rem; color: var(--focus); }
.debug-heading button { min-width: 2.1rem; min-height: 2.1rem; padding: 0; }
.debug-panel label { display: block; margin-bottom: .3rem; }
.debug-jump select { flex: 1; min-width: 0; min-height: 2.5rem; }
.debug-panel > button { width: 100%; margin-top: .5rem; }
.debug-panel pre { overflow: auto; padding: .6rem; color: #bfeeff; border: 1px solid rgba(125,229,255,.2); background: #070e12; white-space: pre-wrap; word-break: break-word; }

.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 1rem;
  padding: .7rem 1rem;
  transform: translateX(-50%);
  border: 1px solid var(--gold);
  border-radius: .4rem;
  color: var(--ink);
  background: rgba(31,21,38,.96);
  box-shadow: var(--shadow);
}

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

@media (max-width: 860px) {
  .game-shell { padding: 0; }
  .game-header { border-radius: 0; }
  .controls-grid { grid-template-columns: 1fr; }
  .inventory { grid-template-columns: repeat(5, minmax(3.8rem, 1fr)); }
  .scene-viewport { min-height: 260px; }
}

@media (max-width: 600px) {
  .game-header { align-items: flex-start; }
  .brand-block img { display: none; }
  .objective-strip { grid-template-columns: 1fr auto; }
  .objective-label { grid-column: 1 / -1; }
  .scene-viewport { min-height: 210px; }
  .scene-meta { align-items: flex-start; }
  .scene-meta > p { display: none; }
  .inventory { grid-template-columns: repeat(3, 1fr); }
  .system-controls { justify-content: stretch; }
  .system-controls button { flex: 1; }
  .dialogue-card { grid-template-columns: 1fr; }
  .portrait { min-height: 72px; }
  .dialogue-content { min-height: 260px; }
  .authentication-watch-tabs, #authentication-evidence-list, #authentication-assignment-list { grid-template-columns: 1fr; }
}