html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03050a;
  color: #fff;
  font-family: Inter, Segoe UI, Arial, Helvetica, sans-serif;
  user-select: none;
}

#renderCanvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}

#loading {
  position: fixed;
  left: 16px;
  top: 86px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  z-index: 8;
}

#hud {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 14px;
  height: 70px;
  z-index: 5;
  pointer-events: none;
}

.brand {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 32px;
  font-weight: 900;
  text-shadow: 0 3px 14px rgba(0,0,0,.75);
}

.brand span { color: #ff5b4f; }
.brand b { font-size: 14px; color: #f2c56b; }

#centerHud {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 0 0 18px 18px;
  background: rgba(5,8,14,.62);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
}

#roomBadge {
  white-space: nowrap;
  color: rgba(255,255,255,.86);
}

#inviteBtn,
#inviteBtnStart {
  border: 0;
  border-radius: 12px;
  padding: 10px 13px;
  background: linear-gradient(135deg, #ff5b4f, #f3ba63);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .35px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255,91,79,.18);
}

#inviteBtn:hover,
#inviteBtnStart:hover,
#startBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#inviteToast {
  position: fixed;
  left: 50%;
  top: 88px;
  transform: translateX(-50%) translateY(-8px);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(5,8,14,.78);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 54px rgba(0,0,0,.32);
  transition: opacity .18s ease, transform .18s ease;
}

#inviteToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#scoreboard {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 230px;
  padding: 10px 12px;
  background: rgba(5,8,14,.58);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  font-size: 12px;
}

.scoreRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
}

#crosshair {
  position: fixed;
  left: calc(50% - 14px);
  top: calc(50% - 14px);
  width: 28px;
  height: 28px;
  z-index: 6;
  pointer-events: none;
}

#crosshair:before,
#crosshair:after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 8px rgba(255,255,255,.35);
}

#crosshair:before {
  left: 13px;
  top: 4px;
  width: 2px;
  height: 20px;
}

#crosshair:after {
  top: 13px;
  left: 4px;
  height: 2px;
  width: 20px;
}

#crosshair.hit:before,
#crosshair.hit:after {
  background: rgba(255, 70, 60, .98);
  box-shadow: 0 0 13px rgba(255, 70, 60, .75);
}

#bottomHud {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  z-index: 5;
  pointer-events: none;
}

.hp {
  min-width: 310px;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 3px 12px rgba(0,0,0,.8);
}

.hp i {
  display: block;
  width: 100%;
  height: 14px;
  margin-top: 6px;
  border-radius: 20px;
  background: linear-gradient(90deg, #5df06c, #d2f36e);
  box-shadow: 0 0 18px rgba(93,240,108,.25);
}

.ammo {
  padding: 13px 18px;
  min-width: 130px;
  border-radius: 14px;
  background: rgba(5,8,14,.62);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 22px;
  font-weight: 800;
  text-align: right;
}

.ammo strong { font-size: 38px; }

#startPanel {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 15px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(68,156,255,.28), transparent 26%),
    radial-gradient(circle at 18% 18%, rgba(255,91,79,.18), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(243,186,99,.13), transparent 28%),
    linear-gradient(145deg, #02040a 0%, #07111f 45%, #03050a 100%);
  isolation: isolate;
}

#startPanel::before {
  content: "";
  position: absolute;
  inset: -24%;
  z-index: -3;
  background:
    conic-gradient(from 110deg at 50% 42%, transparent 0 12%, rgba(53,154,255,.10) 15%, transparent 23%, rgba(255,91,79,.08) 31%, transparent 42%, rgba(243,186,99,.08) 58%, transparent 72%, rgba(53,154,255,.09) 84%, transparent 100%),
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.09), transparent 16%);
  filter: blur(.2px);
  animation: doaPremiumOrbit 24s linear infinite;
}

#startPanel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.045) 50%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.50));
  opacity: .48;
  animation: doaScanMove 9s ease-in-out infinite alternate;
}

@keyframes doaPremiumOrbit {
  from { transform: rotate(0deg) scale(1.02); }
  to { transform: rotate(360deg) scale(1.02); }
}

@keyframes doaScanMove {
  from { background-position: -220px 0, 0 0, 0 0; }
  to { background-position: 220px 0, 0 24px, 0 0; }
}


.splashArenaGlow {
  position: absolute;
  left: 50%;
  top: 51%;
  width: min(1180px, 106vw);
  height: min(760px, 86vh);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(53,154,255,.18), transparent 34%),
    linear-gradient(115deg, transparent 0 28%, rgba(255,91,79,.10) 38%, transparent 50%),
    linear-gradient(245deg, transparent 0 30%, rgba(243,186,99,.10) 41%, transparent 55%);
  filter: blur(.2px);
  opacity: .92;
  animation: doaArenaBreath 5.6s ease-in-out infinite alternate;
}

.splashArenaGlow::before,
.splashArenaGlow::after {
  content: "";
  position: absolute;
  inset: 15% 4%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 0 55px rgba(53,154,255,.10), 0 0 70px rgba(0,0,0,.25);
  transform: perspective(820px) rotateX(62deg);
}

.splashArenaGlow::after {
  inset: 30% 18%;
  border-color: rgba(255,190,112,.13);
  box-shadow: inset 0 0 36px rgba(255,91,79,.08);
}

.splashSymbol {
  position: absolute;
  z-index: -1;
  color: rgba(255,255,255,.055);
  font-weight: 1000;
  pointer-events: none;
  text-shadow: 0 0 30px rgba(53,154,255,.10);
  animation: doaFloatSymbol 7s ease-in-out infinite alternate;
}

.splashSymbolOne { left: 10vw; top: 18vh; font-size: 112px; color: rgba(255,91,79,.075); }
.splashSymbolTwo { right: 11vw; top: 24vh; font-size: 92px; color: rgba(53,154,255,.080); animation-delay: -1.4s; }
.splashSymbolThree { right: 17vw; bottom: 16vh; font-size: 118px; color: rgba(243,186,99,.070); animation-delay: -2.2s; }

@keyframes doaArenaBreath {
  from { opacity: .70; transform: translate(-50%, -50%) scale(.985); }
  to { opacity: .98; transform: translate(-50%, -50%) scale(1.015); }
}

@keyframes doaFloatSymbol {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { transform: translate3d(14px, -18px, 0) rotate(5deg); }
}

.startLogoLockup {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px 6px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.startLogoLockup::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(430px, 60vw);
  height: min(430px, 60vw);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.16), transparent 26%),
    radial-gradient(circle, rgba(53,154,255,.18), transparent 52%);
  filter: blur(10px);
  opacity: .86;
  z-index: -1;
  animation: doaLogoPulse 3.8s ease-in-out infinite alternate;
}

.startLogoLockup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: min(560px, 78vw);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,91,79,.38), rgba(255,255,255,.50), rgba(53,154,255,.60), transparent);
  box-shadow: 0 0 30px rgba(53,154,255,.34);
  opacity: .78;
}

@keyframes doaLogoPulse {
  from { opacity: .56; transform: translate(-50%, -50%) scale(.98); }
  to { opacity: .94; transform: translate(-50%, -50%) scale(1.04); }
}

