@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#07121f;--panel:#0c1b2a;--panel2:#0f2434;--stroke:#203345;--text:#edf7fb;--muted:#90a4b6;--mint:#67eac8;--purple:#a8b4ff;--r:19px;--shadow:0 18px 50px #0003}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 'DM Sans',system-ui,sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(#0008,transparent 84%)}.glow{position:fixed;z-index:-1;pointer-events:none;width:400px;height:400px;filter:blur(110px);border-radius:50%;opacity:.12}.glow-a{background:#53e6bf;top:5%;left:-160px}.glow-b{background:#707de5;right:-190px;top:24%}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.app-shell{max-width:1440px;margin:auto;padding:0 34px}.topbar{height:94px;border-bottom:1px solid #223446;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:44px;height:44px;border:1px solid #317b75;background:#143b3c;color:var(--mint);display:grid;place-items:center;border-radius:13px}.brand-icon svg{width:27px;height:27px}.brand b,.brand span{display:block;line-height:1.3}.brand b{font:700 18px/1.1 'Space Grotesk',sans-serif;letter-spacing:1.5px}.brand span{font-size:10px;letter-spacing:1.2px;color:var(--muted);margin-top:5px}.top-actions{display:flex;align-items:center;gap:14px}.connection-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#bccbd4}.connection-pill i,.live-dot{width:7px;height:7px;border-radius:50%;background:#f0b866;display:inline-block;box-shadow:0 0 9px #f0b86655}.connection-pill.ok i,.live-dot{background:#69ebbd;box-shadow:0 0 10px #69ebbd80}.connection-pill.error i{background:#fa8893}.button{appearance:none;border:0;border-radius:11px;min-height:44px;padding:10px 18px;font-weight:800;transition:transform .15s,background .15s;display:inline-flex;gap:10px;align-items:center;justify-content:center}.button:not(:disabled):active,.icon-button:active{transform:scale(.97)}.button.primary{background:var(--mint);color:#072020}.button.primary:hover{background:#8cf4d8}.button.secondary{background:#173e46;color:#adffea;border:1px solid #356b6f}.button.ghost{background:#ffffff07;border:1px solid var(--stroke);color:var(--text)}.button.ghost:hover{background:#ffffff12}.button.full{width:100%}.button.small{min-height:34px;padding:6px 14px;font-size:12px}.icon-button{border:1px solid #375263;background:#122c3d;border-radius:9px;color:#d9fef4;min-width:32px;height:32px;font-size:21px}.start-layout{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(26px,6vw,100px);min-height:calc(100vh - 170px);padding:70px 30px 95px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.1px;color:#99bfb9}.spark{color:var(--mint);font-size:18px;padding-right:5px}.intro h1,.game-heading h1{font-family:'Space Grotesk',sans-serif;letter-spacing:-2.9px;line-height:1.11}.intro h1{font-size:clamp(37px,4.4vw,67px);margin:22px 0 22px}.intro h1 em,.game-heading h1 em{font-style:normal;color:var(--mint)}.lead{font-size:16px;max-width:620px;color:#b3c4d1;line-height:1.85}.lead strong{color:#e8f5f9}.highlights{display:flex;gap:35px;margin-top:38px}.highlights div{display:flex;flex-direction:column;border-left:2px solid #3c6270;padding-left:17px}.highlights strong{font:700 31px/1 'Space Grotesk';color:#dff5f5}.highlights span{color:#90aab6;font-size:12px;margin-top:8px}.intro-note{font-size:12px;color:#aaccc6;background:#14404360;border:1px solid #275e61;padding:12px 16px;border-radius:11px;margin-top:36px;max-width:520px}.intro-note span{color:#76e4c7;margin-right:7px}.hero-graphic{height:156px;overflow:hidden;opacity:.65;margin-top:14px;max-width:580px}.hero-graphic svg{width:100%;height:100%}.card{background:linear-gradient(155deg,#112637ee,#0b1c2beb);border:1px solid #23394b;border-radius:var(--r);box-shadow:var(--shadow)}.entry-panel{padding:35px;max-width:510px;width:100%;justify-self:end}.entry-top{display:flex;align-items:flex-start;gap:14px}.entry-top h2{margin:0;font:700 22px/1.3 'Space Grotesk'}.entry-top p{margin:7px 0 0;color:var(--muted);font-size:13px}.icon-chip{background:#1c4c4b;border:1px solid #42897a;color:var(--mint);font-size:27px;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;flex-shrink:0}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#081723;border:1px solid #293f4d;padding:5px;border-radius:12px;margin:32px 0 24px}.mode{border:0;border-radius:9px;background:transparent;color:#9bb1bb;font-weight:800;padding:11px}.mode.active{background:#24453d;color:#a2ffe4;box-shadow:inset 0 0 0 1px #3b816e}.field-label{display:block;color:#bdccd5;font-size:12px;font-weight:800;margin:19px 0 8px}.field{width:100%;min-height:46px;background:#081725;border:1px solid #345064;border-radius:10px;color:#edf6fc;padding:11px 13px;outline:0}.field::placeholder{color:#577084}select.field{cursor:pointer}textarea.field{resize:vertical}.code-field{text-transform:uppercase;letter-spacing:4px;font-family:monospace;font-weight:800;font-size:18px}.role-preview{font-size:12px;background:#102f35;color:#8aeaca;border:1px solid #255658;border-radius:9px;padding:10px 12px;margin-top:10px;min-height:41px}.entry-panel .button.full{margin-top:25px}.form-foot{color:#7e97a8;text-align:center;font-size:11px;margin-top:19px}.setup-notice{background:#49331d;border:1px solid #a76c32;padding:13px;border-radius:10px;font-size:12px;margin-top:20px}.setup-notice p{margin:6px 0 0}.game-screen{padding:44px 0 65px}.game-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}.game-heading h1{font-size:clamp(30px,3vw,45px);margin:10px 0 8px;letter-spacing:-1.7px}.muted{color:var(--muted)}.game-heading .muted{margin:0;font-size:14px}.room-box{background:#122b38;border:1px solid #37616b;padding:14px 19px;border-radius:14px;min-width:190px}.room-label,.metric-strip span{font-size:10px;font-weight:800;color:#8da4b1;letter-spacing:1.4px}.code-row{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:3px 0}.code-row strong{letter-spacing:3px;font:700 22px 'Space Grotesk'}.room-box small{color:#8ce9d0;font-size:11px}.room-links{display:flex;flex-wrap:wrap;column-gap:15px;row-gap:3px;margin-top:9px}.room-links button{border:0;background:transparent;padding:0;font-size:10px;color:#b2d8e0;text-decoration:underline;text-underline-offset:3px}.metric-strip{margin-top:27px;margin-bottom:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric-strip>div{border:1px solid #283d4d;border-radius:14px;background:#0c1d2b;padding:14px 18px;display:flex;flex-direction:column;gap:7px}.metric-strip strong{font-size:17px;line-height:1.3}.phase-pill{color:#9cebd3}.time-display{font:700 23px/1.2 'Space Grotesk'!important;letter-spacing:1px}.game-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,1fr);gap:19px;align-items:start}.left-stack,.right-stack{display:grid;gap:19px;min-width:0}.play-card,.participants-card,.phase-card,.chat-card,.evaluation-card{padding:23px}.section-heading,.chat-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:21px}.section-heading h2,.phase-card h2,.chat-header h2{font:700 19px/1.25 'Space Grotesk';letter-spacing:-.4px;margin:0}.section-heading p,.chat-header p{margin:5px 0 0;color:var(--muted);font-size:12px}.section-counter{font-size:10px;color:#81b0bb;letter-spacing:1px;white-space:nowrap}.board{position:relative;min-height:355px;border:1px solid #244257;border-radius:13px;background:radial-gradient(ellipse at center,#1e48554d,#091622 73%);display:flex;align-items:center;justify-content:center;overflow:hidden}.board:before{content:"";pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(#80adba25 1px,transparent 1px);background-size:20px 20px;opacity:.7}.board-center{text-align:center;padding:30px;z-index:1}.board-symbol{display:block;font-size:68px;color:#5eaaa9;line-height:1.2}.board-center h3{font-size:18px;margin:4px 0 4px}.board-center p{color:var(--muted);font-size:12px;margin:0}.blind-panel{z-index:1;text-align:center;width:100%;padding:17px}.blind-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#a5caca}.local-svg{width:100%;height:205px;display:block}.sensor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:430px;margin:0 auto}.sensor-grid>div{border:1px solid #2b5660;border-radius:10px;background:#0b2530a8;padding:9px;display:flex;align-items:center;flex-direction:column}.sensor-grid span{font-size:11px;color:#9eb7c2}.sensor-grid strong{font:700 22px 'Space Grotesk';color:#d7f8ef}.microcopy{font-size:11px;line-height:1.6;color:#7f9aab}.blind-panel .microcopy{margin:12px auto 0;max-width:480px}.bend-hint{font-size:11px;color:#c1dfd9;background:#14343d;border:1px solid #30606a;border-radius:9px;padding:7px 13px;margin:12px auto 0;width:max-content;max-width:100%}.result-svg{z-index:1;display:block;width:100%;height:355px}.movement-controls{border-top:1px solid #274353;margin-top:19px;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:20px}.controls-copy{max-width:460px}.controls-copy strong,.controls-copy span{display:block}.controls-copy span{font-size:12px;color:#91aaba;margin-top:5px}.dpad{display:grid;grid-template-columns:repeat(3,39px);grid-template-rows:repeat(2,39px);gap:5px;flex:0 0 auto}.dpad button{background:#1b4d4c;border:1px solid #387e71;color:#c8fdea;border-radius:8px;font-weight:800;font-size:21px;padding:0}.dpad button:hover{background:#327063}.participants-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.participant{display:flex;gap:10px;padding:10px;background:#0a1b29;border:1px solid #1d3546;border-radius:10px;min-width:0;align-items:center}.participant.online{border-color:#38645b}.participant.me{background:#163a3c}.avatar{height:33px;width:33px;border-radius:10px;display:grid;place-items:center;background:#283c54;color:#c3ddf7;font:700 12px 'Space Grotesk';flex:0 0 auto}.participant.online .avatar{background:#1b544a;color:#acf5d8}.participant div:nth-child(2){min-width:0}.participant strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.participant small{color:#7c98ac;font-size:10px;display:block}.participant .status{width:7px;height:7px;background:#536579;border-radius:50%;margin-left:auto;flex:0 0 auto}.participant.online .status{background:#62ddb3}.participant.away .status{background:#ecc276}.phase-card h2{margin-bottom:20px}.phase-steps{display:grid;gap:11px}.phase-step{display:flex;align-items:center;gap:12px;min-height:48px}.phase-index{width:31px;height:31px;border:1px solid #354b5a;border-radius:50%;display:grid;place-items:center;color:#7e96a7;font-size:12px;font-weight:800;flex:0 0 auto}.phase-step.done .phase-index{background:#225447;border-color:#367c66;color:#c7ffed}.phase-step.current .phase-index{background:#5ae2be;border-color:#8cfddd;color:#0d3530}.phase-step strong,.phase-step small{display:block}.phase-step strong{font-size:12px}.phase-step small{font-size:10px;color:#829faf}.phase-step.current strong{color:#8bffdb}.host-controls{margin-top:24px;border-top:1px solid #2b4353;padding-top:16px;display:grid;gap:8px}.host-label{letter-spacing:1px;color:#8aabba;font-size:10px;font-weight:800}.phase-card #readyButton{margin-top:18px}.phase-card .microcopy{margin-bottom:0}.chat-card{display:flex;flex-direction:column;min-height:555px}.chat-header{margin-bottom:16px}.chat-number{color:#7f9daa;font-size:10px;white-space:nowrap}.chat-list{overflow-y:auto;flex:1;min-height:265px;max-height:380px;display:flex;flex-direction:column;gap:10px;padding-right:5px}.empty-chat{color:#8399aa;text-align:center;padding:60px 15px;font-size:12px}.chat-item{display:flex;gap:8px;align-items:flex-start}.chat-avatar{border-radius:10px;width:29px;height:29px;display:grid;place-items:center;background:#284257;color:#a4c8ea;font-size:10px;font-weight:800;flex:0 0 auto}.chat-item.mine .chat-avatar{background:#28584f;color:#a8f4d9}.chat-bubble{background:#12293a;border:1px solid #254252;border-radius:10px;padding:8px 10px;max-width:calc(100% - 35px);overflow-wrap:anywhere}.chat-item.mine .chat-bubble{background:#143736;border-color:#2b615b}.chat-meta{color:#a4c7ca;font-size:10px;font-weight:800}.chat-meta time{color:#7896a3;font-weight:400;margin-left:9px}.chat-text{font-size:12px;color:#dae8f0;white-space:pre-wrap;margin-top:2px}.quick-messages{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}.quick-messages button{background:#0e2937;border:1px solid #315466;border-radius:25px;color:#a2ccd4;font-size:10px;padding:6px 9px}.chat-form{display:flex;gap:8px;margin-top:11px}.chat-form input{background:#071622;border:1px solid #315060;border-radius:9px;color:#e8fbff;padding:10px 12px;min-width:0;flex:1;font-size:12px}.chat-form .button{min-width:43px;padding:8px;font-size:24px}.chat-card .microcopy{margin:14px 0 0}.result-summary{margin-top:15px;padding:14px;background:#15373b;border:1px solid #356568;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}.result-summary span,.result-summary small,.result-summary strong{display:block}.result-summary span{color:#9bd3ca;font-size:10px;letter-spacing:1px}.result-summary strong{font:700 31px 'Space Grotesk';color:#d5fff1}.result-summary small{font-size:10px;color:#84a9ab}.scoring-fields{display:grid;gap:7px}.score-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0a1c28;border:1px solid #263e49;padding:9px 11px;border-radius:9px}.score-row label{font-size:12px;line-height:1.25}.score-row label small{display:block;color:#8cabb7;margin-top:4px}.score-row select{background:#163446;border:1px solid #345263;border-radius:8px;color:#e6f4fc;padding:8px;width:138px;font-size:11px;flex-shrink:0}.score-footer{display:flex;justify-content:space-between;margin-top:13px;padding:15px 2px;border-top:1px solid #294452;align-items:center}.score-footer strong{font:700 23px 'Space Grotesk';color:#baf6e7}.eval-actions{display:flex;flex-wrap:wrap;gap:10px}.debrief-title{font:700 16px 'Space Grotesk';margin:24px 0 12px}.debrief-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.debrief-grid div{border:1px solid #294554;background:#102736;border-radius:10px;padding:11px;font-size:12px;color:#c7d9e5}.debrief-grid span{color:#6feecb;font-size:10px;font-weight:800;display:block;margin-bottom:3px}.reflection-form{margin-top:18px}.reflection-form textarea{min-height:88px}.reflection-form .button{margin-top:9px}.footer{border-top:1px solid #1e3243;padding:25px 0 32px;color:#7791a1;font-size:11px;display:flex;gap:20px;justify-content:space-between}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:#20453d;color:#d9fff4;border:1px solid #518779;padding:12px 19px;border-radius:11px;box-shadow:0 14px 35px #0007;transition:transform .25s;z-index:20;max-width:min(500px,90vw);font-size:13px;text-align:center}.toast.show{transform:translate(-50%,0)}.toast.error{background:#492c37;color:#ffe9eb;border-color:#995864}.help-dialog{border:1px solid #3b6072;border-radius:20px;background:#102635;color:#e9faff;max-width:610px;width:calc(100vw - 35px);padding:26px;box-shadow:0 25px 110px #000b}.help-dialog::backdrop{background:#020d17c9}.dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.dialog-head h2{margin:0;font:700 24px 'Space Grotesk'}.help-dialog ol{padding-left:22px;font-size:13px;line-height:1.9;color:#bdd2df}.help-dialog li{margin:10px 0}.dialog-note{background:#163f3e;border:1px solid #2f6763;border-radius:10px;padding:12px;font-size:12px;color:#a4d8ce;margin:20px 0}.help-dialog .button.full{margin-top:11px}[hidden]{display:none!important}
@media (max-width:1050px){.app-shell{padding:0 22px}.start-layout{padding:60px 6px;gap:25px}.entry-panel{padding:25px}.game-grid{grid-template-columns:minmax(0,1.35fr) minmax(270px,.9fr)}.section-counter{display:none}.highlights{gap:15px}}
@media (max-width:760px){.topbar{height:74px}.brand b{font-size:15px}.brand span{font-size:8px}.connection-pill{font-size:0;gap:0}.connection-pill i{width:10px;height:10px}.hide-mobile{display:none}.start-layout{grid-template-columns:1fr;min-height:0;padding:53px 0 65px}.intro h1{font-size:43px;letter-spacing:-2px}.intro .lead{font-size:14px}.hero-graphic{display:none}.intro-note{margin-top:25px}.entry-panel{justify-self:stretch;max-width:none}.game-screen{padding:34px 0}.game-grid{grid-template-columns:1fr}.game-heading{align-items:flex-start}.game-heading h1{font-size:32px}.room-box{min-width:140px;padding:11px}.code-row strong{font-size:17px;letter-spacing:1px}.metric-strip{grid-template-columns:1fr 1fr}.participants-grid{grid-template-columns:1fr 1fr}.chat-card{min-height:500px}.chat-list{max-height:430px}.footer{font-size:10px;flex-direction:column;gap:3px}.debrief-grid{grid-template-columns:1fr}}
@media (max-width:450px){.app-shell{padding:0 14px}.intro h1{font-size:36px}.intro .lead{font-size:13px}.highlights{gap:8px}.highlights div{padding-left:9px}.highlights strong{font-size:25px}.highlights span{font-size:10px}.entry-panel{padding:20px}.game-heading h1{font-size:27px}.game-heading .eyebrow{font-size:9px}.game-heading .muted{font-size:11px}.room-box{min-width:120px;padding:9px}.room-label{font-size:8px}.code-row strong{font-size:14px}.metric-strip>div{padding:10px}.metric-strip strong{font-size:13px}.metric-strip .time-display{font-size:19px!important}.play-card,.participants-card,.phase-card,.chat-card,.evaluation-card{padding:15px}.board{min-height:310px}.result-svg{height:310px}.section-heading h2,.phase-card h2,.chat-header h2{font-size:17px}.participants-grid{gap:7px}.participant{gap:6px;padding:7px}.participant strong{font-size:10px}.avatar{width:26px;height:26px;font-size:9px}.movement-controls{flex-direction:column;align-items:stretch}.dpad{align-self:center}.result-summary{flex-direction:column;align-items:stretch}.result-summary .button{align-self:stretch}}


