:root{--ink: #2a1b2e;--cocoa: #4a2f3a;--cream: #fbf5ea;--paper: #f5e3b5;--sand: #e3c28f;--coral: #d9765a;--coral-dark: #b04a4a;--gold: #f0c552;--leaf: #86a856;--leaf-dark: #5f8a4a;--shadow: 0 4px 0 var(--ink);--font: "StudyUI", "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.25;-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}[hidden]{display:none!important}#game{position:fixed;inset:0;touch-action:none}#game canvas{display:block;image-rendering:pixelated}#ui{position:fixed;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}canvas{image-rendering:pixelated}.fatal{position:fixed;inset:auto 16px 16px;margin:0;padding:12px 14px;background:var(--cream);border:3px solid var(--coral-dark);box-shadow:var(--shadow);color:var(--coral-dark);font-family:var(--font);font-size:18px;white-space:pre-wrap;z-index:100}.panel,.chip,.dock,.toast,.btn,.input{pointer-events:auto}.panel{background:var(--cream);border:3px solid var(--ink);border-radius:2px;box-shadow:0 6px 0 var(--ink);padding:16px}.panel-title{margin:0 0 12px;font-size:26px;font-weight:600;text-wrap:balance}.panel-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:12px;border-top:2px dashed var(--sand)}.btn{font:inherit;font-weight:600;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:2px;box-shadow:0 3px 0 var(--ink);padding:8px 14px;min-height:40px;cursor:pointer;touch-action:manipulation;transition:transform 60ms steps(2),box-shadow 60ms steps(2)}.btn:hover:not(:disabled){background:var(--sand)}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}.btn:focus-visible,.input:focus-visible,.swatch:focus-visible,.check input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.btn:disabled{color:#7d6b70;background:#d9cdbd;box-shadow:0 3px #7d6b70;border-color:#7d6b70;cursor:not-allowed}.btn-primary{background:var(--coral);color:var(--cream);text-shadow:0 2px 0 var(--coral-dark)}.btn-primary:hover:not(:disabled){background:#e58a6c}.btn.active{background:var(--gold)}.btn-small{padding:4px 10px;min-height:34px;font-size:16px}.btn-icon{padding:4px;min-width:40px;min-height:40px;font-size:18px;line-height:1}.btn-big{font-size:26px;padding:12px 26px;min-height:60px;box-shadow:0 5px 0 var(--ink)}.btn-big:active:not(:disabled){transform:translateY(5px)}.input{font:inherit;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:2px;padding:7px 10px;min-height:40px;min-width:0;flex:1;user-select:text;-webkit-user-select:text}.input-number{flex:0 0 76px;width:76px;text-align:center;font-variant-numeric:tabular-nums}.row{display:flex;align-items:center;gap:8px}.row.wrap{flex-wrap:wrap}.hint{font-size:16px;color:var(--cocoa)}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.field-label{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cocoa)}.chip{display:flex;align-items:center;gap:8px;background:var(--cream);border:2px solid var(--ink);border-radius:2px;box-shadow:0 3px 0 var(--ink);padding:4px 10px;min-height:34px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}.badge{background:var(--cocoa);color:var(--cream);padding:1px 6px;font-size:14px}.hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.hud-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.location{flex-wrap:wrap}.location-zone{color:var(--cocoa);font-weight:400}.location-zone:before{content:"· "}.dock{align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(92vw,420px)}.dock-focus,.dock-break{background:var(--cream);border:3px solid var(--ink);border-radius:2px;box-shadow:0 5px 0 var(--ink);padding:8px 18px 12px}.dock-break{background:#e4efc9}.phase{font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cocoa)}.clock{font-size:54px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}.cycle{font-size:15px;color:var(--cocoa)}.confirm-text{margin:4px 0;max-width:300px;text-align:center;font-size:17px}.toast-layer{position:absolute;left:0;right:0;bottom:calc(190px + env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none}.toasts{display:flex;flex-direction:column;align-items:center;gap:6px}.toast{background:var(--ink);color:var(--cream);border:2px solid var(--cream);padding:6px 12px;font-size:17px;max-width:86vw;text-align:center;animation:toast-in .16s steps(3)}@keyframes toast-in{0%{transform:translateY(8px);opacity:0}}.backdrop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#2a1b2eb8;pointer-events:auto;overflow-y:auto}.backdrop>.panel{margin:auto;max-width:100%}.creator{width:760px}.creator-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}.creator-preview{display:flex;flex-direction:column;align-items:center;gap:10px;position:sticky;top:0}.preview-stage{display:flex;background:var(--paper);background-image:linear-gradient(var(--sand) 2px,transparent 2px),linear-gradient(90deg,var(--sand) 2px,transparent 2px);background-size:24px 24px;border:2px solid var(--ink);padding:8px}.preview-canvas{width:240px;height:auto}.creator-options{max-height:min(62vh,560px);overflow-y:auto;padding:2px 8px 2px 2px;scrollbar-color:var(--cocoa) var(--paper)}.swatches{display:flex;flex-wrap:wrap;gap:7px;padding:3px}.swatch{width:30px;height:30px;padding:0;border:2px solid var(--ink);border-radius:2px;cursor:pointer;pointer-events:auto}.swatch.selected{box-shadow:0 0 0 2px var(--cream),0 0 0 5px var(--coral)}.stepper{display:flex;align-items:center;gap:8px}.stepper-value{flex:1;display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:40px;padding:7px 10px;background:var(--paper);border:2px solid var(--ink);min-width:0}.stepper-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stepper-count{flex:none;font-size:14px;color:var(--cocoa);font-variant-numeric:tabular-nums}.timer-panel{width:460px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.btn-choice span{display:flex;flex-direction:column;align-items:center}.btn-choice strong{font-size:22px}.btn-choice small{font-size:14px;font-weight:400;color:var(--cocoa)}.custom-row{margin-bottom:12px;padding:10px;background:var(--paper);border:2px dashed var(--ink)}.inline-label{display:flex;align-items:center;gap:6px}.check{display:flex;align-items:center;gap:8px;margin-bottom:14px;min-height:34px;cursor:pointer}.check input{width:20px;height:20px;margin:0;accent-color:var(--coral)}.check.disabled{color:#7d6b70;cursor:not-allowed}.subject{display:flex;align-items:center;gap:6px}.subject-icon{width:20px;height:20px;background:var(--cream);border:1px solid var(--ink)}.hud-left{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}.chip-button{font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;touch-action:manipulation}.chip-button:hover{background:var(--paper)}.chip-button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.connection .dot{width:10px;height:10px;background:#9a8a8e;border:2px solid var(--ink)}.connection-online .dot{background:var(--leaf)}.connection-connecting .dot{background:var(--gold)}.server-list{width:520px}.notice{margin:0 0 12px;padding:8px 10px;background:#f6d9cf;border:2px solid var(--coral-dark);color:var(--ink);font-size:17px}.server-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;min-height:48px}.server-rows>.btn{align-self:flex-start}.server-row{display:flex;align-items:center;gap:12px;padding:8px 10px;background:var(--paper);border:2px solid var(--ink)}.server-info{flex:1;min-width:0}.server-name{display:flex;align-items:baseline;gap:8px;font-size:20px}.bar-line{display:flex;align-items:center;gap:8px;margin-top:4px}.bar{flex:1;height:12px;background:var(--cream);border:2px solid var(--ink)}.bar-fill{height:100%;background:var(--leaf);transition:width .2s steps(4)}.bar-count{flex:none;min-width:64px;text-align:right;font-size:15px;font-variant-numeric:tabular-nums}.invite-field{margin-bottom:8px}.invite-input{max-width:150px;text-transform:uppercase;letter-spacing:.2em;text-align:center}.status{margin:6px 0 0;font-size:17px;color:var(--cocoa)}.status-error{color:var(--coral-dark)}.chat{position:absolute;left:calc(10px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));width:min(320px,calc(100vw - 20px));display:flex;flex-direction:column;background:var(--cream);border:3px solid var(--ink);border-radius:2px;box-shadow:0 5px 0 var(--ink);pointer-events:auto}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 2px 10px;border-bottom:2px solid var(--ink);background:var(--paper);font-weight:600}.chat.collapsed .chat-head{border-bottom:0}.chat.collapsed .chat-log,.chat.collapsed .chat-form{display:none}.chat-log{height:150px;overflow-y:auto;padding:6px 8px;font-size:16px;line-height:1.3;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;scrollbar-color:var(--cocoa) var(--paper)}.chat-line{padding:1px 4px}.chat-line.self{background:var(--paper)}.chat-line.system{color:var(--cocoa)}.chat-name{font-weight:600}.chat-empty{margin:0}.chat-form{display:flex;gap:6px;padding:6px;border-top:2px solid var(--ink)}.chat-input:disabled{background:#e9dfd0;color:#7d6b70}.voice-group{display:flex;gap:8px}.mic.mic-on{background:var(--cocoa);color:var(--cream)}.mic.mic-speaking{outline:3px solid #7bd88f;outline-offset:1px}.badge-voice{background:#4f8f5f}.badge-voice.speaking{background:#7bd88f;color:var(--ink)}.badge-warn{background:#b5533c}.people{width:480px}.people-invite{margin-bottom:10px}.people-list{display:flex;flex-direction:column;gap:8px;max-height:min(52vh,420px);overflow-y:auto;scrollbar-color:var(--cocoa) var(--paper)}.people-row{padding:8px 10px;background:var(--paper);border:2px solid var(--ink)}.people-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.people-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0}.people-name{font-size:19px;overflow-wrap:anywhere}.people-buttons{display:flex;flex-wrap:wrap;gap:6px}.people-form{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:8px;border-top:2px dashed var(--sand)}.people-form p{margin:0}@media(max-width:1100px){.chat{bottom:calc(190px + env(safe-area-inset-bottom))}}@media(max-width:720px){html,body{font-size:17px}.panel{padding:12px}.panel-title{font-size:22px}.creator-body{grid-template-columns:1fr;gap:12px}.creator-preview{position:static}.preview-canvas{width:168px}.creator-options{max-height:none;overflow:visible;padding:0}.backdrop{align-items:flex-start}.btn,.input,.stepper-value{min-height:44px}.btn-small{min-height:40px}.btn-icon{min-width:44px}.swatch{width:36px;height:36px}.btn-big{font-size:22px;padding:10px 18px}.clock{font-size:44px}.panel-actions .btn{flex:1}.server-row{gap:8px}.invite-input{max-width:none}.chat-log{height:120px}.chat-input{min-height:44px}.chat-toggle{min-width:44px;min-height:44px}.people-buttons .btn{min-height:44px}.chip-button{min-height:40px}}@media(prefers-reduced-motion:reduce){.btn,.bar-fill{transition:none}.toast{animation:none}}.video-dock{position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(64px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:calc(100vw - 20px);pointer-events:auto}.video-dock{--tw: 240px;--th: 180px;--cols: 1}.video-dock[data-count="2"]{--tw: 320px;--th: 240px}.video-dock[data-count="3"]{--tw: 260px;--th: 195px}.video-dock[data-count="4"],.video-dock[data-count="5"],.video-dock[data-count="6"]{--tw: 200px;--th: 150px;--cols: 2}.video-dock[data-count="7"],.video-dock[data-count="8"]{--tw: 160px;--th: 120px;--cols: 2}.video-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--tw));gap:6px;max-height:calc(100vh - 170px);overflow-y:auto}.video-tile{position:relative;width:var(--tw);height:var(--th);max-width:44vw;background:var(--ink);border:3px solid var(--ink);border-radius:6px;overflow:hidden}.video-feed{width:100%;height:100%;object-fit:cover;display:block}.video-self{transform:scaleX(-1)}.video-tile.video-off .video-feed{opacity:.25}.video-name{position:absolute;left:0;right:0;bottom:0;padding:1px 4px;font-size:11px;color:var(--cream);background:#0000008c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-controls{display:flex;gap:6px}.video-root{display:contents}.video-tile{cursor:zoom-in}.video-big{position:fixed;inset:0;z-index:60;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));background:#000000e0;pointer-events:auto}.video-big-close{position:absolute;top:calc(18px + env(safe-area-inset-top));right:18px;z-index:1}.video-big-grid{--cols: 1;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:1fr;gap:8px;width:100%;height:100%}.video-big-grid[data-count="2"],.video-big-grid[data-count="3"],.video-big-grid[data-count="4"]{--cols: 2}.video-big-grid[data-count="5"],.video-big-grid[data-count="6"],.video-big-grid[data-count="7"],.video-big-grid[data-count="8"],.video-big-grid[data-count="9"]{--cols: 3}.video-big-grid .video-tile{width:auto;height:auto;max-width:none;min-height:0;cursor:default}.video-big-grid .video-name{font-size:14px;padding:3px 8px}