:root {
  /* Colors - Premium Dark Palette (Midnight Cinema) */
  --bg-dark: #030508;
  --bg-panel: #0a0d12;
  --bg-paper: #121720;
  --bg-surface: rgba(10, 13, 18, 0.7);

  --text-primary: #f0f6fc;
  --text-secondary: #c2cfdd;
  --text-muted: #93a4b8;

  --accent: #58a6ff;
  --accent-glow: rgba(88, 166, 255, 0.35);
  --accent-gradient: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
  --accent-secondary: #bc8cff;

  --success: #3fb950;
  --danger: #f85149;
  --warning: #d29922;

  --border: rgba(240, 246, 252, 0.1);
  --border-soft: rgba(240, 246, 252, 0.05);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);

  --font-main: 'Nunito', system-ui, sans-serif;
  --font-head: 'Outfit', sans-serif;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --glass: backdrop-filter: blur(24px) saturate(180%);
}

body.pookie-mode {
  --bg-dark: #fff5f8;
  --bg-panel: #ffffff;
  --bg-paper: #fffafc;
  --bg-surface: rgba(255, 255, 255, 0.8);

  --text-primary: #2d1622;
  --text-secondary: #6e4c5e;
  --text-muted: #a38996;

  --accent: #ff006e;
  --accent-glow: rgba(255, 0, 110, 0.2);
  --accent-gradient: linear-gradient(135deg, #ff006e 0%, #ff5d8f 100%);
  --accent-secondary: #ff99c8;

  --border: rgba(255, 0, 110, 0.1);
  --border-soft: rgba(255, 0, 110, 0.05);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-primary);
  transition: var(--transition);
}

input {
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
}

.glass-panel {
  background: var(--bg-surface);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.btn-premium {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-premium:hover {
  transform: translateY(-2px) scale(1.02);
}

.btn-premium:active {
  transform: translateY(0) scale(0.98);
}

.hidden {
  display: none !important;
}

/* --- LANDING PAGE --- */

.landing-page {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.lp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, var(--bg-panel) 0%, var(--bg-dark) 100%);
  overflow: hidden;
}

.lp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
  opacity: 0.03;
  pointer-events: none;
}

body.pookie-mode .lp-bg {
  background: linear-gradient(135deg, #fff5f8 0%, #ffeef2 100%);
}

body.pookie-mode .lp-bg::after {
  display: none;
}

.lp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  animation: blob-float 20s infinite alternate ease-in-out;
}

@keyframes blob-float {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(50px, 100px) scale(1.1);
  }

  100% {
    transform: translate(-50px, 50px) scale(0.9);
  }
}

.lp-blob-1 {
  width: 700px;
  height: 700px;
  top: -200px;
  left: -200px;
  background: var(--accent);
  opacity: 0.12;
}

.lp-blob-2 {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -150px;
  background: var(--accent-secondary);
  opacity: 0.08;
  animation-delay: -5s;
}

.lp-blob-3 {
  width: 500px;
  height: 500px;
  top: 30%;
  left: 60%;
  background: var(--accent);
  opacity: 0.04;
  animation-delay: -10s;
}

.lp-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black, transparent 90%);
  opacity: 0.3;
}

.lp-header {
  padding: 2rem 5%;
  display: flex;
  align-items: center;
}

.lp-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.lp-logo-dot {
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--accent);
  transition: background 0.5s, box-shadow 0.5s;
}

/* Vibe Toggle */
.vibe-toggle-btn {
  margin-left: auto;
  padding: 0.5rem 1rem;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.vibe-toggle-btn .vibe-icon-pookie {
  display: none;
}

body.pookie-mode .vibe-toggle-btn .vibe-icon-cinema {
  display: none;
}

body.pookie-mode .vibe-toggle-btn .vibe-icon-pookie {
  display: block;
}

.lp-shell {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  padding: 2rem 5%;
  align-items: center;
  min-height: calc(80vh - 80px);
}

@media (max-width: 960px) {
  .lp-shell {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .lp-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lp-features {
    justify-content: center;
  }

  .lp-about-grid {
    grid-template-columns: 1fr;
  }
}

.lp-eyebrow {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.lp-headline {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.lp-headline-gradient {
  background: linear-gradient(90deg, #fff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.5s;
  text-shadow: 0 0 30px var(--accent-glow);
}

.lp-subline {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 32rem;
  margin-bottom: 2.5rem;
}

.lp-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.lp-feat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.lp-feat-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

/* Auth Card */
.lp-auth {
  background: var(--bg-surface);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow:
    var(--shadow-lg),
    inset 0 0 1px 1px var(--border-soft);
  position: relative;
  overflow: hidden;
}

.lp-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, var(--accent-glow) 0%, transparent 40%);
  pointer-events: none;
}

.lp-auth-tabs {
  display: flex;
  background: var(--bg-dark);
  padding: 0.35rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.lp-tab {
  flex: 1;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.9rem;
}

.lp-tab.active {
  background: var(--bg-paper);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.lp-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-input-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-input-group input {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  color: var(--text-primary);
  transition: var(--transition);
}

.lp-input-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.lp-btn-primary,
.lp-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.lp-btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 10px 20px rgba(31, 111, 235, 0.3);
}

.lp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(31, 111, 235, 0.4);
}

.lp-btn-secondary {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.lp-btn-secondary:hover {
  background: var(--border);
  color: var(--text-primary);
}

.lp-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1.25rem;
}

.lp-account-box {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(15, 23, 38, 0.72), rgba(11, 17, 28, 0.84));
  box-shadow: inset 0 0 0 1px var(--border-soft), 0 10px 24px rgba(0, 0, 0, 0.25);
}

body.pookie-mode .lp-account-box {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 249, 0.88));
}

.lp-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.lp-account-head h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.lp-account-status {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-secondary);
  background: rgba(88, 166, 255, 0.08);
}

.lp-account-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.lp-account-switch {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.lp-auth-mini {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-secondary);
  background: var(--bg-dark);
}

.lp-auth-mini.active {
  background: var(--bg-paper);
  color: var(--text-primary);
}

.lp-account-form {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

.lp-account-user {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.lp-account-userline {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.lp-account-userline strong {
  font-size: 0.95rem;
}

.lp-account-userline span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.lp-account-message {
  min-height: 1.1rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.lp-account-message.error {
  color: #ff9a9a;
}

.lp-account-message.success {
  color: #91f5b1;
}

.lp-input-group input.input-error {
  border-color: #ff7c95;
  box-shadow: 0 0 0 3px rgba(255, 124, 149, 0.22);
}

.lp-about-wrap {
  width: min(1200px, calc(100% - 3rem));
  margin: 0 auto 2.5rem;
}

.lp-about-shell {
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  background:
    radial-gradient(circle at 16% 10%, rgba(93, 172, 255, 0.12), transparent 35%),
    radial-gradient(circle at 88% 92%, rgba(186, 136, 255, 0.1), transparent 40%),
    var(--bg-surface);
  border: 1px solid var(--border);
}

.lp-about-intro {
  margin-bottom: 1.25rem;
}

.lp-about-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.lp-about-intro h2 {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 900;
  margin-bottom: 0.55rem;
  letter-spacing: -0.01em;
}

.lp-about-intro p {
  color: var(--text-secondary);
  max-width: 820px;
}

.lp-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
}

.lp-about-card {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.05rem;
}

.lp-about-card h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.55rem;
}

.lp-about-card p,
.lp-about-card li {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.lp-about-card p+p {
  margin-top: 0.55rem;
}

.lp-about-card ul {
  list-style: disc;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.3rem;
}

/* --- ROOM PAGE --- */

.room-page {
  background: var(--bg-dark);
  color: var(--text-primary);
}

#vibeOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

.vibe-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.room-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-dark);
}

.room-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
  opacity: 0.02;
  pointer-events: none;
}

body.pookie-mode .room-bg {
  background: #fff5f8;
}

body.pookie-mode .room-bg::after {
  display: none;
}

.room-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.1;
  animation: blob-float 25s infinite alternate ease-in-out;
}

.room-blob-1 {
  top: -15%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: var(--accent);
}

.room-blob-2 {
  bottom: -15%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: var(--accent-secondary);
  animation-delay: -7s;
}

/* Topbar */
.room-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar-center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar-logo {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--text-primary);
}

.topbar-divider {
  height: 20px;
  width: 1px;
  background: var(--border);
}

.topbar-room-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-paper);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
}

.topbar-room-info:hover {
  border-color: var(--accent);
}

.topbar-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text-muted);
}

.topbar-code {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
}

.mode-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--accent-gradient);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 4px 15px var(--accent-glow);
}

.topbar-users {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.topbar-account {
  padding: 0.32rem 0.72rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-paper);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-secondary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-btn-danger {
  padding: 0.5rem 1rem;
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.2);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
}

.topbar-btn-danger:hover {
  background: var(--danger);
  color: var(--bg-panel);
}

.topbar-btn-icon {
  font-size: 1.25rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-btn-icon:hover {
  background: var(--bg-paper);
}

/* Room Shell Layout */
.room-shell {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}

.room-shell.blurred {
  filter: blur(10px);
  pointer-events: none;
}

.room-main {
  min-width: 0;
}

@media (max-width: 1100px) {
  .room-shell {
    grid-template-columns: 1fr;
  }

  .room-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 700px) {
  .room-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Sidebar & Cards */
.sidebar-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-call {
  margin-bottom: 1rem;
}

.sidebar-chat {
  flex-grow: 1;
  min-height: 480px;
}

.sidebar-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--success);
  animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }

  100% {
    transform: scale(0.9);
    opacity: 1;
  }
}

/* Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 0.5rem;
}

.video-item {
  position: relative;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
}

.local-video {
  border-color: var(--border);
}

.video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-label {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
}

.video-item .tile-fullscreen-btn,
.video-item .pin-btn {
  position: absolute;
  top: 0.45rem;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(7, 14, 26, 0.62);
  color: #fff;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 180ms ease, background 200ms ease, border-color 200ms ease;
  z-index: 4;
}

.video-item .tile-fullscreen-btn {
  right: 0.45rem;
}

.video-item .pin-btn {
  right: 2.55rem;
}

.video-item .tile-fullscreen-btn:hover,
.video-item .pin-btn:hover {
  transform: translateY(-1px);
  background: rgba(28, 45, 76, 0.78);
  border-color: rgba(157, 211, 255, 0.9);
}

.video-item.pinned {
  border-color: rgba(255, 119, 188, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 119, 188, 0.35), 0 10px 24px rgba(255, 80, 160, 0.3);
}

/* Chat */
.chat-viewport {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-msg {
  max-width: 85%;
  padding: 0.6rem 1rem;
  border-radius: 18px;
  font-size: 0.9rem;
  position: relative;
}

.msg-received {
  align-self: flex-start;
  background: var(--bg-paper);
  border-bottom-left-radius: 4px;
}

.msg-sent {
  align-self: flex-end;
  background: var(--accent-gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg-author {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.msg-sent .msg-author {
  color: rgba(255, 255, 255, 0.85);
}

.chat-form {
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
}

.chat-form input {
  flex-grow: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  color: var(--text-primary);
}

.chat-form button {
  width: 38px;
  height: 38px;
  background: var(--accent-gradient);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* --- PANELS --- */

.main-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  animation: fade-in 0.3s ease;
}

.playyard-panel {
  padding: 0.55rem;
  border-radius: 28px;
  overflow: hidden;
  border-color: rgba(138, 225, 255, 0.24);
  background:
    radial-gradient(circle at 14% 10%, rgba(106, 211, 255, 0.2), transparent 42%),
    radial-gradient(circle at 86% 92%, rgba(172, 128, 255, 0.24), transparent 44%),
    linear-gradient(165deg, #050b1d 0%, #0a1430 42%, #131032 100%);
  box-shadow: 0 24px 70px rgba(4, 8, 20, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.playyard-room-shell {
  min-height: calc(100vh - 176px);
  border-radius: 24px;
  padding: 0.85rem;
  border: 1px solid rgba(156, 232, 255, 0.18);
  background: rgba(8, 14, 33, 0.45);
  backdrop-filter: blur(8px);
}

.playyard-room-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
}

.playyard-room-badge {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d8f4ff;
  border: 1px solid rgba(163, 233, 255, 0.38);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.72rem;
  background: rgba(17, 39, 70, 0.7);
}

.playyard-back-btn {
  border-color: rgba(178, 207, 255, 0.34);
  background: rgba(13, 30, 53, 0.78);
  color: #e3f0ff;
}

.playyard-full-shell {
  min-height: calc(100vh - 254px);
}

.playyard-full-shell:fullscreen,
.playyard-full-shell:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  min-height: 100vh;
  border-radius: 0;
  padding: 1rem;
  overflow: auto;
  background:
    radial-gradient(circle at 14% 10%, rgba(106, 211, 255, 0.22), transparent 42%),
    radial-gradient(circle at 86% 92%, rgba(172, 128, 255, 0.26), transparent 44%),
    linear-gradient(165deg, #050b1d 0%, #0a1430 42%, #131032 100%);
}

.playyard-full-shell:fullscreen .chaos-arena-wrap,
.playyard-full-shell:-webkit-full-screen .chaos-arena-wrap {
  height: min(74vh, 760px);
}

.playyard-full-shell:fullscreen #playyardMiniCall,
.playyard-full-shell:-webkit-full-screen #playyardMiniCall {
  right: 1rem;
  bottom: 1rem;
}

.playyard-hud-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.playyard-hud-card {
  border: 1px solid rgba(167, 229, 255, 0.3);
  border-radius: 14px;
  padding: 0.58rem 0.66rem;
  background: rgba(12, 29, 51, 0.7);
  box-shadow: inset 0 0 14px rgba(117, 205, 255, 0.08);
}

.playyard-hud-card h4 {
  margin: 0 0 0.2rem;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #cdeeff;
  text-transform: uppercase;
}

.playyard-hud-card p {
  margin: 0;
  font-size: 0.86rem;
  color: #f2f8ff;
  font-weight: 700;
}

.playyard-mascot-hud {
  background: linear-gradient(135deg, rgba(19, 40, 68, 0.78), rgba(38, 28, 78, 0.72));
}

.shared-mascot-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(22, 32, 57, 0.88), rgba(39, 28, 70, 0.8));
  box-shadow: inset 0 0 18px rgba(162, 209, 255, 0.08), 0 10px 24px rgba(12, 17, 32, 0.24);
  padding: 0.72rem;
  display: grid;
  gap: 0.55rem;
}

.shared-mascot-card.compact {
  padding: 0.46rem 0.5rem;
  background: linear-gradient(145deg, rgba(18, 31, 54, 0.9), rgba(35, 28, 74, 0.86));
}

.shared-mascot-card.compact .shared-mascot-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.shared-mascot-card.compact .shared-mascot-avatar span {
  font-size: 0.86rem;
}

.shared-mascot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.shared-mascot-top h4 {
  margin: 0;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d5e7ff;
}

.shared-mascot-stage {
  border-radius: 999px;
  border: 1px solid rgba(140, 224, 255, 0.45);
  background: rgba(19, 40, 68, 0.72);
  color: #e8f8ff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.5rem;
}

.shared-mascot-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.shared-mascot-avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(175, 229, 255, 0.5);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 22%, rgba(187, 244, 255, 0.35), rgba(64, 117, 196, 0.28) 58%, rgba(25, 44, 82, 0.82) 100%);
  box-shadow: 0 0 22px rgba(105, 202, 255, 0.24);
  animation: mascot-float 3.6s ease-in-out infinite;
}

.shared-mascot-avatar span {
  font-size: 1.02rem;
  font-weight: 900;
  color: #f6fcff;
  letter-spacing: 0.04em;
}

.shared-mascot-avatar.stage-sprout {
  box-shadow: 0 0 22px rgba(121, 236, 217, 0.3);
}

.shared-mascot-avatar.stage-buddy {
  background: radial-gradient(circle at 30% 22%, rgba(255, 230, 176, 0.42), rgba(148, 113, 241, 0.32) 58%, rgba(31, 31, 78, 0.82) 100%);
  box-shadow: 0 0 22px rgba(255, 198, 136, 0.3);
}

.shared-mascot-avatar.stage-star {
  background: radial-gradient(circle at 30% 22%, rgba(255, 249, 191, 0.44), rgba(255, 133, 212, 0.36) 58%, rgba(43, 22, 67, 0.86) 100%);
  box-shadow: 0 0 26px rgba(255, 149, 231, 0.34);
}

.shared-mascot-avatar.stage-mythic {
  background: radial-gradient(circle at 30% 22%, rgba(255, 248, 223, 0.5), rgba(124, 168, 255, 0.4) 52%, rgba(64, 32, 106, 0.92) 100%);
  box-shadow: 0 0 30px rgba(160, 196, 255, 0.38);
  animation-duration: 2.2s;
}

.shared-mascot-note {
  margin: 0;
  font-size: 0.77rem;
  line-height: 1.35;
  color: rgba(227, 242, 255, 0.88);
}

.shared-mascot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.shared-mascot-meta span {
  border-radius: 999px;
  border: 1px solid rgba(177, 221, 255, 0.28);
  background: rgba(16, 32, 56, 0.72);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #d9edff;
  padding: 0.14rem 0.44rem;
}

@keyframes mascot-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.playyard-games {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.playyard-game-btn,
.playyard-start-btn {
  border: 1px solid rgba(168, 223, 255, 0.35);
  background: rgba(13, 31, 56, 0.75);
  color: #e1f4ff;
  border-radius: 999px;
  padding: 0.44rem 0.72rem;
  font-size: 0.79rem;
  font-weight: 800;
}

.playyard-game-btn.active {
  border-color: rgba(122, 231, 255, 0.82);
  box-shadow: 0 0 18px rgba(108, 216, 255, 0.34);
}

.playyard-start-btn {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(60, 147, 250, 0.9), rgba(110, 92, 255, 0.9));
  border-color: rgba(149, 212, 255, 0.75);
}

.playyard-start-btn:disabled {
  opacity: 0.58;
}

.playyard-round-panel {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(177, 229, 255, 0.28);
  border-radius: 16px;
  background: rgba(10, 26, 47, 0.72);
  padding: 0.68rem 0.78rem;
  margin-bottom: 0.55rem;
}

.playyard-round-panel h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-head);
  color: #f2fbff;
}

