* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100dvh; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { color: white; background: #001b4d; font-family: Arial, Helvetica, sans-serif; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.app-shell { width: 100%; height: 100%; min-height: 100dvh; display: grid; place-items: center; background: #001b4d; }
.screen {
  position: relative;
  display: none;
  width: min(100vw, 56.28vh);
  height: min(177.68vw, 100vh);
  height: min(177.68vw, 100dvh);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.screen.active { display: block; }
.welcome { background-image: url("./finals/background.png"); }
.secondary-bg { background-image: url("./finals/background2.png"); }
.welcome-start { position: absolute; top: 61%; left: 50%; min-width: 56%; transform: translate(-50%, -50%); }
.welcome-start:active { transform: translate(-50%, calc(-50% + 5px)); }
.settings { position: absolute; right: 3%; bottom: 2%; border: 0; color: rgba(255,255,255,.65); background: transparent; font-size: 22px; }
.primary, .secondary {
  border-radius: 999px;
  padding: 14px 27px;
  color: white;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.primary { border: 2px solid rgba(255,255,255,.9); background: linear-gradient(#19baf5, #006de2 55%, #004eb1); box-shadow: inset 0 2px rgba(255,255,255,.5), 0 6px #003a91, 0 14px 25px rgba(0,24,94,.45); }
.primary:disabled { opacity: .45; }
.secondary { border: 1px solid rgba(255,255,255,.75); background: rgba(0,62,152,.82); }
.text-button { border: 0; padding: 10px; color: #d9f9ff; background: transparent; text-decoration: underline; font-weight: 800; }
.back { position: absolute; z-index: 8; top: 2.2%; left: 4%; width: 48px; height: 48px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; color: white; background: rgba(0,84,174,.85); font-size: 25px; font-weight: 900; }
.heading { position: absolute; z-index: 3; top: 39.4%; left: 6%; right: 6%; text-align: center; text-shadow: 0 3px 10px rgba(0,50,130,.55); }
.heading small { color: #fff3b4; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; }
.heading h1 { margin: 4px 0 0; font-size: 25px; line-height: 1; text-transform: uppercase; }
.template-grid { position: absolute; top: 46.7%; left: 6%; right: 6%; bottom: max(11%, calc(env(safe-area-inset-bottom) + 72px)); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); gap: 7px; }
.template { min-width: 0; min-height: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.88); border-radius: 10px; padding: 2px; background: rgba(255,255,255,.95); }
.template img { width: 100%; height: 100%; display: block; border-radius: 7px; object-fit: contain; background: #020812; }
.template.selected { border-color: #ffe14a; box-shadow: 0 0 0 3px #ffb800; transform: scale(1.04); }
.continue { position: absolute; left: 50%; bottom: max(3.2%, calc(env(safe-area-inset-bottom) + 14px)); min-width: 47%; transform: translateX(-50%); padding-block: 10px; }
.content-card { position: absolute; top: 45.7%; left: 6%; right: 6%; bottom: 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 22px; border: 1px solid rgba(255,255,255,.4); border-radius: 25px; text-align: center; background: linear-gradient(rgba(0,113,199,.72), rgba(0,54,135,.9)); }
.content-card p { margin: 0; font-weight: 700; line-height: 1.4; }
.face-guide { width: min(49vw, 27vh); aspect-ratio: .78; display: grid; place-items: center; border: 4px dashed rgba(255,255,255,.86); border-radius: 48%; color: rgba(255,255,255,.6); font-size: 76px; }
.review-card img { width: 76%; max-height: 65%; border: 4px solid white; border-radius: 20px; object-fit: cover; }
.centered { top: 47%; }
.spinner { width: 76px; height: 76px; border: 8px solid rgba(255,255,255,.3); border-top-color: #fff36a; border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-mark { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #ff5c68; font-size: 50px; font-weight: 900; }
.result-heading { top: 39%; }
.result-card { position: absolute; top: 45%; left: 6%; right: 6%; bottom: max(3%, calc(env(safe-area-inset-bottom) + 12px)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.result-card > img { min-height: 0; max-width: 89%; flex: 1; border: 4px solid white; border-radius: 18px; object-fit: contain; background: #020812; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.result-actions .primary, .result-actions .secondary { padding: 11px 20px; font-size: 13px; }
@media (max-height: 650px) { .heading h1 { font-size: 19px; } .content-card { gap: 10px; padding: 13px; } .primary, .secondary { padding: 10px 20px; } }