/* Shared navigation for the collection and both game tables. */
.game-shell.game-container, .game-shell.sh-container { max-width:1360px; margin:0 auto; padding:38px 36px 28px; }
.game-shell .game-header .header-left h1 { font-size:19px; }
.game-shell .game-header .tagline { font-size:12.5px; }
.game-shell .toggles { font-size:11.5px; gap:6px; }
.game-shell .toggle-row { gap:10px; }
.game-shell .game-site-nav { margin:28px 0 0; padding-bottom:18px; border-bottom:1px solid light-dark(#e7e7e1,#2a2a27); gap:18px; font-size:11.5px; }
.game-collection-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid light-dark(#e7e7e1,#2a2a27); }
.game-switcher { display:flex; flex-wrap:wrap; gap:8px 22px; font:11px 'IBM Plex Mono',monospace; }
.game-switcher a { color:light-dark(#71716a,#93938b); text-decoration:none; padding:5px 0; border-bottom:1px solid transparent; }
.game-switcher a:hover, .game-switcher a.active { color:light-dark(#1c1c1a,#e6e6e1); }
.game-switcher a.active { border-bottom-color:currentColor; }
.game-collection-bar .text-button { margin:0; white-space:nowrap; font-size:11px; }
.game-collection-bar a:focus-visible { outline:1px dotted currentColor; outline-offset:4px; }
.game-shell .table-heading { margin-top:24px; }

/* The Games collection uses the same type, paper, borders, and preferences as the portfolio. */
.games-container { max-width:1060px; }
.games-intro { margin:48px 0 30px; }
.games-intro h2 { font-size:clamp(30px,4vw,44px); line-height:1.15; font-weight:500; letter-spacing:-.045em; margin:0 0 16px; text-wrap:balance; }
.games-intro > p:not(.section-h) { color:light-dark(#55554f,#b0b0a8); max-width:60ch; margin:0 0 14px; }
.games-note { font:11px 'IBM Plex Mono',monospace; color:light-dark(#71716a,#93938b); }
.games-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.game-card { min-width:0; border:1px solid light-dark(#dfdfd7,#363630); display:flex; flex-direction:column; transition:border-color .2s; }
.game-card:hover { border-color:light-dark(#a9a99d,#727268); }
.game-art { height:210px; position:relative; overflow:hidden; border-bottom:1px solid light-dark(#dfdfd7,#363630); }
.exchange-art { background:light-dark(#e8ecdf,#26332d); }
.exchange-art svg { width:100%; height:100%; display:block; }
.secret-art { background:light-dark(#eee8dc,#37312a); }
.secret-art-word { position:absolute; left:9%; top:30%; font:600 44px/.95 'IBM Plex Sans',sans-serif; letter-spacing:-.06em; color:light-dark(#423c32,#e2d9c7); }
.secret-art-word i { display:block; color:light-dark(#9a4436,#c77863); font-style:normal; }
.secret-art-cards { position:absolute; width:205px; height:190px; right:6%; top:26px; }
.secret-art-cards img { position:absolute; width:104px; height:152px; object-fit:cover; border:4px solid #fff; box-shadow:0 7px 14px #0003; background:#fff; transition:transform .3s; }
.secret-art-cards img:first-child { transform:rotate(-15deg); left:4px; top:16px; }
.secret-art-cards img:last-child { transform:rotate(12deg); right:0; top:0; }
.secret-card:hover .secret-art-cards img:first-child { transform:rotate(-19deg) translateY(-3px); }
.secret-card:hover .secret-art-cards img:last-child { transform:rotate(16deg) translateY(-3px); }
.game-card-body { display:flex; flex-direction:column; flex:1; padding:25px; }
.game-card-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px 16px; font:10px/1.5 'IBM Plex Mono',monospace; color:light-dark(#71716a,#93938b); }
.game-card-meta > :last-child { white-space:nowrap; }
.game-card h3 { margin:14px 0 10px; font-size:27px; line-height:1.2; letter-spacing:-.04em; font-weight:500; }
.game-description { margin:0 0 20px; font-size:14px; color:light-dark(#55554f,#b0b0a8); text-wrap:pretty; }
.game-features { list-style:none; padding:0; margin:0 0 25px; display:flex; flex-wrap:wrap; gap:7px; font:10px/1.5 'IBM Plex Mono',monospace; }
.game-features li { padding:4px 7px; border:1px solid light-dark(#dfdfd7,#363630); }
.game-card-action { margin-top:auto; display:flex; flex-direction:column; gap:9px; }
.game-card-action > span { font:10px/1.5 'IBM Plex Mono',monospace; color:light-dark(#71716a,#93938b); }
.game-card-action a { display:block; padding:13px 14px; text-decoration:none; font:11px/1.5 'IBM Plex Mono',monospace; border:1px solid light-dark(#1c1c1a,#e6e6e1); text-align:center; transition:background .2s,color .2s; }
.game-card-action a:hover { background:light-dark(#1c1c1a,#e6e6e1); color:light-dark(#fcfcfa,#141413); }
.game-card-action a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.games-credit { margin:16px 0 0; font:10px/1.8 'IBM Plex Mono',monospace; color:light-dark(#71716a,#93938b); }
.games-credit a { text-decoration-color:light-dark(#c4c4bc,#4a4a45); text-underline-offset:3px; }
.games-guide { margin-top:44px; padding-top:26px; border-top:1px solid light-dark(#e7e7e1,#2a2a27); }
.games-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; padding:0; margin:22px 0 0; }
.guide-number { font:11px 'IBM Plex Mono',monospace; color:light-dark(#8a8a82,#7d7d76); }
.games-guide h3 { font-size:15px; font-weight:500; margin:9px 0 6px; }
.games-guide p { font-size:13px; color:light-dark(#71716a,#93938b); margin:0; }
@media(max-width:760px) {
  .games-container { padding-top:38px; }
  .games-grid { gap:16px; }
  .game-card-body { padding:19px; }
  .secret-art-cards { right:-30px; }
  .secret-art-word { left:6%; font-size:38px; }
  .game-shell.game-container, .game-shell.sh-container { padding:28px 20px 22px; }
}
@media(max-width:600px) {
  .games-grid, .games-guide ol { grid-template-columns:1fr; }
  .games-container .header-left h1 { font-size:15px; }
  .games-container .tagline { font-size:10px; }
  .games-container .toggles { font-size:10px; }
  .games-container .toggle-row { gap:7px; }
  .games-intro { margin-top:38px; }
  .game-art { height:190px; }
  .secret-art-cards { right:9%; top:20px; }
  .secret-art-word { left:10%; font-size:44px; }
  .games-guide ol { gap:22px; }
  .games-container footer { margin-top:42px; flex-wrap:wrap; }
  .game-shell.game-container, .game-shell.sh-container { padding:25px 14px 18px; }
  .game-shell .game-header .header-left h1 { font-size:15px; }
  .game-shell .game-header .tagline { font-size:10px; }
  .game-shell .toggles { font-size:10px; gap:4px; }
  .game-shell .toggle-row { gap:7px; }
  .game-collection-bar { align-items:flex-start; flex-wrap:wrap; gap:8px; padding:12px 0; }
  .game-switcher { gap:16px; font-size:10px; }
  .game-collection-bar .text-button { font-size:10px; padding:5px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .game-card, .game-card-action a, .secret-art-cards img { transition:none; }
}