/* ============================================
   CARIBBEAN PIRATES ONLINE!! (1997 EDITION)
   Best viewed in Netscape Navigator 4.0
   ============================================ */

* { box-sizing: border-box; }

@font-face {
  font-family: "BrowserFont";
  src: local("Verdana"), local("Tahoma"), local("Arial");
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Verdana", "Tahoma", "Arial", sans-serif;
  color: #fff5cf;
  /* tiled wood-plank background */
  background-color: #5b3416;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' fill='%236b3e1f'/%3E%3Crect width='160' height='6' y='0' fill='%234a2a14'/%3E%3Crect width='160' height='4' y='50' fill='%234a2a14'/%3E%3Crect width='160' height='6' y='94' fill='%234a2a14'/%3E%3Crect width='4' height='100' x='40' fill='%23553218' opacity='0.55'/%3E%3Crect width='4' height='100' x='110' fill='%23553218' opacity='0.55'/%3E%3Cellipse cx='30' cy='25' rx='8' ry='3' fill='%234a2a14' opacity='0.65'/%3E%3Cellipse cx='130' cy='75' rx='10' ry='3.5' fill='%234a2a14' opacity='0.65'/%3E%3Cellipse cx='80' cy='30' rx='5' ry='2' fill='%234a2a14' opacity='0.5'/%3E%3C/svg%3E");
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

#root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* =========================
   AD AREAS
   ========================= */
.ad-area {
  flex: 0 0 90px;
  min-height: 90px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-area > .adsbygoogle {
  width: 100%;
  min-height: 90px;
}

/* =========================
   GAME FRAME
   ========================= */
#game-frame {
  flex: 1 1 auto;
  position: relative;
  padding: 8px;
  min-height: 0;
  background: #2a1f17;
  border-top: 4px ridge #8b5a2b;
  border-bottom: 4px ridge #8b5a2b;
}

#game-container {
  position: relative;
  width: 100%;
  height: 100%;
  /* Dark wood-plank texture sits behind the capped canvas so the
     surrounding area isn't a flat colour on big monitors. Same SVG idiom as
     the page background, but darker tones so the canvas reads as the bright
     focal element on top. */
  background-color: #2a1810;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' fill='%23321d10'/%3E%3Crect width='160' height='6' y='0' fill='%23200f08'/%3E%3Crect width='160' height='4' y='50' fill='%23200f08'/%3E%3Crect width='160' height='6' y='94' fill='%23200f08'/%3E%3Crect width='4' height='100' x='40' fill='%231a0e06' opacity='0.65'/%3E%3Crect width='4' height='100' x='110' fill='%231a0e06' opacity='0.65'/%3E%3Cellipse cx='30' cy='25' rx='8' ry='3' fill='%23200f08' opacity='0.7'/%3E%3Cellipse cx='130' cy='75' rx='10' ry='3.5' fill='%23200f08' opacity='0.7'/%3E%3Cellipse cx='80' cy='30' rx='5' ry='2' fill='%23200f08' opacity='0.55'/%3E%3C/svg%3E");
  overflow: hidden;
}

#game-container canvas {
  display: block;
  /* Gold ridge frame around the canvas itself (not the container) plus a
     soft drop shadow so the canvas reads as the inset focal panel on top of
     the wood-plank surround. `outline` is used over `border` so it doesn't
     shift Phaser's autoCenter offset. */
  outline: 6px ridge #ffd400;
  outline-offset: -1px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}

/* =========================
   LANDING SIDE PANELS
   ========================= */
#news-panel {
  position: absolute;
  top: 110px;
  bottom: 110px;
  left: 24px;
  z-index: 21;
  width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff5cf;
  color: #2a1f17;
  border: 4px ridge #c0392b;
  box-shadow: 4px 4px 0 #000;
  font-family: "Verdana", sans-serif;
  font-size: 1rem;
}

.news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #c0392b 0%, #8a1d12 100%);
  color: #ffd400;
  font-family: Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-bottom: 3px ridge #ffd400;
  flex: 0 0 auto;
}

.news-scroll {
  flex: 1 1 0;
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 0;
}