.startLogoLockup > img {
  width: clamp(150px, 17vw, 235px);
  height: clamp(160px, 18vw, 250px);
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  filter: drop-shadow(0 0 16px rgba(255,255,255,.22)) drop-shadow(0 22px 48px rgba(0,0,0,.78));
}

#startPanel h1 {
  margin: 0;
  font-size: clamp(50px, 7vw, 88px);
  letter-spacing: -3px;
  line-height: .84;
  font-weight: 1000;
  text-transform: none;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 36%, #b4c2d8 78%, #7b8799 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 14px 36px rgba(0,0,0,.72);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.12));
}

#startPanel h1::first-letter {
  color: #ff5b4f;
  -webkit-text-fill-color: #ff5b4f;
}

#startPanel h1::after {
  content: "";
  display: block;
  width: 72%;
  height: 1px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent);
  box-shadow: 0 0 20px rgba(255,255,255,.22);
}

#startPanel small.startHints {
  display: none !important;
}

#startPanel .welcomeCopy {
  display: block !important;
  max-width: 710px;
  margin: 8px auto 0;
  padding: 0 22px;
  border-radius: 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(15px, 1.48vw, 18px);
  line-height: 1.52;
  font-weight: 720;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 4px 18px rgba(0,0,0,.72);
}

#startPanel .welcomeCopy strong {
  display: block;
  color: #fff;
  font-size: clamp(22px, 2.45vw, 32px);
  line-height: 1.05;
  letter-spacing: -.6px;
  margin-bottom: 8px;
}

#startPanel .welcomeCopy b {
  color: #ffbe70;
  text-shadow: 0 0 18px rgba(255,184,107,.26);
}

#doabaseCredit {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 24;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 12px;
  border-radius: 20px;
  text-decoration: none;
  background: linear-gradient(145deg, rgba(2,4,8,.50), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 52px rgba(0,0,0,.36);
  backdrop-filter: blur(7px);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

#doabaseCredit:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: rgba(80,160,255,.34);
}

#doabaseCredit span {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 850;
}

#doabaseCredit img {
  width: 148px;
  height: auto;
  max-height: 118px;
  object-fit: contain;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

#startBtn {
  border: 0;
  border-radius: 999px;
  padding: 16px 34px;
  background: linear-gradient(135deg, #ff5b4f 0%, #ff8a5f 42%, #f3ba63 100%);
  color: white;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
  letter-spacing: .25px;
  box-shadow: 0 18px 50px rgba(255,91,79,.26), 0 0 0 1px rgba(255,255,255,.10) inset;
}

#infoPanel {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,91,79,.24), transparent 30%),
    radial-gradient(circle at 78% 34%, rgba(243,186,99,.18), transparent 32%),
    rgba(3,5,10,.86);
  backdrop-filter: blur(7px);
}
#infoPanel.active { display: grid; }
.infoBox {
  width: min(760px, calc(100vw - 42px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(10,14,23,.96), rgba(29,18,18,.96));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
  text-align: left;
}
.infoKicker {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,91,79,.14);
  border: 1px solid rgba(255,91,79,.28);
  color: #ffd4cf;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .55px;
  text-transform: uppercase;
}
.infoBox h2 {
  margin: 14px 0 10px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.02;
  letter-spacing: -1.4px;
}
.infoBox p {
  margin: 10px 0;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.55;
}
.infoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}
.infoGrid div {
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.infoGrid b {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.infoGrid span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 11.5px;
  line-height: 1.32;
}
.infoNote {
  color: rgba(255,255,255,.88) !important;
  font-weight: 800;
}
#infoOkBtn {
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 18px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #ff5b4f, #f3ba63);
  color: white;
  font-size: 17px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(255,91,79,.22);
}
#infoOkBtn:hover { filter: brightness(1.08); transform: translateY(-1px); }


#settingsPanel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.46);
  backdrop-filter: blur(5px);
}
#settingsPanel.active { display: grid; }
.settingsBox {
  width: min(420px, calc(100vw - 34px));
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(10,14,23,.95), rgba(28,17,17,.95));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
}
.settingsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.settingsHeader strong { font-size: 24px; font-weight: 950; }
#settingsClose {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.settingsBox label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3px;
}
.sensitivityControl {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
}
.sensitivityControl span {
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
#mouseSensitivityRange { width: 100%; accent-color: #ff5b4f; }
.settingsDivider {
  height: 1px;
  margin: 14px 0 12px;
  background: rgba(255,255,255,.14);
}
.soundControl {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 8px 0 8px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}
.soundControl input {
  width: 42px;
  height: 22px;
  accent-color: #ff5b4f;
  cursor: pointer;
}
.soundControl b {
  justify-self: end;
  color: #fff;
  font-size: 13px;
}
.settingsValue {
  margin-top: 12px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  font-weight: 800;
}
.settingsBox small {
  display: block;
  margin-top: 14px;
  color: rgba(255,255,255,.48);
}

#damageFlash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(circle at center,
      rgba(255,0,0,0) 45%,
      rgba(255,0,0,.18) 100%);
  transition: opacity .08s linear;
}


.scoreRow.self {
  color: #f3ba63;
}

@media (max-width: 760px) {
  #hud { left: 10px; right: 10px; top: 10px; }
  .brand { font-size: 22px; }
  .brand b { display: none; }
  #centerHud { top: 42px; padding: 8px 10px; }
  #scoreboard { top: 86px; right: 0; min-width: 178px; font-size: 11px; }
  .hp { min-width: 190px; font-size: 20px; }
  .ammo strong { font-size: 30px; }
  #startPanel > img { width: 124px; height: 124px; }
  #doabaseCredit { right: 14px; bottom: 14px; padding: 8px 9px 9px; }
  #doabaseCredit img { width: 108px; max-height: 84px; }
  #startPanel p { max-width: 330px; padding: 0 18px; }
}

.mapSelectBox {
  width: min(620px, calc(100vw - 38px));
  display: grid;
  gap: 10px;
  padding: 13px 15px 12px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.030));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 20px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
}
.mapSelectTitle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.mapSelectTitle span {
  color: #ffbe70;
  text-shadow: 0 0 16px rgba(255,190,112,.22);
}
.mapCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mapCard {
  cursor: pointer;
  text-align: left;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  padding: 12px 13px;
  color: #fff;
  background: linear-gradient(145deg, rgba(0,0,0,.32), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.mapCard:hover { transform: translateY(-1px); border-color: rgba(255,190,112,.42); }
.mapCard.active {
  border-color: rgba(255,190,112,.82);
  background: linear-gradient(145deg, rgba(255,91,79,.22), rgba(53,154,255,.12));
  box-shadow: 0 0 0 3px rgba(255,190,112,.10), 0 14px 38px rgba(0,0,0,.28);
}
.mapCard b { display:block; font-size: 15px; font-weight: 1000; margin-bottom: 4px; }
.mapCard span { display:block; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.72); font-weight: 750; }
.mapSelectBox small { color: rgba(255,255,255,.48); font-size: 11px; font-weight: 750; }
@media (max-width: 980px) { .mapCards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .mapCards { grid-template-columns: 1fr; } }

.nickBox {
  width: min(380px, calc(100vw - 38px));
  display: grid;
  gap: 7px;
  text-align: left;
  padding: 14px 15px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.040));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(9px);
}

