:root {
  --navy: #0b1b31;
  --navy-2: #112b49;
  --ink: #10243d;
  --muted: #8091a4;
  --paper: #fffdf9;
  --line: #e7e5df;
  --orange: #f47b3f;
  --orange-deep: #df5b2a;
  --mint: #a9ddd3;
  --yellow: #ffd166;
  --soft-blue: #eaf4f7;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 50% -10%, #28547a 0%, var(--navy) 49%, #071322 100%);
  font-family: "Manrope", system-ui, sans-serif;
  overflow-x: hidden;
}

button, a { font: inherit; }
button { cursor: pointer; }

.snow { position: fixed; inset: 0; pointer-events: none; opacity: .52; z-index: 0; }
.snow::before, .snow::after {
  content: ""; position: absolute; inset: -20% 0 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.8px), radial-gradient(circle, rgba(255,255,255,.48) 0 1.4px, transparent 2px);
  background-size: 64px 70px, 103px 112px;
  animation: drift 19s linear infinite;
}
.snow::after { inset: -50% 0 0; opacity: .35; background-size: 89px 94px, 137px 155px; animation-duration: 28s; }
@keyframes drift { to { transform: translate3d(18px, 180px, 0); } }

.game-shell { position: relative; z-index: 1; width: min(100% - 32px, 1050px); margin: 0 auto; padding: 28px 0 26px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: white; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; position: relative; display: inline-block; transform: rotate(-8deg); }
.brand-mark::before { content: ""; position: absolute; inset: 3px 2px 4px; background: var(--orange); border-radius: 45% 55% 48% 52%; box-shadow: 0 5px 0 #b74725; }
.brand-mark span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff8e9; z-index: 1; }
.brand-mark span:nth-child(1) { left: 12px; top: 12px; }.brand-mark span:nth-child(2) { left: 22px; top: 19px; }.brand-mark span:nth-child(3) { left: 11px; top: 25px; }
.brand-copy { display: grid; gap: 1px; line-height: 1; }.brand-copy strong { font-size: 15px; letter-spacing: .19em; }.brand-copy small { color: #a9bacb; font-size: 10px; letter-spacing: .02em; }
.sound-button { border: 1px solid rgba(255,255,255,.23); background: rgba(255,255,255,.05); color: #e0ebf3; padding: 9px 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; transition: .2s ease; }
.sound-button:hover, .sound-button[aria-pressed="true"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }.sound-icon { font-size: 17px; line-height: 1; }

.progress-wrap { max-width: 390px; margin: 47px 0 15px auto; }.progress-meta { display: flex; justify-content: space-between; color: #98aabc; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 9px; }.progress-track { height: 3px; background: rgba(255,255,255,.16); border-radius: 99px; overflow: hidden; }.progress-track span { display: block; height: 100%; width: 10%; border-radius: inherit; background: var(--orange); transition: width .5s ease; }

.scene { position: relative; min-height: 399px; overflow: hidden; border-radius: 25px; background: linear-gradient(131deg, #183956, #0d223a 60%, #0b192c); color: white; box-shadow: 0 23px 55px rgba(2, 12, 23, .31); isolation: isolate; }
.scene::before { content: ""; position: absolute; width: 470px; height: 470px; top: -280px; right: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,199,109,.23) 0 9%, rgba(255,165,90,.07) 30%, transparent 68%); z-index: -1; }.scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(5, 16, 29, .72)); z-index: -1; }
.scene-glow { position: absolute; width: 150px; height: 150px; right: 19%; top: 44px; background: radial-gradient(circle, rgba(255,215,128,.82) 0 5%, rgba(255,170,85,.3) 23%, transparent 68%); filter: blur(3px); opacity: .7; }.skyline { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; display: flex; gap: 10px; align-items: flex-end; opacity: .63; z-index: -1; }.skyline i { display: block; width: 12%; background: #091a2d; border-radius: 3px 3px 0 0; position: relative; }.skyline i:nth-child(1) { height: 51%; }.skyline i:nth-child(2) { height: 77%; }.skyline i:nth-child(3) { height: 61%; }.skyline i:nth-child(4) { height: 89%; }.skyline i:nth-child(5) { height: 68%; }.skyline i:nth-child(6) { height: 45%; }.skyline i::after { content: ""; position: absolute; inset: 12px 18%; background: repeating-linear-gradient(180deg, rgba(255,208,111,.55) 0 4px, transparent 4px 14px); opacity: .35; }
.scene-content { position: relative; padding: 47px clamp(27px, 7vw, 73px) 52px; max-width: 720px; }.eyebrow { margin: 0 0 17px; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }.scene h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(39px, 6vw, 66px); letter-spacing: -.045em; line-height: .97; font-weight: 700; }.scene h1 em { color: #ffc976; font-style: normal; }.scene-text { max-width: 545px; margin: 23px 0 34px; color: #c6d3df; font-size: 15px; line-height: 1.75; }.character-row { display: inline-flex; align-items: center; gap: 11px; }.character-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); font-size: 10px; font-weight: 800; text-transform: uppercase; }.avatar-you { background: #d96d42; color: white; }.character-info { display: grid; gap: 3px; }.character-info strong { color: #f4f8fb; font-size: 12px; }.character-info span { color: #91a4b7; font-size: 11px; }

.dialogue-card { position: relative; margin: -34px 24px 0; padding: 24px 27px 26px; border-radius: 20px; background: var(--paper); box-shadow: 0 17px 36px rgba(7, 17, 28, .21); }.dialogue-top { display: flex; align-items: center; gap: 8px; color: #a3a9b0; font-size: 9px; font-weight: 800; letter-spacing: .17em; }.dialogue-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #fff0e6; }.dialogue-text { margin: 13px 0 20px; color: #172d45; font-family: "Playfair Display", Georgia, serif; font-size: clamp(19px, 2.7vw, 24px); line-height: 1.3; }.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.choice { display: grid; grid-template-columns: 27px 1fr 19px; align-items: center; gap: 9px; text-align: left; min-height: 56px; border: 1px solid var(--line); background: #fff; color: #233a52; padding: 10px 13px 10px 10px; border-radius: 12px; font-size: 12px; line-height: 1.35; transition: transform .18s ease, border .18s ease, box-shadow .18s ease, background .18s ease; }.choice:hover, .choice:focus-visible { border-color: var(--orange); background: #fffaf5; box-shadow: 0 6px 15px rgba(237, 113, 50, .12); transform: translateY(-2px); outline: none; }.choice-key { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #f2f4f3; color: #87919a; font-size: 11px; font-weight: 800; }.choice:hover .choice-key, .choice:focus-visible .choice-key { background: var(--orange); color: white; }.choice-arrow { color: #a5adb4; font-size: 18px; text-align: right; transition: transform .18s ease; }.choice:hover .choice-arrow { color: var(--orange); transform: translate(2px, -2px); }

.ending-card { position: relative; overflow: hidden; margin: 28px 24px 0; padding: 38px clamp(26px, 6vw, 59px) 40px; border-radius: 20px; color: white; background: linear-gradient(135deg, #1e4660, #0e283e); box-shadow: 0 17px 36px rgba(7, 17, 28, .26); }.ending-card::after { content: "✦"; position: absolute; font-size: 185px; color: rgba(255,204,107,.11); right: -16px; top: -43px; transform: rotate(15deg); }.ending-stamp { position: absolute; top: 20px; right: 22px; color: var(--yellow); border: 1px solid rgba(255,209,102,.53); border-radius: 999px; padding: 5px 9px; font-size: 9px; font-weight: 800; letter-spacing: .15em; }.ending-card h2 { position: relative; z-index: 1; margin: 0; max-width: 610px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(32px, 5vw, 52px); line-height: 1.03; letter-spacing: -.035em; }.ending-card p:not(.eyebrow) { position: relative; z-index: 1; max-width: 590px; color: #c7d6df; font-size: 15px; line-height: 1.7; margin: 19px 0 27px; }.ending-details { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: #a8c2ce; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }.ending-details span:first-child { color: #ffd581; border: 1px solid rgba(255,213,129,.35); border-radius: 999px; padding: 6px 9px; }.restart-button { position: relative; z-index: 1; margin-top: 31px; border: 0; border-radius: 999px; background: var(--orange); color: white; padding: 13px 19px; font-size: 12px; font-weight: 800; letter-spacing: .03em; transition: background .2s ease, transform .2s ease; }.restart-button:hover { background: var(--orange-deep); transform: translateY(-2px); }.restart-button span { display: inline-block; margin-right: 7px; font-size: 16px; vertical-align: -1px; }.is-hidden { display: none; }
.footer { display: flex; justify-content: space-between; align-items: center; color: #88a0b5; font-size: 10px; letter-spacing: .04em; padding: 23px 4px 0; }.footer-spark { color: #f3b65d; font-size: 16px; }

.fade-in { animation: fadeIn .48s ease both; }@keyframes fadeIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .game-shell { width: min(100% - 20px, 520px); padding-top: 18px; }.brand-copy small { display: none; }.sound-label { display: none; }.sound-button { padding: 8px 10px; }.progress-wrap { margin-top: 34px; }.scene { min-height: 430px; border-radius: 20px; }.scene-content { padding: 37px 25px 55px; }.scene-text { font-size: 14px; line-height: 1.65; margin-top: 20px; }.dialogue-card, .ending-card { margin-left: 9px; margin-right: 9px; }.dialogue-card { padding: 21px 18px 19px; }.choices { grid-template-columns: 1fr; }.choice { min-height: 53px; }.footer { padding-left: 3px; padding-right: 3px; }.footer span:first-child { max-width: 260px; line-height: 1.45; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* quiz, attempts and gift states */
.game-tools{display:flex;align-items:center;gap:11px}.lives{display:flex;gap:5px;align-items:center;height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.23);border-radius:999px;color:#ff9765;font-size:10px}.lives span.lost{color:#63778b;opacity:.32;transform:scale(.72)}.avatar-moroz{background:#d96d42;color:white;box-shadow:0 0 0 4px rgba(244,123,63,.13)}.choice:disabled{cursor:default;opacity:.48;transform:none;box-shadow:none}.feedback{margin:-4px 0 17px;padding:13px 15px;border-radius:11px;font-size:12px;line-height:1.5}.feedback-wrong{color:#9c4328;background:#fff0e8;border:1px solid #ffd3bf}.retry-button{display:block;margin-top:9px;padding:0;border:0;background:transparent;color:#c45129;font-weight:800;font-size:11px}.gift-overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:18px;background:rgba(5,15,26,.78);backdrop-filter:blur(9px);opacity:0;transition:opacity .19s ease}.gift-overlay.is-open{opacity:1}.gift-overlay.is-hidden{display:none}.gift-card{position:relative;width:min(100%,480px);padding:35px 34px 31px;border-radius:25px;text-align:center;background:var(--paper);box-shadow:0 28px 80px rgba(0,0,0,.37);transform:translateY(12px) scale(.97);transition:transform .22s ease;overflow:hidden}.gift-overlay.is-open .gift-card{transform:none}.gift-close{position:absolute;right:15px;top:13px;width:32px;height:32px;border:0;border-radius:50%;color:#7d8b96;background:#f1f1ed;font-size:22px}.gift-box{position:relative;width:73px;height:64px;display:grid;place-items:center;margin:0 auto 20px;color:white;font-size:27px;background:var(--orange);border-radius:8px 8px 13px 13px;box-shadow:0 8px 0 #c84f27}.gift-box:before{content:"";position:absolute;left:-7px;right:-7px;top:-8px;height:13px;border-radius:5px;background:#ff9b61}.gift-box:after{content:"";position:absolute;top:-8px;bottom:0;width:10px;background:#ffd166}.gift-from{margin:0 0 10px;color:var(--orange-deep);font-size:9px;font-weight:800;letter-spacing:.18em}.gift-card h2{margin:0;color:var(--ink);font-family:"Playfair Display",Georgia,serif;font-size:clamp(27px,7vw,38px);line-height:1.08}.gift-card>p:not(.gift-from):not(.placeholder-note){margin:14px auto 19px;max-width:360px;color:#6e7d89;font-size:13px;line-height:1.6}.promo-row{display:flex;gap:8px;padding:7px;border:1px dashed #efb18e;border-radius:12px;background:#fff8f1}.promo-row code{flex:1;display:grid;place-items:center;color:#ba4924;font-family:"Manrope",sans-serif;font-size:clamp(13px,4vw,17px);font-weight:800;letter-spacing:.04em}.promo-row button{border:0;border-radius:8px;background:white;color:#6d7880;padding:10px 11px;font-size:10px;font-weight:700}.placeholder-note{margin:9px 0 19px;color:#a2a6a8;font-size:9px}.gift-continue{width:100%;border:0;border-radius:11px;background:var(--orange);color:white;padding:14px 18px;font-size:12px;font-weight:800}.gift-continue span{margin-left:7px}
@media(max-width:620px){.game-tools{gap:6px}.lives{padding:0 9px}.gift-card{padding:31px 19px 24px}.promo-row{flex-direction:column}.promo-row button{width:100%}}