.demo-cta{margin:15px 0 0;background:linear-gradient(120deg,#21473c,#172a45);border:1px solid #3e8572;border-radius:13px;padding:14px;display:flex;gap:15px;align-items:center;justify-content:space-between}
.demo-cta strong{font-size:14px;color:#c2ffe9}.demo-cta p{margin:4px 0 0;color:#acc7c8;font-size:11px;line-height:1.5}.demo-cta .button{flex-shrink:0;font-size:12px;min-height:40px;text-decoration:none}
.demo-banner{margin-top:22px;background:#0e332b;color:#9ef2d5;border:1px solid #2b6e5b;padding:12px;border-radius:10px;font-size:12px;font-weight:700}
.back-link{display:block;margin-top:18px;color:#9fead6;font-size:12px;text-align:center;text-underline-offset:3px}
.demo-toolbar{padding:14px 17px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.demo-toolbar-label{margin-right:auto;flex:1 1 160px}.demo-toolbar-label strong,.demo-toolbar-label span{display:block}.demo-toolbar-label strong{color:#8df4d6;font-size:12px;letter-spacing:.7px}.demo-toolbar-label span{color:#90a9b9;font-size:11px;margin-top:5px}
.demo-toolbar label{font-size:10px;color:#a7c0cb;font-weight:800;min-width:142px;flex:1 1 150px}.demo-toolbar label .field{font-size:12px;padding:7px 10px;min-height:39px;margin-top:5px}
.demo-toolbar .button{font-size:11px;min-height:40px;flex:0 0 auto}
.demo-inspector-note{background:#513b1f;border:1px solid #94703a;color:#ffe0a7;border-radius:9px;padding:10px 14px;margin-bottom:17px;font-size:12px}
.demo-preview-label{font-size:11px;font-weight:700;letter-spacing:1px;color:#facb8c}
.demo-entry .button.full{margin-top:25px}.demo-entry .form-foot{font-size:12px}
@media(max-width:760px){.demo-cta{flex-direction:column;align-items:stretch}.demo-cta .button{width:100%}.demo-toolbar{gap:9px}.demo-toolbar-label{flex:1 0 100%}.demo-toolbar label{flex:1 1 45%;min-width:120px}.demo-toolbar .button{flex:1 1 45%}}