* { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── HOVER TOOLTIP ────────────────────────────────── */
#tooltip {
  position: fixed;
  z-index: 10000;
  background: rgba(26, 26, 26, 0.96);
  border: 2px solid #888;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  color: #fff;
  max-width: 280px;
  animation: ttFade 0.12s ease-out;
}
@keyframes ttFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#tooltip .tt-title {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}
#tooltip .tt-body {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.35;
}

body {
  background: #222;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh;
  font-family: 'Arial Black', Arial, sans-serif;
  gap: 14px;
}

/* ─── ROTATE MESSAGE ────────────────────────────────── */
#rotate-msg {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #222;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  z-index: 200;
}
#rotate-msg p {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-align: center;
  padding: 0 20px;
}
#rotate-icon {
  font-size: 48px;
}
@media (orientation: portrait) {
  #rotate-msg { display: flex; }
  #splash, #table-picker-screen, #code-display-screen, #join-table-screen, #choose-screen, .screen, #game-title { display: none !important; }
}

/* ─── SPLASH SCREEN ─────────────────────────────────── */
#splash {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  background-color: #1a1a2e;
  z-index: 100;
}
#splash-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
#splash-buttons {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
}
#splash-btn {
  min-width: 280px;
  padding: 14px 40px; border-radius: 12px;
  border: 3px solid #2eaa52;
  background: rgba(0, 0, 0, 0.7);
  color: #2eaa52;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 0 20px rgba(46, 170, 82, 0.3);
}
#splash-btn:hover {
  background: rgba(46, 170, 82, 0.2);
  box-shadow: 0 0 30px rgba(46, 170, 82, 0.5);
}
#splash-btn:active { transform: scale(0.95); }
#splash-btn-single {
  position: relative; z-index: 1;
  min-width: 280px;
  padding: 14px 40px; border-radius: 12px;
  border: 3px solid #e87a2a;
  background: rgba(0, 0, 0, 0.7);
  color: #e87a2a;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 0 20px rgba(232, 122, 42, 0.3);
}
#splash-btn-single:hover {
  background: rgba(232, 122, 42, 0.2);
  box-shadow: 0 0 30px rgba(232, 122, 42, 0.5);
}
#splash-btn-single:active { transform: scale(0.95); }
#splash-btn-how-to-play {
  position: relative; z-index: 1;
  padding: 14px 40px; border-radius: 12px;
  border: 3px solid #f0c040;
  background: rgba(0, 0, 0, 0.7);
  color: #f0c040;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.3);
}
#splash-btn-how-to-play:hover {
  background: rgba(240, 192, 64, 0.2);
  box-shadow: 0 0 30px rgba(240, 192, 64, 0.5);
}
#splash-btn-how-to-play:active { transform: scale(0.95); }

/* Row containing Multi Player + Lobby buttons side-by-side */
.splash-btn-row {
  display: flex; gap: 12px; align-items: stretch;
}

/* Disabled "coming soon" placeholder buttons (Lobby, Leader Board) */
#splash-btn-lobby,
#splash-btn-leaderboard {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 28px; border-radius: 12px;
  border: 3px solid #666;
  background: rgba(0, 0, 0, 0.5);
  color: #888;
  font-family: 'Arial Black', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: 0 0 12px rgba(120, 120, 120, 0.2);
}
#splash-btn-lobby .splash-btn-main,
#splash-btn-leaderboard .splash-btn-main {
  font-size: 22px; font-weight: 900; line-height: 1;
}
#splash-btn-lobby .splash-btn-sub,
#splash-btn-leaderboard .splash-btn-sub {
  font-size: 10px; font-weight: 700;
  margin-top: 4px;
  color: #777;
  letter-spacing: 0.08em;
}

