/* ==========================================================================
   Game: The Ascent (vertical platform climber)
   Self-contained — every class is prefixed .ta-. The game panel is always a
   dark "stage" in both site themes; the play area itself is a <canvas>.
   Load order: bootstrap → common.css → header/breadcrumb/footer → this file.
   ========================================================================== */

.ta {
  --ta-bg: #12163a;
  --ta-card: rgba(255, 255, 255, .06);
  --ta-card-hover: rgba(255, 255, 255, .11);
  --ta-line: rgba(255, 255, 255, .12);
  --ta-text: #fff;
  --ta-sub: rgba(255, 255, 255, .72);
  --ta-good: #19c28f;
  --ta-bad: #ff5c8a;
  --ta-warn: #ffb547;
  --ta-accent: var(--hot);

  position: relative;
  margin: 10px 0 40px;
  padding: 36px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(91, 61, 245, .45), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(243, 154, 109, .28), transparent 60%),
    var(--ta-bg);
  color: var(--ta-text);
  isolation: isolate;
  min-height: 520px;
}
:root[data-theme="dark"] .ta { border: 1px solid var(--line); }

.ta-screen[hidden] { display: none !important; }
.ta-screen { animation: ta-fade .35s var(--ease); }
@keyframes ta-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.ta-ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Shared buttons ---------- */
.ta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--ta-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ta-text);
  font: 600 .875rem/1.2 var(--font);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.ta-ghost:hover { background: var(--ta-card-hover); }
.ta-ghost--danger { color: var(--ta-sub); }
.ta-ghost--danger.is-confirm { border-color: var(--ta-bad); color: var(--ta-bad); }
.ta-ghost .ta-ico--off { display: none; }
.ta-ghost.is-off .ta-ico--on { display: none; }
.ta-ghost.is-off .ta-ico--off { display: block; }

.ta-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--ta-line);
  border-radius: 50%;
  background: var(--ta-card);
  color: var(--ta-text);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.ta-icon-btn:hover { background: var(--ta-card-hover); }

.ta .btn-pill { min-height: 46px; padding: 11px 24px; }
.ta .btn-pill:not(.btn-pill--hot) { background: var(--brand-soft); color: var(--night); }
.ta button:focus-visible { outline: 3px solid var(--ta-accent); outline-offset: 2px; }

/* ==========================================================================
   Screen 1: stage select
   ========================================================================== */
.ta-home__head { display: flex; align-items: flex-start; gap: 22px; max-width: 760px; }

.ta-logo {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, #2f7cf0, #c4e8ff);
  box-shadow: 0 12px 30px rgba(47, 124, 240, .35);
}
.ta-logo span { position: absolute; display: block; height: 6px; border-radius: 3px; }
.ta-logo__p1 { left: 8px; bottom: 10px; width: 24px; background: #5be08f; }
.ta-logo__p2 { left: 30px; bottom: 32px; width: 22px; background: #5ec8ff; }
.ta-logo__p3 { left: 46px; bottom: 54px; width: 22px; background: #c79bff; }
.ta-logo span.ta-logo__ball {
  left: 14px;
  bottom: 16px;
  width: 14px;
  height: 15px;
  border: 2px solid #2a2340;
  border-radius: 6px;
  background: #ffd84d;
  animation: ta-hop 2.4s ease-in-out infinite;
}
@keyframes ta-hop {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(8px, -30px); }
  33%  { transform: translate(18px, -22px); }
  50%  { transform: translate(26px, -50px); }
  66%  { transform: translate(34px, -44px); }
  83%  { transform: translate(18px, -10px); }
  100% { transform: translate(0, 0); }
}

.ta-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 216, 77, .14);
  color: var(--ta-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ta-title { margin: 0 0 8px; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.035em; line-height: 1.05; }
.ta-lead { margin: 0; color: var(--ta-sub); }

.ta-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 28px 0 26px;
}
.ta-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ta-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--ta-line);
  border-radius: var(--radius-pill);
  background: var(--ta-card);
}
.ta-chip__label { color: var(--ta-sub); font-size: .78rem; font-weight: 500; }
.ta-chip strong { color: var(--ta-accent); font-size: 1rem; }
.ta-toolbar__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.ta-subtitle { margin: 0 0 14px; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ta-sub); }

