@font-face{font-family:'Corleone';src:url('/server-assets/corleone.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;color:#fff;font-family:Verdana,Arial,sans-serif}canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:block;width:100%;height:100%;image-rendering:pixelated}.hidden{display:none!important}.panel{position:fixed;background:rgba(18,22,28,.96);border:3px solid #e5d8a8;box-shadow:0 8px 30px #000b;padding:22px;border-radius:6px;z-index:30}.center{left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,92vw);text-align:center}.panel h1{margin:0 0 4px;font-size:32px;letter-spacing:3px;color:#ffd35a;text-shadow:2px 2px #000}.panel p{opacity:.8;margin-top:0}.panel input,.panel button{font:inherit}.panel input{width:100%;padding:12px;border:2px solid #888;background:#090b0e;color:#fff;margin:10px 0}.panel button{padding:11px 14px;border:0;border-radius:4px;background:#d9a72c;color:#17120a;font-weight:700;cursor:pointer}.panel small{display:block;line-height:1.5;margin-top:15px;color:#c8c8c8}#hud{position:fixed;inset:0;pointer-events:none;z-index:20}#prompt{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);background:#000b;padding:7px 10px;border-radius:4px;font-size:13px}.system{color:#ffd96a}.gang{color:#8fe8ff}#chatInput{pointer-events:auto;position:absolute;left:14px;bottom:56px;width:min(480px,70vw);padding:8px 10px;background:#000d;border:1px solid #aaa;color:#fff;display:none}#shop{left:50%;top:50%;transform:translate(-50%,-50%);width:min(470px,92vw);pointer-events:auto}#shop .x{position:absolute;right:10px;top:8px;background:#622;color:#fff;padding:5px 10px}.shopItem{display:flex;align-items:center;justify-content:space-between;background:#090b0f;margin:8px 0;padding:10px;border:1px solid #444}.shopItem button{min-width:95px}#shop h2{margin-top:0;color:#ffd35a}
/* Compact, warm game chrome leaves the world in view. */
.panel{background:linear-gradient(145deg,#292c27f5,#151d1cf5);border:1px solid #af9a62;box-shadow:0 0 0 4px #151b19b0,0 22px 80px #0009;border-radius:3px;padding:30px}.panel h1{font-family:Georgia,serif;font-size:43px;letter-spacing:5px;color:#ebd49c;margin:12px 0}.eyebrow{font:10px monospace;letter-spacing:3px;color:#adbaab}.panel p{font:italic 16px Georgia,serif;color:#d9d6be}.panel input{background:#111a17;border:1px solid #626959;border-radius:2px;font-size:14px}.panel button{background:#cfb477;border:1px solid #e5cf97;border-radius:2px;font-size:13px}.panel small{font-size:10px;line-height:1.9;color:#9ba798}.center{width:min(400px,92vw)}#prompt{font:11px monospace;background:#17201cdd;border:1px solid #a6966655;color:#ead69e}canvas{cursor:crosshair}canvas{cursor:default}
#editLevel{pointer-events:auto;position:absolute;right:18px;bottom:18px;background:#17201cdd;color:#e9d397;border:1px solid #a6966655;border-radius:3px;padding:12px;font:12px monospace;text-decoration:none}
/* Login: the nostalgic screenshot as a sharp framed hero over a blurred,
   darkened full-screen copy of itself, one line of Corleone, then the form. */
#login{position:fixed;inset:0;z-index:40;display:grid;place-items:center;overflow:auto;padding:24px 16px;background:#060807}
#loginBackdrop{position:fixed;inset:-40px;background:url('/server-assets/nostalgiclogin.png') center/cover no-repeat;filter:blur(16px) brightness(.32) saturate(1.25);pointer-events:none}
#loginCard{position:relative;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:16px}
#loginArt{width:100%;line-height:0;background:#000;border:2px solid #d8b75c;box-shadow:0 0 0 4px #070908e6,0 20px 60px #000d,0 0 46px #d8b75c30}
#loginArt img{display:block;width:100%;height:auto;image-rendering:pixelated}
#loginTagline{margin:2px 0 0;font:32px/1.1 Corleone,Georgia,serif;color:#f2d47a;text-align:center;letter-spacing:.3px;text-shadow:0 2px 0 #3b2b07,0 0 22px #f2d47a4d}
#loginForm,#registerForm{width:100%;display:flex;flex-direction:column;gap:10px}
#login input{width:100%;padding:12px 14px;background:#0c100ee8;border:1px solid #57513a;border-radius:3px;color:#f1ead0;font:15px system-ui,sans-serif;outline:none}
#login input::placeholder{color:#8d8a78}
#login input:focus{border-color:#e0c26a;box-shadow:0 0 0 3px #e0c26a2e}
#login .loginActions{display:flex;gap:10px;margin-top:2px}
#login button{flex:1;padding:12px 14px;border-radius:3px;font:700 14px system-ui,sans-serif;cursor:pointer;border:1px solid #f0d68b;background:linear-gradient(#e8c96f,#c7a146);color:#1d1606}
#login button:hover{filter:brightness(1.08)}
#login button.secondary{background:#0c100ecc;color:#ecd48c;border-color:#877744}
#login button:disabled{opacity:.55;cursor:default;filter:none}
#loginError,#registerError{background:#3c1616eb;border:1px solid #9f4444;color:#ffd6d6;font:13px system-ui,sans-serif;padding:9px 11px;border-radius:3px}#registerModal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#000b;backdrop-filter:blur(3px)}
#registerForm{width:min(360px,100%);padding:26px 24px 22px;background:linear-gradient(160deg,#1b201c,#0e1211);border:1px solid #b99b50;border-radius:4px;box-shadow:0 24px 70px #000e}
#registerForm h2{margin:0;font:28px/1.1 Corleone,Georgia,serif;color:#f2d47a;text-align:center}
#registerForm p{margin:0 0 4px;color:#b8b299;font:13px/1.45 system-ui,sans-serif;text-align:center}

@media(max-width:600px){#editLevel{bottom:90px;padding:8px}}
@media(pointer:coarse){#prompt{bottom:277px}#chatInput{bottom:270px}#editLevel{bottom:165px}}

/* The player list (F7, List, /list): old Graal's Players window, a grey Windows window with a blue caption; each player is
   their head and "Nickname (Guild)" in a white list, and Profile (or a double click) shows who they are. */
#playerList{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;display:flex;flex-direction:column;width:min(300px,calc(100vw - 24px));max-height:min(78vh,560px);background:#d4d0c8;border:2px outset #fff;box-shadow:2px 2px 0 #0006;color:#000;font:12px Tahoma,Verdana,Arial,sans-serif;pointer-events:auto;user-select:none}
.plCaption{display:flex;align-items:center;justify-content:space-between;min-height:22px;padding:2px 3px 2px 6px;color:#fff;font-weight:bold;background:linear-gradient(90deg,#0a246a,#a6caf0)}
.plCaption button{width:20px;height:18px;padding:0;border:2px outset #fff;background:#d4d0c8;color:#000;font:bold 12px/1 Tahoma,Arial,sans-serif;cursor:pointer}
.plCaption button:active,.plButtons button:active{border-style:inset}
.plInfo{display:flex;justify-content:space-between;gap:8px;padding:5px 6px 3px;font-size:11px}
.plInfo span:last-child{color:#555}
#playerRows,#playerProfile{flex:1;min-height:120px;margin:0 6px;overflow-y:auto;background:#fff;border:2px inset #fff}
.plRow{display:flex;align-items:center;gap:6px;width:100%;min-height:34px;padding:1px 4px;border:0;background:none;color:#000;font:12px Tahoma,Verdana,Arial,sans-serif;text-align:left;cursor:pointer}
.plRow.selected{background:#0a246a;color:#fff}
.plRow.me .plName{font-weight:bold}
.plRow .plStaff{color:#a07800;font-weight:bold}.plRow.selected .plStaff{color:#ffd84e}
.plName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plHead{flex:none;width:32px;height:32px;background-repeat:no-repeat;background-position:0 -64px;image-rendering:pixelated}
.plHeadBig{transform:scale(1.5);transform-origin:0 0;margin:0 16px 16px 0}
#playerProfile{padding:8px}
.plProfileTop{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.plProfileTop b{font-size:13px}
#playerProfile table{width:100%;border-collapse:collapse}
#playerProfile th{width:40%;padding:3px 4px;text-align:left;font-weight:normal;color:#444;border-top:1px solid #e4e1da}
#playerProfile td{padding:3px 4px;border-top:1px solid #e4e1da;overflow-wrap:anywhere}
.plButtons{display:flex;justify-content:flex-end;gap:6px;padding:6px}
.plButtons button{min-width:70px;height:24px;border:2px outset #fff;background:#d4d0c8;color:#000;font:12px Tahoma,Verdana,Arial,sans-serif;cursor:pointer}
.plButtons button:disabled{color:#888}

/* Q inventory, laid out like Era's own: a tabbed grid of small icon slots with a search bar under it, and a box of stats
   beside it. Each slot is one picture (the weapon or item file's IMAGE line, else the weapon's gani pose). */
#inventory{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;--slot:36px;--gap:4px;display:flex;gap:14px;align-items:stretch;width:max-content;max-width:96vw;pointer-events:auto;color:#fff;font:12px Verdana,Arial,sans-serif;user-select:none}
#invMain,#invInfo{background:rgba(16,20,16,.88);border:1px solid #000b;border-radius:14px;box-shadow:0 6px 24px #0009}
#invMain{padding:10px 16px 16px;min-width:0}
#invInfo{flex:0 0 172px;padding:16px 14px}
#inventoryClose{position:absolute;top:-12px;right:6px;width:24px;height:24px;padding:0;border:1px solid #fff;border-radius:50%;background:#000;color:#fff;font:16px/1 Verdana,Arial,sans-serif;cursor:pointer}
#inventoryClose:hover{background:#3a1a1a}
#invTabs{display:flex;gap:6px;align-items:flex-end;height:30px;margin:0 0 8px 6px}
.invTab{height:24px;padding:0 14px;border:1px solid #fff;border-bottom:0;border-radius:8px 8px 0 0;background:#000;color:#cfcfcf;font:12px Verdana,Arial,sans-serif;cursor:pointer}
.invTab:hover{color:#fff}
.invTab.active{height:30px;color:#fff}
#inventoryGrid{display:grid;grid-template-columns:repeat(8,var(--slot));grid-auto-rows:var(--slot);gap:var(--gap);height:calc(4*var(--slot) + 3*var(--gap));overflow-y:scroll;padding-right:6px}
.invSlot{position:relative;display:flex;align-items:center;justify-content:center;background:#000;border:1px solid #7b9c78;border-radius:2px;cursor:pointer}
.invSlot:hover{border-color:#a9d3a4}
.invSlot.empty{cursor:default}
.invItem{cursor:grab;touch-action:none}
.invSlot.empty:hover{border-color:#7b9c78}
.invSlot.active{border-color:#ffd84e;box-shadow:0 0 6px #ffd84e88}
.invSlot img,.invSlot canvas{max-width:100%;max-height:100%;image-rendering:pixelated;pointer-events:none}
.invSlot canvas{width:100%;height:100%}
.invSlot i{position:absolute;font:normal 9px/1 Verdana,Arial,sans-serif;color:#fff;text-shadow:0 0 2px #000,1px 1px 0 #000}
.invKey{left:2px;top:2px;color:#ffd84e}
.invCount{right:2px;bottom:2px}
#invBar{display:flex;gap:10px;margin-top:8px}
#inventorySearch{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid #fff;border-radius:6px;background:#000;color:#fff;font:12px Verdana,Arial,sans-serif;outline:none;user-select:text}
#inventorySearch::placeholder{color:#fff;opacity:1}
#inventorySearch:focus{border-color:#ffd84e}
#invSort{flex:0 0 34px;height:34px;padding:5px;border:1px solid #6a6a6a;border-radius:8px;background:#3b3b3b;cursor:pointer}
#invSort svg{display:block;width:100%;height:100%;fill:#fff}
#invSort:hover{background:#4a4a4a}
#invSort.on{border-color:#ffd84e;background:#5a4a1c}
#invStats{height:100%;padding:8px 10px;border:1px solid #fff;border-radius:6px;background:#000;line-height:1.55}
#invStats .invHint{margin-top:12px;color:#aab3a6;font-size:10px;line-height:1.45}
/* The item being dragged out of the panel: it follows the pointer and lights up once letting go would put it down. */
.invGhost{position:fixed;z-index:60;width:36px;height:36px;margin:-18px 0 0 -18px;pointer-events:none;background:#000c;border:1px solid #7b9c78;border-radius:2px}
.invGhost.ok{border-color:#8fe08f;box-shadow:0 0 8px #8fe08f88}
.invGhost img{width:100%;height:100%;image-rendering:pixelated}
.invGhost i{position:absolute;right:2px;bottom:2px;font:normal 10px/1 Verdana,Arial,sans-serif;color:#fff;text-shadow:0 0 2px #000,1px 1px 0 #000}
#inventoryGrid::-webkit-scrollbar{width:16px}
#inventoryGrid::-webkit-scrollbar-track{background:#000;border:1px solid #fff;border-radius:2px}
#inventoryGrid::-webkit-scrollbar-thumb{background:#fff;border:2px solid #000}
#inventoryGrid::-webkit-scrollbar-button:single-button{display:block;height:16px;background:#fff center/10px 10px no-repeat}
#inventoryGrid::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M1 8 5 2 9 8Z'/%3E%3C/svg%3E")}
#inventoryGrid::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M1 2 5 8 9 2Z'/%3E%3C/svg%3E")}
@supports not selector(::-webkit-scrollbar){#inventoryGrid{scrollbar-color:#fff #000;scrollbar-width:thin}}
@media(max-width:560px){#inventory{--slot:clamp(26px,calc((96vw - 96px)/8),36px);flex-direction:column;gap:8px}#invInfo{flex:none;padding:10px 14px}.invTab{padding:0 8px}#invMain{padding:10px 10px 12px}}
@media(max-width:560px) and (max-height:520px){#inventory{max-height:96vh;overflow-y:auto}}

/* Zoom remains available to both mouse and touch users. */
#gameZoom{position:absolute;right:18px;top:100px;display:flex;align-items:center;gap:4px;pointer-events:auto;padding:4px;background:#17201ced;border:1px solid #a6966677;border-radius:5px;touch-action:manipulation;user-select:none}
#gameZoom button{width:44px;height:44px;padding:0;border:1px solid #80917b;border-radius:3px;background:#263b30;color:#fff0c5;font:26px monospace;cursor:pointer;touch-action:manipulation}
#gameZoom button:hover{background:#3b5141}#gameZoom button:disabled{opacity:.35;cursor:default}#gameZoom button:focus-visible{outline:2px solid #fff0a4;outline-offset:2px}
#gameZoomLabel{min-width:34px;text-align:center;font:12px monospace;color:#e9d397}
@media(max-width:600px) and (orientation:portrait){#gameZoom{top:116px}}
@media(pointer:coarse) and (orientation:landscape){#gameZoom{top:102px;left:50%;right:auto;transform:translateX(-50%)}}

#openRC{position:absolute;right:18px;bottom:54px;pointer-events:auto;color:#e5d09b;background:#17201cdb;border:1px solid #a6966655;border-radius:3px;padding:8px 10px;text-decoration:none;font:11px monospace}
@media(pointer:coarse){#openRC{left:18px;right:auto;top:102px;bottom:auto}}
#adminLinks{position:absolute;right:18px;bottom:18px;display:flex;gap:6px;pointer-events:auto}
#adminLinks a{position:static;padding:10px;font:11px monospace}
@media(pointer:coarse){#adminLinks{left:18px;right:auto;top:108px;bottom:auto}#adminLinks a{padding:7px 9px}}

/* Status panel (top left): health, the game's clock (US Eastern), money, ammo — a pixel canvas drawn by pixel-ui.js. */
#status{position:absolute;left:14px;top:12px;width:188px;height:126px;pointer-events:auto;image-rendering:pixelated;cursor:default}

@media(max-width:600px){#status{left:8px;top:8px}}
@media(pointer:coarse){#adminLinks{top:150px}#openRC{top:146px}}

/* Old-school: the inventory's panels, tabs and boxes have stepped pixel corners and hard edges, no smooth radii or soft shadows. */
#invMain,#invInfo{border:2px solid #000;border-radius:0;box-shadow:none;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px);background:rgba(14,18,14,.93)}
.invTab{border-radius:0;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% 100%,0 100%,0 4px,2px 4px,2px 2px,4px 2px)}
.invSlot{border-radius:0}
#inventorySearch,#invSort,#invStats{border-radius:0;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px)}
#inventoryClose{border-radius:0;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px);width:22px;height:22px}
.invGhost{border-radius:0;box-shadow:none}
.invGhost.ok{box-shadow:none;outline:2px solid #8fe08f}
#inventoryClose{z-index:2}
/* A device that logged in before signs in by itself (client.js resumeLogin): a quiet 'Signing in…' instead of the login form. */
#loginResuming{display:none;position:relative;font:32px/1.1 Corleone,Georgia,serif;color:#f2d47a;letter-spacing:.3px;text-shadow:0 2px 0 #3b2b07,0 0 22px #f2d47a4d}
#login.resuming #loginCard{display:none}
#login.resuming #loginResuming{display:block}
/* The settings button (Era's wrench, era_optionsbutton.png) at the top right, under Era's message bar (-sysmsgs). */
#settingsButton{position:absolute;right:20px;top:44px;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:#17201ced;border:1px solid #a6966677;cursor:pointer;touch-action:manipulation;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px)}
#settingsButton img{width:32px;height:32px;image-rendering:pixelated;pointer-events:none}
#settingsButton:hover{background:#3b5141}#settingsButton:focus-visible{outline:2px solid #fff0a4;outline-offset:2px}
/* A sign's text (and a script's say2), in old Graal's sign box: white text in a black box with a white border (the Settings
   panel's look), its OK button the same. */
#signBox{position:fixed;left:50%;top:max(12px,14vh);transform:translateX(-50%);z-index:31;box-sizing:border-box;width:min(393px,calc(100vw - 32px));min-height:110px;padding:14px 18px 54px;border:2px solid #fff;background:#000000e6;box-shadow:0 0 0 2px #000;pointer-events:auto;user-select:none;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
#signText{color:#fff;font:bold 13px/1.5 Verdana,Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;max-height:min(46vh,320px);overflow-y:auto}
#signOk{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);min-width:64px;height:30px;padding:0 14px;border:1px solid #fff;background:#000;color:#fff;font:bold 12px Verdana,Arial,sans-serif;cursor:pointer;touch-action:manipulation}
#signOk:hover{background:#26331f}
#signOk:focus-visible{outline:2px solid #fff0a4}
/* Settings: the inventory's panel, tabs and boxes (see #inventory above). */
#settings{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:32;width:min(420px,calc(100vw - 24px));max-height:94vh;overflow-y:auto;pointer-events:auto;color:#fff;font:12px Verdana,Arial,sans-serif;user-select:none}
#setMain{padding:10px 16px 16px;border:2px solid #000;background:rgba(14,18,14,.93);clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px)}
#setTabs{display:flex;gap:6px;align-items:flex-end;height:30px;margin:0 0 8px 6px}
#setBox{min-height:150px;padding:12px 14px;border:1px solid #fff;background:#000;line-height:1.55;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px)}
#settingsClose{position:absolute;top:2px;right:6px;z-index:2;width:22px;height:22px;padding:0;border:1px solid #fff;background:#000;color:#fff;font:16px/1 Verdana,Arial,sans-serif;cursor:pointer;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px)}
#settingsClose:hover{background:#3a1a1a}
.setRow{display:flex;align-items:center;gap:10px;margin:0 0 10px;cursor:pointer}
.setRow input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:#ffd84e;cursor:pointer}
.setPick{justify-content:space-between;cursor:default}
.setPick select{flex:0 1 210px;min-width:0;height:30px;padding:0 6px;border:1px solid #7b9c78;background:#000;color:#fff;font:12px Verdana,Arial,sans-serif;cursor:pointer}
.setPick select:focus{border-color:#ffd84e;outline:none}
#fontSample{margin-top:4px;padding:8px 10px;border:1px solid #7b9c78;color:#ead69e;font-size:15px;line-height:1.35}
/* Settings → Commands: every key and chat command, as old Graal's help list (gold headings, the command in yellow). */
/* The Gangs Panel (/gangs, or Gangs in the player list): Era Legacy's black -Gangs window — buttons on the left, the gangs on the
   right under a grey header, a search below; a gang's roster in the same window. On a phone the buttons wrap and grow. */
#gangPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:31;display:flex;flex-direction:column;width:min(380px,calc(100vw - 16px));max-height:min(86vh,560px);background:#000000ee;border:1px solid #9a9a9a;box-shadow:0 0 0 1px #000,0 10px 40px #0009;color:#fff;font:12px Verdana,Tahoma,Arial,sans-serif;pointer-events:auto}
.gpCaption{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 8px;border-bottom:1px solid #555;font-weight:bold;font-size:13px}
.gpCaption button{width:24px;height:22px;padding:0;border:1px solid #9a9a9a;background:#1c1c1c;color:#fff;font:bold 14px/1 Verdana,Arial,sans-serif;cursor:pointer}
#gpBody{flex:1;min-height:0;overflow-y:auto;padding:6px}
#gpMsg{min-height:16px;padding:0 8px 6px;color:#ffd84e;font-size:11px}
.gpMain{display:flex;gap:6px;align-items:stretch}
.gpSide{display:flex;flex-direction:column;gap:5px;flex:none;width:96px}
#gangPanel button.gpBtn{min-height:26px;padding:3px 6px;border:1px solid #8a8a8a;background:linear-gradient(#2c2c2c,#141414);color:#fff;font:11px Verdana,Arial,sans-serif;cursor:pointer;touch-action:manipulation}
#gangPanel button.gpBtn:hover:not(:disabled){border-color:#fff}
#gangPanel button.gpBtn:disabled{color:#666;border-color:#444;cursor:default}
.gpTable{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid #777}
.gpHead,.gpRow{display:grid;grid-template-columns:1fr 80px;align-items:center}
.gpHead{background:#aaa;color:#000;font-weight:bold}.gpHead span{padding:2px 6px;border-right:1px solid #777}
.gpRows{flex:1;min-height:150px;max-height:46vh;overflow-y:auto}
.gpRow{width:100%;min-height:24px;padding:0;border:0;border-bottom:1px solid #2a2a2a;background:none;color:#fff;font:12px Verdana,Arial,sans-serif;text-align:left;cursor:pointer}
.gpRow span{padding:2px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpRow.selected{background:#3b3b6b}.gpRow.mine span:first-child{color:#ffd84e;font-weight:bold}
.gpRow .gpOn{color:#7fdc7f}.gpRow .gpOff{color:#888}
.gpLine{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.gpLine input,.gpLine select{flex:1;min-width:80px;height:26px;padding:0 6px;border:1px solid #8a8a8a;background:#111;color:#fff;font:12px Verdana,Arial,sans-serif}
.gpCard{margin-top:6px;padding:6px;border:1px solid #555;background:#101010;line-height:1.6}.gpCard b{color:#ffd84e}
.gpNote{margin:0 0 6px;color:#bbb;font-size:11px;line-height:1.5}
@media(pointer:coarse){#gangPanel button.gpBtn{min-height:36px;font-size:12px}.gpRow{min-height:34px}.gpLine input,.gpLine select{height:34px;font-size:14px}}
@media(max-width:420px){.gpMain{flex-direction:column}.gpSide{flex-direction:row;flex-wrap:wrap;width:auto}.gpSide .gpBtn{flex:1 1 30%}}
/* A script's pop-up menu (GS2's GuiContextMenuCtrl: Era's staff menu on a player), in old Windows' grey; rows a finger can hit. */
.gs1Menu{position:fixed;z-index:40;min-width:150px;max-height:80vh;overflow-y:auto;padding:2px;background:#d4d0c8;border:2px outset #fff;box-shadow:2px 2px 0 #0006;color:#000;font:12px Tahoma,Verdana,Arial,sans-serif;pointer-events:auto;user-select:none}
.gs1MenuTitle{padding:4px 10px;color:#fff;font-weight:bold;background:linear-gradient(90deg,#0a246a,#a6caf0)}
.gs1Menu button{display:block;width:100%;min-height:30px;padding:5px 18px;border:0;background:none;color:#000;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.gs1Menu button:hover,.gs1Menu button:focus-visible{background:#0a246a;color:#fff;outline:none}
@media(pointer:coarse){.gs1Menu button{min-height:42px;font-size:14px}}
/* GS2's windows, buttons, text and text boxes (scenery.js gs1GuiWidget): placed in pixels from the window's corner as the
   script says; old Windows grey, or Graal's blue for the Blue profiles. */
#gs1GuiLayer{position:fixed;inset:0;z-index:38;pointer-events:none}
/* GS2 GUI controls a script makes (gs2-gui.js): old Graal grey, a blue caption, white boxes for lists and text. */
.g2{position:absolute;box-sizing:border-box;margin:0;padding:0;color:#000;font:12px Tahoma,Verdana,Arial,sans-serif;pointer-events:auto;user-select:none;overflow:hidden}
.g2-window{background:#d4d0c8;border:2px outset #fff;box-shadow:2px 2px 0 #0006;transform-origin:0 0}
.g2-title{position:absolute;left:0;top:0;right:0;height:20px;display:flex;align-items:center;padding:0 2px 0 6px;color:#fff;font-weight:bold;background:linear-gradient(90deg,#0a246a,#a6caf0);cursor:move;touch-action:none}
.g2-title span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2-close{width:18px;height:16px;padding:0;border:2px outset #fff;background:#d4d0c8;color:#000;font:bold 12px/10px Tahoma,Arial,sans-serif;cursor:pointer}
.g2-client{position:absolute;left:0;right:0;bottom:0;top:0}
.g2-button,.g2-radio,.g2-check{padding:0 4px;border:2px outset #fff;background:#d4d0c8;color:#000;cursor:pointer;touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis}
.g2-button:active{border-style:inset}
.g2-radio,.g2-check{border:0;background:none;text-align:left;padding:0 0 0 16px}
.g2-radio::before,.g2-check::before{content:"";position:absolute;left:2px;top:50%;width:11px;height:11px;margin-top:-6px;border:2px inset #fff;background:#fff}
.g2-radio::before{border-radius:50%}
.g2-radio.g2-checked::before{background:radial-gradient(#000 0 30%,#fff 35%)}.g2-check.g2-checked::before{content:"✓";font:bold 10px/11px Tahoma;text-align:center}
.g2-text{white-space:nowrap;overflow:visible;line-height:1.25}
.g2-mltext{white-space:normal;overflow:visible;line-height:1.3;overflow-wrap:anywhere;user-select:text}
.g2-edit .g2-input{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:1px 3px;border:2px inset #fff;background:#fff;color:inherit;font:inherit;user-select:text}
.g2-scroll{border:2px inset #fff;background:#fff;overflow:auto}
.g2-list{overflow:visible}
.g2-row{padding:0 4px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.g2-row.g2-sel{background:#0a246a;color:#fff}
.g2-bitmap img{width:100%;height:100%;object-fit:fill;image-rendering:pixelated;pointer-events:none}
.g2-off{filter:grayscale(1);opacity:.55}
.g2-off .g2-off{filter:none;opacity:1}
.g2-frames{overflow:hidden}
#cmdHint{margin:0 0 8px;color:#aab3a6;font-size:11px}
#cmdList{max-height:min(52vh,420px);overflow-y:auto;padding-right:4px;user-select:text}
#cmdList h3{margin:10px 0 4px;padding:0 0 2px;border-bottom:1px solid #a6966677;color:#ffd84e;font:bold 12px Verdana,Arial,sans-serif;letter-spacing:.5px;text-transform:uppercase}
#cmdList h3:first-child{margin-top:0}
.cmdRow{display:grid;grid-template-columns:minmax(96px,42%) 1fr;gap:2px 10px;padding:3px 4px;align-items:baseline}
.cmdRow b{color:#fff0a4;font:bold 12px Verdana,Arial,sans-serif;overflow-wrap:anywhere}
.cmdRow span{color:#d4d8cf;font-size:11px}
button.cmdRow{width:100%;margin:0;border:0;background:none;text-align:left;cursor:pointer;touch-action:manipulation}
button.cmdRow:hover,button.cmdRow:focus-visible{background:#26331f;outline:none}
#setFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
#setWho{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aab3a6;font-size:11px}
#setWho b{color:#fff}
#setDisconnect{flex:none;height:34px;padding:0 18px;border:1px solid #fff;background:#5a1c1c;color:#fff;font:bold 12px Verdana,Arial,sans-serif;cursor:pointer}
#setDisconnect:hover{background:#7a2626}
.setHint{margin:10px 0 0;color:#aab3a6;font-size:10px;line-height:1.45}
/* Settings → Look: the body, a picture of you, and Graal's 19 colours (and clear) for each part of the body. */
#lookTop{display:flex;align-items:center;gap:10px;margin:0 0 8px}#lookTop .setRow{flex:1;margin:0}
#lookPreview{flex:none;width:64px;height:64px;border:1px solid #7b9c78;background:#000;image-rendering:pixelated}
.lookRow{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.lookName{flex:0 0 74px;font-size:11px;text-transform:capitalize}
.lookSwatches{display:flex;flex-wrap:wrap;gap:3px}
.lookSwatch{width:16px;height:16px;padding:0;border:1px solid #555;cursor:pointer;touch-action:manipulation}
.lookSwatch.on{outline:2px solid #ffd84e;outline-offset:1px;border-color:#000}
.lookSwatch.clear{background:repeating-conic-gradient(#888 0 25%,#ddd 0 50%) 0 0/8px 8px!important}
@media(pointer:coarse){.lookSwatch{width:22px;height:22px}}
/* A font picked in Settings for the menus wins over every font the page names (client.js applyFonts). */
body.uiFont,body.uiFont *{font-family:var(--ui-font),Verdana,Arial,sans-serif!important}

/* RC over the game (client.js toggleRC): a window on a computer, the whole screen on a phone. */
#rcPanel{position:fixed;left:4vw;top:4vh;width:92vw;height:92vh;z-index:50;border:2px outset #fff;box-shadow:4px 4px 0 #0007;background:#d4d0c8}
#rcPanel.hidden{display:none}
#rcPanel iframe{width:100%;height:100%;border:0;display:block}
@media(pointer:coarse),(max-width:760px){#rcPanel{inset:0;width:auto;height:100dvh;border:0;box-shadow:none}}
/* The map editor over the game (client.js openEditorPanel), above RC when RC opened it: a caption bar to close it, the editor under it. */
#editorPanel{position:fixed;left:2vw;top:2vh;width:96vw;height:96vh;z-index:51;display:flex;flex-direction:column;border:2px outset #fff;box-shadow:4px 4px 0 #0007;background:#d4d0c8}
#editorPanel.hidden{display:none}
#editorPanel .panelBar{display:flex;align-items:center;gap:6px;min-height:26px;padding:2px 4px;color:#fff;font:bold 12px Tahoma,Verdana,sans-serif;background:linear-gradient(90deg,#0a246a,#a6caf0);user-select:none}
#editorPanel .panelBar span{flex:1}
#editorPanel .panelBar button{min-height:20px;width:24px;padding:0;font:bold 14px Tahoma;line-height:14px;background:#d4d0c8;border:2px outset #fff;color:#000}
#editorPanel iframe{flex:1;width:100%;border:0;display:block}
@media(pointer:coarse),(max-width:760px){#editorPanel{inset:0;width:auto;height:100dvh;border:0;box-shadow:none}#editorPanel .panelBar{min-height:40px;font-size:14px}#editorPanel .panelBar button{min-height:34px;width:42px;font-size:20px}}
/* OG iEra (public/iera.js): Era's old phone client. Its panel takes the top 61% of the screen: a #1e1e1e title bar, a bevel, the
   striped grey body (assets/iera-panel.jpg, cut from iEra itself: its stripes and its darker top), a bevel and the button bar.
   Sizes are in vh and places in % of the body, as iEra drew it, so it looks the same on any screen. */
#ieraPanel{position:fixed;left:0;right:0;top:0;height:61.2vh;z-index:45;display:flex;flex-direction:column;background:#1e1e1e;border:0 solid #3e3e3e;border-width:.1vh .35vh 0;color:#e8e8e8;font-family:Verdana,Tahoma,Arial,sans-serif;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#ieraPanel.hidden,#ieraHud.hidden{display:none}
#ieraPanel button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.ieTitle{flex:none;height:8.47vh;display:flex;align-items:center;gap:1.4vh;padding-left:2.2%;white-space:nowrap;overflow:hidden}
.ieGender{font:bold 5.6vh/1 Arial,sans-serif;color:#3aa0ff;text-shadow:0 0 .25vh #000,.15vh .15vh 0 #000}
.ieGender.female{color:#ff6fc4}
.ieGender:empty{display:none}
.ieHead{flex:none;width:6.6vh;height:6.6vh;background-repeat:no-repeat;background-size:100% auto;background-position:0 -13.2vh;image-rendering:pixelated}
.ieHead.hidden{display:none}
.ieName{padding-left:.4vh;font:7vh/1 Corleone,Impact,"Arial Narrow",sans-serif;background:linear-gradient(#ffc2c6 0%,#f2555c 38%,#e1212a 60%,#a5101a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .1vh #000) drop-shadow(.15vh .2vh 0 #000);overflow:hidden;text-overflow:ellipsis}
.ieTitle:has(.ieHead.hidden) .ieName{padding-left:4%}
.ieRule{flex:none;height:1.25vh;background:linear-gradient(#2a2a2a 0%,#5a5a5a 11%,#3e3e3e 28%,#444 61%,#2a2a2a 72%,#0f0f0f 100%)}
.ieRule.ieRuleLow{height:1.4vh;background:linear-gradient(#212121 0%,#151515 6%,#3b3b3b 22%,#414141 36%,#3d3d3d 50%,#4e4e4e 65%,#2c2c2c 80%,#090909 95%)}
.ieBody{position:relative;flex:1;overflow:hidden;background:#5d5d5d url("assets/iera-panel.jpg") repeat-x 0 0/auto 100%;box-shadow:inset .25vh 0 0 #080808,inset -.25vh 0 0 #080808,inset .55vh 0 0 #4a4a4a,inset -.55vh 0 0 #4a4a4a}
.ieBar{flex:none;height:5.2vh;display:flex;align-items:center;position:relative}
.ieBarBtn{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.7vh;padding:0 .6vh;border:0;background:none;font:4.6vh/1 Corleone,Impact,"Arial Narrow",sans-serif!important;cursor:pointer}
.ieBarBtn{color:transparent;background-image:linear-gradient(#fff 15%,#d6d6d6 55%,#9c9c9c 95%);-webkit-background-clip:text;background-clip:text}
.ieBarBtn::before{content:"";flex:none;width:1.9vh;height:1.9vh;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff 0 12%,var(--dot) 46%,var(--dotDark) 100%);box-shadow:0 0 .2vh #000}
.ieBarBtn[data-dot=red]{--dot:#ef4a52;--dotDark:#7d0c12}
.ieBarBtn[data-dot=green]{--dot:#5fd84a;--dotDark:#1d6a14}
.ieBarBtn[data-dot=yellow]{--dot:#ffb22e;--dotDark:#8a4b00}
.ieBar .ieBarBtn:nth-child(1){left:1.3%}.ieBar .ieBarBtn:nth-child(2){left:15%}.ieBar .ieBarBtn.right{left:79.7%}
/* The profile */
.ieStat{position:absolute;left:24.3%;width:22.7%;transform:translateY(-50%);display:flex;justify-content:space-between;gap:1vh;font-size:3.3vh;line-height:1;white-space:nowrap;color:#dcdcdc;text-shadow:0 .1vh .25vh #000}
.ieStat .green{color:#7ee13c;font-weight:bold}.ieStat .red{color:#ff2b2b;font-weight:bold}.ieStat .bold{color:#f2f2f2;font-weight:bold}
.ieChar{position:absolute;left:calc(62.5% - 7.5vh);top:14%;width:15vh;height:15vh;image-rendering:pixelated}
.ieSlot{position:absolute;left:70.9%;width:6.8vh;height:6.8vh;padding:0;display:grid;place-items:center;border:.25vh solid #2c2c2c;border-radius:1.1vh;background:linear-gradient(#8f8f8f,#626262 48%,#4c4c4c);box-shadow:inset 0 .2vh 0 #ffffff55,0 .2vh .5vh #0009;cursor:pointer}
.ieSlot:disabled{cursor:default}
.ieIcon{max-width:80%;max-height:80%;image-rendering:pixelated;pointer-events:none}
.ieIcon.blank{visibility:hidden}
.ieStatusLine{position:absolute;left:51.7%;top:56%;width:24%;font:bold 1.75vh/1.25 Verdana,Tahoma,sans-serif;color:#fff;text-shadow:0 0 .2vh #000,.12vh .12vh 0 #000;overflow-wrap:anywhere}
.ieButton{border:.12vh solid #161616;border-radius:.7vh;background:linear-gradient(#fff 0%,#f3f5fa 45%,#c8d1e2 76%,#9dabc8 100%);box-shadow:0 .25vh .45vh #000a,inset 0 -.2vh .2vh #3c507866;color:#11131b;font-size:3vh;line-height:1;cursor:pointer;white-space:nowrap;padding:0 1.2vh}
.ieButton:active{filter:brightness(.88)}
.ieButton.on{background:linear-gradient(#e9f3ff,#a9c6f2 60%,#6f93d3);font-weight:bold}
.ieStatusBtn{position:absolute;left:66.3%;top:86.4%;height:4.9vh;width:15.7vh}
.ieNote{position:absolute;left:0;right:0;top:42%;text-align:center;font-size:3.3vh;color:#e2e2e2;text-shadow:0 .1vh .25vh #000}
.ieNote.top{top:10%}
/* Edit and Status */
.ieChoices{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1.4vh;padding:0 4%}
.ieChoices .ieButton{height:5vh}
.ieChoiceLabel{font-size:3.3vh;color:#e2e2e2;text-shadow:0 .1vh .25vh #000;margin-right:1vh}
.ieInput{position:absolute;left:25%;width:50%;top:24%;height:6.5vh;padding:0 1.4vh;border:.2vh inset #c8c8c8;border-radius:.5vh;background:#fff;color:#000;font:3vh Verdana,Tahoma,sans-serif;user-select:text;-webkit-user-select:text}
.ieSave{position:absolute;left:calc(50% - 8vh);width:16vh;top:58%;height:5vh}
/* The inventory: five to a row, iEra's blue scrollbar on the right */
.ieGrid{position:absolute;left:21.5%;width:52.5%;top:0;bottom:0;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:15.25vh;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.ieGrid::-webkit-scrollbar{display:none}
.ieCell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.6vh;padding:1.6vh 0 0;border:0;background:none;cursor:pointer;min-width:0}
.ieCell .ieIcon{height:8vh;width:auto;max-width:90%;max-height:none;object-fit:contain}
.ieLabel{max-width:100%;font-size:2.4vh;line-height:1.1;color:#e4e4e4;text-shadow:0 .1vh .25vh #000;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ieGrid .ieNote{grid-column:1/-1;position:static;padding-top:14vh}
.ieScroll{position:absolute;left:75.4%;width:2.5vh;top:2%;bottom:2%}
.ieScroll.idle .ieThumb{display:none}
.ieTrack{position:absolute;left:.25vh;right:.25vh;top:1.4vh;bottom:1.4vh;border:.15vh solid #0b1d44;border-radius:.8vh;background:linear-gradient(90deg,#14306a,#2f5cb3 45%,#14306a)}
.ieArrow{position:absolute;left:0;width:2.5vh;height:2.5vh;padding:0;border:.15vh solid #0b1d44;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9cc0ff,#3e6fcf 55%,#16336e);cursor:pointer;z-index:1}
.ieArrow.up{top:0}.ieArrow.down{bottom:0}
.ieArrow::after{content:"";position:absolute;left:50%;top:50%;border:.55vh solid transparent}
.ieArrow.up::after{border-bottom:.75vh solid #e33a1f;border-top-width:0;transform:translate(-50%,-55%)}
.ieArrow.down::after{border-top:.75vh solid #e33a1f;border-bottom-width:0;transform:translate(-50%,-45%)}
.ieThumb{position:absolute;left:.45vh;width:1.6vh;height:3vh;top:2.2vh;border-radius:.8vh;background:linear-gradient(90deg,#7fa8f0,#cfe0ff 50%,#7fa8f0);pointer-events:none}
/* An item */
.ieDesc{position:absolute;left:16.2%;width:50%;top:5%;text-align:center;font-size:3.3vh;line-height:1.25;color:#ececec;text-shadow:0 .1vh .25vh #000}
.ieIcon.big{position:absolute;left:49.9%;top:17%;height:8vh;width:auto;max-width:none;max-height:none;transform:translateX(-50%)}
.ieEquip{position:absolute;left:39.25%;width:21.3%;top:65.7%;height:5.4vh}
.ieHotkey{position:absolute;left:39%;width:10.8%;top:86.4%;height:5.4vh}
.ieDrop{position:absolute;left:50.6%;width:10.8%;top:86.4%;height:5.4vh}
.ieDrop.alone{left:44.5%;top:65.7%}
.ieHotkeys{position:absolute;left:0;right:0;top:36%;display:flex;justify-content:center;gap:4vh}
.ieHotkeys .ieSlot{position:relative;left:auto;width:9vh;height:9vh}
.ieSlotNo{position:absolute;right:.4vh;bottom:.1vh;font:bold 2vh Verdana,sans-serif;color:#fff;text-shadow:0 0 .2vh #000;font-style:normal}
/* The phone HUD: chat, quick commands, players and map down the left, help at the top right, three weapon hotkeys on the right */
#ieraHud{position:fixed;inset:0;z-index:9;pointer-events:none;-webkit-tap-highlight-color:transparent}
#ieraHud button{position:absolute;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;padding:0;width:max(4.9vh,30px);height:max(4.9vh,30px);border:1px solid #ffffff4d;border-radius:22%;background:#5a5a5a8c;box-shadow:inset 0 1px 0 #ffffff33,0 1px 2px #0008;display:grid;place-items:center}
#ieraHud button svg{width:88%;height:88%;pointer-events:none}
#ieraHud [data-key=chat]{left:max(1.3vh,env(safe-area-inset-left));top:1.3vh}
#ieraHud [data-key=cmds]{left:calc(max(1.3vh,env(safe-area-inset-left)) + max(6.2vh,38px));top:1.3vh}
#ieraHud [data-key=players]{left:max(1.3vh,env(safe-area-inset-left));top:calc(1.3vh + max(6.1vh,37px))}
#ieraHud [data-key=map]{left:max(1.3vh,env(safe-area-inset-left));top:calc(1.3vh + 2 * max(6.1vh,37px))}
#ieraHud [data-key=help]{right:max(2.9vh,env(safe-area-inset-right));top:1.3vh;background:#2f4a3c99}
#ieraHud .ieHudSlot{right:max(3.1vh,env(safe-area-inset-right));width:max(5.2vh,34px);height:max(5.2vh,34px)}
#ieraHud .ieHudSlot[data-slot="0"]{top:42.8vh}#ieraHud .ieHudSlot[data-slot="1"]{top:calc(42.8vh + max(6.5vh,40px))}#ieraHud .ieHudSlot[data-slot="2"]{top:calc(42.8vh + 2 * max(6.5vh,40px))}
#ieraHud .ieHudSlot.on{border-color:#ffe08a;box-shadow:0 0 6px #ffd85a}
#ieraHud .ieHudSlot .ieIcon{max-width:78%;max-height:78%}
/* With the iEra HUD its buttons stand in for the old ones: settings is its help; Chat, List, Map and Inv are on the left and the hotkeys */
.ogIeraHud #settingsButton,.ogIeraHud #touchControls [data-key=chat],.ogIeraHud #touchControls [data-key=f7],.ogIeraHud #touchControls [data-key=m],.ogIeraHud #touchControls [data-key=q]{display:none!important}
.ogIeraHud #touchControls button{border:1px solid #ffffff4d;border-radius:22%;background:#5a5a5a8c;box-shadow:inset 0 1px 0 #ffffff33,0 1px 2px #0008}
/* The Debug panel (hitlab.js, F8 or /debug; staff only): a small window at the left that leaves the game visible. */
#hitLab{position:fixed;left:8px;top:8px;z-index:30;width:min(300px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow-y:auto;box-sizing:border-box;color:#fff;font:11px/1.45 Verdana,Arial,sans-serif;background:#000000d6;border:1px solid #fff;user-select:none;pointer-events:auto;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px)}
#hitLab.hidden{display:none}
#hitLab .dbgTitle{display:flex;align-items:center;gap:4px;padding:3px 4px 3px 8px;border-bottom:1px solid #a6966677;color:#ffd84e;font-weight:bold}
#hitLab .dbgTitle span{flex:1}
#hitLab .dbgTitle button{width:20px;height:20px;padding:0;border:1px solid #fff;background:#000;color:#fff;font:14px/1 Verdana,Arial,sans-serif;cursor:pointer}
#hitLab .dbgTitle button:hover{background:#3a1a1a}
#hitLab.folded .dbgBody{display:none}
#hitLab .dbgBody{padding:6px 8px 8px}
#hitLab h3{margin:8px 0 4px;padding:0 0 2px;border-bottom:1px solid #a6966677;color:#ffd84e;font:bold 11px Verdana,Arial,sans-serif;letter-spacing:.5px;text-transform:uppercase}
#hitLab .dbgInfo{margin:3px 0;color:#d4d8cf;font-size:10.5px;overflow-wrap:anywhere}
#hitLab .dbgChecks{display:flex;flex-wrap:wrap;gap:2px 12px;margin:4px 0}
#hitLab .dbgCheck{display:flex;align-items:center;gap:5px;cursor:pointer}
#hitLab .dbgRow{display:grid;grid-template-columns:104px 1fr 50px 26px;align-items:center;gap:6px;margin:3px 0}
#hitLab .dbgRow.dbgPick{grid-template-columns:104px 1fr}
#hitLab .dbgName{color:#fff0a4;cursor:default}
#hitLab .dbgUnit{color:#aab3a6;font-size:10px}
#hitLab input[type=range]{width:100%;min-width:0;margin:0;accent-color:#ffd84e;touch-action:pan-y}
#hitLab .dbgNum,#hitLab select{box-sizing:border-box;width:100%;min-width:0;padding:1px 3px;border:1px solid #fff;background:#000;color:#fff;font:11px Verdana,Arial,sans-serif}
#hitLab .dbgNum::-webkit-inner-spin-button{display:none}
#hitLab .dbgBtns{display:flex;align-items:center;gap:6px;margin:5px 0}
#hitLab .dbgBtns button{padding:2px 8px;border:1px solid #fff;background:#000;color:#fff;font:11px Verdana,Arial,sans-serif;cursor:pointer;touch-action:manipulation}
#hitLab .dbgBtns button:hover{background:#26331f}
#hitLab #dbgStats{color:#d4d8cf;font-size:10.5px}
/* On a touch screen held sideways the Debug panel sits between the two sticks, so you can still walk and shoot with it open. */
@media (pointer:coarse) and (min-width:640px){#hitLab{left:50%;transform:translateX(-50%);width:min(300px,calc(100vw - 340px))}}