.news-empty {
  margin: 0;
  padding: 14px;
  color: #6c4d2a;
  font-size: 1rem;
  text-align: center;
}

.news-list {
  margin: 0;
  padding: 8px 10px 10px;
  list-style: none;
}

.news-item {
  padding: 8px 4px;
  border-bottom: 1px dashed #c8a878;
}
.news-item:last-child { border-bottom: 0; }

.news-item-ts {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  color: #8a1d12;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.news-item-body {
  font-family: "Verdana", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  word-wrap: break-word;
}

#leaderboard-panel {
  position: absolute;
  top: 110px;
  bottom: 110px;
  right: 24px;
  z-index: 21;
  width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff5cf;
  color: #2a1f17;
  border: 4px ridge #c0392b;
  box-shadow: 4px 4px 0 #000;
  font-family: "Verdana", sans-serif;
  font-size: 1rem;
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #c0392b 0%, #8a1d12 100%);
  color: #ffd400;
  font-family: Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-bottom: 3px ridge #ffd400;
  flex: 0 0 auto;
}

.leaderboard-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  background: #e8d5aa;
  border-bottom: 1px solid #c8a878;
}

.leaderboard-filters button {
  padding: 6px 8px;
  background: #fffaf0;
  border: 3px outset #c8a878;
  color: #2a1f17;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}

.leaderboard-filters button.selected {
  background: #ffd400;
  border-style: inset;
}

.leaderboard-body {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}

.leaderboard-empty {
  margin: 0;
  padding: 14px;
  color: #6c4d2a;
  font-size: 1rem;
  text-align: center;
}

.leaderboard-list {
  margin: 0;
  padding: 8px 10px 10px;
  list-style: none;
}

.leaderboard-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px dashed #c8a878;
}
.leaderboard-item:last-child { border-bottom: 0; }

.leaderboard-rank {
  color: #8a1d12;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1rem;
}

.leaderboard-nick {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.leaderboard-score {
  color: #8a1d12;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1rem;
}

/* Tighten the panel position when the overlay is short on vertical space.
   The login card is centered, so on smaller windows the panels can crowd the
   reserved top ad area. Pull them in slightly so they don't visually fight. */
@media (max-height: 780px) {
  #news-panel,
  #leaderboard-panel {
    top: 100px;
    bottom: 80px;
  }
}

/* On narrower desktops the centered 540px login card would otherwise
   overlap with the side panels — shrink the panels rather than push the
   card around. The mobile blocker takes over below 900px so we don't
   need to handle that range here. */
@media (max-width: 1260px) {
  #news-panel {
    width: 260px;
    left: 14px;
  }

  #leaderboard-panel {
    width: 260px;
    right: 14px;
  }
}

@media (max-width: 1080px) {
  #news-panel {
    width: 220px;
  }

  #leaderboard-panel {
    width: 220px;
  }
}

@media (max-width: 980px) {
  #news-panel,
  #leaderboard-panel {
    display: none;
  }
}

/* =========================
   LOGIN OVERLAY
   ========================= */
.overlay {
  position: fixed;
  inset: 0;
  background-color: #1f6b91;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Cpath d='M0 14 Q60 6 120 14 T240 14' stroke='%234aa0c9' stroke-width='1.5' fill='none' opacity='0.55'/%3E%3Cpath d='M0 36 Q60 28 120 36 T240 36' stroke='%234aa0c9' stroke-width='1.2' fill='none' opacity='0.45'/%3E%3Cpath d='M0 58 Q60 50 120 58 T240 58' stroke='%234aa0c9' stroke-width='1' fill='none' opacity='0.35'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #2c8aba 0%, #1f6b91 55%, #0c3552 100%);
  background-repeat: repeat, no-repeat;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  overflow: hidden;
}

.overlay > .login-card,
.overlay > .interstitial-card {
  margin: auto;
}

.overlay-ad {
  width: 100%;
}

.overlay.hidden { display: none; }