.nickBox label {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
}

#nicknameInput {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  background: rgba(0,0,0,.34);
  color: #fff;
  padding: 13px 14px;
  font-size: 17px;
  font-weight: 850;
  outline: none;
}

#nicknameInput:focus {
  border-color: rgba(243,186,99,.78);
  box-shadow: 0 0 0 4px rgba(243,186,99,.14);
}

#nickError {
  min-height: 16px;
  color: #ff8379;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}


#gameNotice {
  position: fixed;
  left: 50%;
  top: 24%;
  transform: translate(-50%, -18px) scale(.96);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  padding: 16px 24px;
  min-width: 220px;
  text-align: center;
  border-radius: 18px;
  background: rgba(5, 8, 14, .78);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 70px rgba(0,0,0,.42);
  color: #fff;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: .9px;
  text-shadow: 0 3px 14px rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  transition: opacity .14s ease, transform .14s ease;
}

#gameNotice.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

#gameNotice.kill {
  color: #fff1a8;
  border-color: rgba(255, 226, 97, .42);
  box-shadow: 0 0 34px rgba(255, 210, 72, .20), 0 22px 70px rgba(0,0,0,.42);
}

#gameNotice.damage {
  color: #fff;
  border-color: rgba(255, 65, 65, .48);
  background: rgba(90, 8, 8, .70);
  box-shadow: 0 0 42px rgba(255, 52, 52, .22), 0 22px 70px rgba(0,0,0,.42);
}

#chatToggle {
  position: fixed;
  left: 18px;
  bottom: 92px;
  z-index: 26;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 11px 14px;
  background: linear-gradient(135deg, rgba(255,91,79,.94), rgba(242,181,89,.94));
  color: white;
  font-weight: 950;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,.34);
}
#chatPanel {
  position: fixed;
  left: 18px;
  bottom: 142px;
  width: min(390px, calc(100vw - 36px));
  z-index: 28;
  pointer-events: none;
  opacity: .98;
}
.chatTitle {
  display: none;
  padding: 9px 11px;
  margin-bottom: 6px;
  border-radius: 13px;
  background: rgba(5,8,14,.86);
  border: 1px solid rgba(255,255,255,.14);
  color: #ffd27a;
  font-weight: 950;
  font-size: 13px;
  backdrop-filter: blur(6px);
}
.chatTitle span { float: right; color: rgba(255,255,255,.58); font-size: 11px; font-weight: 750; }
#chatMessages {
  max-height: 178px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 4px;
  margin-bottom: 8px;
}
.chatMsg {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(5,8,14,.58);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  line-height: 1.3;
  backdrop-filter: blur(5px);
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.chatMsg b { color: #ffd27a; }
.chatMsg i { color: rgba(255,255,255,.48); font-style: normal; margin-right: 5px; }
#chatInput {
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.18);
  outline: none;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(5,8,14,.78);
  color: white;
  font-weight: 800;
  backdrop-filter: blur(6px);
}
#chatPanel.active { pointer-events: auto; }
#chatPanel.active .chatTitle { display: block; }
#chatPanel.active #chatMessages { padding: 8px; border-radius: 16px; background: rgba(5,8,14,.58); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(5px); }
#chatPanel.active #chatInput { opacity: 1; pointer-events: auto; }
.chatMsg.system { color: #fff1a8; }
#weaponText { color: #ffd27a; }



/* v0.8.4 Smooth Motion Mode: silah görseli kapalı; hareket fluluğu azaltıldı.
   v0.8.3 Clean Combat Mode: silah görseli tamamen kaldırıldı.
   Ekranda yalnızca crosshair, ateş parlaması, tracer ve sade ammo HUD görünür. */
#weaponView {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  z-index: 7;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
#weaponSprite { display: none !important; }
body.clean-combat #weaponView { display: block; }
#muzzleSprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, #ffffff 0 6%, #ffe78a 7% 22%, #ff9f1c 23% 44%, rgba(255,92,0,.32) 45% 58%, rgba(255,92,0,0) 59% 100%);
  filter: drop-shadow(0 0 14px rgba(255,194,72,.85));
  transform: translate(-50%, -50%) scale(.25) rotate(0deg);
}
#weaponView::after {
  content: "";
  position: absolute;
  left: 16px;
  top: -1px;
  width: 32vw;
  max-width: 520px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,240,160,.95), rgba(255,186,55,.55), rgba(255,255,255,0));
  box-shadow: 0 0 14px rgba(255,200,90,.7);
  transform-origin: left center;
}
#weaponView.fire #muzzleSprite { animation: cleanMuzzlePop .095s ease-out both; }
#weaponView.fire::after { animation: cleanTracer .095s ease-out both; }
#weaponView.recoil { animation: hudKick .11s ease-out both; }
body.screen-kick #renderCanvas { animation: screenKick .11s ease-out both; }
@keyframes cleanMuzzlePop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(22deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.52) rotate(48deg); }
}
@keyframes cleanTracer {
  0% { opacity: 0; transform: translate(0,0) scaleX(.15); }
  25% { opacity: .95; transform: translate(0,0) scaleX(1); }
  100% { opacity: 0; transform: translate(80px,0) scaleX(.5); }
}
@keyframes hudKick {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(calc(-50% + 4px), calc(-50% + 2px)) scale(1.02); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes screenKick {
  0% { transform: translate(0,0); }
  50% { transform: translate(-1.5px, .8px); }
  100% { transform: translate(0,0); }
}
#bottomHud .ammo {
  right: 18px;
  bottom: 18px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(5,8,14,.76);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}


/* v0.8.5 TAB istatistik paneli */
#tabStats {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.34);
  pointer-events: none;
}
#tabStats.show { display: flex; }
.tabStatsBox {
  width: min(920px, calc(100vw - 48px));
  max-height: min(72vh, 720px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(8,12,20,.92), rgba(4,6,10,.84));
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  backdrop-filter: blur(10px);
}
.tabStatsHeader {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.tabStatsHeader strong { font-size: 22px; letter-spacing:.5px; }
.tabStatsHeader span { color:rgba(255,255,255,.58); font-size:13px; font-weight:800; }
.tabRow, .tabHead {
  display:grid;
  grid-template-columns: 2fr .8fr .8fr .9fr 1.25fr;
  gap:14px;
  align-items:center;
  padding:12px 22px;
}
.tabHead {
  color:#f5c66e;
  font-size:12px;
  font-weight:950;
  letter-spacing:.5px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.tabRow {
  font-size:15px;
  font-weight:850;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tabRow.self { background:rgba(255,91,79,.13); }
.tabRow small { display:block; color:rgba(255,255,255,.52); font-size:11px; margin-top:3px; }
.hpBarMini {
  height: 10px;
  border-radius: 12px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.hpBarMini i {
  display:block;
  height:100%;
  width:100%;
  border-radius: 12px;
  background:linear-gradient(90deg,#55ef70,#d5f36b);
}
.hpBarMini.low i { background:linear-gradient(90deg,#ff4d4d,#ffb15b); }
#bottomHud .hp strong { min-width: 54px; display:inline-block; }


/* v0.8.8: Hedefe gelince odak halkası */
#crosshair.targetLock {
  width: 42px;
  height: 42px;
  left: calc(50% - 21px);
  top: calc(50% - 21px);
  border: 2px solid rgba(255, 226, 80, .92);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 212, 64, .42), inset 0 0 16px rgba(255, 212, 64, .16);
}
#crosshair.targetLock:before { left: 20px; top: 8px; height: 26px; background: rgba(255, 240, 130, .98); }
#crosshair.targetLock:after { left: 8px; top: 20px; width: 26px; background: rgba(255, 240, 130, .98); }


/* v0.9.2: Sağ click zoom aktifken vizör daha belirgin görünür. */
body.aimZoom #crosshair {
  width: 52px;
  height: 52px;
  left: calc(50% - 26px);
  top: calc(50% - 26px);
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255,255,255,.28), inset 0 0 18px rgba(255,255,255,.12);
}
body.aimZoom #crosshair:before {
  left: 25px;
  top: 7px;
  width: 2px;
  height: 38px;
  background: rgba(255,255,255,.98);
}
body.aimZoom #crosshair:after {
  top: 25px;
  left: 7px;
  height: 2px;
  width: 38px;
  background: rgba(255,255,255,.98);
}
body.aimZoom #crosshair.targetLock {
  width: 58px;
  height: 58px;
  left: calc(50% - 29px);
  top: calc(50% - 29px);
}
body.aimZoom #weaponView {
  transform: translateX(-50%) scale(.94);
  opacity: .88;
}

