:root{color-scheme:dark;--bg:#00111b;--cyan:#00d8ec;--orange:#ffae20;--text:#ecf5f7;--line:#0795a8;--green:#33d753;--muted:#9bb3bc}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{min-height:100%;padding:14px;display:flex;align-items:center;justify-content:center;background:#020910;color:var(--text);font-family:Consolas,"Courier New",monospace}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid #7af4fb;outline-offset:2px}
[hidden]{display:none!important}

.tablet{width:min(96vw,calc((100vh - 28px)*1.7778));aspect-ratio:16/9;min-height:min(720px,calc(100vh - 28px));margin:auto;background:radial-gradient(ellipse at 50% 36%,#063d50aa,#001923 55%,#001019 93%);position:relative;isolation:isolate;overflow:hidden;border:2px solid #075e74;box-shadow:inset 0 0 38px #020c14,0 0 45px #00b8e025;border-radius:6px}
.gridlines{position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(#02b4d44f .9px,transparent 1px),linear-gradient(#08738a17 1px,transparent 1px),linear-gradient(90deg,#08738a17 1px,transparent 1px);background-size:22px 22px,44px 44px,44px 44px}
.tech-frame{position:absolute;inset:0;pointer-events:none;z-index:5}
.tech-frame svg{width:100%;height:100%}
.scanline{position:absolute;height:1px;top:0;left:1%;right:1%;pointer-events:none;z-index:6;background:linear-gradient(90deg,transparent,#05d6e866,transparent);animation:scan 12s linear infinite}
@keyframes scan{to{top:100%}}

.login-screen{position:relative;height:100%;min-height:720px;display:flex;align-items:center;justify-content:center}
.login-center{position:relative;z-index:2;display:flex;align-items:center;flex-direction:column;width:min(100%,980px);padding:40px 35px 70px;text-align:center}
.emblem-large{width:165px;height:177px;filter:drop-shadow(0 0 14px #bedefa35)}
.logo-word{font:900 clamp(46px,5.5vw,72px)/.97 Impact,"Arial Narrow",Arial,sans-serif;letter-spacing:8px;margin:1px 0 0;text-shadow:0 2px #8b99a3}
.logo-word span{display:block;font:900 clamp(20px,2.75vw,35px)/1.2 Arial,sans-serif;letter-spacing:4px}
.three-slashes{font-size:33px;color:var(--orange);font-weight:900;letter-spacing:7px;margin:6px 0 24px}
.secure-banner{font-size:clamp(17px,2.5vw,34px);letter-spacing:4px;border:1px solid var(--cyan);padding:14px 26px;width:min(100%,790px);background:#042631ba;display:flex;align-items:center;justify-content:center;gap:21px;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);box-shadow:inset 0 0 25px #00d8eb20}
.lock-icon{font-size:32px;color:#fff}
.login-form{display:flex;gap:13px;width:min(100%,860px);margin-top:55px;min-height:76px}
.password-field{display:flex;align-items:center;gap:20px;flex:1;min-width:0;border:2px solid var(--cyan);padding:11px 24px;background:#042632c7;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);box-shadow:inset 0 0 18px #00d7f126}
.key-icon{font-size:38px;color:#fff;line-height:1}
.password-field input{min-width:0;flex:1;border:0;outline:none;background:none;color:#f1fbff;font-size:clamp(16px,2.3vw,26px);letter-spacing:1px}
.password-field input::placeholder{color:#8a9ba5}
.arrow-button,.send-button{border:2px solid var(--orange);background:#05202a;color:#fff;min-width:102px;font:400 47px/1 Arial,sans-serif;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)}
.arrow-button:hover,.send-button:hover{background:#664612}
.login-error{font-size:13px;color:#ffbf6b;height:24px;margin-top:12px}
.login-bottom{position:absolute;bottom:8.3%;z-index:1;left:15%;right:15%;text-align:center;font-size:clamp(13px,1.45vw,22px);letter-spacing:5px;color:#c8d0d4;white-space:nowrap}
.login-bottom span{color:var(--orange);font-size:1.5em;font-weight:900}
.diag-code{position:absolute;left:5%;top:17%;width:17%;height:27%;overflow:hidden;color:#047d97;font:9px/2.1 Consolas,monospace;border:1px solid #007f9b66;border-right:0;padding:14px;opacity:.7}
.diag-code i{display:block;height:2px;background:#016985;width:80%;margin:8px 0}
.diag-code span{display:block}
.fake-map{position:absolute;right:2.5%;top:14%;width:32%;opacity:.48}
.fake-map svg{width:100%}
.hex-blocks{position:absolute;bottom:36%;left:5%;display:grid;grid-template-columns:repeat(3,13px);gap:7px;opacity:.6}
.hex-blocks i{display:block;height:13px;background:#03728a}
.hex-blocks i:nth-child(3n){background:#ac7019}

.chat-screen{height:100%;display:flex;flex-direction:column;min-height:720px;padding:12px 14px 14px}
.chat-top{height:128px;flex-shrink:0;display:flex;align-items:center;gap:22px;padding:15px 4% 14px;border-bottom:1px solid var(--cyan);background:linear-gradient(180deg,#031f2be8,#031923d7);box-shadow:inset 0 -12px 20px #01101855}
.chat-brand{display:flex;align-items:center;gap:13px;flex-shrink:0;padding-right:25px;border-right:2px solid var(--orange)}
.emblem-small{width:76px;height:84px}
.chat-word{font:900 clamp(21px,2.6vw,36px)/.98 Impact,"Arial Narrow",Arial,sans-serif;letter-spacing:1px}
.chat-word span{display:block;font:900 clamp(11px,1.3vw,18px)/1.3 Arial,sans-serif;letter-spacing:.2px}
.chat-word b{display:block;color:var(--orange);font-size:23px}
.chat-top-title{min-width:0;flex:1}
.chat-top-title h2{font:900 clamp(23px,3vw,43px)/1.1 Impact,"Arial Narrow",Arial,sans-serif;letter-spacing:1px;margin:0}
.room-nav{display:flex;align-items:center;gap:12px;margin-top:16px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.room-nav button{border:0;background:none;color:#e4edef;padding:0;font-size:clamp(12px,1.25vw,19px)}
.room-nav button:hover,.room-nav button.current{color:#ffca79}
.room-nav i{font-style:normal;color:#d1e2e8}
.top-slashes{font-size:32px;color:var(--orange);align-self:flex-start}

.columns{display:grid;grid-template-columns:minmax(240px,20%) minmax(0,1fr) minmax(250px,21%);gap:15px;padding-top:14px;flex:1;min-height:0}
.panel{position:relative;min-width:0;background:linear-gradient(135deg,#03232cb7,#00141fce);border:1px solid var(--cyan);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);box-shadow:inset 0 0 0 1px #014d62,inset 0 0 26px #00a8d312}
.panel:before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--cyan);box-shadow:0 0 13px var(--cyan);pointer-events:none}
.left-panel{padding:24px 16px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.channel-focus{display:flex;align-items:center;gap:12px;color:#fff;background:linear-gradient(100deg,#6a420a,#111e22);border:1px solid var(--orange);padding:15px;text-align:left;min-width:0;font:900 clamp(13px,1.6vw,20px) Arial,sans-serif;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);box-shadow:inset 0 0 16px #ffac0018}
.channel-focus:hover{background:#6d4d15}
.channel-focus span:first-child{font-size:32px;color:#ffc242}
.left-watermark{width:76%;opacity:.12;align-self:center;margin:auto 0}
.hatch{margin:0 auto;width:75%;height:40px;border-top:1px solid #06637b;background:repeating-linear-gradient(115deg,#05728a 0 9px,transparent 9px 17px) 0 17px/100% 12px no-repeat;opacity:.55}

.chat-panel{display:flex;flex-direction:column;overflow:hidden}
.room-heading{padding:16px 22px;display:flex;gap:15px;align-items:center;border-bottom:1px solid #087d91;min-height:86px;background:#051b25cf}
.room-icon{font-size:48px;line-height:1;color:var(--orange)}
.room-heading h3{font:900 clamp(19px,2.1vw,30px) Arial,sans-serif;letter-spacing:1px;margin:0}
.room-heading p{font:clamp(12px,1.2vw,16px) Arial,sans-serif;margin:3px 0 0;color:#e4eaed}
.messages{flex:1;min-height:0;overflow-y:auto;padding:18px 20px 12px;scrollbar-width:thin;scrollbar-color:#187b91 #011824;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#0217219c,#03111a6e)}
.message{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;border:1px solid var(--cyan);padding:14px 16px;background:#041c26be;position:relative;clip-path:polygon(14px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 14px);box-shadow:inset 0 0 12px #00b6cf0a}
.message:before{content:"";position:absolute;left:0;top:29%;height:42%;width:4px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.message.system:before{background:var(--orange);box-shadow:0 0 12px var(--orange)}
.message time{font-size:12px;color:#dae1e5;align-self:start;padding-top:2px}
.message .author{color:#27e3f0;font:900 16px Arial,sans-serif}
.message.system .author{color:var(--orange)}
.message .body{font:14px/1.5 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}
.message-form{display:flex;gap:11px;padding:12px;border-top:1px solid var(--cyan);background:#041b25;flex-shrink:0}
.chat-input-wrap{flex:1;border:1px solid var(--cyan);display:flex;align-items:center;min-width:0;background:#031822;box-shadow:inset 0 0 14px #00c6e40d}
.chat-input-wrap>span{font-size:38px;color:#e7fafc;border-right:1px solid var(--cyan);width:55px;text-align:center;line-height:1.2;flex-shrink:0}
.chat-input-wrap input{border:0;background:transparent;color:white;outline:none;flex:1;min-width:0;font-size:clamp(13px,1.7vw,19px);padding:12px 14px}
.chat-input-wrap input::placeholder{color:#8496a2}
.send-button{min-width:73px;font-size:33px}

.users-panel{display:flex;flex-direction:column;overflow:hidden}
.users-heading{display:flex;gap:10px;align-items:center;border-bottom:1px solid #0695ad;padding:22px 16px 18px}
.users-heading span{color:var(--orange);font-size:40px}
.users-heading h3{font:900 clamp(15px,1.6vw,24px) Arial,sans-serif;margin:0;white-space:nowrap}
.users-heading small{font:normal 15px Consolas,monospace;color:#80a2b0}
.users-list{padding:8px 18px;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#177188 #031822}
.user{display:flex;align-items:center;gap:12px;border-bottom:1px solid #086c7a;padding:15px 4px;font:clamp(12px,1.3vw,17px) Arial,sans-serif}
.user .status{display:block;flex-shrink:0;width:12px;height:12px;border-radius:50%;background:#29dc4c;box-shadow:0 0 8px #29dc4c55}
.user .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .crown{font-size:25px;color:var(--orange)}
.user-status{padding:10px 15px 8px;font-size:10px;color:#63b8cc;text-align:center;letter-spacing:.8px}
.settings-button{margin:12px 14px 14px;min-height:62px;border:1px solid var(--cyan);font:38px Arial,sans-serif;color:white;background:#082533;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)}
.settings-button:hover{border-color:var(--orange);color:var(--orange)}

.modal-overlay{position:absolute;inset:0;z-index:10;display:flex;justify-content:center;align-items:center;padding:22px;background:#000b}
.identity-dialog{position:relative;max-width:500px;width:100%;background:linear-gradient(135deg,#103949,#031923);border:1px solid var(--cyan);padding:35px;clip-path:polygon(23px 0,calc(100% - 23px) 0,100% 23px,100% calc(100% - 23px),calc(100% - 23px) 100%,23px 100%,0 calc(100% - 23px),0 23px);box-shadow:0 10px 50px #0009}
.dialog-kicker{color:#ffc072;font-size:11px;letter-spacing:2px}
.identity-dialog h3{font:900 27px Arial,sans-serif;letter-spacing:1px;margin:10px 0}
.identity-dialog p{font-size:12px;color:#b0cbd4;line-height:1.8}
.identity-dialog label{font-size:11px;letter-spacing:1px;color:#80d7e5;font-weight:900;display:block;margin:25px 0 8px}
.identity-dialog input{width:100%;padding:14px;background:#031720;border:1px solid #268ba2;color:#edfaff}
.dialog-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.dialog-actions button{border:1px solid var(--orange);padding:11px 14px;font-size:11px;font-weight:900}
.gold-button{color:#ffe1ae;background:#65471d}
.dark-button{border-color:#366f82!important;color:#c7eef4;background:#072936}
.dialog-error{min-height:20px;color:#ffc177;font-size:11px;margin-top:12px}
.dialog-foot{border-top:1px solid #235869;padding-top:15px;margin-top:13px;color:#6eabba;font-size:10px;letter-spacing:1px}

@media(max-width:1100px){
  body{padding:10px}
  .tablet{width:min(98vw,calc((100vh - 20px)*1.7778))}
  .chat-top{gap:17px;padding:10px 3%;height:118px}
  .chat-brand{gap:8px;padding-right:13px}
  .emblem-small{width:56px;height:70px}
  .chat-word{font-size:25px}
  .chat-word span{font-size:12px}
  .chat-top-title h2{font-size:29px}
  .columns{gap:8px;grid-template-columns:minmax(180px,19%) minmax(0,1fr) minmax(200px,21%)}
  .left-panel{padding:20px 10px}
  .channel-focus{font-size:13px;padding:12px 8px;gap:5px}
  .channel-focus span:first-child{font-size:22px}
  .room-heading{padding:14px;min-height:78px}
  .room-icon{font-size:32px}
  .room-heading h3{font-size:21px}
  .room-heading p{font-size:12px}
  .messages{padding:15px 12px}
  .message{grid-template-columns:58px 1fr;padding:10px;gap:8px}
  .message .author{font-size:13px}
  .message .body{font-size:12px}
  .users-heading{padding:17px 8px}
  .users-heading span{font-size:26px}
  .users-heading h3{font-size:16px}
  .users-list{padding:8px}
  .user{font-size:12px;padding:12px 2px;gap:6px}
  .user .status{width:9px;height:9px}
  .settings-button{min-height:47px;margin:8px}
  .room-nav{gap:8px}
  .room-nav button{font-size:11px}
}

@media(max-width:750px){
  body{padding:0}
  .tablet{width:100vw;min-height:100dvh;height:100dvh;aspect-ratio:auto;border-radius:0;border-width:0;box-shadow:none}
  .login-screen{min-height:100dvh}
  .login-center{padding:25px 18px 85px}
  .emblem-large{width:127px;height:140px}
  .logo-word{font-size:49px;letter-spacing:4px}
  .logo-word span{font-size:22px;letter-spacing:3px}
  .secure-banner{font-size:20px;letter-spacing:1.2px;padding:10px 8px;gap:10px}
  .lock-icon{font-size:25px}
  .login-form{margin-top:35px;min-height:65px;gap:7px}
  .password-field{padding:9px 11px;gap:9px}
  .password-field input{font-size:17px}
  .key-icon{font-size:28px}
  .arrow-button{min-width:64px;font-size:33px}
  .login-bottom{bottom:9%;left:3%;right:3%;letter-spacing:2px;font-size:11px}
  .diag-code{opacity:.28}
  .fake-map{opacity:.25;width:55%}
  .chat-screen{min-height:100dvh;padding:8px 7px 10px}
  .chat-top{height:98px;padding:7px;gap:8px}
  .chat-brand{padding-right:8px;gap:4px}
  .emblem-small{width:37px;height:48px}
  .chat-word{font-size:17px;letter-spacing:0}.chat-word span{font-size:9px}.chat-word b{font-size:14px}
  .chat-top-title h2{font-size:17px}
  .top-slashes{display:none}
  .room-nav{margin-top:8px;gap:5px}
  .room-nav button{font-size:9px}.room-nav i{font-size:9px}
  .columns{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding-top:7px}
  .left-panel{padding:7px;min-height:0}
  .channel-focus{width:max-content;font-size:12px;padding:7px 13px}
  .left-watermark,.hatch{display:none}
  .room-heading{min-height:62px}.room-heading h3{font-size:16px}.room-heading p{font-size:10px}.room-icon{font-size:27px}
  .messages{padding:10px;min-height:0}
  .message{margin-bottom:0}.message time{font-size:10px}.message .body{font-size:11px}
  .message-form{padding:7px;gap:6px}
  .chat-input-wrap>span{font-size:27px;width:35px}.chat-input-wrap input{font-size:13px;padding:10px 7px}.send-button{min-width:46px;font-size:24px}
  .users-panel{display:grid;grid-template-columns:1fr auto;align-items:center;min-height:55px}
  .users-heading{padding:8px 10px;border:0}.users-heading span{font-size:23px}.users-heading h3{font-size:12px}.users-heading small{font-size:11px}
  .users-list,.user-status{display:none}
  .settings-button{min-height:39px;min-width:55px;font-size:24px;margin:5px 8px}
  .identity-dialog{padding:24px}.identity-dialog h3{font-size:22px}
}

@media(max-width:430px){.logo-word{font-size:40px}.logo-word span{font-size:19px}.secure-banner{font-size:16px}.login-bottom{font-size:9px;letter-spacing:1px}.chat-top-title h2{font-size:14px}.room-nav button{font-size:8px}.chat-brand{border-right-width:1px}.message{grid-template-columns:45px 1fr;gap:7px}.message time{font-size:9px}.identity-dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){.scanline{animation:none}}

/* Vector icons matching the supplied HUD reference */
.lock-icon{width:31px;height:36px;flex-shrink:0;color:#f0faff}.key-icon{width:39px;height:39px;flex-shrink:0;color:#f0faff}.bubble-icon{width:28px;height:28px;flex-shrink:0;color:var(--orange)}.room-icon{width:44px;height:44px;color:var(--orange);flex-shrink:0}.message-icon{width:48px;height:44px;padding:9px;border-right:1px solid var(--cyan);color:#e9fbff;flex-shrink:0}.users-icon{width:42px;height:42px;color:var(--orange);flex-shrink:0}
@media(max-width:750px){.lock-icon{width:24px;height:26px}.key-icon{width:29px;height:30px}.bubble-icon{width:21px;height:21px}.room-icon{width:29px;height:29px}.message-icon{width:37px;height:37px;padding:7px}.users-icon{width:25px;height:25px}}