/* ========================================
   BASE STYLES
   ======================================== */

html,
body {
  margin: 0;
  padding: 0;
  font: 12px/1 helvetica, arial, sans-serif;
  color: #000;
}

body {
  position: relative;
  background: #8199cb;
  z-index: 0;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

ul,
li,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: #483d8b;
  text-decoration: underline;
}

a:hover {
  color: #934726;
}

a:visited {
  color: #434151;
}

a img {
  border: 0;
}

h2,
h3,
h4 {
  color: #000;
  margin: 8px 0 6px;
  font-weight: bold;
}

html:not(.backstop) div,
html:not(.backstop) span {
  scroll-margin: 2.5em 0 0 0;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ffffff;
}

/* ========================================
   LAYOUT
   ======================================== */

#wrap {
  max-width: 1480px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  border-left: 1px solid #607cb7;
  border-right: 1px solid #607cb7;
  box-shadow: 0 0 27px #3e4b68;
}

#wrap > * {
  box-sizing: border-box;
  width: 100%;
}

#wrap > div,
#wrap > ul {
  position: relative;
  clear: both;
}

#content {
  min-height: 200px;
  padding: 8px 12px 20px;
}

#content > div {
  /*margin-top: 20px;*/
  margin-bottom: 10px;
}

body.stats #content.stats-content {
  max-width: 1160px;
  margin: 0 auto;
}

/* ========================================
   HEADER
   ======================================== */

#header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 16px 0;
  background: #fff;
  border-bottom: 0;
}

#header,
#header * {
  min-width: 0;
}

.site-logo img,
.site-logo svg,
#logo img,
#logo svg {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  padding-left: 10px;
  margin-bottom: -6px;
}

.VefhausAdal img {
  max-width: 100%;
  height: auto;
}

/* Navigation Bar */
#header #nav {
  background: #e9e9e9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #c9c9c9;
  padding: 0 12px;
  margin: 8px 0 0;
  min-height: 32px;
  box-sizing: border-box;
  width: 100%;
  flex-basis: 100%;
}

#header #main_nav {
  display: flex !important;
  align-items: center;
  gap: 22px;
  height: 32px;
  padding: 0;
  margin: 0;
  overflow: visible !important;
}

#header #main_nav > li {
  display: inline-block !important;
  float: none !important;
  border: 0 !important;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
  padding-right: 15px;
}

#header #main_nav a {
  display: inline-block;
  line-height: 32px;
  padding: 0 2px;
  color: #2a2a2a;
  text-decoration: none;
}

#header #main_nav a:hover {
  text-decoration: underline;
}

#header #subnav {
  display: none;
}

/* ========================================
   SEARCH
   ======================================== */

.player-search {
  position: relative;
  max-width: 400px;
}

#header .player-search {
  margin-left: auto;
  flex: 1 1 320px;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 20px;
}

#header .player-search .LitillHeader {
  display: none;
}

.player-search-input {
  font-size: 1.2em;
}

#header .player-search-input {
  width: 82%;
  padding: 6px 8px;
  border: 1px solid #c9cbcd;
  border-radius: 4px;
  font-size: 1.2rem;
}

#header .player-search .Hnappur {
  padding: 6px 10px;
  border: 1px solid #c9cbcd;
  border-radius: 4px;
  background: #efefef;
  cursor: pointer;
}

/* Autocomplete */
.player-search .autocomplete-results-2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  max-height: 260px;
  overflow: auto;
  z-index: 2147483647;
  border: 0;
  box-shadow: none;
}

.player-search .autocomplete-results-2:has(.autocomplete-result) {
  border: 1px solid #ccc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

#header .player-search .autocomplete-results-2 {
  top: calc(100% + 4px);
  z-index: 9999;
  font-size: 1.4em;
}

.player-search .autocomplete-result {
  padding: 4px 6px;
  cursor: pointer;
}

.player-search .autocomplete-result:hover {
  background: #f0f0f0;
}

.player-search .ps-submit {
  margin-top: 4px;
}

/* Legacy autocomplete (hidden) */
.autocomplete-results-forsida,
.autocomplete-results {
  display: none;
}

/* Player vs Player autocomplete */
.autocomplete-wrapper {
  position: relative;
  display: inline-block;
  width: 220px;
}

.autocomplete-wrapper-2 {
  position: relative;
  display: inline-block;
  width: 250px;
}

.autocomplete-wrapper-forsida {
  position: relative;
  display: inline-block;
  width: 150px;
}

.autocomplete-results {
  position: absolute;
  bottom: 110%;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  font-size: 8pt;
  z-index: 9999;
}

.autocomplete-results-forsida.has-results {
  display: block;
  border: 1px solid #ccc;
}

.leikmenn-leitarbox {
  width: 220px;
}

.leikmenn-leitarbox-forsida {
  border: #483d8b 1px solid;
  font-family: verdana;
  font-size: 7pt;
  width: 95%;
}

/* ========================================
   MOBILE MENU
   ======================================== */

.menu-toggle {
  display: none;
}

.mobile-nav {
  display: none;
}

/* ========================================
   CONTENT BLOCKS / CARDS
   ======================================== */

#content .flexindex > div {
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -3px #454340;
  padding: 6px 12px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 15px;
  margin-right: 10px;
}

.flexindex > div > div {
  margin-bottom: 10px;
}

.flexindex > div > h2 {
  margin: -6px -12px 12px;
  background-color: #483d8b;
  padding: 5px 8px;
  color: #efeeed;
  font-weight: bold;
  font-size: 15px;
}

.flexindex > div > h3 {
  margin: 16px -12px 3px;
  background-color: #8f89b5;
  padding: 5px 8px;
  color: #efeeed;
  font-weight: bold;
  font-size: 13px;
}

h4.standings-sub {
  margin: 3px 0px 3px;
  background-color: #ca5e24;
  padding: 5px 15px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

.card {
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, .12);
  background: #fff;
}

.card > h2,
.card > h3 {
  margin: 0;
  padding: 8px 10px;
  background: #8f89b5;
  color: #efeeed;
  font-size: 14px;
}

.card .card-body {
  padding: 10px 12px;
}

.card-games {
  margin-top: 12px;
}

/* ========================================
   PLAYER CARDS / LISTS
   ======================================== */

#player-cards .images {
  display: block;
  gap: 0;
}

#player-cards .player-forsida {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -3px #454340;
  background: #fff;
  margin-bottom: 10px;
}

#player-cards .player-forsida > a {
  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: start;
}

#player-cards .player-forsida > a img {
  width: 120px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid #000;
  display: block;
  background: #000;
}

#player-cards .player-forsida > div {
  grid-column: 2;
  line-height: 1.35;
}

#player-cards .player-forsida-name {
  position: relative;
  display: inline-block;
  margin: 0 0 4px -50px;
  padding: 2px 6px;
  background: #e8f1ff;
  border-radius: 3px;
  z-index: 2;
  font-weight: 700;
}