/* ─── WIN OVERLAY ───────────────────────────────────── */
#win-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 200;
  animation: winFadeIn 0.5s ease-out;
}
@keyframes winFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#win-card {
  background: #3a3a3a;
  border: 4px solid;
  border-radius: 16px;
  padding: 32px 44px;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  min-width: 320px;
}
#win-trophy {
  font-size: 56px;
  line-height: 1;
}
#win-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 4px solid;
  object-fit: cover;
}
#win-title {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 26px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0;
  text-align: center;
}
#win-reason {
  color: rgba(255, 255, 255, 0.75);
  font-family: Arial, sans-serif;
  font-size: 15px;
  margin: 0;
  text-align: center;
}
#win-newgame {
  margin-top: 8px;
  padding: 12px 36px; border-radius: 10px;
  border: 3px solid #2eaa52;
  background: rgba(0, 0, 0, 0.7);
  color: #2eaa52;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 16px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#win-newgame:hover { background: rgba(46, 170, 82, 0.2); }
#win-newgame:active { transform: scale(0.95); }

/* ─── HOW TO PLAY MODAL ─────────────────────────────── */
#howto-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 110;
}
#howto-modal {
  position: relative;
  width: 560px; max-width: 92vw;
  background: #3a3a3a;
  border: 2px solid #888;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  padding: 28px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
#howto-close {
  position: absolute; top: 6px; right: 10px;
  background: transparent; border: none;
  color: #fff; cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 26px; font-weight: 900;
  line-height: 1; padding: 4px 8px;
  transition: transform 0.1s;
}
#howto-close:hover { transform: scale(1.15); }
#howto-close:active { transform: scale(0.9); }
#howto-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  max-width: 420px;
}
#howto-title {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-align: center;
}
#howto-canvas {
  background: #252525;
  border: 2px solid #888;
  border-radius: 10px;
  display: block;
}
#howto-body {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 17px; line-height: 1.5;
  text-align: center;
  max-width: 460px;
  margin: 0;
}
.howto-bullets {
  text-align: left;
  margin: 8px auto 0;
  padding-left: 22px;
  max-width: 320px;
}
.howto-bullets li {
  margin: 4px 0;
  color: #fff;
}
.howto-note {
  text-align: center;
  margin: 10px 0 0;
  color: #fff;
  font-style: italic;
}
#howto-footer {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
#howto-dots {
  display: flex; gap: 8px;
}
.howto-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #666;
  transition: background 0.2s, transform 0.2s;
}
.howto-dot.active {
  background: #fff;
  transform: scale(1.3);
}
#howto-next {
  padding: 8px 28px; border-radius: 8px;
  border: 2px solid #f0c040;
  background: rgba(0, 0, 0, 0.7);
  color: #f0c040;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#howto-next:hover { background: rgba(240, 192, 64, 0.2); }
#howto-next:active { transform: scale(0.95); }
#leaderboard-btn {
  padding: 14px 40px; border-radius: 12px;
  border: 3px solid #f0c040;
  background: rgba(0, 0, 0, 0.7);
  color: #f0c040;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.3);
}
#leaderboard-btn:hover {
  background: rgba(240, 192, 64, 0.2);
  box-shadow: 0 0 30px rgba(240, 192, 64, 0.5);
}
#leaderboard-btn:active { transform: scale(0.95); }

/* ─── CHOOSE PLAYER SCREEN ──────────────────────────── */
#choose-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 110;
}
#choose-modal {
  position: relative;
  width: 1200px; max-width: 94vw;
  max-height: 90vh;
  background: #3a3a3a;
  border: 2px solid #888;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  padding: 40px 48px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  overflow-y: auto;
}
#choose-close {
  position: absolute; top: 6px; right: 10px;
  background: transparent; border: none;
  color: #fff; cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 26px; font-weight: 900;
  line-height: 1; padding: 4px 8px;
  transition: transform 0.1s;
}
#choose-close:hover { transform: scale(1.15); }
#choose-close:active { transform: scale(0.9); }
#choose-title {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
}
#choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 0 20px;
}
.choose-card {
  display: flex; flex-direction: row;
  align-items: center; gap: 6px;
  cursor: pointer;
  padding: 4px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.1s, opacity 0.3s;
}
.choose-card:hover { border-color: rgba(255,255,255,0.3); transform: scale(1.03); }
.choose-card:active { transform: scale(0.97); }
.choose-card.taken {
  opacity: 0.3; pointer-events: none;
  filter: grayscale(100%);
}
.choose-avatar {
  width: 120px; height: 120px;
  border-radius: 50%; overflow: hidden;
  border: 4px solid;
  flex-shrink: 0;
}
.choose-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.choose-name {
  padding: 16px 16px;
  border-radius: 8px;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 12px; font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

#choose-waiting {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center;
}

