@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#202c3c;--muted:#8390a1;--line:#e9edf2;--blue:#377d91;--blue-dark:#286577;--mint:#dff2eb;--bg:#f6f8fa;--white:#fff;--shadow:0 18px 55px rgba(31,48,66,.09)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.flash-wrap{position:fixed;z-index:20;top:16px;right:16px;display:grid;gap:8px;max-width:min(420px,calc(100vw - 32px))}.flash{padding:12px 16px;border-radius:12px;background:#fff;box-shadow:var(--shadow);font-size:14px}.flash.error{border-left:4px solid #c85d5d}.flash.success{border-left:4px solid #3d9b79}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 15% 15%,#e5f2ef 0,transparent 40%),radial-gradient(ellipse at 85% 85%,#e5edf5 0,transparent 42%),#f7f9fb}.login-card{width:min(100%,430px);padding:48px 44px 38px;background:white;border:1px solid #edf0f3;border-radius:25px;box-shadow:var(--shadow);text-align:center}.brand-mark{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 18px;border-radius:18px;background:#e4f2ee;color:#367e70;font-size:28px}.brand-mark.small{width:38px;height:38px;margin:0;border-radius:12px;font-size:20px;flex:none}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#8a9a9e;margin:0 0 9px}.login-card h1,.admin-intro h1{font:800 32px Manrope,sans-serif;letter-spacing:-1.3px;margin:0}.muted{color:var(--muted);font-size:13px;line-height:1.6}.login-card>.muted{margin:9px 0 30px}.stack{display:grid;gap:17px;text-align:left}.stack label{display:grid;gap:8px;font-size:12px;font-weight:700;color:#4b5968}.stack input{height:46px;width:100%;padding:0 13px;border:1px solid #e3e8ed;border-radius:10px;outline:none;color:var(--ink);background:#fff}.stack input:focus,.composer textarea:focus{border-color:#7caea7;box-shadow:0 0 0 3px #e8f4f0}.primary{height:47px;border:0;border-radius:10px;background:var(--blue);color:white;font-weight:700;transition:.2s}.primary:hover{background:var(--blue-dark);transform:translateY(-1px)}.primary span{float:right;margin-right:13px}.full{width:100%;margin-top:4px}.login-note{font-size:11px;color:#9aa5af;margin:25px 0 0}
.app-shell{height:100vh;min-height:560px;display:grid;grid-template-columns:292px 1fr;max-width:1600px;margin:auto;background:#fff;box-shadow:0 0 70px rgba(25,42,60,.05)}.sidebar{background:#fbfcfd;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:25px 18px 16px;min-height:0}.side-brand{display:flex;align-items:center;gap:11px;padding:0 8px 30px}.side-brand strong{font:800 16px Manrope,sans-serif;display:block}.side-brand small{display:block;font-size:8px;letter-spacing:1.2px;color:#a0abb4;margin-top:3px}.side-section{margin-bottom:27px}.section-heading{font-size:10px;letter-spacing:1.4px;color:#9aa5ae;font-weight:700;padding:0 9px 12px}.section-heading span{float:right;color:#78b29e}.conversation-list,.people-list{display:grid;gap:4px}.conversation-item,.person-item{width:100%;display:flex;align-items:center;gap:11px;padding:10px 9px;border:0;background:transparent;border-radius:11px;text-align:left;color:var(--ink)}.conversation-item:hover,.person-item:hover{background:#f0f5f5}.conversation-item.selected{background:#eaf3f1}.chat-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#e0efeb;color:#397d70;font-weight:700;flex:none}.conversation-copy{min-width:0;display:grid;gap:4px}.conversation-copy strong{font-size:12px}.conversation-copy small{font-size:10px;color:#9aa4ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px}.people-section{overflow:auto}.person-item{padding:7px 9px}.avatar{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:50%;background:#e8eef5;color:#5c748b;font-weight:700;font-size:12px}.person-name{font-size:12px;font-weight:600;flex:1}.presence{width:8px;height:8px;border-radius:50%;background:#cbd3da}.presence.online{background:#55b58d;box-shadow:0 0 0 3px #e3f4ec}.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:15px}.profile{display:flex;align-items:center;gap:10px;padding:0 6px 13px}.profile-info{display:grid;gap:3px}.profile-info strong{font-size:12px}.profile-info small{font-size:10px;color:#9aa5af}.admin-link,.quiet-button{display:block;width:100%;padding:9px 8px;border:0;background:transparent;text-align:left;text-decoration:none;color:#73818e;font-size:11px;border-radius:8px}.admin-link{color:#397b70;font-weight:700}.admin-link:hover,.quiet-button:hover{background:#edf3f2}.side-bottom form{margin:0}
.chat-panel{display:flex;flex-direction:column;min-width:0;min-height:0}.chat-header{height:96px;padding:23px 42px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.chat-header h2{font:800 19px Manrope,sans-serif;margin:0;letter-spacing:-.5px}.chat-header .eyebrow{font-size:9px;margin-bottom:5px}.chat-subtitle{font-size:11px;color:#9aa5af;margin:5px 0 0}.header-status{font-size:10px;color:#7f8d98;display:flex;align-items:center;gap:8px}.status-dot{width:7px;height:7px;border-radius:50%;background:#56b58d}.messages{flex:1;overflow-y:auto;padding:28px clamp(18px,5vw,75px);display:flex;flex-direction:column;gap:14px}.empty-state{margin:auto;text-align:center;color:#9ba7b0}.empty-icon{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 14px;background:#eaf3f0;border-radius:16px;color:#478b7b;font-size:22px}.empty-state h3{font:700 16px Manrope;color:#4b5b69;margin:0 0 6px}.empty-state p{font-size:12px;margin:0}.loading-state{margin:auto;color:#98a4ae;font-size:13px}.message-row{display:flex;justify-content:flex-start}.message-row.own{justify-content:flex-end}.message-bubble{max-width:min(72%,560px);padding:12px 15px;background:#f0f3f6;border-radius:4px 15px 15px 15px}.own .message-bubble{background:#e3f2ec;border-radius:15px 4px 15px 15px}.message-author{font-size:10px;font-weight:700;color:#528578;margin-bottom:5px}.message-bubble p{font-size:13px;line-height:1.55;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.message-bubble time{display:block;text-align:right;font-size:9px;color:#99a5ac;margin-top:7px}.composer{position:relative;padding:15px 42px 30px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 46px;gap:10px}.composer textarea{resize:none;min-height:48px;max-height:130px;padding:14px 16px;border:1px solid #e4e9ed;border-radius:13px;outline:none;font-size:13px}.send-button{border:0;border-radius:13px;background:var(--blue);color:white;font-size:23px}.send-button:disabled{opacity:.4;cursor:not-allowed}.composer-hint{grid-column:1/-1;text-align:right;color:#a3adb6;font-size:9px;margin-top:-4px}.modal{border:0;border-radius:18px;padding:28px;width:min(430px,calc(100% - 28px));box-shadow:var(--shadow)}.modal::backdrop{background:#1c2b3c88}.modal-heading{display:flex;justify-content:space-between;align-items:start}.modal-heading h2{font:800 21px Manrope;margin:0 0 8px}.close-button{border:0;background:#f1f4f6;border-radius:50%;width:30px;height:30px;font-size:20px;color:#607080}
.admin-page{max-width:1150px;margin:auto;padding:28px 36px 60px}.admin-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:20px}.back-link{text-decoration:none;color:#70808c;font-size:12px}.admin-top .side-brand{padding:0}.admin-pill{font-size:9px;letter-spacing:1px;font-weight:700;color:#438473;background:#e8f4ef;padding:8px 11px;border-radius:20px}.admin-intro{padding:42px 0 25px}.admin-intro h1{font-size:30px}.admin-intro .muted{margin:8px 0}.admin-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}.admin-card{background:white;border:1px solid var(--line);border-radius:17px;padding:23px;box-shadow:0 8px 30px rgba(31,48,66,.035)}.admin-card h2{font:800 16px Manrope;margin:0}.admin-card>.muted{margin:7px 0 22px}.create-card .stack{gap:14px}.create-card .stack label{font-size:11px}.create-card .stack input{height:42px;font-size:12px}.members-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.members-heading .muted{margin:4px 0 0}.member-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #f0f2f4}.member-detail{display:grid;gap:4px;min-width:0;flex:1}.member-detail strong{font-size:12px}.member-detail small{font-size:10px;color:#9aa5ae}.account-state{font-size:9px;padding:5px 8px;border-radius:20px}.account-state.active{background:#e8f5ef;color:#438c70}.account-state.disabled{background:#f8eded;color:#b66b6b}.member-actions{position:relative}.member-actions summary{list-style:none;cursor:pointer;color:#85939e;letter-spacing:2px;padding:5px}.member-actions summary::-webkit-details-marker{display:none}.action-menu{position:absolute;z-index:4;right:0;top:28px;width:190px;padding:8px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.action-menu form{margin:0}.action-menu button{width:100%;border:0;background:white;padding:9px;text-align:left;font-size:11px;color:#596977;border-radius:6px}.action-menu button:hover{background:#f4f7f8}.action-menu input{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;font-size:10px;margin:5px 0}.action-menu .danger-text{color:#b65b5b}.admin-footnote{font-size:11px;color:#9aa5ae;margin:18px 4px}
@media(max-width:800px){.app-shell{grid-template-columns:235px 1fr}.sidebar{padding:18px 12px}.chat-header{padding:20px 22px}.composer{padding:14px 20px 24px}.messages{padding:22px}.admin-page{padding:22px}.admin-grid{grid-template-columns:1fr}}
@media(max-width:560px){.app-shell{height:100dvh;grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{padding:10px 12px 8px;border-right:0;border-bottom:1px solid var(--line);display:block}.side-brand{padding:0 4px 9px}.side-brand .brand-mark{width:30px;height:30px;font-size:16px}.side-brand strong{font-size:13px}.side-brand small{display:none}.side-section{margin:0}.section-heading{display:none}.conversation-list{display:flex;overflow-x:auto;padding-bottom:6px}.conversation-item{width:auto;min-width:125px;padding:6px}.chat-avatar{width:29px;height:29px}.conversation-copy small{max-width:85px}.people-section,.side-bottom{display:none}.chat-header{height:76px;padding:13px 18px}.chat-header h2{font-size:16px}.header-status{font-size:0}.messages{padding:17px 13px}.message-bubble{max-width:88%}.composer{padding:10px 12px 14px;grid-template-columns:1fr 42px}.composer-hint{display:none}.admin-page{padding:16px}.admin-top .side-brand{display:none}.admin-grid{gap:12px}.admin-card{padding:17px}.member-row{gap:7px}.account-state{display:none}}


.games-nav{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:0 0 19px;border-radius:11px;background:#eaf3f1;color:#397b70;text-decoration:none;font-size:12px;font-weight:700}.games-nav>span:first-child{font-size:17px}.nav-arrow{margin-left:auto}
.arcade-page{max-width:1200px;margin:auto;padding:26px 36px 60px}.arcade-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:17px}.arcade-brand{display:flex;align-items:center;gap:10px}.arcade-brand>span{font-size:25px}.arcade-brand strong{display:block;font:800 15px Manrope}.arcade-brand small{display:block;font-size:8px;letter-spacing:1.2px;color:#9ba7b0;margin-top:3px}.arcade-user{font-size:11px;color:#7c8b98;background:#f0f4f6;border-radius:30px;padding:8px 13px}.arcade-header .back-link{color:#6c7c89;text-decoration:none;font-size:12px}.arcade-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;margin:25px 0 22px;padding:30px 35px;border-radius:20px;background:linear-gradient(115deg,#e9f4ef,#eef2fa);min-height:175px}.arcade-hero h1{font:800 clamp(28px,4vw,40px) Manrope;letter-spacing:-1.8px;margin:0;color:#263c48}.arcade-hero h1 span{color:#4c9a83}.arcade-hero p:not(.eyebrow){font-size:13px;color:#74858c;max-width:520px;line-height:1.6;margin:9px 0 0}.hero-doodle{font-size:55px;color:#77ad9d;transform:rotate(-12deg);padding-right:35px}.hero-doodle span{font-size:35px;color:#e4b55a;vertical-align:top}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.game-card{position:relative;min-height:190px;padding:20px;border:1px solid transparent;border-radius:17px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;transition:transform .18s,box-shadow .18s}.game-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #263b4b14}.card-coral{background:#fff0ed;border-color:#f8dfd9}.card-purple{background:#f2edfc;border-color:#e8def8}.card-yellow{background:#fff7df;border-color:#f5eac6}.card-blue{background:#eaf3fc;border-color:#dce9f7}.card-green{background:#e9f5ee;border-color:#d9ecdf}.game-emoji{font-size:28px;margin-bottom:12px}.game-title{font:800 15px Manrope;color:#2c3d49}.game-desc{font-size:11px;color:#7f8e98;margin-top:5px;line-height:1.5}.game-best{font-size:10px;font-weight:700;color:#5d8177;margin-top:11px}.play-label{position:absolute;right:18px;bottom:18px;font-size:9px;letter-spacing:1px;font-weight:800;color:#71838c}.play-label b{font-size:14px;margin-left:5px}.leaderboard-panel{margin-top:29px}.leaderboard-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:13px}.leaderboard-heading h2{font:800 20px Manrope;margin:0}.leaderboard-note{font-size:10px;color:#98a4ad}.leaderboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.leader-card{background:white;border:1px solid var(--line);border-radius:13px;padding:15px 17px}.leader-card h3{font:700 12px Manrope;margin:0 0 10px}.leader-card>.muted{font-size:10px}.leader-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #f2f4f5;font-size:11px}.leader-row.is-me{color:#347d6d}.leader-row strong{font-weight:600;flex:1}.leader-row b{font-size:11px}.rank{width:20px;color:#9aa5ac}.game-dialog{border:0;border-radius:22px;padding:25px;width:min(560px,calc(100% - 24px));max-height:90vh;box-shadow:0 25px 90px #172b3b44}.game-dialog::backdrop{background:#1d2e3c99;backdrop-filter:blur(3px)}.game-modal-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #edf0f2;padding-bottom:14px}.game-modal-head h2{font:800 20px Manrope;margin:0}.game-modal-head .eyebrow{margin-bottom:5px}.game-area{padding:20px 0 2px;text-align:center}.game-instructions{font-size:12px;line-height:1.6;color:#7c8b96;margin:0 auto 18px;max-width:420px}.game-area .primary,.game-area .secondary{padding:0 20px;min-width:120px;margin:5px}.secondary{height:43px;border:1px solid #e0e7e9;border-radius:10px;background:#f7f9fa;color:#60727e;font-weight:700}.reaction-pad{width:100%;min-height:190px;border:0;border-radius:17px;background:#eaf0f4;color:#536a78;font:800 19px Manrope}.reaction-pad.waiting{background:#ffe9c7;color:#9b6d26}.reaction-pad.go{background:#5ac18d;color:white}.reaction-pad.early{background:#f7dada;color:#a84c4c}.game-stats{font-size:12px;font-weight:700;color:#6e828b;margin:0 0 15px}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:360px;margin:auto}.memory-card{height:66px;border:0;border-radius:12px;background:#e8eff8;color:#597b9b;font-size:23px;font-weight:700}.memory-card.flipped{background:#f1eafa}.memory-card.matched{background:#e1f3e9}.math-question{font:800 40px Manrope;color:#314b59;margin:23px 0}.answer-form{display:flex;gap:8px;justify-content:center;margin:0 auto 14px;max-width:350px}.answer-form input{width:100%;min-width:0;border:1px solid #dfe6e9;border-radius:10px;padding:0 12px;height:44px;outline:none}.answer-form .primary{margin:0}.scramble-word{font:800 clamp(24px,6vw,38px) Manrope;letter-spacing:3px;color:#4b7d8b;background:#eef5f6;border-radius:14px;padding:22px 10px;margin:16px 0}.word-feedback{font-size:12px;color:#6c8d80;min-height:18px}.sequence-grid{display:grid;grid-template-columns:repeat(2,100px);gap:10px;justify-content:center;margin:20px auto}.sequence-pad{width:100px;height:100px;border:0;border-radius:19px;opacity:.72}.sequence-pad.red{background:#ef7777}.sequence-pad.blue{background:#6c9fe4}.sequence-pad.yellow{background:#f1c75f}.sequence-pad.green{background:#67bd8e}.sequence-pad.lit{opacity:1;filter:brightness(1.25);transform:scale(.96);box-shadow:0 0 0 5px #263c4820}.result-emoji{font-size:43px}.game-area h3{font:800 22px Manrope;margin:8px 0}.result-detail{font-size:12px;color:#82919b}.result-score{font:800 39px Manrope;color:#428d79;margin:15px 0 3px}.result-score small{font:700 9px 'DM Sans';letter-spacing:1px}.save-status{font-size:11px;color:#6d9285;margin:8px 0 15px}
@media(max-width:800px){.arcade-page{padding:20px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.arcade-page{padding:14px}.arcade-header .back-link{font-size:10px}.arcade-brand{display:none}.arcade-hero{padding:23px 20px;min-height:155px}.hero-doodle{font-size:35px;padding:0}.game-grid{grid-template-columns:1fr 1fr;gap:8px}.game-card{min-height:175px;padding:14px}.game-title{font-size:13px}.game-desc{font-size:10px}.play-label{right:12px;bottom:12px}.leaderboard-grid{grid-template-columns:1fr}.leaderboard-note{font-size:9px}.game-dialog{padding:18px}.sequence-pad{width:85px;height:85px}}


/* Racing Rush */
.card-race{background:#fff0ed;border-color:#f8dfd9}
.race-hud{display:flex;justify-content:space-between;max-width:260px;margin:0 auto 8px;font-size:10px;font-weight:800;color:#637783;letter-spacing:.5px}
.race-track{position:relative;overflow:hidden;width:260px;height:380px;margin:0 auto;background:#34424c;border:7px solid #25343e;border-radius:15px;box-shadow:inset 0 0 0 2px #71808a}
.race-track:before{content:"";position:absolute;inset:0 84px;background:repeating-linear-gradient(to bottom,transparent 0 28px,#e9eef0 28px 50px,transparent 50px 78px);opacity:.8;animation:race-road 0.55s linear infinite}
.race-track:after{content:"";position:absolute;top:0;bottom:0;left:85px;width:2px;background:#c8d1d5;opacity:.55;box-shadow:85px 0 #c8d1d5}
@keyframes race-road{to{background-position-y:78px}}
.race-car{position:absolute;z-index:2;width:44px;height:52px;display:grid;place-items:center;font-size:31px;filter:drop-shadow(0 3px 2px #1118)}
.player-car{bottom:24px;transition:left .09s ease}
.traffic-car{font-size:30px}
.race-controls{display:flex;justify-content:center;gap:12px;margin:12px auto 4px}
.race-controls button{min-width:112px}
.race-hint{font-size:10px;color:#87949c}
@media(max-width:540px){.race-track{height:340px}.race-controls button{min-width:105px}}


/* Racing Rush layout and controls */
.race-hud{display:flex;justify-content:space-between;max-width:270px;margin:0 auto 9px;font-size:11px;font-weight:800;color:#526273;letter-spacing:.45px}
.race-track{position:relative;overflow:hidden;width:270px;height:390px;max-width:100%;margin:0 auto;background:linear-gradient(90deg,#35434b 0 100%);border:7px solid #26343d;border-radius:15px;box-shadow:inset 0 0 0 2px #74828a}
.race-lane-markers{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 26px,#e7ecef 26px 47px,transparent 47px 78px);background-size:2px 78px;background-repeat:repeat-y;background-position:88px 0;opacity:.75;pointer-events:none}
.race-lane-markers:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 26px,#e7ecef 26px 47px,transparent 47px 78px);background-size:2px 78px;background-repeat:repeat-y;background-position:176px 0}
.race-car{position:absolute;z-index:2;width:48px;height:56px;display:grid;place-items:center;font-size:32px;line-height:1;filter:drop-shadow(0 3px 2px #1118);user-select:none}
.player-car{bottom:18px;transition:left .08s ease}
.traffic-car{font-size:30px}
.race-controls{display:flex;justify-content:center;gap:12px;margin:12px auto 4px}
.race-controls button{min-width:112px;touch-action:manipulation}
.race-hint{font-size:11px;color:#87949c;text-align:center}


/* Canvas-based Racing Rush: fixed road geometry and crisp car sprites */
.race-canvas-wrap{width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto}
.race-canvas{display:block;width:min(300px,100%);height:auto;aspect-ratio:300/440;border:5px solid #26343d;border-radius:14px;background:#66a85b;box-shadow:0 5px 16px #1c293322;touch-action:pan-y}
.race-hud{display:flex;justify-content:space-between;width:min(300px,100%);margin:0 auto 9px;font-size:11px;font-weight:800;color:#526273;letter-spacing:.45px}
.race-controls{display:flex;justify-content:center;gap:12px;margin:12px auto 4px}
.race-controls button{min-width:112px;touch-action:manipulation}
.race-hint{font-size:11px;color:#87949c;text-align:center}