:root {
  color-scheme: light;
  --bg: #eef1ec;
  --ink: #111111;
  --muted: #687169;
  --line: #d7ddd4;
  --paper: #fffefa;
  --paper-strong: #ffffff;
  --wechat: #8ee36b;
  --red: #c7362f;
  --gold: #c48b2c;
  --blue: #245d72;
  --night: #101522;
  --green: #2d774a;
  --shadow: 0 16px 42px rgba(17, 17, 17, 0.12);
}

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

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 15% 0%, #fff6df 0, transparent 32%), linear-gradient(180deg, #f9faf5 0%, var(--bg) 100%);
  color: var(--ink);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  max-width: 580px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 14px 92px;
}

.app-shell.is-chat-open {
  padding: 0;
}

.app-shell.is-chat-open .tabbar {
  display: none;
}

.topbar,
.section-head,
.chat-header,
.action-row,
.filter-row,
.toggle-row,
.card-title-row,
.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.topbar {
  display: none;
  padding: 4px 2px 12px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 4px;
  font-size: 26px;
  line-height: 1.08;
}

h2 {
  margin-bottom: 4px;
  font-size: 23px;
  line-height: 1.15;
}

h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.slogan,
.empty-copy,
.privacy-note p,
.settings-panel p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.6;
}

.plus-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #151515;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: var(--shadow);
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.chat-card,
.input-panel,
.reply-panel,
.settings-panel,
.privacy-note,
.memory-card,
.tool-panel,
.report-panel,
.galaxy-detail {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 14px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
}

.chat-card {
  min-height: calc(100vh - 142px);
  display: flex;
  flex-direction: column;
  background: #f3f5f0;
}

.app-shell.is-chat-open .chat-card {
  position: relative;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 12px 0 0;
  background: #111312;
  box-shadow: none;
}

.dialog-header {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 58px;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: #111312;
  color: #e9e9e9;
}

.dialog-header h2 {
  margin: 0;
  overflow: hidden;
  color: #e9e9e9;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.back-button,
.more-button {
  height: 54px;
  border: 0;
  background: transparent;
  color: #e9e9e9;
  font-weight: 400;
  line-height: 1;
}

.back-button {
  font-size: 34px;
}

.more-button {
  font-size: 24px;
  letter-spacing: 1px;
}

.more-panel {
  position: absolute;
  top: 58px;
  right: 10px;
  z-index: 8;
  width: 170px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #252726;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

.more-item {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: #f2f2f2;
  padding: 0 14px;
  text-align: left;
  font-weight: 800;
}

.more-item:last-child {
  border-bottom: 0;
}

.more-item:active {
  background: #313433;
}

.wechat-home {
  position: relative;
  min-height: calc(100vh - 86px);
  margin: -16px -14px 0;
  padding: 12px 0 96px;
  background: #111312;
  color: #f1f1f1;
}

.wechat-home-top {
  position: relative;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.wechat-home-top h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  color: #e9e9e9;
}

.wechat-top-icon {
  position: absolute;
  right: 26px;
  width: 34px;
  height: 34px;
  border: 2px solid #d6d6d6;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #e9e9e9;
  font-size: 28px;
  line-height: 1;
  padding: 0;
}

.wechat-search {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px 14px;
  padding: 0 16px;
  border-radius: 4px;
  background: #191b1a;
  color: #686a69;
}

.wechat-search span {
  font-size: 28px;
  line-height: 1;
}

.wechat-search input {
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #dadada;
  font-size: 20px;
  padding: 0;
}

.wechat-search input::placeholder {
  color: #6c6d6d;
}

.thread-list {
  background: #111312;
}

.thread-row {
  width: 100%;
  height: 90px;
  display: grid;
  grid-template-columns: 74px 1fr 64px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 18px 0 20px;
  background: transparent;
  color: #efefef;
  text-align: left;
}

.thread-row:active {
  background: #1b1d1c;
}

.thread-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: linear-gradient(135deg, #1b1b1b, #444);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.thread-avatar.team {
  background: #07c160;
}

.thread-avatar.file {
  background: #2aaa45;
}

.thread-avatar.book {
  background: #cc3434;
}

.thread-avatar.star {
  background: #3b4f8c;
}

.thread-main {
  min-width: 0;
  display: block;
}

.thread-main strong {
  display: block;
  margin-bottom: 7px;
  overflow: hidden;
  color: #e6e6e6;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thread-main small {
  display: block;
  overflow: hidden;
  color: #777978;
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thread-meta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  color: #3f4140;
  font-size: 14px;
}

.thread-meta i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fa5151;
}

.muted-thread .thread-main strong {
  color: #d8d8d8;
}

.contact-pill {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.contact-pill.is-active {
  border-color: rgba(45, 119, 74, 0.45);
  background: #eefbf0;
}

.avatar,
.bubble-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #151515;
  color: #fff;
  font-weight: 900;
}

.contact-pill strong,
.contact-pill small {
  display: block;
}

.contact-pill small {
  max-width: 150px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.plus-panel,
.home-plus-panel {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.home-plus-panel {
  position: absolute;
  top: 64px;
  right: 12px;
  z-index: 3;
  width: min(292px, calc(100vw - 24px));
  margin: 0;
  border-color: #252827;
  background: #1b1d1c;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

.app-shell.is-chat-open .plus-panel {
  position: absolute;
  top: 66px;
  right: 10px;
  left: auto;
  z-index: 7;
  width: min(292px, calc(100vw - 20px));
  margin: 0;
  border-color: #2b2e2d;
  background: #1b1d1c;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

.app-shell.is-chat-open .plus-panel .role-card,
.app-shell.is-chat-open .plus-panel .custom-role-form,
.app-shell.is-chat-open .plus-panel input {
  border-color: #2b2e2d;
  background: #111312;
  color: #f0f0f0;
}

.app-shell.is-chat-open .plus-panel label,
.app-shell.is-chat-open .plus-panel .role-card small {
  color: #8b8d8c;
}

.home-plus-panel .role-card,
.home-plus-panel .custom-role-form,
.home-plus-panel input {
  border-color: #2b2e2d;
  background: #111312;
  color: #f0f0f0;
}

.home-plus-panel label {
  color: #8b8d8c;
}

.role-grid,
.tool-grid,
.quick-row,
.action-row,
.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-plus-panel .role-grid,
.app-shell.is-chat-open .plus-panel .role-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.role-card,
.tool-button,
.prompt-chip {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  font-weight: 800;
}

.role-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 8px;
  align-items: center;
}

.home-plus-panel .role-card,
.app-shell.is-chat-open .plus-panel .role-card {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: transparent;
}

.home-plus-panel .role-card:last-child,
.app-shell.is-chat-open .plus-panel .role-card:last-child {
  border-bottom: 0;
}

.home-plus-panel .role-card:active,
.app-shell.is-chat-open .plus-panel .role-card:active {
  background: #252827;
}

.role-card small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

.custom-role-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.custom-role-form label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.custom-role-form button {
  grid-column: 1 / -1;
}

.contact-strip {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.contact-strip .contact-pill {
  min-width: 164px;
}

.team-quote-view {
  flex: 1 1 auto;
  min-height: calc(100vh - 112px);
  display: grid;
  place-items: center;
  padding: 34px 26px 80px;
}

.team-quote-view p {
  max-width: 330px;
  margin: 0;
  color: #f5f5f5;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
  white-space: pre-line;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.chat-messages {
  flex: 1 1 auto;
  min-height: 320px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 10px 2px;
}

.app-shell.is-chat-open .chat-messages {
  min-height: 0;
  max-height: none;
  padding: 28px 12px 12px;
}

.message-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.message-row.from-me {
  flex-direction: row-reverse;
}

.message-bubble {
  max-width: min(76%, 390px);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  line-height: 1.5;
  white-space: pre-wrap;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.05);
}

.app-shell.is-chat-open .message-bubble {
  box-shadow: none;
}

.from-me .message-bubble {
  background: var(--wechat);
}

.message-bubble.is-strong {
  color: var(--red);
  font-weight: 900;
}

.typing-bubble {
  align-self: flex-start;
  margin: 0 0 8px 44px;
  color: var(--muted);
  font-size: 13px;
}

.app-shell.is-chat-open .typing-bubble {
  margin-left: 56px;
  color: #777978;
}

.typing-bubble span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--muted);
  animation: bounce 900ms infinite alternate;
}

.typing-bubble span:nth-child(2) {
  animation-delay: 140ms;
}

.typing-bubble span:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes bounce {
  from { transform: translateY(0); opacity: 0.45; }
  to { transform: translateY(-4px); opacity: 1; }
}

.quick-row {
  display: flex;
  overflow-x: auto;
  padding: 8px 0;
}

.quick-row .prompt-chip {
  min-width: 170px;
  font-size: 12px;
}

.chat-input {
  display: grid;
  grid-template-columns: 1fr 74px;
  gap: 8px;
}

.app-shell.is-chat-open .chat-input {
  position: sticky;
  bottom: 0;
  z-index: 5;
  grid-template-columns: 1fr 66px;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #202221;
}

.app-shell.is-chat-open .chat-input textarea {
  min-height: 42px;
  max-height: 98px;
  border: 0;
  border-radius: 6px;
  background: #2d2f2e;
  color: #f1f1f1;
  resize: none;
  box-shadow: none;
}

.app-shell.is-chat-open .chat-input textarea::placeholder {
  color: #7d807f;
}

.app-shell.is-chat-open .send-button {
  min-height: 42px;
  border-radius: 6px;
  background: #07c160;
  color: #fff;
}

textarea,
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--paper-strong);
  color: var(--ink);
  outline: none;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

textarea:focus,
input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 93, 114, 0.12);
}

.primary-action,
.ghost-action,
.icon-action {
  border: 0;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 900;
}

.primary-action {
  width: 100%;
  background: var(--red);
  color: #fff;
}

.ghost-action,
.icon-action {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.ghost-action.small {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 12px;
}

.ghost-action.danger {
  color: var(--red);
  border-color: rgba(199, 54, 47, 0.35);
}

.compact-button {
  min-height: 38px;
}

.action-row {
  margin-top: 10px;
}

.filter-row {
  margin-top: 12px;
}

.filter-row input {
  flex: 1 1 auto;
}

.cards-list {
  margin-top: 12px;
}

#screen-contacts {
  min-height: calc(100vh - 86px);
  margin: -16px -14px 0;
  padding: 12px 0 96px;
  background: #111312;
  color: #f1f1f1;
}

#screen-contacts .niubi-head {
  position: relative;
  height: 58px;
  justify-content: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#screen-contacts .niubi-head > div {
  text-align: center;
}

#screen-contacts .niubi-head .eyebrow {
  display: none;
}

#screen-contacts .niubi-head h2 {
  margin: 0;
  color: #e9e9e9;
  font-size: 23px;
  font-weight: 700;
}

#screen-contacts .niubi-tool-panel {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.niubi-section-label {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #7b7d7c;
  font-size: 14px;
  font-weight: 800;
}

#screen-contacts .niubi-list {
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #151716;
}

#screen-contacts .tool-button.niubi-row {
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 0 18px 0 20px;
  background: transparent;
  color: #efefef;
  text-align: left;
  font-weight: 400;
}

#screen-contacts .tool-button.niubi-row:active {
  background: #1b1d1c;
}

.niubi-row-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #ff9f2e;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.tool-button[data-tool="cat"] .niubi-row-icon {
  background: #ff9f2e;
}

.tool-button[data-tool="joke"] .niubi-row-icon {
  background: #2b8bdc;
}