/* ─── TABLE PICKER / CODE DISPLAY / JOIN TABLE MODALS ─── */
#table-picker-screen,
#code-display-screen,
#join-table-screen,
#screen-name-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 115;
}
#table-picker-modal,
#code-display-modal,
#join-table-modal,
#screen-name-modal {
  position: relative;
  width: 520px; max-width: 92vw;
  background: #3a3a3a;
  border: 2px solid #888;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  padding: 36px 44px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
}
#table-picker-close,
#code-display-close,
#join-table-close {
  position: absolute; top: 6px; right: 10px;
  background: transparent; border: none;
  color: #fff; cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 26px; font-weight: 900;
  line-height: 1; padding: 4px 8px;
  transition: transform 0.1s;
}
#table-picker-close:hover,
#code-display-close:hover,
#join-table-close:hover { transform: scale(1.15); }
#table-picker-close:active,
#code-display-close:active,
#join-table-close:active { transform: scale(0.9); }
#table-picker-title,
#code-display-title,
#join-table-title,
#screen-name-title {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 6px;
  text-align: center;
}

/* Screen-name modal specifics */
#screen-name-help {
  color: #aaa; font-size: 13px; text-align: center; margin: 0;
}
#screen-name-input {
  width: 80%; padding: 12px 14px;
  border: 2px solid #888; border-radius: 8px;
  background: #1a1a1a; color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; text-align: center;
  letter-spacing: 0.08em;
  outline: none;
}
#screen-name-input:focus { border-color: #f0c040; }
#screen-name-error {
  color: #d44; font-size: 13px; min-height: 16px; margin: 0;
}
#screen-name-submit {
  padding: 12px 32px; border-radius: 10px;
  border: 3px solid #f0c040;
  background: rgba(0, 0, 0, 0.6);
  color: #f0c040;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 18px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#screen-name-submit:hover { background: rgba(240, 192, 64, 0.2); }
#screen-name-submit:active { transform: scale(0.96); }

