/* The Tycoon Group — visuellt system.

   Samma hållning som de fyra spelen: en mörk panel, mycket information per
   skärm, och färg bara där den betyder något. Skillnaden är att koncernsidan
   inte har någon EGEN accent. Den skulle bli en femte färg som konkurrerar
   med de fyra den ska binda ihop, och en koncern är inte ett femte bolag utan
   ägandet av de andra. Grunden är därför neutral skiffer, och varje
   dotterbolagskort lyser i sitt spels accent — indigo, koppar, ärg,
   varselgult. Färgen på ett kort är alltså inte dekor: den säger vilket spel
   raden kommer ifrån. */

/* Egenhostade typsnitt, samma filer som spelen. Google Fonts-CSS:en vore en
   renderblockerande hämtning från två extra domäner för filer som aldrig
   ändras. Archivo Narrow är en variabelfont: en fil bär både 600 och 700. */
@font-face {
  font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('/fonts/archivo-narrow-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('/fonts/archivo-narrow-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Latin-ext för monon också: bolagsnamnen kommer ur spelen och är skrivna av
   spelare, så en kod eller ett namn med č, ł eller ș ska inte falla tillbaka
   på en annan font mitt i ett tal. */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0f1118;
  --panel: rgba(20, 23, 32, .92);
  --panel-2: rgba(14, 16, 23, .72);
  --line: #262c3a;
  --line-hot: #3a4256;
  --ink: #e8e6df;
  --muted: #8a8fa3;

  /* Bara för tal som är bra eller dåliga, aldrig för dekor. */
  --pos-text: #6cc08d;
  --neg-text: #e0887e;

  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Archivo Narrow', ui-sans-serif, system-ui, sans-serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --lift: 0 6px 20px rgba(4, 6, 11, .38);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* En klass med display: flex vinner annars över webbläsarens egen regel för
   [hidden], och elementet syns fast attributet säger något annat. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  /* De fyra accenterna som ett mycket svagt ljus i var sitt hörn — koncernen
     antydd i bakgrunden i stället för utskriven. */
  background-image:
    radial-gradient(60rem 40rem at 12% -10%, rgba(90, 108, 224, .10), transparent 60%),
    radial-gradient(60rem 40rem at 88% -10%, rgba(192, 120, 64, .09), transparent 60%),
    radial-gradient(60rem 40rem at 12% 110%, rgba(63, 169, 181, .08), transparent 60%),
    radial-gradient(60rem 40rem at 88% 110%, rgba(224, 162, 51, .08), transparent 60%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------- huvud */

.top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: 68rem; margin: 0 auto; padding: 2rem 1.25rem 1.25rem;
}
.mark {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem); letter-spacing: .14em;
  text-decoration: none; display: flex; gap: .5em; align-items: baseline;
}
.mark-the { color: var(--muted); font-size: .62em; letter-spacing: .3em; }
.clock { text-align: right; }
.clock .lbl {
  display: block; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.clock time { font-family: var(--mono); font-weight: 500; font-size: 1rem; }

main { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 3rem; }

section { margin-bottom: 1.5rem; }
h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; font-size: .82rem; color: var(--muted);
  margin: 0 0 .7rem;
}

/* -------------------------------------------------------------- koderna in */

.link, .summary, .milestones {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.15rem 1.25rem; box-shadow: var(--lift);
}
.hint { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; max-width: 46rem; }

.fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--game-accent, var(--muted)); font-weight: 600;
}
.field input {
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--game-accent, var(--line));
  border-radius: 8px; color: var(--ink);
  font: 500 1rem/1 var(--mono); letter-spacing: .14em;
  padding: .6rem .7rem; width: 100%; text-transform: uppercase;
}
.field input:focus { outline: none; border-color: var(--game-accent, var(--line-hot)); }
.field input::placeholder { color: #565c70; letter-spacing: .1em; }

.actions { display: flex; gap: .6rem; margin-top: 1rem; }
button {
  font: 600 .82rem/1 var(--sans); letter-spacing: .06em;
  padding: .62rem 1.1rem; border-radius: 8px; cursor: pointer;
}
.primary { background: #2b3142; color: var(--ink); border: 1px solid var(--line-hot); }
.primary:hover { background: #333a4d; }
.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.ghost:hover { color: var(--ink); border-color: var(--line-hot); }

/* Kontot: e-post och lösenord är inte bolagskoder — ingen versalisering och
   ingen kodspärrning, men samma formspråk i övrigt. */
.signin-fields {
  display: grid; grid-template-columns: 2fr 2fr auto; gap: .75rem;
  align-items: end;
}
.signin .field input { text-transform: none; letter-spacing: normal; font-size: .95rem; }
.signin .field label { color: var(--muted); }
.signin .actions { margin-top: 0; }
.signin .hint { margin: .8rem 0 0; }
@media (max-width: 700px) { .signin-fields { grid-template-columns: 1fr; align-items: stretch; } }

.link.saved form { display: none; }
.link.saved .hint { display: none; }
.linked-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.linked-codes { font-family: var(--mono); letter-spacing: .1em; color: var(--muted); }
.linked-codes b { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------- koncernindexet */

.summary { text-align: center; padding: 1.6rem 1.25rem; }
.index-value {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 4.2rem); line-height: 1;
  letter-spacing: -.02em;
}
.index-unit {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-top: .5rem;
}
.index-note { color: var(--muted); font-size: .88rem; margin-top: .7rem; }

/* --------------------------------------------------------- dotterbolagen */

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }

.card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--panel); border: 1px solid var(--line);
  /* Spelets accent som en tänd kant upptill: kortets färg SÄGER vilket spel
     det är, så rubriken slipper skrika det. */
  border-top: 3px solid var(--game-accent);
  border-radius: 14px; padding: 1rem 1rem 1.1rem;
  box-shadow: var(--lift); text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s;
}
a.card:hover { border-color: var(--line-hot); border-top-color: var(--game-accent); transform: translateY(-2px); }

