@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#10191f;--paper:#f4e8cb;--gold:#f5c861;--muted:#99a9b0;--line:#ffffff18;--green:#83c4ae;--red:#e87767}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--paper);font:15px 'DM Sans',system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}input,select{width:100%;color:var(--paper);background:#101b22;border:1px solid #ffffff23;border-radius:10px;padding:12px;outline:none}input:focus,select:focus{border-color:var(--gold)}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}h1,h2,h3,.brand{font-family:'Space Grotesk',system-ui,sans-serif}h1,h2,h3,p{margin-top:0}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.screen{position:relative;min-height:100svh;background:radial-gradient(ellipse at 80% 0%,#28312c70,transparent 50%),#10191ff7;padding:28px max(24px,calc((100vw - 1160px)/2));z-index:5}.hidden{display:none!important}.brandbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:58px}.brand{font-size:24px;font-weight:700;letter-spacing:-1px}.brand>span:first-child{color:var(--gold)}.live{display:inline-block;font:700 9px 'DM Sans',sans-serif;letter-spacing:2px;color:var(--green);margin-left:20px;vertical-align:middle}.pill,.badge{border:1px solid var(--line);border-radius:20px;padding:7px 12px;color:var(--muted);font-size:11px}.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;margin-bottom:40px}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2.5px;font-weight:700;display:block;margin-bottom:16px}.hero h1{font-size:clamp(36px,4.4vw,60px);line-height:1.1;letter-spacing:-2.5px;margin-bottom:22px}.hero em{color:var(--gold);font-style:normal}.hero p{color:var(--muted);line-height:1.8}.houseArt{width:230px;height:198px;background:linear-gradient(110deg,#354448,#1d2a30);border:1px solid #ffffff20;border-radius:5px;margin:55px auto 35px;position:relative;box-shadow:25px 25px 0 #070d1233;transform:rotate(-4deg)}.roof{position:absolute;width:170px;height:170px;background:#41504c;top:-85px;left:29px;transform:rotate(45deg);border-radius:9px;z-index:-1}.window{position:absolute;top:25px;width:43px;height:43px;background:#f6ca6780;border:5px solid #18252b;box-shadow:0 0 25px #f5c86122;color:#fff0b4;text-align:center;font:700 28px 'Space Grotesk'}.w1{left:27px}.w2{right:27px;background:#131f28}.w3{top:102px;left:27px;background:#17212f}.door{position:absolute;right:30px;bottom:0;width:51px;height:82px;background:#916544;border:5px solid #17242b;text-align:right;padding-top:38px;color:var(--gold)}.houseArt>span{position:absolute;bottom:-35px;left:12px;font-size:9px;letter-spacing:3px;color:#a0a78a}.identity{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid var(--line);gap:16px}.identity label{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:12px}.identity input{width:180px}.points{font-size:12px;color:var(--muted)}.points b{font-size:22px;color:var(--gold)}.homeGrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{background:#19252bcc;border:1px solid var(--line);border-radius:20px;padding:26px}.sectionTitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px}.sectionTitle .eyebrow{margin-bottom:8px}.sectionTitle h2{font-size:24px;margin:0;letter-spacing:-.8px}.badge{color:var(--gold);border-radius:5px;font-size:9px;letter-spacing:1px;padding:6px 8px}.small,.secondary{border:1px solid #ffffff26;background:transparent;color:var(--paper);border-radius:10px;padding:10px 14px;font-size:12px}.secondary{width:100%;margin-top:12px}.primary{display:flex;width:100%;justify-content:space-between;align-items:center;background:var(--gold);color:#1b2322;border:0;border-radius:11px;padding:15px 18px;font-weight:700;margin-top:22px}.primary:hover:not(:disabled){background:#ffda85}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}label{display:block;font-size:11px;font-weight:600;color:#b0bdc1}label input,label select{margin-top:7px}#houseList{max-height:420px;overflow:auto;min-height:140px}.empty{padding:30px 8px;color:var(--muted);line-height:1.8;text-align:center;font-size:13px}.houseCard{padding:16px;border:1px solid var(--line);border-radius:13px;margin-bottom:12px;background:#142129}.houseCard h3{margin:0 0 8px;font-size:17px}.houseMeta{font-size:11px;color:var(--muted);line-height:1.8}.joinButtons{display:flex;gap:8px;margin-top:12px}.joinButtons button{flex:1;border:1px solid #83c4ae55;background:#83c4ae0e;border-radius:8px;color:var(--green);font-size:11px;padding:9px}.joinButtons button:last-child{color:var(--red);border-color:#e8776755}.rules{padding-top:22px;border-top:1px solid var(--line);margin-top:20px}.rules h3{font-size:16px}.rules p{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:9px}.rules b{color:var(--paper)}small{font-size:11px;line-height:1.7;color:var(--muted)}footer{padding:36px 0 12px;font-size:11px;text-align:center;color:#748990;line-height:1.9}.lobbyCard{max-width:800px;margin:30px auto}.lobbyCard h1{font-size:36px;letter-spacing:-1px}.lobbyCard>p{color:var(--muted);font-size:13px;line-height:1.8}.teamGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0}.teamGrid section{padding:18px;border:1px solid var(--line);border-radius:14px}.teamGrid h2{font-size:18px;color:var(--green)}.teamGrid section:last-child h2{color:var(--red)}.teamGrid h2 span{font-size:12px;float:right}.seat{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.seat.emptySeat{color:#617780}.seat small{font-size:10px}#lobbyStatus{padding:12px 0;color:var(--gold);font-size:13px}.lobbyCard>small{display:block;text-align:center;margin-top:18px}#gameUI{position:fixed;inset:0;pointer-events:none;z-index:2}.gameTop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;position:absolute;top:0;left:0;right:0;background:linear-gradient(#0b141fe6,transparent);font-size:12px}#roleBadge{padding:6px 10px;border-radius:20px;color:#10251f;background:var(--green);font-weight:800}#timer{font:700 26px 'Space Grotesk';color:var(--gold);font-variant-numeric:tabular-nums}#remaining{font-size:11px}#phaseBanner{position:absolute;left:18px;top:72px;max-width:calc(100% - 190px);text-shadow:0 2px 8px #000}#phaseBanner strong{display:block;color:var(--gold);font:700 22px 'Space Grotesk';margin-bottom:7px}#phaseBanner span{font-size:12px;line-height:1.6;display:block;max-width:260px}#map{position:absolute;right:14px;top:68px;width:152px;border:1px solid #ffffff30;border-radius:15px;padding:10px;background:#101d28e6}#map>div{font-size:9px;letter-spacing:1px;font-weight:700;color:#c3d2d5}#map>div span{float:right}#mapCanvas{display:block;width:100%;height:118px}#map small{display:block;font-size:9px;line-height:1.5}#cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;color:#ffffffa0}#targetPrompt{position:absolute;left:50%;top:59%;transform:translateX(-50%);padding:8px 15px;background:#10202de6;border-radius:20px;font-size:12px;white-space:nowrap}#targetPrompt:empty{display:none}.gameButton{pointer-events:auto;border:1px solid #ffffff35;background:#0e202bd9;color:var(--paper);border-radius:12px;padding:11px 13px;font-size:12px}#torch{position:absolute;left:16px;top:175px}#leaveGame{position:absolute;left:16px;top:226px}#joystick{position:absolute;left:30px;bottom:45px;width:118px;height:118px;border:2px solid #ffffff55;border-radius:50%;background:#ffffff0b;pointer-events:none}#knob{position:absolute;left:50%;top:50%;margin:-24px;width:48px;height:48px;border-radius:50%;background:#d9e6e577}.action{pointer-events:auto;position:absolute;border:2px solid #ffffff99;border-radius:50%;color:white;font:700 15px 'Space Grotesk';width:84px;height:84px;touch-action:none}.use{right:28px;bottom:48px;background:#b8903bdb}.tag{right:120px;bottom:122px;background:#bb5148dd}.action:active{transform:scale(.94)}#controlsHint{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);color:#ffffff80;font-size:10px;white-space:nowrap}#hiddenBanner,#caughtBanner{position:absolute;left:50%;top:37%;transform:translateX(-50%);text-align:center;width:min(360px,80vw);color:#b8e4ca;background:#112d28df;padding:18px;border:1px solid #83c4ae66;border-radius:16px;font:700 23px 'Space Grotesk'}#hiddenBanner span,#caughtBanner span{display:block;font:400 12px/1.6 'DM Sans';margin-top:8px;color:#d2dfdc}#caughtBanner{color:var(--red);background:#321e1fdf;border-color:#e8776766}.resultCard{max-width:600px;margin:8vh auto;text-align:center}.resultCard h1{font-size:48px;color:var(--gold);letter-spacing:-2px}.resultCard>p{color:var(--muted)}#resultPoints{font:700 28px 'Space Grotesk';color:var(--green);padding:22px}#resultRoster{text-align:left}.resultRow{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:13px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#f0d08b;color:#18262c;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:700;opacity:0;z-index:20;max-width:90vw;text-align:center;pointer-events:none;transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}#offline{position:fixed;inset:0;z-index:30;background:#10191fe8;display:flex;align-items:center;justify-content:center;flex-direction:column;font:700 24px 'Space Grotesk';padding:24px;text-align:center}#offline small{display:block;margin-top:15px;max-width:300px}@media(max-width:750px){.screen{padding:22px 18px}.brandbar{margin-bottom:42px}.live{display:none}.hero{display:block}.houseArt{display:none}.hero h1{font-size:39px;letter-spacing:-1.7px}.hero p{font-size:13px}.homeGrid{grid-template-columns:1fr}.panel{padding:21px}.identity input{width:140px}.identity label{gap:8px}.points{font-size:10px}.points b{font-size:18px}.teamGrid{grid-template-columns:1fr;gap:12px}.lobbyCard h1{font-size:29px}.resultCard h1{font-size:38px}#controlsHint{display:none}#torch{top:190px}#leaveGame{top:240px}}@media(max-height:520px){#map{top:55px;width:125px}#mapCanvas{height:82px}#phaseBanner{top:60px}#phaseBanner strong{font-size:17px}#torch{top:135px}#leaveGame{top:182px}#joystick{bottom:18px;width:95px;height:95px}.action{width:66px;height:66px}.use{bottom:20px}.tag{bottom:90px;right:100px}.gameTop{padding:8px 12px}.resultCard{margin:0 auto}}