/* Vertical player list */
.player-list {
  display: grid;
  gap: 12px;
}

.front .player-list {
  --thumb-w: 84px;
  --gap-x: 12px;
  --banner-h: 26px;
}

.front .player-list .player-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 0px 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #ccc;
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, .15);
  background: #f5f4fb;
  position: relative;
}

.front .player-list .player-thumb {
  grid-column: 1;
  grid-row: 1 / span 5;
  width: var(--thumb-w);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid #000;
  background: #eee;
  position: relative;
  z-index: 2;
}

.front .player-list .player-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent !important;
}

.front .player-list .player-meta {
  grid-column: 2;
  line-height: 1.35;
  padding-top: calc(var(--banner-h) + 8px);
}

.front .player-list .player-name {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  padding-left: calc(var(--thumb-w) + var(--gap-x) + 6px);
  padding-right: 8px;
  background: #483d8b;
  color: #eee;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 2px;
  z-index: 1;
}

.player-stat {
  font-size: 0.95rem;
}

/* Player images gallery (3 per row) */
.front .images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.front .images a {
  display: block;
}

.front .images img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid #000;
  display: block;
  background: #000;
}

/* Headshots */
.MyndLeikmadurHeadshot img,
.player-headshot img,
.headshot img {
  width: 84px;
  max-width: 84px;
  height: auto;
  object-fit: cover;
}

/* Team logos row */
.team-logos,
.player-logos {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: -6px;
}

.team-logos img,
.player-logos .logo-small {
  height: 20px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.0));
}

.team-logos-stattlina img {
  height: 12px;
  margin: 0px;
  vertical-align: middle;
  border-style: none;
}

.player-era {
  font-size: 0.95rem;
  margin: 6px 0 0px;
}

/* ========================================
   STATS TABLES
   ======================================== */

.table-container,
.tablecontainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tablecontainer {
  box-shadow: 0 6px 12px -3px #c4c3c1;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
  line-height: 1.0;
  color: #111;
  border: solid 1px #ccc;
}

.stats-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px 0;
  color: #222;
}

.stats-table thead th,
.TolfraediTaflaHeader td,
.TolfraediTaflaHeader th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #483d8b;
  color: #ffffff;
  font-weight: 600;
  border-bottom: 1px solid #d1d5db;
  padding: 2px 4px;
  white-space: nowrap;
  line-height: 1.3rem;
}

.stats-table td,
.stats-table th[scope="row"],
.TolfraediTaflaInnihald td {
  padding: 4px 6px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  font-size: 1.05rem;
  color: #000000;
  font-family: helvetica, arial, sans-serif;
}

.stats-table .left {
  text-align: left;
}

.stats-table .right {
  text-align: right;
}

.stats-table .center {
  text-align: center;
}

.stats-table td,
.stats-table th {
  font-variant-numeric: tabular-nums;
}

.stats-table tbody tr:nth-child(even),
.TolfraediTaflaInnihald#TolfraediMod0 {
  background: #fafafa;
}

.stats-table tbody tr:hover {
  background: #f1f5f9;
}

.stats-table a {
  color: #120f76;
  text-decoration: none;
}

.stats-table a.TolfraediTaflaHeader {
  color: #ffffff;
  text-decoration: none;
}

.stats-table a:hover {
  text-decoration: underline;
}

.stats-table.sortable thead th {
  cursor: pointer;
}

.stats-table.compact td,
.stats-table.compact th {
  padding: 6px;
  font-size: 13.5px;
}

/* Selected column highlighting */
a.TolfraediTaflaHeader.SelectedHeader {
  /* Optional styling for active header */
}

.TolfraediMod0Selected {
  background: #ffffc3;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.TolfraediMod1Selected {
  background: #ffe385;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

#TolfraediModX {
  font-size: 7.5pt;
  color: #000000;
  font-family: arial;
  background-color: #b0c4de;
}

#TolfraediMethafarHeader {
  font-size: 10pt;
}

.TolfraediTaflaMethafarInnihald {
  color: #000000;
  background-color: #b0c4de;
  font-size: 8pt;
  font-family: Verdana;
}

.TolfraediMethafarAdaltafla {
  width: 740px;
  line-height: 1.1em;
}

.TolfraediTaflaSamtals {
  font-weight: bold;
  font-size: 7pt;
  color: #f2f3fe;
  font-family: Verdana;
  background-color: #4682b4;
  text-decoration: none;
}

.TolfraediTaflaSamtals:Visited {
  color: #f2f3fe;
}

/* Standings grid */
.standings-grid {
  display: flex;
  gap: 16px;
}

.standings-col {
  flex: 1 1 0;
  min-width: 0;
}

.standings-sub {
  margin: 0 0 6px 0;
  font-size: 1rem;
  font-weight: 600;
}

.standings-col .tablecontainer {
  margin: 0;
}

.standings-col table {
  width: 100%;
}

/* ========================================
   PLAYER VS PLAYER COMPARISON
   ======================================== */

.stats-section {
  padding: 0.5rem;
  max-width: 480px;
  font-family: "Verdana", sans-serif;
}

.stats-section.compare {
  font-size: 0.80rem;
  line-height: 1.25;
  border: 1px solid #ccc;
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, .15);
}

.stats-section.compare .player-name a {
  font-size: 0.95rem;
}

.stats-section.compare .stats-table.tight td,
.stats-section.compare .stats-table.tight th {
  padding: 4px 4px;
  font-size: 1.10rem;
}

.stats-section.compare .table-subheader.tiny {
  background: #4d618d;
  color: #fff;
  font-size: 1.15rem;
  padding: 5px 6px 5px 6px;
  margin-top: 0px;
  margin-bottom: 1px;
  margin-right: -4px;
  margin-left: -4px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.player-profile {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 0 2% 0rem 2%;
}

.player-profile img {
  max-width: 140px;
  border-radius: 4px;
  /*border-width: 2px;
  border-color: #000000;
  border-style: outset;*/
}

.player-name {
  font-size: 10px;
  margin: 0.1rem 0;
  color: #1F2C57;
  text-decoration: none;
}

.table-subheader {
  background-color: #4d618d;
  color: #FFFFFF;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  margin-top: -0.175rem;
  margin-bottom: -0.175rem;
  margin-left: -5px;
  margin-right: -5px;
  letter-spacing: 0.5px;
  border-radius: 4px 4px 0 0;
}

.stats-table-container {
  background-color: #ffffff;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.stats-table thead {
  background-color: #dce3ef;
}

.stats-table th {
  font-weight: normal;
  padding: 0.25rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
  font-size: 0.85rem;
  color: #333333;
}

.compare .table-subheader {
  font-size: .95rem;
  padding: 4px 6px;
  margin: 2px -4px 2px -4px;
}

.compare .stats-table td,
.compare .stats-table th {
  padding: 2px 6px;
  font-size: .9rem;
  line-height: 1.15;
}

.compare .player-profile img {
  height: 92px;
}

.compare .player-name {
  font-size: .95rem;
}

/* ========================================
   MAXSTATT (Player Max Stats Visual)
   ======================================== */

@font-face {
  font-family: gamlifiba;
  src: url("/fonts/fiba.ttf");
  font-weight: bold;
}

.maxstatt-wrapper {
  width: 750px;
  min-height: 750px;
  border: 1px solid black;
  background-image: url("/imgs/korfuboltavollur-svartur.jpg");
  background-size: cover;
  font-family: gamlifiba;
  border-radius: 14px;
}

.maxstatt-table-container {
  display: flex;
  align-items: stretch;
  margin: 10px;
}

.maxstatt-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 5px;
  align-content: start;
  height: auto;
  margin-left: -10px;
}