/* v0.9.3: Hedef aralığına girince odak/kilit hissi güçlendirildi. */
#crosshair.targetLock {
  animation: doaTargetPulse .72s ease-in-out infinite alternate;
}
@keyframes doaTargetPulse {
  from { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 220, 80, .40)); }
  to { transform: scale(1.10); filter: drop-shadow(0 0 13px rgba(255, 220, 80, .88)); }
}
body.aimZoom #crosshair.targetLock {
  border-color: rgba(255, 235, 92, .98);
  box-shadow: 0 0 26px rgba(255, 218, 70, .60), inset 0 0 20px rgba(255, 218, 70, .20);
}


/* v0.9.6: Daha net vurulma efekti + HeadShot bildirimi */
#damageFlash {
  z-index: 30;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.05) 0%, rgba(255,0,0,.06) 34%, rgba(150,0,0,.62) 100%),
    linear-gradient(45deg, rgba(255,0,0,.20), rgba(0,0,0,0) 38%, rgba(255,0,0,.18));
  mix-blend-mode: screen;
}
#damageFlash.damagePulse {
  animation: doaDamagePulse .34s ease-out both;
}
@keyframes doaDamagePulse {
  0% { opacity: .95; filter: saturate(1.8) contrast(1.15); }
  45% { opacity: .62; }
  100% { opacity: 0; filter: none; }
}
#gameNotice.headshot {
  color: #fff7b8;
  border-color: rgba(255, 220, 70, .78);
  background: linear-gradient(135deg, rgba(92,54,0,.88), rgba(20,12,4,.84));
  box-shadow: 0 0 42px rgba(255, 204, 48, .42), 0 22px 70px rgba(0,0,0,.45);
  text-transform: none;
}
body.aimZoom #crosshair.hit:before,
body.aimZoom #crosshair.hit:after {
  background: rgba(255, 72, 64, .98);
  box-shadow: 0 0 18px rgba(255, 72, 64, .90);
}


#botConsole {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(4px);
}
#botConsole.active { display: grid; }
.botConsoleBox {
  width: min(520px, calc(100vw - 34px));
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(8,12,20,.96), rgba(31,18,18,.96));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 84px rgba(0,0,0,.56);
}
.botConsoleTitle {
  color: #ffd27a;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.botConsoleTitle span {
  float: right;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}
#botConsoleInput {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.18);
  outline: none;
  border-radius: 15px;
  padding: 13px 14px;
  background: rgba(5,8,14,.82);
  color: white;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 3px;
}
#botConsoleStatus {
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 800;
}
#botConsoleStatus.ok { color: #9ff0bc; }
#botConsoleStatus.warn { color: #ffd27a; }

#botConsoleStatus.bad { color: #ff8d86; }



/* DOA v1.0.3 UI gating */
body:not(.game-started) #chatToggle,
body:not(.game-started) #chatPanel,
body:not(.game-started) #inviteBtn,
body:not(.game-started) #doaInviteInGameBtn {
  display: none !important;
}
body.game-started #chatToggle {
  display: flex;
}
body.game-started #chatPanel {
  display: block;
}
body.game-started #doaInviteInGameBtn {
  display: flex;
}



/* DOA v1.0.4 kesin yönetim paneli */
body.doa-manage-open { overflow: hidden !important; }
body.doa-manage-open canvas#renderCanvas { pointer-events: none !important; }
#doaManageOverlayV104{
  position:fixed; inset:0; z-index:2147483600; display:none; pointer-events:auto;
  background:rgba(0,0,0,.18); backdrop-filter: blur(1px);
}
#doaManageOverlayV104.open{ display:block; }
#doaManagePanelV104{
  position:fixed; right:24px; top:64px; width:440px; max-width:calc(100vw - 30px);
  max-height:calc(100vh - 90px); overflow:auto; z-index:2147483601;
  color:#fff; font-family:Inter,Segoe UI,Arial,sans-serif;
  background:linear-gradient(180deg,rgba(18,21,31,.99),rgba(8,10,15,.99));
  border:1px solid rgba(255,255,255,.24); border-radius:20px;
  box-shadow:0 24px 90px rgba(0,0,0,.68); pointer-events:auto;
}
#doaManagePanelV104 *{ box-sizing:border-box; }
#doaManagePanelV104 .mp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.14);position:sticky;top:0;z-index:2;}
#doaManagePanelV104 .mp-title{font-weight:950;font-size:15px;letter-spacing:.25px;}
#doaManagePanelV104 .mp-sub{display:block;color:rgba(255,255,255,.64);font-size:11px;margin-top:4px;font-weight:700;}
#doaManagePanelV104 .mp-close{width:36px;height:36px;border:0;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;font-size:21px;font-weight:950;}
#doaManagePanelV104 .mp-body{padding:15px;display:grid;gap:13px;}
#doaManagePanelV104 .mp-card{border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:13px;background:rgba(255,255,255,.045);}
#doaManagePanelV104 h3{margin:0 0 10px;color:#ffd2aa;font-size:13px;letter-spacing:.25px;}
#doaManagePanelV104 label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;font-size:13px;color:rgba(255,255,255,.92);}
#doaManagePanelV104 select,#doaManagePanelV104 input{width:180px;background:#101722;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:11px;padding:9px 10px;outline:none;font-weight:850;}
#doaManagePanelV104 .mp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
#doaManagePanelV104 button.mp-act{border:0;border-radius:13px;padding:11px 12px;cursor:pointer;color:white;font-weight:950;letter-spacing:.15px;background:linear-gradient(180deg,#e9695f,#b9463e);box-shadow:0 12px 28px rgba(220,75,65,.22);}
#doaManagePanelV104 button.mp-ok{background:linear-gradient(180deg,#36bd78,#198755);box-shadow:0 12px 28px rgba(40,170,100,.22);}
#doaManagePanelV104 button.mp-gray{background:rgba(255,255,255,.14);box-shadow:none;}
#doaManagePanelV104 .mp-status{font-size:12px;line-height:1.45;color:#d6def1;border-top:1px solid rgba(255,255,255,.10);padding-top:10px;}
#doaToastV104{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-12px);z-index:2147483647;opacity:0;pointer-events:none;padding:13px 18px;border-radius:15px;background:rgba(7,10,16,.97);color:#fff;border:1px solid rgba(255,255,255,.20);box-shadow:0 18px 54px rgba(0,0,0,.42);font-family:Inter,Segoe UI,Arial,sans-serif;font-weight:950;transition:.18s ease;}
#doaToastV104.on{opacity:1;transform:translateX(-50%) translateY(0);}
#doaToastV104.ok{background:rgba(8,50,30,.98);} #doaToastV104.warn{background:rgba(75,48,8,.98);} #doaToastV104.danger{background:rgba(70,12,12,.98);}
#doaNightLayerV104{position:fixed;inset:0;display:none;pointer-events:none;z-index:50;background:rgba(3,8,31,.55);mix-blend-mode:multiply;}
#doaNightLayerV104.on{display:block;}
#doaRainLayerV104{position:fixed;inset:0;display:none;pointer-events:none;z-index:60;overflow:hidden;opacity:.26;}
#doaRainLayerV104.on{display:block;}
#doaRainLayerV104::before{content:"";position:absolute;inset:-200px -120px;background-image:linear-gradient(112deg,transparent 0 91%,rgba(225,240,255,.34) 92% 93%,transparent 94% 100%),linear-gradient(112deg,transparent 0 95%,rgba(225,240,255,.18) 96% 97%,transparent 98% 100%);background-size:135px 220px,220px 310px;animation:doaRainSoftV104 1.15s linear infinite;}
#doaRainLayerV104::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,28,44,.025),rgba(2,7,18,.075));opacity:.35;}
@keyframes doaRainSoftV104{from{transform:translate3d(0,-160px,0);}to{transform:translate3d(-120px,210px,0);}}