.playyard-round-panel p {
  margin: 0;
  color: #cfe9ff;
  font-weight: 700;
}

.playyard-target {
  margin-top: 0.48rem;
  display: none;
}

.playyard-target.active {
  display: block;
}

.playyard-target-label {
  color: #9ee8ff;
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
}

.playyard-target-choices {
  display: flex;
  gap: 0.38rem;
}

.playyard-target-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(170, 228, 255, 0.4);
  background: rgba(15, 34, 61, 0.8);
  font-size: 1rem;
}

.playyard-target.dodge-together-active {
  margin-top: 0.62rem;
}

.playyard-target.chaos-arena-active {
  margin-top: 0.62rem;
}

.chaos-arena-wrap {
  width: 100%;
  height: 270px;
  border-radius: 16px;
  border: 1px solid rgba(150, 223, 255, 0.38);
  background:
    radial-gradient(circle at 15% 12%, rgba(120, 219, 255, 0.2), transparent 38%),
    radial-gradient(circle at 82% 82%, rgba(246, 119, 225, 0.19), transparent 44%),
    linear-gradient(165deg, rgba(11, 20, 36, 0.95), rgba(12, 24, 44, 0.98));
  box-shadow: inset 0 0 28px rgba(84, 189, 255, 0.12), 0 10px 26px rgba(6, 12, 22, 0.36);
  overflow: hidden;
}

.chaos-arena-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.playyard-dodge-stage {
  display: grid;
  gap: 0.38rem;
}

.playyard-dodge-arena {
  position: relative;
  height: 210px;
  border-radius: 16px;
  border: 1px solid rgba(145, 221, 255, 0.34);
  overflow: hidden;
  perspective: 720px;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 20% 12%, rgba(119, 223, 255, 0.22), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(220, 127, 255, 0.2), transparent 45%),
    linear-gradient(180deg, rgba(10, 25, 45, 0.9) 0%, rgba(16, 35, 62, 0.95) 52%, rgba(12, 22, 42, 0.98) 100%);
  box-shadow: inset 0 -30px 42px rgba(125, 95, 255, 0.16), inset 0 0 26px rgba(124, 223, 255, 0.1);
  animation: playyard-dodge-ambient 6s ease-in-out infinite alternate;
  will-change: transform, background-position;
}

.playyard-dodge-arena::before {
  content: "";
  position: absolute;
  inset: -22% -8% 8%;
  transform: rotateX(66deg) translateZ(-4px);
  background:
    repeating-linear-gradient(90deg, rgba(114, 226, 255, 0.22) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(0deg, rgba(218, 130, 255, 0.2) 0 2px, transparent 2px 34px);
  opacity: 0.85;
  animation: playyard-dodge-grid 1.7s linear infinite;
}

.playyard-dodge-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% -24%, rgba(130, 232, 255, 0.3), transparent 60%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 7px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.42;
}

.playyard-dodge-ship {
  position: absolute;
  z-index: 2;
  width: 18%;
  min-width: 66px;
  max-width: 104px;
  aspect-ratio: 1.7/1;
  border-radius: 14px;
  border: 1px solid rgba(172, 235, 255, 0.7);
  background: linear-gradient(140deg, rgba(120, 237, 255, 0.32), rgba(88, 120, 255, 0.32) 55%, rgba(255, 141, 232, 0.28));
  box-shadow: 0 0 24px rgba(119, 226, 255, 0.44), inset 0 -10px 18px rgba(34, 35, 98, 0.4);
  transform: translate3d(-50%, -50%, 0) rotateX(24deg) rotateZ(var(--ship-bank, 0deg));
  display: grid;
  place-items: center;
  transition: left 120ms linear, top 120ms linear, transform 120ms linear, box-shadow 160ms ease;
  will-change: left, top, transform;
}

.playyard-dodge-ship span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 900;
  color: #f4feff;
  text-shadow: 0 0 10px rgba(103, 232, 255, 0.6);
}

.playyard-dodge-ship::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.playyard-dodge-ship::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 28%;
  height: 24%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(118, 236, 255, 0.95) 0%, rgba(118, 236, 255, 0) 72%);
  filter: blur(0.8px);
  opacity: 0.9;
  animation: playyard-ship-thrust 0.26s ease-in-out infinite alternate;
}

.playyard-dodge-obstacle {
  position: absolute;
  z-index: 1;
  border-radius: 34%;
  border: 1px solid rgba(255, 200, 248, 0.75);
  background: linear-gradient(145deg, rgba(255, 154, 219, 0.72), rgba(115, 151, 255, 0.72));
  box-shadow: 0 0 20px rgba(255, 139, 228, 0.38);
  transition: left 120ms linear, top 120ms linear, transform 120ms linear, opacity 200ms ease;
  will-change: left, top, transform, opacity;
}

.playyard-dodge-obstacle::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 34%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}

.playyard-dodge-obstacle.obstacle-enter {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.82);
}

.playyard-dodge-obstacle.obstacle-exit {
  opacity: 0;
}

.playyard-dodge-score {
  justify-self: start;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbf0ff;
  border-radius: 999px;
  border: 1px solid rgba(162, 232, 255, 0.38);
  background: rgba(16, 36, 60, 0.78);
  padding: 0.2rem 0.58rem;
}

@keyframes playyard-dodge-grid {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 100px 0, 0 100px;
  }
}

@keyframes playyard-dodge-ambient {
  0% {
    box-shadow: inset 0 -30px 42px rgba(125, 95, 255, 0.16), inset 0 0 26px rgba(124, 223, 255, 0.1);
    filter: saturate(1);
  }

  100% {
    box-shadow: inset 0 -38px 50px rgba(110, 82, 255, 0.24), inset 0 0 30px rgba(124, 223, 255, 0.16);
    filter: saturate(1.12);
  }
}

@keyframes playyard-ship-thrust {
  from {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.65;
  }

  to {
    transform: translateX(-50%) scale(1.12);
    opacity: 1;
  }
}

.playyard-memory-options {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.playyard-memory-btn {
  border: 1px solid rgba(179, 218, 255, 0.45);
  border-radius: 10px;
  padding: 0.45rem 0.5rem;
  background: rgba(18, 37, 66, 0.86);
  color: #ecf7ff;
  font-weight: 700;
  font-size: 0.78rem;
}

.mini-playyard-action.reward-btn:disabled {
  opacity: 0.52;
}

.playyard-mini-call {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 28;
  isolation: isolate;
  pointer-events: auto;
  width: min(370px, calc(100% - 1.8rem));
  border: 1px solid rgba(168, 223, 255, 0.24);
  border-radius: 16px;
  padding: 0.4rem 0.5rem;
  background: rgba(10, 22, 41, 0.54);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(4, 10, 24, 0.5), inset 0 0 16px rgba(114, 208, 255, 0.08);
}

.playyard-mini-call .toolbar-icon-btn {
  pointer-events: auto;
}

.playyard-mini-call-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.playyard-mini-call-head h4 {
  margin-right: auto;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(218, 238, 255, 0.86);
}

.playyard-mini-call-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.playyard-call-toggle-btn {
  border-color: rgba(168, 223, 255, 0.45);
  background: rgba(16, 39, 70, 0.84);
  color: #e8f8ff;
  font-size: 0.74rem;
  padding: 0.36rem 0.62rem;
  white-space: nowrap;
}

.playyard-call-toggle-btn.active {
  border-color: rgba(255, 151, 198, 0.58);
  background: rgba(77, 29, 57, 0.9);
}

.playyard-call-collapse-btn {
  border-color: rgba(167, 222, 255, 0.3);
  background: rgba(13, 30, 52, 0.82);
  color: #dff4ff;
  font-size: 0.86rem;
  line-height: 1;
  padding: 0.34rem 0.54rem;
  min-width: 34px;
}

.playyard-mini-call-body {
  position: absolute;
  right: 0.2rem;
  bottom: calc(100% + 0.55rem);
  width: min(340px, calc(100vw - 2.5rem));
  height: 208px;
  margin-top: 0;
  display: block;
  transition: max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  max-height: 230px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
  pointer-events: none;
}

.playyard-mini-call-body.collapsed {
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  margin-top: 0;
  pointer-events: none;
}

.playyard-mini-video-tile {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  width: 176px;
  height: 108px;
  border: 1px solid rgba(177, 226, 255, 0.44);
  background: rgba(5, 13, 24, 0.86);
  box-shadow: 0 12px 26px rgba(6, 12, 22, 0.42), inset 0 0 14px rgba(122, 203, 255, 0.08);
  pointer-events: auto;
}

.playyard-mini-video-local {
  left: 0;
  bottom: 14px;
  transform: rotate(-1.1deg);
}

.playyard-mini-video-partner {
  right: 0;
  top: 0;
  transform: rotate(1.1deg);
}

.playyard-mini-video-tile video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

.playyard-mini-video-label {
  position: absolute;
  left: 0.42rem;
  bottom: 0.38rem;
  border-radius: 999px;
  border: 1px solid rgba(207, 230, 255, 0.32);
  background: rgba(6, 12, 20, 0.66);
  color: #e8f6ff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.45rem;
}

.playyard-mini-call:not(.live) .playyard-mini-call-body {
  display: none;
}

.playyard-drop-card {
  border: 1px solid rgba(198, 164, 255, 0.4);
  border-radius: 14px;
  padding: 0.55rem 0.68rem;
  background: rgba(39, 27, 77, 0.72);
  box-shadow: 0 10px 24px rgba(24, 13, 52, 0.36);
}

.playyard-drop-card h4 {
  margin: 0 0 0.12rem;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #edddff;
}

.playyard-drop-card p {
  margin: 0;
  color: #f8f0ff;
  font-size: 0.85rem;
  font-weight: 700;
}

.playyard-unlocks {
  position: relative;
  z-index: 1;
  margin-top: 0.32rem;
}

.playyard-unlocks h4 {
  margin: 0 0 0.28rem;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c6ecff;
}

.playyard-unlock-list {
  border: 1px dashed rgba(173, 226, 255, 0.32);
  border-radius: 12px;
  padding: 0.52rem 0.62rem;
  font-size: 0.79rem;
  color: #d8f0ff;
  font-weight: 700;
  min-height: 40px;
}

body.playyard-room-active .room-shell {
  grid-template-columns: 1fr;
  max-width: 100%;
  padding: 1rem 1.15rem 1.25rem;
}

body.playyard-room-active .room-sidebar {
  display: none;
}

body.playyard-room-active .room-main {
  width: 100%;
}

body.playyard-room-active .room-blob-1 {
  width: 740px;
  height: 740px;
  opacity: 0.16;
}

body.playyard-room-active .room-blob-2 {
  width: 680px;
  height: 680px;
  opacity: 0.12;
}

@media (max-width: 900px) {
  .playyard-room-head {
    flex-wrap: wrap;
  }

  .playyard-room-shell {
    min-height: calc(100vh - 150px);
  }

  .playyard-full-shell {
    min-height: calc(100vh - 230px);
  }

  body.playyard-room-active .room-shell {
    padding: 0.8rem;
  }

  .playyard-hud-grid {
    grid-template-columns: 1fr;
  }

  .playyard-start-btn {
    margin-left: 0;
  }

  .playyard-mini-call-head {
    flex-wrap: wrap;
  }

  .playyard-mini-call-actions {
    width: auto;
    justify-content: flex-end;
  }

  .playyard-call-toggle-btn {
    flex: 0 1 auto;
  }

  .playyard-mini-call-body {
    width: min(300px, calc(100vw - 2rem));
    height: 184px;
  }

  .playyard-mini-video-tile {
    width: 154px;
    height: 96px;
  }
}

@media (max-width: 560px) {
  .playyard-mini-call {
    right: 0.5rem;
    bottom: 0.5rem;
    width: min(290px, calc(100% - 1rem));
  }

  .playyard-call-toggle-btn {
    font-size: 0.7rem;
    padding: 0.32rem 0.54rem;
  }

  .playyard-call-collapse-btn {
    min-width: 30px;
    padding: 0.3rem 0.44rem;
  }

  .playyard-mini-video-tile {
    width: 138px;
    height: 86px;
  }

  .playyard-mini-call-body {
    width: min(272px, calc(100vw - 1.2rem));
    height: 166px;
  }
}

/* --- POOKIE MODE EXTRAS --- */

.sparkle {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 0 10px #fff, 0 0 20px var(--accent);
  animation: sparkle-anim 2s linear forwards;
}

@keyframes sparkle-anim {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }

  20% {
    transform: scale(1.2) rotate(45deg);
    opacity: 1;
  }

  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

.pookie-floater {
  position: fixed;
  bottom: -50px;
  z-index: 999;
  pointer-events: none;
  animation: float-up 10s linear forwards;
  filter: drop-shadow(0 0 5px rgba(255, 0, 110, 0.3));
}

@keyframes float-up {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-110vh) rotate(360deg);
    opacity: 0;
  }
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.breathing-guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  background: radial-gradient(circle at center, rgba(12, 24, 43, 0.12), rgba(8, 16, 30, 0.72));
  pointer-events: none;
}

