:root {
  color-scheme: light;
  --ink: #0b2045;
  --muted: #446084;
  --paper: rgba(255,255,255,.95);
  --line: #c8dbef;
  --blue: #086ee6;
  --shadow: 0 14px 35px #00205540;
}
* { 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.png') 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.png'); }
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: var(--paper); color: var(--ink); border: 1px solid white; border-radius: 22px; min-height: 150px; display: grid; place-items: center; text-align: center; padding: 30px 25px; margin: 20px 0; box-shadow: var(--shadow); }
.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,#fff,#f0f5fd); color: #112347; border: 1px solid #fff; border-radius: 20px; font-size: 19px; font-weight: 760; padding: 15px 18px; min-height: 61px; box-shadow: 0 4px 0 #0f376236, 0 8px 18px #06244d30; }
.answer-button:hover:not(:disabled) { background: #e5f6ff; }
.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); }
.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; }
.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=home] { background: #03255f; }
body[data-screen=home] .backdrop {
  background-image: linear-gradient(#00246472,#00183dc4),url('./images/home-background.png');
  background-position: center; background-size: cover;
}
body[data-screen=home] .backdrop::after { display: none; }
body[data-screen=home] .app-shell {
  width: 100%; max-width: 480px; min-height: 100svh; padding: 0 12px;
  background: #0872dd url('./images/home-background.png') center top / 100% auto no-repeat;
  box-shadow: 0 0 70px #000e2c80;
}
body[data-screen=home] .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=home] .wordmark { visibility: hidden; }
body[data-screen=home] .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=home] #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=home] main { padding: 0; min-height: 0; }
body[data-screen=home] .home-page { display: block; width: 100%; max-width: none; container-type: inline-size; }
body[data-screen=home] .home-title {
  margin: 0; padding: max(25px,env(safe-area-inset-top)) 0 12px;
  width: 100%; max-width: none; text-align: center; text-shadow: 0 2px 3px #032450;
}
body[data-screen=home] .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=home] .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=home] .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=home] .category-grid {
  display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px;
  width: 100%; margin: 0;
}
body[data-screen=home] .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=home] .category-tile::before { display: none; }
body[data-screen=home] .category-tile:nth-child(-n+3) { aspect-ratio: 1.22; min-height: 5.2rem; }
body[data-screen=home] .category-tile:nth-child(10) { grid-column: 2 / span 2; }
body[data-screen=home] .category-tile:nth-child(11) { grid-column: 4 / span 2; }
body[data-screen=home] .tile-art {
  position: absolute; display: block; left: 0; top: 0; width: 100%; height: 76%;
  background-image: var(--tile-image,url('./images/home-reference.png')); background-repeat: no-repeat;
  background-size: var(--sprite-size); background-position: var(--sprite-position);
}
body[data-screen=home] .tile-label {
  position: relative; display: block; width: 100%; max-width: none; margin: 0;
  padding: 6px 1px 5px; 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(transparent,var(--tile-bottom) 22%); text-shadow: 0 1px 2px #000,0 2px 3px #0009;
}
body[data-screen=home] .home-caption {
  margin: 0 0 0 29%; padding: 15px 0 20px; color: #041b36; text-shadow: 0 1px 2px white;
  font: italic 700 clamp(.875rem,4.3cqw,1.15rem)/1.15 'Segoe Print','Comic Sans MS',cursive;
  text-align: center; white-space: pre-line;
}
body[data-screen=home] .resume { margin: 0 auto 12px; min-height: 44px; padding: 10px; font-size: 1rem; }
body[data-screen=home] 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=home] footer>span { display: none; }
body[data-screen=home] .footer-button { font-size: 12px; min-height: 32px; text-align: center; }
body[data-screen=home] #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=home] .app-shell { min-height: 100svh; }
}
@media(min-width:700px) {
  body[data-screen=home] .app-shell { min-height: 100svh; }
}
body[data-screen=home] .category-histoire { --sprite-size: 1706.666667% 1932.075472%; --sprite-position: 1.728907% 16.580844%; --tile-bottom: #6c350b; }
body[data-screen=home] .category-geographie { --sprite-size: 1745.454545% 1932.075472%; --sprite-position: 8.701657% 16.580844%; --tile-bottom: #003d80; }
body[data-screen=home] .category-patrimoine { --sprite-size: 1706.666667% 1932.075472%; --sprite-position: 15.629322% 16.580844%; --tile-bottom: #573011; }
body[data-screen=home] .category-arts { --sprite-size: 1706.666667% 2007.843137%; --sprite-position: 1.728907% 24.768756%; --tile-bottom: #610b64; }
body[data-screen=home] .category-musique { --sprite-size: 1725.842697% 1651.612903%; --sprite-position: 8.707671% 25.051975%; --tile-bottom: #7b370e; }
body[data-screen=home] .category-cinema { --sprite-size: 1706.666667% 2089.795918%; --sprite-position: 15.629322% 24.717949%; --tile-bottom: #381067; }
body[data-screen=home] .category-sport { --sprite-size: 1706.666667% 1706.666667%; --sprite-position: 1.728907% 34.336100%; --tile-bottom: #034d15; }
body[data-screen=home] .category-traditions { --tile-image: url('./images/traditions-lampions.png'); --sprite-size: cover; --sprite-position: center; --tile-bottom: #5c230c; }
body[data-screen=home] .category-cuisine { --sprite-size: 1706.666667% 2327.272727%; --sprite-position: 15.629322% 33.775510%; --tile-bottom: #a75200; }
body[data-screen=home] .category-sciences { --sprite-size: 1600.000000% 2381.395349%; --sprite-position: 4.861111% 42.711519%; --tile-bottom: #032b94; }
body[data-screen=home] .category-societe { --sprite-size: 1551.515152% 2438.095238%; --sprite-position: 12.317328% 42.668024%; --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.png') 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(130deg,#fff,#f5f3f4); border: 1px solid #fff; border-radius: 22px; color: #081332;
  box-shadow: inset 0 2px 1px #fff,0 8px 16px #07142c45;
}
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 #fff; border-radius: 24px;
  background: linear-gradient(180deg,#fff,#fffdf8 52%,#f3eee6); color: #071333;
  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 2px #fff,0 4px 8px #33271948;
}
body[data-screen=question] .answer-button:hover:not(:disabled) { background: linear-gradient(#fff,#e5f2ff); }
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] { background: #03375e; }
body[data-screen=lengths] .backdrop {
  background: linear-gradient(#032442ab,#021c37cf),url('./images/setup-coast.png') center / 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,#00326315 0%,#00366a3b 22%,#002e4d35 68%,#012d3e7d 100%),url('./images/setup-coast.png');
  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-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; }
}