@font-face {
  font-family: Overpass;
  src: url("assets/Overpass-VariableFont_wght.ttf");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Molot;
  src: url("assets/Molot.ttf");
  font-display: swap;
}
:root {
  --blue: #075f9e;
  --button: #007dcb;
  --green: #249a36;
  --orange: #ee3100;
  --ink: #38000b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #1c2530;
  font-family: Overpass, Arial, sans-serif;
  overflow: hidden;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 6px solid #ffcc00;
  outline-offset: -6px;
}
button:active {
  filter: brightness(0.9);
}
#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#phone {
  position: relative;
  width: 1080px;
  height: 2400px;
  flex: none;
  background: white;
  transform-origin: center;
  overflow: hidden;
  color: var(--blue);
}
#screen {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 134px;
  flex: none;
  background: #000;
  display: flex;
  align-items: center;
  padding: 20px 38px;
  gap: 30px;
  position: relative;
}
.header .menu {
  width: 80px;
  height: 80px;
}
.logo {
  width: 340px;
  height: 85px;
  object-fit: contain;
}
.streak {
  margin-left: auto;
  width: 155px;
  height: 85px;
  object-fit: contain;
}
.bitizen {
  width: 225px;
  height: 90px;
  object-fit: contain;
}
.profile {
  height: 132px;
  flex: none;
  background: #e5ebef;
  border-bottom: 2px solid #174674;
  display: flex;
  align-items: center;
  padding: 12px 34px;
  gap: 24px;
}
.avatar {
  width: 92px;
  height: 100px;
  flex: none;
  background-image: url("/docs/research/2026-10-08-avd-playtest/screenshots/06-age-zero-home.png");
  background-size: 1080px 2400px;
  background-position: -34px -152px;
  border-radius: 50%;
}
.identity {
  flex: 1;
  line-height: 1.3;
}
.name {
  font-size: 47px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 8px;
}
.job {
  font-size: 33px;
  font-weight: 400;
}
.flag {
  font-size: 38px;
  margin-right: 13px;
}
.bank {
  text-align: right;
  font-size: 32px;
}
.balance {
  font-size: 47px;
  font-weight: 800;
}
.journal {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 39px 26px 20px;
  color: #888;
  font-size: 34px;
  line-height: 1.2;
  scrollbar-width: none;
}
.journal h2 {
  color: var(--blue);
  font-size: 34px;
  font-weight: 800;
  margin: 0;
}
.journal p {
  margin: 0;
}
.journal section {
  margin-bottom: 44px;
}
.promos {
  height: 86px;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 4px;
  font-size: 28px;
  font-weight: 800;
  overflow: hidden;
}
.community {
  background: #ed3100;
  color: #ffef00;
  border-radius: 0 40px 40px 0;
  padding: 12px 27px;
  min-width: 430px;
}
.director {
  background: #252443;
  color: #fff1b0;
  border: 3px solid #e8c813;
  border-radius: 40px 0 0 40px;
  padding: 8px 20px;
}
.navigation {
  height: 218px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--blue);
  border-top: 2px solid #358bc1;
  border-bottom: 2px solid #144b7a;
}
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  border-right: 2px solid #004c84;
  gap: 7px;
  padding-top: 25px;
}
.nav img {
  width: 91px;
  height: 91px;
  object-fit: contain;
}
.nav.age {
  position: relative;
  padding: 0;
}
.nav.age img {
  position: absolute;
  width: 278px;
  height: 278px;
  filter: drop-shadow(0 8px 7px #0005);
  max-width: none;
  z-index: 2;
}
.stats {
  height: 363px;
  flex: none;
  padding: 83px 68px 55px;
  position: relative;
  background: #fff;
}
.stat {
  display: flex;
  height: 57px;
  align-items: center;
  gap: 20px;
  font-size: 32px;
  font-weight: 800;
}
.stat-label {
  width: 240px;
  text-align: right;
  white-space: nowrap;
}
.stat-label img {
  width: 44px;
  height: 44px;
  vertical-align: middle;
  margin-left: 12px;
}
.meter {
  position: relative;
  flex: 1;
  height: 45px;
  background: #e0eaf2;
}
.fill {
  height: 100%;
  background: var(--green);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.percent {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 116px;
  text-align: center;
  background: #cadce999;
  padding-top: 1px;
}
.ad-space {
  height: 167px;
  flex: none;
  background: #5b5b5b;
  border-top: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reward-banner {
  width: 840px;
  height: 116px;
  background: linear-gradient(105deg, #071c50, #086da8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 0 0 2px #111;
  font-size: 34px;
}
.reward-banner small {
  font-size: 24px;
  color: #bdeaff;
}
.reward-banner b {
  font-size: 35px;
}
.ad-close {
  position: absolute;
  right: 5px;
  bottom: 167px;
  color: #ffea00;
  background: red;
  border-radius: 50%;
  font-size: 62px;
  width: 60px;
  height: 60px;
  line-height: 1;
}
.list-title {
  height: 138px;
  background: var(--blue);
  color: #fff;
  font-size: 54px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back {
  position: absolute;
  left: 28px;
  font-size: 60px;
  width: 74px;
}
.list-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}
.section-title {
  background: #e7ebef;
  color: #626c75;
  font-size: 29px;
  padding: 12px 28px;
  font-weight: 700;
}
.row {
  width: 100%;
  min-height: 177px;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 24px 28px;
  border-bottom: 2px solid #d0d9e1;
  gap: 29px;
  color: var(--blue);
}
.row-icon {
  width: 110px;
  flex: none;
  text-align: center;
  font-size: 77px;
}
.row-main {
  flex: 1;
  font-size: 44px;
  line-height: 1.15;
}
.row-main small {
  display: block;
  font-size: 29px;
  color: #7d8790;
  margin-top: 7px;
}
.chevron {
  font-size: 59px;
  color: #a7b3bd;
}
.relation-meter {
  height: 22px;
  background: #e5ebf0;
  margin-top: 13px;
  width: 500px;
  max-width: 100%;
}
.relation-meter span {
  display: block;
  height: 100%;
  background: var(--green);
}
.row:disabled {
  opacity: 0.37;
  cursor: default;
}
.list-bottom {
  height: 165px;
  background: var(--blue);
  color: white;
  font-size: 48px;
  flex: none;
}
.list-bottom img {
  width: 72px;
  vertical-align: middle;
  margin-right: 20px;
}
#overlay:empty {
  display: none;
}
.shade {
  position: absolute;
  inset: 0;
  background: #07141dde;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  animation: shade-in 0.15s ease-out;
}
.modal {
  width: 856px;
  border: 12px solid var(--orange);
  border-radius: 48px;
  background: #f8f6f3;
  color: var(--ink);
  box-shadow: 0 15px 0 #0008;
  padding: 82px 60px 90px;
  max-height: 2050px;
  overflow: auto;
  animation: card-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: center;
  scrollbar-width: none;
}
.modal-ribbon {
  height: 94px;
  margin: 0 -60px 90px;
  background: linear-gradient(90deg, #f8f6f3 15%, #f5dfd5 40%, #ed3100 95%);
  text-align: right;
  color: white;
  font-size: 45px;
  font-weight: 800;
  font-style: italic;
  padding: 19px 55px;
}
.modal h1 {
  font-size: 52px;
  margin: 0 0 65px;
  font-weight: 800;
}
.modal p {
  font-size: 38px;
  line-height: 1.22;
  margin: 0 0 50px;
}
.modal .cta {
  margin: 0 0 65px;
}
.choices {
  display: grid;
  gap: 31px;
}
.choice {
  background: var(--button);
  color: white;
  border-radius: 16px;
  min-height: 113px;
  padding: 24px 25px;
  font-size: 38px;
  line-height: 1.2;
  box-shadow: 0 8px 0 #0004;
}
.surprise {
  font-size: 38px;
  color: #0073b4;
  text-decoration: underline;
  text-underline-offset: 7px;
  margin-top: 67px;
}
.modal-brand {
  position: absolute;
  right: 78px;
  top: 30px;
  width: 315px;
}
.votes {
  position: absolute;
  left: 82px;
  top: 25px;
  display: flex;
  gap: 48px;
}
.votes img {
  width: 84px;
  height: 84px;
}
.dialog-close {
  font-size: 34px;
  color: #777;
  text-decoration: underline;
  margin-top: 38px;
}
#toast {
  position: absolute;
  top: 280px;
  left: 100px;
  right: 100px;
  background: #0c683e;
  color: white;
  font-size: 35px;
  padding: 25px;
  border-radius: 20px;
  text-align: center;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
#toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.modal input,
.modal select {
  width: 100%;
  padding: 20px;
  font-size: 36px;
  border: 2px solid #a6b8c4;
  background: white;
  color: var(--ink);
  border-radius: 10px;
  margin-bottom: 20px;
}
.modal label {
  display: block;
  text-align: left;
  font-size: 30px;
  margin-bottom: 10px;
}
.muted {
  color: #7f8a92;
}
.reward {
  background: #259b38;
}
.eye-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.eye-grid button {
  font-size: 68px;
  background: white;
  border: 3px solid #b8c6ce;
  border-radius: 12px;
  height: 140px;
  color: #202933;
}
.eye-grid button.selected {
  background: #d3f4da;
  border-color: #22933a;
}
.choice img {
  width: 48px;
  vertical-align: middle;
  margin-right: 18px;
}
@keyframes shade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.journal,
.job,
.bank,
.nav,
.choice,
.surprise {
  font-weight: 300;
}
.nav {
  color: white;
}
.age-label {
  z-index: 3;
  color: white;
  font-size: 49px;
  font-weight: 800;
  position: relative;
  top: 51px;
  pointer-events: none;
}
.logo-word {
  font: 78px Molot;
  color: #fa5e19;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 410px;
}
.ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 65px Overpass;
  width: 85px;
  height: 85px;
  background: white;
  border-radius: 50%;
  color: black;
}
.header {
  gap: 20px;
}
.streak-score {
  display: block;
  width: 150px;
  color: #fff72b;
  font-size: 72px;
  font-weight: 900;
  position: relative;
  line-height: 1;
}
.streak-score img {
  width: 80px;
  vertical-align: middle;
}
.streak-score small {
  display: block;
  color: white;
  font-size: 23px;
}
.header .bitizen {
  width: 220px;
}
.track {
  height: 100%;
  margin-right: 116px;
}
.modal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  color: #ffff00;
  font: 62px Molot;
}
.modal-brand img {
  width: 140px;
  height: 70px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.modal {
  transform: translateY(-20px);
}
.modal p {
  font-weight: 400;
}
.title-icon {
  width: 58px;
  height: 65px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 45px;
}
.journal {
  padding-top: 46px;
}
.name .flag {
  font-size: 36px;
}
.stat-label {
  width: 240px;
}
.votes img {
  object-fit: contain;
}
.list-title {
  font-weight: 700;
}

.list-title {
  font: 56px Molot;
}
.back {
  border: 3px solid white;
  border-radius: 50%;
  height: 80px;
  line-height: 65px;
  font: 65px Overpass;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-body {
  background: #e5ebef;
}
.row {
  background: white;
  min-height: 194px;
  border-bottom: 2px solid #506b91;
}
.row-main {
  font-size: 47px;
  font-weight: 800;
}
.row-main small {
  color: var(--blue);
  font-size: 36px;
  font-weight: 300;
}
.chevron {
  color: #316384;
  font-size: 76px;
}
.section-title {
  background: #747779;
  color: white;
  text-align: center;
  font-size: 34px;
  height: 60px;
  padding: 9px 25px;
}
.special-row .row {
  background: #66133e;
  color: #e4e11e;
}
.special-row small {
  color: #ebe59d;
}
.relation-row .row-main {
  white-space: nowrap;
}
.relation-row .row-main > span {
  font-weight: 300;
}
.relationship-value {
  display: flex !important;
  align-items: center;
  gap: 18px;
}
.relation-meter {
  width: 354px;
  height: 24px;
  margin: 0;
  display: inline-block;
}
.row:disabled {
  opacity: 1;
  color: #aaa;
}
.row:disabled .row-icon {
  filter: grayscale(1);
  opacity: 0.5;
}
.row:disabled small {
  color: #aaa;
}
.row:disabled .chevron {
  visibility: hidden;
}
.list-bottom {
  display: none;
}
.modal {
  animation-fill-mode: both;
}
.shade {
  animation-fill-mode: both;
}

.ghost {
  background-image: url("/docs/research/2026-10-08-avd-playtest/screenshots/06-age-zero-home.png");
  background-size: 1080px 2400px;
  background-position: -153px -26px;
}
.flag img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.name {
  text-decoration: none;
}
.name .info-icon {
  display: inline-block;
  vertical-align: middle;
  color: white;
  background: #00b5e9;
  font: 30px Overpass;
  border-radius: 4px;
  line-height: 29px;
  width: 27px;
  text-align: center;
}
.identity .name {
  position: relative;
}
.identity .name:after {
  content: "";
  position: absolute;
  left: 60px;
  bottom: 3px;
  width: 220px;
  height: 2px;
  background: #075f9e;
}
.navigation {
  grid-template-columns: 196px 196px 296px 196px 196px;
}
.nav.age img {
  width: 310px;
  height: 310px;
}
.modal {
  position: relative;
  top: -24px;
}

/* Profile entry only: measured from original-info.mp4 real PTS.
   Background dims independently; card descends from above with a 30 px overshoot. */
.profile-shade {
  animation: profile-shade-in 250ms linear both;
}
.profile-shade .modal {
  animation: profile-card-in 267ms linear 167ms both;
}
.profile-shade .votes {
  display: none;
}
@keyframes profile-shade-in {
  from {
    background-color: #07141d00;
  }
  to {
    background-color: #07141dde;
  }
}
@keyframes profile-card-in {
  0% {
    transform: translateY(-1800px);
  }
  6.25% {
    transform: translateY(-1576px);
  }
  12.5% {
    transform: translateY(-1114px);
  }
  18.75% {
    transform: translateY(-701px);
  }
  25% {
    transform: translateY(-379px);
  }
  31.25% {
    transform: translateY(-160px);
  }
  37.5% {
    transform: translateY(-35px);
  }
  43.75% {
    transform: translateY(21px);
  }
  50% {
    transform: translateY(29px);
  }
  56.25% {
    transform: translateY(30px);
  }
  62.5% {
    transform: translateY(28px);
  }
  68.75% {
    transform: translateY(23px);
  }
  75% {
    transform: translateY(16px);
  }
  81.25% {
    transform: translateY(9px);
  }
  87.5% {
    transform: translateY(4px);
  }
  93.75% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-shade,
  .profile-shade .modal {
    animation: none !important;
  }
}

.profile-shade .modal {
  height: 1187px;
  top: -23.5px;
  position: relative;
  overflow: visible;
}
.profile-shade .modal-ribbon {
  position: relative;
}
.profile-shade .modal h1 {
  margin-bottom: 65px;
}
.profile-ribbon-name {
  position: absolute;
  left: 55px;
  top: -8px;
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--ink);
  font-size: 38px;
  font-weight: 800;
  font-style: normal;
}
.profile-ribbon-name .avatar {
  width: 100px;
  height: 120px;
}
.profile-facts {
  text-align: left;
  font-size: 38px;
  line-height: 1.3;
  margin-top: 30px;
}
.profile-facts > div {
  background: #eeece9;
  padding: 12px 36px;
  margin-bottom: 3px;
}
.profile-meters {
  margin-top: 88px;
}
.profile-meters > div {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 28px 0;
  font-size: 38px;
}
.profile-meters b {
  width: 188px;
  text-align: right;
}
.profile-meters span {
  display: block;
  flex: 1;
  height: 44px;
  background: #e1e6ea;
}
.profile-meters i {
  display: block;
  height: 100%;
  background: #249a36;
}
.profile-shade .dialog-close {
  position: absolute;
  left: calc(50% - 458px);
  top: calc(50% - 644px);
  width: 80px;
  height: 80px;
  margin: 0;
  background: #faf9f7;
  border-radius: 50%;
  box-shadow: 4px 6px 0 #0004;
  font-size: 0;
  color: var(--orange);
  animation: profile-card-in 267ms linear 167ms both;
}
@media (prefers-reduced-motion: reduce) {
  .profile-shade .dialog-close {
    animation: none !important;
  }
}
.profile-shade .modal > p:empty {
  display: none;
}
.profile-shade .modal h1 {
  margin-bottom: 45px;
}
.profile-shade .profile-facts {
  margin-top: 0;
}

.profile-shade .dialog-close {
  text-decoration: none;
}

/* Main menu: real PTS samples from 2026-10-09-motion/menu/header-track.json.
   Linear interpolation between observed positions; not a recovered Unity tween. */
.main-menu { position:absolute; inset:0; z-index:25; background:white; display:flex; flex-direction:column; animation:menu-enter 449.6ms linear both; }
.main-menu header { height:133px; flex:none; background:#000; color:white; display:flex; align-items:center; justify-content:center; position:relative; border-bottom:2px solid #8091a5; }
.main-menu h1 { font-family:Molot; font-size:58px; margin:0; font-weight:400; }
.main-menu.is-closing { animation:menu-exit 449.6ms linear both; pointer-events:none; }
.main-menu header button { position:absolute; left:38px; top:28px; width:80px; height:80px; border:4px solid white; border-radius:50%; padding:0; display:grid; place-items:center; color:white; }
.menu-scroll { flex:1; overflow:auto; scrollbar-width:none; }
.menu-section { height:61px; background:#76797c; color:white; text-align:center; font-size:38px; font-weight:800; line-height:61px; border-bottom:2px solid #627b99; }
.menu-item { display:flex; align-items:center; width:100%; height:194px; padding:22px 38px; gap:36px; text-align:left; color:#075f9e; background:white; border-bottom:2px solid #8193aa; }
.menu-section:first-child + .menu-item { background:#fff8df; }
.menu-icon { width:92px; flex:none; text-align:center; font-size:80px; }
.menu-item > span:nth-child(2) { flex:1; }
.menu-item strong { display:block; font-size:49px; font-weight:800; line-height:1.1; }
.menu-item small { display:block; font-size:36px; line-height:1.25; margin-top:10px; }
.menu-arrow { font-size:68px; color:#326b8b; }
.menu-item:disabled { color:#aaa; opacity:1; }
.menu-item:disabled .menu-arrow { visibility:hidden; }
@keyframes menu-enter {
  0% { transform:translateY(2400px); }
  3.63% { transform:translateY(2259px); }
  7.41% { transform:translateY(2028px); }
  18.82% { transform:translateY(1662px); }
  29.43% { transform:translateY(1200px); }
  44.40% { transform:translateY(738px); }
  62.88% { transform:translateY(372px); }
  70.17% { transform:translateY(142px); }
  77.76% { transform:translateY(29px); }
  81.29% { transform:translateY(0); }
  88.72% { transform:translateY(20px); }
  100% { transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) { .main-menu { animation:none; } }

/* Exit positions reverse the observed entry sequence; timing remains provisional. */
@keyframes menu-exit {
  0% { transform:translateY(0); }
  11.28% { transform:translateY(20px); }
  18.71% { transform:translateY(0); }
  22.24% { transform:translateY(29px); }
  29.83% { transform:translateY(142px); }
  37.12% { transform:translateY(372px); }
  55.60% { transform:translateY(738px); }
  70.57% { transform:translateY(1200px); }
  81.18% { transform:translateY(1662px); }
  92.59% { transform:translateY(2028px); }
  96.37% { transform:translateY(2259px); }
  100% { transform:translateY(2400px); }
}

/* All X controls share geometry; SVG centers in the existing button box. */
.close-icon { display:block; width:100%; height:100%; }
.back, .profile-shade .dialog-close { padding:0; display:grid; place-items:center; }
/* Feedback card uses the recovered native Morph controller, with no extra fade/translation. */
.feedback-shade .modal { animation:none; transform:scale(0); transform-origin:50% 50%; }