.breathing-circle {
  width: clamp(120px, 22vw, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 25%, rgba(189, 233, 255, 0.75), rgba(126, 190, 255, 0.35) 45%, rgba(101, 81, 255, 0.2) 70%, rgba(67, 34, 126, 0.15) 100%);
  border: 1px solid rgba(205, 238, 255, 0.7);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 0 36px rgba(129, 207, 255, 0.55),
    0 0 72px rgba(143, 114, 255, 0.35);
  animation: breathe 8s ease-in-out infinite;
}

.breathing-text {
  margin-top: 0.2rem;
  font-family: var(--font-head);
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  font-weight: 800;
  color: #edf8ff;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-shadow: 0 0 12px rgba(8, 16, 34, 0.8);
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.42;
  }

  50% {
    transform: scale(1.24);
    opacity: 0.92;
  }
}

/* Burst Emoji */
.burst-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.burst-emoji {
  position: absolute;
  font-size: 2rem;
  user-select: none;
  animation: float-burst 1.5s forwards ease-out;
}

@keyframes float-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  20% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(1);
    opacity: 0;
  }
}

/* Extras Row & Presets */
.break-extras-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  gap: 1rem;
}

.extras-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.vibe-presets {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preset-btn {
  padding: 0.4rem 0.8rem;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.preset-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-dark);
}

.btn-wellness {
  padding: 0.5rem 1rem;
  background: var(--accent-gradient);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-wellness:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--accent-glow);
}

.btn-wellness.active {
  background: linear-gradient(135deg, #4ad4ff 0%, #7f68ff 100%);
  box-shadow: 0 8px 20px rgba(106, 170, 255, 0.45);
}

/* Our Song — Emotional Anchor */
.our-song-card {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 118, 161, 0.08) 0%, rgba(138, 80, 255, 0.08) 100%);
  border: 1px solid rgba(255, 118, 161, 0.25);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  overflow: hidden;
}

.our-song-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 118, 161, 0.05) 0%, rgba(138, 80, 255, 0.04) 100%);
  pointer-events: none;
}

.our-song-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.our-song-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 118, 161, 0.6));
  animation: music-pulse 2.5s ease-in-out infinite;
}

@keyframes music-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.our-song-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.our-song-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(255, 118, 161, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.our-song-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.our-song-play-btn {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, #ff76a1 0%, #8a50ff 100%);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(255, 118, 161, 0.5);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.our-song-play-btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(255, 118, 161, 0.7);
}

.our-song-play-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.our-song-play-btn:not(:disabled) {
  animation: song-glow 2.5s ease-in-out infinite;
}

@keyframes song-glow {

  0%,
  100% {
    box-shadow: 0 4px 14px rgba(255, 118, 161, 0.5);
  }

  50% {
    box-shadow: 0 4px 22px rgba(255, 118, 161, 0.85);
  }
}

.our-song-input-row {
  display: flex;
  gap: 0.6rem;
}

.our-song-input-row input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 118, 161, 0.2);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.85rem;
  color: #fff;
  font-size: 0.85rem;
}

.our-song-input-row input:focus {
  outline: none;
  border-color: rgba(255, 118, 161, 0.55);
}

.our-song-save-btn {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  background: var(--bg-paper);
  border: 1px solid rgba(255, 118, 161, 0.25);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s;
}

.our-song-save-btn:hover {
  background: rgba(255, 118, 161, 0.15);
  color: var(--text-primary);
  border-color: rgba(255, 118, 161, 0.5);
}


.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.panel-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.panel-icon {
  font-size: 2rem;
}

/* Break Widgets */
.break-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.break-overlay-panel {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  position: relative;
}

.break-panel-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.break-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.break-panel-head h4 {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.prompt-question {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0.5rem 0;
}

.draw-canvas {
  background: #fff;
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}

.draw-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.draw-color {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.btn-close-widget {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.btn-close-widget:hover {
  color: var(--text-primary);
}

.memories-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.memories-list li {
  padding: 0.75rem;
  background: var(--bg-dark);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent);
}

/* Toolbar Utils */
body:not(.break-layout) .break-only {
  display: none !important;
}

/* Redefine break-layout trigger based on panel visibility */
body.room-page:has(#breakPanel:not(.hidden)) .break-only {
  display: flex !important;
}

.panel-header h2 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
}

.pomo-status {
  font-weight: 700;
  color: var(--accent);
}

.room-jump-btn {
  margin-left: auto;
  border: 1px solid rgba(124, 193, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(28, 53, 89, 0.86), rgba(50, 90, 145, 0.9));
  color: #e8f6ff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.48rem 0.9rem;
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.room-jump-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(161, 220, 255, 0.8);
  box-shadow: 0 10px 22px rgba(62, 136, 224, 0.28);
}

/* Study Panel Details */
.pomo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  border: 1px solid var(--border-soft);
}

.pomo-clock {
  font-family: var(--font-head);
  font-size: 5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.pomo-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.pomo-presets {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pomo-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--bg-paper);
  color: var(--text-secondary);
  font-weight: 700;
  border: 1px solid var(--border);
}

.pomo-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.pomo-custom {
  display: flex;
  gap: 0.4rem;
}

.pomo-custom input {
  width: 60px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem;
  color: var(--text-primary);
  text-align: center;
}

.pomo-custom button {
  background: var(--bg-paper);
  color: var(--text-primary);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.75rem;
}

.pomo-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-pomo-primary {
  padding: 0.75rem 2rem;
  background: var(--accent-gradient);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 800;
  box-shadow: 0 8px 20px var(--accent-glow);
}

.btn-pomo-secondary {
  padding: 0.75rem 1.5rem;
  background: var(--bg-paper);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-weight: 800;
  border: 1px solid var(--border);
}

.focus-input-section {
  margin-bottom: 2rem;
}

.focus-input-section label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.focus-form {
  display: flex;
  gap: 0.75rem;
}

.focus-form input {
  flex-grow: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.focus-form button {
  padding: 0 1.5rem;
  background: var(--bg-paper);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.focus-task-actions {
  margin-top: 1rem;
}

.btn-done {
  width: 100%;
  padding: 0.75rem;
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.2);
  color: var(--success);
  border-radius: var(--radius-md);
  font-weight: 800;
}

.btn-done:hover {
  background: var(--success);
  color: #fff;
}

.panel-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 2rem 0;
}

.panel-divider::before,
.panel-divider::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background: var(--border);
}

.ambient-mixer {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.mixer-track {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-dark);
  padding: 1rem;
  border-radius: var(--radius-md);
}

.track-label {
  font-weight: 700;
  font-size: 0.9rem;
}

.track-val {
  font-family: monospace;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}

.study-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stat-card {
  background: var(--bg-dark);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--border-soft);
}

.stat-num {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--accent);
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Break Panel Details */
.break-clock {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

.break-media-stage {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.break-scene {
  position: absolute;
  inset: 0;
}

.scene-rain {
  background: linear-gradient(135deg, #09131a 0%, #172736 100%);
}

.scene-beach {
  background: linear-gradient(135deg, #1a2a44 0%, #44778d 100%);
}

.scene-night-city {
  background: linear-gradient(135deg, #0d0d1a 0%, #1e1e3f 100%);
}

.scene-campfire {
  background: linear-gradient(135deg, #1a0f09 0%, #3d2417 100%);
}

.break-yt-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #000;
}

.break-yt-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

.break-seek-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#breakSyncTime {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--text-primary);
}

.break-overlay-video {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 240px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border);
  z-index: 10;
  box-shadow: var(--shadow-lg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.break-overlay-video.maximized {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  border-radius: 0;
  border: none;
  z-index: 5;
  /* Behind widgets but above background */
}

.overlay-video-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: var(--transition);
}

.break-overlay-video:hover .overlay-video-actions {
  opacity: 1;
}

.btn-overlay-action {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  color: #fff;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
}

.btn-overlay-action:hover {
  background: var(--accent);
}

.break-overlay-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-video-label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 800;
}

.btn-overlay-min {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0.2rem;
  border-radius: 4px;
}

.break-controls-grid {
  display: grid;
  gap: 1rem;
}

.break-input-row {
  display: flex;
  gap: 0.75rem;
}

.break-input-row input {
  flex-grow: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.btn-primary-sm {
  padding: 0 1.25rem;
  background: var(--accent-gradient);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 0.9rem;
}

.break-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.break-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.break-btns button {
  padding: 0.6rem 1rem;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.85rem;
}

.break-btns button.btn-active {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-end-break {
  background: rgba(248, 81, 73, 0.1) !important;
  color: var(--danger) !important;
  border-color: rgba(248, 81, 73, 0.2) !important;
}

.btn-break-fun {
  border-color: rgba(111, 196, 255, 0.5) !important;
  background: linear-gradient(135deg, rgba(22, 56, 100, 0.9), rgba(43, 103, 180, 0.92)) !important;
  color: #e9f5ff !important;
}

.break-scenes {
  display: flex;
  gap: 0.5rem;
  background: var(--bg-dark);
  padding: 0.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

.scene-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.scene-btn.active {
  background: var(--bg-paper);
  box-shadow: var(--shadow-sm);
}

/* Watch Panel Details */
.watch-video-container {
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 2rem;
  position: relative;
}

.watch-video-container video {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
}

.watch-controls {
  padding: 1rem;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}

.watch-timeline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

#timelineValue {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
}

.watch-timeline input {
  flex-grow: 1;
  accent-color: var(--accent);
}

.watch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.watch-playback {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.watch-playback button {
  font-size: 1.25rem;
}

.btn-sync {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent);
}

.speed-select {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.watch-input-divider {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  margin: 1.5rem 0;
  position: relative;
}

.watch-input-divider::before,
.watch-input-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}

.watch-input-divider::before {
  left: 0;
}

.watch-input-divider::after {
  right: 0;
}

.watch-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.watch-input-group label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.input-row {
  display: flex;
  gap: 0.5rem;
}

.input-row input {
  flex-grow: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.input-row button {
  padding: 0 1.25rem;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--text-primary);
}

.btn-group {
  display: flex;
  gap: 0.3rem;
}

.btn-group button:last-child {
  background: var(--accent-gradient);
  border: none;
}

.status-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* --- GLOBAL COMPONENTS --- */

/* Floating Toolbar */
.room-toolbar {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
}

.toolbar-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(13, 17, 23, 0.8);
  backdrop-filter: blur(20px);
  padding: 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 0, 0, 0.3);
}

.toolbar-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-secondary);
}

.toolbar-btn:hover {
  background: var(--bg-paper);
  color: var(--text-primary);
}

.active.toolbar-btn {
  background: rgba(88, 166, 255, 0.15);
  color: var(--accent);
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 0.5rem;
}

.btn-join-call {
  background: var(--accent-gradient);
  color: #fff;
}

.btn-join-call:hover {
  transform: scale(1.05);
}

.btn-end-call {
  background: var(--danger);
  color: #fff;
}

/* Mode Selection Overlay */
.mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 7, 10, 0.95);
  backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-box {
  text-align: center;
  width: 100%;
  max-width: 900px;
  padding: 2rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.guide-box {
  text-align: left;
  max-width: 650px;
}

.guide-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}

.guide-section h4 {
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-family: var(--font-head);
  font-weight: 800;
}

.guide-section p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .guide-content {
    grid-template-columns: 1fr;
  }
}

.overlay-title {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.overlay-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
}

.mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem;
}

.mode-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mode-card:hover {
  transform: translateY(-10px);
  border-color: var(--accent);
  background: var(--bg-paper);
}

.mode-icon {
  font-size: 3.5rem;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.mode-card h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
}

.mode-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
}

.mode-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.mode-card:hover .mode-glow {
  opacity: 0.1;
}

