.card{
  position:relative; display:block;
  background:var(--panel);
  border:1px solid var(--line);
  color:inherit;
  overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  transition:border-color .25s, background .25s, transform .28s var(--ease);
}
.card::before{
  content:''; position:absolute; top:7px; left:7px; z-index:4;
  width:0; height:0;
  border-top:1px solid var(--accent); border-left:1px solid var(--accent);
  transition:width .3s var(--ease) .05s, height .3s var(--ease) .05s;
  pointer-events:none;
}
.card::after{
  content:''; position:absolute; top:-25%; bottom:-25%; left:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(230,205,255,.11), transparent);
  transform:skewX(-18deg) translateX(-220%);
  transition:transform .68s var(--swipe);
  pointer-events:none; z-index:3;
}
.card:hover{ border-color:var(--plasma); background:var(--panel-hi); }
.card:hover::before{ width:17px; height:17px; }
.card:hover::after{ transform:skewX(-18deg) translateX(420%); }

.card-top{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#0c0a1c; }
.card-top img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease), filter .3s;
  filter:saturate(.94);
}
.card:hover .card-top img{ transform:scale(1.05); filter:saturate(1.12); }

.card-fade{
  position:absolute; inset:auto 0 0 0; height:28%;
  background:linear-gradient(to top, rgba(17,14,35,.92), transparent);
  pointer-events:none;
  transition:background .25s;
}
.card:hover .card-fade{ background:linear-gradient(to top, rgba(24,19,48,.92), transparent); }

.card-live{
  position:absolute; top:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px;
  background:rgba(6,4,14,.9);
  border:1px solid rgba(255,182,72,.42);
  font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--amber);
}
.card-live svg{ display:block; flex:none; }

.card-open{
  position:absolute; bottom:8px; right:8px; z-index:4;
  width:25px; height:25px; display:grid; place-items:center;
  background:rgba(6,4,14,.85);
  border:1px solid var(--line);
  color:var(--mid);
  opacity:0; transform:translateY(5px);
  transition:opacity .25s, transform .25s var(--ease), color .2s, border-color .2s;
}
.card:hover .card-open{ opacity:1; transform:none; color:var(--star); border-color:var(--accent); }

.card-body{ padding:13px 14px 15px; position:relative; z-index:1; }

.card-title{
  font-size:16px; font-weight:800; line-height:1.3; letter-spacing:-.03em;
  margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-role{
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:10px;
}
.card-stats{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
.card-stats.has-rating{ grid-template-columns:repeat(3,1fr); }
.stat{ background:var(--panel); padding:7px 9px; transition:background .25s; min-width:0; }
.card:hover .stat{ background:var(--panel-hi); }
.stat b{
  display:block; font-size:16px; font-weight:800;
  color:var(--star); letter-spacing:-.035em; line-height:1.3;
}
.stat.is-live b{ color:var(--amber); }
.stat span{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }

.card.is-loading .card-title{ color:var(--faint); }
.card.is-dead{ border-style:dashed; opacity:.7; }
.card-top.is-blank{
  display:grid; place-items:center;
  background:repeating-linear-gradient(45deg, #0e0b1e 0 9px, #131029 9px 18px);
}
.card-top.is-blank span{
  font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--dim);
}

.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap:16px;
}

.games-stage{
  position:relative;
  height:clamp(400px, calc(100vh - 360px), 640px);
  perspective:1250px;
  perspective-origin:50% 50%;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  z-index:1;
}
.games-stage.dragging{ cursor:grabbing; }

.globe-layer{ position:absolute; inset:0; transform-style:preserve-3d; }

.games-stage::before{
  content:''; position:absolute; left:50%; top:50%;
  width:var(--gsize,520px); aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(155,60,211,.20), rgba(71,35,169,.07) 46%, transparent 68%),
    radial-gradient(circle at 74% 82%, rgba(230,55,125,.06), transparent 58%);
  box-shadow:inset 0 0 110px rgba(155,60,211,.12);
  pointer-events:none;
}

.globe-card{
  position:absolute; left:50%; top:50%;
  width:var(--gcard, 164px);
  translate:-50% -50%;
  will-change:transform, opacity;
}
.globe-card .card-body{ padding:8px 10px 10px; }
.globe-card .card-title{ font-size:11.5px; -webkit-line-clamp:1; margin-bottom:2px; }
.globe-card .card-role{ font-size:10px; margin-bottom:6px; letter-spacing:.08em; }
.globe-card .card-open{ display:none; }
.globe-card .card-stats,
.globe-card .card-stats.has-rating{ grid-template-columns:1fr 1fr; }
.globe-card .stat:nth-child(3){ display:none; }
.globe-card .stat b{ font-size:13px; }
.globe-card .stat span{ font-size:10px; letter-spacing:.08em; }
.globe-card .stat{ padding:5px 6px; }
.globe-card .card-live{ top:5px; right:5px; padding:3px 5px; font-size:10px; gap:4px; }
.globe-card .card-live svg{ width:9px; height:9px; }
.globe-card::before{ display:none; }

.globe-hint{
  position:absolute; left:50%; bottom:2px; translate:-50% 0;
  font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--dim);
  pointer-events:none; transition:opacity .5s; z-index:5;
}
.globe-hint.gone{ opacity:0; }

.view-toggle{ display:flex; border:1px solid var(--line); background:var(--panel); }
.view-toggle button{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  background:none; border:0; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
  transition:color .2s, background .2s;
}
.view-toggle button + button{ border-left:1px solid var(--line); }
.view-toggle button:hover{ color:var(--star); }
.view-toggle button.on{ color:var(--mid); background:var(--accent); }

.games-error{
  border:1px solid rgba(255,90,90,.3);
  background:rgba(56,12,22,.45);
  color:#ffb4b4;
  padding:13px 15px;
  font-size:12px; line-height:1.7;
  margin-top:18px;
}