/* ==========================================================
   123slop – retro spillportal, ca. 2004
   ========================================================== */

:root {
  --navy: #081634;
  --blue: #1557c0;
  --blue-dark: #0b3a8a;
  --blue-light: #5b9bff;
  --sky: #dfeaff;
  --orange: #ff8a00;
  --orange-dark: #cf5a00;
  --yellow: #ffd21f;
  --green: #3cbc00;
  --green-dark: #227a00;
  --red: #e3141f;
  --paper: #ffffff;
  --paper-2: #f1f6ff;
  --ink: #1a1d26;
  --muted: #5b6780;
  --line: #b9cbe9;
  --gold: #ffcf2e;
  --silver: #d7dde6;
  --bronze: #e9a86a;

  --f-body: Verdana, Tahoma, Geneva, sans-serif;
  --f-fun: 'Luckiest Guy', 'Arial Black', Impact, sans-serif;
  --f-pixel: 'Press Start 2P', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background:
    radial-gradient(ellipse 900px 500px at 50% -120px, #2a63d6 0%, transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px),
    var(--navy);
  background-attachment: fixed;
}

body {
  margin: 0;
  padding: 18px 12px 40px;
  font: 12px/1.5 var(--f-body);
  color: var(--ink);
}

a { color: var(--blue); }
a:hover { color: var(--orange-dark); }

img { max-width: 100%; display: block; }

.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- page shell ---------- */

.page {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--paper);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--blue-light), 0 18px 50px rgba(0,0,0,.6);
  overflow: hidden;
}

.cols {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 210px;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(#e9f1ff, #fff 240px);
}
.cols.cols-2 { grid-template-columns: 190px minmax(0, 1fr); }
.cols.cols-play { grid-template-columns: minmax(0, 1fr) 230px; }

.col-left, .col-right { display: flex; flex-direction: column; gap: 12px; }
.col-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- header ---------- */

.hdr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  min-height: 112px;
  background:
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%),
    linear-gradient(#ffb21a, var(--orange) 55%, var(--orange-dark));
  border-bottom: 3px solid #000;
}

.logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 230px;
  height: 92px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-burst {
  position: absolute;
  left: -6px;
  width: 104px;
  height: 104px;
  background: var(--yellow);
  clip-path: polygon(50.0% 0.0%,57.6% 16.9%,71.7% 5.0%,71.2% 23.4%,89.1% 18.8%,80.6% 35.2%,98.7% 38.9%,84.0% 50.0%,98.7% 61.1%,80.6% 64.8%,89.1% 81.2%,71.2% 76.6%,71.7% 95.0%,57.6% 83.1%,50.0% 100.0%,42.4% 83.1%,28.3% 95.0%,28.8% 76.6%,10.9% 81.2%,19.4% 64.8%,1.3% 61.1%,16.0% 50.0%,1.3% 38.9%,19.4% 35.2%,10.9% 18.8%,28.8% 23.4%,28.3% 5.0%,42.4% 16.9%);
  animation: spin 24s linear infinite;
}
.logo-txt {
  position: relative;
  font-family: var(--f-fun);
  font-size: 58px;
  line-height: 1;
  letter-spacing: 1px;
  transform: rotate(-4deg);
  white-space: nowrap;
}
.logo-num {
  color: var(--red);
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 #000;
}
.logo-word {
  color: #fff;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 #000, 5px 5px 0 var(--blue-dark);
  margin-left: 2px;
}

.slogan {
  font-family: var(--f-fun);
  font-size: 20px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 2px 2px 0 var(--orange-dark), 3px 3px 0 #000;
  transform: rotate(-3deg);
}

.hdr-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.search { display: flex; gap: 4px; }
.search input {
  width: 190px;
  padding: 6px 8px;
  font: inherit;
  border: 2px solid #000;
  border-radius: 4px;
  box-shadow: inset 2px 2px 0 #ccc;
}
.hdr-stats {
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,.35);
  padding: 2px 10px;
  border-radius: 10px;
}
.hdr-stats b { color: var(--yellow); }

/* ---------- nav ---------- */

.nav {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  background: linear-gradient(var(--blue), var(--blue-dark));
  border-bottom: 4px solid #fff;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav a {
  flex-shrink: 0;
  padding: 7px 14px 6px;
  font-weight: bold;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  background:
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 50%),
    linear-gradient(var(--blue-light), var(--blue));
  border: 2px solid #000;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.nav a:hover { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(#ffb21a, var(--orange)); color: #fff; }