/* ─── SUDDEN DEATH MODAL ─────────────────────────────── */
#sudden-death-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 130;
  animation: sdFadeIn 0.4s ease-out;
}
@keyframes sdFadeIn { from { opacity: 0; } to { opacity: 1; } }
#sudden-death-modal {
  width: 92vw; max-width: 1100px;
  max-height: 90vh; overflow-y: auto;
  padding: 24px 28px;
  background: linear-gradient(180deg, #2a1010 0%, #1a0808 100%);
  border: 3px solid #d42a2a;
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(212, 42, 42, 0.45), inset 0 0 30px rgba(212, 42, 42, 0.18);
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
#sudden-death-title {
  color: #ff5252;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 38px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-shadow: 0 0 20px rgba(212, 42, 42, 0.65);
  margin: 0;
  animation: sdPulse 1.2s ease-in-out infinite;
}
@keyframes sdPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
#sudden-death-subtitle {
  color: #ddd;
  font-family: Arial, sans-serif;
  font-size: 14px; font-style: italic;
  text-align: center;
  margin: 0 0 6px;
}
#sudden-death-players {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  width: 100%;
}
.sd-player-card {
  position: relative;
  padding: 16px 14px 14px;
  background: #181818;
  border: 3px solid #444;
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center;
  min-height: 220px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.sd-player-card .sd-avatar {
  position: absolute; top: -22px; left: -22px;
  width: 56px; height: 56px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid #fff;
  background: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.sd-player-card .sd-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.sd-player-card .sd-name {
  margin-left: 44px;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 16px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em;
  align-self: flex-start;
}
.sd-player-card .sd-dice {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  min-height: 80px;
}
.sd-die {
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 4px;
  color: #111;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden;
}
.sd-die.rolling { background: #ffdd44; animation: sdShake 0.08s ease-in-out infinite alternate; }
@keyframes sdShake {
  from { transform: translate(-1px, 0); }
  to   { transform: translate(1px, 0); }
}
.sd-player-card .sd-total-label {
  margin-top: auto; padding-top: 8px;
  color: #aaa;
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sd-player-card .sd-total {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 36px; font-weight: 900;
  color: #f0c040;
  line-height: 1;
}
.sd-player-card.winner {
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.65), inset 0 0 18px rgba(255, 215, 0, 0.18);
  transform: scale(1.04);
}
.sd-player-card.winner .sd-total { color: #ffd700; }

/* Horizontal rule with centered "Or" label, used in the Join Table modal. */
.join-or-divider {
  display: flex; align-items: center;
  width: 80%; margin: 4px 0;
  color: #aaa;
  font-family: Arial, sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.join-or-divider::before,
.join-or-divider::after {
  content: ''; flex: 1; height: 1px;
  background: #666;
}
.join-or-divider span {
  padding: 0 12px;
}

/* Random-table button — sits below the "Or" divider, matches the friend's-table
   button's footprint but uses a distinct color so the two CTAs are easy to tell apart. */
#join-random-btn {
  padding: 12px 36px; border-radius: 10px;
  border: 2px solid #1a4f8a;
  background: #2a7fd4;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 16px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
#join-random-btn:hover { filter: brightness(1.1); }
#join-random-btn:active { transform: scale(0.95); }

/* Reuse the mode-option visual style for the two big choice buttons */
.table-option {
  width: 100%;
  padding: 18px 24px;
  border-radius: 12px;
  border: 3px solid;
  background: rgba(0, 0, 0, 0.55);
  font-family: 'Arial Black', Arial, sans-serif;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.table-option:hover { transform: translateY(-1px); }
.table-option:active { transform: scale(0.98); }
.table-option-title {
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  line-height: 1.1;
}
.table-option-sub {
  font-family: Arial, sans-serif;
  font-size: 13px; font-weight: normal;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}
.table-start {
  border-color: #2eaa52;
  color: #2eaa52;
  box-shadow: 0 0 16px rgba(46, 170, 82, 0.25);
}
.table-start:hover {
  background: rgba(46, 170, 82, 0.18);
  box-shadow: 0 0 28px rgba(46, 170, 82, 0.5);
}
.table-join {
  border-color: #f0c040;
  color: #f0c040;
  box-shadow: 0 0 16px rgba(240, 192, 64, 0.25);
}
.table-join:hover {
  background: rgba(240, 192, 64, 0.18);
  box-shadow: 0 0 28px rgba(240, 192, 64, 0.5);
}

/* Code display (for the host) */
#code-display-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 64px; font-weight: 900;
  letter-spacing: 0.2em;
  color: #2eaa52;
  background: rgba(0, 0, 0, 0.5);
  border: 3px solid #2eaa52;
  border-radius: 12px;
  padding: 14px 24px 10px;
  min-width: 280px;
  text-align: center;
  user-select: all;
  cursor: text;
}
#code-display-help {
  color: rgba(255, 255, 255, 0.85);
  font-family: Arial, sans-serif;
  font-size: 14px; line-height: 1.4;
  text-align: center;
  margin: 0;
  max-width: 380px;
}
#code-display-status {
  color: #f0c040;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
}
#code-display-continue {
  margin-top: 4px;
  padding: 10px 30px; border-radius: 10px;
  border: 2px solid #1a6a32;
  background: #2eaa52;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
#code-display-continue:hover { filter: brightness(1.15); }
#code-display-continue:active { transform: scale(0.95); }

/* Join table — code entry boxes */
#join-table-help {
  color: rgba(255, 255, 255, 0.85);
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  margin: 0;
}
#join-code-inputs {
  display: flex; gap: 10px;
}
.join-code-box {
  width: 56px; height: 72px;
  border: 3px solid #888;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 40px; font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s;
}
.join-code-box:focus { border-color: #f0c040; }
#join-table-error {
  color: #ff6464;
  font-family: Arial, sans-serif;
  font-size: 13px;
  margin: 0;
  min-height: 16px;
  text-align: center;
}
#join-table-submit {
  padding: 12px 36px; border-radius: 10px;
  border: 2px solid #a07a10;
  background: #f0c040;
  color: #2a2010;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 16px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
#join-table-submit:hover { filter: brightness(1.1); }
#join-table-submit:active { transform: scale(0.95); }

/* ─── MODE PICKER MODAL ──────────────────────────────── */
#mode-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 110;
}
#mode-modal {
  position: relative;
  width: 520px; max-width: 92vw;
  background: #3a3a3a;
  border: 2px solid #888;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  padding: 36px 44px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
}
#mode-close {
  position: absolute; top: 6px; right: 10px;
  background: transparent; border: none;
  color: #fff; cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 26px; font-weight: 900;
  line-height: 1; padding: 4px 8px;
  transition: transform 0.1s;
}
#mode-close:hover { transform: scale(1.15); }
#mode-close:active { transform: scale(0.9); }
#mode-title {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 6px;
  text-align: center;
}
.mode-option {
  width: 100%;
  padding: 18px 24px;
  border-radius: 12px;
  border: 3px solid;
  background: rgba(0, 0, 0, 0.55);
  font-family: 'Arial Black', Arial, sans-serif;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.mode-option:hover { transform: translateY(-1px); }
.mode-option:active { transform: scale(0.98); }
.mode-option-title {
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  line-height: 1.1;
}
.mode-option-sub {
  font-family: Arial, sans-serif;
  font-size: 13px; font-weight: normal;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}
.mode-quickplay {
  border-color: #2eaa52;
  color: #2eaa52;
  box-shadow: 0 0 16px rgba(46, 170, 82, 0.25);
}
.mode-quickplay:hover {
  background: rgba(46, 170, 82, 0.18);
  box-shadow: 0 0 28px rgba(46, 170, 82, 0.5);
}
.mode-domination {
  border-color: #d42a2a;
  color: #d42a2a;
  box-shadow: 0 0 16px rgba(212, 42, 42, 0.25);
}
.mode-domination:hover {
  background: rgba(212, 42, 42, 0.18);
  box-shadow: 0 0 28px rgba(212, 42, 42, 0.5);
}

/* ─── SCREEN LAYOUT ─────────────────────────────────── */
.screen {
  width: 1400px; height: 700px; background: #232c38;
  display: flex; flex-direction: row;
  overflow: hidden; border-radius: 8px;
  padding: 12px; gap: 20px;
}

/* ─── SIDEBAR ────────────────────────────────────────── */
.sidebar {
  width: 140px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 10px 6px;
  background: #232c38;
  border: 4px solid #888; border-radius: 10px;
}
/* Holds all player avatars; takes all available vertical space so the
   table-code label sits flush against the sidebar's bottom edge while the
   avatars distribute evenly across the rest of the column. */
.sidebar-players {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly;
  min-height: 0;
}
/* Wrapper around each avatar square + screen-name label, used in the sidebar. */
.player-slot {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
}

/* Table code label at the bottom of the sidebar (multiplayer only). */
.sidebar-table-code {
  padding: 8px 6px 2px;
  color: #ddd;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 12px; font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: help;
  user-select: none;
  transition: opacity 0.3s, color 0.3s;
}
.sidebar-table-code.full {
  opacity: 0.45;
  color: #aaa;
}

/* Stalemate counter — pinned to the LEFT of the combat bar, mirroring the
   Leave Table button style on the right. Three circles fill red after each
   round with no captures; once all three are lit it becomes a clickable
   "Sudden Death!" button. */
#stalemate-counter {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  border: 2px solid #555;
  background: transparent;
  cursor: default;
  transition: background 0.2s, border-color 0.2s, opacity 0.15s;
}
#stalemate-counter .stalemate-circle {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #888;
  background: transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
