:root {
  color-scheme: dark;
  --design-w: 390;
  --design-h: 844;
  --violet: #8b2cff;
  --violet-deep: #4a008e;
  --app-safe-top: max(20px, env(safe-area-inset-top, 0px));
  --chat-safe-top: max(64px, var(--app-safe-top));
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html.is-standalone { --chat-safe-top: max(64px, env(safe-area-inset-top, 0px)); }

@media (display-mode: standalone) {
  :root { --chat-safe-top: max(64px, env(safe-area-inset-top, 0px)); }
}

@property --sns-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #08070a;
}

body.logout-reloading::after {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: all;
  background: #c9cbd3 url("assets/1-3_LOGIN_dim.png") center / 100% 100% no-repeat;
  animation: logout-cover-in .18s ease both;
}

@keyframes logout-cover-in { from { opacity: 0; } to { opacity: 1; } }

body {
  display: grid;
  place-items: start center;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.app-boot-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(13, 7, 22, .76);
  opacity: 0;
  animation: app-boot-loader-in .38s ease-out forwards;
  transition: opacity .56s cubic-bezier(.22, .72, .18, 1);
}

.app-boot-loader[hidden] { display: none; }
.app-boot-loader.is-ready {
  animation: none;
  opacity: 0;
}

@keyframes app-boot-loader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.app-booting .login-screen :is(.access-title, .returning-title, .crt-output, .login-ui, .copyright) {
  opacity: 0 !important;
}

.login-screen :is(.access-title, .returning-title, .crt-output, .login-ui, .copyright) {
  transition: opacity .52s cubic-bezier(.22, .72, .18, 1);
}

.app-boot-loader-panel {
  display: flex;
  width: 210px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 22%, rgba(180, 137, 255, .2), transparent 48%),
    linear-gradient(135deg, #fff 0%, #fbf9ff 52%, #eee7ff 100%);
  box-shadow: 0 12px 34px rgba(42, 24, 72, .16), 0 2px 8px rgba(82, 43, 132, .1);
  color: #17131d;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  animation: app-boot-panel-in .46s .08s cubic-bezier(.22,.72,.18,1) forwards;
  transition: opacity .32s ease, transform .42s cubic-bezier(.22,.72,.18,1);
}

.app-boot-loader.is-ready .app-boot-loader-panel {
  animation: none;
  opacity: 0;
  transform: translateY(-3px) scale(.97);
}

@keyframes app-boot-panel-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.app-boot-loader-label,
.app-boot-loader-dots {
  font-family: "Quantico", Arial, sans-serif;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0;
}

.app-boot-loader-label { display: inline-flex; gap: 3px; font-weight: 400; }
.app-boot-loader-label i { font-style: normal; }
.app-boot-loader-dots {
  display: inline-block;
  position: relative;
  width: 20px;
  margin-left: 7px;
  color: transparent;
  white-space: nowrap;
}

.app-boot-loader-dots::before {
  content: "...";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  color: #17131d;
  white-space: nowrap;
  animation: app-loading-dot 1.2s steps(3, end) infinite;
}

@keyframes app-loading-dot {
  0% { width: 0; }
  75%, 100% { width: 20px; }
}

button { font: inherit; }
.liquid-glass-defs { position: fixed; width: 0; height: 0; pointer-events: none; }

.viewport {
  position: relative;
  width: 390px;
  height: 844px;
  background: #000;
  overflow: hidden;
}

.login-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform-origin: top left;
  overflow: hidden;
  overflow: clip;
  overscroll-behavior: none;
  background: #000;
}

.returning-boot .login-screen {
  background:
    url("assets/1-3_LOGIN_dim.png") center / 100% 100% no-repeat,
    #c9cbd3 url("assets/1-3_LOGIN_poster.png") center / cover no-repeat;
}

.returning-boot .login-screen .login-video,
.returning-boot .login-screen img.scene,
.returning-boot .login-screen .panorama-world {
  opacity: 0;
}

.scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.scene { display: none; }

.panorama-world {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: #050307;
  opacity: 1;
  transform: scale(1);
  transform-origin: 49.5% 34%;
  transition:
    opacity 1.12s cubic-bezier(.32,.02,.2,1),
    transform 1.6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

.panorama-world.portal-fade {
  opacity: 0;
  transform: scale(1.22);
}

.panorama-world img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translate3d(0, 0, 0) scale(1.004);
  transform-origin: left center;
  will-change: transform;
}

.login-video {
  opacity: 1;
  pointer-events: none;
  transition: opacity 620ms ease-in-out, transform 920ms cubic-bezier(.22,.72,.18,1), filter 760ms ease;
  will-change: opacity;
}

.login-video::-webkit-media-controls,
.login-video::-webkit-media-controls-panel,
.login-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

.login-video.revealing { opacity: 0; }

.panorama-world.camera-moving img {
  animation: panorama-pan-right 1.7s cubic-bezier(.22,.72,.18,1) forwards;
}

.panorama-world.camera-returning img {
  animation: panorama-return-left 1.7s cubic-bezier(.22,.72,.18,1) forwards;
}

.panorama-world.character-select-view img {
  animation: none;
  transform: translate3d(-520px,0,0) scale(1.012);
}

.screen-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.38) 100%);
}

.access-title {
  position: absolute;
  z-index: 5;
  top: 126px;
  left: 0;
  width: 100%;
  margin: 0;
  color: #fff;
  font: 400 14px/20px "Quantico", monospace;
  letter-spacing: 1.55px;
  text-align: center;
  text-shadow: 0 0 9px rgba(129, 45, 255, .55);
  transition: opacity .38s ease;
}

.login-screen.login-started .access-title { opacity: 0; }

.returning-title {
  position: absolute;
  z-index: 5;
  top: 142px;
  left: 0;
  width: 100%;
  margin: 0;
  color: #8b4dff;
  font: 700 40px/52px "Nanum Myeongjo", serif;
  letter-spacing: 4px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s ease;
}
.login-screen.returning-login .returning-title { opacity: 1; }
.login-screen.returning-login.login-started .returning-title { opacity: 0; }
.login-screen.returning-login .access-title { top: var(--returning-access-top, 102px); color: #915bff; }
.login-screen.returning-login .returning-title { top: var(--returning-title-top, 142px); }
.login-screen.returning-login .crt-output { display: none; }
.login-screen.returning-login .panorama-world {
  visibility: hidden;
  opacity: 0;
}
.login-screen.returning-login {
  background: #c9cbd3 url("assets/1-3_LOGIN_poster.png") center / cover no-repeat;
}
.login-screen.returning-login .login-video { opacity: 0; }
.login-screen.returning-login.returning-video-playing .login-video { opacity: 1; }
.login-screen.returning-login .screen-dim {
  background: url("assets/1-3_LOGIN_dim.png") center / 100% 100% no-repeat;
}
.login-screen.returning-login .provider {
  position: relative;
  border: 0;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 18px rgba(255,255,255,.18);
}
.login-screen.returning-login .provider::before,
.login-screen.returning-login .browse::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(213,183,255,.72) 0%, rgba(167,110,255,.62) 42%, rgba(107,0,255,.68) 72%, rgba(213,183,255,.64) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.login-screen.returning-login .provider::before {
  inset: -1px;
  padding: 1px;
  border-radius: 50%;
}
.login-screen.returning-login .providers { top: var(--returning-providers-top, 488px); }
.login-screen.returning-login .browse {
  position: absolute;
  top: var(--returning-browse-top, 652px);
  border: 0;
  background: rgba(107,0,255,.04);
  box-shadow: 0 0 12.3px rgba(34,34,34,.4);
}
.login-screen.returning-login .browse::before {
  inset: -1px;
  padding: 1px;
  border-radius: 20px;
}
.login-screen.returning-login .or-divider { top: var(--returning-or-top, 609px); color: #d5b7ff; }
.login-screen.returning-login .adult { top: var(--returning-adult-top, 708px); color: #d5b7ff; }
.login-screen.returning-login .copyright {
  top: var(--returning-copyright-top, 768px);
  color: #fff;
  font-size: 10.667px;
  line-height: 15.238px;
  text-shadow: 0 1px 5px rgba(14,0,33,.72);
}

.login-screen.returning-login.returning-room-transition .login-video {
  opacity: 0;
  transform: scale(1.065);
  filter: blur(2px) brightness(.52);
}

.login-screen.returning-login.returning-room-transition .screen-dim {
  opacity: .35;
  transition: opacity 720ms ease;
}

.crt-output {
  position: absolute;
  z-index: 3;
  top: 188px;
  left: 91px;
  width: 205px;
  height: 188px;
  overflow: hidden;
  border-radius: 5px;
  background: #0b0c0c;
  isolation: isolate;
  transition: opacity .42s ease, filter .2s ease;
}

.crt-output::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 22px rgba(0,0,0,.95), inset 0 0 4px #000;
}

.crt-noise, .crt-scanlines { position: absolute; inset: 0; opacity: 0; }

.crt-scanlines {
  z-index: 2;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(133,50,255,.13) 3px, rgba(0,0,0,.35) 4px);
  mix-blend-mode: screen;
}

.crt-output.booting { filter: brightness(1.03) contrast(1.04); }
.crt-output.booting .crt-scanlines { opacity: .2; }
.crt-output.booting .crt-noise {
  opacity: .08;
  background:
    linear-gradient(90deg, transparent 0 15%, rgba(145,43,255,.8) 16% 17%, transparent 18% 72%, rgba(255,255,255,.25) 73% 74%, transparent 75%),
    repeating-linear-gradient(0deg, #110020 0 1px, #030204 2px 4px);
  animation: noise-shift 420ms steps(2,end) infinite;
}

.terminal-text {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 10px;
  top: 51px;
  margin: 0;
  white-space: pre-line;
  color: #b768ff;
  font: 700 10px/18px "Quantico", monospace;
  letter-spacing: .65px;
  text-shadow: .5px 0 #f5f, -.5px 0 #0ff, 0 0 5px #7e22ff;
}

.crt-output.text-glitch .terminal-text { animation: text-glitch 80ms steps(2,end) 3; }
.crt-output.level-two .crt-scanlines { opacity: .42; }
.crt-output.level-two .crt-noise { opacity: .18; animation: noise-shift 90ms steps(2,end) infinite; }
.crt-output.portal-zoom {
  z-index: 14;
  transform: translateY(145px) scale(5.1);
  transform-origin: 50% 48%;
  filter: blur(9px) brightness(1.34) saturate(1.14);
  opacity: 1;
  transition:
    transform 1.6s cubic-bezier(.22,.72,.18,1),
    filter 1.6s cubic-bezier(.22,.72,.18,1),
    opacity 1.28s cubic-bezier(.32,.02,.2,1) .12s;
}

.crt-output.portal-zoom.portal-fading { opacity: 0; }

.login-ui {
  position: absolute;
  z-index: 6;
  inset: 0;
  transition: opacity .38s ease, transform .38s ease;
}

.login-ui.leaving { opacity: 0; transform: translateY(10px); pointer-events: none; }

.providers {
  position: absolute;
  top: 487px;
  left: 32px;
  display: flex;
  gap: 14px;
}

.provider {
  width: 100px;
  height: 100px;
  padding: 21px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(109,109,109,.48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 56% 43%, rgba(109, 28, 181, .19), transparent 28%),
    rgba(5,5,6,.84);
  color: #fff;
  box-shadow: inset 0 0 16px rgba(255,255,255,.07), 0 0 18px rgba(0,0,0,.65);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.provider img { width: 31px; height: 31px; object-fit: contain; }
.provider span { margin-top: 7px; font-size: 14px; line-height: 20px; font-weight: 700; }

.provider:hover, .provider:focus-visible {
  outline: none;
  border-color: var(--violet);
  background: radial-gradient(circle, rgba(89,0,164,.38), rgba(7,7,8,.9) 68%);
  box-shadow: inset 0 0 18px rgba(127,39,255,.22), 0 0 16px rgba(119,24,255,.3);
}

.provider:active { transform: scale(.965); }

.or-divider {
  position: absolute;
  top: 613px;
  left: 20px;
  width: 350px;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--violet);
}

.or-divider i { flex: 1; height: 1px; background: currentColor; box-shadow: 0 0 5px currentColor; }
.or-divider b { font: 700 12px/20px "Quantico", monospace; letter-spacing: 1.5px; }

.browse {
  position: absolute;
  top: 653px;
  left: 135px;
  width: 120px;
  height: 36px;
  border: 1px solid #6f00cc;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(66,0,116,.78), rgba(25,0,48,.83));
  color: #fff;
  box-shadow: inset 0 0 12px rgba(110,0,255,.2), 0 0 14px rgba(0,0,0,.52);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, filter .16s ease, transform .16s ease;
}

.browse:hover, .browse:focus-visible { outline: none; border-color: #a445ff; filter: brightness(1.2); }
.browse:active { transform: scale(.98); }

.adult {
  position: absolute;
  top: 703px;
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--violet);
  font: 400 14px/20px "Quantico", monospace;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 0 0 6px rgba(124,25,255,.4);
}

.copyright {
  position: absolute;
  z-index: 5;
  top: 755px;
  left: 0;
  width: 100%;
  margin: 0;
  color: #6f6f72;
  font: 400 7px/12px "Quantico", monospace;
  letter-spacing: .05px;
  text-align: center;
  transition: opacity .28s ease;
}

.login-screen.character-mode .copyright { opacity: 0; }

@keyframes crt-flicker {
  0%, 100% { filter: brightness(.88) contrast(1.18); transform: translate(0); }
  35% { filter: brightness(1.28) contrast(1.7); transform: translate(1px,-1px); }
  72% { filter: brightness(.62) contrast(1.5); transform: translate(-1px,0); }
}

@keyframes noise-shift {
  0% { transform: translate(0, -8px) scale(1.06); }
  50% { transform: translate(-7px, 5px) scale(1.1); }
  100% { transform: translate(5px, -2px) scale(1.07); }
}

@keyframes text-glitch {
  0%, 100% { transform: translate(0); clip-path: inset(0); }
  30% { transform: translate(1px,0); clip-path: inset(10% 0 58%); }
  60% { transform: translate(-1px,0); clip-path: inset(56% 0 12%); }
}

@keyframes panorama-pan-right {
  0% { transform: translate3d(0,0,0) scale(1.004); }
  100% { transform: translate3d(-520px,0,0) scale(1.012); }
}

@keyframes panorama-return-left {
  0% { transform: translate3d(-520px,0,0) scale(1.012); }
  100% { transform: translate3d(0,0,0) scale(1.004); }
}

.character-select {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}

.character-select.visible { opacity: 1; pointer-events: auto; }
.character-select.exiting { opacity: 0; pointer-events: none; transition-duration: .28s; }

.character-select h2 {
  position: absolute;
  top: 78px;
  left: 0;
  width: 100%;
  z-index: 3;
  margin: 0;
  color: #bd86ff;
  font: 700 clamp(26px, 8.2vw, 32px)/44px Arial, sans-serif;
  letter-spacing: -1px;
  text-align: center;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .42s ease .06s, transform .42s ease .06s;
}

.character-select.visible h2 { opacity: 1; transform: translateY(0); }

.character-carousel {
  position: absolute;
  top: 137px;
  left: 0;
  width: 390px;
  height: 540px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .48s ease .12s, transform .48s ease .12s;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.character-select.visible .character-carousel { opacity: 1; transform: translateY(0); }

.character-track {
  display: flex;
  gap: 32px;
  width: max-content;
  transform: translate3d(57px,0,0);
  transition: transform .32s cubic-bezier(.22,.72,.18,1);
  will-change: transform;
}

.character-card {
  --gyro-rx: 0deg;
  --gyro-ry: 0deg;
  --gyro-x: 0px;
  --gyro-y: 0px;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --light-x: 50%;
  --light-y: 38%;
  position: relative;
  flex: 0 0 276px;
  width: 276px;
  height: 520px;
  overflow: hidden;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: #17151a;
  box-shadow: 0 16px 25px rgba(0,0,0,.52);
  transform: perspective(1000px) translate3d(var(--gyro-x), var(--gyro-y), 0) rotateX(var(--gyro-rx)) rotateY(var(--gyro-ry));
  transition: box-shadow 180ms ease;
  will-change: transform;
}

.character-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(255,255,255,.13), transparent 34%);
  opacity: 0;
  transition: opacity .24s ease;
  mix-blend-mode: soft-light;
}

.character-card.is-current::before { opacity: .72; }

.character-card.is-current {
  box-shadow: 0 16px 25px rgba(0,0,0,.52), 0 8px 24px rgba(81,22,130,.12);
}

.character-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.025);
  transition: none;
  will-change: transform;
}