/* DOA v1.0.5 menu click fix */
#doaManageOverlayV104.open {
  pointer-events: auto !important;
}
#doaManagePanelV104,
#doaManagePanelV104 * {
  pointer-events: auto !important;
}
body.doa-manage-open #renderCanvas {
  pointer-events: none !important;
}



/* DOA v1.0.6 hard click/pause fix */
#doaManageOverlayV104.open {
  display: flex !important;
  pointer-events: auto !important;
  z-index: 2147483646 !important;
}
#doaManagePanelV104 {
  pointer-events: auto !important;
  z-index: 2147483647 !important;
  position: relative !important;
}
#doaManagePanelV104 * {
  pointer-events: auto !important;
}
body.doa-manage-open canvas,
body.doa-console-open canvas {
  pointer-events: none !important;
}



/* DOA v1.0.7 panel right + resume fix */
#doaManageOverlayV104.open {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 72px 24px 24px 24px !important;
}
#doaManagePanelV104 {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 430px !important;
  max-width: calc(100vw - 48px) !important;
}



/* DOA v1.0.8 TAB scoreboard scroll fix */
#tabStats,
.tabStats,
#scoreboard,
.scoreboard {
  max-height: 72vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
}

#tabStats::-webkit-scrollbar,
.tabStats::-webkit-scrollbar,
#scoreboard::-webkit-scrollbar,
.scoreboard::-webkit-scrollbar {
  width: 10px;
}

#tabStats::-webkit-scrollbar-thumb,
.tabStats::-webkit-scrollbar-thumb,
#scoreboard::-webkit-scrollbar-thumb,
.scoreboard::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.35);
  border-radius: 10px;
}

#tabStats::-webkit-scrollbar-track,
.tabStats::-webkit-scrollbar-track,
#scoreboard::-webkit-scrollbar-track,
.scoreboard::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
}



/* DOA v1.1.0 modern graphics HUD polish */
body.modern-graphics::after {
  content: "MODERN GRAPHICS";
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  font: 800 10px/1 Inter, Segoe UI, Arial, sans-serif;
  letter-spacing: .18em;
  color: rgba(255,255,255,.62);
  background: rgba(7,10,16,.34);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  padding: 7px 10px;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.clean-combat #crosshair::before,
.clean-combat #crosshair::after {
  box-shadow: 0 0 16px rgba(255,255,255,.38), 0 0 28px rgba(255,160,70,.18);
}
.aimZoom #crosshair {
  filter: drop-shadow(0 0 12px rgba(255,210,120,.55));
}



/* DOA v1.1.1 cinematic graphics polish */
body.modern-graphics #hud,
body.modern-graphics #weaponHud,
body.modern-graphics #ammoBox {
  backdrop-filter: blur(10px);
}
body.modern-graphics #crosshair {
  transform: translate(-50%, -50%) scale(1.04);
}
body.modern-graphics.aimZoom #crosshair {
  transform: translate(-50%, -50%) scale(1.18);
}
body.modern-graphics::after {
  content: "CINEMATIC MAP  v1.1.1";
}



/* DOA v1.2.0 real village polish */
body.modern-graphics::after {
  content: "REAL VILLAGE MAP  v1.2.0";
}



/* DOA v1.2.1 enterable houses fix */
body.modern-graphics::after {
  content: "ENTERABLE HOUSES  v1.2.1";
}



/* DOA v1.2.2 true walkable houses terrain */
body.modern-graphics::after {
  content: "TRUE WALKABLE VILLAGE  v1.2.2";
}



/* DOA v1.2.3 enterable collision clean */
body.modern-graphics::after {
  content: "ENTERABLE HOUSE FIX  v1.2.3";
}

/* DOA FULL FINAL: TAB oyuncu listesi scroll + daha temiz panel */
#tabStatsRows {
  max-height: calc(min(72vh, 720px) - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,198,110,.82) rgba(255,255,255,.08);
}
#tabStatsRows::-webkit-scrollbar { width: 10px; }
#tabStatsRows::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 999px; }
#tabStatsRows::-webkit-scrollbar-thumb { background: rgba(245,198,110,.82); border-radius: 999px; }
.tabStatsBox { overflow: hidden; }
.tabHead { position: sticky; top: 0; z-index: 2; backdrop-filter: blur(8px); }

/* DOA FULL FINAL: berrak görüntü modu - ağır post-process hissini azaltır */
#renderCanvas { image-rendering: auto; }
body.game-started #renderCanvas { filter: saturate(1.03) contrast(1.02); }


/* DOA v1.3.0 TAB pause/scroll polish */
body.doa-tab-paused #tabStats,
#tabStats.show { pointer-events: auto !important; }
#tabStatsRows { max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
#tabStatsRows::-webkit-scrollbar { width: 9px; }
#tabStatsRows::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }
body.doa-tab-paused canvas { cursor: default !important; }
body.doa-tab-paused::after {
  content: 'TAB: oyun durdu - listeyi mouse ile kaydırabilirsiniz';
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 99999; padding: 9px 14px; border-radius: 999px;
  background: rgba(10,12,18,.78); color: #fff; font: 600 13px/1.2 system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.25); pointer-events: none;
}


