/* ArkoGames Origines v1.1 — shared illustrated game / variant tiles */
.ag-game-tile{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(209,173,104,.18);
  border-radius:var(--ag-r2,14px);
  background:#0b1119;
  color:var(--ag-text,#f4f6f8);
  box-shadow:inset 0 -34px 52px rgba(0,0,0,.32);
  text-align:left;
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}
.ag-game-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-color:#0b1119;
  background-image:var(--ag-tile-art,none);
  background-size:cover;
  background-position:center;
  transform:scale(1.015);
  filter:saturate(.9) contrast(1.035) brightness(.82);
  transition:transform .26s ease,filter .26s ease;
}
.ag-game-tile::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(4,7,11,.08) 4%,rgba(4,7,11,.34) 42%,rgba(4,7,11,.96) 100%),
    linear-gradient(90deg,rgba(4,7,11,.25),transparent 66%);
  pointer-events:none;
}
.ag-game-tile>*{position:relative;z-index:1}
.ag-game-tile strong,.ag-game-tile__title{
  display:block;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:.015em;
  line-height:1.08;
  text-wrap:balance;
  text-shadow:0 2px 10px rgba(0,0,0,.98);
}
.ag-game-tile span,.ag-game-tile small,.ag-game-tile__meta{
  text-shadow:0 1px 8px rgba(0,0,0,.96);
}
.ag-game-tile[data-active="true"],.ag-game-tile[aria-pressed="true"]{
  border-color:rgba(229,196,119,.76);
  box-shadow:inset 0 0 0 2px rgba(229,196,119,.58),0 8px 26px rgba(0,0,0,.22);
}
.ag-game-tile:focus-visible{outline:3px solid var(--ag-focus,#e7c478);outline-offset:3px}
.ag-game-tile:disabled,.ag-game-tile[aria-disabled="true"]{opacity:.5;filter:saturate(.5);cursor:not-allowed}
@media(hover:hover){
  .ag-game-tile:not(:disabled):hover{transform:translateY(-2px);border-color:rgba(229,196,119,.52);box-shadow:inset 0 -36px 54px rgba(0,0,0,.36),0 10px 26px rgba(0,0,0,.18)}
  .ag-game-tile:not(:disabled):hover::before{transform:scale(1.045);filter:saturate(1) contrast(1.045) brightness(.9)}
}
.ag-game-tile--variant{min-height:96px;padding:.62rem .72rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.16rem}
.ag-game-tile--variant strong{font-size:.9rem}
.ag-game-tile--variant span{color:#dde3eb;font-size:.72rem;line-height:1.25}
.ag-game-tile--variant small{color:#e1c381;font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.ag-game-tile--collection{min-height:250px;display:flex;flex-direction:column;justify-content:flex-end}
@media(max-width:760px){
  .ag-game-tile--variant{min-height:84px;padding:.55rem .62rem}
  .ag-game-tile--variant strong{font-size:.84rem}
  .ag-game-tile--collection{min-height:210px}
}
@media(prefers-reduced-motion:reduce){
  .ag-game-tile,.ag-game-tile::before{transition:none!important}
  .ag-game-tile:not(:disabled):hover{transform:none!important}
  .ag-game-tile:not(:disabled):hover::before{transform:scale(1.015)!important}
}


/* v1.2.0 Phase 15 — thumbnail/navigation state language */
.ag-game-tile[data-navigation-state="selected"]{
  border-color:rgba(231,196,120,.86);
  box-shadow:inset 0 0 0 2px rgba(231,196,120,.58),0 9px 28px rgba(0,0,0,.24);
}
.ag-game-tile[data-navigation-state="available"]{border-color:rgba(209,173,104,.24)}
.ag-game-tile[data-navigation-state="coming"],
.ag-game-tile[data-navigation-state="to-document"]{
  opacity:.72;
  filter:saturate(.64);
  cursor:not-allowed;
}
.ag-game-tile[data-navigation-state="coming"]{border-style:dashed}
.ag-game-tile[data-navigation-state="to-document"]{border-color:rgba(125,173,196,.38)}
.ag-game-tile [data-navigation-state-label]{
  display:block;
  margin-top:.18rem;
  font-size:.61rem;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.ag-game-tile[data-navigation-state="selected"] [data-navigation-state-label]{color:#f2d89e}
.ag-game-tile[data-navigation-state="available"] [data-navigation-state-label]{color:#9fd6b7}
.ag-game-tile[data-navigation-state="coming"] [data-navigation-state-label]{color:#d7bd86}
.ag-game-tile[data-navigation-state="to-document"] [data-navigation-state-label]{color:#9fc8da}
.ag-game-tile[data-navigation-state="coming"]:hover,
.ag-game-tile[data-navigation-state="to-document"]:hover{transform:none}


/* v1.7.8 Phase 9 — one variant card + responsive grid language across all collections. */
.ag-variant-grid{
  --ag-variant-gap:.45rem;
  --ag-variant-min:142px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(var(--ag-variant-min),100%),1fr));
  gap:var(--ag-variant-gap);
  align-items:stretch;
  min-width:0;
}
.ag-variant-grid>.ag-variant-card,
.ag-variant-grid .ag-variant-grid>.ag-variant-card{min-width:0!important;width:100%!important}
.ag-variant-card{
  min-height:0!important;
  aspect-ratio:1.18/1;
  padding:.58rem .66rem!important;
  border-radius:.72rem!important;
  justify-content:flex-end;
  text-align:left;
}
.ag-variant-card__title{font-size:.86rem!important}
.ag-variant-card__subtitle{
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:.7rem!important;
  line-height:1.2!important;
}
.ag-variant-card__badge{font-size:.6rem!important;line-height:1.1!important}
.ag-variant-card[data-navigation-state="selected"]{
  border-color:rgba(229,196,119,.86)!important;
  box-shadow:inset 0 0 0 2px rgba(229,196,119,.62),0 8px 24px rgba(0,0,0,.2)!important;
}
.ag-variant-grid[data-variant-grid="sectioned"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.42rem}
.ag-variant-grid[data-variant-grid="sectioned"]>.variant-family{min-width:0}
.ag-variant-grid[data-variant-grid="nested"]{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.34rem}

@media (min-width:1200px){
  .ag-variant-strip.ag-variant-grid:not([data-variant-grid="sectioned"]){grid-template-columns:repeat(auto-fit,minmax(145px,1fr));overflow:visible}
  .ag-variant-card{aspect-ratio:1.28/1}
}

@media (min-width:700px) and (max-width:1199px){
  body[data-mobile-drawer="variants"] .ag-variant-strip.ag-variant-grid:not([data-variant-grid="sectioned"]){
    --ag-variant-min:150px;
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
    gap:.5rem!important;
  }
  body[data-mobile-drawer="variants"] .ag-variant-grid[data-variant-grid="sectioned"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.5rem!important}
  body[data-mobile-drawer="variants"] .ag-variant-grid[data-variant-grid="nested"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-mobile-drawer="variants"] .ag-variant-card{aspect-ratio:1.08/1;min-height:0!important}
}

@media (max-width:699px) and (orientation:portrait){
  body[data-mobile-drawer="variants"] .ag-variant-strip.ag-variant-grid:not([data-variant-grid="sectioned"]){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.42rem!important;
    align-content:start;
  }
  body[data-mobile-drawer="variants"] .ag-variant-grid[data-variant-grid="sectioned"]{display:grid!important;grid-template-columns:1fr!important;gap:.55rem!important}
  body[data-mobile-drawer="variants"] .ag-variant-grid[data-variant-grid="nested"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.42rem!important;overflow:visible!important}
  body[data-mobile-drawer="variants"] .ag-variant-card{
    min-width:0!important;
    min-height:0!important;
    width:100%!important;
    aspect-ratio:1/1!important;
    padding:.48rem .52rem!important;
  }
  body[data-mobile-drawer="variants"] .ag-variant-card__title{font-size:.8rem!important}
  body[data-mobile-drawer="variants"] .ag-variant-card__subtitle{font-size:.66rem!important;-webkit-line-clamp:2}
}

@media (max-width:899px) and (orientation:landscape){
  body[data-mobile-drawer="variants"] .ag-variant-strip.ag-variant-grid:not([data-variant-grid="sectioned"]){grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;gap:.38rem!important}
  body[data-mobile-drawer="variants"] .ag-variant-grid[data-variant-grid="sectioned"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-mobile-drawer="variants"] .ag-variant-grid[data-variant-grid="nested"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-mobile-drawer="variants"] .ag-variant-card{aspect-ratio:1.32/1!important}
}