/* Stage and shared comic controls. */
:root {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: #111;
  background: #fff8e7;
  font-synthesis: none;
  --pink: #e8336d;
  --yellow: #ffe14d;
  --blue: #3fa9f5;
  --green: #5bc236;
  --orange: #ff8a00;
  --ink: #111;
  --paper: #fff8e7;
}
* {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  display: grid;
  place-items: center;
  height: 100dvh;
  background: radial-gradient(#1112 1px, transparent 1px) 0 0 / 10px 10px var(--paper);
}
#app {
  width: min(100vw, 177.777778dvh);
  height: min(100dvh, 56.25vw);
  container-type: size;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.screen {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5cqmin, 24px);
  padding: clamp(8px, 2cqmin, 32px);
  font-size: clamp(12px, 2cqmin, 28px);
  line-height: 1.4;
}
h1, h2, h3, p {
  margin: 0;
}
h1, h2, h3, .button, .caption, .bubble {
  font-family: 'Baloo 2', sans-serif;
}
h1 {
  font-size: clamp(24px, 5cqmin, 72px);
  line-height: 1.15;
}
h2 {
  font-size: clamp(16px, 3cqmin, 44px);
  line-height: 1.2;
}
button, textarea {
  font: inherit;
  color: inherit;
}
button {
  touch-action: manipulation;
}
button:not(:disabled) {
  cursor: pointer;
}
button:disabled {
  opacity: .55;
}
:focus-visible {
  outline: 3px solid #a420d0;
  outline-offset: 2px;
}
h1:focus {
  outline: none;
}
[hidden] {
  display: none !important;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1cqmin, 14px);
  padding: clamp(4px, 1cqmin, 14px) clamp(8px, 2cqmin, 28px);
  border: 3px solid #111;
  background: var(--yellow);
  box-shadow: 3px 3px 0 #111;
  font-family: 'Baloo 2', sans-serif;
  font-size: clamp(12px, 2.4cqmin, 34px);
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
}
.button:hover:not(:disabled) {
  background: #fff08e;
}
.button:active:not(:disabled) {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 #111;
}
.button.paper {
  background: #fffdf6;
}
.button.small {
  font-size: clamp(12px, 2cqmin, 28px);
}
.actions, .topbar, .pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.5cqmin, 20px);
  flex-shrink: 0;
}
.actions {
  justify-content: center;
}
.topbar-title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  flex: 1;
  text-align: center;
}
.page-indicator {
  font-variant-numeric: tabular-nums;
}
.panel, .caption, .bubble {
  border: 3px solid #111;
  background: white;
}
.panel {
  box-shadow: 3px 3px 0 #111;
}
.caption, .bubble {
  padding: clamp(5px, 1.5cqmin, 20px);
}
.caption {
  background: var(--yellow);
  font-weight: 800;
}
.bubble {
  position: relative;
  border-radius: clamp(8px, 2cqmin, 28px);
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 20%;
  width: 12px;
  height: 12px;
  background: white;
  border-right: 3px solid #111;
  border-bottom: 3px solid #111;
  transform: rotate(35deg);
}
.eyebrow {
  font-size: clamp(12px, 1.8cqmin, 24px);
  font-weight: 800;
}
.halftone {
  position: relative;
  isolation: isolate;
  background: var(--panel-color, var(--yellow));
}
.halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(#111 1px, transparent 1.5px) 0 0 / clamp(6px, 1cqmin, 14px) clamp(6px, 1cqmin, 14px);
  opacity: .18;
  pointer-events: none;
  z-index: -1;
}
.sfx, .logo {
  font-family: 'Bangers', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .025em;
}
.sfx {
  color: var(--yellow);
  -webkit-text-stroke: 2px #111;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 var(--pink);
  line-height: 1.1;
}
.burst {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(12px, 4cqmin, 56px);
  transform: rotate(-10deg);
}
.burst::before, .burst::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #111;
  clip-path: polygon(50% 0,58% 21%,77% 5%,76% 29%,100% 22%,86% 43%,100% 58%,77% 64%,85% 91%,62% 80%,51% 100%,42% 79%,19% 95%,22% 71%,0 73%,14% 53%,0 34%,24% 33%,22% 7%,42% 24%);
}
.burst::after {
  inset: 4px;
  background: #fffbed;
  z-index: -1;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Title cover: words left, comic panels right. */
.cover {
  flex: 1;
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: auto 1fr auto;
  border: 4px solid #111;
  background: white;
  box-shadow: 5px 5px 0 #111;
}
.cover-masthead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(4px, 1cqmin, 14px) clamp(8px, 2cqmin, 28px);
  background: #111;
  color: white;
  font-weight: 800;
}
.cover-masthead .mute {
  color: #111;
}
.cover-heading {
  --panel-color: var(--pink);
  display: grid;
  place-items: center;
  padding: 5cqmin 2cqmin;
}
.logo {
  display: grid;
  text-align: center;
  color: var(--yellow);
  font-size: clamp(38px, 10cqmin, 144px);
  line-height: 1;
  transform: rotate(-5deg);
  -webkit-text-stroke: 5px #111;
  paint-order: stroke fill;
  filter: drop-shadow(3px 5px 0 #111);
}
.logo span:last-child {
  font-size: .85em;
}
.issue-tag, .cover-sticker {
  position: absolute;
  font-size: clamp(12px, 1.8cqmin, 26px);
}
.issue-tag {
  top: 1cqmin;
  left: 1cqmin;
  transform: rotate(-8deg);
}
.cover-sticker {
  right: 2cqmin;
  bottom: 2cqmin;
  padding: 1cqmin;
  background: white;
  border: 3px solid #111;
  border-radius: 50%;
  font-weight: 800;
  transform: rotate(10deg);
}
.cover-grid {
  grid-column: 2;
  grid-row: 2 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2cqmin;
  padding: 2cqmin;
}
.cover-panel {
  border: 3px solid #111;
  transform: skewY(-2deg);
  overflow: hidden;
}
.cover-panel:nth-child(even) {
  transform: skewY(2deg);
}
.cover-panel::after, .toon-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 5deg at 50% 50%, transparent 0deg 8deg, #fff7 8deg 10deg, transparent 10deg 17deg, #1112 17deg 18deg);
  z-index: -1;
}
.cover-emoji {
  position: absolute;
  left: 10%;
  top: 4%;
  font-size: clamp(44px, 19cqmin, 270px);
  filter: drop-shadow(4px 5px 0 #1118);
  animation: cover-bob 3.4s ease-in-out infinite;
}
.cover-panel .sfx {
  position: absolute;
  right: 1%;
  bottom: 2%;
  font-size: clamp(20px, 5cqmin, 72px);
  padding: 3cqmin;
}
.cover-footer {
  padding: 2cqmin;
  display: grid;
  gap: 2cqmin;
  text-align: center;
}
.cover-footer > p:first-child {
  font-weight: 800;
}
.cover-footer .actions {
  flex-wrap: wrap;
}
.cover-note {
  font-size: clamp(12px, 1.8cqmin, 26px);
}
/* One comic panel per page. */
.webtoon {
  flex: 1;
  display: flex;
}
.toon-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2cqmin;
  padding: 3cqmin;
  border: 4px solid #111;
  box-shadow: 4px 4px 0 #111;
  animation: comic-page .18s ease-out;
}
.panel-number {
  position: absolute;
  top: 2cqmin;
  left: 2cqmin;
  background: #111;
  color: white;
  padding: 1cqmin;
}
.toon-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5cqmin 0 0;
}
.toon-art span {
  font-size: clamp(40px, 15cqmin, 216px);
  filter: drop-shadow(3px 4px 0 #1118);
  transform: rotate(calc((var(--i) - 1) * 8deg));
}
.toon-panel .sfx {
  position: absolute;
  top: 1cqmin;
  right: 2cqmin;
  font-size: clamp(24px, 6cqmin, 86px);
}
.toon-bubble {
  align-self: flex-end;
  max-width: 85%;
  font-size: clamp(14px, 3cqmin, 43px);
}
.toon-caption {
  font-size: clamp(14px, 2.8cqmin, 40px);
}
/* Chapter map. */
.page-heading {
  display: grid;
  gap: 1cqmin;
  flex-shrink: 0;
}
.map-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 4 chapters + bonus + coming soon = 3×2 */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.6cqmin;
}
.map-panel {
  display: flex;
  flex-direction: column;
  gap: 1cqmin;
  padding: 1.5cqmin;
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
}
.map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqmin;
}
.map-meta .caption {
  padding: .5cqmin;
}
.map-icon {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: clamp(28px, 10cqmin, 144px);
}
.map-description {
  display: grid;
  gap: 1.5cqmin;
  padding: 1.5cqmin;
  background: #ffffffe0;
  border: 2px solid #111;
}
.map-description h2 {
  font-size: clamp(16px, 2.8cqmin, 40px);
}
.locked {
  --panel-color: #ddd !important;
}
.locked .map-icon {
  filter: grayscale(1);
}
.locked-stamp {
  justify-self: center;
  color: #b72043;
  border: 3px solid currentColor;
  padding: .5cqmin 1cqmin;
  font-weight: 800;
  transform: rotate(-7deg);
}
/* Play: compact HUD, left portrait/squad, single email and anchored compose. */
.hud {
  display: grid;
  grid-template-columns: 16% 1fr 1fr;
  gap: 2cqmin;
  padding: 1cqmin;
  background: white;
  border: 3px solid #111;
  flex: 1;
  min-width: 0;
}
.hud-row {
  display: flex;
  align-items: stretch;
  gap: 1cqmin;
  flex: 0 0 15%;
}
.hud-side {
  display: flex;
  flex-direction: column;
  gap: 1cqmin;
  flex: 0 0 clamp(150px, 17cqw, 260px);
}
.hud-side > .play-menu, .hud-side > .button {
  flex: 1;
  min-height: 0;
}
.hud-side .button, .play-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
.play-menu {
  position: relative;
}
.play-menu summary {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.play-menu summary::-webkit-details-marker {
  display: none;
}
.play-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  min-width: 160px;
  padding: 8px;
  background: white;
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
}
.hud-turn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: .5cqmin;
}
.hud-turn strong, .offer-number {
  font-family: 'Baloo 2', sans-serif;
  font-size: clamp(16px, 3.5cqmin, 50px);
  line-height: 1.1;
}
.hud-offer, .hud-meters {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.offer-track {
  position: relative;
  height: clamp(4px, 1cqmin, 14px);
  background: #eee;
  border: 1px solid #111;
}
.offer-fill, .meter-fill {
  display: block;
  height: 100%;
  background: var(--pink);
  transition: width .3s;
}
.target-label, .hud-offer .eyebrow, .meter-label {
  font-size: clamp(12px, 1.8cqmin, 26px);
}
.meter-label {
  display: flex;
  justify-content: space-between;
}
.meter {
  height: clamp(6px, 1.4cqmin, 20px);
  background: #eee;
  border: 2px solid #111;
}
.leverage-fill {
  background: var(--yellow);
}
.strike-count {
  text-align: center;
  font-weight: 800;
}
.play-layout {
  display: grid;
  grid-template-columns: 24% minmax(0, 1fr);
  flex: 1;
  gap: 2cqmin;
}
.play-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2cqmin;
}
.linh-panel {
  display: grid;
  gap: 1.5cqmin;
}
.portrait {
  --panel-color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23cqh;
  border: 3px solid #111;
}
.portrait > span:first-child {
  font-size: clamp(36px, 16cqmin, 230px);
}
.portrait .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .4cqmin 1cqmin;
}
.human-role {
  font-size: clamp(12px, 1.8cqmin, 26px);
}
.squad-panel {
  padding: 1.5cqmin;
}
.squad-subtitle {
  font-size: clamp(12px, 1.8cqmin, 26px);
}
.squad-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1cqmin;
  margin-top: 1cqmin;
}
.squad-emoji {
  display: grid;
  place-items: center;
  font-size: clamp(18px, 4cqmin, 58px);
  width: 5cqmin;
  height: 5cqmin;
  border: 2px solid var(--family);
  border-radius: 50%;
}
.squad-remaining, .squad-more {
  align-self: center;
  font-weight: 800;
}
.email-client {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
}
.email-toolbar, .email-subject, .email-thread, .email-client > .pager, .compose {
  padding: 1cqmin 2cqmin;
}
.email-toolbar {
  display: flex;
  justify-content: space-between;
  background: #f1f4f8;
  color: #4d5968;
  font-size: clamp(12px, 1.8cqmin, 26px);
}
.email-subject {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: clamp(12px, 2cqmin, 28px);
  line-height: 1.3;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}