/* DOARENA v0.8.10 CLEAN STABLE BASE UI OVERRIDES */
body.modern-graphics::after {
  content: "Coded By Doa | 2026" !important;
}
#tabStats.show {
  pointer-events: auto !important;
}
#tabStatsRows {
  max-height: 58vh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 8px !important;
}
.tabStatsBox {
  max-height: min(76vh, 760px) !important;
  overflow: hidden !important;
}
body.doa-tab-paused canvas {
  cursor: default !important;
}
#renderCanvas {
  image-rendering: auto !important;
  filter: saturate(1.02) contrast(1.015) !important;
}


/* DOARENA v0.8.13: PC-only responsive guard */
#pcOnlyOverlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at center, rgba(22,28,42,.96), rgba(0,0,0,.985));
  color: #fff;
  text-align: center;
}
#pcOnlyOverlay .pcOnlyBox {
  max-width: 440px;
  border-radius: 24px;
  padding: 28px 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
#pcOnlyOverlay strong {
  display: block;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: .2px;
}
#pcOnlyOverlay p {
  margin: 12px 0 0;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  font-size: 15px;
}
body.doa-pc-blocked #pcOnlyOverlay { display: flex; }
body.doa-pc-blocked #startPanel,
body.doa-pc-blocked #infoPanel,
body.doa-pc-blocked #hud,
body.doa-pc-blocked #bottomHud,
body.doa-pc-blocked #chatToggle,
body.doa-pc-blocked #chatPanel,
body.doa-pc-blocked #crosshair { display: none !important; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  #pcOnlyOverlay { display: flex; }
  #startPanel, #infoPanel, #hud, #bottomHud, #chatToggle, #chatPanel, #crosshair { display: none !important; }
}


/* DOARENA v0.8.20 INTRO INFO MODAL RESPONSIVE */
@media (max-width: 720px) {
  .infoGrid { grid-template-columns: 1fr; }
  .infoBox { padding: 22px; border-radius: 22px; }
}

/* DOARENA v0.8.23 - Rocket weapon HUD/crosshair */
body.rocket-armed #crosshair {
  width: 54px;
  height: 54px;
  left: calc(50% - 27px);
  top: calc(50% - 27px);
  border: 2px solid rgba(255, 64, 32, .92);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255, 56, 24, .62), inset 0 0 20px rgba(255, 120, 20, .25);
}
body.rocket-armed #crosshair::before {
  left: 25px;
  top: -10px;
  width: 4px;
  height: 74px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.92), transparent);
  box-shadow: 0 0 13px rgba(255, 80, 20, .95);
}
body.rocket-armed #crosshair::after {
  top: 25px;
  left: -10px;
  width: 74px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  box-shadow: 0 0 13px rgba(255, 80, 20, .95);
}
body.rocket-armed #weaponText { color: #ff7a3d; text-shadow: 0 0 10px rgba(255,90,35,.75); }


/* DOARENA v0.8.51 - Ok Atar özel nişangâh + 2x zoom hissi */
body.bow-armed #crosshair {
  width: 64px;
  height: 64px;
  left: calc(50% - 32px);
  top: calc(50% - 32px);
  border: 2px solid rgba(112, 224, 255, .86);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(70, 190, 255, .50), inset 0 0 20px rgba(70, 190, 255, .16);
}
body.bow-armed #crosshair::before {
  left: 30px;
  top: -13px;
  width: 3px;
  height: 90px;
  background: linear-gradient(180deg, transparent 0%, rgba(172, 243, 255, .92) 34%, rgba(255,255,255,.96) 50%, rgba(172, 243, 255, .92) 66%, transparent 100%);
  box-shadow: 0 0 12px rgba(93, 216, 255, .82);
}
body.bow-armed #crosshair::after {
  top: 30px;
  left: -13px;
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(172, 243, 255, .92) 34%, rgba(255,255,255,.96) 50%, rgba(172, 243, 255, .92) 66%, transparent 100%);
  box-shadow: 0 0 12px rgba(93, 216, 255, .82);
}
body.bow-armed #crosshair::marker { display: none; }
body.bow-armed #crosshair {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.96) 0 2px, transparent 3px),
    radial-gradient(circle at center, transparent 0 18px, rgba(112,224,255,.22) 19px, transparent 21px),
    conic-gradient(from 45deg, transparent 0 10deg, rgba(112,224,255,.68) 10deg 18deg, transparent 18deg 90deg, rgba(112,224,255,.68) 90deg 98deg, transparent 98deg 180deg, rgba(112,224,255,.68) 180deg 188deg, transparent 188deg 270deg, rgba(112,224,255,.68) 270deg 278deg, transparent 278deg 360deg);
}
body.bow-armed.aimZoom #crosshair {
  width: 82px;
  height: 82px;
  left: calc(50% - 41px);
  top: calc(50% - 41px);
  border-color: rgba(160, 240, 255, .98);
  box-shadow: 0 0 30px rgba(80, 215, 255, .72), inset 0 0 26px rgba(120, 235, 255, .22);
}
body.bow-armed.aimZoom #crosshair::before { left: 39px; top: -17px; height: 116px; }
body.bow-armed.aimZoom #crosshair::after { top: 39px; left: -17px; width: 116px; }
body.bow-armed.aimZoom #crosshair::before,
body.bow-armed.aimZoom #crosshair::after { background-color: transparent; }
body.bow-armed #crosshair.targetLock {
  border-color: rgba(130, 255, 210, .98);
  box-shadow: 0 0 28px rgba(60, 255, 190, .70), inset 0 0 20px rgba(60, 255, 190, .24);
}
body.bow-armed #weaponText { color: #8feeff; text-shadow: 0 0 10px rgba(70,210,255,.70); }