/* Landing-page overlay sits over the live Phaser canvas (which runs the
   LandingScene flotilla) so the painted sea-pattern fallback is removed —
   real animated water, gulls and ships show through instead. A faint
   vignette darkens the top and bottom so reserved ad areas and the card
   edges stay legible against bright sea highlights. */
#login-overlay {
  background-color: transparent;
  background-image:
    linear-gradient(180deg,
      rgba(10, 28, 44, 0.55) 0%,
      rgba(10, 28, 44, 0.0) 22%,
      rgba(10, 28, 44, 0.0) 78%,
      rgba(10, 28, 44, 0.55) 100%);
}

.login-card {
  background: #fff5cf;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23f5ecd6'/%3E%3Ccircle cx='10' cy='20' r='1.6' fill='%23c8a878' opacity='0.45'/%3E%3Ccircle cx='40' cy='35' r='1.2' fill='%23c8a878' opacity='0.4'/%3E%3Ccircle cx='55' cy='10' r='1.4' fill='%23c8a878' opacity='0.35'/%3E%3Ccircle cx='70' cy='60' r='1.8' fill='%23c8a878' opacity='0.45'/%3E%3Ccircle cx='25' cy='65' r='1.2' fill='%23c8a878' opacity='0.4'/%3E%3C/svg%3E");
  border: 6px outset #c0392b;
  box-shadow: 8px 8px 0 #000;
  width: 540px;
  max-width: 100%;
}

.login-card-banner {
  background: linear-gradient(180deg, #c0392b 0%, #8a1d12 100%);
  color: #ffd400;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  padding: 10px;
  border-bottom: 4px ridge #ffd400;
  text-shadow: 2px 2px 0 #000;
}

.login-card-inner {
  padding: 18px 22px 20px;
  text-align: center;
}

.hero-line {
  font-family: "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 6px 0 12px;
  color: #000;
}

.world-select-label {
  display: block;
  margin: 14px 0 6px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: #3b2614;
  text-shadow: 1px 1px 0 #fff5cf;
}

.world-select {
  width: 100%;
  padding: 8px 10px;
  background: #fffaf0;
  border: 4px inset #c8a878;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1rem;
  color: #2a1f17;
  cursor: pointer;
}

.remember-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-family: Verdana, sans-serif;
  font-size: 1rem;
  color: #3b2614;
  cursor: pointer;
}

.remember-row input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.big-button {
  margin-top: 16px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #ffd400 0%, #c0392b 100%);
  color: #fff;
  border: 5px outset #ffd400;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-shadow: 2px 2px 0 #000;
  text-transform: uppercase;
}

.big-button:hover {
  background: linear-gradient(180deg, #c0392b 0%, #ffd400 100%);
}

.big-button:active {
  border-style: inset;
}

.big-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.7;
}
.big-button:disabled:hover {
  background: linear-gradient(180deg, #ffd400 0%, #c0392b 100%);
}

.server-status-hint {
  margin-top: 10px;
  font-family: "Courier New", monospace;
  font-size: 1rem;
  color: #6c4d2a;
  letter-spacing: 0.04em;
}

/* =========================
   INTERSTITIAL
   ========================= */
.interstitial-card {
  background: #1a1a1a;
  border: 6px outset #ffd400;
  padding: 16px;
  text-align: center;
  box-shadow: 8px 8px 0 #000;
}

.interstitial-banner {
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #ffd400;
  font-size: 1.25rem;
  letter-spacing: 0.4em;
  margin-bottom: 8px;
}

/* =========================
   MOBILE BLOCKER
   ========================= */
#mobile-blocker {
  display: none;
}

@media (max-width: 900px), (max-height: 600px), (pointer: coarse) {
  #mobile-blocker {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #08222e;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23081e2c'/%3E%3Ccircle cx='20' cy='30' r='1' fill='%23ffd400'/%3E%3Ccircle cx='80' cy='10' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='40' r='1' fill='%23ffd400'/%3E%3Ccircle cx='40' cy='90' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='180' cy='110' r='1' fill='%23ffd400'/%3E%3Ccircle cx='60' cy='150' r='1.4' fill='%23ffffff'/%3E%3Ccircle cx='130' cy='170' r='1' fill='%23ffd400'/%3E%3C/svg%3E");
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  /* Hide everything else on mobile */
  body > *:not(#mobile-blocker) {
    display: none !important;
  }
}

