/* 2003 Flash client — original chrome with live panel holes. Stage is 1024×768. */
html,
body {
  margin: 0;
  height: 100%;
  background: #05060a;
  color: #111;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  overflow: hidden;
  user-select: none;
}

button,
input,
select,
textarea {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
}

#stage {
  position: relative;
  width: 1024px;
  height: 768px;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
}
.screen.active {
  display: block;
}

/* ---- sign-in: original Flash splash (frame 2) ---- */
#screen-signin {
  background: #000 url("../assets/flash/screens/splash.png") 0 0 no-repeat;
}
#screen-signin.signing {
  background-image: url("../assets/flash/screens/signin.png");
}
#screen-signin.joining {
  background-image: url("../assets/flash/screens/signup.png");
}
#screen-signin.credits-open {
  background-image: url("../assets/flash/screens/credits-dialog.png");
}
#screen-signin:not(.signing):not(.joining):not(.credits-open)::after {
  content: "";
  position: absolute;
  left: 700px;
  top: 0;
  width: 324px;
  height: 120px;
  background: #000;
  z-index: 6;
  pointer-events: none;
}

.signin-plate {
  display: none;
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 5;
}
#screen-signin.signing .signin-plate,
#screen-signin.joining .signin-plate {
  display: block;
}
#hit-newuser {
  display: none;
  left: 758px;
  top: 380px;
  width: 150px;
  height: 16px;
}
#screen-signin.signing:not(.joining) #hit-newuser {
  display: block;
}

/* 2-field login plate from the original 2003 walk shot */
.signin-plate input {
  position: absolute;
  left: 834px;
  width: 142px;
  height: 14px;
  box-sizing: border-box;
  border: 0 !important;
  outline: none;
  padding: 0 2px;
  margin: 0;
  background: #fff;
  color: #111;
  font-size: 11px;
  line-height: 14px;
  box-shadow: none !important;
}
#user {
  top: 339px;
}
#pass {
  top: 357px;
}
#pass2,
#email,
#hit-cancel-signin {
  display: none;
}
#hit-submit-signin {
  left: 918px;
  top: 376px;
  width: 80px;
  height: 18px;
}

/* 4-field join dialog */
#screen-signin.joining #user,
#screen-signin.joining #pass,
#screen-signin.joining #pass2,
#screen-signin.joining #email {
  display: block;
  left: 785px;
  width: 133px;
}
#screen-signin.joining #user {
  top: 303px;
  height: 15px;
}
#screen-signin.joining #pass {
  top: 321px;
}
#screen-signin.joining #pass2 {
  top: 338px;
}
#screen-signin.joining #email {
  top: 356px;
}
#screen-signin.joining #hit-cancel-signin {
  display: block;
  left: 678px;
  top: 378px;
  width: 52px;
  height: 16px;
}
#screen-signin.joining #hit-submit-signin {
  left: 850px;
  top: 372px;
  width: 62px;
  height: 18px;
}

.credits-card {
  display: none;
  position: absolute;
  left: 48px;
  top: 168px;
  width: 520px;
  min-height: 280px;
  box-sizing: border-box;
  padding: 28px 36px 16px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #111;
  z-index: 12;
}
.credits-card.open {
  display: block;
}
.credits-card h3 {
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: 0.14em;
  font-size: 13px;
}
.credits-card .ov-close {
  color: #222;
}

/* ---- invisible hit targets over screenshot labels ---- */
.hit {
  position: absolute;
  z-index: 8;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent !important;
  color: transparent !important;
  font-size: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

.hit-game {
  display: none;
}
#screen-app.page-games .hit-game {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f2f2f2 0%, #c8c8c8 48%, #9a9a9a 100%) !important;
  color: #111 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid #303030 !important;
}
#btn-create {
  display: none !important;
}

/* games chrome still has DROP/DEFAULTS/PLAY; hide that strip on other pages */
/* ---- app shell: original Flash frames from JPEXS ---- */
#screen-app {
  background: #000 url("../assets/flash/screens/lobby.png") 0 0 no-repeat;
  color: #111;
}
#screen-app.page-account {
  background-image: url("../assets/flash/screens/account.png");
}
#screen-app.page-bios {
  background-image: url("../assets/flash/screens/bios.png");
}
#screen-app.page-messages {
  background-image: url("../assets/flash/screens/messages.png");
}
#screen-app.page-news,
#screen-app.page-teams {
  background-image: url("../assets/flash/screens/news.png");
}
#screen-app.page-guides,
#screen-app.page-rules {
  background-image: url("../assets/flash/screens/guides.png");
}
#screen-app.page-games {
  background-image: url("../assets/flash/screens/games.png");
}
#screen-app.page-games.creating.step-1 {
  background-image: url("../assets/flash/screens/create-step1.png?v=3");
}
#screen-app.page-games.creating.step-2 {
  background-image: url("../assets/flash/screens/create-step2.png?v=3");
}
#screen-app.page-games.creating.step-3 {
  background-image: url("../assets/flash/screens/create-step3.png?v=3");
}
#screen-app.page-games.creating.step-4 {
  background-image: url("../assets/flash/screens/create-step4.png?v=3");
}
#screen-app.page-games.creating.step-5 {
  background-image: url("../assets/flash/screens/create-step5.png?v=3");
}
#screen-app.page-games.creating .hit-game {
  display: none !important;
}