.tool-button[data-tool="good"] .niubi-row-icon {
  background: #07c160;
}

.tool-button[data-tool="breath"] .niubi-row-icon {
  background: #3f5fb8;
}

.tool-button[data-tool="sign"] .niubi-row-icon {
  background: #b56a20;
}

.tool-button[data-tool="lighter"] .niubi-row-icon {
  background: #59606a;
}

.tool-button[data-tool="memory"] .niubi-row-icon {
  background: #cc3434;
}

.niubi-row-copy {
  min-width: 0;
  display: block;
}

.niubi-row-copy strong {
  display: block;
  margin-bottom: 7px;
  overflow: hidden;
  color: #e8e8e8;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.niubi-row-copy small {
  display: block;
  overflow: hidden;
  color: #777978;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#screen-contacts .niubi-output,
#screen-contacts .niubi-memory-panel {
  margin: 14px 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: #181a19;
  color: #f1f1f1;
  box-shadow: none;
}

#screen-contacts .niubi-output h3,
#screen-contacts .niubi-memory-panel h2,
#screen-contacts .niubi-memory-panel h3 {
  color: #f4f4f4;
}

#screen-contacts .niubi-output .empty-copy,
#screen-contacts .niubi-output p,
#screen-contacts .niubi-memory-panel .empty-copy,
#screen-contacts .memory-card .event,
#screen-contacts .memory-card .diary {
  color: #b9bcbb;
}

#screen-contacts .niubi-output input,
#screen-contacts .niubi-output textarea {
  border-color: #303433;
  background: #111312;
  color: #f1f1f1;
  box-shadow: none;
}

#screen-contacts .niubi-output .ghost-action,
#screen-contacts .niubi-memory-panel .ghost-action {
  border-color: #303433;
  background: #202322;
  color: #f1f1f1;
}

#screen-contacts .memory-card,
#screen-contacts .reply-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: #151716;
  color: #f1f1f1;
  box-shadow: none;
}

#screen-contacts .anger-chip {
  border-color: #304037;
  background: #0f1a14;
  color: #72d58a;
}

#screen-contacts .cards-list {
  margin-top: 10px;
}

#screen-contacts .compact-head {
  align-items: flex-start;
  margin-bottom: 6px;
}

#screen-contacts .compact-head .eyebrow {
  color: #72d58a;
}

.anger-chip,
.locked {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: #fff;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.memory-card .event {
  margin-bottom: 8px;
  color: var(--muted);
}

.memory-card .diary {
  margin-bottom: 12px;
  line-height: 1.55;
}

.reply-line {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.48;
}

.long-joke {
  white-space: pre-line;
}

