:root {
  --bg: #080e19;
  --panel: #101a29;
  --panel2: #152131;
  --line: #253346;
  --text: #f2f5f5;
  --muted: #8d9aab;
  --orange: #ff6b45;
  --mint: #a6ead9;
  --cream: #e9eddd;
  font-family: "DM Sans", "Noto Sans KR", sans-serif;
  color: var(--text);
  background: var(--bg);
}
* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 95% -15%, #122332 0, transparent 34%), var(--bg);
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
a {
  color: inherit;
  text-decoration: none;
}
.hidden {
  display: none !important;
}
.noise {
  pointer-events: none;
  position: fixed;
  z-index: 30;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.app-shell {
  max-width: 1600px;
  padding: 0 5.7%;
  margin: 0 auto;
}
.topbar {
  height: 88px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #263142;
  gap: 75px;
}
.brand {
  display: inline-flex;
  align-items: center;
  font-family: Manrope, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -1.2px;
  white-space: nowrap;
}
.brand-accent {
  color: var(--orange);
}
.brand-dot {
  color: var(--orange);
  font-size: 22px;
}
.brand-mark {
  height: 22px;
  width: 27px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-right: 12px;
}
.brand-mark span {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: var(--orange);
}
.brand-mark span:nth-child(1),
.brand-mark span:nth-child(4) {
  height: 10px;
}
.brand-mark span:nth-child(2) {
  height: 19px;
}
.brand-mark span:nth-child(3) {
  height: 15px;
}
.top-nav {
  display: flex;
  align-self: stretch;
  gap: 37px;
}
.nav-link {
  border: 0;
  background: none;
  color: #758296;
  font-weight: 700;
  font-size: 13px;
  padding: 0;
  position: relative;
}
.nav-link.active {
  color: #f0f4f5;
}
.nav-link.active:after {
  content: "";
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  background: var(--orange);
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.live-indicator {
  font:
    700 10px Manrope,
    sans-serif;
  letter-spacing: 1.5px;
  color: #b3c5c3;
  white-space: nowrap;
}
.live-indicator i,
.note-pulse,
.risk > span,
.connection-dot {
  display: inline-block;
  background: #8bdbbd;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  box-shadow: 0 0 12px #6adeae;
}
.icon-button {
  background: none;
  border: 0;
  color: #a6b4c3;
  width: 30px;
  height: 30px;
  padding: 5px;
}
.icon-button svg {
  width: 100%;
}
.icon-button.muted {
  opacity: 0.4;
}
.avatar-button {
  height: 33px;
  width: 33px;
  border: 1px solid #435064;
  background: #213047;
  color: #d4e0e7;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}
.intro {
  height: 410px;
  position: relative;
  overflow: hidden;
  padding: 62px 5.5% 38px;
  margin-top: 24px;
  border: 1px solid #253344;
  background:
    radial-gradient(circle at 76% 45%, #263d47 0, #152635 19%, transparent 43%),
    linear-gradient(115deg, #111d2e 0%, #101b2b 51%, #102532 100%);
}
.intro:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 46%,
      #ffffff05 46.1%,
      transparent 46.5%
    ),
    repeating-linear-gradient(0deg, transparent 0 49px, #ffffff05 50px 51px);
  mask-image: linear-gradient(to right, transparent 42%, #000 100%);
  pointer-events: none;
}
.intro:after {
  content: "S/O";
  position: absolute;
  right: 5%;
  top: -60px;
  font: 800 310px Manrope, sans-serif;
  letter-spacing: -40px;
  color: #d3ffef08;
  pointer-events: none;
}
.eyebrow,
.section-kicker {
  font:
    800 10px Manrope,
    sans-serif;
  letter-spacing: 2.4px;
  color: var(--orange);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
}
.eyebrow-line {
  width: 18px;
  height: 1px;
  background: var(--orange);
}
.eyebrow-square {
  width: 3px;
  height: 3px;
  background: var(--orange);
}
.intro h1 {
  font-family: "Noto Sans KR", sans-serif;
  font-size: clamp(44px, 4.4vw, 70px);
  line-height: 1.18;
  letter-spacing: -5px;
  margin: 25px 0 18px;
  font-weight: 800;
  position: relative;
  z-index: 2;
}
.intro h1 em {
  font-style: normal;
  color: var(--cream);
}
.title-period {
  color: var(--orange);
}
.intro p {
  font-size: 14px;
  line-height: 1.85;
  color: #a9b7c4;
  margin: 0;
  position: relative;
  z-index: 2;
}
.intro-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 25px;
  position: relative;
  z-index: 2;
}
.primary-button {
  border: 0;
  background: var(--orange);
  color: #111923;
  min-height: 48px;
  padding: 0 22px;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition:
    transform 0.2s,
    background 0.2s;
}
.primary-button:hover {
  background: #ff8968;
  transform: translateY(-2px);
}
.button-arrow {
  font-size: 20px;
  font-weight: 400;
}
.intro-note {
  font-size: 11px;
  color: #91a4b5;
}
.note-pulse {
  width: 5px;
  height: 5px;
}
.orb {
  position: absolute;
  border-radius: 50%;
  right: 15%;
  top: 14%;
  width: 280px;
  height: 280px;
  border: 1px solid #9edccb30;
  box-shadow:
    0 0 0 39px #a9efd006,
    0 0 0 78px #a9efd005,
    inset 0 0 50px #9ad3bd12;
  transform: rotate(-23deg);
}
.orb:before {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid #94debd20;
  border-radius: 50%;
}
.orb:after {
  content: "";
  position: absolute;
  left: 16%;
  top: 10%;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #ec735340;
  filter: blur(13px);
}
.orb-two {
  width: 115px;
  height: 115px;
  right: 20.6%;
  top: 34%;
  border-color: #fca98480;
  box-shadow:
    0 0 45px #fa774338,
    inset 0 0 30px #fa774325;
}
.orb-two:before {
  inset: 23px;
  border-color: #ffb19060;
}
.orb-two:after {
  inset: 39px;
  width: auto;
  height: auto;
  background: #ff9777;
  border-radius: 50%;
  filter: blur(9px);
}
.hero-metadata {
  position: absolute;
  bottom: 20px;
  right: 28px;
  display: flex;
  gap: 28px;
  color: #74919a;
  font: 800 9px Manrope, sans-serif;
  letter-spacing: 2px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 275px;
  gap: 28px;
  margin-top: 47px;
}
.section-heading {
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.section-heading h2 {
  margin: 7px 0 0;
  font-size: 20px;
  letter-spacing: -1px;
}
.count {
  font: 700 12px Manrope, sans-serif;
  color: var(--orange);
  vertical-align: top;
  margin-left: 4px;
}
.section-side {
  color: #778697;
  font-size: 11px;
  margin-top: 26px;
}
.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}
.mission-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  width: 100%;
  height: 382px;
  padding: 24px 25px 17px;
  border: 1px solid #2d3b4d;
  background: #142031;
  color: var(--text);
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.mission-card:hover {
  transform: translateY(-5px);
  border-color: #8292a0;
  box-shadow: 0 22px 45px #0005;
}
.mission-card.blackout {
  background: radial-gradient(
    circle at 50% 32%,
    #32303e,
    #1b2332 37%,
    #151d2b 73%
  );
}
.mission-card.impostor {
  background: radial-gradient(
    circle at 52% 26%,
    #204749,
    #182e37 44%,
    #15232d 85%
  );
}
.mission-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 24px,
    #ffffff04 25px 26px
  );
}
.card-top,
.card-copy,
.card-bottom {
  position: relative;
  z-index: 2;
}
.card-top,
.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mission-number,
.risk,
.card-label,
.card-bottom {
  font:
    800 10px Manrope,
    sans-serif;
  letter-spacing: 1.5px;
}
.mission-number {
  color: #c2d0d7;
}
.risk {
  border: 1px solid #a977605d;
  color: #e79e83;
  padding: 7px 8px;
  letter-spacing: 0.6px;
}
.risk > span {
  width: 5px;
  height: 5px;
  background: #ff7959;
  box-shadow: 0 0 9px #ff7959;
}
.risk-medium {
  color: #a5d9c4;
  border-color: #739b865b;
}
.risk-medium > span {
  background: #9ddbbd;
  box-shadow: 0 0 9px #9ddbbd;
}
.card-art {
  height: 160px;
  position: relative;
  display: block;
  flex-shrink: 0;
}
.art-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #f297766b;
  border-radius: 50%;
  height: 170px;
  width: 170px;
  box-shadow:
    0 0 20px #f2734740,
    inset 0 0 22px #f2734720;
}
.ring-b {
  height: 116px;
  width: 116px;
  border-color: #f5a48c82;
}
.ring-c {
  height: 65px;
  width: 65px;
  border-color: #ffb59db0;
}
.art-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffe0cf;
  background: #ff835a38;
  box-shadow: 0 0 28px #ff805a77;
}
.art-center svg {
  width: 27px;
}
.signal {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  width: 180px;
  background: linear-gradient(90deg, #ff8769a8, transparent);
  transform-origin: left;
}
.signal-1 {
  transform: rotate(23deg);
}
.signal-2 {
  transform: rotate(160deg);
}
.id-card {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 175px;
  height: 132px;
  transform: translate(-50%, -50%) rotate(-9deg);
  background: linear-gradient(135deg, #d9e5d8, #aebfb5);
  box-shadow: 14px 18px 25px #071a2080;
  padding: 12px;
  color: #17302f;
}
.id-header {
  display: block;
  font: 800 8px Manrope, sans-serif;
  letter-spacing: 1px;
  border-bottom: 1px solid #819f92;
  padding-bottom: 7px;
}
.id-symbol {
  font-size: 15px;
  margin-right: 4px;
}
.id-portrait {
  position: absolute;
  bottom: 13px;
  left: 13px;
  width: 49px;
  height: 60px;
  overflow: hidden;
  background: #547269;
}
.id-portrait:before {
  content: "";
  position: absolute;
  left: 15px;
  top: 9px;
  background: #b7ccba;
  width: 20px;
  height: 24px;
  border-radius: 50%;
}
.id-portrait span {
  position: absolute;
  left: 6px;
  bottom: -16px;
  width: 39px;
  height: 40px;
  background: #b7ccba;
  border-radius: 50% 50% 0 0;
}
.id-lines {
  position: absolute;
  left: 72px;
  top: 53px;
  display: grid;
  gap: 7px;
}
.id-lines i {
  width: 79px;
  height: 3px;
  background: #7e9b8e;
}
.id-lines i:nth-child(2) {
  width: 54px;
}
.id-lines i:nth-child(3) {
  width: 68px;
}
.id-stamp {
  position: absolute;
  bottom: 12px;
  right: 13px;
  font: 800 7px Manrope, sans-serif;
  line-height: 1.3;
  color: #346860;
  text-align: right;
}
.art-cross {
  position: absolute;
  color: #a7d9c766;
  font-size: 20px;
  font-weight: 300;
}
.cross-one {
  left: 12%;
  top: 25%;
}
.cross-two {
  right: 14%;
  bottom: 13%;
}
.card-copy {
  margin-top: auto;
}
.card-label {
  color: #fa916b;
}
.impostor .card-label {
  color: #a9dac4;
}
.card-copy strong {
  display: block;
  font:
    800 28px Manrope,
    sans-serif;
  letter-spacing: -1.4px;
  margin: 7px 0;
}
.card-desc {
  color: #a9b8c4;
  font-size: 12px;
  line-height: 1.65;
}
.card-bottom {
  border-top: 1px solid #ffffff25;
  margin-top: 18px;
  padding-top: 14px;
  color: #8f9fac;
  font-size: 10px;
  letter-spacing: 0.1px;
}
.card-arrow {
  font-size: 21px;
  color: #f2b08f;
  font-weight: 400;
}
.impostor .card-arrow {
  color: #a9dac4;
}
.side-heading {
  height: 65px;
}
.agent-card {
  border: 1px solid #2d3b4d;
  background: #121e2d;
  padding: 22px 20px 20px;
}
.agent-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agent-avatar {
  height: 37px;
  width: 37px;
  border-radius: 50%;
  background: #314c56;
  color: #d6ede5;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.agent-card-top > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.agent-label {
  font: 800 8px Manrope, sans-serif;
  color: #8fa5ab;
  letter-spacing: 1.5px;
}
.agent-card-top strong {
  font-size: 12px;
}
.agent-status {
  margin-left: auto;
  font: 800 8px Manrope, sans-serif;
  color: #94d7b5;
  white-space: nowrap;
}
.agent-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #2b394a;
  border-bottom: 1px solid #2b394a;
  margin: 22px 0 20px;
  padding: 18px 0;
}
.agent-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #2b394a;
  gap: 5px;
}
.agent-stats div:last-child {
  border-right: 0;
}
.agent-stats strong {
  font: 800 23px Manrope, sans-serif;
}
.agent-stats span {
  font-size: 10px;
  color: #8493a4;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  color: #9eacb9;
  font-size: 10px;
}
.progress-label span:last-child {
  font-family: Manrope, sans-serif;
  color: #d3dfdf;
}
.progress-track {
  margin-top: 10px;
  height: 4px;
  background: #293c4b;
}
.progress-track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 0.4s;
}
.tip-card {
  display: flex;
  gap: 14px;
  border: 1px solid #344a48;
  background: linear-gradient(135deg, #1b3537, #172730);
  padding: 20px;
  margin-top: 16px;
}
.tip-icon {
  color: #aedec7;
  font-size: 22px;
}
.tip-card span {
  display: block;
  color: #a5d6bd;
  font: 800 9px Manrope, sans-serif;
  letter-spacing: 1.5px;
  margin: 2px 0 14px;
}
.tip-card strong {
  font-size: 15px;
  line-height: 1.5;
}
.tip-card p {
  font-size: 10px;
  line-height: 1.7;
  color: #9eb1b2;
  margin: 10px 0 0;
}
.footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #263142;
  padding: 25px 0 35px;
  margin-top: 43px;
  color: #667889;
  font: 700 9px Manrope, sans-serif;
  letter-spacing: 1.3px;
}
.archive-page {
  min-height: calc(100vh - 88px);
  padding: 60px 0;
}
.archive-header .section-kicker {
  color: var(--mint);
}
.archive-header h1 {
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: -4px;
  margin: 18px 0 7px;
}
.archive-header h1 span {
  color: var(--orange);
}
.archive-header p {
  color: #a9b7c4;
}
.archive-list {
  max-width: 840px;
  margin: 50px 0;
}
.archive-empty {
  border: 1px dashed #344458;
  padding: 42px;
  color: #97a9b7;
}
.archive-empty strong {
  display: block;
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
}
.archive-entry {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid #344458;
  background: #121e2d;
  padding: 20px;
  margin-bottom: 12px;
}
.archive-entry-icon {
  background: #28414a;
  color: var(--mint);
  height: 42px;
  width: 42px;
  display: grid;
  place-items: center;
  font-size: 21px;
}
.archive-entry div:nth-child(2) {
  flex: 1;
}
.archive-entry strong {
  display: block;
  margin-bottom: 5px;
}
.archive-entry span {
  font-size: 11px;
  color: #9daebc;
}
.archive-entry .archive-grade {
  font: 800 18px Manrope, sans-serif;
  color: var(--orange);
}
.toast {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  background: #d7ece4;
  color: #15242a;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 19px;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 10px 25px #0005;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}
@media (max-width: 1100px) {
  .app-shell {
    padding: 0 4%;
  }
  .topbar {
    gap: 45px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .side-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .side-heading {
    grid-column: 1/-1;
    height: 45px;
  }
  .tip-card {
    margin-top: 0;
  }
  .intro {
    height: 390px;
  }
}
@media (max-width: 690px) {
  .app-shell {
    padding: 0 17px;
  }
  .topbar {
    height: 69px;
    gap: 12px;
  }
  .brand {
    font-size: 15px;
  }
  .brand-mark {
    transform: scale(0.83);
    margin-right: 5px;
  }
  .top-nav {
    margin-left: auto;
    gap: 16px;
  }
  .nav-link {
    font-size: 11px;
  }
  .top-actions {
    margin-left: 0;
    gap: 8px;
  }
  .live-indicator,
  .icon-button {
    display: none;
  }
  .avatar-button {
    height: 30px;
    width: 30px;
  }
  .intro {
    margin-top: 13px;
    height: 445px;
    padding: 45px 23px 28px;
  }
  .intro h1 {
    font-size: 46px;
    letter-spacing: -3px;
    margin-top: 33px;
  }
  .intro p {
    font-size: 12px;
  }
  .desktop-break {
    display: none;
  }
  .intro-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
  }
  .orb-one {
    right: -58%;
    top: 23%;
    opacity: 0.55;
  }
  .orb-two {
    right: -13%;
    top: 43%;
    opacity: 0.6;
  }
  .hero-metadata {
    right: 13px;
    bottom: 12px;
    font-size: 7px;
    gap: 10px;
  }
  .dashboard-grid {
    margin-top: 36px;
    gap: 26px;
  }
  .section-heading h2 {
    font-size: 19px;
  }
  .section-side {
    display: none;
  }
  .mission-grid {
    grid-template-columns: 1fr;
  }
  .mission-card {
    height: 365px;
  }
  .side-panel {
    grid-template-columns: 1fr;
  }
  .side-heading {
    height: 44px;
  }
  .footer {
    font-size: 7px;
    gap: 15px;
  }
  .footer span:last-child {
    text-align: right;
  }
  .archive-page {
    padding: 45px 0;
  }
  .archive-header h1 {
    font-size: 46px;
  }
}

/* Call: a full-screen conversation. The caller's lines sit on the left, the player's words on the right in
   large type, and every answer stays in the thread with how it landed. */
html.in-call {
  overflow: hidden;
}
.call {
  --you: 0;
  --them: var(--mint);
  --me: var(--orange);
  --ui: "DM Sans", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --label: Manrope, "DM Sans", system-ui, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  background: #060b14;
  font-family: var(--ui);
  word-break: keep-all;
  animation: call-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.call-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -12%, #ff6b4524, transparent 70%),
    radial-gradient(70% 40% at 50% 112%, #a6ead912, transparent 70%);
}
.call[data-mission="impostor"] .call-ambient {
  background:
    radial-gradient(90% 55% at 50% -12%, #4fb7a12b, transparent 70%),
    radial-gradient(70% 40% at 50% 112%, #ff6b4510, transparent 70%);
}
.call-frame {
  position: relative;
  width: min(100%, 720px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  outline: none;
}
.call-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 6px;
}
.call-exit,
.dock-side {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ffffff1a;
  background: #ffffff0d;
  color: #c9d4dc;
  padding: 0;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.call-exit {
  width: 44px;
  height: 44px;
}
.call-exit svg {
  width: 18px;
}
.call-exit:hover,
.dock-side:hover {
  background: #ffffff1a;
  color: #fff;
}
.call-exit:active,
.dock-side:active,
.dock-main:active:not(:disabled),
.goal-hint:active {
  transform: scale(0.94);
}
.call-who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 0;
}
.call-avatar {
  --speak: 0;
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #47686a, #1a3141);
  border: 1px solid #a6ead966;
  color: #eafff7;
  font: 700 17px var(--label);
}
.call-avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--them);
  opacity: calc(var(--speak) * 1.4);
  transform: scale(calc(1 + var(--speak) * 0.18));
  transition:
    transform 0.08s linear,
    opacity 0.12s;
}
.call-id {
  display: grid;
  min-width: 0;
}
.call-id strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.call-id span {
  font-size: 12px;
  color: #93a3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-clock {
  min-width: 66px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #ffffff1a;
  background: #ffffff0d;
  font: 700 15px var(--ui);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition:
    color 0.3s,
    background 0.3s,
    border-color 0.3s;
}
.call-clock.urgent {
  color: #ffc2b2;
  background: #ff6b4526;
  border-color: #ff6b4580;
  animation: pulse 1s infinite;
}
.call-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 4px;
  font-size: 12px;
  color: #93a3b3;
}
.call-meter .meter-track {
  height: 4px;
  border-radius: 2px;
  background: #ffffff14;
  overflow: hidden;
}
.call-meter .meter-track span {
  display: block;
  height: 100%;
  width: 50%;
  border-radius: 2px;
  background: linear-gradient(90deg, #ec765b, #a2dec2);
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.call[data-mission="impostor"] .call-meter .meter-track span {
  background: linear-gradient(90deg, #a5dfc6, #f27b5b);
}
.call-meter strong {
  min-width: 38px;
  text-align: right;
  color: #e6eef1;
  font: 700 13px var(--ui);
  font-variant-numeric: tabular-nums;
}
.call-meter.bump-good strong {
  animation: bump-good 0.9s ease-out;
}
.call-meter.bump-bad strong {
  animation: bump-bad 0.9s ease-out;
}

/* Thread */
.thread {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 28px 20px 24px;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 12px), transparent 100%);
}
.thread::-webkit-scrollbar {
  display: none;
}
.thread > :first-child {
  margin-top: auto;
}
.turn {
  display: grid;
  justify-items: start;
  gap: 8px;
  max-width: 88%;
  animation: turn-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: opacity 0.5s;
}
.turn.is-past {
  opacity: 0.4;
}
.turn-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 800 11px var(--label);
  letter-spacing: 1.6px;
  color: var(--them);
}
.turn-who::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.turn-text {
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.turn-caller .turn-text {
  font-size: 19px;
  line-height: 1.52;
  font-weight: 500;
  color: #e8eff2;
}
.turn-you {
  align-self: flex-end;
  justify-items: end;
}
.turn-you .turn-who {
  color: var(--me);
}
.turn-you .turn-text {
  font-size: 22px;
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #fff6f2;
  padding: 14px 18px 15px;
  border-radius: 20px 20px 6px 20px;
  border: 1px solid #ff6b4561;
  background: linear-gradient(180deg, #ff6b4526, #ff6b4514);
  box-shadow: 0 12px 32px -18px #ff6b4599;
}
.turn-text .w {
  animation: word-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 34ms);
}
.turn-caller .turn-text .w {
  animation-delay: calc(var(--i) * 26ms);
}
.turn-text mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.5s 0.2s;
}
.turn-you.is-judged mark {
  text-decoration-color: var(--them);
}
.turn-you.is-live .turn-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #ffd9cd;
  border-style: dashed;
}
.live-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.live-bars i {
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--me);
  transform: scaleY(var(--l, 0.18));
  transition: transform 0.08s linear;
}
.turn-you.is-sending .live-bars i {
  animation: think 0.9s ease-in-out infinite;
}
.turn-you.is-sending .live-bars i:nth-child(2n) {
  animation-delay: 0.15s;
}
.turn-you.is-sending .live-bars i:nth-child(3n) {
  animation-delay: 0.3s;
}
.turn-caller.is-pending {
  animation-delay: 0.35s;
}
.dots {
  display: inline-flex;
  gap: 6px;
  padding: 10px 0;
}
.dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--them);
  animation: dot 1.1s ease-in-out infinite;
}
.dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.dots i:nth-child(3) {
  animation-delay: 0.3s;
}
.verdict {
  --tone: #a6ead9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  color: var(--tone);
  font-size: 13px;
  font-weight: 700;
  animation: pop-in 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.verdict[data-score="1"] {
  --tone: #ffd27a;
}
.verdict[data-score="0"] {
  --tone: #ffab97;
}
.verdict i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tone);
  -webkit-mask: var(--icon) center / 12px no-repeat;
  mask: var(--icon) center / 12px no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.verdict[data-score="1"] i {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.verdict[data-score="0"] i {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}
.verdict b {
  font-weight: 700;
  color: #dfe7ec;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.better {
  margin: 0;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  color: #e6eef1;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  animation: pop-in 0.42s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.better span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--them);
}

/* Dock: the goal for this turn, then one big button that always does the obvious thing. */
.call-dock {
  display: grid;
  gap: 14px;
  padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
}
.goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  border: 1px solid #ffffff14;
  background: #ffffff09;
}
.goal.is-new {
  animation: goal-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.goal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #93a3b3;
}
.goal-steps {
  display: inline-flex;
  gap: 4px;
}
.goal-steps i {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: #ffffff21;
  transition: background 0.4s;
}
.goal-steps i.done {
  background: var(--them);
}
.goal-steps i.now {
  background: var(--me);
}
.goal p {
  grid-column: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: #eef3f5;
  text-wrap: pretty;
}
.goal-hint {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid #a6ead955;
  background: transparent;
  color: var(--them);
  font-size: 14px;
  font-weight: 700;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.15s;
}
.goal-hint svg {
  width: 18px;
}
.goal-hint:hover,
.goal-hint[aria-expanded="true"] {
  background: #a6ead91f;
}
.goal-hint.nudge {
  background: var(--them);
  color: #0c1a1a;
  animation: nudge 1.4s ease-in-out 3;
}
.goal .goal-hint-text {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #a6ead914;
  color: #dff7ef;
  font-size: 16px;
  font-weight: 600;
  animation: pop-in 0.3s ease-out both;
}
.dock {
  display: grid;
  gap: 12px;
}
.dock-status {
  display: grid;
  gap: 2px;
  margin: 0;
  min-height: 40px;
  text-align: center;
}
.dock-status strong {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f7;
}
.dock-status span {
  font-size: 13px;
  color: #93a3b3;
  min-height: 1em;
}
.dock[data-state="ready"] .dock-status strong,
.dock[data-state="hearing"] .dock-status strong {
  color: #ffb9a6;
}
.dock-status.shake {
  animation: shake 0.4s;
}
.dock-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.dock-row > :first-child {
  justify-self: end;
}
.dock-row > :last-child {
  justify-self: start;
}
.dock-side {
  width: 52px;
  height: 52px;
}
.dock-side svg {
  width: 22px;
}
#micButton[aria-pressed="false"] {
  color: #ffb4a1;
  background: #ff6b451f;
  border-color: #ff6b4566;
}
.dock-main {
  --bg: #ffffff12;
  --fg: #c9d4dc;
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ffffff1f;
  background: var(--bg);
  color: var(--fg);
  padding: 0;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.15s;
}
.dock-main:disabled {
  cursor: default;
}
.dock-main svg,
.dock-main .i-spin,
.dock-main .i-bars {
  position: relative;
  grid-area: 1 / 1;
  width: 32px;
  height: 32px;
  display: none;
}
.dock-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--me) 26%, transparent);
  opacity: 0;
  transform: scale(calc(0.92 + var(--you) * 0.22));
  transition:
    transform 0.08s linear,
    opacity 0.25s;
}
.i-bars {
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dock[data-state="ready"] .i-bars {
  display: flex;
}
.i-bars i {
  width: 5px;
  height: 30px;
  border-radius: 3px;
  background: currentColor;
  transform: scaleY(calc(0.22 + var(--you) * var(--k)));
  transition: transform 0.08s linear;
}
.i-bars i:nth-child(1) {
  --k: 0.5;
}
.i-bars i:nth-child(2) {
  --k: 0.78;
}
.i-bars i:nth-child(3) {
  --k: 0.7;
}
.i-bars i:nth-child(4) {
  --k: 0.42;
}
.i-spin {
  border-radius: 50%;
  border: 3px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
.dock[data-state="connecting"] .i-spin,
.dock[data-state="sending"] .i-spin,
.dock[data-state="thinking"] .i-spin,
.dock[data-state="caller"] .i-mic,
.dock[data-state="typing"] .i-mic,
.dock[data-state="hearing"] .i-send,
.dock[data-state="muted"] .i-off,
.dock[data-state="off"] .i-off {
  display: block;
}
.dock[data-state="caller"] .dock-main {
  --bg: #a6ead91a;
  --fg: var(--them);
  border-color: #a6ead966;
}
.dock[data-state="ready"] .dock-main,
.dock[data-state="hearing"] .dock-main {
  --bg: var(--me);
  --fg: #1b0d07;
  border-color: var(--me);
}
.dock[data-state="ready"] .dock-ring,
.dock[data-state="hearing"] .dock-ring {
  opacity: 1;
}
.dock[data-state="ready"] .dock-main {
  animation: breathe 2s ease-in-out infinite;
}
.dock[data-state="muted"] .dock-main,
.dock[data-state="typing"] .dock-main {
  --fg: #8d9aab;
}
.dock-type {
  display: none;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
}
.dock[data-input="type"] .dock-type {
  display: grid;
}
.dock[data-input="type"] .dock-row {
  display: none;
}
.dock-type input {
  height: 52px;
  min-width: 0;
  padding: 0 18px;
  border-radius: 26px;
  border: 1px solid #ffffff24;
  background: #ffffff0d;
  color: #fff;
  font-size: 16px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.dock-type input::placeholder {
  color: #7f8fa0;
}
.dock-type input:focus {
  border-color: var(--me);
  background: #ffffff12;
}
.dock-send {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--me);
  color: #1b0d07;
}
.dock-send svg {
  width: 22px;
}
.dock-send:disabled {
  opacity: 0.4;
  cursor: default;
}
.call :focus-visible {
  outline: 2px solid var(--them);
  outline-offset: 3px;
}

/* Result */
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  justify-items: center;
  align-items: safe center;
  padding: 24px 16px;
  overflow-y: auto;
  background: #050a12f0;
  backdrop-filter: blur(16px);
  font-family: "DM Sans", "Noto Sans KR", system-ui, sans-serif;
}
.result-panel {
  position: relative;
  width: min(100%, 520px);
  padding: 40px 28px 26px;
  border-radius: 28px;
  border: 1px solid #ffffff17;
  background:
    radial-gradient(120% 60% at 50% 0, #a6ead91c, transparent 70%),
    #0d1724;
  box-shadow: 0 40px 100px #0009;
  text-align: center;
  word-break: keep-all;
  animation: call-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.result-overlay[data-won="false"] .result-panel {
  background:
    radial-gradient(120% 60% at 50% 0, #ff6b451f, transparent 70%),
    #0d1724;
}
.result-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #b6c7c7;
}
.result-close svg {
  width: 20px;
}
.result-close:hover {
  background: #ffffff12;
}
.result-symbol {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #a6ead980;
  color: var(--mint);
  font-size: 30px;
  box-shadow: 0 0 40px #a6ead930;
}
.result-overlay[data-won="false"] .result-symbol {
  color: #ffb4a1;
  border-color: #ff6b4580;
  box-shadow: 0 0 40px #ff6b4530;
}
.result-eyebrow {
  font: 800 11px Manrope, sans-serif;
  letter-spacing: 2px;
  color: var(--mint);
}
.result-overlay[data-won="false"] .result-eyebrow {
  color: #ffab97;
}
.result-panel h2 {
  margin: 10px 0 8px;
  font-size: 30px;
  letter-spacing: -1px;
}
.result-panel > p {
  margin: 0;
  color: #aabdc6;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.result-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid #ffffff17;
  border-bottom: 1px solid #ffffff17;
}
.result-details div + div {
  border-left: 1px solid #ffffff17;
}
.result-details strong {
  display: block;
  font: 700 24px "DM Sans", sans-serif;
  font-variant-numeric: tabular-nums;
}
.result-details span {
  font-size: 12px;
  color: #9fb4bd;
}
.result-review {
  text-align: left;
}
.result-review h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #93a3b3;
}
.result-lines {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.result-lines li {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #ffffff14;
  background: #ffffff08;
}
.result-lines .said {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  color: #fff6f2;
  overflow-wrap: anywhere;
}
.result-lines .verdict,
.result-lines .better {
  animation: none;
}
.result-learning {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #a6ead912;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  color: #cfe3df;
}
.result-learning strong {
  display: block;
  margin-bottom: 4px;
  font: 800 10px Manrope, sans-serif;
  letter-spacing: 1.4px;
  color: var(--mint);
}
.result-panel > * {
  flex-shrink: 0;
}
.result-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 6px;
  margin: 0 -8px;
  padding: 20px 8px 0;
  background: linear-gradient(to bottom, #0d172400, #0d1724 20px);
}
.result-button {
  width: 100%;
  min-height: 54px;
  border-radius: 999px;
  font-size: 16px;
}
.result-retry {
  min-height: 48px;
  border: 0;
  background: none;
  color: #c9d4dc;
  font-size: 15px;
  font-weight: 600;
}
.result-retry:hover {
  color: #fff;
}

@keyframes call-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}
@keyframes turn-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes word-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.92);
  }
}
@keyframes goal-in {
  from {
    border-color: #ff6b4599;
    background: #ff6b4514;
  }
}
@keyframes dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
@keyframes think {
  50% {
    transform: scaleY(0.45);
  }
}
@keyframes breathe {
  50% {
    box-shadow: 0 0 0 10px #ff6b4524;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes nudge {
  50% {
    transform: scale(1.06);
  }
}
@keyframes shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@keyframes bump-good {
  from {
    color: var(--mint);
  }
}
@keyframes bump-bad {
  from {
    color: #ff8f73;
  }
}
@media (min-width: 691px) {
  .call-bar {
    padding: 20px 24px 8px;
  }
  .call-meter {
    padding: 8px 28px 4px;
  }
  .thread {
    padding: 32px 28px 28px;
  }
  .call-dock {
    padding: 6px 24px 28px;
  }
  .turn-caller .turn-text {
    font-size: 21px;
  }
  .turn-you .turn-text {
    font-size: 24px;
  }
}
@media (max-width: 690px) {
  .result-overlay {
    padding: 0;
    place-items: stretch;
  }
  .result-overlay {
    align-items: stretch;
  }
  .result-panel {
    width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: calc(56px + env(safe-area-inset-top)) 20px 12px;
    display: flex;
    flex-direction: column;
  }
  .result-actions {
    margin-top: auto;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 360px) {
  .call-bar {
    gap: 8px;
    padding-inline: 12px;
  }
  .call-clock {
    min-width: 58px;
    padding: 7px 9px;
  }
  .thread {
    padding-inline: 16px;
  }
  .turn {
    max-width: 94%;
  }
  .turn-caller .turn-text {
    font-size: 18px;
  }
  .turn-you .turn-text {
    font-size: 20px;
  }
  .call-dock {
    padding-inline: 12px;
  }
  .dock-row {
    gap: 20px;
  }
}
@media (max-height: 700px) {
  .goal {
    padding: 9px 10px 9px 14px;
  }
  .dock-main {
    width: 72px;
    height: 72px;
  }
  .dock-status {
    min-height: 0;
  }
  .call-dock {
    gap: 10px;
  }
}
/* A phone on its side has about 360 px of height: the conversation takes the left side and the dock the right,
   so neither the caller's line nor the big button is pushed off screen. */
@media (orientation: landscape) and (max-height: 540px) {
  .call-frame {
    width: min(100%, 1100px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .call-bar {
    grid-column: 1;
    padding: 10px 16px 2px;
  }
  .call-meter {
    grid-column: 1;
    padding: 6px 20px 0;
  }
  .thread {
    grid-column: 1;
    gap: 18px;
    padding: 18px 20px 14px;
  }
  .turn-caller .turn-text {
    font-size: 17px;
  }
  .turn-you .turn-text {
    font-size: 19px;
    padding: 11px 15px 12px;
  }
  .call-dock {
    grid-column: 2;
    grid-row: 1 / -1;
    align-content: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-left: 1px solid #ffffff10;
    background: #ffffff04;
  }
  .goal {
    padding: 10px 10px 10px 14px;
  }
  .goal p {
    font-size: 14px;
  }
  .goal-hint {
    height: 40px;
    padding: 0 12px 0 10px;
  }
  .dock-status {
    min-height: 0;
  }
  .dock-row {
    gap: 18px;
  }
  .dock-main {
    width: 72px;
    height: 72px;
  }
  .dock-side,
  .dock-send {
    width: 48px;
    height: 48px;
  }
  .dock-type {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }
  .dock-type input {
    height: 48px;
  }
  .result-actions {
    position: static;
    background: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .call,
  .turn,
  .turn-text .w,
  .verdict,
  .better,
  .goal.is-new,
  .goal-hint.nudge,
  .dock[data-state="ready"] .dock-main,
  .dock-status.shake,
  .result-panel,
  .call-clock.urgent {
    animation: none !important;
  }
  .call-avatar::after,
  .dock-ring,
  .live-bars i {
    transition: none;
  }
}