:root{--page-background:#171d1a;color:#f4f1e9;background:var(--page-background);font-synthesis:none;text-rendering:optimizeLegibility;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{margin:0}.visually-hidden{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;padding:0}main{display:flex;flex-direction:column;gap:40px;max-width:1280px;min-height:100svh;margin-inline-start:auto;margin-inline-end:auto;padding:clamp(24px,6vw,72px)}header{display:flex;justify-content:space-between;align-items: center;gap:24px}.wordmark{letter-spacing:-1px;font-size:32px;font-weight:800;line-height:.9}p,h1,h2{margin:0}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:24px}.game-card{overflow:hidden;text-decoration:none;color:inherit;border:1px solid #354035;border-radius:16px;transition:border-color .15s}.game-card:hover{border-color:#c7ee87}.game-preview{aspect-ratio:16/10;display:flex;color:#c7ee87;background:#243027;justify-content:center;align-items: center}.game-preview svg{width:72px;height:72px}.game-details{display:flex;flex-direction:column;gap:8px;padding:20px}.game-details h2{font-size:18px;font-weight:600}.game-details p{color:#b5bfb3;font-size:14px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{display:inline-flex;color:#f4f1e9;cursor:pointer;background:#263128;border:1px solid #485447;border-radius:10px;justify-content:center;align-items: center;gap:10px;padding:12px 18px}button:hover:not(:disabled){background:#344134}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:2px solid #c7ee87;outline-offset:4px}a:focus-visible{outline:2px solid #c7ee87;outline-offset:4px}input:focus-visible{outline:2px solid #c7ee87;outline-offset:4px}.primary{color:#20291d;background:#c7ee87;border-color:#c7ee87;font-weight:700}.primary:hover:not(:disabled){background:#d8f5aa}.back-link{color:#b5bfb3;text-decoration:none;font-size:13px}.game-title{display:flex;justify-content:space-between;align-items: center;gap:12px}.game-title>span{color:#b5bfb3;font-size:12px}.credits{display:flex;flex-direction:column;align-self: center;gap:20px;max-width:640px;line-height:1.6}.credits a{color:#c7ee87}[data-game=pivot]{& .pivot-preview{position:relative;background:#334b38;flex-direction:column}& .pivot-preview svg{width:78%;height:78%}& .preview-label{position:absolute;color:#eaf2d8;letter-spacing:-2px;font-size:34px;font-weight:800;top:20px;left:20px}& .preview-play{position:absolute;color:#233220;background:#c7ee87;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;bottom:16px;right:18px}& .lobby{display:flex;flex-direction:column;align-self: center;gap:28px;width:100%;max-width:440px;padding-block-start:32px;padding-block-end:32px}& .lobby-intro{display:flex;flex-direction:column;gap:16px}& .eyebrow{color:#c7ee87;letter-spacing:.08em;text-transform:uppercase;font-size:12px}& .lobby :-webkit-any(h1,h2){letter-spacing:-3px;font-size:64px;line-height:1}& .lobby :-moz-any(h1,h2){letter-spacing:-3px;font-size:64px;line-height:1}& .lobby :is(h1,h2){letter-spacing:-3px;font-size:64px;line-height:1}& .lobby :where(h2) span{color:#c7ee87}& .game-heading :where(h2) span{color:#c7ee87}& .lobby p{color:#b5bfb3;font-size:16px;line-height:1.6}& .lobby-form{display:flex;flex-direction:column;gap:12px}& .field{display:flex;flex-direction:column;gap:12px}& .lobby-form{gap:20px}& .field{color:#cbd1c6;font-size:13px}& input{color:#f4f1e9;background:#202a23;border:1px solid #485447;border-radius:10px;width:100%;min-width:0;padding:14px 16px}& input::placeholder{color:#84927f}& .join-form{display:flex;border-top:1px solid #354035;align-items: flex-end;gap:12px;padding-top:24px}& .join-form .field{flex:1}& .join-form button{padding-block-start:15px;padding-block-end:15px}& .lobby .lobby-note{font-size:12px}& .lobby-note a{color:inherit}& .error-message{color:#f4ad99}&.playing{gap:30px;max-width:1500px;padding:clamp(20px,4vw,48px)}&.playing .wordmark{font-size:26px}&.room-page{position:fixed;display:block;overflow:hidden;width:100%;max-width:none;height:100dvh;min-height:0;margin:0;padding:0;inset:0}& .room-entry{position:absolute;display:flex;overflow:auto;justify-content:center;align-items: center;padding:64px 24px 24px;inset:0}& .room-entry>.back-link{position:absolute;top:24px;left:24px}& .game-shell{position:relative;overflow:hidden;isolation:isolate;width:100%;height:100%}& .game-shell:focus{outline:none}& .game-stage{position:absolute;background:#202a25;inset:0}& .game-stage canvas{display:block;touch-action:none}& .game-topbar{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;pointer-events:none;justify-content:space-between;align-items: center;gap:16px}& .game-identity{text-shadow:0 1px 5px #17221c;letter-spacing:-1.5px;flex-shrink:0;font-size:30px;line-height:1}& .game-identity-tail{display:inline-block;transform-origin:50% 85%;transform:translate(.23em)rotate(-24deg)}& .game-actions{display:flex;align-items: center;gap:8px}& .home-button{display:flex;color:#e9f0e3;text-decoration:none;pointer-events:auto;background:#17221ccc;border:1px solid #435344;border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:40px;height:40px;padding:0}& .share-button{display:flex;color:#e9f0e3;text-decoration:none;pointer-events:auto;background:#17221ccc;border:1px solid #435344;border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:40px;height:40px;padding:0}& .audio-button{display:flex;color:#e9f0e3;text-decoration:none;pointer-events:auto;background:#17221ccc;border:1px solid #435344;border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:40px;height:40px;padding:0}& .home-button:hover{background:#344134}& .share-button:hover{background:#344134}& .audio-button:hover{background:#344134}& .game-actions svg{width:20px;height:20px}& .crew-list{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));display:flex;text-shadow:0 1px 5px #17221c;pointer-events:none;flex-direction:column;align-items: flex-start;gap:8px;max-width:calc(100% - 40px)}& .crew-ready{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));display:flex;text-align:center;background:#17221ce8;border:1px solid #435344;border-radius:16px;flex-direction:column;align-items: center;gap:12px;width:min(360px,100% - 48px);padding:20px;left:50%;transform:translate(-50%)}& .crew-ready h2{font-size:20px}& .crew-ready p{color:#cbd1c6;font-size:14px;line-height:1.5}& .crew-ready button{width:100%}& .crew-list>span{display:inline-flex;align-items: center;gap:6px;max-width:100%;font-size:11px}& .crew-list i{border-radius:50%;flex-shrink:0;width:7px;height:7px}& .crew-name{overflow-wrap:anywhere;min-width:0}& .crew-list small{color:#aabd9f;flex-shrink:0}& .stage-message{position:absolute;display:flex;text-align:center;color:#cbd6c6;justify-content:center;align-items: center;padding:32px;inset:0}& .scene-error{position:absolute;display:flex;text-align:center;color:#cbd6c6;justify-content:center;align-items: center;padding:32px;inset:0}& .stage-message{pointer-events:none}& .round-countdown{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));color:#f5f2e9;text-align:center;text-shadow:0 1px 5px #17221c;pointer-events:none;font-size:14px;left:50%;transform:translate(-50%)}& .delivery-overlay{position:absolute;display:flex;backdrop-filter:blur(5px);background:#17221cbf;justify-content:center;align-items: center;padding:24px;inset:0}& .delivery-overlay>div{display:flex;text-align:center;flex-direction:column;align-items: center;gap:18px;max-width:380px}& .delivery-overlay h2{letter-spacing:-2px;margin:0;font-size:48px}& .delivery-overlay p{color:#cbd6c6;line-height:1.6}& .delivery-overlay a{color:#c7ee87;font-size:13px}}