.tool-output {
  min-height: 120px;
  margin-top: 10px;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.survival-game,
.survival-copy {
  display: grid;
  gap: 10px;
}

.survival-copy h3 {
  margin-bottom: 0;
}

.survival-copy p {
  margin: 0;
  color: #b9bcbb;
  line-height: 1.55;
}

.survival-hud {
  min-height: 42px;
  display: grid;
  grid-template-columns: 72px 82px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  background: #0a0d14;
}

.survival-hud strong {
  color: #f6f7ff;
  font-size: 22px;
}

.survival-hud span {
  color: #9fa8ba;
  font-size: 12px;
  font-weight: 900;
}

.survival-canvas {
  width: 100%;
  height: min(54vh, 430px);
  min-height: 280px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #05070d;
  box-shadow: inset 0 0 60px rgba(136, 242, 255, 0.08), 0 16px 34px rgba(0, 0, 0, 0.28);
  touch-action: none;
}

.survival-canvas:focus {
  outline: 2px solid rgba(136, 242, 255, 0.55);
  outline-offset: 2px;
}

.survival-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cat-bounce-game {
  display: grid;
  gap: 10px;
}

.cat-bounce-copy h3 {
  margin-bottom: 4px;
}

.cat-bounce-copy p,
.cat-bounce-status {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.cat-bounce-hud {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.cat-force-meter {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #e7eadf;
  box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.08);
}

.cat-force-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8fca72, #ffd06d 55%, #c7362f);
  transition: width 160ms ease;
}

.cat-bounce-hud strong {
  min-width: 70px;
  color: var(--green);
  font-size: 12px;
  text-align: right;
}

.cat-stage {
  position: relative;
  height: min(54vh, 430px);
  min-height: 300px;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid rgba(36, 93, 114, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 208, 109, 0.35), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(45, 119, 74, 0.22), transparent 20%),
    linear-gradient(180deg, #f7fbff 0%, #f7f0e1 58%, #dfe9ce 100%);
  user-select: none;
}

.cat-stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 33%;
  background:
    linear-gradient(90deg, rgba(36, 93, 114, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.cat-sprite {
  position: absolute;
  left: var(--cat-x, 50%);
  top: var(--cat-y, 55%);
  width: 72px;
  height: 82px;
  border: 0;
  background: transparent;
  color: #111;
  padding: 0;
  transform: translate(-50%, -50%) rotate(var(--cat-tilt, 0deg)) scaleY(var(--cat-squish, 1));
  transform-origin: center 70%;
  transition:
    left 620ms cubic-bezier(.18,.86,.25,1.18),
    top 620ms cubic-bezier(.18,.86,.25,1.18),
    transform 160ms ease;
  touch-action: none;
}

.cat-sprite:active {
  transform: translate(-50%, -50%) rotate(var(--cat-tilt, 0deg)) scale(0.96);
}

.cat-body {
  position: absolute;
  inset: 8px 7px 12px;
  display: grid;
  place-items: center;
  border-radius: 24px 24px 26px 26px;
  background:
    radial-gradient(circle at 34% 30%, var(--cat-accent, #fff), transparent 26%),
    var(--cat-fur, #fff);
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, 0.55),
    inset 0 -9px 14px rgba(17, 17, 17, 0.08),
    0 14px 22px rgba(17, 17, 17, 0.16);
}

.cat-body::after {
  content: "";
  position: absolute;
  right: -11px;
  bottom: 10px;
  width: 26px;
  height: 13px;
  border: 5px solid var(--cat-fur, #fff);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  transform: rotate(-24deg);
}

.cat-ear {
  position: absolute;
  top: -10px;
  width: 22px;
  height: 22px;
  border-radius: 6px 4px 5px 4px;
  background: var(--cat-fur, #fff);
  transform: rotate(45deg);
  box-shadow: inset 4px 4px 0 var(--cat-accent, #fff);
}

.cat-ear.left {
  left: 8px;
}

.cat-ear.right {
  right: 8px;
}

.cat-face {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  place-items: center;
  margin-top: 2px;
}

.cat-face i {
  width: 7px;
  height: 9px;
  border-radius: 50%;
  background: #2b2823;
}

.cat-face b {
  grid-column: 1 / -1;
  color: #2b2823;
  font-size: 17px;
  line-height: 1;
}

.cat-shadow {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.16);
  filter: blur(2px);
}

.cat-name {
  position: absolute;
  left: 50%;
  bottom: -10px;
  min-width: 46px;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  transform: translateX(-50%);
}

.cat-sprite.is-bouncing .cat-body {
  animation: catSquash 620ms cubic-bezier(.18,.86,.25,1.18);
}

.cat-rain-drop {
  position: absolute;
  top: -48px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 15px 15px 17px 17px;
  background: #fff6e8;
  color: #2b2823;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(17, 17, 17, 0.14);
  animation: catFall var(--rain-duration, 1700ms) var(--rain-delay, 0ms) ease-in forwards;
  pointer-events: none;
}

.cat-rain-drop::before,
.cat-rain-drop::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: inherit;
  transform: rotate(45deg);
}

.cat-rain-drop::before {
  left: 6px;
}

.cat-rain-drop::after {
  right: 6px;
}

@keyframes catSquash {
  0% { transform: scale(1.1, 0.86); }
  42% { transform: scale(0.94, 1.12); }
  100% { transform: scale(1); }
}

@keyframes catFall {
  0% { transform: translate3d(0, 0, 0) rotate(-14deg); opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate3d(var(--rain-drift, 0), 470px, 0) rotate(420deg); opacity: 0; }
}

.cat-actions,
.tea-donate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.tea-donate {
  grid-template-columns: 132px 1fr;
  align-items: end;
}

.tea-donate button {
  grid-column: 1 / -1;
}

.qr-mock {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 8px solid #fff;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #111 10px, transparent 10px 20px, #111 20px 30px, transparent 30px) 0 0 / 40px 40px,
    linear-gradient(#111 10px, transparent 10px 20px, #111 20px 30px, transparent 30px) 0 0 / 40px 40px,
    #f7f7f7;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
}

.qr-mock span {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  background: #fff;
  color: var(--red);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.tea-donate label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.tool-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.breath-stage {
  position: relative;
  min-height: 178px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  border: 1px solid rgba(36, 93, 114, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #f5fbff 0%, #edf7ef 100%);
  overflow: hidden;
}

.art-breath-stage {
  min-height: 250px;
  border-color: rgba(226, 197, 134, 0.18);
  background:
    radial-gradient(circle at 52% 45%, rgba(226, 197, 134, 0.22), transparent 18%),
    radial-gradient(circle at 30% 28%, rgba(79, 173, 185, 0.2), transparent 24%),
    linear-gradient(135deg, #080b11 0%, #101a20 48%, #080808 100%);
  box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.04);
}

.breath-art-lines {
  position: absolute;
  inset: 18px;
  opacity: 0.62;
}

.breath-art-lines i {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(226, 197, 134, 0.16);
  border-radius: 50%;
  animation: breathRing 8s infinite ease-in-out;
}

.breath-art-lines i:nth-child(2) {
  inset: 42px;
  border-color: rgba(79, 173, 185, 0.16);
  animation-delay: -2s;
}

.breath-art-lines i:nth-child(3) {
  inset: 68px;
  border-color: rgba(255, 255, 255, 0.13);
  animation-delay: -4s;
}

.breath-orb {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  gap: 2px;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 8%, #d8f6ff 34%, #245d72 100%);
  color: #fff;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 0 0 16px rgba(36, 93, 114, 0.08), 0 18px 42px rgba(36, 93, 114, 0.22);
  animation: breathe 14s infinite ease-in-out;
}

.art-breath-stage .breath-orb {
  width: 136px;
  height: 136px;
  background:
    radial-gradient(circle at 36% 28%, #fffaf0 0 8%, #d9b56b 28%, #0d1519 74%, #030303 100%);
  box-shadow:
    0 0 0 20px rgba(217, 181, 107, 0.05),
    0 0 42px rgba(217, 181, 107, 0.38),
    0 18px 60px rgba(0, 0, 0, 0.45);
}

.breath-orb span,
.breath-orb small {
  display: block;
}

.breath-orb span {
  align-self: end;
  font-size: 15px;
}

.breath-orb small {
  align-self: start;
  font-size: 24px;
  line-height: 1;
}

.breath-orb[data-phase="hold"] {
  background: radial-gradient(circle at 34% 28%, #fff8d8 0 9%, #d7ebff 34%, #59738a 100%);
}

.breath-orb[data-phase="exhale"],
.breath-orb[data-phase="release"] {
  background: radial-gradient(circle at 34% 28%, #ffffff 0 8%, #e0f7df 36%, #2d774a 100%);
}

.breath-orb[data-phase="steady"],
.breath-orb[data-phase="done"] {
  background: radial-gradient(circle at 34% 28%, #fff 0 8%, #f7e6bc 34%, #a26535 100%);
}

.breath-orb[data-phase="prank"] {
  background: radial-gradient(circle at 34% 28%, #ffffff 0 8%, #ff6767 36%, #6b1010 100%);
  animation: prankPulse 420ms infinite alternate;
}

.breath-orb[data-phase="haha"],
.breath-orb[data-phase="tease"],
.breath-orb[data-phase="final"] {
  background: radial-gradient(circle at 34% 28%, #ffffff 0 8%, #ff6767 34%, #540909 100%);
  animation: prankPulse 360ms infinite alternate;
}

.breath-orb[data-phase="pause"] {
  filter: grayscale(0.6);
}

.breath-flash {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  min-height: 28px;
  margin: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--blue);
  padding: 6px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(8px);
}

.art-breath-stage .breath-flash {
  left: 18px;
  right: 18px;
  bottom: 16px;
  background: rgba(5, 7, 10, 0.68);
  color: #f8e8bd;
  backdrop-filter: blur(10px);
}

.breath-flash.is-visible {
  animation: breathFlash 1200ms ease forwards;
}

.breath-laugh-screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 101, 72, 0.24), transparent 30%),
    rgba(0, 0, 0, 0.78);
  color: #fff3c2;
  font-size: clamp(28px, 8vw, 54px);
  font-weight: 900;
  line-height: 1.14;
  text-align: center;
  text-shadow: 0 0 18px rgba(255, 116, 72, 0.75);
  white-space: pre-line;
}

.breath-laugh-screen[hidden] {
  display: none;
}

.breath-laugh-screen.is-haha {
  animation: breathHahaFlood 240ms infinite alternate;
}

.breath-laugh-screen.is-tease {
  color: #ffdd8a;
  animation: breathTeaseBlink 320ms infinite alternate;
}

.breath-laugh-screen.is-final {
  color: #ffffff;
  animation: breathFinalTaunt 460ms infinite alternate;
}

#breathText,
.sign-result {
  min-height: 54px;
  color: var(--muted);
  line-height: 1.55;
}

#breathText {
  margin: 10px 0 0;
}

.sign-cup {
  position: relative;
  width: 128px;
  height: 140px;
  margin: 10px auto 12px;
  border-radius: 16px 16px 24px 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #3b2b1c, #7b4a22);
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 12px 18px rgba(255,255,255,0.12), 0 12px 24px rgba(17,17,17,0.16);
}

.sign-cup i {
  position: absolute;
  top: -22px;
  width: 8px;
  height: 74px;
  border-radius: 999px;
  background: #c48b2c;
  transform-origin: bottom;
}

.sign-cup i:nth-child(2) {
  left: 42px;
  transform: rotate(-10deg);
}

.sign-cup i:nth-child(3) {
  left: 60px;
}

.sign-cup i:nth-child(4) {
  right: 42px;
  transform: rotate(10deg);
}

.sign-cup i:nth-child(5) {
  left: 30px;
  transform: rotate(-20deg);
}

.sign-cup i:nth-child(6) {
  right: 30px;
  transform: rotate(20deg);
}

.sign-cup.is-shaking {
  animation: shakeCup 120ms linear 8;
}

.sign-cup.is-shaking i {
  animation: stickRattle 120ms linear 8;
}

.sign-result {
  min-height: 92px;
  margin: 10px 0 0;
  border: 1px solid #ecd8a8;
  border-radius: 8px;
  background: #fff8e6;
  padding: 12px;
}

.sign-result strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 18px;
}

.sign-result p {
  margin: 0;
}

.sign-result.is-revealed {
  animation: signReveal 260ms ease-out both;
}

@keyframes shakeCup {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-6px) rotate(-4deg); }
  75% { transform: translateX(6px) rotate(4deg); }
}

@keyframes stickRattle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes signReveal {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes breathe {
  0%, 100% { transform: scale(0.78); }
  35% { transform: scale(1); }
  60% { transform: scale(1); }
}

@keyframes breathRing {
  0%, 100% { transform: scale(0.86); opacity: 0.28; }
  45% { transform: scale(1.06); opacity: 0.76; }
}

@keyframes prankPulse {
  from { transform: scale(0.92) rotate(-2deg); }
  to { transform: scale(1.08) rotate(2deg); }
}

@keyframes breathFlash {
  0% { opacity: 0; transform: translateY(8px); }
  18%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes breathHahaFlood {
  from { letter-spacing: 0; transform: scale(0.98) rotate(-0.4deg); filter: saturate(1); }
  to { letter-spacing: 1px; transform: scale(1.03) rotate(0.4deg); filter: saturate(1.25); }
}

@keyframes breathTeaseBlink {
  from { opacity: 0.52; transform: translateX(-3px) scale(0.98); }
  to { opacity: 1; transform: translateX(3px) scale(1.04); }
}

@keyframes breathFinalTaunt {
  from { opacity: 0.68; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(-4px); }
}

.lighter-game {
  position: relative;
  height: 156px;
  margin-top: 10px;
  border: 1px solid #e5d9bf;
  border-radius: 8px;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.8), transparent 20%),
    linear-gradient(180deg, #f8f1df 0%, #eee4cf 100%);
  overflow: hidden;
}

.emotion-smoke-game {
  height: 238px;
  border-color: rgba(226, 197, 134, 0.16);
  background:
    radial-gradient(circle at 72% 26%, rgba(255, 255, 255, 0.12), transparent 18%),
    radial-gradient(circle at 30% 78%, rgba(80, 120, 90, 0.16), transparent 24%),
    linear-gradient(180deg, #171a16 0%, #0b0d0b 100%);
}

.cigarette,
.lighter {
  position: absolute;
  top: 42px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.cigarette {
  left: 22px;
  width: 132px;
  background: linear-gradient(90deg, #ffffff 0 75%, #edd5aa 75% 100%);
  border: 1px solid var(--line);
  color: #64615b;
  z-index: 2;
  transition: left 520ms ease, top 520ms ease, width 520ms ease, transform 260ms ease, opacity 260ms ease;
}

.cigarette i {
  position: absolute;
  right: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d6c8b1;
  box-shadow: inset 0 0 0 3px #fff;
}

.cigarette.is-lit {
  box-shadow: 0 0 24px rgba(199, 54, 47, 0.75);
}

.emotion-smoke-game .cigarette.is-lit {
  width: 154px;
  transform: scale(1.08);
  animation: cigaretteWarmGrow 1200ms ease both;
}

.emotion-smoke-game .cigarette {
  top: 80px;
  left: 22px;
  transition: left 2200ms cubic-bezier(.18,.72,.24,1), top 760ms ease, width 2200ms ease, transform 520ms ease, opacity 360ms ease;
}

.emotion-smoke-game .cigarette.puff-two-ready {
  width: 124px;
  left: 52px;
}

.emotion-smoke-game .cigarette.puff-two {
  width: 104px;
  left: 88px;
}

.emotion-smoke-game .cigarette.puff-three {
  width: 88px;
  left: 120px;
  animation: cigaretteTremble 180ms infinite;
}

.emotion-smoke-game .cigarette.can-trash {
  width: 58px;
  cursor: grab;
  box-shadow: 0 0 18px rgba(114, 213, 138, 0.42);
}

.emotion-smoke-game .cigarette.is-small-smoke {
  transform: scale(0.82);
}

.emotion-smoke-game .cigarette.is-dragging {
  cursor: grabbing;
  transform: scale(1.04);
}

.emotion-smoke-game .cigarette.is-bounced {
  animation: smokeBounceAway 520ms cubic-bezier(.18,.86,.25,1.18);
}

.emotion-smoke-game .cigarette.is-trashed {
  opacity: 0;
  transform: scale(0.18) rotate(18deg);
  pointer-events: none;
}

.cigarette.is-lit i {
  background: var(--red);
  box-shadow: 0 0 16px rgba(199, 54, 47, 0.9), inset 0 0 0 3px #ffd1bd;
}

.lighter-target {
  position: absolute;
  left: 152px;
  top: 36px;
  z-index: 1;
  width: 42px;
  height: 46px;
  display: grid;
  place-items: end center;
  border: 2px dashed rgba(199, 54, 47, 0.42);
  border-radius: 50%;
  color: rgba(199, 54, 47, 0.76);
  padding-bottom: 3px;
  font-size: 10px;
  font-weight: 900;
}

.emotion-smoke-game .lighter-target {
  top: 72px;
  left: 150px;
  transition: opacity 360ms ease, transform 360ms ease;
}

.emotion-smoke-game.is-lit .lighter-target,
.emotion-smoke-game.trash-ready .lighter-target,
.emotion-smoke-game.is-finished .lighter-target {
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
}

.emotion-smoke-game.trash-ready .cigarette i,
.emotion-smoke-game.is-finished .cigarette i {
  opacity: 0;
  box-shadow: none;
}

.lighter {
  left: calc(100% - 96px);
  right: auto;
  z-index: 3;
  width: 74px;
  background: linear-gradient(180deg, #d6a64c, #a76822);
  color: #fff;
  touch-action: none;
  user-select: none;
  box-shadow: 0 12px 20px rgba(99, 61, 21, 0.24);
}

.emotion-smoke-game .lighter {
  top: 80px;
}

.emotion-smoke-game .lighter.is-spent {
  pointer-events: none;
  animation: lighterSparkFade 1280ms ease forwards;
}

.lighter::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  background: #ffcf5f;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
  box-shadow: 0 0 12px rgba(255, 166, 46, 0.75);
}

.lighter.is-dragging {
  box-shadow: 0 16px 26px rgba(99, 61, 21, 0.3);
  transform: translateY(-1px);
}

.lighter.aligned {
  box-shadow: 0 0 18px rgba(199, 54, 47, 0.42);
}

.lighter.aligned::before {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.lighter-game.is-aligned .lighter-target {
  border-style: solid;
  background: rgba(255, 255, 255, 0.58);
}

.lighter-game.needs-align {
  animation: needsAlign 420ms ease;
}

.smoke-puff {
  position: absolute;
  left: 158px;
  top: 24px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: rgba(180, 184, 174, 0.34);
  box-shadow:
    12px -8px 0 rgba(180, 184, 174, 0.22),
    25px -18px 0 rgba(180, 184, 174, 0.16);
}

.emotion-smoke-game .smoke-puff {
  left: 160px;
  top: 56px;
  width: 24px;
  height: 24px;
  background: rgba(210, 216, 205, 0.34);
  box-shadow:
    18px -10px 0 rgba(210, 216, 205, 0.24),
    38px -24px 0 rgba(210, 216, 205, 0.16),
    58px -38px 0 rgba(210, 216, 205, 0.10);
}

.smoke-draw-progress {
  position: absolute;
  left: 26px;
  top: 124px;
  z-index: 1;
  width: 138px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.32);
  transition: left 2200ms cubic-bezier(.18,.72,.24,1), width 2200ms ease, opacity 360ms ease;
}

.smoke-draw-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #72d58a, #f8e8bd 70%, #c7362f);
  transition: width 2800ms ease;
}

.emotion-smoke-game.puff-stage-two .smoke-draw-progress {
  left: 52px;
  width: 124px;
}

.emotion-smoke-game.puff-stage-three .smoke-draw-progress {
  left: 88px;
  width: 104px;
}

.emotion-smoke-game.trash-ready .smoke-draw-progress,
.emotion-smoke-game.is-finished .smoke-draw-progress {
  opacity: 0;
}

.smoke-puff.is-active {
  animation: smokeRise 1800ms ease-out infinite;
}

.smoke-puff.is-soft {
  animation-duration: 2400ms;
  opacity: 0.52;
}

.smoke-puff.is-heavy {
  animation-duration: 1150ms;
  box-shadow:
    16px -10px 0 rgba(220, 225, 215, 0.34),
    34px -26px 0 rgba(220, 225, 215, 0.28),
    58px -44px 0 rgba(220, 225, 215, 0.22),
    80px -62px 0 rgba(220, 225, 215, 0.14);
}

.smoke-warning {
  position: absolute;
  inset: 18px 16px auto;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff2c7;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 0 18px rgba(255, 120, 80, 0.5);
  animation: warningPopIn 900ms cubic-bezier(.18,.86,.25,1.18) both, warningBlink 820ms 900ms infinite alternate;
}

.smoke-burst-text {
  position: absolute;
  inset: 18px 16px auto;
  z-index: 6;
  min-height: 110px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff3c2;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 0 20px rgba(255, 116, 72, 0.72);
  animation: smokeBurstJump 360ms infinite alternate;
}

.smoke-burst-text[hidden] {
  display: none;
}

.trash-bin {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 78px;
  height: 86px;
  display: grid;
  place-items: end center;
  border: 2px solid rgba(128, 194, 255, 0.82);
  border-radius: 7px 7px 13px 13px;
  padding: 0 0 9px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px) 11px 20px / 14px 48px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(94, 160, 230, 0.42)),
    #3179c6;
  color: #eaf6ff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
  transform: translateY(8px) scale(0.92);
  opacity: 0;
  animation: recycleBinIn 360ms ease forwards;
}

.trash-bin[hidden] {
  display: none;
}

.trash-bin::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -12px;
  height: 14px;
  border: 2px solid rgba(128, 194, 255, 0.88);
  border-radius: 6px 6px 3px 3px;
  background: #57a6ea;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.24);
}

.trash-bin::after {
  content: "♻";
  position: absolute;
  left: 50%;
  top: 31px;
  color: #eaf6ff;
  font-size: 28px;
  line-height: 1;
  transform: translateX(-50%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.trash-bin span {
  position: relative;
  z-index: 1;
}

.trash-bin.is-ready,
.emotion-smoke-game.is-finished .trash-bin {
  border-style: solid;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px) 11px 20px / 14px 48px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(55, 188, 115, 0.5)),
    #238e4c;
  box-shadow: 0 0 28px rgba(114, 213, 138, 0.35), 0 10px 26px rgba(0, 0, 0, 0.26);
}

.trash-bin.is-running {
  animation: trashDodge 420ms cubic-bezier(.18,.86,.25,1.18);
}

.emotion-smoke-game.is-finished::after {
  content: "爱护环境\A 人人有责";
  position: absolute;
  left: 16px;
  right: 104px;
  bottom: 22px;
  color: #c7ffd2;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.12;
  text-shadow: 0 0 18px rgba(114, 213, 138, 0.42);
  white-space: pre-line;
  animation: ecoPraiseShrink 1200ms cubic-bezier(.18,.86,.25,1.18) both;
}

.smoke-breath-button:not([hidden]) {
  display: block;
  width: 100%;
  margin-top: 10px;
  animation: smokeButtonPulse 900ms infinite alternate;
}

.smoke-flash-copy.is-flashing {
  color: #f8e8bd !important;
  animation: smokeTextFlash 620ms infinite alternate;
}

.burn-meter {
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  background: #e4ded2;
  overflow: hidden;
}

.burn-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  transition: width 300ms ease;
}

@keyframes recycleBinIn {
  from { opacity: 0; transform: translateY(18px) scale(0.84); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes needsAlign {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes smokeRise {
  0% { opacity: 0; transform: translateY(12px) scale(0.75); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(34px, -48px) scale(1.5); }
}

@keyframes cigaretteWarmGrow {
  0% { transform: scale(1); }
  54% { transform: scale(1.12); }
  100% { transform: scale(1.08); }
}

@keyframes lighterReturn {
  to { left: calc(100% - 96px); top: 80px; }
}

@keyframes lighterSparkFade {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1.12); }
  42% { opacity: 0.72; transform: translateY(-3px) scale(0.96); filter: brightness(1.25); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.78); filter: blur(2px) brightness(1.35); }
}

@keyframes cigaretteTremble {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

@keyframes smokeBounceAway {
  0% { transform: translate(0, 0) scale(0.82); }
  42% { transform: translate(-12px, -18px) scale(0.92) rotate(-7deg); }
  100% { transform: translate(0, 0) scale(0.82); }
}

@keyframes warningPopIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.74); filter: blur(2px); }
  68% { opacity: 1; transform: translateY(-4px) scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes warningBlink {
  from { opacity: 0.58; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes smokeBurstJump {
  0% { transform: translateY(4px) scale(0.96) rotate(-1deg); opacity: 0.78; }
  100% { transform: translateY(-6px) scale(1.04) rotate(1deg); opacity: 1; }
}

@keyframes trashDodge {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translate(-12px, -10px) scale(1.08) rotate(-5deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes ecoPraiseShrink {
  0% { opacity: 0; transform: scale(1.42); }
  28% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes smokeButtonPulse {
  from { box-shadow: 0 0 0 rgba(248, 232, 189, 0); }
  to { box-shadow: 0 0 22px rgba(248, 232, 189, 0.25); }
}

@keyframes smokeTextFlash {
  from { opacity: 0.56; }
  to { opacity: 1; }
}

@keyframes mantraFade {
  0%, 100% { opacity: 0.38; transform: translateY(0); }
  38%, 70% { opacity: 1; transform: translateY(-1px); }
}

@keyframes starDrift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-36px, 24px, 0) rotate(5deg); }
}

.throw-zone {
  min-height: 72px;
  margin-top: 10px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
}

#screen-galaxy {
  position: relative;
  min-height: calc(100vh - 92px);
  margin: 0 -4px;
  padding: 18px 10px 96px;
  background:
    radial-gradient(circle at 50% 8%, rgba(92, 111, 146, 0.12), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(55, 22, 54, 0.18), transparent 46%),
    linear-gradient(180deg, #040606 0%, #080909 56%, #020303 100%);
  color: #f2f7ff;
}

#screen-galaxy .ghost-action {
  border-color: rgba(255, 255, 255, 0.14);
  background: #151818;
  color: #f2f7ff;
}

.galaxy-sound-button {
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 8;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(19, 23, 24, 0.7);
  color: rgba(234, 243, 255, 0.78);
  font-size: 17px;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.galaxy-sound-button.is-playing {
  color: #f6d889;
  border-color: rgba(246, 216, 137, 0.45);
  box-shadow: 0 0 18px rgba(246, 216, 137, 0.16);
}

.interstellar-mantra {
  margin: 18px auto 12px;
  max-width: 27em;
  color: rgba(232, 241, 250, 0.84);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-shadow:
    0 0 18px rgba(105, 190, 255, 0.22),
    0 0 34px rgba(255, 210, 108, 0.1);
}

.galaxy-field {
  position: relative;
  height: min(70vh, 660px);
  min-height: 520px;
  margin: 6px -2px 0;
  overflow: hidden;
  border: 1px solid rgba(225, 236, 248, 0.055);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 255, 255, 0.07), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(92, 55, 112, 0.22), transparent 48%),
    radial-gradient(circle at 50% 74%, rgba(244, 221, 205, 0.045), transparent 18%),
    linear-gradient(180deg, #07080a 0%, #050507 54%, #030304 100%);
  box-shadow:
    inset 0 0 180px rgba(0, 0, 0, 0.68),
    inset 0 0 58px rgba(172, 190, 220, 0.025),
    0 28px 64px rgba(0, 0, 0, 0.52);
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.galaxy-field.is-dragging {
  cursor: grabbing;
}

.interstellar-field::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.58) 0 0.8px, transparent 1.2px) 0 0 / 47px 47px,
    radial-gradient(circle, rgba(190, 210, 232, 0.34) 0 0.75px, transparent 1.2px) 12px 18px / 79px 79px,
    radial-gradient(circle, rgba(255, 227, 181, 0.24) 0 0.7px, transparent 1.2px) 37px 26px / 121px 121px;
  opacity: 0.11;
  animation: starDrift 190s linear infinite;
}

.interstellar-field::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(255, 255, 255, 0.052) 63%, transparent 64%),
    radial-gradient(circle at 50% 50%, transparent 0 82%, rgba(221, 229, 238, 0.04) 83%, transparent 84%);
  filter: blur(0.3px);
  opacity: 0.5;
  pointer-events: none;
}

.interstellar-dust,
.memory-cloud-vignette {
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(224, 229, 234, 0.018);
  border-radius: 50%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.006),
    0 0 0 112px rgba(255, 255, 255, 0.004),
    inset 0 0 150px rgba(177, 186, 218, 0.032),
    0 0 100px rgba(143, 154, 201, 0.055);
  pointer-events: none;
}

.galaxy-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.24), transparent 17%),
    radial-gradient(circle, rgba(145, 198, 225, 0.18), transparent 58%);
  color: rgba(236, 246, 255, 0.54);
  font-weight: 900;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  box-shadow:
    0 0 52px rgba(111, 184, 225, 0.18),
    inset 0 0 36px rgba(255, 255, 255, 0.035);
}