.glow-study {
  background: radial-gradient(circle at center, #bc8cff, transparent 70%);
}

.glow-break {
  background: radial-gradient(circle at center, #ff9bce, transparent 70%);
}

.glow-fun {
  background: radial-gradient(circle at center, #58a6ff, transparent 70%);
}

.glow-playyard {
  background: radial-gradient(circle at center, #76d7ff, transparent 70%);
}

.glow-date {
  background: radial-gradient(circle at center, #ff72b2, transparent 70%);
}

@media (max-width: 1200px) {
  .mode-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .mode-cards {
    grid-template-columns: 1fr;
  }

  .mode-card {
    padding: 2rem;
  }
}

/* Pookie Decoration Elements */
.sparkle-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.sparkle {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 20px var(--accent);
  opacity: 0;
  animation: sparkle-twinkle 3s ease-in-out infinite;
}

@keyframes sparkle-twinkle {

  0%,
  100% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.pookie-floater {
  position: fixed;
  font-size: 1.5rem;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  animation: float-up 10s linear forwards;
}

@keyframes float-up {
  0% {
    transform: translateY(110vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.3;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    transform: translateY(-10vh) rotate(360deg);
    opacity: 0;
  }
}

body:not(.pookie-mode) .sparkle,
body:not(.pookie-mode) .pookie-floater {
  display: none !important;
}

/* --- FUN ROOM LAYOUT --- */
.fun-room-panel {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.fun-room-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

/* Fun Top Bar */
.fun-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.fun-score {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.score-val {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 15px var(--accent-glow);
}

.score-vs {
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--text-muted);
  font-style: italic;
}

.fun-stats {
  display: flex;
  gap: 1rem;
}

.stat-bubble {
  background: var(--bg-dark);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stat-icon {
  font-size: 1.1rem;
}

/* Fun Grid */
.fun-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  flex-grow: 1;
  min-height: 450px;
}

.fun-game-area {
  position: relative;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  background: radial-gradient(circle at center, rgba(88, 166, 255, 0.05), transparent);
}

.game-starter {
  text-align: center;
  animation: fade-in 0.5s ease;
}

.game-starter h1 {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-premium {
  margin-top: 1.5rem;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  box-shadow: 0 10px 25px var(--accent-glow);
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-premium:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 35px var(--accent-glow);
}

.btn-watch-hero {
  margin-top: 0.75rem;
  padding: 0.72rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(12, 20, 38, 0.68);
  color: #eef5ff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-cinematic-hero {
  margin-top: 0.75rem;
  margin-left: 0.55rem;
  padding: 0.72rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 130, 198, 0.45);
  background: linear-gradient(135deg, rgba(255, 43, 166, 0.88), rgba(121, 66, 252, 0.88));
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 26px rgba(190, 61, 255, 0.34);
}

.btn-cinematic-hero.active {
  animation: cinematic-chip-pulse 1.3s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(244, 91, 201, 0.6);
}

.toolbar-icon-btn.btn-watch-hero {
  background: rgba(12, 20, 38, 0.82);
  border-color: rgba(174, 212, 255, 0.42);
  color: #eef5ff;
}

.toolbar-icon-btn.btn-watch-hero:hover {
  background: rgba(20, 35, 62, 0.9);
  box-shadow: 0 10px 20px rgba(17, 56, 103, 0.24);
}

.toolbar-icon-btn.btn-cinematic-hero {
  background: linear-gradient(135deg, rgba(255, 43, 166, 0.88), rgba(121, 66, 252, 0.88));
  border-color: rgba(255, 130, 198, 0.45);
  color: #fff;
}

.toolbar-icon-btn.btn-cinematic-hero:hover {
  background: linear-gradient(135deg, rgba(255, 52, 171, 0.92), rgba(133, 78, 255, 0.92));
  box-shadow: 0 10px 24px rgba(185, 77, 255, 0.3);
}

/* Fun Right Panel */
.fun-right-panel {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.fun-panel-section h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  letter-spacing: 0.15em;
  font-weight: 800;
}

.challenge-card {
  background: var(--bg-dark);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-sm);
}

#challengeText {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

.challenge-timer {
  margin-top: 1rem;
  font-family: monospace;
  font-weight: 800;
  color: var(--danger);
  font-size: 1.2rem;
}

.fun-player-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fun-player-chip {
  border: 1px solid var(--border-soft);
  background: var(--bg-dark);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.fun-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0;
}

.fun-mood-indicator {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.mood-dot {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff88;
  animation: pulse-green 2s infinite;
}

.fun-right-panel .shared-mascot-card {
  margin-top: 0.4rem;
}

@keyframes pulse-green {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* Fun Toolbar */
.fun-toolbar-shell {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  padding: 0.62rem 0.8rem;
  border-radius: var(--radius-pill);
}

.fun-toolbar-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.52rem;
}

.toolbar-scroll-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-paper);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 220ms ease, opacity 180ms ease;
}

.toolbar-scroll-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.toolbar-scroll-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
  box-shadow: none;
}

.fun-toolbar-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 0.08rem 0;
}

.fun-toolbar-viewport::-webkit-scrollbar {
  display: none;
}

.fun-toolbar {
  display: flex;
  align-items: center;
  gap: 0.88rem;
  min-width: max-content;
  padding: 0.06rem 0.15rem;
}

.fun-toolbar-slider {
  width: 100%;
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: rgba(120, 130, 150, 0.24);
  outline: none;
  cursor: pointer;
}

.fun-toolbar-slider:disabled {
  opacity: 0.36;
  pointer-events: none;
}

.fun-toolbar-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff3fa3, #6f73ff);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(255, 78, 175, 0.34);
}

.fun-toolbar-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff3fa3, #6f73ff);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(255, 78, 175, 0.34);
}

.fun-center-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.toolbar-group {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.fun-toolbar .toolbar-icon-btn,
.fun-toolbar .chaos-btn,
.fun-toolbar .cinematic-event-btn,
.fun-toolbar .teleport-btn,
.fun-toolbar .teleport-fullscreen-btn {
  white-space: nowrap;
}

.toolbar-icon-btn {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.toolbar-icon-btn:hover {
  background: var(--border);
  transform: translateY(-2px);
}

.chaos-btn {
  background: linear-gradient(135deg, #ff006e 0%, #ff5d8f 100%);
  color: #fff;
  border: none;
  padding: 0.8rem 2.5rem;
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.1em;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.4);
  cursor: pointer;
  animation: shake-mini 5s infinite;
}

.teleport-btn {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 55%, #ec4899 100%);
  color: #fff;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 0 22px rgba(147, 51, 234, 0.45);
}

.cinematic-event-btn {
  border: 1px solid rgba(255, 138, 201, 0.38);
  background: linear-gradient(135deg, #ff257d 0%, #a72dff 58%, #5f6dff 100%);
  color: #fff;
  padding: 0.8rem 1.05rem;
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  box-shadow: 0 0 20px rgba(201, 73, 255, 0.42);
}

.teleport-btn,
.teleport-fullscreen-btn,
.cinematic-event-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 320ms ease, border-color 260ms ease, background 300ms ease, color 200ms ease;
}

.teleport-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 75%);
  transform: translateX(-130%);
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.teleport-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
}

.teleport-btn:hover::after {
  transform: translateX(130%);
}

.cinematic-event-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, 0.45), transparent 70%);
  transform: translateX(-130%);
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cinematic-event-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(194, 73, 255, 0.54);
}

.cinematic-event-btn:hover::after {
  transform: translateX(130%);
}

.cinematic-event-btn.active {
  border-color: rgba(255, 189, 228, 0.72);
  box-shadow: 0 0 30px rgba(255, 88, 210, 0.56);
  animation: cinematic-chip-pulse 1.25s ease-in-out infinite;
}

.teleport-fullscreen-btn {
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(10, 18, 35, 0.72);
  color: #e6eeff;
  padding: 0.78rem 1rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.84rem;
  white-space: nowrap;
}

.teleport-fullscreen-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 200, 255, 0.7);
  box-shadow: 0 0 22px rgba(77, 160, 255, 0.34);
}

.teleport-fullscreen-btn.active {
  border-color: rgba(100, 180, 255, 0.7);
  box-shadow: 0 0 20px rgba(100, 180, 255, 0.35);
  background: linear-gradient(140deg, rgba(52, 91, 214, 0.8), rgba(21, 143, 241, 0.7));
  color: #fff;
  animation: fullscreen-pulse 2.4s ease-in-out infinite;
}

.stop-event-btn,
.stop-teleport-btn,
.teleport-audio-btn {
  white-space: nowrap;
}

.stop-event-btn {
  border-color: rgba(255, 125, 169, 0.45);
  background: rgba(52, 17, 31, 0.72);
  color: #ffd8e8;
}

.stop-teleport-btn {
  border-color: rgba(130, 177, 255, 0.42);
  background: rgba(20, 35, 56, 0.74);
  color: #d6e8ff;
}

.teleport-audio-btn {
  border-color: rgba(122, 197, 255, 0.42);
  background: rgba(14, 33, 53, 0.78);
  color: #d7f0ff;
}

.teleport-audio-btn.active {
  box-shadow: 0 0 18px rgba(83, 179, 255, 0.32);
}

.hug-btn,
.thought-btn,
.confession-btn {
  white-space: nowrap;
}

.hug-btn {
  border-color: rgba(255, 173, 214, 0.55);
  background: linear-gradient(135deg, rgba(255, 137, 196, 0.88), rgba(255, 103, 169, 0.88));
  color: #fff;
}

.hug-btn.holding {
  animation: hug-hold-pulse 0.55s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 121, 187, 0.46);
}

.thought-btn {
  border-color: rgba(169, 206, 255, 0.56);
  background: rgba(22, 39, 64, 0.84);
  color: #d9eaff;
}

.thought-btn:hover {
  box-shadow: 0 0 16px rgba(133, 185, 255, 0.28);
}

.confession-btn {
  border-color: rgba(178, 168, 255, 0.52);
  background: linear-gradient(135deg, rgba(50, 43, 78, 0.88), rgba(33, 30, 56, 0.88));
  color: #e8e2ff;
}

.confession-btn.active {
  box-shadow: 0 0 18px rgba(177, 168, 255, 0.38);
  border-color: rgba(206, 198, 255, 0.76);
}

.toolbar-icon-btn.inactive,
.toolbar-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.game-starter .btn-watch-hero,
.game-starter .btn-cinematic-hero {
  margin-right: 0.4rem;
  margin-left: 0.4rem;
}

@keyframes shake-mini {

  0%,
  100% {
    transform: scale(1);
  }

  10%,
  20% {
    transform: scale(1.05) rotate(1deg);
  }

  15%,
  25% {
    transform: scale(1.05) rotate(-1deg);
  }
}

@keyframes hug-hold-pulse {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px) scale(1.02);
  }
}

/* Submenus */
.fun-submenu {
  position: fixed;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  z-index: 100;
  box-shadow: var(--shadow-lg);
  animation: slide-up-fade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-up-fade {
  from {
    transform: translate(-50%, 20px);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.fun-submenu header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.close-submenu {
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
}

.game-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sub-game-btn {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius-md);
  text-align: left;
  font-weight: 700;
  transition: all 0.2s;
}

.sub-game-btn:hover {
  border-color: var(--accent);
  background: var(--bg-paper);
}

.mini-playyard-btn {
  border-color: rgba(121, 231, 255, 0.52);
  background: linear-gradient(135deg, rgba(34, 60, 102, 0.9), rgba(76, 54, 140, 0.9));
  color: #dff6ff;
  box-shadow: 0 0 18px rgba(90, 196, 255, 0.24);
}

.mini-playyard-btn:hover {
  box-shadow: 0 0 24px rgba(119, 205, 255, 0.34);
}

.game-starter .btn-mini-playyard-hero {
  border-color: rgba(126, 226, 255, 0.56);
  background: linear-gradient(135deg, rgba(22, 58, 96, 0.92), rgba(57, 39, 130, 0.92));
  color: #e8fbff;
}

.mini-playyard-sub {
  border-color: rgba(139, 231, 255, 0.45);
  background: linear-gradient(135deg, rgba(13, 30, 54, 0.86), rgba(47, 38, 98, 0.86));
  color: #e2f7ff;
}

.mini-playyard-sub:hover {
  border-color: rgba(162, 238, 255, 0.78);
  box-shadow: 0 0 18px rgba(116, 212, 255, 0.24);
}

.mini-playyard-shell {
  position: relative;
  min-height: 420px;
  padding: 1.2rem 1.2rem 1rem;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.8rem;
  color: #f0f6ff;
  background:
    radial-gradient(circle at 20% 12%, rgba(110, 210, 255, 0.22), transparent 40%),
    radial-gradient(circle at 82% 84%, rgba(150, 116, 255, 0.24), transparent 42%),
    linear-gradient(155deg, #0c152b 0%, #111d37 42%, #18143a 100%);
  border: 1px solid rgba(177, 231, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 22px 56px rgba(5, 10, 25, 0.5);
  perspective: 1300px;
}

.mini-playyard-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mini-star {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a7ecff;
  box-shadow: 0 0 18px rgba(130, 228, 255, 0.9);
  animation: mini-star-pulse 3s ease-in-out infinite;
}

.mini-star.s1 {
  left: 12%;
  top: 18%;
  animation-delay: 0.2s;
}

.mini-star.s2 {
  left: 76%;
  top: 24%;
  width: 6px;
  height: 6px;
  animation-delay: 1s;
}

.mini-star.s3 {
  left: 24%;
  top: 74%;
  width: 5px;
  height: 5px;
  animation-delay: 1.5s;
}

.mini-star.s4 {
  left: 86%;
  top: 68%;
  width: 7px;
  height: 7px;
  animation-delay: 2.1s;
}

.mini-playyard-header {
  position: relative;
  z-index: 1;
}

.mini-playyard-header h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1.8vw, 2rem);
  letter-spacing: 0.02em;
  color: #f2fcff;
  text-shadow: 0 0 18px rgba(122, 232, 255, 0.36);
}

.mini-playyard-header p {
  margin: 0.3rem 0 0;
  color: rgba(223, 242, 255, 0.82);
  font-weight: 600;
}

.mini-playyard-stage {
  position: relative;
  z-index: 1;
  min-height: 260px;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 30px rgba(11, 12, 32, 0.42));
}

.mini-grid-floor {
  position: absolute;
  inset: 22% 8% 0;
  border-radius: 20px;
  transform: rotateX(72deg) translateZ(-58px);
  background:
    repeating-linear-gradient(90deg, rgba(120, 218, 255, 0.34) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(154, 122, 255, 0.28) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, rgba(14, 24, 44, 0.12), rgba(10, 18, 36, 0.8));
  box-shadow: inset 0 0 24px rgba(87, 186, 255, 0.22);
  animation: mini-grid-run 5s linear infinite;
}

.mini-energy-ring {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(122, 233, 255, 0.45);
  transform-style: preserve-3d;
}

.mini-energy-ring.ring-a {
  transform: rotateX(72deg) rotateZ(8deg) translateZ(10px);
  animation: mini-ring-rotate-a 6s linear infinite;
}

.mini-energy-ring.ring-b {
  border-color: rgba(163, 136, 255, 0.52);
  width: 190px;
  height: 190px;
  transform: rotateY(72deg) rotateX(22deg);
  animation: mini-ring-rotate-b 5.4s linear infinite reverse;
}

.mini-energy-ring.ring-c {
  border-color: rgba(255, 129, 215, 0.42);
  width: 250px;
  height: 250px;
  transform: rotateX(18deg) rotateY(62deg);
  animation: mini-ring-rotate-c 7s linear infinite;
}

.mini-cube-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  transform-style: preserve-3d;
  animation: mini-cube-drift 5.8s ease-in-out infinite;
}

.mini-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: mini-cube-spin 8.5s linear infinite;
}

.mini-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #eff8ff;
  background: linear-gradient(145deg, rgba(20, 56, 104, 0.9), rgba(79, 57, 155, 0.88));
  border: 1px solid rgba(180, 235, 255, 0.42);
  box-shadow: inset 0 0 16px rgba(170, 238, 255, 0.18);
}

.mini-face.front {
  transform: translateZ(55px);
}