.maxstatt-grid-cell {
  padding: 5px;
  text-align: center;
  font-weight: bold;
  font-family: Arial, sans-serif;
  border-radius: 5px;
  height: 100px;
}

.maxstatt-grid-cell img {
  height: 75px;
  margin: 0px;
  vertical-align: middle;
  filter: drop-shadow(0 0 0.25rem rgb(255, 255, 255));
}

.maxstatt-number {
  position: relative;
  font-size: 35pt;
  font-weight: 900;
  font-family: gamlifiba;
  top: -30px;
  right: -35px;
  text-align: center;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke-color: #000000;
  -webkit-text-stroke-width: 1px;
  z-index: 10;
}

.maxstatt-number::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #aeaeae;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.maxstatt-highest {
  -webkit-text-fill-color: #0ac40a;
  -webkit-text-stroke-color: darkgreen;
  -webkit-text-stroke-width: 1px;
  z-index: 10;
}

.maxstatt-lowest {
  -webkit-text-fill-color: #e30f0f;
  -webkit-text-stroke-color: #800303;
  -webkit-text-stroke-width: 1px;
}

.maxstatt-header {
  width: 100%;
  text-align: center;
  font-size: 60px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 4px;
  -webkit-text-fill-color: rgb(255, 255, 255);
  -webkit-text-stroke-color: rgb(0, 0, 0);
  -webkit-text-stroke-width: 1px;
}

.maxstatt-subheader {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  padding: 5px;
  margin-bottom: 10px;
  -webkit-text-fill-color: white;
}

.maxstatt-photo-container {
  width: 280px;
  display: flex;
  justify-content: right;
  align-items: flex-start;
  margin-left: 40px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.maxstatt-photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* ========================================
   SEASON / STATS LAYOUT
   ======================================== */

.stats .season-header .page-title {
  margin: 6px 0 4px;
}

.stats .season-crosslink {
  margin: 0 0 10px;
}

.season-switch {
  margin: 8px 0 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.season-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 16px;
  align-items: start;
}

.season-rail {
  display: grid;
  gap: 12px;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  display: grid;
  gap: 16px;
  padding: 20px 12px;
  background: #f6f7f8;
  border-top: 1px solid #e1e3e6;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.footer h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #333;
}

.footer ul {
  list-style: disc;
  padding-left: 1.1rem;
}

.footer li {
  margin: 4px 0;
}

.footer a {
  color: #002b7f;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.Hofundarrettur {
  text-align: center;
  padding: 10px 12px 28px;
  color: #000;
  font-size: 0.95rem;
  background: #fff;
}

/* ========================================
   UTILITIES & MISC
   ======================================== */

.BilStort {
  height: 15px;
}

.Linubil {
  padding-top: 4px;
}

.Artol {
  text-align: center;
  font-size: 0.95rem;
}

.AdalfrettFyrirsogn,
.FrettFyrirsogn {
  font-size: 1.75rem;
  font-weight: 700;
  color: #483d8b;
}

.ForsidaTenglalisti,
.ForsidaTenglalistiUndir {
  margin: 6px 0 10px;
  padding-left: 1.1rem;
}

.ForsidaTenglalisti {
  list-style: disc;
}

.ForsidaTenglalisti > li {
  margin: 6px 0;
}

.ForsidaTenglalistiUndir {
  list-style: circle;
}

.ForsidaTenglalistiUndir > li {
  margin: 4px 0;
}

.TolfraediTitill {
  font-weight: bold;
  font-size: 14pt;
  color: #483d8b;
  font-family: Arial;
}

.TolfraediUndirTitill {
  font-weight: bold;
  font-size: 11pt;
  color: #483d8b;
  font-family: Arial;
}

.Stafrof {
  text-align: left;
  font-size: 8pt;
}

.TaflaDomarar {
  font-size: 8.5pt;
}

.DomararHaus {
  font-weight: bold;
}

.DomararHopur {
  font-size: 11pt;
  font-weight: bold;
}

.DomararUpplysingar {
  text-align: left;
  padding-right: 10px;
}

.Combobox {
  border: 1px solid #483d8b;
  font-size: 8pt;
  font-family: verdana;
}

/*.Hnappur {
  border: 1px solid #483d8b;
  font-size: 8pt;
  font-family: verdana;
  border-radius: 3px;
}*/

.LitillHeader {
  font-weight: bold;
  font-size: 7.5pt;
  color: #483d8b;
  font-family: verdana;
}

.MyndasafnLitilForsidumynd {
  text-align: center;
  padding-bottom: 2px;
  padding-top: 1px;
}

.MyndasafnLitilForsidumyndTengill {
  border: none;
}

.MyndsafnStorMynd {
  text-align: center;
}

.Myndaleit {
  text-align: right;
}

.bug-report-btn {
  display: inline-block;
  padding: 0.6em 0.7em;
  background: #e00013;
  color: #fff !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  transition: transform .1s, box-shadow .2s;
}

.bug-report-btn:hover,
.bug-report-btn:active,
.bug-report-btn:visited {
  color: #fff !important;
  background: #e00013;
}

.bug-report-btn:hover {
  transform: translateY(-1px);
}

#wrap > .Villuhnappur {
  position: absolute !important;
  top: 8px;
  right: 8px;
  left: auto !important;
  width: auto !important;
  z-index: 200;
}

.Villuhnappur {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
}

.uni_holder.section a.poptip::before {
  content: attr(data-tip);
  width: 70px;
  font-size: .83em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: #000;
}

.uni_holder.section a[href].poptip::before {
  color: #34d;
}