/* v0.8.32 ESC ayar menüsü: oyundan çık butonu */
.settingsActions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
#settingsExitBtn,
#settingsMapBtn {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 950;
  color: #fff;
  cursor: pointer;
}
#settingsExitBtn {
  background: linear-gradient(135deg, #ff4d4d, #ff9b54);
  box-shadow: 0 14px 36px rgba(255, 77, 77, .28);
}
#settingsMapBtn {
  background: linear-gradient(135deg, #2f8cff, #61d0ff);
  box-shadow: 0 14px 36px rgba(47, 140, 255, .24);
}
#settingsExitBtn:hover,
#settingsMapBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* DOARENA v0.8.41 HUD: online oyuncu + medikal sağlık simgesi */
.scoreOnline,
.tabOnline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  padding: 7px 9px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(245,198,110,.20), rgba(255,255,255,.055));
  border: 1px solid rgba(245,198,110,.30);
  color: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .45px;
}
.scoreOnline b,
.tabOnline b {
  min-width: 32px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  color: #061018;
  background: #f5c66e;
  box-shadow: 0 0 18px rgba(245,198,110,.24);
}
.medHealth {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #57f29a;
  font-weight: 950;
}
.medHealth em {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  color: #061018;
  background: #57f29a;
  box-shadow: 0 0 14px rgba(87,242,154,.36);
}
.medHealth.low {
  color: #ff4d4d;
}
.medHealth.low em {
  background: #ff4d4d;
  color: #fff;
  box-shadow: 0 0 18px rgba(255,77,77,.50);
}
.hp.low strong,
.hp.low {
  color: #ff4d4d !important;
}
.hp.low i {
  background: linear-gradient(90deg, #ff4d4d, #ff8a66) !important;
  box-shadow: 0 0 18px rgba(255,77,77,.40);
}
.hp::before {
  content: "✚";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 50%;
  background: #57f29a;
  color: #061018;
  font-weight: 950;
  font-size: 12px;
  box-shadow: 0 0 14px rgba(87,242,154,.32);
}
.hp.low::before {
  background: #ff4d4d;
  color: #fff;
  box-shadow: 0 0 18px rgba(255,77,77,.50);
}

/* DOARENA v0.8.42: Bilgilendirme ekranı içinde kompakt harita seçimi */
.infoMapSelect { width: 100%; margin: 12px 0 8px; padding: 11px 12px; border-radius: 18px; }
.infoMapSelect .mapCard { padding: 10px 11px; border-radius: 14px; }
.infoMapSelect .mapCard b { font-size: 13px; }
.infoMapSelect .mapCard span { font-size: 10.5px; }
.compactInfoGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .compactInfoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* DOARENA v0.8.43: harita seçimi ekranı akıcı/kompakt final */
*, *::before, *::after { box-sizing: border-box; }
body.doa-autostarting #startPanel { display: none !important; }
body.doa-autostarting #loading { display: block !important; }
#infoPanel { padding: 14px; overflow: hidden; }
.infoBox {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 16px;
  border-radius: 24px;
}
.infoBox h2 { font-size: clamp(23px, 3vw, 34px); margin: 9px 0 6px; }
.infoBox p { font-size: 12.6px; line-height: 1.38; margin: 6px 0; }
.infoKicker { padding: 6px 10px; font-size: 10.5px; }
.infoMapSelect { margin: 8px 0 7px; padding: 10px; }
.mapSelectorLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr);
  gap: 10px;
  align-items: stretch;
}
.infoMapSelect .mapCards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.infoMapSelect .mapCard { min-height: 62px; padding: 8px 9px; }
.infoMapSelect .mapCard b { font-size: 12.5px; margin-bottom: 3px; }
.infoMapSelect .mapCard span { font-size: 10.2px; line-height: 1.22; }
.mapPreview {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(12,17,28,.92), rgba(32,20,19,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 38px rgba(0,0,0,.25);
}
.mapPreviewSky,
.mapPreviewGround,
.mapPreview .mpHouse,
.mapPreview .mpTower,
.mapPreview .mpBridge { position: absolute; display: block; }
.mapPreviewSky { inset: 0 0 38%; background: radial-gradient(circle at 70% 28%, rgba(255,190,112,.45), transparent 14%), linear-gradient(135deg, rgba(255,91,79,.26), rgba(53,154,255,.15)); }
.mapPreviewGround { left: -5%; right: -5%; bottom: -12%; height: 53%; transform: skewY(-4deg); background: linear-gradient(135deg, rgba(73,64,46,.9), rgba(30,47,35,.92)); }
.mapPreview .mpHouse.a { width: 48px; height: 42px; left: 24px; bottom: 35px; background: #6e4a2f; border-radius: 4px 4px 2px 2px; box-shadow: 0 -16px 0 #8d2f24 inset; }
.mapPreview .mpHouse.b { width: 58px; height: 48px; right: 42px; bottom: 32px; background: #8a785d; border-radius: 5px; box-shadow: 0 -18px 0 #633320 inset; }
.mapPreview .mpTower { width: 30px; height: 74px; right: 22px; bottom: 34px; background: #2c3038; border-radius: 7px 7px 2px 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset; }
.mapPreview .mpBridge { height: 9px; left: 78px; right: 76px; bottom: 55px; background: #5a3820; border-radius: 999px; box-shadow: 0 18px 0 rgba(0,0,0,.18); }
.mapPreview strong, .mapPreview em { position: absolute; left: 13px; right: 13px; z-index: 2; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.mapPreview strong { bottom: 31px; font-size: 16px; font-weight: 1000; }
.mapPreview em { bottom: 12px; font-size: 10.5px; line-height: 1.22; font-style: normal; color: rgba(255,255,255,.72); font-weight: 800; }
.mapPreview.towerbridge .mapPreviewGround { background: linear-gradient(135deg, #282b31, #495066); }
.mapPreview.towerbridge .mpBridge { height: 13px; bottom: 62px; left: 34px; right: 34px; background: #9b6a35; }
.mapPreview.towerbridge .mpTower { height: 90px; right: 28px; background: #202631; }
.mapPreview.towerbridge .mpHouse.a { left: 25px; bottom: 28px; }
.mapPreview.mountain .mapPreviewSky { background: linear-gradient(145deg, rgba(80,116,148,.55), rgba(255,255,255,.12)); }
.mapPreview.mountain .mapPreviewGround { height: 72%; bottom: -25%; transform: skewY(-11deg); background: linear-gradient(135deg, #303835, #6f756e); }
.mapPreview.mountain .mpTower { right: 46px; bottom: 52px; height: 58px; background: #1f2424; }
.mapPreview.mountain .mpBridge { bottom: 78px; background: #604424; }
.mapPreview.mountain .mpHouse.b { display: none; }
.mapPreview.seaside .mapPreviewSky { background: linear-gradient(145deg, rgba(68,156,200,.55), rgba(255,190,112,.18)); }
.mapPreview.seaside .mapPreviewGround { background: linear-gradient(90deg, #d4b676 0 44%, #0b7897 45% 100%); }
.mapPreview.seaside .mpBridge { bottom: 45px; left: 20px; right: 110px; background: #6b4224; }
.mapPreview.seaside .mpTower { right: 38px; bottom: 36px; height: 82px; background: #e2ded1; }
.compactInfoGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 8px 0; }
.infoGrid div { padding: 7px 8px; border-radius: 12px; }
.infoGrid b { font-size: 10.8px; margin-bottom: 2px; }
.infoGrid span { font-size: 10px; line-height: 1.22; }
.infoNote { font-size: 12px !important; }
#infoOkBtn { margin-top: 8px; padding: 12px 18px; border-radius: 15px; font-size: 15px; }
@media (max-width: 900px) {
  .mapSelectorLayout { grid-template-columns: 1fr; }
  .mapPreview { min-height: 116px; }
  .compactInfoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* DOARENA v0.8.44: bilgilendirme ekranı daha ferah, scrollsuz ve oyun akışına uygun */
#infoPanel {
  display: none;
  place-items: center;
  padding: 10px;
  overflow: hidden !important;
}
#infoPanel.active { display: grid; }
.infoBox {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden !important;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.infoBox h2 { font-size: clamp(22px, 2.35vw, 30px); margin: 2px 0 2px; line-height: 1.02; }
.infoBox p { font-size: 12px; line-height: 1.30; margin: 3px 0; }
.infoMapSelect { margin: 5px 0 5px !important; padding: 8px !important; }
.mapSelectTitle { font-size: 11px; margin-bottom: 6px; }
.mapSelectorLayout { grid-template-columns: minmax(0, 1.52fr) minmax(250px, .78fr); gap: 8px; }
.infoMapSelect .mapCards { gap: 7px !important; }
.infoMapSelect .mapCard { min-height: 54px !important; padding: 7px 8px !important; }
.infoMapSelect .mapCard b { font-size: 12px !important; margin-bottom: 2px !important; }
.infoMapSelect .mapCard span { font-size: 9.7px !important; line-height: 1.16 !important; }
.mapPreview { min-height: 112px !important; border-radius: 14px; }
.mapPreview strong { bottom: 28px; font-size: 14px; }
.mapPreview em { bottom: 10px; font-size: 9.7px; }
.mapSelectBox small { font-size: 9.6px !important; line-height: 1.15; }
.compactInfoGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; margin: 4px 0 3px !important; }
.infoGrid div { padding: 6px 7px !important; border-radius: 11px !important; min-height: 48px; }
.infoGrid b { font-size: 10.2px !important; margin-bottom: 2px !important; }
.infoGrid span { font-size: 9.35px !important; line-height: 1.17 !important; }
.infoNote { margin: 2px 0 !important; font-size: 11px !important; }
#infoOkBtn { margin-top: 4px !important; padding: 10px 16px !important; border-radius: 14px !important; font-size: 14px !important; flex: 0 0 auto; }
body.doa-autostarting #startPanel,
body.doa-autostarting #infoPanel { display: none !important; }
body.game-started #loading { display: none !important; }
@media (max-height: 760px) {
  .infoBox { padding: 12px 14px 10px; gap: 4px; }
  .infoKicker { display:none; }
  .infoBox h2 { font-size: 22px; }
  .infoBox p { font-size: 11px; line-height: 1.22; }
  .mapPreview { min-height: 92px !important; }
  .infoGrid div { min-height: 42px; padding: 5px 6px !important; }
  .infoGrid span { font-size: 8.8px !important; }
  #infoOkBtn { padding: 9px 14px !important; }
}

/* DOARENA v0.8.45 - Bilgilendirme ekranı ferah/dikey okunaklı düzen */
#infoPanel {
  padding: 28px 18px !important;
  overflow-y: auto !important;
  align-items: start !important;
}
#infoPanel.active { display: grid !important; }
.infoBox {
  width: min(920px, calc(100vw - 36px)) !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
  margin: 0 auto 28px !important;
  padding: 28px 30px 26px !important;
  border-radius: 28px !important;
  gap: 12px !important;
}
.infoKicker {
  display: inline-flex !important;
  align-self: flex-start !important;
  padding: 8px 13px !important;
  font-size: 11.5px !important;
  letter-spacing: .16em !important;
}
.infoBox h2 {
  font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 1.08 !important;
  margin: 4px 0 6px !important;
}
.infoBox p {
  font-size: 14.5px !important;
  line-height: 1.58 !important;
  margin: 4px 0 !important;
  max-width: 820px !important;
}
.infoMapSelect {
  margin: 14px 0 12px !important;
  padding: 16px !important;
  border-radius: 22px !important;
}
.mapSelectTitle {
  font-size: 14px !important;
  margin-bottom: 11px !important;
}
.mapSelectorLayout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 16px !important;
  align-items: stretch !important;
}
.infoMapSelect .mapCards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.infoMapSelect .mapCard {
  min-height: 82px !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  text-align: left !important;
}
.infoMapSelect .mapCard b {
  font-size: 14.2px !important;
  margin-bottom: 5px !important;
  display: block !important;
}
.infoMapSelect .mapCard span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.mapPreview {
  min-height: 205px !important;
  border-radius: 20px !important;
}
.mapPreview strong { bottom: 42px !important; font-size: 20px !important; }
.mapPreview em { bottom: 18px !important; font-size: 12px !important; line-height: 1.35 !important; }
.infoGrid.compactInfoGrid,
.infoGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 6px !important;
}
.infoGrid div {
  min-height: 76px !important;
  padding: 12px 13px !important;
  border-radius: 16px !important;
}
.infoGrid b { font-size: 13px !important; margin-bottom: 5px !important; }
.infoGrid span { font-size: 12.2px !important; line-height: 1.42 !important; }
.infoNote { font-size: 13.5px !important; line-height: 1.45 !important; margin: 6px 0 0 !important; }
#infoOkBtn {
  margin-top: 8px !important;
  padding: 14px 22px !important;
  border-radius: 17px !important;
  font-size: 16px !important;
  align-self: center !important;
}
@media (max-width: 820px) {
  .mapSelectorLayout { grid-template-columns: 1fr !important; }
  .mapPreview { min-height: 165px !important; }
  .infoGrid.compactInfoGrid, .infoGrid { grid-template-columns: 1fr !important; }
}
@media (max-height: 760px) {
  #infoPanel { padding-top: 16px !important; }
  .infoBox { padding: 22px 24px !important; }
  .infoBox p { font-size: 13.5px !important; line-height: 1.45 !important; }
  .mapPreview { min-height: 170px !important; }
  .infoGrid div { min-height: 66px !important; }
}


/* DOARENA v0.8.47 - Harita geçişi / akıcı yükleme katmanı */
#doaMapTransition {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,180,80,.16), transparent 34%),
    radial-gradient(circle at 20% 20%, rgba(255,80,80,.10), transparent 32%),
    linear-gradient(135deg, rgba(7,10,16,.96), rgba(16,22,31,.94));
  backdrop-filter: blur(8px);
  color: #fff;
  pointer-events: all;
}
#doaMapTransition.active { display: flex; }
.doaMapTransitionBox {
  min-width: min(460px, calc(100vw - 42px));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 28px 30px 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  box-shadow: 0 28px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
}
.doaMapTransitionBox b {
  display: block;
  font-size: 26px;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.doaMapTransitionBox span {
  display: block;
  color: #f7c46a;
  font-weight: 1000;
  font-size: 18px;
  margin-bottom: 8px;
}
.doaMapTransitionBox small {
  display: block;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
.doaMapTransitionBox i {
  display: block;
  height: 7px;
  margin: 22px auto 0;
  width: 72%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  position: relative;
}
.doaMapTransitionBox i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6b5c, #ffc46a);
  animation: doaMapLoadMove 1.05s ease-in-out infinite alternate;
}
@keyframes doaMapLoadMove { from { transform: translateX(0); } to { transform: translateX(138%); } }
body.doa-map-loading #renderCanvas { filter: saturate(.85) brightness(.8); }


/* DOARENA v0.8.48 - Harita geçişinde nickname ekranı flaşını tamamen engelle */
html.doa-autostarting #startPanel,
html.doa-autostarting #infoPanel,
body.doa-autostarting #startPanel,
body.doa-autostarting #infoPanel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.doa-autostarting #loading,
body.doa-autostarting #loading {
  display: block !important;
  opacity: 1 !important;
}
html.doa-autostarting #doaMapTransition,
body.doa-autostarting #doaMapTransition,
#doaMapTransition.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}
html.doa-autostarting #renderCanvas,
body.doa-autostarting #renderCanvas {
  filter: saturate(.85) brightness(.78);
}