:root {
    --ink: #1d1b2e;
    --muted: #77758b;
    --line: #e9e7f1;
    --surface: #fff;
    --background: #f8f7fc;
    --purple: #7454ed;
    --purple-dark: #5434ce;
    --orange: #ff8b5e;
    --mint: #51c9ad;
    --blue: #5f9cf6;
    --shadow: 0 14px 40px rgba(53, 42, 103, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: var(--background); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(116, 84, 237, .35); outline-offset: 3px; }

.app-shell { min-height: 100vh; }
.site-header { height: 76px; display: flex; align-items: center; gap: 52px; padding: 0 max(28px, calc((100vw - 1180px) / 2)); background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.7px; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; font-weight: 900; font-size: 18px; background: linear-gradient(135deg, #8c72f4, #6142df); box-shadow: 0 5px 12px rgba(101,72,224,.25); }.brand-mark span,.brand-dot { color: #ff9671; }
.main-nav { display: flex; align-items: center; gap: 30px; flex: 1; height: 100%; }.main-nav a { color: var(--muted); font-size: 14px; font-weight: 700; transition: color .2s; display: flex; align-items: center; gap: 8px; height: 100%; }.main-nav a.active,.main-nav a:hover { color: var(--purple); }.nav-new { font-size: 9px; padding: 3px 6px; border-radius: 5px; background: #e8e2ff; color: var(--purple); text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 18px; }.streak-pill { font-size: 13px; font-weight: 700; color: #ee8758; background: #fff3ec; border-radius: 20px; padding: 9px 13px; }.streak-pill span { color: #f08a5e; }.profile-button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 800; background: linear-gradient(135deg,#f1b9a4,#e48473); }
.app-main { padding: 44px 28px 70px; }.page-container { max-width: 1180px; margin: auto; }
.dashboard-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; }.eyebrow { color: var(--purple); font-size: 11px; letter-spacing: 1.4px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px; }.spark { color: #ff9b68; }h1,h2,h3,p { margin-top: 0; }h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -1.8px; line-height: 1.1; margin-bottom: 12px; }.gradient-text { background: linear-gradient(100deg, #7554ec, #b04ed1); -webkit-background-clip: text; color: transparent; }.subtitle { color: var(--muted); font-size: 15px; margin-bottom: 0; }.level-card { width: 230px; background: white; padding: 15px 17px; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 18px rgba(35,30,70,.03); }.level-top { display:flex; justify-content:space-between; font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .6px; }.level-top strong { color: var(--purple); font-size: 12px; }.level-bar,.progress-track { height: 7px; border-radius: 8px; background: #eeeef5; overflow: hidden; margin: 11px 0 7px; }.level-bar span,.progress-track span { display:block; height:100%; border-radius: inherit; background: linear-gradient(90deg,#7554ed,#b883f7); transition: width .5s ease; }.level-card small { font-size: 10px; color: #a1a0ae; }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 30px; }.stat-card { border-radius: 16px; padding: 16px 18px; display:flex; align-items:center; gap: 12px; }.stat-purple { background: #f0edff; }.stat-orange { background: #fff0e9; }.stat-blue { background: #eaf3ff; }.stat-icon { width: 37px; height: 37px; display:grid; place-items:center; border-radius: 12px; font-size: 19px; }.stat-purple .stat-icon { color:#7152eb; background:#e1dbff; }.stat-orange .stat-icon { color:#ed895b; background:#ffdfce; }.stat-blue .stat-icon { color:#5595ec; background:#d6e8ff; }.stat-card div { flex: 1; display:flex; flex-direction:column; }.stat-card strong { font-size: 22px; line-height: 1.1; }.stat-card small { font-size: 11px; color: var(--muted); margin-top: 3px; }.stat-card b { font-size: 10px; font-weight: 700; color: var(--muted); }
.daily-banner { min-height: 165px; display:flex; align-items:center; gap: 28px; padding: 26px 32px; border-radius: 20px; color: white; overflow:hidden; position:relative; background: linear-gradient(105deg,#6040d8,#8965ed); box-shadow: 0 15px 30px rgba(99,69,211,.2); margin-bottom: 48px; }.daily-banner:after { content:""; position:absolute; width:300px;height:300px;border-radius:50%;right:10%;top:-170px;border: 44px solid rgba(255,255,255,.08); }.daily-art { width: 120px; height: 112px; position:relative; flex-shrink:0; }.daily-art span { position:absolute; display:grid; place-items:center; width:55px;height:55px;border-radius:16px; font-weight:900; font-size:24px; box-shadow:0 7px 18px rgba(32,20,106,.16); }.daily-art span:first-child { background:#ffc36f; left:0; top:12px; transform:rotate(-13deg); }.daily-art span:nth-child(2) { background:#80e0c6; right:0; top:0; transform:rotate(12deg); }.daily-art span:last-child { background:#ff9d85; left:32px; bottom:0; transform:rotate(8deg); }.daily-copy { flex:1; position:relative; z-index:1; }.badge { font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 6px 9px; border-radius: 5px; }.badge-light { color:#e6ddff;background:rgba(255,255,255,.14); }.daily-copy h2 { font-size: 25px; letter-spacing:-.8px; margin: 10px 0 4px; }.daily-copy p { font-size: 13px; color:#ddd5ff; margin:0; }.button { border:0; cursor:pointer; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:800; font-size:13px; padding:13px 19px; transition: transform .18s, box-shadow .18s, background .18s; }.button:hover { transform:translateY(-2px); }.button:active { transform:translateY(1px); }.button-light { color:var(--purple); background:white; position:relative;z-index:1; }.button-primary { color:white;background:linear-gradient(135deg,#7959ed,#6040d8); box-shadow: 0 8px 17px rgba(99,67,215,.22); }.button-primary:disabled { opacity:.45;box-shadow:none;cursor:not-allowed;transform:none; }.button-ghost { color:var(--muted); background:transparent; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom: 20px; }.section-heading h2 { font-size: 25px; letter-spacing:-1px; margin:0; }.catalog-count { color:var(--muted);font-size:12px; }.catalog-controls { display:flex; gap: 18px; align-items:center; margin-bottom: 22px; }.search-box { display:flex;align-items:center;gap:9px;background:white;border:1px solid var(--line);border-radius:10px;padding:0 13px;color:#aaa8b8;width:218px; }.search-box input { border:0;outline:0;width:100%;padding:11px 0;font-size:12px;background:transparent; }.filter-list { display:flex; gap:7px; flex-wrap:wrap; }.filter-chip { border:1px solid var(--line); background:white; border-radius:8px; padding:9px 12px; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; transition:.2s; }.filter-chip:hover,.filter-chip.active { background:#eeeaff;border-color:#d6ccff;color:var(--purple); }
.game-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:15px; }.game-card { min-height:226px;display:flex;flex-direction:column;background:white;border:1px solid var(--line);border-radius:16px;padding:17px;transition:transform .2s,box-shadow .2s; }.game-card:hover { transform:translateY(-4px);box-shadow:var(--shadow); }.game-card.locked { background:rgba(255,255,255,.65); }.game-card-top {display:flex;justify-content:space-between;align-items:start;margin-bottom:15px;}.game-icon { width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:900; }.icon-violet {color:#7253e7;background:#e8e2ff;}.icon-mint {color:#229f83;background:#dff8f0;}.icon-orange {color:#e58250;background:#ffebdf;}.icon-blue {color:#4e8ae1;background:#e4efff;}.icon-pink {color:#d45d9d;background:#fde7f3;}.icon-cyan {color:#35aab7;background:#ddf8fa;}.icon-yellow {color:#b4861e;background:#fff5cf;}.difficulty { font-size:10px;color:#aaa8b5;background:#f6f5f9;border-radius:6px;padding:5px 7px; }.game-card h3 {font-size:15px;margin-bottom:7px;letter-spacing:-.3px;}.game-card p {color:var(--muted);font-size:11px;line-height:1.45;margin-bottom:14px;}.game-meta {display:flex;justify-content:space-between;color:#a09dab;font-size:10px;margin-top:auto;padding-top:10px;border-top:1px solid #f1eff5;}.card-action,.coming-soon {margin-top:14px;font-size:11px;font-weight:800;color:var(--purple);display:flex;justify-content:space-between;}.coming-soon {color:#aaa8b5;}.coming-soon span {color:#d0cdd9;}
.game-header {display:flex;align-items:center;gap:15px;margin-bottom:28px;}.back-button { border:0;background:white;color:var(--muted);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:20px; }.game-title {display:flex;align-items:center;gap:12px;flex:1;}.game-title h1 {font-size:22px;margin:0;letter-spacing:-.8px;}.game-title .eyebrow {font-size:9px;margin-bottom:3px;}.lives {color:#ed876d;letter-spacing:4px;font-size:19px;}.game-progress {max-width:760px;margin:0 auto 23px;}.game-progress>div:first-child {display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:700;}.progress-track {margin-top:8px;height:8px;}.game-panel {max-width:760px;margin:auto;background:white;border:1px solid var(--line);border-radius:22px;padding:48px 65px;text-align:center;box-shadow:var(--shadow);}.prompt-label {display:flex;justify-content:center;align-items:center;gap:8px;color:var(--purple);font-size:10px;letter-spacing:1.2px;font-weight:800;}.prompt-pulse {width:7px;height:7px;border-radius:50%;background:#7b5bf0;box-shadow:0 0 0 5px #eeeaff;}.prompt-word {font-size:clamp(27px,5vw,42px);font-weight:850;letter-spacing:-1.5px;margin:26px 0 8px;}.prompt-hint {font-size:12px;color:var(--muted);}.answer-area {display:flex;gap:8px;margin:28px auto 16px;max-width:440px;}.answer-area input {flex:1;border:2px solid #e6e2f4;border-radius:11px;padding:14px 16px;outline:0;font-size:15px;text-align:center;transition:border .2s,box-shadow .2s;}.answer-area input:focus {border-color:#9078ed;box-shadow:0 0 0 4px #f0edff;}.speak-button {border:0;background:#f0edff;color:var(--purple);border-radius:11px;width:48px;cursor:pointer;font-size:19px;}.submit-button,.next-button {min-width:160px;}.next-button {margin-top:16px;}.feedback {border-radius:10px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.4;}.feedback-good {color:#167c65;background:#eafaf5;border:1px solid #c9f0e4;}.feedback-bad {color:#ab5c48;background:#fff1ec;border:1px solid #ffddd2;}.feedback strong {font-size:13px;}.keyboard-hint {font-size:10px;color:#aaa8b5;margin:17px 0 0;}kbd {background:#f3f1f7;border:1px solid #e3e0e9;border-radius:4px;padding:2px 5px;font-size:10px;}.tip-card {max-width:760px;margin:18px auto 0;padding:15px 20px;display:flex;gap:13px;align-items:center;background:#fff9ed;border:1px solid #ffedc9;border-radius:12px;color:#aa7942;font-size:12px;}.tip-card>span {font-size:20px;color:#f5ad4f;}.tip-card p {margin:3px 0 0;color:#ae8b62;font-size:11px;}.loading-state,.result-screen {text-align:center;max-width:600px;margin:80px auto;}.loader {display:inline-block;width:28px;height:28px;border:3px solid #e8e2ff;border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite;}@keyframes spin{to{transform:rotate(360deg)}}.result-burst {margin:auto auto 20px;display:grid;place-items:center;width:74px;height:74px;border-radius:24px;background:#e8e2ff;color:var(--purple);font-size:37px;animation:float 2s ease-in-out infinite;}@keyframes float{50%{transform:translateY(-7px) rotate(5deg)}}.result-screen h1 {margin-bottom:9px;}.result-score {margin:28px auto 20px;display:flex;flex-direction:column;align-items:center;}.result-score strong {font-size:55px;line-height:1;color:var(--purple);}.result-score span {color:var(--muted);font-size:12px;}.result-stats {display:flex;justify-content:center;gap:0;margin-bottom:30px;}.result-stats div {min-width:120px;padding:0 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;}.result-stats div:last-child {border:0;}.result-stats strong {font-size:19px;}.result-stats span {font-size:10px;color:var(--muted);}.result-actions {display:flex;justify-content:center;gap:8px;}
#blazor-error-ui {display:none;}.blazor-error-boundary {display:none;}
.profile-hero { text-align:center; margin: 20px auto 34px; }
.profile-avatar { width:74px;height:74px;display:grid;place-items:center;margin:0 auto 16px;border-radius:25px;background:linear-gradient(135deg,#f1b9a4,#e48473);color:white;font-size:30px;font-weight:800;box-shadow:0 10px 25px rgba(228,132,115,.2); }
.profile-hero h1 { margin-bottom:6px; }
.recent-panel { background:white;border:1px solid var(--line);border-radius:18px;padding:24px;max-width:760px;margin:0 auto; }
.recent-panel .section-heading { margin-bottom:18px; }
.recent-row { display:flex;align-items:center;gap:12px;border-top:1px solid #f1eff5;padding:13px 0; }
.recent-row div { flex:1;display:flex;flex-direction:column;gap:3px; }
.recent-row strong { font-size:13px; }
.recent-row small { color:var(--muted);font-size:10px; }
.recent-row>b { color:var(--purple);font-size:12px; }
@media (max-width: 640px) { .profile-hero { margin: 8px auto 24px; }.profile-avatar { width:64px;height:64px;border-radius:20px;font-size:25px; }.recent-panel { padding:16px; border-radius:14px; }.recent-row { gap:10px; padding:11px 0; }.recent-row strong { font-size:12px; } }
@media (max-width: 900px) { .site-header {gap:25px;padding:0 22px;}.game-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{gap:10px}.stat-card b{display:none}.catalog-controls{align-items:flex-start;flex-direction:column}.search-box{width:100%} }
@media (max-width: 640px) { .site-header{height:auto;min-height:68px;flex-wrap:wrap;padding:12px 18px;gap:12px}.main-nav{order:3;flex-basis:100%;height:35px;gap:18px;overflow:auto}.main-nav a{height:35px;font-size:12px;white-space:nowrap}.header-actions{margin-left:auto}.streak-pill{font-size:11px;padding:7px 9px}.app-main{padding:28px 16px 50px}.dashboard-head{display:block}.level-card{width:100%;margin-top:24px}.stats-grid{grid-template-columns:1fr;margin-bottom:22px}.stat-card{padding:12px 15px}.daily-banner{padding:20px;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom: 35px}.daily-art{width:75px;height:82px;transform:scale(.72);transform-origin:top left}.daily-copy{min-width:calc(100% - 95px)}.daily-copy h2{font-size:20px}.daily-copy p{font-size:11px}.daily-banner .button{margin-left:auto}.section-heading h2{font-size:22px}.filter-list{flex-wrap:nowrap;overflow:auto;width:calc(100vw - 32px);padding-bottom:4px}.filter-chip{white-space:nowrap}.game-grid{grid-template-columns:repeat(2,1fr);gap:10px}.game-card{min-height:220px;padding:13px}.game-card h3{font-size:14px}.game-card p{font-size:10px}.game-meta{display:block;line-height:1.8}.game-meta span{display:block}.game-header{gap:9px}.game-title h1{font-size:18px}.lives{font-size:15px;letter-spacing:1px}.game-panel{padding:34px 18px}.prompt-word{margin-top:21px}.answer-area input{font-size:14px}.tip-card{align-items:flex-start}.result-stats div{min-width:0;padding:0 12px}.result-actions{flex-direction:column}.result-actions .button{width:100%} }