/* Enchanted collection surfaces: readable text over contained game scenery. */
.badge-card{position:relative;isolation:isolate;overflow:hidden;padding:clamp(22px,2.5vw,40px);background:radial-gradient(ellipse at 85% 0,#63408877,transparent 52%),linear-gradient(135deg,#142343,#282546 64%,#182441);border:1px solid #be9f665e;box-shadow:0 12px 30px #111b4030,inset 0 1px #e5c47d59;color:#fff3d2}
.badge-card:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#f7dcab88 1px,transparent 1.5px);background-size:83px 79px;opacity:.3}
.badge-card .eyebrow{color:#d9c38e;letter-spacing:.22em;font-size:12px}
.badge-card h3{font-family:var(--quest-display);font-weight:400;font-size:clamp(29px,2.4vw,42px);letter-spacing:.02em;color:#fff0c5;text-shadow:0 3px 0 #080e31}
.badge-collection-count{font-size:14px;color:#d0d2ec;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0 24px}
.badge-collection-count b{font-family:var(--quest-display);font-weight:400;font-size:24px;color:#ffe19b}
.badge-collection-count>span{margin-left:auto;color:#bcbddd;font-size:13px}
.badge-card #badges{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;align-items:stretch}
.badge-card #badges .badge{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;aspect-ratio:auto;min-height:178px;padding:16px 9px 13px;border:1px solid #8585b24d;border-radius:18px;background:linear-gradient(150deg,#353651ba,#20243f);filter:none;opacity:1;box-shadow:0 4px 0 #0f183aa8;transition:transform .2s,border-color .2s}
.badge-card #badges .badge.unlocked{background:radial-gradient(ellipse at 50% 29%,#ead8a83b,transparent 65%),linear-gradient(150deg,#454265,#242842);border-color:#cdb879a6;box-shadow:0 4px 0 #0f183a,0 0 16px #edc8770d}
.badge-card #badges .badge.unlocked:hover{transform:translateY(-4px);border-color:#ffe7a3}
.badge-card #badges .achievement-emblem{display:block;width:96px;height:108px;filter:drop-shadow(0 6px 8px #090e30aa)}
.badge-card #badges .achievement-emblem img{width:100%;height:100%;object-fit:contain}
.badge-card #badges .badge:not(.unlocked) .achievement-emblem{filter:grayscale(1);opacity:.48}
.badge-card #badges .badge small{position:static;font-family:var(--quest-display);font-weight:400;font-size:16px;line-height:1.25;letter-spacing:.02em;color:#e0e1f2;min-height:2.5em;display:flex;align-items:center;text-align:center}
.badge-card #badges .badge.unlocked small{color:#fff0c5}
.badge-state{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9fa5c6}
.unlocked .badge-state{color:#9ae5d7}
.leaderboard-teaser{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;padding:27px 24px 22px;background:radial-gradient(ellipse at 50% 40%,#68436988,transparent 65%),linear-gradient(150deg,#172a53,#342650 65%,#1c2c4e);border:1px solid #d7b27b9e;box-shadow:0 6px 0 #152143,0 16px 35px #15173340}
.leaderboard-teaser .leaderboard-teaser-glow{background:radial-gradient(circle,#f9d77c24,transparent 70%);width:100%;height:100%;inset:0;z-index:-1}
.leaderboard-teaser .eyebrow{color:#f4d59d;font-size:12px;letter-spacing:.2em}
.leaderboard-teaser h3{font-family:var(--quest-display);font-weight:400;font-size:clamp(29px,2.5vw,38px);color:#fff0c8;line-height:1.15;text-shadow:0 3px 0 #161637;letter-spacing:.02em;margin:8px 0}
.leaderboard-teaser .leaderboard-teaser-copy>p:last-child{color:#d8d7ec;font-size:14px;line-height:1.5}
.champion-showpiece{display:grid;justify-items:center;margin:-5px 0 18px;position:relative}
.champion-showpiece img{width:min(100%,300px);height:auto;filter:drop-shadow(0 8px 14px #080b2555);transition:transform .25s}
.leaderboard-teaser:hover .champion-showpiece img{transform:translateY(-4px)}
.champion-showpiece>span{font-size:10px;letter-spacing:.13em;color:#e8cfa4;text-align:center}
.leaderboard-teaser .leaderboard-open-btn{margin-top:auto;font-family:var(--quest-display);font-size:23px;letter-spacing:.02em;background:linear-gradient(115deg,#ffe799,#f2ba54);color:#473258;border:1px solid #fff0bf;box-shadow:0 5px 0 #9b6938;min-height:56px}
/* The vault has three large, illustrated pedestals and clear key costs. */
#grammarContent .vault-screen{position:relative;overflow:hidden;padding:clamp(20px,2.8vw,42px);background:radial-gradient(ellipse at 50% 0,#554c807d,transparent 70%),linear-gradient(140deg,#13213e,#282342 64%,#162b48);border:1px solid #c6a77280;box-shadow:inset 0 1px #ecd5a650,0 12px 30px #101a3433;color:#f5edda}
#grammarContent .vault-screen .grammar-feature-hero{background:linear-gradient(110deg,#e7bd6321,#c1acf519);border:1px solid #e1c2833d;border-radius:22px;padding:20px 24px;gap:22px}
.vault-screen .grammar-feature-orb{width:112px;height:100px;background:transparent;box-shadow:none;flex-shrink:0}
.vault-screen .grammar-feature-orb img{width:100%;height:100%;object-fit:contain}
#grammarContent .vault-screen .eyebrow{color:#f2d599;font-size:12px;letter-spacing:.18em}
#grammarContent .vault-screen h3{font-family:var(--quest-display);font-weight:400;font-size:clamp(29px,2.5vw,42px);letter-spacing:.02em;color:#fff0c5;text-shadow:0 3px #15213b}
#grammarContent .vault-screen .grammar-feature-hero p:not(.eyebrow){color:#d1d3e9;font-size:16px;line-height:1.5}
#grammarContent .vault-screen .grammar-feature-count{background:#13213cd9;border:1px solid #d9bd7b77;min-width:120px;color:#ffe0a0;box-shadow:inset 0 0 22px #fff0bb0a}
#grammarContent .vault-screen .grammar-feature-count b{font-family:var(--quest-display);font-weight:400;color:#ffe0a0;font-size:36px}
#grammarContent .vault-screen .grammar-feature-count small{color:#d8caab}
#grammarContent .vault-screen .grammar-chest-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:26px 0}
#grammarContent .vault-screen .grammar-chest{--chest:#76d6c6;position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 16px 22px;min-height:380px;overflow:hidden;border:1px solid color-mix(in srgb,var(--chest),transparent 45%);border-radius:22px;background:radial-gradient(ellipse at 50% 39%,color-mix(in srgb,var(--chest),transparent 85%),transparent 65%),linear-gradient(160deg,#ffffff0c,#0a152a77);box-shadow:0 5px 0 #080e27;color:#f4ebd8;transition:transform .2s,box-shadow .2s;filter:none;opacity:1}
#grammarContent .vault-screen .grammar-chest[data-grammar-chest=mystic]{--chest:#c3a2ff}
#grammarContent .vault-screen .grammar-chest[data-grammar-chest=royal]{--chest:#f7ce80}
#grammarContent .vault-screen .grammar-chest.available:hover{transform:translateY(-5px);box-shadow:0 9px 0 #080e27,0 0 24px color-mix(in srgb,var(--chest),transparent 82%)}
#grammarContent .vault-screen .grammar-chest:disabled{cursor:not-allowed}
.vault-screen .chest-tier{color:var(--chest);font-size:11px;letter-spacing:.18em;font-weight:800}
#grammarContent .vault-screen .grammar-chest>i{display:block;width:min(100%,270px);height:auto;margin:2px 0 0;line-height:0;font-size:0;background:transparent}
.vault-screen .grammar-chest>i img{width:100%;height:auto;filter:drop-shadow(0 8px 14px #080a244d)}
#grammarContent .vault-screen .grammar-chest>b{font-family:var(--quest-display);font-weight:400;font-size:clamp(23px,2vw,30px);line-height:1.2;color:#fff0d3;letter-spacing:.02em}
#grammarContent .vault-screen .grammar-chest>small{font-size:17px;color:var(--chest);font-weight:800;margin:10px 0 0}
#grammarContent .vault-screen .grammar-chest>p{font-size:13px;color:#c6cce3;margin:10px 0 18px}
.chest-open-label{display:block;width:100%;padding:10px 12px;margin-top:auto;border:1px solid var(--chest);border-radius:12px;color:var(--chest);font-weight:800;font-size:15px;background:#0e1c3890}
.grammar-chest:disabled .chest-open-label{border-color:#71778e;color:#afb7ce;background:#111c30}
#grammarContent .vault-screen .grammar-chest-reveal{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;min-height:140px;background:linear-gradient(100deg,#8470d51f,#e9c77812);border:1px dashed #c7b8e76e;border-radius:20px;color:#d2d4e8;padding:22px}
#grammarContent .vault-screen .grammar-chest-reveal>b{font-family:var(--quest-display);font-weight:400;font-size:27px;letter-spacing:.015em;color:#fff0bd}
#grammarContent .vault-screen .grammar-chest-reveal>small{font-size:14px;color:#cbd0e7}
#grammarContent .vault-screen .grammar-chest-reveal.opened{border-style:solid;border-color:#ffe0a6;animation:treasure-reveal .7s ease-out}
.grammar-chest-reveal.opened>span img{width:130px;height:105px;object-fit:contain}
#grammarContent .vault-screen .grammar-chest-reveal.opened>p{font-size:21px;color:#b9f3d9;font-weight:800;margin:0}
@keyframes treasure-reveal{from{box-shadow:0 0 0 3px #ffe1a48a;transform:scale(.98)}to{box-shadow:0 0 30px #ffe1a400;transform:scale(1)}}
.example-audio-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;max-width:420px}
.example-audio-controls button{min-height:44px;margin:0;white-space:nowrap}
#grammarPauseExamples:disabled{opacity:.48;cursor:default}
#grammarPauseExamples[aria-pressed=true]{background:#f9e7af;color:#664c22}
#grammarExampleStatus{flex-basis:100%;text-align:right;color:#6b6188;font-size:13px}
.grammar-example-list>div.example-speaking{background:#ede7ff;box-shadow:inset 4px 0 #8763d4;outline:1px solid #cfc0ef}
.grammar-example-list>div.example-speaking>span{background:#7353be;color:#fff}
@media(max-width:1250px){.badge-card #badges{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:900px){.badge-card #badges{grid-template-columns:repeat(3,minmax(0,1fr))}.badge-collection-count>span{margin-left:0;flex-basis:100%}#grammarContent .vault-screen .grammar-feature-hero{flex-wrap:wrap;padding:18px}#grammarContent .vault-screen .grammar-chest-grid{gap:12px}#grammarContent .vault-screen .grammar-chest{padding:16px 10px;min-height:310px}}
@media(max-width:650px){.badge-card #badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.badge-card #badges .badge{min-height:178px}.badge-card{padding:22px 16px}.leaderboard-teaser{padding:24px 20px}#grammarContent .vault-screen .grammar-chest-grid{grid-template-columns:1fr}#grammarContent .vault-screen .grammar-chest{min-height:0;padding:20px}#grammarContent .vault-screen .grammar-chest>i{width:220px}.vault-screen .grammar-feature-orb{width:85px;height:80px}#grammarContent .vault-screen .grammar-feature-count{margin-left:auto}.grammar-example-card .grammar-card-title{align-items:flex-start;flex-direction:column;gap:14px}.example-audio-controls{justify-content:flex-start;max-width:none}.example-audio-controls #grammarExampleStatus{text-align:left}}
@media(prefers-reduced-motion:reduce){.badge-card #badges .badge,.champion-showpiece img,#grammarContent .vault-screen .grammar-chest{transition:none!important}.grammar-chest-reveal.opened{animation:none!important}}