/* Game page additions only. Keep selectors scoped to .game-page. */

.game-page{
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
}

.game-page .content-container{
  max-width: none;
  margin: 0;
  padding: clamp(0.5rem, 2.4vw, 1.5rem);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.game-page .content-container::before{
  display: none;
}

.game-page .game-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.game-page .game-title{
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
}

.game-page .game-home{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
  color: var(--ink);
  background: var(--accent-weak);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.game-page .game-home:hover{
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.game-page .game-home:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.game-page .game-section{
  margin-top: 0;
}

.game-page .game-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 768 / 432;

  background: #0b0c0f;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);

  overflow: hidden;
}

/* Cut-corner variant to match existing nav/cv buttons where supported. */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)){
  .game-page .game-stage{
    border-radius: 0;
    clip-path: polygon(
      var(--cut) 0,
      100% 0,
      100% calc(100% - var(--cut)),
      calc(100% - var(--cut)) 100%,
      0 100%,
      0 var(--cut)
    );
  }
}

.game-page canvas.game-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  /* Prevent touch scroll on mobile and reduce selection artifacts. */
  touch-action: none;
  user-select: none;
}

.game-page .game-hud{
  position: absolute;
  inset: auto 0 var(--s4);
  display: flex;
  justify-content: center;

  pointer-events: none;

  font-size: 0.92rem;
  color: #fbf8f1;
}

.game-page .hud-bottom{
  display: flex;
  align-items: flex-end;
  gap: var(--s4);
  padding: 0;
}

.game-page .hud-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  min-width: min(38vw, 20rem);
}

.game-page .hud-center-top{
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.game-page .hud-meta{
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.game-page .hud-meta-divider{
  color: rgba(251,248,241,0.5);
  font-size: 0.75rem;
}

.game-page .hud-label{
  color: rgba(251,248,241,0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.game-page .hud-value{
  font-size: 0.95rem;
  font-weight: 600;
}

.game-page .hud-bar{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.game-page .hud-bar-xp{
  width: min(36vw, 22rem);
}

.game-page .hud-bar-label{
  font-size: 0.8rem;
  color: rgba(251,248,241,0.85);
  text-align: center;
}

.game-page .hud-bar-track{
  position: relative;
  height: 0.55rem;
  background: rgba(10, 12, 12, 0.7);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.game-page .hud-bar-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 120ms ease;
}

.game-page .hud-bar-fill-hp{
  background: linear-gradient(90deg, #69d06f, #b8ffb3);
}

.game-page .hud-bar-fill-xp{
  background: linear-gradient(90deg, #4da3ff, #8fd0ff);
}

.game-page .hud-orb{
  position: relative;
  width: clamp(72px, 10vw, 96px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.12), rgba(5,5,5,0.65));
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.55), 0 10px 22px rgba(0,0,0,0.4);
}

.game-page .hud-orb-hp{
  border-color: rgba(132,255,162,0.45);
}

.game-page .hud-orb-mana{
  border-color: rgba(140,182,255,0.5);
}

.game-page .hud-orb::after{
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  pointer-events: none;
}

.game-page .hud-orb-fill{
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  transition: height 120ms ease;
}

.game-page .hud-orb-fill-hp{
  background: linear-gradient(180deg, rgba(132,255,162,0.9), rgba(34,140,68,0.9));
}

.game-page .hud-orb-fill-mana{
  background: linear-gradient(180deg, rgba(140,182,255,0.95), rgba(58,84,214,0.9));
}

.game-page .hud-orb-text{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
}

.game-page .hud-orb-flash{
  animation: manaFlash 0.35s ease;
}

@keyframes manaFlash{
  0%{
    transform: scale(1);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.55), 0 10px 22px rgba(0,0,0,0.4);
  }
  45%{
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(138,97,255,0.6), 0 0 40px rgba(78,68,186,0.45);
  }
  100%{
    transform: scale(1);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.55), 0 10px 22px rgba(0,0,0,0.4);
  }
}

.game-page .hud-stats-button{
  pointer-events: auto;
  padding: 0.35rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
  color: #fefbf4;
  background: rgba(9, 16, 14, 0.8);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.game-page .hud-stats-button:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.game-page .hud-stats-button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Overlays */
.game-page .game-overlay{
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--s5);

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);

  opacity: 1;
  transition: opacity 160ms ease;
}

.game-page .game-overlay-hidden{
  opacity: 0;
  pointer-events: none;
}

.game-page .game-overlay-panel{
  width: min(40rem, 100%);

  background: rgba(8, 12, 10, 0.9);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);

  padding: calc(var(--s6) + 0.25rem);
  text-align: center;
  color: #f5f2ea;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.game-page .game-overlay-panel-stats{
  width: min(54rem, 100%);
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
}

.game-page .game-overlay-panel-stats h2{
  text-align: center;
}

.game-page .stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
  padding: var(--s4);
  background: rgba(0,0,0,0.28);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
}

