/* Shared card anatomy; variant layouts are intentionally different. */
.game-card{display:flex;flex-direction:column;min-width:0;height:100%;min-height:0;position:relative;border:1px solid #ddd6e6;border-radius:18px;background:#fff;color:#241b31;text-decoration:none;overflow:hidden;box-shadow:0 3px 9px #281a4d08;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.game-card:focus-visible{outline:3px solid #8c52ff;outline-offset:4px;border-color:#7040d9}
.game-card .card-art{display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;width:100%;min-width:0;flex:none;height:112px;min-height:0;overflow:hidden;background:var(--art-bg)}
.art-grid{position:absolute;inset:0;opacity:.16;background-image:radial-gradient(var(--art-accent) 1.2px,transparent 1.2px);background-size:18px 18px;mask-image:linear-gradient(100deg,transparent,#000 40%,transparent)}
.art-orbit{position:absolute;width:134px;height:134px;border:2px solid var(--art-accent);border-radius:35px;opacity:.2;transform:rotate(var(--art-rotate));transition:transform .2s ease}
.art-icon{position:relative;z-index:1;width:76px;height:76px;display:grid;place-items:center;border:1px solid #fff;border-radius:23px;background:#ffffffd6;box-shadow:0 7px 17px #27163715;transform:rotate(var(--art-rotate));transition:transform .2s ease}
.art-icon img{width:59px;height:59px;object-fit:contain}
.art-detail{position:absolute;z-index:2;left:calc(50% + 29px);top:calc(50% + 12px);width:33px;height:33px;display:grid;place-items:center;border-radius:11px;background:#fff;box-shadow:0 4px 10px #2716371b;transform:rotate(12deg)}
.art-detail img{width:23px;height:23px;object-fit:contain}
.art-mark{position:absolute;right:13px;bottom:10px;color:var(--art-accent);font-size:.85rem;font-weight:900;letter-spacing:-.02em}
.card-flute .art-icon img{transform:rotate(-24deg)}
.card-clarinet .art-icon img{transform:rotate(-25deg)}
.game-card .card-content{display:flex;flex-direction:column;position:relative;flex:1;min-width:0;padding:14px 15px}
.card-category{font-size:.6rem;line-height:1.3;letter-spacing:.1em;font-weight:850;color:var(--art-accent)}
.game-card .card-content h3{margin:5px 0 7px;font-size:1.18rem;line-height:1.16;letter-spacing:-.035em;overflow-wrap:break-word}
.game-card .card-description{margin:0;color:#605669;font-size:.81rem;line-height:1.4}
.game-card--regular .card-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-modes{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.card-modes>span{display:inline-flex;align-items:center;min-height:21px;padding:3px 6px;border:1px solid #e5deec;border-radius:6px;background:#faf7fd;color:#584966;font-size:.62rem;line-height:1.2;font-weight:700}
.game-card .card-action{display:flex;align-items:center;gap:6px;align-self:flex-end;margin-top:auto;padding-top:9px;color:#6536b4;font-weight:800;font-size:.74rem;line-height:1.2}
.card-action>span{display:inline-block;font-size:1rem;transition:transform .18s ease}
.card-status{align-self:flex-start;margin-top:10px;padding:4px 7px;border:1px solid #d7cbdc;border-radius:6px;background:#f2ecf5;color:#67536f;font-size:.65rem;line-height:1.3;font-weight:800}
.game-grid--regular{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.game-grid--compact{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}

/* Spotlight: spacious illustration stage, editorial copy, discreet action. */
.featured-game{box-shadow:7px 7px 0 #daccf0;overflow:visible;background:#fff}
.featured-game-heading{border-radius:21px 21px 0 0}
.game-card.game-card--featured{height:auto;border:0;border-radius:0 0 21px 21px;box-shadow:none}
.game-card.game-card--featured .card-art{height:184px;background:linear-gradient(135deg,color-mix(in srgb,var(--art-bg) 75%,white),var(--art-bg))}
.game-card--featured .art-icon{width:112px;height:112px;border-radius:30px}
.game-card--featured .art-icon img{width:88px;height:88px}
.game-card--featured .art-orbit{width:210px;height:210px;border-radius:56px}
.game-card--featured .art-detail{left:calc(50% + 48px);top:calc(50% + 20px);width:46px;height:46px;border-radius:15px}
.game-card--featured .art-detail img{width:33px;height:33px}
.game-card--featured .art-mark{right:20px;bottom:17px;font-size:1.3rem}
.game-card.game-card--featured .card-content{padding:20px 23px 18px}
.game-card.game-card--featured h3{font-size:1.75rem;line-height:1.08;letter-spacing:-.045em;margin:7px 0 10px}
.game-card.game-card--featured .card-description{font-size:.9rem;line-height:1.45}
.game-card--featured .card-category{font-size:.67rem}
.card-spotlight-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px}
.game-card--featured .card-modes{margin-top:0;gap:5px;flex:1}
.game-card--featured .card-modes>span{font-size:.67rem;padding:4px 7px}
.game-card.game-card--featured .card-action{padding-top:0;margin-top:0;font-size:.82rem;white-space:nowrap}

/* Directories: art, label, readable title; no promotional copy or modes. */
.game-card.game-card--compact{border-radius:15px}
.game-card.game-card--compact .card-art{height:116px}
.game-card--compact .art-icon{width:70px;height:70px;border-radius:21px}
.game-card--compact .art-icon img{width:54px;height:54px}
.game-card--compact .art-orbit{width:116px;height:116px;border-radius:30px}
.game-card--compact .art-detail{width:28px;height:28px;left:calc(50% + 25px);top:calc(50% + 10px);border-radius:9px}
.game-card--compact .art-detail img{width:20px;height:20px}
.game-card--compact .art-mark{font-size:.7rem;right:10px;bottom:8px}
.game-card.game-card--compact .card-content{padding:12px 30px 13px 13px}
.game-card.game-card--compact h3{font-size:1rem;line-height:1.22;margin:5px 0 0;letter-spacing:-.025em}
.game-card--compact .card-category{font-size:.56rem}
.game-card.game-card--compact .card-action{position:absolute;right:11px;bottom:13px;margin:0;padding:0}
.game-card--compact .card-status{margin-top:8px}

.game-card-unavailable{cursor:default;border-style:dashed;border-color:#c4b8cd;background:#fcfafc;box-shadow:none}
.game-card-unavailable .card-art{filter:saturate(.5)}
.game-card-unavailable .card-category{color:#67536f}
@media(hover:hover){
  a.game-card:hover{transform:translateY(-3px);border-color:var(--art-accent);box-shadow:0 9px 22px #281a4d16}
  a.game-card:hover .art-icon{transform:rotate(0deg) translateY(-2px)}
  a.game-card:hover .art-orbit{transform:rotate(0deg)}
  a.game-card:hover .card-action>span{transform:translateX(3px)}
}
a.game-card:focus-visible .card-action>span{transform:translateX(3px)}
@media(min-width:1400px){.game-grid--regular{grid-template-columns:repeat(4,minmax(0,1fr))}.game-grid--compact{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1099px){.game-grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:899px){.game-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr))}.game-grid--regular{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card.game-card--featured .card-art{height:160px}.game-card.game-card--featured .card-content{padding:17px}.game-card.game-card--featured h3{font-size:1.5rem}}
@media(max-width:599px){.game-grid--regular{grid-template-columns:1fr;gap:13px}.game-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.game-card.game-card--featured .card-art{height:174px}.game-card.game-card--featured .card-content{padding:18px 20px}.game-card.game-card--featured h3{font-size:1.65rem}.game-card--regular .card-art{height:114px}.game-card--regular .card-content{padding:15px 17px}.game-card--regular h3{font-size:1.25rem}.game-card--regular .card-description{font-size:.86rem}.game-card--regular .card-modes>span{font-size:.67rem}.game-card--regular .card-action{font-size:.8rem}}
@media(max-width:359px){.game-grid--compact{grid-template-columns:1fr}.game-card--compact .card-art{height:130px}}
@media(prefers-reduced-motion:reduce){.game-card,.art-icon,.art-orbit,.card-action>span{transition:none}a.game-card:hover,a.game-card:hover .art-icon,a.game-card:hover .art-orbit,a.game-card:hover .card-action>span,a.game-card:focus-visible .card-action>span{transform:none}}