:root{
  --navy:#102c44;--navy2:#1d4a68;--gold:#d8a744;--gold2:#f4d991;--parch:#f5e5c4;--cream:#fff8e8;
  --wine:#7d1d2a;--green:#1e6a4a;--ink:#2c241d;--muted:#716659;--line:#d9bd87;--ok:#2b7b4b;--bad:#a63b3b;
  --shadow:0 16px 40px rgba(15,35,50,.18);font-family:Georgia,"Times New Roman",serif;color:var(--ink)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#d9e1e5}body{min-height:100dvh;background:radial-gradient(circle at 10% 0,#eef4f6,transparent 34%),linear-gradient(135deg,#bdcbd2,#edf1f2 45%,#c7d2d7)}button,input{font:inherit}.app-shell{width:min(100%,520px);min-height:100dvh;margin:auto;background:var(--cream);box-shadow:0 0 60px rgba(9,29,42,.22);position:relative;overflow:hidden}.screen{min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 17px max(30px,calc(22px + env(safe-area-inset-bottom)));background:radial-gradient(circle at 50% 0,#fffdf7 0,#f8ecd4 50%,#ead5ad 100%)}
.hero-screen{min-height:100dvh;background:#0d2639;display:grid;place-items:center;padding:0}.hero-stage{position:relative;width:100%;max-height:100dvh;overflow:hidden;background:#0d2639}.hero-stage img{display:block;width:100%;height:auto;max-height:100dvh;object-fit:contain;object-position:center top}.hero-hotspot{position:absolute;left:28.5%;width:43%;height:8.5%;border:0;border-radius:999px;background:transparent;cursor:pointer;color:transparent;box-shadow:none;z-index:4;-webkit-tap-highlight-color:transparent}.hero-hotspot:focus-visible{opacity:1!important;outline:4px solid #fff;outline-offset:2px;background:rgba(255,255,255,.12)!important}.hero-hotspot.start{top:54.2%}.hero-hotspot.progress{top:64.5%}.hero-hotspot.settings{top:74.0%}
.btn{appearance:none;border:0;border-radius:14px;padding:14px 18px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(30,34,35,.12);transition:.18s transform,.18s filter}.btn:hover{filter:brightness(1.02)}.btn:active{transform:translateY(1px)}.btn-primary{color:#fff;background:linear-gradient(180deg,#244e68,#102c44);border:1px solid #315d78}.btn-secondary{color:#402f1d;background:linear-gradient(#f4d98f,#d4a142);border:1px solid #b47f2c}.btn-wine{color:#fff;background:linear-gradient(#9b2f3d,#701b27)}
.topbar{display:grid;grid-template-columns:44px 1fr 52px;gap:10px;align-items:center;margin-bottom:12px}.back-btn,.icon-btn{border:1px solid rgba(123,90,43,.28);background:#fff8e8;border-radius:12px;width:44px;height:44px;font-size:25px;color:var(--navy);cursor:pointer}.brand-mini{text-align:center;font-weight:800;color:var(--navy);font-size:15px;line-height:1.15}.section-title{font-size:clamp(30px,9vw,44px);margin:8px 0 4px;color:var(--navy);text-align:center}.section-subtitle{text-align:center;color:var(--muted);margin:0 auto 20px;max-width:460px;font-family:Arial,sans-serif;font-size:13px;line-height:1.45}.home-kicker{text-align:center;font:800 11px Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8c6b35}.parchment{background:linear-gradient(180deg,#fff9ea,#f0dfb9);border:1px solid #c39a59;border-radius:20px;box-shadow:var(--shadow);padding:19px}.register-card{margin:4vh auto 0;max-width:470px}.register-visual{height:155px;margin:-4px -4px 17px;border-radius:16px;background:url('assets/scene-crown.jpg') center 23%/cover no-repeat;box-shadow:inset 0 -50px 50px rgba(15,30,38,.28)}.register-card h1{text-align:center;color:var(--navy);margin:0 0 8px}.field{display:grid;gap:7px;margin:14px 0;font-weight:700;color:#493a2d}.field input{width:100%;border:1px solid #c7aa77;border-radius:11px;padding:13px 14px;font:16px Arial,sans-serif;background:#fffefa}.consent{display:flex;gap:10px;align-items:flex-start;font:13px/1.4 Arial,sans-serif;color:#5e554c;margin:16px 0}.privacy-note{font:12px Arial,sans-serif;color:#74695d}.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.chapter-card{position:relative;overflow:hidden;border:1px solid #b58a4c;border-radius:16px;padding:0;text-align:left;cursor:pointer;min-height:124px;box-shadow:0 9px 20px rgba(78,54,27,.14);background:#19384e}.chapter-card::before{content:"";position:absolute;inset:0;background:var(--chapter-img) center/cover no-repeat;opacity:.62}.chapter-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,26,39,.10),rgba(8,24,37,.90))}.chapter-card .chapter-content{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;color:#fff}.chapter-card .num{font:800 10px Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#f4d991}.chapter-card h3{margin:5px 0 0;color:#fff;font-size:17px;line-height:1.1;text-shadow:0 2px 4px #000}.home-card{display:grid;gap:10px;margin-bottom:15px}.wide-card{display:flex;align-items:center;gap:13px;padding:14px;border-radius:16px;background:linear-gradient(120deg,#fffaf0,#efd9ae);border:1px solid #c9a66b;box-shadow:0 8px 18px rgba(52,40,24,.09);cursor:pointer;text-align:left}.wide-card .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--navy);color:var(--gold2);font-size:23px}.wide-card strong{display:block;color:var(--navy);font-size:17px}.wide-card small{font:12px Arial,sans-serif;color:var(--muted)}
.story-banner{height:128px;border-radius:18px;overflow:hidden;position:relative;border:1px solid rgba(60,45,30,.2);box-shadow:0 8px 18px rgba(40,34,28,.10);margin-bottom:12px;background:#18384e}.story-banner img{width:100%;height:100%;object-fit:cover}.story-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,25,37,.75))}.story-banner .caption{position:absolute;z-index:2;left:12px;right:12px;bottom:9px;color:#fff;font:800 11px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 4px #000}.question-card{background:linear-gradient(180deg,#fffdf6,#fff4dd);border:1px solid #d2b27c;border-radius:20px;padding:18px;box-shadow:var(--shadow);position:relative}.question-card::before{content:"♛";position:absolute;right:16px;top:10px;color:rgba(174,127,45,.17);font-size:42px}.progress-line{height:7px;border-radius:99px;background:#ddccb0;overflow:hidden;margin:8px 0 14px}.progress-line>div{height:100%;background:linear-gradient(90deg,var(--wine),var(--gold))}.question-meta{display:flex;justify-content:space-between;gap:8px;font:800 10px Arial,sans-serif;text-transform:uppercase;letter-spacing:.07em;color:#7e6e57;padding-right:34px}.question-text{font-size:clamp(20px,5.7vw,27px);line-height:1.2;color:var(--navy);margin:17px 0}.options{display:grid;gap:9px}.option{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid #cfb588;border-radius:13px;padding:10px 11px;background:rgba(255,252,242,.92);color:#332d27;font:700 14px/1.25 Arial,sans-serif;cursor:pointer;min-height:51px}.option .letter{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#e5ca91;color:#47351d;border:1px solid #c8a363}.option.correct{background:#e7f4e9;border-color:#69a27b}.option.correct .letter{background:#2f8b55;color:#fff;border-color:#2f8b55}.option.wrong{background:#f8e3df;border-color:#c77c70}.option.wrong .letter{background:#c94a36;color:#fff;border-color:#c94a36}.feedback{margin-top:13px;padding:13px;border-radius:13px;font:14px/1.45 Arial,sans-serif}.feedback.ok{background:#e5f3e8;color:#23593a}.feedback.bad{background:#f8e5e1;color:#7d3029}.score-hero{text-align:center;padding:20px 0}.score-hero .big{font-size:70px;color:var(--gold);font-weight:800;text-shadow:0 2px 0 #8e6320}.score-hero h1{font-size:32px;color:var(--navy);margin:0}.pill{display:inline-grid;place-items:center;padding:6px 9px;border-radius:99px;background:#e8d9bb;color:#5b4828;font:800 11px Arial,sans-serif}.result-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed #cab88e}.result-row:last-child{border-bottom:0}.about-card{background:#fffaf0;border:1px solid #ccb07c;border-radius:16px;padding:16px;margin:12px 0;font:14px/1.5 Arial,sans-serif}.about-card h3{font-family:Georgia,serif;color:var(--navy);margin-top:0}.toast{position:fixed;left:50%;bottom:max(22px,calc(14px + env(safe-area-inset-bottom)));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#102c44;color:#fff;padding:11px 16px;border-radius:999px;font:13px Arial,sans-serif;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:360px){.screen{padding-left:12px;padding-right:12px}.chapter-grid{grid-template-columns:1fr}.question-card{padding:15px}.question-text{font-size:20px}.option{font-size:13px}.brand-mini{font-size:13px}}
@media(min-width:700px){body{padding:24px 0}.app-shell{min-height:calc(100dvh - 48px);height:calc(100dvh - 48px);border:7px solid #191d20;border-radius:34px;overflow:auto;scrollbar-width:none}.app-shell::-webkit-scrollbar{display:none}.screen{min-height:100%}.hero-screen{min-height:100%}.hero-stage{max-height:none}.hero-stage img{max-height:none}}
@media(orientation:landscape) and (max-height:600px) and (max-width:950px){body{padding:0}.app-shell{width:min(100%,760px);height:100dvh;min-height:100dvh;border-radius:0;border:0}.hero-stage{width:min(430px,100%);margin:auto}.screen{padding-top:10px}.story-banner{height:92px}.question-text{font-size:20px;margin:12px 0}.options{grid-template-columns:1fr 1fr}.option{min-height:46px}}

.version-badge{position:absolute;right:10px;bottom:max(8px,env(safe-area-inset-bottom));z-index:5;padding:4px 8px;border-radius:999px;background:rgba(7,26,39,.72);border:1px solid rgba(244,217,145,.38);color:#f7e4ae;font:700 10px/1 Arial,sans-serif;letter-spacing:.05em;backdrop-filter:blur(5px)}
.screen::before{content:"";position:fixed;pointer-events:none;inset:0 auto auto 50%;width:min(100%,520px);height:7px;transform:translateX(-50%);background:linear-gradient(90deg,var(--wine),var(--gold),var(--navy));z-index:12;opacity:.92}
.chapter-card{transition:transform .18s ease,box-shadow .18s ease}.chapter-card:hover{transform:translateY(-2px);box-shadow:0 13px 24px rgba(43,37,28,.18)}
.question-card{overflow:hidden}.question-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--wine),var(--gold),var(--navy));opacity:.7}.option{transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.option:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 7px 15px rgba(43,37,28,.08);border-color:#b58a4c}.option:focus-visible,.btn:focus-visible,.back-btn:focus-visible,.icon-btn:focus-visible{outline:3px solid #2b6f98;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}