/* Jfokus 2027 Games — stage styles. Everything is scoped under .jf-stage so
   the block can be dropped into the site's hero without touching site CSS.
   Palette and type follow the 2027 site: #ffee00 on black, Press Start 2P
   for headings, Share Tech Mono for running text. */
.jf-stage {
  --jf-black: #000;
  --jf-yellow: #ffee00;
  --jf-yellow-pale: #fff47a;
  --jf-lime: #00ff00;
  --jf-red: #dc323c;
  --jf-water: #288cd2;
  --jf-heading: 'Press Start 2P', ui-monospace, monospace;
  --jf-mono: 'Share Tech Mono', ui-monospace, monospace;

  position: relative;
  width: 100%;
  height: 100%;
  background: var(--jf-black);
  color: var(--jf-yellow);
  font-family: var(--jf-mono);
  overflow: hidden;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  container-type: size;
  cursor: pointer;
}
.jf-stage.jf-playing { cursor: default; }
.jf-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--jf-yellow); }
.jf-stage * { box-sizing: border-box; }
.jf-stage:fullscreen { width: 100vw; height: 100vh; }

.jf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.jf-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.2) 3px);
}

.jf-hidden { display: none !important; }

/* Attract prompt: quiet, small, slow pulse. Meant to sit under the site's
   hero artwork without competing with the page content. -------------------*/
.jf-attract {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6% 4% 6%;
  pointer-events: none;
}
.jf-wordmark {
  width: clamp(200px, 46cqw, 640px);
  max-width: 92%;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 10px rgba(255, 238, 0, 0.45));
  animation: jf-fadein 1.2s ease-out both;
}
.jf-wordmark svg { display: block; width: 100%; height: auto; }
@keyframes jf-fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Short stages (the site hero): smaller wordmark, pinned near the top so it
   stays clear of the runner / helicopter in the middle of the picture. */
@container (max-height: 420px) {
  .jf-attract { padding-top: 3.5%; }
  .jf-wordmark { width: clamp(150px, 28cqw, 400px); }
}
@container (max-height: 220px) {
  .jf-wordmark { width: clamp(120px, 22cqw, 300px); }
}
.jf-attract-text {
  font-family: var(--jf-heading);
  font-size: clamp(7px, 1.1cqw, 11px);
  letter-spacing: 0.08em;
  color: var(--jf-yellow);
  text-shadow: 0 0 8px rgba(255, 238, 0, 0.5);
  padding: 0.6em 1em;
  border: 1px solid rgba(255, 238, 0, 0.35);
  background: rgba(0, 0, 0, 0.45);
  animation: jf-pulse 4s ease-in-out infinite;
  text-align: center;
  max-width: 90%;
}
@keyframes jf-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}

/* HUD -------------------------------------------------------------------- */
.jf-hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
  padding: 0.6em 0.9em;
  font-family: var(--jf-heading);
  font-size: clamp(7px, 1.3cqw, 12px);
  text-shadow: 0 0 6px rgba(255, 238, 0, 0.55);
  pointer-events: none;
  flex-wrap: wrap;
}
.jf-hud-row { display: flex; gap: 1.2em; align-items: center; flex-wrap: wrap; }
.jf-hud-right { justify-content: flex-end; }
.jf-hud-block { display: inline-flex; gap: 0.5em; align-items: baseline; }
.jf-lbl { color: var(--jf-lime); font-size: 0.8em; }
.jf-val { min-width: 2ch; }
.jf-lives { display: inline-flex; gap: 0.35em; }
.jf-lives i { display: inline-block; width: 0.9em; height: 0.9em; background: var(--jf-yellow); box-shadow: 0 0 6px rgba(255,238,0,0.7); }
.jf-flood { display: inline-flex; gap: 0.5em; align-items: center; }
.jf-flood-bar { display: inline-block; width: 8em; height: 0.8em; border: 1px solid var(--jf-water); position: relative; }
.jf-flood-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--jf-water); transition: width 0.3s linear; }
.jf-flood-bar i.jf-danger { background: var(--jf-red); }
.jf-hud.jf-hit { animation: jf-shake 0.3s linear; }
@keyframes jf-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-2px, 2px); }
}

.jf-stage.jf-playing .jf-hud { padding-right: 3.4em; }
.jf-playbar {
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  font-size: clamp(8px, 1.3cqw, 12px);
}

/* Overlays --------------------------------------------------------------- */
.jf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  padding: 1.2em;
  text-align: center;
  font-family: var(--jf-heading);
  font-size: clamp(7px, 1.35cqw, 13px);
  background: rgba(0, 0, 0, 0.72);
  cursor: default;
  overflow: auto;
}
.jf-menu-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.jf-menu-logo { display: inline-block; width: 6.2em; margin-right: 0.8em; vertical-align: middle; filter: drop-shadow(0 0 8px rgba(255,238,0,0.45)); }
.jf-menu-logo svg { display: block; width: 100%; height: auto; }
.jf-menu-title {
  font-size: 1.6em;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(255, 238, 0, 0.6);
}
.jf-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.jf-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2em;
  width: min(100%, 60em);
}
.jf-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9em;
  padding: 1.2em 1.3em;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--jf-yellow);
  color: var(--jf-yellow);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.jf-card:hover, .jf-card:focus-visible { background: var(--jf-yellow); color: var(--jf-black); outline: none; }
