/* ==========================================================================
   Erstbesuch: Farbwahl, danach Intro in genau diesen Farben.
   Liegt ueber allem, auch ueber dem Cookie-Banner. Der Banner kommt erst,
   wenn dieses Fenster zu ist.
   ========================================================================== */

html.gaetw-boot,
html.gaetw-boot body { background: #000; }
html.gaetw-boot body { overflow: hidden; }
html.gaetw-boot #cc-banner,
html.gaetw-boot #cc-panel,
html.gaetw-boot #cc-fab { display: none !important; }

/* Deckt die Seite ab, bis das Intro-Skript das Fenster gebaut hat. */
html.gaetw-boot body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}

#gaetw-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  color: var(--fg);
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--u) * 5);
}
@media (min-width: 52rem) {
  #gaetw-intro { align-items: center; }
}

.boot-stage {
  width: min(100%, 52rem);
  text-align: center;
}
.boot-stage[hidden] { display: none; }

.boot-kicker {
  font-family: var(--f-display);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 calc(var(--u) * 3);
}
.boot-stage h1 {
  font-size: clamp(1rem, 4vw, 1.6rem);
  margin-bottom: calc(var(--u) * 6);
}

.boot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: calc(var(--u) * 3);
  text-align: left;
}

.boot-tile {
  display: flex;
  flex-direction: column;
  min-height: 7.2rem;
  padding: 0;
  cursor: pointer;
  border: 3px solid var(--tile-bd, #888);
  background: var(--tile-bg, #222);
  color: var(--tile-fg, #eee);
  font: inherit;
  text-align: left;
  box-shadow: 3px 3px 0 #0008;
}
.boot-tile:hover,
.boot-tile:focus-visible {
  outline: 3px solid var(--border-hi);
  outline-offset: 3px;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #0008;
}
.boot-tile__bar {
  display: block;
  height: calc(var(--u) * 4.5);
  background: var(--tile-bar, #fff);
}
.boot-tile__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: calc(var(--u) * 2);
  flex: 1;
}
.boot-tile__body b {
  font-family: var(--f-display);
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.35;
  color: inherit;
}
.boot-tile__body em {
  font-family: var(--f-term);
  font-style: normal;
  font-size: 1rem;
  opacity: .75;
}

/* Jede Kachel traegt die Farben der Maschine, nicht die der Seite. */
.boot-tile[data-skin-pick='c64']       { --tile-bg:#40318d; --tile-fg:#d3ccf5; --tile-bd:#7869c4; --tile-bar:#ffffff; }
.boot-tile[data-skin-pick='gameboy']   { --tile-bg:#9bbc0f; --tile-fg:#0f380f; --tile-bd:#0f380f; --tile-bar:#0f380f; }
.boot-tile[data-skin-pick='win95']     { --tile-bg:#008080; --tile-fg:#000000; --tile-bd:#ffffff; --tile-bar:#000080; }
.boot-tile[data-skin-pick='mac']       { --tile-bg:#cccccc; --tile-fg:#000000; --tile-bd:#000000; --tile-bar:#000000; }
.boot-tile[data-skin-pick='amiga']     { --tile-bg:#0055aa; --tile-fg:#ffffff; --tile-bd:#ff8800; --tile-bar:#ff8800; }
.boot-tile[data-skin-pick='nes']         { --tile-bg:#4a4a4a; --tile-fg:#f2f2f0; --tile-bd:#1a1a1a; --tile-bar:#d0d0cc; }
.boot-tile[data-skin-pick='ps1']         { --tile-bg:#b8b5ae; --tile-fg:#2a2a28; --tile-bd:#2a2a28; --tile-bar:#2a2a28; }
.boot-tile[data-skin-pick='amber']       { --tile-bg:#170d00; --tile-fg:#ffc14d; --tile-bd:#ffb000; --tile-bar:#ffb000; }
.boot-tile[data-skin-pick='selfiebeats'] { --tile-bg:#9a927e; --tile-fg:#221f17; --tile-bd:#5a5446; --tile-bar:#d24b3e; }

.boot-tile[data-skin-pick='win95'] .boot-tile__bar,
.boot-tile[data-skin-pick='mac'] .boot-tile__bar { color: #fff; }

/* ---------- Intro nach der Wahl ------------------------------------------ */

.boot-play { padding: calc(var(--u) * 4) 0; }
.boot-brand {
  font-family: var(--f-display);
  font-size: clamp(1rem, 4.2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 calc(var(--u) * 6);
  text-shadow: calc(var(--glow) * 0px) 0 calc(var(--glow-px)) var(--shadow);
}
.boot-line {
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.45;
  margin: 0 0 calc(var(--u) * 3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s steps(3), transform .35s steps(3);
}
.boot-line.is-on { opacity: 1; transform: none; }
.boot-ready {
  font-family: var(--f-display);
  font-size: clamp(.85rem, 2.8vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-2);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 6);
  opacity: 0;
}
.boot-ready.is-on { opacity: 1; }

.boot-start {
  font-family: var(--f-display);
  font-size: clamp(.8rem, 2.6vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-3);
  margin: 0 0 calc(var(--u) * 5);
  opacity: 0;
}
.boot-start.is-on {
  animation: boot-blink 1s steps(1, end) infinite;
}
@keyframes boot-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.boot-go {
  opacity: 0;
  pointer-events: none;
}
.boot-go.is-on {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .boot-line, .boot-ready, .boot-start, .boot-go {
    transition: none;
    animation: none !important;
  }
  .boot-line.is-on, .boot-ready.is-on, .boot-start.is-on, .boot-go.is-on { opacity: 1; }
}

@media (max-width: 40rem) {
  .boot-grid { grid-template-columns: repeat(2, 1fr); }
  .boot-stage h1 { font-size: .72rem; }
  .boot-kicker { font-size: .5rem; }
  .boot-lead { font-size: .92rem; }
}