.galaxy-core span {
  font-size: 14px;
  letter-spacing: 0;
}

.galaxy-core small {
  margin-top: 4px;
  color: rgba(226, 238, 248, 0.36);
  font-size: 10px;
  font-weight: 700;
}

.galaxy-zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 7;
  display: flex;
  gap: 6px;
}

.galaxy-zoom-controls button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(10, 11, 12, 0.72);
  color: rgba(245, 247, 250, 0.86);
  font-size: 18px;
  font-weight: 800;
}

.interstellar-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.interstellar-globe,
.story-star-layer {
  position: absolute;
  inset: 0;
}

.story-star-layer {
  z-index: 4;
  animation: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

.galaxy-field.is-dragging .story-star-layer {
  animation-play-state: paused;
}

.story-bubble {
  position: absolute;
  border: 1px solid rgba(250, 252, 255, 0.7);
  border-radius: 50%;
  padding: 0;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0 22%, rgba(246, 248, 255, 0.96) 46%, rgba(154, 160, 174, 0.82) 100%);
  color: #f9fdff;
  font-size: 9px;
  font-weight: 900;
  box-shadow:
    0 0 calc(7px + var(--star-glow) * 0.38px) rgba(230, 238, 248, calc(0.2 + var(--star-depth) * 0.34)),
    0 0 calc(18px + var(--star-glow) * 0.7px) rgba(178, 191, 215, calc(0.04 + var(--star-depth) * 0.08)),
    inset 0 0 4px rgba(255, 255, 255, 0.72);
  transform: translate(-50%, -50%) scale(var(--star-scale));
  transition: box-shadow 160ms ease, transform 160ms ease, background 260ms ease, border-color 260ms ease, filter 160ms ease;
  will-change: left, top, opacity, transform;
}

.story-bubble.is-hot {
  border-color: rgba(255, 248, 230, 0.86);
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0 22%, rgba(255, 250, 238, 0.98) 45%, rgba(178, 171, 156, 0.84) 100%);
  box-shadow:
    0 0 calc(12px + var(--star-glow) * 0.6px) rgba(255, 248, 230, calc(0.26 + var(--star-depth) * 0.34)),
    0 0 34px rgba(234, 223, 210, calc(0.08 + var(--star-depth) * 0.1)),
    inset 0 0 5px rgba(255, 255, 255, 0.72);
}