.game-page .stats-block{
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.game-page .stats-block h3{
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(245,242,234,0.7);
}

.game-page .stats-list{
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.game-page .stats-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 0.9rem;
}

.game-page .stats-row dt{
  margin: 0;
  color: rgba(245,242,234,0.75);
}

.game-page .stats-row dd{
  margin: 0;
  font-weight: 600;
}

.game-page .game-overlay-panel h2{
  margin: 0;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.3rem);
  letter-spacing: 0.04em;
  color: #fef4dc;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}

.game-page .game-overlay-panel p{
  margin: 0;
  color: rgba(245,242,234,0.82);
  line-height: 1.45;
}

.game-page .game-overlay-lede{
  font-size: 1.05rem;
  margin-bottom: var(--s4);
}

.game-page .game-overlay-section{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding-top: 0;
}

.game-page .game-overlay-section h3{
  margin: 0 0 var(--s2);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,242,234,0.7);
}

.game-page .game-controls{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s4);
  text-align: left;
  font-size: 0.95rem;
  padding: var(--s4);
  background: rgba(0,0,0,0.35);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
}

.game-page .control-block{
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0.2rem 0;
}

.game-page .control-block-wide{
  grid-column: 1 / -1;
}

.game-page .control-title{
  color: rgba(245,242,234,0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.game-page .control-clusters{
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  align-items: center;
}

.game-page .key-cluster{
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}

.game-page .key-row{
  display: flex;
  gap: 0.35rem;
  justify-content: center;
}

.game-page .key-row-top{
  padding-left: 0.2rem;
}

.game-page .control-keys-inline{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.game-page .control-or{
  color: rgba(245,242,234,0.6);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-inline: 0.35rem;
  margin-inline: var(--s2);
}

.game-page .control-label{
  color: rgba(245,242,234,0.85);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.game-page kbd{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  padding: 0.14rem 0.55rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.5);
  color: #fefbf4;
  font-size: 0.72rem;
  font-weight: 600;
}

.game-page .game-overlay-note{
  font-size: 0.95rem;
  color: rgba(245,242,234,0.78);
}

.game-page .game-overlay-bottom{
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: 0;
}

.game-page .overlay-spacer{
  height: var(--s5);
}

.game-page .overlay-spacer-lg{
  height: var(--s6);
}

.game-page .game-overlay-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s4);
}

.game-page .game-overlay-hint{
  font-size: 0.9rem;
  color: var(--muted);
}

.game-page .game-overlay-best,
.game-page .game-over-best{
  font-size: 0.9rem;
  color: rgba(245,242,234,0.7);
}

.game-page .game-over-stats{
  display: grid;
  gap: 0.4rem;
  margin-bottom: var(--s4);
}

/* Buttons */
.game-page .game-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.75rem 1.2rem;
  min-width: 10rem;

  font-size: 0.95rem;
  letter-spacing: 0.06em;
  font-variant-caps: all-small-caps;

  color: var(--ink);
  background: var(--accent-weak);
  border: 1px solid var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  text-decoration: none;

  cursor: pointer;

  box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)){
  .game-page .game-button{
    border-radius: 0;
    clip-path: polygon(
      var(--cut) 0,
      100% 0,
      100% calc(100% - var(--cut)),
      calc(100% - var(--cut)) 100%,
      0 100%,
      0 var(--cut)
    );
  }
}

.game-page .game-button:hover{
  background: color-mix(in srgb, var(--accent-weak) 85%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.game-page .game-button:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}