.mini-face.back {
  transform: rotateY(180deg) translateZ(55px);
}

.mini-face.right {
  transform: rotateY(90deg) translateZ(55px);
}

.mini-face.left {
  transform: rotateY(-90deg) translateZ(55px);
}

.mini-face.top {
  transform: rotateX(90deg) translateZ(55px);
}

.mini-face.bottom {
  transform: rotateX(-90deg) translateZ(55px);
}

.mini-glow-pill {
  position: absolute;
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.88;
}

.mini-pill-a {
  width: 160px;
  height: 16px;
  left: 12%;
  top: 68%;
  background: linear-gradient(90deg, rgba(79, 196, 255, 0), rgba(79, 196, 255, 0.95), rgba(79, 196, 255, 0));
  animation: mini-pill-shift 3.8s ease-in-out infinite;
}

.mini-pill-b {
  width: 170px;
  height: 14px;
  right: 12%;
  top: 34%;
  background: linear-gradient(90deg, rgba(231, 109, 255, 0), rgba(231, 109, 255, 0.95), rgba(231, 109, 255, 0));
  animation: mini-pill-shift 4.4s ease-in-out infinite reverse;
}

.mini-playyard-controls {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.mini-playyard-action {
  border-color: rgba(156, 232, 255, 0.52);
  background: rgba(16, 36, 62, 0.82);
  color: #e8f7ff;
  font-weight: 800;
}

.mini-playyard-action.alt {
  border-color: rgba(200, 160, 255, 0.52);
  background: rgba(50, 35, 87, 0.78);
}

#playyardBattleFullscreenBtn {
  border-color: rgba(164, 220, 255, 0.52);
  background: rgba(17, 47, 86, 0.82);
}

#playyardBattleFullscreenBtn.active {
  border-color: rgba(255, 165, 220, 0.64);
  background: rgba(86, 34, 73, 0.88);
}

.mini-playyard-shell.warp-active .mini-cube {
  animation-duration: 1.1s;
}

.mini-playyard-shell.warp-active .mini-energy-ring {
  animation-duration: 1.2s;
  filter: drop-shadow(0 0 20px rgba(147, 235, 255, 0.9));
}

.mini-playyard-shell.warp-active .mini-grid-floor {
  animation-duration: 1.2s;
  box-shadow: inset 0 0 28px rgba(105, 230, 255, 0.45), 0 0 42px rgba(142, 132, 255, 0.36);
}

@keyframes mini-star-pulse {

  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes mini-grid-run {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 140px 0, 0 140px, 0 0;
  }
}

@keyframes mini-ring-rotate-a {
  from {
    transform: rotateX(72deg) rotateZ(8deg);
  }

  to {
    transform: rotateX(72deg) rotateZ(368deg);
  }
}

@keyframes mini-ring-rotate-b {
  from {
    transform: rotateY(72deg) rotateX(22deg) rotateZ(0deg);
  }

  to {
    transform: rotateY(72deg) rotateX(22deg) rotateZ(360deg);
  }
}

@keyframes mini-ring-rotate-c {
  from {
    transform: rotateX(18deg) rotateY(62deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(18deg) rotateY(62deg) rotateZ(-360deg);
  }
}

@keyframes mini-cube-spin {
  from {
    transform: rotateX(-18deg) rotateY(0deg);
  }

  to {
    transform: rotateX(-18deg) rotateY(360deg);
  }
}

@keyframes mini-cube-drift {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-12px) scale(1.04);
  }
}

@keyframes mini-pill-shift {

  0%,
  100% {
    transform: translateX(0) scaleX(0.92);
    opacity: 0.5;
  }

  50% {
    transform: translateX(16px) scaleX(1.08);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .mini-playyard-shell {
    min-height: 380px;
    padding: 1rem 0.8rem;
  }

  .mini-playyard-stage {
    min-height: 220px;
  }

  .mini-energy-ring.ring-a {
    width: 180px;
    height: 180px;
  }

  .mini-energy-ring.ring-b {
    width: 155px;
    height: 155px;
  }

  .mini-energy-ring.ring-c {
    width: 210px;
    height: 210px;
  }

  .mini-cube-wrap {
    width: 92px;
    height: 92px;
  }

  .mini-face.front,
  .mini-face.back,
  .mini-face.right,
  .mini-face.left,
  .mini-face.top,
  .mini-face.bottom {
    font-size: 0.75rem;
  }

  .mini-face.front {
    transform: translateZ(46px);
  }

  .mini-face.back {
    transform: rotateY(180deg) translateZ(46px);
  }

  .mini-face.right {
    transform: rotateY(90deg) translateZ(46px);
  }

  .mini-face.left {
    transform: rotateY(-90deg) translateZ(46px);
  }

  .mini-face.top {
    transform: rotateX(90deg) translateZ(46px);
  }

  .mini-face.bottom {
    transform: rotateX(-90deg) translateZ(46px);
  }
}

.reaction-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.spam-btn {
  font-size: 1.5rem;
  background: var(--bg-dark);
  padding: 1rem;
  border-radius: var(--radius-md);
}

.btn-storm {
  width: 100%;
  padding: 1rem;
  background: var(--accent-gradient);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 800;
}

/* Universe Mode Visual Skins (Fun Room only) */
.fun-room-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --universe-glow: rgba(97, 174, 255, 0.24);
  --scene-overlay: rgba(163, 227, 255, 0.16);
  transition: background 360ms ease, border-color 360ms ease, box-shadow 360ms ease;
}

.fun-room-panel::before,
.fun-room-panel::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity 320ms ease;
}

.fun-room-panel::before {
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08), transparent 40%);
  filter: blur(16px);
}

.fun-room-panel::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 12px 12px;
  animation: universe-drift 12s linear infinite;
}

.fun-room-panel .fun-room-layout {
  position: relative;
  z-index: 1;
}

.fun-room-panel[class*="universe-"]::before,
.fun-room-panel[class*="universe-"]::after {
  opacity: 0.58;
}

.fun-room-panel[class*="universe-"] .glass-panel {
  transition: background 360ms ease, border-color 360ms ease, box-shadow 360ms ease, color 360ms ease;
  background: rgba(10, 15, 28, 0.58);
  border-color: rgba(255, 255, 255, 0.16);
}

.fun-game-area::before,
.fun-game-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
}

.fun-room-panel[class*="universe-"] .fun-game-area::before,
.fun-room-panel[class*="universe-"] .fun-game-area::after {
  opacity: 1;
}

.fun-room-panel.universe-space-station {
  --universe-glow: rgba(120, 180, 255, 0.28);
  background: radial-gradient(circle at 50% -10%, rgba(91, 152, 255, 0.2), transparent 45%),
    linear-gradient(140deg, rgba(3, 13, 34, 0.97), rgba(9, 20, 43, 0.95), rgba(20, 39, 71, 0.92));
}

.fun-room-panel.universe-space-station::after {
  opacity: 0.7;
}

.fun-room-panel.universe-space-station .fun-game-area::before {
  background-image: radial-gradient(circle, rgba(210, 236, 255, 0.85) 1px, transparent 2px),
    radial-gradient(circle, rgba(154, 207, 255, 0.6) 1px, transparent 2px);
  background-size: 120px 120px, 180px 180px;
  background-position: 0 0, 35px 48px;
  animation: star-parallax 18s linear infinite;
}

.fun-room-panel.universe-space-station .fun-game-area::after {
  background: radial-gradient(circle at 25% 15%, rgba(93, 163, 255, 0.26), transparent 44%),
    radial-gradient(circle at 76% 80%, rgba(126, 227, 255, 0.18), transparent 38%);
  mix-blend-mode: screen;
  animation: aurora-shift 9s ease-in-out infinite;
}

.fun-room-panel.universe-underwater-world {
  --universe-glow: rgba(112, 226, 255, 0.3);
  background: radial-gradient(circle at 50% -20%, rgba(115, 242, 255, 0.2), transparent 52%),
    linear-gradient(150deg, rgba(2, 34, 45, 0.97), rgba(0, 74, 97, 0.94), rgba(4, 97, 121, 0.9));
}

.fun-room-panel.universe-underwater-world::after {
  background-size: 20px 20px;
  opacity: 0.28;
}

.fun-room-panel.universe-underwater-world .fun-game-area::before {
  background-image: radial-gradient(circle, rgba(191, 244, 255, 0.4) 2px, transparent 3px),
    radial-gradient(circle, rgba(122, 225, 255, 0.32) 1px, transparent 2px);
  background-size: 170px 170px, 95px 95px;
  animation: bubble-rise 14s linear infinite;
}

.fun-room-panel.universe-underwater-world .fun-game-area::after {
  background: linear-gradient(160deg, rgba(112, 250, 255, 0.16), transparent 42%),
    repeating-linear-gradient(90deg, rgba(175, 244, 255, 0.08) 0 3px, transparent 3px 16px);
  mix-blend-mode: screen;
  animation: caustic-shift 8s ease-in-out infinite;
}

.fun-room-panel.universe-retro-arcade {
  --universe-glow: rgba(255, 104, 223, 0.28);
  background: radial-gradient(circle at 24% 12%, rgba(255, 94, 214, 0.2), transparent 42%),
    linear-gradient(140deg, rgba(32, 2, 43, 0.97), rgba(78, 0, 88, 0.95), rgba(32, 18, 88, 0.93));
}

.fun-room-panel.universe-retro-arcade::before {
  background: linear-gradient(90deg, rgba(255, 0, 153, 0.2), rgba(0, 255, 255, 0.12), rgba(255, 0, 153, 0.2));
  opacity: 0.4;
}

.fun-room-panel.universe-retro-arcade .fun-game-area::before {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 6px);
  mix-blend-mode: screen;
  animation: scanline-shift 2.8s linear infinite;
}

.fun-room-panel.universe-retro-arcade .fun-game-area::after {
  background: radial-gradient(circle at 12% 78%, rgba(0, 255, 255, 0.2), transparent 30%),
    radial-gradient(circle at 85% 24%, rgba(255, 0, 195, 0.24), transparent 28%);
  animation: neon-bloom 7s ease-in-out infinite;
}

.fun-room-panel.universe-haunted-house {
  --universe-glow: rgba(184, 156, 212, 0.28);
  background: radial-gradient(circle at 50% -20%, rgba(146, 120, 169, 0.18), transparent 46%),
    linear-gradient(140deg, rgba(8, 8, 9, 0.98), rgba(28, 20, 29, 0.96), rgba(42, 28, 39, 0.95));
}

.fun-room-panel.universe-haunted-house::before {
  background: radial-gradient(circle at 30% 30%, rgba(133, 113, 138, 0.18), transparent 55%);
}

.fun-room-panel.universe-haunted-house .fun-game-area::before {
  background: radial-gradient(circle at 30% 20%, rgba(160, 145, 190, 0.2), transparent 42%),
    radial-gradient(circle at 70% 80%, rgba(138, 118, 159, 0.14), transparent 45%);
  animation: fog-swirl 11s ease-in-out infinite;
}

.fun-room-panel.universe-haunted-house .fun-game-area::after {
  background: linear-gradient(0deg, rgba(22, 14, 23, 0.5), rgba(0, 0, 0, 0)),
    radial-gradient(circle at center, transparent 42%, rgba(12, 8, 13, 0.45) 92%);
}

.fun-room-panel.universe-cozy-snow-cabin {
  --universe-glow: rgba(187, 216, 255, 0.28);
  background: radial-gradient(circle at 50% -22%, rgba(163, 214, 255, 0.2), transparent 50%),
    linear-gradient(140deg, rgba(20, 28, 43, 0.97), rgba(33, 49, 75, 0.95), rgba(49, 69, 98, 0.93));
}

.fun-room-panel.universe-cozy-snow-cabin::after {
  opacity: 0.45;
  background-size: 16px 16px;
}

.fun-room-panel.universe-cozy-snow-cabin .fun-game-area::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(215, 237, 255, 0.6) 1px, transparent 2px);
  background-size: 145px 145px, 90px 90px;
  animation: snow-drift 16s linear infinite;
}

.fun-room-panel.universe-cozy-snow-cabin .fun-game-area::after {
  background: radial-gradient(circle at 25% 85%, rgba(255, 183, 128, 0.22), transparent 36%),
    radial-gradient(circle at 85% 82%, rgba(248, 214, 157, 0.15), transparent 38%);
  animation: fire-glow 6s ease-in-out infinite;
}

.fun-room-panel.universe-space-station .fun-game-area,
.fun-room-panel.universe-underwater-world .fun-game-area,
.fun-room-panel.universe-retro-arcade .fun-game-area,
.fun-room-panel.universe-haunted-house .fun-game-area,
.fun-room-panel.universe-cozy-snow-cabin .fun-game-area {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 56px rgba(0, 0, 0, 0.45),
    0 0 80px var(--universe-glow);
}

.universe-banner {
  margin: 0 auto 0.9rem;
  width: fit-content;
  max-width: 92%;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(9, 10, 18, 0.56);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
  animation: fade-in 220ms ease;
}

.fun-room-panel.confession-mode-active {
  background:
    radial-gradient(circle at 50% -20%, rgba(125, 109, 203, 0.18), transparent 48%),
    linear-gradient(145deg, rgba(14, 16, 30, 0.97), rgba(21, 24, 44, 0.95), rgba(29, 31, 54, 0.94));
}

.fun-room-panel.confession-mode-active .glass-panel {
  border-color: rgba(190, 184, 255, 0.2);
  box-shadow: 0 16px 36px rgba(6, 8, 18, 0.46), inset 0 0 0 1px rgba(214, 209, 255, 0.06);
}

.fun-room-panel.confession-mode-active .fun-top-bar,
.fun-room-panel.confession-mode-active .fun-right-panel,
.fun-room-panel.confession-mode-active .fun-toolbar-shell,
.fun-room-panel.confession-mode-active .fun-toolbar {
  backdrop-filter: blur(14px) saturate(1.15);
}

.fun-room-panel.confession-mode-active .fun-game-area::before {
  background:
    radial-gradient(circle at 24% 20%, rgba(173, 151, 255, 0.12), transparent 35%),
    radial-gradient(circle at 74% 74%, rgba(125, 96, 214, 0.12), transparent 34%);
  opacity: 1;
  animation: confession-shimmer 11s ease-in-out infinite;
}

.fun-room-panel.cinematic-active {
  --cin-panel-glow: rgba(255, 100, 216, 0.28);
}

.fun-room-panel.cinematic-active .fun-top-bar,
.fun-room-panel.cinematic-active .fun-right-panel,
.fun-room-panel.cinematic-active .fun-toolbar-shell,
.fun-room-panel.cinematic-active .fun-toolbar {
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 18px 48px rgba(6, 8, 18, 0.38), 0 0 28px var(--cin-panel-glow);
  transition: box-shadow 280ms ease, transform 280ms ease, backdrop-filter 280ms ease;
}

