:root{--ink:#161815;--muted:#687068;--paper:#faf7ef;--line:#1618151f;--green:#1d9a62;--red:#d9483b;--blue:#2b6fb6;--yellow:#f0b429;--violet:#7b61c8;--coral:#ed6a55;--field:#78b957;--field-dark:#347447;--sky:#9bd7ed}*{box-sizing:border-box}html,body{min-height:100%;color:var(--ink);letter-spacing:0;background:radial-gradient(circle at 18% 20%,#f0b42938,#0000 26%),linear-gradient(135deg,#eef4f0 0%,#dcebe7 46%,#f5f0e4 100%);margin:0;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:28px;line-height:1}h2{margin-bottom:0;font-size:21px;line-height:1.08}.prototypeShell{grid-template-columns:minmax(330px,430px) minmax(260px,360px);justify-content:center;align-items:center;gap:44px;min-height:100vh;padding:28px;display:grid}.phoneFrame{width:min(100%,430px)}.phoneBezel{aspect-ratio:390/844;background:#101211;border:11px solid #101211;border-radius:52px;width:100%;position:relative;overflow:hidden;box-shadow:0 28px 70px #16181542}.dynamicIsland{z-index:6;background:#101211;border-radius:999px;width:116px;height:34px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.appScreen{background:linear-gradient(#9bd7edeb 0 26%,#0000 26%),linear-gradient(#f9f4e7 0%,#eef5ed 100%);border-radius:40px;grid-template-rows:46px auto 1fr;display:grid;position:absolute;inset:0;overflow:hidden}.statusBar,.appTop,.contentStack{z-index:1;position:relative}.statusBar{justify-content:space-between;align-items:end;padding:0 25px 8px;font-size:13px;font-weight:800;display:flex}.statusIcons{align-items:center;gap:5px;display:flex}.statusIcons i{background:var(--ink);border-radius:3px;width:13px;height:8px}.statusIcons i:nth-child(2){border-radius:50%;width:10px;height:10px}.statusIcons i:nth-child(3){width:18px}.appTop{justify-content:space-between;align-items:center;gap:14px;padding:8px 22px 12px;display:flex}.topActions{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.languageSwitch{background:#fffdfacc;border-radius:6px;gap:2px;padding:2px;display:flex}.languageSwitch button{color:var(--muted);background:0 0;border-radius:4px;padding:4px 7px;font-size:10px;font-weight:900}.languageSwitch button.active{background:var(--ink);color:#fff}.kicker,.overline{color:var(--muted);text-transform:uppercase;margin:0 0 5px;font-size:11px;font-weight:900}.iconButton{width:44px;height:44px;color:var(--ink);background:#fffdfa;border:2px solid #1618151f;border-radius:50%;flex:0 0 44px;font-size:13px;font-weight:900}.backButton{font-size:22px;line-height:1}.contentStack{flex-direction:column;gap:12px;min-height:0;padding:0 18px 14px;display:flex;overflow:auto}.contentStack::-webkit-scrollbar{display:none}.roleChoices{gap:10px;display:grid}.roleChoice{border:2px solid var(--ink);min-height:78px;color:var(--ink);text-align:left;border-radius:8px;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:12px 14px;display:grid}.hostChoice{background:#fffdfa}.playerChoice{background:#1d9a6224}.roleChoice>span,.joinIcon{background:var(--ink);color:#fff;border-radius:50%;place-items:center;width:44px;height:44px;font-size:20px;font-weight:900;display:grid}.roleChoice div{gap:3px;min-width:0;display:grid}.roleChoice strong{font-size:17px}.roleChoice small{color:var(--muted);font-size:12px;font-weight:800}.roleChoice b{font-size:22px}.joinPanel{border:1px solid var(--line);background:#fffdfaf0;border-radius:8px;justify-items:start;gap:14px;padding:18px;display:grid}.joinPanel h2{font-size:22px}.roomCodeInput{border:2px solid var(--ink);width:100%;min-height:64px;color:var(--ink);letter-spacing:4px;text-align:center;text-transform:uppercase;background:#fff;border-radius:8px;font-size:30px;font-weight:900}.permissionNote{color:var(--muted);margin:0;font-size:13px;font-weight:800}.compactRoomCard{padding:12px 14px}.compactRoomCard strong{font-size:28px}.gameScene{background:linear-gradient(180deg, var(--sky) 0 44%, transparent 44%), linear-gradient(180deg, var(--field) 0%, var(--field-dark) 100%);border:2px solid #16181529;border-radius:8px;min-height:228px;position:relative;overflow:hidden;box-shadow:0 10px 25px #16181514}.gameScene.compact{min-height:190px}.sceneSky{height:94px;position:relative}.finishArch{border:3px solid var(--ink);background:#fff5d6;border-bottom:0;border-radius:8px 8px 0 0;place-items:center;width:72px;height:78px;font-size:12px;font-weight:900;display:grid;position:absolute;top:20px;right:22px}.doll{border:3px solid var(--ink);background:var(--coral);border-radius:28px 28px 10px 10px;width:54px;height:78px;transition:transform .18s;position:absolute;top:18px;left:24px}.doll.red{transform:rotate(8deg)}.doll span{border:3px solid var(--ink);background:#ffd4b5;border-radius:50%;width:32px;height:32px;position:absolute;top:-27px;left:8px}.doll span:before,.doll span:after{content:"";background:var(--ink);border-radius:50%;width:5px;height:5px;position:absolute;top:13px}.doll span:before{left:8px}.doll span:after{right:8px}.sceneField{background:repeating-linear-gradient(90deg,#ffffff59 0 3px,#0000 3px 42px),linear-gradient(#ffffff1f,#0000);position:absolute;inset:104px 0 0}.trackLine{background:#fff9;height:2px;position:absolute;top:43px;left:0;right:0}.trackLine.second{top:88px}.finishStripe{background:repeating-linear-gradient(0deg, white 0 9px, var(--ink) 9px 18px);width:12px;position:absolute;top:0;bottom:0;right:9%}.runner{border:3px solid var(--ink);background:var(--blue);border-radius:16px 16px 7px 7px;width:30px;height:36px;transition:left .18s;position:absolute;top:56px;transform:translate(-50%)}.runner span{border:3px solid var(--ink);background:#ffd4b5;border-radius:50%;width:16px;height:16px;position:absolute;top:-19px;left:5px}.runnerB{background:var(--yellow);top:16px}.runnerC{background:var(--violet);top:102px}.primaryPanel,.roomCard,.settingsPanel,.distancePanel,.signalCard,.resultHero{border:1px solid var(--line);background:#fffdfaeb;border-radius:8px;box-shadow:0 8px 22px #16181512}.primaryPanel,.settingsPanel,.distancePanel,.resultHero{padding:16px}.introPanel p:last-of-type{color:var(--muted);margin-bottom:16px;font-size:14px;line-height:1.45}.ctaRow,.hostControls{grid-template-columns:1fr 1fr;gap:10px;display:grid}.chantControl{display:grid}.chantButton{border:3px solid var(--ink);background:var(--red);color:#fff;text-align:left;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;grid-template-rows:auto auto;grid-template-columns:72px 1fr;align-items:center;column-gap:12px;min-height:178px;padding:22px;display:grid}.chantButton.holding{background:var(--green);transform:translateY(2px);box-shadow:inset 0 0 0 4px #fff3}.chantButton>span{width:72px;height:72px;color:var(--ink);background:#fff;border-radius:50%;grid-row:1/3;place-items:center;font-size:30px;font-weight:900;display:grid}.chantButton strong{align-self:end;font-size:26px}.chantButton small{opacity:.9;align-self:start;font-size:14px;font-weight:800}.lobbyStatus{border:2px solid var(--green);background:#1d9a621f;border-radius:8px;align-items:center;gap:12px;min-height:68px;padding:12px 14px;display:flex}.lobbyStatus>span{background:var(--green);color:#fff;border-radius:50%;flex:0 0 34px;place-items:center;width:34px;height:34px;font-weight:900;display:grid}.lobbyStatus div{gap:3px;display:grid}.lobbyStatus small,.waitingMessage{color:var(--muted);font-size:12px;font-weight:800}.startGameButton{min-height:58px;font-size:17px}.waitingMessage{border:1px solid var(--line);background:#fffdfadb;border-radius:8px;place-items:center;min-height:58px;display:grid}.primaryButton,.secondaryButton,.smallButton,.greenButton,.redButton{border-radius:8px;min-height:46px;padding:0 14px;font-weight:900}.primaryButton{background:var(--ink);color:#fff}.primaryButton:disabled{cursor:not-allowed;opacity:.4}.secondaryButton,.smallButton{border:1px solid var(--line);color:var(--ink);background:#fffdfa}.fullButton{width:100%}.featureGrid,.hpPanel{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.metric{border:1px solid var(--line);background:#fffdfad1;border-radius:8px;align-content:center;gap:4px;min-height:72px;padding:11px;display:grid}.metric span,.playerRow small,.rowStatus{color:var(--muted);font-size:12px;font-weight:800}.metric strong{font-size:22px}.roomCard,.panelHeader,.signalCard,.playerRow,.toggleRow{justify-content:space-between;align-items:center;gap:12px;display:flex}.roomCard{padding:15px}.roomCard strong{letter-spacing:2px;font-size:36px}.segmentedControl{background:#16181514;border-radius:8px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.segmentedControl button{min-height:40px;color:var(--muted);background:0 0;border-radius:6px;font-weight:900}.segmentedControl button.active{color:var(--ink);background:#fffdfa;box-shadow:0 3px 10px #16181514}.playerList{gap:8px;display:grid}.playerRow{border:1px solid var(--line);background:#fffdfae0;border-radius:8px;min-height:58px;padding:9px 11px}.playerRow>div{gap:2px;min-width:0;margin-right:auto;display:grid}.avatar{border:2px solid var(--ink);color:#fff;border-radius:50%;flex:0 0 38px;place-items:center;width:38px;height:38px;font-weight:900;display:grid}.avatar.coral{background:var(--coral)}.avatar.blue{background:var(--blue)}.avatar.yellow{background:var(--yellow);color:var(--ink)}.avatar.violet{background:var(--violet)}.settingsPanel{gap:8px;display:grid}.toggleRow{min-height:44px;color:var(--ink);text-align:left;background:0 0;font-weight:900}.toggleRow i{background:#16181529;border-radius:999px;flex:0 0 48px;width:48px;height:28px;position:relative}.toggleRow i:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .16s;position:absolute;top:3px;left:3px;box-shadow:0 2px 5px #16181533}.toggleRow i.checked{background:var(--green)}.toggleRow i.checked:after{transform:translate(20px)}.signalCard{padding:14px}.signalCard>span{border:4px solid var(--ink);border-radius:50%;flex:0 0 58px;width:58px;height:58px;box-shadow:0 0 0 10px #1618150f}.signalCard.green>span,.greenButton{background:var(--green);color:#fff}.signalCard.red>span,.redButton{background:var(--red);color:#fff}.distancePanel{gap:5px;display:grid}.distancePanel strong{font-size:64px;line-height:.95}.distancePanel span{color:var(--muted);font-weight:900}.motionStatus{border:2px solid var(--ink);border-radius:8px;align-items:center;gap:12px;min-height:64px;padding:12px 14px;display:flex}.motionStatus.detected{background:#1d9a6221}.motionStatus.paused{background:#d9483b1a}.motionDot{background:var(--green);border-radius:50%;flex:0 0 18px;width:18px;height:18px;box-shadow:0 0 0 6px #1d9a6224}.motionStatus.paused .motionDot{background:var(--red);box-shadow:0 0 0 6px #d9483b21}.motionStatus div{gap:3px;display:grid}.motionStatus strong{font-size:16px}.motionStatus small{color:var(--muted);font-size:11px;font-weight:800}input[type=range]{width:100%;height:38px;accent-color:var(--ink)}.pill{color:var(--green);white-space:nowrap;background:#1d9a6221;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900}.resultHero{text-align:center;background:linear-gradient(#f0b4292e,#fffdfaeb),#fffdfa;align-content:center;justify-items:center;min-height:180px;display:grid}.resultHero span{border:3px solid var(--ink);background:var(--yellow);border-radius:50%;place-items:center;width:58px;height:58px;font-size:28px;font-weight:900;display:grid}.resultHero p{color:var(--muted);margin:8px 0 0;font-size:13px;font-weight:800}.podium{grid-template-columns:repeat(3,1fr);align-items:end;gap:10px;height:160px;display:grid}.podium div{border:1px solid var(--line);background:#fffdfae6;border-radius:8px 8px 0 0;align-content:start;justify-items:center;gap:8px;padding:12px 6px;display:grid}.podium div:first-child{height:112px}.podium div:nth-child(2){background:#f0b42938;height:148px}.podium div:nth-child(3){height:92px}.podium span{background:var(--ink);color:#fff;border-radius:50%;place-items:center;width:30px;height:30px;font-weight:900;display:grid}.mockupNotes{max-width:360px}.mockupNotes h2{margin-bottom:12px;font-size:34px}.mockupNotes p:last-child{color:var(--muted);line-height:1.55}@media (max-width:820px){.prototypeShell{grid-template-columns:1fr;gap:18px;padding:14px}.phoneFrame{justify-self:center;max-width:410px}.mockupNotes{order:-1;justify-self:center;max-width:410px}.mockupNotes h2{font-size:24px}}@media (max-width:430px){.prototypeShell{min-height:100dvh;padding:0}.mockupNotes{display:none}.phoneFrame,.phoneBezel{aspect-ratio:auto;width:100%;height:100dvh}.phoneBezel{border:0;border-radius:0}.appScreen{border-radius:0}}.demoBanner{color:#513d12;background:#fff1ce;border-radius:8px;margin:0;padding:9px 12px;font-size:13px;line-height:1.35}.languageSwitch button{min-width:44px;min-height:44px}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #2367a8}.invitationPage{place-items:center;min-height:100dvh;padding:20px;display:grid}.invitationCard{background:#fff;border-radius:16px;width:min(100%,440px);padding:28px}.invitationCard h1{line-height:1.2}.invitationCard p{line-height:1.5}.invitationCode{letter-spacing:5px;font-size:38px;font-weight:900}.invitationCard a{text-align:center;color:#fff;background:#17221d;border-radius:8px;margin:20px 0;padding:18px;font-weight:700;text-decoration:none;display:block}@media (max-height:680px){.view-home .gameScene{display:none}}