.character-card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,3,7,.16);
}

.character-card.is-locked > span {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  background: rgba(0,0,0,.68);
  color: rgba(255,255,255,.8);
  font: 700 9px/12px "Quantico", monospace;
  white-space: nowrap;
}

.character-placeholder {
  display: grid;
  place-content: center;
  gap: 12px;
  color: #8c6cae;
  background: linear-gradient(145deg,#21172b,#08060b 72%);
  text-align: center;
}

.character-placeholder b { font: 700 22px/30px "Quantico", monospace; }
.character-card.character-placeholder > span { position: static; transform: none; justify-self: center; }

.character-arrow {
  position: absolute;
  z-index: 4;
  top: 378px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  background: rgba(10,9,13,.85);
  color: white;
  cursor: pointer;
}

.character-arrow img { display: block; width: 24px; height: 24px; margin: auto; }
.character-next img { width: 20px; height: 20px; }

.character-prev { left: 20px; }
.character-next { right: 20px; }
.character-arrow:disabled { opacity: .3; cursor: default; }

.character-pagination {
  position: absolute;
  z-index: 4;
  top: 646px;
  left: 164.5px;
  width: 61px;
  height: 32px;
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(18,16,21,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  font: 700 11px/30px Arial, sans-serif;
  text-align: center;
  box-shadow: 0 5px 12px rgba(0,0,0,.42);
}

.character-cta {
  position: absolute;
  z-index: 4;
  top: 716px;
  left: 20px;
  width: 350px;
  height: 65px;
  border: 1px solid #8524f1;
  border-radius: 7px;
  background: linear-gradient(180deg,rgba(63,0,116,.96),rgba(27,0,51,.96));
  color: white;
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s ease .2s, transform .42s ease .2s, filter .16s ease;
  cursor: pointer;
}

.character-select.visible .character-cta { opacity: 1; transform: translateY(0); }
.character-cta:disabled { border-color: #4b4650; background: rgba(4,4,5,.78); color: #827d87; cursor: not-allowed; }

/* Short KakaoTalk/Naver in-app browser: preserve card size and compress spacing. */
.character-select.compact h2 {
  top: 22px;
  left: 0;
  font-size: clamp(26px, 8.2vw, 32px);
  line-height: 42px;
}

.character-select.compact .character-carousel {
  top: 82px;
  height: 500px;
}

.character-select.compact .character-track { gap: 28px; }

.character-select.compact .character-card {
  flex-basis: 260px;
  width: 260px;
  height: 490px;
}

.character-select.compact .character-arrow { top: 305px; }

.character-select.compact .character-pagination {
  top: 558px;
  height: 32px;
  line-height: 30px;
}

.character-select.compact .character-cta {
  top: 596px;
  height: 52px;
}

.main-room {
  position: absolute;
  z-index: 9;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transform: scale(.62);
  transform-origin: 50% 34%;
  clip-path: inset(24% 27% 52% 27% round 6px);
  filter: blur(4px) brightness(.86);
  background: #050307;
  transition:
    opacity .95s cubic-bezier(.32,.02,.2,1),
    transform 1.42s cubic-bezier(.22,.72,.18,1),
    filter 1.12s ease-out,
    clip-path 1.34s cubic-bezier(.2,.78,.18,1);
  will-change: opacity, transform, filter, clip-path;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.main-room.visible {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  filter: blur(0) brightness(1);
  clip-path: inset(0 round 0);
}

.main-room.returning-entry {
  transform: scale(1.045);
  clip-path: none;
  filter: blur(5px) brightness(.72);
  transition:
    opacity .82s cubic-bezier(.32,.02,.2,1),
    transform 1.05s cubic-bezier(.22,.72,.18,1),
    filter .9s ease-out;
}

.main-room.returning-entry.visible {
  transform: scale(1);
  clip-path: none;
  filter: blur(0) brightness(1);
}

.main-room.returning-entry.visible::after { display: none; }

.main-room video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: translateZ(0);
  transition: filter .24s ease, transform .24s ease;
}

.main-room.chat-open > video {
  filter: blur(16px) brightness(.68) saturate(.9);
  transform: translateZ(0) scale(1.06);
}

.main-room.chat-open .liquid-refraction-canvas { opacity: 0; }
.liquid-refraction-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.is-safari .liquid-refraction-canvas { display: none; }
.is-safari .room-credit,
.is-safari .room-safe,
.is-safari .room-toast,
.is-safari .room-tooltip,
.is-safari .room-message,
.is-safari .room-bottom-nav,
.is-safari .room-menu-close {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.room-interface {
  position: absolute;
  z-index: 2;
  inset: 0;
  color: #fff;
  pointer-events: none;
}

.room-interface button { -webkit-tap-highlight-color: transparent; }
.room-interface.ready button { pointer-events: auto; }

.room-back,
.room-gnb,
.room-hotspot,
.room-message,
.room-date,
.room-menu {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease, transform .5s cubic-bezier(.22,.72,.18,1);
}

.room-interface.ready .room-back,
.room-interface.ready .room-gnb { opacity: 1; transform: none; transition-delay: .12s; }
.room-interface.ready .room-hotspot-chat { opacity: 1; transform: none; transition-delay: .45s; }
.room-interface.ready .room-hotspot-feed { opacity: 1; transform: none; transition-delay: .58s; }
.room-interface.ready .room-date { opacity: 1; transform: none; transition-delay: .74s; }
.room-interface.ready .room-menu { opacity: 1; transform: none; transition-delay: .9s; }

.room-back {
  position: absolute;
  top: 88px;
  left: 20px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
}
.room-back img { width: 24px; height: 24px; }

.room-gnb {
  position: absolute;
  top: 88px;
  right: 20px;
  display: flex;
  gap: 8px;
}

.room-credit,
.room-safe {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(34,34,34,.5) 38%, rgba(15,12,19,.56) 72%, rgba(255,255,255,.05)) padding-box,
    linear-gradient(135deg, rgba(106,0,255,.42), rgba(136,0,255,.16) 48%, rgba(255,255,255,.18)) border-box;
  color: #fff;
  box-shadow:
    0 7px 20px rgba(0,0,0,.22),
    0 0 20px rgba(107,0,255,.12),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.42),
    inset 4px 4px 10px rgba(255,255,255,.035);
  backdrop-filter: blur(12px) saturate(1.45) contrast(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.45) contrast(1.04);
  font-size: 15px;
}
.room-credit::before,
.room-safe::before,
.room-date::before,
.room-menu::before,
.room-toast::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% -12%, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(115deg, rgba(255,255,255,.13), transparent 28%, transparent 68%, rgba(255,255,255,.07));
  mix-blend-mode: screen;
}
.room-credit > *, .room-safe > *, .room-date > *, .room-menu > * { position: relative; z-index: 1; }
.room-credit { width: 102px; }
.room-safe { width: 69px; }
.room-credit img { width: 12px; height: 12px; }
.room-credit .credit-point-icon { width: 18px; height: 18px; object-fit: contain; }
.room-safe img { width: 18px; height: 18px; }
.credit-envelope { font-size: 14px; color: #ffb767; }

.room-hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}
.room-hotspot-chat { top: 232px; left: 45px; flex-direction: column; }
.room-hotspot-feed { top: 511px; left: 87px; }

.room-tooltip {
  --glass-x: 50%;
  --glass-y: 14%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: rgba(8,7,10,.74);
  box-shadow: 0 5px 14px rgba(0,0,0,.32);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 13px;
  white-space: nowrap;
}
.room-point {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 2px solid #c586ff;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 46%, transparent 49%);
  box-shadow: 0 0 12px rgba(138,42,255,.9), inset 0 0 7px rgba(255,255,255,.85);
}
.room-interface.ready .room-point { animation: room-point-pulse 1.05s ease-out .9s 1 both; }
.room-point::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(185,112,255,.85);
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
}
.room-interface.ready .room-point::after { animation: room-point-bloom 1.05s ease-out .9s 1; }

.room-message {
  position: absolute;
  top: 422px;
  left: 53px;
  width: 284px;
  min-height: 44px;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(39,29,24,.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 400 17px/26px Georgia, "Noto Serif KR", serif;
  letter-spacing: 2px;
  text-align: center;
}
.room-message.show { opacity: 1; transform: none; }
.room-message.hide { opacity: 0; transition-delay: 0s; transition-duration: .65s; }

.room-date {
  position: absolute;
  top: 642px;
  left: 20px;
  width: 350px;
  height: 64px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(107,0,255,.31) 36%, rgba(73,0,173,.34) 68%, rgba(20,6,31,.42)) padding-box,
    linear-gradient(135deg, rgba(106,0,255,.58), rgba(136,0,255,.22), rgba(255,255,255,.2)) border-box;
  color: #fff;
  box-shadow:
    0 0 20px rgba(107,0,255,.32),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 4px rgba(0,0,0,.4),
    inset 5px 5px 13px rgba(255,255,255,.04);
  backdrop-filter: blur(12px) saturate(1.5) contrast(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.5) contrast(1.04);
  font-size: 18px;
  font-weight: 700;
}
.room-menu {
  position: absolute;
  top: 722px;
  left: 159px;
  width: 72px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(34,34,34,.43) 55%, rgba(7,7,9,.5)) padding-box,
    linear-gradient(135deg, rgba(0,0,0,.6), rgba(110,110,110,.48)) border-box;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.45);
  backdrop-filter: blur(12px) saturate(1.45);
  -webkit-backdrop-filter: blur(12px) saturate(1.45);
  font-size: 13px;
}
.room-menu img { width: 16px; height: 16px; }
.room-interface button:active { transform: scale(.97); }

.room-toast {
  position: absolute;
  top: 136px;
  left: 50%;
  z-index: 5;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  width: 350px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.08), rgba(56,0,103,.62) 22%, rgba(107,0,255,.48) 68%, rgba(42,0,78,.62)) padding-box,
    linear-gradient(135deg, rgba(0,0,0,.6), rgba(67,67,67,.6)) border-box;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -5px) scale(.98);
  transition: opacity .24s ease, transform .3s cubic-bezier(.22,.72,.18,1);
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 5px 18px rgba(34,0,69,.32), 0 0 20px rgba(107,0,255,.16), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.4);
  backdrop-filter: blur(12px) saturate(1.5) contrast(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.5) contrast(1.05);
}
.room-credit:hover, .room-safe:hover, .room-menu:hover,
.room-credit:focus-visible, .room-safe:focus-visible, .room-menu:focus-visible {
  outline: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(107,0,255,.18) 52%, rgba(20,15,26,.52)) padding-box,
    linear-gradient(135deg, rgba(106,0,255,.62), rgba(136,0,255,.3), rgba(255,255,255,.22)) border-box;
  box-shadow: 0 0 26px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.4);
}
.room-date:hover, .room-date:focus-visible {
  outline: none;
  box-shadow: 0 0 36px rgba(107,0,255,.52), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 5px rgba(0,0,0,.42);
}
.room-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; cursor: pointer; }

