/* Shared editorial surfaces, including community and account controls. */
.app-shell { padding-top: 60px; }
.tabs { top: 60px; }
@media (min-width: 769px) {
  .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .tabs .tab { flex: 1 0 auto; justify-content: center; padding: 12px 8px; font-size: 15px; }
}
.site-controls { position: fixed; right: max(12px, calc((100vw - var(--max-w)) / 2)); top: 10px; z-index: 90; display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--ink-1); box-shadow: 0 4px 14px #0003; max-width: calc(100vw - 24px); }
.site-immersion-controls { display: flex; gap: 4px; align-items: center; }
.immersion-label { color: var(--paper-dim); font-size: 11px; margin: 0 5px; }
.migration-prompt { max-width: 540px; color: var(--paper); }
.migration-prompt p { line-height: 1.65; }
.migration-prompt .community-actions { margin-top: 20px; }
.migration-progress-list { list-style: none; padding: 14px; margin: 18px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--ink-0); font-size: 13px; color: var(--paper-dim); }
.migration-progress-list strong { color: var(--accent); }
.account-settings-link { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; }
.grammar-reference-details { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--ink-1); margin-top: 28px; padding: 20px; }
.grammar-reference-details > summary { cursor: pointer; color: var(--paper); font-size: 22px; }
.grammar-reference-details[open] > summary { margin-bottom: 22px; }
.immersion-help { position: relative; }
.immersion-help summary { display: grid; place-items: center; cursor: pointer; list-style: none; width: 28px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius-control); font-family: var(--mono); color: var(--accent); }
.immersion-help summary::-webkit-details-marker { display: none; }
.immersion-help p { position: absolute; top: 36px; right: -50px; margin: 0; width: min(320px, calc(100vw - 32px)); padding: 16px; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius-panel); color: var(--paper-dim); font-size: 13px; line-height: 1.6; box-shadow: 0 8px 24px #0005; }
.account-button { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu, .notification-menu { position: relative; min-width: 0; }
.account-dropdown, .notification-dropdown { position: absolute; top: 100%; right: 0; z-index: 120; min-width: 220px; max-width: min(380px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--ink-1); box-shadow: 0 12px 32px #0005; color: var(--paper); }
.account-dropdown > button { display: block; width: 100%; padding: 12px; color: var(--paper); background: none; border: 0; border-radius: var(--radius-control); text-align: left; font: 12px var(--mono); cursor: pointer; }
.account-dropdown > button:hover, .account-dropdown > button:focus-visible { background: var(--ink-2); color: var(--accent); }
.account-menu-status { padding: 10px 12px; font-size: 10px; color: var(--fg-mute); border-bottom: 1px solid var(--line); }
.account-inline { width: min(340px, calc(100vw - 42px)); max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; padding: 10px; }
.account-inline h2 { font-size: 23px; }
.account-inline p { font-size: 12px; }
.account-inline .community-actions { margin-top: 8px; }
.notification-trigger { position: relative; min-width: 36px; padding: 6px 9px; }
.notification-count { position: absolute; top: -5px; right: -5px; min-width: 16px; padding: 2px 4px; border-radius: 8px; background: var(--accent-warm); color: var(--ink-0); font: 9px var(--mono); }
.notification-dropdown { width: min(390px, calc(100vw - 24px)); max-height: 75vh; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.notification-dropdown h3 { margin: 0; font-size: 23px; }
.notification-dropdown .community-heading { align-items: center; }
.notification-dropdown .community-heading .btn { padding: 5px 7px; font-size: 10px; }
.notification-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.notification-delete-all-btn:not(:disabled):hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.notification-list { display: flex; flex-direction: column; margin-top: 14px; }
.notification-item-wrap { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.notification-item-wrap.is-embedded-srs { border-bottom: 1px solid var(--line-soft); }
.notification-item-wrap.is-embedded-srs:last-child { border-bottom: 0; }
.notification-item { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; width: 100%; padding: 12px 10px; text-align: left; border: 0; border-left: 2px solid transparent; color: var(--paper); background: none; cursor: pointer; }
.notification-item.is-unread { border-left-color: var(--accent); background: var(--ink-2); }
.notification-item:hover { background: var(--ink-3); }
.notification-item strong { font-size: 12px; }
.notification-item span { color: var(--paper-dim); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.notification-item time { font: 10px var(--mono); color: var(--fg-dim); }
.notification-delete-btn { flex-shrink: 0; display: grid; place-items: center; width: 32px; background: none; border: 0; color: var(--fg-dim); font: 12px var(--mono); cursor: pointer; transition: color 0.15s, background 0.15s; }
.notification-delete-btn:hover { color: var(--accent-warm); background: rgba(244, 63, 94, 0.12); }
.notification-srs-stack { border-bottom: 1px solid var(--line); border-left: 2px solid transparent; background: var(--ink-0); }
.notification-srs-stack.has-unread { border-left-color: var(--accent); background: var(--ink-2); }
.notification-srs-stack-head { display: flex; align-items: stretch; gap: 4px; }
.notification-srs-toggle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 12px 10px; text-align: left; background: none; border: 0; color: var(--paper); cursor: pointer; }
.notification-srs-toggle:hover { background: var(--ink-3); }
.notification-srs-toggle-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notification-srs-toggle-top strong { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.notification-srs-badge { padding: 1px 6px; border-radius: 999px; background: rgba(56, 189, 248, 0.18); border: 1px solid rgba(56, 189, 248, 0.45); color: var(--accent); font: 9px var(--mono); }
.notification-srs-chevron { font: 11px var(--mono); color: var(--fg-mute); }
.notification-srs-summary { color: var(--paper-dim); font-size: 12px; line-height: 1.45; }
.notification-srs-toggle time { font: 10px var(--mono); color: var(--fg-dim); }
.notification-srs-stack-actions { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.notification-srs-go-btn { padding: 4px 8px; font-size: 10px; }
.notification-srs-embedded-list { max-height: 240px; overflow-y: auto; border-top: 1px dashed var(--line); background: var(--ink-0); padding-left: 8px; }
.shop-modal-sheet { overscroll-behavior: contain; }
.immersion-cue { color: var(--fg-mute); font-style: italic; }
.reference-shell { width: 100%; }
.reference-shell .learn-lexicon-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reference-shell .learn-conj-table { display: block; overflow-x: auto; }
.community-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.community-heading h2 { margin: 0 0 12px; }
.community-muted { font-size: 13px; color: var(--fg-mute); line-height: 1.6; }
.community-error { color: var(--accent-warm); font-size: 13px; line-height: 1.5; }
.community-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.community-field { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; font: 12px var(--mono); color: var(--paper-dim); flex: 1; min-width: 0; }
.community-field .field { width: 100%; min-width: 0; }
.account-panel { max-width: 520px; color: var(--paper); }
.account-panel p { line-height: 1.6; }
.account-panel form { margin-top: 16px; }
.account-panel .community-actions { margin-top: 18px; }
.chat-room { max-width: 1080px; margin: 0 auto; padding-bottom: 16px; }
.chat-room .page-title { margin: 6px 0; }
.chat-history { min-height: 260px; height: min(54vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; margin: 20px -12px 0; padding: 4px 12px; border-block: 1px solid var(--line); }
.chat-empty { padding: 70px 16px; text-align: center; color: var(--fg-mute); font-family: var(--serif); font-size: 22px; }
.chat-message { padding: 16px 0; }
.chat-message-group { padding: 14px 0; }
.chat-message-entry { position: relative; margin-left: 28px; padding: 4px 6px 4px 4px; border-radius: var(--radius-control); transition: background 0.25s; }
.chat-message-entry.is-highlighted { background: rgba(56, 189, 248, 0.14); outline: 1px solid rgba(56, 189, 248, 0.45); }
.chat-message-entry + .chat-message-entry { margin-top: 4px; }
.chat-entry-actions { float: right; display: flex; align-items: center; gap: 4px; padding-top: 2px; margin-left: 8px; color: var(--fg-dim); font: 10px var(--mono); }
.chat-entry-actions time { opacity: 0; transition: opacity 0.15s; }
.chat-message-entry:hover .chat-entry-actions time, .chat-message-entry:focus-within .chat-entry-actions time { opacity: 1; }
.chat-action-btn, .chat-delete { background: none; color: var(--fg-mute); border: 1px solid transparent; border-radius: 4px; cursor: pointer; padding: 2px 6px; font: 11px var(--mono); transition: all 0.15s; }
.chat-action-btn:hover, .chat-action-btn.is-active { color: var(--accent); border-color: var(--line); background: var(--ink-2); }
.chat-delete:hover { color: var(--accent-warm); border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.1); }
/* Reduced nameplate glow in Global Chat (~60% of full Leaderboard intensity): keeps vibrant aura, shimmer & pulse while staying comfortable to read in chat */
.chat-room .seamenese-nameplate.np-style-default { text-shadow: none; box-shadow: none; }
.chat-room .np-style-cyan-glow {
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.7);
  box-shadow: 0 0 9px rgba(34, 211, 238, 0.3), inset 0 0 5px rgba(34, 211, 238, 0.2);
  animation: npCyanSonarChat 2.8s ease-in-out infinite;
}
.chat-room .np-style-gold-shimmer {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 7px rgba(250, 204, 21, 0.65);
  box-shadow: 0 2px 0 #713f12, 0 0 11px rgba(234, 179, 8, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.chat-room .np-style-hellfire {
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 -2px 7px rgba(249, 115, 22, 0.7), 0 -3px 12px rgba(225, 29, 72, 0.6);
  box-shadow: 0 0 11px rgba(234, 88, 12, 0.48), 0 -3px 16px rgba(225, 29, 72, 0.38), inset 0 -2px 6px rgba(253, 224, 71, 0.35);
  animation: npHellfirePulseChat 1.4s ease-in-out infinite alternate;
}
.chat-room .np-style-prismatic {
  text-shadow: -1px 0 1px rgba(0, 245, 212, 0.75), 1px 0 1px rgba(255, 0, 127, 0.75), 0 0 8px rgba(255, 255, 255, 0.68), 0 0 13px rgba(217, 70, 239, 0.62);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.38), 0 0 12px rgba(232, 121, 249, 0.42), 0 0 20px rgba(34, 211, 238, 0.28), inset 0 0 8px rgba(255, 255, 255, 0.26);
}
.chat-room .np-style-celestial {
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.85), 0 0 9px rgba(253, 224, 71, 0.72), 0 0 16px rgba(232, 121, 249, 0.6), 0 0 22px rgba(56, 189, 248, 0.48);
  box-shadow: 0 0 0 1px rgba(232, 121, 249, 0.5), 0 0 10px rgba(250, 204, 21, 0.52), 0 0 18px rgba(217, 70, 239, 0.4), inset 0 0 8px rgba(253, 224, 71, 0.38);
  animation: npCelestialSovereignChat 2.8s ease-in-out infinite;
}
@keyframes npCyanSonarChat {
  0%, 100% { box-shadow: 0 0 7px rgba(34, 211, 238, 0.24), inset 0 0 4px rgba(34, 211, 238, 0.16); }
  50% { box-shadow: 0 0 12px rgba(34, 211, 238, 0.48), 0 0 18px rgba(6, 182, 212, 0.22), inset 0 0 7px rgba(34, 211, 238, 0.26); }
}
@keyframes npHellfirePulseChat {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 9px rgba(234, 88, 12, 0.4), 0 -2px 13px rgba(225, 29, 72, 0.32), inset 0 -2px 5px rgba(253, 224, 71, 0.28);
  }
  100% {
    transform: translateY(-0.5px) scale(1.01);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.62), 0 -4px 20px rgba(244, 63, 94, 0.5), inset 0 -3px 8px rgba(253, 224, 71, 0.48);
  }
}
@keyframes npCelestialSovereignChat {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      0 0 0 1px rgba(232, 121, 249, 0.45),
      0 0 9px rgba(250, 204, 21, 0.46),
      0 0 16px rgba(217, 70, 239, 0.35),
      inset 0 0 7px rgba(253, 224, 71, 0.32);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 0 0 1.5px rgba(56, 189, 248, 0.58),
      0 0 14px rgba(250, 204, 21, 0.65),
      0 0 22px rgba(232, 121, 249, 0.5),
      inset 0 0 10px rgba(255, 255, 255, 0.45);
  }
}
.chat-reply-quote { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 4px 0 2px; padding: 3px 8px; border-left: 2px solid var(--accent); border-radius: 3px; background: var(--ink-0); color: var(--fg-mute); font-size: 12px; text-align: left; cursor: pointer; overflow: hidden; }
.chat-reply-quote:hover { color: var(--paper); background: var(--ink-2); }
.chat-reply-icon { color: var(--accent); font-family: var(--mono); flex-shrink: 0; }
.chat-reply-author { color: var(--accent); font-family: var(--mono); font-size: 11px; flex-shrink: 0; }
.chat-reply-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper-dim); }
.chat-replying-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border: 1px solid rgba(56, 189, 248, 0.4); border-left: 3px solid var(--accent); border-radius: var(--radius-control); background: var(--ink-0); font-size: 12px; color: var(--paper-dim); }
.chat-replying-info { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.chat-replying-info strong { color: var(--accent); flex-shrink: 0; }
.chat-replying-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-mute); }
.chat-replying-cancel { padding: 2px 7px; font-size: 11px; }
.chat-edited-tag { font: 10px var(--mono); color: var(--fg-dim); margin-left: 4px; }
.chat-edit-box { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.chat-edit-textarea { width: 100%; resize: vertical; min-height: 58px; }
.chat-edit-actions { display: flex; align-items: center; gap: 8px; }
.chat-reactions-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-reaction-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-0); color: var(--paper-dim); font-size: 13px; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.chat-reaction-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
.chat-reaction-pill.is-mine { border-color: var(--accent); background: rgba(56, 189, 248, 0.14); color: var(--paper); }
.chat-reaction-count { font-size: 11px; font-weight: 700; }
.chat-reaction-add-pill { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border-radius: 999px; border: 1px dashed var(--line); background: var(--ink-0); color: var(--fg-mute); font: 13px var(--mono); cursor: pointer; }
.chat-reaction-add-pill:hover { border-color: var(--accent); color: var(--accent); }
/* Discord-style Super Reactions: one-shot unique entrance animation on first view (resets when reopening chat) */
.chat-reaction-pill.is-super { position: relative; font-weight: 700; color: #fff; overflow: visible; }
.chat-reaction-pill.is-super .chat-reaction-emoji { display: inline-block; transform-origin: center; }
.chat-super-sparkle { font-size: 10px; color: #fde047; opacity: 0.85; }
.chat-reaction-pill.is-super.is-spawning .chat-super-sparkle { animation: superSparklePop 1.1s ease-out 1; }
.chat-super-spawn-particles { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.chat-super-particle { position: absolute; left: 32%; top: 20%; font-size: 11px; opacity: 0; pointer-events: none; }
.chat-super-particle.p-0 { animation: superParticleLeft 1.05s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards; }
.chat-super-particle.p-1 { animation: superParticleUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.06s 1 forwards; }
.chat-super-particle.p-2 { animation: superParticleRight 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.12s 1 forwards; }
/* 12 Super Reaction Themes */
.chat-reaction-pill.super-anim-wave { border-color: #22d3ee; background: linear-gradient(135deg, rgba(6, 182, 212, 0.26), rgba(2, 132, 199, 0.32)); box-shadow: 0 0 8px rgba(34, 211, 238, 0.25); }
.chat-reaction-pill.super-anim-fish { border-color: #facc15; background: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(161, 98, 7, 0.34)); box-shadow: 0 0 8px rgba(250, 204, 21, 0.28); }
.chat-reaction-pill.super-anim-party { border-color: #fbbf24; background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(236, 72, 153, 0.28)); box-shadow: 0 0 8px rgba(251, 191, 36, 0.28); }
.chat-reaction-pill.super-anim-heart { border-color: #fb7185; background: linear-gradient(135deg, rgba(244, 63, 94, 0.32), rgba(217, 70, 239, 0.28)); box-shadow: 0 0 8px rgba(251, 113, 133, 0.3); }
.chat-reaction-pill.super-anim-fire { border-color: #fb923c; background: linear-gradient(135deg, rgba(234, 88, 12, 0.32), rgba(225, 29, 72, 0.34)); box-shadow: 0 0 9px rgba(249, 115, 22, 0.32); }
.chat-reaction-pill.super-anim-crown { border-color: #fde047; background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(234, 179, 8, 0.34)); box-shadow: 0 0 9px rgba(250, 204, 21, 0.32); }
.chat-reaction-pill.super-anim-gem { border-color: #67e8f9; background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(139, 92, 246, 0.34)); box-shadow: 0 0 9px rgba(103, 232, 249, 0.32); }
.chat-reaction-pill.super-anim-bolt { border-color: #38bdf8; background: linear-gradient(135deg, rgba(236, 72, 153, 0.32), rgba(56, 189, 248, 0.35)); box-shadow: 0 0 9px rgba(56, 189, 248, 0.32); }
.chat-reaction-pill.super-anim-octopus { border-color: #c084fc; background: linear-gradient(135deg, rgba(126, 34, 206, 0.38), rgba(14, 116, 144, 0.36)); box-shadow: 0 0 10px rgba(192, 132, 252, 0.34); }
.chat-reaction-pill.super-anim-galaxy { border-color: #e879f9; background: linear-gradient(135deg, rgba(88, 28, 135, 0.45), rgba(2, 132, 199, 0.4), rgba(234, 179, 8, 0.3)); box-shadow: 0 0 10px rgba(232, 121, 249, 0.36); }
.chat-reaction-pill.super-anim-rocket { border-color: #60a5fa; background: linear-gradient(135deg, rgba(37, 99, 235, 0.36), rgba(249, 115, 22, 0.34)); box-shadow: 0 0 10px rgba(96, 165, 250, 0.36); }
.chat-reaction-pill.super-anim-dragon { border-color: #f43f5e; background: linear-gradient(135deg, rgba(190, 18, 60, 0.42), rgba(234, 88, 12, 0.38), rgba(250, 204, 21, 0.28)); box-shadow: 0 0 11px rgba(244, 63, 94, 0.38); }
/* Unique one-shot spawn animations per Super Reaction */
.chat-reaction-pill.is-spawning { animation: superPillPop 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-wave.is-spawning .chat-reaction-emoji { animation: spawnWaveSurf 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-fish.is-spawning .chat-reaction-emoji { animation: spawnFishFlip 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-party.is-spawning .chat-reaction-emoji { animation: spawnPartyClink 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-heart.is-spawning .chat-reaction-emoji { animation: spawnHeartBeat 1.1s ease-in-out 1; }
.chat-reaction-pill.super-anim-fire.is-spawning .chat-reaction-emoji { animation: spawnFireErupt 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-crown.is-spawning .chat-reaction-emoji { animation: spawnCrownDrop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
.chat-reaction-pill.super-anim-gem.is-spawning .chat-reaction-emoji { animation: spawnGemFacet 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-bolt.is-spawning .chat-reaction-emoji { animation: spawnBoltStrike 1.05s ease-out 1; }
.chat-reaction-pill.super-anim-octopus.is-spawning .chat-reaction-emoji { animation: spawnKrakenRise 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-galaxy.is-spawning .chat-reaction-emoji { animation: spawnGalaxySpiral 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-rocket.is-spawning .chat-reaction-emoji { animation: spawnRocketLaunch 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.chat-reaction-pill.super-anim-dragon.is-spawning .chat-reaction-emoji { animation: spawnDragonSwoop 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1; }
@keyframes superPillPop {
  0% { transform: scale(0.82); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes superSparklePop {
  0% { transform: scale(0.5) rotate(0deg); opacity: 0.4; }
  50% { transform: scale(1.45) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 0.85; }
}
@keyframes superParticleLeft {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  70% { opacity: 0.95; }
  100% { transform: translate(-18px, -22px) scale(1.05) rotate(-18deg); opacity: 0; }
}
@keyframes superParticleUp {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  70% { opacity: 0.95; }
  100% { transform: translate(2px, -28px) scale(1.15) rotate(12deg); opacity: 0; }
}
@keyframes superParticleRight {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  70% { opacity: 0.95; }
  100% { transform: translate(19px, -20px) scale(1.05) rotate(22deg); opacity: 0; }
}
@keyframes spawnWaveSurf {
  0% { transform: translateX(-12px) translateY(6px) scale(0.3) rotate(-25deg); opacity: 0; }
  45% { transform: translateX(3px) translateY(-6px) scale(1.45) rotate(12deg); opacity: 1; }
  75% { transform: translateX(-2px) translateY(2px) scale(0.95) rotate(-5deg); }
  100% { transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
}
@keyframes spawnFishFlip {
  0% { transform: translateY(12px) scale(0.3) rotate(0deg); opacity: 0; }
  45% { transform: translateY(-11px) scale(1.45) rotate(195deg); opacity: 1; }
  75% { transform: translateY(2px) scale(1.08) rotate(345deg); }
  100% { transform: translateY(0) scale(1) rotate(360deg); }
}
@keyframes spawnPartyClink {
  0% { transform: scale(0.3) rotate(-35deg); opacity: 0; }
  35% { transform: scale(1.42) rotate(22deg); opacity: 1; }
  65% { transform: scale(1.18) rotate(-16deg); }
  85% { transform: scale(1.06) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes spawnHeartBeat {
  0% { transform: scale(0.2); opacity: 0; }
  28% { transform: scale(1.5); opacity: 1; }
  48% { transform: scale(0.88); }
  68% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes spawnFireErupt {
  0% { transform: translateY(10px) scale(0.25, 0.5); opacity: 0; filter: brightness(1.8); }
  45% { transform: translateY(-8px) scale(1.35, 1.55) rotate(-8deg); opacity: 1; }
  75% { transform: translateY(-2px) scale(1.1, 0.92) rotate(6deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); filter: brightness(1); }
}
@keyframes spawnCrownDrop {
  0% { transform: translateY(-18px) scale(1.5) rotate(-14deg); opacity: 0; }
  50% { transform: translateY(3px) scale(1.25) rotate(6deg); opacity: 1; }
  75% { transform: translateY(-4px) scale(1.08) rotate(-3deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes spawnGemFacet {
  0% { transform: scale(0.2) rotate(-180deg); opacity: 0; filter: brightness(2); }
  55% { transform: scale(1.45) rotate(20deg); opacity: 1; }
  80% { transform: scale(0.94) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}
@keyframes spawnBoltStrike {
  0% { transform: translateY(-16px) translateX(6px) scale(1.6); opacity: 0; filter: brightness(2.2); }
  25% { transform: translateY(2px) translateX(-4px) scale(1.35); opacity: 1; }
  45% { transform: translateY(-2px) translateX(4px) scale(1.25); }
  65% { transform: translateY(1px) translateX(-2px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}
@keyframes spawnKrakenRise {
  0% { transform: translateY(14px) scale(0.35, 0.2); opacity: 0; }
  45% { transform: translateY(-6px) scale(1.3, 1.45) rotate(-12deg); opacity: 1; }
  70% { transform: translateY(2px) scale(1.12, 0.9) rotate(10deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes spawnGalaxySpiral {
  0% { transform: scale(0.1) rotate(-540deg); opacity: 0; }
  60% { transform: scale(1.45) rotate(25deg); opacity: 1; }
  82% { transform: scale(0.92) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes spawnRocketLaunch {
  0% { transform: translate(-12px, 12px) scale(0.35) rotate(-25deg); opacity: 0; }
  50% { transform: translate(7px, -10px) scale(1.42) rotate(12deg); opacity: 1; }
  78% { transform: translate(-2px, 2px) scale(0.95) rotate(-4deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes spawnDragonSwoop {
  0% { transform: translate(-14px, -10px) scale(0.3) rotate(-30deg); opacity: 0; }
  40% { transform: translate(4px, -5px) scale(1.52) rotate(14deg); opacity: 1; }
  70% { transform: translate(-2px, 2px) scale(1.15) rotate(-8deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
.chat-super-quota-banner { padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(250, 204, 21, 0.3); background: rgba(250, 204, 21, 0.08); font: 11px var(--mono); color: var(--paper-dim); }
.chat-super-quota-banner strong { color: #fde047; }
.chat-reaction-popover { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--ink-0); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.chat-reaction-popover-section { display: flex; flex-direction: column; gap: 6px; }
.chat-reaction-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 11px var(--mono); color: var(--fg-mute); }
.chat-reaction-shop-link { background: none; border: 0; color: var(--accent); font: 11px var(--mono); cursor: pointer; padding: 0; }
.chat-reaction-shop-link:hover { text-decoration: underline; }
.chat-super-reaction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 6px; }
.chat-super-reaction-option { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--ink-1); color: var(--paper); font-size: 11px; cursor: pointer; text-align: left; transition: all 0.15s; }
.chat-super-reaction-option.is-unlocked { border-color: rgba(250, 204, 21, 0.45); background: linear-gradient(135deg, rgba(250, 204, 21, 0.1), rgba(56, 189, 248, 0.1)); }
.chat-super-reaction-option.is-unlocked:hover { border-color: #fde047; transform: translateY(-1px); box-shadow: 0 0 12px rgba(250, 204, 21, 0.28); }
.chat-super-reaction-option.is-locked { opacity: 0.65; }
.chat-super-reaction-option.is-locked:hover { opacity: 0.95; border-color: var(--accent); }
.chat-super-emoji { font-size: 16px; flex-shrink: 0; }
.chat-super-label { font-family: var(--mono); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-standard-reaction-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-reaction-option { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--ink-1); font-size: 17px; cursor: pointer; transition: transform 0.12s, background 0.12s; }
.chat-reaction-option:hover:not(:disabled) { background: var(--ink-2); border-color: var(--accent); transform: scale(1.12); }
.chat-reaction-option:disabled { opacity: 0.35; cursor: not-allowed; }
.chat-mention { color: var(--accent); background: var(--ink-3); padding: 1px 3px; border-radius: var(--radius-control); font-weight: 600; }
.chat-mention-options { border: 1px solid var(--line); background: var(--ink-0); border-radius: var(--radius-control); padding: 4px; margin: -6px 0 12px; max-height: 210px; overflow-y: auto; }
.chat-mention-options button { display: flex; justify-content: space-between; gap: 14px; width: 100%; padding: 10px; border: 0; color: var(--paper); background: none; text-align: left; cursor: pointer; }
.chat-mention-options button[aria-selected="true"], .chat-mention-options button:hover { background: var(--ink-2); }
.chat-mention-options span { color: var(--fg-mute); font: 11px var(--mono); }
.chat-message-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chat-message-meta strong { font-size: 13px; overflow-wrap: anywhere; }
.chat-title { color: var(--fg-mute); font: 11px var(--mono); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-guest { color: var(--fg-dim); font: 10px var(--mono); }
.chat-message-meta time { margin-left: auto; color: var(--fg-dim); font: 10px var(--mono); }
.chat-message-text { color: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; margin: 8px 0 0; }
.chat-embeds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.chat-embed { max-width: 340px; width: min(100%, 340px); padding: 10px; border: 1px solid var(--line); background: var(--ink-0); border-radius: var(--radius-control); overflow: hidden; }
.chat-embed img { max-width: 100%; max-height: 220px; display: block; object-fit: contain; border-radius: var(--radius-control); }
.chat-embed iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.chat-link { display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; padding-top: 6px; font: 11px var(--mono); color: var(--accent); }
.chat-link span { color: var(--fg-mute); }
.chat-composer { padding-top: 16px; }
.chat-composer-identity { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.chat-composer textarea { resize: vertical; min-height: 90px; max-height: 280px; }
.chat-count { margin-left: auto; color: var(--fg-dim); font-size: 11px; }
.chat-emoji-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.chat-emoji-picker button { font-size: 20px; padding: 5px 8px; }
.chat-check { font-size: 12px; color: var(--paper-dim); line-height: 1.6; }
.chat-check.is-ok { color: var(--conf-confirmed); }
.chat-confirm { padding: 12px; border: 1px solid var(--accent-warm); border-radius: var(--radius-control); font-size: 13px; }
@media (max-width: 600px) {
  .site-controls { right: 8px; left: 8px; top: 8px; justify-content: space-between; max-width: none; }
  .site-controls .btn { padding: 7px 9px; font-size: 11px; }
  .account-button { max-width: 48%; }
  .account-menu { flex: 1; }
  .account-menu .account-button { width: 100%; max-width: 140px; }
  .site-immersion-controls { gap: 2px; }
  .immersion-label { font-size: 10px; margin: 0 3px; }
  .notification-dropdown { position: fixed; top: 58px; right: 12px; }
  .account-dropdown { position: fixed; top: 58px; right: 12px; }
  .immersion-help p { position: fixed; top: 60px; right: 16px; }
  .chat-room { padding: 14px; }
  .chat-message-meta { gap: 6px; }
  .chat-message-entry { margin-left: 20px; }
  .chat-title { max-width: 160px; font-size: 10px; }
  .chat-history { height: 45vh; }
}
/* Scene Generation Progress Toast & Notification Dropdown Item */
.toast.toast-scene-gen {
  min-width: 310px;
  max-width: 380px;
  border-left: 3px solid var(--accent);
  cursor: default;
  flex-direction: column;
  gap: 8px;
}
.toast.toast-scene-gen.is-complete {
  border-left-color: var(--conf-confirmed);
}
.toast-scene-gen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.toast-scene-gen-pct {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.toast.toast-scene-gen.is-complete .toast-scene-gen-pct {
  color: var(--conf-confirmed);
}
.toast-close-btn {
  background: none;
  border: 0;
  color: var(--fg-dim);
  font: 12px var(--mono);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.toast-close-btn:hover {
  color: var(--paper);
  background: var(--ink-3);
}
.toast-scene-gen-stage {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--paper);
  line-height: 1.35;
}
.toast-scene-gen-detail {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  line-height: 1.45;
}
.toast-progress-track,
.notification-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: var(--ink-0);
  border: 1px solid var(--line);
  overflow: hidden;
}
.toast-progress-fill,
.notification-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #34d399);
  transition: width 0.35s ease;
}
.notification-scene-gen-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--ink-2);
}
.notification-scene-gen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notification-scene-gen-top strong {
  font-size: 12px;
  color: var(--paper);
}
.notification-scene-gen-pct {
  font: 700 11px var(--mono);
  color: var(--accent);
}
.notification-scene-gen-stage {
  font-size: 12px;
  color: var(--paper);
  line-height: 1.4;
}
.notification-scene-gen-detail {
  font: 11px var(--mono);
  color: var(--paper-dim);
  line-height: 1.4;
}
.learn-gen-btn {
  position: relative;
  overflow: hidden;
}
.learn-gen-btn-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
  transition: width 0.35s ease;
}
.learn-gen-btn-label {
  position: relative;
  z-index: 1;
}