@font-face{font-family:'MedievalSharp';font-style:normal;font-weight:400;font-display:swap;src:url(./assets/fonts/medievalsharp-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'MedievalSharp';font-style:normal;font-weight:400;font-display:swap;src:url(./assets/fonts/medievalsharp-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:dark;--ink:#170d0f;--panel:#261719;--panel2:#351e21;--border:#6b5457;--gold:#f2cc8a;--gold2:#ad7d48;--muted:#bdadaf;--red:#eb5c76;--green:#7de7ac;--medieval:'MedievalSharp',serif;--reading:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{min-width:300px;min-height:100svh;margin:0;color:#fbf3e9;background:radial-gradient(ellipse at 50% -10%,#3e272a,#1a0f11 60%,#11090a);font-family:var(--reading);-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.55;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:3px solid #facd8b;outline-offset:2px}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4,.fantasy{font-family:var(--medieval)}
small{font-size:13.5px}
img{max-width:100%}
#app{min-height:100svh}
.loading{min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--gold);text-align:center;gap:12px;font-family:var(--medieval);font-size:clamp(26px,8vw,50px);padding:30px}
.loading p,.loading small{font:14.5px/1.6 var(--reading);max-width:450px;color:var(--muted)}
.app-shell{max-width:1280px;margin:auto;padding:calc(8px + env(safe-area-inset-top)) clamp(10px,2.5vw,30px) calc(15px + env(safe-area-inset-bottom));min-height:100svh}
.topbar{height:55px;display:flex;justify-content:space-between;gap:8px;align-items:center;position:relative;z-index:5}
.topbar-actions{display:flex;align-items:center;gap:8px}
/* Battle: art, characters and all HUD are separate layers */
.battle-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.boss-header{padding:5px 5px 8px;text-align:center;background:linear-gradient(180deg,#2f1e20,#211517);border:1px solid #695053;border-radius:13px 13px 0 0}
.boss-number{font:14.5px var(--medieval);color:var(--gold);letter-spacing:1px}
.boss-title{font:clamp(19px,5vw,28px) var(--medieval);line-height:1.2;color:#ffe9be;margin:2px 0 7px}
.hp-line{display:flex;align-items:center;gap:10px;max-width:650px;margin:0 auto}
.health-track{background:#140c0d;border:1px solid #d7a567;border-radius:50px;height:15px;flex:1;overflow:hidden;box-shadow:inset 0 2px 8px #0007}
.health-fill{height:100%;border-radius:50px;background:linear-gradient(180deg,#ff858d,#c12b4d);transition:width .4s ease;box-shadow:0 0 9px #de5376}
.hp-label{font-size:12.5px;font-weight:800;color:#f9d0b5;white-space:nowrap}
.arena{position:relative;height:clamp(180px,30svh,345px);overflow:hidden;isolation:isolate;background:#211415 var(--scene) center 43% /cover no-repeat;border:1px solid #695053;border-top:0;border-radius:0 0 16px 16px;box-shadow:0 8px 26px #0006}
.arena:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(180deg,#1a0d0f40,transparent 22%,transparent 75%,#150b0c77)}
.scene-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,#ad6a7321,transparent 55%);z-index:0}
.ground-shadow{position:absolute;bottom:0;background:#1b0e1088;filter:blur(16px);border-radius:50%;height:10%;z-index:1}
.ground-shadow.left{left:5%;width:28%}
.ground-shadow.right{right:5%;width:50%}
.hero-wrap,.boss-wrap{position:absolute;z-index:2;bottom:0;display:flex;align-items:end;justify-content:center;transform-origin:50% 100%}
.hero-wrap{left:2%;height:91%;width:35%;animation:heroIdle 5.5s ease-in-out infinite}
.hero-wrap:after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen}
.hero-wrap.skin-royal:after{opacity:.26;background:radial-gradient(ellipse at 50% 70%,transparent 40%,#ffcf66 77%,transparent 100%)}
.hero-wrap.skin-shadow:after{opacity:.28;background:radial-gradient(ellipse at 50% 70%,transparent 40%,#ab61f5 77%,transparent 100%)}
.hero-sprite{height:100%;max-width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 8px #0f0608b0)}
.boss-wrap{right:1%;width:57%;height:97%;animation:bossIdle 5.3s ease-in-out infinite}
.boss-sprite{max-height:100%;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 12px #14090bc4)}
.combat-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0}
.arena.hit{animation:shake .45s}
.arena.hit .combat-flash{animation:flash .45s}
.arena-footer{position:absolute;bottom:7px;left:8px;right:8px;display:flex;justify-content:space-between;z-index:5;pointer-events:none}
.arena-footer span{font-size:11.5px;color:#ffe0a5;background:#1f1012c2;border:1px solid #9a7449;border-radius:8px;padding:5px 7px}
.damage-pop{position:absolute;top:31%;right:23%;z-index:8;color:#ffe4a1;font:40px var(--medieval);opacity:0;text-shadow:0 2px 5px #000,0 0 14px #ffe0a8}
.damage-pop.pop-active{animation:damageFloat .85s ease-out forwards}
.boss-wrap.dissolving{animation:bossDissolve 2.5s ease 0s forwards}
.hero-wrap.hero-strike{animation:heroStrike .95s ease-in-out 1 forwards}
.particle{width:4px;height:4px;background:#dc9aff;position:absolute;z-index:4;box-shadow:0 0 10px #d17cfc;border-radius:50%;animation:particleFly 2.4s ease-out forwards}
.boss-victory .arena-footer{opacity:.45}
.boss-victory .combat-flash{animation:flash .6s}
.battle-status{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:29px}
.mode-chip{font:13.5px var(--medieval);border-radius:30px;padding:5px 9px;border:1px solid #88b598;color:#c6f5d5;background:#173c2d}
.mode-chip.hardcore{border-color:#e08b7d;background:#541d2d;color:#ffc3bf}
.hearts{display:flex;gap:2px}
.heart{color:#f76778;filter:drop-shadow(0 0 3px #f4436b);font-size:clamp(18px,4.5vw,24px)}
.heart.lost{color:#57494b;filter:none}
.weapon-hint{font-size:12.5px;color:#c7b3b6;white-space:nowrap}
.clock-bar{background:linear-gradient(#362325,#251618);border:1px solid #6c5558;border-radius:11px;padding:8px 11px}
.clock-top{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:14px;color:#ffe4ac}
.clock-top small{font-size:11.5px;color:#c1b0b3}
.clock-value{font:19px var(--medieval);font-variant-numeric:tabular-nums}
.clock-value.urgent{color:#ff7a7c;animation:pulse .5s infinite alternate}
.clock-track{height:7px;background:#0a0506;border-radius:12px;margin-top:7px;overflow:hidden}
.clock-fill{height:100%;background:linear-gradient(90deg,#b2636e,#ffd675);border-radius:12px;transition:width .08s linear}
.clock-fill.urgent{background:linear-gradient(90deg,#d62d54,#ffb3a0)}
.word-card{background:linear-gradient(145deg,#fbe5b2,#d7ad76);border:3px ridge #c29455;color:#28191b;border-radius:11px;text-align:center;padding:8px 10px;box-shadow:inset 0 0 15px #b4865577,0 4px 12px #0005}
.small-label{font:12.5px var(--medieval);color:#634133}
.word-card h2{overflow-wrap:anywhere;line-height:1.18;margin-top:3px}
.choices{display:grid;grid-template-columns:1fr;gap:7px}
.choice{width:100%;min-height:54px;border:1.5px solid #a77e55;background:linear-gradient(#341f22,#211315);color:#f3e8e7;border-radius:11px;display:flex;align-items:center;text-align:left;gap:9px;padding:8px 11px;font:clamp(12px,3.6vw,16px)/1.35 var(--reading);box-shadow:inset 0 1px #be8b5952;overflow-wrap:anywhere}
.choice .letter{font:20px var(--medieval);color:#ecc084;flex:0 0 25px}
.choice .answer-mark{margin-left:auto;color:#87f4b5}
.choice:active:not(:disabled){background:#4e3336}
.choice.correct{border-color:#66e7a1;background:#164832}
.choice.incorrect{border-color:#ff7591;background:#6a213a}
.choice:disabled{opacity:1}
.loading-choice{border:1px solid #614f51;border-radius:10px;padding:15px;color:var(--muted);font-size:14.5px}
.under-questions{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#a09294;font-size:11.5px}
.text-button,.mini-link{background:none;border:0;color:#f7ca85;text-decoration:underline;text-underline-offset:3px;font-size:13.5px;padding:7px}
.feedback{border:1px solid #966e55;background:#24181a;border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.45;color:#f5e7e2}
.feedback.good{border-color:#77ca9f}
.feedback.bad{border-color:#ed7f86}
.feedback-title{font:17px var(--medieval);color:#ffd18f;margin-bottom:4px}
.feedback p{margin-top:5px;color:#c9b5b8}
.feedback .banner-btn{margin-top:9px}
.coin-float{font:24px var(--medieval);color:#ffe089;margin-top:6px}
.boss-victory+.battle-controls>.feedback.good,.battle-controls>.feedback.good:has(#coinwin){animation:appearLate 4.4s both}
/* Desktop cinematic composition: no image stretching, no overlay HUD */
@media(min-width:820px){.battle-screen{padding-top:7px}.battle-layout{grid-template-columns:minmax(0,1.18fr) minmax(365px,.82fr);align-items:start;gap:22px}.arena{width:100%;height:auto;min-height:0;aspect-ratio:16/9}.boss-header{padding:12px}.boss-title{font-size:31px}.boss-number{font-size:15px}.battle-controls{display:flex;flex-direction:column;gap:13px;padding-top:8px}.battle-status{min-height:38px}.word-card{padding:19px 12px}.choices{gap:12px}.choice{min-height:67px;font-size:15px}.battle-status .heart{font-size:24px}.clock-bar{padding:12px}.clock-value{font-size:22px}.hero-wrap{left:1%;width:37%;height:93%}.boss-wrap{width:57%;right:1%;height:99%}.arena-footer span{font-size:13.5px}}
/* Overlay screens and functional menus */
.panel-overlay{position:fixed;z-index:50;inset:0;padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center;background:#0d0607d9;backdrop-filter:blur(7px)}
.panel-subtitle{font:17px var(--medieval);color:#f3c88a;margin:15px 0 9px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:11px 2px;border-bottom:1px solid #5e494b}
.setting-row strong{font-size:14px}
.setting-row small{display:block;color:#a79396;margin-top:5px;font-size:12.5px;line-height:1.35}
.toggle{border:1px solid #a37a55;min-width:64px;min-height:39px;border-radius:20px;padding:7px 12px;color:#d9b7ad;background:#4d3236;font-size:13.5px;font-weight:800}
.toggle.on{background:#235444;border-color:#78c29b;color:#c5f6d7}
.panel-action-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.panel-action-row>*{flex:1}
.tabs{display:flex;gap:7px;margin:12px 0}
.tab{flex:1;min-height:42px;background:#2c1c1e;border:1px solid #6a5457;border-radius:10px;color:#c7b7b9;padding:7px;font-size:13.5px}
.tab.active{background:#623b40;border-color:#d6a975;color:#ffdfac;font-weight:800}
.shop-item{display:grid;grid-template-columns:74px 1fr auto;gap:10px;align-items:center;border:1px solid #6d5457;border-radius:13px;background:#2a1b1d;padding:10px;margin:10px 0}
.item-portrait{background:radial-gradient(#513a3d,#231618);border:1px solid #9c7953;border-radius:10px;height:75px;display:grid;place-items:center;overflow:hidden}
.item-art{width:100%;height:100%;object-fit:contain}
.item-symbol{font-size:35px}
.shop-description b{font-size:14px}
.shop-description p{color:#bdadaf;font-size:12.5px;line-height:1.5;margin-top:4px}
.shop-description small{color:#f8cc7d}
.shop-buy{border:1px solid #f1c77d;border-radius:10px;background:linear-gradient(#f4d59d,#bb7d3b);color:#3f2219;min-width:72px;min-height:43px;padding:7px;font-size:13.5px;font-weight:800}
.equipment-art{height:260px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 50%,#4c2d31,#1d1113);border:1px solid #594447;border-radius:13px;overflow:hidden}
.equipment-art img{height:100%;object-fit:contain;animation:heroIdle 5s ease-in-out infinite}
.equip-options{display:grid;gap:8px}
.equip-select{display:flex;align-items:center;gap:13px;border:1px solid #624d4f;border-radius:12px;background:#2b1a1c;color:#cbbabc;text-align:left;padding:10px;min-height:47px;font-size:14.5px}
.equip-select.selected{background:#473336;border-color:#ffc476;color:#ffebc8}
.equip-select img{height:53px;width:44px;object-fit:contain}
.equip-select small{display:block;color:#a08d8f;margin-top:5px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.stat-cell{border:1px solid #695356;border-radius:11px;padding:12px;background:#2d1c1e}
.stat-cell span{display:block;font-size:12.5px;color:#b39fa2}
.stat-cell strong{display:block;font:24px var(--medieval);color:#f9d098;margin-top:6px}
.score-showcase{text-align:center;background:#29171a;border:1px solid #6c5356;padding:10px;margin:10px 0 14px;border-radius:11px}
.score-showcase small{letter-spacing:1px;color:#f1ce94}
.score-showcase div{font:42px var(--medieval);color:#ffcf91}
.stats-chart{height:125px;display:flex;align-items:end;gap:4px;background:#1d1113;border-bottom:1px solid #a37554;border-radius:10px;padding:10px 9px;margin-bottom:12px}
.chart-bar{flex:1;max-width:40px;background:linear-gradient(#f0a1ab,#84434c);border-radius:4px 4px 0 0}
.history-line{border-bottom:1px solid #553c3f;display:flex;justify-content:space-between;align-items:center;padding:11px 4px;gap:5px}
.history-line small{color:#ad9c9e;text-align:right}
.search{width:100%;border-radius:11px;border:1px solid #7b6568;background:#1d1011;color:#f9e6d3;padding:12px;font-size:14px}
.mistake-item,.vocab-row{border:1px solid #634f52;background:#291a1c;border-radius:10px;padding:11px;margin:8px 0;font-size:13.5px;line-height:1.55}
.mistake-title,.vocab-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mistake-title b,.vocab-row b{font:17px var(--medieval);color:#ffe0a7}
.mistake-item p{margin:6px 0}
.mistake-item small,.vocab-row small{display:block;color:#a19596;margin-top:4px}
.wrong-text{color:#ff9aa2}
.right-text{color:#a3ebaf}
.vocab-row p{color:#c0b0b2;margin-top:4px}
.achievement{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;border:1px solid #5e4d4f;background:#291a1c;border-radius:12px;margin:9px 0;padding:11px;opacity:.7}
.achievement.unlocked{opacity:1;border-color:#b68c5b}
.achievement b{color:#e8c397;font:15px var(--medieval)}
.achievement p{font-size:12.5px;color:#b19da0;margin-top:5px}
.medal{font-size:27px}
.reward{font-size:13.5px;color:#f4c482;font-weight:800}
.challenge-card{border:1px solid #b18b5b;background:#2b1d1f;padding:17px;border-radius:15px}
.challenge-card h3{font:27px var(--medieval);color:#e7cb97;margin:6px 0}
.challenge-card p{font-size:14.5px;color:#c4b2b5;line-height:1.5}
.challenge-progress{display:flex;justify-content:space-between;margin:16px 0 5px;font-size:13.5px}
.tiny-track{height:9px;background:#1a1112;border-radius:10px;overflow:hidden}
.tiny-track div{height:100%;background:linear-gradient(90deg,#bd6b76,#ffd281)}
.reward-row{margin-top:20px;color:#f7ca8b;text-align:center;font-size:15px}
/* Realm intro */
.transition-screen{min-height:100svh;position:relative;background:#1a0c0e var(--scene) center /cover no-repeat;display:flex;justify-content:center;align-items:center;text-align:center;padding:25px}
.transition-veil{position:absolute;inset:0;background:#130a0bd0;backdrop-filter:blur(3px)}
.transition-inner{position:relative;z-index:1;max-width:500px}
.transition-inner h1{font:clamp(32px,9vw,64px) var(--medieval);color:#ffe2ac;margin:12px 0;text-shadow:0 0 20px #af646e}
.transition-inner h2{font:25px var(--medieval);color:#f0d7a2}
.transition-inner h3{font:20px var(--medieval);color:#faf0e4;margin-top:5px}
.transition-inner p{font-size:14.5px;color:#bdaeb0;margin-top:10px}
.sigil{font:45px var(--medieval);color:#e6ba78;margin:18px}
.transition-skip{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(290px,85vw);z-index:3}
.toast{position:fixed;z-index:90;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(90vw,520px);border:1px solid #d5a06a;border-radius:11px;background:#341b1fdc;box-shadow:0 6px 28px #0008;color:#ffe0af;text-align:center;font-size:14.5px;font-weight:700;padding:11px 16px}
@keyframes heroIdle{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-3px) rotate(-.65deg)}65%{transform:translateY(-2px) rotate(.7deg)}}
@keyframes bossIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.013)}}
@keyframes heroStrike{0%,100%{transform:translateX(0)}36%{transform:translateX(24%) rotate(3deg)}70%{transform:translateX(5%) rotate(-4deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}42%{transform:translateX(5px)}65%{transform:translateX(-3px)}85%{transform:translateX(2px)}}
@keyframes flash{0%,100%{opacity:0}20%{opacity:.7;background:#f6c5cc66}}
@keyframes damageFloat{0%{opacity:0;transform:translateY(20px)}20%{opacity:1}100%{opacity:0;transform:translateY(-64px)}}
@keyframes bossDissolve{0%{opacity:1;filter:brightness(1)}36%{opacity:.97;filter:brightness(1.9) saturate(.7)}68%{opacity:.55;filter:brightness(2) saturate(.2)}100%{opacity:0;filter:brightness(3) saturate(0);transform:translateY(-30px)}}
@keyframes particleFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),-160px) scale(.2)}}
@keyframes pulse{from{opacity:1}to{opacity:.42}}
@keyframes appearLate{0%,88%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:819px){.app-shell{padding-left:10px;padding-right:10px}.battle-controls{display:grid;gap:7px}.battle-screen{gap:7px}.battle-screen .topbar{height:43px}.boss-header{padding:3px 9px 7px}.boss-title{font-size:clamp(17px,5vw,23px);margin:2px 0 6px}.boss-number{font-size:13.5px}.hp-line .health-track{height:12px}.arena{height:clamp(170px,30svh,290px)}.hero-wrap{height:90%;width:36%;left:0}.boss-wrap{width:59%;right:0;height:95%}.choice{min-height:49px;padding:7px 10px}.word-card{padding:7px}.word-card h2{font-size:clamp(23px,6.6vw,32px)}.battle-status{min-height:22px}.clock-bar{padding:6px 9px}.under-questions{margin-bottom:2px}}
@media(max-height:710px) and (max-width:819px){.arena{height:clamp(155px,26svh,220px)}.choice{min-height:44px;padding:6px 8px}.choices{gap:5px}.battle-layout{gap:6px}.boss-title{font-size:19px}.word-card h2{font-size:23px}.word-card{padding:5px}.battle-controls{gap:5px}.battle-status{min-height:20px}.under-questions span{display:none}}
@media(max-width:365px){.wallet{padding:4px 7px;font-size:12.5px}.logomark{font-size:24px}.choice{font-size:13.5px}.shop-item{grid-template-columns:52px 1fr auto;gap:8px}.item-portrait{height:58px}.shop-buy{min-width:63px;font-size:12.5px}.panel-head{grid-template-columns:68px 1fr auto}.panel-head h2{font-size:21px}.panel-head .wallet{font-size:12.5px}.hearts .heart{font-size:19px}.mode-chip{font-size:12.5px;padding:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.battle-visual,.battle-controls{min-width:0}

/* ================= GOTHIC THEME (bone · bronze · crimson on black stone) ================= */
:root{--bone:#f1e2c8;--gold:#e9c27a;--gold2:#9a6c33;--crimson:#b32742;--ink:#0a0407;--medieval:'MedievalSharp','Pirata One',Georgia,'Times New Roman',serif;--reading:var(--medieval)}
html{background:#0a0407}
body{font-family:var(--medieval);font-size:16px;line-height:1.4;font-synthesis:style;color:var(--bone);background:#0a0407}
b,strong,th{font-weight:400}
small{font-size:13.5px}
.ico{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.ico.fill{fill:currentColor;stroke:none}

/* --- scene backdrop --- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0e0508 url(./assets/ui/scene.svg) center/cover no-repeat}
.result-page .scene{filter:brightness(.78) saturate(1.2)}
.result-page.win .scene{filter:brightness(1.08) saturate(1.25) hue-rotate(-14deg)}
.scene-knight{position:absolute;z-index:1;right:max(1vw,8px);top:clamp(36px,6vh,70px);height:min(68vh,680px);width:auto;max-width:52vw;object-fit:contain;object-position:right top;pointer-events:none;filter:drop-shadow(0 14px 20px #000d);animation:knightIdle 5.5s ease-in-out infinite}
@keyframes knightIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* --- plaques: dark stone with a pointed bronze rim --- */
.plaque,.secondary-btn,.small-btn,.quick-buttons button,.mode-toggle,.diff-opt,.scroll-small-actions button,.banner-btn{--pt:14px;--bw:2px;position:relative;isolation:isolate;border:0;background:none;color:var(--bone);min-height:52px;padding:8px 22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:clamp(16px,1.5vw,21px)/1.15 var(--medieval);letter-spacing:.02em;text-align:center;text-shadow:0 2px 3px #000d;filter:drop-shadow(0 5px 6px #000b);transition:transform .12s,filter .15s}
.plaque::before,.secondary-btn::before,.small-btn::before,.quick-buttons button::before,.mode-toggle::before,.diff-opt::before,.scroll-small-actions button::before,.banner-btn::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--rim,linear-gradient(180deg,#f2d28f,#9a6c33 52%,#d9ae68));clip-path:polygon(0 50%,var(--pt) 0,calc(100% - var(--pt)) 0,100% 50%,calc(100% - var(--pt)) 100%,var(--pt) 100%)}
.plaque::after,.secondary-btn::after,.small-btn::after,.quick-buttons button::after,.mode-toggle::after,.diff-opt::after,.scroll-small-actions button::after,.banner-btn::after{content:'';position:absolute;inset:var(--bw);z-index:-1;background:var(--face,radial-gradient(ellipse at 50% -20%,#ffffff1c,transparent 62%),repeating-linear-gradient(115deg,#ffffff06 0 2px,transparent 2px 7px),linear-gradient(#35272b,#1a1114 70%,#120a0d));clip-path:polygon(0 50%,calc(var(--pt) - var(--bw)) 0,calc(100% - var(--pt) + var(--bw)) 0,100% 50%,calc(100% - var(--pt) + var(--bw)) 100%,calc(var(--pt) - var(--bw)) 100%)}
.plaque .ico,.secondary-btn .ico,.small-btn .ico,.quick-buttons button .ico,.mode-toggle .ico,.scroll-small-actions .ico,.banner-btn .ico{color:#e8be78;filter:drop-shadow(0 1px 1px #000)}
@media(hover:hover){.plaque:hover:not(:disabled),.secondary-btn:hover:not(:disabled),.small-btn:hover:not(:disabled),.quick-buttons button:hover:not(:disabled),.mode-toggle:hover:not(:disabled),.diff-opt:hover:not(:disabled),.scroll-small-actions button:hover:not(:disabled),.banner-btn:hover:not(:disabled){filter:drop-shadow(0 5px 6px #000b) brightness(1.16)}}
.plaque:active,.secondary-btn:active,.small-btn:active,.quick-buttons button:active,.mode-toggle:active,.diff-opt:active,.scroll-small-actions button:active,.banner-btn:active{transform:translateY(2px)}
/* crimson variant (primary actions, selected states) */
.plaque.red,.banner-btn,.mode-toggle.active,.diff-opt.active{--rim:linear-gradient(180deg,#ffe3a0,#c28b42 50%,#f0c880);--face:radial-gradient(ellipse at 50% -30%,#ff9f8c40,transparent 65%),repeating-linear-gradient(115deg,#ffffff0a 0 2px,transparent 2px 7px),linear-gradient(#bd2b47,#821529 58%,#52091a)}
.mode-toggle.active,.diff-opt.active{filter:drop-shadow(0 0 9px #d1344f88) drop-shadow(0 5px 6px #000b)}
.banner-btn{--pt:36px;min-height:62px;width:100%;max-width:100%;font-size:clamp(22px,2.7vw,34px);letter-spacing:.07em;text-transform:uppercase;color:#fff1d2}
.banner-btn.small{--pt:18px;min-height:46px;font-size:clamp(17px,2vw,22px);padding:6px 20px}
.small-btn{--pt:10px;min-height:46px;padding:6px 20px;font-size:clamp(16px,2vw,20px)}
.secondary-btn{min-width:105px}

/* --- top bar, wallet, gear --- */
.logomark{border:0;padding:0;background:none;font:clamp(28px,4.2vw,46px)/1 var(--medieval);color:#f4e7d0;text-shadow:0 3px 0 #3a0a14,0 0 16px #000a;white-space:nowrap}
.logomark span{color:#e3394f}
.wallet{display:inline-flex;align-items:center;gap:10px;border:2px solid #9a7440;border-radius:40px;padding:5px 18px 5px 6px;background:linear-gradient(#2c1b1f,#140b0e);box-shadow:inset 0 0 0 1px #000b,0 4px 10px #000a;white-space:nowrap;font-size:clamp(17px,1.8vw,22px);color:#f6e6c8}
.goldcoin{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;background:radial-gradient(circle at 32% 25%,#fff4bd,#f1b451 55%,#955116);border:2px solid #fce29a;border-radius:50%;color:#85500d;font-size:16px;box-shadow:0 0 14px #d5a55255}
.iconbtn{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#3a2a2e,#150c0f);border:2px solid #9a7440;color:#e8be78;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #000b,0 4px 10px #000a}
.iconbtn .ico{width:24px;height:24px}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;color:#e6c78f;font-size:clamp(12px,1.35vw,18px);letter-spacing:.28em;text-transform:uppercase;text-shadow:0 2px 4px #000}
.eyebrow::before,.eyebrow::after{content:'';width:clamp(26px,7vw,110px);height:1px;background:linear-gradient(90deg,transparent,#c59a5c)}
.eyebrow::after{transform:scaleX(-1)}
.footnote{font-size:13px;color:#a8957f;text-align:center;margin:2px 0 0}
.gold-rule{position:relative;height:14px;margin:10px auto;width:min(440px,84%);background:linear-gradient(90deg,transparent,#b98d55,transparent) center/100% 1px no-repeat}
.gold-rule::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);background:#d3a766;box-shadow:0 0 0 3px #0e0508}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #8a6a3f;border-radius:30px;background:#140b0ee6;color:#ead7b6;padding:6px 15px;font-size:clamp(14px,1.5vw,17px)}
.chip .ico{width:19px;height:19px;color:#e8be78}
.chip .ico.fill{color:#d6334b}

/* --- main menu --- */
.menu-screen{position:relative;max-width:none;min-height:100svh;padding:0;display:flex;flex-direction:column;overflow-x:hidden}
.menu-screen .topbar,.result-page .topbar{height:auto;min-height:72px;padding:calc(10px + env(safe-area-inset-top)) clamp(12px,3vw,40px) 6px;position:relative;z-index:3}
.menu-screen .topbar::after{content:'';position:absolute;left:clamp(190px,26vw,360px);right:clamp(170px,20vw,290px);top:50%;height:1px;background:linear-gradient(90deg,transparent,#c9a064 18%,#c9a064 82%,transparent);opacity:.65;pointer-events:none}
.menu-screen .topbar::before{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:#d3a766;box-shadow:0 0 0 5px #1a090d;opacity:.9}
.menu-stack{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:12px;padding:0 clamp(12px,3vw,40px) calc(14px + env(safe-area-inset-bottom))}
.menu-title{text-align:center;display:grid;justify-items:center;gap:2px;margin-bottom:2px}
.menu-title h1{font:clamp(46px,7.2vw,104px)/1 var(--medieval);letter-spacing:.03em;background:linear-gradient(#fff6e8,#e8cdb9 52%,#9d7867);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #3b0f19) drop-shadow(0 8px 16px #000d)}
.tagline{font-size:clamp(17px,2vw,26px);color:#f1e2c8;text-shadow:0 2px 8px #000,0 0 3px #000}
.menu-core{width:min(900px,100%);display:grid;gap:11px}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.4vw,30px)}
.mode-toggle{flex-direction:column;gap:1px;min-height:62px;--pt:20px}
.mode-toggle .mt-title{display:inline-flex;align-items:center;gap:9px;font-size:clamp(19px,2.1vw,27px)}
.mode-toggle small{display:block;color:#cdb48a;font-size:clamp(12.5px,1.2vw,15px);text-shadow:0 1px 2px #000}
.mode-toggle.active small{color:#ffe9c4}
.diff-row{display:grid;gap:7px}
.diff-label{display:flex;align-items:center;justify-content:center;gap:12px;color:#e0c48f;font-size:clamp(12.5px,1.25vw,16px);letter-spacing:.22em;text-transform:uppercase;text-shadow:0 2px 4px #000}
.diff-label::before,.diff-label::after{content:'';flex:0 1 80px;height:1px;background:linear-gradient(90deg,transparent,#b98d55)}
.diff-label::after{transform:scaleX(-1)}
.diff-options{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.5vw,18px)}
.diff-opt{--pt:11px;min-height:56px;flex-direction:column;gap:0;padding:6px 8px}
.diff-opt b{font-weight:400;font-size:clamp(16px,1.7vw,22px)}
.diff-opt small{font-size:clamp(12px,1.15vw,15px);color:#cdb48a}
.diff-opt.active small{color:#ffe9c4}
.diff-hint{text-align:center;font-size:clamp(13px,1.3vw,16px);color:#d2b88f;text-shadow:0 1px 3px #000}
.quick-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,18px)}
.quick-buttons.minor{grid-template-columns:repeat(3,1fr)}
.quick-buttons button{min-height:54px;padding:8px 10px;font-size:clamp(15px,1.5vw,20px)}
.menu-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.menu-screen .footnote{display:none}
@media(min-height:860px){.menu-screen .footnote{display:block}}

/* --- panels (pause, shop, settings, ...) --- */
.panel-overlay{background:linear-gradient(#0a0407e8,#0a0407f4),#0a0407 url(./assets/ui/scene.svg) center/cover no-repeat;backdrop-filter:none;padding-top:calc(12px + env(safe-area-inset-top))}
.panel-frame{position:relative;width:min(920px,100%);margin:auto 0;max-height:calc(100svh - 24px);overflow-y:auto;overscroll-behavior:contain;border:2px solid #8c6a3d;border-radius:14px;background:linear-gradient(#1a0f13f6,#0e080bf9);box-shadow:inset 0 0 0 3px #090406,inset 0 0 0 4px #5a4226,0 18px 60px #000d;padding:clamp(14px,3vw,28px);color:var(--bone)}
.panel-frame::before{content:'';position:absolute;left:10px;top:0;width:24px;height:92px;background:linear-gradient(#a52035,#5c0f1d);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);opacity:.95;pointer-events:none}
.panel-head{position:relative;display:grid;grid-template-columns:minmax(96px,1fr) auto minmax(96px,1fr);align-items:center;gap:10px;margin-bottom:16px}
.panel-head>.small-btn{justify-self:start}
.panel-head>.wallet{justify-self:end}
.banner-title{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:min(100%,300px);margin:0;padding:12px clamp(36px,6vw,76px);font:clamp(24px,4.4vw,44px)/1.1 var(--medieval);color:#f7e6c6;text-shadow:0 3px 0 #3a0612,0 0 14px #0009;white-space:nowrap;filter:drop-shadow(0 6px 8px #000a)}
.banner-title::before,.banner-title::after{content:'';position:absolute;z-index:-1;clip-path:polygon(0 50%,4% 16%,42% 16%,50% 0,58% 16%,96% 16%,100% 50%,96% 84%,58% 84%,50% 100%,42% 84%,4% 84%)}
.banner-title::before{inset:0;background:linear-gradient(180deg,#f2d28f,#9a6c33 52%,#d9ae68)}
.banner-title::after{inset:3px;background:repeating-linear-gradient(115deg,#ffffff0a 0 2px,transparent 2px 7px),radial-gradient(ellipse at 50% -20%,#ff9f8c38,transparent 65%),linear-gradient(#a8283e,#6c1223 60%,#47091a)}
.banner-title .ico{color:#f0cc8a}
.panel-note{position:relative;font-size:clamp(16px,1.8vw,20px);line-height:1.55;padding:16px 22px;margin:12px 0;background:linear-gradient(#160d11,#0f080b);border:2px solid #8c6a3d;border-radius:8px;box-shadow:inset 0 0 0 2px #080406,inset 0 0 0 3px #4d3822;color:#ead9bd}
.panel-subtitle{font-size:clamp(19px,2.2vw,25px);color:#e9c27a;margin:16px 0 9px}
.panel-action-row{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,22px);margin:16px 0 6px}
.panel-action-row>*{flex:1}
.pause-panel .banner-btn{margin-top:4px}
.setting-row strong{font-size:clamp(16px,1.8vw,19px)}
.setting-row small{font-size:14px}
.daily-modal{text-align:center;padding:clamp(8px,3vw,22px);display:grid;justify-items:center;gap:10px}
.daily-coin{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;font-size:48px;color:#85500d;background:radial-gradient(circle at 32% 25%,#fff4bd,#f1b451 55%,#955116);border:3px solid #fce29a;box-shadow:0 0 38px #e8a24c88}
.daily-modal h2{font-size:clamp(34px,6vw,52px);color:#f7e6c6;text-shadow:0 3px 0 #3a0612}
.daily-modal p{font-size:clamp(16px,1.8vw,19px);color:#e2cfb0;line-height:1.5}
.daily-modal .banner-btn{margin-top:6px}

/* --- score / result --- */
.score-massive{font:clamp(54px,12vw,100px)/1 var(--medieval);text-align:center;background:linear-gradient(#fff2c8,#e8bd6a 52%,#a8742f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #3a1608) drop-shadow(0 0 18px #e0a04a44)}
.daily-modal .score-massive{font-size:clamp(40px,8vw,58px)}
.result-page{position:relative;max-width:none;min-height:100svh;padding:0 clamp(10px,3vw,30px) calc(28px + env(safe-area-inset-bottom));overflow-x:hidden}
.result-page .topbar{padding-left:0;padding-right:0}
.death-panel{position:relative;z-index:2;isolation:isolate;width:min(780px,100%);margin:6px auto 0;padding:clamp(22px,4vw,40px) clamp(14px,4vw,40px) clamp(20px,3vw,32px);border:2px solid #8c6a3d;border-radius:14px;background:linear-gradient(#1b0f13f2,#0d070af6);box-shadow:inset 0 0 0 3px #090406,inset 0 0 0 4px #5a4226,0 20px 70px #000e,0 0 80px #b3274233;text-align:center;overflow:hidden}
.death-boss{position:absolute;inset:0;z-index:-1;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.death-boss img{height:min(380px,60%);width:auto;max-width:90%;object-fit:contain;opacity:.2;filter:grayscale(.55) contrast(1.15);-webkit-mask-image:linear-gradient(#000 35%,transparent 92%);mask-image:linear-gradient(#000 35%,transparent 92%);margin-top:6px}
.death-crest{display:grid;place-items:center;color:#c9a064;margin-bottom:2px}
.death-crest .ico{width:46px;height:46px;stroke-width:1.5;filter:drop-shadow(0 0 10px #b3274288)}
.death-hero{font:clamp(54px,13vw,118px)/1 var(--medieval);letter-spacing:.05em;color:#d12a43;text-shadow:0 4px 0 #3b0711,0 0 30px #e0334b88,0 0 70px #b3274266;margin:4px 0 0}
.win .death-hero{color:#f4cf7e;text-shadow:0 4px 0 #4a2a08,0 0 30px #f2b64a99,0 0 70px #e0a04a66}
.win .death-crest{color:#f4cf7e}
.death-sub{font-size:clamp(16px,2.2vw,24px);letter-spacing:.08em;color:#e8d3b0;text-transform:uppercase;text-shadow:0 2px 5px #000}
.death-sub small{display:block;font-size:clamp(14px,1.6vw,18px);letter-spacing:.04em;color:#c9ae85;text-transform:none;margin-top:3px}
.mistake-card{margin:14px 0 6px;text-align:left;border:1px solid #6e4f2f;border-left:4px solid #b32742;background:#110a0dd0;border-radius:8px;padding:12px 16px;font-size:clamp(15px,1.7vw,18px);line-height:1.5;color:#e8d6b8}
.mistake-card .card-title{color:#e9c27a;font-size:clamp(16px,1.8vw,19px);letter-spacing:.06em;margin-bottom:4px}
.mistake-card p{margin:4px 0}
.mistake-card .example{font-style:italic;color:#bfa47e}
.mistake-card .wrong-text{color:#ff7d8c}.mistake-card .right-text{color:#8be3a9}
.score-block{margin:8px 0 6px;position:relative}
.small-caps{letter-spacing:.3em;font-size:clamp(13px,1.4vw,16px);color:#d9bd8a;text-transform:uppercase}
.newbest{display:inline-block;margin-top:4px;padding:3px 18px;border:1px solid #f0cc8a;border-radius:30px;color:#2b1205;background:linear-gradient(#ffeaa9,#e8b24e);font-size:16px;letter-spacing:.14em;text-transform:uppercase;animation:newBestGlow 1.8s ease-in-out infinite}
@keyframes newBestGlow{0%,100%{box-shadow:0 0 10px #f0b95a66}50%{box-shadow:0 0 26px #f0b95add}}
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.result-grid>div{display:grid;justify-items:center;gap:1px;padding:10px 6px;background:#120a0dd0;border:1px solid #6e4f2f;border-radius:8px;color:#cdb48a;font-size:clamp(13px,1.4vw,16px)}
.result-grid .ico{width:22px;height:22px;color:#e8be78}
.result-grid strong{font:clamp(24px,3.2vw,32px)/1.1 var(--medieval);color:#f6e6c8}
@media(min-width:640px){.result-grid{grid-template-columns:repeat(4,1fr)}}
.earned-result{color:#e9c27a;font-size:clamp(16px,1.9vw,20px);margin:6px 0 2px}
.earned-result small{display:block;color:#c0a67f;font-size:clamp(13px,1.4vw,16px);margin-top:2px}
.result-actions{display:grid;gap:14px;margin-top:18px}
.result-actions .plaque,.result-actions .banner-btn{width:100%}
.result-actions .plaque:not(.red){min-height:56px;font-size:clamp(19px,2.4vw,26px);letter-spacing:.06em;text-transform:uppercase}
.scroll-small-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.6vw,16px)}
.scroll-small-actions button{--pt:11px;min-height:64px;flex-direction:column;gap:3px;padding:7px 6px;font-size:clamp(14px,1.5vw,18px)}
.scroll-small-actions button .ico{width:24px;height:24px}

/* --- battle HUD harmony --- */
.battle-screen .logomark{font-size:clamp(24px,5vw,34px)}
.battle-screen .wallet{font-size:16px;padding:3px 13px 3px 4px}
.battle-screen .goldcoin{width:25px;height:25px;font-size:13px}
.battle-screen .iconbtn{width:37px;height:37px}
.battle-screen .iconbtn .ico{width:20px;height:20px}
.mode-chip.diff{white-space:nowrap}

/* --- responsive --- */
@media(max-width:819px){
 .scene{background-size:auto 66svh;background-position:36% 0}
 .scene-knight{top:clamp(34px,5svh,60px);height:34svh;max-width:62vw}
 .menu-title h1{font-size:clamp(44px,13vw,78px)}
 .menu-stack{gap:9px}.menu-core{gap:9px}
 .quick-buttons{grid-template-columns:repeat(2,1fr)}
 .quick-buttons.minor{grid-template-columns:repeat(3,1fr)}
 .quick-buttons.minor button{flex-direction:column;gap:3px;font-size:14px;padding:7px 4px;min-height:60px;--pt:10px}
 .menu-screen .topbar::after,.menu-screen .topbar::before{display:none}
 .diff-opt{padding:5px 3px;--pt:9px}.diff-opt b{font-size:clamp(14px,4.2vw,18px)}.diff-opt small{font-size:12px}
 .mode-toggle{--pt:14px;padding:6px 10px}
 .panel-head{grid-template-columns:auto 1fr auto}
 .banner-title{min-width:0;padding:9px 30px;font-size:clamp(20px,6vw,28px)}
 .panel-head>.wallet{font-size:15px}
}
@media(max-width:819px) and (max-height:760px){.menu-title h1{font-size:clamp(40px,11vw,58px)}.scene-knight{height:30svh}.tagline{font-size:15px}}
@media(max-width:380px){.logomark{font-size:26px}.wallet{padding:3px 10px 3px 4px;font-size:15px}.mode-toggle .mt-title{font-size:18px}.mode-toggle small{font-size:11.5px}.small-btn{padding:6px 12px}}
@media(min-width:820px) and (max-height:780px){.menu-title h1{font-size:clamp(40px,6.2vw,80px)}.menu-stack{gap:9px}.menu-core{gap:8px}.banner-btn{min-height:54px}.mode-toggle{min-height:54px}.diff-opt{min-height:50px}.quick-buttons button{min-height:48px}}

/* --- game over: two columns on desktop so score and actions are visible without scrolling --- */
.death-left{position:relative;isolation:isolate}
@media(min-width:900px){
 .death-panel{width:min(1060px,100%);padding:30px 42px}
 .death-cols{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
 .death-hero{font-size:clamp(60px,6.4vw,92px)}
 .death-left .gold-rule{margin:8px auto}
 .death-right .result-grid{grid-template-columns:repeat(2,1fr);margin:8px 0}
 .death-right .score-massive{font-size:clamp(60px,6.6vw,92px)}
 .death-right .result-actions{margin-top:10px;gap:11px}
 .result-page .topbar{min-height:64px}
}

@media(min-width:900px){
 .result-page .topbar{min-height:58px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:2px}
 .death-panel{margin-top:4px;padding:24px 42px 22px}
 .death-right .score-massive{font-size:clamp(52px,5.4vw,76px)}
 .death-right .score-block{margin:2px 0}
 .death-right .result-grid{gap:8px;margin:6px 0}
 .death-right .result-grid>div{padding:6px 4px}
 .death-right .result-grid strong{font-size:clamp(22px,2.4vw,28px)}
 .death-right .result-grid .ico{width:20px;height:20px}
 .death-right .earned-result{margin:2px 0}
 .death-right .result-actions{margin-top:6px;gap:9px}
 .death-right .result-actions .banner-btn{min-height:54px}
 .death-right .result-actions .plaque:not(.red){min-height:48px}
 .death-right .scroll-small-actions button{min-height:52px;flex-direction:row;gap:7px;font-size:14.5px;padding:4px 8px}
 .death-right .scroll-small-actions button .ico{width:20px;height:20px}
}
.death-boss{inset:-12px}
@media(min-width:900px){
 .death-left{display:flex;flex-direction:column;justify-content:center;align-self:stretch}
 .death-boss img{height:100%;max-height:none;opacity:.24;margin-top:0}
}

/* --- word card, tabs, shop: same stone/bronze language, MedievalSharp everywhere --- */
.word-card{background:radial-gradient(ellipse at 50% -10%,#ffffff14,transparent 62%),linear-gradient(#1f1215,#0f080b);border:2px solid #9a7440;color:#e9c27a;border-radius:12px;box-shadow:inset 0 0 0 3px #090406,inset 0 0 0 4px #5a4226,0 6px 16px #000a;padding:10px 12px 12px}
.word-card .small-label{color:#d9bd8a;letter-spacing:.2em;font-size:13px;text-shadow:0 1px 3px #000}
.word-card h2{font:clamp(30px,7vw,54px)/1.1 var(--medieval);font-weight:400;color:#f7e6c6;text-shadow:0 3px 0 #3a0612,0 0 20px #e0a04a44;overflow-wrap:anywhere;margin-top:3px}
.text-button{display:inline-flex;align-items:center;gap:8px;color:#e9c27a;font-size:clamp(16px,1.7vw,19px);text-decoration:none;border:0;border-bottom:1px solid #9a744077;padding:3px 2px;background:none}
.text-button .ico{width:16px;height:16px}
.tab{font-size:clamp(16px,1.7vw,19px);border-color:#6e4f2f;background:#150c0f;color:#d9c39d}
.tab.active{background:linear-gradient(#a8283e,#6c1223);color:#fff1d2;border-color:#e0b673;font-weight:400}
.shop-item{border-color:#6e4f2f;background:linear-gradient(#1f1316,#130a0d)}
.shop-item strong{font-size:clamp(18px,2vw,22px);font-weight:400;color:#f3e2c4}
.shop-item small,.shop-item p{font-size:clamp(14px,1.5vw,16px);color:#cdb48a;line-height:1.35}
.history-line b{font-weight:400;font-size:clamp(19px,2.2vw,24px);color:#f3e2c4}
.history-line small{font-size:14.5px}
/* keep the stage-transition Continue button pinned to the bottom centre */
.banner-btn.transition-skip{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(340px,85vw)}
.banner-btn.transition-skip:active{transform:translateX(-50%) translateY(2px)}
.transition-inner .eyebrow{white-space:nowrap;letter-spacing:.2em}
.transition-inner .eyebrow::before,.transition-inner .eyebrow::after{width:clamp(20px,5vw,70px)}