:root{--ink:#f8f2e7;--muted:#a1a8b7;--coral:#fa7958;--mint:#c4f579;--panel:#151c2ceF;--line:#ffffff20;--cyan:#58e2e8;color-scheme:dark;font-family:Arial,Helvetica,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:#101727;color:var(--ink);overflow:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button{color:inherit}button,a{touch-action:manipulation}button{border:0}a{color:inherit;text-decoration:none}#world{display:block;position:fixed;inset:0;width:100%;height:100%;outline:0}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#101727f5 0%,#101727c9 26%,#10172700 65%),linear-gradient(0deg,#10172780,transparent 22%)}.topbar{position:fixed;top:0;left:0;right:0;height:88px;padding:0 40px;display:flex;justify-content:space-between;align-items:center;z-index:20}.brand{font-weight:950;letter-spacing:-1px;font-size:25px;display:flex;align-items:center;gap:10px}.brand-mark{font-size:42px;color:var(--coral);line-height:1}.beta{font:9px monospace;letter-spacing:1px;border:1px solid #ffffff30;border-radius:4px;padding:5px 7px;margin-left:7px;color:#afb7c8}.top-actions{display:flex;align-items:center;gap:12px}.connection{font:10px monospace;letter-spacing:1px;margin-right:12px;display:flex;gap:8px;align-items:center}.connection i,.live-dot{width:6px;height:6px;background:var(--mint);border-radius:100%;display:inline-block;box-shadow:0 0 10px #c4f57966}.icon-button{background:#151c2caa;border:1px solid var(--line);font:10px monospace;letter-spacing:.5px;padding:10px 12px;border-radius:6px}.icon-button:last-child{font-size:16px;padding:5px 10px}.welcome{position:absolute;left:6%;top:50%;width:490px;transform:translateY(-44%);z-index:5}.eyebrow{font:10px monospace;letter-spacing:2px;font-weight:bold;color:var(--ink);margin-bottom:20px}.tiny-star{color:var(--coral);font-size:19px;margin-right:8px;vertical-align:middle}h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:72px;line-height:.97;letter-spacing:-1.5px;font-weight:normal;margin:0 0 22px}h1 span{color:var(--coral)}.intro{font-size:14px;line-height:1.65;color:#aeb5c5;margin:0 0 26px}.join-card{width:390px;background:#182030e8;border:1px solid #ffffff24;border-radius:12px;padding:22px;box-shadow:0 24px 50px #0003}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.label{font-size:12px;font-weight:800;letter-spacing:.5px}.chip{font:8px monospace;letter-spacing:.3px;color:var(--mint);padding:5px 6px;border:1px solid #c4f57940;border-radius:4px}label{display:block;font:9px monospace;letter-spacing:1px;color:var(--muted);margin-bottom:8px}input,select{width:100%;background:#0c1220;border:1px solid #ffffff26;border-radius:5px;padding:12px;color:var(--ink);outline:none}input:focus,select:focus{border-color:var(--cyan)}input::placeholder{color:#626c81}.color-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 20px}.color-row>span{font:9px monospace;color:var(--muted);letter-spacing:.5px}#colors{display:flex;gap:7px}.color-choice{width:19px;height:19px;border-radius:50%;border:2px solid transparent;outline-offset:3px}.color-choice.selected{outline:1px solid white;border-color:#172031}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:16px;gap:18px}.tabs button{background:none;padding:0 0 10px;color:#8994a9;font-size:11px}.tabs .active{color:var(--ink);border-bottom:2px solid var(--coral)}#room-field{margin-bottom:15px}#room-code{text-transform:uppercase;letter-spacing:4px}.primary{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--mint);border:1px solid var(--mint);border-radius:5px;color:#162218;font-size:12px;font-weight:900;letter-spacing:.3px;padding:15px 17px;transition:transform .12s,filter .12s}.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.primary>span:last-child{font-size:20px;line-height:12px}.fineprint{font:9px monospace;color:#929bab;text-align:center;margin:14px 0 0}.form-error{font-size:12px;line-height:1.5;color:#ffae96;margin:14px 0 0}.genre-tags{max-width:420px;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.genre-tags span{font:8px monospace;color:#8b96ac;letter-spacing:.7px}.genre-tags span+span:before{content:' / ';color:#4c586b;margin-right:8px}.scene-caption{position:fixed;right:40px;bottom:30px;display:flex;gap:10px;align-items:center;font:9px monospace;letter-spacing:1px;color:#e3e8ef}.scene-caption>span:last-child{color:#8996af}.caption-divider{color:#fa7958}.loading{position:fixed;top:47%;right:17%;font:10px monospace;letter-spacing:2px;color:var(--muted);background:#101727bb;padding:20px;z-index:3}.playing .vignette{background:linear-gradient(180deg,#10172790,transparent 22%,transparent 80%,#10172790)}.playing .topbar{height:68px;padding:0 25px}.playing .brand{font-size:20px}.playing .brand-mark{font-size:32px}.playing .beta{display:none}.room-strip{position:fixed;left:25px;top:76px;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);padding:9px 12px;border-radius:6px;font:10px monospace}.room-label{color:var(--muted);font-size:8px}.room-strip>b{letter-spacing:2px;color:var(--cyan)}.small-button{font:9px monospace;color:var(--ink);background:#ffffff12;padding:7px 9px;border-radius:3px;border:1px solid var(--line)}.small-button:hover{background:#ffffff26}#ping{font-size:8px;color:#8b96ac}.plain-button{background:none;color:#9ba7bd;font:10px monospace;padding:4px}.plain-button:hover{color:var(--ink)}.round-banner{position:fixed;top:76px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;min-width:260px;text-shadow:0 2px 12px #000}.round-banner>div{font:9px monospace;letter-spacing:3px;color:var(--mint)}.round-banner strong{font:40px Impact,sans-serif;display:block;margin:3px 0}.round-banner>span{display:block;font:10px monospace;color:#c2cadd;background:#10172790;border-radius:4px;padding:5px 10px}#hazard{margin-top:5px;background:var(--coral);color:#151725;font-weight:bold}.lobby-panel,.scoreboard{position:fixed;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:15px}.lobby-panel{top:140px;left:25px;width:245px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font:9px monospace;letter-spacing:1px;color:#d8dce7}.panel-title b{font-size:9px;color:var(--muted);white-space:nowrap}#lobby-settings{margin-top:17px}#mode-select{font-size:11px;color:var(--ink)}#mode-description,#guest-controls{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0}.bot-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0}.bot-row label{margin:0}.bot-row select{width:65px;padding:7px;font-size:11px}.compact{font-size:10px;padding:12px 10px}.open-play{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font:8px monospace;color:#8b96ac}.scoreboard{right:25px;top:76px;width:235px}.scoreboard .panel-title{margin-bottom:12px}.player-row{display:flex;align-items:center;gap:8px;font-size:11px;padding:8px 0}.player-row+.player-row{border-top:1px solid #ffffff0b}.player-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}.player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.player-name small{font:8px monospace;color:#8490a6;margin-left:5px}.player-score{font:13px monospace;color:var(--mint)}.player-row.self .player-name{font-weight:bold}.event-feed{position:fixed;left:25px;bottom:134px;width:300px;pointer-events:none}.event-item{font-size:10px;color:#c3cbdc;margin-top:5px;line-height:1.45;text-shadow:0 2px 5px black;background:#111827a6;display:table;border-radius:3px;padding:5px 8px}.status-line{position:fixed;bottom:106px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;white-space:nowrap;font:9px monospace;letter-spacing:.8px;text-shadow:0 2px 5px black}.status-line>span{padding:6px 10px;background:#111827c9;border-radius:4px}.status-line #damage{color:var(--coral)}.status-line #carrying{color:var(--cyan)}#special:empty{display:none}.action-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:0;align-items:stretch;background:#151c2cee;border:1px solid #ffffff24;border-radius:9px;overflow:hidden;box-shadow:0 10px 30px #0004}.action{padding:13px 17px;min-width:80px;text-align:center;white-space:nowrap;position:relative}.action+.action{border-left:1px solid var(--line)}kbd{display:block;font:10px monospace;color:#eff2f9;letter-spacing:1px;margin-bottom:8px}.action>span{display:block;font:8px monospace;letter-spacing:1px;color:#8592aa}.action kbd em{font:8px monospace;color:#9ba7bd;letter-spacing:0}.trick-action{background:#58e2e811;min-width:170px}.trick-action>span{color:var(--cyan)}.action small{font:8px monospace;color:var(--coral);position:absolute;right:5px;top:5px}.action.cooling{opacity:.55}.respawn{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.respawn strong{font:45px Impact,sans-serif;color:var(--coral);display:block;text-shadow:3px 3px #111}.respawn span{font:11px monospace;display:block;margin-top:10px}.muted{color:var(--muted)}dialog{color:var(--ink);background:#182030;border:1px solid #ffffff30;border-radius:12px;width:min(560px,calc(100% - 32px));padding:35px;box-shadow:0 30px 120px #0009}dialog::backdrop{background:#060b17bf;backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:16px;top:12px;background:none;font-size:27px;color:var(--muted)}h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:normal;font-size:37px;line-height:1.08;letter-spacing:.3px;margin:0 0 22px}dialog p{font-size:12px;line-height:1.7}dialog .eyebrow{color:var(--coral);font-size:9px}dialog .primary{margin-top:24px}.help-modes{display:flex;gap:16px;border-block:1px solid var(--line);margin-block:20px;padding:8px 0}.help-modes p{flex:1;font-size:10px}.help-modes b{color:var(--mint);font:9px monospace}#results-list{margin:20px 0}#results-list .player-row{font-size:13px;padding:11px 0}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:100;background:var(--ink);color:#151c2c;border-radius:5px;font-size:12px;padding:14px 20px;box-shadow:0 10px 30px #0005;max-width:90vw;text-align:center}#back-home{display:block;margin:16px auto 0}[hidden]{display:none!important}@media(min-width:1700px){.welcome{left:8%;width:560px}h1{font-size:89px}.intro{font-size:16px}.join-card{width:420px;padding:26px}.genre-tags{max-width:470px}}@media(max-height:800px){.welcome{top:100px;transform:none}h1{font-size:54px;margin-bottom:13px}.eyebrow{margin-bottom:13px}.intro{margin-bottom:16px;font-size:12px}.join-card{padding:18px}.card-top{margin-bottom:16px}.color-row{margin:13px 0 16px}.genre-tags{margin-top:14px}.welcome .eyebrow{font-size:9px}}@media(max-width:1100px){.welcome{left:4%;width:420px}h1{font-size:60px}.connection{display:none}.topbar{padding:0 25px}.round-banner{top:120px}.round-banner strong{font-size:32px}.action{padding:12px;min-width:65px}.action-bar{bottom:15px}.scoreboard{width:200px}.lobby-panel{width:220px}.scene-caption{right:25px;font-size:8px}.event-feed{width:220px}}@media(max-width:700px){body:not(.playing){overflow:auto}.welcome{position:relative;left:auto;top:auto;transform:none;margin:100px auto 70px;width:calc(100% - 40px);max-width:390px}.join-card{width:100%;background:#182030f5}h1{font-size:57px}.topbar{height:75px;padding:0 20px}.brand{font-size:22px}.beta{display:none}.top-actions{gap:6px}.scene-caption{display:none}.vignette{background:#101727a6}.genre-tags{line-height:1.7}.playing .topbar{padding:0 12px}.playing .brand{font-size:17px}.playing .room-strip{left:12px;top:70px;gap:7px;font-size:9px}.playing .room-strip #ping{display:none}.scoreboard{top:125px;right:12px;width:140px;padding:10px}.scoreboard .panel-title{font-size:7px;letter-spacing:0}.scoreboard .panel-title b{font-size:7px}.lobby-panel{left:12px;top:125px;width:180px;padding:10px}.round-banner{top:365px;min-width:200px}.round-banner strong{font-size:30px}.action-bar{max-width:calc(100vw - 16px);overflow-x:auto;left:8px;transform:none}.action{padding:10px;min-width:60px}.action kbd{font-size:8px}.action>span{font-size:7px}.trick-action{min-width:130px}.action-bar>.action:last-child{display:none}.status-line{bottom:98px;font-size:7px;gap:3px}.status-line>span{padding:5px}.event-feed{left:12px;bottom:138px;max-width:180px}.event-item{font-size:9px}.loading{right:10%;top:45%}.help-modes{display:block}.respawn strong{font-size:32px}}

.round-banner{width:260px;min-width:0}
@media(max-width:1100px) and (min-width:701px){.round-banner{width:210px}.round-banner>span{line-height:1.5}}


/* Chaos update: inventory and sound controls. */
.volume{width:62px;padding:0;border:0;accent-color:var(--mint);background:transparent;cursor:pointer}
.item-card{--item-color:#8c9ab2;position:fixed;right:25px;bottom:125px;width:265px;padding:16px;background:#151c2cf2;border:1px solid #ffffff24;border-top:3px solid var(--item-color);border-radius:8px;box-shadow:0 12px 35px #0004}
.item-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font:8px monospace;letter-spacing:.8px;color:var(--muted)}
.item-heading button{font-size:8px;color:var(--item-color)}.item-title{display:flex;gap:12px;align-items:center;margin:15px 0 10px}.item-title>b{font:28px Impact,sans-serif;color:var(--item-color);width:36px;text-align:center}.item-title h3{font:19px Impact,'Arial Narrow',sans-serif;font-weight:normal;letter-spacing:.7px;line-height:1.1;margin:0;color:var(--ink)}
.item-card p{font-size:10px;line-height:1.6;color:#aab6ca;min-height:48px;margin:0 0 15px}.item-use,.detonate{width:100%;font:9px monospace;font-weight:bold;border-radius:4px;padding:11px 8px;letter-spacing:.4px}.item-use{background:var(--item-color);color:#152031}.detonate{margin-top:7px;border:1px solid #fa79585c;background:#fa795811;color:var(--coral)}.item-use:disabled,.detonate:disabled{opacity:.4;cursor:default}.item-use:not(:disabled):hover{filter:brightness(1.2)}.loaded{box-shadow:0 5px 35px #0006}.mutation{position:fixed;top:218px;left:50%;transform:translateX(-50%);background:#ffd54d;color:#283011;padding:9px 15px;border-radius:4px;font:10px monospace;font-weight:bold;box-shadow:0 5px 20px #0004;pointer-events:none}.action.item-keys span{color:var(--coral)}
#item-dialog{width:min(720px,calc(100% - 32px));max-height:90vh}#item-catalog{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.catalog-item{border:1px solid #ffffff1c;border-top:2px solid var(--item-color);border-radius:5px;padding:15px;background:#0f1724}.catalog-icon{font-size:26px;color:var(--item-color);float:right;margin-left:8px}.catalog-item h3{font:13px Impact,sans-serif;letter-spacing:1px;margin:0;color:var(--item-color)}.catalog-item p{font-size:11px;line-height:1.55;margin-bottom:0}.help-modes{flex-wrap:wrap}.help-modes p{min-width:42%}.playing .scoreboard{max-height:300px;overflow-y:auto}.event-feed{max-height:160px;overflow:hidden}.welcome h1{font-size:70px}.top-actions{gap:9px}
@media(max-height:800px){.welcome h1{font-size:53px}.item-card{bottom:114px;width:235px;padding:12px}.item-card p{min-height:0;font-size:9px;margin-bottom:10px}.item-title{margin:9px 0}.item-title h3{font-size:17px}.playing .scoreboard{max-height:225px}.mutation{top:200px}}
@media(max-width:1100px){.volume{width:46px}.item-card{right:16px;width:215px}.item-card p{font-size:9px;line-height:1.5}.item-title h3{font-size:17px}.item-heading{font-size:7px}.item-heading button{font-size:7px}.item-keys{min-width:124px}.welcome h1{font-size:60px}.mutation{top:230px}}
@media(max-width:700px){.volume{display:none}.item-card{right:12px;bottom:120px;width:184px;padding:10px}.item-card p{max-height:42px;overflow:auto;min-height:0;font-size:8px;margin-bottom:8px}.item-title{margin:8px 0}.item-title h3{font-size:15px}.item-title>b{font-size:23px;width:25px}.item-use,.detonate{font-size:7px;padding:9px 5px}.mutation{top:410px;max-width:75vw;font-size:8px}.welcome h1{font-size:52px}#item-catalog{grid-template-columns:1fr}.event-feed{max-width:155px;bottom:150px;max-height:130px}.item-heading{letter-spacing:0}.item-heading>span{max-width:72px}.top-actions{gap:5px}.action-bar>.action:last-child{display:block}.playing .scoreboard{max-height:230px}.round-banner{top:360px}}


/* Touch playground: thumb controls stay separate from the live arena. */
.touch-controls,.touch-welcome-hint{display:none}
#touch-toggle[aria-pressed="true"]{color:var(--mint);border-color:#c4f57988;background:#c4f57916}
body.touch-mode:not(.playing){overflow-y:auto;min-height:100vh;min-height:100dvh}
.touch-mode .touch-welcome-hint{display:block;color:var(--cyan);font:11px/1.5 monospace;max-width:390px;margin:15px 0 0}
.touch-mode input:not([type="range"]),.touch-mode select,.touch-mode #mode-select,.touch-mode .bot-row select{font-size:16px;min-height:44px}
.touch-mode .icon-button,.touch-mode .small-button,.touch-mode .plain-button,.touch-mode .tabs button,.touch-mode .primary,.touch-mode .dialog-close{min-height:44px;min-width:44px}
.touch-mode .color-row{display:block}.touch-mode .color-row>span{display:block;margin-bottom:10px}.touch-mode #colors{gap:10px}.touch-mode .color-choice{width:44px;height:44px;border-width:5px}
.touch-mode .topbar{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));padding-top:env(safe-area-inset-top)}
.touch-mode .beta,.touch-mode .connection{display:none}.touch-mode .volume{width:65px;min-height:44px}.touch-mode .top-actions{gap:8px}
.touch-mode .welcome{position:relative;top:auto;left:auto;transform:none;margin:108px 0 45px max(5%,env(safe-area-inset-left));width:min(490px,90%)}
.touch-mode .welcome h1{font-size:60px}.touch-mode .join-card{width:min(410px,100%)}
.touch-mode dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.touch-mode .touch-help{border-left:3px solid var(--cyan);padding-left:14px}.touch-mode #item-catalog p{font-size:12px}
body.touch-mode.playing{overflow:hidden;overscroll-behavior:none;height:100vh;height:100dvh}
.touch-mode.playing #world{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-mode.playing .topbar{height:calc(64px + env(safe-area-inset-top));background:linear-gradient(#101727ce,#10172700)}
.touch-mode.playing .action-bar{display:none}
.touch-mode.playing .touch-controls{display:block;position:fixed;inset:0;z-index:15;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-movement{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));width:156px;pointer-events:auto}
.touch-stick{width:156px;height:156px;border-radius:50%;position:relative;border:2px solid #58e2e858;background:radial-gradient(circle,#58e2e80a 38%,#131e2ed9 39%);box-shadow:inset 0 0 0 19px #58e2e807,0 6px 30px #0003;touch-action:none}
.touch-stick.is-dragging{border-color:var(--cyan);background-color:#142733dc}
.touch-knob{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;border:2px solid #bff9f5b0;background:#58e2e8c9;box-shadow:0 3px 14px #0005;transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)));pointer-events:none}
.stick-cross{position:absolute;background:#58e2e830;pointer-events:none}.stick-cross-x{height:1px;width:118px;top:50%;left:17px}.stick-cross-y{width:1px;height:118px;left:50%;top:17px}
.touch-stick-caption{font:10px monospace;letter-spacing:1px;text-align:center;color:var(--cyan);margin-bottom:12px;white-space:nowrap;text-shadow:0 2px 5px #000}.touch-stick-caption span{display:block;font-size:9px;letter-spacing:0;color:#c1cadd;margin-top:5px}
.touch-actions{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));width:276px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;pointer-events:auto}
.touch-action{min-width:0;min-height:50px;border:1px solid #ffffff35;border-radius:10px;background:#172233ed;color:var(--ink);font:10px monospace;line-height:1.3;letter-spacing:.2px;padding:8px 5px;touch-action:none;box-shadow:0 3px 8px #0003}
.touch-action b{font-size:19px;display:inline-block;vertical-align:middle;margin-right:3px;color:var(--mint)}
.touch-action:active,.touch-action.is-pressed{background:#34475d;border-color:var(--cyan);transform:translateY(1px)}
.touch-action:disabled{opacity:.45;cursor:default}.touch-action-trick{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-color:#58e2e866;background:#15323ced}
.touch-action-trick span{font-size:9px;color:#92bac7}.touch-action-trick strong{font-size:12px;color:var(--cyan)}
.touch-mode.playing .room-strip{left:max(16px,env(safe-area-inset-left));top:calc(68px + env(safe-area-inset-top));padding:3px 8px;gap:8px;font-size:10px}.touch-mode.playing .room-label,.touch-mode.playing #ping{display:none}.touch-mode.playing .room-strip>b{letter-spacing:1px}
.touch-mode.playing .round-banner{top:calc(73px + env(safe-area-inset-top));width:190px;min-width:0}.touch-mode.playing .round-banner strong{font-size:32px}.touch-mode.playing .round-banner>span{font-size:9px;line-height:1.4}
.touch-mode.playing .lobby-panel{left:max(16px,env(safe-area-inset-left));top:calc(126px + env(safe-area-inset-top));width:228px;padding:5px 10px;z-index:18;max-height:calc(100dvh - 350px);overflow-y:auto;overscroll-behavior:contain}
.touch-mode.playing #lobby-settings{margin-top:8px;padding-bottom:8px}.touch-mode.playing .open-play{margin-top:10px;padding-top:10px}.touch-mode.playing .lobby-panel .panel-title{min-height:44px}
.touch-mode.playing .scoreboard{top:calc(68px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:194px;padding:10px 12px;max-height:176px;overscroll-behavior:contain}
.touch-mode.playing .scoreboard .panel-title{font-size:8px;letter-spacing:0;margin-bottom:5px}.touch-mode.playing .player-row{font-size:11px;padding:6px 0}.touch-mode.playing .player-name small{font-size:7px}
.touch-mode.playing .item-card{right:max(18px,env(safe-area-inset-right));bottom:calc(204px + env(safe-area-inset-bottom));width:276px;padding:8px 10px;z-index:16;display:grid;grid-template-columns:1fr 1fr;gap:0 8px;border-radius:10px}
.touch-mode.playing .item-heading{grid-column:1/-1;font-size:8px;letter-spacing:0;min-height:44px}.touch-mode.playing .item-heading>span{max-width:none}.touch-mode.playing .item-heading button{font-size:9px;padding:6px}
.touch-mode.playing .item-title{grid-column:1/-1;margin:0 0 9px;gap:8px;min-height:24px}.touch-mode.playing .item-title>b{font-size:22px;width:26px}.touch-mode.playing .item-title h3{font-size:18px}
.touch-mode.playing .item-card p{display:none}.touch-mode.playing .item-use,.touch-mode.playing .detonate{min-height:48px;font-size:10px;line-height:1.3;padding:8px 4px;margin:0;touch-action:manipulation}
.touch-mode.playing .status-line{left:max(18px,env(safe-area-inset-left));bottom:calc(236px + env(safe-area-inset-bottom));transform:none;display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:260px;font-size:9px;white-space:normal;pointer-events:none}
.touch-mode.playing .status-line>span{padding:5px 8px}.touch-mode.playing .event-feed{left:max(18px,env(safe-area-inset-left));bottom:calc(306px + env(safe-area-inset-bottom));width:225px;max-width:225px;max-height:74px}.touch-mode.playing .event-item{font-size:10px}
.touch-mode.playing .mutation{top:calc(205px + env(safe-area-inset-top));max-width:calc(100% - 480px);font-size:9px;text-align:center}
.touch-mode.playing #toast{bottom:calc(206px + env(safe-area-inset-bottom));max-width:calc(100vw - 340px);font-size:11px;padding:10px 14px;pointer-events:none}
.touch-mode.playing .respawn{z-index:17;max-width:70%;pointer-events:none}.touch-mode.playing .respawn strong{font-size:34px}
@media(max-width:900px){
 .touch-mode.playing .round-banner{top:calc(130px + env(safe-area-inset-top));width:200px}.touch-mode.playing .round-banner strong{font-size:28px}.touch-mode.playing .round-banner>span{max-height:46px;overflow:hidden}
 .touch-mode.playing .mutation{top:calc(246px + env(safe-area-inset-top));max-width:50%}.touch-mode .topbar .brand{font-size:21px}.touch-mode .volume{display:none}
 .touch-mode.playing .status-line{max-width:235px}.touch-mode.playing #toast{left:50%;bottom:calc(390px + env(safe-area-inset-bottom));max-width:75vw}
}
@media(max-width:600px){
 .touch-mode .topbar .brand{font-size:15px;gap:5px}.touch-mode .brand-mark{font-size:28px}.touch-mode .top-actions{gap:4px}.touch-mode .icon-button{padding:6px;font-size:9px}
 .touch-mode .welcome{width:calc(100% - 32px);margin:95px auto 40px}.touch-mode .welcome h1{font-size:48px}.touch-mode .join-card{padding:16px}.touch-mode #colors{gap:6px;flex-wrap:wrap}.touch-mode .color-choice{width:44px;height:44px}
 .touch-mode.playing .room-strip{left:8px;right:8px;top:64px;width:calc(100% - 16px);justify-content:space-between}
 .touch-mode.playing .scoreboard{top:122px;right:8px;width:148px;max-height:138px}.touch-mode.playing .scoreboard .panel-title>span{font-size:7px}.touch-mode.playing .player-row{font-size:10px}.touch-mode.playing .player-name small{display:none}
 .touch-mode.playing .lobby-panel{top:122px;left:8px;width:170px;padding:3px 8px;max-height:calc(100dvh - 330px)}.touch-mode.playing .lobby-panel .panel-title{font-size:7px}.touch-mode.playing #mode-description{display:none}
 .touch-mode.playing .round-banner{top:181px;left:8px;transform:none;width:170px}.touch-mode.playing .round-banner>span{display:none}.touch-mode.playing .round-banner strong{font-size:28px}
 .touch-movement{left:10px;bottom:calc(18px + env(safe-area-inset-bottom));width:140px}.touch-stick{width:140px;height:140px}.stick-cross-x{width:104px}.stick-cross-y{height:104px}.touch-knob{width:58px;height:58px}.touch-stick-caption{font-size:9px}.touch-stick-caption span{font-size:8px}
 .touch-actions{right:10px;width:calc(100vw - 174px);max-width:276px;gap:6px;bottom:calc(12px + env(safe-area-inset-bottom))}.touch-action{font-size:8px;min-height:48px;padding:6px 3px}.touch-action b{font-size:16px;margin-right:0}.touch-action-trick{display:block;padding:5px}.touch-action-trick span{display:block;font-size:7px}.touch-action-trick strong{font-size:9px;display:block;margin-top:3px}
 .touch-mode.playing .item-card{right:10px;bottom:calc(184px + env(safe-area-inset-bottom));width:calc(100vw - 174px);max-width:276px;padding:6px 8px}.touch-mode.playing .item-heading>span{display:none}.touch-mode.playing .item-heading{justify-content:flex-end;min-height:44px}.touch-mode.playing .item-title h3{font-size:14px}.touch-mode.playing .item-title>b{font-size:19px;width:20px}.touch-mode.playing .item-use,.touch-mode.playing .detonate{font-size:8px;min-height:48px}
 .touch-mode.playing .status-line{left:10px;max-width:140px;bottom:calc(212px + env(safe-area-inset-bottom));font-size:8px}.touch-mode.playing .event-feed{display:none}.touch-mode.playing .mutation{top:275px;max-width:90%;font-size:8px}.touch-mode.playing #toast{bottom:calc(350px + env(safe-area-inset-bottom));max-width:90vw;font-size:10px}
 .touch-mode.playing .respawn strong{font-size:27px}.touch-mode.playing .respawn span{font-size:9px}.touch-mode dialog{padding:25px}
}
@media(max-height:600px) and (min-width:601px){
 .touch-mode.playing .topbar{height:54px}.touch-mode.playing .room-strip,.touch-mode.playing .scoreboard{top:56px}.touch-mode.playing .lobby-panel{top:112px;max-height:calc(100dvh - 240px)}
 .touch-mode.playing .round-banner{top:64px}.touch-mode.playing .round-banner>span{display:none}.touch-mode.playing .scoreboard{max-height:120px}.touch-mode.playing .item-card{bottom:190px}.touch-mode.playing .item-heading>span{display:none}.touch-mode.playing .item-heading{position:absolute;right:6px;top:0}.touch-mode.playing .item-title{padding-right:72px;min-height:42px;margin-bottom:4px}
 .touch-mode.playing .event-feed{display:none}.touch-mode.playing .mutation{top:150px}.touch-mode.playing .status-line{bottom:228px}.touch-mode.playing #toast{bottom:200px;max-width:40vw}.touch-mode.playing .touch-actions{bottom:12px}.touch-mode.playing .touch-movement{bottom:12px}
}

/* Safari must see the gesture policy on panel ancestors, including gaps between buttons. */
html,body,#hud,.topbar,.touch-actions,.item-card,.lobby-panel,.scoreboard{touch-action:manipulation}
/* Direct movement/look surfaces remain captured by the game. Pinch zoom stays available in menus. */
body.playing #world,.touch-stick,.touch-action{touch-action:none}

/* First-person play leaves the center of the view clear. */
.crosshair,.aim-hint,.look-hint,.disguise-status{display:none}
.first-person .crosshair{display:block;position:fixed;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 0 2px #14212b99;pointer-events:none;z-index:10}
.first-person .crosshair:before,.first-person .crosshair:after{content:'';position:absolute;background:#fff9;box-shadow:0 1px 2px #000;left:-8px;top:2px;width:21px;height:1px}
.first-person .crosshair:after{transform:rotate(90deg)}
.first-person .aim-hint{display:block;position:fixed;left:50%;top:calc(50% + 24px);transform:translateX(-50%);max-width:330px;text-align:center;font:10px/1.5 monospace;color:#f8f2e7;text-shadow:0 2px 4px #000;background:#101727bb;border-radius:5px;padding:5px 9px;pointer-events:none;z-index:10}
.first-person .aim-hint:empty{display:none}
.first-person .look-hint{display:flex;position:fixed;left:50%;bottom:165px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:7px;font:10px monospace;color:#c6d1e5;z-index:17;text-align:center;text-shadow:0 1px 4px #000}
.look-hint button{min-height:44px;background:#c4f579;color:#172218;font-weight:bold;border-color:#d9ffb0}
.first-person .disguise-status{display:block;position:fixed;left:50%;top:226px;transform:translateX(-50%);max-width:390px;text-align:center;background:#596978ed;border:1px solid #b6c9d4;padding:12px 16px;border-radius:7px;z-index:14;font:11px/1.6 monospace;color:#fff;pointer-events:none}
.watch-button{width:100%;margin-top:10px;padding:12px 8px;background:#a98aff22;color:#d7c8ff;border:1px solid #a98aff66;border-radius:5px;font:10px monospace;font-weight:bold;min-height:44px}
.watch-note{font-size:10px;line-height:1.5;color:#a6a9ba;margin:8px 0 0}
.spectator-panel{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 30px));padding:18px;border:1px solid #a98aff88;border-top:3px solid #a98aff;background:#151c2cf2;border-radius:10px;z-index:19;box-shadow:0 16px 40px #0005}
.spectator-panel .eyebrow{color:#c3acff;font-size:9px;letter-spacing:1px;margin-bottom:14px}.spectator-panel p{font-size:11px;line-height:1.5;color:#abb5ca;margin:12px 0}.spectator-picker{display:flex;gap:8px}.spectator-picker select{flex:1;min-width:0;min-height:44px;font-size:14px}.spectator-picker button{min-height:44px;min-width:44px;font-size:17px}
.spectating .action-bar,.spectating #item-card,.spectating #touch-controls,.spectating .status-line,.spectating #respawn,.spectating #mutation,.spectating #disguise-status,.spectating #crosshair,.spectating #aim-hint,.spectating #look-hint{display:none!important}
.spectating .event-feed{bottom:265px}.first-person .vignette{background:linear-gradient(#10172780,transparent 25%,transparent 75%,#10172770)}
.first-person .round-banner{pointer-events:none}.first-person .round-banner>span{font-size:9px}
.touch-mode.first-person .look-hint{bottom:200px;max-width:calc(100vw - 570px);font-size:10px;pointer-events:none}
.touch-mode.first-person #capture-look{display:none}.touch-mode.first-person .disguise-status{top:230px;max-width:350px}
.touch-mode .spectator-panel{bottom:calc(18px + env(safe-area-inset-bottom));padding:15px}.touch-mode.spectating .event-feed{bottom:280px}
@media(max-width:900px){.touch-mode.first-person .look-hint{bottom:400px;max-width:70vw}.touch-mode.first-person .disguise-status{top:258px;max-width:70vw}.first-person .aim-hint{font-size:9px;max-width:220px}.spectating .round-banner{top:145px}}
@media(max-height:600px){.first-person .look-hint{bottom:115px}.first-person .disguise-status{top:160px;font-size:9px;padding:7px}.spectator-panel{bottom:10px;padding:12px}.spectator-panel p{display:none}.spectator-panel .eyebrow{margin-bottom:8px}}

/* Host controls sit beside the arena instead of covering the players. */
.spectator-panel{left:auto;right:25px;bottom:25px;transform:none;width:270px;padding:14px}
.spectator-panel .eyebrow{font-size:8px;line-height:1.6}.spectator-panel p{font-size:10px}
.spectating .event-feed{bottom:30px}
.touch-mode .spectator-panel{right:16px;width:270px}.touch-mode.spectating .event-feed{bottom:30px}
@media(max-width:900px){.spectator-panel,.touch-mode .spectator-panel{left:50%;right:auto;transform:translateX(-50%);width:min(420px,calc(100vw - 30px))}.spectating .event-feed,.touch-mode.spectating .event-feed{bottom:270px}}

.kaiju-warning{position:fixed;left:50%;top:185px;transform:translateX(-50%);width:max-content;max-width:350px;border:1px solid #ffbd57;background:#342519ed;color:#ffdf9e;border-radius:6px;padding:11px 14px;font:11px/1.5 monospace;font-weight:bold;text-align:center;pointer-events:none;z-index:16;box-shadow:0 5px 25px #0004}
.kaiju-warning[data-urgency="danger"]{background:#5e221ceF;border:2px solid #ff947b;color:#fff0df}
.spectating .kaiju-warning{display:none!important}
.kaiju-danger .mutation{top:294px}
@media(max-width:900px){.kaiju-warning{top:218px;max-width:70vw;font-size:10px}.kaiju-danger .mutation{top:318px}}
@media(max-height:600px){.kaiju-warning{top:130px;max-width:300px;padding:7px;font-size:9px}.kaiju-danger .mutation{top:218px}}

/* A separate race HUD and a dedicated browser control room. */
.host-console-button{width:100%;margin-top:10px;border:1px solid #a98aff88;background:#a98aff19;color:#d8caff;border-radius:5px;min-height:44px;font:10px monospace;font-weight:bold}
.host-console-note{font-size:10px;line-height:1.5;color:#a9b5ca;margin:7px 0 0}
.parkour-card{position:fixed;right:25px;bottom:125px;width:265px;padding:16px;background:#131e30ed;border:1px solid #58e2e850;border-top:3px solid #58e2e8;border-radius:8px;pointer-events:none}
.parkour-card .eyebrow{font:8px monospace;color:#58e2e8;letter-spacing:.7px;margin:0 0 10px}.parkour-card h3{font:22px Impact,'Arial Narrow',sans-serif;font-weight:normal;letter-spacing:.6px;margin:0 0 13px;color:#f8f2e7}.parkour-card p{font:10px/1.6 monospace;color:#b2c4d6;margin:9px 0}.parkour-card strong{font:10px monospace;color:#c4f579}
.race-progress{height:7px;border-radius:6px;background:#ffffff16;overflow:hidden}.race-progress>div{height:100%;background:linear-gradient(90deg,#58e2e8,#c4f579);transition:width .2s}
.parkour-mode #item-card,.parkour-mode .item-keys,.parkour-mode #trick-button,.parkour-mode [data-touch-action="cycle"],.parkour-mode #touch-trick{display:none!important}
.parkour-mode .player-score{min-width:38px;color:#58e2e8}.parkour-mode .action-bar{border-color:#58e2e844}.parkour-mode .round-banner #mode-label{color:#58e2e8}
.controller-banner{position:fixed;left:50%;top:195px;transform:translateX(-50%);max-width:360px;text-align:center;pointer-events:none;color:#d8caff;font:10px/1.6 monospace;background:#1e2138dd;border:1px solid #a98aff44;border-radius:5px;padding:8px 12px}.controller-banner strong{display:block;font-size:11px;letter-spacing:1px}.controller-banner span{color:#b9bdd1;font-size:9px}
.spectating #parkour-card{display:none!important}.controller-mode .spectator-panel p{margin-bottom:0}
.touch-mode .parkour-card{right:18px;bottom:260px;width:230px;padding:12px}.touch-mode.parkour-mode .touch-actions{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.parkour-card{right:16px;width:215px;padding:12px}.parkour-card h3{font-size:18px}.controller-banner{top:218px;max-width:290px}}
@media(max-width:900px){.touch-mode .parkour-card{bottom:250px;width:200px}.parkour-card p{font-size:9px}.controller-banner{top:225px;max-width:220px}}
@media(max-width:600px){.touch-mode .parkour-card{right:10px;bottom:230px;width:calc(100vw - 174px);max-width:250px;padding:9px}.parkour-card .eyebrow,.touch-mode #race-instructions{display:none}.parkour-card h3{font-size:16px;margin-bottom:9px}.controller-banner{top:265px;width:calc(100% - 30px);max-width:320px}.host-console-note{font-size:9px}}
@media(max-height:600px) and (min-width:601px){.touch-mode .parkour-card{bottom:145px}.touch-mode #race-instructions,.parkour-card .eyebrow{display:none}.parkour-card h3{font-size:16px;margin-bottom:8px}.controller-banner{top:145px}.parkour-card{bottom:100px}}

.bot-stepper{display:flex;gap:6px;align-items:center}.bot-stepper select{min-width:64px;flex:1}.bot-stepper button{min-width:44px;min-height:44px;font-size:20px;touch-action:manipulation}.bot-row{flex-wrap:wrap}.bot-row>label{flex:1;min-width:80px}.controller-mode .lobby-panel{max-height:calc(100dvh - 180px);overflow:auto}.controller-mode .watch-note:not(#bots-note){display:none}.controller-mode .controller-banner{top:185px}.controller-mode #mode-description{font-size:10px;line-height:1.5}
@media(max-width:900px){.controller-mode .controller-banner{top:225px}.controller-mode .lobby-panel{max-height:calc(100dvh - 440px)}}
@media(max-height:600px){.controller-mode .controller-banner{display:none}.controller-mode .lobby-panel{max-height:calc(100dvh - 150px)}.controller-mode #mode-description{display:none}}

.hard-mode .parkour-card{border-top-color:#fa77b2}.hard-mode .parkour-card .eyebrow,.hard-mode .round-banner #mode-label{color:#ff95cb}.hard-mode .race-progress>div{background:linear-gradient(90deg,#fa77b2,#ffad5b)}.hard-mode .player-score{color:#ff95cb}

/* A compact weapon display for the separate voxel deathmatch. */
.laser-card{position:fixed;right:25px;bottom:135px;width:245px;padding:16px;border:1px solid #55edf865;border-top:3px solid #55edf8;border-radius:6px;background:#102137ec;pointer-events:none}
.laser-card .eyebrow{font:8px monospace;letter-spacing:.6px;color:#65f4ff;margin:0 0 10px}.laser-card h3{margin:0 0 12px;font:25px Impact,'Arial Narrow',sans-serif;letter-spacing:1px;color:#fff5df}.laser-card>strong{display:block;font:10px monospace;color:#65f4ff;margin-top:8px}.laser-card>p{font:9px/1.5 monospace;color:#bfd2e1;margin:10px 0}
.laser-meter{height:6px;background:#ffffff18;overflow:hidden}.laser-meter>div{height:100%;background:linear-gradient(90deg,#65f4ff,#fc84d4);transition:width .08s linear}
.laser-power{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff16;padding:9px 0 2px;margin-top:6px;color:#7f94a9;font:8px monospace}.laser-power b{font-size:9px}.laser-power.active{color:#c4f579}.laser-power.active span{font-weight:bold;font-size:11px}.laser-power#laser-power-jump.active{color:#c7a3ff}.laser-power#laser-power-splash.active{color:#ff9ad6}
.instagib-mode #item-card,.instagib-mode #grab-action,.instagib-mode .item-keys,.instagib-mode #trick-button,.instagib-mode #touch-grab,.instagib-mode [data-touch-action="cycle"],.instagib-mode #touch-trick{display:none!important}
.instagib-mode .player-score,.instagib-mode .round-banner #mode-label{color:#65f4ff}.instagib-mode .action-bar{border-color:#65f4ff55}.instagib-mode #touch-fire{background:#55edf8;color:#102137;font-weight:bold;border-color:#affaff}.instagib-mode #touch-fire:disabled{opacity:.55}.instagib-mode .touch-actions{grid-template-columns:repeat(2,1fr);width:240px}.instagib-mode #touch-fire{order:-1;min-height:60px}.instagib-mode .crosshair{color:#65f4ff}
.touch-mode .laser-card{right:18px;bottom:190px;width:240px;padding:12px}.touch-mode .laser-card h3{font-size:21px}.touch-mode .laser-power{font-size:8px;padding-top:6px}
@media(max-width:1100px){.laser-card{right:16px;width:215px;padding:12px}.laser-card h3{font-size:21px}}
@media(max-width:700px){.laser-card{right:12px;width:180px;bottom:120px;padding:10px}.laser-card .eyebrow{display:none}.laser-card h3{font-size:19px}.laser-card .laser-power{font-size:7px}.laser-power b{font-size:8px}.touch-mode .laser-card{right:10px;bottom:175px;width:calc(100vw - 174px);max-width:240px}.instagib-mode .touch-actions{width:calc(100vw - 174px);max-width:240px}.laser-card>p{font-size:8px}}
@media(max-height:600px){.touch-mode .laser-card{bottom:160px;padding:9px}.laser-card .eyebrow,.laser-card>p{display:none}.laser-power{padding-top:4px;margin-top:3px}.laser-card h3{margin-bottom:7px}}

/* Block double-tap zoom even on empty HUD areas; keep menu scrolling. */
html,body{touch-action:manipulation}
body.playing{touch-action:pan-x pan-y}
#world,.touch-controls,.touch-actions,.touch-action{touch-action:none}
@media(pointer:coarse){input,select,textarea{font-size:16px!important}}