#stalemate-counter[data-rounds="1"] .stalemate-circle:nth-child(1),
#stalemate-counter[data-rounds="2"] .stalemate-circle:nth-child(-n+2),
#stalemate-counter[data-rounds="3"] .stalemate-circle {
  background: #d42a2a;
  border-color: #8a1a1a;
  box-shadow: 0 0 8px rgba(212, 42, 42, 0.6);
}
#stalemate-counter .stalemate-label {
  display: none;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}
/* When fully lit, the box becomes the Sudden Death button. */
#stalemate-counter[data-rounds="3"] {
  cursor: pointer;
  background: #d42a2a;
  border-color: #8a1a1a;
  box-shadow: 0 0 14px rgba(212, 42, 42, 0.55);
  padding: 8px 18px;
}
#stalemate-counter[data-rounds="3"] .stalemate-circle { display: none; }
#stalemate-counter[data-rounds="3"] .stalemate-label { display: inline; }
#stalemate-counter[data-rounds="3"]:hover { filter: brightness(1.1); }
#stalemate-counter[data-rounds="3"]:active { transform: translateY(-50%) scale(0.96); }

/* "Fill with AI Players" button — shown next to the "waiting on X players"
   message during the lobby wait, host-only. */
#fill-with-ai-btn {
  margin-left: 12px;
  padding: 10px 24px; border-radius: 10px;
  border: 3px solid #1a4f8a;
  background: #2a7fd4;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
