/* TayGames — one stylesheet for the whole site.
   A white canvas, one blue, the real product art as the only other colour. Mobile first. */
@font-face{font-family:Outfit;src:url(/assets/Outfit.fc7287273e.ttf) format('truetype');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --bg:#fff;--ink:#0b1b3a;--ink-2:#34435c;--muted:#66748c;
  --line:#e6ebf3;--line-strong:#d3dcec;
  --blue:#0057ff;--blue-deep:#0046cc;--blue-soft:#eef3ff;--blue-tint:#f5f8ff;
  --radius-xl:28px;--radius-l:22px;
  --shadow-lift:0 22px 44px -26px rgba(11,27,58,.32);
  --ease:cubic-bezier(.2,.8,.2,1);
  font-family:Outfit,system-ui,"Segoe UI",Roboto,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;
}
/* Each product brings its own light: a tint behind it and a coloured shadow beneath it. */
.tone-pour{--tone:#f59e0b;--tone-tint:#fff4e0;--tone-glow:rgba(190,100,0,.36);--tone-ink:#8a4b00;--stage:#151210}
.tone-pop{--tone:#2bd4b4;--tone-tint:#e4f6f1;--tone-glow:rgba(10,52,60,.42);--tone-ink:#0f5c50;--stage:#0c1318}
.tone-shift{--tone:#7c3aed;--tone-tint:#f1ecff;--tone-glow:rgba(100,40,210,.36);--tone-ink:#5b2bb8}
.tone-civicam{--tone:#445c63;--tone-tint:#eaf0f1;--tone-glow:rgba(17,22,25,.26);--tone-ink:#334b52}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.5}
img,svg{display:block;max-width:100%}img{height:auto}picture{display:contents}source{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
::selection{background:#cfe0ff;color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:16px;z-index:100;padding:12px 16px;border-radius:12px;background:var(--blue);color:#fff;font-weight:650}.skip:focus{top:12px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.wrap-narrow{width:min(720px,100% - 32px);margin-inline:auto}
@media(min-width:720px){.wrap{width:min(1120px,100% - 64px)}}

/* ---------- Header and footer ---------- */
.top{border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-icon{width:46px;height:46px;border-radius:24%;flex:none;box-shadow:0 3px 8px rgba(6,7,11,.12)}
.brand-wordmark{width:135px;height:auto;flex:none}
.top-nav{display:flex;gap:2px;margin-right:-10px}
.top-nav a{padding:8px 11px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ink-2);transition:background .2s,color .2s}
.top-nav a:hover{background:var(--blue-soft);color:var(--blue)}
@media(min-width:720px){.top-row{height:88px}.brand{gap:13px}.brand-icon{width:58px;height:58px}.brand-wordmark{width:181px}.top-nav{gap:6px;margin-right:-14px}.top-nav a{padding:10px 14px}}
/* The TG mark is visible immediately, including while the page loads. */
.foot{border-top:1px solid var(--line);margin-top:24px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:22px 0 28px;font-size:14px;color:var(--muted)}
.foot .brand{gap:9px}.foot .brand-icon{width:38px;height:38px}.foot .brand-wordmark{width:125px}
.foot-copy{margin:0;order:3;width:100%}
.foot-nav{display:flex;gap:18px}.foot-nav a{font-weight:600;color:var(--ink-2)}.foot-nav a:hover{color:var(--blue)}
@media(min-width:720px){.foot-copy{order:0;width:auto}}

/* ---------- Shared pieces ---------- */
.button{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:13px 18px;border-radius:14px;background:var(--blue);color:#fff;font-size:15px;font-weight:650;line-height:1.2;transition:background .2s,transform .25s var(--ease)}
.button:hover{background:var(--blue-deep)}.button:active{transform:scale(.98)}
.button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.button span{overflow-wrap:anywhere}
.button-light{background:#fff;color:var(--ink)}.button-light:hover{background:#e9f0ff}
.button-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}.button-outline:hover{background:var(--blue-soft);color:var(--blue)}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:650}
.text-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.lede{max-width:34em;margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;font-size:14px;color:var(--muted)}
.crumbs a{font-weight:600;color:var(--ink-2)}.crumbs a:hover{color:var(--blue)}
.icon{border-radius:22%}
kbd{display:inline-block;padding:4px 7px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:#fff;color:var(--ink-2);font:600 12px/1 Outfit,system-ui}

/* Availability: one symbol and plain words for each place a product lives. */
.where{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.where li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border-radius:999px;background:#f1f4f9;font-size:13px;font-weight:600;line-height:1;color:var(--ink-2)}
.where svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.where small{font-size:inherit;font-weight:500;color:var(--muted)}
.where-play{padding:0!important}
.where-play a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border-radius:inherit;transition:background .2s,color .2s}
.where-play a:hover{background:var(--blue-soft);color:var(--blue)}.where-play a:hover small{color:var(--blue)}
.where-dev i{width:8px;height:8px;border-radius:50%;background:var(--tone,#7c3aed);box-shadow:0 0 0 3px rgba(124,58,237,.16)}
.where-detailed li{font-size:14px;padding:8px 12px 8px 10px}.where-detailed .where-play a{padding:8px 12px 8px 10px}

/* ---------- Homepage ---------- */
.hero{padding:26px 0 18px}
.hero h1{margin:0;font-size:clamp(36px,9.6vw,72px);font-weight:760;line-height:1;letter-spacing:-.035em}
.hero h1 span{color:var(--blue)}
.hero .lede{font-size:16px}
@media(min-width:720px){.hero{padding:44px 0 28px}.hero h1{font-size:clamp(52px,6vw,76px)}.hero .lede{margin-top:18px;font-size:19px}}

/* Tiles: compact rows on phones, two columns on tablets, four on wide screens. */
.tiles{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tile{position:relative;isolation:isolate;display:grid;grid-template-columns:84px minmax(0,1fr) auto;grid-template-areas:"art body go" "where where where";gap:0 16px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:var(--radius-l);background:#fff;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tile::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 95% at 0% 0%,var(--tone-tint),transparent 64%)}
.tile-art{grid-area:art;display:grid;place-items:center;padding-top:4px}
.tile-art .icon{width:84px;height:84px;filter:drop-shadow(0 10px 14px var(--tone-glow));transition:transform .45s var(--ease)}
.tile-body{grid-area:body}
.tile-kind{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tone-ink)}
.tile-name{margin:0;font-size:22px;font-weight:720;line-height:1.1;letter-spacing:-.02em}
.tile-name a::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.tile-name a:focus-visible{outline:none}
.tile:has(.tile-name a:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.tile-blurb{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.tile .where{grid-area:where;margin-top:12px}
.tile-go{grid-area:go;display:grid;place-items:center;width:40px;height:40px;margin-top:2px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;font-weight:650;transition:background .25s}
.tile-go span{display:none}
.tile-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile:active{transform:scale(.99)}
@media(hover:hover){.tile:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-lift)}.tile:hover .tile-art .icon{transform:translateY(-5px) scale(1.03)}.tile:hover .tile-go{background:var(--blue)}}
.shelf-note{max-width:62em;margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
@media(min-width:720px){
  .tiles{gap:14px}
  .tile{grid-template-columns:112px minmax(0,1fr) auto;gap:0 22px;align-items:center;padding:18px 22px 18px 18px}
  .tile-art{padding-top:0}.tile-art .icon{width:112px;height:112px;filter:drop-shadow(0 16px 18px var(--tone-glow))}
  .tile-name{font-size:26px}.tile-blurb{margin-top:6px;font-size:15px;max-width:40em}
  .tile .where{margin-top:14px}
  .tile-go{display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;margin:0;padding:11px 16px 11px 14px;border-radius:999px}
  .tile-go span{display:inline}
  .shelf-note{margin-top:20px}
}
@media(min-width:960px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .tile{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:"art" "body" "where" "go";gap:0;align-items:start;padding:0 0 24px;border-radius:var(--radius-xl)}
  .tile::before{background:radial-gradient(90% 62% at 50% 0%,var(--tone-tint),transparent 72%)}
  .tile-art{padding:40px 24px 22px}
  .tile-art .icon{width:min(200px,68%);height:auto;aspect-ratio:1;filter:drop-shadow(0 28px 26px var(--tone-glow))}
  .tile-body,.tile .where{padding:0 26px}
  .tile-name{font-size:27px}.tile-blurb{margin-top:8px}
  .tile .where{margin-top:16px}
  .tile-go{justify-self:start;margin:20px 26px 0}
}
@media(min-width:1180px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.tile-art{padding:30px 16px 22px}.tile-art .icon{width:176px}.tile-body,.tile .where{padding:0 20px}.tile-name{font-size:25px}.tile-go{margin-inline:20px}}

.support{padding:118px 0 36px}
.support-card{position:relative;padding:28px 20px 24px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--blue-tint)}
.support-card .robot{position:absolute;right:14px;bottom:calc(100% - 26px);width:132px;height:auto;filter:drop-shadow(0 14px 14px rgba(20,60,160,.18))}
.support-text h2{margin:0;font-size:28px;font-weight:740;letter-spacing:-.025em}
.support-text p{max-width:34em;margin:10px 0 18px;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media(min-width:720px){.support{padding:72px 0 56px}.support-card{padding:40px 44px}.support-card .robot{right:32px;bottom:24px;width:200px}.support-text{padding-right:240px}.support-text h2{font-size:36px}.support-text p{font-size:17px}}

/* ---------- Game pages: the game is live the moment the page opens ---------- */
.play-head{display:grid;grid-template-columns:56px 1fr;gap:12px 14px;align-items:center;padding:16px 0 14px}
.play-icon{width:56px;height:56px;filter:drop-shadow(0 8px 12px var(--tone-glow))}
.play-title h1{margin:0;font-size:28px;font-weight:760;line-height:1.05;letter-spacing:-.03em}
.play-title p{margin:4px 0 0;font-size:15px;color:var(--ink-2)}
.play-head .where{grid-column:1/-1;margin:2px 0 0}
@media(min-width:720px){.play-head{grid-template-columns:72px 1fr auto;padding:22px 0 20px}.play-icon{width:72px;height:72px}.play-title h1{font-size:40px}.play-title p{font-size:17px}.play-head .where{grid-column:auto;justify-self:end}}
.play-grid{display:grid;gap:28px}
@media(min-width:900px){.play-grid{grid-template-columns:minmax(0,460px) minmax(280px,1fr);gap:44px;align-items:start}}
.stage{position:relative;overflow:hidden;width:calc(100% + 32px);height:clamp(520px,calc(100svh - 170px),820px);margin-inline:-16px;background:var(--stage)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--stage)}
.stage:fullscreen{width:100%;height:100%;margin:0;border-radius:0}
.poster{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;color:#fff;background:var(--stage);background:radial-gradient(70% 60% at 50% 42%,color-mix(in srgb,var(--stage) 68%,var(--tone) 32%),var(--stage) 72%);transition:opacity .45s ease,visibility .45s}
.poster.is-done{opacity:0;visibility:hidden}
.poster-icon{width:120px;height:120px;box-shadow:0 24px 40px rgba(0,0,0,.45)}
.poster.is-failed .poster-icon{opacity:.55}
.poster-text{max-width:30em;margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.84)}
.poster-text a{color:#fff;text-decoration:underline}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-top:12px}
.stage-hint{margin:0;font-size:14px;color:var(--muted)}
.stage-actions{display:flex;gap:8px}
.stage-button{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:#f1f4f9;font-size:14px;font-weight:600;color:var(--ink-2);transition:background .2s,color .2s}
.stage-button:hover{background:var(--blue-soft);color:var(--blue)}
.stage-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:720px){.stage{width:min(100%,460px);height:clamp(540px,calc(100svh - 200px),820px);margin-inline:0;border-radius:24px;box-shadow:0 32px 60px -36px rgba(11,27,58,.55)}.stage-bar{width:min(100%,460px)}}
.play-aside{display:grid;gap:24px}
@media(min-width:600px) and (max-width:899px){.play-aside{grid-template-columns:1fr 1fr}.next-block{grid-column:1/-1}}
.aside-block h2{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.aside-block p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;padding-left:36px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:13px;font-weight:700}
.controls{display:grid;gap:4px;margin:0}
.controls div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.controls dt{color:var(--ink-2)}.controls dd{margin:0;font-weight:600;text-align:right}
.next-tile{display:grid;grid-template-columns:56px 1fr 20px;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--tone-tint),#fff 70%);transition:border-color .25s,transform .3s var(--ease)}
.next-tile:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.next-icon{width:56px;height:56px;filter:drop-shadow(0 8px 10px var(--tone-glow))}
.next-text{display:grid;gap:2px}.next-text strong{font-size:17px;letter-spacing:-.01em}.next-text span{font-size:14px;color:var(--ink-2)}
.next-tile>svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.play-notes{padding:40px 0 16px}
.play-notes h2{margin:0 0 6px;font-size:22px;letter-spacing:-.02em}
.play-notes details{border-bottom:1px solid var(--line)}
.play-notes summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:16px;font-weight:650;cursor:pointer;list-style:none}
.play-notes summary::-webkit-details-marker{display:none}
.play-notes summary::after{content:'+';font-size:22px;line-height:1;color:var(--blue)}
.play-notes details[open] summary::after{content:'–'}
.play-notes details p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.play-notes a{color:var(--blue);font-weight:600}
.notes-privacy{margin:18px 0 0;font-size:14px;color:var(--muted)}

/* ---------- ShiftCircle ---------- */
.app-hero{display:grid;gap:22px;justify-items:start;padding:20px 0 8px}
.app-art .icon{width:140px;height:140px;filter:drop-shadow(0 22px 24px var(--tone-glow))}
.app-copy h1{margin:2px 0 6px;font-size:40px;font-weight:760;line-height:1;letter-spacing:-.035em}
.app-copy .lede{margin:0 0 10px;font-weight:600;color:var(--blue)}
.app-copy p{margin:0 0 10px;color:var(--ink-2)}
.app-facts{display:grid;gap:14px;padding:28px 0 24px}
.fact{padding:22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--tone-tint),#fff 62%)}
.fact h2{margin:0 0 8px;font-size:18px;letter-spacing:-.015em}
.fact p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media(min-width:720px){.app-hero{grid-template-columns:240px 1fr;gap:48px;align-items:center;padding:44px 0 16px}.app-art .icon{width:240px;height:240px}.app-copy h1{font-size:56px}.app-facts{grid-template-columns:repeat(3,1fr);gap:20px;padding:40px 0 32px}}

/* ---------- Prose: privacy pages ---------- */
.prose{max-width:720px;padding:20px 0 24px}
.prose h1{margin:0 0 20px;font-size:clamp(32px,6vw,52px);font-weight:760;line-height:1.02;letter-spacing:-.035em}
.prose h2{margin:30px 0 8px;font-size:22px;letter-spacing:-.02em}
.prose p,.prose li{font-size:16px;line-height:1.65;color:var(--ink-2)}
.prose a{color:var(--blue);font-weight:550;text-decoration:underline;text-underline-offset:3px}
.prose-back{margin-top:28px}.prose-back a{text-decoration:none}

/* ---------- 404 ---------- */
.lost-main{padding:40px 0 30px}
.lost{position:relative;max-width:560px;margin:0 auto;padding-top:150px;text-align:center}
.lost-robot{position:absolute;left:50%;top:0;width:150px;transform:translateX(-50%)}
.lost h1{margin:0 0 12px;font-size:clamp(34px,8vw,56px);font-weight:760;line-height:1;letter-spacing:-.035em}
.lost .lede{margin:0 auto 22px}
.lost-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
@media(min-width:720px){.lost{padding-top:210px}.lost-robot{width:220px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep navigation readable without squeezing the catalogue on smaller phones. */
@media(max-width:420px){.top-row{gap:8px}.brand{gap:8px}.brand-icon{width:42px;height:42px}.brand-wordmark{width:115px}.top-nav{gap:0;margin-right:-8px}.top-nav a{font-size:13px;padding:10px 8px}}

.where-browser:has(>a){padding:0}.where-browser>a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border-radius:inherit;transition:background .2s,color .2s}.where-browser>a:hover{background:var(--blue-soft);color:var(--blue)}
@media(max-width:719px){.where li{min-height:36px}.where-play a,.where-browser>a{min-height:36px}}

@media(max-width:359px){.brand{gap:6px}.brand-icon{width:34px;height:34px}.brand-wordmark{width:92px}.top-nav{margin-right:0}.top-nav a{font-size:12px;padding-inline:3px}.tile{grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px}.tile-art .icon{width:64px;height:64px}.tile-go{width:32px;height:32px}.tile-name{font-size:20px}}