:root{font-family:DM Sans,sans-serif;color:#edf5ff;background:#10192b;font-synthesis:none;text-rendering:optimizeLegibility;--bg:#10192b;--panel:#17243a;--panel2:#1d2c45;--line:#30415d;--muted:#8fa2bc;--mint:#50d2b5;--blue:#7d9cff;--gold:#f5c46c}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:#edf5ff}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.hidden{display:none!important}.screen-shell{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 12% 25%,#1d5361 0,transparent 32%),radial-gradient(ellipse at 85% 75%,#44335e 0,transparent 30%),#10192b}.ambient{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22;pointer-events:none}.ambient-one{width:300px;height:300px;background:#42cbb0;top:-100px;left:30%}.ambient-two{width:360px;height:360px;background:#7a76ff;right:-100px;bottom:-150px}.join-layout{position:relative;z-index:1;max-width:1180px;margin:auto;min-height:calc(100vh - 60px);padding:54px 28px;display:grid;grid-template-columns:1.1fr .8fr;align-items:center;gap:70px}.brand-mark{display:flex;align-items:center;gap:10px;font-family:Space Grotesk;font-weight:700;letter-spacing:1.3px;font-size:15px}.brand-cube,.mini-brand-icon{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#62e1c4,#348fba);display:grid;place-items:center;color:#102333;font-size:19px;font-weight:800;box-shadow:0 8px 24px #3dc7b54d}.brand-light{font-weight:500;color:#9eb0c9}.eyebrow{margin-top:54px;color:var(--mint);font-size:10px;letter-spacing:2px;font-weight:800;display:flex;align-items:center;gap:9px}.pulse-dot,.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px #50d2b51e}.brand-panel h1,.teacher-welcome h1{font:700 clamp(42px,5.5vw,68px)/1.03 "Space Grotesk";letter-spacing:-2px;margin:18px 0}.brand-panel h1 span,.teacher-welcome h1 span,.teacher-login-card h1 span{color:var(--mint)}.brand-copy{font-size:16px;line-height:1.75;color:#a8b7cc;max-width:510px}.feature-pills{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0 34px}.feature-pills span{border:1px solid #49607880;background:#1c344a99;border-radius:30px;padding:8px 13px;font-size:11px;color:#d3e4ef}.world-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:550px}.preview-world{height:88px;border:1px solid #ffffff20;border-radius:15px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;box-shadow:inset 0 1px #ffffff1a}.preview-world span{font:700 25px Space Grotesk}.preview-world small{font-size:8px;letter-spacing:.7px;font-weight:800}.preview-analysis{background:linear-gradient(145deg,#1b786e,#1c414f)}.preview-database{background:linear-gradient(145deg,#555d9b,#273d64)}.preview-backend{background:linear-gradient(145deg,#a36a3a,#4a3b35)}.preview-testing{background:linear-gradient(145deg,#98577d,#45324e)}.join-card{background:#17243aef;border:1px solid #52668155;border-radius:24px;padding:34px;box-shadow:0 25px 80px #0005;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.card-kicker{display:flex;justify-content:space-between;color:var(--mint);font-size:9px;font-weight:800;letter-spacing:1.8px}.card-kicker span{color:#7588a2}.join-card h2,.teacher-card h2{font:700 26px Space Grotesk;margin:20px 0 7px}.muted{color:var(--muted);font-size:13px;line-height:1.6}.join-card form{margin-top:26px}.join-card label,.teacher-login-card label{display:block;font-size:11px;font-weight:700;color:#c8d5e6;margin:16px 0 8px}.join-card input,.teacher-login-card input,.create-form input{width:100%;height:48px;border:1px solid #354a67;background:#111d30;border-radius:11px;color:#f2f7ff;padding:0 14px;outline:none;transition:.2s}.join-card input:focus,.teacher-login-card input:focus,.create-form input:focus{border-color:var(--mint);box-shadow:0 0 0 3px #50d2b51c}.join-card input::placeholder,.teacher-login-card input::placeholder{color:#62758f}.room-input{text-transform:uppercase;letter-spacing:4px;font-weight:800}.avatar-picker{display:flex;gap:9px}.avatar-choice{width:43px;height:43px;border-radius:12px;border:1px solid #3b4d69;background:#1d2c45;font-size:22px;transition:.18s}.avatar-choice.selected{border-color:var(--mint);background:#1d554f;box-shadow:0 0 0 3px #50d2b51c;transform:translateY(-2px)}.primary-button{width:100%;height:50px;border:0;border-radius:12px;background:linear-gradient(100deg,#52d6b5,#53b9d2);color:#102b36;font-size:11px;font-weight:900;letter-spacing:1px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 9px 25px #3cc8ae2c;transition:.2s}.primary-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)}.join-button{margin-top:25px}.primary-button b{font-size:20px}.form-message{min-height:18px;color:#ff9b9b;font-size:11px;margin-top:10px}.join-foot{border-top:1px solid #34435a;margin-top:16px;padding-top:16px;color:#8093ad;font-size:10px}.join-foot span{color:var(--mint);margin-right:5px}.landing-footer{position:relative;z-index:1;max-width:1180px;margin:auto;padding:18px 28px 22px;border-top:1px solid #ffffff15;display:flex;justify-content:space-between;color:#72849e;font-size:9px;letter-spacing:1px}.landing-footer a,.back-link{color:var(--mint);text-decoration:none}.game-shell{min-height:100vh;padding:0 24px 20px;background:radial-gradient(ellipse at 50% -30%,#254a60,#10192b 55%)}.game-topbar{height:70px;max-width:1300px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16}.mini-brand{display:flex;align-items:center;gap:9px;font:700 13px Space Grotesk;letter-spacing:1px}.mini-brand-icon{width:29px;height:29px;font-size:15px;border-radius:9px}.session-chip{display:flex;align-items:center;gap:9px;background:#1b2b42;border:1px solid #344861;border-radius:30px;padding:8px 14px;color:#b9c8dc;font-size:10px}.session-chip b{color:#fff;letter-spacing:1.5px}.player-stats{display:flex;gap:8px}.stat-pill{height:34px;border-radius:10px;border:1px solid #3a4c64;background:#1b2b42;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:12px}.stat-pill small{font-size:8px;color:#8194ae;font-weight:800}.level-pill{background:#3b3150;border-color:#69547f}.level-pill span{font-size:8px;color:#d3a9ff;font-weight:900}.game-stage-wrap{position:relative;max-width:1300px;margin:18px auto 0}.game-stage{height:min(68vh,680px);min-height:440px;border:1px solid #5b718e88;border-radius:18px;overflow:hidden;position:relative;background:#17243a;box-shadow:0 25px 65px #0005}.game-stage canvas{display:block;width:100%;height:100%;object-fit:contain}.game-loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;background:#17243a;color:var(--mint);font-weight:700}.stage-top-left,.stage-top-right,.stage-bottom-left,.stage-bottom-right{position:absolute;z-index:3}.stage-top-left{top:17px;left:18px}.world-label{display:flex;align-items:center;gap:10px;background:#101b2dcc;border:1px solid #ffffff1b;padding:9px 13px;border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.world-label-icon{width:30px;height:30px;display:grid;place-items:center;background:#2d665d;border-radius:9px;color:#7df0d1}.world-label small,.world-label b{display:block}.world-label small{font-size:7px;letter-spacing:1.5px;color:#8ca3bc}.world-label b{font:700 11px Space Grotesk;margin-top:3px}.stage-top-right{top:17px;right:18px;display:flex;gap:7px}.icon-button{width:37px;height:37px;border-radius:11px;background:#101b2dcc;border:1px solid #ffffff25;color:#fff;font-size:15px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.icon-button:hover{background:#2d465d}.stage-bottom-left{bottom:16px;left:18px;display:flex;align-items:center;gap:5px;background:#101b2dcc;padding:9px 11px;border-radius:10px;border:1px solid #ffffff1b}.keycap{width:20px;height:20px;border:1px solid #60758d;border-bottom-width:3px;border-radius:5px;display:grid;place-items:center;font-size:9px;font-weight:800;color:#dce8f4}.stage-bottom-left small{font-size:8px;color:#91a5be;letter-spacing:.7px;margin:0 8px 0 3px}.key-e{background:#245d55;border-color:#4d9d8d}.stage-bottom-right{bottom:18px;right:20px;display:flex;align-items:center;gap:7px;background:#101b2dcc;padding:9px 12px;border-radius:10px;border:1px solid #ffffff1b}.stage-bottom-right small{font-size:8px;letter-spacing:1px;color:#9cb0c8}.online-indicator,.teacher-status i{width:7px;height:7px;background:#55d5a7;border-radius:50%;box-shadow:0 0 0 4px #55d5a71c}.stage-bottom-right b{font-size:12px}.floating-panel{position:absolute;z-index:5;right:18px;top:65px;width:300px;background:#142238f5;border:1px solid #526985;border-radius:15px;padding:17px;box-shadow:0 18px 50px #0007;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.panel-heading,.section-heading{display:flex;justify-content:space-between;align-items:flex-start}.panel-heading small{font-size:8px;color:var(--mint);letter-spacing:1.5px;font-weight:800}.panel-heading h3{font:700 19px Space Grotesk;margin:4px 0 13px}.close-panel{border:0;background:transparent;color:#9fb1c7;font-size:24px;line-height:1}.leaderboard-list{display:grid;gap:7px}.leader-row{display:flex;align-items:center;gap:8px;background:#20314b;border-radius:9px;padding:8px}.leader-row.is-me{border:1px solid #50d2b5}.leader-rank{width:22px;color:#eac875;font-size:11px}.leader-avatar{font-size:18px}.leader-name{flex:1;font-size:11px;font-weight:700}.leader-name small{display:block;color:var(--mint);font-size:7px}.leader-row>b{font-size:10px;color:#a8e7d8}.help-line{display:flex;align-items:center;gap:12px;margin:12px 0}.help-line p{font-size:11px;color:#c2d0e0;margin:0}.game-footer{max-width:1300px;margin:13px auto 0;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:20px;align-items:center}.footer-player{display:flex;align-items:center;gap:10px}.footer-player>span{width:39px;height:39px;border-radius:12px;background:#273c55;display:grid;place-items:center;font-size:23px}.footer-player b,.footer-player small{display:block}.footer-player b{font-size:11px}.footer-player small{font-size:8px;letter-spacing:1px;color:#8297b1;margin-top:3px}.quest-progress{max-width:350px;width:100%;justify-self:center}.progress-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#8da2bc;margin-bottom:7px}.progress-label b{color:#c6d7e8}.progress-track{height:6px;background:#2a3b54;border-radius:10px;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#50d2b5,#7e9dff);border-radius:10px;transition:width .5s}.footer-actions{display:flex;justify-content:flex-end;gap:8px}.secondary-button{border:1px solid #425671;background:#1c2d46;color:#d6e5f3;border-radius:10px;padding:9px 13px;font-size:10px;font-weight:800}.secondary-button:hover{border-color:var(--mint);color:#fff}.modal-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;background:#07101ed9;display:grid;place-items:center;padding:20px;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.quest-modal{width:min(600px,100%);max-height:88vh;overflow:auto;background:linear-gradient(145deg,#1b2b43,#121e31);border:1px solid #4b6381;border-radius:20px;padding:25px;box-shadow:0 25px 90px #0009}.modal-topline{display:flex;justify-content:space-between;align-items:center;color:var(--mint);font-size:9px;font-weight:900;letter-spacing:1.7px}.quest-modal h2{font:700 22px Space Grotesk;margin:12px 0 5px}.quest-modal .muted{margin:0 0 18px}.quest-board-meta{display:flex;justify-content:space-between;color:#9eb4cc;font-size:9px;font-weight:800;letter-spacing:1px;padding:10px 0;border-top:1px solid #34445c;border-bottom:1px solid #34445c}.quest-list{display:grid;gap:8px;margin-top:12px}.quest-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid #364a65;background:#1d2e48;border-radius:12px;padding:12px;color:#e8f2fb}.quest-item:hover{border-color:var(--mint);transform:translate(2px)}.quest-item.completed{border-color:#3b927e;background:#1c3b43}.quest-number{width:29px;height:29px;border-radius:9px;background:#2e4661;display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--mint)}.quest-item-copy{flex:1}.quest-item-copy b,.quest-item-copy small{display:block}.quest-item-copy b{font-size:11px}.quest-item-copy small{font-size:9px;color:#92a6bf;margin-top:3px}.quest-reward{font-size:9px;color:#f2cf7d;font-weight:800}.quest-arrow{font-size:16px;color:var(--mint)}.challenge-card{border-top:1px solid #34445c;padding-top:16px}.challenge-top{display:flex;justify-content:space-between;gap:10px;font-size:8px;color:var(--mint);letter-spacing:1px;font-weight:900}.challenge-top span:last-child{color:#f0cb79}.challenge-card h3{font:600 18px/1.45 Space Grotesk;margin:18px 0}.answer-options{display:grid;gap:8px}.answer-option{display:flex;align-items:center;gap:11px;border:1px solid #3b4d67;background:#1d2e48;color:#eaf3fc;border-radius:10px;padding:11px;text-align:left;font-size:11px}.answer-option span{width:23px;height:23px;border-radius:7px;background:#2e4661;display:grid;place-items:center;color:#a9d8d0;font-weight:900}.answer-option.selected{border-color:var(--mint);background:#214a4a}.answer-feedback{min-height:10px;margin:12px 0;font-size:11px}.answer-feedback b,.answer-feedback span,.answer-feedback small{display:block;margin-bottom:4px}.answer-feedback.correct{color:#7ee3bd}.answer-feedback.incorrect{color:#ff9c9c}.answer-feedback small{color:#b4c4d7;line-height:1.5}.challenge-card .primary-button{margin-top:8px}.text-button{border:0;background:transparent;color:#9bb1c9;font-size:10px;margin-top:13px;padding:5px}.welcome-quest-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.welcome-quest-grid>div{background:#20324b;border:1px solid #3a506b;border-radius:11px;padding:13px}.welcome-quest-grid b,.welcome-quest-grid small{display:block}.welcome-quest-grid b{font-size:11px}.welcome-quest-grid small{font-size:9px;color:#9fb2c9;margin-top:4px}.modal-hint{font-size:10px;color:#a5b7cd;margin-top:15px}.modal-hint kbd{background:#2e5d55;padding:3px 7px;border-radius:5px;color:#fff}.result-panel{text-align:center;padding:20px}.result-icon{font-size:42px}.result-panel h3{font:700 20px Space Grotesk}.result-panel p{font-size:12px;color:#a9bad0;margin-bottom:20px}.toast{position:fixed;z-index:50;bottom:25px;left:50%;transform:translate(-50%);background:#20364b;border:1px solid #5d7a8e;color:#edf8ff;padding:12px 18px;border-radius:12px;font-size:11px;box-shadow:0 10px 35px #0007}.toast.success{border-color:#50d2b5}.toast.error{border-color:#f17b83}@media(max-width:850px){.join-layout{grid-template-columns:1fr;gap:30px;padding:30px 20px}.brand-panel .eyebrow{margin-top:35px}.brand-panel h1{font-size:48px}.brand-copy{font-size:14px}.world-preview{max-width:none}.join-card{max-width:560px;width:100%;justify-self:center}.game-shell{padding:0 10px 12px}.game-topbar{height:60px}.session-chip{display:none}.game-stage{height:65vh;min-height:420px}.game-footer{grid-template-columns:1fr 1fr}.quest-progress{grid-column:1/-1;grid-row:2;max-width:none}.footer-actions{grid-column:2;grid-row:1}.stage-bottom-left{transform:scale(.85);transform-origin:left bottom;left:8px}.stage-bottom-right{right:8px;bottom:12px}.stage-top-left{left:8px;top:8px}.stage-top-right{right:8px;top:8px}.world-label{padding:7px}.world-label b{font-size:9px}.icon-button{width:32px;height:32px}.floating-panel{right:8px;top:50px}.footer-actions .secondary-button span{display:none}}@media(max-width:520px){.brand-panel h1{font-size:42px}.world-preview{grid-template-columns:repeat(2,1fr)}.preview-world{height:70px}.join-card{padding:24px}.game-topbar{gap:5px}.mini-brand{font-size:10px}.player-stats{gap:4px}.stat-pill{padding:0 6px;font-size:10px}.game-stage{min-height:380px;height:60vh}.stage-bottom-left small{display:none}.stage-bottom-left{gap:3px;padding:7px}.stage-bottom-right{padding:7px}.stage-bottom-right small{display:none}.game-footer{gap:8px}.footer-player>span{width:32px;height:32px}.footer-player b{font-size:9px}.footer-actions .secondary-button{padding:8px}.quest-modal{padding:18px}.welcome-quest-grid{grid-template-columns:1fr}.quest-reward{display:none}.landing-footer{padding-left:20px;padding-right:20px}}
