/* Games page (job Q): Red Banana Games, the Indian Games web app.
   Same system as the v2.1 site (ground, ink, red numbers, Bricolage / Instrument Sans / Plex Mono, numbered heads, the closing call),
   warmed by the app's own two colours: its Play gold (#efb12f, measured from the app's Play button) and its indigo ground (the 3D band).
   Screens sit in a phone bezel, the phone version of the site's framed screenshots.
   Motion, "the frame opens": on load the headline lines rise out of their mask, both hero phone screens open from an inset frame
   and seeds are sown one per pit round a drawn Pallanguzhi board, once (the game's own verb). Further down, each phone screen opens as it enters the screen
   (CSS scroll-driven animation where the browser has it, static elsewhere). transform and clip-path only, no JS, nothing runs at rest.
   Off under prefers-reduced-motion, the Settings motion switch and Lite. */

:root{--gold:#efb12f;--gold-hi:#f7c24e;--gold-base:#b9831a;--on-gold:#1d1505;--gold-ink:#efb12f;--stage:#1a1740;--stage-2:#25215a;--stage-line:#3b3675;--stage-ink:#f3efe6;--stage-ink-2:#cdc8e2}
[data-theme=light]{--gold-ink:#875800}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Buttons: Play now (the app's gold, a pressable base like the app's own Play) and the small Play */
.gm-play{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px 0 24px;border-radius:999px;background:var(--gold);color:var(--on-gold);font:700 1.125rem/1 var(--font-text);letter-spacing:0;text-decoration:none;box-shadow:0 4px 0 var(--gold-base);transition:background-color .15s linear,transform .15s var(--ease-out),box-shadow .15s var(--ease-out)}
.gm-play:hover{background:var(--gold-hi)}
.gm-play:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-base)}
.gm-play:focus-visible,.gm-go:focus-visible,.gm-all:focus-visible,.gh-more:focus-visible,.g3-link:focus-visible,.gw-text a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.gm-go{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;min-width:92px;padding:0 18px 0 14px;border-radius:999px;background:var(--gold);color:var(--on-gold);font:700 .9375rem/1 var(--font-text);text-decoration:none;box-shadow:0 3px 0 var(--gold-base);transition:background-color .15s linear}
.gm-go:hover{background:var(--gold-hi)}
.gm-go:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-base)}

/* Hero */
.gh{padding:calc(var(--head-h) + env(safe-area-inset-top,0px) + clamp(14px,4vw,56px)) max(var(--pad-x),env(safe-area-inset-right,0px)) clamp(40px,5vw,80px) max(var(--pad-x),env(safe-area-inset-left,0px))}
.gh-in{max-width:var(--max);margin:0 auto;display:grid;gap:clamp(22px,3vw,40px)}
.gh-text{display:grid;gap:14px;align-content:start;min-width:0}
.gh-eyebrow{flex-wrap:wrap;gap:6px 14px;margin:0;line-height:1.3}
.gh-h1{margin:0;font-size:clamp(2.6rem,7vw + .6rem,6.4rem);line-height:.92;letter-spacing:-.045em}
.gh-h1 .ln{display:block;overflow:clip;padding:.04em 0 .12em;margin:-.04em 0 -.12em}
.gh-h1 .ln>span{display:block}
.gh-by{color:var(--ink-3)}
.gh-free{margin:2px 0 0;font:500 .75rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
/* the sowing strip: a Pallanguzhi board in line, one seed sown into each of its fourteen pits */
.gh-sow{display:block;width:min(100%,clamp(220px,26vw,380px));height:auto;margin:4px 0 2px;overflow:visible}
.sw-board{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-opacity:.55;stroke-dasharray:2 5;stroke-linecap:round}
.sw-pit{fill:var(--surface-2);stroke:var(--gold);stroke-width:1.25;stroke-opacity:.5}
.sw-seed{fill:var(--gold)}
.gh-sub{margin:0;max-width:40ch;font-size:clamp(1.0625rem,.35vw + 1rem,1.3125rem);line-height:1.5;color:var(--ink-2)}
.gh-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:6px}
.gh-more{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--ink);font:600 1rem/1 var(--font-text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:6px;text-decoration-thickness:1px}
.gh-more:hover{text-decoration-color:var(--ink)}
.gh-fig{margin:0;min-width:0}
.gh-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2.4vw,28px);align-items:start;max-width:560px}
.gh-phones .ph--b{margin-top:clamp(28px,5vw,72px)}
.gh-cap{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font:500 .75rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);max-width:560px}
.gh-cap b{color:var(--ink);font-weight:500}

