body[data-game-state=splash]>:not(#overlay):not(script),body[data-game-state=loading]>:not(#map-loading):not(script){visibility:hidden}
body[data-game-state=splash] #app{display:none}
#overlay {box-sizing:border-box;padding:32px 24px;overflow:auto;background:radial-gradient(ellipse at 50% 5%,#182b41,#080d16 70%);gap:14px}
#overlay h1{font-family:system-ui,sans-serif;font-size:clamp(38px,7vw,68px);letter-spacing:.13em;margin:12px 0;color:#eef6ff}
#play-button,#load-retry{font:600 15px system-ui,sans-serif;background:#8edac8;color:#0a2020;border:0;border-radius:8px;padding:13px 36px;cursor:pointer;min-width:200px}
#play-button:hover,#load-retry:hover{background:#b2efdf}
#play-button:disabled{opacity:.55;cursor:wait}
#map-loading{position:fixed;inset:0;z-index:500;background:radial-gradient(ellipse at 50% 20%,#193144,#080d16 70%);display:grid;place-items:center;font-family:system-ui,sans-serif}
#map-loading[hidden]{display:none}
.load-card{width:min(430px,80vw);text-align:center}
.load-brand{color:#8edac8;letter-spacing:.22em;font-weight:800;font-size:32px}
.load-card h2{font-size:16px;font-weight:500;color:#e0ecf7;margin:36px 0 18px}
.load-card p{color:#8399ac;font-size:13px}
#load-progress{appearance:none;width:100%;height:5px;border:0;border-radius:9px;overflow:hidden;background:#293749;accent-color:#8edac8}
#load-progress::-webkit-progress-bar{background:#293749}
#load-progress::-webkit-progress-value{background:#8edac8;transition:width .15s}
#load-progress::-moz-progress-bar{background:#8edac8}
body[data-game-state=paused] #overlay{background:#07101ae8}
#pause-chat{position:fixed;left:24px;bottom:24px;width:min(360px,28vw);z-index:110;font:13px/1.5 system-ui,sans-serif;border:1px solid #33485b;border-radius:12px;background:#101b29;overflow:hidden}
#pause-chat[hidden]{display:none}
.chat-history-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #2a3c50;color:#edf5ff}
.chat-history-nav{display:flex;gap:6px}
.chat-history-nav button{width:30px;height:28px;border-radius:6px;border:1px solid #49617a;background:#263b51;color:#d9f4ee;font-size:18px;cursor:pointer}
.chat-history-nav button:disabled{color:#657385;background:#1a2736;border-color:#2c3949;cursor:default}
#pause-chat-rows{padding:10px 14px;min-height:130px;overflow-wrap:anywhere;max-height:38vh;overflow:auto}
#pause-chat-rows .row{margin:0 0 9px;color:#b9c9d9}
#pause-chat-rows .name{font-weight:700;color:#a7e5d5}
#pause-chat-rows .system{color:#f0d98e}
#pause-chat-position{padding:0 14px 10px;color:#8294a8;font-size:11px}
body[data-game-state=paused] #chatlog{display:none}
@media(max-width:1000px){#pause-chat{left:12px;bottom:12px;width:260px;max-width:36vw}}
@media(max-width:700px){#pause-chat{position:static;width:min(430px,90vw);max-width:none;margin:16px auto}body[data-game-state=paused]{overflow:auto}body[data-game-state=paused] #overlay{position:relative;min-height:100%;height:auto}#pause-chat-rows{max-height:180px}}
.settings-help{font:12px/1.55 system-ui,sans-serif;color:#92a9bf;max-width:470px;margin:14px 0}
#settings{max-width:min(520px,90vw);width:100%}
#settings .sopts{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
#settings .srow{gap:12px}
.setting-unavailable{opacity:.45}.setting-unavailable button{cursor:default}
#overlay .sbody{max-height:45vh;overflow:auto;padding-right:6px}
body[data-game-state=loading] #app{visibility:visible}
#settings .stitle{font:600 13px system-ui,sans-serif;letter-spacing:.08em;color:#b4cddd;opacity:1}
#settings .slabel{font:500 12px system-ui,sans-serif;letter-spacing:0;color:#b7c8d8}
#settings .sopts button{font:600 11px system-ui,sans-serif;letter-spacing:0;padding:6px 8px;color:#aebfd0;border:1px solid #3a5067;border-radius:5px;background:#162335}
#settings .sopts button.active{color:#c2f4e8;border-color:#78baa9;background:#23443e}
#settings .sopts button:hover:not(:disabled){border-color:#a7dbc8}
#settings .srow{padding:8px 0}
#overlay #settings .sbody{max-height:0;overflow:hidden;padding-right:6px}
#overlay #settings.open .sbody{max-height:45vh;overflow:auto}
#overlay:has(#settings.open),#overlay:has(#player-recovery[open]){justify-content:flex-start}
#nameinput{border-radius:7px;border-color:#526c82;color:#e8f1f8;font:500 16px system-ui,sans-serif;letter-spacing:.03em}