:root {
  color-scheme: light;
  --ink: #0b2045;
  --muted: #446084;
  --paper: rgba(255,255,255,.95);
  --line: #c8dbef;
  --blue: #086ee6;
  --shadow: 0 14px 35px #00205540;
}

body:is([data-screen=stats],[data-screen=results]) .app-shell { max-width:480px; min-height:100svh; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); background:linear-gradient(#0060c9d9,#075ac166 45%,#082e53b3),url('./images/paris.webp') center / cover; box-shadow:0 0 45px #00173180; }
body[data-screen=results] .app-shell { background:linear-gradient(#0064caa6,#004da133 45%,#123f49a6),url('./images/countryside.png') center / cover; }
body:is([data-screen=stats],[data-screen=results]) .topbar { height:66px; }
body:is([data-screen=stats],[data-screen=results]) .wordmark { font-size:18px; }
body:is([data-screen=stats],[data-screen=results]) main { min-height:calc(100svh - 125px); padding:0 0 20px; }
body:is([data-screen=stats],[data-screen=results]) .page-heading { padding:8px 0 20px; margin:0; text-align:center; }
body:is([data-screen=stats],[data-screen=results]) .page-heading h1 { font-size:28px; margin:0; }
body[data-screen=stats] .heading-icon { font-size:32px; margin-bottom:8px; }
body[data-screen=stats] .stats-panel { padding:14px 12px; }
body[data-screen=stats] .tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 14px; gap:4px; }
body[data-screen=stats] .tabs button { min-height:44px; padding:7px 3px; font-size:14px; border-radius:13px; }
body[data-screen=stats] .stat-grid { gap:7px; margin-bottom:22px; }
body[data-screen=stats] .stat-box { padding:12px 5px; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
body[data-screen=stats] .stat-box span { font-size:14px; line-height:1.25; overflow-wrap:break-word; }
body[data-screen=stats] .stat-box strong { font-size:clamp(18px,5vw,24px); line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
body[data-screen=stats] .stat-row { display:block; margin:0; padding:13px 0; border-top:1px solid var(--line); font-size:14px; }
body[data-screen=stats] .stat-row-title strong { display:block; text-align:left; font-size:16px; }
body[data-screen=stats] .stat-row-title span { display:block; margin:4px 0 9px; color:var(--muted); line-height:1.4; }
body[data-screen=stats] .stat-row-meter { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
body[data-screen=stats] .stat-row-meter strong { font-size:15px; font-variant-numeric:tabular-nums; }
body[data-screen=stats] .stats-records { margin-top:9px; }
body[data-screen=stats] .stats-records summary { cursor:pointer; padding:8px 0; font-weight:600; }
body[data-screen=stats] .stats-record-line { display:flex; justify-content:space-between; gap:12px; padding:5px 8px; }
body[data-screen=stats] .achievement-note { display:block; padding:14px; margin:15px 0 0; font-size:15px; }
body[data-screen=stats] .achievement-note strong,body[data-screen=stats] .achievement-note span,body[data-screen=stats] .achievement-note small { display:block; font-size:inherit; }
body[data-screen=stats] .achievement-note span { margin-top:6px; font-weight:500; }
body[data-screen=stats] .achievement-note small { font-size:13px; line-height:1.4; margin-top:9px; font-weight:400; }
body[data-screen=stats] .stats-history { font-size:13px; line-height:1.5; color:var(--muted); margin:14px 0 0; }
body[data-screen=results] .result-page { padding-top:0; }
body[data-screen=results] .heading-icon { font-size:55px; margin-bottom:10px; }
body[data-screen=results] .result-panel { padding:20px 16px; }
body[data-screen=results] .result-panel h2 { font-size:23px; margin-bottom:20px; }
body[data-screen=results] .result-score { font-size:46px; }
body[data-screen=results] .result-page>.gloss { width:100%; margin-top:12px; min-height:52px; }
body[data-screen=results] .summary-row { padding:12px 0; }
body:is([data-screen=stats],[data-screen=results]) footer { display:block; text-align:center; padding:4px 0 max(12px,env(safe-area-inset-bottom)); }
body:is([data-screen=stats],[data-screen=results]) footer>span { display:none; }
body:is([data-screen=stats],[data-screen=results]) .footer-button { font-size:12px; }
@media(max-width:340px) { body[data-screen=stats] .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* A portrait collection, using the same 480px canvas as the quiz. */
body[data-screen=profile] .app-shell { max-width:480px; min-height:100svh; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); background:linear-gradient(#006ae0d9,#0061b94d 42%,#023962a3),url('./images/countryside.png') center bottom / cover; box-shadow:0 0 45px #00173180; }
body[data-screen=profile] .topbar { height:66px; }
body[data-screen=profile] .wordmark { font-size:18px; }
body[data-screen=profile] main { min-height:calc(100svh - 130px); padding-top:0; }
body[data-screen=profile] .profile-title { font-size:28px; text-align:center; margin:4px 0 20px; text-shadow:0 2px 3px #002957; }
body[data-screen=profile] .player-card { display:flex; gap:12px; align-items:center; margin-bottom:20px; }
body[data-screen=profile] .player-card>div { flex:1; min-width:0; }
body[data-screen=profile] .player-card h2 { font-size:22px; margin:0 0 4px; overflow-wrap:anywhere; }
body[data-screen=profile] .player-card p { font-size:14px; margin:0; }
body[data-screen=profile] .avatar { display:grid; place-items:center; width:64px; height:64px; flex-shrink:0; font-size:38px; border:2px solid #d4f5ff; border-radius:50%; background:linear-gradient(#d0f5ff,#21a8eb); box-shadow:0 4px 12px #002b5680; }
body[data-screen=profile] .profile-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:5px; margin-bottom:12px; border:1px solid #cbe7ff; border-radius:18px; background:#f1f8ff; }
body[data-screen=profile] .profile-tabs button { min-height:44px; padding:7px 3px; font-size:14px; white-space:normal; border:0; border-radius:13px; color:#143457; background:transparent; }
body[data-screen=profile] .profile-tabs .active { color:white; background:linear-gradient(#11a9ff,#065bcf); box-shadow:0 2px 5px #004aaa45; }
body[data-screen=profile] .profile-panel { padding:16px 12px; border:1px solid #d2eaff; border-radius:22px; }
body[data-screen=profile] .section-title { font-size:20px; margin:0 0 15px; }
body[data-screen=profile] .badge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body[data-screen=profile] .badge-collection { background:linear-gradient(160deg,#072f67,#091f45); color:#fff; border-color:#529bdd; }
.collection-summary { padding:18px 14px; border:1px solid #4bbaff; border-radius:16px; background:linear-gradient(120deg,#085dbe,#293285); text-align:center; }
body[data-screen=profile] .collection-summary .section-title { margin-bottom:7px; }
.collection-summary p { margin:5px 0; font-size:1rem; font-weight:700; }
.collection-summary .collection-caption { margin-top:9px; font-size:.875rem; font-weight:400; line-height:1.5; color:#e4f5ff; }
.badge-section { margin-top:24px; }
body[data-screen=profile] .badge-section .section-title { margin-bottom:6px; }
.badge-section-note { font-size:.875rem; line-height:1.5; margin:0 0 15px; color:#d3e7ff; }
.journey-badge { --badge-top:#124e92; --badge-bottom:#0a3065; --metal:#89acd1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:13px 10px 10px; border:1px solid var(--metal); border-radius:18px; background:linear-gradient(150deg,var(--badge-top),var(--badge-bottom)); color:#fff; box-shadow:0 4px 12px #00143066; }
.journey-badge:nth-child(4n+2) { --badge-top:#683694; --badge-bottom:#362564; }
.journey-badge:nth-child(4n+3) { --badge-top:#08694f; --badge-bottom:#074438; }
.journey-badge:nth-child(4n+4) { --badge-top:#973d36; --badge-bottom:#602628; }
.rank-bronze { --metal:#e9ac79; --metal-light:#ffdfbd; --metal-dark:#914918; }
.rank-silver { --metal:#ddeaf7; --metal-light:#fff; --metal-dark:#647e9a; }
.rank-gold,.rank-complete { --metal:#ffda58; --metal-light:#fff3b5; --metal-dark:#ae720c; }
.rank-platinum { --metal:#e6edf2; --metal-light:#fffde8; --metal-dark:#707c92; }
.journey-badge.earned { border-width:2px; padding:12px 9px 9px; }
.journey-rank { font-size:.8125rem; font-weight:700; line-height:1.35; padding:3px 10px; border-radius:20px; background:#082348; color:#fff; }
.earned .journey-rank { background:var(--metal); color:#132a45; }
.journey-emblem { --metal:#89acd1; --metal-light:#b6d1e9; --metal-dark:#3c638d; width:80px; height:80px; box-sizing:border-box; display:grid; place-items:center; flex-shrink:0; border:5px solid var(--metal); border-radius:50%; overflow:hidden; background:radial-gradient(circle at 35% 25%,var(--metal-light),var(--metal-dark)); box-shadow:0 3px 0 var(--metal-dark),0 5px 12px #0005,inset 0 0 0 2px #ffffff80; }
.journey-emblem.rank-bronze { --metal:#e9ac79; --metal-light:#ffdfbd; --metal-dark:#914918; }
.journey-emblem.rank-silver { --metal:#ddeaf7; --metal-light:#fff; --metal-dark:#647e9a; }
.journey-emblem:is(.rank-gold,.rank-complete) { --metal:#ffda58; --metal-light:#fff3b5; --metal-dark:#ae720c; }
.journey-emblem.rank-platinum { --metal:#e6edf2; --metal-light:#fffde8; --metal-dark:#707c92; border-style:double; border-width:7px; }
.journey-emblem img { width:100%; height:100%; object-fit:cover; display:block; }
.journey-symbol { font-size:2.35rem; line-height:1.2; filter:drop-shadow(0 2px 2px #0004); }
.journey-emblem.rank-locked { border-style:dashed; }
.journey-badge h3 { font-size:1rem; line-height:1.3; margin:3px 0 0; overflow-wrap:anywhere; }
.journey-ranks { display:flex; gap:3px; line-height:1; font-size:1.125rem; }
.rank-mark { color:#bad0e8; }
.rank-mark.reached { color:#ffe072; }
.rank-mark.platinum.reached { color:#9df3ff; }
.journey-badge .journey-objective { font-size:.875rem; line-height:1.45; margin:0 0 4px; }
.journey-progress { width:100%; margin-top:auto; }
body[data-screen=profile] .journey-progress progress { accent-color:#60e8af; height:9px; }
.journey-progress small { display:block; color:#edf6ff; font-size:.8125rem; line-height:1.4; margin-top:6px; font-variant-numeric:tabular-nums; }
.journey-details-button { width:100%; min-height:44px; padding:8px 5px; background:#08264c; border:1px solid #91bee9; border-radius:10px; font:inherit; font-size:.875rem; font-weight:600; color:#fff; cursor:pointer; }
.journey-details-button:hover { background:#124078; }
.journey-details-button:focus-visible { outline:3px solid #ffda58; outline-offset:3px; }
body[data-screen=profile] .badge-collection .profile-history { color:#d3e7ff; border-color:#6895c0; }
.badge-details .journey-emblem { margin:0 auto 14px; }
.badge-detail-status { text-align:center; font-weight:700; font-size:1rem; }
.badge-tier-list { list-style:none; margin:16px 0; padding:0; display:grid; gap:10px; }
.badge-tier-list li { padding:12px; border:1px solid #649dd8; border-radius:12px; background:#113661; color:#fff; }
.badge-tier-list li.tier-won { background:#07543e; border-color:#50b798; }
.badge-tier-list p { margin:5px 0; font-size:.875rem; line-height:1.5; }
.badge-tier-list small { font-size:.8125rem; color:#e5f3ff; }
.badge-detail-note { font-size:.875rem; line-height:1.5; }
.badge-details>.gloss { width:100%; min-height:44px; }
body[data-screen=profile] progress { width:100%; height:8px; accent-color:#00985c; display:block; }
body[data-screen=profile] .profile-select-label { display:block; font-weight:700; font-size:14px; margin:14px 0 6px; }
body[data-screen=profile] select { width:100%; min-height:46px; border:1px solid #aecce8; border-radius:12px; padding:9px; background:#fff; color:#173552; font:inherit; }
body[data-screen=profile] select:focus-visible { outline:3px solid #096ee5; outline-offset:2px; }
body[data-screen=profile] .profile-level { margin-top:12px; border:1px solid #c7dbed; border-radius:15px; overflow:hidden; background:#f6faff; color:#153458; }
body[data-screen=profile] .profile-level h3 { margin:0; padding:8px 12px; font-size:16px; color:white; background:linear-gradient(#06aa74,#00784a); }
body[data-screen=profile] .profile-level.blue h3 { background:linear-gradient(#098efe,#054fab); }
body[data-screen=profile] .profile-level.gold h3 { background:linear-gradient(#bb8000,#885200); }
body[data-screen=profile] .profile-level.orange h3 { background:linear-gradient(#eb6615,#ae3502); }
body[data-screen=profile] .profile-level.red h3 { background:linear-gradient(#ed3350,#b10431); }
body[data-screen=profile] .medal-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:12px 4px; gap:2px; text-align:center; }
body[data-screen=profile] .medal { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
body[data-screen=profile] .medal-icon { font-size:32px; line-height:1.25; }
body[data-screen=profile] .medal.unearned .medal-icon { filter:grayscale(1); opacity:.55; }
body[data-screen=profile] .medal strong { font-size:14px; }
body[data-screen=profile] .medal span:not(.medal-icon),body[data-screen=profile] .medal small { font-size:12px; }
body[data-screen=profile] .medal.won small { color:#835200; font-weight:700; }
body[data-screen=profile] .profile-help,body[data-screen=profile] .profile-history { font-size:14px; line-height:1.5; margin:16px 0 0; }
body[data-screen=profile] .profile-history { padding-top:12px; border-top:1px solid var(--line); color:var(--muted); }
body[data-screen=profile] .legacy-badges { font-size:14px; margin-top:16px; }
body[data-screen=profile] .legacy-badges summary { cursor:pointer; padding:8px 0; font-weight:700; }
body[data-screen=profile] .legacy-badges p { margin:6px 0; }
body[data-screen=profile] .profile-footer { text-align:center; padding:16px 12px; margin:12px 0 0; border-radius:14px; background:#003d68cf; font-size:14px; }
body[data-screen=profile] .profile-totals { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
body[data-screen=profile] .profile-level>.level-access,body[data-screen=profile] .progress-detail { display:block; font-size:14px; margin:10px 12px; }
body[data-screen=profile] .profile-level>progress { width:calc(100% - 24px); margin:0 12px; }
body[data-screen=profile] footer { display:block; text-align:center; padding:4px 0 max(12px,env(safe-area-inset-bottom)); }
body[data-screen=profile] footer>span { display:none; }
body[data-screen=profile] .footer-button { font-size:12px; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; color: white; background: #064cac; font: 16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible,input:focus-visible { outline: 3px solid #ffe66b; outline-offset: 4px; }
button { transition: transform .16s,filter .16s,box-shadow .16s; }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(2px); }
button,input,progress { touch-action: manipulation; }
h1,h2,p { margin-top: 0; }
h1 { font-size: clamp(28px,3.5vw,42px); line-height: 1.12; letter-spacing: -.035em; }
h2 { font-size: 23px; line-height: 1.25; letter-spacing: -.025em; }
.backdrop { position: fixed; z-index: -1; inset: 0; background: url('./images/paris.webp') center center / cover; }
.backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#00388557 0%,#03327020 38%,#01162c40 100%); }
body[data-scene=castle] .backdrop { background-image: url('./images/castle.webp'); }
body[data-scene=countryside] .backdrop { background-image: url('./images/countryside.png'); }
body[data-screen=feedback]:has(.failure) .backdrop::after { background: linear-gradient(#440010bc,#750908c9); }
body[data-screen=feedback]:has(.success) .backdrop::after { background: linear-gradient(#00347935,#0029247a); }
.app-shell { max-width: 1120px; padding: 0 max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left)); margin: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 86px; gap: 16px; }
.icon-button { display: grid; place-items: center; flex-shrink: 0; min-width: 46px; height: 46px; border: 1px solid #ffffff42; border-radius: 50%; background: #003d9a77; color: white; font-size: 26px; text-decoration: none; box-shadow: inset 0 1px #ffffff2a; }
.wordmark { color: white; background: none; border: 0; display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 850; text-shadow: 0 2px 3px #052766; letter-spacing: -.04em; }
.tricolor { width: 30px; height: 21px; border: 1px solid #ffffff7a; border-radius: 4px; background: linear-gradient(90deg,#0864de 0 33.33%,white 33.33% 66.67%,#ef344a 66.67%); box-shadow: 0 2px 4px #00205740; }
main { padding: 10px 0 28px; min-height: calc(100dvh - 150px); outline: none; }
.narrow { max-width: 500px; margin: 0 auto; }
.home-page { width: 100%; max-width: 970px; margin: auto; }
.home-title { max-width: 630px; position: relative; margin: 10px auto 30px; text-align: center; text-shadow: 0 3px 4px #003274; }
.home-title h1 { white-space: pre-line; font-size: clamp(54px,8vw,86px); line-height: .91; font-weight: 900; letter-spacing: -.055em; margin-bottom: 16px; }
.home-title p { white-space: pre-line; font-size: 19px; line-height: 1.3; font-weight: 700; margin-bottom: 0; }
.flag { position: absolute; font-size: 74px; top: 12px; left: 18px; transform: rotate(-9deg); filter: drop-shadow(0 5px 6px #00286760); }
.category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.category-tile {
  min-height: 155px; border: 1px solid #e2f4ff; border-radius: 19px;
  color: white; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 13px 10px 15px; box-shadow: inset 0 2px 0 #ffffff7a, inset 0 -5px 12px #00184c50, 0 5px 0 #001c704d, 0 10px 16px #001b543d;
  text-shadow: 0 2px 3px #00132d9c; overflow: hidden; position: relative;
}
.category-tile::before { content: ''; position: absolute; inset: 0 0 50%; border-radius: 18px 18px 50% 50%; background: linear-gradient(#ffffff2f,transparent); pointer-events: none; }
.tile-icon { position: relative; font-size: 56px; line-height: 1.15; margin-bottom: 7px; filter: drop-shadow(0 4px 3px #08213b65); }
.tile-label { position: relative; max-width: 200px; font-size: 17px; font-weight: 780; line-height: 1.12; }
.blue { --top: #19bcff; --mid: #0078ed; --bottom: #0046b8; --edge: #78dbff; background: linear-gradient(155deg,var(--top),var(--mid) 48%,var(--bottom)); }
.green { --top: #20e37d; --mid: #00a954; --bottom: #006d39; --edge: #8affad; background: linear-gradient(155deg,var(--top),var(--mid) 48%,var(--bottom)); }
.gold { --top: #ffd044; --mid: #e6a010; --bottom: #a96000; --edge: #fff5a1; background: linear-gradient(155deg,var(--top),var(--mid) 48%,var(--bottom)); }
.orange { --top: #ffa13f; --mid: #f56907; --bottom: #b23400; --edge: #ffd096; background: linear-gradient(155deg,var(--top),var(--mid) 48%,var(--bottom)); }
.red { --top: #ff5273; --mid: #eb123e; --bottom: #9b0023; --edge: #ffb7c3; background: linear-gradient(155deg,var(--top),var(--mid) 48%,var(--bottom)); }
.purple { background: linear-gradient(145deg,#d178ff,#9748e2 40%,#471184); }
.teal { background: linear-gradient(145deg,#51e2e5,#1597b2 48%,#075778); }
.navy { background: linear-gradient(145deg,#72a4ff,#3266d1 40%,#163b91); }
.rose { background: linear-gradient(145deg,#ff95d5,#d340a1 40%,#7f166c); }
.copper { background: linear-gradient(145deg,#edb775,#b46b29 50%,#6c3509); }
.category-tile:nth-last-child(2) { grid-column: 2; }
.gloss {
  color: white; border: 1px solid var(--edge,#b4e2ff); border-radius: 16px; min-height: 56px; width: 100%;
  padding: 14px 20px; font-size: 19px; font-weight: 780; text-shadow: 0 2px 2px #00254c5c;
  box-shadow: inset 0 2px 3px #ffffff70, inset 0 -4px 8px #00254827, 0 5px 0 #00224a36, 0 10px 20px #00235030;
}
.gloss.gold { color: #39250c; text-shadow: 0 1px #ffe9af55; }
.mix-button { max-width: 540px; margin: 20px auto 0; display: block; }
.resume { max-width: 540px; margin: 0 auto 22px; display: block; }
.home-links { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
.home-links button { border: 1px solid #d9efff99; border-radius: 24px; color: white; background: #0042a5c9; padding: 11px 18px; font-weight: 700; min-height: 44px; }
.demo-label { text-align: center; margin: 18px 0 0; font-size: 13px; text-shadow: 0 2px 3px #052449; }
.page-heading { text-align: center; margin: 4px 0 25px; text-shadow: 0 2px 4px #00244e; }
.heading-icon { display: block; font-size: 49px; line-height: 1.1; margin-bottom: 10px; filter: drop-shadow(0 3px 3px #00244e55); }
.page-heading h1 { margin-bottom: 8px; }
.page-heading p { margin: 0; font-size: 17px; font-weight: 650; }
.levels-page { padding-top: 65px; }
.level-list { display: grid; gap: 13px; }
.level-button { display: flex; text-align: left; align-items: center; gap: 16px; min-height: 83px; padding: 16px 19px; }
.stars { flex: 0 0 118px; color: #ffdc3c; font-size: 22px; letter-spacing: -2px; text-shadow: 0 2px 0 #92500d,0 3px 4px #5e33096e; }
.level-label { flex: 1; }
.level-locked .chevron { font-size: 24px; }
.unlock-reward { display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px; border:2px solid #ffc948; border-radius:16px; background:linear-gradient(135deg,#fff4be,#ffe092); color:#573000; text-align:left; }
.unlock-reward strong,.unlock-reward span { display:block; }
.unlock-icon { font-size:38px; transform-origin:center; animation:unlock-pop .85s ease-out both; }
@keyframes unlock-pop { 0% { transform:scale(.65) rotate(-18deg); opacity:.4; } 45% { transform:scale(1.3) rotate(12deg); } 75% { transform:scale(.95) rotate(-5deg); } 100% { transform:scale(1) rotate(0); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .unlock-icon { animation:none; } }
.level-label strong { display: block; font-size: 20px; }
.level-label span { display: block; font-size: 14px; font-weight: 450; }
.chevron { font-size: 30px; line-height: 1; margin-left: auto; }
.scene-caption { text-align: center; margin: 24px auto; font-size: 15px; max-width: 400px; text-shadow: 0 2px 4px #001b36; }
.glass-panel { color: var(--ink); background: var(--paper); border: 1px solid #fff; border-radius: 22px; padding: 24px; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.formats { display: grid; gap: 12px; }
.format-button { position: relative; background: #eef6ff; border: 1px solid #b9d6f6; border-radius: 14px; color: var(--ink); text-align: left; padding: 18px 40px 18px 16px; min-height: 79px; }
.format-button strong { display: block; font-size: 19px; }
.format-button span:not(.chevron) { color: var(--muted); font-size: 14px; }
.format-button .chevron { position: absolute; right: 16px; top: 24px; color: #1779df; }
.game-header { text-align: center; text-shadow: 0 2px 4px #002956; }
.game-header h1 { font-size: 24px; margin-bottom: 8px; }
.game-header p { margin-bottom: 12px; font-weight: 600; }
progress { appearance: none; border: 0; width: 100%; height: 12px; border-radius: 20px; overflow: hidden; background: #dce8f7a6; accent-color: #0edb67; display: block; }
progress::-webkit-progress-bar { background: #dce8f7a6; }
progress::-webkit-progress-value { background: linear-gradient(#3aff8d,#00b85d); border-radius: 20px; box-shadow: inset 0 1px #c8ffde; }
progress::-moz-progress-bar { background: #08c66b; border-radius: 20px; }
.question-card { background: linear-gradient(135deg,#153c70,#081d40); color: #fff; border: 1px solid #dfba69; border-radius: 22px; min-height: 150px; display: grid; place-items: center; text-align: center; padding: 30px 25px; margin: 20px 0; box-shadow: inset 0 1px 0 #ffffff24,0 8px 20px #03132c60; }
.question-card h2 { margin: 0; font-size: 26px; font-weight: 780; line-height: 1.3; }
.answers { display: grid; gap: 12px; }
.answer-button { background: linear-gradient(180deg,#d7efff,#a9d6f5); color: #0b2445; border: 1px solid #89c9f0; border-radius: 20px; font-size: 19px; font-weight: 760; padding: 15px 18px; min-height: 61px; box-shadow: inset 0 2px 1px #ffffff99,0 4px 0 #28628d,0 8px 18px #06244d50; }
.answer-button:hover:not(:disabled) { background: linear-gradient(180deg,#e4f5ff,#bddff8); }
.answer-button:focus-visible { outline: 3px solid #ffda7b; outline-offset: 4px; }
.answer-button:active:not(:disabled) { transform: translateY(2px); }
.answer-button.eliminated { opacity: .2; text-decoration: line-through; }
.selected-correct { color: white!important; background: linear-gradient(#18e578,#009c40)!important; border-color: #91ffba; }
.selected-wrong { color: white!important; background: linear-gradient(#ff6262,#bd0730)!important; }
.aid-buttons { display: flex; justify-content: center; gap: 22px; margin: 24px 0 0; }
.aid-button { color: white; white-space: pre-line; background: radial-gradient(circle at 40% 10%,#805e31,#261e13); border: 1px solid #ffd897; border-radius: 18px; min-width: 94px; min-height: 76px; font-weight: 700; font-size: 16px; box-shadow: inset 0 2px #ffffff35, 0 5px 10px #0a223950; }
.aid-button:disabled { opacity: .45; }
.hint-card { background: #fff4cf; color: #573711; border-radius: 15px; padding: 17px; margin-top: 18px; box-shadow: var(--shadow); }
.hint-card p { margin: 6px 0 0; }
.practice-note { padding: 16px; color: #10395b; background: white; border-radius: 14px; margin: 0; }
.feedback-page { text-align: center; padding-top: 45px; }
.celebration { display: block; font-size: 41px; line-height: 1; letter-spacing: 18px; color: #ffe253; text-shadow: 0 0 20px #ffc247, 0 2px 3px #9c6110; margin-bottom: 22px; }
.feedback-emblem { display: grid; place-items: center; width: 140px; height: 140px; margin: 0 auto 25px; border: 3px solid #c6ff84; border-radius: 50%; font-size: 94px; font-weight: 850; line-height: 1; background: radial-gradient(circle at 30% 20%,#72fc76,#00a33f 72%); box-shadow: inset 0 4px 12px #d6ff9277, 0 0 0 12px #34f58526, 0 0 50px #56ff587d; text-shadow: 0 4px #00713d; }
.feedback-emblem.failure { border-color: #ff9a89; background: radial-gradient(circle at 30% 20%,#ff5b39,#bd001c 72%); box-shadow: inset 0 4px 12px #ffe29a55, 0 0 0 12px #ff332e25, 0 0 50px #ff412c7d; text-shadow: 0 4px #a5001a; }
.feedback-page h1 { text-shadow: 0 3px 6px #08281a; }
.explanation-card { color: #31210d; background: linear-gradient(130deg,#fff7e8,#f8e4c4); padding: 26px; border: 1px solid #fff6dc; border-radius: 20px; box-shadow: 0 10px 30px #00152860,inset 0 0 0 4px #fff9ed7a; margin-bottom: 24px; font-size: 19px; }
.explanation-card p:last-child { margin-bottom: 0; }
.correct-answer { display: block; color: #7d200b; font-size: 27px; margin: -3px 0 17px; }
.feedback-page .gloss { margin-top: 10px; }
.small-note { font-size: 13px; margin: 10px 0 0; text-shadow: 0 2px #5d1220; }
.result-page { padding-top: 20px; }
.result-page .heading-icon { font-size: 76px; }
.result-panel { text-align: center; }
.result-panel>p { margin-bottom: 0; }
.result-score { font-size: 49px; line-height: 1.15; font-weight: 850; margin: 4px 0 8px; }
.result-score strong { color: #008743; }
.summary-row { display: flex; align-items: center; gap: 12px; text-align: left; border-top: 1px solid var(--line); padding: 14px 0; font-size: 14px; }
.summary-row>span:first-child { font-size: 24px; width: 28px; text-align: center; }
.summary-row strong { margin-left: auto; text-align: right; }
.panel-note { font-size: 13px; color: var(--muted); margin-bottom: 0; }
.result-page>.gloss { margin-top: 20px; }
.tabs { display: flex; gap: 6px; margin: -9px -9px 17px; }
.tabs button { flex: 1; color: var(--ink); border: 0; border-radius: 30px; background: #e7f1ff; min-height: 40px; padding: 9px 7px; font-size: 13px; }
.tabs button.active { color: white; background: linear-gradient(#05bbff,#0062db); }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 22px; }
.stat-box { padding: 17px 6px; border: 1px solid #e1edfa; border-radius: 15px; text-align: center; background: #fff; }
.stat-box span { display: block; font-size: 12px; }
.stat-box strong { display: block; font-size: 28px; margin-top: 8px; }
.stat-box:nth-child(2) strong,.stat-box:nth-child(3) strong { color: #008a40; }
.section-title { font-size: 19px; margin-bottom: 14px; }
.stat-row { display: grid; grid-template-columns: 95px 1fr 45px; align-items: center; gap: 10px; margin-bottom: 15px; font-size: 13px; }
.stat-row strong { text-align: right; }
.stat-row progress { height: 10px; background: #e0e9f4; }
.stat-row progress::-webkit-progress-value { background: var(--mid,#146adb); }
.stat-row progress::-moz-progress-bar { background: var(--mid,#146adb); }
.achievement-note { display: flex; align-items: center; gap: 12px; background: #fff1c0; color: #84400a; padding: 16px; border-radius: 14px; font-weight: 700; margin-top: 22px; }
.achievement-note>span:first-child { font-size: 34px; }
.empty-state { color: var(--muted); font-size: 14px; }
.player-card { display: flex; align-items: center; gap: 14px; padding: 6px 8px 24px; text-shadow: 0 2px #02487b; }
.player-card h2 { margin: 0; overflow-wrap: anywhere; }
.player-card p { margin: 4px 0 0; font-size: 14px; }
.player-card>.icon-button { margin-left: auto; }
.avatar { display: grid; place-items: center; width: 65px; height: 65px; flex-shrink: 0; background: #81d4ff99; border-radius: 50%; border: 2px solid white; color: white; font-size: 38px; }
.badge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 12px; text-align: center; }
.badge-icon { font-size: 38px; display: block; filter: drop-shadow(0 3px 3px #193c6b35); }
.badge strong { display: block; font-size: 13px; line-height: 1.2; margin-top: 6px; }
.badge span:not(.badge-icon) { display: block; font-size: 12px; margin-top: 5px; line-height: 1.2; }
.badge small { display: block; font-size: 12px; margin-top: 6px; color: #008446; }
.badge.locked .badge-icon { filter: grayscale(1); opacity: .65; }
.badge.locked small { color: var(--muted); }
.settings-panel { padding: 7px 18px; }
.setting-row { width: 100%; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); background: none; display: flex; align-items: center; gap: 13px; text-align: left; min-height: 67px; padding: 15px 3px; font-size: 15px; }
.setting-row:last-child { border-bottom: 0; }
.setting-icon { flex: 0 0 25px; font-size: 24px; text-align: center; }
.setting-value { margin-left: auto; font-weight: 500; }
.switch { width: 45px; height: 25px; margin-left: auto; border-radius: 20px; background: #bfd4ea; box-shadow: inset 0 1px 3px #16366333; position: relative; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; height: 19px; width: 19px; border-radius: 50%; background: white; box-shadow: 0 2px 4px #1b385240; transition: left .15s; }
.switch.on { background: #02bf62; }
.switch.on::after { left: 23px; }
footer { display: flex; justify-content: space-between; gap: 14px; padding: 18px 0 max(22px,env(safe-area-inset-bottom)); font-size: 12px; color: #fff; text-shadow: 0 2px 4px #082544; }
.footer-button { border: 0; color: inherit; text-shadow: inherit; background: none; font: inherit; text-align: right; }
.notice { display: flex; align-items: center; gap: 12px; color: #163d64; background: #fffae7; border-radius: 14px; padding: 12px 16px; margin: 8px auto 15px; font-size: 14px; max-width: 700px; }
.notice-close { border: 0; color: #163d64; background: none; font-size: 24px; min-width: 35px; min-height: 35px; margin-left: auto; }
.update-button { display: block; margin: 10px auto; padding: 12px; border: 1px solid white; border-radius: 12px; background: #fff4c8; color: #3e3210; }
dialog { width: min(440px,calc(100% - 32px)); border: 1px solid white; padding: 30px 25px 25px; border-radius: 22px; color: #16335a; background: #f8fbff; box-shadow: 0 20px 70px #00133170; }
dialog::backdrop { background: #001737a1; backdrop-filter: blur(5px); }
dialog:has(.badge-details) { color:#fff; background:linear-gradient(155deg,#0b5297,#092a5b); border-color:#8bd7ff; max-height:calc(100svh - 32px); overflow-y:auto; }
dialog:has(.badge-details) .modal-close { color:#fff; background:#08274e; border-radius:50%; }
.modal-close { position: absolute; top: 7px; right: 9px; border: 0; background: none; font-size: 29px; color: #557093; min-height: 36px; min-width: 36px; }
.modal-actions { display: grid; gap: 12px; margin-top: 20px; }
.plain-button { color: #174271; border: 1px solid #c3d8f0; border-radius: 12px; background: #e9f3ff; min-height: 48px; padding: 12px 16px; }
.menu-links,.name-form { display: grid; gap: 12px; }
dialog:has(.menu-links) { color:#fff; background:linear-gradient(155deg,#1277ce,#064387 50%,#072858); border:1px solid #93d4ff; box-shadow:inset 0 1px 0 #ffffff55,0 20px 70px #00133199; }
dialog:has(.menu-links) h2 { text-shadow:0 2px 3px #002958; margin-bottom:20px; }
dialog:has(.menu-links) .modal-close { color:#fff; background:#002959; border:1px solid #78b9ed; border-radius:50%; width:36px; top:12px; right:12px; }
dialog .menu-links .plain-button { --menu-top:#1399ec; --menu-bottom:#0456aa; color:#fff; font-weight:700; font-size:16px; min-height:51px; border:1px solid #ffffff99; border-radius:14px; background:linear-gradient(var(--menu-top),var(--menu-bottom)); box-shadow:inset 0 2px 1px #ffffff40,0 3px 7px #001c5755; text-shadow:0 1px 2px #00233c80; }
dialog .menu-links .plain-button:nth-child(2) { --menu-top:#9851dc; --menu-bottom:#592899; }
dialog .menu-links .plain-button:nth-child(3) { --menu-top:#07965d; --menu-bottom:#00673d; }
dialog .menu-links .plain-button:nth-child(4) { --menu-top:#f8d25a; --menu-bottom:#e6a627; color:#482800; text-shadow:none; }
dialog .menu-links .plain-button:nth-child(5) { --menu-top:#e46c22; --menu-bottom:#a63e09; }
dialog .menu-links .plain-button:nth-child(6) { --menu-top:#0b929b; --menu-bottom:#04606b; }
dialog .menu-links .menu-demo { color:#d3eaff; font-size:13px; }
.name-form input { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #a8c4e5; border-radius: 10px; color: #17395e; background: white; }
.loading { max-width: 500px; margin: 18vh auto 0; text-align: center; }
.loading h1 { font-size: 76px; line-height: .93; text-shadow: 0 4px #0444a0; }
.loading progress { margin: 36px auto 15px; max-width: 300px; }
body.dark { --paper: rgba(13,35,71,.96); --ink: #f0f6ff; --muted: #b5c9e5; --line: #3e5978; }
body.dark .backdrop::after { background-color: #000a2d65; }
body.dark .format-button,body.dark .stat-box { background: #1b3a63; color: #f2f8ff; }
body.dark .tabs button:not(.active) { background: #264c7b; }
body.dark .stat-box:nth-child(2) strong,body.dark .stat-box:nth-child(3) strong { color: #68e9a4; }
@keyframes celebrate { 0% { transform: scale(.88); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.feedback-emblem { animation: celebrate .32s ease-out; }
@media(min-width:850px) {
  .home-page { display: grid; grid-template-columns: 280px minmax(0,1fr); column-gap: 32px; align-items: start; }
  .home-title { grid-column: 1; grid-row: 1; margin: 70px 0 0; }
  .home-title h1 { font-size: 72px; }
  .home-title .flag { position: static; display: block; font-size: 58px; margin-bottom: 22px; }
  .category-grid { grid-column: 2; grid-row: 1 / 5; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .category-tile { min-height: 146px; }
  .category-tile:nth-last-child(2) { grid-column: auto; }
  .home-page>.mix-button,.home-page>.home-links,.home-page>.demo-label,.home-page>.resume { grid-column: 1; width: 100%; }
  .home-links { flex-direction: column; gap: 10px; }
  .tile-label { font-size: 16px; }
}
@media(max-width:650px) {
  .app-shell { padding-left: max(17px,env(safe-area-inset-left)); padding-right: max(17px,env(safe-area-inset-right)); }
  .topbar { height: 68px; }
  .icon-button { width: 41px; min-width: 41px; height: 41px; font-size: 23px; }
  .wordmark { font-size: 18px; }
  main { padding-top: 3px; min-height: calc(100dvh - 140px); }
  .home-title { margin: 8px auto 19px; }
  .home-title h1 { font-size: 61px; }
  .home-title p { font-size: 16px; }
  .flag { font-size: 55px; left: 4%; top: 10px; }
  .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .category-tile { min-height: 117px; border-radius: 15px; padding: 10px 5px; }
  .category-tile:nth-last-child(2) { grid-column: auto; }
  .tile-icon { font-size: 38px; margin-bottom: 6px; }
  .tile-label { font-size: 13px; line-height: 1.1; }
  .home-links button { font-size: 14px; padding: 11px 14px; }
  .mix-button { margin-top: 15px; }
  .gloss { min-height: 53px; font-size: 18px; }
  .levels-page { padding-top: 40px; }
  .level-button { padding: 14px; gap: 10px; min-height: 79px; }
  .stars { flex-basis: 100px; font-size: 20px; }
  .level-label strong { font-size: 18px; }
  .level-label span { font-size: 13px; }
  .glass-panel { padding: 21px 16px; border-radius: 20px; }
  .question-card { padding: 25px 20px; min-height: 142px; }
  .question-card h2 { font-size: 23px; }
  .answer-button { min-height: 55px; padding: 13px 15px; font-size: 18px; }
  .aid-buttons { gap: 17px; }
  .aid-button { min-width: 80px; min-height: 72px; }
  .feedback-page { padding-top: 34px; }
  .feedback-emblem { width: 118px; height: 118px; font-size: 78px; }
  .explanation-card { padding: 25px 22px; font-size: 18px; }
  .stat-box strong { font-size: 25px; }
  .stat-row { grid-template-columns: 89px 1fr 42px; gap: 8px; }
  .settings-panel { padding: 5px 15px; }
  footer { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 8px; }
  .footer-button { text-align: center; min-height: 32px; }
}
@media(max-width:360px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .home-title h1 { font-size: 55px; }
  .flag { font-size: 42px; top: 15px; left: 0; }
  .category-tile { min-height: 113px; }
  .tile-label { font-size: 12px; }
  .tile-icon { font-size: 33px; }
  .stars { flex-basis: 83px; font-size: 17px; }
  .level-button { padding: 13px 10px; }
  .level-label span { font-size: 12px; }
  .aid-buttons { gap: 12px; }
  .badge-grid { column-gap: 7px; }
  .stat-box strong { font-size: 22px; }
}
body.no-motion *,body.no-motion *::after,body.no-motion *::before { animation: none!important; transition: none!important; }
@media(prefers-reduced-motion:reduce) { *,*::after,*::before { animation: none!important; transition: none!important; } }
/* Keep the backdrop behind the interface, above the document canvas. */
.backdrop { z-index: 0; }
.app-shell { position: relative; z-index: 1; }
.flag { width: 82px; height: 55px; background: linear-gradient(90deg,#0065d8 0 33.333%,#fff 33.333% 66.667%,#f32b42 66.667%); border-radius: 6px; border: 1px solid #ffffff66; box-shadow: inset 0 1px #ffffff55,0 7px 12px #00286160; }
@media(min-width:850px) { .home-title .flag { margin-left: auto; margin-right: auto; } }
@media(max-width:650px) { .flag { width: 64px; height: 43px; } }
@media(max-width:360px) { .flag { width: 50px; height: 34px; } }
@media(max-width:650px) {
  body[data-scene=paris] .backdrop { background-position: 73% center; }
  body[data-scene=castle] .backdrop { background-position: 65% center; }
  body[data-scene=countryside] .backdrop { background-position: 65% center; }
}

/* Category home: preserve the reference's portrait composition at every width. */
body[data-screen=themes] { background: #03255f; }
body[data-screen=themes] .backdrop {
  background-image: linear-gradient(#00246472,#00183dc4),url('./images/home-background.png');
  background-position: center; background-size: cover;
}
body[data-screen=themes] .backdrop::after { display: none; }
body[data-screen=themes] .app-shell {
  width: 100%; max-width: 480px; min-height: 100svh; padding: 0 12px;
  background: #12392f; isolation: isolate;
}
body[data-screen=themes] .app-shell::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: url('./images/home-background.png') center top / 100% auto no-repeat;
  mask-image: linear-gradient(to bottom,#000 0 calc(min(100vw,480px) * 1.45),transparent calc(min(100vw,480px) * 1.75));
}
body[data-screen=themes] .app-shell {
  box-shadow: 0 0 70px #000e2c80;
}
body[data-screen=themes] .topbar {
  position: absolute; z-index: 3; top: max(17px,env(safe-area-inset-top)); left: 12px; right: 12px;
  height: 44px; gap: 0;
}
body[data-screen=themes] .wordmark { visibility: hidden; }
body[data-screen=themes] .icon-button {
  border: 0; border-radius: 0; box-shadow: none; width: 44px; min-width: 44px; height: 44px;
  background: transparent; color: white; font-size: 26px; text-shadow: 0 2px 4px #034284;
}
body[data-screen=themes] #back { border-radius:12px; background:#063b83; border:1px solid #a6d3ff; box-shadow:0 2px 5px #001e5266; text-shadow:none; }
body[data-screen=themes] .home-settings { position:absolute; left:50px; top:0; min-height:44px; padding:7px 9px; border:1px solid #a6d3ff; border-radius:10px; background:#063b83; color:#fff; font-size:14px; font-weight:600; box-shadow:0 2px 5px #001e5266; }
body[data-screen=themes] #profile {
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='white'/%3E%3Ccircle cx='16' cy='12' r='5' fill='%230a56ba'/%3E%3Cpath d='M6 25c1-9 19-9 20 0-5 4-15 4-20 0' fill='%230a56ba'/%3E%3C/svg%3E") center / 29px no-repeat;
}
body[data-screen=themes] main { padding: 0; min-height: 0; }
body[data-screen=themes] .home-page { display: block; width: 100%; max-width: none; container-type: inline-size; }
body[data-screen=themes] .home-title {
  margin: 0; padding: max(70px,calc(env(safe-area-inset-top) + 53px)) 0 12px;
  width: 100%; max-width: none; text-align: center; text-shadow: 0 2px 3px #032450;
}
body[data-screen=themes] .home-title h1 {
  width: 64%; margin: 0 0 9px 20%; white-space: pre-line;
  font-family: 'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;
  font-size: clamp(3rem,15.5cqw,4.5rem); font-weight: 900; line-height: .93; letter-spacing: -.055em;
  filter: drop-shadow(0 3px 0 #03255b) drop-shadow(0 1px 2px #03172a);
  text-shadow: none;
}
body[data-screen=themes] .country-name {
  background: linear-gradient(#fff 0 38%,#ffdedf 52%,#ff525b 68%,#e50016 92%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
body[data-screen=themes] .home-title p {
  margin: 0 auto; white-space: pre-line; font-family: 'Arial Narrow',Arial,sans-serif;
  font-size: clamp(1rem,4.7cqw,1.3rem); line-height: 1.12; font-weight: 750;
}
body[data-screen=themes] .category-grid {
  display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px;
  width: 100%; margin: 0;
}
body[data-screen=themes] .category-tile {
  grid-column: span 2; position: relative; min-width: 0; min-height: 5.8rem;
  aspect-ratio: 1.14; display: flex; justify-content: flex-end; align-items: center;
  padding: 0; border: 1px solid #edf6ff; border-radius: 13px; overflow: hidden;
  box-shadow: inset 0 2px 1px #ffffff66,inset 0 -2px 6px #04163570,0 3px 5px #00143590;
  background: var(--tile-bottom); color: white; text-align: center;
}
body[data-screen=themes] .category-tile::before { display: none; }
body[data-screen=themes] .category-tile:nth-child(-n+3) { aspect-ratio: 1.22; min-height: 5.2rem; }
body[data-screen=themes] .category-tile:nth-child(10) { grid-column: 2 / span 2; }
body[data-screen=themes] .category-tile:nth-child(11) { grid-column: 4 / span 2; }
body[data-screen=themes] .tile-art {
  position: absolute; display: block; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; image-rendering: auto;
  pointer-events: none;
}
body[data-screen=themes] .tile-label {
  position: relative; display: block; width: 100%; max-width: none; margin: 0;
  padding: 18px 3px 6px; white-space: pre-line; font-family: 'Arial Narrow',Arial,sans-serif;
  font-size: clamp(.875rem,4.3cqw,1.2rem); line-height: 1.02; font-weight: 800;
  background: linear-gradient(to bottom,transparent 0%,#04132685 35%,#041326d9 100%);
  text-shadow: 0 1px 2px #000,0 2px 3px #0009;
}
body[data-screen=themes] .home-caption {
  position: relative; margin: 18px 2px 8px; padding: 15px 10px 18px;
  color: #28382d; text-shadow: none;
  background: linear-gradient(135deg,#fffdf2,#f8e7bd);
  border: 1px solid #e5bd6c; border-radius: 16px;
  box-shadow: inset 0 1px 0 #fff,0 5px 16px #001d2480;
  font: italic 700 clamp(1rem,4.3cqw,1.2rem)/1.4 Georgia,'Times New Roman',serif;
  text-align: center; white-space: pre-line;
}
body[data-screen=themes] .home-caption::after {
  content: ''; position: absolute; bottom: 7px; left: calc(50% - 32px); width: 64px; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg,#1658aa 0 33.33%,#fff 33.33% 66.66%,#dc3444 66.66%);
}
body[data-screen=themes] .resume { margin: 0 auto 12px; min-height: 44px; padding: 10px; font-size: 1rem; }
body[data-screen=themes] footer {
  display: block; text-align: center; padding: 0 0 max(10px,env(safe-area-inset-bottom));
  color: #f8edd2; text-shadow: 0 1px 2px #001a16;
}
body[data-screen=themes] footer>span { display: none; }
body[data-screen=themes] .footer-button { font-size: 12px; min-height: 32px; text-align: center; }
body[data-screen=themes] #notice:not(:empty) { padding-top: 66px; }
.menu-demo { font-size: 13px; line-height: 1.4; text-align: center; margin: 2px 0 0; color: #4c6281; }
@media(max-width:480px) {
  body[data-screen=themes] .app-shell { min-height: 100svh; }
}
@media(min-width:700px) {
  body[data-screen=themes] .app-shell { min-height: 100svh; }
}
body[data-screen=themes] .category-histoire { --tile-bottom: #6c350b; }
body[data-screen=themes] .category-geographie { --tile-bottom: #003d80; }
body[data-screen=themes] .category-patrimoine { --tile-bottom: #573011; }
body[data-screen=themes] .category-arts { --tile-bottom: #610b64; }
body[data-screen=themes] .category-musique { --tile-bottom: #7b370e; }
body[data-screen=themes] .category-cinema { --tile-bottom: #381067; }
body[data-screen=themes] .category-sport { --tile-bottom: #034d15; }
body[data-screen=themes] .category-traditions { --tile-bottom: #5c230c; }
body[data-screen=themes] .category-cuisine { --tile-bottom: #a75200; }
body[data-screen=themes] .category-sciences { --tile-bottom: #032b94; }
body[data-screen=themes] .category-societe { --tile-bottom: #083990; }

/* Level selection follows the second reference screen, with one scene per theme. */
body:is([data-screen=levels],[data-screen=question]) { --level-scene: url('./images/level-histoire.png'); background: #022451; }
body:is([data-screen=levels],[data-screen=question])[data-category=geographie] { --level-scene: url('./images/level-geographie.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=patrimoine] { --level-scene: url('./images/level-patrimoine.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=arts] { --level-scene: url('./images/level-arts.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=musique] { --level-scene: url('./images/level-musique.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=cinema] { --level-scene: url('./images/level-cinema.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=sport] { --level-scene: url('./images/level-sport.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=traditions] { --level-scene: url('./images/level-traditions.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=cuisine] { --level-scene: url('./images/level-cuisine.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=sciences] { --level-scene: url('./images/level-sciences.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=societe] { --level-scene: url('./images/level-societe.png'); }
body:is([data-screen=levels],[data-screen=question])[data-category=mix] { --level-scene: url('./images/home-background.png'); }
body[data-screen=levels] .backdrop { background-image: linear-gradient(#021831a8,#00102be3),var(--level-scene); background-position: center; background-size: cover; }
body[data-screen=levels] .backdrop::after { display: none; }
body[data-screen=levels] .app-shell {
  width: 100%; max-width: 480px; min-height: 100svh; padding: 0 15px;
  background-color: #032941;
  background-image: linear-gradient(180deg,transparent 12%,#00182125 23%,#00192377 42%,#00243130 100%),var(--level-scene);
  background-position: center top; background-size: 100% auto; background-repeat: no-repeat;
  box-shadow: 0 0 70px #000e2c80;
}
body[data-screen=levels] .topbar { position: absolute; z-index: 3; top: max(20px,env(safe-area-inset-top)); left: 12px; right: 12px; height: 44px; }
body[data-screen=levels] .wordmark,body[data-screen=levels] #profile { display: none; }
body[data-screen=levels] #back {
  display: block; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: 0;
  box-shadow: none; color: transparent; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 5-7 7 7 7M5 12h15'/%3E%3C/svg%3E") center / 27px no-repeat;
  filter: drop-shadow(0 2px 2px #032746);
}
body[data-screen=levels] main { min-height: 0; padding: 0; }
body[data-screen=levels] .levels-page { padding: 0; max-width: none; container-type: inline-size; }
body[data-screen=levels] .level-heading {
  padding: max(94px,29cqw) 0 14px; text-align: center; color: white;
  text-shadow: 0 2px 3px #000,0 3px 9px #001813;
}
body[data-screen=levels] .level-heading h1 {
  max-width: 100%; margin: 0 0 8px; font-family: 'Arial Narrow','Trebuchet MS',Arial,sans-serif;
  font-size: clamp(1.6rem,8cqw,2.35rem); font-weight: 850; line-height: 1.05; letter-spacing: -.04em;
}
body[data-screen=levels] .level-heading p { margin: 0; font-size: clamp(1rem,5.3cqw,1.4rem); line-height: 1.2; font-weight: 700; }
body[data-screen=levels] .level-list { display: grid; gap: clamp(7px,2cqw,10px); }
body[data-screen=levels] .level-button {
  display: flex; align-items: center; gap: clamp(8px,3cqw,14px); width: 100%; min-height: max(4.25rem,22.7cqw);
  padding: 12px clamp(12px,4.5cqw,21px); border: 1px solid var(--level-edge); border-radius: 15px;
  background: radial-gradient(ellipse at 11% 0%,#ffffff38,transparent 60%),linear-gradient(110deg,var(--level-light),var(--level-mid) 50%,var(--level-dark));
  color: #fff; text-align: left; text-shadow: 0 1px 2px #001c4570;
  box-shadow: inset 0 1px 3px #ffffff6b,inset 0 -2px 4px #0000002b,0 3px 7px #00151f85;
}
body[data-screen=levels] .level-button.green { --level-light: #00a88e; --level-mid: #008f76; --level-dark: #006e48; --level-edge: #2ff9b9; }
body[data-screen=levels] .level-button.blue { --level-light: #009dfe; --level-mid: #0056e4; --level-dark: #003aba; --level-edge: #2ed9ff; }
body[data-screen=levels] .level-button.gold { --level-light: #f6b50b; --level-mid: #d68200; --level-dark: #aa5a00; --level-edge: #ffe75e; }
body[data-screen=levels] .level-button.orange { --level-light: #ff8600; --level-mid: #f23b05; --level-dark: #d4260b; --level-edge: #ffd45e; }
body[data-screen=levels] .level-button.red { --level-light: #eb1238; --level-mid: #cc0026; --level-dark: #b40020; --level-edge: #ff5c71; }
body[data-screen=levels] .stars {
  display: flex; align-items: center; flex: 0 0 auto; gap: 0; margin: 0; letter-spacing: 0;
  font-size: clamp(1.4rem,8.3cqw,2.4rem); line-height: 1; text-shadow: none;
}
body[data-screen=levels] .level-star {
  display: block; font-family: Arial,sans-serif; font-weight: 900; line-height: 1; letter-spacing: -.11em;
  color: #ffd631; background: linear-gradient(#fff7af 8%,#ffed61 34%,#ffe735 48%,#ffb216 90%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #fff4a1) drop-shadow(0 2px 0 #b56600) drop-shadow(0 3px 2px #67410085);
}
body[data-screen=levels] .level-label { min-width: 0; flex: 1; font-family: 'Arial Narrow',Arial,sans-serif; }
body[data-screen=levels] .level-label strong { display: block; font-size: clamp(1rem,5.7cqw,1.5rem); font-weight: 800; line-height: 1.15; }
body[data-screen=levels] .level-label span { display: block; margin-top: 5px; font-size: clamp(.875rem,4.3cqw,1.1rem); line-height: 1.15; font-weight: 400; }
body[data-screen=levels] .chevron {
  flex: 0 0 12px; width: 12px; height: 22px; margin: 0 0 0 auto; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4 6 7-6 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-screen=levels] .scene-caption {
  margin: 12px 0 4px; max-width: none; white-space: pre-line; font-family: 'Segoe Print','Comic Sans MS',cursive;
  font-style: italic; font-size: clamp(.875rem,4.2cqw,1.15rem); font-weight: 650; line-height: 1.2;
  color: white; text-shadow: 0 2px 2px #001528,0 0 6px #001a20;
}
body[data-screen=levels] .level-button { position:relative; padding-right:28px; gap:8px; }
body[data-screen=levels] .level-padlock { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; display:block; pointer-events:none; filter:drop-shadow(0 3px 3px #0009); z-index:2; }
body[data-screen=levels] .level-button .stars { width:calc(50% - 34px); flex:0 1 calc(50% - 34px); flex-wrap:wrap; font-size:clamp(1.2rem,6.5cqw,1.9rem); }
body[data-screen=levels] .level-button .level-label { flex:0 1 calc(50% - 34px); margin-left:auto; overflow-wrap:break-word; }
body[data-screen=levels] .level-button .chevron { position:absolute; right:9px; top:50%; transform:translateY(-50%); }
body[data-screen=levels] .level-ribbon {
  display: block; width: 100px; height: 19px; margin: 0 auto 2px;
  background: url('./images/home-reference.webp') 31.19% 52.67% / 1786.047% 7314.286% no-repeat;
}
body[data-screen=levels] footer { display: block; text-align: center; padding: 0 0 max(8px,env(safe-area-inset-bottom)); color: white; text-shadow: 0 1px 3px #001431; }
body[data-screen=levels] footer>span { display: none; }
body[data-screen=levels] .footer-button { font-size: 12px; min-height: 28px; text-align: center; }
body[data-screen=levels] #notice:not(:empty) { padding-top: 64px; }
@media(max-width:350px) {
  body[data-screen=levels] .app-shell { padding-left: 12px; padding-right: 12px; }
  body[data-screen=levels] .stars { font-size: 1.4rem; }
  body[data-screen=levels] .level-button { gap: 9px; padding-left: 10px; padding-right: 10px; }
}
/* Bring each theme's subject into the visible header above the level buttons. */
body[data-screen=levels] .level-heading {
  margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px;
  background-image: linear-gradient(180deg,transparent 46%,#001b2840 75%,#001d2ab3),var(--level-scene);
  background-size: 100% 100%,100% auto; background-position: center top,center var(--hero-focus,0%); background-repeat: no-repeat;
}
body[data-screen=levels][data-category=patrimoine] { --hero-focus: 8%; }
body[data-screen=levels][data-category=arts] { --hero-focus: 18%; }
body[data-screen=levels][data-category=musique] { --hero-focus: 4%; }
body[data-screen=levels][data-category=cinema] { --hero-focus: 12%; }
body[data-screen=levels][data-category=traditions] { --hero-focus: 18%; }
body[data-screen=levels][data-category=cuisine] { --hero-focus: 10%; }
body[data-screen=levels][data-category=sciences] { --hero-focus: 12%; }
body[data-screen=levels][data-category=societe] { --hero-focus: 27%; }
@media(max-width:350px) {
  body[data-screen=levels] .level-heading { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

/* Question screen: the same portrait width as home and levels, with crisp native cards. */
body[data-screen=question][data-category=histoire] { --level-scene: url('./images/question-histoire.png'); }
body[data-screen=question] .backdrop {
  background-image: linear-gradient(#051d42a3,#02142cc9),var(--level-scene);
  background-position: center; background-size: cover;
}
body[data-screen=question] .backdrop::after { display: none; }
body[data-screen=question] .app-shell {
  width: 100%; max-width: 480px; min-height: 100svh; padding: 0 15px;
  background: #243954; background-image: linear-gradient(#023d9022,#09355612 45%,#341b0626),var(--level-scene);
  background-position: center top; background-size: 100% auto; background-repeat: no-repeat;
  box-shadow: 0 0 70px #000e2c80;
}
body[data-screen=question] .topbar { position: absolute; z-index: 3; top: max(20px,env(safe-area-inset-top)); left: 12px; right: 12px; height: 44px; }
body[data-screen=question] .wordmark,body[data-screen=question] #profile { display: none; }
body[data-screen=question] #back {
  display: block; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: 0;
  box-shadow: none; color: transparent; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 5-7 7 7 7M5 12h15'/%3E%3C/svg%3E") center / 27px no-repeat;
  filter: drop-shadow(0 2px 2px #032746);
}
body[data-screen=question] main { padding: 0; min-height: 0; }
body[data-screen=question] .question-page { max-width: none; padding: 0; container-type: inline-size; }
body[data-screen=question] .game-header { padding: max(43px,11cqw) 30px 0; text-shadow: 0 2px 3px #062852; }
body[data-screen=question] .game-header h1 {
  display: flex; justify-content: center; align-items: center; gap: 9px; margin: 0 0 10px;
  font-family: 'Arial Narrow','Trebuchet MS',Arial,sans-serif; font-size: clamp(1.25rem,6.3cqw,1.8rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
}
body[data-screen=question] .game-category-icon { display: block; flex: 0 0 1.1em; width: 1.1em; height: 1.1em; line-height: 1.1; }
body[data-screen=question] .history-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m3 8 9-5 9 5H3Zm1 12h16M2 22h20M5 10v8M9 10v8m6-8v8m4-8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-screen=question] .game-header p { margin: 0 0 13px; font-size: clamp(1rem,4.8cqw,1.2rem); line-height: 1.15; font-weight: 650; }
body[data-screen=question] progress {
  height: clamp(12px,3cqw,15px); border: 1px solid #ffffff91; border-radius: 20px;
  background: #f2f5f68f; box-shadow: inset 0 1px 3px #092c5266,0 1px 4px #07316855;
}
body[data-screen=question] progress::-webkit-progress-bar { background: #f2f5f68f; }
body[data-screen=question] progress::-webkit-progress-value { background: linear-gradient(#7dffb1,#0ce06c 50%,#00b453); box-shadow: inset 0 1px 3px #fff8; }
body[data-screen=question] progress::-moz-progress-bar { background: linear-gradient(#7dffb1,#0ce06c 50%,#00b453); }
body[data-screen=question] .question-card {
  min-height: max(8.25rem,34cqw); margin: clamp(19px,5.4cqw,25px) 0 18px; padding: 25px 18px;
  background: linear-gradient(135deg,#153c70,#081d40); border: 1px solid #dfba69; border-radius: 22px; color: #fff;
  box-shadow: inset 0 1px 0 #ffffff24,0 8px 20px #03132c60;
}
body[data-screen=question] .question-card h2 {
  font-family: 'Arial Narrow','Trebuchet MS',Arial,sans-serif; font-size: clamp(1.25rem,6.4cqw,1.85rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -.03em;
}
body[data-screen=question] .answers { display: grid; gap: clamp(8px,2.3cqw,11px); }
body[data-screen=question] .answer-button {
  min-height: max(3.4rem,15.3cqw); padding: 13px 15px; border: 1px solid #89c9f0; border-radius: 24px;
  background: linear-gradient(180deg,#d7efff,#bfe3fc 52%,#a9d6f5); color: #0b2445;
  font-family: 'Arial Narrow',Arial,sans-serif; font-size: clamp(1.2rem,6.1cqw,1.65rem); line-height: 1.18; font-weight: 800;
  box-shadow: inset 0 2px 1px #ffffff99,0 3px 0 #28628d,0 6px 12px #06244d50;
}
body[data-screen=question] .answer-button:hover:not(:disabled) { background: linear-gradient(#e4f5ff,#bddff8); }
body[data-screen=question] .answer-button.selected-correct {
  background: linear-gradient(#3af28b,#00cb5a 48%,#009e3a)!important; color: white!important; border-color: #b0ffa0;
  box-shadow: inset 0 2px 6px #d6ff9aa8,0 0 10px #87ff4066,0 4px 7px #003d204d;
}
body[data-screen=question] .answer-button.selected-wrong { background: linear-gradient(#ff6e62,#ec172d 50%,#ba0821)!important; border-color: #ffc2b4; }
body[data-screen=question] .answer-button.eliminated { opacity: .28; text-decoration: none; color: #253654; }
body[data-screen=question] .aid-buttons { display: flex; justify-content: center; gap: clamp(50px,19cqw,90px); margin: clamp(25px,7cqw,33px) 0 0; }
body[data-screen=question] .aid-button {
  display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 78px; min-height: 0; padding: 0 4px;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: white; white-space: normal;
  font-family: 'Arial Narrow',Arial,sans-serif; font-size: clamp(1rem,4.8cqw,1.3rem); font-weight: 800;
  text-shadow: 0 2px 3px #1b0d02,0 0 4px #120e06;
}
body[data-screen=question] .aid-disc {
  display: grid; place-items: center; width: clamp(62px,18.5cqw,84px); aspect-ratio: 1; border: 1px solid #ffe0a3; border-radius: 50%;
  background: radial-gradient(circle at 32% 17%,#766044,#3a2718 55%,#150e09); box-shadow: inset 0 2px 4px #ffeec059,0 4px 8px #140e0773;
}
body[data-screen=question] .half-disc::after {
  content: ''; width: 47%; aspect-ratio: 1; border: 2px solid #fff6df; border-radius: 50%;
  background: linear-gradient(90deg,#fffaf0 50%,transparent 50%); box-shadow: 0 2px 4px #0009;
}
body[data-screen=question] .skip-disc::after {
  content: ''; width: 53%; height: 53%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28' fill='none' stroke='%23fffaf0' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 6 8 8-8 8m11-16 8 8-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-screen=question] .aid-button:disabled { opacity: .42; }
body[data-screen=question] .aid-description { margin: 12px 0 7px; text-align: center; color: #fff8e8; font-size: 14px; line-height: 1.25; text-shadow: 0 1px 3px #241508,0 0 6px #241508; }
body[data-screen=question] footer { display: block; text-align: center; padding: 0 0 max(10px,env(safe-area-inset-bottom)); color: white; text-shadow: 0 1px 3px #001431; }
body[data-screen=question] footer>span { display: none; }
body[data-screen=question] .footer-button { font-size: 12px; min-height: 28px; text-align: center; }
body[data-screen=question] #notice:not(:empty) { padding-top: 64px; }
body[data-screen=question] .practice-note { margin: 5px 0 0; font-size: 1rem; line-height: 1.4; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(max-width:350px) {
  body[data-screen=question] .app-shell { padding-left: 12px; padding-right: 12px; }
  body[data-screen=question] .game-header { padding-left: 24px; padding-right: 24px; }
}

/* Game length selection shares the portrait canvas and glossy cards of the level screen. */
body[data-screen=lengths] { --setup-scene:url('./images/setup-coast.png'); background: #03375e; }
body[data-screen=lengths][data-category=histoire] { --setup-scene:url('./images/setup-histoire.webp'); }
body[data-screen=lengths][data-category=geographie] { --setup-scene:url('./images/setup-geographie.webp'); }
body[data-screen=lengths][data-category=patrimoine] { --setup-scene:url('./images/setup-patrimoine.webp'); }
body[data-screen=lengths][data-category=arts] { --setup-scene:url('./images/setup-arts.webp'); }
body[data-screen=lengths][data-category=musique] { --setup-scene:url('./images/setup-musique.webp'); }
body[data-screen=lengths][data-category=cinema] { --setup-scene:url('./images/setup-cinema.webp'); }
body[data-screen=lengths][data-category=sport] { --setup-scene:url('./images/setup-sport.webp'); }
body[data-screen=lengths][data-category=traditions] { --setup-scene:url('./images/setup-traditions.webp'); }
body[data-screen=lengths][data-category=cuisine] { --setup-scene:url('./images/setup-cuisine.webp'); }
body[data-screen=lengths][data-category=sciences] { --setup-scene:url('./images/setup-sciences.webp'); }
body[data-screen=lengths][data-category=societe] { --setup-scene:url('./images/setup-societe.webp'); }
body[data-screen=lengths] .backdrop {
  background-image: linear-gradient(#032442ab,#021c37cf),var(--setup-scene); background-position:center; background-size:cover;
}
body[data-screen=lengths] .backdrop::after { display: none; }
body[data-screen=lengths] .app-shell {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; min-height: 100svh;
  padding: 0 max(15px,env(safe-area-inset-left)) 0 max(15px,env(safe-area-inset-right));
  background: #036b95; background-image: linear-gradient(180deg,#06244345 0%,#05244024 25%,#01233d30 65%,#031b32a0 100%),var(--setup-scene);
  background-position: center top; background-size: cover; background-repeat: no-repeat;
  box-shadow: 0 0 70px #000e2c80;
}
body[data-screen=lengths] .topbar {
  position: absolute; z-index: 3; top: max(20px,env(safe-area-inset-top)); left: 12px; right: 12px; height: 44px;
}
body[data-screen=lengths] .wordmark,body[data-screen=lengths] #profile { display: none; }
body[data-screen=lengths] #back {
  display: block; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: 0;
  box-shadow: none; color: transparent; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 5-7 7 7 7M5 12h15'/%3E%3C/svg%3E") center / 27px no-repeat;
  filter: drop-shadow(0 2px 2px #032746);
}
body[data-screen=lengths] main { min-height: 0; padding: 0; flex: 1; }
body[data-screen=lengths] .lengths-page { max-width: none; padding: 0; container-type: inline-size; }
body[data-screen=lengths] .lengths-heading {
  padding: max(100px,26cqw,calc(env(safe-area-inset-top) + 60px)) 0 20px; text-align: center; color: white;
  text-shadow: 0 2px 3px #002248,0 3px 9px #003057;
}
body[data-screen=lengths] .lengths-heading h1 {
  margin: 0 0 10px; font-family: 'Arial Narrow','Trebuchet MS',Arial,sans-serif;
  font-size: clamp(2rem,9.5cqw,2.7rem); line-height: 1.08; font-weight: 850; letter-spacing: -.04em;
}
body[data-screen=lengths] .lengths-heading p {
  display: inline-block; max-width: 100%; margin: 0; padding: 7px 14px; border: 1px solid #c5efff6b; border-radius: 24px;
  background: #034778b8; font-size: clamp(.875rem,4.1cqw,1.1rem); line-height: 1.25; font-weight: 650;
}
body[data-screen=lengths] .formats { display: grid; gap: clamp(10px,2.7cqw,13px); }
body[data-screen=lengths] .format-button {
  position: relative; display: flex; align-items: center; gap: clamp(12px,4cqw,18px); width: 100%; min-width: 0;
  min-height: max(5rem,23cqw); padding: 14px clamp(12px,4cqw,18px); border: 1px solid var(--format-edge); border-radius: 17px;
  background: radial-gradient(ellipse at 12% 0%,#ffffff42,transparent 65%),linear-gradient(115deg,var(--format-light),var(--format-mid) 55%,var(--format-dark));
  color: #fff; text-align: left; text-shadow: 0 1px 2px #001c4566;
  box-shadow: inset 0 2px 3px #ffffff75,inset 0 -3px 5px #00000030,0 4px 8px #002b4c80;
}
body[data-screen=lengths] .format-button.green { --format-light: #00a889; --format-mid: #008764; --format-dark: #006544; --format-edge: #5effc0; }
body[data-screen=lengths] .format-button.blue { --format-light: #009dfe; --format-mid: #0056e4; --format-dark: #003aba; --format-edge: #63e0ff; }
body[data-screen=lengths] .format-button.gold { --format-light: #ffd252; --format-mid: #f6b224; --format-dark: #e29209; --format-edge: #fff195; color: #432502; text-shadow: 0 1px #ffefb36b; }
body[data-screen=lengths] .format-button.violet { --format-light: #a44ded; --format-mid: #7b29c0; --format-dark: #551795; --format-edge: #e3a3ff; }
body[data-screen=lengths] .format-number {
  display: grid; place-items: center; flex: 0 0 clamp(54px,16cqw,72px); width: clamp(54px,16cqw,72px); min-height: clamp(54px,16cqw,72px);
  border: 1px solid #ffffff65; border-radius: 17px; background: linear-gradient(150deg,#ffffff33,#001a3129);
  box-shadow: inset 0 2px 3px #ffffff59,0 3px 6px #001c3b30; color: inherit; white-space: normal;
  font: 850 clamp(1.8rem,9cqw,2.6rem)/1 'Trebuchet MS',Arial,sans-serif; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
}
body[data-screen=lengths] .format-label { flex: 1; min-width: 0; font-family: 'Arial Narrow',Arial,sans-serif; }
body[data-screen=lengths] .format-label strong { display: block; font-size: clamp(1.1rem,5.6cqw,1.5rem); line-height: 1.12; font-weight: 800; }
body[data-screen=lengths] .format-label span { display: block; margin-top: 6px; font-size: clamp(.875rem,4.1cqw,1.1rem); line-height: 1.2; font-weight: 400; color: inherit; }
body[data-screen=lengths] .format-button .chevron {
  position: static; display: block; flex: 0 0 11px; width: 11px; height: 21px; margin: 0 0 0 auto; color: inherit; font-size: 0;
  background: currentColor; clip-path: polygon(17% 0,100% 50%,17% 100%,0 87%,64% 50%,0 13%);
}
body[data-screen=lengths] .format-availability {
  margin: 17px 0 0; padding: 11px 15px; border: 1px solid #b9efff4d; border-radius: 14px;
  background: #003b5dd9; color: #fff; font-size: .875rem; line-height: 1.4; text-align: center;
  box-shadow: 0 3px 9px #00243833;
}
body[data-screen=lengths] .lengths-rules {
  margin: 15px auto 0; padding-bottom: max(35px,12cqw); max-width: 390px; color: #fff; text-align: center; white-space: pre-line;
  font-size: .875rem; line-height: 1.45; text-shadow: 0 1px 3px #002238,0 0 6px #002238;
}
body[data-screen=lengths] footer { display: block; text-align: center; padding: 8px 0 max(10px,env(safe-area-inset-bottom)); color: white; text-shadow: 0 1px 3px #001431; }
body[data-screen=lengths] footer>span { display: none; }
body[data-screen=lengths] .footer-button { font-size: 12px; min-height: 28px; text-align: center; }
body[data-screen=lengths] #notice:not(:empty) { padding-top: 64px; }
@media (max-height:740px) {
  body[data-screen=lengths] .lengths-heading { padding-top:max(68px,calc(env(safe-area-inset-top) + 50px)); padding-bottom:16px; }
  body[data-screen=lengths] .lengths-heading h1 { font-size:2rem; margin-bottom:8px; }
  body[data-screen=lengths] .formats { gap:8px; }
  body[data-screen=lengths] .format-button { min-height:68px; padding-top:8px; padding-bottom:8px; }
  body[data-screen=lengths] .format-number { min-height:48px; }
  body[data-screen=lengths] .format-availability { margin-top:12px; padding:8px 12px; }
  body[data-screen=lengths] .lengths-rules { margin-top:10px; padding-bottom:12px; }
}
@media(max-width:350px) {
  body[data-screen=lengths] .app-shell { padding-left: max(12px,env(safe-area-inset-left)); padding-right: max(12px,env(safe-area-inset-right)); }
  body[data-screen=lengths] .format-button { gap: 10px; padding-left: 10px; padding-right: 10px; }
}

/* Answer feedback: reference-sized portrait screens, native text and optional decoration motion. */
body[data-screen=feedback] { --feedback-scene: url('./images/feedback-success.png'); --feedback-ground: #003d43; background: #022c42; }
body[data-scene=feedback-failure] { --feedback-scene: url('./images/feedback-failure.png'); --feedback-ground: #330205; background: #280006; }
body[data-scene=feedback-skipped] { --feedback-scene: url('./images/setup-coast.png'); --feedback-ground: #004f72; }
body[data-screen=feedback] .backdrop { background: linear-gradient(#02152a9e,#011327ce),var(--feedback-scene) center / cover; }
body[data-scene=feedback-failure] .backdrop { background: linear-gradient(#300005a8,#180007d9),var(--feedback-scene) center / cover; }
body[data-screen=feedback] .backdrop::after { display: none; }
body[data-screen=feedback] .app-shell {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; height: 100svh; min-height: 0;
  padding: 0 max(15px,env(safe-area-inset-left)) 0 max(15px,env(safe-area-inset-right));
  background: var(--feedback-ground) var(--feedback-scene) center top / 100% auto no-repeat; box-shadow: 0 0 70px #000e2c80;
}
body[data-screen=feedback] .topbar { position: absolute; z-index: 3; top: max(20px,env(safe-area-inset-top)); left: 12px; right: 12px; height: 44px; }
body[data-screen=feedback] .wordmark,body[data-screen=feedback] #profile { display: none; }
body[data-screen=feedback] #back {
  display: block; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: 0; box-shadow: none; color: transparent; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 5-7 7 7 7M5 12h15'/%3E%3C/svg%3E") center / 27px no-repeat;
  filter: drop-shadow(0 2px 2px #032746);
}
body[data-screen=feedback] main { display: flex; flex: 1; min-height: 0; padding: 0; }
body[data-screen=feedback] .feedback-page {
  position: relative; isolation: isolate; container-type: inline-size; display: flex; flex-direction: column; width: 100%; max-width: none; min-height: 0;
  padding: 0; text-align: center; color: white;
}
body[data-screen=feedback] .feedback-body {
  position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ffffff70 transparent; padding-bottom: 8px;
}
body[data-screen=feedback] .feedback-body:focus-visible { outline: 2px solid #ffe66b; outline-offset: -2px; }
body[data-screen=feedback] .feedback-body .feedback-hero {
  padding-top: max(76px,min(45cqw,22svh),calc(env(safe-area-inset-top) + 48px));
}
body[data-screen=feedback] .feedback-hero {
  position: relative; z-index: 1; padding: max(130px,45cqw,calc(env(safe-area-inset-top) + 90px)) 0 22px;
}
body[data-screen=feedback] .feedback-emblem {
  position: relative; z-index: 1; display: grid; place-items: center; width: clamp(116px,35cqw,160px); height: auto; aspect-ratio: 1;
  margin: 0 auto 18px; border: 3px solid #dcffae; border-radius: 50%; font-size: 0; text-shadow: none;
  background: radial-gradient(circle at 34% 20%,#75ef7a,#10c657 40%,#009e37 73%,#006d24);
  box-shadow: inset 0 3px 8px #efffb97d,inset 0 -4px 10px #006e3755,0 0 0 6px #75ff3833,0 0 20px #bcff74c7,0 0 48px #55ff3bb8;
  animation: none;
}
body[data-screen=feedback] .feedback-emblem::after {
  content: ''; width: 65%; height: 65%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 33 13 13 28-29'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 2px #00692e7a);
}
body[data-screen=feedback] .feedback-hero h1 {
  position: relative; margin: 0; color: white; font-family: 'Arial Narrow','Trebuchet MS',Arial,sans-serif;
  font-size: clamp(1.6rem,8.3cqw,2.4rem); font-weight: 850; line-height: 1.12; letter-spacing: -.035em;
  text-shadow: 0 2px 2px #002b18,0 3px 7px #001b0b;
}
body[data-screen=feedback] .feedback-stars { position: absolute; left: 0; right: 0; bottom: 75px; height: clamp(118px,38cqw,174px); pointer-events: none; }
body[data-screen=feedback] .feedback-star {
  position: absolute; display: block; color: #ffe65e; font: 900 clamp(27px,10cqw,45px)/1 Arial,sans-serif;
  background: linear-gradient(#fffddd 6%,#fff491 35%,#ffcf31 62%,#ffae05 92%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #fffbb4) drop-shadow(0 2px 1px #b46d04) drop-shadow(0 0 8px #ffdc5ca6);
}
body[data-screen=feedback] .star-1 { left: 12%; top: 7%; --star-tilt: -12deg; --star-delay: -.6s; }
body[data-screen=feedback] .star-2 { right: 10%; top: 3%; --star-tilt: 13deg; --star-delay: -1.3s; }
body[data-screen=feedback] .star-3 { left: 3%; top: 44%; font-size: clamp(22px,7cqw,32px); --star-tilt: -8deg; --star-delay: -.2s; }
body[data-screen=feedback] .star-4 { right: 1%; top: 43%; font-size: clamp(22px,7cqw,32px); --star-tilt: 12deg; --star-delay: -1.8s; }
body[data-screen=feedback] .star-5 { left: 20%; top: 75%; font-size: clamp(16px,5cqw,23px); --star-tilt: 9deg; --star-delay: -1s; }
body[data-screen=feedback] .star-6 { right: 18%; top: 78%; font-size: clamp(16px,5cqw,23px); --star-tilt: -10deg; --star-delay: -2.2s; }
body[data-screen=feedback] .explanation-card {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: max(158px,45cqw); margin: 0;
  padding: clamp(22px,6cqw,28px) clamp(18px,5cqw,25px); border: 1px solid #ffe4b4; border-radius: 23px;
  background: linear-gradient(125deg,#fff7e9,#f9e9d2 60%,#f2d9b5); color: #101527;
  box-shadow: inset 0 0 0 3px #fffaf08c,inset 0 3px 2px #fff,0 8px 18px #00262955;
  font: 500 clamp(1rem,5.25cqw,1.4rem)/1.38 'Arial Narrow',Arial,sans-serif;
}
body[data-screen=feedback] .feedback-explanation p { margin: 0; overflow-wrap: anywhere; }
body[data-screen=feedback] .feedback-actions {
  position: relative; z-index: 4; flex: 0 0 auto; display: grid; gap: 10px; margin: 0; padding: 12px 0;
  background: linear-gradient(transparent,var(--feedback-ground) 25%); pointer-events: auto;
}
body[data-screen=feedback] .feedback-actions .gloss {
  display: flex; align-items: center; justify-content: center; gap: 17px; margin: 0; min-height: max(55px,16cqw);
  padding: 13px 18px; border: 1px solid #bdffb0; border-radius: 28px; color: white;
  font: 800 clamp(1.05rem,5.5cqw,1.5rem)/1.15 'Arial Narrow',Arial,sans-serif; text-shadow: 0 2px 2px #00352170;
  background: linear-gradient(#28ee91,#00c462 43%,#009940);
  box-shadow: inset 0 2px 5px #e7ffd1a8,inset 0 -3px 6px #005d442e,0 0 12px #4eff9373,0 4px 8px #002e365e;
}
body[data-screen=feedback] .next-icon {
  display: block; flex: 0 0 13px; width: 13px; height: 22px; background: currentColor;
  clip-path: polygon(17% 0,100% 50%,17% 100%,0 87%,64% 50%,0 13%);
}
body[data-screen=feedback] .failure .feedback-hero,body[data-screen=feedback] .skipped .feedback-hero { padding-top: max(68px,min(33cqw,18svh),calc(env(safe-area-inset-top) + 48px)); padding-bottom: 16px; }
body[data-screen=feedback] .failure .feedback-emblem,body[data-screen=feedback] .skipped .feedback-emblem { width: clamp(112px,32cqw,148px); margin-bottom: 14px; }
body[data-screen=feedback] .feedback-emblem.failure {
  border-color: #fff0be; background: radial-gradient(circle at 36% 18%,#ff6738,#ef1120 42%,#c80016 73%,#940008);
  box-shadow: inset 0 3px 8px #ffd17a91,inset 0 -3px 9px #87001b60,0 0 0 5px #ffb72e24,0 0 18px #ffc252,0 0 45px #ff3211b8;
}
body[data-screen=feedback] .feedback-emblem.failure::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='m17 17 30 30m0-30L17 47'/%3E%3C/svg%3E"); filter: drop-shadow(0 3px 2px #ad00176e);
}
body[data-screen=feedback] .failure .feedback-hero h1 { text-shadow: 0 2px 2px #370000,0 0 8px #2c0000; }
body[data-screen=feedback] .failure .explanation-card {
  display: block; min-height: max(195px,51cqw); padding: 14px 13px; border-color: #ff673f; border-radius: 22px;
  color: #fff8ec; background: linear-gradient(145deg,#680906f5,#340004f5); box-shadow: inset 0 1px 3px #ffb87840,0 4px 14px #1900075e;
}
body[data-screen=feedback] .answer-intro { margin: 0 0 6px; font-size: clamp(1rem,4.7cqw,1.2rem); line-height: 1.2; }
body[data-screen=feedback] .correct-answer {
  display: block; margin: 0 0 12px; color: #ffe577; font-size: clamp(1.45rem,7cqw,2rem); font-weight: 850; line-height: 1.15;
  overflow-wrap: anywhere; text-shadow: 0 1px 3px #5d2500;
}
body[data-screen=feedback] .failure .feedback-explanation {
  padding: 14px 11px; border: 1px solid #d8422d; border-radius: 16px; background: #25000159;
  font-size: clamp(1rem,4.9cqw,1.3rem); line-height: 1.35;
}
body[data-screen=feedback] .failure .feedback-actions,body[data-screen=feedback] .skipped .feedback-actions { margin-top: 0; }
body[data-screen=feedback] .failure .feedback-actions .gloss { min-height: max(54px,15.8cqw); }
body[data-screen=feedback] .feedback-actions .red {
  background: linear-gradient(#ff5340,#f41313 43%,#c80010); border-color: #ffbe89;
  box-shadow: inset 0 2px 5px #ffddb593,inset 0 -3px 6px #8c00104a,0 0 9px #ff492c55,0 4px 8px #3000026e;
}
body[data-screen=feedback] .feedback-actions .gold {
  background: linear-gradient(#ffd251,#d99007 45%,#a95200); border-color: #ffed8b; color: white; text-shadow: 0 2px 2px #743b0d;
  box-shadow: inset 0 2px 5px #fff1b0a8,inset 0 -3px 6px #83350033,0 0 9px #ffc6504d,0 4px 8px #3000026e;
}
body[data-screen=feedback] .retry-icon {
  display: block; width: 28px; height: 28px; flex: 0 0 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8a10 10 0 1 1-3 11M10 3v8H2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-screen=feedback] .small-note { position: relative; z-index: 1; margin: 0; color: #fff3db; font-size: .875rem; line-height: 1.35; text-shadow: 0 1px 3px #340000; }
body[data-screen=feedback] .feedback-emblem.skipped { border-color: #cfedff; background: linear-gradient(#42beff,#0873d5); box-shadow: inset 0 3px 8px #d6f1ff66,0 0 25px #57bbff77; }
body[data-screen=feedback] .feedback-emblem.skipped::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 16 16 16-16 16m25-32 16 16-16 16'/%3E%3C/svg%3E"); filter: none;
}
body[data-screen=feedback] .skipped .correct-answer { color: #075595; text-shadow: none; }
body[data-screen=feedback] .feedback-actions .blue { background: linear-gradient(#28bbff,#087fe5 45%,#0457b5); border-color: #afecff; box-shadow: inset 0 2px 5px #e0faff8c,0 4px 8px #00335666; }
body[data-screen=feedback] .feedback-atmosphere { position: absolute; z-index: 0; inset: 0 -15px; overflow: hidden; pointer-events: none; user-select: none; }
body[data-screen=feedback] .feedback-particle { position: absolute; display: block; left: var(--x); top: var(--y); width: var(--size); height: var(--size); pointer-events: none; animation: none; }
body[data-screen=feedback] .star-particle {
  color: #ffdd42; opacity: .85; font: 800 var(--size)/1 Arial,sans-serif; text-shadow: 0 0 6px #ffe76cc4,0 1px 1px #a76606;
}
body[data-screen=feedback] .flame-particle {
  height: calc(var(--size) * 1.3); background: url('./images/feedback-flame.png') center / contain no-repeat; opacity: .85;
}
body[data-screen=feedback] .feedback-page[data-motion=on] .feedback-star { animation: feedback-star-float 1.65s ease-in-out var(--star-delay,0s) infinite alternate; }
body[data-screen=feedback] .feedback-page[data-motion=on] .star-particle { animation: feedback-spark-drift var(--duration) ease-in-out var(--delay) infinite alternate; }
body[data-screen=feedback] .feedback-page[data-motion=on] .flame-particle { top: -70px; animation: feedback-flame-fall var(--duration) linear var(--delay) infinite; }
@keyframes feedback-star-float {
  from { transform: translate3d(0,10px,0) rotate(var(--star-tilt)) scale(.85); }
  to { transform: translate3d(0,-18px,0) rotate(calc(var(--star-tilt) * -1)) scale(1.18); }
}
@keyframes feedback-spark-drift {
  from { opacity: .55; transform: translate3d(0,16px,0) rotate(-25deg) scale(.7); }
  to { opacity: 1; transform: translate3d(var(--drift),-35px,0) rotate(35deg) scale(1.2); }
}
@keyframes feedback-flame-fall {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(-20deg) scale(.8); }
  8% { opacity: .95; }
  45% { transform: translate3d(calc(var(--drift) * -.6),45svh,0) rotate(-8deg) scale(1.15); }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--drift),max(900px,100svh),0) rotate(30deg) scale(1.3); }
}
body[data-screen=feedback].no-motion .feedback-page .flame-particle { top: var(--y); }
@media(prefers-reduced-motion:reduce) { body[data-screen=feedback] .feedback-page[data-motion] .flame-particle { top: var(--y); } }
body[data-screen=feedback] footer { display: block; flex: 0 0 auto; text-align: center; padding: 0 0 max(10px,env(safe-area-inset-bottom)); color: white; text-shadow: 0 1px 3px #001431; }
body[data-screen=feedback] footer>span { display: none; }
body[data-screen=feedback] .footer-button { font-size: 12px; min-height: 28px; text-align: center; }
body[data-screen=feedback] #notice:not(:empty) { padding-top: 64px; }
@media(max-width:350px) {
  body[data-screen=feedback] .app-shell { padding-left: max(12px,env(safe-area-inset-left)); padding-right: max(12px,env(safe-area-inset-right)); }
  body[data-screen=feedback] .feedback-atmosphere { left: -12px; right: -12px; }
}

/* Stronger opt-in effects. Text, controls and the portrait layout remain stationary. */
.feedback-fireworks,.feedback-fire-surge,.feedback-confetti,.feedback-ember { display: none; pointer-events: none; }
body[data-screen=feedback] .feedback-page[data-motion=on] .feedback-fireworks {
  position: absolute; display: block; inset: 0 -15px; overflow: hidden; z-index: 0;
}
.firework-burst { position: absolute; left: var(--burst-x); top: var(--burst-y); width: 0; height: 0; }
.firework-spark {
  position: absolute; display: block; left: 0; top: 0; opacity: 0; color: var(--spark-color);
  font: 900 var(--spark-size)/1 Arial,sans-serif; text-shadow: 0 0 6px currentColor,0 0 12px currentColor;
}
.feedback-page[data-motion=on] .firework-spark { animation: feedback-firework-burst 1.6s cubic-bezier(.12,.65,.3,1) var(--burst-delay) both; }
@keyframes feedback-firework-burst {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.2); }
  5% { opacity: 1; }
  24% { opacity: 1; transform: translate3d(calc(var(--dx) * .64),calc(var(--dy) * .64),0) scale(1.25); }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--dx),calc(var(--dy) + 35px),0) rotate(100deg) scale(.25); }
}
.feedback-page[data-motion=on]:is(.success,.failure) .feedback-emblem { animation: feedback-emblem-impact .65s cubic-bezier(.16,.8,.3,1) both; }
@keyframes feedback-emblem-impact {
  0% { transform: scale(.48); }
  48% { transform: scale(1.16); }
  72% { transform: scale(.96); }
  100% { transform: scale(1); }
}
body[data-screen=feedback] .feedback-page[data-motion=on] .feedback-confetti,
body[data-screen=feedback] .feedback-page[data-motion=on] .feedback-ember {
  display: block; position: absolute; left: var(--x); top: -40px; width: 7px; height: 14px;
  background: var(--spark-color); border-radius: 2px; opacity: 0;
  animation: feedback-confetti-fall var(--duration) ease-in var(--delay) 2;
}
body[data-screen=feedback] .feedback-page[data-motion=on] .feedback-ember {
  width: 4px; height: 7px; border-radius: 50%; background: #ffb526; box-shadow: 0 0 7px #ff5b16;
  animation: feedback-ember-rise var(--duration) linear var(--delay) infinite;
}
@keyframes feedback-confetti-fall {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(0); }
  8%,80% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--drift),max(900px,100svh),0) rotate(650deg); }
}
@keyframes feedback-ember-rise {
  0% { opacity: 0; transform: translate3d(0,85svh,0) scale(.6); }
  20%,70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift),0,0) scale(1.3); }
}
body[data-screen=feedback] .feedback-page[data-motion=on] .feedback-fire-surge {
  position: absolute; display: block; left: -12px; right: -12px; bottom: 60px; height: clamp(150px,49cqw,220px); z-index: 0;
}
.feedback-fire-surge span {
  position: absolute; display: block; bottom: 0; width: 29%; height: 100%;
  background: url('./images/feedback-flame.png') center bottom / contain no-repeat; transform-origin: center bottom;
  animation: feedback-fire-surge 1.25s ease-in-out infinite alternate;
}
.fire-surge-left { left: 1%; --lean: -13deg; }
.fire-surge-right { right: 1%; --lean: 13deg; animation-delay: -.65s!important; }
@keyframes feedback-fire-surge {
  from { opacity: .75; transform: translate3d(0,12px,0) rotate(var(--lean)) scale(.82, .88); }
  to { opacity: 1; transform: translate3d(0,-10px,0) rotate(calc(var(--lean) * .6)) scale(1.08,1.18); }
}
body[data-screen=feedback] .feedback-page[data-motion=off] .feedback-particle:nth-child(n+13) { display: none; }
body[data-screen=feedback] .feedback-page[data-motion=off] .flame-particle { width: min(var(--size),42px); height: 54px; }
body.page-hidden .feedback-page * { animation-play-state: paused!important; }
@media(prefers-reduced-motion:reduce) {
  body[data-screen=feedback] .feedback-page[data-motion] .feedback-fireworks,
  body[data-screen=feedback] .feedback-page[data-motion] .feedback-confetti,
  body[data-screen=feedback] .feedback-page[data-motion] .feedback-ember,
  body[data-screen=feedback] .feedback-page[data-motion] .feedback-fire-surge { display: none; }
  body[data-screen=feedback] .feedback-page .feedback-particle:nth-child(n+13) { display: none; }
}

/* Progress and revision share the game's blue, emerald and gold portrait palette. */
body:is([data-screen=backup],[data-screen=review]) .app-shell { max-width:480px; min-height:100svh; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); background:linear-gradient(#0060c9d9,#075ac166 45%,#082e53b3),url('./images/countryside.png') center / cover; box-shadow:0 0 45px #00173180; }
body:is([data-screen=backup],[data-screen=review]) .topbar { height:66px; }
body:is([data-screen=backup],[data-screen=review]) .wordmark { font-size:18px; }
body:is([data-screen=backup],[data-screen=review]) main { padding:0 0 20px; min-height:calc(100svh - 125px); }
body:is([data-screen=backup],[data-screen=review]) .page-heading { margin:0; padding:10px 0 20px; }
body:is([data-screen=backup],[data-screen=review]) .page-heading h1 { font-size:28px; }
body:is([data-screen=backup],[data-screen=review]) .heading-icon { font-size:36px; }
body:is([data-screen=backup],[data-screen=review]) footer { display:block; text-align:center; }
body:is([data-screen=backup],[data-screen=review]) footer>span { display:none; }
body[data-screen=stats] .stats-panel,.backup-panel,.review-panel { background:linear-gradient(145deg,#133964,#0c254c); color:#fff; border:1px solid #8ecdf2; --muted:#c4d8ee; --line:#406084; box-shadow:0 12px 25px #001f4b55; }
body[data-screen=stats] .tabs button { color:#eaf6ff; background:#254e7b; }
body[data-screen=stats] .tabs button.active { background:linear-gradient(#12b6f5,#0065d9); color:white; box-shadow:0 3px 8px #001c4655; }
body[data-screen=stats] .success-overview { text-align:center; border:1px solid #54d8c2; border-radius:18px; background:linear-gradient(130deg,#09695a,#063f52); padding:18px 12px; margin-bottom:12px; }
.success-overview>span { font-size:16px; }.success-overview>strong { display:block; color:#85ffb9; font-size:40px; font-variant-numeric:tabular-nums; margin:5px 0; }.success-overview p { margin:0; font-size:14px; color:#e0fff4; }
body[data-screen=stats] .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:12px; }
body[data-screen=stats] .stat-box { padding:12px 10px; gap:10px; text-align:left; border:1px solid #469cf0; background:linear-gradient(125deg,#17559a,#173b69); border-radius:14px; }
body[data-screen=stats] .stat-box:nth-child(3n+2) { border-color:#c79938; background:linear-gradient(125deg,#745017,#433917); }
body[data-screen=stats] .stat-box:nth-child(3n) { border-color:#36b597; background:linear-gradient(125deg,#08684f,#104743); }
body[data-screen=stats] .stat-box strong { color:#fff; font-size:26px; }.stat-box span { color:inherit; }
body[data-screen=stats] .stat-row { border:1px solid #406084; border-left:4px solid #29aeef; border-radius:14px; padding:13px 12px; margin:12px 0; background:#183c64; }
body[data-screen=stats] .tone-green { border-left-color:#35dc92; }body[data-screen=stats] .tone-gold { border-left-color:#ffce53; }body[data-screen=stats] .tone-orange { border-left-color:#ff994b; }body[data-screen=stats] .tone-red { border-left-color:#ff647d; }
body[data-screen=stats] .stats-records summary { color:#ffe09a; padding:12px 0; font-size:14px; min-height:44px; }
.record-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #406084; }.record-card>div { min-width:0; }.record-card span { display:block; font-size:14px; color:#d0e3f4; margin-top:4px; }.record-card strong { font-size:15px; }.record-card .record-score { flex-shrink:0; color:#ffe18d; font-size:20px; }
.filter-label { display:block; font-size:14px; font-weight:700; margin:10px 0 8px; }
.theme-select { display:block; width:100%; min-width:0; min-height:48px; font:inherit; font-size:16px; border:1px solid #70b9f0; border-radius:12px; background:#214f80; color:white; padding:10px; margin-bottom:16px; }
.theme-select option { color:#fff; background:#153b65; }
.review-link { display:block; width:100%; margin-top:14px; white-space:normal; min-height:48px; }
.backup-panel,.review-panel { padding:18px 14px; border-radius:20px; }.backup-panel>.gloss,.restore-confirm>.gloss { width:100%; white-space:normal; margin-top:14px; min-height:50px; }.backup-summary { border-bottom:1px solid #547796; margin-bottom:15px; padding-bottom:12px; }.backup-summary h2 { color:#ffe18d; overflow-wrap:anywhere; }
.backup-panel .panel-note,.review-panel .panel-note,.review-panel .stats-history { font-size:14px; color:#c4d8ee; line-height:1.5; }.review-panel .stats-history { margin:18px 0 0; }
.error-card { margin-top:14px; padding:12px; border:1px solid #5682aa; border-left:4px solid #ffd05e; border-radius:14px; background:#173d67; }.error-card summary { font-size:16px; font-weight:700; cursor:pointer; min-height:44px; line-height:1.45; }.error-context { font-size:14px; color:#addcff; }.review-correct { display:block; color:#91f6b9; line-height:1.5; }.review-explanation { font-size:16px; line-height:1.6; margin-bottom:0; }
.review-position { text-align:center; font-size:16px; }.review-page .question-card { margin-bottom:15px; }.review-correction:not(:empty) { margin-top:18px; }.review-empty { text-align:center; padding:20px 0; }.review-empty>span { display:inline-grid; place-items:center; width:50px; height:50px; border-radius:50%; background:#087c58; color:#b5ffd2; font-size:30px; }
.review-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:18px; }.review-pagination button { min-height:44px; font-size:14px; padding:8px; }.review-pagination>span { font-size:14px; }
.review-page .small-note { text-align:center; }.backup-page h2,.review-page h2 { font-size:22px; }
:is(.backup-page,.review-page,.stats-page) :focus-visible { outline:3px solid #ffd456; outline-offset:3px; }
@media(max-width:360px) { body[data-screen=stats] .tabs { gap:3px; }body[data-screen=stats] .tabs button { font-size:14px; padding:7px 2px; }.stats-panel,.review-panel { overflow-wrap:anywhere; } }

/* Solid metal relief remains visible with motion disabled. */
.journey-emblem,body[data-screen=profile] .medal-icon {
  position:relative; isolation:isolate; overflow:hidden;
  background:conic-gradient(from 30deg,var(--metal-light),var(--metal-dark) 19%,var(--metal) 33%,var(--metal-light) 47%,var(--metal-dark) 66%,var(--metal) 83%,var(--metal-light));
  box-shadow:0 2px 0 var(--metal-light),0 5px 0 var(--metal-dark),0 9px 13px #0007,inset 0 1px 2px #fff9,inset 0 -3px 4px #0006;
}
.journey-emblem::before,body[data-screen=profile] .medal-icon::before {
  content:''; position:absolute; z-index:2; inset:3px; border-radius:50%; pointer-events:none;
  border:1px solid #fff8;
  background:linear-gradient(145deg,#ffffff50,transparent 40%,transparent 65%,#00000038);
  box-shadow:inset 0 2px 3px #ffffff73,inset 0 -2px 4px #0007,0 0 0 2px #0003;
}
.journey-emblem::after,body[data-screen=profile] .medal-icon::after {
  content:''; position:absolute; z-index:3; inset:-35%; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,#ffffff12 41%,#ffffffb3 48%,#ffffff26 53%,transparent 61%);
  transform:translateX(-110%); opacity:0;
}
.journey-emblem img { border-radius:50%; padding:2px; box-sizing:border-box; }
.journey-symbol { text-shadow:0 2px 1px #0006,0 -1px 0 #fff6; }
body[data-screen=profile] .medal-icon {
  --metal:#e9ac79; --metal-light:#ffdfbd; --metal-dark:#914918;
  display:grid; place-items:center; width:clamp(46px,13vw,60px); height:clamp(46px,13vw,60px);
  box-sizing:border-box; flex-shrink:0; border:4px solid var(--metal); border-radius:50%;
  font-size:30px; color:var(--metal-light); line-height:1; margin:3px 0 10px;
  text-shadow:0 2px 1px #0008,0 -1px 0 #fff8; filter:none;
}
body[data-screen=profile] .medal-icon.rank-silver { --metal:#ddeaf7; --metal-light:#fff; --metal-dark:#647e9a; }
body[data-screen=profile] .medal-icon:is(.rank-gold,.rank-complete) { --metal:#ffda58; --metal-light:#fff3b5; --metal-dark:#ae720c; }
body[data-screen=profile] .medal.unearned .medal-icon { filter:grayscale(1); opacity:.65; }
@keyframes reward-light-pass {
  0%,10% { transform:translateX(-110%); opacity:0; }
  25% { opacity:.75; }
  80% { opacity:.75; }
  100% { transform:translateX(110%); opacity:0; }
}
@keyframes reward-gentle-lift {
  0%,100% { transform:translateY(0); }
  45% { transform:translateY(-1.5px); }
}
@media(prefers-reduced-motion:no-preference) {
  body:not(.no-motion) .reward-polish { animation:reward-gentle-lift 1.9s ease-in-out 1; }
  body:not(.no-motion) .reward-polish::after { animation:reward-light-pass 1.9s ease-in-out 1; }
}

/* Four medal tiers extend the existing badge emblem; central icons are unchanged. */
.journey-ranks{width:100%;max-width:190px;gap:7px;margin:5px 0 9px;align-items:center;justify-content:center;flex-wrap:nowrap}
.rank-mark{position:relative;display:block;flex:0 1 40px;min-width:0;height:58px;filter:grayscale(1) brightness(.72);opacity:.9}
.rank-mark:not(.reached){--metal:#a3afbc;--metal-light:#d4dae1;--metal-dark:#526273}
.tier-ribbon{position:absolute;top:2px;width:35%;height:29px;border:1px solid #d8eeff99;border-radius:2px 2px 0 0;background:linear-gradient(90deg,#06409b 0 18%,#4fa2ff 20% 35%,#1255c4 38% 66%,#a4d5ff 70% 78%,#093c90 80%);box-shadow:inset 0 1px #fff8,0 2px 2px #0005;transform-origin:50% 85%}
.ribbon-left{left:28%;transform:rotate(-28deg)}
.ribbon-right{right:28%;transform:rotate(28deg);background:linear-gradient(90deg,#86132f 0 18%,#ff7587 20% 35%,#db294a 38% 66%,#ffc1c8 70% 78%,#941d37 80%)}
.tier-medal-loop{position:absolute;z-index:1;left:39%;top:22px;width:22%;height:10px;box-sizing:border-box;border:2px solid var(--metal-light);border-radius:50%;background:var(--metal-dark);box-shadow:0 1px 1px #0007}
.tier-medal-face{position:absolute;z-index:2;left:4%;bottom:2px;width:92%;aspect-ratio:1;box-sizing:border-box;display:grid;place-items:center;border:3px ridge var(--metal);border-radius:50%;background:conic-gradient(from 25deg,var(--metal-dark),var(--metal-light) 17%,var(--metal) 30%,var(--metal-dark) 48%,var(--metal-light) 68%,var(--metal) 83%,var(--metal-dark));box-shadow:0 2px 0 var(--metal-dark),0 4px 5px #00152d88,inset 0 0 0 1px var(--metal-light)}
.tier-medal-face::before{content:'';position:absolute;inset:3px;border:1px solid var(--metal-light);border-radius:50%;background:linear-gradient(135deg,var(--metal-light),var(--metal) 45%,var(--metal-dark));box-shadow:inset 0 1px 2px var(--metal-dark)}
.tier-medal-seal{position:relative;font-size:17px;line-height:1;color:var(--metal-light);text-shadow:0 1px 0 var(--metal-dark),0 -1px 0 #fff8;filter:drop-shadow(0 1px 1px var(--metal-dark))}
.rank-mark.reached{filter:none;opacity:1}
.rank-mark.reached .tier-medal-face{box-shadow:0 2px 0 var(--metal-dark),0 4px 5px #00152d88,0 0 10px color-mix(in srgb,var(--metal),transparent 55%),inset 0 0 0 1px #fff}
.rank-mark.rank-platinum.reached .tier-medal-face{border-color:#ffe600;box-shadow:0 2px 0 #9b8a0a,0 0 12px #ffe60088,inset 0 0 0 1px white}
.journey-emblem.rank-platinum{box-shadow:0 3px 0 #707c92,0 5px 12px #0005,inset 0 0 0 2px #fff9,0 0 15px #ffe60040}
.preview-badge-card{padding:20px 15px;margin:15px 0;border:1px solid #6c92b8;border-radius:20px;background:linear-gradient(140deg,#163e78,#0b2049);text-align:center}
.preview-badge-card .journey-emblem{margin:auto;width:64px;height:64px}
.preview-badge-card .journey-symbol{font-size:30px}
.preview-badge-card h2{font-size:20px;margin:12px 0 16px}
.preview-tier-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.preview-tier{min-height:58px;border:2px solid var(--metal);border-radius:12px;background:linear-gradient(145deg,var(--metal-light),var(--metal) 40%,var(--metal-dark));color:#102039;font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 3px var(--metal-dark)}
.preview-tier small{display:block;font-weight:600;font-size:12px;margin-top:4px}
.preview-tier:focus-visible{outline:3px solid white;outline-offset:3px}
.preview-tier:only-child{grid-column:1/-1}
@media(max-width:370px){.journey-ranks{gap:4px}.preview-tier-grid{grid-template-columns:repeat(2,1fr)}}

/* Compact phone cards: keep two columns and the complete objectives.
   Scope medal sizing to the collection so reward scenes keep their geometry. */
@media(max-width:600px) {
  body[data-screen=profile] .profile-panel.badge-collection { padding-inline:8px; }
  body[data-screen=profile] .journey-badge { gap:3px; padding:9px 6px 8px; }
  body[data-screen=profile] .journey-badge.earned { padding:8px 5px 7px; }
  .journey-badge .journey-emblem { width:64px; height:64px; margin:1px 0 4px; }
  .journey-badge .journey-symbol { font-size:2rem; }
  .journey-badge h3 { margin:0; line-height:1.25; }
  .journey-badge .journey-ranks { gap:4px; margin:3px 0; }
  .journey-badge .rank-mark { flex-basis:32px; height:auto; aspect-ratio:20 / 29; }
  .journey-badge .tier-ribbon { top:3.45%; height:50%; }
  .journey-badge .tier-medal-loop { top:37.93%; height:17.24%; }
  .journey-badge .tier-medal-face { border-width:2px; }
  .journey-badge .tier-medal-face::before { inset:2px; }
  .journey-badge .tier-medal-seal { font-size:14px; }
  .journey-badge .journey-objective { margin:0; line-height:1.4; }
  .journey-badge .journey-progress small { margin-top:3px; }
  .journey-badge .badge-rule { margin:2px 0 0; font-size:.8125rem!important; }
}