:root{--bg:#0b0f17;--panel:rgba(12,18,28,.78);--line:rgba(140,170,220,.22);--text:#dbe6f5;--dim:#8ea0b8;--accent:#5fb3ff;--say:#e9eef6;--radio:#7ee08a;--emote:#c9b6ff;--ooc:#7fb6ff;--sys:#ffcf6b;--ex:#9fd3ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
#app{position:fixed;inset:0}
#app.split{display:flex}
#app.split>div{position:relative;flex:1;border-right:1px solid #000}
@media (orientation:portrait){#app.split{flex-direction:column}#app.split>div{border-right:0;border-bottom:1px solid #000}}
.ms-root{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.ms-view{position:absolute;inset:0}
.ms-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.ms-view canvas{display:block}
.ms-hud{position:absolute;inset:0;pointer-events:none}
.ms-hud button,.ms-hud input,.ms-log{pointer-events:auto}
.ms-top{position:absolute;top:max(8px,env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:10px;justify-content:space-between;font-size:13px;text-shadow:0 1px 2px #000}
.ms-area{font-weight:600}
.ms-meta{color:var(--dim)}
.ms-status{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);background:var(--panel);padding:12px 18px;border-radius:10px;border:1px solid var(--line)}
.ms-chat{position:absolute;left:10px;bottom:max(10px,env(safe-area-inset-bottom));width:min(440px,calc(100% - 20px));display:flex;flex-direction:column;gap:6px}
.ms-log{max-height:30vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;-webkit-overflow-scrolling:touch}
.ms-line{margin:1px 0;word-wrap:break-word}
.ms-say{color:var(--say)}.ms-radio{color:var(--radio)}.ms-emote{color:var(--emote);font-style:italic}.ms-ooc{color:var(--ooc)}.ms-system{color:var(--sys)}.ms-examine{color:var(--ex);white-space:pre-wrap}
.ms-input{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;outline:none}
.ms-input:focus{border-color:var(--accent)}
.ms-hands{position:absolute;right:10px;bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:6px;align-items:flex-end}
.ms-hand{position:relative;width:56px;height:56px;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--dim)}
.ms-hand canvas{width:40px;height:40px;image-rendering:pixelated}
.ms-hand span{position:absolute;left:4px;top:2px;font-size:10px}
.ms-hand.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ms-acts{display:flex;flex-direction:column;gap:4px}
.ms-acts button,.ms-pad button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
.ms-acts button:active,.ms-pad button.on{background:rgba(95,179,255,.35)}
.ms-pad{display:none}
.ms-bubble{position:absolute;left:0;top:0;max-width:220px;padding:3px 7px;font-size:12px;background:rgba(10,14,22,.85);border:1px solid var(--line);border-radius:8px;white-space:pre-wrap;text-align:center;pointer-events:none}
@media (pointer:coarse){
  .ms-pad{display:grid;position:absolute;left:12px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);grid-template:repeat(3,54px)/repeat(3,54px)}
  .ms-pad button{font-size:20px;padding:0;border-radius:12px;touch-action:none}
  .ms-pad [data-dir="1"]{grid-area:1/2}.ms-pad [data-dir="8"]{grid-area:2/1}.ms-pad [data-dir="4"]{grid-area:2/3}.ms-pad [data-dir="2"]{grid-area:3/2}
  .ms-chat{bottom:auto;top:calc(max(8px,env(safe-area-inset-top)) + 26px);width:min(380px,calc(100% - 20px))}
  .ms-log{max-height:4.6em;font-size:12px;background:rgba(12,18,28,.6)}
  .ms-input{display:none}
  .ms-chat.typing .ms-input{display:block}
}
/* round basics: health, inventory, intent, lobby, death, round end */
.ms-top{flex-wrap:wrap}
.ms-round{color:var(--sys)}
.ms-announce{color:#ffd36b;font-weight:600}
.ms-line.ms-announce{color:#ffd36b;font-weight:600;border-left:3px solid #ffd36b;padding-left:6px}
.ms-line.ms-combat{color:#ff8a7a}
.ms-line.ms-warning{color:#ffb35a}
.ms-line.ms-dead{color:#b9a8ff;font-style:italic}
.ms-health{position:relative;align-self:stretch;width:12px;border-radius:6px;background:rgba(0,0,0,.5);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column-reverse}
.ms-health b{display:block;width:100%!important;height:100%;background:#4cd964;transition:height .3s}
.ms-health[data-state=hurt] b{background:#ffcc00}.ms-health[data-state=crit] b{background:#ff3b30}.ms-health[data-state=dead] b{background:#555}
.ms-health i{position:absolute;bottom:100%;right:0;font-size:11px;font-style:normal;white-space:nowrap;color:var(--dim)}
.ms-hand em{position:absolute;right:4px;bottom:2px;font-size:11px;font-style:normal;color:#fff;text-shadow:0 1px 2px #000}
.ms-acts{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ms-combat.on{background:rgba(255,59,48,.55)!important;border-color:#ff3b30}
.ms-inv{display:none;position:absolute;right:10px;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 122px);grid-template-columns:repeat(5,52px);gap:4px;pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px}
.ms-root.inv-open .ms-inv{display:grid}
.ms-slot{position:relative;width:52px;height:52px;padding:0;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:7px;color:var(--dim);cursor:pointer}
.ms-slot canvas{width:32px;height:32px;image-rendering:pixelated}
.ms-slot span{position:absolute;left:2px;right:2px;bottom:1px;font-size:8px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-slot.full{border-color:rgba(95,179,255,.6)}
.ms-dead{display:none;position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);text-align:center;pointer-events:auto;background:var(--panel);border:1px solid #ff3b30;border-radius:12px;padding:14px 20px}
.ms-dead p{margin:0 0 10px;font-size:18px;color:#ff8a7a}
.ms-root.is-dead .ms-dead{display:block}
.ms-respawn{display:none;position:absolute;left:50%;top:max(40px,env(safe-area-inset-top));transform:translateX(-50%);pointer-events:auto}
.ms-root.is-ghost .ms-respawn{display:block}
.ms-dead button,.ms-respawn{font:inherit;color:var(--text);background:rgba(95,179,255,.3);border:1px solid var(--accent);border-radius:8px;padding:8px 14px;cursor:pointer}
.ms-lobby,.ms-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:rgba(4,7,12,.72)}
.ms-lobby-in{width:min(760px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.ms-lobby h2,.ms-end h2{margin:0 0 4px}
.ms-lobby label{display:block;margin:10px 0}
.ms-lobby input{display:block;width:100%;margin-top:4px;font:inherit;font-size:16px;color:var(--text);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.ms-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.ms-jobs button{display:flex;justify-content:space-between;gap:8px;text-align:left;font:inherit;color:var(--text);background:rgba(0,0,0,.35);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:8px;padding:8px 10px;cursor:pointer}
.ms-jobs button:hover{background:rgba(95,179,255,.18)}
.ms-jobs button:disabled{opacity:.4;cursor:default}
.ms-jobs span{color:var(--dim);font-size:12px}
.ms-end{flex-direction:column;text-align:center;padding:20px}
.ms-end p{max-width:640px;margin:4px 0}
.ms-root.in-lobby .ms-hands,.ms-root.in-lobby .ms-pad,.ms-root.in-lobby .ms-inv{display:none}
.small{font-size:13px;color:var(--dim)}
@media (pointer:coarse){
  .ms-inv{grid-template-columns:repeat(5,44px);bottom:auto;top:calc(max(8px,env(safe-area-inset-top)) + 96px);right:8px}
  .ms-slot{width:44px!important;height:44px!important}
  .ms-slot{width:48px;height:48px}
  .ms-acts{grid-template-columns:1fr 1fr 1fr}
}
/* station systems */
.ms-env{color:var(--dim)}
.ms-env[data-warn=warn]{color:#ffcc00}
.ms-env[data-warn=bad]{color:#ff5a4f;font-weight:600}
.ms-ui{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 24px));max-height:70vh;overflow:auto;pointer-events:auto;background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:12px 14px;z-index:5}
.ms-ui h3{margin:0 0 4px}
.ms-ui p{margin:0 0 8px;color:var(--dim)}
.ms-ui-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:5px}
.ms-ui-buttons button{display:flex;align-items:center;gap:6px;font:inherit;font-size:13px;color:var(--text);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:7px;padding:6px 8px;cursor:pointer;text-align:left}
.ms-ui-buttons button i{width:10px;height:10px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.3)}
.ms-ui-buttons button:hover{background:rgba(95,179,255,.2)}