.fun-room-panel.cinematic-active .fun-game-area {
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(2deg) rotateY(-1deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 80px rgba(0, 0, 0, 0.52), 0 0 90px var(--cin-panel-glow);
}

.fun-room-panel.cinematic-theme-neon-rave {
  --cin-panel-glow: rgba(214, 90, 255, 0.42);
}

.fun-room-panel.cinematic-theme-rain-zoom {
  --cin-panel-glow: rgba(113, 201, 255, 0.32);
}

.fun-room-panel.cinematic-theme-rain-zoom .fun-game-area {
  animation: cinematic-slow-zoom 12s ease-in-out infinite;
}

.fun-room-panel.cinematic-theme-dramatic-countdown {
  --cin-panel-glow: rgba(255, 90, 90, 0.38);
}

.fun-room-panel.cinematic-theme-dramatic-countdown .fun-game-area {
  animation: dramatic-pulse 1.35s ease-in-out infinite;
}

.fun-room-panel.cinematic-theme-award-ceremony {
  --cin-panel-glow: rgba(255, 214, 104, 0.44);
}

.cinematic-event-layer {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  border-radius: inherit;
  transition: opacity 300ms ease;
  --cin-primary: rgba(255, 69, 208, 0.92);
  --cin-secondary: rgba(89, 112, 255, 0.88);
  --cin-highlight: rgba(255, 255, 255, 0.84);
}

.cinematic-event-layer.active {
  opacity: 1;
}

.cinematic-layer-backdrop,
.cinematic-layer-grid,
.cinematic-layer-vignette,
.cinematic-foreground {
  position: absolute;
  inset: 0;
}

.cinematic-layer-backdrop {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--cin-primary) 56%, transparent) 0%, transparent 44%),
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--cin-secondary) 54%, transparent) 0%, transparent 44%),
    linear-gradient(150deg, rgba(6, 8, 25, 0.76), rgba(17, 24, 42, 0.74));
  mix-blend-mode: screen;
  animation: cinematic-backdrop-shift 7s ease-in-out infinite;
}

.cinematic-layer-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 48px 48px;
  transform-origin: center bottom;
  transform: perspective(900px) rotateX(66deg) translateY(28%);
  opacity: 0.25;
}

.cinematic-layer-vignette {
  background: radial-gradient(circle at center, transparent 38%, rgba(1, 4, 14, 0.74) 100%);
}

.cinematic-title-card {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, calc(100% - 2rem));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: linear-gradient(145deg, rgba(8, 15, 36, 0.72), rgba(23, 28, 56, 0.52));
  box-shadow: 0 20px 60px rgba(7, 12, 30, 0.56), 0 0 40px color-mix(in srgb, var(--cin-primary) 36%, transparent);
  backdrop-filter: blur(16px) saturate(1.28);
  padding: 0.92rem 1rem;
  color: #f6f8ff;
  text-align: center;
  animation: cinematic-card-rise 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.cinematic-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.62rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--cin-highlight) 76%, transparent);
}

.cinematic-title-card h3 {
  margin: 0.22rem 0 0.1rem;
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  font-weight: 900;
}

.cinematic-title-card p {
  margin: 0;
  font-size: 0.83rem;
  color: rgba(234, 240, 255, 0.86);
}

.cinematic-meta-row {
  margin-top: 0.66rem;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  justify-content: center;
}

.cinematic-remaining {
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #fff;
  min-width: 2.8rem;
}

.cinematic-progress-track {
  width: min(220px, 58vw);
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.cinematic-progress-track::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--event-progress, 1));
  background: linear-gradient(90deg, var(--cin-primary), color-mix(in srgb, var(--cin-secondary) 78%, #fff 22%));
  transition: transform 280ms linear;
}

.cinematic-winner {
  margin-top: 0.52rem;
  font-size: 0.78rem;
  color: #ffe8ba;
  text-shadow: 0 0 16px rgba(255, 220, 113, 0.54);
}

.cinematic-foreground {
  perspective: 900px;
}

.cinematic-particle {
  position: absolute;
  left: var(--x, 50%);
  top: -12%;
  width: var(--size, 4px);
  height: calc(var(--size, 4px) * 3.2);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--cin-primary) 65%, transparent));
  opacity: 0;
  transform: translate3d(-50%, 0, 0) rotateX(10deg);
  animation: cinematic-particle-fall var(--dur, 3.2s) linear var(--delay, 0s) infinite;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cin-primary) 58%, transparent));
}

.cinematic-event-layer.theme-neon-rave {
  --cin-primary: rgba(255, 67, 197, 0.96);
  --cin-secondary: rgba(79, 121, 255, 0.9);
}

.cinematic-event-layer.theme-neon-rave .cinematic-layer-grid {
  opacity: 0.38;
  filter: drop-shadow(0 0 18px rgba(203, 118, 255, 0.4));
  animation: neon-grid-sweep 2.4s linear infinite;
}

.cinematic-event-layer.theme-neon-rave .cinematic-particle {
  height: calc(var(--size, 4px) * 1.2);
  border-radius: 999px;
}

.cinematic-event-layer.theme-rain-zoom {
  --cin-primary: rgba(128, 217, 255, 0.88);
  --cin-secondary: rgba(103, 141, 255, 0.86);
}

.cinematic-event-layer.theme-rain-zoom .cinematic-layer-grid {
  opacity: 0.16;
}

.cinematic-event-layer.theme-rain-zoom .cinematic-particle {
  background: linear-gradient(180deg, rgba(220, 247, 255, 0.95), rgba(112, 204, 255, 0.24));
  height: calc(var(--size, 3px) * 11);
  width: max(1px, calc(var(--size, 3px) * 0.38));
  filter: drop-shadow(0 0 10px rgba(124, 207, 255, 0.5));
}

.cinematic-event-layer.theme-dramatic-countdown {
  --cin-primary: rgba(255, 103, 120, 0.92);
  --cin-secondary: rgba(130, 86, 255, 0.82);
}

.cinematic-event-layer.theme-dramatic-countdown .cinematic-layer-backdrop {
  animation: dramatic-bloom 1.4s ease-in-out infinite;
}

.cinematic-event-layer.theme-dramatic-countdown .cinematic-title-card {
  border-color: rgba(255, 144, 144, 0.42);
}

.cinematic-event-layer.theme-dramatic-countdown .cinematic-remaining {
  color: #ffd8d8;
}

.cinematic-event-layer.theme-award-ceremony {
  --cin-primary: rgba(255, 205, 76, 0.93);
  --cin-secondary: rgba(255, 146, 75, 0.88);
}

.cinematic-event-layer.theme-award-ceremony .cinematic-layer-grid {
  opacity: 0.14;
}

.cinematic-event-layer.theme-award-ceremony .cinematic-particle {
  background: linear-gradient(180deg, rgba(255, 245, 212, 0.98), rgba(255, 200, 102, 0.34));
  animation-name: confetti-fall;
  border-radius: 1px;
}

.teleport-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  --teleport-core: rgba(166, 218, 255, 0.86);
  --teleport-rim: rgba(113, 173, 255, 0.95);
  --teleport-shadow: rgba(83, 140, 255, 0.65);
  --teleport-accent: rgba(255, 255, 255, 0.32);
  mix-blend-mode: screen;
}

.teleport-fx-layer.active {
  opacity: 1;
}

.teleport-fx-layer::before,
.teleport-fx-layer::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
}

.teleport-fx-layer::before {
  opacity: 0;
  transform: scale(0.2);
  background: radial-gradient(circle at center, var(--teleport-core) 0%, var(--teleport-accent) 24%, transparent 60%);
  filter: blur(2px);
}

.teleport-fx-layer::after {
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 12deg, rgba(255, 255, 255, 0.18) 12deg 14deg);
  transform: scale(0.8);
}

.teleport-fx-layer.active::before {
  animation: teleport-flash 920ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.teleport-fx-layer.active::after {
  animation: teleport-vortex 940ms cubic-bezier(0.12, 0.86, 0.22, 1) forwards;
}

.teleport-warp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(180px, 24vmin, 360px);
  height: clamp(180px, 24vmin, 360px);
  transform: translate(-50%, -50%) scale(0.18);
  border-radius: 50%;
  border: 2px solid var(--teleport-rim);
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.36), transparent 60%);
  box-shadow: 0 0 90px var(--teleport-shadow), inset 0 0 52px rgba(255, 255, 255, 0.32);
  filter: drop-shadow(0 0 18px var(--teleport-shadow));
}

.teleport-fx-layer.active .teleport-warp {
  animation: warp-ring 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.teleport-particle {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff 0%, var(--teleport-core) 55%, transparent 100%);
  opacity: 0;
  filter: blur(0.1px);
  box-shadow: 0 0 14px var(--teleport-shadow);
  transform: translate(-50%, -50%);
}

.teleport-fx-layer.active .teleport-particle {
  animation: teleport-particle 900ms cubic-bezier(0.17, 0.84, 0.44, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.teleport-fx-layer[data-scene="space-station"] {
  --teleport-core: rgba(179, 222, 255, 0.9);
  --teleport-rim: rgba(123, 189, 255, 0.95);
  --teleport-shadow: rgba(103, 165, 255, 0.72);
  --teleport-accent: rgba(193, 231, 255, 0.34);
}

.teleport-fx-layer[data-scene="underwater-world"] {
  --teleport-core: rgba(158, 250, 255, 0.86);
  --teleport-rim: rgba(94, 228, 255, 0.9);
  --teleport-shadow: rgba(63, 197, 240, 0.72);
  --teleport-accent: rgba(186, 255, 255, 0.32);
}

.teleport-fx-layer[data-scene="retro-arcade"] {
  --teleport-core: rgba(255, 177, 249, 0.92);
  --teleport-rim: rgba(255, 104, 220, 0.96);
  --teleport-shadow: rgba(193, 83, 255, 0.74);
  --teleport-accent: rgba(255, 207, 255, 0.35);
}

.teleport-fx-layer[data-scene="haunted-house"] {
  --teleport-core: rgba(228, 219, 245, 0.84);
  --teleport-rim: rgba(184, 166, 214, 0.88);
  --teleport-shadow: rgba(131, 109, 170, 0.72);
  --teleport-accent: rgba(220, 206, 245, 0.28);
}

.teleport-fx-layer[data-scene="cozy-snow-cabin"] {
  --teleport-core: rgba(237, 247, 255, 0.95);
  --teleport-rim: rgba(198, 228, 255, 0.96);
  --teleport-shadow: rgba(156, 197, 245, 0.75);
  --teleport-accent: rgba(247, 251, 255, 0.34);
}

@keyframes warp-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.18);
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

@keyframes teleport-particle {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.05);
    opacity: 0;
  }
}

@keyframes teleport-flash {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  35% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

@keyframes teleport-vortex {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.8);
  }

  25% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
    transform: rotate(210deg) scale(1.52);
  }
}

@keyframes cinematic-backdrop-shift {

  0%,
  100% {
    transform: scale(1) translate3d(0, 0, 0);
  }

  50% {
    transform: scale(1.05) translate3d(-1.8%, 0.8%, 0);
  }
}

@keyframes cinematic-card-rise {
  from {
    opacity: 0;
    transform: translate(-50%, -14px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes cinematic-particle-fall {
  0% {
    transform: translate3d(-50%, 0, 0) rotateX(4deg);
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    transform: translate3d(-50%, 126%, 48px) rotateX(22deg);
    opacity: 0;
  }
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(-50%, -6%, 0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: translate3d(calc(-50% + 14px), 124%, 40px) rotate(480deg);
    opacity: 0;
  }
}

@keyframes neon-grid-sweep {
  from {
    transform: perspective(900px) rotateX(66deg) translateY(28%) translateX(0);
  }

  to {
    transform: perspective(900px) rotateX(66deg) translateY(28%) translateX(-48px);
  }
}

@keyframes cinematic-slow-zoom {

  0%,
  100% {
    transform: perspective(1200px) rotateX(2deg) rotateY(-1deg) scale(1);
  }

  50% {
    transform: perspective(1200px) rotateX(3deg) rotateY(-2deg) scale(1.035);
  }
}

@keyframes dramatic-pulse {

  0%,
  100% {
    transform: perspective(1200px) rotateX(2deg) rotateY(-1deg);
    filter: saturate(1);
  }

  50% {
    transform: perspective(1200px) rotateX(2deg) rotateY(-1deg) scale(1.01);
    filter: saturate(1.12);
  }
}

@keyframes dramatic-bloom {

  0%,
  100% {
    filter: saturate(1);
    opacity: 0.86;
  }

  50% {
    filter: saturate(1.22);
    opacity: 1;
  }
}

@keyframes cinematic-chip-pulse {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px) scale(1.01);
  }
}

@keyframes universe-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-2%, -3%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes star-parallax {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(-8%, -12%, 0) scale(1.12);
  }
}

@keyframes aurora-shift {

  0%,
  100% {
    transform: translateX(0) scale(1);
  }

  50% {
    transform: translateX(-2%) scale(1.06);
  }
}

@keyframes bubble-rise {
  0% {
    transform: translateY(8%) scale(1);
  }

  100% {
    transform: translateY(-14%) scale(1.08);
  }
}

@keyframes caustic-shift {

  0%,
  100% {
    transform: translateX(0);
    opacity: 0.5;
  }

  50% {
    transform: translateX(-4%);
    opacity: 0.8;
  }
}

@keyframes scanline-shift {
  0% {
    transform: translateY(-4%);
  }

  100% {
    transform: translateY(4%);
  }
}

@keyframes neon-bloom {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.06);
    opacity: 0.85;
  }
}

@keyframes fog-swirl {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-2%, 2%, 0) scale(1.08);
  }
}

@keyframes snow-drift {
  0% {
    transform: translate3d(0, -4%, 0);
  }

  100% {
    transform: translate3d(-6%, 8%, 0);
  }
}

@keyframes fire-glow {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.04);
  }
}

@keyframes fullscreen-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(100, 180, 255, 0.35);
  }

  50% {
    box-shadow: 0 0 34px rgba(120, 208, 255, 0.5);
  }
}

.fun-room-panel:fullscreen,
.fun-room-panel:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 0;
}

.fun-room-panel:fullscreen .fun-room-layout,
.fun-room-panel:-webkit-full-screen .fun-room-layout {
  height: 100%;
}

.fun-room-panel:fullscreen .fun-grid,
.fun-room-panel:-webkit-full-screen .fun-grid {
  flex: 1;
  min-height: 0;
}

.fun-room-panel:fullscreen .fun-game-area,
.fun-room-panel:-webkit-full-screen .fun-game-area {
  min-height: clamp(360px, 64vh, 78vh);
}

.fun-room-panel:fullscreen .fun-toolbar-shell,
.fun-room-panel:-webkit-full-screen .fun-toolbar-shell,
.fun-room-panel:fullscreen .fun-toolbar,
.fun-room-panel:-webkit-full-screen .fun-toolbar {
  margin-top: auto;
}