@keyframes room-point-pulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 12px rgba(138,42,255,.9), inset 0 0 7px rgba(255,255,255,.85); }
  42% { filter: brightness(1.25); box-shadow: 0 0 22px 6px rgba(150,60,255,.58), inset 0 0 9px rgba(255,255,255,1); }
}

@keyframes room-point-bloom {
  0% { opacity: 0; transform: scale(.88); filter: blur(1px); }
  28% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.9); filter: blur(5px); }
}

/* AA_DSG Glass/sm: refracted room image, translucent tint and a directional rim. */
.room-credit, .room-safe, .room-date, .room-menu,
.room-toast, .room-tooltip, .room-message {
  --glass-x: 50%;
  --glass-y: 12%;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.room-credit, .room-safe {
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(34,34,34,.28) 48%, rgba(7,7,9,.34)) padding-box,
    linear-gradient(135deg, rgba(180,120,255,.72), rgba(107,0,255,.42) 54%, rgba(255,255,255,.28)) border-box;
}

.room-date {
  background:
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(107,0,255,.28) 38%, rgba(73,0,173,.25) 72%, rgba(20,6,31,.22)) padding-box,
    linear-gradient(135deg, rgba(190,135,255,.82), rgba(107,0,255,.58) 55%, rgba(255,255,255,.32)) border-box;
}

.room-menu {
  background:
    linear-gradient(135deg, rgba(255,255,255,.19), rgba(34,34,34,.18) 55%, rgba(7,7,9,.25)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(110,110,110,.34) 48%, rgba(0,0,0,.56)) border-box;
}

.room-toast {
  background:
    linear-gradient(105deg, rgba(255,255,255,.13), rgba(56,0,103,.26) 22%, rgba(107,0,255,.34) 68%, rgba(42,0,78,.28)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.48), rgba(67,67,67,.42), rgba(0,0,0,.55)) border-box;
}

.room-tooltip { background: rgba(34,34,34,.34); }
.room-message { background: rgba(255,255,255,.12); }

.room-credit::before, .room-safe::before, .room-date::before, .room-menu::before,
.room-toast::before, .room-tooltip::before, .room-message::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(255,255,255,.025);
  mix-blend-mode: normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(0,0,0,.42), inset 1px 0 0 rgba(255,255,255,.12);
}

.room-credit::after, .room-safe::after, .room-date::after, .room-menu::after,
.room-toast::after, .room-tooltip::after, .room-message::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255,255,255,.52), rgba(255,255,255,.13) 14%, transparent 36%),
    linear-gradient(132deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 17%, transparent 38%, transparent 72%, rgba(255,255,255,.12) 100%);
  opacity: .72;
  mix-blend-mode: screen;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}

.room-credit.glass-active::after, .room-safe.glass-active::after,
.room-date.glass-active::after, .room-menu.glass-active::after,
.room-toast.glass-active::after, .room-tooltip.glass-active::after,
.room-message.glass-active::after { opacity: 1; transform: scale(1.035); }

/* Figma AA_DSG / AA_DESIGN 3-3 exact material values. */
.room-credit, .room-safe {
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(107,0,255,.18), 0 7px 18px rgba(0,0,0,.18);
  font-size: 14px;
  letter-spacing: -.5px;
  touch-action: manipulation;
}
.room-credit { padding: 4px 8px; }
.room-safe { padding: 6px 8px; gap: 4px; }
.room-credit .credit-point-icon { width: 20px; height: 20px; }
.room-safe img { width: 20px; height: 20px; }

.room-date {
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(107,0,255,.45), 0 8px 22px rgba(30,0,56,.22);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.5px;
}

.room-menu {
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255,255,255,.2), 0 7px 16px rgba(0,0,0,.3);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.5px;
}

.room-toast {
  border: 1px solid transparent;
  border-radius: 24px;
  box-shadow: 0 0 12px 4px rgba(107,0,255,.4);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.5px;
}

.room-message {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 20px rgba(255,255,255,.2);
  font: 400 14px/20px "NanumMyeongjo", Georgia, serif;
  letter-spacing: -.5px;
  text-shadow: 0 0 8px #000;
}

.room-tooltip {
  min-height: 30px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px;
  color: #bfbfbf;
  box-shadow: 0 0 12px rgba(158,158,158,.12);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.5px;
}

.room-credit:hover, .room-safe:hover, .room-menu:hover,
.room-credit:focus-visible, .room-safe:focus-visible {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(107,0,255,.16) 48%, rgba(7,7,9,.3)) padding-box,
    linear-gradient(135deg, rgba(204,166,255,.9), rgba(107,0,255,.62) 54%, rgba(255,255,255,.36)) border-box;
}
.room-menu:hover, .room-menu:focus-visible {
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(107,0,255,.13) 55%, rgba(7,7,9,.23)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(110,110,110,.4) 48%, rgba(0,0,0,.5)) border-box;
}
.room-date:hover, .room-date:focus-visible {
  background:
    linear-gradient(145deg, rgba(255,255,255,.19), rgba(107,0,255,.4) 38%, rgba(73,0,173,.31) 72%, rgba(20,6,31,.2)) padding-box,
    linear-gradient(135deg, rgba(210,180,255,.92), rgba(107,0,255,.72) 55%, rgba(255,255,255,.38)) border-box;
}

/* AA_DESIGN / 3-1_Main_default: static room controls. */
.room-back {
  top: 96px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.room-back img { width: 24px; height: 24px; }
.room-gnb { display: flex; }

.room-credit, .room-safe {
  border: 1px solid #6a00ff;
  background: #22222299;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.room-credit::before, .room-safe::before,
.room-credit::after, .room-safe::after { display: none; }

.room-status {
  position: absolute;
  top: 24px;
  left: 53px;
  right: 25px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font: 700 16px/20px Arial, sans-serif;
}
.room-status-icons { display: flex; align-items: center; gap: 3px; }
.room-status-icons i { width: 3px; border-radius: 1px; background: #fff; }
.room-status-icons i:nth-child(1) { height: 5px; }
.room-status-icons i:nth-child(2) { height: 8px; }
.room-status-icons i:nth-child(3) { height: 11px; }
.room-status-icons b { width: 19px; height: 9px; margin-left: 3px; border: 1px solid #fff; border-radius: 3px; }

.room-date {
  top: 665px;
  border: 1px solid #6a00ff;
  border-radius: 8px;
  background: rgba(107,0,255,.36);
  box-shadow: 0 0 24px rgba(107,0,255,.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 18px;
  letter-spacing: -.5px;
}
.room-date::before, .room-date::after { display: none; }
.room-date:hover, .room-date:focus-visible {
  outline: none;
  background:
    linear-gradient(rgba(107,0,255,.4), rgba(107,0,255,.4)) padding-box,
    linear-gradient(135deg, rgba(190,125,255,.86), rgba(107,0,255,.62) 62%, rgba(196,128,255,.8)) border-box;
  box-shadow: 0 0 60px rgba(107,0,255,.72);
}

.room-menu {
  top: 746px;
  left: 147px;
  width: 96px;
  height: 48px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 14px;
  letter-spacing: -.5px;
}
.room-menu::before {
  display: block;
  inset: 8px 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(rgba(34,34,34,.6), rgba(34,34,34,.6)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(92,92,92,.6) 48%, rgba(0,0,0,.7)) border-box;
  box-shadow: 0 0 12px rgba(34,34,34,.4);
  mix-blend-mode: normal;
}
.room-menu::after { display: none; }
.room-menu:hover, .room-menu:focus-visible {
  outline: none;
  background: transparent;
  box-shadow: none;
}
.room-menu:hover::before, .room-menu:focus-visible::before {
  background:
    linear-gradient(rgba(34,34,34,.76), rgba(34,34,34,.76)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(105,105,105,.7) 48%, rgba(0,0,0,.8)) border-box;
  box-shadow: 0 0 32px rgba(255,255,255,.36);
}

/* AA_DSG feedback components: compact, dark and quietly animated. */
.room-tooltip {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #000;
  border-radius: 24px;
  background: #222222cc;
  color: #bfbfbf;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.5px;
}
.room-tooltip::before, .room-tooltip::after { display: none; }

/* The two hotspots use the AA_DESIGN positions instead of a shared flex layout. */
.room-hotspot-chat {
  top: 248px;
  left: 46px;
  display: block;
  width: 58px;
  height: 62px;
}
.room-hotspot-chat .room-tooltip { position: absolute; top: 0; left: 0; }
.room-hotspot-chat .room-point { position: absolute; top: 34px; left: 29px; }

.room-hotspot-feed {
  top: 527px;
  left: 174px;
  display: block;
  width: 130px;
  height: 30px;
}
.room-hotspot-feed .room-point { position: absolute; top: 1px; left: 0; }
.room-hotspot-feed .room-tooltip { position: absolute; top: 0; left: 32px; }

.room-point {
  overflow: visible;
  isolation: isolate;
  box-shadow: 0 0 8px rgba(107,0,255,.34), inset 0 0 7px rgba(255,255,255,.82);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
}
.room-point::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(107,0,255,.34), rgba(107,0,255,.1) 40%, transparent 70%);
  opacity: .1;
  transform: scale(.82);
  pointer-events: none;
}
.room-interface.ready .room-point {
  animation: room-point-breathe 3.2s ease-in-out .8s infinite;
}
.room-interface.ready .room-point::before {
  animation: room-point-tint 3.2s ease-in-out .8s infinite;
}
.room-interface.ready .room-point::after { animation: none; opacity: 0; }
.room-hotspot:active .room-point,
.room-hotspot:focus-visible .room-point {
  border-color: #6b00ff;
  background: radial-gradient(circle, #6b00ff 0 46%, rgba(213,183,255,.94) 49% 56%, transparent 60%);
  box-shadow: 0 0 12px 4px rgba(107,0,255,.4), inset 0 0 7px rgba(255,255,255,.72);
  animation-play-state: paused;
}
.room-hotspot:active .room-point::before,
.room-hotspot:focus-visible .room-point::before {
  opacity: .34;
  transform: scale(1.22);
  animation-play-state: paused;
}
@media (hover: hover) {
  .room-hotspot:hover .room-point {
    border-color: #6b00ff;
    background: radial-gradient(circle, #6b00ff 0 46%, rgba(213,183,255,.94) 49% 56%, transparent 60%);
    box-shadow: 0 0 12px 4px rgba(107,0,255,.4), inset 0 0 7px rgba(255,255,255,.72);
    animation-play-state: paused;
  }
  .room-hotspot:hover .room-point::before {
    opacity: .34;
    transform: scale(1.22);
    animation-play-state: paused;
  }
}

.room-toast {
  width: max-content;
  min-width: 118px;
  max-width: 350px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #000;
  border-radius: 24px;
  background: #380085;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.5px;
}
.room-toast::before, .room-toast::after { display: none; }

/* The room begins inside the monitor aperture, then opens out into the scene. */
.crt-output.portal-zoom::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -26%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 23%, rgba(6,1,14,.08) 44%, rgba(3,0,8,.62) 72%, rgba(0,0,0,.94) 100%);
  animation: monitor-aperture 1.55s cubic-bezier(.22,.72,.18,1) both;
}
.main-room::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 30%, rgba(222,197,255,.22) 47%, transparent 65%);
  opacity: 0;
}
.main-room.visible::after { animation: portal-scan-out .78s ease-out both; }

/* Mobile Safari drops frames when video, clip-path, blur and canvas animate together. */
@media (max-width: 559px) {
  .login-screen.returning-login {
    height: var(--mobile-stage-h, 844px);
    min-height: 100dvh;
  }

  body.room-active .login-screen {
    position: fixed;
    top: 0;
    left: 0;
  }

  .character-select {
    height: var(--mobile-visible-h, 844px);
  }

  .character-select.compact .character-carousel {
    top: 74px;
    height: calc(var(--mobile-visible-h, 700px) - 196px);
  }

  .character-select.compact .character-card {
    height: calc(var(--mobile-visible-h, 700px) - 204px);
    min-height: 360px;
  }

  .character-select.compact .character-arrow {
    top: calc((var(--mobile-visible-h, 700px) - 204px) / 2 + 54px);
  }

  .character-select.compact .character-pagination {
    top: calc(var(--mobile-visible-h, 700px) - 130px);
  }

  .character-select.compact .character-cta {
    top: calc(var(--mobile-visible-h, 700px) - 72px);
    bottom: auto;
  }

  .crt-output.portal-zoom {
    transform: translateY(142px) scale(4.85);
    filter: brightness(1.18) saturate(1.08);
    transition:
      transform 1.42s cubic-bezier(.22,.72,.18,1),
      opacity 1.18s cubic-bezier(.32,.02,.2,1) .1s;
  }

  .crt-output.portal-zoom::before {
    display: block;
    inset: -8%;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(129,70,188,.08) 0 30%, rgba(42,18,72,.42) 72%, rgba(4,2,8,.72) 100%);
    animation: mobile-portal-soft-focus 1.34s cubic-bezier(.22,.72,.18,1) both;
    will-change: opacity, backdrop-filter;
  }

  .main-room.visible::after { display: none; }
  .liquid-refraction-canvas { display: none; }

  .main-room {
    bottom: auto;
    width: 390px;
    height: var(--mobile-stage-h, 844px);
    opacity: 0;
    transform: scale(.66);
    clip-path: none;
    filter: none;
    transition:
      opacity .82s cubic-bezier(.32,.02,.2,1),
      transform 1.38s cubic-bezier(.22,.72,.18,1);
    will-change: opacity, transform;
  }

  .main-room.visible {
    opacity: 1;
    transform: scale(1);
    clip-path: none;
    filter: none;
  }

  .main-room.returning-entry {
    transform: scale(1.035);
    filter: brightness(.72);
    transition:
      opacity .76s cubic-bezier(.32,.02,.2,1),
      transform .96s cubic-bezier(.22,.72,.18,1),
      filter .82s ease-out;
  }

  .main-room.returning-entry.visible {
    transform: scale(1);
    filter: brightness(1);
  }

  .room-interface { height: 100%; }
  .room-gnb { top: var(--app-safe-top); }
  .room-back { top: calc(var(--app-safe-top) + 8px); }
  .room-toast { top: calc(var(--app-safe-top) + 52px); }
  .room-hotspot-chat { top: 29.4%; }
  .room-message { top: calc(50% - 22px); }
  .room-hotspot-feed { top: 62.4%; }
  .room-date { top: calc(100% - 140px - var(--app-safe-bottom)); }
  .room-menu { top: calc(100% - 60px - var(--app-safe-bottom)); }
  .room-menu-panel { top: calc(100% - 160px - var(--app-safe-bottom)); }

  .chat-screen { height: var(--mobile-stage-h, 844px); }
  .chat-back { top: var(--chat-safe-top); }
  .chat-thread { top: calc(var(--chat-safe-top) + 52px); }
}