.story-bubble.is-cool {
  border-color: rgba(226, 240, 255, 0.72);
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0 18%, rgba(231, 241, 248, 0.95) 42%, rgba(132, 147, 160, 0.84) 100%);
}

.story-bubble.is-personal {
  border-color: rgba(250, 252, 255, 0.72);
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0 22%, rgba(246, 248, 255, 0.96) 46%, rgba(154, 160, 174, 0.82) 100%);
}

.story-bubble span {
  display: none;
}

.story-bubble:hover,
.story-bubble:focus-visible {
  outline: none;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.78),
    0 0 42px rgba(255, 211, 118, 0.28),
    inset 0 0 6px rgba(255, 255, 255, 0.64);
  filter: brightness(1.16);
  transform: translate(-50%, -50%) scale(calc(var(--star-scale) * 1.7));
}

.story-bubble:hover span,
.story-bubble:focus-visible span {
  opacity: 1;
}

.story-bubble.is-seen {
  border-color: rgba(255, 226, 137, 0.92);
  background: rgba(245, 205, 100, 0.92);
  box-shadow:
    0 0 calc(11px + var(--star-glow) * 0.8px) rgba(255, 205, 98, 0.54),
    inset 0 0 6px rgba(255, 255, 255, 0.36);
}

.story-bubble.is-new-user {
  animation: userStarSettle 5.2s ease-out forwards;
}

.story-bubble.is-fading-user {
  box-shadow:
    0 0 12px rgba(255, 205, 98, 0.32),
    inset 0 0 10px rgba(255, 255, 255, 0.22);
}

.galaxy-detail {
  margin-top: 10px;
  border: 1px solid rgba(185, 215, 235, 0.1);
  border-radius: 10px;
  padding: 13px 14px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 210, 117, 0.08), transparent 28%),
    rgba(8, 12, 13, 0.82);
  color: #e9eef6;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.015);
}

.galaxy-mood-trigger {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(178, 217, 240, 0.12);
  border-radius: 8px;
  padding: 12px 13px;
  background: rgba(3, 7, 9, 0.74);
  color: #e7f1ff;
  font-weight: 800;
  line-height: 1.55;
  text-align: left;
}

.galaxy-mood-form {
  display: grid;
  gap: 10px;
}

.galaxy-mood-form label {
  color: #f8e8bd;
  font-size: 14px;
  font-weight: 900;
}

.galaxy-mood-form textarea {
  min-height: 86px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(5, 8, 9, 0.82);
  color: #eef5ff;
}

.galaxy-detail h3 {
  margin-bottom: 8px;
  color: #f8e8bd;
}

.galaxy-detail p {
  margin: 0 0 7px;
  color: #d7dee8;
  line-height: 1.55;
}

.galaxy-story-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.galaxy-action-row {
  display: none;
}

.galaxy-detail small,
#screen-galaxy .empty-copy {
  color: #9ca8b8;
  line-height: 1.5;
}

#screen-release {
  min-height: calc(100vh - 108px);
  margin: 0 -4px;
  padding: 10px 10px 96px;
  background:
    radial-gradient(circle at 24% 4%, rgba(204, 58, 51, 0.16), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(245, 202, 116, 0.1), transparent 30%),
    linear-gradient(180deg, #0b0d0d 0%, #111313 52%, #080909 100%);
  color: #f4f2ec;
}

.release-list-panel,
.release-game-panel {
  min-height: calc(100vh - 204px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: #111312;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.release-list-head {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #111312;
}

.release-list-head h2 {
  margin: 0;
  color: #f2f2f2;
  font-size: 23px;
}

.release-list-head small {
  max-width: 180px;
  color: #747b78;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-align: right;
}

.release-game-list {
  background: #151716;
}

.release-game-row {
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 0 18px 0 20px;
  background: transparent;
  color: #efefef;
  text-align: left;
}

.release-game-row:active {
  background: #1b1d1c;
}

.release-game-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #c7362f;
  color: #fff;
  font-size: 22px;
  font-weight: 1000;
}

.release-game-icon.orange { background: #ff9f2e; }
.release-game-icon.blue { background: #2b8bdc; }
.release-game-icon.steel { background: #59606a; }
.release-game-icon.red { background: #d13a34; }
.release-game-icon.green { background: #07c160; }
.release-game-icon.crimson { background: #b91722; }
.release-game-icon.gold { background: #b87520; }
.release-game-icon.cyan { background: #24a8c8; }

.release-game-row strong,
.release-game-row small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.release-game-row strong {
  margin-bottom: 0;
  color: #e8e8e8;
  font-size: 20px;
  font-weight: 500;
}

.release-game-row small {
  color: #777978;
  font-size: 14px;
  line-height: 1.3;
}

.release-panel-head {
  min-height: 68px;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #111312;
}

.release-back-button {
  width: 46px;
  height: 58px;
  border: 0;
  background: transparent;
  color: #f5d083;
  font-size: 34px;
  line-height: 1;
}

.release-panel-head h2 {
  margin: 0 0 4px;
  color: #f6f6f6;
  font-size: 22px;
}

.release-panel-head p {
  margin: 0;
  color: #858c89;
  font-size: 13px;
  font-weight: 800;
}

.release-game-host {
  padding: 12px 12px 116px;
}

.release-game-card {
  position: relative;
  display: grid;
  gap: 10px;
}

.kinetic-orbit,
.liquid-ripple,
.screw-machine,
.voice-wave {
  position: relative;
  min-height: 116px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 202, 116, 0.1), transparent 34%),
    radial-gradient(circle at 30% 20%, rgba(7, 193, 96, 0.08), transparent 28%),
    #090c0c;
}

.kinetic-orbit i,
.liquid-ripple i,
.screw-machine i,
.voice-wave i {
  position: absolute;
  display: block;
}

.kinetic-orbit {
  height: 142px;
}

.kinetic-orbit i {
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff3d0;
  box-shadow: 0 0 18px rgba(245, 202, 116, 0.7);
  transform-origin: 0 0;
  animation: orbitFloat 4.8s linear infinite;
}

.kinetic-orbit i:nth-child(1) { animation-delay: -0.1s; --orbit-x: 86px; --orbit-y: 20px; }
.kinetic-orbit i:nth-child(2) { animation-delay: -0.8s; --orbit-x: -92px; --orbit-y: 32px; }
.kinetic-orbit i:nth-child(3) { animation-delay: -1.6s; --orbit-x: 70px; --orbit-y: -44px; }
.kinetic-orbit i:nth-child(4) { animation-delay: -2.3s; --orbit-x: -64px; --orbit-y: -38px; }
.kinetic-orbit i:nth-child(5) { animation-delay: -3.2s; --orbit-x: 20px; --orbit-y: 54px; }
.kinetic-orbit i:nth-child(6) { animation-delay: -4s; --orbit-x: -20px; --orbit-y: -58px; }

.game-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.game-hud span {
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: #181b1a;
  color: #848c88;
  font-size: 12px;
  font-weight: 900;
}

.game-hud strong {
  color: #ffe4a8;
  font-size: 18px;
}

.game-status {
  min-height: 48px;
  margin: 0;
  border: 1px solid rgba(245, 202, 116, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  background: #0d100f;
  color: #ffe4a8;
  font-weight: 900;
  line-height: 1.55;
  white-space: pre-line;
}

.release-game-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.release-game-actions button {
  min-height: 42px;
}

.release-game-card .primary-action {
  box-shadow: 0 10px 24px rgba(199, 54, 47, 0.26);
}

.release-game-card .ghost-action,
.release-game-panel .ghost-action {
  border-color: rgba(255, 255, 255, 0.12);
  background: #202423;
  color: #f2f2f2;
}

.source-pill {
  justify-self: start;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #9fb6c8;
  font-size: 12px;
  font-weight: 900;
}

.embedded-game-shell {
  padding: 0;
  gap: 0;
  border: 0;
  background: #050606;
}

.embedded-game-frame-wrap {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(245, 202, 116, 0.08), transparent 34%),
    #050606;
}

.embedded-game-frame {
  width: 100%;
  height: min(72vh, 660px);
  min-height: 480px;
  display: block;
  border: 0;
  background: #000;
}

.three-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.three-actions .wide-action {
  grid-column: 1 / -1;
}

.hex-arena {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(34, 211, 238, 0.2), transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 0 112px, rgba(255, 255, 255, 0.035) 113px 114px, transparent 116px),
    radial-gradient(circle at 50% 50%, transparent 0 164px, rgba(255, 255, 255, 0.05) 165px 166px, transparent 168px),
    #070909;
}

.hex-core {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  padding: 18px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.32), transparent 20%),
    radial-gradient(circle, color-mix(in srgb, var(--c), transparent 32%), #101315 72%);
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 44px color-mix(in srgb, var(--c), transparent 58%);
}

.hex-core span,
.hex-core small {
  display: block;
}

.hex-core span {
  font-size: 30px;
  font-weight: 1000;
}

.hex-core small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.hex-lane {
  position: absolute;
  z-index: 2;
  left: calc(50% - 26px);
  top: calc(50% - 168px);
  width: 52px;
  height: 150px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 7px 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  transform: rotate(calc(var(--i) * 60deg)) translateY(-48px);
  transform-origin: 50% 180px;
}

.hex-lane.is-active {
  border-color: rgba(34, 211, 238, 0.75);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.24);
}

.hex-lane i {
  width: 28px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  transform: rotate(calc(var(--i) * -60deg));
}

.hex-lane i.is-filled {
  background: var(--c);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c), transparent 50%);
}

.merge-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 10%, rgba(245, 158, 11, 0.16), transparent 30%),
    #080a0a;
  touch-action: none;
}

