/* Xvense site styles.
   Layout: the home page is a full-screen bento of colour tiles with the logo in the middle;
   every other page is built from the same tiles. Single dark frame by design. */
:root{
  --frame:#161616;
  --cream:#F3EEE6;
  --green:#044D3A;
  --red:#D10A0A;
  --lime:#86E07A;
  --ink:#141414;
  --blush:#EAD3C6;
  --stone:#5B5650;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(1rem,2.2vw,2.5rem);
  --gap:clamp(.75rem,1.3vw,1.25rem);
  --r:clamp(1.125rem,2vw,1.875rem);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
/* Sizes are in rem (1rem = 16px at full scale). The whole site is drawn at 80% on desktop,
   easing up to 100% on phones: 100% at 600px wide or less, 80% at 1200px or more */
html{font-size:clamp(.8rem,calc(1.2rem - .5333vw),1rem)}
html,body{height:100%}
body{margin:0;background:var(--frame);color:var(--cream);font-family:var(--body);font-size:1.0625rem;line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
/* Text can't be selected and images can't be dragged out or saved with a long press (main.js also turns off
   the right-click menu). Form fields stay selectable so people can still edit what they type. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none}
img{max-width:100%}
h1,h2,h3,p,dl,dd,figure{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:.1875rem solid var(--lime);outline-offset:.1875rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-3.75rem;z-index:10;padding:.625rem 1rem;border-radius:999px;background:var(--lime);color:var(--ink);font-family:var(--mono);font-size:.875rem;text-decoration:none}
.skip:focus{top:.75rem}

.app{
  min-height:100%;display:flex;flex-direction:column;gap:var(--gap);
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
  padding-block:0 var(--gutter);
}
.is-home .app{height:100%;padding-block:0}

/* Tiles: each colour sets its own local palette */
.tile{
  --bg:var(--cream);--fg:var(--ink);--hl:var(--green);--muted:var(--stone);--line:rgba(20,20,20,.14);--pill-bg:var(--ink);--pill-fg:var(--cream);--shot-bg:#E4DCCE;
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-radius:var(--r);background:var(--bg);color:var(--fg);text-decoration:none;container-type:inline-size;
}
.tile.red-hl{--hl:var(--red)}
.tile.green{--bg:var(--green);--fg:var(--cream);--hl:var(--lime);--muted:rgba(243,238,230,.76);--line:rgba(243,238,230,.2);--pill-bg:var(--cream);--pill-fg:var(--green);--shot-bg:#0B5C47}
.tile.red{--bg:var(--red);--fg:var(--cream);--hl:var(--cream);--muted:rgba(243,238,230,.84);--line:rgba(243,238,230,.3);--pill-bg:var(--cream);--pill-fg:var(--red);--shot-bg:#B80909}
.tile.lime{--bg:var(--lime);--fg:var(--ink);--hl:var(--green);--muted:rgba(20,20,20,.72);--line:rgba(20,20,20,.16);--pill-bg:var(--ink);--pill-fg:var(--lime);--shot-bg:#73C968}
/* Game and app tiles (card and detail-page header): colours taken from each banner or icon, shifted a step so they don't copy it */
.tile.theme-match-digits{--bg:#253580;--fg:#F3EEE6;--hl:#FFCB3D;--muted:rgba(243,238,230,.78);--line:rgba(243,238,230,.2);--pill-bg:#FFCB3D;--pill-fg:#1A2358;--shot-bg:#1B2560}
.tile.theme-sixnumbers{--bg:#F6E7C1;--fg:#1F1A3A;--hl:#136A64;--muted:#5E5640;--line:rgba(31,26,58,.14);--pill-bg:#2A2546;--pill-fg:#F6E7C1;--shot-bg:#EEDBAE}
.tile.theme-tilewrap{--bg:#5C3B22;--fg:#F3E9D6;--hl:#E4C06A;--muted:rgba(243,233,214,.78);--line:rgba(243,233,214,.2);--pill-bg:#E4C06A;--pill-fg:#2A1A0E;--shot-bg:#4A2F1B}
.tile.theme-glissade{--bg:#3C4D6E;--fg:#EEF2F7;--hl:#F5B583;--muted:rgba(238,242,247,.78);--line:rgba(238,242,247,.2);--pill-bg:#F5B583;--pill-fg:#1E2638;--shot-bg:#33425F}
.tile.theme-yoklamax{--bg:#1E4FC4;--fg:#F2F5FC;--hl:#CFE0FF;--muted:rgba(242,245,252,.8);--line:rgba(242,245,252,.22);--pill-bg:#F2F5FC;--pill-fg:#173C9C;--shot-bg:#1A44A8}
.tile.theme-odakly{--bg:#8C3E12;--fg:#FBEFE3;--hl:#F4A63E;--muted:rgba(251,239,227,.8);--line:rgba(251,239,227,.22);--pill-bg:#F4A63E;--pill-fg:#2E1606;--shot-bg:#77340F}
.tile.theme-hasbihal{--bg:#0F4A3B;--fg:#F6F1E7;--hl:#D9BE6E;--muted:rgba(246,241,231,.8);--line:rgba(246,241,231,.2);--pill-bg:#D9BE6E;--pill-fg:#0B2E25;--shot-bg:#0B3D31}

.label{position:absolute;top:1.125rem;left:1.375rem;z-index:2;font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--hl);white-space:nowrap}
.go{position:absolute;top:.75rem;right:.75rem;z-index:2;width:2.375rem;height:2.375rem;border-radius:50%;display:grid;place-items:center;background:var(--pill-bg);color:var(--pill-fg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.go svg{width:1.125rem;height:1.125rem}

/* Home bento */
.home{
  flex:1 1 auto;min-height:40rem;display:grid;gap:var(--gap);padding-block:var(--gutter);
  grid-template-columns:minmax(0,22fr) minmax(0,25fr) minmax(0,27fr);
  grid-template-rows:minmax(0,10fr) minmax(0,8fr) minmax(0,3fr) minmax(0,6fr);
  grid-template-areas:"games games careers" "news logo apps" "news beta apps" "contact beta apps";
}
.home .tile{container-type:size;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.home .tile:hover{transform:translateY(-.25rem)}
.home .tile:hover .go{transform:rotate(45deg)}
.t-games{grid-area:games;align-items:center;justify-content:center;padding:3.25rem 1.5rem 1.5rem}
.t-apps{grid-area:apps;align-items:center;justify-content:center;padding:3.25rem 1.5rem 1.5rem}
.t-news{grid-area:news}
.t-logo{grid-area:logo;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.25rem 3.625rem}
.t-careers{grid-area:careers;align-items:center;padding:4rem 0 0}
.t-contact{grid-area:contact;justify-content:center;padding:3.25rem 1.375rem 1.25rem}
.t-beta{grid-area:beta;align-items:center;justify-content:center;gap:min(7cqb,1.75rem);padding:3.5rem 1.25rem 1.5rem}

.slogan{display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-size:min(11cqi,22cqb);line-height:.98;color:var(--hl);text-align:center}
.sl-line{display:flex;align-items:center;gap:.14em;white-space:nowrap}
.dd{flex:none;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dd-pad{width:1.25em;height:.84em}
.dd-magnet{width:.7em;height:.7em}
.dd-lantern{width:.5em;height:.69em;transform-origin:50% 10%}
.dd-tiles{width:.95em;height:.95em}
.tile:hover .dd{transform:rotate(-10deg) scale(1.06)}
/* Games and apps slogans: the icons tip over one line after another on hover, the middle one the other way.
   The apps tile uses the real app icons */
.dd-app{width:.92em;height:.92em;border:.05em solid var(--fg);border-radius:28%;object-fit:cover}
.slogan .sl-line:nth-child(2) .dd{transition-delay:.06s}
.slogan .sl-line:nth-child(3) .dd{transition-delay:.12s}
.tile:hover .slogan .sl-line:nth-child(2) .dd{transform:rotate(10deg) scale(1.06)}
/* Updates tile: the lantern swings from its handle, then the Mirrowick icon tips over */
.ticket .dd-app{border-color:var(--ink)}
.ticket .tk-title > span:nth-child(2) .dd{transition-delay:.08s}
.t-news:hover .dd-lantern{transform:none;animation:swing 1.1s ease-out}
@keyframes swing{25%{rotate:18deg}50%{rotate:-11deg}72%{rotate:6deg}88%{rotate:-2deg}}

.art{position:absolute;inset:0;display:block;width:100%;height:100%}

.ticket{position:absolute;top:3.5rem;left:13%;right:13%;bottom:13%;container-type:size;display:flex;flex-direction:column;justify-content:space-between;padding:min(9cqi,1.375rem) min(9cqi,1.5rem);border-radius:min(14cqi,1.875rem);background:var(--cream);color:var(--red)}
.tk-row{display:flex;justify-content:space-between;gap:.5rem;font-family:var(--mono);font-size:clamp(.625rem,7cqi,.875rem);font-weight:500}
.tk-title{display:flex;flex-direction:column;font-family:var(--cond);font-style:italic;font-weight:700;font-size:min(19cqi,26cqb);line-height:.92;letter-spacing:-.01em}
.tk-title span{display:flex;align-items:center;gap:.12em}

.lockup{display:flex;align-items:center;gap:.16em;font-family:var(--display);font-size:min(16cqi,34cqb);line-height:1;color:var(--red)}
/* "xvense" has no ascenders, so its visual centre (Anton's x-height) sits .057em below the line centre; move the mark to match */
.logo-mark{flex:none;display:block;width:.8em;height:.8em;transform:translateY(.057em);--cut:var(--cream)}
.wordmark{font-family:var(--display);letter-spacing:-.01em;line-height:1}
.logo-tag{font-family:var(--mono);font-size:.75rem;color:var(--stone)}
@container (max-height:14.3125rem){.t-logo .logo-tag{display:none}}

/* A tile that also holds a control (the logo tile with the language switch) gets a link stretched over it */
.tile-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.tile-link:focus-visible{outline-offset:-.3125rem}
.has-link > :not(.tile-link):not(.lang){pointer-events:none}
.has-link .lang{position:absolute;left:50%;bottom:.875rem;z-index:3;transform:translateX(-50%)}

/* Language switch: lime on the dark frame like the active menu item, the tile's own colours inside a tile */
.lang{--lang-line:rgba(243,238,230,.18);--lang-fg:rgba(243,238,230,.72);--lang-hover:var(--cream);--lang-on-bg:var(--lime);--lang-on-fg:var(--ink);
  display:inline-flex;flex:none;gap:.125rem;padding:.1875rem;border-radius:999px;box-shadow:inset 0 0 0 .125rem var(--lang-line)}
.tile .lang{--lang-line:var(--line);--lang-fg:var(--muted);--lang-hover:var(--fg);--lang-on-bg:var(--pill-bg);--lang-on-fg:var(--pill-fg)}
.lang button{height:1.875rem;min-width:2.5rem;padding:0 .625rem;border:0;border-radius:999px;background:transparent;color:var(--lang-fg);font-family:var(--mono);font-size:.78125rem;font-weight:600;cursor:pointer}
.lang button:hover{color:var(--lang-hover);background:var(--lang-line)}
.lang button[aria-pressed="true"]{background:var(--lang-on-bg);color:var(--lang-on-fg)}

.c-head{padding-inline:1rem;font-family:var(--cond);font-weight:700;font-size:min(16cqi,11cqb);line-height:.9;letter-spacing:-.01em;color:var(--red);text-align:center}
.c-sub{margin-top:min(3cqb,1rem);font-family:var(--mono);font-size:clamp(.75rem,3.2cqi,1.0625rem);font-weight:500;color:var(--red)}
.people{display:block;width:108%;max-width:none;height:auto;max-height:56cqb;margin-top:auto;margin-bottom:-1px}
/* On wide screens the careers tile is short and wide: the heading sits on the left, the people stand on the right */
@media (min-width:901px){
  .t-careers{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:". people" "head people" "sub people" ". people";align-items:center;padding:0 0 0 1.25rem}
  .t-careers .c-head{grid-area:head;font-size:min(9cqi,20cqb);text-align:left}
  .t-careers .c-sub{grid-area:sub;padding-inline:1rem}
  .t-careers .people{grid-area:people;align-self:end;width:min(56cqi,110cqb);height:auto;max-height:none;aspect-ratio:360/260;margin:0 0 -1px}
}

.chat{display:flex;flex-direction:column;gap:min(3.5cqb,.875rem);font-size:clamp(.75rem,min(3.6cqi,7.5cqb),1.125rem)}
.msg{display:flex;align-items:center;gap:.625rem}
.msg.end{justify-content:flex-end}
.av{flex:none;display:block;width:2.9em;height:2.9em;border-radius:50%;overflow:hidden;background:var(--blush)}
.av svg{display:block;width:100%;height:100%}
.av.cream-bg{background:var(--cream)}
.av.lime-bg{background:var(--lime)}
.tile.lime .av.lime-bg{background:var(--green)}
.bubble{display:inline-block;padding:.8em 1.2em;border-radius:.9em;font-family:var(--mono);font-weight:500;line-height:1.3}
.b-green{background:var(--green);color:var(--cream);border-bottom-right-radius:.25em}
.b-lime{background:var(--lime);color:var(--green);border-top-left-radius:.25em}
.b-ink{background:var(--ink);color:var(--cream)}
.b-cream{background:var(--cream);color:var(--ink)}

.say{position:relative;font-size:clamp(.8125rem,min(4.6cqi,6.5cqb),1.5rem)}
.say::after{content:"";position:absolute;left:50%;bottom:-.55em;width:1.1em;height:.6em;transform:translateX(-50%);background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.avatars{position:relative;display:flex}
.avatars .av{width:min(21cqi,32cqb);height:min(21cqi,32cqb)}
.avatars .av + .av{margin-left:calc(min(21cqi,32cqb) * -.12)}
.cursor{position:absolute;left:56%;bottom:-8%;width:min(6cqi,9cqb);height:auto;aspect-ratio:24/30}

/* Page bar */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding-top:var(--gutter);view-transition-name:bar}
.bar .lang{order:2}
.bar-home + .lang{margin-left:auto}
.bar-home{display:inline-flex;align-items:center;gap:.625rem;height:3.375rem;padding:0 1.375rem 0 .875rem;border-radius:999px;background:var(--cream);color:var(--red);text-decoration:none;font-size:1.75rem}
.bar-home .logo-mark{width:1.875rem;height:1.875rem}
.bar-nav{display:flex;gap:.25rem;min-width:0;max-width:100%;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.bar-nav::-webkit-scrollbar{display:none}
.bar-nav a{flex:none;padding:.625rem .875rem;border-radius:999px;font-family:var(--mono);font-size:.875rem;font-weight:500;color:rgba(243,238,230,.72);text-decoration:none}
.bar-nav a:hover{color:var(--cream)}
.bar-nav a[aria-current="page"]{background:var(--lime);color:var(--ink)}

/* Pages */
.page{display:flex;flex-direction:column;gap:var(--gap)}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}.r2{grid-row:span 2}
.pad{padding:clamp(1.375rem,3vw,2.5rem)}
.stack{display:flex;flex-direction:column;gap:1.125rem}

.phead{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(.75rem,2vw,1.5rem);min-height:clamp(16.25rem,30vw,27.5rem);padding:clamp(1.5rem,3.4vw,3.25rem)}
.phead.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:center}
.ph-col{display:flex;flex-direction:column;gap:clamp(.75rem,2vw,1.375rem);min-width:0}
.ph-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:auto}
.ph-art{display:flex;align-items:center;gap:.625rem}
.art-pad{width:clamp(5.625rem,12vw,9.375rem);height:auto;aspect-ratio:120/80;transform:rotate(-8deg)}
.art-magnet{width:clamp(2.5rem,5vw,4rem);height:auto;aspect-ratio:1;transform:rotate(12deg)}
.ptitle{font-family:var(--display);font-weight:400;font-size:min(var(--ts,12cqi),11.875rem);line-height:.9;color:var(--hl)}
.ptitle.cond{font-family:var(--cond);font-weight:700;line-height:.88;letter-spacing:-.01em}
.pkicker{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--hl)}
.plede{max-width:30em;font-size:clamp(1rem,1.35vw,1.25rem);color:var(--muted)}
.ph-phone{position:absolute;top:-8%;right:-2%;width:36%;height:120%}
.phead.with-phone .ph-text{position:relative;z-index:1;max-width:64%}
.big-ticket{container-type:inline-size;display:flex;flex-direction:column;gap:1.125rem;max-width:32.5rem;padding:clamp(1.25rem,3vw,2rem);border-radius:clamp(1.25rem,2.4vw,2rem);background:var(--cream);color:var(--red)}
.big-ticket .ptitle{font-family:var(--cond);font-style:italic;font-weight:700;font-size:22cqi;line-height:.88;color:var(--red)}
.head-people{align-self:end;width:100%;height:auto;max-height:21.25rem;margin-bottom:calc(clamp(1.5rem,3.4vw,3.25rem) * -1)}
.head-chat{font-size:clamp(.875rem,1.5vw,1.1875rem);gap:.875rem}
.head-beta{display:flex;flex-direction:column;align-items:center;gap:1.625rem;container-type:inline-size}
.head-beta .say{font-size:clamp(.9375rem,1.6vw,1.375rem)}
.head-beta .avatars .av{width:clamp(4.875rem,9vw,7.5rem);height:clamp(4.875rem,9vw,7.5rem)}
.head-beta .avatars .av + .av{margin-left:-.75rem}
.head-beta .cursor{width:clamp(1.5rem,2.6vw,2.125rem)}
.about-lock{align-self:center;font-size:clamp(4rem,13vw,12.5rem);margin-block:auto}
/* About page team: four cards in one tile, each with a square photo */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.member{display:flex;flex-direction:column;gap:.625rem;min-width:0}
.m-photo{display:grid;place-items:center;aspect-ratio:1;margin-bottom:.25rem;overflow:hidden;border:3px solid var(--ink);border-radius:18px;background:var(--shot-bg);container-type:inline-size}
.m-photo img{display:block;width:100%;height:100%;object-fit:cover}
.member .t-h{font-size:clamp(1.5rem,2.4vw,2.25rem)}
.m-roles{display:flex;flex-wrap:wrap;gap:.375rem}
.m-roles li{padding:.3rem .7rem;border-radius:999px;box-shadow:inset 0 0 0 2px var(--line);font-family:var(--mono);font-size:.78125rem;font-weight:500;color:var(--fg);white-space:nowrap}

/* The home tile and its page header share a name, so the tile grows into the header on navigation */
[data-vt="oyunlar"]{view-transition-name:vt-oyunlar}
[data-vt="uygulamalar"]{view-transition-name:vt-uygulamalar}
[data-vt="guncellemeler"]{view-transition-name:vt-guncellemeler}
[data-vt="hakkimizda"]{view-transition-name:vt-hakkimizda}
[data-vt="kariyer"]{view-transition-name:vt-kariyer}
[data-vt="iletisim"]{view-transition-name:vt-iletisim}
[data-vt="beta"]{view-transition-name:vt-beta}
/* A game card's cover grows into the banner of its detail page */
[data-vt="match-digits"]{view-transition-name:vt-match-digits}
[data-vt="sixnumbers"]{view-transition-name:vt-sixnumbers}
[data-vt="tilewrap"]{view-transition-name:vt-tilewrap}
[data-vt="glissade"]{view-transition-name:vt-glissade}
[data-vt="odakly"]{view-transition-name:vt-odakly}
[data-vt="hasbihal"]{view-transition-name:vt-hasbihal}
.g-cover[data-vt],.d-banner[data-vt]{view-transition-class:morph}

.t-name{font-family:var(--display);font-weight:400;font-size:clamp(2.125rem,10cqi,3.625rem);line-height:.95;color:var(--hl)}
.t-name a{text-decoration:none}
.t-meta{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--muted)}
.t-text{color:var(--muted)}
.t-h{font-family:var(--cond);font-weight:700;font-size:clamp(1.75rem,8cqi,2.75rem);line-height:.95;letter-spacing:-.01em;color:var(--hl)}
.g-head{display:flex;align-items:center;gap:1rem}
.g-head > div{display:flex;flex-direction:column;gap:.375rem;min-width:0}
/* The line under a game or app name: body font, semi-bold, so it reads well under the big display name */
.g-head .t-meta{font-family:var(--body);font-size:1.0625rem;font-weight:600;letter-spacing:.01em;line-height:1.3}
.icon{flex:none;display:block;width:4rem;height:4rem}
.icon svg{display:block;width:100%;height:100%}
/* A real app icon (square image): rounded and outlined like the drawn ones */
.icon img{display:block;width:100%;height:100%;object-fit:cover;border:.1875rem solid var(--ink);border-radius:27%}
/* An icon with its own shape on a transparent background: no frame, scaled up to fill the slot like the others */
.icon img.bare{border:0;border-radius:0;object-fit:contain;transform:scale(1.28)}
.specs{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:auto;padding-top:.875rem;border-top:.125rem solid var(--line)}
.specs div{display:flex;flex-direction:column-reverse}
.specs dt{font-family:var(--mono);font-size:.71875rem;color:var(--muted)}
.specs dd{font-family:var(--cond);font-weight:700;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pills.center{justify-content:center}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.875rem;padding:0 1.375rem;border:0;border-radius:999px;background:var(--pill-bg);color:var(--pill-fg);font-family:var(--mono);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s ease}
.pill:active{transform:scale(.97)}
.pill.line{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 .125rem var(--line)}
.pill.hl{background:var(--hl);color:var(--bg)}

/* Dördül board */
.play{display:flex;flex-direction:column;gap:.875rem;padding:1.125rem;border-radius:1.25rem;background:rgba(0,0,0,.16)}
.play-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.625rem}
.moves{font-family:var(--mono);font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.moves b{font-weight:600;color:var(--fg)}
.board{align-self:center;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.625rem;width:min(100%,20rem)}
.cell{aspect-ratio:1;padding:0;border:.125rem solid rgba(243,238,230,.18);border-radius:1rem;background:rgba(243,238,230,.06);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .1s ease}
.cell.on{background:var(--lime);border-color:var(--ink);box-shadow:0 .25rem 0 var(--ink)}
.cell:active{transform:scale(.93)}
.cell:focus-visible{outline-color:var(--cream)}
.cell.wave{animation:wave .55s ease}
@keyframes wave{45%{background:var(--lime)}}
.hint{min-height:2.8em;font-family:var(--mono);font-size:.8125rem;color:var(--muted);text-align:center}

/* Rows (privacy, mails, steps) */
.rows li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.375rem 1rem;padding-block:.8125rem;border-top:.125rem solid var(--line)}
.rows .k{font-family:var(--mono);font-size:.8125rem;color:var(--muted)}
.rows .v{font-weight:600;text-align:right}
.addr{font-family:var(--mono);font-size:.9375rem;font-weight:500;overflow-wrap:anywhere;text-decoration:none}
.addr:hover{text-decoration:underline;text-underline-offset:3px}
.copy{height:2.125rem;padding:0 .875rem;border:0;border-radius:999px;background:var(--pill-bg);color:var(--pill-fg);font-family:var(--mono);font-size:.78125rem;cursor:pointer}
.steps li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.75rem;padding-block:.875rem;border-top:.125rem solid var(--line)}
.steps .n{font-family:var(--mono);font-weight:600;color:var(--hl)}
.steps b{display:block;font-family:var(--cond);font-weight:700;font-size:1.375rem;line-height:1.15}
.steps p{font-size:.96875rem;color:var(--muted)}
.big-no{font-family:var(--mono);font-size:.875rem;font-weight:600;color:var(--hl)}


.upd{gap:.875rem}
/* Each release note starts with the product's icon */
.u-head{display:flex;align-items:center;gap:.875rem}
.upd .icon{width:3.25rem;height:3.25rem}
.u-title{font-family:var(--cond);font-style:italic;font-weight:700;font-size:clamp(2.125rem,11cqi,3.5rem);line-height:.9;color:var(--hl)}
.u-tag{margin-top:auto;font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--hl)}
.upd .tk-row{font-size:.78125rem;color:var(--muted)}


.soon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.soon .t-name{font-size:clamp(2.5rem,11vw,6rem)}
.soon .bubble{font-size:clamp(.875rem,1.3vw,1.0625rem)}

/* Games page: one featured game (big cover, details, screenshots) beside four equal cards */
.g-card{padding:0}
/* Covers use the Google Play feature graphic shape (1024×500), so store banners show uncropped */
.g-cover{position:relative;display:block;margin:0;aspect-ratio:1024/500;overflow:hidden;background:var(--shot-bg)}
.g-cover img{display:block;width:100%;height:100%;object-fit:cover}
/* A card that opens another page: its main link is stretched over the whole card,
   so any spot opens the page; store buttons (.store) stay on top and keep their own links */
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-link:focus-visible{outline:none}
.tile:has(.card-link:focus-visible){outline:.1875rem solid var(--lime);outline-offset:.1875rem}
.pill.card-link:active{transform:none}
.store{position:relative;z-index:2}
/* Official App Store and Google Play badges, as tall as the pills beside them */
.badge{display:inline-flex;border-radius:.6rem;transition:transform .15s ease}
.badge img{display:block;width:auto;height:2.875rem}
.badge:active{transform:scale(.97)}
.g-quad .badge img{height:2.5rem}
/* A card with its own detail page lifts on hover and its cover zooms a little */
.g-link{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.g-link:hover{transform:translateY(-.25rem)}
.g-link .g-cover img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.g-link:hover .g-cover img{transform:scale(1.05)}
.g-body{flex:1;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.25rem,2.6vw,2rem)}
.g-feature .t-name{font-size:clamp(2.75rem,8cqi,5.25rem)}
.g-points{display:flex;flex-direction:column;gap:.5rem}
.g-points li{position:relative;padding-left:1.25rem;font-size:.96875rem;line-height:1.45;color:var(--muted)}
.g-points .lead{font-weight:600;color:var(--fg)}
.g-points li::before{content:"";position:absolute;left:.125rem;top:.5em;width:.5rem;height:.5rem;border-radius:50%;background:var(--hl)}
.g-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);min-width:0}
.g-quad .pill{height:2.5rem;padding:0 1rem;font-size:.8125rem}
/* Apps page: two cards stacked beside the featured one */
.g-duo{grid-template-columns:minmax(0,1fr)}
/* On wide screens the featured app card sets its screenshots beside the text, so it stays about as tall
   as the two cards next to it. Six items sit in the text column (head, text, two lists, note, store buttons);
   the last row takes the spare height and holds the buttons at the bottom */
@media (min-width:1001px){
  .g-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(5,auto) 1fr;gap:1rem 2rem}
  .g-split > *{grid-column:1}
  .g-split > .gallery{grid-column:2;grid-row:1 / -1}
  .g-split > .pills{align-self:end}
  .g-split .gallery-strip{margin-left:0;padding-left:0;scroll-padding-left:0}
}

/* Screenshot gallery inside a game card: a strip that scrolls sideways; a shot opens full size in the lightbox */
.gallery{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.gallery-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.25rem}
.gallery-nav{display:flex;align-items:center;gap:.5rem}
.gallery-count{min-width:4.5em;font-family:var(--mono);font-size:.8125rem;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.round{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:var(--pill-bg);color:var(--pill-fg);cursor:pointer;transition:opacity .15s ease,transform .15s ease}
.round:active{transform:scale(.94)}
.round:disabled{opacity:.3;cursor:default}
.round svg{width:1.25rem;height:1.25rem}
.round.flip svg{transform:rotate(180deg)}
/* --edge matches .g-body padding, so the strip runs to the card's edges */
.gallery-strip{--edge:clamp(1.25rem,2.6vw,2rem);display:flex;gap:.875rem;margin-inline:calc(var(--edge) * -1);padding:.25rem var(--edge) .375rem;scroll-padding-inline:var(--edge);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.gallery-strip::-webkit-scrollbar{display:none}
.shot{flex:0 0 min(26.25rem,62%);padding:0;border:.1875rem solid var(--ink);border-radius:1.125rem;overflow:hidden;background:var(--shot-bg);cursor:zoom-in;scroll-snap-align:start}
.shot img{display:block;width:100%;height:auto}
.shot:focus-visible{outline-offset:.125rem}
@container (max-width:32.5rem){.shot{flex-basis:86%}}
/* Portrait phone screenshots: --per side by side on a wide tile (set on the strip), a scrolling strip when narrower */
.shot.tall{flex-basis:calc((100% - (var(--per,5) - 1) * .875rem) / var(--per,5))}
@container (max-width:56.25rem){.shot.tall{flex-basis:40%}}
@container (max-width:32.5rem){.shot.tall{flex-basis:64%}}
.gallery.static .gallery-nav{visibility:hidden}

/* Game detail page */
.d-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.75rem 2.75rem;align-items:center}
.d-hero .icon{width:5.5rem;height:5.5rem}
.d-hero .t-name{font-size:clamp(3rem,7cqi,6rem)}
.d-banner{margin:0;overflow:hidden;border:.1875rem solid var(--ink);border-radius:clamp(1rem,2vw,1.5rem);background:var(--shot-bg)}
.d-banner img{display:block;width:100%;height:auto}
.d-back{text-decoration:none}
.d-back:hover{text-decoration:underline;text-underline-offset:.1875rem}
.lightbox{--pill-bg:var(--cream);--pill-fg:var(--ink);--muted:rgba(243,238,230,.7);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:transparent;color:var(--cream);
  padding:max(1rem,env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) max(1rem,env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px))}
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:center;gap:.875rem}
.lightbox::backdrop{background:rgba(10,10,10,.92)}
.lb-img{max-width:min(75rem,100%);max-height:100%;width:auto;height:auto;border:.1875rem solid var(--ink);border-radius:1.125rem}
.lb-bar{display:flex;align-items:center;justify-content:center;gap:.75rem;width:min(75rem,100%)}
.lb-top{justify-content:space-between}

/* Forms */
.form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.field{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.flabel{font-family:var(--mono);font-size:.78125rem;font-weight:500;color:var(--muted)}
.input{width:100%;height:3.125rem;padding:0 1rem;border-radius:.875rem;border:.125rem solid var(--line);background:rgba(255,255,255,.04);color:var(--fg);font-size:1rem}
textarea.input{height:auto;min-height:8.125rem;padding:.75rem 1rem;line-height:1.5;resize:vertical}
.input::placeholder{color:var(--muted);opacity:.75}
.input:focus{outline:none;border-color:var(--hl)}
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{padding:0;margin-bottom:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;display:inline-flex;align-items:center;height:2.625rem;padding:0 1rem;border-radius:999px;box-shadow:inset 0 0 0 .125rem var(--line);font-family:var(--mono);font-size:.84375rem;font-weight:500;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:checked){background:var(--pill-bg);color:var(--pill-fg);box-shadow:none}
.chip:has(input:focus-visible){outline:.1875rem solid var(--hl);outline-offset:.125rem}
.status{align-self:flex-start;font-size:.875rem}
.status:empty{display:none}

/* Page footer */
.pfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.625rem 1.5rem;padding:1.125rem 1.5rem;border-radius:var(--r);box-shadow:inset 0 0 0 .125rem rgba(243,238,230,.12);font-family:var(--mono);font-size:.78125rem;color:rgba(243,238,230,.7)}
.pfoot nav{display:flex;flex-wrap:wrap;gap:.375rem 1.125rem}
.pfoot a{text-decoration:none}
.pfoot a:hover{color:var(--cream)}

/* Opening a page from the home bento, under 1 s in total:
   1. the other tiles shrink away from the chosen one while it holds its size (main.js adds .leaving),
   2. the chosen tile grows into the new page's header and the rest of the page rises in. */
.home.leaving .tile:not(.chosen){pointer-events:none;animation:tile-out .2s cubic-bezier(.4,0,.2,1) var(--d,0ms) forwards}
.home.leaving .tile.chosen{z-index:2}
@keyframes tile-out{to{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.86)}}
/* Browsers without page-to-page transitions: main.js grows the tile to where the page header will be while its content fades */
.home .tile.growing{transition:top .42s cubic-bezier(.65,0,.25,1),left .42s cubic-bezier(.65,0,.25,1),width .42s cubic-bezier(.65,0,.25,1),height .42s cubic-bezier(.65,0,.25,1)}
.home .tile.growing > *{opacity:0;transition:opacity .36s ease}

/* Page-to-page transitions (Chrome, Edge, Safari 18.2+) */
@view-transition{navigation:auto}
.home .tile{view-transition-class:tile morph}
.phead[data-vt]{view-transition-class:morph}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
/* The tile and its page header are one card that changes size: both snapshots fill the card,
   so the old content fades out while the new one fades in at the same size, with no jump */
::view-transition-group(*.morph){animation-duration:.5s;border-radius:var(--r);overflow:clip}
::view-transition-old(*.morph),::view-transition-new(*.morph){width:100%;height:100%;object-fit:cover}
::view-transition-old(root),::view-transition-old(bar):only-child{animation:vt-out .12s ease both}
::view-transition-new(root),::view-transition-new(bar):only-child{animation:vt-page-in .3s .25s cubic-bezier(.2,.8,.2,1) both}
::view-transition-new(*.tile):only-child{animation:vt-tile-in .35s .12s cubic-bezier(.2,.8,.2,1) both}
/* Opening a page from a home tile (the page's <head> tags this transition "open").
   One continuous timeline, about 0.7 s: the other tiles shrink away, the chosen tile holds
   for a beat, then grows into the page header, and the rest of the page rises in last. */
html:active-view-transition-type(open)::view-transition-old(*.tile):only-child{animation:vt-tile-out .22s cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(open)::view-transition-group(*.morph){animation-delay:.14s;animation-duration:.46s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
html:active-view-transition-type(open)::view-transition-old(root){animation:vt-out .2s ease both}
html:active-view-transition-type(open)::view-transition-new(root),
html:active-view-transition-type(open)::view-transition-new(bar):only-child{animation:vt-page-in .28s .4s cubic-bezier(.2,.8,.2,1) both}
/* Back to the home page (index.html tags this "close"): the header shrinks into its tile, then the other tiles return */
html:active-view-transition-type(close)::view-transition-group(*),html:active-view-transition-type(close)::view-transition-group(*.morph){animation-duration:.34s}
html:active-view-transition-type(close)::view-transition-new(root){animation:vt-page-in .18s cubic-bezier(.2,.8,.2,1) both}
html:active-view-transition-type(close)::view-transition-new(*.tile):only-child{animation:vt-tile-in .26s .16s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-tile-out{to{opacity:0;transform:scale(.86)}}
@keyframes vt-page-in{from{opacity:0;transform:translateY(1rem)}}
@keyframes vt-tile-in{from{opacity:0;transform:scale(.86)}}

@media (max-width:1000px){
  .g-feature,.g-quad{grid-column:span 6}
  .g-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-home .app{height:auto}
  .home{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;
    grid-template-areas:"logo logo" "games games" "apps news" "careers careers" "contact beta"}
  .home .tile{container-type:inline-size}
  .t-apps,.t-news{aspect-ratio:1}
  .t-careers{padding-top:4rem}
  .t-careers .c-head{font-size:13cqi}
  .people{width:100%;max-height:none}
}
@media (max-width:760px){
  .bar .lang{order:1;margin-left:auto}
  .bar-nav{order:2;flex-basis:100%;margin-left:0}
  .phead.split,.d-hero{grid-template-columns:minmax(0,1fr)}
  .ptitle{font-size:min(var(--ts-m,var(--ts,12cqi)),11.875rem)}
  .ph-phone{position:relative;top:auto;right:auto;width:calc(100% + 2.5rem);height:10.625rem;margin:-1.5rem -1.25rem 0}
  .phead.with-phone .ph-text{max-width:none}
  .head-people{max-height:16.25rem}
}
@media (max-width:680px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .s2,.s3,.s4,.s6{grid-column:auto}
  .r2{grid-row:auto}
  .form-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .home{grid-template-columns:minmax(0,1fr);grid-template-areas:"logo" "games" "apps" "news" "careers" "contact" "beta"}
  .t-apps,.t-news{aspect-ratio:16/11}
  .t-games .slogan{font-size:11cqi}
  .g-quad{grid-template-columns:minmax(0,1fr)}
  /* Store badges share their row equally; a card's "details" hint gets its own line above them */
  .pills .badge{flex:1 1 0;min-width:0;max-width:11rem}
  .pills .badge img{width:100%;height:auto}
  .g-card .pills > .pill.line{flex-basis:100%}
  /* Team on phones: one person per row, photo zoomed on the face, every row the same height */
  .team{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
  .member{display:grid;grid-template-columns:6rem minmax(0,1fr);column-gap:1rem;row-gap:.5rem;align-items:center;align-content:center}
  .m-photo{grid-row:1 / 3;margin:0}
  .m-photo img{transform:scale(1.5);transform-origin:50% 28%}
  .member .t-h{align-self:end}
  .m-roles{align-self:start}
  .m-roles li{padding:.25rem .55rem;font-size:.6875rem}
}
@media (max-width:360px){
  .member{grid-template-columns:4.5rem minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}