* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0b1f16;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrap {
  position: relative;
  /* width/height set from JS to keep the logical aspect ratio */
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#game.dragging { cursor: grabbing; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 20, 12, 0.72);
  backdrop-filter: blur(3px);
  padding: 16px;
  z-index: 5;
}
.overlay.hidden { display: none; }

.panel {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  background: linear-gradient(180deg, #164a31, #0e3322);
  border: 3px solid #e9c46a;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  text-align: center;
}

#resultTitle.long { font-size: clamp(24px, 5vw, 38px); overflow-wrap: anywhere; }
h1 {
  font-family: "Bungee", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 7vw, 52px);
  margin: 0 0 4px;
  color: #ffd23f;
  text-shadow: 3px 3px 0 #b5172e, 6px 6px 0 rgba(0,0,0,.35);
  letter-spacing: 2px;
}

.sub { margin: 0 0 16px; opacity: .9; }
/* Hovedmenyen: større tittel og mer luft ned til fanene */
#menu h1 { font-size: clamp(40px, 10vw, 72px); line-height: 1.1; margin-bottom: 6px; }
#menu .sub {
  margin-bottom: 26px;
  font-family: "Bungee", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 3.4vw, 18px);
  font-style: italic;   /* Bungee har ingen kursiv – nettleseren skråstiller den */
  color: #ffd23f;
  text-shadow: 2px 2px 0 #b5172e, 3px 3px 0 rgba(0,0,0,.35);   /* som tittelen, skalert ned */
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  text-align: left;
  margin-bottom: 18px;
}
.form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #e9c46a;
}
.form input, .form select {
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: #0a2418;
  border: 2px solid #2f6b4a;
  border-radius: 8px;
  padding: 8px 10px;
}
.form input:focus, .form select:focus { outline: none; border-color: #e9c46a; }

button {
  font-family: "Bungee", Impact, sans-serif;
  font-size: 16px;
  color: #1b1b1b;
  background: #e9c46a;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 #9c7a26;
  transition: transform .06s;
}
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c7a26; }
button.big {
  font-size: 22px;
  padding: 12px 28px;
  background: #ffd23f;
  color: #8a1020;
}


.row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

#resultTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 15px;
}
#resultTable th, #resultTable td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
#resultTable th { color: #e9c46a; font-size: 12px; text-transform: uppercase; }
#resultTable tr.me td { background: rgba(255, 210, 63, .15); font-weight: 700; }
.badge {
  /* Tallet midt i sirkelen, uansett om merket står i en venstrejustert liste eller en tabell */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  line-height: 1;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

#hud {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 4;
}
#hud button {
  font-family: system-ui, sans-serif;
  font-size: 18px;
  width: 40px; height: 40px;
  padding: 0;
  background: rgba(255,255,255,.85);
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(0,0,0,.3);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 14px;
}
.tab {
  background: transparent;
  color: #e9c46a;
  box-shadow: none;
  font-size: 15px;
  padding: 9px 6px;
}
.tab.active { background: #e9c46a; color: #1b1b1b; }
.tab:active { transform: none; }

.name-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #e9c46a;
  text-align: left;
  margin-bottom: 12px;
}
.name-field input, .join input {
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: #0a2418;
  border: 2px solid #2f6b4a;
  border-radius: 8px;
  padding: 8px 10px;
}
.name-field input:focus, .join input:focus { outline: none; border-color: #e9c46a; }
.name-field select {
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: #0a2418;
  border: 2px solid #2f6b4a;
  border-radius: 8px;
  padding: 8px 10px;
}
.name-field select:focus { outline: none; border-color: #e9c46a; }
/* Alene- og flerspillerdelen ligger oppå hverandre i samme rute, så menyen har like høyde
   uansett fane. Den skjulte delen tar fortsatt plass, men er usynlig og kan ikke klikkes. */
.panes { display: grid; }
.panes > div { grid-area: 1 / 1; }
.panes > [hidden] { display: block; visibility: hidden; }
/* Nedsenket («preget») tekst: mørkere grønn enn bakgrunnen, med en svak lys kant under */
.credit {
  margin: 18px 0 -6px;
  font-size: 12px;
  font-weight: 800;
  color: #01100a;
  text-shadow: 0 1px 0 rgba(140, 220, 170, .45);
}
.top-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-bottom: 8px; }
.top-fields .name-field { margin-bottom: 6px; }
@media (max-width: 520px) { .top-fields { grid-template-columns: 1fr; } }
.form .span2 { grid-column: 1 / -1; }

.hint { margin: 0 0 14px; font-size: 14px; opacity: .9; }
.join {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.join input {
  width: 120px;
  text-align: center;
  font-family: "Bungee", Impact, sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.net-msg { min-height: 1.3em; margin: 12px 0 0; color: #ffb4a8; font-size: 14px; }
.net-msg.ok { color: #b8f5a8; }

.room-code { font-size: 15px; color: #e9c46a; }
.room-code .code-copy {
  display: block;
  margin: 4px auto 8px;
  font-family: "Bungee", Impact, sans-serif;
  font-weight: 400;
  font-size: 46px;
  letter-spacing: 8px;
  color: #fff;
  background: rgba(0, 0, 0, .25);
  border: 2px dashed rgba(233, 196, 106, .7);
  border-radius: 12px;
  padding: 2px 14px 2px 22px;   /* ekstra venstrefyll veier opp for letter-spacing */
  box-shadow: none;
  cursor: copy;
  -webkit-user-select: all;
  user-select: all;
}
.room-code .code-copy:hover, .room-code .code-copy:focus-visible { border-color: #ffd23f; outline: none; }
.copy-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.copy-row button { font-size: 13px; padding: 8px 14px; }
.copy-msg { min-height: 1.3em; margin: 6px 0 4px; font-size: 14px; color: #b8f5a8; }
.lobby-board { margin: 0 0 8px; font-weight: 600; color: #e9c46a; }
.players {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 6px;
  text-align: left;
}
.players li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.25);
  border-radius: 10px;
  padding: 7px 10px;
}
.players li.me { outline: 2px solid #e9c46a; }
.players .tag { margin-left: auto; font-size: 12px; color: #e9c46a; }
.players .off { opacity: .45; }
button:disabled { opacity: .45; cursor: default; }

/* ---------------------------------------------------------------------------
   Lasteskjerm med galopperende hest
   --------------------------------------------------------------------------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(ellipse at 50% 45%, #1d5a3a 0%, #0b1f16 70%);
  transition: opacity .5s ease, visibility .5s;
}
#loader.done { opacity: 0; visibility: hidden; }

.loader-stage { position: relative; width: min(220px, 55vw); }
/* Lagene ligger oppå hverandre i samme 120×92-rute; høyden settes av aspect-ratio */
.loader-horse { position: relative; width: 100%; aspect-ratio: 120 / 92; }
.lh-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }

.loader-horse path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lh-coat { fill: #e9dcc3 !important; stroke: none; }
.lh-mane, .lh-tail { stroke: #7a6447; stroke-width: 5; }
.lh-tail { stroke-width: 6; }
.lh-eye { fill: #1b1b1b; }
.lh-leg path { stroke-width: 6; }
.lh-near path { stroke: #c9b896; }
.lh-far path { stroke: #9c8a6a; }
.lh-cloth { fill: #fff; stroke: #d62828; stroke-width: 1.4; }
.lh-silk { stroke: #d62828; stroke-width: 9; }
.lh-arm { stroke: #d62828; stroke-width: 4; }
.lh-leg-j { stroke: #f2f2f2; stroke-width: 4.5; }
.lh-skin { fill: #f1c9a5; }
.lh-silk-cap { fill: #d62828 !important; }

/* Galopp: kroppen hopper, beina svinger rundt hoftene i motsatt takt foran og bak.
   Alle animasjoner er transform på hele lag, så de går jevnt selv når JavaScript jobber.
   Rotasjonspunktene er oppgitt i prosent av 120×92-ruta (f.eks. hofte 46,48 = 38.3% 52.2%). */
.loader-horse { animation: lh-bob .42s ease-in-out infinite; will-change: transform; }
.lh-leg { animation: lh-swing .42s ease-in-out infinite; }
.lh-front { transform-origin: 38.3% 52.2%; }
.lh-back  { transform-origin: 65.8% 52.2%; animation-delay: -.21s; }
.lh-front.lh-far { animation-delay: -.07s; }
.lh-back.lh-far  { animation-delay: -.28s; }
.lh-tail { transform-origin: 71.7% 41.3%; animation: lh-tail .42s ease-in-out infinite; }
.lh-jockey { animation: lh-jockey .42s ease-in-out infinite; }

@keyframes lh-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-2deg); }
}
@keyframes lh-swing {
  0%, 100% { transform: rotate(32deg); }
  50%      { transform: rotate(-32deg); }
}
@keyframes lh-tail {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(10deg); }
}
@keyframes lh-jockey {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* Bakken suser forbi under hesten (hesten løper mot venstre) */
.loader-ground {
  height: 4px;
  margin-top: 2px;
  overflow: hidden;
  opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
/* Stripa er én periode bredere enn bakken og flyttes med transform (ikke bakgrunnsposisjon) */
.loader-ground-strip {
  height: 100%;
  width: calc(100% + 34px);
  margin-left: -34px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #e9c46a 0 18px, transparent 18px 34px);
  will-change: transform;
  animation: lh-ground .42s linear infinite;
}
@keyframes lh-ground { from { transform: translateX(0); } to { transform: translateX(34px); } }

.loader-text {
  margin: 0;
  font-family: "Bungee", Impact, sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #8a1020;
}

.loader-text.loader-error {
  font-family: system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  text-shadow: none;
  color: #ffd2c8;
  max-width: 32ch;
  text-align: center;
  padding-inline: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .loader-horse, .lh-leg, .lh-tail, .lh-jockey, .loader-ground-strip { animation-duration: 1.4s; }
}

@media (max-width: 520px) {
  .form { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
}