.merge-cell {
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.merge-cell strong,
.merge-cell small {
  display: block;
}

.merge-cell strong {
  font-size: 24px;
  font-weight: 1000;
}

.merge-cell small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.merge-cell.v-2 { background: #273036; }
.merge-cell.v-4 { background: #394147; }
.merge-cell.v-8 { background: #7c2d12; }
.merge-cell.v-16 { background: #991b1b; }
.merge-cell.v-32 { background: #b45309; }
.merge-cell.v-64 { background: #047857; }
.merge-cell.v-128,
.merge-cell.v-256,
.merge-cell.v-512,
.merge-cell.v-1024,
.merge-cell.v-2048 {
  background: linear-gradient(145deg, #f59e0b, #7f1d1d);
  box-shadow: 0 0 26px rgba(245, 158, 11, 0.28);
}

.merge-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.merge-pad button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #1f2423;
  color: #fff4d8;
  font-weight: 1000;
}

.merge-pad button:first-child,
.merge-pad button:last-child {
  grid-column: 2;
}

.factory-line {
  display: grid;
  grid-template-columns: 1fr 74px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 170px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 50%, transparent 50%) 0 0 / 18px 18px,
    #070a09;
}

.factory-line b {
  display: block;
  margin-bottom: 8px;
  color: #9fb6c8;
  font-size: 12px;
}

.factory-piece {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--piece);
}

.factory-piece span {
  font-size: 52px;
  line-height: 1;
  transform: rotate(var(--rot));
  text-shadow: 0 0 22px color-mix(in srgb, var(--piece), transparent 55%);
}

.factory-piece small {
  color: #f6f6f6;
  font-weight: 900;
}

.factory-belt {
  display: grid;
  gap: 8px;
}

.factory-belt i {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3f3f46, #f59e0b, #3f3f46);
  animation: beltMove 920ms linear infinite;
}

.factory-machines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.factory-machines button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(145deg, #263238, #111827);
  color: #fff4d8;
  font-weight: 1000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dodge-canvas {
  width: 100%;
  height: clamp(230px, 58vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #050707;
  touch-action: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

@keyframes beltMove {
  from { background-position: 0 0; }
  to { background-position: 36px 0; }
}

.retire-slots {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
}

.retire-slots i {
  min-height: 31px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: #101312;
  color: #9ca5a1;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.retire-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.bubble-field {
  position: relative;
  height: min(58vh, 430px);
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 24%, rgba(36, 168, 200, 0.2), transparent 24%),
    radial-gradient(circle at 76% 60%, rgba(245, 202, 116, 0.14), transparent 26%),
    linear-gradient(180deg, #07100f, #111514 58%, #070a0a);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.42);
}

.bubble-field::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.045);
  animation: waterRipple 5.5s ease-in-out infinite;
}

.satisfy-bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border: 1px solid rgba(224, 247, 255, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.95) 0 10%, transparent 13%),
    radial-gradient(circle at 62% 68%, rgba(116, 210, 255, 0.26), transparent 36%),
    rgba(122, 209, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.28),
    0 0 18px rgba(94, 194, 240, 0.2);
  transform: translate(-50%, -50%);
  animation: bubbleDrift 3.4s ease-in-out infinite;
  animation-delay: var(--d);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.satisfy-bubble.is-popped {
  pointer-events: none;
  opacity: 0;
  filter: blur(3px);
  transform: translate(-50%, -50%) scale(1.8);
}

.retire-card {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(145deg, #252928, #121514);
  color: #7f8884;
  font-weight: 1000;
  transform-style: preserve-3d;
  transition: transform 280ms ease, box-shadow 220ms ease, background 220ms ease;
}

.retire-card span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  transition: transform 280ms ease;
}

.retire-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(45deg, transparent 0 43%, rgba(255, 255, 255, 0.08) 44% 46%, transparent 47% 100%),
    linear-gradient(-45deg, transparent 0 43%, rgba(255, 255, 255, 0.06) 44% 46%, transparent 47% 100%);
  pointer-events: none;
}

.retire-card.is-open {
  background: linear-gradient(145deg, #f0c972, #9d5e1d);
  color: #231408;
  transform: rotateY(180deg) scale(1.03);
  box-shadow: 0 14px 30px rgba(245, 202, 116, 0.18);
}

.retire-card.is-open span {
  transform: rotateY(180deg);
}

.retire-card.is-matched {
  opacity: 0.45;
  background: #0f3d25;
  color: #8ef0ad;
  animation: matchedPop 420ms ease;
}

.stack-board {
  perspective: 650px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stack-column {
  min-height: 118px;
  display: grid;
  align-content: end;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 9px;
  background:
    radial-gradient(circle at 50% calc(100% - 12px), rgba(245, 202, 116, calc(0.04 * var(--stack, 1))), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    #111514;
  transform: rotateX(8deg) translateY(calc((6 - var(--stack, 1)) * 2px));
  transition: transform 220ms ease, filter 220ms ease;
}

.stack-column small,
.stack-column em {
  color: #727b77;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.stack-tile,
.stack-empty {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 202, 116, 0.2);
  border-radius: 8px;
  background: linear-gradient(145deg, #242b2a, #151817);
  color: #f2f0e8;
  font-size: 22px;
  font-weight: 1000;
  box-shadow: 0 calc(var(--stack, 1) * 3px) 0 rgba(255, 255, 255, 0.04), 0 14px 22px rgba(0, 0, 0, 0.24);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.stack-tile.is-selected {
  border-color: rgba(7, 193, 96, 0.85);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.14);
  transform: translateY(-7px) scale(1.04);
}

.liquid-ripple {
  height: 118px;
}

.liquid-ripple i {
  border: 1px solid rgba(174, 221, 255, 0.2);
  border-radius: 50%;
  inset: 20px;
  animation: waterRipple 4s ease-in-out infinite;
}

.liquid-ripple i:nth-child(2) {
  inset: 38px 64px;
  animation-delay: -1.4s;
}

.liquid-ripple i:nth-child(3) {
  inset: 50px 116px;
  animation-delay: -2.2s;
}

.screw-machine {
  height: 138px;
  display: grid;
  place-items: center;
}

.screw-machine::before {
  content: "";
  width: 188px;
  height: 62px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 16% 84%, rgba(255, 255, 255, 0.12)),
    repeating-linear-gradient(90deg, #303836 0 10px, #171b1a 10px 19px);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 20px 30px rgba(0, 0, 0, 0.28);
  animation: screwBody 3.8s ease-in-out infinite;
}

.screw-machine i {
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: #ffe4a8;
  box-shadow: 0 0 16px rgba(245, 202, 116, 0.5);
  animation: orbitFloat 5.4s linear infinite;
}

.screw-machine i:nth-child(1) { --orbit-x: 108px; --orbit-y: 8px; }
.screw-machine i:nth-child(2) { --orbit-x: -96px; --orbit-y: -10px; animation-delay: -1.2s; }
.screw-machine i:nth-child(3) { --orbit-x: 38px; --orbit-y: 46px; animation-delay: -2.6s; }
.screw-machine i:nth-child(4) { --orbit-x: -44px; --orbit-y: -42px; animation-delay: -3.5s; }

.screw-bench {
  display: grid;
  gap: 9px;
}

.screw-row {
  display: grid;
  grid-template-columns: 44px repeat(4, 1fr);
  gap: 7px;
  align-items: center;
}

.screw-row > strong {
  color: #949d99;
  font-size: 13px;
}

.screw-piece {
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #151817;
  color: #f5f5f5;
  font-size: 20px;
  font-weight: 900;
}

.screw-piece small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}

.screw-piece.is-red { box-shadow: inset 0 -4px 0 #d13a34; }
.screw-piece.is-gold { box-shadow: inset 0 -4px 0 #d5a444; }
.screw-piece.is-blue { box-shadow: inset 0 -4px 0 #2b8bdc; }
.screw-piece.is-green { box-shadow: inset 0 -4px 0 #07c160; }
.screw-piece.is-active {
  border-color: #ffe4a8;
  transform: translateY(-2px);
  animation: screwPickSpin 520ms ease;
}
.screw-piece.is-done {
  opacity: 0.34;
}

.mini-records {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px 10px;
  background: #0d100f;
}

.mini-records p {
  margin: 0;
  color: #9aa39f;
  font-size: 12px;
  line-height: 1.55;
}

.bag-face {
  position: relative;
  min-height: 254px;
  overflow: hidden;
  border: 1px solid rgba(245, 202, 116, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, #d8b178 0 26%, #ac7136 27% 42%, #351b10 43% 47%, transparent 48%),
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.28), transparent 10%),
    linear-gradient(180deg, #090f0e, #111514);
  color: #2b1508;
  font-weight: 1000;
}

.bag-shockwave {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 1;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 244, 207, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
}

.bag-face span {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  max-width: 96px;
  transform: translateX(-50%);
  color: #fff4cf;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
}

.bag-face b {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 2;
  transform: translateX(-50%);
  font-size: 34px;
}

.bag-face em {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bag-face em i {
  position: absolute;
  width: 28px;
  height: 18px;
  border-radius: 50%;
  background: rgba(202, 42, 42, 0.58);
  filter: blur(0.4px);
  transform: rotate(-15deg);
}

.bag-face.is-hit {
  animation: bagHit 220ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

.bag-face.is-hit .bag-shockwave {
  animation: bagShock 420ms ease-out;
}

.bag-face.is-mosaic {
  animation: bagMosaic 760ms ease both;
}

.voice-game textarea {
  min-height: 114px;
  border-color: rgba(255, 255, 255, 0.1);
  background: #0d100f;
  color: #f5f5f5;
  box-shadow: none;
}

.voice-wave {
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.voice-wave i {
  position: static;
  width: 12px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe4a8, #07c160);
  box-shadow: 0 0 16px rgba(7, 193, 96, 0.22);
  animation: voicePulse 1.05s ease-in-out infinite;
}

.voice-wave i:nth-child(2) { height: 56px; animation-delay: -0.15s; }
.voice-wave i:nth-child(3) { height: 84px; animation-delay: -0.32s; }
.voice-wave i:nth-child(4) { height: 52px; animation-delay: -0.48s; }
.voice-wave i:nth-child(5) { height: 34px; animation-delay: -0.65s; }

.voice-meter {
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #222927;
}

.voice-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #07c160, #ffe4a8, #d13a34);
  transition: width 220ms ease;
}

.boom-stage {
  position: relative;
  min-height: clamp(300px, 48vh, 390px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(199, 54, 47, 0.18), transparent 36%),
    #080a0a;
}

.boom-balloon {
  position: relative;
  z-index: 2;
  width: calc(112px + var(--inflate, 0) * 154px);
  height: calc(136px + var(--inflate, 0) * 184px);
  border: 0;
  border-radius: 50% 50% 46% 46% / 48% 48% 54% 54%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.62), transparent 15%),
    radial-gradient(circle at 62% 70%, rgba(255, 105, 97, 0.28), transparent 34%),
    linear-gradient(145deg, #ff6159, #a41120 78%);
  color: #fff7e9;
  font-weight: 1000;
  box-shadow:
    inset -22px -28px 38px rgba(75, 0, 8, 0.34),
    inset 14px 12px 28px rgba(255, 255, 255, 0.16),
    0 0 calc(22px + var(--inflate, 0) * 46px) rgba(255, 67, 57, 0.28),
    0 28px 58px rgba(0, 0, 0, 0.42);
  transform: translateY(calc(20px - var(--inflate, 0) * 18px)) scale(1);
  transition: width 260ms ease, height 260ms ease, transform 260ms ease, box-shadow 260ms ease;
  animation: balloonBreathe 2.2s ease-in-out infinite;
}

.boom-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;
  width: 34px;
  height: 28px;
  border-radius: 0 0 50% 50%;
  background: #83111c;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: inset -4px -5px 8px rgba(0, 0, 0, 0.28);
}

.boom-balloon span,
.boom-balloon small {
  position: relative;
  z-index: 1;
  display: block;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.boom-balloon span {
  font-size: calc(28px + var(--inflate, 0) * 14px);
}

.boom-balloon small {
  margin-top: 6px;
  font-size: 15px;
}

.boom-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.38), transparent 18%),
    linear-gradient(145deg, #ff3a35, #97131d);
  color: #fff6eb;
  font-size: 15px;
  font-weight: 1000;
  box-shadow:
    0 0 0 8px rgba(199, 54, 47, 0.1),
    0 14px 34px rgba(199, 54, 47, 0.34);
}

.boom-mic-chip {
  position: absolute;
  left: 14px;
  bottom: 18px;
  z-index: 3;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff2da;
  font-size: 14px;
  font-weight: 1000;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.boom-sparks {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 20% 38%, rgba(255, 228, 168, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 28%, rgba(255, 84, 66, 0.95) 0 7px, transparent 8px),
    radial-gradient(circle at 52% 70%, rgba(255, 255, 255, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 36% 62%, rgba(255, 164, 65, 0.95) 0 8px, transparent 9px);
  transform: scale(0.2);
  pointer-events: none;
}

.boom-stage.is-booming .boom-sparks {
  animation: boomSparks 680ms ease-out;
}

.boom-stage.is-booming .boom-button {
  animation: boomButton 680ms ease-out;
}

.boom-stage.is-booming .boom-balloon {
  animation: balloonPop 680ms ease-out forwards;
}

.ad-mock-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
}

.ad-mock-card {
  width: min(430px, calc(100vw - 36px));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  padding: 18px;
  background: #151716;
  color: #f4f2ec;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}

.ad-mock-card h3 {
  color: #fff4db;
}

.ad-mock-card p {
  color: #a6afab;
  line-height: 1.6;
}

.ad-mock-card > strong {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  margin: 14px auto;
  border-radius: 50%;
  background: #222726;
  color: #ffe4a8;
  font-size: 24px;
}

.release-hero,
.release-setup,
.release-stage,
.release-stats,
.release-feed {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(18, 20, 20, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.release-hero {
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(206, 56, 50, 0.18), rgba(17, 20, 20, 0.94) 44%),
    rgba(18, 20, 20, 0.94);
}

.release-hero h2 {
  margin: 2px 0 5px;
  color: #fff4db;
  font-size: 20px;
  line-height: 1.2;
}

.release-hero small,
.release-setup label {
  color: #9da8a4;
  font-weight: 800;
}

.release-setup {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
}

.release-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 8px;
}

#screen-release input {
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 12px;
  background: #0b0e0d;
  color: #f7f4ea;
  font-weight: 800;
}

#screen-release input::placeholder {
  color: #6e7773;
}

.release-stage {
  position: relative;
  height: min(42vh, 280px);
  min-height: 250px;
  margin-top: 8px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(circle at 50% 42%, rgba(218, 63, 55, 0.16), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(245, 202, 116, 0.08), transparent 28%),
    #0b0d0d;
  touch-action: none;
}

.release-backdrop {
  position: absolute;
  inset: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.075);
  border-radius: 50%;
  pointer-events: none;
}

.release-backdrop::before,
.release-backdrop::after {
  content: "";
  position: absolute;
  inset: 25%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.release-backdrop::after {
  inset: 42%;
}

.vent-target {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border: 2px solid rgba(255, 236, 206, 0.76);
  border-radius: 50%;
  padding: 12px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), transparent 18%),
    radial-gradient(circle, #d64239 0 28%, #871d1b 29% 47%, #262b2b 48% 67%, #111313 68% 100%);
  color: #fff8e7;
  box-shadow:
    0 0 0 8px rgba(214, 66, 57, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 30px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
  transition: left 240ms ease, top 240ms ease, filter 160ms ease, box-shadow 160ms ease;
  cursor: grab;
}

.vent-target span {
  max-width: 76px;
  overflow: hidden;
  color: #fff8e7;
  font-size: 21px;
  font-weight: 1000;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vent-target small {
  color: rgba(255, 244, 219, 0.74);
  font-size: 11px;
  font-weight: 900;
}

.vent-target.is-dragging {
  cursor: grabbing;
  filter: brightness(1.08);
  transition: none;
}

.vent-target.is-hit {
  animation: ventHit 260ms cubic-bezier(0.2, 1.8, 0.4, 1);
}

.vent-target.is-thrown {
  animation: ventThrow 360ms ease-out;
}

.vent-target.is-trashed {
  width: 66px;
  height: 66px;
  border-color: rgba(245, 202, 116, 0.7);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.34), transparent 18%),
    linear-gradient(145deg, #5d6260, #202423);
  color: #fff4d0;
  filter: saturate(0.7) brightness(0.82);
}

.vent-trash {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 80px;
  border: 1px solid rgba(175, 201, 210, 0.24);
  border-radius: 8px 8px 14px 14px;
  background:
    linear-gradient(180deg, rgba(87, 116, 128, 0.94), rgba(45, 66, 76, 0.96));
  color: #dbe9ef;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.vent-trash span {
  width: 38px;
  height: 31px;
  border: 3px solid rgba(236, 248, 252, 0.86);
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

.vent-trash span::before {
  content: "";
  display: block;
  width: 54px;
  height: 7px;
  margin: -10px 0 0 -8px;
  border-radius: 8px;
  background: rgba(236, 248, 252, 0.88);
}

.vent-burst-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.vent-burst {
  position: absolute;
  color: #fff4d0;
  font-size: 16px;
  font-weight: 1000;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
  animation: ventBurst 900ms ease-out forwards;
}

.vent-burst.is-trash {
  color: #b8f0dc;
}

.release-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
}

.release-stats span {
  display: grid;
  gap: 2px;
  color: #8f9995;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.release-stats strong {
  color: #fff2c9;
  font-size: 16px;
}

.release-caption {
  margin: 8px 0 0;
  min-height: 24px;
  color: #ffe4a8;
  font-weight: 1000;
  line-height: 1.45;
}

.release-actions {
  position: sticky;
  bottom: 86px;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(15, 17, 17, 0.95);
  backdrop-filter: blur(12px);
}

.release-actions button {
  min-height: 38px;
  padding-inline: 6px;
  font-size: 13px;
}

.release-feed {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  color: #dde5e1;
  font-size: 13px;
  line-height: 1.45;
}

.release-feed p {
  margin: 0;
}

@keyframes bagHit {
  0% { transform: scale(1); filter: brightness(1); }
  44% { transform: scale(0.98, 1.04) rotate(1.2deg); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes bagShock {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

@keyframes bagMosaic {
  0% { filter: blur(0) contrast(1); transform: scale(1); }
  42% { filter: blur(2px) contrast(1.6); transform: scale(1.04); }
  100% { filter: blur(0.8px) contrast(1.25) saturate(0.3); transform: scale(0.98); }
}

@keyframes orbitFloat {
  0% { transform: rotate(0deg) translate(var(--orbit-x, 80px), var(--orbit-y, 0)) rotate(0deg); }
  100% { transform: rotate(360deg) translate(var(--orbit-x, 80px), var(--orbit-y, 0)) rotate(-360deg); }
}

@keyframes matchedPop {
  0% { transform: rotateY(180deg) scale(1.04); filter: brightness(1); }
  46% { transform: rotateY(180deg) scale(1.22); filter: brightness(1.4); }
  100% { transform: rotateY(180deg) scale(1); filter: brightness(1); }
}

@keyframes waterRipple {
  0%, 100% { transform: scale(0.94); opacity: 0.36; }
  50% { transform: scale(1.08); opacity: 0.78; }
}

@keyframes bubbleDrift {
  0%, 100% { transform: translate(-50%, -50%) translate3d(-2px, 2px, 0) scale(1); }
  50% { transform: translate(-50%, -50%) translate3d(3px, -5px, 0) scale(1.04); }
}

@keyframes screwBody {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-4px); }
}

@keyframes screwPickSpin {
  0% { transform: translateY(-2px) rotate(0deg); }
  100% { transform: translateY(-2px) rotate(360deg); }
}

@keyframes voicePulse {
  0%, 100% { transform: scaleY(0.56); opacity: 0.55; }
  50% { transform: scaleY(1.18); opacity: 1; }
}

@keyframes boomSparks {
  0% { opacity: 0; transform: scale(0.2) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7) rotate(18deg); }
}

@keyframes boomButton {
  0% { transform: scale(1); }
  35% { transform: scale(0.88); }
  72% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes balloonBreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes balloonPop {
  0% { opacity: 1; transform: translateY(calc(20px - var(--inflate, 0) * 18px)) scale(1); filter: blur(0) brightness(1); }
  36% { opacity: 1; transform: translateY(calc(20px - var(--inflate, 0) * 18px)) scale(1.16); filter: blur(0) brightness(1.4); }
  100% { opacity: 0; transform: translateY(calc(20px - var(--inflate, 0) * 18px)) scale(2.1); filter: blur(8px) brightness(1.8); }
}

@keyframes ventHit {
  0% { transform: translate(-50%, -50%) scale(1); }
  38% { transform: translate(calc(-50% + 9px), calc(-50% - 2px)) scale(0.9, 1.08) rotate(2deg); }
  74% { transform: translate(calc(-50% - 5px), -50%) scale(1.06, 0.96) rotate(-1deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes ventThrow {
  0% { transform: translate(-50%, -50%) scale(1); }
  48% { transform: translate(-50%, -50%) scale(1.14) rotate(7deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes ventBurst {
  0% { opacity: 0; transform: translateY(12px) scale(0.86); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-44px) scale(1.18); }
}

#screen-diary {
  min-height: calc(100vh - 108px);
  margin: 0 -4px;
  padding: 12px 10px 92px;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 204, 116, 0.08), transparent 32%),
    linear-gradient(180deg, #0b0d0c 0%, #101413 56%, #0a0c0b 100%);
  color: #f1f3ee;
}

.diary-hero,
.diary-compose,
.diary-list-panel,
.muyu-panel,
#screen-diary .report-panel,
#screen-diary .input-panel,
#screen-diary .reply-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(19, 22, 21, 0.92);
  color: #f1f3ee;
  box-shadow: none;
}

.diary-hero {
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px 15px;
  background:
    radial-gradient(circle at 74% 18%, rgba(245, 204, 116, 0.12), transparent 28%),
    rgba(17, 21, 20, 0.96);
}

.diary-hero h2 {
  margin: 0;
  color: #fff8df;
  font-size: 20px;
  line-height: 1.35;
}

.diary-hero p:last-child {
  display: none;
}

.diary-compose,
.diary-list-panel,
.muyu-panel {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
}

#screen-diary textarea,
#screen-diary input {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0d100f;
  color: #f5f6f1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#screen-diary textarea::placeholder,
#screen-diary input::placeholder {
  color: #767f78;
}

#screen-diary .ghost-action {
  border-color: rgba(255, 255, 255, 0.12);
  background: #202423;
  color: #f1f3ee;
}

#screen-diary .primary-action {
  box-shadow: 0 10px 24px rgba(199, 54, 47, 0.28);
}

.diary-list {
  display: grid;
  gap: 9px;
}

.diary-list.is-stacked {
  gap: 7px;
}

.diary-entry {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 11px 12px;
  background: #101312;
}

.diary-entry div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.diary-entry strong {
  color: #f5cc74;
  font-size: 15px;
}

.diary-entry time {
  color: #69726b;
  font-size: 12px;
}

.diary-entry p {
  margin: 0 0 8px;
  color: #ecf0ea;
  line-height: 1.65;
}

.diary-entry small {
  color: #8fd3a1;
  line-height: 1.45;
}

.diary-collapse-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #171b1a;
  color: #dbe5dd;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.diary-collapse-note span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f5cc74;
  font-size: 18px;
  line-height: 1;
}

.diary-collapse-note:hover,
.diary-collapse-note:focus-visible {
  border-color: rgba(245, 204, 116, 0.34);
  background: #1d231f;
  color: #ffffff;
}

.diary-list.is-stacked .diary-entry {
  position: relative;
}

.diary-list.is-stacked .diary-entry::after {
  content: "";
  position: absolute;
  inset: auto 12px -9px 12px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(16, 19, 18, 0.88);
}

.muyu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.muyu-head h3,
.diary-list-panel h3,
#screen-diary .report-panel h3,
#screen-diary .reply-panel h3 {
  color: #fff8df;
}

.muyu-stage {
  position: relative;
  height: 178px;
  overflow: hidden;
  border: 1px solid rgba(245, 204, 116, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, rgba(245, 204, 116, 0.12), transparent 24%),
    linear-gradient(180deg, #07100f 0%, #0f1512 58%, #080b0a 100%);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.46);
  cursor: pointer;
  touch-action: manipulation;
}

.muyu-stage::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 24px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(8px);
}

.muyu-drum {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 2;
  width: 152px;
  height: 82px;
  border: 0;
  border-radius: 50% 50% 43% 43% / 56% 56% 44% 44%;
  background:
    radial-gradient(ellipse at 45% 22%, rgba(255, 244, 197, 0.62), transparent 18%),
    radial-gradient(ellipse at 50% 80%, rgba(64, 29, 8, 0.48), transparent 36%),
    linear-gradient(180deg, #efbd5d 0%, #b06d22 48%, #673713 100%);
  color: #fff5d8;
  font-weight: 900;
  box-shadow:
    inset 0 15px 26px rgba(255, 235, 168, 0.32),
    inset 0 -18px 28px rgba(45, 18, 4, 0.52),
    0 20px 34px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(245, 204, 116, 0.18);
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 120ms ease, filter 120ms ease;
  touch-action: manipulation;
}

.muyu-drum::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 50%;
  height: 9px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(50, 22, 6, 0.9), rgba(120, 65, 19, 0.92));
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.28);
}

.muyu-drum::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 96px;
  height: 28px;
  border: 1px solid rgba(255, 239, 185, 0.18);
  border-radius: 50%;
  transform: translateX(-50%);
}

.muyu-drum span,
.muyu-drum small {
  position: relative;
  z-index: 1;
  display: block;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
}

.muyu-drum span {
  margin-top: -6px;
  font-size: 15px;
}

.muyu-drum small {
  margin-top: 28px;
  color: #fff0be;
  font-size: 18px;
}

.muyu-drum.is-hit {
  animation: muyuHit 260ms ease;
}

.muyu-stick {
  position: absolute;
  left: 50%;
  top: 34px;
  z-index: 3;
  width: 118px;
  height: 15px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12px 50%, #f6d186 0 11px, #8f4e18 12px 19px, transparent 20px),
    linear-gradient(90deg, #5c2c0d 0%, #b9762b 42%, #e7b869 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 237, 178, 0.45),
    0 12px 18px rgba(0, 0, 0, 0.28);
  transform: translateX(-6%) rotate(-15deg);
  transform-origin: 14px 50%;
  pointer-events: none;
}

.muyu-stage.is-beating .muyu-stick,
.muyu-drum.is-hit + .muyu-float-layer::before {
  animation: none;
}

.muyu-stage:has(.muyu-drum.is-hit) .muyu-stick,
.muyu-stage.is-beating .muyu-stick {
  animation: stickHit 260ms ease;
}

.muyu-float-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.muyu-float-layer span {
  position: absolute;
  bottom: 34px;
  left: 50%;
  min-width: max-content;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 248, 223, 0.94);
  color: #42230c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
  animation: muyuFloat 1800ms ease-out forwards;
}

.muyu-blessing {
  min-height: 24px;
  margin: 10px 2px 0;
  color: #f5cc74;
  font-weight: 900;
  line-height: 1.55;
}

.muyu-feed {
  max-height: 92px;
  margin-top: 8px;
  overflow: hidden auto;
  border: 1px solid rgba(245, 204, 116, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  background: #0d100f;
  scrollbar-width: none;
}

.muyu-feed::-webkit-scrollbar {
  display: none;
}

.muyu-feed p {
  margin: 0;
  padding: 4px 0;
  color: #c7d2c9;
  font-size: 13px;
  line-height: 1.45;
}

.quiet-hidden {
  display: none !important;
}

#screen-diary .bar-row {
  color: #d7ded8;
}

#screen-diary .bar-row div {
  background: #202423;
}

#screen-diary .bar-row i {
  background: linear-gradient(90deg, #07c160, #f5cc74, #c7362f);
}

#screen-diary .empty-copy,
#screen-diary label {
  color: #a7b0aa;
}

@keyframes muyuHit {
  0% {
    filter: brightness(1);
    transform: translate(-50%, -50%) scale(1);
  }
  48% {
    filter: brightness(1.1);
    transform: translate(-50%, -50.8%) scale(0.994);
  }
  100% {
    filter: brightness(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes storyLayerDrift {
  0% {
    transform: rotate(-0.7deg) translate3d(-1px, 1px, 0) scale(0.996);
  }
  50% {
    transform: rotate(0.55deg) translate3d(1px, -1px, 0) scale(1.003);
  }
  100% {
    transform: rotate(-0.35deg) translate3d(-1px, 1px, 0) scale(0.999);
  }
}

@keyframes userStarSettle {
  0% {
    filter: brightness(1.3);
    opacity: 1;
  }
  58% {
    filter: brightness(1.2);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes stickHit {
  0% {
    transform: translateX(-6%) rotate(-15deg);
  }
  45% {
    transform: translateX(-11%) translateY(18px) rotate(-24deg);
  }
  100% {
    transform: translateX(-6%) rotate(-15deg);
  }
}

@keyframes muyuFloat {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0.88);
  }
  18% {
    opacity: 1;
    transform: translateX(-50%) translateY(-18px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--float-drift, 0px))) translateY(-158px) scale(0.78);
  }
}

.chart {
  margin-top: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 74px 1fr 34px;
  gap: 8px;
  align-items: center;
  margin-bottom: 9px;
  font-size: 13px;
}

.bar-row div {
  height: 14px;
  border-radius: 999px;
  background: #ece7dc;
  overflow: hidden;
}

.bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--red));
}

#screen-me {
  min-height: calc(100vh - 92px);
  margin: 0 -4px;
  padding: 0 0 96px;
  background: #0d0f0e;
  color: #ededed;
}