.email-thread {
  flex: 1;
  display: flex;
}
.email-message {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1cqmin;
}
.email-sender {
  display: flex;
  align-items: center;
  gap: 1cqmin;
  flex-shrink: 0;
  font-size: clamp(12px, 1.8cqmin, 26px);
}
.avatar {
  font-size: clamp(18px, 3cqmin, 43px);
}
.email-sender > div {
  flex: 1;
}
.sender-address {
  display: block;
  color: #626b77;
  overflow-wrap: anywhere;
}
.email-body {
  flex: 1;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: clamp(12px, 1.9cqmin, 27px);
  line-height: 1.4;
}
.email-chips {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1cqmin;
}
.email-chip {
  border: 1px solid #ddd;
  border-radius: 1cqmin;
  padding: .3cqmin .6cqmin;
  font-size: clamp(12px, 1.7cqmin, 24px);
}
.email-client > .pager {
  border-top: 1px solid #ddd;
}
.compose {
  flex-shrink: 0;
  border-top: 1px solid #ddd;
  display: grid;
  gap: .7cqmin;
}
.compose > label, .compose-footer > span {
  font-size: clamp(12px, 1.7cqmin, 24px);
}
textarea {
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  border: 1px solid #bac2ce;
  border-radius: 4px;
  padding: 1cqmin;
  font-size: clamp(12px, 2cqmin, 28px);
  line-height: 1.35;
  height: calc(4.05em + 2cqmin + 2px);
}
.compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqmin;
}
.draft-pager {
  display: inline-flex;
  align-items: center;
  gap: 1cqmin;
}
.draft-pager .button {
  padding: .5cqmin 1cqmin;
}
.compose-footer:has(.draft-pager:not([hidden])) > span:first-child {
  display: none;
}
.typing {
  position: absolute;
  right: 2cqmin;
  bottom: 30%;
  padding: 1cqmin;
  background: #f1f4f8;
  border: 1px solid #aaa;
}
.turn-feedback {
  position: absolute;
  inset: 3cqmin 3cqmin auto auto;
  max-width: 85%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1cqmin;
  pointer-events: none;
  z-index: 4;
}
.gain, .effect-feedback {
  background: var(--yellow);
  border: 2px solid #111;
  padding: 1cqmin;
  animation: toast 3.5s both;
}
.gain.loss {
  background: var(--pink);
  color: white;
}
.unclear-feedback {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.effect-feedback {
  background: white;
}
.hint-bubble {
  position: absolute;
  top: 17%;
  right: 3cqmin;
  width: 70%;
  z-index: 5;
  box-shadow: 4px 4px 0 #111;
}
/* Collection pages and stage-contained detail dialog. */
.tabs {
  display: flex;
  gap: 2cqmin;
  flex-shrink: 0;
}
.tabs .button[aria-selected='true'] {
  background: var(--pink);
  color: white;
}
.collection-grid {
  flex: 1;
  display: grid;
  gap: 1.5cqmin;
}
.emoji-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.collection-card.button {
  border-top: clamp(4px, 1cqmin, 14px) solid var(--family);
  padding: 1cqmin;
  background: white;
  font-size: clamp(12px, 2cqmin, 28px);
}
.collection-card:disabled {
  opacity: 1;
  background: #eee9dd;
  color: #615d55;
}
.collection-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqmin;
  overflow-wrap: anywhere;
}
.card-emoji {
  display: block;
  font-size: clamp(28px, 7cqmin, 100px);
  line-height: 1.2;
}
.card-family {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: clamp(12px, 1.6cqmin, 23px);
  font-weight: 400;
}
.silhouette {
  filter: brightness(0);
  opacity: .5;
}
.collection-card.villain-card {
  background: #27272c;
  color: white;
}
.phrase-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.endings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.phrase-card, .ending-card {
  padding: 1.5cqmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1cqmin;
}
.ending-card {
  text-align: center;
}
.ending-card h2, .phrase-card h2 {
  font-size: clamp(12px, 2.5cqmin, 36px);
}
.ending-card .card-emoji {
  font-size: clamp(24px, 5cqmin, 72px);
}
.detail-dialog {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70cqw;
  max-width: 90cqw;
  max-height: 90cqh;
  padding: 3cqmin;
  background: var(--paper);
  border: 4px solid #111;
  box-shadow: 5px 5px 0 #111;
  text-align: center;
  overflow: hidden;
}
.detail-dialog[open] {
  display: grid;
  gap: 2cqmin;
}
.detail-dialog::backdrop {
  background: #111b;
}
.detail-emoji {
  font-size: clamp(48px, 15cqmin, 216px);
  line-height: 1.2;
}
.detail-sfx {
  font-size: clamp(24px, 6cqmin, 86px);
}
/* Ending: story and four statistics in one frame. */
.ending-panel {
  flex: 1;
  border: 4px solid #111;
  padding: 3cqmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2cqmin;
  text-align: center;
}
.ending-panel.tone-bad {
  --panel-color: #e9a3b2;
}
.ending-panel.tone-meh {
  --panel-color: #b6d9e8;
}
.ending-panel.tone-secret {
  --panel-color: #c8b5f1;
}
.ending-badge {
  font-size: clamp(40px, 14cqmin, 200px);
  line-height: 1.1;
}
.ending-story {
  max-width: 85%;
  text-align: left;
  font-family: 'Be Vietnam Pro', sans-serif;
}
.ending-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 2cqmin;
}
.ending-stats > div {
  padding: 1cqmin;
  border: 3px solid #111;
  background: var(--paper);
}
.ending-stats strong, .ending-stats span {
  display: block;
}
.ending-stats strong {
  font-family: 'Baloo 2', sans-serif;
  font-size: clamp(20px, 4cqmin, 58px);
}
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.confetti span {
  position: absolute;
  top: -8cqmin;
  font-size: clamp(16px, 4cqmin, 58px);
  animation: confetti-fall 4s linear infinite;
}

