/* mecowhy.dev: ekran Commodore 64 (40 x 25 znaków), magnetofon i klawisze w stylu C64. */

/* Press Start 2P (SIL OFL 1.1, licencja w fonts/OFL.txt), podzbiór latin z Google Fonts. */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/press-start-2p-latin.woff2") format("woff2");
}

:root {
  --border: #7869C4;
  --bg: #40318D;
  --fg: #7869C4;
  --hi: #FFFFFF;
  --case: #b4a994;
  --case-2: #9c907c;
  --case-hi: #d2c8b5;
  --case-text: #3a2f28;
  --tape-h: min(30dvh, 270px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background-color: var(--border);
  color: var(--fg);
  font-family: "Press Start 2P", monospace;
  overflow: hidden;
  -webkit-font-smoothing: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* Scena z ekranem: rozmiar ekranu liczony z miejsca, które zostaje po magnetofonie i klawiszach. */
.stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  container-type: size;
  display: grid;
  place-items: center;
}

/* Winieta kineskopu. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .35) 100%);
}

.screen {
  position: relative;
  width: min(88cqw, 88cqh * 1.6);
  aspect-ratio: 8 / 5;
  background: var(--bg);
  container-type: inline-size;
  overflow: hidden;
  box-shadow: 0 0 3vmin rgba(0, 0, 0, .25);
  animation: power-on .7s ease-out both;
}

/* 1 znak = 1em, 40 kolumn na szerokość ekranu. */
.screen > * { font-size: calc(100cqw / 40); line-height: 1; }

.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bloom {
  filter: blur(calc(100cqw / 220));
  opacity: .45;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Linie skanowania. */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
}

/* Podczas czytania taśmy C64 wyłącza obraz: cały ekran ma kolor (i pasy) ramki. */
.screen.blank, .screen.off { background: transparent; box-shadow: none; }
.screen.blank > *, .screen.off > * { visibility: hidden; }

@keyframes power-on {
  0% { transform: scale(.02, .004); filter: brightness(4); }
  45% { transform: scale(1, .004); filter: brightness(3); }
  100% { transform: none; filter: none; }
}

/* --- Karty na ekranie ------------------------------------------------------ */

.card {
  position: absolute;
  left: 4em;
  top: 3em;
  width: 32em;
  padding: 1em;
  background: var(--bg);
  color: var(--fg);
  border: .5em solid var(--fg);
  box-shadow: 0 0 0 .5em var(--bg);
  text-shadow: 0 0 .12em currentColor;
  line-height: 1.25;
}
.card p + p { margin-top: 1em; }
.card .hi { color: var(--hi); }
.card a { color: var(--hi); text-decoration: none; }
.card a:hover, .card a:focus-visible { background: var(--hi); color: var(--bg); text-shadow: none; outline: none; }
.card .dim { animation: blink 1.1s steps(1) infinite; }

.bar {
  display: inline-block;
  width: 20em;
  height: 1em;
  vertical-align: top;
  border: .125em solid var(--fg);
  padding: .125em;
}
.fill { display: block; height: 100%; width: 0; background: var(--fg); }

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

/* Nagroda po nastrojeniu głowicy. */
.card.demo { top: 2em; text-align: center; }
.logo { font-size: 2em; line-height: 1.25; animation: cycle 1.2s steps(1) infinite; }
@keyframes cycle {
  0%    { color: #FFFFFF; }
  12.5% { color: #BFCE72; }
  25%   { color: #94E089; }
  37.5% { color: #67B6BD; }
  50%   { color: #7869C4; }
  62.5% { color: #8B3F96; }
  75%   { color: #B86962; }
  87.5% { color: #8B5429; }
}

/* --- Menu na dwóch ostatnich wierszach ekranu --------------------------------- */

.menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  background: var(--bg);
  text-shadow: 0 0 .12em currentColor;
}
.menu-items { display: flex; justify-content: center; height: 1em; }
.menu-items button {
  font: inherit;
  display: block;
  height: 1em;
  line-height: 1;
  color: var(--hi);
  background: none;
  border: 0;
  padding: 0 .5em;
  cursor: pointer;
  text-shadow: inherit;
}
.menu-items button[aria-current="true"] { background: var(--hi); color: var(--bg); text-shadow: none; }
.menu-items button.suggest:not([aria-current="true"]) { animation: blink .8s steps(1) infinite; }
.menu-items button.suggest[aria-current="true"] { animation: suggest .8s steps(1) infinite; }
@keyframes suggest { 50% { background: var(--fg); } }
.menu-items button:focus-visible { outline: .125em solid var(--fg); outline-offset: 0; }
.menu-hint { height: 1em; text-align: center; color: var(--fg); }

/* --- Program AZIMUTH ----------------------------------------------------------- */

.az {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #8B3F96;
}
.az-title {
  display: flex;
  justify-content: space-between;
  padding: .5em 1em;
  color: #000000;
  white-space: pre;
}
.az-panel {
  margin: 0 .5em;
  padding: .5em;
  background: #505050;
  color: #BFCE72;
  text-shadow: 0 0 .12em currentColor;
}
.az-panel p { line-height: 1.2; }
.az-panel p + p { margin-top: .4em; }
.az-help {
  font: inherit;
  color: #FFFFFF;
  background: #000000;
  border: 0;
  padding: 0 .25em;
  cursor: pointer;
}
.az-help[aria-pressed="true"] { background: #FFFFFF; color: #000000; }
.meter { display: inline-flex; gap: .125em; vertical-align: top; }
.meter i { display: block; width: .75em; height: 1em; background: #2c2c2c; }
.meter i.on { background: #BFCE72; }
.meter.lock i.on { background: #94E089; }
.az-state { color: #94E089; animation: blink .6s steps(1) infinite; }
.az canvas {
  position: static;
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  width: 100%;
  image-rendering: pixelated;
}

/* Podczas strojenia przeciąganie obraca śrubę zamiast przewijać lub przybliżać stronę. */
body.tuning { touch-action: none; }

/* --- Magnetofon -------------------------------------------------------------- */

.deck { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
body.tape-on .deck { padding-bottom: 30px; } /* stopka nie zasłania klawiszy magnetofonu */

.tape {
  height: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: height .5s ease;
}
body.tape-on .tape { height: var(--tape-h); }
body.tuning .tape { height: calc(var(--tape-h) * 1.2); }
.tape svg { height: 100%; width: auto; max-width: 100%; display: block; filter: drop-shadow(0 .6vmin 1vmin rgba(0, 0, 0, .35)); }

#driver { display: none; }
body.tuning #driver { display: inline; }

#ds text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; }
.ds-digit { font-size: 10px; font-weight: 400; fill: #f3f1ea; }
.ds-small { font-size: 3.4px; fill: #8a7f69; letter-spacing: .2px; }
.ds-label { font-size: 7px; font-style: italic; fill: #3b322a; }
.ds-lid { font-size: 3.6px; fill: #a9a9a6; letter-spacing: .8px; }
.ds-brand { font-size: 7.5px; font-style: italic; fill: #6b6150; }
.ds-key-lbl { font-size: 3.6px; letter-spacing: .15px; }
.ds-hint { font-size: 6px; fill: #ffffff; paint-order: stroke; stroke: #1a1410; stroke-width: 1.6px; }
.ds-arrow { fill: #ffffff; stroke: #1a1410; stroke-width: 1.2px; }
.drv-hint { animation: blink 1s steps(1) infinite; }
.drv-hint.gone { display: none; }

/* Klawisze magnetofonu: wciśnięty klawisz zostaje na dole jak w prawdziwym C2N. */
.dk { cursor: pointer; transition: transform .06s; }
.dk.down { transform: translateY(3.5px); }
.dk-lit { opacity: 0; pointer-events: none; }
.dk.down .dk-lit { fill: #000000; opacity: .3; }
.dk.hint .dk-lit { animation: keyhint .7s steps(1) infinite; }
@keyframes keyhint { 50% { opacity: .5; } }

.reel { animation: spin 1.1s linear infinite paused; }
#ds.spin .reel { animation-play-state: running; }
@keyframes spin { to { transform: rotate(-360deg); } }

/* --- Klawisze w stylu C64 (telefon i tablet) --------------------------------------- */

.pad, .kb { display: none; }

/* Klawisze jak w C64 („breadbin”): czekoladowe, z wklęsłą górną powierzchnią nad szerszą podstawą.
   Szare są tylko klawisze funkcyjne (TYPE, MENU), tak jak F1-F8 w oryginale. */
.key {
  --top-hi: #715444;
  --top: #4a3428;
  position: relative;
  isolation: isolate;
  font: 700 11px/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .03em;
  color: #efe4c8;
  background: linear-gradient(#34241b, #1d130e);
  border: 0;
  border-radius: 7px;
  box-shadow: 0 2px 0 #0e0805, 0 4px 7px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2px 5px;
  cursor: pointer;
  touch-action: manipulation;
  min-width: 0;
}
.key::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px 4px 7px;
  border-radius: 5px;
  background: radial-gradient(120% 90% at 50% 12%, var(--top-hi), var(--top) 68%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 3px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .45);
}
.key.down { transform: translateY(2px); box-shadow: 0 0 0 #0e0805, 0 2px 3px rgba(0, 0, 0, .45); }
.key.down::before { inset: 3px 4px 5px; filter: brightness(.88); }
.key:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
.key-g {
  --top-hi: #eee9df;
  --top: #c6bfb1;
  color: #2b221c;
  background: linear-gradient(#a39c8d, #837c6e);
  box-shadow: 0 2px 0 #5c564b, 0 4px 7px rgba(0, 0, 0, .4);
}
.key-g.down { box-shadow: 0 0 0 #5c564b, 0 2px 3px rgba(0, 0, 0, .4); }
.key.on { --top-hi: #f3cd7f; --top: #c9963c; color: #2a1f10; }

/* Strzałki rysowane w CSS (czcionka nie ma ← i →). */
.arr { display: block; width: 0; height: 0; border: 7px solid transparent; }
.arr.up { border-bottom: 10px solid currentColor; border-top-width: 0; }
.arr.down { border-top: 10px solid currentColor; border-bottom-width: 0; }
.arr.left { border-right: 10px solid currentColor; border-left-width: 0; }
.arr.right { border-left: 10px solid currentColor; border-right-width: 0; }

.pad {
  width: 100%;
  max-width: 460px;
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 46px 46px;
  gap: 9px;
  grid-template-areas:
    "stop . up . ret"
    "kbd left down right ret";
}
.pad [data-k="STOP"] { grid-area: stop; }
.pad [data-k="KBD"] { grid-area: kbd; }
.pad [data-k="UP"] { grid-area: up; }
.pad [data-k="LEFT"] { grid-area: left; }
.pad [data-k="DOWN"] { grid-area: down; }
.pad [data-k="RIGHT"] { grid-area: right; }
.pad [data-k="RETURN"] { grid-area: ret; font-size: 12px; }
.pad.nudge [data-k="UP"], .pad.nudge [data-k="DOWN"],
.pad.nudge [data-k="LEFT"], .pad.nudge [data-k="RIGHT"], .pad.nudge [data-k="RETURN"] {
  animation: nudge .5s steps(1) 3;
}
@keyframes nudge { 50% { filter: brightness(1.6); } }

.kb {
  width: 100%;
  max-width: 560px;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 40px;
  gap: 6px 5px;
}
.kb .key { font-size: 14px; }
.kb .key.small { font-size: 8px; }
.kb .w3 { grid-column: span 3; }

/* --- Stopka: dźwięk, podpowiedź, LinkedIn ------------------------------------------ */

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 10px 14px;
  font-size: 9px;
  line-height: 1.4;
  pointer-events: none;
}
.foot > * { pointer-events: auto; }
.foot-btn, .foot-link {
  font: inherit;
  color: var(--hi);
  opacity: .6;
  background: none;
  border: 0;
  padding: 4px;
  text-decoration: none;
  cursor: pointer;
}
.foot-btn:hover, .foot-link:hover, .foot-btn:focus-visible, .foot-link:focus-visible { opacity: 1; outline: none; background: var(--hi); color: var(--border); }
.foot-hint { color: var(--hi); opacity: .6; text-align: center; }
.foot-link.glow { opacity: 1; animation: blink 1s steps(1) infinite; }

/* --- Urządzenia dotykowe: ekran u góry, pod nim magnetofon i klawisze -------------------- */

@media (pointer: coarse) {
  :root { --tape-h: min(28dvh, 50vw); }
  .screen { width: min(calc(100cqw - 16px), calc((100cqh - 16px) * 1.6)); }
  .deck {
    background: linear-gradient(var(--case), var(--case-2));
    border-top: 3px solid var(--case-hi);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .25);
    padding: 12px 12px calc(6px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  body.tape-on .deck { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .pad, .kb {
    display: grid;
    padding: 8px;
    border-radius: 8px;
    background: #241b15;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .35);
  }
  .deck { background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 3px), linear-gradient(var(--case), var(--case-2)); }
  .foot {
    position: static;
    width: 100%;
    padding: 2px 0 0;
    font-size: 8px;
  }
  .foot-btn, .foot-link, .foot-hint { color: var(--case-text); opacity: .75; }
  .foot-btn:hover, .foot-link:hover { background: none; color: var(--case-text); opacity: 1; }
  .foot-link.glow { color: #b0271f; }
}

@media (pointer: coarse) and (orientation: landscape) {
  :root { --tape-h: min(38dvh, 30vw); }
  .app { flex-direction: row; }
  .deck {
    width: min(46vw, 420px);
    border-top: 0;
    border-left: 3px solid var(--case-hi);
    box-shadow: -4px 0 12px rgba(0, 0, 0, .25);
    justify-content: flex-end;
    padding: 8px 12px calc(6px + env(safe-area-inset-bottom)) 12px;
    gap: 8px;
    overflow-y: auto;
  }
  .pad { grid-template-rows: 40px 40px; }
  .kb { grid-auto-rows: 32px; gap: 5px 4px; }
}

.only-touch { display: none; }
@media (pointer: coarse) {
  .only-touch { display: inline; }
  .only-mouse { display: none; }
  p.only-touch { display: block; }
}

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

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  .card .dim, .logo, .drv-hint, .az-state, .menu-items button.suggest, .dk.hint .dk-lit, .foot-link.glow { animation: none; }
  .logo { color: var(--hi); }
  .tape { transition: none; }
  #ds.spin .reel { animation-play-state: paused; }
}