#fill-with-ai-btn:hover { filter: brightness(1.15); }
#fill-with-ai-btn:active { transform: scale(0.96); }
.player-square {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  position: relative; opacity: 0.32;
  transition: opacity 0.3s, box-shadow 0.3s, transform 0.2s;
  border-radius: 50%;
  width: 80px; height: 80px;
}
.player-square.active-turn {
  opacity: 1; transform: scale(1.08);
  border-radius: 50%;
}
.player-square.active-turn::before {
  content: ''; position: absolute;
  top: -10px; left: -10px;
  width: calc(100% + 20px); height: calc(100% + 20px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent calc((100 - var(--turn-pct, 100)) * 1%),
    #fff calc((100 - var(--turn-pct, 100)) * 1%),
    #fff 100%
  );
  transform: scaleX(-1);
  z-index: -1;
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 54%, #000 62%, transparent 62%);
  mask: radial-gradient(circle, transparent 54%, #000 54%, #000 62%, transparent 62%);
}
.player-square.active-defender {
  opacity: 1;
}
.player-square.booted {
  opacity: 0.25;
  filter: grayscale(100%);
}
.avatar-wrap {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ring-color, #888);
}
.avatar-img {
  position: absolute;
  top: 4px; left: 4px;
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover; display: block;
}
.player-label {
  position: absolute; bottom: -18px; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.player-screen-name {
  text-align: center;
  color: #eee;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 10px;
  min-height: 16px; /* keeps spacing consistent when name is empty */
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 92px;
  opacity: 0.32;
  transition: opacity 0.3s;
}
/* Mirror the .player-square opacity states onto the screen-name label so the
   text dims/brightens in lockstep with the avatar. */
.player-slot:has(.player-square.active-turn) .player-screen-name,
.player-slot:has(.player-square.active-defender) .player-screen-name {
  opacity: 1;
}
.player-slot:has(.player-square.booted) .player-screen-name {
  opacity: 0.25;
}
.pcount {
  position: absolute; bottom: 2px; right: 2px;
  min-width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff; line-height: 1;
  padding: 0 4px;
  border: 2px solid #2e2e2e;
  transform-origin: center;
}
.pcount.pop {
  animation: pcountPop 0.28s ease-out;
}
@keyframes pcountPop {
  0%   { transform: scale(1);   box-shadow: 0 0 0 rgba(255,255,255,0); }
  40%  { transform: scale(1.35); box-shadow: 0 0 14px rgba(255,255,255,0.6); }
  100% { transform: scale(1);   box-shadow: 0 0 0 rgba(255,255,255,0); }
}

/* ─── MAIN + MAP ─────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.map-area {
  flex: 1; display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative;
}
canvas#mapCanvas { display: block; }
#game-title {
  display: block;
  max-width: 500px;
  height: auto;
  margin: 0;
}
.region-label {
  position: absolute;
  display: none; /* shown after positioning */
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: #252525;
  border: 2px solid #888;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 5;
  transition: border-color 0.3s;
}
.region-label img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.region-label span {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.region-bonus {
  margin-left: 4px;
  min-width: 32px; height: 26px;
  border-radius: 6px;
  background: #3a3a3a;
  border: 2px solid #2e2e2e;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px; font-weight: 900;
  padding: 0 6px;
  transition: background 0.3s;
}

.city-map-avatar {
  position: absolute;
  display: none; /* shown after positioning */
  width: 60px; height: 60px;
  border-radius: 50%;
  z-index: 5;
  transition: opacity 0.3s;
}
.city-map-avatar .city-circle {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid #888;
  background: #252525;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.city-map-avatar .city-circle img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.city-map-avatar .city-bonus {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  height: 20px;
  padding: 0 6px;
  gap: 5px;
  font-size: 10px;
}
.city-map-avatar .city-code {
  font-size: 10px;
}
.city-map-avatar .city-plus {
  font-size: 11px;
}

.city-avatar {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.1s;
}
.city-avatar:hover { transform: scale(1.04); }
.city-avatar:active { transform: scale(0.97); }
.city-circle {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 4px solid #888;
  background: #252525;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.city-circle img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.city-circle.city-text {
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 16px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.city-bonus {
  position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%);
  height: 22px;
  border-radius: 6px;
  background: #3a3a3a;
  border: 2px solid #2e2e2e;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  padding: 0 6px;
  gap: 5px;
  white-space: nowrap;
}
.city-code {
  font-size: 11px;
  letter-spacing: 0.04em;
}
.city-plus {
  font-size: 12px;
  opacity: 0.85;
}

#stats-section {
  width: 140px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 10px;
  background: #232c38;
  border: 4px solid #888; border-radius: 10px;
  overflow: hidden;
}
#hot-lanes-title {
  color: #fff;
  background: transparent;
  border: none;
  padding: 6px;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 12px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}