body.teleport-fallback-fullscreen {
  overflow: hidden;
}

body.teleport-fallback-fullscreen .room-topbar,
body.teleport-fallback-fullscreen .room-sidebar,
body.teleport-fallback-fullscreen #studyToolbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
}

body.teleport-fallback-fullscreen .room-shell {
  grid-template-columns: 1fr;
  gap: 0;
  width: 100vw;
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.teleport-fallback-fullscreen .room-main {
  min-height: 100vh;
}

body.teleport-fallback-fullscreen #funPanel {
  position: fixed;
  inset: 0;
  z-index: 1400;
  max-width: none;
  margin: 0;
  border-radius: 0;
  padding: 1rem 1.25rem;
}

body.teleport-fallback-fullscreen #funPanel .fun-room-layout {
  height: 100%;
}

body.teleport-fallback-fullscreen #funPanel .fun-grid {
  flex: 1;
  min-height: 0;
}

body.teleport-fallback-fullscreen #funPanel .fun-game-area {
  min-height: clamp(360px, 64vh, 78vh);
}

body.teleport-fallback-fullscreen #funPanel .fun-toolbar-shell,
body.teleport-fallback-fullscreen #funPanel .fun-toolbar {
  margin-top: auto;
}

body.teleport-immersive .room-bg {
  opacity: 0.52;
  filter: saturate(1.2) blur(2px);
}

.tap-challenge,
.quiz-container,
.draw-container,
.song-game,
.this-that,
.memory-game,
.unlock-store {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 1rem;
}

.fun-watch-shell {
  width: min(920px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fun-watch-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(4, 10, 20, 0.92), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.fun-watch-video,
.fun-watch-iframe,
.fun-watch-yt-wrap {
  width: 100%;
  height: 100%;
}

.fun-watch-yt-wrap iframe,
.fun-watch-iframe {
  border: none;
}

.fun-watch-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d3e4ff;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  padding: 1rem;
}

.fun-watch-controls {
  padding: 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(9, 14, 29, 0.78), rgba(19, 16, 40, 0.72));
}

.fun-watch-input-row {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.fun-watch-input-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(4, 10, 22, 0.72);
  color: #eef5ff;
  border-radius: 12px;
  padding: 0.62rem 0.75rem;
  font-weight: 600;
}

.fun-watch-timeline-row {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(120px, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
}

.fun-watch-timeline-row .toolbar-icon-btn {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(9, 17, 36, 0.72);
  color: #f3f7ff;
}

.fun-watch-timeline-row .toolbar-icon-btn:hover {
  background: rgba(33, 55, 90, 0.82);
}

.fun-watch-timeline-row input[type="range"] {
  width: 100%;
  accent-color: #ff4ca0;
}

.fun-watch-clock {
  min-width: 74px;
  text-align: center;
  color: #e4eeff;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.fun-watch-status {
  margin-top: 0.55rem;
  color: #c8d9f3;
  font-size: 0.82rem;
  font-weight: 700;
}

.fun-watch-stage:fullscreen,
.fun-watch-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

@media (max-width: 760px) {
  .fun-watch-input-row {
    flex-wrap: wrap;
  }

  .fun-watch-input-row button {
    flex: 1;
    min-width: 120px;
  }

  .fun-watch-timeline-row {
    grid-template-columns: repeat(3, minmax(70px, 1fr));
  }

  .fun-watch-timeline-row input[type="range"] {
    grid-column: 1 / -1;
  }

  .fun-watch-clock {
    grid-column: span 2;
    text-align: left;
  }
}

.ai-options-grid {
  grid-template-columns: 1fr;
}

.ai-feature-btn {
  font-weight: 800;
}

.ai-lab-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 1.1rem 1.2rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(145deg, rgba(7, 16, 34, 0.74), rgba(20, 17, 43, 0.68));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ai-lab-shell h2 {
  margin-bottom: 0.4rem;
  font-size: 1.7rem;
}

.ai-lab-sub {
  margin-bottom: 0.9rem;
  color: #c4d4ea;
  font-weight: 600;
}

.ai-lab-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.ai-lab-controls label {
  color: #c8daef;
  font-size: 0.84rem;
  font-weight: 700;
}

.ai-lab-controls select,
.ai-story-form input {
  flex: 1;
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 20, 40, 0.66);
  color: #eff5ff;
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
  font-weight: 600;
}

.ai-story-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.ai-output-card,
.ai-story-stage,
.ai-story-pending {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(3, 11, 24, 0.55);
  padding: 0.85rem 0.95rem;
  color: #dbe9fb;
}

.ai-output-card {
  min-height: 98px;
}

.ai-roast-line {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #f7fbff;
  font-weight: 700;
}

.ai-roast-meta {
  margin-top: 0.55rem;
  color: #9fb8d6;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ai-story-status {
  font-size: 0.9rem;
  color: #d9e8fb;
  font-weight: 700;
  margin-bottom: 0.65rem;
}

.ai-story-pending {
  margin-bottom: 0.75rem;
  min-height: 56px;
}

.pending-line {
  font-size: 0.92rem;
  color: #d6e7ff;
  margin-bottom: 0.35rem;
}

.story-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ff8fcb;
  font-weight: 900;
  margin-bottom: 0.55rem;
}

.ai-story-stage p {
  margin-bottom: 0.58rem;
  color: #f3f8ff;
  line-height: 1.55;
}

.story-speaker {
  display: inline-block;
  margin-right: 0.35rem;
  color: #8cd0ff;
  font-weight: 900;
}

.story-ai-line {
  border-left: 3px solid #ff66b1;
  padding-left: 0.65rem;
  color: #ffd8ef !important;
  font-weight: 700;
}

.remix-title {
  font-size: 1.14rem;
  font-weight: 900;
  color: #f4f9ff;
  margin-bottom: 0.32rem;
}

.remix-meta,
.remix-moods {
  color: #cadef5;
  font-size: 0.9rem;
  font-weight: 700;
}

.remix-moods {
  margin-top: 0.45rem;
}

.remix-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.34rem;
  height: 44px;
  margin-top: 0.75rem;
}

.remix-bars span {
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5fa5, #7a6cff);
  transform-origin: bottom;
  animation: remix-bar 1.1s ease-in-out infinite;
  box-shadow: 0 6px 14px rgba(122, 108, 255, 0.35);
}

.remix-bars span:nth-child(2) {
  animation-delay: 0.14s;
}

.remix-bars span:nth-child(3) {
  animation-delay: 0.28s;
}

.remix-bars span:nth-child(4) {
  animation-delay: 0.42s;
}

.remix-bars span:nth-child(5) {
  animation-delay: 0.56s;
}

.remix-bars span:nth-child(6) {
  animation-delay: 0.7s;
}

.cinematic-pop {
  animation: cinematic-pop 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

.cinematic-reveal {
  animation: cinematic-reveal 540ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes remix-bar {

  0%,
  100% {
    transform: scaleY(0.28);
    opacity: 0.7;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes cinematic-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cinematic-reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.tap-big-btn {
  margin-top: 0.8rem;
  min-width: 150px;
  min-height: 64px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 900;
}

.tap-timer,
.tap-count {
  margin-top: 0.6rem;
  font-weight: 800;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.quiz-opt,
.song-opt,
.tt-opt {
  border: 1px solid var(--border);
  background: var(--bg-paper);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem;
  font-weight: 700;
}

/* Cinema contrast boost for low-emphasis labels */
body:not(.pookie-mode) .topbar-label,
body:not(.pookie-mode) .score-label,
body:not(.pookie-mode) .fun-panel-section h4,
body:not(.pookie-mode) .overlay-desc,
body:not(.pookie-mode) .guide-section p,
body:not(.pookie-mode) .extras-label {
  color: #b7c7d9;
}

.draw-controls {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.memory-seq {
  margin: 0.7rem 0;
  font-size: 1.5rem;
  letter-spacing: 0.25rem;
}

.fun-crowd-layer {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.fun-crowd-layer.active {
  opacity: 1;
}

.crowd-hype-banner {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(88%, 520px);
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: linear-gradient(140deg, rgba(255, 75, 168, 0.9), rgba(139, 91, 255, 0.88));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 16px 38px rgba(11, 18, 42, 0.35), 0 0 22px rgba(255, 107, 204, 0.5);
  backdrop-filter: blur(9px);
  animation: crowd-banner-pop 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.crowd-audience-wave {
  position: absolute;
  inset: auto 6% 9% 6%;
  height: 70px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 9% 50%, rgba(255, 255, 255, 0.4) 2px, transparent 8px),
    radial-gradient(circle at 28% 50%, rgba(255, 255, 255, 0.42) 2px, transparent 9px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.45) 3px, transparent 10px),
    radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.42) 2px, transparent 9px),
    radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.4) 2px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  filter: blur(0.2px) drop-shadow(0 0 12px rgba(255, 125, 200, 0.48));
  opacity: 0;
  animation: audience-wave-rise 1.15s ease-out forwards;
}

.crowd-confetti-piece {
  position: absolute;
  top: -10%;
  left: var(--x, 50%);
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, hsl(var(--h, 320deg) 95% 72%), hsl(var(--h, 320deg) 100% 58%));
  transform: translateX(-50%);
  animation: crowd-confetti-fall var(--dur, 2s) ease-in var(--delay, 0s) forwards;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.fun-hug-layer,
.fun-thought-layer,
.fun-confession-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fun-hug-layer {
  z-index: 15;
  opacity: 0;
  transition: opacity 220ms ease;
}

.fun-hug-layer.active {
  opacity: 1;
}

.fun-hug-layer.immersive {
  position: fixed;
  inset: 0;
  z-index: 1400;
}

.fun-thought-layer {
  z-index: 16;
}

.fun-confession-layer {
  z-index: 14;
}

.fun-hug-layer.active .hug-card {
  animation: hug-card-rise 2.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.hug-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 112, 192, 0.38), transparent 48%),
    radial-gradient(circle at 72% 68%, rgba(117, 156, 255, 0.34), transparent 52%),
    linear-gradient(165deg, rgba(14, 22, 40, 0.86), rgba(34, 18, 52, 0.72));
  animation: hug-backdrop-bloom 2.8s ease forwards;
}

.hug-stage-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(88vw, 880px);
  height: min(50vw, 420px);
  transform: translate(-50%, -50%);
  border-radius: 48%;
  background: radial-gradient(circle, rgba(255, 164, 221, 0.28), rgba(119, 165, 255, 0.06) 65%, transparent 84%);
  filter: blur(8px);
  opacity: 0;
  animation: hug-stage-pulse 2.8s ease forwards;
}

.hug-card {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.82rem 1.08rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(140deg, rgba(255, 190, 224, 0.52), rgba(180, 144, 255, 0.38));
  backdrop-filter: blur(9px);
  box-shadow: 0 16px 34px rgba(22, 8, 26, 0.28), 0 0 42px rgba(255, 118, 196, 0.2);
  opacity: 0;
}

.hug-card--immersive {
  top: 54%;
  border-radius: 26px;
  padding: 1.05rem 1.35rem;
  gap: 1.1rem;
  border-color: rgba(255, 224, 247, 0.5);
  background: linear-gradient(135deg, rgba(255, 210, 235, 0.36), rgba(171, 188, 255, 0.28));
  box-shadow: 0 24px 54px rgba(14, 10, 30, 0.45), 0 0 56px rgba(255, 126, 206, 0.28);
}

.hug-orbit {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(64vw, 360px);
  height: min(64vw, 360px);
  transform: translate(-50%, -50%) scale(0.65);
  border: 2px dashed rgba(255, 169, 210, 0.65);
  border-radius: 50%;
  opacity: 0;
  animation: hug-orbit-spin 2.8s ease-out forwards;
}

.hug-hearts {
  position: absolute;
  inset: 15% 10% auto 10%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  animation: hug-hearts-rise 2.6s ease-out forwards;
}

.hug-hearts span {
  font-size: 1.08rem;
  filter: drop-shadow(0 0 8px rgba(255, 95, 184, 0.45));
  animation: hug-heart-float 2.4s ease-out forwards;
}

.hug-hearts span:nth-child(2) {
  animation-delay: 0.06s;
}

.hug-hearts span:nth-child(3) {
  animation-delay: 0.12s;
}

.hug-hearts span:nth-child(4) {
  animation-delay: 0.18s;
}

.hug-hearts span:nth-child(5) {
  animation-delay: 0.24s;
}

.hug-wrap {
  position: relative;
  min-width: 62px;
  height: 40px;
  display: grid;
  place-items: center;
}

.hug-band {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 158, 213, 0.85), rgba(255, 103, 176, 0.9));
  opacity: 0.85;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 8px rgba(255, 97, 174, 0.42));
}

.hug-band.left {
  left: -14px;
  animation: hug-band-left 1.1s ease-in-out infinite;
}

.hug-band.right {
  right: -14px;
  animation: hug-band-right 1.1s ease-in-out infinite;
}

.hug-avatar {
  min-width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.hug-avatar span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, #ff4cae, #8c6cff);
}

.hug-avatar small {
  font-size: 0.73rem;
  font-weight: 800;
  color: #fff;
}

.hug-center {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 8px rgba(255, 83, 164, 0.52));
}

.hug-message {
  position: absolute;
  left: 50%;
  top: 74%;
  transform: translateX(-50%);
  font-size: 0.92rem;
  color: #fff2fa;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 106, 196, 0.55);
  opacity: 0;
  animation: hug-message-fade 2.8s ease-out forwards;
}

.thought-compose-card {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: min(92%, 430px);
  pointer-events: auto;
  border: 1px solid rgba(180, 209, 255, 0.5);
  border-radius: 16px;
  padding: 0.75rem 0.8rem;
  background: linear-gradient(145deg, rgba(14, 26, 44, 0.9), rgba(22, 35, 61, 0.88));
  box-shadow: 0 14px 30px rgba(7, 14, 28, 0.36);
}

.thought-compose-card p {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #d7e7ff;
}

.thought-compose-card form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.45rem;
}

.thought-compose-card input {
  border: 1px solid rgba(183, 211, 255, 0.42);
  border-radius: 12px;
  background: rgba(9, 18, 32, 0.72);
  color: #f3f8ff;
  font-weight: 700;
  padding: 0.48rem 0.55rem;
}

.thought-compose-card button {
  border-radius: 12px;
  border: 1px solid rgba(190, 212, 255, 0.42);
  padding: 0.48rem 0.68rem;
  background: rgba(40, 77, 130, 0.78);
  color: #fff;
  font-weight: 800;
}