.ta-stages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ta-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 12px 12px 16px;
  border: 1px solid var(--ta-line);
  border-radius: var(--radius-md);
  background: var(--ta-card);
  color: var(--ta-text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.ta-stage:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(255, 216, 77, .55); background: var(--ta-card-hover); }
.ta-stage.is-cleared { border-color: rgba(25, 194, 143, .45); }
.ta-stage.is-locked { cursor: not-allowed; opacity: .5; }
.ta-stage--endless:not(:disabled) { border-color: rgba(199, 155, 255, .5); }

.ta-stage__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 78px;
  padding: 10px;
  overflow: hidden;
  border-radius: 12px;
}
.ta-stage__art::after { /* little ledges */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#5be08f, #5be08f) 62% 72% / 26px 5px no-repeat,
    linear-gradient(#5ec8ff, #5ec8ff) 84% 42% / 26px 5px no-repeat,
    linear-gradient(#5be08f, #5be08f) 66% 14% / 26px 5px no-repeat;
  opacity: .9;
}
.ta-stage__art[data-theme-art="space"]::before,
.ta-stage__art[data-theme-art="nebula"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px);
  background-size: 22px 18px;
  opacity: .5;
}
.ta-stage__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ta-accent);
  color: var(--night);
  font-size: 1.1rem;
  font-weight: 700;
}
.ta-stage.is-locked .ta-stage__num { background: rgba(0, 0, 0, .35); color: #fff; }
.ta-stage__goal {
  position: relative;
  z-index: 1;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(10, 12, 30, .55);
  font-size: .72rem;
  font-weight: 700;
}
.ta-stage__body { display: flex; flex-direction: column; gap: 3px; flex: 1; padding: 0 4px; }
.ta-stage__name { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ta-stage__blurb { color: var(--ta-sub); font-size: .82rem; line-height: 1.45; }
.ta-stage__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--ta-line);
}
.ta-stage__best { color: var(--ta-sub); font-size: .78rem; font-weight: 600; }

.ta-star { color: rgba(255, 255, 255, .22); font-size: 1.05rem; line-height: 1; }
.ta-star.is-on { color: var(--ta-accent); text-shadow: 0 0 12px rgba(255, 216, 77, .5); }

.ta-noscript { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--radius-sm); background: rgba(255, 92, 138, .15); }

/* ==========================================================================
   Screen 2: playing
   ========================================================================== */
.ta-play { position: relative; }

.ta-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  max-width: 640px;
  margin: 0 auto 12px;
}
.ta-hud__stage {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 216, 77, .14);
  color: var(--ta-accent);
  font-size: .8rem;
  font-weight: 700;
}
.ta-hud__stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.ta-hud__btns { display: flex; gap: 8px; }
.ta-stat { display: flex; flex-direction: column; line-height: 1.2; }
.ta-stat__label { color: var(--ta-sub); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ta-stat strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-stat small { color: var(--ta-sub); font-size: .75em; font-weight: 600; }
.ta-stat.is-done strong { color: var(--ta-good); }
.ta-stat.is-over strong { color: var(--ta-warn); }

.ta-progress {
  max-width: 640px;
  height: 6px;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
}
.ta-progress[hidden] { display: none; }
.ta-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5be08f, var(--ta-accent));
  transition: width .3s var(--ease);
}

.ta-arena { max-width: 460px; margin: 0 auto; }
.ta-canvas-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ta-line);
  border-radius: var(--radius-md);
  background: #26286a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ta-canvas {
  display: block;
  width: 100%;
  height: 600px;
  outline: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.ta-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--ta-accent); }

