@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--navy:#10264a;--ink:#193354;--teal:#0da7b2;--blue:#3984ee;--purple:#7856d9;--yellow:#ffcc53;--coral:#ff7769;--soft:#f4f8ff;--card:#fff;--border:rgba(40,67,105,.12);--shadow:0 18px 50px rgba(30,50,104,.11)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Nunito,'Segoe UI',sans-serif;color:var(--ink)}body{background:linear-gradient(135deg,#ecfaff 0%,#f8f5ff 46%,#fff5e6 100%)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.47;cursor:not-allowed}h1,h2,h3,p{margin:0}h1,h2,h3,.brand,.room-num,.stat-number{font-family:'Baloo 2',Nunito,sans-serif}.shell{min-height:100vh}.nav{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px clamp(16px,5vw,64px);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800;color:#143253;letter-spacing:.15px}.brand-mark{background:linear-gradient(145deg,#ffcf55,#ff8d5c);border:3px solid #fff;box-shadow:0 5px 14px #fdb84970;padding:7px 9px;border-radius:16px;font-size:25px;line-height:1}.nav-badge,.pill{border-radius:99px;background:white;padding:7px 13px;font-size:12px;font-weight:900;color:#4f6685;box-shadow:0 4px 14px #16396812}.pill.live{color:#077c6c;background:#e1fff3}.pill.closed{color:#ac4c57;background:#ffe8ec}.pill.playing{background:#fff1cc;color:#935b00}.button{border:0;display:inline-flex;gap:9px;align-items:center;justify-content:center;border-radius:17px;font-weight:900;padding:12px 20px;white-space:nowrap;transition:transform .16s,box-shadow .16s;line-height:1.2}.button:hover:not(:disabled){transform:translateY(-2px)}.primary{color:#fff;background:linear-gradient(135deg,#1977ee,#3c60da);box-shadow:0 7px 0 #2444a0,0 12px 18px #315bdc26}.primary:hover{box-shadow:0 5px 0 #2444a0,0 9px 15px #315bdc26}.sunny{background:linear-gradient(125deg,#ffcf4c,#ff9e44);color:#543e1e;box-shadow:0 6px 0 #df8530}.danger{background:#fff0f1;color:#ac3650;border:1px solid #ffbdc5}.secondary{background:white;border:1px solid #d6e2ef;color:#2c527c}.ghost{background:transparent;color:#385d82}.button.sm{padding:9px 13px;border-radius:13px;font-size:12px}.button.xs{padding:6px 10px;border-radius:9px;font-size:11px}.button.full{width:100%}.button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffd05c;outline-offset:2px}.hero{min-height:calc(100vh - 76px);display:flex;align-items:center;position:relative;overflow:hidden;background-image:linear-gradient(90deg,rgba(245,252,255,.92) 0%,rgba(239,249,255,.69) 33%,rgba(229,245,255,0) 68%),url('/assets/event-island.webp');background-position:center,center;background-size:cover}.hero:after{content:"";position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(0deg,#f4f8ff,transparent);pointer-events:none}.hero-inner{width:min(1150px,100%);margin:auto;padding:35px clamp(20px,7vw,90px) 80px;z-index:1;position:relative}.hero-copy{max-width:500px}.eyebrow{display:inline-block;padding:8px 14px;background:#fff9dc;color:#a4701a;font-weight:900;border-radius:25px;margin-bottom:18px;box-shadow:0 4px 14px #d99e1e21;font-size:13px;letter-spacing:.4px}.hero h1{font-size:clamp(47px,6vw,81px);line-height:.99;color:#123258;font-weight:800;letter-spacing:-2px;text-shadow:0 3px 0 #ffffff70}.hero h1 span{color:#ff8463}.subcopy{line-height:1.62;color:#526c88;font-size:18px;margin-top:18px;font-weight:800}.join-card{background:#ffffffed;border:2px solid #fff;box-shadow:0 18px 64px #30517e3b;border-radius:25px;padding:22px 24px;width:min(420px,100%);margin-top:26px;backdrop-filter:blur(8px)}.field-label{display:block;margin:0 0 8px;font-weight:900;font-size:13px;color:#53688a}.field{background:#f5f8ff;border:2px solid #e4eaf7;border-radius:15px;width:100%;padding:13px 14px;color:#1e395c;font-weight:800;outline:0}.field::placeholder{color:#a0b0c4}.field:focus{border-color:#82aefc}.join-card .button{margin-top:13px;font-size:16px;padding:15px}.note{color:#8496ab;font-size:12px;margin-top:11px;font-weight:700}.host-corner{position:fixed;right:19px;bottom:19px;border:1px solid #ffffff66;color:#52729d;background:#ffffffed;border-radius:99px;padding:11px 15px;z-index:15;box-shadow:0 6px 25px #0a35671a;font-weight:800;font-size:12px}.host-corner:hover{background:#fff;color:#2e61b2}.container{width:min(1180px,calc(100% - 32px));margin:22px auto 70px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}.page-head h1{font-size:clamp(29px,4vw,42px);line-height:1.1}.muted{color:#7891a7}.lead{font-size:14px;line-height:1.6;font-weight:700}.section-tag{color:#9865bf;font-weight:900;letter-spacing:1.6px;font-size:11px;text-transform:uppercase}.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.room-card{background:#fff;border:2px solid #fff;box-shadow:var(--shadow);border-radius:27px;overflow:hidden;transition:transform .17s}.room-card:hover{transform:translateY(-4px)}.room-art{min-height:135px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.room-art:before{content:"";position:absolute;left:-20px;bottom:-34px;width:140px;height:90px;background:#ffffff29;border-radius:50%}.room-art:after{content:"";position:absolute;right:-20px;top:-50px;width:145px;height:120px;border-radius:50%;border:20px solid #ffffff24}.room-icon{font-size:65px;filter:drop-shadow(0px 8px 5px #0002);z-index:1}.room-art.one{background:linear-gradient(135deg,#55afff,#6678f7)}.room-art.two{background:linear-gradient(135deg,#b582fe,#ef7ecc)}.room-art.three{background:linear-gradient(135deg,#42d4b0,#1ca6b8)}.room-body{padding:22px}.room-body h2{font-size:27px}.room-body p{color:#8192a9;font-weight:700;font-size:13px;min-height:38px}.room-badges{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 16px}.stage{background:white;border:1px solid #e6ebf4;border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.stage-head{padding:18px 22px;background:#fff;border-bottom:1px solid #e9eef5;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.stage-head h2{font-size:27px;line-height:1.05}.layout{display:grid;grid-template-columns:1fr 300px;gap:16px}.main-col{min-width:0}.sidebar{display:flex;flex-direction:column;gap:16px;min-width:0}.chat-log{padding:16px;min-height:270px;height:clamp(280px,44vh,520px);overflow:auto;display:flex;flex-direction:column;gap:11px;background:#f8fbff}.bubble{max-width:min(80%,390px);background:#fff;border-radius:16px 16px 16px 4px;padding:10px 13px;border:1px solid #edf0f7;box-shadow:0 3px 12px #2242710b;line-height:1.4;font-weight:700;overflow-wrap:anywhere}.bubble .by{color:#6b8ba9;font-size:11px;font-weight:900;margin-bottom:3px}.bubble .time{color:#abb9c8;font-size:10px;margin-left:8px}.system-message{background:#fff9e5;color:#98620e;border-radius:14px;text-align:center;padding:9px;font-size:13px;font-weight:900}.chat-compose{display:flex;align-items:center;gap:9px;padding:13px;border-top:1px solid #e9eef5;background:white}.chat-compose .field{padding:12px}.chat-compose .button{padding:12px 15px}.side-panel{background:white;border:1px solid #e7ecf3;box-shadow:var(--shadow);border-radius:23px;padding:18px}.side-panel h3{font-size:21px;margin-bottom:9px}.member{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #f2f5fb;font-size:13px;font-weight:900}.avatar{width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;border-radius:11px;background:#edf4ff;color:#4b79b9;font-weight:900}.mini-list{max-height:270px;overflow:auto}.score-row{display:grid;grid-template-columns:25px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #f1f3f9;font-size:13px;font-weight:800}.rank{font-weight:1000;color:#c39c36}.game-stage{background:linear-gradient(135deg,#d8eafe,#eddbff);padding:14px}.game-frame{width:100%;height:min(74vh,760px);border:0;border-radius:17px;background:#fff;display:block;box-shadow:0 10px 25px #43519a29}.lobby-banner{background:linear-gradient(118deg,#fff4cf,#fff8e7);padding:21px 26px;color:#876016;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f0e5cb}.lobby-banner .emoji{font-size:32px}.lobby-banner strong{font-size:16px}.overlay{position:fixed;inset:0;background:#1128449c;backdrop-filter:blur(8px);z-index:50;display:grid;place-items:center;padding:18px}.modal{background:white;border-radius:26px;width:min(430px,100%);padding:27px;box-shadow:0 24px 80px #071e3e66}.modal h2{font-size:32px}.modal p{font-size:13px;line-height:1.6;color:#7385a0;margin-bottom:16px}.modal form{display:flex;flex-direction:column;gap:10px}.modal .field{margin-bottom:4px}.admin-head{background:linear-gradient(135deg,#14345e,#214a80);color:white;border-radius:24px;padding:23px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}.admin-head .muted{color:#c5d8f0}.admin-head h1{font-size:37px;line-height:1.1}.admin-head .button{background:#ffffff25;color:white;border:1px solid #ffffff38}.admin-room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.admin-room{padding:21px;background:#fff;border-radius:22px;border:2px solid #fff;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:11px}.admin-room.you{border-color:#63cbb9}.admin-room h2{font-size:30px}.admin-room .button{margin-top:auto}.host-tools{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(275px,.8fr);gap:16px}.host-tools .stage{padding:20px}.host-tools h3{font-size:25px}.upload-drop{border:2px dashed #b9cde6;background:#f6faff;padding:25px;border-radius:17px;text-align:center;margin-top:12px}.upload-drop input{max-width:100%;font-size:13px}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.host-participant{display:flex;align-items:center;justify-content:space-between;gap:7px;border-bottom:1px solid #eef1f7;padding:6px 0;font-weight:800;font-size:12px}.host-participant .button{font-size:10px}.host-summary{margin:12px 0 18px;padding:14px;border-radius:16px;background:#eff9ff;font-weight:800;font-size:13px}.info-strip{padding:12px;border-radius:12px;background:#fff8dc;color:#916a21;font-weight:800;font-size:12px;margin-top:12px}.top-actions{display:flex;gap:9px;flex-wrap:wrap}.small-text{font-size:12px;font-weight:800;color:#6d839f}#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,80px);opacity:0;pointer-events:none;z-index:100;background:#16385e;color:white;border-radius:15px;padding:11px 18px;font-size:13px;font-weight:800;box-shadow:0 12px 35px #15264055;transition:transform .22s,opacity .22s;max-width:90%;text-align:center}#toast.show{transform:translate(-50%,0);opacity:1}.float{animation:bob 2.4s ease-in-out infinite}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.spinner{height:15px;width:15px;border:2px solid #fff;border-bottom-color:transparent;border-radius:100%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:850px){.layout,.host-tools{grid-template-columns:1fr}.room-grid,.admin-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{display:grid;grid-template-columns:1fr 1fr}.hero{background-position:center,right 24% center;background-image:linear-gradient(90deg,rgba(245,252,255,.94),rgba(239,249,255,.79) 49%,rgba(239,249,255,.3)),url('/assets/event-island.webp')}.hero-inner{padding-bottom:150px}}@media(max-width:570px){.nav{padding:13px 17px}.brand{font-size:19px}.brand-mark{font-size:19px;padding:6px}.nav-badge{font-size:10px}.hero{min-height:calc(100svh - 64px);align-items:flex-start;background-position:center,61% bottom;background-size:cover}.hero:after{height:160px}.hero-inner{padding:37px 18px 240px}.hero h1{font-size:57px}.subcopy{font-size:15px;margin-top:13px}.join-card{padding:16px;margin-top:18px}.room-grid,.admin-room-grid{grid-template-columns:1fr}.room-card{display:grid;grid-template-columns:32% 1fr}.room-art{min-height:100%;height:auto}.room-icon{font-size:56px}.room-body{padding:14px}.room-body h2{font-size:24px}.room-body p{min-height:0}.room-badges{margin:7px 0 12px}.sidebar{grid-template-columns:1fr}.page-head{align-items:flex-start}.page-head h1{font-size:29px}.nav .button{font-size:11px;padding:8px 11px}.container{margin:10px auto 44px}.stage-head{padding:14px}.chat-log{height:40vh;min-height:220px}.admin-head{padding:16px}.admin-head h1{font-size:27px}.host-tools .stage{padding:14px}.game-frame{height:70svh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}