img.poptip {
  content: normal !important;
  width: 100%;
  display: block;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: #c9e2ff;
  color: #202b54;
  text-align: left;
  border-radius: 4px;
  border: 1px solid #202b54;
  padding: 5px;
  position: absolute;
  z-index: 1;
  left: 30px;
  top: -5px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 8px;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

/* ========================================
   RESPONSIVE: MOBILE (≤735px)
   ======================================== */

@media (max-width: 735px) {
  #header {
    position: relative;
    padding: 8px 12px 0;
  }

  .site-logo img,
  .site-logo svg,
  #logo img,
  #logo svg {
    height: 40px;
    padding-left: 0;
  }

  .site-logo {
    display: inline-block;
    max-width: 62vw;
  }

  #header #nav {
    display: none !important;
  }

  #header #subnav,
  .Villuhnappur {
    display: none !important;
  }

  .menu-toggle {
    display: inline-flex !important;
    position: absolute;
    top: 0;
    right: 0px;
    align-items: center;
    gap: 0px;
    padding: 16px 15px 11px 3px;
    border: 0px;
    background: #8f89b5;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    width: 58px;
    margin: 0;
    font-size: 2em;
  }
  
  .menu-toggle .label {
    letter-spacing: .02em;
  }

  .menu-toggle .bars {
    position: relative;
    width: 16px;
    height: 12px;
  }

  .menu-toggle .bars::before,
  .menu-toggle .bars::after,
  .menu-toggle .bars::marker {
    display: none;
  }

  .menu-toggle .bars:after,
  .menu-toggle .bars:before,
  .menu-toggle .bars i {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
  }

  .menu-toggle .bars:before {
    top: 0;
  }

  .menu-toggle .bars:after {
    bottom: 0;
  }

  .menu-toggle .bars i {
    top: 5px;
    display: block;
  }

  
  /* Mobile nav panel */
  .mobile-nav {
    display: block !important;
    position: relative;
    z-index: 1000;
    margin: 8px -12px 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    border-top: 1px solid #dad6e8;
  }

  .mobile-nav[hidden] {
    display: none !important;
  }

  .mobile-nav.open {
    display: block !important;
    width: 95%;
    margin-left: 18px;
    margin-top: 5px;
  }

  .mobile-nav ul {
    margin: 0;
    padding: 6px 10px;
    list-style: none;
  }

  .mobile-nav li {
    padding: 14px 22px;
    font-size: 20px;
    font-weight: 600;
    color: #302b6a;
    position: relative;
  }

  .mobile-nav li + li {
    border-top: 1px solid #e6e0d6;
  }

  .mobile-nav a {
    color: inherit;
    text-decoration: none;
    display: block;
  }

  .mobile-nav a:active {
    background: #ededf5;
  }
  
  
  #header::after {
    content: "";
    display: block;
    height: 4px;
    background: #472ab1;
    margin-top: 8px;
  }

  #header .SearchPanel,
  #header .leit,
  #header form.search,
  #header .player-search {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
  }

  .player-search {
    clear: both;
    margin-top: 10px;
    max-width: 100%;
  }

  #wrap > .Villuhnappur {
    top: 6px;
    right: 6px;
  }

  #player-cards .player-forsida {
    grid-template-columns: 1fr;
  }

  #player-cards .player-forsida > a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  #player-cards .player-forsida > a img {
    width: 100%;
    max-width: 160px;
  }

  .player-row {
    grid-template-columns: 110px 1fr !important;
  }

  .player-thumb {
    grid-column: 1;
    grid-row: 2;
    order: 2;
    width: 110px;
  }

  .team-logos img,
  .player-logos .logo-small {
    height: 16px;
  }

  #content,
  #header,
  .mobile-nav {
    -webkit-backface-visibility: hidden;
  }

  img.poptip {
    content: normal !important;
  }

  .front .player-list {
    --thumb-w: 110px;
  }

  .compare .stats-table td,
  .compare .stats-table th {
    font-size: .85rem;
    padding: 2px 4px;
  }

  .compare .player-profile img {
    height: 80px;
  }
}

/* ========================================
   RESPONSIVE: iOS ZOOM FIX (≤820px)
   ======================================== */

@media (max-width: 820px) {
  .player-search-input,
  input[type="text"],
  input[type="search"],
  input[type="tel"] {
    font-size: 16px;
    line-height: 1.25;
  }

  .front #content .flexindex {
    grid-template-columns: 1fr !important;
  }

  #teams {
    width: 90% !important;
  }
}

/* ========================================
   RESPONSIVE: SMALL TABLET (≥481px)
   ======================================== */

@media (min-width: 481px) {
  h2,
  h3 {
    font-size: 1.6em;
  }

  .front .player-list .player-row {
    grid-template-columns: 96px 1fr;
  }

  .front .player-list .player-thumb {
    width: 96px;
  }

  .front .player-list {
    --thumb-w: 96px;
  }
}

/* ========================================
   RESPONSIVE: TABLET (≥736px)
   ======================================== */

@media (min-width: 736px) {
  h2,
  h3 {
    font-size: 1.8em;
    line-height: 1.2em;
  }

  #wrap > #header {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: -8px;
    border-bottom: 0;
    background: #fff;
  }

  #header #nav {
    display: block !important;
  }

  .menu-toggle,
  #mobileNav {
    display: none !important;
  }
}

/* ========================================
   RESPONSIVE: STATS TABLE (≥768px)
   ======================================== */

@media (max-width: 768px) {
  .stats-table .left {
    white-space: normal;
  }

  .stats-table td,
  .stats-table th {
    padding: 7px 8px;
  }
}

/* ========================================
   RESPONSIVE: STANDINGS GRID (≥900px)
   ======================================== */

@media (max-width: 900px) {
  .standings-grid {
    flex-direction: column;
  }
}

/* ========================================
   RESPONSIVE: SEASON LAYOUT (≥980px)
   ======================================== */

@media (max-width: 980px) {
  .season-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   RESPONSIVE: DESKTOP (≥1020px)
   ======================================== */

@media (min-width: 1020px) {
  #content > .flexindex {
    margin-left: 12px;
  }

  #content .flexindex {
    max-width: 1020px;
  }

  #content > * {
    width: fit-content;
  }

  #header #nav > * {
    display: block !important;
  }

  #header #subnav {
    display: block;
    color: #c9cbcd;
    background-color: #483d8b;
    width: 100%;
    padding: 0;
    height: 22px;
  }

  #header #subnav > li:first-child {
    display: block;
    border-left: none;
  }

  #header #subnav > li {
    font-size: .785714286em;
    float: left;
    padding: 2px 10px 2px;
    margin-top: 3px;
    position: relative;
    border-left: 1px solid #425465;
    height: 12px;
  }
}

/* ========================================
   RESPONSIVE: LANDSCAPE & MOBILE LAYOUT
   ======================================== */

@media (max-width: 1024px), (max-height: 500px) and (orientation: landscape) {
  .Adalrammi {
    width: auto !important;
    margin: 0 8px;
  }

  #MidjaTolfraedi,
  .MidjaAdalefni {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
  }

  .VinstriSpassia,
  .HaegriSpassia {
    display: none !important;
  }

  .Frettarammi {
    padding: 8px;
  }

  .player-search {
    width: min(480px, 80vw);
  }

  .player-search-input {
    width: 100%;
  }

  .table-scroll table {
    width: max-content;
    min-width: 950px;
  }
}

/* ========================================
   PROGRESSIVE ENHANCEMENT: CSS GRID
   ======================================== */