.mobile-card {
  background: #fff5cf;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23f5ecd6'/%3E%3Ccircle cx='10' cy='20' r='1.6' fill='%23c8a878' opacity='0.45'/%3E%3Ccircle cx='40' cy='35' r='1.2' fill='%23c8a878' opacity='0.4'/%3E%3Ccircle cx='55' cy='10' r='1.4' fill='%23c8a878' opacity='0.35'/%3E%3Ccircle cx='70' cy='60' r='1.8' fill='%23c8a878' opacity='0.45'/%3E%3C/svg%3E");
  border: 6px outset #c0392b;
  box-shadow: 8px 8px 0 #000;
  padding: 0 0 24px;
  text-align: center;
  max-width: 92%;
  color: #2a1f17;
  font-family: "Verdana", sans-serif;
}

.mobile-banner {
  background: linear-gradient(180deg, #c0392b 0%, #8a1d12 100%);
  color: #ffd400;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  padding: 10px 12px;
  border-bottom: 4px ridge #ffd400;
  text-shadow: 2px 2px 0 #000;
}

.mobile-card h2 {
  font-family: "Times New Roman", serif;
  margin: 16px 16px 8px;
  font-size: 1.25rem;
}

.mobile-card p {
  margin: 8px 22px;
  font-size: 1rem;
}

.mobile-tip {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  color: #6c4d2a;
}

/* =========================
   MAINTENANCE BLOCKER
   ========================= */
#maintenance-blocker.hidden { display: none; }

#maintenance-blocker {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #08222e;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23081e2c'/%3E%3Ccircle cx='20' cy='30' r='1' fill='%23ffd400'/%3E%3Ccircle cx='80' cy='10' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='40' r='1' fill='%23ffd400'/%3E%3Ccircle cx='40' cy='90' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='180' cy='110' r='1' fill='%23ffd400'/%3E%3Ccircle cx='60' cy='150' r='1.4' fill='%23ffffff'/%3E%3Ccircle cx='130' cy='170' r='1' fill='%23ffd400'/%3E%3C/svg%3E");
  align-items: center;
  overflow: auto;
}

#maintenance-blocker > .maintenance-card {
  margin: auto;
}

.maintenance-card {
  background: #fff5cf;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23f5ecd6'/%3E%3Ccircle cx='10' cy='20' r='1.6' fill='%23c8a878' opacity='0.45'/%3E%3Ccircle cx='40' cy='35' r='1.2' fill='%23c8a878' opacity='0.4'/%3E%3Ccircle cx='55' cy='10' r='1.4' fill='%23c8a878' opacity='0.35'/%3E%3Ccircle cx='70' cy='60' r='1.8' fill='%23c8a878' opacity='0.45'/%3E%3C/svg%3E");
  border: 6px outset #b8860b;
  box-shadow: 8px 8px 0 #000;
  padding: 0 0 24px;
  text-align: center;
  max-width: 460px;
  color: #2a1f17;
  font-family: "Verdana", sans-serif;
}