/* The phone frame: a black bezel round a real screenshot */
.ph{display:block;position:relative;padding:clamp(5px,.7vw,9px);border-radius:clamp(20px,2.6vw,34px);background:#050505;border:1px solid var(--line-strong);box-shadow:0 18px 40px -24px rgba(6,5,18,.72)}
.ph-screen{display:block;overflow:hidden;border-radius:clamp(15px,2vw,26px);background:#211e48}
.ph-screen img{display:block;width:100%;height:auto}

@media (max-width:699px){
  .gh-by{display:none}
  /* first screen on phones: words, Play now, and the top of both phones */
  .gh{padding-top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 12px)}
  .gh-text{gap:12px}
  .gh-h1{font-size:clamp(2.7rem,12.4vw,3.6rem)}
  .gh-sub{font-size:1.0625rem;line-height:1.45}
  .gh-phones{gap:12px;max-width:none}
  .gh-phones .ph--b{margin-top:28px}
  .gh-eyebrow{font-size:.75rem;letter-spacing:.08em;gap:4px 10px}
  .gh-sow{width:200px;margin:2px 0 0}
  .gh-ctas{gap:10px 18px}
}
@media (max-width:380px){.gh-ctas{gap:10px 16px}.gm-play{padding:0 24px 0 20px}}
@media (min-width:700px) and (max-width:999px){
  /* tablets: words on the left, the game picker on the right, large enough to read */
  .gh-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,48px);align-items:center}
  .gh-phones{grid-template-columns:minmax(0,1fr);max-width:290px;justify-self:end}
  .gh-phones .ph--b{display:none}
  .gh-cap{max-width:290px}
}
@media (min-width:1000px){
  .gh{padding-top:calc(var(--head-h) + clamp(28px,3.4vw,52px))}
  .gh-in{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .gh-text{grid-column:1/span 6;gap:18px}
  .gh-fig{grid-column:7/span 6;justify-self:end;width:100%;max-width:620px}
  .gh-phones{max-width:none;gap:clamp(16px,1.6vw,26px)}
  .gh-phones .ph{max-width:min(290px,calc((100svh - var(--head-h) - 170px) * .46))}
  .gh-phones .ph--b{margin-top:0}
}

/* Section heads (the home page's numbered heads, rebuilt here so the page needs no home CSS) */
.sx-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:clamp(12px,1.6vw,24px);padding:16px 0 clamp(18px,2.4vw,32px);border-top:1px solid var(--line-strong)}
.sx-n{font:500 .8125rem/1 var(--font-mono);letter-spacing:.08em;color:var(--red-ink)}
.sx-t{margin:0;font-size:var(--size-h2);line-height:.98;letter-spacing:-.035em;max-width:22ch}
.sx-sub{margin:0;font:500 .75rem/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:right;max-width:30ch}
@media (max-width:699px){.sx-head{grid-template-columns:auto minmax(0,1fr)}.sx-sub{grid-column:2;text-align:left;margin-top:8px}}