.stats-col {
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly;
  width: 100%;
  flex: 1;
  padding: 0 6px 10px;
  box-sizing: border-box;
}
.hot-lane {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  width: 100%;
}
/* Map chip — compact hot-lane variant positioned on the map canvas */
.hot-lane.map-chip {
  position: absolute;
  display: none; /* shown after positioning */
  width: 110px;
  z-index: 5;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}
.hot-lane.map-chip .hot-lane-img {
  max-width: 110px;
}
/* Badge bonus pill — grey box with black text pinned to bottom-right of badge */
.badge-bonus {
  position: absolute;
  bottom: 2px; right: 2px;
  min-width: 26px; height: 26px;
  border-radius: 6px;
  background: #bfbfbf;
  border: 2px solid #2e2e2e;
  display: flex; align-items: center; justify-content: center;
  color: #111;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px; font-weight: 900;
  line-height: 1;
  padding: 0 4px;
  pointer-events: none;
}

/* Badges — 12.5% larger than lane-style map chips, with transparent-aware stroke */
.hot-lane.map-chip[data-lane="can2mex"],
.hot-lane.map-chip[data-lane="coast2coast"] {
  width: 124px;
  filter: none; /* drop off the default panel shadow — each badge img gets its own via JS */
}
.hot-lane.map-chip[data-lane="can2mex"] .hot-lane-img,
.hot-lane.map-chip[data-lane="coast2coast"] .hot-lane-img {
  max-width: 124px;
  border: none;
  border-radius: 0;
  background: transparent;
}
.hot-lane.map-chip .hot-lane-label {
  font-size: 10px;
  padding: 3px 6px;
  margin-top: -8px;
}
.hot-lane.map-chip .hot-lane-plus {
  font-size: 11px;
}
.hot-lane-top-label {
  background: #3a3a3a;
  border: 2px solid #888;
  border-radius: 8px;
  padding: 3px 8px;
  margin-bottom: -8px;
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 10px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.hot-lane-img {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 3px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
.hot-lane-label {
  margin-top: 0;
  position: relative;
  z-index: 1;
  background: #3a3a3a;
  border: 2px solid #888;
  border-radius: 8px;
  padding: 4px 8px;
  color: #fff;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 11px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.hot-lane-plus {
  opacity: 0.85;
  margin-left: 2px;
}
.stats-btn {
  padding: 8px 14px; border-radius: 8px; border: 1.5px solid #3a3a3a;
  background: #252525; color: #fff; cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.06em; transition: filter 0.2s, transform 0.1s;
}
.stats-btn:hover { filter: brightness(1.3); }
.stats-btn:active { transform: scale(0.95); }
#log {
  position: absolute; bottom: 4px; left: 6px; right: 6px;
  font-size: 10px; color: rgba(255,255,255,0.6);
  font-family: Arial, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── COMBAT BAR ─────────────────────────────────────── */
.combat-bar {
  position: relative;
  height: 65px; display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  gap: 8px; padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08); flex-shrink: 0;
  border: 4px solid #888; border-radius: 10px;
}
#quit-btn {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  padding: 8px 18px; border-radius: 8px;
  border: 2px solid #555;
  background: transparent;
  color: #777;
  opacity: 0.65;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}