/* AA_DESIGN / 4-1_Age verification_DEFAULT */
.age-verification {
  position: absolute;
  z-index: 14;
  inset: 0;
  width: 390px;
  height: 844px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: #f7f4fb;
  background: rgba(13,12,14,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.age-verification.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .28s ease, visibility 0s;
}

.age-close {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.age-close img { display: block; width: 24px; height: 24px; }

.age-content {
  width: 390px;
  min-height: 844px;
  padding: 76px 20px calc(32px + var(--app-safe-bottom));
}

.age-header { text-align: center; }
.age-eyebrow {
  margin: 0;
  color: #8b2cff;
  font: 400 14px/20px "Quantico", monospace;
  letter-spacing: 3px;
}
.age-header h2 {
  margin: 8px 0 0;
  color: #d4adff;
  font-size: 32px;
  line-height: 44px;
  letter-spacing: 0;
}
.age-description {
  margin: 10px -4px 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}
.age-adult-icon {
  display: block;
  width: 70px;
  height: 70px;
  margin: 2px auto 0;
}

.age-form {
  width: 350px;
  margin-top: 2px;
  padding: 20px;
  border: 1px solid rgba(107,0,255,.5);
  border-radius: 8px;
  background: rgba(18,17,19,.36);
}
.age-form-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #c7a0f6;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}
.age-form-section h3 img { width: 20px; height: 20px; object-fit: contain; }
.age-method-section h3 img { width: 24px; height: 24px; margin-left: -2px; }
.age-form-section > p {
  margin: 8px 0 12px 28px;
  color: #f7f4fb;
  font-size: 13px;
  line-height: 18px;
}
.age-birth-input {
  display: block;
  width: 310px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 8px;
  outline: none;
  background: rgba(22,21,23,.54);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
}
.age-birth-input::placeholder { color: rgba(255,255,255,.38); }
.age-birth-input:focus { border-color: #bd9dfa; box-shadow: 0 0 0 1px rgba(189,157,250,.2); }
.age-method-section { margin-top: 20px; }
.age-methods { display: flex; gap: 10px; }
.age-method {
  width: 150px;
  height: 80px;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border: 1px solid #bd9dfa;
  border-radius: 8px;
  background: rgba(34,34,34,.32);
  color: #fff;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.age-method.selected { border-color: #6b00ff; background: rgba(107,0,255,.08); }
.age-method > img { flex: 0 0 20px; width: 20px; height: 20px; }
.age-method span { display: flex; min-width: 0; flex-direction: column; }
.age-method strong {
  color: #c7a0f6;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.age-method small {
  margin-top: 5px;
  color: #f7f4fb;
  font-size: 12px;
  line-height: 16px;
}

.age-agreement-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #bd9dfa;
}
.age-agreement {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.age-agreement input { position: absolute; opacity: 0; pointer-events: none; }
.age-checkmark {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid #bd9dfa;
  border-radius: 3px;
  background: rgba(255,255,255,.04);
}
.age-agreement input:checked + .age-checkmark { border-color: #6b00ff; background: #6b00ff; }
.age-agreement input:checked + .age-checkmark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.age-agreement strong { font-size: 13px; line-height: 18px; }
.age-terms {
  margin: 4px 0 0 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #bd9dfa;
  background: transparent;
  color: #bd9dfa;
  font-size: 12px;
  line-height: 17px;
  cursor: pointer;
}
.age-submit {
  width: 310px;
  height: 64px;
  margin-top: 30px;
  border: 1px solid #6b00ff;
  border-radius: 8px;
  background: rgba(107,0,255,.3);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.age-submit:disabled {
  border-color: rgba(255,255,255,.3);
  background: rgba(34,34,34,.52);
  color: rgba(255,255,255,.38);
  cursor: default;
}
.age-notice {
  margin: 14px 0 0;
  color: #f7f4fb;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  scroll-margin-bottom: calc(20px + var(--app-safe-bottom));
}

@media (max-width: 559px) {
  .age-verification { height: var(--mobile-stage-h, 844px); }
  .age-close { top: var(--app-safe-top); }
  .age-content { padding-top: calc(var(--app-safe-top) + 38px); }
}

/* AA_DESIGN / 5-1_PLAY_SELECT */
.play-select-screen {
  position: absolute;
  z-index: 12;
  inset: 0;
  width: 390px;
  height: 844px;
  overflow: hidden;
  overflow: clip;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  background: #09040e;
  transition: opacity .42s ease, visibility 0s linear .42s;
}

.play-select-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: var(--mobile-stage-h, 844px);
  overflow: hidden;
  overflow: clip;
}

.play-select-screen.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .42s ease, visibility 0s;
}

.play-select-bg,
.play-select-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 844px;
}

.play-select-bg {
  object-fit: cover;
  transform: translate3d(0, var(--play-select-bg-top, 0), 0) scale(1.002);
}

.play-select-shade {
  pointer-events: none;
  background: linear-gradient(180deg, rgba(102,102,102,.1), rgba(0,0,0,.04) 46%, rgba(0,0,0,.42) 100%);
}

.play-select-back,
.play-select-gnb,
.video-preview-area,
.memory-carousel,
.memory-arrow,
.memory-pagination,
.memory-cta {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s ease, transform .5s cubic-bezier(.22,.72,.18,1);
}

.play-select-screen.open .play-select-back,
.play-select-screen.open .play-select-gnb { opacity: 1; transform: none; transition-delay: .06s; }
.play-select-screen.open .video-preview-area { opacity: 1; transform: none; transition-delay: .12s; }
.play-select-screen.open .memory-carousel,
.play-select-screen.open .memory-arrow { opacity: 1; transform: none; transition-delay: .18s; }
.play-select-screen.open .memory-pagination { opacity: 1; transform: none; transition-delay: .24s; }
.play-select-screen.open .memory-cta { opacity: 1; transform: none; transition-delay: .3s; }

.play-select-back {
  position: absolute;
  z-index: 6;
  top: 78px;
  left: 20px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.play-select-back img { display: block; width: 24px; height: 24px; }

.play-select-gnb {
  position: absolute;
  z-index: 6;
  top: 70px;
  right: 20px;
  display: flex;
  gap: 8px;
}

.play-select-credit,
.play-select-safe {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid #6a00ff;
  border-radius: 8px;
  background: rgba(34,34,34,.6);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.play-select-credit { width: 102px; }
.play-select-safe { width: 69px; padding-block: 6px; }
.play-select-credit img { width: 12px; height: 12px; }
.play-select-credit .credit-point-icon,
.play-select-safe img { width: 20px; height: 20px; object-fit: contain; }

.video-preview-area {
  position: absolute;
  z-index: 3;
  top: var(--play-select-preview-top, 160px);
  left: 80px;
  width: 230px;
  height: 197px;
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 8px;
  background: #151515;
  box-shadow: inset 0 0 22px rgba(0,0,0,.9);
  isolation: isolate;
}

.video-preview-area > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  filter: contrast(1.06) saturate(.9) brightness(.86);
  transition: opacity .18s ease;
}
.video-preview-area > img.show { opacity: 1; }

.preview-static {
  position: absolute;
  z-index: 2;
  inset: -12%;
  opacity: 0;
  background:
    repeating-radial-gradient(ellipse at 22% 17%, #fff 0 1px, #111 1px 2px, #777 2px 3px, #050505 3px 5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.7) 0 1px, rgba(0,0,0,.82) 2px 4px);
  background-size: 7px 5px, 100% 4px;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0) scale(1.08);
}
.preview-static.active { opacity: .72; animation: preview-static-shift 90ms steps(2,end) infinite; }

.preview-scanlines {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.34) 3px 4px);
  box-shadow: inset 0 0 22px rgba(0,0,0,.86);
}

.memory-carousel {
  position: absolute;
  z-index: 4;
  top: var(--play-select-memory-top, 472px);
  left: 0;
  width: 390px;
  height: 220px;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.memory-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  transform: translate3d(30px,0,0);
  transition: transform .46s cubic-bezier(.22,.72,.18,1);
  will-change: transform;
}

.memory-card {
  position: relative;
  flex: 0 0 330px;
  width: 330px;
  height: 220px;
  transform: scale(.776);
  opacity: .72;
  transform-origin: center;
  transition: transform .46s cubic-bezier(.22,.72,.18,1), opacity .3s ease, filter .3s ease;
  will-change: transform;
}
.memory-card.is-current {
  opacity: 1;
  transform: scale(1);
  animation: memory-float 3.8s ease-in-out .5s infinite;
}
.memory-card[data-locked="true"] { filter: brightness(.58) saturate(.5); }
.memory-card.is-current[data-locked="true"] { filter: brightness(.72) saturate(.62); }
.memory-card > img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

.memory-copy {
  position: absolute;
  left: 86px;
  top: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  letter-spacing: -.5px;
}
.memory-copy b {
  color: #fff;
  font-size: 10px;
  line-height: 14px;
}
.memory-copy strong {
  color: #bd9dfa;
  font-size: 12px;
  line-height: 16px;
}
.memory-copy span {
  margin-top: 2px;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 20px;
}
.memory-copy em {
  position: absolute;
  top: 77px;
  left: 5px;
  width: 108px;
  color: #222;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
}

.memory-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 14px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font: 700 9px/12px "Quantico", monospace;
  transform: translate(-50%,-50%);
}

.memory-arrow {
  position: absolute;
  z-index: 6;
  top: var(--play-select-arrow-top, 570px);
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #000;
  border-radius: 50%;
  background: rgba(34,34,34,.56);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.memory-arrow img { display: block; width: 24px; height: 24px; }
.memory-prev { left: 20px; }
.memory-next { right: 20px; }
.memory-arrow:disabled { opacity: .28 !important; cursor: default; }

.memory-pagination {
  position: absolute;
  z-index: 6;
  top: var(--play-select-pagination-top, 676px);
  left: 50%;
  min-width: 61px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #000;
  border-radius: 20px;
  background: rgba(34,34,34,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -.5px;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%,12px);
}
.play-select-screen.open .memory-pagination { transform: translate(-50%,0); }

.memory-cta {
  position: absolute;
  z-index: 6;
  top: 740px;
  left: 20px;
  width: 350px;
  height: 64px;
  border: 1px solid #6a00ff;
  border-radius: 8px;
  background: rgba(107,0,255,.28);
  color: #f2f3fa;
  box-shadow: 0 0 20px rgba(107,0,255,.32);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.memory-cta:disabled {
  border-color: rgba(255,255,255,.22);
  background: rgba(34,34,34,.56);
  color: rgba(255,255,255,.72);
  box-shadow: none;
  cursor: default;
}

@keyframes memory-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes preview-static-shift {
  0% { transform: translate(-4px,-3px) scale(1.08); filter: contrast(1.8); }
  50% { transform: translate(5px,2px) scale(1.12); filter: contrast(2.2) brightness(1.3); }
  100% { transform: translate(-2px,4px) scale(1.09); filter: contrast(1.7); }
}

@media (hover: hover) {
  .memory-cta:not(:disabled):hover,
  .memory-cta:not(:disabled):focus-visible {
    outline: none;
    background: rgba(107,0,255,.44);
    box-shadow: 0 0 32px rgba(107,0,255,.5);
  }
}

@media (max-width: 559px) {
  .play-select-screen {
    height: var(--mobile-stage-h, 844px);
  }
  .play-select-canvas {
    left: 0;
    width: 390px;
    height: var(--mobile-stage-h, 844px);
  }
  .play-select-back {
    top: var(--app-safe-top);
    left: 20px;
  }
  .play-select-gnb {
    top: var(--app-safe-top);
    right: 20px;
  }
  .memory-cta {
    top: var(--play-select-cta-top, 740px);
    left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-card.is-current { animation: none; }
  .preview-static.active { animation-duration: 220ms; }
}

/* AA_DESIGN / 6-1 through 6-9 PLAY */
.story-play-screen {
  position: absolute;
  z-index: 14;
  inset: 0;
  width: 390px;
  height: var(--mobile-stage-h, 844px);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  background: #080808;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.story-play-screen.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .32s ease; }
.story-play-screen.story-black-gradient { background: linear-gradient(180deg, #000 0%, #000 66%, #090909 83%, #242424 100%); }
.story-play-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-play-bg[hidden] { display: none; }
.story-play-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.story-play-screen.story-black-gradient .story-play-video { transition-duration: .9s; }
.story-play-video.is-active { opacity: 1; }
.story-play-video[hidden] { display: none; }
.story-play-dim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18) 38%, rgba(0,0,0,.8) 100%); transition: opacity .24s ease; }
.story-play-screen.story-black-gradient .story-play-dim { background: transparent; }
.story-play-screen[data-state="interlude"] :is(.story-back, .story-scene, .story-dialog, .story-intro, .story-points, .story-controls) { display: none; }
.story-back,
.story-scene { position: absolute; z-index: 5; top: max(20px, env(safe-area-inset-top)); border: 0; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-back { left: 20px; width: 40px; height: 40px; padding: 8px; background: transparent; }
.story-back img { width: 24px; height: 24px; }
.story-scene { right: 20px; display: flex; width: 92px; height: 40px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #6a00ff; border-radius: 8px; background: rgba(34,34,34,.66); font-size: 14px; }
.story-scene img { width: 20px; height: 20px; }
.story-toast { position: absolute; z-index: 9; top: max(70px, calc(env(safe-area-inset-top) + 50px)); left: 20px; width: 350px; min-height: 30px; padding: 6px 12px; border: 1px solid rgba(189,157,250,.7); border-radius: 6px; background: rgba(20,16,25,.9); font-size: 12px; line-height: 16px; text-align: center; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.story-toast.show { opacity: 1; transform: none; }
.story-scene-dim {
  position: absolute;
  z-index: 10;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  -webkit-tap-highlight-color: transparent;
}
.story-scene-drawer {
  position: absolute;
  z-index: 11;
  top: 0;
  right: 0;
  bottom: 0;
  width: 61.8%;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: rgba(24,22,27,.96);
  box-shadow: -12px 0 30px rgba(0,0,0,.38);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.72,.18,1);
}
.story-play-screen.scene-drawer-open .story-scene-dim { opacity: 1; pointer-events: auto; }
.story-play-screen.scene-drawer-open .story-scene-drawer { transform: none; }
.story-scene-list {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(189,134,255,.56) transparent;
  -webkit-overflow-scrolling: touch;
}
.story-scene-list::-webkit-scrollbar { width: 3px; }
.story-scene-list::-webkit-scrollbar-track { background: transparent; }
.story-scene-list::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(189,134,255,.56); }
.story-scene-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-scene-item img { flex: 0 0 16px; width: 16px; height: 16px; opacity: .7; }
.story-scene-item.is-current { color: #fff; }
.story-scene-item:disabled { cursor: default; color: rgba(255,255,255,.28); }
.story-scene-item:disabled img { opacity: .24; }
.story-scene-resume { position: sticky; z-index: 1; top: 0; border-bottom-color: rgba(139,44,255,.74); background: rgba(29,18,43,.98); color: #d7b7ff; font-weight: 700; }
.story-scene-item.is-current::before {
  content: "";
  position: absolute;
  right: 0;
  width: 2px;
  height: 24px;
  border-radius: 2px;
  background: #8b2cff;
}
.story-intro { position: absolute; z-index: 3; top: var(--story-copy-screen-top, 150px); right: 0; bottom: calc(max(40px, env(safe-area-inset-bottom)) + 60px); left: 0; overflow: hidden; }
.story-scroll-copy { position: absolute; inset: 0 20px; overflow-y: auto; color: #fff; font-size: 16px; line-height: 24px; text-shadow: 0 2px 8px #000; scrollbar-width: none; }
.story-scroll-copy::-webkit-scrollbar { width: 0; }
.story-scroll-copy.is-credit-roll:not(.has-overflow) { overflow-y: hidden; }
.story-scrollbar { position: absolute; z-index: 2; top: 32px; right: 17px; bottom: 20px; display: none; width: 3px; border-radius: 3px; background: rgba(255,255,255,.08); pointer-events: none; }
.story-scroll-copy.has-overflow.show-scrollbar + .story-scrollbar { display: block; }
.story-scrollbar-thumb { position: absolute; top: 0; left: 0; width: 3px; border-radius: 3px; background: rgba(189,134,255,.72); box-shadow: 0 0 6px rgba(107,0,255,.45); }
.story-scroll-copy.is-credit-roll {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.story-credit-content {
  min-height: 100%;
  padding-top: var(--story-credit-viewport, 496px);
  padding-bottom: 40px;
  white-space: pre-line;
}
.story-scroll-copy.is-credit-roll.has-overflow.is-scrolled {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 38px, #000 calc(100% - 40px), transparent 100%);
}
.story-dialog { position: absolute; z-index: 4; left: 18px; bottom: calc(max(40px, env(safe-area-inset-bottom)) + 240px); display: none; width: 354px; min-height: 190px; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-dialog:focus { outline: none; }
.story-dialog.show { display: block; animation: story-dialog-enter .36s ease both; }
.story-dialog-bubble { position: relative; top: 26px; left: 4px; display: flex; width: 350px; min-height: 164px; align-items: flex-start; justify-content: space-between; padding: 28px 20px 24px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.story-play-screen[data-state="character"] .story-dialog-bubble { background: rgba(107,0,255,.16); box-shadow: inset 0 0 32px rgba(189,157,250,.08); }
.story-play-screen[data-state="user"] .story-dialog-bubble { background: rgba(34,34,34,.6); box-shadow: inset 0 0 28px rgba(255,255,255,.04); }
.story-play-screen[data-state="narration"] .story-dialog-bubble { background: rgba(34,34,34,.2); }
.story-dialog-copy { width: 278px; min-height: 112px; color: #fff; font-size: 18px; line-height: 28px; white-space: normal; overflow-wrap: break-word; }
.story-dialog-copy strong { font-weight: 700; }
.story-dialog-copy.preserve-breaks { white-space: pre-line; }
.story-dialog-arrow { position: absolute; right: 9px; bottom: 9px; width: 31px; height: 29px; animation: story-arrow-float 1.45s ease-in-out infinite; }
.story-name-tag { position: absolute; top: 10px; display: flex; width: 88px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; color: #fff; font-size: 16px; font-weight: 700; line-height: 24px; }
.story-profile { position: absolute; top: 0; width: 52px; height: 52px; overflow: hidden; border: 1px solid #6b00ff; border-radius: 50%; background: #222; }
.story-profile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-play-screen[data-state="character"] .story-name-tag { left: 32px; padding-left: 16px; background: #4900ad; }
.story-play-screen[data-state="character"] .story-profile { left: 0; }
.story-play-screen[data-state="user"] .story-name-tag { right: 24px; padding-right: 16px; background: #222; }
.story-play-screen[data-state="user"] .story-profile { right: -4px; border-color: #222; }
.story-play-screen[data-state="narration"] .story-name-tag,
.story-play-screen[data-state="narration"] .story-profile { display: none; }
.story-points { position: absolute; z-index: 4; inset: 118px 0 0; display: none; }
.story-points.show { display: block; }
.story-point { position: absolute; isolation: isolate; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; background: rgba(107,0,255,.46); box-shadow: 0 0 8px rgba(107,0,255,.42); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; -webkit-tap-highlight-color: transparent; }
.story-point[hidden] { display: none; }
.story-point::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.story-point::before { content: ''; position: absolute; z-index: -1; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(189,134,255,.78) 0, rgba(107,0,255,.48) 38%, rgba(107,0,255,0) 72%); filter: blur(4px); opacity: .38; animation: story-point-ring 2.4s ease-in-out infinite; }
.story-point { animation: story-point-glow 2.4s ease-in-out infinite; }
.story-point.point-b,
.story-point.point-b::before { animation-delay: .28s; }
.story-point.point-c,
.story-point.point-c::before { animation-delay: .56s; }
.story-point:hover,
.story-point:focus-visible { outline: none; border-color: #bd86ff; background: #6b00ff; box-shadow: 0 0 18px rgba(107,0,255,.82); animation: none; }
.story-point:active { border-color: #d6b3ff; background: #6b00ff; box-shadow: 0 0 10px rgba(107,0,255,.92); animation: none; }
.story-point span { position: absolute; bottom: 36px; left: 0; display: grid; width: max-content; max-width: 150px; min-height: 30px; place-items: center; padding: 0 8px; border: 1px solid #000; border-radius: 24px; background: #222222cc; color: #bfbfbf; box-shadow: none; font-size: 14px; line-height: 20px; transform: translateX(-20%); white-space: nowrap; }
.point-a { top: 75px; left: 209px; }
.point-b { top: 190px; left: 90px; }
.point-c { top: 286px; left: 209px; }
.story-controls { position: absolute; z-index: 6; right: 20px; bottom: max(40px, env(safe-area-inset-bottom)); left: 20px; display: flex; height: 40px; align-items: center; justify-content: space-between; pointer-events: none; }
.story-controls button { pointer-events: auto; }
.story-step,
.story-hide { display: flex; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.32); background: rgba(34,34,34,.7); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-step { min-width: 76px; gap: 5px; padding: 0 12px; border-radius: 20px; font-size: 14px; }
.story-step img { width: 20px; height: 20px; }
.story-hide { position: absolute; left: 50%; width: 60px; border-radius: 20px; transform: translateX(-50%); }
.story-hide img { width: 24px; height: 24px; }
.story-play-screen.story-video-playing .story-hide { visibility: hidden; pointer-events: none; }
.story-play-screen[data-state="points"] .story-hide { display: none; }
.story-hide.story-hide-enter { animation: story-hide-enter .38s cubic-bezier(.22,.72,.18,1) both; }
.story-step:disabled { visibility: hidden; pointer-events: none; }
.story-play-screen[data-state="intro"] .story-prev { visibility: hidden; }
.story-play-screen[data-state="intro"].story-prev-visible .story-prev { visibility: visible; }
.story-play-screen[data-state="points"] .story-next { visibility: hidden; }
.story-play-screen[data-state="points"].story-points-next-visible .story-next { visibility: visible; }
.story-play-screen[data-state="last"] .story-next { min-width: 76px; }
.story-play-screen:is([data-state="character"], [data-state="user"], [data-state="narration"]) .story-controls { justify-content: center; }
.story-play-screen:is([data-state="character"], [data-state="user"], [data-state="narration"]) .story-step { display: none; }
.story-play-screen.story-scene-first:is([data-state="character"], [data-state="user"], [data-state="narration"]) .story-controls { justify-content: flex-start; }
.story-play-screen.story-scene-first:is([data-state="character"], [data-state="user"], [data-state="narration"]) .story-prev { display: flex; }
.story-play-screen.story-scene-last:is([data-state="character"], [data-state="user"], [data-state="narration"]) .story-controls { justify-content: space-between; }
.story-play-screen.story-scene-last:is([data-state="character"], [data-state="user"], [data-state="narration"]) .story-prev { display: flex; }
.story-play-screen.story-point-replay .story-back,
.story-play-screen.story-point-replay .story-scene,
.story-play-screen.story-point-replay .story-dialog,
.story-play-screen.story-point-replay .story-points,
.story-play-screen.story-point-replay .story-controls { display: none; }
.story-play-screen.story-point-replay .story-play-dim { opacity: 0; }
.story-play-screen.ui-hidden .story-intro,
.story-play-screen.ui-hidden .story-dialog,
.story-play-screen.ui-hidden .story-points,
.story-play-screen.ui-hidden .story-step { opacity: 0; pointer-events: none; }
.story-play-screen.ui-hidden .story-dialog {
  visibility: hidden;
  animation: none;
}
.story-play-screen.ui-hidden .story-play-dim { opacity: 0; }
.story-scene-transition {
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: #000;
  will-change: opacity;
}
.story-play-screen.story-transition-running { cursor: wait; }
.story-play-screen.story-transition-out .story-scene-transition {
  opacity: 1;
  transition: opacity var(--story-transition-out-ms, 240ms) cubic-bezier(.4,0,1,1);
}
.story-play-screen.story-transition-black .story-scene-transition { opacity: 1; }
.story-play-screen.story-transition-in .story-scene-transition {
  opacity: 0;
  animation: story-scene-fade-in var(--story-transition-in-ms, 340ms) cubic-bezier(0,0,.2,1) both;
}
.story-media-error {
  position: absolute;
  z-index: 20;
  right: 20px;
  bottom: calc(max(40px, env(safe-area-inset-bottom)) + 72px);
  left: 20px;
  display: none;
  padding: 18px;
  border: 1px solid rgba(196,141,255,.58);
  border-radius: 8px;
  background: rgba(14,11,18,.94);
  color: #fff;
  text-align: center;
  box-shadow: 0 14px 48px rgba(0,0,0,.42);
}
.story-media-error.show { display: block; }
.story-media-error strong { display: block; font-size: 16px; line-height: 24px; }
.story-media-error p { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 20px; }
.story-media-error > div { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.story-media-error button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(196,141,255,.55); border-radius: 6px; background: #241435; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.story-media-error button[hidden] { display: none; }
.story-exit-modal { position: absolute; z-index: 12; inset: 0; display: none; place-items: center; padding: 45px; background: rgba(0,0,0,.72); }
.story-exit-modal.open { display: grid; }
.story-exit-panel { width: 300px; overflow: hidden; border: 0; border-radius: 4px; background: #fff; color: #222; text-align: center; }
.story-exit-panel strong { display: block; padding: 24px 20px 8px; font: 700 20px/28px "Pretendard", Arial, sans-serif; }
.story-exit-panel p { margin: 0; padding: 0 20px 22px; color: #555; font: 400 14px/20px "Pretendard", Arial, sans-serif; }
.story-exit-panel div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #d8d8d8; }
.story-exit-panel button { height: 56px; border: 0; background: #fff; color: #222; font: 700 16px/24px "Pretendard", Arial, sans-serif; cursor: pointer; }
.story-exit-panel button + button { border-left: 1px solid #d8d8d8; background: #6b00ff; color: #fff; }
.story-exit-panel button:active { opacity: .82; }

@media (max-width: 559px) {
  .story-play-screen { height: var(--mobile-stage-h, 844px); }
}

@keyframes story-dialog-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes story-hide-enter {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .story-hide.story-hide-enter { animation: none; }
}

@keyframes story-arrow-float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}

@keyframes story-point-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(107,0,255,.22), 0 0 8px rgba(138,42,255,.36); }
  50% { box-shadow: 0 0 0 6px rgba(107,0,255,.42), 0 0 22px rgba(179,112,255,.82); }
}

@keyframes story-point-ring {
  0%, 100% { opacity: .24; filter: blur(3px); transform: scale(.86); }
  50% { opacity: .72; filter: blur(8px); transform: scale(1.28); }
}

@keyframes story-scene-fade-in {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .story-dialog-arrow { animation: none; }
  .story-point,
  .story-point::before { animation-duration: 3.8s; }
  .story-scroll-copy.is-credit-roll { scroll-behavior: auto; }
  .story-scene-transition { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* AA_DESIGN / 7-1_Fin */
.ending-screen {
  position: absolute;
  z-index: 15;
  inset: 0;
  width: 390px;
  height: var(--mobile-stage-h, 844px);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: #222;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.ending-screen.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .45s ease; }
.ending-canvas { position: absolute; top: 0; left: 0; width: 390px; height: 844px; transform-origin: top center; perspective: 900px; }
.ending-tissue { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.ending-tissue-roll { position: absolute; z-index: 3; top: var(--ending-roll-top, 70px); left: 0; width: 390px; transform-origin: 50% 50%; }
.ending-tissue-roll-image { position: relative; width: 100%; overflow: hidden; }
.ending-tissue-roll img { display: block; width: 390px; height: 119px; object-fit: fill; user-select: none; }
.ending-roll-turn { position: absolute; inset: 0 6% auto; height: 26%; opacity: 0; background: linear-gradient(to bottom, transparent, rgba(73,57,82,.16), transparent); filter: blur(2px); transform: translateY(-100%); }
.ending-roll-shadow { position: absolute; bottom: 0; left: 8.5%; width: 83%; height: 28px; background: linear-gradient(to bottom, rgba(40,32,48,.25), rgba(40,32,48,0)); filter: blur(4px); transform: translateY(50%); }
.ending-paper-sheet { position: absolute; z-index: 2; top: var(--ending-tissue-top, 116px); left: 28px; width: 334px; transform-origin: 50% 0; transform-style: preserve-3d; }
.ending-paper-clip { position: relative; width: 100%; height: 0; overflow: hidden; }
.ending-paper-texture,
.ending-paper-creases,
.ending-paper-perforation,
.ending-exit-crease,
.ending-paper-edge { position: absolute; inset: 0; display: block; pointer-events: none; }
.ending-paper-texture { background: url('assets/ending/tissue_mid.png') center top/100% auto repeat-y; transform: translateZ(0); }
.ending-paper-creases { background-image: repeating-linear-gradient(114deg, rgba(255,255,255,.05) 0 1px, transparent 1px 13px), repeating-linear-gradient(66deg, rgba(0,0,0,.05) 0 1px, transparent 1px 19px), repeating-linear-gradient(98deg, rgba(0,0,0,.035) 0 1px, transparent 1px 31px); mix-blend-mode: soft-light; }
.ending-paper-perforation { background-image: radial-gradient(circle, rgba(70,54,80,.16) .7px, transparent 1.3px); background-repeat: repeat; background-position: center top; background-size: 14px 168px; }
.ending-exit-crease { right: 8px; bottom: auto; left: 8px; height: 28px; opacity: 0; background: linear-gradient(to bottom, rgba(54,41,59,.19), rgba(54,41,59,.055), transparent); filter: blur(2px); transform: translateY(-12px); }
.ending-paper-edge-left { right: auto; width: 16px; background: linear-gradient(90deg, rgba(68,55,74,.09), transparent); }
.ending-paper-edge-right { left: auto; width: 16px; background: linear-gradient(270deg, rgba(68,55,74,.09), transparent); }
.ending-paper-edge-top { bottom: auto; height: 40px; background: linear-gradient(to bottom, rgba(34,27,37,.18), transparent); }
.ending-paper-bottom { display: block; width: 334px; height: 15px; user-select: none; }
.ending-screen.is-settled .ending-paper-clip { height: calc(var(--ending-tissue-height, 586px) - 15px); }
.ending-screen.is-playing .ending-tissue-roll { animation: ending-roll-unwind 1.8s cubic-bezier(.18,.76,.3,1) both; }
.ending-screen.is-playing .ending-roll-turn { animation: ending-roll-turn .52s linear 4 both; }
.ending-screen.is-playing .ending-paper-sheet { animation: ending-sheet-settle 1.8s cubic-bezier(.22,.75,.28,1) both; }
.ending-screen.is-playing .ending-paper-clip { animation: ending-paper-reveal 1.8s cubic-bezier(.11,.9,.32,1) both; }
.ending-screen.is-playing .ending-paper-texture,
.ending-screen.is-playing .ending-paper-creases,
.ending-screen.is-playing .ending-paper-perforation { animation: ending-paper-travel 1.8s cubic-bezier(.12,.82,.3,1) both; }
.ending-screen.is-playing .ending-exit-crease { animation: ending-exit-crease .94s cubic-bezier(.16,.8,.34,1) both; }
.ending-content { position: absolute; z-index: 5; inset: 0; color: #2c094d; text-align: center; }
.ending-reveal { opacity: 0; transform: translateY(10px); }
.ending-screen.is-playing .ending-thanks { animation: ending-content-in .48s ease-out 2.88s both; }
.ending-screen.is-playing .ending-profile-block { animation: ending-content-in .52s ease-out 3.18s both; }
.ending-screen.is-playing .ending-affinity { animation: ending-content-in .52s ease-out 3.54s both; }
.ending-screen.is-playing .ending-message { animation: ending-content-in .52s ease-out 3.94s both; }
.ending-screen.is-playing .ending-actions { animation: ending-content-in .52s ease-out 4.34s both; }
.ending-thanks { position: absolute; top: var(--ending-thanks-top, 82px); left: 48px; width: 294px; }
.ending-thanks::after { content: ''; position: absolute; top: 92px; left: 0; width: 294px; height: 16px; background: url('assets/ending/ic-heart.svg') center/16px 16px no-repeat; border-top: 1px solid rgba(114,46,179,.24); }
.ending-thanks p { margin: 0; color: #6b00ff; font: 400 24px/32px "Nanum Pen Script", "NanumMyeongjo", cursive; letter-spacing: 0; }
.ending-thanks strong { display: block; margin-top: 4px; color: #2c094d; font: 700 16px/24px "Pretendard", Arial, sans-serif; letter-spacing: 0; }
.ending-profile-block { position: absolute; top: var(--ending-profile-top, 232px); left: 0; width: 390px; height: 168px; }
.ending-secret { display: flex; align-items: center; justify-content: center; gap: 8px; color: #6b00ff; font: 700 20px/28px "Pretendard", Arial, sans-serif; }
.ending-secret img { width: 16px; height: 16px; }
.ending-avatar { position: absolute; top: var(--ending-avatar-top, 36px); left: 50%; display: block; width: var(--ending-avatar-size, 100px); height: var(--ending-avatar-size, 100px); overflow: hidden; border: 1px solid #6b00ff; border-radius: 50%; background: #222; box-shadow: 0 0 0 3px rgba(107,0,255,.09); transform: translateX(-50%); }
.ending-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ending-character-name { position: absolute; top: var(--ending-name-top, 136px); left: 0; display: flex; width: 390px; align-items: center; justify-content: center; gap: 4px; margin: 0; color: #2c094d; font: 700 20px/28px "Pretendard", Arial, sans-serif; }
.ending-character-name img { width: 20px; height: 20px; }
.ending-particles img { position: absolute; opacity: .82; }
.ending-particles .p-star { width: 10px; height: 10px; }
.ending-particles .p-heart { width: 15px; height: 15px; }
.ending-particles .p1 { top: 45px; left: 83px; }.ending-particles .p2 { top: 60px; left: 109px; }
.ending-particles .p3 { top: 45px; right: 97px; }.ending-particles .p4 { top: 86px; right: 70px; }
.ending-particles .p5 { top: 68px; left: 57px; transform: rotate(-28deg); }.ending-particles .p6 { top: 67px; right: 104px; transform: rotate(28deg); }
.ending-affinity { position: absolute; top: var(--ending-affinity-top, 412px); left: 48px; width: 294px; height: 132px; border-top: 1px solid rgba(114,46,179,.24); border-bottom: 1px solid rgba(114,46,179,.24); }
.ending-heart { position: absolute; top: 12px; left: 131px; width: 32px; height: 32px; }
.ending-affinity strong { position: absolute; top: 47px; left: 0; width: 294px; font: 700 14px/20px "Pretendard", Arial, sans-serif; }
.ending-progress { position: absolute; top: 75px; left: 47px; width: 200px; height: 8px; overflow: hidden; border-radius: 4px; background: #bfbfbf; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
.ending-progress i { display: block; width: 80%; height: 100%; border-radius: inherit; background: #6b00ff; box-shadow: inset 0 -2px 4px rgba(0,0,0,.4); transform: scaleX(0); transform-origin: left; }
.ending-screen.is-playing .ending-progress i { animation: ending-progress-fill 1.05s cubic-bezier(.22,.7,.22,1) 3.68s both; }
.ending-affinity b { position: absolute; top: 91px; left: 0; width: 294px; color: #862eff; font: 700 16px/24px "Pretendard", Arial, sans-serif; }
.ending-message { position: absolute; top: var(--ending-message-top, 575px); left: 48px; width: 294px; }
.ending-message p { margin: 0; color: #722eb3; font: 400 32px/44px "Nanum Pen Script", "NanumMyeongjo", cursive; letter-spacing: 0; }
.ending-message span { display: block; margin-top: 4px; color: #2c094d; font: 400 14px/20px "Pretendard", Arial, sans-serif; }
.ending-actions { position: absolute; z-index: 7; top: var(--ending-actions-top, 720px); left: 20px; display: flex; gap: 12px; }
.ending-button { width: 169px; height: 64px; border-radius: 8px; color: #fff; font: 700 18px/26px "Pretendard", Arial, sans-serif; cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.ending-room { border: 1px solid rgba(0,0,0,.78); background: rgba(255,255,255,.1); box-shadow: 0 0 20px rgba(255,255,255,.2); }
.ending-watch { border: 1px solid #6b00ff; background: rgba(107,0,255,.28); box-shadow: 0 0 20px rgba(107,0,255,.32); }
.ending-button:disabled { pointer-events: none; }
.ending-button:not(:disabled):hover, .ending-button:not(:disabled):focus-visible { outline: none; background: #6b00ff; box-shadow: 0 0 24px rgba(107,0,255,.65); }
.ending-button:not(:disabled):active { transform: scale(.98); background: #6b00ff; }

@keyframes ending-roll-unwind { 0% { opacity: 1; transform: scaleY(1); } 28% { transform: scaleY(.982) translateY(.2px); } 68% { transform: scaleY(.953) translateY(.65px); } 100% { opacity: 1; transform: scaleY(.932) translateY(.9px); } }
@keyframes ending-roll-turn { 0% { opacity: 0; transform: translateY(-100%); } 50% { opacity: .55; transform: translateY(60%); } 100% { opacity: 0; transform: translateY(220%); } }
@keyframes ending-sheet-settle { 0%, 22% { transform: none; } 45% { transform: translate3d(.85px,0,0) rotate(.12deg) skewX(.08deg); } 67% { transform: translate3d(-.72px,3.5px,0) rotate(-.1deg) skewX(-.06deg); } 84% { transform: translate3d(.38px,-1.2px,0) rotate(.04deg); } 100% { transform: none; } }
@keyframes ending-paper-reveal { from { height: 0; } to { height: calc(var(--ending-tissue-height, 586px) - 15px); } }
@keyframes ending-paper-travel { from { background-position-y: calc(15px - var(--ending-tissue-height, 586px)); } to { background-position-y: 0; } }
@keyframes ending-exit-crease { 0% { opacity: 0; transform: translateY(-12px); } 20% { opacity: .52; transform: translateY(1px); } 67% { opacity: .22; transform: translateY(17px); } 100% { opacity: 0; transform: translateY(35px); } }
@keyframes ending-content-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ending-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ending-screen.is-playing .ending-tissue-roll,
  .ending-screen.is-playing .ending-roll-turn,
  .ending-screen.is-playing .ending-paper-sheet,
  .ending-screen.is-playing .ending-paper-clip,
  .ending-screen.is-playing .ending-paper-texture,
  .ending-screen.is-playing .ending-paper-creases,
  .ending-screen.is-playing .ending-paper-perforation,
  .ending-screen.is-playing .ending-exit-crease,
  .ending-screen.is-playing .ending-reveal,
  .ending-screen.is-playing .ending-progress i { animation-duration: .01ms; animation-delay: .01ms; }
}

@keyframes mobile-portal-soft-focus {
  0% { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  38% { opacity: .16; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
  100% { opacity: .62; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}

/* 8-1_CHAT / 8-2_CHAT_Typing */
.chat-screen {
  --keyboard-offset: 0px;
  --browser-bottom-offset: 0px;
  --chat-toolbar-top: 784px;
  position: absolute;
  z-index: 20;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
  isolation: isolate;
  contain: paint;
}

.chat-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(34, 34, 34, .58);
  pointer-events: none;
}

.chat-screen.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.main-room.chat-open .room-interface {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.chat-back {
  position: absolute;
  z-index: 3;
  top: var(--chat-safe-top);
  left: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.chat-back img { width: 24px; height: 24px; }

.chat-thread {
  position: absolute;
  z-index: 2;
  top: calc(var(--chat-safe-top) + 52px);
  left: 0;
  width: 390px;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.chat-row { display: flex; width: 100%; padding: 12px 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.chat-row-saki { gap: 12px; align-items: flex-start; }
.chat-row-user { justify-content: flex-end; padding-top: 6px; }

.chat-avatar {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
}

.chat-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-avatar-border { position: absolute; inset: 0; width: 100%; height: 100%; }
.chat-content { width: 298px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat-name { color: #bd9dfa; font-size: 14px; line-height: 20px; font-weight: 700; }

.chat-bubble {
  margin: 0;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

.chat-bubble-saki {
  width: 298px;
  border-radius: 0 12px 12px 12px;
  background: rgba(107, 0, 255, .32);
  opacity: 0;
  transform: translateY(5px) scale(.985);
  transform-origin: top left;
  transition: opacity .24s ease, transform .3s cubic-bezier(.22,.72,.18,1);
}

.chat-bubble-saki.show { opacity: 1; transform: none; }
.chat-bubble-user {
  max-width: 298px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 12px 0 12px 12px;
  background: rgba(0, 0, 0, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-row-user { opacity: 0; transform: translateY(6px); transition: opacity .24s ease, transform .3s cubic-bezier(.22,.72,.18,1); }
.chat-row-user.show { opacity: 1; transform: none; }
.chat-row-followup { display: none; opacity: 0; transform: translateY(6px); }
.chat-row-followup.show { display: flex; opacity: 1; transform: none; }

.chat-typing {
  width: 54px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 0 12px 12px 12px;
  background: rgba(107, 0, 255, .32);
  transition: opacity .16s ease, transform .16s ease;
}

.chat-typing.hide { opacity: 0; transform: scale(.92); position: absolute; pointer-events: none; }
.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  animation: chat-dot .72s ease-in-out infinite alternate;
}
.chat-typing i:nth-child(2) { animation-delay: .12s; }
.chat-typing i:nth-child(3) { animation-delay: .24s; }

.chat-toolbar {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: calc(max(var(--keyboard-offset), var(--browser-bottom-offset)) + env(safe-area-inset-bottom, 0px));
  width: 390px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  background: #222;
  transition: bottom .18s ease;
}

@media (max-width: 559px) {
  .chat-toolbar {
    top: var(--chat-toolbar-top);
    bottom: auto;
    transition: top .12s ease-out;
  }
}

.chat-input-shell {
  flex: 1 1 auto;
  min-width: 0;
  width: 298px;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
}

.chat-input-shell input {
  display: block;
  width: 100%;
  height: 20px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
}
.chat-input-shell input::placeholder { color: #767676; opacity: 1; }

.chat-send {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.72);
  border-radius: 50%;
  background: rgba(34,34,34,.12);
}
.chat-send img { width: 24px; height: 24px; }
.chat-send:disabled { opacity: .38; }
.chat-send:not(:disabled) { border-color: rgba(189,157,250,.72); background: rgba(107,0,255,.28); }

@keyframes chat-dot {
  from { transform: translateY(2px); opacity: .45; }
  to { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing i { animation-duration: 1.4s; }
}

@media (max-width: 559px) {
  .room-menu-panel { top: calc(100% - 160px - var(--app-safe-bottom)); }
}

/* AA_DESIGN / 9-1_HOME_FEED */
.global-feed {
  position: fixed;
  z-index: 26;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: #202020;
  color: #eee;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  transition: transform .44s cubic-bezier(.22,.78,.18,1), opacity .24s ease, visibility 0s linear .44s;
}
.global-feed.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.global-feed-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 132px 0 24px;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.26) transparent;
  -webkit-overflow-scrolling: touch;
}
.global-feed-scroll::-webkit-scrollbar { width: 3px; }
.global-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.global-feed-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255,255,255,.26); }
.global-feed-gnb {
  position: fixed;
  z-index: 4;
  top: 20px;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  right: max(20px, env(safe-area-inset-right));
  transition: opacity .22s ease, transform .28s cubic-bezier(.22,.78,.18,1);
}
.global-feed-gnb button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0,0,0,.58);
  border-radius: 50%;
  background: rgba(24,24,24,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.global-feed-gnb img { width: 24px; height: 24px; display: block; }
.global-feed.gnb-hidden .global-feed-gnb { opacity: 0; pointer-events: none; transform: translateY(-18px); }
.global-feed-post { margin: 0 20px; padding-bottom: 40px; }
.global-feed-post + .global-feed-post { padding-top: 28px; }
.global-feed-post .sns-post-header { height: 48px; padding-bottom: 4px; }
.global-feed-post button.sns-post-avatar { border: 0; }
.global-feed-post .sns-post-meta strong { color: #d2adff; font-weight: 400; }
.global-feed-copy { margin: 14px 0 10px; color: #f1f1f1; font: 400 14px/21px Arial, sans-serif; }
.global-feed-post .sns-post-actions { height: 60px; }
.global-feed-toast { z-index: 8; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.global-feed-expand { z-index: 10; }
.global-feed-expand > img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 559px) {
  .global-feed { height: var(--mobile-stage-h, 844px); }
  .global-feed-gnb { top: var(--app-safe-top); }
  .global-feed-scroll { padding-top: calc(var(--app-safe-top) + 48px); }
}

/* AA_DESIGN / 10-1_SNS_HOME */
.sns-home {
  position: absolute;
  z-index: 40;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: #202020;
  color: #fff;
  transform: translate3d(0, 100%, 0);
  transition:
    transform .48s cubic-bezier(.22,.78,.18,1),
    opacity .24s ease,
    visibility 0s linear .48s;
  will-change: transform;
}
.sns-home.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.sns-scroll {
  width: 100%;
  height: var(--mobile-stage-h, 844px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.26) transparent;
  -webkit-overflow-scrolling: touch;
}
.sns-scroll::-webkit-scrollbar { width: 3px; }
.sns-scroll::-webkit-scrollbar-track { background: transparent; }
.sns-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255,255,255,.26); }
.sns-profile {
  position: relative;
  height: 414px;
  padding: 0 20px 20px;
  overflow: hidden;
  background: #202020;
}
.sns-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 208px;
  overflow: hidden;
}
.sns-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(32,32,32,.2) 40%, #202020 100%);
}
.sns-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 38%;
  transform: scale(1.22);
}
.sns-close {
  position: fixed;
  z-index: 2;
  top: 70px;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  right: max(20px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0,0,0,.6);
  border-radius: 50%;
  background: rgba(24,24,24,.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,.78,.18,1);
}
.sns-close img { width: 24px; height: 24px; }
.sns-home.gnb-hidden .sns-close {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px);
}
.sns-identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-top: 158px;
}
.sns-avatar {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(from var(--sns-ring-angle), #ff008d 0 24%, #b500ff 43%, #6b00ff 67%, #d000ff 84%, #ff008d 100%);
  animation: sns-profile-ring-spin 8s linear infinite;
}
.sns-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.sns-display-name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  font: 700 22px/28px Arial, sans-serif;
}
.sns-handle {
  margin: 0 0 7px;
  color: #ff008c;
  font: 700 15px/20px Arial, sans-serif;
}
.sns-verified {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  clip-path: polygon(50% 0,64% 9%,81% 7%,89% 23%,100% 34%,94% 51%,100% 66%,87% 77%,81% 94%,63% 92%,50% 100%,35% 91%,18% 94%,11% 77%,0 66%,6% 49%,0 34%,12% 22%,19% 6%,36% 9%);
  background: #6b00ff;
  font: 700 14px/1 Arial, sans-serif;
}
.sns-profile-copy {
  margin-top: 13px;
  color: #eee;
  font: 400 14px/21px Arial, sans-serif;
}
.sns-profile-copy p { margin: 0 0 7px; }
.sns-more {
  padding: 0;
  border: 0;
  border-bottom: 1px solid #ddd;
  background: transparent;
  color: #eee;
  font: 400 14px/20px Arial, sans-serif;
}
.sns-tags {
  display: flex;
  gap: 4px;
  margin: 20px 0 17px;
  padding: 0;
  list-style: none;
}
.sns-tags li {
  padding: 6px 8px;
  border-radius: 8px;
  background: #7200ff;
  font: 700 12px/16px Arial, sans-serif;
  white-space: nowrap;
}
.sns-external {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font: 700 14px/20px Arial, sans-serif;
  text-decoration: none;
}
.sns-external img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}
.sns-tabs {
  height: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
  background: #202020;
}
.sns-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-right: 1px solid #2c2c2c;
  background: transparent;
  color: #777;
  font: 400 16px/22px Arial, sans-serif;
}
.sns-tabs button.active { color: #fff; font-weight: 700; }
.sns-tabs span {
  min-width: 38px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 16px;
  background: #dedede;
  color: #222;
  font: 700 13px/26px Arial, sans-serif;
}
.sns-tabs button.active span { background: #ff008c; color: #fff; }
.sns-tab-panel[hidden] { display: none !important; }
.sns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #111;
}
.sns-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 130 / 168;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #181818;
  -webkit-tap-highlight-color: transparent;
}
.sns-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.sns-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20,20,20,.65);
  transform: translate(-50%, -50%);
}
.sns-play::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 11px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}
.sns-locked-tile img { filter: blur(8px) brightness(.42); transform: scale(1.1); }
.sns-lock {
  position: absolute;
  top: calc(50% - 30px);
  left: 50%;
  width: 52px !important;
  height: 52px !important;
  object-fit: contain;
  filter: none !important;
  transform: translate(-50%, -50%) !important;
}
.sns-locked-tile strong {
  position: absolute;
  left: 50%;
  top: calc(50% + 20px);
  padding: 5px 10px;
  border-radius: 8px;
  background: #7300ff;
  color: #fff;
  font: 700 12px/18px Arial, sans-serif;
  transform: translateX(-50%);
}
.sns-tile:active { filter: brightness(.86); }
@media (hover: hover) {
  .sns-tile:hover { filter: brightness(.9); }
}
.sns-friend-list {
  min-height: 469px;
  padding: 30px 20px 36px;
  background: #202020;
}
.sns-friend-item {
  width: 100%;
  height: 67px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.sns-friend-item:last-child { margin-bottom: 0; }
.sns-friend-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from var(--sns-ring-angle), #ff008d 0 24%, #b500ff 43%, #6b00ff 67%, #d000ff 84%, #ff008d 100%);
  animation: sns-profile-ring-spin 8s linear infinite;
}
.sns-friend-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.sns-friend-copy {
  min-width: 0;
  flex: 1;
  display: block;
}
.sns-friend-copy strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 2px;
  font: 700 20px/26px Arial, sans-serif;
  white-space: nowrap;
}
.sns-friend-copy .sns-verified {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  font-size: 12px;
  font-style: normal;
}
.sns-friend-copy small {
  display: block;
  overflow: hidden;
  color: #aaa;
  font: 400 14px/20px Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sns-friend-item:active { opacity: .72; }
@media (hover: hover) {
  .sns-friend-item:hover { opacity: .82; }
}
.sns-toast {
  position: fixed;
  z-index: 20;
  left: 20px;
  right: 20px;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  width: auto;
  height: 30px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #6b00ff;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 9% 50%, rgba(89,30,255,.9), transparent 18%),
    linear-gradient(90deg, #14002d, #1d003d 42%, #100020);
  box-shadow: 0 0 12px rgba(107,0,255,.3);
  color: #fff;
  font: 400 14px/28px Arial, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .26s cubic-bezier(.22,.78,.18,1);
}
.sns-toast::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -18px;
  width: 70px;
  height: 66px;
  background: radial-gradient(circle, rgba(96,31,255,.9), rgba(58,0,158,.55) 38%, transparent 70%);
  filter: blur(6px);
}
.sns-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.sns-feed-detail {
  position: fixed;
  z-index: 10;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: #202020;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
  transition:
    transform .42s cubic-bezier(.22,.78,.18,1),
    opacity .22s ease,
    visibility 0s linear .42s;
}
.sns-feed-detail.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.sns-feed-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 84px;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.26) transparent;
  -webkit-overflow-scrolling: touch;
}
.sns-feed-scroll::-webkit-scrollbar { width: 3px; }
.sns-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.sns-feed-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255,255,255,.26); }
.sns-feed-gnb {
  position: fixed;
  z-index: 3;
  top: 20px;
  top: max(20px, env(safe-area-inset-top));
  left: 20px;
  left: max(20px, env(safe-area-inset-left));
  right: 20px;
  right: max(20px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.sns-feed-gnb button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0,0,0,.58);
  border-radius: 50%;
  background: rgba(24,24,24,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}
.sns-feed-gnb img { width: 24px; height: 24px; display: block; }
.sns-feed-detail.gnb-hidden .sns-feed-gnb {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px);
}
.sns-feed-gnb {
  transition: opacity .22s ease, transform .28s cubic-bezier(.22,.78,.18,1);
}
.sns-post {
  margin: 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #363636;
}
.sns-post + .sns-post { padding-top: 16px; }
.sns-post-header {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}
.sns-post-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from var(--sns-ring-angle), #ff008d 0 24%, #b500ff 43%, #6b00ff 67%, #d000ff 84%, #ff008d 100%);
  animation: sns-profile-ring-spin 8s linear infinite;
}
.sns-post-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.sns-post-meta { min-width: 0; flex: 1; }
.sns-post-meta > span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
}
.sns-post-meta strong { font: 700 14px/20px Arial, sans-serif; }
.sns-post-meta > span > img { width: 16px; height: 16px; display: block; }
.sns-post-meta time { color: #aaa; font: 400 14px/20px Arial, sans-serif; }
.sns-post-meta small {
  height: 18px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #777;
  font: 400 12px/18px Arial, sans-serif;
}
.sns-post-meta small img { width: 14px; height: 14px; display: block; opacity: .72; }
.sns-post-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #151515;
}
.sns-post-media > img {
  width: 100%;
  height: auto;
  display: block;
}
.sns-post-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(20,20,20,.62);
  transform: translate(-50%, -50%);
}
.sns-post-play::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 24px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #fff;
}
.sns-post-expand {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(34,34,34,.62);
}
.sns-post-expand img { width: 100%; height: 100%; display: block; }
.sns-post-actions {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sns-post-actions button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eee;
  font: 400 14px/20px Arial, sans-serif;
}
.sns-post-actions button > img { width: 24px; height: 24px; display: block; }
.sns-post-actions .sns-post-share { margin-left: auto; }
.sns-post-description {
  position: relative;
  color: #eee;
  font: 400 14px/21px Arial, sans-serif;
}
.sns-post-description p { margin: 0; }
.sns-post-description > button:not(.sns-video-cta) {
  position: absolute;
  top: 21px;
  right: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #ddd;
  background: #202020;
  color: #ddd;
  font: 400 14px/20px Arial, sans-serif;
}
.sns-post-description .sns-post-tags {
  margin-top: 10px;
  color: #b990ef;
}
.sns-video-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 11px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: 700 14px/20px Arial, sans-serif;
}
.sns-video-cta span { font-size: 25px; font-weight: 400; }
.sns-post-actions button:active,
.sns-post-expand:active,
.sns-video-cta:active { opacity: .7; }
.sns-like-button { position: relative; isolation: isolate; }
.sns-like-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14px;
  top: -10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,172,215,.92), rgba(255,0,140,.48) 34%, rgba(130,0,255,.2) 58%, transparent 75%);
  opacity: 0;
  transform: scale(.42);
  pointer-events: none;
}
.sns-like-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 1px;
  top: 5px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,115,184,.9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.sns-post-actions .sns-like-particles {
  position: absolute;
  left: 12px;
  top: 14px;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.sns-like-particles i {
  --particle-x: 0px;
  --particle-y: -28px;
  position: absolute;
  left: 0;
  top: 0;
  color: #ff79b8;
  font: 700 8px/1 Arial, sans-serif;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255,61,157,.9));
}
.sns-like-particles i::before { content: "♥"; }
.sns-like-particles i:nth-child(1) { --particle-x: -25px; --particle-y: -31px; font-size: 7px; }
.sns-like-particles i:nth-child(2) { --particle-x: -16px; --particle-y: -47px; font-size: 10px; }
.sns-like-particles i:nth-child(3) { --particle-x: -5px; --particle-y: -39px; font-size: 6px; color: #ffd1e7; }
.sns-like-particles i:nth-child(4) { --particle-x: 7px; --particle-y: -51px; font-size: 9px; }
.sns-like-particles i:nth-child(5) { --particle-x: 19px; --particle-y: -36px; font-size: 7px; color: #e7b1ff; }
.sns-like-particles i:nth-child(6) { --particle-x: 29px; --particle-y: -24px; font-size: 10px; }
.sns-like-particles i:nth-child(7) { --particle-x: -31px; --particle-y: -17px; font-size: 6px; color: #e7b1ff; }
.sns-like-particles i:nth-child(8) { --particle-x: 33px; --particle-y: -43px; font-size: 6px; color: #ffd1e7; }
.sns-like-particles i:nth-child(9) { --particle-x: 1px; --particle-y: -59px; font-size: 7px; }
.sns-post-actions button.romantic-like > img { animation: sns-heart-pop .66s cubic-bezier(.2,.82,.2,1); }
.sns-post-actions button.romantic-like::before { animation: sns-heart-bloom .68s ease-out; }
.sns-post-actions button.romantic-like::after { animation: sns-heart-ring .68s ease-out; }
.sns-post-actions button.romantic-like .sns-like-particles i {
  animation: sns-heart-particle .64s cubic-bezier(.2,.68,.2,1) both;
}
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(2) { animation-delay: .03s; }
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(3) { animation-delay: .06s; }
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(4) { animation-delay: .02s; }
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(5) { animation-delay: .05s; }
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(6) { animation-delay: .01s; }
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(7) { animation-delay: .04s; }
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(8) { animation-delay: .03s; }
.sns-post-actions button.romantic-like .sns-like-particles i:nth-child(9) { animation-delay: .06s; }
@keyframes sns-heart-pop {
  0% { transform: scale(.72); filter: drop-shadow(0 0 0 rgba(255,0,140,0)); }
  36% { transform: scale(1.52) rotate(-7deg); filter: drop-shadow(0 0 12px rgba(255,74,164,1)); }
  64% { transform: scale(.86) rotate(4deg); }
  83% { transform: scale(1.12) rotate(-2deg); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,0,140,0)); }
}
@keyframes sns-heart-bloom {
  0% { opacity: 0; transform: scale(.42); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes sns-heart-ring {
  0% { opacity: 0; transform: scale(.45); border-width: 3px; }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); border-width: 1px; }
}
@keyframes sns-heart-particle {
  0% { opacity: 0; transform: translate(0, 0) scale(.45) rotate(-8deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(1.05) rotate(9deg); }
}
@keyframes sns-profile-ring-spin {
  to { --sns-ring-angle: 360deg; }
}
.sns-media-expand {
  position: fixed;
  z-index: 30;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: #202020;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition:
    opacity .24s ease,
    transform .32s cubic-bezier(.22,.78,.18,1),
    visibility 0s linear .32s;
}
.sns-media-expand.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: 0s;
}
.sns-media-expand > img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.sns-media-expand > button {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: 32px;
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0,0,0,.6);
  border-radius: 50%;
  background: rgba(24,24,24,.56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: translateX(-50%);
}
.sns-media-expand > button img { width: 24px; height: 24px; display: block; }
.sns-media-expand > button:active { opacity: .72; }

/* AA_DESIGN / 10-8_SNS_FEED_Comment */
.sns-comments {
  position: absolute;
  z-index: 40;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  transform: translateZ(0);
}
.sns-comments.open {
  visibility: visible;
  pointer-events: auto;
}
.sns-comments-dim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,.56);
  opacity: 0;
  touch-action: manipulation;
  transition: opacity .24s ease;
}
.sns-comments.open .sns-comments-dim { opacity: 1; }
.sns-comments-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100% - 148px);
  min-height: 520px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #444;
  color: #fff;
  transform: translate3d(0, 100%, 0);
  transition: transform .42s cubic-bezier(.22,.78,.18,1);
  will-change: transform;
}
.sns-comments.open .sns-comments-sheet { transform: translate3d(0, 0, 0); }
.sns-comments-handle {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #888;
  touch-action: manipulation;
  transform: translateX(-50%);
}
.sns-comments-sheet h2 {
  position: absolute;
  z-index: 2;
  top: 29px;
  left: 0;
  width: 100%;
  margin: 0;
  font: 700 16px/24px Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
}
.sns-comments-list {
  position: absolute;
  top: 68px;
  right: 0;
  bottom: 60px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 20px 20px;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
  -webkit-overflow-scrolling: touch;
}
.sns-comments-list::-webkit-scrollbar { width: 3px; }
.sns-comments-list::-webkit-scrollbar-track { background: transparent; }
.sns-comments-list::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255,255,255,.25); }
.sns-comment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 0 0 18px;
}
.sns-comment-reply { margin-left: 48px; }
.sns-comment-avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff008d, #6b00ff);
}
.sns-comment-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.sns-comment-avatar-default {
  padding: 9px;
  border: 2px solid #191919;
  background: #242424;
}
.sns-comment-avatar-default > img {
  filter: grayscale(1);
  opacity: .34;
}
.sns-comment-copy { min-width: 0; }
.sns-comment-copy header {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cfaeff;
}
.sns-comment-copy header strong {
  min-width: 0;
  overflow: hidden;
  font: 400 14px/20px Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sns-comment-copy header img { width: 16px; height: 16px; flex: 0 0 16px; }
.sns-comment-copy header time {
  color: #bbb;
  font: 400 14px/20px Arial, sans-serif;
  white-space: nowrap;
}
.sns-comment-copy p {
  margin: 1px 0 0;
  color: #fff;
  font: 400 14px/21px Arial, sans-serif;
}
.sns-comment-copy > button {
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #bbb;
  font: 400 13px/18px Arial, sans-serif;
}
.sns-comment-toolbar {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  background: #222;
}

@media (max-height: 700px) {
  .sns-comments-sheet {
    height: calc(100% - 96px);
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sns-comments-sheet,
  .sns-comments-dim { transition-duration: .001ms; }
}

@keyframes room-point-breathe {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 8px rgba(107,0,255,.34), inset 0 0 7px rgba(255,255,255,.82); }
  50% { filter: brightness(1.08); box-shadow: 0 0 12px 2px rgba(107,0,255,.38), inset 0 0 8px rgba(255,255,255,.94); }
}
@keyframes room-point-tint {
  0%, 100% { opacity: .08; transform: scale(.84); }
  50% { opacity: .34; transform: scale(1.28); }
}
@keyframes monitor-aperture {
  0% { opacity: .96; transform: scale(1.06); }
  68% { opacity: .46; transform: scale(.76); }
  100% { opacity: 0; transform: scale(.42); }
}
@keyframes portal-scan-out {
  0% { opacity: .5; transform: scaleY(.08); }
  55% { opacity: .18; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.15); }
}

/* AA_DESIGN / 3-2_Main_Menu_open. */
.room-menu-panel {
  position: absolute;
  z-index: 8;
  top: 656px;
  left: 33px;
  width: 324px;
  height: 128px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transform-origin: 50% 100%;
  transition:
    opacity .18s ease,
    transform .34s cubic-bezier(.18,.88,.2,1);
}
.room-menu-panel button { pointer-events: none !important; }
.room-bottom-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 324px;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 12.3px rgba(34,34,34,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.room-nav-item {
  position: relative;
  z-index: 1;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: 400 12px/16px "Pretendard", Arial, sans-serif;
  letter-spacing: -.5px;
  filter: drop-shadow(0 0 6px rgba(107,0,255,.4));
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.room-nav-item:active,
.room-nav-item:focus-visible {
  border-color: #000;
  background: rgba(107,0,255,.36);
  color: #bd9dfa;
  box-shadow: 0 0 12px 4px rgba(107,0,255,.4);
  filter: none;
}
.room-nav-item:active { transform: scale(.96); }
@media (hover: hover) {
  .room-nav-item:hover {
    border-color: #000;
    background: rgba(107,0,255,.36);
    color: #bd9dfa;
    box-shadow: 0 0 12px 4px rgba(107,0,255,.4);
    filter: none;
  }
}
.room-nav-icon {
  width: 24px;
  height: 24px;
  display: block;
  margin-top: 6px;
  object-fit: contain;
}
[data-room-nav="character"] .room-nav-icon {
  filter: brightness(0) invert(1);
  transition: filter .18s ease;
}
.room-nav-item:active .room-nav-icon,
.room-nav-item:focus-visible .room-nav-icon { filter: none; }
@media (hover: hover) {
  .room-nav-item:hover .room-nav-icon { filter: none; }
}
.room-menu-close {
  position: absolute;
  top: 108px;
  left: 126px;
  width: 72px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #000;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font: 400 14px/20px "Pretendard", Arial, sans-serif;
  letter-spacing: -.5px;
  white-space: nowrap;
  overflow: visible;
  touch-action: manipulation;
}
.room-menu-close img { width: 20px; height: 20px; object-fit: contain; }

.room-interface.menu-open .room-date,
.room-interface.menu-open .room-hotspot {
  pointer-events: none;
  opacity: 0;
  transform: translateY(18px) scale(.95);
  transition-delay: 0s;
}
.room-interface.menu-open .room-menu {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.84);
  transition: none;
}
.room-interface.menu-open .room-menu-panel {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.room-interface.menu-open .room-menu-panel button { pointer-events: auto !important; }
.room-interface.menu-closing .room-hotspot,
.room-interface.menu-closing .room-date,
.room-interface.menu-closing .room-menu {
  transition-delay: 0s;
  transition-duration: .42s;
}
.room-interface.menu-closing .room-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}
.room-message.message-changing { animation: room-message-change .22s cubic-bezier(.2,.8,.2,1); }
@keyframes room-message-change {
  0% { opacity: .55; transform: translateY(3px) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 560px) {
  body { place-items: center; min-height: 100dvh; }
  .viewport { box-shadow: 0 24px 80px rgba(0,0,0,.65); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 559px) {
  .room-menu-panel { top: calc(100% - 160px - var(--app-safe-bottom)); }
  .sns-feed-scroll { padding-top: calc(var(--app-safe-top) + 48px); }
}