/* 01 The eleven games */
.gx,.gw,.gt{padding:0 max(var(--pad-x),env(safe-area-inset-right,0px)) clamp(64px,8vw,128px) max(var(--pad-x),env(safe-area-inset-left,0px))}
.gx{scroll-margin-top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 8px)}
.gx-in,.gw-in,.gt-in,.g3-in,.gend-in{max-width:var(--max);margin:0 auto}
.gm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gm-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:0 0 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .2s linear}
.gm-card:hover{border-color:var(--gold)}
.gm-board{display:block;width:100%;aspect-ratio:4/3;background:#1c183a;margin-bottom:12px}
.gm-board img{display:block;width:100%;height:100%;object-fit:cover}
.gm-meta,.gm-name,.gm-line,.gm-card .gm-go{margin-left:12px;margin-right:12px}
.gm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:500 .6875rem/1.35 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.gm-n{color:var(--red-ink)}
.gm-region{color:var(--gold-ink)}
.gm-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;background:var(--gold);color:var(--on-gold);font:700 .625rem/1 var(--font-mono);letter-spacing:.08em}
.gm-name{margin-top:6px;margin-bottom:6px;font:700 clamp(1.125rem,.7vw + .95rem,1.625rem)/1.08 var(--font-display);letter-spacing:-.02em}
.gm-line{flex:1;margin-top:0;margin-bottom:14px;font-size:.875rem;line-height:1.45;color:var(--ink-2);max-width:44ch}
.gm-card .gm-go{position:static}
.gm-card .gm-go::after{content:"";position:absolute;inset:0;z-index:1}
.gm-card--all{padding:0;background:var(--gold);border-color:var(--gold)}
.gm-all{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;height:100%;min-height:200px;padding:16px;color:var(--on-gold);text-decoration:none}
.gm-all-i{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:auto;border-radius:50%;background:var(--on-gold);color:var(--gold)}
.gm-all-t{display:inline-flex;align-items:center;gap:.35em;font:700 clamp(1.25rem,.9vw + 1rem,1.875rem)/1.06 var(--font-display);letter-spacing:-.025em}
.gm-all-t::after{content:"";flex:none;width:.3em;height:.3em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease-out)}
.gm-all-s{font:500 .6875rem/1.5 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;max-width:34ch}
.gm-all:hover .gm-all-t::after{transform:translateX(.12em) rotate(45deg)}
.gm-all:focus-visible{outline-offset:-6px;outline-color:var(--on-gold)}
@media (hover:hover) and (pointer:fine){.gm-card:hover .gm-name{color:var(--gold-ink)}}
@media (min-width:700px){
  .gm-grid{gap:clamp(14px,1.6vw,22px)}
  .gm-meta,.gm-name,.gm-line,.gm-card .gm-go{margin-left:18px;margin-right:18px}
  .gm-card{padding-bottom:18px}
  .gm-board{margin-bottom:16px}
  .gm-line{font-size:.9375rem}
  .gm-all{padding:20px}
}
@media (min-width:1000px){.gm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 02 The 3D band, on the app's own indigo (the same in both themes, like a stage) */
.g3{padding:clamp(28px,4vw,56px) max(var(--pad-x),env(safe-area-inset-right,0px)) clamp(56px,7vw,112px) max(var(--pad-x),env(safe-area-inset-left,0px));margin-bottom:clamp(64px,8vw,128px);background:radial-gradient(120% 80% at 70% 0%,var(--stage-2),var(--stage) 70%);color:var(--stage-ink);--ink:var(--stage-ink);--ink-2:var(--stage-ink-2);--ink-3:var(--stage-ink-2);--line:var(--stage-line);--line-strong:var(--stage-line);--red-ink:#ff8a78;--gold-ink:var(--gold)}
.g3 .sx-t em{color:var(--gold);font-style:normal}
.g3-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;align-items:start}
.g3-fig{margin:0;min-width:0}
.g3-cap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
.g3-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 .6875rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.g3-name{font:700 clamp(1.375rem,1vw + 1rem,2rem)/1.05 var(--font-display);letter-spacing:-.025em}
.g3-line{font-size:.9375rem;line-height:1.5;color:var(--stage-ink-2);max-width:36ch;margin-bottom:6px}
.g3-text{grid-column:1/-1;display:grid;gap:12px;max-width:52ch;font-size:1rem;line-height:1.6;color:var(--stage-ink-2)}
.g3-text p{margin:0}
.g3-lead{font:600 clamp(1.25rem,.8vw + 1rem,1.75rem)/1.25 var(--font-display);letter-spacing:-.015em;color:var(--stage-ink)}
.g3-more{color:var(--gold)}
.g3-link{display:inline-flex;align-items:center;min-height:48px;color:var(--stage-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.g3 .gm-play:focus-visible,.g3 .gm-go:focus-visible,.g3 .g3-link:focus-visible{outline-color:var(--gold)}
@media (min-width:700px){.g3-grid{gap:40px 28px}}
@media (min-width:1000px){
  .g3-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.8vw,28px)}
  .g3-fig--a{grid-column:1/span 4}
  .g3-fig--b{grid-column:5/span 4}
  .g3-fig .ph{max-width:320px}
  .g3-text{grid-column:9/span 4;align-self:center;padding-top:clamp(24px,4vw,64px);border-top:2px solid var(--gold);margin-top:8px}
}

/* 03 How it works */
.gw-grid{display:grid;gap:32px}
.gw-fig{margin:0;max-width:300px;width:62%;justify-self:start;order:2}
.gw-cap{margin-top:12px;font:500 .75rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.gw-text{display:grid;gap:14px;align-content:start;max-width:60ch;font-size:1rem;line-height:1.6;color:var(--ink-2)}
.gw-text p{margin:0}
.gw-text a{display:inline-flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.gw-text strong{color:var(--ink);font-weight:600}
.gw-lead{font:600 clamp(1.375rem,1.4vw + 1rem,2.25rem)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.gw-h3{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font:700 clamp(1.25rem,.6vw + 1.05rem,1.625rem)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink);scroll-margin-top:calc(var(--head-h) + 16px)}
.gs-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.gs-steps li{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.gs-n{font:500 .8125rem/1.9 var(--font-mono);letter-spacing:.08em;color:var(--red-ink)}
.gw-note{font-size:.9375rem;color:var(--ink-3)}
@media (min-width:700px){.gw-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,5vw,96px);align-items:start}.gw-fig{order:0;width:auto}}
@media (min-width:1000px){.gw-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.gw-fig{grid-column:1/span 4;max-width:320px}.gw-text{grid-column:6/span 7}}

/* 04 No tracking, no account, works offline */
.gt-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.gt-list li{padding:18px 0 22px;border-bottom:1px solid var(--line)}
.gt-k{display:block;margin-bottom:10px;font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.gt-list p{margin:0;font:600 clamp(1.25rem,1vw + 1rem,1.875rem)/1.22 var(--font-display);letter-spacing:-.02em;color:var(--ink);max-width:30ch}
.gt-about{margin-top:clamp(32px,4vw,56px);max-width:64ch}
.gt-h3{margin:0 0 10px;font:700 1.25rem/1.2 var(--font-display);letter-spacing:-.015em}
.gt-about p{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--ink-2)}
@media (min-width:1000px){
  .gt-list{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.8vw,28px)}
  .gt-list li{grid-column:span 4;border-bottom:0;border-top:2px solid var(--gold);padding-top:20px}
  .gt-list li:nth-child(2){grid-column:5/span 3}
  .gt-list li:nth-child(3){grid-column:8/span 5}
  .gt-about{max-width:72ch}
}

/* Closing call: the site's two big lines and one button, here Play now */
.gend{padding:0 max(var(--pad-x),env(safe-area-inset-right,0px)) calc(clamp(72px,9vw,128px) + env(safe-area-inset-bottom,0px)) max(var(--pad-x),env(safe-area-inset-left,0px))}
.gend-in{display:grid;gap:24px;align-items:end;padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line-strong)}
.gend-in .sx-n{align-self:start}
.gend-t{margin:0;font-size:clamp(2.25rem,4.4vw + .6rem,5.25rem);line-height:.94;letter-spacing:-.04em;max-width:16ch}
.gend-t em{display:block}
.gend-act{display:grid;gap:14px;justify-items:start}
.gend-more{margin:0;font:500 .75rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width:900px){.gend-in{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,3vw,48px)}.gend-act{grid-column:2;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:24px}}

