:root {
  color-scheme: dark;
  --bg: #0b0616;
  --ink: #fff3df;
  --muted: rgba(255, 239, 224, .6);
  --gold: #e8c58e;
  --gold-soft: rgba(232, 197, 142, .32);
  --violet: #a982e3;
  --line: rgba(248, 217, 173, .4);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; min-height:0; }
body { margin: 0; overflow: hidden; color: var(--ink); background: #06030c; }
button, input { font: inherit; }
button { color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-shell {
  position: relative;
  isolation: isolate;
  width: min(100vw, 480px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 100px rgba(118, 76, 178, .2);
}
.game-shell::after { display:none; }

.scene-backdrop,
.dream-video,
.video-dimmer,
.case-background,
.background-breath { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-backdrop { z-index: -3; overflow: hidden; }
.case-background { display:block; object-fit:cover; object-position:center 42%; transform:scale(1.002); }
.background-breath { opacity:.18; background:radial-gradient(circle at 50% 30%,rgba(244,190,239,.12),transparent 34%); mix-blend-mode:screen; }
.dream-video { object-fit: cover; filter: saturate(.94) brightness(.66) contrast(1.04) hue-rotate(4deg); transform: scale(1.05); }
.video-dimmer {
  background:
    radial-gradient(circle at 50% 14%, rgba(244, 196, 255, .21), transparent 25%),
    linear-gradient(180deg, rgba(7,3,19,.12), rgba(12,5,29,.24) 46%, rgba(7,3,16,.92) 100%),
    linear-gradient(90deg, rgba(5,2,14,.48), transparent 28%, transparent 72%, rgba(5,2,14,.48));
}
.star-mesh { position: absolute; inset: 0; opacity: .18; mix-blend-mode: screen; background-image: linear-gradient(116deg, transparent 49.6%, rgba(255,255,255,.14) 50%, transparent 50.4%), radial-gradient(circle, rgba(255,245,222,.65) 0 1px, transparent 1.4px); background-size: 90px 90px, 34px 34px; mask-image: linear-gradient(180deg, transparent, #000 10%, #000 78%, transparent); }
.dream-haze { position: absolute; left: -12%; width: 124%; height: 31%; border-radius: 50%; filter: blur(38px); opacity: .38; animation: hazeDrift 12s ease-in-out infinite alternate; }
.haze-a { top: 18%; background: rgba(187,119,239,.24); }
.haze-b { top: 57%; background: rgba(255,164,215,.16); animation-delay: -6s; }
.particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe6be; box-shadow: 0 0 12px #f7bce9; animation: particleFloat 7s ease-in-out infinite; }
.p1 { left: 9%; top: 20%; animation-delay:-2s; }.p2 { left: 89%; top:17%; animation-delay:-5s; }.p3 { left:74%; top:42%; animation-delay:-1s; }.p4 { left:18%; top:59%; animation-delay:-4s; }.p5 { left:52%; top:29%; animation-delay:-6s; }.p6 { left:45%; top:72%; animation-delay:-3s; }

.topbar {
  position: absolute;
  z-index: 30;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(70px + env(safe-area-inset-top, 0px));
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 8px;
  background: linear-gradient(180deg, rgba(7,3,16,.78), transparent);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { padding: 0; border: 0; color: #fff0da; background: transparent; font: 400 clamp(24px,7vw,31px)/1 Georgia,serif; letter-spacing:.01em; text-shadow: 0 2px 24px rgba(242,203,255,.4); cursor:pointer; }
.brand span { display:inline-grid; place-items:center; width:.82em; height:.82em; margin:0 .02em; border:1px solid rgba(255,235,205,.7); border-radius:50%; color:var(--gold); font-size:.42em; line-height:1; vertical-align:.16em; }
.case-pill { min-height:38px; padding:0 14px; border:1px solid rgba(233,198,132,.6); border-radius:999px; color:#f9e4ca; background:rgba(24,13,46,.64); backdrop-filter:blur(14px); font:13px Georgia,serif; letter-spacing:.06em; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.case-pill:hover,.case-pill:focus-visible { transform:translateY(-2px); box-shadow:0 0 22px rgba(227,179,255,.22); }
.case-active .question-field { box-shadow:inset 0 1px rgba(255,255,255,.14),0 12px 30px rgba(10,3,20,.28),0 0 0 1px rgba(237,202,255,.12); }
.case-active .question-field input { cursor:default; }
.case-active .open-case { filter:saturate(.82); }

.case-scroll {
  position: absolute;
  inset: calc(68px + env(safe-area-inset-top, 0px)) 0 calc(70px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.case-scroll::-webkit-scrollbar,.portal-deck::-webkit-scrollbar { display:none; }

.event-map-module { position:relative; height:clamp(354px,99.5vw,478px); min-height:0; padding:0; overflow:visible; perspective:900px; }
.event-map-glass {
  position:relative;
  z-index:2;
  width:65.3%;
  height:100%;
  min-height:0;
  margin:0 auto;
  padding:13px 11px 9px;
  overflow:hidden;
  border:0;
  border-radius:20px;
  background:url("./assets/event-map-panel-blank.jpg") center/100% 100% no-repeat;
  box-shadow:0 20px 55px rgba(0,0,0,.33),0 0 24px rgba(222,173,236,.08);
  transform:translateZ(0);
  animation:panelReveal .2s cubic-bezier(.2,.78,.2,1) both;
}
.event-map-glass::before,.event-map-glass::after { display:none; }
.map-heading { position:relative; z-index:3; text-align:center; }
.map-heading span { display:none; }
.map-heading h1 { margin:10px 0 2px; color:#fff0d6; font:400 clamp(19px,5.8vw,27px)/1.05 Georgia,serif; letter-spacing:.02em; white-space:nowrap; text-shadow:0 2px 22px rgba(242,196,255,.22); }
.map-heading i { display:block; color:var(--gold); font-style:normal; font-size:10px; }
.map-thread { display:none; }
.map-thread path { fill:none; stroke:url(#threadGlow); stroke-width:1; opacity:.32; filter:url(#threadSoft); }
.map-thread .thread-pulse { stroke-width:2; stroke-dasharray:2 20; opacity:.88; animation:lineTravel 3.2s linear infinite; }
.map-thread .memory-curve { stroke-width:.65; opacity:.13; }

.event-node-list { position:absolute; z-index:3; top:70px; right:0; bottom:14px; left:0; display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); gap:0; margin:0; }
.event-node-list::before { display:none; }
.event-node {
  position:relative;
  display:block;
  min-height:0;
  padding:0;
  border:0;
  border-radius:16px;
  color:var(--ink);
  background:transparent;
  text-align:left;
  cursor:default;
  transition:background .2s ease, transform .2s ease;
}
.event-node::before { content:""; position:absolute; inset:4px 0; border:1px solid transparent; border-radius:15px; transition:border-color .2s ease, box-shadow .2s ease; }
.event-node:hover,.event-node:focus-visible { transform:translateX(2px); outline:0; background:rgba(255,255,255,.035); }
.event-node:hover::before,.event-node:focus-visible::before { border-color:rgba(245,211,170,.22); box-shadow:inset 0 0 24px rgba(207,155,238,.07); }
.event-node { --twinkle-speed:4.8s; --twinkle-delay:0s; }
.oracle-node { --twinkle-speed:5.4s; --twinkle-delay:-2.1s; }
.guide-node { --twinkle-speed:5.1s; --twinkle-delay:-3.7s; }
.detective-node { --twinkle-speed:5.8s; --twinkle-delay:-1.2s; }
.node-gem { position:absolute; left:42%; top:50%; display:grid; place-items:center; width:45px; height:45px; margin:0; border:0; border-radius:50%; background:transparent; box-shadow:none; transform:translate(-50%,-50%); transition:filter .14s ease,transform .14s ease; }
.node-gem::before,.node-gem::after,.node-gem i::before,.node-gem i::after { content:none; }
.node-gem i { position:relative; width:30px; height:30px; border-radius:50%; animation:gemTwinkle var(--twinkle-speed) ease-in-out var(--twinkle-delay) infinite; }
.gem-core i { background:radial-gradient(circle at 31% 26%,#fff 0 8%,#ffe6d8 27%,#e998cf 63%,#75468e 100%); box-shadow:inset -4px -5px 8px rgba(94,44,107,.22),0 0 8px #fff1e4,0 0 21px rgba(247,170,222,.78),0 0 38px rgba(211,117,221,.36); }
.gem-oracle i { background:radial-gradient(circle at 31% 26%,#fff 0 8%,#f9d4ff 24%,#a386ff 52%,#6cd6e9 75%,#3c275f 100%); box-shadow:inset -4px -5px 8px rgba(48,34,92,.22),0 0 8px #f7e9ff,0 0 21px rgba(193,142,255,.8),0 0 38px rgba(113,181,255,.34); }
.gem-guide i { background:radial-gradient(circle at 31% 26%,#fff 0 10%,#fff8e9 39%,#eadcec 73%,#a99ac6 100%); box-shadow:inset -4px -5px 8px rgba(129,105,155,.18),0 0 8px #fff9ed,0 0 21px rgba(255,236,215,.84),0 0 38px rgba(225,194,255,.36); }
.gem-detective i { background:radial-gradient(circle at 31% 26%,#aaa3cc,#4a426c 30%,#1e1a36 58%,#07060e 100%); box-shadow:inset -7px -7px 10px #040309,0 0 8px rgba(190,174,255,.46),0 0 21px rgba(137,111,222,.48),0 0 38px rgba(75,55,147,.3); }
.node-copy { position:absolute; left:54%; top:21%; width:39%; min-width:0; }
.node-copy small { display:block; color:#f6ddbf; font:9.5px Georgia,serif; letter-spacing:.025em; white-space:nowrap; }
.node-copy strong { display:none; }
.node-copy u { display:block; width:100%; height:4px; margin-top:24px; overflow:hidden; border:1px solid rgba(232,197,142,.34); border-radius:99px; background:rgba(5,3,12,.46); text-decoration:none; }
.node-copy u i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f5cfbd,#ec9bdc); box-shadow:0 0 10px #e49bdc; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.node-count { position:absolute; left:54%; top:43%; color:#f4d9bb; font:10px Georgia,serif; }
.event-node:hover .node-gem { transform:translate(-50%,-50%) scale(1.035); filter:brightness(1.08); box-shadow:0 0 11px rgba(255,241,205,.82),0 0 24px rgba(236,170,255,.46); }
.event-node.visited .node-copy u i { width:100%; }
.event-node.visited .node-gem i { filter:brightness(1.13); }
.map-jump { position:absolute; z-index:10; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:20px; color:transparent; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.map-jump::after { content:""; position:absolute; inset:3px; border:1px solid transparent; border-radius:18px; box-shadow:inset 0 0 0 rgba(236,181,255,0); transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.map-jump:hover::after,.map-jump:focus-visible::after { border-color:rgba(255,226,179,.42); box-shadow:inset 0 0 40px rgba(224,166,247,.12),0 0 24px rgba(224,166,247,.2); background:rgba(255,255,255,.018); }
.map-jump:active::after { background:rgba(244,202,255,.09); }
.map-jump span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.event-map-glass:has(.map-jump:hover) .node-gem,
.event-map-glass:has(.map-jump:focus-visible) .node-gem { filter:brightness(1.055); box-shadow:0 0 11px rgba(255,241,205,.8),0 0 23px rgba(236,170,255,.43); }

.portal-deck-section { position:relative; height:auto; padding:8px 0 12px; }
.deck-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.deck-heading span { color:#d7b7ea; font-size:8px; font-weight:800; letter-spacing:.16em; }
.deck-heading h2 { margin:5px 0 0; color:#fff0da; font:400 22px/1.1 Georgia,serif; }
.deck-heading p { margin:0 0 2px; color:rgba(255,238,221,.48); font-size:8px; letter-spacing:.08em; white-space:nowrap; }
.deck-heading p i { display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:#e5aee5; box-shadow:0 0 9px #edaef0; animation:hintPulse 1.6s ease-in-out infinite; }
.deck-heading p b { color:var(--gold); font-size:12px; }

.portal-deck {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 16px)/3);
  grid-template-columns:none;
  gap:8px;
  height:auto;
  padding:0 9px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:9px;
  perspective:900px;
  scrollbar-width:none;
}
.story-portal {
  --rx:0deg; --ry:0deg; --lift:0px;
  position:relative;
  height:auto;
  aspect-ratio:260/435;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(244,211,166,.62);
  border-radius:20px;
  color:var(--ink);
  background:#171027;
  box-shadow:0 9px 20px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.09);
  scroll-snap-align:start;
  cursor:pointer;
  transform:perspective(760px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transform-style:preserve-3d;
  transition:transform .16s cubic-bezier(.2,.78,.2,1),box-shadow .16s ease,border-color .16s ease;
  animation:cardReveal .2s cubic-bezier(.2,.78,.2,1) both;
  animation-delay:calc(var(--card-index) * 18ms);
  -webkit-tap-highlight-color:transparent;
}
.story-portal::before { content:""; position:absolute; z-index:5; inset:6px; border:1px solid rgba(255,235,201,.16); border-radius:15px; pointer-events:none; }
.story-portal::after { content:""; position:absolute; z-index:4; inset:0; opacity:.34; background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.22) 44%,transparent 65%); transform:translateX(-120%); transition:transform .65s ease; pointer-events:none; }
.story-portal:hover,.story-portal:focus-visible { --lift:-3px; outline:0; border-color:rgba(255,226,179,.9); box-shadow:0 13px 25px rgba(0,0,0,.34),0 0 17px rgba(216,164,244,.18); }
.story-portal.attention { border-color:#ffe2b0; box-shadow:0 0 36px rgba(239,171,255,.54),0 22px 42px rgba(0,0,0,.46); }
.story-portal:hover::after,.story-portal:focus-visible::after { transform:translateX(120%); }
.story-portal:active { --lift:-2px; transition-duration:.08s; }
.card-art { position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:#1c1230; }
.card-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(12,7,24,.12) 52%,rgba(9,5,19,.96) 88%); }
.card-art img { display:block; width:100%; height:auto; object-fit:contain; object-position:center top; transition:transform .2s cubic-bezier(.2,.7,.2,1),filter .2s ease; }
.story-portal:hover .card-art img { transform:scale(1.012); filter:brightness(1.035); }
.oracle-art img { filter:saturate(.98) brightness(.98); }
.character-art { background:radial-gradient(circle at 50% 28%,rgba(248,211,233,.5),transparent 38%),linear-gradient(#7f587c,#21142f 72%); }
.detective-art { background:radial-gradient(circle at 50% 28%,rgba(138,109,179,.36),transparent 40%),linear-gradient(#2b1a3e,#090711 72%); }
.character-art img { object-fit:contain; object-position:center bottom; width:132%; margin-left:-16%; height:94%; margin-top:2%; filter:drop-shadow(0 14px 20px rgba(0,0,0,.34)); animation:characterFloat 4.7s ease-in-out infinite; }
.detective-art img { animation-delay:-2.3s; }
.room-art img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.oracle-sigil { display:none; }
.oracle-sigil::before,.oracle-sigil::after { content:""; position:absolute; inset:11%; border:1px solid rgba(255,234,201,.44); border-radius:50% 17%; transform:rotate(45deg); }
.oracle-sigil::after { inset:22%; transform:rotate(-22.5deg); }
.card-light { position:absolute; z-index:2; top:-22%; left:15%; width:70%; height:48%; border-radius:50%; background:rgba(255,213,244,.12); filter:blur(26px); pointer-events:none; }
.card-content { position:absolute; z-index:6; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; min-height:72px; padding:16px 5px 8px; text-align:center; background:linear-gradient(180deg,transparent,rgba(11,6,23,.86) 26%,rgba(9,5,18,.97)); transform:translateZ(10px); }
.card-content small { display:none; }
.card-content strong { display:block; margin:4px 0 5px; color:#fff0d8; font:400 clamp(11px,3.2vw,15px)/1 Georgia,serif; letter-spacing:.015em; white-space:nowrap; text-shadow:0 2px 12px rgba(0,0,0,.9); }
.card-content > span { display:flex; align-items:center; gap:5px; }
.card-content b { display:none; }
.card-content i { display:grid; place-items:center; width:24px; height:24px; border:1px solid rgba(238,203,149,.72); border-radius:50%; color:#ffe6bd; font:20px/1 Georgia,serif; }
.story-portal.visited .card-content b { color:#281633; border-color:#ffe3b2; background:linear-gradient(135deg,#fff3d8,#d4b5fc); }
.new-card-badge { position:absolute; z-index:8; top:10px; right:8px; padding:4px 6px; border:1px solid rgba(255,226,181,.7); border-radius:99px; color:#3b2149; background:linear-gradient(90deg,#f5cbe9,#ffe4be); box-shadow:0 0 18px rgba(255,190,237,.28); font-size:6px; font-weight:900; letter-spacing:.11em; }
.deck-dots { display:flex; justify-content:center; align-items:center; gap:6px; min-height:18px; margin-top:5px; }
.deck-dots i { width:5px; height:5px; border-radius:50%; background:rgba(255,237,217,.24); transition:width .22s ease,background .22s ease; }
.deck-dots i.active { width:16px; border-radius:99px; background:linear-gradient(90deg,#e5b1e6,#f2d09a); box-shadow:0 0 10px rgba(235,180,239,.5); }

.room-dock { height:auto; margin:0 13px 18px; padding:7px 9px; border:1px solid rgba(239,204,161,.42); border-radius:20px; background:linear-gradient(145deg,rgba(61,36,89,.88),rgba(21,12,40,.94)); box-shadow:0 14px 32px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(18px); }
.ai-disclosure-home { margin:0 auto 8px; max-width:390px; color:rgba(255,239,220,.82); font:500 clamp(7.5px,2vw,8.5px)/1.3 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.01em; text-align:center; white-space:normal; text-shadow:0 1px 8px rgba(0,0,0,.72); }
.room-dock form { display:grid; gap:6px; }
.question-field { display:grid; grid-template-columns:36px 1fr 27px; align-items:center; min-height:39px; border:1px solid rgba(217,184,234,.3); border-radius:14px; background:rgba(12,7,27,.42); }
.crystal { display:grid; place-items:center; width:30px; height:30px; margin-left:7px; border:1px solid rgba(248,216,173,.5); border-radius:50%; color:#f3cfef; text-shadow:0 0 12px #d993ff; }
.question-field input { width:100%; min-width:0; height:38px; border:0; outline:0; color:#fff3e8; background:transparent; font-size:13px; }
.question-field input::placeholder { color:rgba(255,237,229,.53); }
.send-spark { color:#f3d397; font-size:18px; }
.age-confirm { display:flex; align-items:flex-start; justify-content:center; gap:6px; padding:0 4px; color:rgba(255,237,220,.68); font:700 7px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.055em; text-align:center; }
.age-confirm input { width:12px; height:12px; margin:0; accent-color:#d3a8e7; }
.age-confirm a { color:#f3d8bd; text-decoration-color:rgba(243,216,189,.44); text-underline-offset:2px; }
.analytics-confirm { color:rgba(255,237,220,.58); }
.case-active .age-confirm { display:none; }
.open-case { min-height:39px; border:1px solid #f4d6a7; border-radius:999px; color:#2c173e; background:linear-gradient(100deg,#f8e5da,#e9c9ef 45%,#ffe4bf); box-shadow:0 0 25px rgba(245,191,232,.27),inset 0 1px #fff; font:17px Georgia,serif; letter-spacing:.04em; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.open-case:hover,.open-case:focus-visible { transform:translateY(-2px); box-shadow:0 0 34px rgba(245,191,232,.48),inset 0 1px #fff; }
.open-case:active { transform:scale(.985); }
.open-case span { padding:0 8px; color:#a87655; }
.dock-status { display:none; }

.bottom-nav { position:absolute; z-index:30; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); height:calc(70px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); border-top:1px solid rgba(230,200,159,.26); background:rgba(10,5,20,.91); backdrop-filter:blur(20px); }
.bottom-nav button { position:relative; display:grid; place-content:center; gap:3px; border:0; color:rgba(255,237,216,.62); background:transparent; cursor:pointer; }
.bottom-nav button::before { content:""; position:absolute; inset:5px 6px; z-index:-1; border:1px solid transparent; border-radius:14px; transition:background .18s ease,border-color .18s ease; }
.bottom-nav button:hover::before,.bottom-nav button:focus-visible::before,.bottom-nav button.active::before { border-color:rgba(215,173,237,.28); background:rgba(120,76,158,.24); }
.bottom-nav button.active { color:#ffe8be; }
.bottom-nav button > span { font:22px/1 Georgia,serif; }
.bottom-nav small { font:10px/1 Georgia,serif; letter-spacing:.06em; }

.game-dialog { width:min(calc(100% - 28px),440px); max-height:min(80svh,700px); padding:0; overflow:hidden; border:1px solid rgba(239,207,164,.5); border-radius:24px; color:#fff2e5; background:transparent; box-shadow:0 34px 100px rgba(0,0,0,.66); }
.game-dialog[open] { animation:dialogIn .24s cubic-bezier(.2,.75,.2,1); }
.game-dialog::backdrop { background:rgba(4,2,10,.74); backdrop-filter:blur(11px); }
.dialog-card { position:relative; max-height:min(80svh,700px); padding:28px 22px 22px; overflow-y:auto; background:linear-gradient(160deg,rgba(62,37,88,.97),rgba(13,7,28,.98)),url("./assets/event-map-texture.jpg") center/cover; }
.dialog-card::before { content:""; position:absolute; inset:0; opacity:.13; background:url("./assets/event-map-texture.jpg") center/cover; mix-blend-mode:screen; pointer-events:none; }
.dialog-card > * { position:relative; }
.dialog-close { position:absolute; z-index:3; top:12px; right:12px; width:36px; height:36px; border:1px solid rgba(239,207,164,.28); border-radius:50%; color:#ead8cf; background:rgba(0,0,0,.17); font-size:23px; cursor:pointer; }
.dialog-eyebrow { margin:0 42px 7px 0; color:#d9b9ee; font-size:10px; font-weight:800; letter-spacing:.16em; }
.dialog-card h2 { margin:0 42px 13px 0; font:400 clamp(28px,8vw,38px)/1.05 Georgia,serif; }
.dialog-visual { display:grid; place-items:center; width:86px; height:86px; margin:4px auto 16px; border:1px solid rgba(248,216,171,.62); border-radius:50%; box-shadow:0 0 30px rgba(228,176,250,.28); }
.dialog-visual::before,.dialog-visual::after { content:""; position:absolute; width:76px; height:34px; border:1px solid rgba(255,226,183,.4); border-radius:50%; transform:rotate(24deg); animation:dialogOrbit 8s linear infinite; }
.dialog-visual::after { transform:rotate(-28deg); animation-direction:reverse; }
.dialog-visual i { width:55px; height:55px; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff,#f7cde9 28%,#9d77d7 70%,#3a2252); box-shadow:0 0 24px #dca5ed; animation:gemBreathe 2.8s ease-in-out infinite; }
.dialog-visual[data-module="oracle"] i { background:radial-gradient(circle at 35% 28%,#fff,#ffc8ee 24%,#8d7cff 56%,#62d4ec 78%,#392151); }
.dialog-visual[data-module="guide"] i { background:radial-gradient(circle at 35% 28%,#fff,#fff3db 44%,#e4cbdc 74%,#a890c9); box-shadow:0 0 24px #ffe6d8; }
.dialog-visual[data-module="detective"] i { background:radial-gradient(circle at 34% 28%,#8d84b1,#2b2746 38%,#080711 74%); box-shadow:inset -8px -8px 12px #05030a,0 0 21px rgba(143,117,221,.5); }
.dialog-visual[data-module="room"] i { background:radial-gradient(circle at 35% 28%,#fff,#f7c6de 30%,#a767c4 67%,#45245f); box-shadow:0 0 27px #e4a8ec; }
.dialog-body { color:rgba(255,241,229,.76); font-size:14px; line-height:1.62; }
.dialog-body p { margin:0 0 13px; }
.dialog-body .question-quote { color:#fff4e7; font:italic 18px/1.45 Georgia,serif; }
.dialog-body .insight { margin:11px 0; padding:13px 14px; border:1px solid rgba(235,202,157,.2); border-radius:15px; background:rgba(255,255,255,.055); }
.dialog-body .insight b { display:block; margin-bottom:4px; color:#ffe8c8; font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.dialog-action { width:100%; min-height:46px; margin-top:12px; border:1px solid rgba(249,220,178,.68); border-radius:999px; color:#2d193d; background:linear-gradient(110deg,rgba(232,200,234,.94),rgba(251,226,190,.96)); font-weight:800; letter-spacing:.06em; cursor:pointer; }

@keyframes hazeDrift { to { transform:translate3d(4%,-4%,0) scale(1.08); } }
@keyframes particleFloat { 50% { transform:translateY(-18px) scale(1.7); opacity:.45; } }
@keyframes gemBreathe { 50% { transform:scale(1.09); filter:brightness(1.17); } }
@keyframes nodeOrbit { to { transform:rotate(405deg); } }
@keyframes lineTravel { to { stroke-dashoffset:-88; } }
@keyframes hintPulse { 50% { transform:scale(1.7); opacity:.5; } }
@keyframes oracleOrbit { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes characterFloat { 50% { transform:translateY(-5px) scale(1.015); } }
@keyframes cardLight { to { transform:translate(10%,8%) scale(1.18); opacity:.66; } }
@keyframes crystalPulse { 50% { box-shadow:0 0 18px rgba(222,157,252,.48); transform:rotate(45deg); } }
@keyframes cardReveal { from { opacity:0; transform:perspective(760px) translateY(20px) rotateY(-6deg); } }
@keyframes dialogIn { from { opacity:0; transform:translateY(14px) scale(.97); } }
@keyframes dialogOrbit { to { rotate:360deg; } }
@keyframes backgroundBreathe { to { transform:scale(1.012); filter:brightness(1.035); } }
@keyframes lightBreathe { to { opacity:.52; transform:translateY(1.5%); } }
@keyframes radiantSpin { to { rotate:360deg; } }
@keyframes moduleFloat { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes panelReveal { from { opacity:0; transform:translateY(8px) scale(.992); } }
@keyframes gemTwinkle { 0%,68%,100% { transform:scale(1); filter:brightness(1); } 75% { transform:scale(1.045); filter:brightness(1.16); } 81% { transform:scale(1.012); filter:brightness(1.055); } }

@media (max-width:380px) {
  .portal-deck { gap:7px; padding-inline:8px; grid-auto-columns:calc((100% - 14px)/3); }
  .card-content strong { font-size:11px; }
}

@media (max-height:720px) {
  .event-node { min-height:0; }
}

@media (min-width:700px) {
  body { background:radial-gradient(circle at 50% 30%,rgba(95,60,150,.19),transparent 30%),#07030e; }
  .game-shell { border-inline:1px solid rgba(255,255,255,.06); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .dream-video { display:none; }
  .scene-backdrop { background:url("./assets/dream-poster.jpg") center/cover no-repeat; }
}
.game-premise { max-width:430px; margin:8px auto 2px; padding:0 14px; color:rgba(255,239,221,.88); font:600 14px/1.45 Inter,system-ui,sans-serif; text-align:center; }