html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: #050504; }
#game { display: block; width: 100vw; height: 100vh; background: #000; image-rendering: pixelated; }

.frontScreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 82px 18px 22px;
  overflow: auto;
  isolation: isolate;
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.56)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 50% 28%, rgba(124,42,24,.19), transparent 35%),
    linear-gradient(180deg, #1b1a15, #090908 62%, #020202);
}
.frontScreen[hidden] { display: none !important; }
.frontPanel { position: relative; z-index: 2; width: min(980px, 100%); }
.frontLogo { display: block; width: min(720px, 90vw); height: auto; margin: 0 auto 14px; object-fit: contain; filter: drop-shadow(5px 6px 0 rgba(0,0,0,.75)); }
.frontMascot { position: fixed; left: 0; top: 0; z-index: 1; width: 85px; height: 88px; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 7px 4px rgba(0,0,0,.75)); opacity: .92; will-change: transform; }
.frontMascotShadow { position: fixed; z-index: 0; width: 64px; height: 15px; border-radius: 50%; pointer-events: none; background: rgba(0,0,0,.56); filter: blur(2px); will-change: transform; }

.window {
  border: 3px solid #6c675e;
  border-right-color: #151411;
  border-bottom-color: #151411;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px), linear-gradient(#24231f, #0d0d0c 70%);
  box-shadow: inset 0 0 0 2px #050505, 7px 7px 0 rgba(0,0,0,.78), 0 20px 55px rgba(0,0,0,.55);
  padding: 16px;
}
.windowHeader { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -16px -16px 14px; padding: 11px 13px; border-bottom: 3px solid #090909; background: linear-gradient(90deg,#9d2d1d,#4f130c 44%,#25221c); box-shadow: inset 0 -2px 0 #5b554c; }
.window h1 {
  margin: 0;
  color: #e8dfcf;
  font-family: Tahoma, Arial, sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #000;
  text-transform: none;
}
.statusText {
  min-height: 18px;
  color: #c8b58f;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}


.errorText { color: var(--doom-danger); }

.serverIntro { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 10px 11px; border: 2px solid #3f3c36; background: rgba(4,4,4,.72); }
.serverIntro p { margin: 0; color: #bbb3a6; font-size: 13px; line-height: 1.45; }
.serverIntro strong { color: #ffe284; font-family: var(--doom-mono); }

#serverTableWrap { border: 2px solid #4f4b43; background: #060605; overflow: auto; min-height: 265px; max-height: 48vh; }
#serverTable { width: 100%; border-collapse: collapse; table-layout: fixed; }
#serverTable th, #serverTable td { padding: 10px 9px; border-bottom: 1px solid #302d28; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#serverTable th { color: var(--doom-gold); background: #2b2924; font: 900 11px var(--doom-mono); letter-spacing: .04em; text-transform: uppercase; }
#serverTable tbody tr { cursor: default; }
#serverTable tbody tr:hover { background: rgba(153,50,29,.16); }
#serverTable tbody tr.selected { background: rgba(172,54,31,.28); outline: 2px solid #a84a31; outline-offset: -2px; }
#serverTable .serverName { color: #f3ead8; font-weight: 700; }
#serverTable .offline { color: #777269; }
.col-name { width: 45%; } .col-region { width: 20%; } .col-players { width: 17%; } .col-ping { width: 18%; }
.buttonRow { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.accountRow { display: flex; justify-content: space-between; align-items: center; gap: 13px; margin-top: 14px; padding: 12px; border: 2px solid #3f3c36; background: #090908; font-size: 12px; }
.accountLinks { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.textLink { display: inline-flex; min-height: 34px; align-items: center; padding: 5px 9px; border: 1px solid #565147; color: #e6c66b; font: 900 11px var(--doom-mono); text-decoration: none; text-transform: uppercase; }
.textLink:hover { border-color: var(--doom-gold); color: #fff0aa; }

#joinScreen .frontPanel { width: min(620px, 100%); }
#joinScreen .window { width: min(450px, 100%); margin: 0 auto; }
#assetLoadingPanel, #usernamePanel { text-align: center; }
#assetLoadingBar { height: 14px; padding: 2px; background: #020202; border: 2px solid #625c50; margin: 16px 0 10px; }
#assetLoadingFill { width: 0; height: 100%; background: repeating-linear-gradient(90deg,#9f2e1d 0 10px,#c14b2f 10px 17px); transition: width .12s linear; }
#serverJoinName { margin: 0 0 8px; color: #c2b8a8; font: 12px var(--doom-mono); }
#usernameInput { height: 48px; background: #e9e1d2; color: #151410; border: 3px solid #6d675c; }
#joinBtn { width: 100%; height: 48px; margin-top: 10px; }
#joinError { min-height: 20px; margin: 9px 0 0; color: var(--doom-danger); font: 12px var(--doom-mono); }

@media (max-width: 760px) {
  .frontScreen { padding: 106px 9px 16px; align-items: flex-start; }
  .frontLogo { width: min(440px, 87vw); margin-bottom: 10px; }
  .window { padding: 12px; }
  .windowHeader { margin: -12px -12px 12px; }
  .serverIntro { align-items: flex-start; flex-direction: column; }
  #serverTableWrap { min-height: 220px; }
  #serverTable th, #serverTable td { padding: 8px 6px; font-size: 11px; }
  .accountRow { align-items: flex-start; flex-direction: column; }
  .frontMascot { opacity: .72; }
}
@media (max-width: 520px) {
  .col-region { width: 20%; } .col-players { width: 22%; } .col-ping { width: 16%; }
  .accountLinks, .accountLinks .textLink { width: 100%; }
  .textLink { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .frontMascot, .frontMascotShadow { display: none; } }