.app-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.app-body > * {
  pointer-events: auto;
}

.hole {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  color: #111;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  box-sizing: border-box;
}

.hole::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
.hole::-webkit-scrollbar-track {
  background: #c4c4bc;
  border-left: 1px solid #8a8a82;
}
.hole::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d8d8d0, #9a9a92);
  border: 1px solid #eee;
  box-shadow: inset 1px 1px 0 #fff;
}
.hole::-webkit-scrollbar-button {
  height: 16px;
  background: #b8b8b0;
  border: 1px solid #888;
}

/* interiors only — below titles, inside bezels (not 0,0 of the panel) */
.hole-sys {
  left: 30px;
  top: 168px;
  width: 188px;
  height: 230px;
  background: transparent;
  padding: 2px 8px 4px 10px;
}
.hole-score {
  left: 422px;
  top: 192px;
  width: 188px;
  height: 228px;
  background: transparent;
  padding: 4px 8px 4px 10px;
  color: #111;
}
.hole-newg {
  left: 228px;
  top: 552px;
  width: 268px;
  height: 132px;
  background: transparent;
  padding: 4px 8px 2px 10px;
}
.hole-news {
  left: 678px;
  top: 312px;
  width: 292px;
  height: 400px;
  background: transparent;
  padding: 4px 10px;
}

.hole-gfilter {
  left: 22px;
  top: 152px;
  width: 228px;
  height: 100px;
  background: transparent;
  padding: 6px 8px;
}
.hole-glist {
  left: 22px;
  top: 304px;
  width: 228px;
  height: 400px;
  background: transparent;
  padding: 8px 8px 6px;
}
.hole-gleft,
.hole-list {
  left: 22px;
  top: 150px;
  width: 228px;
  height: 548px;
  background: transparent;
  padding: 6px 8px;
}
/* main well chamfer: inner fill starts ~399px at the top, ~344px lower down */
.hole-gmain {
  left: 378px;
  top: 152px;
  width: 598px;
  height: 545px;
  background: transparent;
  padding: 8px 12px 8px 10px;
}

/* account / bios 4-cell tray — values only where Flash already painted labels */
.hole-info {
  left: 428px;
  top: 156px;
  width: 120px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 14px;
}
.hole-info div {
  height: 14px;
  line-height: 14px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hole-info-bios {
  left: 360px;
  top: 186px;
  width: 350px;
  height: 196px;
  padding: 0 8px;
  line-height: 1.35;
  overflow: hidden;
}
.hole-info-bios p {
  margin: 0 0 8px;
}
.hole-desc {
  left: 556px;
  top: 186px;
  width: 154px;
  height: 198px;
  padding: 2px 4px;
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  resize: none;
  outline: none;
  color: #111;
  line-height: 1.35;
}
.hole-wrap {
  left: 772px;
  top: 186px;
  width: 210px;
  height: 196px;
  padding: 4px 8px;
}
.hole-hist {
  left: 360px;
  top: 498px;
  width: 396px;
  height: 210px;
  padding: 4px 8px;
}
.hole-medals {
  left: 816px;
  top: 512px;
  width: 168px;
  height: 196px;
  padding: 4px 6px;
}

.note {
  margin: 0 0 10px;
}
.note strong {
  display: block;
}

.list-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #9a9a92;
  padding: 4px 4px;
  cursor: pointer;
  color: inherit;
}
.hole-newg .list-btn {
  padding: 3px 2px;
  border-bottom: 0;
}
.list-btn:hover,
.list-btn.active {
  background: #9aa8ff;
}
.list-btn .blue {
  color: #2200cc;
  font-weight: 700;
}

.filter-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1px 4px;
  cursor: pointer;
  color: #111;
}
.filter-btn.active {
  font-weight: 700;
  text-decoration: underline;
}