.card-game {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--game-accent); font-weight: 600;
}
.card-name {
  font-family: var(--display); font-weight: 700; font-size: 1.18rem;
  line-height: 1.15; letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.card-code { font-family: var(--mono); color: var(--muted); font-size: .78rem; letter-spacing: .12em; }
.card-value { font-family: var(--mono); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; }
.card-index { font-size: .8rem; color: var(--muted); }
.card-index b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.card-spark { display: block; width: 100%; height: 36px; margin: .15rem 0; }
.card-delta { font-family: var(--mono); font-size: .84rem; font-weight: 500; }
.card-delta.up { color: var(--pos-text); }
.card-delta.down { color: var(--neg-text); }
.card-delta.flat { color: var(--muted); }
.card-foot {
  margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .76rem; display: flex; gap: .6rem; flex-wrap: wrap;
}
.card.empty .card-name, .card.empty .card-value { color: var(--muted); }
.card-msg { color: var(--muted); font-size: .86rem; }

/* ------------------------------------------------------------ milstolpar */

.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.ms {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: .9rem 1rem;
}
.ms-name {
  font-family: var(--display); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-size: .82rem; color: var(--muted);
}
.ms-what { font-size: .84rem; color: var(--muted); margin-top: .3rem; }
.ms.on { border-color: var(--line-hot); background: rgba(108, 192, 141, .07); }
.ms.on .ms-name { color: var(--pos-text); }

/* ------------------------------------------------------------------- fot */

footer {
  max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
}
.games { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .8rem; }
.games a {
  font-size: .84rem; text-decoration: none;
  color: var(--game-accent); border-bottom: 1px solid transparent;
}
.games a:hover { border-bottom-color: currentColor; }
.fine { color: var(--muted); font-size: .8rem; margin: 0; }

/* ------------------------------------------------------------ smalare rutor */

@media (max-width: 900px) {
  .fields, .cards { grid-template-columns: repeat(2, 1fr); }
  .ms-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .fields, .cards { grid-template-columns: 1fr; }
  .top { padding-top: 1.4rem; }
}