.profile-page-head {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 68px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(13, 15, 14, 0.96);
  backdrop-filter: blur(14px);
}

.profile-page-head h2 {
  margin: 0;
  color: #eeeeee;
  font-size: 22px;
  font-weight: 600;
}

.profile-list {
  margin-top: 0;
  background: #151716;
}

.profile-row {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 0 18px 0 24px;
  background: #151716;
  color: #eeeeee;
  cursor: pointer;
  text-align: left;
}

.profile-row:active {
  background: #1d201f;
}

.profile-row span {
  color: #e7e7e7;
  font-size: 21px;
  font-weight: 400;
}

.profile-row strong {
  overflow: hidden;
  color: #8f9390;
  font-size: 18px;
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-avatar-row {
  min-height: 98px;
}

.profile-avatar-preview,
.profile-qr-avatar {
  justify-self: end;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(145deg, #2e3534, #0f1110);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
}

.profile-avatar-preview.has-image,
.profile-qr-avatar.has-image {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.profile-chevron {
  color: #5f6360;
  font-size: 33px;
  font-style: normal;
  line-height: 1;
  text-align: right;
}

.profile-mini-qr {
  justify-self: end;
  width: 38px;
  height: 38px;
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  gap: 1px;
  padding: 4px;
  border-radius: 4px;
  background: #202423;
}

.profile-mini-qr i,
.profile-qr-grid i {
  display: block;
  background: transparent;
}

.profile-mini-qr i.is-on,
.profile-qr-grid i.is-on {
  background: currentColor;
}

.profile-qr-panel {
  margin: 14px 12px 0;
}

.profile-qr-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0, rgba(7, 193, 96, 0.14), transparent 32%),
    #181b1a;
  text-align: center;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}

.profile-qr-avatar {
  justify-self: center;
  margin: 0 auto 10px;
}

.profile-qr-card h3 {
  margin: 0 0 6px;
  color: #f2f3f0;
  font-size: 20px;
}

.profile-qr-card p {
  margin: 0 0 14px;
  color: #8f9892;
}

.profile-qr-grid {
  width: min(72vw, 246px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  gap: 2px;
  margin: 0 auto 12px;
  padding: 14px;
  border-radius: 8px;
  background: #f3f5f0;
  color: #111312;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.profile-qr-card small {
  display: block;
  margin-bottom: 12px;
  color: #8fd3a1;
  font-weight: 900;
  letter-spacing: 0;
}

.me-settings-panel,
.me-privacy-note {
  margin: 14px 12px 0;
  border-color: rgba(255, 255, 255, 0.08);
  background: #151716;
  color: #eeeeee;
  box-shadow: none;
}

.me-settings-panel h3,
.me-privacy-note h3 {
  color: #f1f1f1;
}

.me-settings-panel p,
.me-privacy-note p,
#screen-me .rage-copy,
#screen-me .empty-copy {
  color: #8f9892;
}

#screen-me textarea,
#screen-me input:not([type="range"]):not([type="checkbox"]) {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0e1110;
  color: #f2f3f0;
}

