/* ==========================================================================
   Tyrone v10 — home page: stage, category tiles, shelves, spotlight
   ========================================================================== */

/* ---- Stage ---- */
.t-stage{position:relative;margin:20px 0 0;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  padding:clamp(22px,3.4vw,44px) clamp(20px,3.4vw,44px) clamp(20px,3vw,32px);
  background:radial-gradient(55% 90% at 82% 30%,color-mix(in srgb,var(--cobalt) 35%,transparent) 0%,transparent 70%),linear-gradient(135deg,var(--surface) 0%,var(--panel) 60%,var(--night) 100%);border:1px solid var(--line)}
.t-stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%)}
.t-stage-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,64px)}
.t-stage-kicker{display:flex;align-items:center;gap:10px;font:800 14px var(--display);letter-spacing:0;color:#C9CDFF;margin-bottom:18px}
.t-live{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:#FF5C7A26;color:var(--hot);font:850 11px var(--display);text-transform:uppercase;letter-spacing:.06em}
.t-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hot);animation:t-pulse 1.6s ease-in-out infinite}
@keyframes t-pulse{50%{opacity:.25}}
.t-stage-rank{margin:0 0 8px;height:1.4em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:800 14px var(--display);color:var(--token)}
/* fixed two-line box: swapping between short and long names never moves the block */
.t-stage-name{margin:0;font:900 clamp(30px,3.4vw,48px)/1.06 var(--display);letter-spacing:-.045em;color:#fff;max-width:22ch;
  height:2.12em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-stage-desc{margin:14px 0 0;max-width:54ch;color:var(--text-soft);font-size:16px;line-height:1.55;
  height:3.1em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-stage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.t-stage-all{background:#ffffff0f;border-color:#ffffff24}
.t-stage-sub{margin:16px 0 0;font-size:13px;color:var(--text-3)}
.t-stage-art{position:relative;display:block;width:clamp(220px,22vw,300px);aspect-ratio:1;border-radius:28px;overflow:hidden;
  box-shadow:0 0 0 1px #ffffff1f,0 0 60px color-mix(in srgb,var(--cobalt) 40%,transparent),0 24px 50px #0008;transition:transform .25s ease}
.t-stage-art:hover{transform:translateY(-4px)}
.t-stage-art img{width:100%;height:100%;object-fit:cover}
.t-stage.is-swap .t-stage-name,.t-stage.is-swap .t-stage-art{animation:t-swap .28s ease-out}
@keyframes t-swap{from{opacity:.2;transform:translateY(8px)}}

/* trending picks: square tiles, rank badge, name under the art */
.t-picks{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin:32px 0 0;padding:20px 0 0;border-top:1px solid #ffffff14}
.t-pick{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:18px;transition:background .15s}
.t-pick:hover{background:#ffffff0d}
.t-pick-art{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.t-pick-art img{width:100%;height:100%;object-fit:cover}
.t-pick-rank{position:absolute;left:6px;top:6px;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--night) 85%,transparent);color:#fff;display:grid;place-items:center;font:900 13px var(--display)}
.t-pick-name{margin-top:6px;font:750 13px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-pick-plays{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-pick.is-on .t-pick-art{box-shadow:0 0 0 3px var(--token)}
.t-pick.is-on .t-pick-rank{background:var(--token);color:var(--night)}

/* ---- Category tiles ---- */
.t-cats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);gap:12px;overflow-x:auto;scrollbar-width:none;margin:20px -4px 0;padding:4px}
.t-cats::-webkit-scrollbar{display:none}
.t-cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:118px;padding:14px;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 70%,var(--night)) 0%,color-mix(in srgb,var(--c) 30%,var(--night)) 100%);transition:transform .15s}
.t-cat:hover{transform:translateY(-3px)}
.t-cat-ico{position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:11px;background:#ffffff26;display:grid;place-items:center;color:#fff}
.t-cat b{font:850 16px/1.1 var(--display);letter-spacing:-.02em;color:#fff;position:relative}
.t-cat span.num{font-size:12px;color:#ffffffb3;position:relative}
.t-cat img{position:absolute;right:-16px;top:-10px;width:84px;height:84px;border-radius:24px;object-fit:cover;transform:rotate(12deg);z-index:-1;opacity:.9;box-shadow:0 10px 24px #0006}

/* ---- Shelves ---- */
.t-row-tall{grid-auto-columns:clamp(160px,15vw,140px)}
.t-load-row{display:flex;justify-content:center;margin-top:28px}

/* ---- Editor's picks: horizontal cards, art kept near its real size ---- */
.t-picks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.t-pickcard{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);transition:border-color .15s,background .15s}
.t-pickcard:hover{border-color:var(--cobalt);background:var(--raised)}
.t-pickcard img{width:96px;height:96px;border-radius:14px;object-fit:cover}
.t-pickcard-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.t-pickcard h3{font:800 16px/1.2 var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-pickcard small{font-size:12.5px;color:var(--text-3)}
.t-pickcard-desc{margin-top:4px;font-size:13px;line-height:1.4;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-pickcard-go{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:var(--token);display:grid;place-items:center;opacity:0;transform:scale(.7);transition:opacity .15s,transform .15s}
.t-pickcard-go::after{content:"";border-left:10px solid var(--night);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.t-pickcard:hover .t-pickcard-go,.t-pickcard:focus-visible .t-pickcard-go{opacity:1;transform:scale(1)}

/* ---- SEO block: text + facts card ---- */
.t-home-seo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,56px);align-items:start;margin-top:48px;
  padding:clamp(24px,4vw,48px);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.t-home-seo-text > *{max-width:72ch}
.t-home-seo-text h2{margin-top:0}
.t-home-facts{display:grid;gap:16px;position:sticky;top:calc(var(--top) + 16px)}
.t-home-facts dl{margin:0;padding:20px;border-radius:var(--r);background:var(--night);border:1px solid var(--line);display:grid;gap:14px}
.t-home-facts dl div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.t-home-facts dl div:last-child{padding-bottom:0;border-bottom:0}
.t-home-facts dt{font-size:14px;color:var(--text-2)}
.t-home-facts dd{margin:0;font:900 22px var(--display);letter-spacing:-.03em;color:var(--text)}
.t-home-facts dl div:first-child dd{color:var(--token)}
.t-home-facts-title{margin:0 0 4px;width:100%;font:800 13px var(--display);color:var(--text-3)}
.t-seo-links{display:flex;flex-wrap:wrap;gap:8px}
.t-seo-links a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:var(--night);border:1px solid var(--line);font:750 13px var(--display);color:var(--text)}
.t-seo-links a:hover{border-color:var(--token);color:var(--token)}

@media (max-width:1280px){
  .t-picks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .t-picks li:nth-child(n+5){display:none}
  .t-home-seo{grid-template-columns:1fr}
  .t-home-facts{position:static}
}
@media (max-width:900px){
  .t-stage-body{grid-template-columns:1fr;min-height:0}
  .t-stage-art{display:none}
  .t-picks{display:flex;overflow-x:auto;scrollbar-width:none;margin-top:24px}
  .t-picks li{flex:0 0 120px;width:120px;min-width:0;display:block!important}
  .t-pick{min-width:0}
}
@media (max-width:560px){
  .t-stage{margin-top:14px;border-radius:var(--r)}
  .t-stage-name{font-size:30px}
  .t-stage-kicker{margin-bottom:14px}
}

/* ---- Home grids: explicit column counts by available width.
   New Games shows every card it gets: 28 on load, 8 more per "Load more". Column counts
   are chosen so those numbers always make full rows: 2 or 4 columns without the ad tile
   (phones), 4 or 8 with the 2x2 ad tile (28 + 4 tile cells = 32). Editor's Picks hides an
   unfinished last row; its 1x2 tile (first child) shifts the row maths by one cell. ---- */
.t-new,.t-spot{container-type:inline-size}
#newGamesList{grid-template-columns:repeat(4,minmax(0,1fr))}
@container (max-width:459.98px){
  #newGamesList{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:1100px){
  #newGamesList:has(> .t-tile){grid-template-columns:repeat(8,minmax(0,1fr))}
}
@container (max-width:619.98px){
  .t-picks-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
}
@container (min-width:620px) and (max-width:959.98px){
  .t-picks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-picks-grid:not(:has(> .t-tile)) > :nth-child(2n+1):nth-last-child(-n+1),.t-picks-grid:not(:has(> .t-tile)) > :nth-child(2n+1):nth-last-child(-n+1) ~ *{display:none}
  .t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(2n+2):nth-last-child(-n+1),.t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(2n+2):nth-last-child(-n+1) ~ *{display:none}
}
@container (min-width:960px) and (max-width:1319.98px){
  .t-picks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .t-picks-grid:not(:has(> .t-tile)) > :nth-child(3n+1):nth-last-child(-n+2),.t-picks-grid:not(:has(> .t-tile)) > :nth-child(3n+1):nth-last-child(-n+2) ~ *{display:none}
  .t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(3n+3):nth-last-child(-n+2),.t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(3n+3):nth-last-child(-n+2) ~ *{display:none}
}
@container (min-width:1320px) and (max-width:1719.98px){
  .t-picks-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .t-picks-grid:not(:has(> .t-tile)) > :nth-child(4n+1):nth-last-child(-n+3),.t-picks-grid:not(:has(> .t-tile)) > :nth-child(4n+1):nth-last-child(-n+3) ~ *{display:none}
  .t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(4n+4):nth-last-child(-n+3),.t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(4n+4):nth-last-child(-n+3) ~ *{display:none}
}
@container (min-width:1720px){
  .t-picks-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .t-picks-grid:not(:has(> .t-tile)) > :nth-child(5n+1):nth-last-child(-n+4),.t-picks-grid:not(:has(> .t-tile)) > :nth-child(5n+1):nth-last-child(-n+4) ~ *{display:none}
  .t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(5n+5):nth-last-child(-n+4),.t-picks-grid:has(> .t-tile) > .t-pickcard:nth-child(5n+5):nth-last-child(-n+4) ~ *{display:none}
}


/* Ad tiles: New Games tile covers the two right columns of the first two rows,
   Editor's Picks tile the right column of the first two rows */
#newGamesList > .t-tile{grid-column:-3 / -1;grid-row:1 / span 2}
.t-picks-grid > .t-tile{grid-column:-2 / -1;grid-row:1 / span 2}