/* YGO Evolution Original: shared look for the landing page and the game page.
   Echoes the 2008 client's title screen: sky-blue field, glossy slanted blue buttons, gold accent. */
@font-face {
  font-family: "Exo 2";
  src: url("exo2-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 500 900;
  font-display: swap;
}

:root {
  --sky-top: oklch(0.42 0.2 262);
  --sky-mid: oklch(0.68 0.16 238);
  --sky-low: oklch(0.9 0.07 220);
  --navy: oklch(0.2 0.08 262);
  --navy-deep: oklch(0.14 0.05 262);
  --btn-hi: oklch(0.68 0.19 245);
  --btn-lo: oklch(0.5 0.24 260);
  --btn-edge: oklch(0.28 0.15 264);
  --gold: oklch(0.86 0.16 88);
  --ink: oklch(0.99 0 0);
  --ink-soft: oklch(0.95 0.02 240);
  --danger: oklch(0.62 0.21 25);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-game: 1;
  --z-chrome: 10;
  --z-overlay: 20;
}

.ygo-sky {
  background:
    repeating-linear-gradient(115deg, oklch(1 0 0 / 0) 0 70px, oklch(1 0 0 / 0.07) 70px 74px, oklch(1 0 0 / 0) 74px 190px),
    radial-gradient(120% 70% at 50% 108%, oklch(1 0 0 / 0.85), oklch(1 0 0 / 0) 60%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
  color: var(--ink);
  font-family: "Exo 2", "Arial Black", system-ui, sans-serif;
  font-style: italic;
}

/* Wordmark: solid white with a navy keyline, gold sub-line */
.ygo-mark {
  margin: 0;
  line-height: 0.95;
  text-align: center;
  text-wrap: balance;
}
.ygo-mark__name {
  display: block;
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 5.25rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow:
    0 2px 0 var(--btn-edge), 2px 0 0 var(--btn-edge), 0 -2px 0 var(--btn-edge), -2px 0 0 var(--btn-edge),
    0 7px 18px oklch(0.2 0.1 262 / 0.45);
}
.ygo-mark__sub {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.2rem 1.1rem 0.25rem;
  font-weight: 800;
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  transform: skewX(-14deg);
  box-shadow: 0 3px 0 var(--btn-edge);
}
.ygo-mark__sub > span { display: inline-block; transform: skewX(14deg); }

/* The game's menu button: slanted glossy pill */
.ygo-btn {
  --lift: 0px;
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 15rem;
  min-height: 3.5rem;
  padding: 0 2.5rem;
  border: 2px solid oklch(1 0 0 / 0.95);
  border-radius: 999px;
  outline: 3px solid var(--btn-edge);
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.7) 0%, oklch(1 0 0 / 0.2) 46%, oklch(1 0 0 / 0) 50%),
    linear-gradient(180deg, var(--btn-hi), var(--btn-lo));
  color: var(--ink);
  font: italic 900 1.6rem/1 "Exo 2", "Arial Black", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 2px 0 var(--btn-edge), 2px 0 0 var(--btn-edge), 0 -2px 0 var(--btn-edge), -2px 0 0 var(--btn-edge);
  transform: skewX(-12deg) translateY(var(--lift));
  box-shadow: 0 6px 0 var(--btn-edge), 0 14px 24px oklch(0.2 0.1 262 / 0.35);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.ygo-btn > span { transform: skewX(12deg); }
.ygo-btn:hover { --lift: -2px; filter: brightness(1.08) saturate(1.1); }
.ygo-btn:active { --lift: 4px; box-shadow: 0 2px 0 var(--btn-edge), 0 6px 12px oklch(0.2 0.1 262 / 0.3); }
.ygo-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.ygo-btn[aria-disabled="true"] { filter: grayscale(0.7) brightness(0.9); cursor: default; pointer-events: none; }

/* Progress bar in the same slanted vocabulary */
.ygo-bar {
  width: min(32rem, 82vw);
  height: 1.1rem;
  padding: 3px;
  border: 2px solid oklch(1 0 0 / 0.9);
  border-radius: 999px;
  outline: 3px solid var(--btn-edge);
  background: oklch(0.25 0.1 262 / 0.55);
  transform: skewX(-12deg);
  overflow: hidden;
}
.ygo-bar__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.5) 0%, oklch(1 0 0 / 0) 55%),
    linear-gradient(90deg, var(--btn-lo), var(--btn-hi) 85%, var(--gold));
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 600ms var(--ease-out);
}

.ygo-foot {
  margin: 0;
  font: italic 500 0.8rem/1.4 "Exo 2", system-ui, sans-serif;
  color: oklch(0.25 0.1 262);
  text-align: center;
}
.ygo-foot a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .ygo-btn, .ygo-bar__fill { transition: none; }
}

/* 4:3 stage that matches the game canvas exactly, so the title art lines up with the real title screen */
.ygo-stage {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100vw, calc(100dvh * 4 / 3));
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ygo-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ygo-letterbox {
  background:
    radial-gradient(80% 60% at 50% 50%, oklch(0.3 0.12 262 / 0.6), oklch(0 0 0 / 0) 70%),
    var(--navy-deep);
}