.nav a.on { background: #fff; color: var(--blue-dark); text-shadow: none; }

/* ---------- ticker ---------- */

.ticker {
  display: flex;
  align-items: stretch;
  background: var(--yellow);
  border-bottom: 2px solid #000;
  font-size: 11px;
  overflow: hidden;
}
.ticker-label {
  flex-shrink: 0;
  padding: 4px 10px;
  font-weight: bold;
  color: #fff;
  background: var(--red);
  border-right: 2px solid #000;
  animation: blink 1.2s steps(2, jump-none) infinite;
}
.ticker-view { overflow: hidden; flex: 1; }
.ticker-track {
  display: inline-flex;
  gap: 18px;
  padding: 4px 0;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.ticker-track i { color: var(--red); font-style: normal; }

/* ---------- boxes ---------- */

.box {
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 3px 3px 0 rgba(11,58,138,.18);
}
.box-h {
  margin: 0;
  padding: 6px 10px;
  font-family: var(--f-fun);
  font-weight: normal;
  font-size: 17px;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.55);
  background:
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 50%),
    linear-gradient(var(--blue-light), var(--blue));
  border-bottom: 2px solid var(--blue-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.box-h small { margin-left: auto; font: bold 11px var(--f-body); text-shadow: none; }
.box-h small a { color: #fff; }
.box-h-orange { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(#ffb21a, var(--orange)); }
.box-h-green  { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(#6ee02a, var(--green)); }
.box-h-red    { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(#ff5a4a, var(--red)); }
.box-b { padding: 10px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font: bold 12px var(--f-body);
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
  border: 2px solid #000;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 3px 0 #000;
  background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 50%), linear-gradient(var(--blue-light), var(--blue));
}
.btn:hover { filter: brightness(1.1); color: #fff; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.btn-green  { background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 50%), linear-gradient(#6ee02a, var(--green)); }
.btn-orange { background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 50%), linear-gradient(#ffb21a, var(--orange)); }
.btn-grey   { background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 50%), linear-gradient(#b8c2d4, #7d889c); }
.btn-big {
  padding: 10px 26px;
  font-family: var(--f-fun);
  font-weight: normal;
  font-size: 24px;
  letter-spacing: 1px;
  border-width: 3px;
  box-shadow: 0 5px 0 #000;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
}
.btn-block { display: flex; width: 100%; }

/* ---------- badges ---------- */

.burst {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-family: var(--f-fun);
  font-size: 15px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: var(--red);
  clip-path: polygon(50.0% 0.0%,57.6% 16.9%,71.7% 5.0%,71.2% 23.4%,89.1% 18.8%,80.6% 35.2%,98.7% 38.9%,84.0% 50.0%,98.7% 61.1%,80.6% 64.8%,89.1% 81.2%,71.2% 76.6%,71.7% 95.0%,57.6% 83.1%,50.0% 100.0%,42.4% 83.1%,28.3% 95.0%,28.8% 76.6%,10.9% 81.2%,19.4% 64.8%,1.3% 61.1%,16.0% 50.0%,1.3% 38.9%,19.4% 35.2%,10.9% 18.8%,28.8% 23.4%,28.3% 5.0%,42.4% 16.9%);
  transform: rotate(12deg);
  animation: pulse 1.4s ease-in-out infinite;
}
.burst-sm { position: absolute; top: -12px; right: -12px; width: 44px; height: 44px; font-size: 11px; }

.tag-demo {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 5px;
  font: bold 9px var(--f-body);
  letter-spacing: 1px;
  color: #000;
  background: var(--yellow);
  border: 1px solid #000;
}

/* ---------- tiles ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 16px 12px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  text-align: center;
}
.tile-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border: 3px solid #fff;
  outline: 2px solid var(--blue-dark);
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
  transition: transform .12s, outline-color .12s;
}
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover .tile-thumb { transform: scale(1.06) rotate(-1deg); outline-color: var(--orange); outline-width: 3px; }
.tile-title { font-weight: bold; font-size: 12px; color: var(--blue); text-decoration: underline; }
.tile:hover .tile-title { color: var(--orange-dark); }

.thumb-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000));
}
.thumb-icon { font-size: 42px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.4)); }

.tile-empty .tile-thumb {
  background: repeating-linear-gradient(45deg, #f4f7fd 0 8px, #e6edf9 8px 16px);
  outline-style: dashed;
  outline-color: #8aa3cc;
}
.empty-inner {
  display: grid;
  place-items: center;
  height: 100%;
  font-weight: bold;
  font-size: 11px;
  color: var(--muted);
  align-content: center;
  line-height: 1.2;
}
.empty-inner b { font: 30px var(--f-fun); color: #8aa3cc; }
.tile-empty .tile-title { color: var(--muted); font-weight: normal; }

/* ---------- featured ---------- */

.featured {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,210,31,.35), transparent 50%),
    linear-gradient(135deg, #10306f, var(--blue) 60%, #2d7cf0);
  color: #fff;
}
.featured .tile-thumb { outline-color: #000; }
.featured h3 {
  margin: 0 0 4px;
  font: 34px/1 var(--f-fun);
  color: var(--yellow);
  text-shadow: 3px 3px 0 #000;
}
.featured p { margin: 0 0 10px; font-size: 13px; }
.featured .meta { font-size: 11px; opacity: .85; margin-bottom: 12px; }
.featured .burst { position: absolute; right: 12px; bottom: 12px; }
.featured .tile-title { display: none; }

/* ---------- category banner ---------- */

.cat-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background:
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  border: 2px solid #000;
  border-radius: 8px;
}
.cat-banner .big-ic { font-size: 64px; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.35)); }
.cat-banner h1 {
  margin: 0;
  font: 36px/1 var(--f-fun);
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: 3px 3px 0 #000;
}
.cat-banner .tagline { font: 16px var(--f-fun); color: #000; margin: 4px 0; letter-spacing: .5px; }
.cat-banner p { margin: 0; max-width: 520px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.toolbar select { font: inherit; }

/* ---------- sidebar bits ---------- */

.catlist { list-style: none; margin: 0; padding: 4px 0; }
.catlist a, .catlist .soon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
.catlist a:hover, .catlist a.on { background: var(--sky); }
.catlist em { margin-left: auto; font-style: normal; font-weight: normal; color: var(--muted); }
.catlist .soon { color: #9aa6ba; font-weight: normal; font-style: italic; border: 0; }
.cat-ic { width: 20px; text-align: center; }

.player-form { display: grid; gap: 6px; }
.player-form label { font-weight: bold; font-size: 11px; }
.player-form input {
  padding: 5px;
  font: inherit;
  border: 2px solid var(--blue-dark);
  border-radius: 4px;
}
.player-ok { color: var(--green-dark); font-weight: bold; }

.counter { display: inline-flex; gap: 2px; margin-bottom: 4px; }
.counter span {
  width: 18px;
  padding: 4px 0;
  font: 12px var(--f-pixel);
  color: #7dff5a;
  background: linear-gradient(#222, #000 50%, #1a1a1a 50%, #000);
  border: 1px solid #444;
  border-radius: 2px;
}

/* ---------- score tables ---------- */

.scores { width: 100%; border-collapse: collapse; font-size: 11px; }
.scores th {
  padding: 4px 6px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.scores td { padding: 4px 6px; border-bottom: 1px dotted var(--line); }
.scores td.num, .scores th.num { text-align: right; white-space: nowrap; }
.scores td.rank { width: 28px; font-weight: bold; text-align: center; }
.scores tr.r1 td { background: color-mix(in srgb, var(--gold) 45%, #fff); }
.scores tr.r2 td { background: color-mix(in srgb, var(--silver) 60%, #fff); }
.scores tr.r3 td { background: color-mix(in srgb, var(--bronze) 40%, #fff); }
.scores tr.me td { animation: flash 0.5s steps(2, jump-none) 6; font-weight: bold; }
.scores .name { font-weight: bold; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores-empty { padding: 14px 10px; text-align: center; color: var(--muted); font-size: 11px; }

.recent { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.recent li { padding: 5px 10px; border-bottom: 1px dotted var(--line); }
.recent li b { color: var(--blue-dark); }

/* ---------- player page ---------- */

.crumbs { font-size: 11px; color: var(--muted); }
.crumbs a { font-weight: bold; }

.game-title {
  margin: 0;
  font: 34px/1 var(--f-fun);
  color: var(--blue-dark);
  text-shadow: 2px 2px 0 var(--yellow), 4px 4px 0 rgba(0,0,0,.2);
}

.stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #000;
  border: 4px solid #000;
  outline: 3px solid var(--blue-light);
  border-radius: 4px;
  overflow: hidden;
}
.stage iframe, .stage ruffle-player, .stage .ruffle-host { display: block; width: 100%; height: 100%; border: 0; }
.stage:fullscreen { border: 0; outline: 0; border-radius: 0; }

.preloader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, #1f4fae, #081634 70%);
}
.preloader h2 { margin: 0; font: 30px var(--f-fun); color: var(--yellow); text-shadow: 3px 3px 0 #000; }
.preloader .loadtxt { font: 10px var(--f-pixel); letter-spacing: 1px; }
.loadbar {
  width: min(320px, 70%);
  height: 22px;
  padding: 3px;
  border: 2px solid #fff;
  background: #000;
}
.loadbar i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #7dff5a 0 10px, #3cbc00 10px 14px);
  transition: width .2s linear;
}
.preloader .btn-big { animation: pulse 1.2s ease-in-out infinite; }

.stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.stage-bar .plays { margin-left: auto; font-size: 11px; color: var(--muted); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info-grid dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 11px; }
.info-grid dt { font-weight: bold; color: var(--muted); }
.info-grid dd { margin: 0; }

/* ---------- dialog ---------- */

.dlg {
  width: min(380px, calc(100vw - 32px));
  padding: 0;
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--yellow), 0 20px 60px rgba(0,0,0,.7);
  overflow: hidden;
}
.dlg::backdrop { background: rgba(8,22,52,.75); }
.dlg .box-h { font-size: 20px; justify-content: center; }
.dlg-b { padding: 16px; text-align: center; display: grid; gap: 10px; }
.dlg-score { font: 38px/1 var(--f-fun); color: var(--orange-dark); text-shadow: 2px 2px 0 #000; }
.dlg-rank { font-weight: bold; color: var(--green-dark); }
.dlg input { padding: 8px; font: bold 14px var(--f-body); text-align: center; border: 2px solid var(--blue-dark); border-radius: 4px; }
.dlg-btns { display: flex; gap: 8px; justify-content: center; }

/* ---------- guide page ---------- */

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps > li { position: relative; padding-left: 54px; }
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font: 22px var(--f-fun);
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  background: var(--orange);
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: 2px 2px 0 #000;
}
.steps h3 { margin: 0 0 4px; font-size: 14px; color: var(--blue-dark); }
.steps p { margin: 0 0 6px; }

pre, code { font-family: 'Courier New', monospace; }
code { background: var(--paper-2); padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; }
pre {
  margin: 6px 0 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #b8ff9f;
  background: #0b1020;
  border: 2px solid #000;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #2a3550;
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }
pre .c { color: #7f8db0; }
pre .k { color: #ffd21f; }
pre .s { color: #ff9f6a; }

.api { width: 100%; border-collapse: collapse; font-size: 11px; }
.api td, .api th { padding: 6px 8px; border-bottom: 1px dotted var(--line); text-align: left; vertical-align: top; }
.api th { background: var(--paper-2); }

/* ---------- footer ---------- */

.ftr {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  color: #c7d5f3;
  background: linear-gradient(var(--blue-dark), #061a45);
  border-top: 3px solid #000;
}
.ftr a { color: #fff; font-weight: bold; }
.ftr p { margin: 6px 0 0; }
.ftr-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ftr-badges span {
  padding: 1px 6px;
  font: bold 9px var(--f-body);
  letter-spacing: 1px;
  color: #000;
  background: linear-gradient(#fff, #c8d2e4);
  border: 1px solid #000;
}

/* ---------- animations ---------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes blink { 50% { background: #9c0008; } }
@keyframes pulse { 50% { scale: 1.08; } }
@keyframes flash { 50% { background: var(--yellow); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .cols, .cols.cols-2, .cols.cols-play { grid-template-columns: minmax(0, 1fr); }
  .col-main { order: -1; }
  .slogan { display: none; }
}

@media (max-width: 640px) {
  body { padding: 0; }
  .page { border-radius: 0; border-width: 0; box-shadow: none; }
  .hdr { flex-wrap: wrap; justify-content: center; padding: 10px 16px; }
  .hdr-right { margin: 0; align-items: center; width: 100%; }
  .search { width: 100%; }
  .search input { flex: 1; width: auto; }
  .logo { width: 200px; height: 80px; }
  .logo-txt { font-size: 48px; }
  .logo-burst { width: 88px; height: 88px; }
  .cols { padding: 12px 16px; }
  .featured { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .cat-banner { flex-direction: column; text-align: center; }
}

/* ---------- innlogging ---------- */

/* Siden skjules til innloggingen er sjekket */
body.gate .page { visibility: hidden; }
body.gate::before {
  content: 'LASTER…';
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font: 14px var(--f-pixel);
  color: var(--yellow);
  text-shadow: 2px 2px 0 #000;
  z-index: 10;
}

.player { display: grid; justify-items: center; gap: 4px; text-align: center; }
.avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 30px;
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--orange);
  background: var(--sky);
  object-fit: cover;
}
.player-name { font-weight: bold; font-size: 13px; color: var(--blue-dark); overflow-wrap: anywhere; }
.player-mail { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; margin-bottom: 4px; }

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login { width: min(440px, 100%); display: grid; justify-items: center; gap: 12px; }
.login .box { width: 100%; }
.login .logo-txt { font-size: 72px; }
.login .logo { width: 300px; height: 120px; }
.login .logo-burst { width: 130px; height: 130px; left: 0; }
.login-b { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 20px; font-size: 13px; }
.login-b p { margin: 0; }
.insert-coin {
  font: 14px var(--f-pixel);
  color: var(--red);
  animation: blink-txt 1s steps(2, jump-none) infinite;
}
.login-err { color: var(--red); font-weight: bold; }
.btn:disabled { filter: grayscale(1); opacity: .6; cursor: default; }

@keyframes blink-txt { 50% { opacity: 0; } }