.thought-bubble {
  position: absolute;
  bottom: 16%;
  max-width: min(320px, 78%);
  border: 1px solid rgba(210, 227, 255, 0.45);
  border-radius: 18px 18px 18px 6px;
  padding: 0.62rem 0.72rem;
  background: linear-gradient(145deg, rgba(235, 245, 255, 0.92), rgba(214, 232, 255, 0.9));
  color: #24384f;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(10, 30, 56, 0.2);
  animation: thought-float 5.6s ease forwards;
}

.thought-author {
  font-size: 0.66rem;
  color: #335370;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.2rem;
}

.confession-prompt-card {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: min(86%, 520px);
  padding: 0.9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(211, 203, 255, 0.36);
  background: linear-gradient(145deg, rgba(18, 20, 36, 0.76), rgba(27, 31, 60, 0.72));
  color: #f2f0ff;
  box-shadow: 0 18px 42px rgba(7, 10, 23, 0.45);
  backdrop-filter: blur(10px);
  animation: confession-card-rise 2.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.confession-kicker {
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(219, 212, 255, 0.8);
  font-weight: 800;
}

.confession-prompt-card p {
  margin: 0.48rem 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  font-weight: 700;
  color: #f6f2ff;
}

.floating-reaction {
  position: fixed;
  bottom: 12%;
  font-size: 2.1rem;
  animation: float-up 1.8s ease forwards;
  pointer-events: none;
  z-index: 200;
}

@keyframes float-up {
  from {
    transform: translateY(0) scale(0.9);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  to {
    transform: translateY(-160px) scale(1.25);
    opacity: 0;
  }
}

@keyframes crowd-banner-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.96);
  }

  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.98);
  }
}

@keyframes audience-wave-rise {
  0% {
    opacity: 0;
    transform: translateY(16px) scaleX(0.96);
  }

  25% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scaleX(1.03);
  }
}

@keyframes crowd-confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -4%, 0) rotate(0deg);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--dx, 0px)), 130%, 0) rotate(var(--rot, 300deg));
  }
}

@keyframes hug-card-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.9);
  }

  24% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -56%) scale(0.98);
  }
}

@keyframes hug-backdrop-bloom {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes hug-stage-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }

  26% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes hug-orbit-spin {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65) rotate(0deg);
  }

  30% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12) rotate(220deg);
  }
}

@keyframes hug-hearts-rise {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }

  22% {
    opacity: 0.95;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(1.02);
  }
}

@keyframes hug-heart-float {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.88);
  }

  25% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-24px) scale(1.05);
  }
}

@keyframes hug-band-left {

  0%,
  100% {
    transform: translateY(-50%) translateX(0) scaleX(1);
  }

  50% {
    transform: translateY(-50%) translateX(6px) scaleX(1.08);
  }
}

@keyframes hug-band-right {

  0%,
  100% {
    transform: translateY(-50%) translateX(0) scaleX(1);
  }

  50% {
    transform: translateY(-50%) translateX(-6px) scaleX(1.08);
  }
}

@keyframes hug-message-fade {

  0%,
  18% {
    opacity: 0;
  }

  30%,
  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes thought-float {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }

  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  84% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-54px) scale(1.02);
  }
}

@keyframes confession-card-rise {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
    filter: blur(1.2px);
  }

  26% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes confession-shimmer {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.66;
  }

  50% {
    transform: translate3d(-2%, 2%, 0);
    opacity: 1;
  }
}

@media (max-width: 1380px) {
  .fun-toolbar-shell {
    padding: 0.58rem 0.65rem;
    border-radius: 22px;
  }

  .fun-toolbar {
    gap: 0.65rem;
  }

  .toolbar-scroll-btn {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 980px) {
  .fun-toolbar-shell {
    padding: 0.5rem 0.55rem;
    gap: 0.38rem;
  }

  .fun-toolbar {
    gap: 0.55rem;
  }

  .fun-toolbar-slider {
    height: 4px;
  }

  .toolbar-scroll-btn {
    width: 30px;
    height: 30px;
  }

  .toolbar-icon-btn {
    padding: 0.54rem 0.88rem;
    font-size: 0.8rem;
  }

  .fun-center-actions,
  .toolbar-group {
    gap: 0.42rem;
  }
}

/* Chaos Effects */
.chaos-disco {
  animation: disco-bg 2s infinite !important;
}

@keyframes disco-bg {
  0% {
    background-color: rgba(255, 0, 110, 0.2);
  }

  25% {
    background-color: rgba(0, 255, 255, 0.2);
  }

  50% {
    background-color: rgba(255, 255, 0, 0.2);
  }

  75% {
    background-color: rgba(0, 255, 0, 0.2);
  }

  100% {
    background-color: rgba(255, 0, 110, 0.2);
  }
}

.chaos-shake {
  animation: screen-shake 0.3s infinite;
}

@keyframes screen-shake {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(2px, 2px);
  }

  50% {
    transform: translate(-2px, -2px);
  }

  75% {
    transform: translate(2px, -2px);
  }
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* === Game Instruction Panel & Transitions === */
.game-instruction-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: fadeInSmooth 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  max-width: 500px;
  margin: 0 auto;
}

.game-instruction-panel h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fff, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.game-instruction-panel p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.game-instruction-panel .btn-start-game {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(217, 70, 239, 0.3);
}

.game-instruction-panel .btn-start-game:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(217, 70, 239, 0.5);
}

.game-instruction-panel .btn-start-game:active {
  transform: translateY(0) scale(0.98);
}

.game-fade-in {
  animation: fadeInSmooth 0.4s ease forwards;
}

.game-fade-out {
  animation: fadeOutSmooth 0.3s ease forwards;
}

@keyframes fadeInSmooth {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutSmooth {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Love Lounge Mode */
.date-lounge-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 137, 193, 0.28);
  background:
    radial-gradient(900px circle at 8% -20%, rgba(255, 111, 174, 0.18), transparent 48%),
    radial-gradient(700px circle at 95% 110%, rgba(104, 156, 255, 0.22), transparent 42%),
    linear-gradient(160deg, #080d1f 0%, #121433 38%, #1f1430 72%, #2a1631 100%);
  box-shadow: 0 28px 72px rgba(6, 11, 25, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.date-lounge-panel::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 20deg,
      rgba(255, 142, 198, 0.14),
      rgba(127, 168, 255, 0.1),
      rgba(255, 142, 198, 0.14));
  filter: blur(56px);
  pointer-events: none;
  animation: date-aura-spin 22s linear infinite;
}

.date-lounge-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 24%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 72% 18%, rgba(194, 215, 255, 0.36), transparent),
    radial-gradient(1px 1px at 35% 78%, rgba(255, 190, 220, 0.35), transparent),
    radial-gradient(1px 1px at 87% 66%, rgba(204, 224, 255, 0.3), transparent);
  opacity: 0.55;
}

.date-panel-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.date-panel-header h2 {
  color: #ffe2f1;
}

.date-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.date-head-actions .room-jump-btn {
  margin-left: 0;
  border-color: rgba(255, 160, 212, 0.48);
  background: linear-gradient(130deg, rgba(58, 28, 64, 0.9), rgba(103, 39, 92, 0.86));
  color: #ffe7f5;
  box-shadow: 0 8px 18px rgba(89, 29, 77, 0.3);
}

.date-head-actions .room-jump-btn:hover {
  border-color: rgba(255, 196, 232, 0.82);
  box-shadow: 0 14px 24px rgba(130, 42, 112, 0.35);
}

.date-lounge-grid {
  position: relative;
  z-index: 1;
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 1rem;
}

.date-hero-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(255, 178, 220, 0.32);
  padding: 1.3rem;
  min-height: 440px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(152deg, rgba(20, 24, 49, 0.88), rgba(40, 26, 54, 0.82));
  box-shadow: 0 20px 45px rgba(10, 15, 29, 0.5);
}

.date-hero-card[data-scene="aurora"] {
  background:
    radial-gradient(500px circle at 15% 5%, rgba(71, 151, 255, 0.3), transparent 55%),
    radial-gradient(520px circle at 82% 98%, rgba(255, 126, 196, 0.28), transparent 56%),
    linear-gradient(152deg, rgba(18, 28, 62, 0.9), rgba(39, 22, 57, 0.86));
}

.date-hero-card[data-scene="moonlight"] {
  background:
    radial-gradient(440px circle at 90% 2%, rgba(171, 196, 255, 0.3), transparent 54%),
    radial-gradient(560px circle at 0% 95%, rgba(112, 154, 255, 0.24), transparent 58%),
    linear-gradient(152deg, rgba(12, 20, 42, 0.92), rgba(19, 28, 52, 0.9));
}

.date-hero-card[data-scene="candlelight"] {
  background:
    radial-gradient(400px circle at 14% 20%, rgba(255, 176, 104, 0.34), transparent 54%),
    radial-gradient(520px circle at 92% 84%, rgba(255, 120, 132, 0.28), transparent 54%),
    linear-gradient(150deg, rgba(38, 18, 25, 0.92), rgba(57, 28, 33, 0.9));
}

.date-hero-glow {
  position: absolute;
  inset: auto -10% -42% -10%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 146, 203, 0.36), rgba(145, 175, 255, 0.12) 56%, transparent 78%);
  filter: blur(14px);
  pointer-events: none;
  animation: date-glow-drift 7s ease-in-out infinite;
}

.date-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
}

.date-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255, 207, 232, 0.86);
}

.date-hero-content h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 2.7vw, 2.35rem);
  letter-spacing: 0.01em;
  color: #fff4fb;
}

.date-hero-content p {
  margin: 0;
  color: #fde7f6;
  font-size: 1.02rem;
  line-height: 1.45;
  max-width: 52ch;
}

.date-scene-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.58rem;
}

.date-scene-btn {
  border: 1px solid rgba(255, 197, 229, 0.32);
  background: rgba(13, 18, 34, 0.58);
  color: #f8e7f6;
  border-radius: 999px;
  padding: 0.5rem 0.84rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 220ms ease, background 220ms ease;
}

.date-scene-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 210, 238, 0.62);
  box-shadow: 0 8px 18px rgba(255, 139, 200, 0.22);
}

.date-scene-btn.active {
  border-color: rgba(255, 201, 234, 0.86);
  background: linear-gradient(132deg, rgba(255, 91, 177, 0.72), rgba(127, 141, 255, 0.62));
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 98, 177, 0.3);
}

.date-pulse-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.date-pulse-btn {
  border: 1px solid rgba(255, 168, 215, 0.32);
  border-radius: 14px;
  background: rgba(7, 10, 22, 0.5);
  color: #ffe5f5;
  padding: 0.68rem 0.76rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 220ms ease, background 220ms ease;
}

.date-pulse-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 194, 230, 0.68);
  background: rgba(77, 39, 83, 0.58);
  box-shadow: 0 14px 24px rgba(255, 113, 186, 0.24);
}

.date-side-stack {
  display: grid;
  gap: 1rem;
}

.date-card {
  border-radius: 18px;
  padding: 1rem;
  border: 1px solid rgba(169, 192, 255, 0.22);
  background: rgba(7, 14, 31, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.date-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.72rem;
}

.date-card h4 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: #f5efff;
}

.date-mini-label {
  border: 1px solid rgba(255, 197, 229, 0.34);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #ffcae8;
  background: rgba(66, 33, 73, 0.56);
}

.date-song-row,
.date-promise-row {
  display: flex;
  gap: 0.55rem;
}

.date-song-row input,
.date-promise-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(159, 189, 255, 0.26);
  border-radius: 12px;
  background: rgba(2, 7, 18, 0.7);
  color: #eaf4ff;
  padding: 0.62rem 0.74rem;
  font-size: 0.88rem;
}

.date-song-row input::placeholder,
.date-promise-row input::placeholder {
  color: rgba(200, 218, 255, 0.52);
}

.date-save-btn,
.date-open-btn {
  border: 1px solid rgba(255, 163, 220, 0.5);
  border-radius: 12px;
  background: linear-gradient(132deg, rgba(255, 90, 177, 0.82), rgba(128, 141, 255, 0.76));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0.58rem 0.82rem;
  transition: transform 180ms ease, box-shadow 220ms ease, filter 180ms ease;
}

.date-open-btn {
  background: rgba(18, 29, 53, 0.88);
  border-color: rgba(164, 187, 255, 0.42);
  color: #dce9ff;
}

.date-save-btn:hover,
.date-open-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(255, 90, 173, 0.26);
}

.date-open-btn:hover {
  box-shadow: 0 12px 20px rgba(90, 145, 255, 0.24);
}

.date-open-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.date-promise-list {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.58rem;
  max-height: 236px;
  overflow: auto;
}

.date-promise-list li {
  border: 1px solid rgba(169, 189, 245, 0.2);
  border-radius: 12px;
  padding: 0.62rem 0.72rem;
  background: rgba(8, 16, 35, 0.72);
}

.date-promise-list li span {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #97c8ff;
}

.date-promise-list li p {
  margin: 0.22rem 0 0;
  color: #e9f3ff;
  font-size: 0.88rem;
  line-height: 1.4;
}

.date-promise-empty {
  text-align: center;
  color: rgba(215, 229, 255, 0.62);
  font-size: 0.84rem;
  border-style: dashed !important;
}

.btn-break-date {
  border: 1px solid rgba(255, 172, 219, 0.55);
  border-radius: 999px;
  background: linear-gradient(130deg, rgba(126, 45, 101, 0.9), rgba(255, 83, 171, 0.82));
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 81, 169, 0.24);
}

.btn-break-date:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 206, 236, 0.82);
}

.btn-date-hero {
  border-color: rgba(255, 189, 228, 0.5);
  background: linear-gradient(135deg, rgba(255, 83, 172, 0.9), rgba(127, 143, 255, 0.76));
  color: #fff;
  box-shadow: 0 14px 28px rgba(255, 79, 166, 0.28);
}

.btn-date-hero:hover {
  filter: brightness(1.06);
}

body.pookie-mode .date-lounge-panel {
  border-color: rgba(255, 171, 224, 0.48);
  background:
    radial-gradient(900px circle at 8% -20%, rgba(255, 129, 198, 0.24), transparent 49%),
    radial-gradient(700px circle at 95% 110%, rgba(168, 200, 255, 0.26), transparent 44%),
    linear-gradient(160deg, #20122d 0%, #321a3e 42%, #3a1f45 72%, #50234f 100%);
}

@keyframes date-glow-drift {
  0%,
  100% {
    transform: translateX(-2%) scale(1);
    opacity: 0.88;
  }

  50% {
    transform: translateX(2%) scale(1.03);
    opacity: 1;
  }
}

@keyframes date-aura-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 1120px) {
  .date-lounge-grid {
    grid-template-columns: 1fr;
  }

  .date-hero-card {
    min-height: 390px;
  }
}

@media (max-width: 760px) {
  .date-head-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .date-pulse-row {
    grid-template-columns: 1fr;
  }

  .date-song-row,
  .date-promise-row {
    flex-direction: column;
  }
}