/* On-screen steering (shown on touch screens and small widths) */
.ta-pad { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ta-pad__btn {
  display: grid;
  place-items: center;
  height: 64px;
  border: 1px solid var(--ta-line);
  border-radius: var(--radius-md);
  background: var(--ta-card);
  color: var(--ta-text);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .1s linear, transform .1s linear;
}
.ta-pad__btn .ta-pad__ico { width: 30px; height: 30px; }
.ta-pad__btn.is-down { background: rgba(255, 216, 77, .22); border-color: var(--ta-accent); transform: scale(.97); }

.ta-keys { margin: 12px 0 0; color: var(--ta-sub); font-size: .8rem; text-align: center; }
.ta-keys kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--ta-line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: var(--ta-text);
  font: 600 .75rem/1.4 var(--font);
  text-align: center;
}

@media (pointer: coarse), (max-width: 767.98px) {
  .ta-pad { display: grid; }
}
@media (pointer: coarse) {
  .ta-keys { display: none; }
}

/* Pause overlay */
.ta-play.is-paused .ta-canvas { filter: blur(6px) brightness(.7); }
.ta-paused {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
}
.ta-paused[hidden] { display: none; }
.ta-paused__card {
  max-width: 340px;
  padding: 24px;
  border: 1px solid var(--ta-line);
  border-radius: var(--radius-md);
  background: rgba(18, 22, 58, .94);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  text-align: center;
}
.ta-paused__title { margin: 0 0 6px; font-size: 1.6rem; }
.ta-paused__card p { margin: 0 0 18px; color: var(--ta-sub); font-size: .9rem; }
.ta-paused__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ==========================================================================
   Screen 3: results
   ========================================================================== */
.ta-result { max-width: 640px; margin: 0 auto; padding: 10px 0; text-align: center; }
.ta-result__stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.ta-result__stars[hidden] { display: none; }
.ta-star--big { font-size: clamp(3rem, 9vw, 4.25rem); opacity: 0; animation: ta-star-in .5s var(--ease) forwards; }
@keyframes ta-star-in {
  from { opacity: 0; transform: scale(.3) rotate(-30deg); }
  to   { opacity: 1; transform: none; }
}
.ta-result__title { margin: 0 0 6px; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.ta-result__new {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--ta-accent);
  color: var(--night);
  font-size: .8rem;
  font-weight: 700;
}
.ta-result__new[hidden] { display: none; }
.ta-result__text { margin: 0 auto 24px; max-width: 480px; color: var(--ta-sub); }
.ta-result__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 26px; }
.ta-result__stats div { padding: 14px 8px; border: 1px solid var(--ta-line); border-radius: var(--radius-sm); background: var(--ta-card); }
.ta-result__stats dt { color: var(--ta-sub); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ta-result__stats dd { margin: 2px 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ta-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ta-result__actions [hidden] { display: none; }

/* ==========================================================================
   How-to-play section (below the game, uses the site theme)
   ========================================================================== */
.ta-guide { margin: 0 0 56px; }
.ta-guide .section-head__title { margin-bottom: 22px; }
.ta-guide__item {
  height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ta-guide__item h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.ta-guide__item p { margin: 0; color: var(--sub); font-size: .9rem; }
.ta-guide__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--onbrand);
  font-weight: 700;
}
.ta-guide__back { margin: 24px 0 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767.98px) {
  .ta { padding: 24px 20px; min-height: 0; }
  .ta-result__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-hud__stats { margin-left: 0; order: 3; width: 100%; justify-content: space-between; }
  .ta-hud__btns { margin-left: auto; }
}
@media (max-width: 575.98px) {
  .ta { margin-left: -4px; margin-right: -4px; padding: 18px 14px; border-radius: var(--radius-md); }
  .ta-home__head { flex-direction: column; gap: 14px; }
  .ta-toolbar { flex-direction: column; align-items: stretch; }
  .ta-toolbar__actions .ta-ghost { flex: 1; justify-content: center; }
  .ta-stages { grid-template-columns: 1fr; }
  .ta-hud { gap: 10px; margin-bottom: 10px; }
  .ta-stat strong { font-size: 1.02rem; }
  .ta-pad__btn { height: 58px; }
  .ta-result__actions .btn-pill, .ta-result__actions .ta-ghost { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-logo span.ta-logo__ball { animation: none; }
  .ta-star--big { opacity: 1; animation: none; }
  .ta-screen { animation: none; }
}