.jf-card:hover .jf-card-key, .jf-card:focus-visible .jf-card-key,
.jf-card:hover .jf-card-blurb, .jf-card:focus-visible .jf-card-blurb,
.jf-card:hover .jf-card-controls, .jf-card:focus-visible .jf-card-controls,
.jf-card:hover .jf-card-hi, .jf-card:focus-visible .jf-card-hi { color: var(--jf-black); }
.jf-card-key { position: absolute; top: 0.8em; right: 0.9em; color: var(--jf-lime); font-size: 0.9em; }
.jf-card-name { font-size: 1.35em; letter-spacing: 0.06em; }
.jf-card-blurb, .jf-card-controls, .jf-card-hi { font-family: var(--jf-mono); font-size: 1.15em; line-height: 1.45; color: var(--jf-yellow-pale); }
.jf-card-controls { white-space: pre-line; opacity: 0.85; }
.jf-card-hi { color: var(--jf-lime); }
.jf-card-cta { margin-top: auto; padding: 0.5em 0.9em; border: 2px solid currentColor; font-size: 0.95em; }
.jf-menu-foot { display: flex; gap: 1em; align-items: center; flex-wrap: wrap; justify-content: center; }
.jf-menu-hint { font-family: var(--jf-mono); font-size: 1.1em; color: #999; }

.jf-btn {
  font-family: var(--jf-heading);
  font-size: 0.85em;
  color: var(--jf-yellow);
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--jf-yellow);
  padding: 0.6em 0.9em;
  cursor: pointer;
  line-height: 1;
}
.jf-btn:hover, .jf-btn:focus-visible { background: var(--jf-yellow); color: var(--jf-black); outline: none; }
.jf-btn-primary { background: var(--jf-yellow); color: var(--jf-black); }
.jf-btn-primary:hover, .jf-btn-primary:focus-visible { background: var(--jf-black); color: var(--jf-yellow); }
.jf-mini { padding: 0.35em 0.55em; font-size: 1em; }

.jf-over-title { margin: 0; font-size: 2em; line-height: 1.3; text-shadow: 0 0 12px rgba(255,238,0,0.6); text-wrap: balance; }
.jf-over-stat { margin: 0; font-size: 1.2em; }
.jf-over-newhi { margin: 0; color: var(--jf-lime); animation: jf-blink 0.5s steps(2, start) infinite; }
.jf-over-btns { display: flex; gap: 0.8em; flex-wrap: wrap; justify-content: center; }
@keyframes jf-blink { to { visibility: hidden; } }

.jf-toast {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%) scale(0.85);
  font-family: var(--jf-heading);
  font-size: clamp(8px, 1.8cqw, 18px);
  color: var(--jf-yellow);
  text-shadow: 0 0 10px rgba(255, 238, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  white-space: nowrap;
}
.jf-toast.jf-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.jf-toast.jf-bad { color: var(--jf-red); text-shadow: 0 0 10px rgba(220,50,60,0.8); }
.jf-toast.jf-good { color: var(--jf-lime); text-shadow: 0 0 10px rgba(0,255,0,0.8); }

.jf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jf-heading);
  font-size: clamp(8px, 1.4cqw, 14px);
  padding: 1em;
  text-align: center;
}
.jf-loading.jf-error { color: var(--jf-red); line-height: 1.8; }

/* Short stages (the site hero on small screens): compact menu. ------------*/
@container (max-height: 420px) {
  .jf-card { gap: 0.5em; padding: 0.7em 0.9em; }
  .jf-card-blurb, .jf-card-controls { display: none; }
  .jf-card-name { font-size: 1.1em; }
  .jf-overlay { gap: 0.7em; padding: 0.6em 0.8em; }
  .jf-menu-title { font-size: 1.15em; }
  .jf-menu-hint { display: none; }
  .jf-over-title { font-size: 1.3em; }
}
@container (max-width: 520px) {
  .jf-cards { grid-template-columns: minmax(0, 1fr); }
  .jf-card-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jf-attract-text { animation: none; opacity: 0.7; }
  .jf-wordmark { animation: none; }
  .jf-top5-overlay { transition: none; }
  .jf-hud.jf-hit { animation: none; }
  .jf-over-newhi { animation: none; }
}

/* Replay banner, leaderboard, score submission ------------------------- */
.jf-attract-top { display: flex; flex-direction: column; align-items: center; }
/* Layout: the game fills the host; the top-5 panel is a half-transparent
   overlay along one edge, visible only while the demo runs. ---------------*/
