:root{font-family:Nunito,"Segoe UI",Arial,sans-serif;color:#10214f;background:#0b2165;font-synthesis:none;--ink:#10214f;--muted:#556589;--surface:#fff;--wash:#f5f7ff;--border:#dce3f2;--blue:#285bd6;--gold:#ffcb18}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ffc821;outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.ico{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.header{height:99px;position:relative;z-index:10;background:radial-gradient(ellipse at 75% -30%,#367cf1 0,transparent 45%),linear-gradient(115deg,#0b1955,#0e47b3 70%,#5ba7f2);color:#fff;display:flex;align-items:center;gap:23px;padding:0 29px}.header:after{content:"";position:absolute;right:0;bottom:0;width:24%;height:43%;pointer-events:none;background:linear-gradient(160deg,transparent 55%,#142f7f50 56%),linear-gradient(20deg,transparent 60%,#75b6e650 61%);clip-path:polygon(0 100%,20% 30%,40% 100%,55% 10%,82% 100%,100% 35%,100% 100%);opacity:.6}.brand{display:inline-flex;gap:13px;align-items:center;flex:none;z-index:1}.logo-icon{font-size:38px;filter:drop-shadow(0 3px 0 #0002)}.brand-name{font-weight:1000;letter-spacing:-1.8px;font-size:34px;line-height:1;position:relative;color:white}.brand-name span{color:#ffdb36}.brand-name i{position:absolute;height:5px;left:48%;right:2%;bottom:-7px;background:#ffca23;border-radius:100%;transform:rotate(-3deg)}.header-tag{border-left:1px solid #ffffff65;font-size:15px;font-weight:850;line-height:1.25;padding-left:22px;white-space:nowrap;z-index:1}.search{height:53px;border-radius:30px;background:#fff;color:#0b205b;display:flex;align-items:center;gap:12px;padding:0 18px;flex:1;max-width:455px;margin-left:auto;box-shadow:inset 0 0 0 1px #dce3fb;z-index:1}.search .ico{width:25px;height:25px}.search input{background:transparent;border:none;outline:none!important;font-size:16px;color:#13235d;width:100%;min-width:0}.search input::placeholder{color:#7180a3}.header-actions{display:flex;align-items:center;gap:14px;margin-left:auto;z-index:1}.header-icon{background:#08174d;color:white;border:1px solid #3755ad;border-radius:50%;width:47px;height:47px;display:grid;place-items:center;box-shadow:0 4px 8px #0002}.header-icon:hover{background:#2445a0}.header-icon .ico{width:25px;height:25px}.avatar-button span{font-size:27px}
.sidebar{position:fixed;top:99px;bottom:0;left:0;width:145px;background:linear-gradient(170deg,#071c60,#192d7e 60%,#253e94);color:white;z-index:3;overflow:hidden}.side-nav{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding:20px 11px}.nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;border:0;background:transparent;border-radius:20px;padding:15px 8px;font-weight:900;font-size:15px;min-height:87px;transition:background .15s}.nav-item .ico{width:31px;height:31px;stroke-width:2.3}.nav-item:hover,.nav-item.is-active{background:#2858d7}.nav-item.is-active .ico{color:#ffe02b;fill:#ffe02b2a}.sidebar-hills{position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none}.hill{position:absolute;width:170%;height:95px;bottom:-30px;left:-35%;border-radius:50% 70% 0 0;transform:rotate(-12deg)}.hill-one{background:#4b75c8;bottom:10px}.hill-two{background:#09215c;bottom:-44px;left:0;transform:rotate(17deg)}.star{position:absolute;color:#b3c6ff;font-size:30px}.star-one{top:10px;right:23px}.star-two{top:65px;left:17px}
.workspace{background:var(--surface);margin-left:145px;min-height:calc(100vh - 99px);border-radius:37px 0 0 0;position:relative;z-index:4;box-shadow:-8px -5px 18px #081f6340}.content{padding:30px clamp(25px,3vw,57px) 50px;max-width:1790px;margin:auto}.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:37px}.hero h1{font-size:clamp(29px,3.1vw,52px);letter-spacing:-1.7px;margin:0 0 10px;font-weight:1000;line-height:1.1;color:var(--ink)}.spark{display:inline-block;color:#ffb914;font-size:.8em;transform:rotate(-14deg);margin-left:12px}.hero p{font-size:clamp(15px,1.45vw,21px);font-weight:650;margin:0;color:var(--muted)}.welcome-badge{border-radius:99px;background:#eaf4ff;color:#1a58bb;font-weight:900;padding:10px 16px;white-space:nowrap}.content-head{display:flex;gap:12px;align-items:baseline;margin-bottom:17px}.content-head h2{font-size:23px;margin:0;font-weight:950;letter-spacing:-.6px}.count{font-size:13px;color:var(--muted);font-weight:700}.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:23px}.filter{display:inline-flex;gap:10px;align-items:center;justify-content:center;background:var(--wash);color:var(--ink);border:1px solid var(--border);border-radius:99px;padding:11px 22px;font-size:15px;font-weight:900;box-shadow:0 2px 4px #101d6010}.filter .ico{width:20px;height:20px}.filter:hover{border-color:#7996e6}.filter.is-selected{background:#2859d5;color:#fff;border-color:#2859d5}.flag{font-size:21px;line-height:1}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}.game-card{cursor:pointer;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:0 7px 13px #0d27631a,0 2px 4px #07174a0d;min-width:0;transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px #0d27662c}.game-link{display:block;position:relative;overflow:hidden;aspect-ratio:1.6}.game-link img{width:100%;height:100%;object-fit:cover;display:block}.game-link:focus-visible{outline-offset:-5px}.card-content{padding:18px 24px 20px}.card-line{display:flex;align-items:center;gap:8px;justify-content:space-between}.card-line h3{font-size:clamp(19px,2vw,27px);font-weight:1000;margin:0;line-height:1.2;letter-spacing:-.8px;color:var(--ink)}.card-line h3 a:hover{text-decoration:underline}.card-content p{font-size:clamp(13px,1.37vw,18px);color:var(--muted);margin:6px 0 15px;line-height:1.4}.subject{display:inline-flex;align-items:center;border-radius:99px;padding:7px 13px;font-size:14px;font-weight:900}.english{color:#1858ae;background:#e0f2ff}.maths{color:#702ac9;background:#f1e2ff}.fav-button{display:grid;place-items:center;width:38px;height:38px;background:var(--wash);border:0;border-radius:50%;color:#7182a6;flex:none}.fav-button .ico{width:21px;height:21px}.fav-button:hover{color:#e75573}.fav-button[aria-pressed=true]{background:#ffe6ef;color:#d73c64}.fav-button[aria-pressed=true] .ico{fill:#f3567c;stroke:#d73c64}.empty-state{border:2px dashed var(--border);border-radius:20px;padding:35px 20px;max-width:580px;text-align:center}.empty-state span{font-size:38px}.empty-state h3{margin:9px 0;font-size:23px}.empty-state p{color:var(--muted)}.family-panel{padding:24px;background:var(--wash);border-radius:20px;border:1px solid var(--border);margin:18px 0;max-width:800px}.family-panel h2{margin-top:0}.family-panel p{line-height:1.7;color:var(--muted)}footer{font-size:12px;color:#8793ad;line-height:1.6;margin-top:35px}
.modal{background:var(--surface);color:var(--ink);border:none;border-radius:23px;width:min(520px,calc(100vw - 30px));max-height:min(85vh,750px);padding:0;box-shadow:0 27px 80px #05113a70}.modal::backdrop{background:#061643bc;backdrop-filter:blur(4px)}.dialog-wrap{padding:25px;max-height:85vh;overflow-y:auto}.dialog-title{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.dialog-title small{color:#3867d1;font-size:12px;font-weight:950}.dialog-title h2{font-size:27px;letter-spacing:-.8px;margin:4px 0 0}.close-button{border:0;background:var(--wash);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;color:var(--ink)}.dialog-sub{color:var(--muted);font-size:13px;line-height:1.5;margin:10px 0 20px}.profiles-list{display:grid;gap:9px}.profile-entry{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:7px}.profile-select{border:0;background:none;color:var(--ink);display:flex;gap:12px;align-items:center;flex:1;text-align:left;padding:7px;min-width:0;font-weight:850}.profile-entry.active{border-color:#3668d1;background:#e7f0ff}.profile-entry.active .profile-select:after{content:'✓';margin-left:auto;color:#2263cb}.profile-avatar{font-size:27px;width:39px;height:39px;display:grid;place-items:center;background:var(--wash);border-radius:10px}.profile-delete{border:0;background:transparent;color:#9a536b;padding:10px;font-size:12px;font-weight:750}.profile-form{display:grid;gap:11px;border-top:1px solid var(--border);padding-top:20px;margin-top:20px}.profile-form>label{font-weight:900}.profile-form>input{height:44px;border:1px solid #b7c7e4;background:var(--surface);color:var(--ink);border-radius:10px;padding:0 13px;outline:0}.avatar-options{display:flex;gap:8px;flex-wrap:wrap}.avatar-choice{width:47px;height:45px;border:2px solid transparent;background:var(--wash);border-radius:12px;font-size:25px}.avatar-choice[aria-pressed=true]{border-color:#3064d8;background:#e5eeff}.primary-button,.soft-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:12px 17px;font-weight:900}.primary-button{background:#275cda;color:#fff}.primary-button:disabled{opacity:.5;cursor:not-allowed}.primary-button .ico{width:19px;height:19px}.soft-button{background:#dce8ff;color:#214ca4}.form-message{min-height:15px;color:var(--muted);font-size:12px;margin:0}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 0;border-bottom:1px solid var(--border)}.setting-row strong{font-size:16px}.setting-row p{font-size:13px;color:var(--muted);line-height:1.5;margin:5px 0 0}.switch{position:relative;width:49px;height:28px;flex:none}.switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0;z-index:2;cursor:pointer}.switch span{display:block;background:#aeb6c8;border-radius:30px;width:49px;height:28px;transition:.16s}.switch span:after{content:"";position:absolute;width:20px;height:20px;top:4px;left:4px;border-radius:50%;background:white;box-shadow:0 1px 2px #0002;transition:transform .16s}.switch input:checked+span{background:#2c61da}.switch input:checked+span:after{transform:translateX(21px)}.switch input:focus-visible+span{outline:3px solid #e0aa0a;outline-offset:3px}.settings-foot{margin-top:21px}.settings-foot p{font-size:12px;color:var(--muted);line-height:1.6}
body.dark{--ink:#ecf3ff;--muted:#aebbd9;--surface:#14234d;--wash:#263965;--border:#3f527b;background:#0b1442}body.dark .workspace{box-shadow:-8px -5px 18px #08133370}body.dark .profile-entry.active{background:#213f70}body.dark .profile-form>input{border-color:#6476a4}body.dark .soft-button{background:#334e8e;color:#e7edff}body.dark .avatar-choice[aria-pressed=true]{background:#36538a}body.large-text .card-content p,body.large-text .family-panel p{font-size:19px}body.large-text .card-line h3{font-size:30px}body.large-text .subject{font-size:16px}body.less-motion *,body.less-motion *:before,body.less-motion *:after{transition:none!important;scroll-behavior:auto!important}
@media(max-width:1200px){.header-tag{display:none}.header{gap:13px}.game-grid{gap:17px}.card-content{padding:15px 17px}.sidebar{width:112px}.workspace{margin-left:112px}.side-nav{padding:14px 8px}.nav-item{min-height:76px;font-size:13px}.content{padding:26px 27px 45px}}
@media(max-width:760px){.header{height:auto;min-height:71px;flex-wrap:wrap;padding:11px 15px;gap:12px}.brand-name{font-size:27px}.logo-icon{font-size:28px}.header-actions{order:1;margin-left:auto}.header-icon{width:37px;height:37px}.header-icon .ico{width:21px;height:21px}.avatar-button span{font-size:23px}.search{order:2;max-width:none;flex-basis:100%;height:44px}.sidebar{position:fixed;top:auto;bottom:0;width:100%;height:67px;overflow:visible;background:linear-gradient(90deg,#081a55,#153a95);z-index:11}.side-nav{padding:5px 8px;display:flex;flex-direction:row;justify-content:space-between;gap:2px}.nav-item{min-height:57px;padding:7px 3px;width:20%;border-radius:10px;font-size:10px;gap:2px}.nav-item .ico{width:22px;height:22px}.sidebar-hills{display:none}.workspace{margin:0;border-radius:24px 24px 0 0;min-height:calc(100vh - 120px)}.content{padding:28px 18px 90px}.hero{margin-bottom:26px}.hero h1{font-size:clamp(28px,6vw,38px)}.hero p{font-size:15px}.welcome-badge{font-size:12px}.game-grid{grid-template-columns:1fr;max-width:650px;margin:auto}.game-card{border-radius:20px}.content-head h2{font-size:21px}.filter{font-size:13px;padding:9px 14px;gap:6px}.flag{font-size:18px}}
@media(max-width:380px){.header{padding:9px}.brand-name{font-size:24px}.brand{gap:7px}.header-actions{gap:7px}.content{padding:24px 12px 90px}.hero h1{font-size:26px;letter-spacing:-1.2px}.filter{padding:9px 11px}.card-content{padding:14px}.card-line h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}