.maintenance-banner {
  background: linear-gradient(180deg, #b8860b 0%, #6b4d05 100%);
  color: #ffd400;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  padding: 10px 12px;
  border-bottom: 4px ridge #ffd400;
  text-shadow: 2px 2px 0 #000;
}

.maintenance-card h2 {
  font-family: "Times New Roman", serif;
  margin: 16px 16px 8px;
  font-size: 1.25rem;
}

.maintenance-card p {
  margin: 8px 22px;
  font-size: 1rem;
}

.maintenance-tip {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  color: #6c4d2a;
}

/* =========================
   RUN RESULTS LEADERBOARD
   --------------------------
   DOM overlay above the Phaser canvas, replaces the old in-canvas
   ResultsScene. All font / spacing values use rem so the leaderboard
   scales with the browser's root font size — at 16 px root the card
   sits around 38 rem wide; at 20 px (zoomed-in user) it grows to
   ~48 px wide proportionally without the table going scrolly. Stuff
   that shouldn't scale (border thickness, drop shadow offsets, the
   1 px row dividers) stays in px.
   ========================= */
.run-results-card {
  background: #f5ecd6;
  border: 0.5rem solid #c0392b;
  box-shadow: 0.5rem 0.5rem 0 #000;
  padding: 1.25rem 1.5rem;
  min-width: 28rem;
  max-width: min(90vw, 50rem);
  max-height: 90vh;
  overflow-y: auto;
  color: #2a1f17;
  font-family: "Verdana", "Tahoma", "Arial", sans-serif;
}

.run-results-banner {
  background: #c0392b;
  color: #ffd400;
  border: 0.25rem solid #ffd400;
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
}

.run-results-champion {
  font-family: "Georgia", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 0.75rem;
  color: #3b2614;
}

.run-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.run-results-table thead th {
  text-align: left;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6c4d2a;
  border-bottom: 2px solid #6c4d2a;
  padding: 0.35rem 0.5rem;
}

.run-results-table tbody td {
  font-family: "Courier New", monospace;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #d8c4a0;
  vertical-align: middle;
}

.run-results-table tbody tr:last-child td {
  border-bottom: none;
}

.run-results-table .col-rank {
  width: 2.5rem;
  font-weight: bold;
}

.run-results-table .col-score,
.run-results-table .col-gold,
.run-results-table .col-kills,
.run-results-table .col-deaths,
.run-results-table .col-tier {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.run-results-table .col-nick {
  font-family: "Verdana", "Tahoma", "Arial", sans-serif;
  font-weight: bold;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-results-table .col-favship {
  font-family: "Georgia", serif;
  font-style: italic;
  color: #3b2614;
  white-space: nowrap;
}

.run-results-table tbody tr:first-child {
  background: rgba(192, 57, 43, 0.08);
}

.run-results-empty {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  text-align: center;
  padding: 1.5rem 0;
  color: #6c4d2a;
}

.run-results-countdown {
  margin-top: 1rem;
  text-align: center;
  font-family: "Georgia", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1rem;
  color: #6c4d2a;
}

/* =========================
   IN-GAME PLAYER STATS
   ========================= */
.player-stats-overlay {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  background: rgba(10, 28, 44, 0.35);
}

.player-stats-card {
  width: min(92vw, 48rem);
  max-height: 80vh;
  overflow-y: auto;
  background: #f5ecd6;
  color: #2a1f17;
  border: 0.5rem ridge #c0392b;
  box-shadow: 0.5rem 0.5rem 0 #000;
  padding: 1rem 1.25rem;
  font-family: "Verdana", "Tahoma", "Arial", sans-serif;
}

.player-stats-banner {
  background: #2a1f17;
  color: #ffd400;
  border: 0.25rem solid #ffd400;
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.player-stats-count,
.player-stats-hint,
.player-stats-empty {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  color: #6c4d2a;
  text-align: center;
}

.player-stats-count {
  margin-bottom: 0.75rem;
}

.player-stats-empty {
  padding: 1.5rem 0;
}

.player-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.player-stats-table thead th {
  text-align: left;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6c4d2a;
  border-bottom: 2px solid #6c4d2a;
  padding: 0.35rem 0.5rem;
}

.player-stats-table tbody td {
  font-family: "Courier New", monospace;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #d8c4a0;
  vertical-align: middle;
}

.player-stats-table tbody tr:last-child td {
  border-bottom: none;
}

.player-stats-table tbody tr.has-bounty td {
  background: rgba(192, 57, 43, 0.16);
  color: #8a1d12;
}

.player-stats-table .col-rank {
  width: 2.5rem;
  font-weight: bold;
}

.player-stats-table .col-kills,
.player-stats-table .col-deaths,
.player-stats-table .col-bounty {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.player-stats-table .col-nick {
  font-family: "Verdana", "Tahoma", "Arial", sans-serif;
  font-weight: bold;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-stats-hint {
  margin-top: 0.75rem;
}