.gmain {
  display: grid;
  grid-template-columns: 1fr 228px;
  gap: 6px 14px;
  min-height: 100%;
}
.gmain h2.title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #111;
}
.gmain-left .row {
  margin: 2px 0;
}
.gmain-left b {
  font-weight: 700;
}
.races-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 12px;
  margin: 4px 0 8px;
}
.gbox {
  background: transparent;
  border: 1px solid #7a7a72;
  box-shadow: none;
  padding: 6px 8px;
  margin: 0 0 8px;
}
#screen-app.page-games .gmain {
  grid-template-columns: 1fr 248px;
}
.gbox h3 {
  margin: 0 0 4px;
  font-size: 11px;
}
.hw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
.days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  font-size: 11px;
}
.days .col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.days label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.players {
  margin-top: 6px;
}
.players .head {
  font-weight: 700;
  display: grid;
  grid-template-columns: 1fr 110px 56px;
}
.players .p {
  display: grid;
  grid-template-columns: 1fr 110px 56px;
}
.players .blue {
  color: #2200cc;
}

.page-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.page-copy h2,
.hole-gmain > h2,
.hole-gfilter h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 3px 10px;
  margin: 0 0 10px;
}
.kv b {
  font-weight: 700;
}
.rank-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 10px;
}
.rank-row img {
  width: auto;
  height: 36px;
  image-rendering: pixelated;
}
.medal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.medal-row img {
  width: 100px;
  height: 30px;
  image-rendering: pixelated;
}
.hole-list .list-btn,
.hole-gleft .list-btn,
.hole-glist .list-btn {
  width: 100%;
}

/* ---- turn download ---- */
#screen-loading {
  background: #000 url("../assets/flash/screens/loading.png") 0 0 no-repeat;
}
#screen-loading.active {
  display: block;
}
.load-ready {
  left: 114px;
  top: 52px;
  width: 855px;
  height: 500px;
  color: transparent !important;
  background: transparent;
  pointer-events: auto;
}
#screen-loading:not(.ready) .load-ready {
  pointer-events: none;
}

/* ---- CIC: original map chrome ---- */
#screen-cic {
  background: #000 url("../assets/flash/screens/cic.png") 0 0 no-repeat;
}

.coords {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 72px;
  height: 32px;
  color: #fff;
  font-size: 10px;
  line-height: 1.25;
  z-index: 5;
  pointer-events: none;
  background: transparent;
  box-sizing: border-box;
  padding: 2px 4px;
}

#map {
  position: absolute;
  left: 114px;
  top: 52px;
  width: 855px;
  height: 500px;
  display: block;
  cursor: crosshair;
  background: #000;
  z-index: 3;
}

.zoom-slider {
  position: absolute;
  right: 4px;
  top: 300px;
  width: 28px;
  height: 220px;
  writing-mode: vertical-lr;
  direction: rtl;
  z-index: 6;
  appearance: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}
.zoom-slider::-webkit-slider-runnable-track {
  width: 4px;
  background: #555;
}
.zoom-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, #efe6b0, #c4a84a);
  border: 1px solid #864;
  transform: rotate(45deg);
}

.shiplist {
  position: absolute;
  left: 22px;
  top: 580px;
  width: 248px;
  height: 164px;
  overflow: auto;
  background: transparent;
  color: #111;
  z-index: 5;
}
.shiplist table {
  width: 100%;
  border-collapse: collapse;
}
.shiplist th {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #666;
  background: transparent;
}
.shiplist td {
  padding: 3px 6px;
  cursor: pointer;
}
.shiplist tr.sel td {
  background: #9aa8ff;
}

.cic-status {
  position: absolute;
  left: 292px;
  top: 662px;
  width: 670px;
  height: 92px;
  background: transparent;
  color: #111;
  z-index: 5;
  box-sizing: border-box;
  padding: 6px 10px 2px;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 1px 12px;
  font-size: 11px;
}

