html { background: var(--app-bg); }
body { background: radial-gradient(circle at 85% 0%, rgba(44,183,143,.09), transparent 28%), var(--app-bg); color: var(--app-text); font-family:var(--font-body); transition:background var(--transition-normal),color var(--transition-normal); }
.app { width: min(100%, 540px); padding: 24px 20px 44px; }
h1,h2,h3,.stat-card strong,.yield-card strong { font-family:var(--font-display); }
button { transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast); }
button:hover { transform: translateY(-2px); }
button:active { transform: translateY(0) scale(.98); }
.dashboard { animation: screenIn .42s ease both; }
@keyframes screenIn { from { opacity:0; transform:translateY(12px) } }
.dashboard-header { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--app-primary); color:var(--app-card-solid); font:800 14px/1 "Manrope"; letter-spacing:-.04em; box-shadow:var(--app-shadow-soft); }
[data-theme="dark"] .brand-mark { color:#111827; }
.dashboard-greeting { display:flex; flex-direction:column; flex:1; line-height:1.15; }
.dashboard-greeting span { color:var(--app-muted); font-size:12px; }
.dashboard-greeting strong { font:700 17px "Manrope"; }
.theme-toggle,.back-button { width:44px; height:44px; border:1px solid var(--app-border); border-radius:14px; background:var(--app-card); color:var(--app-text); font-size:19px; box-shadow:var(--app-shadow-soft); }
.hero-card { position:relative; overflow:hidden; min-height:292px; border-radius:30px; padding:29px 26px; color:#fff; background:linear-gradient(145deg,#152a4d 0%,#1b3f5e 57%,#08795e 125%); box-shadow:0 23px 50px rgba(18,41,72,.23); }
.hero-card:before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(255,255,255,.08),transparent 40%); }
.hero-glow { position:absolute; width:210px; height:210px; right:-72px; top:-52px; border-radius:50%; background:rgba(78,225,178,.17); filter:blur(2px); }
.hero-copy { position:relative; z-index:2; max-width:350px; }
.hero-kicker,.card-label { color:#8fe7c8; font-size:10px; font-weight:800; letter-spacing:.16em; }
.hero-card h1 { margin:13px 0 11px; color:#fff; font-size:31px; line-height:1.12; letter-spacing:-.045em; }
.hero-card p { max-width:275px; color:#c4d3df; font-size:13px; line-height:1.55; }
.hero-button { margin-top:8px; border:0; border-radius:15px; padding:13px 17px; background:#fff; color:#13233f; font-weight:800; box-shadow:0 10px 25px #07172855; }
.hero-button span { margin-left:20px; }
.hero-orbit { position:absolute; right:27px; bottom:30px; width:82px; height:82px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.23); border-radius:50%; animation:float 4s ease-in-out infinite; }
.hero-orbit:before,.hero-orbit:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.09); border-radius:50%; inset:-18px; }
.hero-orbit:after { inset:-36px; }
.hero-orbit span { font-size:36px; filter:drop-shadow(0 8px 10px #0005); }
@keyframes float { 50% { transform:translateY(-7px) rotate(3deg) } }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 31px; }
.stat-card { min-width:0; display:flex; align-items:center; gap:9px; padding:14px 12px; border:1px solid var(--app-border); border-radius:19px; background:var(--app-card); box-shadow:var(--app-shadow-soft); }
.stat-card:hover,.world-card:hover,.achievement-card:hover { transform:translateY(-3px); box-shadow:var(--app-shadow); }
.stat-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; background:#fff3d6; font-size:16px; }
.stat-icon svg,.daily-icon svg,.badge svg,.world-icon svg,.svg-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hero-orbit .svg-icon svg{width:38px;height:38px}.world-icon svg{width:29px;height:29px}.badge svg{width:23px;height:23px}
.xp-icon { color:var(--app-accent); background:var(--app-accent-soft); }
.stat-card div { min-width:0; }
.stat-card strong { display:block; font-size:18px; line-height:1; }
.stat-card small { color:var(--app-muted); font-size:9px; white-space:nowrap; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin:0 2px 12px; }
.section-heading span { color:var(--app-muted); font-size:10px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; }
.section-heading h2 { margin:3px 0 0; font-size:21px; letter-spacing:-.035em; }
.section-heading button { border:0; background:none; color:var(--app-accent); font-size:12px; font-weight:800; }
.world-card { display:grid; grid-template-columns:58px 1fr 73px; gap:14px; align-items:center; padding:18px; border:1px solid var(--app-border); border-radius:25px; background:var(--app-card); box-shadow:var(--app-shadow-soft); transition:.22s ease; }
.world-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(145deg,#f7df9b,#edb445); font-size:27px; box-shadow:inset 0 1px #fff9,0 8px 18px #e0a52e30; }
.difficulty-pill { color:var(--app-accent); font-size:8px; letter-spacing:.13em; font-weight:900; }
.world-info h3 { margin:3px 0; font-size:15px; }
.world-info p { margin:0 0 9px; color:var(--app-muted); font-size:10px; line-height:1.4; }
.world-progress { height:5px; overflow:hidden; border-radius:6px; background:var(--app-primary-soft); }
.world-progress span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--app-accent),#5ed8ad); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.world-info small { color:var(--app-muted); font-size:8px; }.world-info small b{color:var(--app-text)}
.mastery-ring { width:70px; height:70px; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:50%; background:conic-gradient(var(--app-accent) var(--mastery,0%),var(--app-primary-soft) 0); position:relative; }
.mastery-ring:after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--app-card-solid); }
.mastery-ring strong,.mastery-ring span { position:relative; z-index:1; }.mastery-ring strong{font-size:14px}.mastery-ring span{color:var(--app-muted);font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.dashboard-columns { display:grid; grid-template-columns:1.45fr 1fr; gap:12px; margin:18px 0 28px; }
.daily-card,.goal-card { padding:18px; border:1px solid var(--app-border); border-radius:23px; background:var(--app-card); box-shadow:var(--app-shadow-soft); }
.daily-card .card-label,.goal-card .card-label { color:var(--app-muted); }
.daily-row { display:flex; gap:11px; align-items:center; margin:13px 0; }.daily-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;background:#fff1cf;font-size:18px}.daily-row h3{font-size:14px;margin:0}.daily-row p{font-size:9px;color:var(--app-muted);margin:2px 0}.daily-card button{width:100%;border:0;border-radius:12px;padding:10px;background:var(--app-accent-soft);color:var(--app-accent);font-size:10px;font-weight:800}.daily-card button span{opacity:.7;margin-left:7px}
.goal-ring { margin:14px auto 9px; text-align:center; }.goal-ring strong{display:block;font:800 25px "Manrope"}.goal-ring span{color:var(--app-muted);font-size:9px}.goal-card p{text-align:center;color:var(--app-muted);font-size:9px;margin:0}
.section-heading.compact { margin-bottom:10px; }
.achievement-card { display:flex; align-items:center; gap:13px; padding:15px; border:1px solid var(--app-border); border-radius:20px; background:var(--app-card); box-shadow:var(--app-shadow-soft); transition:.22s ease; }.badge{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#a66a04;background:linear-gradient(145deg,#ffe69a,#f4b83e);box-shadow:0 6px 16px #e6a52d44}.achievement-card div:nth-child(2){flex:1}.achievement-card h3{margin:0;font-size:13px}.achievement-card p{margin:2px 0 0;color:var(--app-muted);font-size:9px}.achievement-xp{color:var(--app-gold);font-size:10px;font-weight:900}
.play-screen { animation:screenIn .36s ease both; }.topbar{gap:11px}.play-title{flex:1}.play-title h1{font-size:22px}.back-button{flex:none}.yield-card{background:linear-gradient(135deg,#132b4e,#08785f);box-shadow:0 16px 35px #102e4930}.grid-card,.clue-card{background:var(--app-card);border-color:var(--app-border);box-shadow:var(--app-shadow-soft)}.grid-card{border-radius:26px}.wheel{background:linear-gradient(145deg,var(--app-primary-soft),var(--app-card-solid));border-color:var(--app-border)}.letter{background:var(--app-card-solid);color:var(--app-text);border:1px solid var(--app-border);box-shadow:0 7px 16px rgba(31,49,77,.13)}.letter:hover{box-shadow:0 10px 22px rgba(31,49,77,.2)}.letter.selected{background:var(--app-accent)}.shuffle{background:var(--app-primary-soft);color:var(--app-primary)}.hint-button{background:var(--app-accent-soft);border-color:transparent;color:var(--app-accent)}.panel{background:var(--app-bg);color:var(--app-text)}.level-choice,.learn-card,textarea,.rating button{background:var(--app-card-solid);color:var(--app-text);border-color:var(--app-border)}.modal{backdrop-filter:blur(10px)}.learn-card{box-shadow:0 30px 80px #0006}.primary-button,.check-button{background:var(--app-primary)}
.confetti { position:fixed; z-index:50; width:8px; height:14px; border-radius:3px; pointer-events:none; animation:confettiFall 1.5s ease-out forwards; } @keyframes confettiFall { to { transform:translate(var(--x),100vh) rotate(600deg); opacity:0 } }

@media(max-width:390px){
  .app{padding:18px 14px 34px}.hero-card{min-height:270px;padding:25px 21px}.hero-card h1{font-size:27px}.hero-orbit{right:20px;bottom:28px;width:66px;height:66px}.stat-card{padding:12px 8px;gap:6px}.stat-icon{width:27px;height:27px}.stat-card strong{font-size:15px}.world-card{grid-template-columns:50px 1fr 62px;padding:14px;gap:10px}.world-icon{width:50px;height:50px}.mastery-ring{width:61px;height:61px}.dashboard-columns{grid-template-columns:1.35fr 1fr}.daily-card,.goal-card{padding:14px 12px}.grid-card{height:245px}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}