/* The motion: the frame opens */
@keyframes gm-ln-up{from{transform:translateY(108%)}to{transform:none}}
@keyframes gm-frame-open{from{clip-path:inset(8% 6% 8% 6% round 22px)}to{clip-path:inset(0 0 0 0 round 22px)}}
@keyframes gm-settle{from{transform:scale(1.14)}to{transform:none}}
@keyframes gm-sow{from{transform:translateY(-22px) scale(.4)}60%{transform:translateY(2px) scale(1.08)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .gh-h1 .ln>span{animation:gm-ln-up 1s var(--ease-out) backwards}
  html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .gh-h1 .ln:nth-child(2)>span{animation-delay:90ms}
  html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .gh-phones .ph-screen{animation:gm-frame-open 1.3s var(--ease-out) 120ms backwards}
  html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .gh-phones .ph-screen img{animation:gm-settle 1.8s var(--ease-out) 120ms backwards}
  html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .gh-phones .ph--b .ph-screen,html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .gh-phones .ph--b .ph-screen img{animation-delay:240ms}
  html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .sw-seed{transform-box:fill-box;transform-origin:50% 100%;animation:gm-sow .5s var(--ease-out) backwards;animation-delay:calc(500ms + var(--i) * 85ms)}
  @supports (animation-timeline:view()){
    html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) :is(.g3,.gw) .ph-screen{animation:gm-frame-open linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) :is(.g3,.gw) .ph-screen img{animation:gm-settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  }
}
@media (prefers-reduced-motion:reduce){.gm-play,.gm-go,.gm-card,.gm-all-t::after{transition:none}}
/* idle at rest: the inner-page header bob (rb-hdr-buoy, from the shared bundle) never stops, so it is off on this page */
#site-header .wordmark,#site-header .v3-nav-links,#site-header .hero-settings{animation:none!important}
@media (min-width:700px){.gh-cap-by{display:none}}
@media (min-width:700px) and (max-width:999px){.gh-cap-b{display:none}}

/* Mobile-first polish: Canvas touch-action, 48px targets, safe-areas, 360px card grid tuning */
canvas{touch-action:pan-y!important}

@media (max-width:760px){
  .gm-go{min-height:48px;padding:0 18px}
  .gm-meta{font-size:13px!important}
  .gm-tag,.gm-all-s,.gh-free,.g3-meta,.gw-cap,.gt-k,.gend-more{font-size:12px!important}
}

@media (max-width:360px){
  .gx{padding-left:max(var(--pad-x,16px),env(safe-area-inset-left,0px));padding-right:max(var(--pad-x,16px),env(safe-area-inset-right,0px))}
  .gm-grid{gap:10px}
  .gm-card{padding-bottom:12px}
  .gm-meta,.gm-name,.gm-line,.gm-card .gm-go{margin-left:10px;margin-right:10px}
  .gm-name,.g3-name{overflow-wrap:break-word}
  .gm-name{font-size:1.125rem;line-height:1.12}
  .gm-line{font-size:.8125rem;line-height:1.4;margin-bottom:10px}
  .gm-card .gm-go{min-width:88px;min-height:48px;padding:0 14px}
  .gm-all{padding:14px}
  .gm-all-t{font-size:1.25rem}
}