*{box-sizing:border-box}body{margin:0;background:#e8e7df;color:#21363d;font:13px system-ui,sans-serif;overflow:hidden}canvas{display:block}body,canvas{touch-action:none}button{font:inherit;cursor:pointer;min-height:38px;border:1px solid #bfccc9;background:#fafbf6;color:#253b43;border-radius:5px;padding:8px 12px}button:hover{background:#e3eee9}button:disabled{opacity:.45;cursor:not-allowed}button.active{background:#234751;color:#fff;border-color:#234751}button:focus-visible{outline:3px solid #d7a33c;outline-offset:2px}header,#selection,#orders,#legend,#events,#tools{position:fixed;z-index:3}header{top:20px;left:20px;width:312px;padding:18px;background:#172f38f5;color:#fff;border-radius:9px;box-shadow:0 4px 25px #10222d22}.brand{display:flex;justify-content:space-between;align-items:center}.brand strong{font-size:24px;letter-spacing:5px}.brand strong span{display:block;font-size:9px;font-weight:500;letter-spacing:4.2px;color:#b4c7c8;margin-top:2px}#world-clock{font-size:10px;color:#c3d9bb;letter-spacing:1px}header p{font-size:11px;color:#b9c9c8;margin:15px 0}#scoreboard{border-top:1px solid #ffffff20}.faction-score{display:grid;grid-template-columns:1fr auto;padding:10px 0 9px 10px;border-left:3px solid var(--faction);margin:10px 0}.score-metrics{display:flex;align-items:baseline;gap:8px}.faction-score strong{font-size:21px}.score-metrics b{font-size:10px;color:#e6d58e;white-space:nowrap}.faction-score small{grid-column:1/-1;font-size:10px;color:#b4c7c8}#population{display:block;font-size:10px;color:#adc5c8}#tools{top:20px;right:20px;display:flex;gap:6px}#selection{top:76px;right:20px;width:310px;max-height:calc(100dvh - 135px);overflow:auto;padding:20px;background:#fcfbf5f5;border:1px solid #c4ceca;border-radius:8px;box-shadow:0 4px 25px #10222d12;touch-action:pan-y}#selection>button[data-action=close]{float:right;border:0;font-size:22px;background:transparent;padding:0;min-height:25px;width:25px}h2{font-size:22px;line-height:1.2;margin:8px 0 18px;overflow-wrap:anywhere}h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;margin:20px 0 10px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#668174;margin:0}.intro{font-size:13px;line-height:1.7}ol{padding-left:18px;font-size:12px;line-height:1.7}li{padding-bottom:8px}dl{display:grid;grid-template-columns:1fr 1.2fr;gap:9px;font-size:11px;line-height:1.5}dt{color:#73807a}dd{margin:0;text-align:right;overflow-wrap:anywhere}.resources{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:14px}.resources div{padding:9px 5px;background:#edf0e6;border-radius:4px;text-align:center}.resources span{display:block;font-size:9px;color:#65746e}.resources strong{display:block;margin-top:4px;font-size:17px}.help{font-size:10px;line-height:1.65;color:#6c7b78}.priority{display:flex;gap:5px}.priority button{flex:1;font-size:11px;padding:6px}#selection>small{display:block;margin-top:15px;font-size:9px;color:#8a9590;overflow-wrap:anywhere}#selection>button[data-action=select-unit]{display:block;width:100%;margin:5px 0}#selection>button.critical-morale{border-color:#d25d53;color:#ffd7ce;animation:critical-morale-pulse 2s ease-in-out infinite}progress{width:100%;accent-color:#ce993b}@keyframes critical-morale-pulse{0%,to{opacity:1;background:#593238}50%{opacity:.3;background:#2b3b42}}@media(prefers-reduced-motion:reduce){#selection>button.critical-morale{animation:none;outline:2px solid #d25d53}}#orders{bottom:40px;left:20px;max-width:calc(100vw - 370px);background:#fcfbf5f5;border:1px solid #c4ceca;border-radius:8px;padding:12px}.order-buttons,.route-buttons{display:flex;gap:6px;flex-wrap:wrap}.order-buttons button{font-size:12px}.route-buttons{margin-top:10px;align-items:center}.route-buttons span{font-size:9px;letter-spacing:1px;color:#7c8984;margin-right:5px}.route-buttons button{min-height:28px;padding:4px 7px;font-size:10px}#status{font-size:11px;margin:10px 0 0;max-width:580px;line-height:1.5}#status.error{color:#a22d24}#legend{left:20px;top:290px;font-size:10px;display:flex;gap:10px;flex-wrap:wrap;width:310px;padding:10px;background:#fcfbf5ed;border-radius:6px}#legend span:not(:nth-child(4)):before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:#397ddd;margin-right:4px}#legend .red:before{background:#d25d53!important}#legend .contested:before{background:#ba8b32!important}#legend small{width:100%;color:#697b76}#events{left:20px;top:360px;width:280px;background:#fcfbf5db;padding:10px 12px;border-radius:6px;font-size:10px;pointer-events:none}#connection{font-size:9px;letter-spacing:1px;color:#438364}#event-log{margin:9px 0 0;padding:0;list-style:none;line-height:1.5;color:#697b76}footer{position:fixed;bottom:9px;right:14px;background:#fcfbf5dd;padding:4px 7px;font-size:10px;border-radius:3px;z-index:3}#game canvas{cursor:grab}#game canvas:active{cursor:grabbing}#hud{position:fixed;bottom:10px;left:20px;background:#fff;z-index:20}.follow-button{display:none}@media(max-width:1000px){header{width:250px}.brand strong{font-size:20px}#legend{width:250px;top:283px}#events{width:240px;top:350px}#selection{width:280px}#orders{max-width:calc(100vw - 330px)}.order-buttons button{font-size:10px;padding:6px 8px}}@media(max-width:700px){header{top:8px;left:8px;width:205px;padding:10px}.brand strong{font-size:17px;letter-spacing:3px}.brand strong span{font-size:7px;letter-spacing:2.8px}#world-clock{font-size:8px}header p,#population{display:none}#scoreboard{margin-top:8px}.faction-score{padding:3px 0 3px 7px;margin:6px 0;font-size:10px}.faction-score strong{font-size:16px}.faction-score small{font-size:8px}#tools{top:8px;right:8px;gap:3px;flex-wrap:wrap;width:112px;justify-content:flex-end}#tools button{min-height:32px;padding:5px 8px;font-size:10px}#selection{top:170px;right:8px;width:230px;max-height:calc(100dvh - 365px);padding:13px}h2{font-size:17px;margin-bottom:12px}dl{font-size:10px;gap:5px}#selection ol{font-size:10px}.intro{font-size:11px}#orders{left:8px;bottom:28px;max-width:none;width:calc(100vw - 16px);padding:9px}.order-buttons{gap:4px}.order-buttons button{flex:1;font-size:10px;padding:5px;min-height:34px}.route-buttons{gap:4px;margin-top:7px}.route-buttons span{font-size:8px}.route-buttons button{font-size:9px}#status{font-size:10px;line-height:1.4;margin-top:7px}#legend{top:170px;left:8px;width:112px;padding:8px;gap:7px;font-size:9px}#events{display:none}footer{font-size:8px;bottom:3px;right:8px}.resources strong{font-size:14px}.resources span{font-size:8px}}@media(max-height:600px)and (min-width:701px){#events{display:none}#selection{max-height:calc(100dvh - 110px)}#legend{display:none}header p{display:none}}[hidden]{display:none!important}body:not(.playing){overflow:auto;touch-action:auto;background:#edf0e8}#portal{max-width:1120px;margin:0 auto;padding:30px 28px 70px;touch-action:pan-y;font-size:14px}.portal-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #cad5cd;padding-bottom:24px}.portal-brand{font-weight:800;letter-spacing:3px;color:#183e43;text-decoration:none}.portal-heading{margin:64px 0 20px;max-width:660px}.portal-heading h1{font-size:clamp(32px,5vw,54px);letter-spacing:-2px;line-height:1.08;margin:12px 0 18px}.portal-heading>p:last-child{color:#63786e;line-height:1.7;font-size:16px}.portal-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.portal-card{background:#fffef8;border:1px solid #ced8cd;border-radius:14px;padding:26px;box-shadow:0 8px 25px #1d403908}.portal-card h2{margin:14px 0 12px;font-size:25px}.portal-card p{line-height:1.65;overflow-wrap:anywhere}.game-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:20px;margin-top:24px}.game-card{display:flex;flex-direction:column;align-items:flex-start}.game-card .portal-actions{margin-top:auto;padding-top:20px}.game-badge{font-size:11px;text-transform:uppercase;letter-spacing:1px;background:#e6eadf;color:#54714f;border-radius:5px;padding:7px 10px}.game-badge.running{background:#d9eedf;color:#236b43}.game-badge.paused{background:#f4e9cc;color:#826522}.login-card,.setup-form{max-width:480px}.portal-card form,.setup-form{display:grid;gap:20px}#portal label{display:grid;gap:8px;font-size:12px;font-weight:600;color:#4d6358}#portal input,#portal select{font:inherit;font-size:16px;width:100%;min-height:46px;background:#fff;border:1px solid #bacabe;border-radius:6px;padding:10px 12px;color:#213d34}#portal input:focus,#portal select:focus{outline:2px solid #377359;outline-offset:2px}#portal button{min-height:42px}#portal .primary{background:#234b3c;border-color:#234b3c;color:#fff}#portal .primary:hover{background:#31654e}#portal .danger{color:#a74436}.muted{color:#738074;font-size:12px}#portal-message{min-height:18px;color:#286144;line-height:1.6}#portal-message.error{color:#a12b28}.menu-link{display:inline-flex;align-items:center;text-decoration:none;background:#fafbf6;color:#253b43;border:1px solid #bfccc9;border-radius:5px;padding:8px 12px}#portal .login-card>button{margin-top:15px}@media(max-width:700px){#portal{padding:22px 18px 45px}.portal-top{align-items:flex-start;flex-direction:column}.portal-heading{margin-top:38px}.portal-card{padding:20px}.portal-actions{gap:8px}.portal-brand{font-size:12px}#tools .menu-link{font-size:10px;padding:5px 8px;min-height:32px}}#legend .legend-faction:before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--faction)!important;margin-right:4px}.unit-training{display:grid;gap:6px}.unit-training button{width:100%;text-align:left;font-size:11px}#guide{position:absolute;z-index:20;bottom:116px;left:20px;width:min(620px,calc(100% - 370px));padding:10px 14px;background:#fff8e7;color:#263a40;border:1px solid #c5a759;border-radius:10px;box-sizing:border-box}#guide strong,#guide span,#guide small{display:block}#guide span{margin:4px 0;font-size:13px}#guide button{float:right;font-size:12px;padding:4px 8px}@media(max-width:700px){#guide{left:8px;width:calc(100% - 16px);bottom:132px;padding:8px 10px;font-size:12px}#guide span{font-size:12px}}#game{position:fixed;inset:0;width:100%;height:100%}body{background:#172f38;color:#d4d9ca}body:not(.playing){background:radial-gradient(ellipse at 75% 0%,#304b50,#132a33 75%);color:#d4d9ca;min-height:100dvh}button,.menu-link{background:#203b44;color:#dce0d0;border-color:#6f898477;border-radius:2px}button:hover,.menu-link:hover{background:#36535b}button.active,#portal .primary{background:#456771;border-color:#a4b6a3;color:#f5f1dd}header,#selection,#orders,#legend,#events,.portal-card{background:#152e38ed;color:#d4d9ca;border:1px solid #9caf9d44;border-radius:3px;box-shadow:0 8px 32px #06192340}header{background:linear-gradient(135deg,#213d46f5,#142c36f5)}.brand strong,.portal-brand{color:#dddcc5}.brand strong{letter-spacing:7px}.eyebrow,.help,dt,#legend small,#event-log,.muted,#population,#portal label{color:#a9b9ac}.resources div{background:#30474a}.resources span{color:#b3c2b4}#guide{background:#263d40f5;color:#e4ddbd;border-color:#b5a76d88;border-radius:3px;box-shadow:0 4px 24px #071d3033}#connection{color:#9ac7ad}#status.error,#portal-message.error{color:#ffa99b}.faction-score.defeated{filter:grayscale(1);opacity:.55}footer{background:#102c35c9;color:#9eafa9;border-radius:0}#game:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 35px #071e3266;background:repeating-linear-gradient(0deg,#e8f0d803 0px,#e8f0d803 1px,transparent 1px,transparent 4px)}.portal-top{border-color:#8fa59744}.portal-heading>p:last-child{color:#a9bbb2}#portal input,#portal select{background:#112c35;color:#e3e6d6;border-color:#6a847b;border-radius:2px}.game-badge{background:#3b514b;color:#d0d9bf}.game-badge.running{background:#2b5549;color:#b5e2bc}.game-badge.paused{background:#59553a;color:#e5d599}#portal-message{color:#abd0b5}#portal .danger{color:#f3a497}.login-portal{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100dvh;max-width:none!important;padding:32px!important;overflow:hidden}.login-portal:before{content:"";position:fixed;z-index:-2;inset:-12%;background:radial-gradient(circle at 22% 28%,#53736d55 0 2px,transparent 3px),radial-gradient(circle at 77% 68%,#b7a66c44 0 2px,transparent 3px),repeating-radial-gradient(ellipse at 70% 35%,transparent 0 44px,#91a99b17 45px 46px,transparent 47px 70px),linear-gradient(118deg,#102832 8%,#1d3d43 52%,#0b222d);transform:rotate(-3deg) scale(1.08)}.login-portal:after{content:"";position:fixed;z-index:-1;inset:0;background:linear-gradient(90deg,transparent 49.85%,#bed0bc0d 50%,transparent 50.15%),linear-gradient(0deg,transparent 49.85%,#bed0bc0d 50%,transparent 50.15%),repeating-linear-gradient(127deg,transparent 0 92px,#d7c7850d 93px 94px);background-size:88px 88px,88px 88px,auto;-webkit-mask-image:radial-gradient(circle at center,#000,transparent 82%);mask-image:radial-gradient(circle at center,#000,transparent 82%)}.login-shell{width:min(100%,420px);text-align:center}.login-title{margin:0 0 34px;color:#eee9d2;font:800 clamp(34px,8vw,58px)/1 system-ui,sans-serif;letter-spacing:clamp(6px,1.6vw,12px);text-indent:clamp(6px,1.6vw,12px);text-shadow:0 3px 22px #04171e}.login-portal #portal-message{margin:0;min-height:24px;text-align:left}.login-portal .login-card{text-align:left;max-width:none;padding:30px;background:#112c35e8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 70px #03151d99,0 0 0 1px #d7d0a112}.login-portal .login-card form{gap:22px}.login-portal .login-card .primary{margin-top:4px}.map-compass{position:fixed;left:34px;bottom:210px;width:66px;height:66px;border:1px solid #becbb05c;border-radius:50%;color:#bdc8b1;pointer-events:none;z-index:2;opacity:.65}.map-compass:before{content:"N";position:absolute;top:-20px;left:27px;font:10px Georgia,serif;letter-spacing:2px}.map-compass:after{content:"✧";position:absolute;inset:-18px;text-align:center;font:96px/100px Georgia,serif}@media(max-width:700px){#game:after{box-shadow:inset 0 0 65px 12px #071e3255}.map-compass{display:none}}@media(max-width:700px){.login-portal{padding:24px!important}.login-title{margin-bottom:26px}.login-portal .login-card{padding:24px}}.faction-score{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:10px}.faction-score strong,.faction-score b{text-align:right}.faction-score b{font-size:10px;color:#e6d58e;white-space:nowrap}.score-name,.score-behavior{min-width:0;overflow-wrap:anywhere}.score-behavior{font-size:10px;color:#b4c7c8}.mobile-only{display:none}@media(max-width:700px){.mobile-only{display:block}#game-ui header{top:max(8px,env(safe-area-inset-top));left:8px;width:calc(100% - 68px);padding:0;border:0;background:transparent;box-shadow:none}#score-toggle{width:100%;height:44px;text-align:left;padding:0 12px;border-left:4px solid var(--faction);background:#152e38f5;font-size:12px}#game-ui header .brand,#game-ui header p,#population,#scoreboard{display:none}.score-expanded #scoreboard{display:block;background:#152e38f5;padding:4px 12px;border:1px solid #9caf9d44;margin-top:4px}.faction-score{padding:5px 0 5px 8px;margin:5px 0}.faction-score small{display:none}#map-menu{position:fixed;top:max(8px,env(safe-area-inset-top));right:8px;width:44px;height:44px;z-index:4;font-size:20px}#tools{display:none;top:60px;right:8px;width:160px;padding:6px;background:#152e38f5;border:1px solid #9caf9d44}.map-menu-expanded #tools{display:flex}.map-menu-expanded #tools button,.map-menu-expanded #tools .menu-link{min-height:44px;flex:1;display:flex;align-items:center;justify-content:center}#legend,#events{display:none}#orders{bottom:calc(22px + env(safe-area-inset-bottom));left:8px;width:calc(100% - 16px);padding:5px;height:56px}#orders .order-buttons{flex-wrap:nowrap;gap:5px}#orders .order-buttons button{min-height:44px;font-size:12px}#orders [data-mode=inspect],#orders.no-unit .order-buttons{display:none}#orders.no-unit:before{content:"Tik op een squad om een opdracht te geven";display:block;line-height:44px;text-align:center;font-size:12px}#status{position:absolute;bottom:58px;left:0;right:0;background:#152e38f5;padding:10px;border:1px solid #b5a76d88;display:none}#status.error{display:block;z-index:5}#guide{bottom:calc(124px + env(safe-area-inset-bottom))!important;left:8px;width:calc(100% - 16px);padding:0;display:flex;align-items:center;gap:4px;border-radius:2px}#guide>strong,#guide>span,#guide>small{display:none}#guide>button{float:none;min-height:44px;font-size:11px;background:transparent;border:0;padding:6px 9px}#guide>[data-action=guide-details]{flex:1;text-align:left}#guide>[data-action=guide]{font-size:0;border-left:1px solid #9caf9d44;width:44px}#guide>[data-action=guide]:after{content:"◎";font-size:24px}#guide.expanded{flex-wrap:wrap;padding:6px}#guide.expanded>span,#guide.expanded>small{display:block;width:100%;padding:0 5px 5px}#selection-toggle{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));left:8px;width:calc(100% - 16px);height:40px;min-height:40px;text-align:left;padding:0 12px;z-index:4;background:#152e38f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;touch-action:none}#selection{display:none;top:auto!important;bottom:calc(124px + env(safe-area-inset-bottom));left:8px;right:8px;width:auto;max-height:min(52dvh,420px)!important;padding:16px;overscroll-behavior:contain}.selection-expanded #selection:not([hidden]){display:block}.selection-expanded #guide{display:none}#selection button{min-height:44px}footer{bottom:env(safe-area-inset-bottom);font-size:7px;max-width:100%;height:18px}}@media(max-width:700px){.mobile-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;margin:14px 0}.mobile-legend .legend-faction:before{content:"";display:inline-block;width:9px;height:9px;background:var(--faction);margin-right:4px}.mobile-legend small{width:100%}}#game-ui header{top:max(8px,env(safe-area-inset-top));left:8px;width:300px;padding:0;border:0;background:transparent;box-shadow:none;z-index:5}#score-toggle{display:block;width:100%;min-height:44px;text-align:left;border-left:4px solid var(--faction);background:#152e38f5;font-size:12px}#game-ui header .brand,#game-ui header p,#population,#scoreboard,#legend{display:none}.score-expanded #scoreboard{display:block;background:#152e38f5;padding:4px 12px;border:1px solid #9caf9d44;margin-top:4px;max-height:60dvh;overflow:auto;touch-action:pan-y}#events{display:block;top:max(8px,env(safe-area-inset-top));left:316px;width:auto;max-width:300px;padding:0;pointer-events:auto;z-index:6}#events summary{display:flex;align-items:center;gap:6px;cursor:pointer;padding:0 10px;min-height:44px;font-size:10px;letter-spacing:1px;list-style:none}#events summary::-webkit-details-marker{display:none}#connection{color:#73d39b;font-size:16px;line-height:1;text-shadow:0 0 8px #73d39b88}#events.reconnecting #connection{color:#efb765;text-shadow:0 0 8px #efb76588}#server-details{padding:2px 12px 10px;min-width:250px;max-height:40dvh;overflow:auto;touch-action:pan-y;border-top:1px solid #9caf9d33}#server-details p{margin:9px 0;color:#a9b9ac}#server-details strong{color:#d4d9ca}#guide-toggle{position:fixed;top:max(8px,env(safe-area-inset-top));right:8px;z-index:4;min-height:44px}#tools{top:60px;right:8px}#orders{left:50%;transform:translate(-50%);max-width:calc(100% - 16px);width:max-content;bottom:calc(22px + env(safe-area-inset-bottom))}#selection-toggle{display:block;position:fixed;bottom:calc(142px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:min(440px,calc(100% - 16px));min-height:40px;z-index:4;background:#152e38f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#selection{display:none;top:auto;bottom:calc(188px + env(safe-area-inset-bottom));right:auto;left:50%;transform:translate(-50%);width:min(440px,calc(100% - 16px));max-height:calc(100dvh - 300px);overscroll-behavior:contain}.selection-expanded #selection:not([hidden]){display:block}#guide{top:110px;bottom:auto!important;left:auto;right:8px;width:min(340px,calc(100% - 16px));max-height:calc(100dvh - 310px);overflow:auto;touch-action:pan-y;padding:12px;display:flex;flex-wrap:wrap;gap:10px;z-index:4}#guide>strong,#guide>span,#guide>small{display:block;width:100%}#guide>button{float:none;min-height:44px;font-size:12px;width:auto;border:1px solid #9caf9d44;padding:6px 10px}#guide>[data-action=guide]{font-size:12px;width:auto}#guide>[data-action=guide]:after{content:none}#mission-status{position:fixed;top:104px;left:8px;z-index:5;width:min(310px,calc(100% - 16px));text-align:left;background:#152e38f5;color:#e7dba9;border:1px solid #b7aa7155;font-size:11px;line-height:1.5}#mission-status.alarm{background:#6c302bf5;color:#fff0d3;border-color:#e29b56}#mission-status:disabled{opacity:1}.score-expanded #mission-status:not(.alarm){top:auto;bottom:calc(194px + env(safe-area-inset-bottom))}.selection-expanded #guide{display:none}@media(max-width:700px){#game-ui header{width:calc(100% - 162px)}#score-toggle{font-size:10px;padding:4px 7px}#guide-toggle{right:58px;width:94px;padding:4px;font-size:11px}#events{top:60px;left:8px;max-width:calc(100% - 16px)}#events:not([open]) summary span:last-child{display:none}#events:not([open]) summary{width:44px;justify-content:center;padding:0}#orders{width:calc(100% - 16px)}#selection-toggle{bottom:calc(80px + env(safe-area-inset-bottom))}#selection{left:50%;right:auto;width:calc(100% - 16px);bottom:calc(124px + env(safe-area-inset-bottom))}#guide{top:104px;left:auto;bottom:auto!important}}