#quit-btn:hover {
  background: #c42a2a;
  color: #fff;
  border-color: #8a1a1a;
  opacity: 1;
}
#quit-btn:active { transform: translateY(-50%) scale(0.95); }
.combat-panel {
  width: 300px; flex-shrink: 0; height: 100%;
  border-radius: 8px; border: 2px solid #3a3a3a; background: #252525;
  display: flex; align-items: center; padding: 0 8px; gap: 4px;
  transition: border-color 0.3s, background 0.3s;
}
.combat-panel.active-atk { border-color: #2a7fd4; background: #1a2a3a; }
.combat-panel.active-def { border-color: #e87a2a; background: #1a2a3a; }
.combat-panel.winner { border-color: gold; }
/* Loser of the war: no visual change — the panel stays at 100% just like the
   winner. The .loser class is kept so JS knows to keep the panel visible
   after the battle ends (until the next hex is clicked or End Turn appears). */

#atk-dice, #def-dice {
  display: flex; gap: 4px; align-items: center; flex: 1;
}
.die-box {
  width: 30px; height: 30px; border-radius: 8px;
  background: #f0f0ee; border: 1.5px solid #aaa;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #111;
}
.die-box.rolling { background: #ffe066; border-color: #c8a800; }
.die-box.dead { background: #2e2e3a; border-color: #444; color: #555; font-size: 11px; }
.total-box {
  margin-left: auto; min-width: 32px; height: 32px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: rgba(255,255,255,0.25); padding: 0 6px;
}
.total-box.active { color: #fff; }
.panel-label {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: #252525;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
  transition: border-color 0.3s, box-shadow 0.25s;
}
/* White glow halo around the round-winner's avatar */
.panel-label.lit {
  box-shadow: 0 0 0 2px #fff, 0 0 14px 2px rgba(255, 255, 255, 0.65);
}
.panel-avatar {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0;
  transition: opacity 0.2s, filter 0.2s;
}
.panel-avatar.visible { opacity: 1; }
.panel-avatar.dim { filter: grayscale(0.6) brightness(0.55); }

/* ─── END TURN BUTTON ────────────────────────────────── */
#end-turn-combat-wrap {
  display: none; width: 300px; flex-shrink: 0; height: 100%;
  align-items: center; justify-content: center;
}
#end-turn-combat {
  width: 100%; height: 100%;
  border-radius: 8px; border: 1.5px solid #3a3a3a; background: #252525;
  cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 16px; font-weight: 900;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: border-color 0.3s, background 0.3s, filter 0.2s, transform 0.1s;
  -webkit-appearance: none; appearance: none;
}
#end-turn-combat:hover { filter: brightness(1.15); }
#end-turn-combat:active { transform: scale(0.97); }
#end-turn-combat .results-label {
  text-align: left;
}
#end-turn-combat .results-value {
  margin-left: auto; text-align: right;
}