@supports (display: grid) {
  #content .flexindex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    grid-gap: 10px;
    grid-auto-flow: dense;
  }

  #content .flexindex > div {
    width: auto;
    margin: 0;
  }

  @media screen and (min-width: 600px) {
    #content.front .flexindex {
      max-width: none;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
  }

  /* Front page three-column layout */
  .front #content .flexindex {
    max-width: none !important;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.6fr) 320px !important;
    gap: 16px;
    align-items: start;
  }

  .front #content .flexindex > div {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0;
  }

  #player-cards {
    width: 320px !important;
    max-width: 320px !important;
    justify-self: end;
  }

  #players {
    width: 90% !important;
  }

  #teams {
    width: 105% !important;
  }

  #players .tablecontainer table,
  #teams .tablecontainer table {
    width: 100%;
    table-layout: auto;
  }

  @media (max-width: 1200px) {
    .front #content .flexindex {
      grid-template-columns: 1fr 1fr !important;
    }

    #player-cards {
      width: auto !important;
      max-width: none !important;
      justify-self: stretch;
    }
  }
}




/* ===========================
   BOXScore layout + zebra
   =========================== */

/* Two tables side-by-side, equal width */
.boxscore-pair {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.boxscore-pair > table {
  flex: 1 1 0;
  width: 0;            /* equal widths, even with many columns */
}

/* Stack on small screens */
@media (max-width: 900px) {
  .boxscore-pair { flex-direction: column; }
}

/* Keep table look consistent */
table.boxscore-score,
table.boxscore-team,
table.boxscore-referees {
  width: 100%;
  border-collapse: collapse;
}

/* Header styling (matches your theme) */
table.boxscore-score thead th,
table.boxscore-team thead th {
  background: #483d8b;
  color: #ffffff;
  font-weight: 700;
  border-bottom: 1px solid #d1d5db;
  white-space: nowrap;
  font-size: 1em;
  font-family: Verdana, helvetica, arial, sans-serif;
}

/* Alignments */
table.boxscore-team th.left,
table.boxscore-team td.left,
table.boxscore-score th.left,
table.boxscore-score td.left {
  text-align: left;
}

/* Exact zebra requested: start with #e8eeff then #b0c4de.
   Use higher specificity so it overrides the generic .stats-table zebra. */
table.boxscore-team tbody tr:nth-child(odd),
table.boxscore-score tbody tr:nth-child(odd) {
  background: #e8eeff;
}
table.boxscore-team tbody tr:nth-child(even),
table.boxscore-score tbody tr:nth-child(even) {
  background: #b0c4de;
}

/* Totals row keeps your existing look but make text legible on its dark bg */
table.boxscore-team tfoot tr.TolfraediTaflaSamtals {
  background: #4682b4;
  color: #f2f3fe;
  font-weight: bold;
}

/* Compact officials table */
table.boxscore-referees th,
table.boxscore-referees td {
  padding: 6px 8px;
  border: 1px solid #ffffff;
}
table.boxscore-referees th {
  background: #f3f4f7;
  width: 160px;
}

.boxscore-team-name{
  font-weight: 700;
  font-size: 1.75em;
}

/* Top row layout: score table + refs at far right, top-aligned */
.boxscore-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.boxscore-top .boxscore-score { flex: 1 1 auto; min-width: 0; }
.boxscore-top .boxscore-referees {
  margin-left: auto;
  align-self: flex-start;
  width: max-content;
}

/* Right-align all score/boxscore columns by default; left only where .left is used */
table.boxscore-score th,
table.boxscore-score td,
table.boxscore-team th,
table.boxscore-team td {
  text-align: right;
}
table.boxscore-score .left,
table.boxscore-team .left {
  text-align: left !important;
}

/* Team totals row: Verdana + white + bold (explicit) */
table.boxscore-team tfoot tr.TolfraediTaflaSamtals,
table.boxscore-team tfoot tr.TolfraediTaflaSamtals td,
table.boxscore-team tfoot tr.TolfraediTaflaSamtals th {
  background: #4682b4;
  color: #fff;
  font-weight: 700;
  font-family: Verdana, arial, sans-serif;
  font-size: 1em;
}

/* Quarter columns (L1–L4) dark gray, headers and values */
table.boxscore-score thead th.q,
table.boxscore-score tbody td.q {
  color: #797979 !important;
}

/* Quarter-score spacer row matches team-total background */
table.boxscore-score tfoot .score-spacer {
  background: #4682b4;
  height: 4px;
  padding: 0;
  border: 0;
}

/* Referees table: bold labels */
table.boxscore-referees th {
  font-weight: 700;
  background: #f3f4f7;
  width: 160px;
}

/* Keep your requested zebra (already present); no change needed here */


.boxscore-game-crumb{
  font-size: 1.3em;
  font-weight: 700;
}

.boxscore-leikur-fyrirsogn{
  font-size: 1.9em;
  font-weight: 700;
}

.boxscore-referees{
  padding: 4px;
  font-size: 1.1em;
}

/* ===========================
   FELÓG table – match Boxscore
   =========================== */

table.felog-table {
  width: 100%;
  border-collapse: collapse;
}

/* Right-align everything by default; left only where .left is used */
table.felog-table th,
table.felog-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.felog-table .left { text-align: left !important; }

/* Header look to mirror Boxscore */
table.felog-table thead th {
  background: #483d8b;
  color: #ffffff;
  font-weight: 700;
  border-bottom: 1px solid #d1d5db;
  white-space: nowrap;
  font-size: 1em;
  font-family: Verdana, helvetica, arial, sans-serif;
  padding: 2px 4px;
}

/* Exact zebra like Boxscore */
table.felog-table tbody tr:nth-child(odd)  { background: #e8eeff; }
table.felog-table tbody tr:nth-child(even) { background: #b0c4de; }

/* Row cells spacing (match your stats-table sizing) */
table.felog-table td,
table.felog-table th[scope="row"] {
  padding: 4px 6px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 1.05rem;
  color: #000000;
  font-family: helvetica, arial, sans-serif;
}

/* ===== Cup tables (same look as Boxscore) ===== */

/* Headers match Boxscore */
table.cup-overview thead th,
table.cup-games thead th {
  background: #483d8b;
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid #d1d5db;
  white-space: nowrap;
  font-family: Verdana, helvetica, arial, sans-serif;
}

/* Right-align by default; left only when explicit */
table.cup-overview th, table.cup-overview td,
table.cup-games th, table.cup-games td {
  text-align: right;
}
table.cup-overview .left, table.cup-games .left {
  text-align: left !important;
}

/* Zebra like Boxscore */
table.cup-overview tbody tr:nth-child(odd),
table.cup-games tbody tr:nth-child(odd) { background: #e8eeff; }
table.cup-overview tbody tr:nth-child(even),
table.cup-games tbody tr:nth-child(even) { background: #b0c4de; }

/* Stage label row inside the games table */
.cup-games .cup-stage-row td {
  background: #f3f4f7;
  color: #333;
  font-weight: 700;
}



/* ================================
   Topplistar Félaga: Flex layout
   ================================ */
body.topplistarfelaga .toplist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

/* Make every list the same width and let them wrap cleanly */
body.topplistarfelaga .toplist-grid > .tablecontainer {
  /* equal width cards in each row */
  flex: 0 1 360px;      /* basis = 360px, no grow, can shrink if needed */
  max-width: 360px;
}

/* Tables already fill their container via .stats-table { width:100% } */

/* Responsive tweaks */
@media (min-width: 1400px) {
  body.topplistarfelaga .toplist-grid > .tablecontainer { flex-basis: 380px; max-width: 380px; }
}
@media (max-width: 820px) {
  body.topplistarfelaga .toplist-grid > .tablecontainer { flex: 1 1 100%; max-width: 100%; }
}



/* Timabil: right-rail cards laid out in a responsive grid */
.season-rail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}

/* Make each card fill its grid cell cleanly */
.season-rail-grid .tablecontainer {
  margin: 0;              /* remove extra margins inside the grid */
  height: 100%;
}

.season-rail-grid .tablecontainer > table {
  width: 100%;
}

/* Tweak breakpoints if you prefer 2-up sooner */
@media (max-width: 900px) {
  .season-rail-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .season-rail-grid {
    grid-template-columns: 1fr;
  }
}


.season-rail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  align-items:start;
}
.season-main .tablecontainer{ margin:0 0 12px; }
@media (max-width:980px){ .season-rail-grid{ grid-template-columns:1fr; } }

/* Make Leikmaður totals rows match Boxscore totals */
table.felog-table tfoot tr.TolfraediTaflaSamtals,
table.felog-table tfoot tr.TolfraediTaflaSamtals td,
table.felog-table tfoot tr.TolfraediTaflaSamtals th {
  background: #4682b4;
  color: #fff;
  font-weight: 700;
  font-family: Verdana, arial, sans-serif;
  font-size: 1em;
}


@media (min-width: 1020px) {
  /* Let the comparison card use the full content width */
  #content > .frettarammi-wide { 
    width: 100% !important; 
    max-width: none; 
  }
}

.Vidvorun {
    color: crimson;
    background: #e6e9ff;
    font-size: 1.2em;
    border: #483d8b 3px solid;
    border-radius: 4px;
    padding: 18px;
    width: 325px;
    text-align: center;
    line-height: 1.7em;
    font-weight: 700;
    margin-top: 10px;
}


/* === Maxstatt responsive base === */
.maxstatt-wrapper {
  /* Keep your desktop width, but allow full-width on smaller screens */
  width: min(750px, 100%);
  min-height: 750px;
  margin: 0 auto;           /* center within content column */
  border: 1px solid black;
  background-image: url("/imgs/korfuboltavollur-svartur.jpg");
  background-size: cover;
  font-family: gamlifiba;
  border-radius: 14px;
}

/* Preserve your existing desktop flex row layout */
.maxstatt-table-container {
  display: flex;
  align-items: stretch;
  margin: 10px;
}

/* === Mobile adjustments (≤735px) === */
@media (max-width: 735px) {
  .maxstatt-wrapper {
    width: 100%;
    min-height: auto;           /* allow height to grow naturally */
    border-radius: 12px;
  }

  .maxstatt-header {
    font-size: 40px;            /* scale down header */
    padding-top: 8px;
    padding-bottom: 4px;
  }

  .maxstatt-subheader {
    font-size: 18px;            /* scale subheader a bit */
    padding: 6px;
    margin-bottom: 8px;
  }

  .maxstatt-table-container {
    flex-direction: column;     /* stack grid and photo vertically */
    margin: 8px;
  }

  .maxstatt-grid-wrapper {
    /* from 4 columns → 2 columns on phones */
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 4px;
    margin-left: 0;
  }

  .maxstatt-grid-cell {
    height: 92px;               /* slightly lower to fit narrow screens */
  }

  .maxstatt-grid-cell img {
    height: 64px;               /* scale logo a touch */
  }

  .maxstatt-number {
    font-size: 28pt;            /* scale value text so it stays inside */
    top: -22px;                 /* nudge positioning for smaller cells */
    right: 0;
  }

  .maxstatt-number::before {
    width: 48px;                /* smaller halo circle */
    height: 48px;
  }

  .maxstatt-photo-container {
    width: 100%;                /* let the photo span full width below grid */
    margin-left: 0;
    justify-content: center;
    height: auto;               /* use intrinsic height */
  }

  .maxstatt-photo-container img {
    width: 100%;
    height: auto;
    max-height: 360px;          /* keep portrait reasonable on phones */
    object-fit: cover;
    object-position: top;
  }
}

/* Optional: mid-width tablets (736–980px), use 3 columns */
@media (min-width: 736px) and (max-width: 980px) {
  .maxstatt-grid-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Holder that matches the scaled height and prevents horizontal scroll */
.maxstatt-scale-holder {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Keep the designed desktop size; we’ll scale the whole card down */
.maxstatt-wrapper {
  width: 750px;                 /* your original width */
  transform-origin: top left;
}

/* NEVER switch the grid to two columns – force 4 columns at all sizes */
.maxstatt-grid-wrapper {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Ensure portrait photo area even if few rows make it short.
   280 * 4/3 = ~373.33, round up a bit: */
.maxstatt-photo-container {
  min-height: 374px;            /* keeps container portrait, then it scales */
}

/* If supported, reinforce portrait intent on the image itself */
@supports (aspect-ratio: 3 / 4) {
  .maxstatt-photo-container img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
  }
}





/* Player hero */
.player-hero {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr 300px;
  gap: 12px;
  padding: 10px 12px 12px;
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -3px rgba(0,0,0,.12);
  background: #fff;
}

.player-hero-name {
  grid-column: 1 / -1;
  background: #483d8b;
  color: #efeeed;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: .3px;
  padding: 6px 8px;
  border-radius: 3px;
}

.player-hero-photo {
    /* width: 150px; */
    /* aspect-ratio: 3 / 4; */
    /* object-fit: cover; */
    /*border: 1px solid #000;*/
    display: grid;
    /* background: #000; */
    /* border-radius: 4px; */
    justify-items: center;
    align-items: start;
    height: fit-content;    
}

.player-hero-photo img {
  width: 150px;
  /*aspect-ratio: 3/4;*/
  object-fit: cover;
  border: 1px solid #000;
  display: block;
  /*background: #000;*/
  border-radius: 4px;
  justify-content: center;
}

.player-hero-logos {
  display: flex;
  gap: 4px;
  /*flex-wrap: wrap;*/
  margin-top: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.player-hero-logos img { 
  height: 35px; 
  /*display:block;   */
  border: 0px;
  width: auto;
}

.player-hero-meta { line-height: 1.35; }

.player-hero-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 6px 12px;
  margin-bottom: 6px;
}
.player-hero-meta-grid .label {
  font-weight: 700;
  color: #1F2C57;
  margin-right: 6px;
}
.player-hero-meta-grid .value { color:#111; }

.player-hero-section { margin-top: 6px; }
.player-hero-section .ach-line { margin: 2px 0; }

.player-hero-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}
.player-hero-links .label { font-weight: 700; color:#1F2C57; }
.player-hero-links .sep { color:#8f89b5; padding: 0 4px; }

.player-hero-rail { align-self: start; }
.player-hero-rail .rail-card {
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -3px rgba(0,0,0,.12);
  padding: 8px 10px;
  background: #fff;
}
.player-hero-rail .rail-title {
  background: #8f89b5;
  color: #efeeed;
  font-weight: 700;
  font-size: 14px;
  margin: -8px -10px 8px;
  padding: 6px 8px;
}

/* Responsive tweaks */
@media (max-width: 980px) {
  .player-hero { grid-template-columns: 140px 1fr; }
  .player-hero-rail { grid-column: 1 / -1; }
  .player-hero-photo img { width: 140px; }
  .player-hero-meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .player-hero { grid-template-columns: 1fr; }
  .player-hero-photo img { width: 160px; }
  .player-hero-logos { justify-content: flex-start; }
  
  
.player-hero-logos img { 
  height: 45px; 
  /*display:block;   */
  border: 0px;
  width: auto;
}
}


/

/* Anchor: rounded corners clip the overlay */
.maxstatt-wrapper {
  position: relative;
  overflow: hidden;
}

/* Shared positioning for the overlay */
.brand-watermark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  pointer-events: none;
}

/* ---------- Option A: MASK (solid white logo) ---------- */
/* Set the correct ratio once and it will scale responsively. 
   Use the SVG's viewBox (width/height) -> set --brand-ratio accordingly. */
.brand-mask {
  /* size: responsive width with hard min/max, height from aspect-ratio */
  --brand-ratio: 4.6;                    /* ← adjust to your SVG (e.g. 4.6:1) */
  width: clamp(120px, 26%, 220px);
  aspect-ratio: var(--brand-ratio) / 1;
  background: #fff;                      /* the logo color */
  opacity: .9;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));

  /* mask the shape */
  -webkit-mask-image: url("/imgs/korfustatt-header.svg");
          mask-image: url("/imgs/korfustatt-header.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ---------- Option B: IMG (make existing SVG “white”) ---------- */
.brand-watermark img {
  display: block;
  width: clamp(120px, 26%, 220px);
  height: auto;
  opacity: .9;
  /* Turn any logo white, keep dropshadow */
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* Keep the photo above most backgrounds if you ever stack other elems */
.maxstatt-photo-container { position: relative; z-index: 10; }


/* Make sure the photo can host absolutely-positioned children */
.maxstatt-photo-container { position: relative; }

/* Banner that sits on top of the photo */
.maxstatt-photo-banner {
    position: absolute;
    top: 542px;
    left: 0;
    right: 0;
    /* height: 54px; */
    background: #483d8bc7;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 4px 10px;
    z-index: 30;
    pointer-events: none;
}
/* White logo via CSS mask (preferred) */
.maxstatt-photo-banner .brand-mask{
  --brand-ratio: 4.6;                    /* set to your SVG viewBox ratio */
  width: clamp(110px, 45%, 210px);
  aspect-ratio: var(--brand-ratio) / 1;
  background: #fff;                      /* logo color */
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  -webkit-mask: url("/imgs/korfustatt-header.svg") no-repeat center / contain;
          mask: url("/imgs/korfustatt-header.svg") no-repeat center / contain;
}

/* If you’d rather keep an <img> instead of mask, use this instead:
.maxstatt-photo-banner img{
  width: clamp(110px, 45%, 210px);
  height: auto;
  opacity: .95;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
*/

/* Optional: scale banner/logo a bit on small screens */
@media (max-width: 735px){
  .maxstatt-photo-banner{ height: 46px; padding: 4px 8px; }
  .maxstatt-photo-banner .brand-mask{ width: clamp(90px, 50%, 180px); }
}




/* make the photo the positioning context */
.maxstatt-photo-container { position: relative; overflow: hidden; }

/* banner: always X px from the bottom, never stretched */
.maxstatt-photo-container { --banner-offset: 20px; }   /* tweak per card if needed */

.maxstatt-photo-banner{
  position: absolute;
  inset: auto 0 var(--banner-offset) 0;  /* top:auto; right:0; bottom:var(...); left:0 */
  /* or: bottom:var(--banner-offset); left:0; right:0; top:auto; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 10px;
  background: #483d8bc7;
  z-index: 30;
  pointer-events: none;
  height: auto;            /* ensure content-sized */
}

/* white logo via mask */
.maxstatt-photo-banner .brand-mask{
  --brand-ratio: 4.6;
  width: clamp(110px, 45%, 210px);
  aspect-ratio: var(--brand-ratio) / 1;
  background: #fff;
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  -webkit-mask: url("/imgs/korfustatt-header.svg") no-repeat center / contain;
          mask: url("/imgs/korfustatt-header.svg") no-repeat center / contain;
}

@media (max-width:735px){
  .maxstatt-photo-banner{ padding: 4px 8px; }
  .maxstatt-photo-banner .brand-mask{ width: clamp(90px, 50%, 180px); }
}

/* About page card */
.about-card{
  font-size: 1.25rem;          /* a bit larger */
  line-height: 1.6;
  padding-top: 10px;
}

/* Header with its own class (still inherits your .card > h2 styles) */
.about-title{
  margin: 0 0 10px;
  background: none;         /* keep your brand bar */
  color: #483d8b;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Two columns on wider screens */
.about-body p {
  margin: 0 0 1rem;
  break-inside: avoid; 
}

@media (min-width: 900px) {
  .about-body {
    columns: 2 28em;
    column-gap: 3rem;
    column-fill: balance;
    hyphens: none;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 10px;
  }
}



/* ================================
   Stöðutafla: lita playoffs og fall
   ================================ */

/* Standings: Felog-style zebra (base) */
.stats-table.standings-table tbody tr:nth-child(odd)  { background: #e8eeff; } /* light */
.stats-table.standings-table tbody tr:nth-child(even) { background: #b0c4de; } /* medium */

/* Playoff rows: use felog-style backgrounds */
.stats-table.standings-table tbody tr.is-playoff               { background: #e8eeff; }
.stats-table.standings-table tbody tr.is-playoff:nth-child(even){ background: #b0c4de; }
/* keep tint on hover */
/*.stats-table.standings-table tbody tr.is-playoff:hover          { background: #d0d7ee; }*/

/* Neutral rows: use soft gray backgrounds */
.stats-table.standings-table tbody tr.is-neutral               { background: #f5f5f5; }
.stats-table.standings-table tbody tr.is-neutral:nth-child(even){ background: #dedede; }
/* keep tint on hover */
/*.stats-table.standings-table tbody tr.is-neutral:hover          { background: #bebebe; }*/

/* Relegation rows: soft red backgrounds */
.stats-table.standings-table tbody tr.is-relegation               { background: #fdecec; }
.stats-table.standings-table tbody tr.is-relegation:nth-child(even){ background: #e8c8c8; }
/* keep tint on hover */
/*.stats-table.standings-table tbody tr.is-relegation:hover          { background: #daafaf; }*/


/* Subnav: first item left; items 2+ on the right */
#subnav {
  display: flex;
  align-items: center;
  gap: .5rem 1rem;       /* row gap / column gap */
  list-style: none;
  margin: 0;
  padding: .25rem 1rem;
}

/* reset any legacy float/inline-block from older CSS */
#subnav > li {
  float: none !important;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* THIS pushes the second li (and everything after it) to the right */
#subnav .subnav-push-right {
  margin-left: auto;
}

/* Status strip look on a dark bar */
#subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  border-radius: .5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.25;
}
#subnav .status-strip a { color: #fff; text-decoration: underline; }
#subnav .status-strip .sep { opacity: .7; }

/* Bug-report button to match */
#subnav .bug-report-btn {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}
#subnav .bug-report-btn:hover { background: rgba(255,255,255,0.16); }

/* Mobile: stack; right items move below and align right */
@media (max-width: 680px) {
  #subnav {
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding: .25rem .5rem;
  }
  #subnav > li { width: 100%; }
  #subnav .subnav-push-right {
    margin-left: 0;
    justify-content: flex-end;   /* keep right items right-aligned when stacked */
  }
}


/* make sure the logo starts below the subnav in flow */
.site-logo { display: inline-block; clear: both; }

/* ensure the subnav creates its own stacking context above header background */
#subnav { position: relative; z-index: 1; }


/* --- Subnav flex fix: beat older float/height rules --- */
#header #subnav {
  display: flex !important;         /* override display:block from older rule */
  align-items: center;
  gap: .5rem 1rem;
  list-style: none;
  padding: .25rem 1rem;
  margin: 0;
  height: auto !important;          /* allow tall content */
  flex: 1 0 100% !important;        /* take its own full row in the header */
}

#header #subnav > li {
  float: none !important;           /* kill old float */
  display: flex;                    /* flex children horizontally */
  align-items: center;
  height: auto !important;          /* no clipping */
  margin: 0 !important;
  padding: 0;                       /* your original padding on the <li> isn't needed */
  border-left: 0 !important;        /* drop the old left borders */
}

/* Push the right side over (put this on the second <li>): <li class="subnav-push-right"> */
#header #subnav > li.subnav-push-right { margin-left: auto; }

/* Status strip visuals on dark bar (optional, matches your theme) */
#header #subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  border-radius: .5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.25;
}
#header #subnav .status-strip a { color: #fff; text-decoration: underline; }
#header #subnav .status-strip .sep { opacity: .7; }

/* Bug-report button to match (keeps it from looking like a white pill) */
#header #subnav .bug-report-btn {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff !important;
  text-decoration: none;
}
#header #subnav .bug-report-btn:hover { background: rgba(255,255,255,0.16); }



/* --- FINAL OVERRIDES: Subnav layout + header position --- */

/* 1) Let subnav be a full-width row in the header (beats old float/height rules) */
#header #subnav {
  display: flex !important;
  align-items: center;
  gap: .5rem 1rem;
  padding: .25rem 1rem;
  margin: 0;
  height: auto !important;
  flex: 0 0 100% !important;   /* own row in the flex header */
  box-sizing: border-box;
}

/* kill old floats/borders/heights on lis */
#header #subnav > li {
  float: none !important;
  display: flex;
  align-items: center;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  border: 0 !important;
}

/* push the right side over: put this class on the SECOND li */
#header #subnav > li.subnav-push-right { margin-left: auto; }

/* 2) Keep header inside the white frame (remove the negative margins on desktop) */
@media (min-width: 736px) {
  #wrap > #header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* 3) Visuals: make status plain text on the purple bar; keep bug button red */
#header #subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;                   /* no pill padding */
  background: transparent;      /* no pill background */
  border: 0;                    /* no pill border */
  color: #c9cbcd;               /* match your subnav text tone */
  line-height: 1.25;
}
#header #subnav .status-strip a { color: #ffffff; text-decoration: underline; }
#header #subnav .status-strip .sep { opacity: .7; }

/* keep the bug-report button as the only pill (your original red) */
#header #subnav .bug-report-btn {
  padding: 0.6em 0.7em;
  background: #e00013;
  color: #fff !important;
  border-radius: 6px;
  border: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
#header #subnav .bug-report-btn:hover { background: #d40013; }


/* === Subnav as 3-column grid (final override) === */
#header #subnav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto; /* left grows, two right items hug right */
  column-gap: 1rem;
  align-items: center;
  padding: .25rem 1rem;
  margin: 0;
  height: auto !important;
  flex: 0 0 100% !important; /* own row in header flex container */
  box-sizing: border-box;
}

#header #subnav > li {
  /* kill legacy floats/borders/heights */
  float: none !important;
  border: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.85em;
}

/* placement (keep your existing <li> order) */
#header #subnav > li:nth-child(1) { justify-self: start; }
#header #subnav > li:nth-child(2) { justify-self: end; }
#header #subnav > li:nth-child(3) { justify-self: end; }

/* visuals: status is plain text on purple bar; bug button stays pill */
#header #subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;                 /* no pill */
  background: transparent;
  border: 0;
  color: #c9cbcd;
  line-height: 1.25;
}
#header #subnav .status-strip a { color: #fff; text-decoration: underline; }
#header #subnav .status-strip .sep { opacity: .7; }

/* keep bug button as red pill */
#header #subnav .bug-report-btn {
  padding: 0.6em 0.7em;
  background: #e00013;
  color: #fff !important;
  border-radius: 6px;
  border: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
#header #subnav .bug-report-btn:hover { background: #d40013; }

/* ensure header sits inside the white frame (undo old negative margins) */
@media (min-width: 736px) {
  #wrap > #header {
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
  }
}

/* Remove the white strip above the purple subnav */
#header { padding-top: 0 !important; }

/* Give the space back below the subnav so the logo breathes */
#header #subnav { margin-bottom: 8px; }

@media (max-width: 680px) {
  #header #subnav {
    display: none !important;
  }
}


.top-headshots {
  max-width: 1200px;
  /*margin-inline: auto;*/
}

.headshots-row {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: nowrap;
}

.row-main {
  margin-bottom: .5rem;
}

.headshot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.headshot img {
  width: 90px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid #363636;
  aspect-ratio: 3/4;
}

.headshot.small img {
  width: 72px;  
}

.headshot .name {
  margin-top: .25rem;
  font-size: .95rem;
  color: #333;
  text-align: center;
  max-width: 72px;
  white-space: normal;
  overflow: visible;
  /* text-overflow: ellipsis; */
}

@media (max-width: 700px) {
  .headshots-row {
    gap: .5rem;
  }

  .headshot img {
    width: 72px;
    height: 72px;
  }

  .headshot.small img {
    width: 60px;
    height: 60px;
  }
}