/* Shared layout for the home page and game pages. Tokens (--bg, --ink, --t1..--t8 …) come from style.css. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.front{--gut:max(1.25rem,env(safe-area-inset-left,0px));--wide:64rem}

.top,.page,.bottom{max-width:var(--wide);margin:0 auto;padding-left:var(--gut);padding-right:max(1.25rem,env(safe-area-inset-right,0px))}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.25rem}
.logo{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;padding:.25rem 0}
.logo-mark{width:30px;height:30px;flex:none}
.logo-word{height:23px;width:98px}
.top-contact{color:var(--muted);text-decoration:none;font-size:.95rem;padding:.5rem 0}
.top-contact:hover{color:var(--ink);text-decoration:underline}
.logo:focus-visible,.top-contact:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Hero */
.page{padding-bottom:2rem}
.hero{display:grid;gap:2.25rem;padding:3rem 0 4rem}
.hero h1{font-size:clamp(2rem,1.1rem + 4.2vw,3.4rem);line-height:1.08;letter-spacing:-.025em;font-weight:750;max-width:15ch;margin:0 0 1rem;text-wrap:balance}
.hero-sub{color:var(--muted);font-size:1.1rem;margin:0}

.pads-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.55rem,2.2vw,.9rem)}
.pad{aspect-ratio:1;border:0;border-radius:22%;padding:0;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 2px rgb(0 0 0 / .25);
  transition:transform .12s ease-out,filter .12s ease-out;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pad.on{filter:brightness(1.2) saturate(1.1);transform:scale(.93);box-shadow:inset 0 0 0 5px rgb(255 255 255 / .6)}
.pad:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pads-grid.busy .pad{cursor:default}

.play-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1rem;margin-top:1.25rem}
html:not(.js) .play-bar{display:none}
.listen{font:inherit;font-size:1rem;font-weight:600;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;touch-action:manipulation}
.listen:hover{background:var(--ink);color:var(--bg)}
.listen:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.listen[aria-disabled=true]{opacity:.55;cursor:default;background:transparent;color:var(--ink)}
.status{margin:0;color:var(--muted);min-height:1.6em}

@media (min-width:860px){
  .hero{grid-template-columns:1fr minmax(0,28rem);align-items:center;column-gap:4rem;padding:5rem 0 6rem}
}

/* Sections */
.page>section+section{border-top:1px solid var(--rule);padding-top:2.75rem;margin-top:0}
.games,.principles{padding-bottom:3rem}
.page h2{font-size:1.5rem;letter-spacing:-.01em;margin:0 0 1.5rem}

/* Games */
.game-yanki{display:grid;gap:1.5rem}
.feature{display:block;border-radius:16px;overflow:hidden;background:#131318}
.feature img{display:block;width:100%;height:auto}
.game-head{display:flex;align-items:center;gap:1rem}
.game-icon{width:64px;height:64px;border-radius:14px;flex:none;background:#131318}
.game-yanki h3,.game-next h3{font-size:1.6rem;line-height:1.2;margin:0}
.game-yanki h3 a{color:var(--ink);text-decoration:none}
.game-yanki h3 a:hover{text-decoration:underline}
.state{margin:.15rem 0 0;color:var(--muted);font-size:.95rem}
.game-line{font-size:1.2rem;margin:1.25rem 0 .75rem}
.facts{list-style:none;padding:0;margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.2rem 1.25rem}
.facts li{margin:0}
.facts b{font-variant-numeric:tabular-nums}
.game-note{color:var(--muted);margin:0 0 1rem}
.game-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0}
.shots{grid-column:1/-1;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(8.5rem,11rem);gap:.75rem;overflow-x:auto}
.shots li{margin:0}
.shots img{display:block;width:100%;height:auto;border-radius:12px}

.game-next{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem 1rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.game-next h3{font-size:1.3rem}
.game-next .state{margin:0}
.game-next h3 a{color:var(--ink);text-decoration:none}
.game-next h3 a:hover{text-decoration:underline}
.game-next-line{flex:1 0 100%;max-width:none;margin:.35rem 0 0;font-size:1.1rem}

@media (min-width:760px){
  .game-yanki{grid-template-columns:1.15fr 1fr;column-gap:2.5rem;align-items:center}
}

/* Principles & contact */
.principles ul{list-style:none;padding:0;margin:0;display:grid;gap:1.25rem}
.principles li{margin:0;color:var(--muted)}
.principles b{display:block;color:var(--ink);font-size:1.1rem}
@media (min-width:760px){.principles ul{grid-template-columns:repeat(3,1fr);gap:2rem}}
.contact{padding-bottom:1rem}
.contact p{margin:0;font-size:1.2rem;overflow-wrap:anywhere}

.bottom{margin-top:0;padding-top:2rem;padding-bottom:3rem;color:var(--muted);font-size:.9rem}

@media (prefers-color-scheme:dark){
  .pad{box-shadow:none}
  .pad.on{box-shadow:inset 0 0 0 5px rgb(255 255 255 / .5)}
}
@media (prefers-reduced-motion:reduce){
  .pad{transition:none}
  .pad.on{transform:none}
}