.jf-wrap { display: block; width: 100%; height: 100%; background: #000; }
.jf-wrap > .jf-stage { width: 100%; height: 100%; }
.jf-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(150px, 19cqw, 240px);
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 1em 1em 0.8em;
  background: rgba(0, 0, 0, 0.5);
  color: var(--jf-yellow);
  font-family: var(--jf-heading);
  font-size: clamp(6px, 0.8cqw, 10px);
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0.5;
  transition: opacity 0.6s;
  pointer-events: none;
}
.jf-stage:hover .jf-side { opacity: 0.9; }
.jf-side.jf-side-empty { display: none; }
.jf-side-right { right: 0; border-left: 1px solid rgba(255, 238, 0, 0.3); }
.jf-side-left { left: 0; border-right: 1px solid rgba(255, 238, 0, 0.3); }
.jf-side-head { width: 5.5em; filter: drop-shadow(0 0 6px rgba(255,238,0,0.4)); }
.jf-side-head svg { display: block; width: 100%; height: auto; }
.jf-side-foot { margin-top: auto; }
.jf-side-hint { font-family: var(--jf-mono); font-size: 1.15em; color: #aaa; line-height: 1.4; }
@container (max-width: 700px) { .jf-side { display: none; } }
@container (max-height: 340px) { .jf-side { gap: 0.4em; padding: 0.6em 0.8em 0.4em; } .jf-side .jf-top5 { line-height: 1.55; } .jf-side-foot { display: none; } .jf-side-head { width: 4.5em; } }
@media (prefers-reduced-motion: reduce) { .jf-side { transition: none; } }

/* Top-5 list: in the side panel, or (side:false) a faint overlay in the
   game's bottom-right corner. The row being replayed is highlighted. */
.jf-top5 {
  line-height: 2;
  letter-spacing: 0.04em;
  color: #fff47a;
  min-width: 0;
}
.jf-top5-title { color: #00ff00; margin-bottom: 0.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jf-top5-gap { height: 0.9em; }
.jf-top5-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 0.7em; align-items: baseline; padding: 0 0.4em; opacity: 0.75; }
.jf-top5-rank { color: #00ff00; font-size: 0.85em; }
.jf-top5-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-top5-score { text-align: right; }
.jf-top5-on { opacity: 1; color: #ffee00; background: rgba(255, 238, 0, 0.14); outline: 1px solid rgba(255, 238, 0, 0.4); }
.jf-top5-on .jf-top5-rank { color: #ffee00; }
.jf-top5-overlay {
  position: absolute;
  right: 1.2em;
  bottom: 1em;
  font-family: var(--jf-heading);
  font-size: clamp(6px, 0.8cqw, 9px);
  opacity: 0.5;
  text-shadow: 0 0 4px #000, 0 0 2px #000;
  transition: opacity 0.6s;
  min-width: 17em;
}
.jf-stage:hover .jf-top5-overlay { opacity: 0.85; }
@container (max-width: 640px) { .jf-top5-overlay { display: none; } }
@container (max-height: 200px) { .jf-top5-overlay { display: none; } }
/* HUD shown for a replay the user asked to watch: dimmer than in play. */
.jf-stage.jf-watching .jf-hud { opacity: 0.6; }

.jf-tabs { display: flex; gap: 0.6em; }
.jf-tab-on { background: var(--jf-yellow); color: var(--jf-black); }
.jf-board-list { width: min(100%, 44em); display: flex; flex-direction: column; gap: 0.35em; font-family: var(--jf-mono); font-size: 1.25em; }
.jf-row { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto auto auto; align-items: center; gap: 0.8em; padding: 0.3em 0.6em; border: 1px solid rgba(255, 238, 0, 0.25); background: rgba(0, 0, 0, 0.5); }
.jf-row:nth-child(1) { border-color: var(--jf-yellow); }
.jf-rank { color: var(--jf-lime); font-family: var(--jf-heading); font-size: 0.7em; }
.jf-rname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-rscore { font-family: var(--jf-heading); font-size: 0.75em; }
.jf-rmeta { color: #999; font-size: 0.85em; white-space: nowrap; }
.jf-board-empty { font-family: var(--jf-mono); color: #999; margin: 1em 0; }

.jf-submit { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; justify-content: center; }
.jf-name {
  font-family: var(--jf-heading);
  font-size: 0.85em;
  color: var(--jf-yellow);
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--jf-yellow);
  padding: 0.6em 0.7em;
  width: 13em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  outline: none;
}
.jf-name::placeholder { color: rgba(255, 238, 0, 0.45); }
.jf-name:focus { background: rgba(255, 238, 0, 0.12); }
.jf-submit-msg { flex-basis: 100%; font-family: var(--jf-mono); font-size: 1.2em; min-height: 1.3em; color: var(--jf-yellow-pale); }
.jf-submit-msg.jf-good { color: var(--jf-lime); }
.jf-submit-msg.jf-bad { color: var(--jf-red); }

@container (max-height: 420px) {
  .jf-rmeta { display: none; }
  .jf-row { gap: 0.5em; padding: 0.2em 0.5em; }
  .jf-board-list { font-size: 1.05em; }
}
@container (max-width: 520px) {
  .jf-rmeta { display: none; }
}