:root {
  color-scheme: light;
  --ink: #512b3b;
  --wine: #802e4a;
  --wine-dark: #602038;
  --rose: #c97890;
  --rose-soft: #e5aab5;
  --gold: #b58a60;
  --gold-light: #e9cda8;
  --text: #593c49;
  --muted: #856f77;
  --paper: #fffaf6;
  --blush: #f8eceb;
  --border: #ead5d3;
  --shade: rgba(92, 42, 59, .14);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: #f9f0ee; color: var(--ink); overflow-x: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button, a, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #b74f7c; outline-offset: 4px; }
::selection { background: #d794aa; color: #fff; }
.backdrop {
  position: fixed; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 7% 9%, rgba(232, 167, 180, .46), transparent 27%),
    radial-gradient(circle at 93% 66%, rgba(234, 181, 194, .37), transparent 36%),
    linear-gradient(115deg, #f9f0ee 0%, #fff8f5 53%, #faece8 100%);
}
.backdrop::after {
  content: ""; position: absolute; inset: 0; opacity: .25;
  background-image: radial-gradient(#bc838c 0.65px, transparent 0.65px);
  background-size: 18px 18px;
}
.app-frame, .admin-frame { width: min(100% - 48px, 1120px); margin: auto; }
.app-frame { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { height: 98px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .17em; white-space: nowrap; }
.brand-symbol { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #d9acaa; border-radius: 50%; background: rgba(255,255,255,.5); color: var(--wine); font: 32px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; }
.header-caption, .header-return { color: var(--wine); font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.header-return:hover { color: #ba6f87; }

.experience {
  position: relative;
  width: 100%;
  margin: 12px auto 70px;
  border: 1px solid rgba(207, 153, 152, .48);
  border-radius: 27px;
  background: rgba(255, 250, 247, .95);
  box-shadow: 0 24px 65px rgba(104,54,72,.13), 0 3px 12px rgba(104,54,72,.04);
  overflow: hidden;
  isolation: isolate;
}
.experience::before {
  content: ""; position: absolute; z-index: -1; inset: 9px; border: 1px solid rgba(206,158,146,.20);
  border-radius: 20px; pointer-events: none;
}
.film-top, .film-bottom { display: flex; align-items: center; gap: 14px; position: absolute; left: 44px; right: 44px; color: #b98883; pointer-events: none; }
.film-top { top: 24px; }
.film-bottom { bottom: 20px; }
.film-top span, .film-bottom span { display: block; height: 1px; flex: 1; background: linear-gradient(90deg,transparent,#e5c8bf); }
.film-top span:last-child, .film-bottom span:last-child { background: linear-gradient(90deg,#e5c8bf,transparent); }
.film-top i,.film-bottom i { font: 19px/1 "Cormorant Garamond",Georgia,serif; }
.scene { animation: reveal .46s ease-out both; }
@keyframes reveal { from {opacity:0;transform:translateY(9px)} to {opacity:1;transform:translateY(0)} }

.intro { padding: 51px 54px 58px; }
.intro-layout { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(290px, .93fr); gap: 45px; align-items: center; min-height: 485px; }
.inner { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.eyebrow {
  color: var(--rose); margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1.7;
}
.intro h1, .admin-intro h1, .result h2, .quiz h2, .admin-panel h2, .history h2 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
.intro h1 {
  position: relative; margin: 15px 0 7px;
  font-size: clamp(70px, 8.4vw, 111px);
  line-height: .87; font-weight: 600; letter-spacing: -.056em;
  color: #6b2c42;
}
.intro h1 em { color: #be6d85; font-weight: 500; letter-spacing: -.06em; }
.title-flourish { font: 34px/1 "Cormorant Garamond",Georgia,serif; position: absolute; right: -42px; bottom: 8px; color: #dba0ae; transform: rotate(-16deg); }
.ornament { display: flex; gap: 12px; width: 148px; align-items: center; justify-content: flex-start; color: #bc8887; margin: 18px 0 25px; }
.ornament span { flex: 1; height: 1px; background: linear-gradient(90deg,#d5a3a3,#e3c7ba); }
.ornament span:last-child { background: linear-gradient(90deg,#e3c7ba,transparent); }
.ornament i { font: 23px/1 "Cormorant Garamond",Georgia,serif; }
.hero-copy { max-width: 440px; color: var(--text); line-height: 1.85; font-size: 15px; margin: 0 0 26px; }
.hero-copy strong { color: #792a4b; font-weight: 850; }
.reward {
  display: flex; gap: 13px; width: 100%; max-width: 460px; min-height: 88px;
  padding: 18px 18px; margin-bottom: 20px; align-items: center;
  background: linear-gradient(120deg,#fcf0ef,#fff9f4);
  border: 1px solid #e5c1c3; border-left: 4px solid #bf7d94;
  border-radius: 13px;
}
.reward-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; color: #a56970; font-size: 19px; background: #f5dfe2; }
.reward-body { flex: 1; min-width: 0; }
.reward-body span { display: block; font-size: 10px; letter-spacing: .12em; font-weight: 850; color: #ae6d82; margin-bottom: 4px; }
.reward-body strong { font: 600 clamp(20px,2.1vw,25px)/1.1 "Cormorant Garamond",Georgia,serif; color: #6a2d45; }
.reward-mark { color: #c48a99; font: 28px/1 "Cormorant Garamond",Georgia,serif; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid transparent; border-radius: 13px;
  font-size: 14px; font-weight: 800; line-height: 1.35;
  padding: 14px 23px; min-height: 55px;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: .47; }
.btn span:last-child { font-size: 20px; line-height: 1; }
.btn-gold {
  background: linear-gradient(115deg,#9b4564,#762943); color: #fff8f6;
  box-shadow: 0 10px 22px rgba(126,45,76,.20);
}
.btn-gold:hover:not(:disabled) { background: linear-gradient(115deg,#b95e7c,#8b3153); box-shadow: 0 15px 25px rgba(126,45,76,.25); }
.btn-main { width: 100%; max-width: 460px; min-height: 61px; justify-content: space-between; padding: 15px 26px; }
.inline-error { width: 100%; padding: 14px 17px; margin: 15px 0 0; border-radius: 9px; background: #fff0f0; border: 1px solid #deacb0; color: #8c283e; font-size: 13px; line-height: 1.6; }

.intro-visual { height: 470px; position: relative; display: grid; place-items: center; min-width: 0; }
.intro-visual::before {
  content:""; position:absolute; inset:4% 1% 4% 1%; border-radius: 48% 48% 45% 45%;
  background: radial-gradient(ellipse at 50% 44%,rgba(227,172,181,.44),rgba(255,236,229,.15) 60%,transparent 75%);
  filter: blur(12px);
}
.visual-arch {
  position: relative; z-index: 1; width: min(100%, 340px); height: 420px;
  border-radius: 48% 48% 13px 13px / 34% 34% 13px 13px;
  border: 4px solid #deb5a7;
  padding: 9px; background: linear-gradient(125deg,#f6d5d2,#df9fa7 38%,#8d3a57);
  box-shadow: 0 20px 35px rgba(105,41,63,.19), inset 0 0 0 1px #f9e7d7;
  transform: rotate(-2deg);
}
.visual-arch::before,.visual-arch::after {
  content:""; position:absolute; z-index:-1; width:100%; height:100%; border:1px solid #d5aa9b;
  border-radius:inherit;
}
.visual-arch::before { transform:translate(11px,12px); }
.visual-arch::after { transform:translate(-12px,-8px);opacity:.8; }
.visual-arch-inner {
  width: 100%; height: 100%; border-radius: inherit; overflow:hidden;
  border: 1px solid #f8e2d0;
  background:
    radial-gradient(circle at 53% 34%,rgba(241,163,163,.50) 0%,transparent 43%),
    repeating-linear-gradient(135deg, transparent,transparent 39px,rgba(242,209,182,.13) 40px, transparent 41px),
    linear-gradient(145deg,#a64a66,#74304c 64%,#60253f);
  position:relative;
}
.visual-arch-inner::before { content:"";position:absolute;inset:13px;border:1px solid rgba(248,213,173,.4);border-radius: inherit;pointer-events:none; }
.visual-arch-inner::after { content:"";position:absolute;bottom:11%;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,#e9bf9b,transparent); }
.flower-art { position: absolute; width: 100%; height: 98%; top: 5%; left:0; filter: drop-shadow(0 6px 2px rgba(81,22,50,.15)); }
.visual-star { position:absolute;z-index:2;color:#b7747a;font-size:32px; }
.star-a { top:28px;right:10px; }
.star-b { bottom:52px;left:3px; color:#c58a85; font-size:24px; }
.star-c { top:90px;left:3px; font-size:17px; }
.visual-leaf {position:absolute;z-index:2;width:35px;height:72px;border:1px solid rgba(184,122,112,.55);border-radius:100% 0 100% 0;opacity:.55;}
.visual-leaf-a{bottom:10px;right:24px;transform:rotate(17deg)}
.visual-leaf-b{bottom:38px;right:4px;transform:rotate(47deg) scale(.7)}

/* Upcoming prize: a deliberately different, prominent feature card. */
.coming {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  width:100%; margin:30px auto 0;
  border-radius:20px; border:1px solid rgba(160,135,211,.78);
  padding:26px 34px 27px;
  color:#fff;
  background:
    radial-gradient(circle at 83% -28%,rgba(199,186,255,.62),transparent 39%),
    radial-gradient(circle at 3% 120%,rgba(84,145,224,.42),transparent 55%),
    linear-gradient(115deg,#403574 0%,#4b4c91 46%,#6685c2 100%);
  box-shadow:0 19px 31px rgba(76,68,137,.20),inset 0 1px 0 rgba(255,255,255,.22);
}
.coming::before { content:"";position:absolute;inset:7px;border:1px solid rgba(235,222,255,.22);border-radius:14px;pointer-events:none; }
.coming::after {content:"✦";position:absolute;right:177px;top:14px;color:#d8d0ff;opacity:.44;font-size:34px;pointer-events:none;}
.coming-sheen { position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 15%,rgba(255,255,255,.08) 33%,transparent 51%); }
.coming-content {position:relative;z-index:2;min-width:0;flex:1;}
.coming-meta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-bottom:8px;}
.pill-outline {
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:100px;
  font-weight:850;font-size:11px;letter-spacing:.11em;color:#473b80;
  background:#fff7fb;box-shadow:0 3px 12px #201e4b36;white-space:nowrap;
}
.pill-glow{display:inline-block;width:7px;height:7px;background:#a773d6;border-radius:50%;box-shadow:0 0 0 3px #e6d7f1;}
.coming-sub{font-size:10px;font-weight:850;letter-spacing:.11em;color:#e1ddfb;}
.coming-title{font:600 clamp(34px,4vw,51px)/1.02 "Cormorant Garamond",Georgia,serif;letter-spacing:-.035em;color:#fff;}
.coming-title em{color:#f4e2fc;font-weight:500;}
.coming-description{font-size:13px;color:#f0ecff;line-height:1.6;margin:8px 0 0;}
.coming-seal{
  position:relative;z-index:2;flex:0 0 136px;display:flex;align-items:center;justify-content:center;flex-direction:column;
  width:136px;height:136px;border:1px solid rgba(246,228,255,.64);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,.04));
  box-shadow:0 0 0 8px rgba(238,228,255,.095),0 0 0 9px rgba(238,228,255,.17);
}
.coming-number{font:600 83px/.78 "Cormorant Garamond",Georgia,serif;color:#fff9ff;}
.coming-months{font-size:10px;font-weight:850;letter-spacing:.13em;color:#f4eeff;margin-top:12px;}

/* Questions */
.quiz { max-width:770px;min-height:630px;margin:auto;padding:102px 20px 103px; }
.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.quiz-counter{font:600 25px/1 "Cormorant Garamond",Georgia,serif;color:#ad6985;font-variant-numeric:tabular-nums;}
.progress-track{height:7px;border-radius:50px;overflow:hidden;background:#f0dfdf;margin:22px 0 58px;border:1px solid #eed3d8;}
.progress-bar{height:100%;background:linear-gradient(90deg,#d6a5a5,#a64467);transition:width .28s ease;border-radius:50px;}
.question-kicker{color:#ae7485;font-size:12px;letter-spacing:.065em;font-weight:800;margin:0 0 12px;}
.quiz h2{font-size:clamp(40px,5.8vw,61px);font-weight:600;line-height:1.06;letter-spacing:-.028em;margin:0 0 32px;color:#622b42;}
.answer-options{display:grid;gap:12px;}
.answer-button{
  display:flex;align-items:center;gap:17px;
  width:100%;min-height:76px;padding:16px 20px;text-align:left;
  background:#fffaf9;border:1px solid #e5cfd0;border-radius:14px;color:#674653;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.answer-button:hover{background:#fff2f5;border-color:#ca8c9f;}
.answer-button.chosen{background:linear-gradient(120deg,#f5dae1,#fff1ee);border-color:#aa4c6c;box-shadow:inset 4px 0 0 #a94769;}
.answer-digit{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#f8e8e9;font:600 20px/1 "Cormorant Garamond",Georgia,serif;color:#af6d81;}
.answer-label{flex:1;min-width:0;line-height:1.6;font-weight:650;font-size:15px;overflow-wrap:anywhere;}
.answer-check{font-size:20px;color:#b88e9d;}
.answer-button.chosen .answer-digit{background:#a64a6b;color:white;}
.answer-button.chosen .answer-check{color:#963a62;}
.quiz-actions{display:flex;gap:16px;justify-content:space-between;margin-top:37px;}
.btn-back{min-width:130px;color:#925b70;border-color:#e0bcc5;background:#fff6f5;}
.btn-back:hover:not(:disabled){background:#f9e5e9;}
.btn-next{min-width:222px;}

/* Results */
.result{display:flex;flex-direction:column;align-items:center;text-align:center;padding:90px 45px 60px;}
.result-crest{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#f4dce1;border:1px solid #e3b9c1;color:#a54262;font:49px/1 "Cormorant Garamond",Georgia,serif;margin-bottom:30px;box-shadow:0 0 0 12px #f9ebec;}
.result .eyebrow{font-size:13px;}
.result h2{max-width:660px;font-size:clamp(47px,6.4vw,76px);line-height:.98;font-weight:600;letter-spacing:-.036em;color:#612d44;margin:19px 0 4px;}
.result .ornament{margin:13px auto 21px;}
.result-description{max-width:480px;color:var(--text);font-size:16px;line-height:1.85;margin:0;}
.result-counter{display:flex;flex-direction:column;gap:6px;align-items:center;margin:23px 0 29px;}
.result-counter strong{font:600 59px/1 "Cormorant Garamond",Georgia,serif;color:#ab5879;}
.result-counter span{font-size:10px;font-weight:800;letter-spacing:.15em;color:#a46d7b;}
.result .btn-main{width:100%;max-width:470px;}
.telegram-caption{max-width:420px;margin:14px auto 0;color:#947984;line-height:1.6;font-size:12px;}
.result-coming{width:min(100%,760px);margin-top:45px;text-align:left;}
.result.is-winner .result-crest{background:#f4cfdc;color:#963659;box-shadow:0 0 0 12px #fbe8ef,0 8px 30px #dd9eb552;}

/* Admin dashboard shares the same visual system. */
.admin-main{padding:42px 0 85px;}
.admin-intro{margin-bottom:36px;}
.admin-intro h1{font-weight:600;font-size:clamp(47px,6.5vw,74px);letter-spacing:-.045em;line-height:.96;color:#622c45;margin:12px 0 19px;}
.admin-intro h1 em{color:#bb6b85;font-weight:500;}
.admin-subtitle{color:var(--muted);font-size:15px;line-height:1.8;margin:0;}
.admin-panel{padding:31px;background:rgba(255,250,247,.95);border:1px solid #e5c5c4;border-radius:20px;box-shadow:0 15px 33px rgba(100,52,69,.075);}
.login-panel{max-width:500px;margin:39px auto;}
.admin-panel h2,.history h2{font-weight:600;font-size:35px;letter-spacing:-.025em;line-height:1.13;color:#673149;margin:0 0 13px;}
.login-panel > p:not(.inline-error),.setting-help{color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 23px;}
.admin-panel label{display:block;font-size:13px;font-weight:800;color:#754659;margin:0 0 9px;}
.admin-input{width:100%;height:57px;padding:0 15px;color:var(--text);border:1px solid #e0bfc4;background:#fffcfb;border-radius:11px;outline:0;font-size:14px;}
.admin-input:focus{border-color:#a4496b;box-shadow:0 0 0 3px #f4dde5;}
.admin-input option{background:#fff9f6;color:#674653;}
.login-panel .btn-main{margin-top:19px;}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:24px;}
.stat-card{display:flex;flex-direction:column;justify-content:space-between;gap:13px;min-height:136px;padding:22px 26px;border-radius:16px;border:1px solid #e6c6c9;background:linear-gradient(135deg,#fffaf8,#f8e7e9);}
.stat-card span{font-size:11px;font-weight:850;letter-spacing:.07em;color:#a57383;}
.stat-card strong{font:600 52px/1 "Cormorant Garamond",Georgia,serif;color:#79374f;}
.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.section-title-row h2{margin:5px 0 13px;}
.setting-panel{margin-bottom:47px;}
.setting-status{flex:0 0 auto;white-space:nowrap;background:#fff0df;border:1px solid #e3bfa2;color:#986843;font-size:10px;letter-spacing:.07em;font-weight:800;padding:9px 12px;border-radius:30px;}
.setting-status.is-set{color:#34744f;background:#e2f3e5;border-color:#a3d9b4;}
.setting-help{max-width:850px;margin:3px 0 21px;}
.settings-actions{display:flex;align-items:stretch;gap:12px;}
.settings-actions select{max-width:460px;flex:1;}
.settings-info{color:#8a5367;font-size:13px;line-height:1.6;margin:13px 0 0;}
.history{margin-top:19px;}
.history-count{font:600 13px "Manrope",sans-serif;color:#9f8390;white-space:nowrap;}
.action-toolbar{display:flex;align-items:center;gap:9px;}
.btn-outline{min-height:45px;border-color:#d7b2bc;background:#fff8f6;color:#8b4764;font-size:12px;}
.btn-outline:hover{background:#f6e5e9;}
.btn-subtle{min-height:45px;border-color:#ead2d5;background:#f9eced;color:#906775;font-size:12px;}
.attempt-list{display:grid;gap:14px;margin-top:20px;}
.attempt-card{padding:23px 25px;background:#fffaf7;border:1px solid #e3c5c7;border-radius:17px;box-shadow:0 6px 22px rgba(106,56,70,.05);}
.attempt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;}
.attempt-identity h3{font:600 29px/1 "Cormorant Garamond",Georgia,serif;margin:0 0 9px;color:#6c3349;}
.attempt-date{color:#917582;font-size:13px;margin:0;}
.result-pill{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 12px;border-radius:30px;font-size:10px;letter-spacing:.04em;font-weight:850;}
.result-win{background:#e7f4ec;color:#377151;border:1px solid #add8be;}
.result-loss{background:#f9e8ea;color:#a05062;border:1px solid #e7bdc5;}
.attempt-score{font-size:13px;font-weight:800;color:#986478;margin:16px 0;}
.answer-details{padding-top:16px;border-top:1px solid #ead4d5;}
.answer-details summary{cursor:pointer;min-height:28px;color:#a65070;font-size:13px;font-weight:800;}
.answer-details[open] summary{padding-bottom:18px;}
.admin-answers{display:grid;gap:11px;}
.answer-record{padding:14px 17px;border-radius:12px;border:1px solid #ebd8d9;background:#fff5f4;}
.answer-record-title{font-size:13px;line-height:1.6;font-weight:800;color:#6e4353;margin-bottom:9px;}
.answer-record-choice{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;font-size:13px;line-height:1.65;color:#846473;}
.answer-indicator{white-space:nowrap;font-size:11px;font-weight:850;}
.answer-indicator.correct{color:#39835a;}
.answer-indicator.wrong{color:#b34e64;}
.expected-answer{font-size:12px;line-height:1.7;color:#9b5473;margin:9px 0 0;}
.empty-history{padding:44px 22px;text-align:center;color:#8d6c7b;line-height:1.8;font-size:14px;border:1px dashed #dfbfc5;border-radius:15px;}

@media(max-width:920px) {
  .intro{padding:48px 34px 50px;}
  .intro-layout{grid-template-columns:minmax(0,1.04fr) minmax(220px,.96fr);gap:16px;}
  .intro h1{font-size:clamp(67px,9vw,98px);}
  .intro-visual{height:420px;}
  .visual-arch{height:375px;width:min(100%,305px);}
  .reward-body strong{font-size:22px;}
  .quiz{padding-inline:45px;}
}
@media(max-width:690px) {
  .app-frame,.admin-frame{width:min(100% - 24px,1120px);}
  .site-header{height:76px;padding-inline:2px;}
  .brand{font-size:10px;letter-spacing:.13em;gap:9px;}
  .brand-symbol{width:37px;height:37px;font-size:26px;}
  .header-caption,.header-return{font-size:10px;letter-spacing:.08em;}
  .experience{margin:5px auto 35px;border-radius:21px;}
  .experience::before{inset:6px;border-radius:16px;}
  .film-top,.film-bottom{left:25px;right:25px;}
  .film-top{top:15px}.film-bottom{bottom:14px}
  .intro{padding:44px 20px 36px;}
  .intro-layout{display:flex;flex-direction:column;gap:7px;min-height:0;}
  .inner{width:100%;align-items:center;text-align:center;}
  .intro h1{font-size:clamp(75px,15.5vw,108px);margin-top:14px;}
  .title-flourish{font-size:29px;right:-33px;}
  .inner .ornament{margin:14px auto 20px;}
  .hero-copy{font-size:14px;margin-bottom:23px;max-width:450px;line-height:1.7;}
  .reward{max-width:470px;text-align:left;min-height:80px;padding:14px;}
  .reward-body strong{font-size:23px;}
  .intro .btn-main{max-width:470px;}
  .intro-visual{height:215px;width:100%;margin-top:11px;}
  .visual-arch{width:180px;height:205px;padding:5px;border-width:2px;}
  .visual-arch::before{transform:translate(6px,6px);}
  .visual-arch::after{transform:translate(-5px,-5px);}
  .visual-arch-inner::before{inset:7px;}
  .visual-star{font-size:22px;}
  .star-a{right:22%;top:11px;}
  .star-b{left:21%;bottom:13px;}
  .star-c{left:19%;top:35px;}
  .visual-leaf{display:none;}
  .coming{margin-top:26px;padding:22px 20px;gap:12px;border-radius:16px;}
  .coming-title{font-size:clamp(29px,7vw,43px);}
  .coming-sub{font-size:9px;letter-spacing:.03em;}
  .coming-seal{width:94px;height:94px;flex-basis:94px;box-shadow:0 0 0 5px rgba(238,228,255,.095);}
  .coming-number{font-size:59px;}
  .coming-months{font-size:8px;margin-top:8px;}
  .coming::after{right:112px;font-size:25px;}
  .coming-description{font-size:12px;}
  .pill-outline{font-size:10px;padding:6px 10px;}
  .quiz{min-height:595px;padding:79px 23px 74px;}
  .progress-track{margin:20px 0 42px;}
  .quiz h2{font-size:clamp(37px,10vw,53px);margin-bottom:28px;}
  .answer-button{min-height:72px;padding:13px 12px;gap:12px;}
  .answer-digit{flex-basis:36px;width:36px;height:36px;font-size:19px;}
  .answer-label{font-size:14px;}
  .quiz-actions{gap:9px;margin-top:29px;}
  .btn-back{min-width:0;padding:12px 17px;}
  .btn-next{min-width:0;flex:1;padding:12px 14px;}
  .result{padding:72px 21px 46px;}
  .result-crest{width:77px;height:77px;font-size:43px;}
  .result h2{font-size:clamp(47px,10vw,67px);}
  .result-description{font-size:14px;}
  .result .btn-main{font-size:12px;padding-inline:16px;}
  .result-coming{margin-top:37px;}
  .admin-main{padding:29px 0 62px;}
  .admin-intro h1{font-size:clamp(42px,9vw,62px);}
  .admin-panel{padding:20px 17px;border-radius:15px;}
  .stat-grid{gap:8px;}
  .stat-card{padding:16px 12px;min-height:110px;}
  .stat-card span{font-size:9px;letter-spacing:0;}
  .stat-card strong{font-size:41px;}
  .section-title-row{flex-wrap:wrap;gap:9px;}
  .section-title-row h2{font-size:30px;}
  .setting-status{font-size:9px;}
  .settings-actions{flex-wrap:wrap;}
  .settings-actions select,.settings-actions button{max-width:none;width:100%;flex:1 1 100%;}
  .history .action-toolbar{width:100%;}
  .attempt-card{padding:18px 15px;}
  .attempt-top{flex-wrap:wrap;}
  .answer-record{padding:12px;}
}
@media(max-width:380px) {
  .intro{padding-inline:14px;}
  .eyebrow{font-size:11px;}
  .intro h1{font-size:70px;}
  .coming{padding-inline:13px;gap:7px;}
  .coming-title{font-size:28px;}
  .coming-seal{width:83px;height:83px;flex-basis:83px;}
  .coming-number{font-size:52px;}
  .coming-months{font-size:7px;}
  .coming-sub{font-size:8px;}
  .quiz{padding-inline:16px;}
  .quiz h2{font-size:38px;}
  .btn-next{font-size:12px;}
  .stat-card{padding-inline:8px;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}


/* 2026-11-04: phone-first, fixed viewport, no page scrolling */
@media (max-width: 690px) {
  html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  .wife-page .app-frame {
    width: 100%; height: 100dvh; min-height: 0; overflow: hidden;
    padding: max(7px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  }
  .wife-page .site-header { flex: 0 0 41px; height: 41px; }
  .wife-page .experience {
    flex: 1; min-height: 0; width: 100%; margin: 3px auto 0;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 19px;
  }
  .wife-page .film-top, .wife-page .film-bottom { display: none; }
  .wife-page .intro {
    flex: 1; min-height: 0; padding: 13px 15px 15px;
    display: flex; flex-direction: column; justify-content: center; gap: 12px;
  }
  .wife-page .intro-layout { flex: 0 1 auto; min-height: 0; gap: 0; display: block; }
  .wife-page .inner { gap: 0; }
  .wife-page .intro .eyebrow { font-size: 10px; line-height: 1.25; }
  .wife-page .intro h1 { font-size: clamp(46px, 11vh, 76px); margin: 10px 0 4px; line-height: .78; }
  .wife-page .intro .ornament { margin: 8px auto; width: 85px; }
  .wife-page .intro .ornament i { font-size: 16px; }
  .wife-page .hero-copy { margin: 3px 0 12px; font-size: clamp(11px, 1.85vh, 14px); line-height: 1.45; }
  .wife-page .reward { min-height: 0; margin-bottom: 11px; padding: 10px 12px; gap: 10px; }
  .wife-page .reward-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 15px; }
  .wife-page .reward-body span { font-size: 9px; }
  .wife-page .reward-body strong { font-size: clamp(19px, 3.5vh, 25px); }
  .wife-page .btn-main { min-height: 48px; padding: 10px 16px; font-size: 13px; }
  .wife-page .intro-visual { display: none !important; }
  .wife-page .coming {
    flex: 0 0 auto; margin: 0; padding: 13px 14px; min-height: 115px;
    border: 2px solid #d2b9ff; box-shadow: 0 8px 19px rgba(76,68,137,.2);
    gap: 8px; border-radius: 14px;
  }
  .wife-page .coming-meta { gap: 6px; margin-bottom: 6px; }
  .wife-page .coming-sub { font-size: 8px; }
  .wife-page .coming-title { font-size: clamp(24px, 5.8vw, 35px); line-height: 1; }
  .wife-page .coming-description { font-size: 11px; margin-top: 5px; line-height: 1.3; }
  .wife-page .coming-seal { flex: 0 0 72px; width: 72px; height: 72px; }
  .wife-page .coming-number { font-size: 47px; }
  .wife-page .coming-months { font-size: 7px; margin-top: 5px; }
  .wife-page .quiz {
    flex: 1; min-height: 0; width: 100%; padding: 16px 15px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .wife-page .progress-track { margin: 12px 0 17px; }
  .wife-page .quiz h2 { font-size: clamp(28px, 6vh, 45px); margin-bottom: 16px; line-height: 1; }
  .wife-page .question-kicker { margin-bottom: 6px; }
  .wife-page .answer-options { gap: 8px; }
  .wife-page .answer-button { min-height: 51px; padding: 9px 10px; }
  .wife-page .answer-digit { flex-basis: 31px; width: 31px; height: 31px; font-size: 16px; }
  .wife-page .answer-label { font-size: clamp(11px, 1.9vh, 14px); line-height: 1.4; }
  .wife-page .quiz-actions { margin-top: 15px; }
  .wife-page .quiz-actions .btn { min-height: 46px; }
  .wife-page .result {
    flex: 1; min-height: 0; padding: 16px 14px;
    justify-content: center;
  }
  .wife-page .result-crest { width: 42px; height: 42px; font-size: 26px; margin: 0 0 9px; box-shadow: 0 0 0 5px #f9ebec; }
  .wife-page .result h2 { font-size: clamp(33px, 6vh, 49px); margin: 8px 0 2px; }
  .wife-page .result .ornament { margin: 5px auto 8px; }
  .wife-page .result-description { font-size: 12px; line-height: 1.4; }
  .wife-page .result-counter { margin: 9px 0; }
  .wife-page .result-counter strong { font-size: 38px; }
  .wife-page .telegram-caption { font-size: 10px; margin: 6px auto 0; }
  .wife-page .result-coming { margin-top: 12px; width: 100%; }
  .wife-page .inline-error { margin-top: 7px; padding: 8px 10px; font-size: 11px; line-height: 1.35; }
}
@media (max-width: 690px) and (max-height: 660px) {
  .wife-page .site-header { flex-basis: 31px; height: 31px; }
  .wife-page .brand-symbol { width: 28px; height: 28px; }
  .wife-page .intro { gap: 6px; padding: 8px 12px; }
  .wife-page .intro h1 { font-size: 44px; margin: 6px 0; }
  .wife-page .intro .ornament { display: none; }
  .wife-page .hero-copy { margin: 5px 0 7px; }
  .wife-page .reward { padding: 7px 10px; margin-bottom: 7px; }
  .wife-page .coming { min-height: 95px; padding: 8px 11px; }
  .wife-page .coming-seal { width: 59px; height: 59px; flex-basis: 59px; }
  .wife-page .coming-number { font-size: 39px; }
  .wife-page .quiz { padding: 8px 12px; }
  .wife-page .quiz h2 { font-size: 28px; margin-bottom: 8px; }
  .wife-page .answer-options { gap: 5px; }
  .wife-page .answer-button { min-height: 43px; padding: 5px 8px; }
  .wife-page .quiz-actions { margin-top: 9px; }
  .wife-page .result-crest, .wife-page .result .ornament { display: none; }
  .wife-page .result-coming { margin-top: 6px; }
}