:root{
  --hs-font-title: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hs-font-body: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --hs-bg1: #eaf3fb;
  --hs-bg2: #b7d4ea;

  --hs-panel: rgba(255,255,255,0.78);
  --hs-panel2: rgba(255,255,255,0.86);

  --hs-stroke: rgba(85,120,145,0.25);
  --hs-text: #2a3a45;

  --hs-score: #e1862b;
}

/* Fullscreen page */
.hs-page{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--hs-text);
  background: linear-gradient(180deg, var(--hs-bg1), var(--hs-bg2));
}

/* Background (your file) */
.hs-bg{
  position: absolute;
  inset: 0;
  background-image: url("/images/hsbg.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  pointer-events: none;
}

/* Header: centered logo */
.hs-top{
  position: relative;
  z-index: 2;
  padding: 18px 18px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Bigger centered logo */
.hs-logo{
  height: 120px;
  width: auto;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.14));
}

/* Game name pill */
.hs-game-name{
  font-family: var(--hs-font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(80,115,140,0.25);
  backdrop-filter: blur(6px);
}

/* Close button top-right */
.hs-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(80,115,140,0.30);
  background: rgba(255,255,255,0.78);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .08s ease, background .15s ease;
}
.hs-close:hover{ background: rgba(255,255,255,0.88); }
.hs-close:active{ transform: scale(0.98); }

/* Main area */
.hs-main{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: start center;
  padding: 10px 16px 40px;
}

/* Scoreboard panel */
.hs-board{
  width: min(920px, calc(100vw - 32px));
  border-radius: 18px;
  background: linear-gradient(180deg, var(--hs-panel2), var(--hs-panel));
  border: 1px solid rgba(60,95,120,0.22);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);
  overflow: hidden;
}

/* "HIGH SCORES" bar */
.hs-board-title{
  padding: 18px 22px 14px;
  text-align: center;
  font-family: var(--hs-font-title);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.08em;
  color: #3a5669;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  background: rgba(120,160,190,0.18);
  border-bottom: 1px solid rgba(60,95,120,0.20);
}

/* Table layout */
.hs-table{ padding: 10px 18px 8px; }

.hs-head,
.hs-row{
  display: grid;
  grid-template-columns: 120px 1fr 200px;
  gap: 10px;
  align-items: center;
}

/* Column headers */
.hs-head{
  padding: 10px 10px 8px;
  font-family: var(--hs-font-body);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: #4e6b7f;
}
.hs-h-score{ color: #c95850; text-align: right; }

/* Body */
.hs-body{
  border-top: 1px solid rgba(70,105,130,0.22);
}

/* Rows: visible without hover */
.hs-row{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(70,105,130,0.26);
  background: rgba(255,255,255,0.50);
}
.hs-row:nth-child(2n){
  background: rgba(255,255,255,0.38);
}
.hs-row:hover{
  background: rgba(255,255,255,0.62);
}

/* Text styles */
.hs-rank-text{
  font-family: var(--hs-font-body);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.02em;
}

.hs-name-text{
  font-family: var(--hs-font-body);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.06em;
}

.hs-score-text{
  font-family: var(--hs-font-body);
  font-weight: 900;
  font-size: 30px;
  text-align: right;
  display: block;
  color: var(--hs-score);
}

.hs-name-text, .hs-score-text, .hs-rank-text{
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

/* Rank colors */
.hs-row:nth-child(1)  .hs-rank-text{ color: #d04a44; } /* 1st */
.hs-row:nth-child(2)  .hs-rank-text{ color: #b04aa7; } /* 2nd */
.hs-row:nth-child(3)  .hs-rank-text{ color: #8a4bb6; } /* 3rd */
.hs-row:nth-child(4)  .hs-rank-text{ color: #e08a2c; } /* 4th */
.hs-row:nth-child(5)  .hs-rank-text{ color: #d9a12f; } /* 5th */
.hs-row:nth-child(6)  .hs-rank-text{ color: #62a845; } /* 6th */
.hs-row:nth-child(7)  .hs-rank-text{ color: #2aa57c; } /* 7th */
.hs-row:nth-child(8)  .hs-rank-text{ color: #1ea1a8; } /* 8th */
.hs-row:nth-child(9)  .hs-rank-text{ color: #2f86c9; } /* 9th */
.hs-row:nth-child(10) .hs-rank-text{ color: #3a5fb9; } /* 10th */

/* Footnote */
.hs-footnote{
  padding: 10px 18px 16px;
  font-family: var(--hs-font-body);
  font-weight: 800;
  font-size: 12px;
  color: rgba(40,60,75,0.72);
  text-align: center;
}

/* Alerts / loading */
.hs-alert{
  margin: 16px;
  padding: 14px 14px;
  border-radius: 12px;
  font-family: var(--hs-font-body);
  font-weight: 800;
  border: 1px solid rgba(60,95,120,0.22);
  background: rgba(255,255,255,0.72);
}
.hs-alert-error{ border-color: rgba(200,70,70,0.35); }
.hs-alert-info{ border-color: rgba(70,140,200,0.35); }

.hs-loading{
  padding: 26px 16px 30px;
  display: grid;
  place-items: center;
  gap: 10px;
}
.hs-spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid rgba(60,95,120,0.20);
  border-top-color: rgba(60,95,120,0.65);
  animation: hs-spin 0.9s linear infinite;
}
@keyframes hs-spin { to { transform: rotate(360deg); } }
.hs-loading-text{
  font-family: var(--hs-font-body);
  font-weight: 900;
  color: rgba(40,60,75,0.75);
}

/* Bottom illustration */
.hs-illustration{
  position: fixed;
  right: 24px;
  bottom: 20px;

  width: min(420px, 40vw);
  height: auto;

  pointer-events: none;
  z-index: 1;               /* under panelen, över bakgrunden */

  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
}

/* Responsive */
@media (max-width: 740px){
  .hs-logo{ height: 86px; }

  .hs-head, .hs-row{
    grid-template-columns: 92px 1fr 140px 96px;
  }

  .hs-rank-text, .hs-name-text, .hs-score-text{
    font-size: 22px;
  }

  .hs-board-title{ font-size: 26px; }

  .hs-illustration{
    width: min(300px, 60vw);
    opacity: 0.85;
  }
}