*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#aed6e7;font-family:Inter,"Segoe UI",sans-serif;color:#203f44}canvas{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}canvas:focus-visible{outline:2px solid #fff;outline-offset:-4px}#overlay{position:fixed;inset:0;pointer-events:none;padding:32px 38px;display:flex;flex-direction:column;justify-content:space-between}header{display:flex;align-items:center;gap:13px}h1{font-size:25px;letter-spacing:-1.1px;font-weight:650;margin:0}h1 span{font-weight:300;color:#447981;margin-left:5px}header p{font-size:13px;margin:4px 0 0;color:#3e6970;letter-spacing:.1px}.orbit-mark{font-size:46px;line-height:1;transform:rotate(-25deg)}.edition{margin-left:auto;align-self:flex-start;font-size:12px;letter-spacing:2px;padding:10px 13px;border:1px solid #406c772e;border-radius:30px}footer{align-self:center;text-align:center}.controls{display:flex;align-items:center;justify-content:center;gap:23px;padding:14px 24px;border-radius:18px;border:1px solid #ffffff8c;background:#f2f7eddd;box-shadow:0 8px 28px #23463314;backdrop-filter:blur(12px)}.controls>span{display:flex;align-items:center;gap:8px}.controls>span:first-child{position:relative;padding-top:10px}.controls>span:first-child>kbd{position:absolute;top:-11px;left:26px}.wasd{display:flex;gap:3px}kbd{font:500 12px "Segoe UI",sans-serif;display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:25px;padding:0 6px;background:#fff9;border:1px solid #a3b8b16b;border-radius:5px;box-shadow:0 2px 0 #b4c3b75c}b{font-size:14px;font-weight:500;white-space:nowrap}.controls i{height:22px;border-left:1px solid #46635926}.controls svg{width:16px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}.hint{font-size:12px;color:#eaf2dd;margin:13px 0 0;text-shadow:0 1px 5px #203923}.error{position:fixed;inset:25%;background:#f1f7ed;padding:30px;border-radius:20px;font-size:18px;height:fit-content}@media(max-width:720px){#overlay{padding:20px}.edition{font-size:10px}.controls{gap:12px;padding:16px;flex-wrap:wrap;max-width:420px}b{font-size:12px}.controls i{display:none}h1{font-size:22px}header p{font-size:12px}}@media(max-height:480px){#overlay{padding:14px}.hint{display:none}.controls{padding:10px 20px}header p{display:none}}
.interaction-prompt{position:fixed;left:50%;bottom:146px;transform:translateX(-50%);padding:10px 20px;border-radius:24px;background:#203f44e8;color:#fff4dc;border:1px solid #ffffff4a;font-size:15px;box-shadow:0 4px 15px #163e3920;pointer-events:none}.interaction-prompt[hidden]{display:none}@media(max-width:720px){.interaction-prompt{bottom:160px}}

.activity-status{position:fixed;left:50%;bottom:198px;transform:translateX(-50%);padding:10px 18px;border-radius:16px;background:#fff5dded;color:#244b50;font-size:14px;white-space:nowrap;pointer-events:none;box-shadow:0 3px 18px #16353c16}@media(max-width:650px){.activity-status{bottom:212px;font-size:12px}}

.sunset-letterbox{position:fixed;inset:0;pointer-events:none;z-index:30;color:#f5debc;font-family:Georgia,serif;text-align:center}.sunset-letterbox i{position:absolute;left:0;width:100%;height:12%;background:#080b0c;transition:transform 1.2s ease}.sunset-letterbox i:first-child{top:0;transform:translateY(-100%)}.sunset-letterbox i:nth-child(2){bottom:0;transform:translateY(100%)}.sunset-letterbox.active i{transform:translateY(0)}.sunset-letterbox span{position:absolute;bottom:2.5%;left:0;width:100%;font:10px/1.5 system-ui;letter-spacing:.24em;opacity:0;transition:opacity .8s}.sunset-letterbox b{display:block;font:italic 20px Georgia,serif;letter-spacing:.03em}.sunset-letterbox small{display:block;font:10px system-ui;letter-spacing:.1em;margin-top:5px}.sunset-letterbox.active span{opacity:1}.sunset-mode #overlay,.sunset-mode .interaction-prompt,.sunset-mode .activity-status{opacity:0;pointer-events:none}#overlay{transition:opacity .6s}
.music-control{position:fixed;right:148px;top:32px;z-index:40;width:37px;height:37px;display:grid;place-items:center;padding:8px;border:1px solid #406c7740;border-radius:50%;background:#e5f1e57d;color:#254f57;cursor:pointer;backdrop-filter:blur(8px)}.music-control:hover{background:#eff7eede}.music-control:focus-visible{outline:2px solid #315e66;outline-offset:3px}.music-control svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.music-control .music-slash{display:none}.music-control.muted .music-slash{display:block}.music-control.muted{color:#596d70}.sunset-mode .music-control{background:#e5f1e5c9}@media(max-width:720px){.music-control{right:123px;top:20px}}@media(max-height:480px){.music-control{top:14px;right:124px}}
.starting #game{visibility:hidden}
.startup{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:auto;background:radial-gradient(ellipse at 20% 0%,#c6e2de,transparent 70%),#eae5d7;color:#254b49;font-family:inherit;padding:24px;box-sizing:border-box}
.start-card{width:min(480px,100%);text-align:center;padding:34px;box-sizing:border-box;border:1px solid #ffffff90;border-radius:28px;background:#fcfaf0bd;box-shadow:0 20px 80px #274c4218}
.start-brand{font-size:22px;font-weight:700;text-align:left}.start-brand span{display:block;font-size:9px;letter-spacing:2px;margin-top:7px;font-weight:400}
.start-card h1{font-size:27px;margin:34px 0 16px}.start-card p{font-size:13px;line-height:1.6;color:#55736c}
.start-card button,.start-card input{font:inherit;color:inherit;border:1px solid #557c6350;border-radius:13px;background:#ffffff70;padding:13px 18px;box-sizing:border-box}
.start-card button{cursor:pointer;display:block;width:100%;margin-top:10px}.start-card button:disabled{opacity:.5;cursor:wait}.start-card .primary{background:#285d54;color:#fff7e6;border-color:#285d54}.start-card .back{background:none;border:0;font-size:12px}.start-card input{width:100%;font-size:21px;text-align:center;margin:12px 0}.start-card button:focus-visible,.start-card input:focus-visible{outline:3px solid #e2ad50;outline-offset:3px}
.avatar-options{display:flex;gap:14px}.avatar-options button{width:50%;padding:8px}.avatar-options img{width:100%;height:195px;object-fit:contain}.avatar-options span{display:block;margin-bottom:8px}.avatar-options button[aria-pressed=true]{background:#dce8d4;border:2px solid #386552;padding:7px}.start-card .start-error{color:#a03f42;min-height:21px}
.room-badge{position:fixed;top:82px;right:38px;z-index:41;padding:10px 14px;border:1px solid #37675230;border-radius:15px;background:#f6f2dfce;color:#284e47;font:12px system-ui;display:flex;align-items:center;gap:14px}.room-badge small{display:block;letter-spacing:2px;font-size:8px}.room-badge strong{font-size:16px;letter-spacing:2px}.room-badge .presence{font-size:12px;white-space:nowrap}.room-status{position:fixed;top:146px;right:38px;z-index:42;color:#284e47;background:#f6f2dfdf;border-radius:10px;padding:7px 12px;font:12px system-ui;max-width:250px}.room-status:empty{display:none}
@media(max-width:720px){.room-badge{top:65px;right:22px}.room-status{top:127px;right:22px}.start-card{padding:22px}.avatar-options img{height:155px}}

.room-chat{position:fixed;left:26px;bottom:105px;z-index:55;width:min(340px,calc(100vw - 52px));padding:10px 13px;box-sizing:border-box;border:1px solid #e6e2c933;background:#193c39dd;border-radius:13px;color:#fff5e7;font:13px/1.45 system-ui;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s;pointer-events:none}.room-chat.visible{opacity:1;visibility:visible;transition:opacity .6s,visibility 0s}.room-chat p{margin:4px 0;overflow-wrap:anywhere}.room-chat b{color:#e7b6bc}.room-chat input{box-sizing:border-box;width:100%;border:1px solid #e1e4c766;border-radius:7px;background:#fff8eb;color:#28463f;font:inherit;padding:8px;margin-top:6px;pointer-events:auto}.room-chat small{font-size:10px;color:#c8d8cc}.room-chat [hidden]{display:none}
/* Nummade Kochi: user-supplied identity and sunset artwork. */
.startup{isolation:isolate;place-items:center;padding:32px clamp(24px,6vw,110px);background:#314942}
.startup::before{content:"";position:fixed;inset:-10px;z-index:-2;background:url('/branding/cover.png') center/cover no-repeat;filter:blur(3px);transform:scale(1.015)}
.startup::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#233b3855,transparent 70%),linear-gradient(0deg,#183b3338,transparent 50%)}
.start-card{width:min(440px,100%);padding:26px 30px 20px;border:1px solid #fff7dd9c;border-radius:26px;background:linear-gradient(145deg,#fff4e0dc,#f7ecd4b8);box-shadow:0 24px 80px #122b3645;backdrop-filter:blur(16px);color:#294a43}
.start-brand{text-align:center}.start-brand img{display:block;width:230px;max-width:90%;height:auto;margin:0 auto}.start-brand span{font-size:9px;letter-spacing:.25em;color:#5e7360;margin-top:3px}
.start-card h1{font-size:25px;letter-spacing:-.7px;margin:22px 0 14px}.start-card p{color:#536857;font-size:12px}.start-card .start-error{margin:8px 0 0;min-height:18px;color:#973934}
.start-card button,.start-card input{border-color:#777f613f;background:#fff9e96b;border-radius:12px;transition:background .18s,border-color .18s,box-shadow .18s}
.start-card button:hover{background:#fff8eabb;border-color:#718366}.start-card .primary{background:#355c4c;border-color:#355c4c;color:#fff2d6;box-shadow:0 4px 12px #24463320}.start-card .primary:hover{background:#294b3d;border-color:#294b3d}
.start-card .back:hover{background:#fff7df50}.avatar-options{gap:12px}.avatar-options button{background:#f8efd640;border:1px solid #87977b50}.avatar-options img{height:165px}.avatar-options span{font-size:12px;letter-spacing:.06em}.avatar-options button[aria-pressed=true]{padding:7px;background:#d7dec29e;border:2px solid #587656;box-shadow:0 4px 18px #33574215}
#overlay .game-logo{display:block;width:152px;height:auto;padding:6px 10px;background:transparent}
#overlay footer{position:absolute;right:28px;bottom:24px;text-align:left}
#overlay .controls{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:174px;padding:12px 13px;border-radius:13px;background:#fff5e4a3;border:1px solid #fff8e975;box-shadow:0 3px 15px #23463310;backdrop-filter:blur(8px);color:#34534a}
#overlay .controls>span,#overlay .controls>span:first-child{position:static;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0}
#overlay .control-keys{display:flex;align-items:center;gap:2px;font:11px "Segoe UI",sans-serif;min-height:19px}#overlay .controls kbd{font-size:10px;min-width:16px;height:19px;padding:0 3px;border-radius:4px;box-shadow:none;background:#fffaf083}#overlay .controls b{font-size:11px;font-weight:400}
@media(max-width:900px){.startup{place-items:center;padding:22px}.startup::before{background-position:58% center}.startup::after{background:#23423626}}
@media(max-width:720px){#overlay .game-logo{width:122px;padding:4px 8px}#overlay footer{right:16px;bottom:16px}#overlay .controls{width:155px;padding:10px;gap:5px}.start-card{padding:22px}.start-brand img{width:210px}.avatar-options img{height:150px}}
@media(max-height:600px){.startup{align-items:start;padding:16px}.start-card{padding:16px 24px}.start-brand img{width:165px}.start-card h1{margin:14px 0 10px;font-size:22px}.avatar-options img{height:115px}.start-card p{margin:8px 0}.start-card button{padding-top:10px;padding-bottom:10px}#overlay .game-logo{width:110px}#overlay footer{bottom:12px;right:14px}}
@media(prefers-reduced-transparency:reduce){.start-card{background:#f3e8d6}#overlay .controls{background:#fff5e4}}
.graphics-settings{position:fixed;right:18px;top:66px;z-index:35;font-size:12px;color:#294d43;pointer-events:auto}.graphics-settings summary{list-style:none;cursor:pointer;text-align:right;font-size:22px;padding:5px 10px}.graphics-settings[open]{width:190px;padding:10px 14px;border-radius:16px;background:#f3efdde8;backdrop-filter:blur(12px);box-shadow:0 8px 30px #182f3920}.graphics-settings label{display:grid;gap:8px}.graphics-settings select{padding:8px;border:1px solid #67846b66;border-radius:8px;background:#f5f0df;color:#294d43}.graphics-settings small{display:block;margin-top:8px;color:#5e7464}

/* The waiting world is the menu background. */
.startup {background:transparent!important;justify-content:flex-end!important;padding:4vw!important;}
.startup::before,.startup::after {display:none!important;}
.start-card {width:min(370px,38vw)!important;background:rgba(248,237,210,.82)!important;backdrop-filter:blur(10px);padding:26px!important;}
.avatar-options button {min-height:60px!important;}
.startup.leaving {opacity:0;transform:translateY(15px);transition:opacity .5s,transform .5s;pointer-events:none;}
@media(max-width:650px){.startup{align-items:flex-end!important;padding:14px!important}.start-card{width:100%!important;max-height:48vh;overflow:auto}.start-brand img{max-height:64px!important}.start-card h1{font-size:20px}}

.world-minimap{position:fixed;bottom:18px;left:18px;width:170px;height:170px;border:3px solid #fff2d2;border-radius:50%;box-shadow:0 3px 15px #213c4333;pointer-events:none;z-index:8}.room-chat{bottom:200px!important}.starting .world-minimap,.sunset-mode .world-minimap{opacity:0}@media(max-width:650px){.world-minimap{width:120px;height:120px;bottom:12px;left:12px}.room-chat{bottom:145px!important}}

.sunset-letterbox.metro-active span{display:none}
.starting #game{visibility:visible}.startup{display:flex;align-items:center}.starting #overlay{visibility:hidden}

/* Preserve HUD state and DOM while the shared cinematic overlay owns the view. */
body.metro-cinematic > :not(#game):not(.sunset-letterbox):not(script):not(style) { visibility:hidden !important; pointer-events:none !important; }

.date-points{position:fixed;right:38px;top:190px;background:#fff3e8ed;color:#a84f70;border:1px solid #eab4c8;border-radius:18px;padding:8px 14px;font-size:13px;z-index:30;pointer-events:none}.penalty-panel{position:fixed;bottom:24px;right:24px;background:#fff6deed;border:1px solid #94b7a5;border-radius:20px;padding:14px 24px;z-index:80;text-align:center;white-space:pre-line;line-height:1.6;font-size:14px;max-width:90vw;color:#28534d}.penalty-panel[hidden]{display:none}.penalty-panel progress{width:220px;height:14px;accent-color:#d5a34b}.penalty-active .world-minimap,.penalty-active .interaction-prompt,.penalty-active .activity-status,.penalty-active .room-status,.penalty-active .room-chat,.penalty-active .date-points,.penalty-active [aria-label="Game controls"]{display:none!important}.outfit-notice{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:18px;background:#fff4df;color:#98586c;z-index:70}

.penalty-active #overlay footer{display:none}.sunset-mode .date-points,.metro-cinematic .date-points{display:none}@media(max-width:720px){.date-points{right:16px;top:182px;font-size:11px}}

.penalty-active #overlay,.penalty-active .room-badge,.penalty-active .music-toggle,.penalty-active .outfit-notice{display:none!important}
.penalty-panel{inset:0;max-width:none;padding:0;background:none;border:0;border-radius:0;color:#fff9e7;pointer-events:none;white-space:normal;font-family:system-ui}
.penalty-scoreboard{position:absolute;top:22px;left:50%;transform:translateX(-50%);display:flex;gap:40px;background:#123d39ed;border:1px solid #c8dbb97a;border-radius:18px;padding:12px 28px;box-shadow:0 8px 30px #0002;min-width:260px}
.penalty-team{min-width:110px;max-width:180px;display:grid;gap:3px}.penalty-team>span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.penalty-team>strong{font-size:32px;line-height:1.1}.penalty-shots{display:flex;justify-content:center;gap:9px}.penalty-shots i{font-style:normal;color:#b6c9bf;font-size:17px}.penalty-shots .scored{color:#bdeb95}.penalty-shots .missed{color:#eeac99}.penalty-shots .current{color:#ffe392;text-shadow:0 0 8px #ffe392}
.penalty-turn{position:absolute;top:148px;left:50%;transform:translateX(-50%);background:#163f39e8;border-radius:30px;padding:8px 22px;font-size:13px;font-weight:800;letter-spacing:.12em}
.penalty-controls{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:#133e39eb;border:1px solid #c8dbb977;border-radius:20px;padding:12px 22px 24px}.penalty-directions{display:flex;gap:12px}.penalty-directions>div{display:grid;justify-items:center;width:72px;padding:5px;border-radius:12px;opacity:.64}.penalty-directions>.selected{background:#ffffff1c;opacity:1;color:#ffe392}.penalty-panel kbd{background:#f4edda;color:#214b43;border-radius:6px;border-bottom:3px solid #b5baa6;font:bold 17px system-ui;min-width:32px;padding:3px 9px;display:inline-block}.penalty-directions b{font-size:18px;line-height:1.2}.penalty-directions small{font-size:9px;font-weight:700;white-space:nowrap}.penalty-charge{margin-top:10px;display:flex;gap:12px;align-items:center}.penalty-charge span{font-size:10px;font-weight:700;text-align:left}.penalty-charge small{display:block;font-size:8px;opacity:.7}.penalty-panel progress{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);width:270px;height:10px;accent-color:#f9d775}.penalty-cancel{position:fixed;bottom:-25px;right:0;font-size:10px;white-space:nowrap}.penalty-cancel kbd{font-size:10px;min-width:0}
@media(max-height:600px){.penalty-scoreboard{top:10px;padding:6px 20px}.penalty-turn{top:112px;padding:5px 14px}.penalty-directions b{display:none}}

.penalty-active #music-toggle,.penalty-active [aria-label="Graphics settings"]{display:none!important}

/* Communication shares the existing music control and stays above the minimap. */
body.has-voice .music-control:not(.mic-control){right:193px}.mic-control{right:148px;transition:background .2s,color .2s,box-shadow .2s}.mic-control.speaking{box-shadow:0 0 0 4px #8cb99c38}.mic-control:disabled{opacity:.65;cursor:wait}.mic-control.unavailable{border-color:#a880765c}.mic-control .mic-slash{display:none}.mic-control.muted .mic-slash{display:block}
.room-chat{opacity:1;visibility:visible;background:#193c3947;border-color:#e6e2c922;padding:8px 12px;transition:background .2s;max-width:340px}.room-chat.editing{background:#193c39db}.room-chat small{display:block;font-size:11px;color:#f5efd7b8}.room-chat p{transition:opacity .65s;max-height:100px;overflow:hidden;text-shadow:0 1px 2px #123e3b}.room-chat p.fading{opacity:0}.room-chat .chat-join,.room-chat .chat-leave,.room-chat .chat-system{color:#e2e8d9c9;font-size:12px}.room-chat .chat-join b{color:#c8dfb4}.room-chat .chat-leave b{color:#d9c5b7}.room-chat .chat-player{color:#fff9ed}
@media(max-width:720px){body.has-voice .music-control:not(.mic-control){right:168px}.mic-control{right:123px}.room-chat{left:14px;width:min(310px,calc(100vw - 28px))}}@media(max-height:480px){body.has-voice .music-control:not(.mic-control){right:169px}.mic-control{right:124px}}

.feedback-button{pointer-events:auto;cursor:pointer;color:#284f49;background:#e5f1e5c9;font:500 12px "Segoe UI",sans-serif;letter-spacing:0;padding:10px 12px;width:98px;white-space:nowrap}.feedback-button:hover{background:#fff4df}.feedback-button:focus-visible{outline:2px solid #315e66;outline-offset:3px}.feedback-dialog{width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #fff7dd;border-radius:24px;padding:24px;color:#28534d;background:#f6efddeb;box-shadow:0 18px 65px #102e4255}.feedback-dialog::backdrop{background:#143b4459}.feedback-dialog form{display:grid;gap:14px}.feedback-heading{display:flex;align-items:start;gap:12px}.feedback-heading h2{font-size:21px;margin:0;line-height:1.3}.feedback-close{margin-left:auto;border:0;background:transparent;font-size:26px;color:inherit;cursor:pointer}.feedback-dialog label{font-size:14px}.feedback-dialog textarea{font-size:15px;line-height:1.5;font-family:inherit;resize:vertical;min-height:145px;width:100%;padding:12px;border:1px solid #91ab9a;border-radius:12px;background:#fffcf4;color:#254d46}.feedback-dialog small{font-size:12px;line-height:1.5;color:#62786b}.feedback-status{font-size:13px;line-height:1.5;margin:0}.feedback-send{padding:13px;border:0;border-radius:12px;background:#345e50;color:#fff5dc;font:inherit;cursor:pointer}.feedback-send:disabled{opacity:.65}.feedback-open .room-chat{visibility:hidden}