#screen-me .reply-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: #101312;
  color: #eeeeee;
  box-shadow: none;
}

#screen-me .ghost-action {
  border-color: rgba(255, 255, 255, 0.12);
  background: #202423;
  color: #eeeeee;
}

#screen-me .ghost-action.danger {
  border-color: rgba(199, 54, 47, 0.52);
  color: #ffaca7;
}

#screen-me .age-gate {
  border-color: rgba(199, 54, 47, 0.36);
  background: #1c1514;
}

.profile-editor {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
}

.profile-editor[hidden] {
  display: none;
}

.profile-editor-card {
  width: min(500px, calc(100vw - 36px));
  max-height: min(82vh, 620px);
  overflow: auto;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 14px 18px;
  background: #151716;
  color: #eeeeee;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.48);
}

.profile-editor-head {
  height: 58px;
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-editor-head strong {
  text-align: center;
  font-size: 18px;
}

.profile-editor-head button {
  border: 0;
  background: transparent;
  color: #07c160;
  font-size: 16px;
  font-weight: 800;
}

.profile-editor-head button:first-child {
  color: #b8bfba;
  text-align: left;
}

.profile-editor-head button:last-child {
  text-align: right;
}

.profile-editor-card input,
.profile-editor-card textarea {
  width: 100%;
  margin-top: 14px;
}

.profile-gender-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.profile-gender-grid[hidden] {
  display: none;
}

.profile-gender-grid button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #202423;
  color: #dfe4df;
  font-weight: 800;
}

.profile-gender-grid button.is-active {
  border-color: rgba(7, 193, 96, 0.75);
  background: #08371f;
  color: #7bf0a2;
}

#rageLevel {
  width: 100%;
  height: 28px;
  margin: 8px 0 10px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

#rageLevel::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red) 0 var(--rage-progress, 44.44%), #f1f1eb var(--rage-progress, 44.44%) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

#rageLevel::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 3px solid #151716;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.3);
}

#rageLevel::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #f1f1eb;
}

#rageLevel::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--red);
}

#rageLevel::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #151716;
  border-radius: 50%;
  background: var(--red);
}

.rage-copy {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.switch {
  margin: 0;
  width: 52px;
  height: 30px;
  position: relative;
}

.switch input {
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #c7c0b5;
}

.switch span::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}

.switch input:checked + span {
  background: var(--green);
}

.switch input:checked + span::after {
  transform: translateX(22px);
}

.age-gate {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed rgba(199, 54, 47, 0.45);
  background: #fff8f4;
}

.tabbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(540px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(28, 29, 29, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
}

.tab {
  min-width: 0;
  height: 58px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d0d0d0;
  font-weight: 900;
}

.tab span,
.tab small {
  display: block;
}

.tab span {
  margin-bottom: 3px;
  font-size: 18px;
}

.tab small {
  font-size: 10px;
}

.tab.is-active {
  background: transparent;
  color: #07c160;
}

button:active {
  transform: translateY(1px);
}

@media (min-width: 760px) {
  .app-shell {
    padding-top: 24px;
  }

  .chat-card {
    min-height: 720px;
  }
}

@media (max-width: 430px) {
  .role-grid,
  .tool-grid,
  .action-row,
  .prompt-grid {
    grid-template-columns: 1fr;
  }

  .custom-role-form,
  .chat-input {
    grid-template-columns: 1fr;
  }

  .galaxy-field {
    height: 480px;
  }
}