:root {
  --bg: #07070a;
  --phone: #0b0b10;
  --text: #f6f2ea;
  --muted: #8b8794;
  --her: #8b6cff;
  --red: #ff2d55;
  --live: #ff3b30;
  --love: #ff7ab3;
  --slut: #ff5a36;
  --trace: #5ad1ff;
  --purple: #6b3cff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  height: 100dvh;
  background: #050508;
  color: var(--text);
  font-family: "SF Pro Display", "PingFang TC", "Noto Sans TC", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
body { display: grid; place-items: stretch; }
button, input { font: inherit; }

.phone {
  width: 100vw;
  width: 100dvw;
  height: var(--app-h, 100dvh);
  height: var(--app-h, 100svh);
  background: var(--phone);
  position: relative;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  transition: transform 0.12s ease;
}
.phone.shake { animation: phoneshake 0.42s ease; }
@keyframes phoneshake {
  20% { transform: translateX(-4px) rotate(-0.4deg); }
  40% { transform: translateX(4px) rotate(0.4deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.notch { display: none; }

.status {
  height: 34px;
  padding: 12px 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #d5d0dc;
  z-index: 5;
  position: relative;
}
.hud {
  height: 26px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: #0008;
  border-bottom: 1px solid #ffffff10;
}
.hud b { font-weight: 700; }
.hud .l { color: var(--love); }
.hud .s { color: var(--slut); }
.hud .t { color: var(--trace); }
.hud .cash { color: #ffd60a; margin-left: auto; }
.hud .bgm-btn {
  border: 0;
  background: transparent;
  color: #cfc8d8;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.85;
}
.hud .bgm-btn.off { color: #6b6674; text-decoration: line-through; }
.hud .flash { animation: statpop 0.45s ease; }
@keyframes statpop { 50% { transform: scale(1.25); filter: brightness(1.6); } }

.sys { display: flex; align-items: center; gap: 5px; }
.sig, .wifi, .bat { display: block; }
.sig {
  width: 14px; height: 10px;
  background:
    linear-gradient(#fff, #fff) 0 8px / 2px 2px no-repeat,
    linear-gradient(#fff, #fff) 4px 6px / 2px 4px no-repeat,
    linear-gradient(#fff, #fff) 8px 3px / 2px 7px no-repeat,
    linear-gradient(#fff6, #fff6) 12px 0 / 2px 10px no-repeat;
}
.wifi {
  width: 13px; height: 10px; border: 2px solid #fff; border-bottom: 0;
  border-radius: 10px 10px 0 0; transform: scale(0.7) translateY(2px);
}
.bat {
  width: 20px; height: 9px; border: 1px solid #fff; border-radius: 3px; position: relative;
}
.bat::after {
  content: ""; position: absolute; right: -3px; top: 2px;
  width: 2px; height: 4px; background: #fff; border-radius: 0 1px 1px 0;
}
.bat b {
  display: block; height: 100%; width: 72%; background: #30d158; border-radius: 1px;
}

.status, .hud { flex: 0 0 auto; }
.screen { flex: 1 1 auto; min-height: 0; height: auto; position: relative; }

.view {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  opacity: 0;
}
.view.on { display: flex; animation: viewin 0.32s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes viewin {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* TITLE */
.title {
  justify-content: flex-end;
  overflow: auto;
  min-height: 0;
  padding: 28px 24px 28px;
  background:
    linear-gradient(180deg, #0000 8%, #0b0b10 72%),
    url("../assets/b/b102.png") center 18% / 165% no-repeat #111;
}
.title-live {
  position: absolute; top: 18px; left: 20px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.08em; color: #ffd0d0;
}
.title-live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  animation: livepulse 1.2s infinite;
}
.title-space { flex: 1; }
.title h1 {
  font-size: 26px;
  font-weight: 640;
  letter-spacing: -0.6px;
  line-height: 1.12;
  max-width: 16ch;
}
.title .cht {
  color: #f0eaf8;
  font-size: 16px;
  margin: 10px 0 0;
  letter-spacing: 0.06em;
}
.title p { color: var(--muted); margin: 8px 0 22px; line-height: 1.55; }
.title .credit { font-size: 10px; letter-spacing: 0.04em; margin: -12px 0 16px; opacity: 0.55; }
.cta {
  border: 0; background: linear-gradient(180deg, #9a7cff, var(--her));
  color: #fff; border-radius: 16px; padding: 14px 18px; cursor: pointer;
  box-shadow: 0 8px 24px #6b3cff55;
}
.ghost {
  border: 0; background: #ffffff16; color: #fff;
  border-radius: 16px; padding: 14px 18px; cursor: pointer; margin-top: 8px;
}

/* HOME */
.home {
  padding: 6px 20px 16px;
  overflow: auto;
  min-height: 0;
  background:
    radial-gradient(120% 70% at 50% -8%, #5a2d88 0%, transparent 52%),
    linear-gradient(#09090d00, #09090d 58%),
    url("../assets/b/b102.png") center 22% / 180% no-repeat #09090d;
}
.clock { font-size: clamp(42px, 12vw, 68px); font-weight: 200; letter-spacing: -3px; margin-top: 18px; }
.date { color: #c9c4d4; margin-bottom: 12px; }
.obj {
  background: #0b0b10cc; backdrop-filter: blur(16px);
  border: 1px solid #ffffff14; border-radius: 16px; padding: 12px 14px;
  font-size: 13px; color: #eee; margin-bottom: 26px;
  box-shadow: 0 10px 30px #0006;
}
.pushes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.push {
  display: flex; gap: 10px; align-items: center;
  background: #0b0b10cc; backdrop-filter: blur(16px);
  border: 1px solid #ffffff14; border-radius: 14px; padding: 10px 12px;
  cursor: pointer; text-align: left; color: inherit;
  box-shadow: 0 8px 20px #0005;
}
.push:active { transform: scale(0.98); }
.push b { display: block; font-size: 11px; letter-spacing: 0.06em; color: #cfc8d8; }
.push span { display: block; font-size: 13px; margin-top: 2px; }
.push i {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; font-style: normal;
}
.push i.msg { background: linear-gradient(#5dff86, #30d158); color: #083; }
.push i.tube { background: linear-gradient(#ff5a78, #ff2d55); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
.app { text-align: center; cursor: pointer; }
.app:active .icon { transform: scale(0.9); }
.icon {
  width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 16px;
  display: grid; place-items: center; font-size: 19px; font-weight: 700;
  position: relative; transition: transform 0.12s;
  box-shadow: 0 8px 18px #0006;
}
.icon.msg { background: linear-gradient(#5dff86, #30d158); color: #083; }
.icon.tube { background: linear-gradient(#ff5a78, #ff2d55); color: #fff; }
.icon.alb { background: linear-gradient(#ffe56a, #ffd60a); color: #432; }
.icon.wal { background: linear-gradient(#4a4a55, #3a3a44); color: #ccc; }
.icon.shop { background: linear-gradient(#d07aff, #bf5af2); color: #fff; }
.icon.note { background: linear-gradient(#ffe56a, #f5c518); color: #432; }
.app span { font-size: 11px; color: #ddd; }
.badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 8px; font-size: 10px;
  animation: badgebounce 1.6s infinite;
}
@keyframes badgebounce { 50% { transform: scale(1.12); } }
.next-day {
  margin-top: auto; border: 0; background: #ffffff18; color: #fff;
  border-radius: 16px; padding: 13px; cursor: pointer;
  backdrop-filter: blur(10px);
}

/* CHROME */
.bar {
  height: 54px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-bottom: 1px solid #ffffff10; background: #101018d0;
  backdrop-filter: blur(16px);
}
.back { color: var(--her); cursor: pointer; font-size: 26px; min-width: 28px; line-height: 1; }
.bar h1 { font-size: 16px; font-weight: 600; flex: 1; }
.bar small { color: var(--muted); font-size: 11px; }
.ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 55%; }
.who { flex: 1; }
.who h1 { font-size: 15px; }
.who small { display: block; margin-top: -1px; }

/* CHAT — LINE-like */
.line-app { background: #1b1822; }
.line-bar {
  background: #23202bee;
  border-bottom: 1px solid #ffffff0c;
}
.who h1 { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.who small { color: #86e29a; font-size: 11px; margin-top: 0; }
.who small.busy { color: #9a96a8; }
.line-tools { display: flex; gap: 14px; align-items: center; padding-right: 4px; }
.line-tools i { display: block; opacity: 0.72; }
.ico-call {
  width: 18px; height: 18px;
  background:
    radial-gradient(circle at 70% 30%, transparent 46%, #d8d2e4 47% 62%, transparent 63%),
    linear-gradient(#d8d2e4, #d8d2e4);
  clip-path: path("M3 12c3-6 9-8 13-5l-2.2 2.4c-2.2-1.2-5.1-.4-7.2 1.8L3 12z");
  background: #d8d2e4;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2a1.4 1.4 0 011.5-.3 16 16 0 005 1.1c.8 0 1.4.6 1.4 1.4V21c0 .8-.6 1.4-1.4 1.4C10.4 22.4 1.6 13.6 1.6 3.4 1.6 2.6 2.2 2 3 2h3.6c.8 0 1.4.6 1.4 1.4 0 1.8.4 3.5 1.1 5a1.4 1.4 0 01-.3 1.5L6.6 10.8z'/></svg>") center / 18px no-repeat;
}
.ico-menu {
  width: 18px; height: 14px;
  background:
    linear-gradient(#d8d2e4, #d8d2e4) 0 0 / 100% 2px no-repeat,
    linear-gradient(#d8d2e4, #d8d2e4) 0 6px / 100% 2px no-repeat,
    linear-gradient(#d8d2e4, #d8d2e4) 0 12px / 100% 2px no-repeat;
}
.thread {
  flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 8px 14px;
  background:
    radial-gradient(90% 50% at 50% -8%, #3d246244, transparent 55%),
    repeating-linear-gradient(180deg, #ffffff03 0 1px, transparent 1px 28px),
    #1b1822;
}
.row { display: flex; gap: 6px; align-items: flex-end; margin: 0 0 10px; }
.row.me { flex-direction: row-reverse; }
.row.stack { margin-top: -6px; margin-bottom: 4px; }
.row .mini {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 55%;
  flex: 0 0 32px; box-shadow: 0 0 0 1px #ffffff10;
}
.row .mini.spacer { visibility: hidden; }
.bub-wrap { display: flex; align-items: flex-end; gap: 5px; max-width: 78%; }
.row.me .bub-wrap { flex-direction: row-reverse; }
.bubble {
  position: relative; max-width: 100%; padding: 8px 12px;
  border-radius: 18px; font-size: 15px; line-height: 1.5;
  animation: pop 0.2s cubic-bezier(.2,.8,.2,1);
  word-break: break-word;
}
.bubble.her {
  background: #2f2b38;
  border-bottom-left-radius: 6px;
}
.bubble.me {
  background: #6d4aff;
  border-bottom-right-radius: 6px;
}
.bubble.tail.her::before,
.bubble.tail.me::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px; height: 10px;
}
.bubble.tail.her::before {
  left: -4px;
  background: radial-gradient(circle at 0 0, transparent 70%, #2f2b38 71%);
}
.bubble.tail.me::before {
  right: -4px;
  background: radial-gradient(circle at 100% 0, transparent 70%, #6d4aff 71%);
}
.row.stack .bubble { border-radius: 16px; }
.bubble.img { padding: 3px; background: #2f2b38; overflow: hidden; }
.bubble.img img {
  display: block; width: min(228px, 64vw); border-radius: 14px;
  opacity: 0; animation: imgreveal 0.9s ease forwards;
}
.bubble.vo {
  display: flex; align-items: center; gap: 8px; min-width: 138px;
  padding: 8px 12px 8px 8px;
}
.bubble.vo i {
  width: 30px; height: 30px; border-radius: 50%; background: #ffffff18;
  display: grid; place-items: center;
}
.bubble.vo i::after {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}
.bubble.vo b { font-size: 14px; font-weight: 650; letter-spacing: 0.02em; }
.bubble.vo em { font-style: normal; color: #cfc8d8; font-size: 11px; }
.bub-meta {
  display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 10px; color: #7a7584; line-height: 1.25; padding-bottom: 1px;
  white-space: nowrap; min-width: 28px;
}
.row.me .bub-meta { align-items: flex-end; }
.bub-meta .read { color: #c8b8ff; font-size: 10px; font-weight: 600; }
@keyframes imgreveal {
  from { opacity: 0; filter: blur(8px); transform: scale(1.02); }
  to { opacity: 1; filter: none; transform: none; }
}
.thought {
  color: #8a8496; font-size: 12.5px; line-height: 1.6;
  margin: 16px 28px; text-align: center; animation: pop 0.24s ease;
}
.time {
  text-align: center; color: #8a8496; font-size: 11px; margin: 16px 0 12px;
}
.time span {
  display: inline-block; background: #ffffff12; padding: 3px 11px; border-radius: 999px;
}
.typing {
  display: inline-flex; gap: 4px; padding: 11px 14px; background: #2f2b38;
  border-radius: 16px; border-bottom-left-radius: 6px; margin: 0 0 10px 38px;
}
.typing.photo {
  align-items: center; gap: 6px; color: #9a96a8; font-size: 12px; margin-left: 38px;
}
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #aaa;
  animation: dots 1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 50% { opacity: 0.25; transform: translateY(-2px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

.line-dock {
  flex: 0 0 auto;
  padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 8px));
  background: #211e28;
  border-top: 1px solid #ffffff0e;
}
.choices {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 2px 0 8px;
}
.choices.many { grid-template-columns: 1fr 1fr; }
.choices:empty { display: none; padding: 0; }
.choice {
  border: 0; background: #f4f0ea; color: #1c1824; text-align: center;
  border-radius: 16px; padding: 8px 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 560; line-height: 1.35; animation: pop 0.16s ease;
  box-shadow: 0 1px 0 #0002;
}
.choice:active, .cta:active { transform: scale(0.98); }
.choice em { display: block; color: #8a8496; font-size: 9.5px; font-style: normal; margin-top: 2px; font-weight: 500; letter-spacing: 0.03em; }
.line-input {
  display: flex; align-items: center; gap: 8px;
}
.line-input .plus, .line-input .send {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 20px;
  color: #d8d2e4; background: #ffffff12;
}
.line-input .send { font-size: 13px; color: #c8b8ff; background: #6d4aff44; }
.line-input .fake {
  flex: 1; height: 38px; border-radius: 19px; background: #141218;
  color: #6f6a7a; font-size: 13px; display: flex; align-items: center;
  padding: 0 14px; border: 1px solid #ffffff0c;
}
.skip-hint {
  display: none;
  text-align: center; color: #6f6a7a; font-size: 10.5px;
  padding: 2px 0 6px; pointer-events: none;
}
.skip-hint.on { display: block; }

/* TUBE / ALBUM / SHOP / WALLET */
.list, .site-body { flex: 1; min-height: 0; overflow: auto; background: #08080c; }
.notes {
  flex: 1; min-height: 0; overflow: auto; padding: 8px 14px 24px; background: #12121a;
}
.note {
  padding: 14px 4px 16px;
  border-bottom: 1px solid #ffffff10;
}
.note time { display: block; color: #8b8794; font-size: 11px; letter-spacing: 0.08em; margin-bottom: 6px; }
.note p { font-size: 15px; line-height: 1.65; color: #eee8f4; }
.site-bar {
  height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: #0a0a10; border-bottom: 1px solid #ff2d5533;
}
.site-bar .brand {
  flex: 1; font-size: 17px; font-weight: 800; letter-spacing: 0.04em;
}
.site-bar .brand span { color: var(--live); }
.site-bar small { color: #ff8ab4; font-size: 11px; }
.site-body { background: #07070c; padding: 10px 10px 18px; }
.site-kicker {
  font-size: 10px; letter-spacing: 0.16em; color: #8b8794;
  margin: 8px 4px 8px; text-transform: uppercase;
}
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room {
  position: relative; border-radius: 12px; overflow: hidden;
  background: #111; cursor: pointer; min-height: 148px;
}
.room:active { transform: scale(0.98); }
.room img { width: 100%; height: 148px; object-fit: cover; display: block; }
.room.lock img { filter: grayscale(0.5) brightness(0.4); }
.room .info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 8px 8px;
  background: linear-gradient(#0000, #000d 70%);
}
.room h2 { font-size: 12px; font-weight: 700; }
.room p { color: #c9c4d4; font-size: 10px; margin-top: 2px; }
.leak {
  display: flex; gap: 10px; padding: 10px 8px;
  border-bottom: 1px solid #ffffff0c; cursor: pointer;
}
.leak:active { background: #ffffff08; }
.leak img { width: 92px; height: 64px; object-fit: cover; border-radius: 8px; background: #222; }
.leak h2 { font-size: 13px; }
.leak p { color: var(--muted); font-size: 11px; margin-top: 3px; }
.rec, .shop-row, .wal-row {
  display: flex; gap: 12px; padding: 14px 12px;
  border-bottom: 1px solid #ffffff10; cursor: pointer;
}
.rec:active, .shop-row:active { background: #ffffff08; }
.thumb { width: 118px; height: 74px; object-fit: cover; border-radius: 8px; background: #222; }
.lock { filter: grayscale(0.4) brightness(0.45); }
.rec h2, .shop-row h2 { font-size: 14px; }
.rec p, .shop-row p, .wal-row p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.price { margin-left: auto; align-self: center; color: #ffd60a; font-size: 13px; white-space: nowrap; }
.live-tag {
  display: inline-block; background: var(--live); color: #fff;
  font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px;
  margin-right: 6px; vertical-align: 1px;
}

.grid3 {
  flex: 1; overflow: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  padding: 3px; background: #000;
}
.grid3 img { width: 100%; height: 118px; object-fit: cover; background: #111; cursor: pointer; }
.grid3 .locked { position: relative; }
.grid3 .locked::after {
  content: "鎖"; position: absolute; inset: 0;
  display: grid; place-items: center; background: #0008; font-size: 12px;
}

.barline {
  height: 4px; background: #222; border-radius: 4px; margin-top: 8px; overflow: hidden;
}
.barline i { display: block; height: 100%; border-radius: 4px; }
.barline.l i { background: var(--love); }
.barline.s i { background: var(--slut); }
.barline.t i { background: var(--trace); }

/* PLAYER + CROSSFADE */
.player { background: #000; }
.player .stage { flex: 1 1 0; min-height: 0; height: auto; }
.player.directed .stage { flex: 1 1 auto; }
.stage {
  position: relative; width: 100%;
  background: #000; cursor: pointer; overflow: hidden;
}
.stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.85s ease;
  will-change: opacity, transform;
}
.stage img.show {
  opacity: 1;
  animation: ken 7.5s ease-out forwards;
}
@keyframes ken {
  from { transform: scale(1.06); filter: brightness(1.05); }
  to { transform: scale(1); filter: none; }
}
.player.directed .stage img.show {
  animation: none;
  transform: none;
  filter: none;
}
.player.directed .stage.quake { animation: stagequake 0.5s ease-in-out 4; }
@keyframes stagequake {
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-3px, 1px); }
  75% { transform: translate(2px, 2px); }
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 45%, transparent 50%, #0008 100%);
}
.scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background: repeating-linear-gradient(180deg, #fff 0 1px, transparent 1px 3px);
  animation: scanmove 8s linear infinite;
}
@keyframes scanmove { to { background-position: 0 12px; } }
.connect {
  position: absolute; inset: 0; display: none; place-items: center;
  background: #000d; font-size: 15px; letter-spacing: 0.2em; z-index: 3;
}
.connect.on { display: grid; }
.connect span { animation: dots 1s infinite; }
.connect span:nth-child(2) { animation-delay: 0.15s; }
.connect span:nth-child(3) { animation-delay: 0.3s; }
.player { min-height: 0; }
.vn-box {
  display: none; flex: 0 0 auto; margin: 0; padding: 16px 18px 18px;
  min-height: min(220px, 32vh);
  background:
    linear-gradient(180deg, #1a0c1488, #0c0812f2 28%),
    #0a0710;
  border-top: 2px solid #ff6b9a66;
  box-shadow: 0 -20px 48px #000c;
}
.player.vn .vn-box, .player.live .vn-box { display: block; }
.player.directed .vn-box { display: none !important; }
.player.directed .vignette { opacity: 0.35; }
.player.directed .scan { opacity: 0.03; }
.vn-box small {
  display: inline-block; color: #ffd0e0; font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; margin-bottom: 10px;
  padding: 3px 11px 4px;
  background: #ff6b9a28;
  border: 1px solid #ff8ab455;
  border-radius: 4px;
}
.vn-box p {
  font-size: 18px; line-height: 1.7; color: #fff8fc;
  min-height: 4.8em; white-space: pre-wrap;
  text-shadow: 0 1px 10px #000a;
}
.progress, .cap, .dots, .warn, .tap { display: none; }

/* LIVE HUD */
.live-hud {
  position: absolute; top: 8px; left: 10px; right: 10px;
  display: none; justify-content: flex-start; align-items: center; gap: 8px;
  pointer-events: none;
}
.live-hud.on { display: flex; }
.live-dot {
  background: var(--live); color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 4px; animation: livepulse 1.2s infinite;
}
@keyframes livepulse { 50% { opacity: 0.45; box-shadow: 0 0 0 4px #ff3b3040; } }
.live-clock { font-size: 11px; background: #0008; padding: 3px 8px; border-radius: 8px; }
.viewers { font-size: 11px; background: #0008; padding: 3px 8px; border-radius: 8px; margin-left: auto; }
.super {
  position: absolute; left: 8px; right: 80px; top: 38px;
  background: linear-gradient(90deg, #ffcc00, #ff9a00);
  color: #2a1a00; font-size: 12px; font-weight: 700;
  padding: 7px 10px; border-radius: 8px;
  opacity: 0; transform: translateY(-8px);
  pointer-events: none;
}
.super.on { animation: superin 3.2s ease forwards; }
@keyframes superin {
  8% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}
.live-cut {
  position: absolute; inset: 0; display: none; place-items: center;
  background: #000e; z-index: 4; pointer-events: none;
}
.live-cut.on { display: grid; }
.live-cut p {
  color: #d8d4de; font-size: 15px; letter-spacing: 0.08em;
  text-align: center; padding: 0 24px;
}
.live-end {
  position: absolute; inset: 0; display: none; place-items: center;
  align-content: center; text-align: center;
  background: linear-gradient(#0006, #000c 40%, #000e);
  z-index: 5; pointer-events: none;
}
.live-end.on { display: grid; }
.live-end small {
  color: #ff8ab4; font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
}
.live-end b {
  display: block; font-size: 34px; font-weight: 500; letter-spacing: 0.08em;
  margin: 10px 0 8px;
}
.live-end p { color: #c9c4d4; font-size: 14px; }
.live-end span { display: block; margin-top: 18px; color: #6f6a7a; font-size: 12px; }
.live-dot.end { background: #5a5660; animation: none; }
.live-say {
  display: none; position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 14px 12px;
  background: linear-gradient(#0000 0%, #000a 42%, #000d 100%);
  pointer-events: none; z-index: 2;
  flex-direction: column; gap: 4px;
}
.player.directed .live-say.on { display: flex; }
.live-say small {
  color: #ffd0e0; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
}
.live-say p {
  color: #fff8fc; font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; text-shadow: 0 1px 8px #000c;
  min-height: 0;
}
.live-chat {
  position: absolute; left: 8px; right: 42%; bottom: 10px;
  max-height: 38%; overflow: hidden; pointer-events: none;
  display: none; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.player.directed .live-chat {
  bottom: 96px; right: 36%; max-height: 26%;
}
.live-chat.on { display: flex; }
.live-chat div {
  font-size: 11px; color: #fff; text-shadow: 0 1px 4px #000;
  background: #0006; padding: 3px 7px; border-radius: 8px; width: fit-content;
  animation: chatup 0.28s ease; max-width: 100%;
}
.live-chat div.me { background: #ffcc0040; border: 1px solid #ffd36a88; }
.live-chat b { margin-right: 5px; }
@keyframes chatup { from { opacity: 0; transform: translateY(8px); } }
.hearts { position: absolute; right: 8px; bottom: 8px; pointer-events: none; width: 56px; height: 160px; }
.hearts i {
  position: absolute; right: 4px; bottom: 0; color: #ff6b9a; font-style: normal;
  text-shadow: 0 0 8px #ff4d88; font-size: 16px;
  animation: floatheart 1.6s ease forwards;
}
@keyframes floatheart {
  to { transform: translate(var(--dx, -12px), -110px) scale(1.35); opacity: 0; }
}

/* OVERLAYS */
.timeskip, .ending, .toast {
  position: absolute; inset: 0; display: none; z-index: 8;
}
.timeskip.on, .ending.on { display: grid; place-items: center; }
.timeskip {
  background: #000f; color: #fff; text-align: center;
  animation: viewin 0.25s ease;
}
.timeskip b { font-size: 30px; font-weight: 400; display: block; }
.timeskip small { display: block; color: #888; margin-top: 8px; }
.ending {
  background:
    linear-gradient(180deg, #0004, #0b0b10 64%),
    url("../assets/b/b102.png") center 16% / 160% no-repeat #0b0b10;
  padding: 28px 22px; text-align: left; align-content: end;
}
.ending small { color: var(--muted); letter-spacing: 0.12em; }
.ending h2 { font-size: 36px; margin: 8px 0 12px; }
.ending p { color: #d8d4de; line-height: 1.7; margin-bottom: 18px; }
.toast {
  top: auto; bottom: 80px; left: 24px; right: 24px; height: auto;
  background: #1c1c24ee; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; display: none; border: 1px solid #ffffff14;
}
.toast.on { display: block; animation: pop 0.2s ease; }

.tap { text-align: center; color: #666; font-size: 11px; padding: 8px; }

.live-compose {
  display: none; flex-direction: column; gap: 6px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #0c0c12; border-top: 1px solid #ffffff10;
}
.live-compose.on { display: flex; }
.player.directed .live-compose { padding: 6px 12px 8px; }
.live-compose .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.live-compose .chips button {
  border: 0; background: #ffffff10; color: #d8d4de; font-size: 11px;
  padding: 5px 8px; border-radius: 999px; cursor: pointer;
}
.live-compose .chips button:active { background: #ffffff18; }
.live-compose .row { display: flex; gap: 8px; }
.live-compose input {
  flex: 1; border: 0; border-radius: 10px; background: #ffffff10;
  color: #fff; font-size: 13px; padding: 9px 10px; outline: none;
}
.live-compose input::placeholder { color: #6f6a7a; }
.live-compose .row > button {
  border: 0; border-radius: 10px; background: #ffcc00; color: #2a1a00;
  font-size: 12px; font-weight: 800; padding: 0 12px; cursor: pointer;
  white-space: nowrap;
}
.live-compose .row > button:active { transform: scale(0.98); }
.toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

@media (max-height: 740px) {
  .clock { margin-top: 8px; }
  .obj { margin-bottom: 16px; }
  .vn-box { min-height: 0; padding: 12px 14px 14px; }
  .vn-box p { font-size: 16px; min-height: 3.4em; }
  .title h1 { font-size: 22px; }
  .icon { width: 50px; height: 50px; }
}

@media (max-height: 620px) {
  .clock { font-size: 36px; letter-spacing: -1px; }
  .date { margin-bottom: 8px; }
  .grid { gap: 10px 8px; }
  .icon { width: 44px; height: 44px; border-radius: 13px; }
  .next-day { padding: 11px; }
  .room, .room img { min-height: 120px; height: 120px; }
  .grid3 img { height: 96px; }
}

@media (min-width: 520px) and (min-height: 760px) {
  body { place-items: center; background: #050508; }
  .phone {
    width: min(420px, calc(100vw - 40px));
    height: min(880px, calc(100dvh - 28px));
    padding: 0;
    border-radius: 40px;
    box-shadow:
      0 0 0 11px #14141c,
      0 0 0 12px #2a2a36,
      0 40px 90px #000c;
  }
  .notch {
    display: block;
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 118px; height: 22px; background: #000; border-radius: 12px; z-index: 9;
  }
}