/* Dramatic Style Overhaul — Applies to original HTML/PHP structure */
:root {
  --main-background: #121417;
  --bg-dark: #1f2228;
  --bg-darkgray: #2a2d33;
  --bg-lightgray: #343842;
  --color-blue: #3399ff;
  --color-red: #ff4477;
  --color-green: #2a7fae;
  --glow-blue: 0 0 8px rgba(51,153,255,0.5);
  --glow-red: 0 0 8px rgba(255,68,119,0.5);
  --glow-green: 0 0 6px rgba(42, 127, 174, 0.4);
  --font-main: 'Orbitron', Arial, sans-serif;
}

body {
  max-width: 768px;
  margin: auto;
  background: var(--main-background);
  font-family: var(--font-main);
  color: #e0e0e0;
  overflow-y: scroll;
  padding: 1rem;
}

a {
  color: #b0dfff;
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}
a:hover {
  color: #ffffff;
  text-shadow: var(--glow-blue);
}

.topnav {
  overflow: hidden;
  background-color: var(--bg-dark);
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bg-lightgray);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(16, 45, 212, 0.616);
}
.topnav img {
  height: 50px;
  width: 50px;
  padding: 0 5px;
  animation: rotation 8s infinite linear;
}
.topnav a:not(.img) {
  color: #ffffff;
  font-size: 17px;
  padding: 16px 8px;
  text-decoration: none;
  transition: background 0.2s ease;
  border-radius: 6px;
}
.topnav a:hover {
  background-color: var(--color-green);
  box-shadow: var(--glow-green);
}
.topnav a.active {
  background-color: var(--color-blue);
  box-shadow: var(--glow-blue);
}
#navinfo:empty {
  display: none;
}

#navinfo {
  margin-left: auto;
  background-color: var(--color-blue);
  color: #fff;
  padding: 14px 12px;
  font-size: 17px;
  border-radius: 6px;
  box-shadow: var(--glow-blue);
}

h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bg-lightgray);
  text-shadow: 0 0 6px rgba(255,255,255,0.15);
}

#wrs h2 { border-color: var(--color-blue); color: var(--color-blue); text-shadow: var(--glow-blue); }
#firsts h2 { border-color: var(--color-red); color: var(--color-red); text-shadow: var(--glow-red); }

#wrs div, #firsts div,
#playerscores-graph, #status {
  transition: all 0.2s ease;
}
#wrs div:hover, #firsts div:hover,
#playerscores-graph:hover, #status:hover {
  transform: scale(1.02);
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.2);
}

/* Table Enhancements */

table.msg {
  background-color: black;
  width: 100%;
  border-radius: 6px;
  padding: 10px;
}

.table-container {
    border-radius: 6px;
    overflow: hidden;  /* clips the table corners */
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Align helpers */
table.Black th.align-left,
table.Black td.align-left {
  text-align: left;
}
table.Black th.align-center,
table.Black td.align-center {
  text-align: center;
}
table.Black th.align-right,
table.Black td.align-right {
  text-align: right;
  padding-right: 20px;
}
/* table.Black {
  background-color: var(--bg-dark);   
  border-collapse: collapse;
  border-radius: 6px;
  width: 100%;
  margin-top: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
} */
table.Black {
  border-collapse: separate; /* must be separate for border-radius */
  border-spacing: 0;         /* remove gaps between cells */
  border-radius: 6px;        /* rounds the entire table */
  overflow: hidden;          /* ensures corners clip cells */
  background-color: var(--bg-dark);
  width: 100%;
  margin-top: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

table.Black th, table.Black td {
  padding: 10px;
  color: #d0d0d0;  
}
table.Black a {
  color: #a8d8ff;
}
table.Black a:hover {
  color: #ffffff;
  text-shadow: var(--glow-blue);
}
table.Black thead {
  background: var(--bg-dark);
  color: #fff;
  font-weight: bold;
}
table.Black tr:nth-child(even) {
  background-color: var(--bg-lightgray);
}
table.Black tr:nth-child(odd) {
  background-color: var(--bg-darkgray);
}
table.Black th.thlink:hover {
  background-color: var(--color-green);
  cursor: pointer;
}
th.active {
  background-color: var(--color-blue);
  color: white;
  box-shadow: var(--glow-blue);
}
table.Black td.tdlink {
  cursor: pointer;
  text-decoration: underline;
}

table tfoot{
	white-space: nowrap;		
	text-decoration:bold;
	font-size:15px;
}

span.link{
	text-align:left;
	cursor:pointer;
	text-decoration:underline;
	padding-left:5px;
	color:var(--color-red);
	font-size:14px;
}

img.link {
	cursor:pointer;
	color:var(--color-red);
}

/* Inputs */
input.inputusers, input.mapsearch, input.playersearch {
  max-width: 125px;
  background-color: var(--bg-dark);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-size: 16px;
  transition: background 0.1s ease;
}
input.inputusers:hover,
input.mapsearch:hover,
input.playersearch:hover,
input.inputusers:focus,
input.mapsearch:focus,
input.playersearch:focus {
  background-color: var(--color-green);
  outline: none;
}

/* Footer */
#footer {
  text-align: center;
  padding: 1rem;
  color: #aaa;
  font-size: 14px;    
  background: var(--main-background);  
}

/* for arrow key navigation for prev/next map browsing */
.mapnav-button {
  background: linear-gradient(to right, #1e2a38, #2b3a4a);
  color: #b0dfff;
  border: 1px solid #3399ff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: 'Orbitron', Arial, sans-serif;
  cursor: pointer;
  margin: 4px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 6px rgba(51, 153, 255, 0.3);
}

.mapnav-button:hover {
  background: #3399ff;
  color: white;
  box-shadow: 0 0 12px rgba(51, 153, 255, 0.5);
  transform: translateY(-1px);
}

select.mapnav-button,
input.mapsearch {
  background-color: #1e1f22;
  color: white;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
}

input.mapsearch::placeholder {
  color: #888;
}

input[type="checkbox"] {
  accent-color: #3399ff;
}


hr {
	background-color:rgb(0, 0, 0);
	height:2px;
	border:none;
	position:sticky;
	top:0;
}

  .zoom {
	padding: 0px;	
	transition: transform .2s; /* Animation */
	width: 30px;
	height: 17px;
	margin: 0;
  }
  
  .zoom:hover {
	transform: scale(15); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

  button.page-nav {
  background: linear-gradient(to right, #1f2733, #2e3a4a);
  color: #b0dfff;
  border: 1px solid #3399ff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(51,153,255,0.3);
  transition: all 0.2s ease-in-out;
}
button.page-nav:hover {
  background: #3399ff;
  color: white;
  box-shadow: 0 0 10px rgba(51,153,255,0.6);
  transform: translateY(-1px);
}

#swipe-hint {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.95);
  color: #b0dfff;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 0 0 12px rgba(51, 153, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

#swipe-hint.show {
  opacity: 1;
  pointer-events: auto;
}

#swipe-hint .arrow {
  font-size: 18px;
  animation: pulse 1s infinite alternate ease-in-out;
  color: #3399ff;
}

#swipe-hint .arrow:nth-child(1) {
  animation-delay: 0.1s;
}
#swipe-hint .arrow:nth-child(2) {
  animation-delay: 0.5s;
}