/* Cut-ins: black outer silhouette, inset colour plane, radial rays, dots and vignette. */
.cutin {
  position: absolute;
  inset: 0;
  width: 100cqw;
  height: 100cqh;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: #111b;
  color: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 125.0cqmin;
}
.cutin:not([open]) {
  display: none;
}
.cutin::backdrop {
  background: transparent;
}
.cutin:after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  z-index: 5;
  pointer-events: none;
  animation: screen-flash 80ms linear both;
}
.cutin-panel {
  position: relative;
  width: 92cqw;
  height: 56cqh;
  clip-path: polygon(4% 10%,100% 0,96% 90%,0 100%);
  background: #111;
  isolation: isolate;
  animation: panel-enter .4s cubic-bezier(.16,.8,.24,1.08) both;
  filter: drop-shadow(8px 1.67cqmin 0 #111);
}
.cutin-color,.cutin-speed,.cutin-dots {
  position: absolute;
  inset: 8px;
  clip-path: polygon(4% 10%,100% 0,96% 90%,0 100%);
  z-index: -1;
}
.cutin-color {
  background: radial-gradient(ellipse at 38% 45%,#fff8,transparent 45%,#0009 100%),var(--family);
}
.cutin-speed {
  background: repeating-conic-gradient(from 0deg at 34% 46%,transparent 0deg 6deg,#fff8 6deg 7deg,transparent 7deg 14deg,#1116 14deg 15deg,transparent 15deg 20deg);
  animation: ray-shift 1s steps(3) infinite;
}
.cutin-dots {
  background-image: radial-gradient(#111 1.4px,transparent 1.8px);
  background-size: 8px 8px;
  opacity: .3;
  mask-image: linear-gradient(100deg,transparent,#000);
}
.cutin-emoji {
  position: absolute;
  left: 13%;
  top: 14%;
  font-size: 38cqh;
  line-height: 1.15;
  filter: drop-shadow(8px 1.67cqmin 0 #111) drop-shadow(-4px -3px 0 #fff);
  animation: emoji-burst .48s .05s cubic-bezier(.17,.75,.3,1.05) both,hero-zoom 2s .53s ease-out forwards;
  transform-origin: 50% 70%;
}
.cutin-impact {
  position: absolute;
  right: 8%;
  top: 10%;
  max-width: 52%;
  animation: word-impact .35s .18s cubic-bezier(.1,.8,.2,1.25) both;
}
.cutin-impact .sfx {
  font-size: clamp(7.77cqmin,8cqw,17.76cqmin);
  padding: 6.94cqmin 4.86cqmin;
  white-space: nowrap;
  -webkit-text-stroke: 4px #111;
  text-shadow: 6px 7px 0 var(--pink);
}
.cutin-name {
  position: absolute;
  bottom: 10%;
  left: 5%;
  right: 5%;
  background: #111;
  transform: rotate(-3deg);
  padding: 1.67cqmin 3.89cqmin;
  display: flex;
  align-items: center;
  gap: 2.78cqmin;
  animation: strip-enter .35s .2s both;
  box-shadow: 0 -3px 0 white,0 3px 0 white;
}
.cutin-name h2 {
  color: var(--yellow);
  font-size: clamp(2.89cqmin,2.8cqw,5.33cqmin);
  margin: 0;
  flex: 1;
  font-weight: 800;
}
.cutin-name p {
  font-family: 'Baloo 2',sans-serif;
  color: #111;
  background: white;
  border: 2px solid #111;
  border-radius: 1.67cqmin;
  padding: 1.39cqmin 2.22cqmin;
  margin: 0;
  max-width: 48%;
  font-size: clamp(12px, 2.44cqmin, 36px);
  line-height: 1.35;
}
.discovery-stamp {
  position: absolute;
  top: 13%;
  left: 5%;
  padding: 8px 1.67cqmin;
  border: 4px solid white;
  outline: 3px solid #111;
  background: var(--pink);
  color: white;
  transform: rotate(-12deg);
  box-shadow: 4px 4px 0 #111;
  animation: stamp-hit .28s .35s both;
  max-width: 34.72cqmin;
  z-index: 3;
}
.discovery-stamp strong {
  display: block;
  font-family: 'Bangers',sans-serif;
  font-size: 5.33cqmin;
  line-height: 1;
}
.discovery-stamp span {
  display: block;
  font-family: 'Baloo 2',sans-serif;
  font-size: clamp(12px, 1.78cqmin, 26px);
  font-weight: 800;
  margin-top: 4px;
}
.trending-stamp {
  position: absolute;
  right: 9%;
  top: 62%;
  padding: 7px 2.08cqmin;
  background: var(--blue);
  color: white;
  border: 3px solid #111;
  font-size: 4.44cqmin;
  transform: rotate(8deg);
  animation: stamp-hit .28s .4s both;
  -webkit-text-stroke: 1px #111;
  text-shadow: 2px 2px 0 #111;
}
.cutin-skip {
  position: absolute;
  bottom: max(4.17cqmin,env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 4px 4px 0 #111;
  max-width: 90cqw;
  white-space: nowrap;
}
.cutin-skip:hover:not(:disabled),.cutin-skip:active:not(:disabled) {
  transform: translateX(-50%);
}
.cutin.leaving .cutin-panel {
  animation: panel-exit .18s ease-in both;
}
.cutin.leaving .cutin-skip {
  opacity: 0;
}
.impact-shake .play-layout {
  animation: shake .3s .08s;
}
.impact-strong .play-layout {
  animation: strong-shake .4s .08s;
}
.villain .cutin-color {
  background: radial-gradient(ellipse at 35% 50%,#a1a1a1,#141414);
}
.villain .cutin-dots {
  background: repeating-linear-gradient(0deg,transparent 0 3px,#0009 3px 5px);
  opacity: .7;
}
.villain .cutin-impact .sfx {
  text-shadow: -5px 1px #00e5ff,6px -1px #ff004c;
  animation: glitch .16s steps(2) 5;
}
.villain .cutin-name {
  border-top: 3px solid #ff004c;
}
.hero-lineup {
  position: absolute;
  inset: 16% 12% 25%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-lineup span {
  font-size: clamp(5.0cqmin,5.5cqw,11.11cqmin);
  line-height: 1.1;
  filter: drop-shadow(4px 5px 0 #111);
  animation: assemble-hero .6s cubic-bezier(.16,.8,.2,1.12) both;
  animation-delay: calc(var(--i)*.035s);
}
.ultimate .cutin-color {
  background: radial-gradient(ellipse at center,#fff8e7,var(--yellow) 45%,var(--orange));
}
.ultimate .cutin-panel {
  height: 70cqh;
}
.ultimate .cutin-impact {
  top: 1%;
  left: 12%;
  right: 12%;
  max-width: none;
  text-align: center;
  z-index: 2;
}
.ultimate .cutin-impact .sfx {
  font-size: clamp(5.33cqmin,5cqw,11.1cqmin);
  padding: 2.78cqmin 4.17cqmin;
}
.ultimate .cutin-impact .burst:before,.ultimate .cutin-impact .burst:after {
  display: none;
}
.ultimate .discovery-stamp {
  top: 58%;
  left: 7%;
}
.ultimate .trending-stamp {
  top: 62%;
}
@keyframes cover-bob {
  0%,100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}
@keyframes pulse {
  from {
    opacity: .3;
  }
  to {
    opacity: 1;
  }
}
@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(1.67cqmin) scale(.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes screen-flash {
  0%,60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes panel-enter {
  0% {
    transform: translateX(110cqw) skewX(-16deg);
  }
  70% {
    transform: translateX(-3cqw) skewX(3deg);
  }
  100% {
    transform: translateX(0) skewX(0);
  }
}
@keyframes panel-exit {
  to {
    transform: translateX(-115cqw) skewX(12deg);
    opacity: .5;
  }
}
@keyframes emoji-burst {
  0% {
    transform: translateX(-70cqw) scale(.3) rotate(-12deg);
    opacity: 0;
  }
  65% {
    transform: translateX(1cqw) scale(1.15) rotate(-2deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1) rotate(-4deg);
    opacity: 1;
  }
}
@keyframes hero-zoom {
  from {
    transform: scale(1) rotate(-4deg);
  }
  to {
    transform: scale(1.06) rotate(-2deg);
  }
}
@keyframes word-impact {
  0% {
    opacity: 0;
    transform: scale(2.5) rotate(15deg);
  }
  70% {
    opacity: 1;
    transform: scale(.9) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes strip-enter {
  from {
    opacity: 0;
    transform: translateX(80%) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(-3deg);
  }
}
@keyframes stamp-hit {
  from {
    opacity: 0;
    scale: 2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes ray-shift {
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shake {
  0%,100% {
    transform: translate(0);
  }
  25% {
    transform: translate(-3px,2px);
  }
  50% {
    transform: translate(3px,-2px);
  }
  75% {
    transform: translate(-2px,0);
  }
}
@keyframes strong-shake {
  0%,100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-7px,4px);
  }
  40% {
    transform: translate(6px,-5px);
  }
  60% {
    transform: translate(-5px,3px);
  }
  80% {
    transform: translate(3px,-2px);
  }
}
@keyframes glitch {
  50% {
    transform: translateX(-3px);
    filter: hue-rotate(90deg);
  }
}
@keyframes assemble-hero {
  from {
    opacity: 0;
    transform: translate(var(--from-x),var(--from-y)) scale(.25) rotate(90deg);
  }
  to {
    opacity: 1;
    transform: translate(0,0) scale(1) rotate(0);
  }
}
@keyframes confetti-fall {
  to {
    transform: translateY(138.89cqmin) rotate(540deg);
  }
}
/* Portrait stages keep the same information in a vertical composition. */
@media (aspect-ratio < 1/1) {
  #app {
    width: min(100vw, 56.25dvh);
    height: min(100dvh, 177.777778vw);
  }
  .cover {
    grid-template-columns: 1fr;
    grid-template-rows: auto 29% 1fr auto;
  }
  .cover-heading {
    padding: 3cqmin;
  }
  .logo {
    font-size: clamp(38px, 15cqmin, 216px);
  }
  .cover-grid {
    grid-column: 1;
    grid-row: 3;
  }
  .cover-emoji {
    font-size: clamp(44px, 23cqmin, 330px);
  }
  .cover-panel .sfx {
    font-size: clamp(20px, 7cqmin, 100px);
  }
  .cover-footer {
    gap: 3cqmin;
    padding: 3cqmin;
  }
  .cover-footer .button {
    padding: 2cqmin;
  }
  .topbar-title {
    font-size: clamp(12px, 3cqmin, 43px);
  }
  .screen-prologue .topbar-title, .screen-intro .topbar-title {
    display: none;
  }
  .toon-art span {
    font-size: clamp(40px, 21cqmin, 300px);
  }
  .toon-caption, .toon-bubble {
    font-size: clamp(14px, 4cqmin, 58px);
  }
  .map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .map-meta {
    flex-wrap: wrap;
  }
  .map-description {
    padding: 1cqmin;
    gap: 1cqmin;
  }
  .map-description h2 {
    font-size: clamp(14px, 3.8cqmin, 54px);
  }
  .map-description p {
    line-height: 1.3;
  }
  .map-icon {
    font-size: clamp(24px, 8cqmin, 115px);
  }
  .hud {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1cqmin 2cqmin;
  }
  .hud-row {
    flex-basis: auto;
    flex-shrink: 0;
    flex-direction: column-reverse;
  }
  .hud-side {
    flex: none;
    flex-direction: row;
  }
  .hud-side > .play-menu { flex: 0 0 auto; order: 2; }
  .hud-side > .button { order: 1; }
  .hud-meters {
    grid-column: 1 / -1;
  }
  .hud-turn strong, .offer-number {
    font-size: clamp(16px, 4.5cqmin, 65px);
  }
  .hud-offer .eyebrow {
    display: none;
  }
  .hud-meters {
    gap: 1cqmin;
  }
  .play-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5cqmin;
  }
  .play-sidebar {
    gap: 1cqmin;
    flex-shrink: 0;
  }
  .linh-panel {
    display: flex;
    gap: 2cqmin;
    align-items: center;
  }
  .portrait {
    width: 11cqmin;
    height: 11cqmin;
    flex-shrink: 0;
  }
  .portrait > span:first-child {
    font-size: clamp(24px, 8cqmin, 115px);
  }
  .portrait .caption, .human-role, .squad-subtitle {
    display: none;
  }
  .linh-panel .bubble {
    flex: 1;
    padding: 1cqmin 2cqmin;
  }
  .squad-panel {
    display: flex;
    align-items: center;
    gap: 2cqmin;
    padding: 1cqmin;
  }
  .squad-panel h2 {
    font-size: clamp(12px, 3cqmin, 43px);
  }
  .squad-list {
    margin: 0;
    flex: 1;
    flex-wrap: nowrap;
    gap: 1cqmin;
  }
  .squad-emoji {
    width: 5.5cqmin;
    height: 5.5cqmin;
    font-size: clamp(14px, 4cqmin, 58px);
  }
  .squad-remaining {
    margin-left: auto;
    white-space: nowrap;
  }
  .email-client {
    flex: 1;
  }
  .email-toolbar, .compose > label {
    display: none;
  }
  .email-thread {
    padding: 1cqmin 2cqmin;
  }
  .email-body {
    font-size: clamp(12px, 3.2cqmin, 46px);
    line-height: 1.3;
  }
  .email-sender {
    font-size: clamp(12px, 3.1cqmin, 44px);
    line-height: 1.2;
  }
  .email-client > .pager .button {
    padding: 1cqmin 2cqmin;
  }
  .compose-footer > span {
    max-width: 67%;
    line-height: 1.2;
  }
  .compose {
    gap: 1cqmin;
  }
  textarea {
    font-size: clamp(12px, 3.3cqmin, 47px);
  }
  .screen-collection .page-heading h1 {
    font-size: clamp(24px, 7cqmin, 100px);
  }
  .screen-collection .eyebrow {
    display: none;
  }
  .emoji-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .card-emoji {
    font-size: clamp(28px, 9cqmin, 130px);
  }
  .card-family {
    font-size: clamp(12px, 3cqmin, 43px);
  }
  .phrase-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .ending-card h2 {
    overflow-wrap: anywhere;
  }
  .detail-dialog {
    width: 90cqw;
    font-size: clamp(12px, 3.8cqmin, 54px);
  }
  .ending-story {
    max-width: 100%;
    font-size: clamp(12px, 3.7cqmin, 53px);
  }
  .ending-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ending-panel .actions {
    flex-wrap: wrap;
  }
  .cutin-panel {
    height: 76cqh;
  }
  .cutin-emoji {
    left: 10%;
    top: 23%;
    font-size: 46cqw;
  }
  .cutin-impact {
    top: 8%;
    right: 8%;
    max-width: 80%;
  }
  .cutin-impact .sfx {
    font-size: clamp(28px, 10cqmin, 144px);
    padding: 7cqmin 4cqmin;
    -webkit-text-stroke: 2px #111;
  }
  .cutin-name {
    display: grid;
    gap: 1cqmin;
    padding: 2cqmin 4cqmin;
    bottom: 10%;
  }
  .cutin-name h2 {
    font-size: clamp(18px, 5cqmin, 72px);
  }
  .cutin-name p {
    max-width: 100%;
    font-size: clamp(12px, 3.5cqmin, 50px);
    padding: 1cqmin 2cqmin;
  }
  .discovery-stamp {
    top: 35%;
    left: 8%;
    max-width: 42%;
    padding: 1cqmin;
  }
  .discovery-stamp strong {
    font-size: clamp(20px, 6cqmin, 86px);
  }
  .discovery-stamp span {
    font-size: clamp(12px, 3cqmin, 43px);
  }
  .trending-stamp {
    top: 58%;
    font-size: clamp(18px, 5cqmin, 72px);
  }
  .cutin-skip {
    white-space: normal;
    width: 85cqw;
    bottom: 3cqh;
  }
  .ultimate .cutin-panel {
    height: 80cqh;
  }
  .ultimate .cutin-impact {
    top: 10%;
    left: 5%;
    right: 5%;
  }
  .ultimate .cutin-impact .sfx {
    white-space: normal;
    font-size: clamp(24px, 9cqmin, 130px);
  }
  .hero-lineup {
    inset: 30% 8% 37%;
    gap: 1cqmin;
  }
  .hero-lineup span {
    font-size: clamp(22px, 7cqmin, 100px);
  }
  .ultimate .discovery-stamp {
    top: 51%;
  }
  .ultimate .trending-stamp {
    top: 60%;
  }
}
@keyframes comic-page {
  from {
    opacity: 0;
    transform: translateX(2cqmin) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toast {
  0% {
    opacity: 0;
    transform: translateY(1cqmin);
  }
  10%, 75% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-1cqmin);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .toon-panel, .cutin-panel {
    animation: gentle-fade .15s both !important;
  }
  .cutin::after {
    display: none;
  }
  .cutin.leaving .cutin-panel {
    opacity: 0;
  }
  .confetti span {
    top: calc(8% + var(--i) * 3%);
  }
}
@keyframes gentle-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (aspect-ratio < 1/1) {
  .play-sidebar {
    display: grid;
    grid-template-columns: 11cqmin 1fr;
    grid-template-rows: auto auto;
    gap: 1cqmin 2cqmin;
  }
  .linh-panel {
    display: contents;
  }
  .portrait {
    grid-row: 1 / 3;
    height: 100%;
  }
  .linh-panel .bubble {
    grid-column: 2;
    font-size: clamp(12px, 3.2cqmin, 46px);
    padding: .5cqmin 1cqmin;
  }
  .linh-panel .bubble::after {
    display: none;
  }
  .squad-panel {
    grid-column: 2;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    gap: 1cqmin;
  }
  .squad-panel h2 {
    display: none;
  }
  .squad-emoji {
    width: 5cqmin;
    height: 5cqmin;
  }
  .email-sender .avatar {
    font-size: clamp(18px, 5cqmin, 72px);
  }
  .email-subject {
    padding: 1cqmin;
  }
  .compose-footer > span {
    font-size: clamp(12px, 3cqmin, 43px);
  }
}

/* ---------- Pixel-art emoji sprites (assets/emoji, 19×19) ---------- */
/* 1em square, so each sprite takes the size the old emoji glyph had in that spot. */
.px {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
}

.cutin-emoji .px,
.cover-emoji .px,
.ending-badge .px,
.map-icon .px,
.toon-art .px,
.detail-emoji .px,
.card-emoji .px,
.portrait .px,
.hero-lineup .px {
  display: block;
  width: 1em;
  height: 1em;
  margin-inline: auto;
}

/* Pager: back | page number | next, with the number always centered. */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.pager > :first-child {
  justify-self: start;
}
.pager > :last-child {
  justify-self: end;
}

/* ---------- Chat client (Chương 2) ---------- */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqmin;
  padding: 1cqmin 2cqmin;
  background: #0068ff;
  color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: clamp(12px, 1.8cqmin, 26px);
}
.chat-group {
  margin: 0;
  font-size: clamp(13px, 2.2cqmin, 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1cqmin;
  background: #e9edf2;
}
.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 0.8cqmin;
  max-width: 85%;
}
.chat-message.mine {
  align-self: flex-end;
}
.chat-message .avatar {
  flex-shrink: 0;
}
.chat-bubble {
  background: #fff;
  border-radius: clamp(8px, 1.6cqmin, 22px);
  padding: 0.8cqmin 1.4cqmin;
  font-family: 'Be Vietnam Pro', sans-serif;
  box-shadow: 0 1px 1px #0002;
}
.chat-message.mine .chat-bubble {
  background: #d7e7ff;
}
.chat-name {
  display: block;
  font-size: clamp(12px, 1.6cqmin, 22px);
  color: #0068ff;
}
.chat-text {
  margin: 0.3cqmin 0;
  font-size: clamp(12px, 1.9cqmin, 27px);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-bubble time {
  display: block;
  text-align: right;
  font-size: clamp(10px, 1.3cqmin, 18px);
  color: #6a7280;
}

/* Endings tab: one chapter per page. */
.endings-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto repeat(2, minmax(0, 1fr));
}
.chapter-heading {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(13px, 2.4cqmin, 34px);
}
@media (aspect-ratio < 1/1) {
  .endings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(5, minmax(0, 1fr));
  }
}
.map-record {
  display: block;
  font-size: clamp(12px, 1.6cqmin, 22px);
  font-weight: 800;
  margin: 0.5cqmin 0;
}

/* ---------- Chatbot client (Chương 3) ---------- */
.tool-prompt .chat-header {
  background: #202123;
}
.tool-prompt .chat-thread {
  background: #fff;
}
.tool-prompt .chat-message.theirs .chat-bubble {
  background: transparent;
  box-shadow: none;
}
.tool-prompt .chat-message.mine .chat-bubble {
  background: #f0f0f0;
}
.tool-prompt .chat-name {
  color: #10a37f;
}
/* The LinkedIn draft is shown as a document card. */
.chat-message.role-draft {
  max-width: 100%;
  align-self: stretch;
}
.chat-message.role-draft .chat-bubble {
  flex: 1;
  background: #fffdf2;
  border: 2px dashed #c9b458;
  box-shadow: none;
}
.chat-message.role-draft .chat-name {
  color: #8a6d00;
}

/* Mail, group chat and chatbot: the conversation scrolls inside the window (the page itself never scrolls). */
.email-client .email-thread {
  min-height: 0;
  flex-direction: column;
  gap: 1cqmin;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: auto;
  scrollbar-color: #FFE14D #111;
}
.email-client .email-thread > * {
  flex-shrink: 0; /* messages keep their height; the list scrolls instead of squashing */
}
.email-client .chat-thread > :first-child {
  margin-top: auto; /* short chats sit at the bottom, like a messenger */
}
.email-client .email-thread::-webkit-scrollbar {
  width: 14px;
}
.email-client .email-thread::-webkit-scrollbar-track {
  background: #111;
}
.email-client .email-thread::-webkit-scrollbar-thumb {
  background: #FFE14D;
  border: 3px solid #111;
  border-radius: 0;
}
.email-client .email-message + .email-message {
  border-top: 1px solid #e3e6ea;
  padding-top: 1.5cqmin;
}
.email-client .typing {
  padding: 0 0 0 1cqmin;
}
.email-client .chat-thread {
  justify-content: flex-start; /* flex-end would push old messages out of the scrollable area */
}
.tool-prompt .chat-message {
  max-width: 92%;
}
.tool-prompt .chat-message.theirs.role-hr {
  max-width: 100%;
}
.tool-prompt .chat-message.mine .chat-bubble {
  border-radius: clamp(12px, 2.4cqmin, 30px);
  padding: 1cqmin 1.8cqmin;
}
/* Composer: rounded box with a round send button inside. */
.tool-prompt .compose {
  position: relative;
  border-top: 0;
}
.tool-prompt .compose > label,
.tool-prompt .compose-footer > span {
  display: none;
}
.tool-prompt textarea {
  border: 2px solid #d0d0d0;
  border-radius: clamp(14px, 2.6cqmin, 34px);
  padding: 1.2cqmin 7cqmin 1.2cqmin 2cqmin;
  background: #f7f7f8;
}
.tool-prompt .compose-footer {
  position: absolute;
  right: 3cqmin;
  bottom: 1.8cqmin;
}
.tool-prompt .send-button {
  width: clamp(30px, 5cqmin, 64px);
  height: clamp(30px, 5cqmin, 64px);
  padding: 0;
  border-radius: 50%;
  font-size: clamp(16px, 2.6cqmin, 34px);
  line-height: 1;
}
.bot-disclaimer {
  margin: 0;
  padding: 0 2cqmin 0.8cqmin;
  text-align: center;
  color: #6a7280;
  font-size: clamp(11px, 1.4cqmin, 19px);
}

/* ---------- Search engine (Chương 4) ---------- */
.tool-search .chat-header {
  background: #fff;
  color: #5f6368;
  border-bottom: 1px solid #e3e6ea;
}
.tool-search .chat-group {
  color: #3FA9F5;
  font-family: 'Baloo 2', sans-serif;
  font-size: clamp(16px, 3cqmin, 40px);
}
.tool-search .chat-thread {
  background: #fff;
  gap: 1.2cqmin;
}
.search-query {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1cqmin;
  align-self: stretch;
  border: 2px solid #dfe1e5;
  border-radius: 999px;
  padding: 0.8cqmin 2cqmin;
  font-family: 'Be Vietnam Pro', sans-serif;
  box-shadow: 0 1px 4px #0001;
}
.search-query p {
  margin: 0;
  flex: 1;
  font-size: clamp(12px, 1.9cqmin, 27px);
}
.ai-overview {
  background: #f1f6ff;
  border-radius: clamp(8px, 1.6cqmin, 20px);
  padding: 1cqmin 1.6cqmin;
  font-family: 'Be Vietnam Pro', sans-serif;
}
.ai-overview strong {
  display: block;
  color: #5b3fd1;
  font-size: clamp(12px, 1.6cqmin, 22px);
}
.ai-overview p {
  margin: 0.4cqmin 0 0;
  white-space: pre-wrap;
  font-size: clamp(12px, 1.8cqmin, 25px);
  line-height: 1.45;
}
.search-result {
  font-family: 'Be Vietnam Pro', sans-serif;
  padding: 0 0.6cqmin;
}
.search-result cite {
  display: block;
  font-style: normal;
  color: #188038;
  font-size: clamp(11px, 1.4cqmin, 19px);
}
.search-result h3 {
  margin: 0.2cqmin 0;
  color: #1a0dab;
  font-size: clamp(13px, 2cqmin, 28px);
  font-weight: 600;
}
.search-result p {
  margin: 0;
  color: #4d5156;
  font-size: clamp(12px, 1.6cqmin, 22px);
  line-height: 1.45;
}
.search-result.kind-ad cite::before {
  content: 'Được tài trợ · ';
  font-weight: 800;
  color: #202124;
}
.search-result.kind-real {
  border-left: 4px solid #5BC236;
  padding-left: 1.2cqmin;
}

/* Map with 6 panels (3×2 / 2×3): icon beside the description so neither covers the other. */
.map-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  min-height: 0;
}
.map-meta {
  grid-column: 1 / -1;
}
.map-icon {
  font-size: clamp(24px, 7cqmin, 100px);
  padding: 0 0.6cqmin;
}
.map-description {
  min-height: 0;
  gap: 0.8cqmin;
  padding: 1cqmin;
}
.map-description p {
  margin: 0;
}
@media (aspect-ratio < 1/1) {
  .map-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .map-icon {
    font-size: clamp(20px, 6cqmin, 70px);
  }
  .map-description p {
    display: none; /* portrait: title + button only, the teaser does not fit */
  }
}

/* Chapter 5: social post and comments, within the shared scrolling thread. */
.tool-social .chat-thread, .tool-dating .chat-thread { background: #fff4f7; }
.tool-social .chat-thread { background: #f1f3f5; }
.tool-social .chat-thread > :first-child, .tool-dating .chat-thread > :first-child { margin-top: 0; }
.social-post, .dating-match {
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5cqmin;
  overflow-wrap: anywhere;
}
.social-author, .social-comment { display: flex; align-items: flex-start; gap: 1cqmin; }
.social-author .avatar, .social-comment .avatar { flex-shrink: 0; }
.social-author time, .comment-actions { display: block; color: #68707b; font-size: clamp(10px, 1.5cqmin, 20px); }
.author-badge { display: inline-block; margin-left: .8cqmin; padding: 0 .6cqmin; border-radius: 4px; background: #e3edff; color: #24579d; font-size: .8em; }
.social-reactions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1cqmin; border-top: 1px solid #ddd; margin-top: 1cqmin; padding-top: 1cqmin; font-size: clamp(11px, 1.7cqmin, 24px); }
.social-comment-body { flex: 1; padding: 1cqmin; border-radius: 12px; background: white; }
.social-comment.role-bot { color: #727780; }
.social-comment.role-bot .social-comment-body { background: #e8eaed; }
.social-removed { color: #737780; font-style: italic; padding: 1cqmin; }

/* Chapter 6: match card, private messages and app system notes. */
.tool-dating .chat-header { background: #d63972; }
.dating-match { display: flex; flex-direction: column; align-items: center; gap: .7cqmin; text-align: center; }
.match-avatar { font-size: clamp(40px, 8cqmin, 100px); line-height: 1; }
.match-score { border-radius: 999px; padding: .5cqmin 1.5cqmin; background: #ffe0ec; color: #a92355; font-weight: 700; }
.dating-match small, .dating-note, .dating-seen { color: #73707a; font-size: clamp(10px, 1.5cqmin, 20px); }
.dating-note { text-align: center; padding: 1cqmin; overflow-wrap: anywhere; }
.tool-dating .chat-bubble { border-radius: 18px; background: white; }
.tool-dating .chat-message.mine .chat-bubble { background: linear-gradient(135deg, #ff5f8f, #ff8fb1); color: white; }
.dating-seen { display: block; text-align: right; padding: .4cqmin 1cqmin 0; }
.tool-social .typing, .tool-dating .typing { position: static; align-self: flex-start; border: 0; background: transparent; color: #73707a; }
.tool-dating .typing > span { display: inline-block; animation: dating-dots 1s ease-in-out infinite; }
@keyframes dating-dots { 50% { opacity: .25; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .tool-dating .typing > span { animation: none; } }

/* Eight-panel chapter map: 4×2 landscape, 2×4 portrait. */
.screen-map .map-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.screen-map .map-panel { padding: 1cqmin; gap: .7cqmin; }
.screen-map .map-meta { font-size: clamp(10px, 1.5cqmin, 21px); flex-wrap: wrap; }
.screen-map .map-icon { font-size: clamp(24px, 5cqmin, 72px); padding: 0; }
.screen-map .map-description { gap: .6cqmin; }
.screen-map .map-description h2 { font-size: clamp(14px, 2.3cqmin, 32px); }
.screen-map .map-description p, .screen-map .map-record { font-size: clamp(10px, 1.5cqmin, 21px); line-height: 1.3; }
.screen-map .map-description .button, .screen-map .locked-stamp { font-size: clamp(10px, 1.6cqmin, 22px); padding: .5cqmin; }
@media (aspect-ratio < 1/1) {
  .screen-map .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .screen-map .map-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .screen-map .map-meta, .screen-map .map-icon, .screen-map .map-description p, .screen-map .map-record { display: none; }
  .screen-map .map-description { align-self: stretch; align-content: center; gap: 2cqmin; padding: 1.5cqmin; }
  .screen-map .map-description h2 { font-size: clamp(14px, 3.8cqmin, 28px); }
  .screen-map .map-description .button, .screen-map .locked-stamp { font-size: clamp(10px, 2.8cqmin, 20px); }
}

/* Sunny, chapter discoveries and team attacks. */
.sunny-companion { display: flex; align-items: center; gap: 1cqmin; min-width: 0; }
.sunny-face { flex-shrink: 0; font-size: clamp(24px, 5cqmin, 64px); }
.sunny-companion .bubble { margin: 0; padding: 1cqmin; font-size: clamp(11px, 1.8cqmin, 24px); overflow-wrap: anywhere; }
.sunny-pop .sunny-face { animation: sunny-pop .3s ease-out; }
@keyframes sunny-pop { 50% { transform: translateY(-4px) scale(1.15); } }
.play-sidebar, .sunny-companion .bubble { min-width: 0; }
.hud-side .button { white-space: normal; overflow-wrap: anywhere; }
.chapter-dialog { width: min(90cqw, 720px); max-width: 94vw; max-height: 85cqh; padding: 2cqmin; border: 4px solid #111; background: #fff9e7; overflow-y: auto; }
.chapter-dialog::backdrop { background: #111a; }
.chapter-dialog h2 { font-size: clamp(18px, 3cqmin, 36px); }
.chapter-list { display: grid; gap: 1cqmin; margin-bottom: 2cqmin; }
.chapter-emoji { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2cqmin; padding: 1cqmin; border: 2px solid #111; background: white; overflow-wrap: anywhere; }
.chapter-emoji p { margin: .5cqmin 0 0; }
.chapter-sprite { font-size: clamp(32px, 7cqmin, 72px); }
.chapter-sprite.undiscovered { filter: brightness(0); }
.combo-cutin .cutin-panel { display: flex; flex-direction: column; gap: 1.5cqmin; width: 88cqw; height: 80cqh; padding: 2cqmin; clip-path: none; border: 4px solid #111; background: #fff9e7; overflow-y: auto; filter: none; }
.combo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqmin; min-height: 0; flex: 1; overflow-y: auto; }
.combo-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 12cqmin; padding: 1cqmin; border: 3px solid #111; background-color: var(--family); overflow-wrap: anywhere; text-align: center; }
.combo-sprite { font-size: clamp(28px, 7cqmin, 80px); }
.combo-tile strong { font-size: clamp(11px, 2cqmin, 26px); }
.combo-new { position: absolute; top: 0; left: 0; background: #E8336D; color: white; padding: 2px 4px; font-size: clamp(10px, 1.5cqmin, 20px); font-weight: 900; }
.combo-title { flex-shrink: 0; margin: 0; padding: 2cqmin 4cqmin; background: #FFE14D; color: #111; font-size: clamp(18px, 4cqmin, 56px); text-align: center; overflow-wrap: anywhere; }
.combo-sunny { display: flex; justify-content: center; align-items: center; gap: 2cqmin; }
.combo-sunny .bubble { margin: 0; padding: 1cqmin; font-size: clamp(12px, 2.4cqmin, 30px); }
.combo-cutin .caption { margin: 0; font-size: clamp(11px, 2cqmin, 26px); overflow-wrap: anywhere; }
.screen-ending .webtoon, .screen-ending .toon-panel { min-height: 0; min-width: 0; }
.screen-ending .toon-panel { overflow-y: auto; }
.screen-ending .toon-art { flex-wrap: wrap; gap: 1cqmin; }
.screen-ending .toon-art span { font-size: clamp(28px, 10cqmin, 130px); }
@media (aspect-ratio < 1/1) {
  .sunny-companion { grid-column: 1 / -1; grid-row: 3; }
  .sunny-face { font-size: clamp(22px, 6cqmin, 50px); }
  .sunny-companion .bubble { flex: 1; padding: .5cqmin 1cqmin; font-size: clamp(11px, 3cqmin, 24px); }
  .sunny-companion .bubble::after { display: none; }
  .combo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combo-tile { min-height: 17cqmin; }
  .combo-cutin .cutin-panel { height: 78cqh; }
  .chapter-emoji { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sunny-pop .sunny-face { animation: none; } }

/* Star ratings and the 0–150 leverage scale. */
.offer-track {
  flex-shrink: 0;
  margin-top: clamp(14px, 2.4cqmin, 30px);
  margin-bottom: 4px;
}
.star-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  border-left: 3px solid #111;
  transform: translateX(-1.5px);
}
.star-icons {
  position: absolute;
  bottom: calc(100% + 1px);
  left: 0;
  transform: translateX(-50%);
  display: flex;
  white-space: nowrap;
}
.pixel-star {
  width: clamp(14px, 2.2cqmin, 30px);
  height: auto;
  image-rendering: pixelated;
}
.star-marker:not(.reached) .pixel-star { filter: grayscale(1) brightness(1.15); opacity: .7; }
.star-marker.reached .pixel-star { animation: rating-pop .35s ease-out both; }
.map-stars .pixel-star { width: clamp(20px, 3cqmin, 36px); }
.ending-stars .pixel-star { width: clamp(44px, 9cqmin, 110px); margin: 0 .4cqmin; }
.map-stars { display: flex; gap: 2px; line-height: 1; }
.unlock-requirement { display: block; font-size: clamp(10px, 1.5cqmin, 18px); line-height: 1.3; overflow-wrap: anywhere; }
.screen-map .map-panel { overflow-y: auto; }
.screen-map .map-description { flex-shrink: 0; }
.ending-panel { overflow-y: auto; overflow-wrap: anywhere; }
.ending-panel > * { flex-shrink: 0; max-width: 100%; }
.ending-rating { width: 100%; }
.ending-stars {
  display: flex;
  justify-content: center;
  line-height: 1;
  animation: rating-pop .45s ease-out both;
}
.ending-rating p { margin-top: .5cqmin; font-size: clamp(12px, 2cqmin, 24px); }
.ending-unlock { font-weight: 700; }
@keyframes rating-pop {
  0% { opacity: 0; transform: scale(.5); }
  70% { opacity: 1; transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (aspect-ratio < 1/1) {
  .screen-map .map-description { gap: .7cqmin; align-content: start; }
  .screen-map .map-panel { grid-template-rows: auto; }
  .ending-stats strong { font-size: clamp(18px, 4cqmin, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .ending-stars { animation: none; }
}

/* Finish control and discovered emoji vocabulary wrap on narrow screens. */
.compose-footer { flex-wrap: wrap; }
.finish-button { margin-left: auto; white-space: nowrap; }
.emoji-triggers { display: flex; flex-wrap: wrap; gap: .4em; text-align: left; min-width: 0; }
.emoji-triggers > strong { flex-basis: 100%; }
.trigger-chip { border: 1px solid #777; border-radius: 1em; padding: .2em .6em; font-size: .8em; background: #fff8df; color: #222; overflow-wrap: anywhere; max-width: 100%; }
.fall-phrase .trending-stamp { position: static; display: inline-block; font-size: clamp(28px, 6cqmin, 64px); }
.fall-phrase h2 { margin-top: 1em; font-size: clamp(26px, 5cqmin, 56px); overflow-wrap: anywhere; }

.detail-dialog:has(.emoji-triggers) { overflow-y: auto; }