/* =====================================================================
   Game shell: the Nightjar treatment for inline training games.
   A CRT title screen over the activity page, and a matching completion
   screen (shown by GameShell.complete from game-shell.js). Shares the
   phosphor identity of the training hub TVs, so pressing PLAY on a TV
   lands the learner inside the same kind of screen.
   Loaded only by activity pages that include game-shell.js.
   ===================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/training/fonts/jetbrains-mono.woff") format("woff");
  font-weight: 400 700;
  font-display: swap;
}

.gs {
  --gs-ph: #4dff8a;
  --gs-ph-dim: #2fae5f;
  --gs-ph-soft: #bff5cf;
  --gs-ink: #021006;
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  background: #010402;
  color: var(--gs-ph);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
body.gs-locked { overflow: hidden; }

/* The tube: curved glow, scanlines, rolling band, vignette, static. */
.gs__tube {
  position: relative;
  overflow: hidden;
  display: grid;
  background: radial-gradient(ellipse at 50% 42%, #0c2c17, #03110a 68%, #010603);
  animation: gsFlicker 6s steps(1) infinite;
}
@keyframes gsFlicker { 0%, 100% { opacity: 1; } 31% { opacity: .97; } 32% { opacity: 1; } 77% { opacity: .98; } 78% { opacity: 1; } }
.gs__tube::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .3) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}
.gs__tube::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(77, 255, 138, 0), rgba(77, 255, 138, .05) 50%, rgba(77, 255, 138, 0)) 0 -30% / 100% 26% no-repeat;
  box-shadow: inset 0 0 18vmin rgba(0, 0, 0, .9);
  animation: gsRoll 7s linear infinite;
}
@keyframes gsRoll { to { background-position: 0 130%; } }

.gs__static {
  position: absolute;
  inset: -40%;
  z-index: 2;
  opacity: .05;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.25 0 0 0 0 1 0 0 0 0 .5 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
  animation: gsStatic .5s steps(4) infinite;
}
@keyframes gsStatic {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -5%); }
  75% { transform: translate(-3%, 6%); }
  100% { transform: translate(4%, 2%); }
}

.gs__inner {
  position: relative;
  z-index: 4;
  place-self: center;
  width: min(680px, calc(100% - 2.5rem));
  padding: 1rem;
  text-align: center;
}

.gs__osd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 clamp(2rem, 7vh, 4rem);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 0 .5em rgba(77, 255, 138, .8);
}
.gs__tag {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .35em .8em;
  border: 1px solid rgba(77, 255, 138, .6);
  border-radius: .3em;
}
.gs__tag i {
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: #ff4f45;
  box-shadow: 0 0 .7em #ff4f45;
  animation: gsBlink 1.4s steps(1) infinite;
}
@keyframes gsBlink { 50% { opacity: 0; } }

.gs__label {
  margin: 0 0 1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gs-ph-dim);
}
.gs__title {
  margin: 0;
  font-family: "Inter", "Noto Kufi Arabic", sans-serif;
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  color: #ebfff0;
  text-shadow: 0 0 .35em rgba(77, 255, 138, .55), 0 0 1.4em rgba(77, 255, 138, .3);
}
.gs__sub {
  max-width: 54ch;
  margin: 1.2rem auto 0;
  font-size: clamp(.92rem, 1.6vw, 1.02rem);
  line-height: 1.7;
  color: var(--gs-ph-soft);
}

.gs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: clamp(1.8rem, 5vh, 3rem);
}
.gs__play {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.6em;
  border: 0;
  border-radius: .35em;
  background: var(--gs-ph);
  color: var(--gs-ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 0 1.6em rgba(77, 255, 138, .55);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gs__play:hover,
.gs__play:focus-visible { background: #fff; box-shadow: 0 0 2.2em rgba(77, 255, 138, .85); transform: translateY(-1px); outline: none; }
.gs__key { opacity: .65; font-size: .82em; }

.gs__sound,
.gs__exit {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .8em 1.1em;
  border: 1px solid rgba(77, 255, 138, .45);
  border-radius: .35em;
  background: transparent;
  color: var(--gs-ph);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.gs__sound:hover, .gs__sound:focus-visible,
.gs__exit:hover, .gs__exit:focus-visible { border-color: var(--gs-ph); background: rgba(77, 255, 138, .08); outline: none; }
.gs__sound.is-off { color: var(--gs-ph-dim); border-color: rgba(77, 255, 138, .25); }

.gs__hint {
  margin: clamp(1.6rem, 5vh, 2.6rem) 0 0;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--gs-ph-dim);
}

/* Completion screen reuses the same shell with a score readout. */
.gs__score {
  margin: 1.6rem auto 0;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: #ebfff0;
  text-shadow: 0 0 .5em rgba(77, 255, 138, .7);
}
.gs__score small { display: block; margin-bottom: .4em; font-size: .55em; color: var(--gs-ph-dim); letter-spacing: .22em; }

/* Power-off: the picture collapses to a line, then a dot. */
.gs.is-off .gs__tube { animation: gsOff .45s ease-in both; }
@keyframes gsOff {
  0% { transform: scale(1, 1); opacity: 1; }
  62% { transform: scale(1, .012); opacity: 1; }
  100% { transform: scale(0, .004); opacity: 0; }
}
.gs.is-off { background: transparent; transition: opacity .2s ease .4s; opacity: 0; }

/* Arabic */
body.lang-ar .gs { direction: rtl; }
body.lang-ar .gs__title { letter-spacing: 0; line-height: 1.3; }
body.lang-ar .gs__label,
body.lang-ar .gs__hint { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .gs__tube, .gs__tube::after, .gs__static, .gs__tag i { animation: none; }
  .gs.is-off .gs__tube { animation: none; }
  .gs.is-off { opacity: 0; transition: opacity .25s ease; }
}