#swipe-hint .swipe-text {
  white-space: nowrap;
}

.pagination-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 4px;
}
/* .pagination-container .mapnav-button {
  min-width: 32px;
  padding: 4px 8px;
  text-align: center;
  font-size: 11px;
  background: #1f1f1f;
  color: #3399ff;
  border: 1px solid #3399ff;
  cursor: pointer;
  border-radius: 3px;
} */
/* .pagination-container .mapnav-button {
  min-width: 32px;
  max-width: 32px;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
} */
#map_count {
  min-width: auto;
  max-width: none;
  padding: 4px 8px;
  font-weight: bold;
  cursor: default;
}
.pagination-container .pagination-ellipsis {
  display: inline-block;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
}
.pagination-container .mapnav-button:hover {
  background: #3399ff;
  color: white;
}
.pagination-container .mapnav-button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
.map-count-badge {
  margin-left: auto; /* push it to the far right in flex container */
  padding: 4px 8px;
  border-radius: 12px;
  background: linear-gradient(145deg, #3399ff, #267acc);
  color: white;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.player-card {
  border: 2px solid var(--rank-colour);
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    var(--rank-colour) 0%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0.6) 100%
    /*rgba(0,0,0,0.15) 100%*/
  );
  padding: 16px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.player-card .table-wrapper table {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}

.player-card th,
.player-card td {
  padding: 8px 10px;
  font-size: 14px;
  color: #f0f0f0;
}

.player-card th {
  background-color: rgba(255,255,255,0.08);
}

.player-card th.highlighted {
  background-color: var(--rank-colour);
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.player-card td.tdlink {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.player-card td.tdlink:hover {
  background-color: var(--rank-colour);
}

.player-card td.tdlink.no-hover,
.player-card td.tdlink.no-hover:hover {
  background-color: transparent !important;
}

.player-card td.tdlink.selected {
  background-color: var(--rank-colour);
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* search bar */
/* .search-box {
    width:100%; 
    background-color: var(--bg-dark);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 16px;
    transition: background 0.1s ease;
} */

.search-box {
    width: 100%;
    box-sizing: border-box;  /* include padding/border in width */
    background-color: var(--bg-dark);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid var(--bg-lightgray);
    box-shadow: 0 2px 10px rgba(16, 45, 212, 0.616);
    transition: background 0.1s ease;
}

.search-box:hover,.search-box:focus {
  background-color: var(--color-green);
  outline: none;
}
.results-box {
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;    
    background-color: var(--bg-dark);
    z-index: 1000;
    scrollbar-width: thin;
}
.results-box::-webkit-scrollbar {
    width: 6px; /* Chrome/Safari */
}
.results-box::-webkit-scrollbar-thumb {
    background-color: var(--color-green);
    border-radius: 3px;
}
.result {
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}
.result:hover {
    background: var(--color-green);
    /*background: #f0f0f0;*/
}
.result.highlight {
    background-color: var(--color-green);
    color: white;
}
.label {
    font-size: 12px;
    color: #666;
}

/* hover card for basic player stats */

/* .player-card {
    position: absolute;
    z-index: 1000;
    background: #1e1e1e;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
    font-size: 14px;
    display: none;
    width: 220px;
}

.player-card h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: bold;
}

.player-card .stat {
    margin: 3px 0;
    font-size: 13px;
} */

.player-hovercard {
  position: absolute;
  background: #1e1e1e;
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  font-size: 14px;
  z-index: 9999;
  display: none;
  pointer-events: auto;
  transition: opacity 0.15s ease;
  max-width: 260px;
}

.player-hovercard-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.player-hovercard-header img.flag {
  width: 22px;
  height: 15px;
  margin-right: 8px;
  border: 1px solid #333;
  border-radius: 3px;
}

.player-hovercard-header span.name {
  font-size: 16px;
  font-weight: bold;
}

@keyframes pulse {
  0% { transform: translateX(0); opacity: 0.5; }
  100% { transform: translateX(4px); opacity: 1; }
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}