.status-actions {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.speed {
  flex: 1;
  height: 14px;
  appearance: none;
  background: linear-gradient(180deg, #163, #4d4);
  border: 1px solid #141;
}
.speed::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 16px;
  background: #cfc;
  border: 1px solid #141;
}

.ghost-btn {
  background: transparent;
  border: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: #111;
  padding: 0 4px;
}

.metal-btn {
  min-width: 76px;
  height: 22px;
  background: linear-gradient(180deg, #f2f2f2 0%, #c8c8c8 48%, #9a9a9a 100%);
  border: 1px solid #303030;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #666;
  padding: 0 10px;
  cursor: pointer;
  color: #111;
}
.metal-btn:active {
  box-shadow: inset 1px 1px 0 #666, inset -1px -1px 0 #ddd;
  background: #b0b0b0;
}

input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #111;
}

textarea,
input[type="text"],
input[type="password"] {
  background: #fff;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #808080;
}

/* overlays */
.overlay {
  display: none;
  position: absolute;
  z-index: 10;
}
.overlay.open {
  display: block;
}

.planet-win {
  left: 124px;
  top: 68px;
  width: 775px;
  height: 508px;
  background:
    url("../assets/saturn.jpg") 430px 48px / auto 400px no-repeat,
    url("../assets/flash/pieces/planet-win.png") 0 0 no-repeat;
  border: 0;
  box-shadow: 8px 8px 18px #000;
  color: #eee;
  box-sizing: border-box;
}

.ov-close {
  position: absolute;
  right: 14px;
  top: 8px;
  background: transparent;
  border: 0;
  color: #ddd;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  z-index: 2;
}

.planet-win .ov-body {
  padding: 0;
}
.pv-vals {
  position: absolute;
  left: 272px;
  top: 36px;
  width: 140px;
  font-size: 11px;
  text-shadow: 0 1px 2px #000;
}
.pv-vals div {
  height: 17px;
  line-height: 17px;
  white-space: nowrap;
}

.ship-win {
  left: 114px;
  top: 52px;
  width: 855px;
  height: 500px;
  background: #000 url("../assets/flash/pieces/ship-well.png") 0 0 no-repeat;
  border: 0;
  box-shadow: none;
  color: #ddd;
  overflow: hidden;
}
.ship-win .speed {
  opacity: 0;
}
#screen-cic.ship-open #map {
  pointer-events: auto;
}
#close-cic {
  z-index: 12;
}
.app-extra {
  position: absolute;
  z-index: 8;
  background: transparent;
  border: 0;
  color: #c8c8c0;
  letter-spacing: 0.14em;
  font-size: 10px;
  cursor: pointer;
}
.app-extra:hover {
  color: #fff;
}
.nav-toggle {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px 6px;
  color: #123;
}
#left-well.mode-nav .nav-toggle,
#left-well.mode-pick .nav-toggle {
  display: none;
}
.ship-close {
  position: absolute;
  right: 18px;
  top: 6px;
  background: transparent;
  border: 0;
  color: #ddd;
  letter-spacing: 0.12em;
  font-weight: 700;
  cursor: pointer;
  z-index: 4;
}
.ship-body {
  display: grid;
  grid-template-columns: 250px 1fr;
  height: 100%;
}
.ship-col {
  padding: 22px 10px 4px 14px;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
}
.ship-class {
  font-weight: 700;
  margin: 8px 0 2px;
  color: #eee;
}
.ship-blurb {
  color: #ccc;
  margin: 0 0 4px;
  max-width: 230px;
  max-height: 70px;
  overflow: hidden;
}
.gold {
  color: #e0c040;
}
.ship-stats {
  color: #ccc;
  margin: 8px 0;
}
.cargo-label {
  display: block;
  width: 119px;
  height: 41px;
  margin: 8px 0 4px;
  background: url("../assets/flash/pieces/cargo-title.jpg") 0 0 no-repeat;
  color: transparent;
  overflow: hidden;
}
.standing {
  margin-top: 10px;
  padding: 14px 4px 4px;
  width: 119px;
  height: 71px;
  box-sizing: border-box;
  background: url("../assets/flash/pieces/ship-order-tabs.png") 0 0 no-repeat;
  color: transparent;
  line-height: 1.2;
}
.standing button {
  display: block;
  width: 100%;
  height: 14px;
  background: transparent;
  border: 0;
  color: transparent;
  text-align: left;
  cursor: pointer;
  padding: 0 6px;
}
.standing button:hover,
.standing button.on {
  background: #808080;
}
.ship-speed-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ship-stage {
  position: relative;
}
.hull-svg {
  position: absolute;
  left: 20px;
  top: 36px;
  width: 420px;
  height: 340px;
}
.ship-panel {
  position: absolute;
  left: 8px;
  top: 40px;
  width: 210px;
  max-height: 360px;
  overflow: auto;
  background: #6e6e6e;
  color: #111;
  padding: 8px;
  z-index: 3;
  border: 1px solid #333;
}
.ship-panel h4 {
  margin: 0 0 6px;
  letter-spacing: 0.08em;
}
.ship-panel label,
.ship-panel button.tgt {
  display: block;
  margin: 3px 0;
  text-align: left;
}
.ship-apply {
  position: absolute;
  right: 228px;
  bottom: 10px;
  display: flex;
  gap: 12px;
}
.ship-apply button {
  background: transparent;
  border: 0;
  color: #ccc;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.cargo-wrap {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 210px;
  height: 248px;
  background: linear-gradient(180deg, #8a8a82, #5a5a56);
  border: 2px solid #4a4a46;
  padding: 6px 18px 6px 6px;
  box-sizing: border-box;
}
.cargo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.cell {
  width: 28px;
  height: 22px;
  background: #163016;
  border: 1px solid #2a4a2a;
}
.cell.ico {
  background: #2a6a2a;
}
.cell.gun-blue { background: #245a9a; }
.cell.gun-red { background: #7a2020; }
.cell.crew { background: #1a3a8a; }

.bars {
  margin: 0 0 8px;
}
.bar {
  height: 8px;
  margin: 3px 0;
  background: #222;
  border: 1px solid #444;
}
.bar > span {
  display: block;
  height: 100%;
}
.bar.shield > span {
  background: #36f;
}
.bar.hull > span {
  background: #a33;
}
.bar.fuel > span {
  background: #838;
}

.nav-well,
.pick-well {
  display: none;
  padding: 6px 8px;
  color: #111;
  font-size: 11px;
}
#left-well.mode-nav .nav-well,
#left-well.mode-pick .pick-well {
  display: block;
}
#left-well.mode-nav #list-ships,
#left-well.mode-pick #list-ships {
  display: none;
}
.nav-title {
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.nav-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #123;
  cursor: pointer;
  padding: 2px 0;
}
.nav-link:hover,
.nav-link.on {
  text-decoration: underline;
}
.nav-coords {
  margin: 6px 0;
}
.nav-coords input {
  width: 42px;
  margin-right: 4px;
}
.nav-hint {
  font-size: 10px;
  margin-top: 8px;
}
.pick-well button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 3px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pick-well button:hover {
  background: #9aa8ff;
}

.diplo-win {
  left: 88px;
  top: 88px;
  width: 848px;
  height: 508px;
  background: url("../assets/flash/pieces/diplo-win.jpg") 0 0 no-repeat;
  border: 0;
  box-shadow: 8px 8px 18px #000;
  color: #111;
  z-index: 18;
}
.diplo-list {
  position: absolute;
  left: 78px;
  top: 36px;
  width: 230px;
  height: 150px;
  overflow: auto;
}
.diplo-list button {
  display: block;
  width: 100%;
  height: 36px;
  text-align: left;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
}

.chat-win {
  left: 140px;
  top: 190px;
  width: 745px;
  height: 382px;
  background: url("../assets/flash/pieces/chat.png") 0 0 no-repeat;
  z-index: 20;
  color: #111;
}
.chat-x {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 90px;
  height: 22px;
  background: transparent;
  border: 0;
  color: transparent;
  cursor: pointer;
}
.chat-tabs {
  position: absolute;
  left: 10px;
  top: 34px;
  display: flex;
  gap: 2px;
}
.chat-tab {
  background: transparent;
  border: 0;
  color: transparent;
  padding: 4px 18px;
  cursor: pointer;
}
.chat-side {
  position: absolute;
  left: 8px;
  top: 78px;
  width: 150px;
  height: 228px;
  overflow: auto;
  font-size: 11px;
}
.chat-side button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
}
.chat-presence {
  position: absolute;
  left: 168px;
  top: 36px;
  width: 400px;
  height: 48px;
  overflow: auto;
  font-size: 11px;
  color: #a20;
}
.chat-log {
  position: absolute;
  left: 168px;
  top: 90px;
  width: 400px;
  height: 168px;
  overflow: auto;
  font-size: 11px;
}
.chat-people {
  position: absolute;
  right: 10px;
  top: 36px;
  width: 150px;
  height: 270px;
  overflow: auto;
  font-size: 11px;
}
.chat-form {
  position: absolute;
  left: 168px;
  top: 262px;
  width: 400px;
}
.chat-form input {
  width: 100%;
  box-sizing: border-box;
}
.chat-ticker {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
}

.wizard-hits {
  left: 0;
  top: 0;
  width: 1024px;
  height: 768px;
  background: transparent;
  overflow: hidden;
}
.wizard-hits .hit,
.wizard-hits .wiz-field,
.wizard-hits .wiz-val {
  position: absolute;
  z-index: 6;
}
.wiz-field {
  font-size: 11px;
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
}
.wiz-val {
  color: #111;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.wiz-s4 select,
.wiz-s3 select {
  font-size: 11px;
}

body.debug-holes .hole {
  outline: 2px solid #f00;
}
body.debug-hits .hit {
  outline: 1px solid rgba(255, 40, 40, 0.9);
  background: rgba(255, 0, 0, 0.18);
  color: #ff0;
  font-size: 9px;
}