/* Cut-corner holographic panels. Clip only decorative layers and inner content;
   keep the outer article uncut so keyboard outlines remain visible. */
.game-card{--panel-cut:24px;--panel-shape:polygon(0 0,calc(100% - var(--panel-cut)) 0,100% var(--panel-cut),100% 100%,var(--panel-cut) 100%,0 calc(100% - var(--panel-cut)));position:relative;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;isolation:isolate;transition:transform .2s ease}
.game-card:before,.game-card:after{content:'';position:absolute;pointer-events:none;clip-path:var(--panel-shape);border-radius:0;mask:none;padding:0}
.game-card:before{inset:0;z-index:-2;background:linear-gradient(135deg,#bf9bff,#66518b 40%,#3b565f 65%,#70efe4);opacity:.9}
.game-card:after{inset:2px;z-index:-1;background:linear-gradient(130deg,#302342f5,#151c2bf5 70%);box-shadow:inset 0 0 34px #a585fa0a}
.card-link{border-radius:0;clip-path:var(--panel-shape);padding:2px}
.card-image{border-radius:0;clip-path:polygon(0 0,calc(100% - 23px) 0,100% 23px,100% 100%,0 100%);border-bottom:1px solid #86e7ec77}
.card-info{padding:18px 18px 2px;background:linear-gradient(125deg,#b18af913,transparent 65%);border-radius:0;position:relative}
.card-info:before{content:'';display:block;width:48px;height:4px;margin:0 0 14px;background:linear-gradient(90deg,#bb9aff 0 55%,transparent 55% 65%,#70efe4 65%);box-shadow:none;border-radius:0}
.card-info:after{content:'';position:absolute;right:13px;top:12px;width:12px;height:12px;border-top:2px solid #70efe4;border-right:2px solid #70efe4;opacity:.8;pointer-events:none}
.card-info h3{letter-spacing:-.025em}.card-meta{padding-bottom:15px}
.card-launch{min-height:43px;margin:0 -16px;padding:10px 17px 10px 25px;background:linear-gradient(90deg,#8860d43b,#2e7c7926);border-top:1px solid #9b7bc766;color:#d7c3ff;font-weight:700;letter-spacing:.035em}
.card-launch svg{color:#70efe4}
.save-button{right:15px;top:15px;border-radius:5px;background:#101020ee}
/* Focus stays inside the clipped link and is also echoed on its unclipped owner. */
.card-link:focus-visible{outline-offset:-6px}.game-card:focus-within{outline:2px solid var(--cyan);outline-offset:4px}
/* Genre selectors use the same chassis, with large structural corner strokes. */
.genre-tile{position:relative;isolation:isolate;border:0;border-radius:0;background:transparent;padding:22px 20px;--genre-shape:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));transition:transform .2s ease}
.genre-tile:before,.genre-tile:after{content:'';position:absolute;pointer-events:none;clip-path:var(--genre-shape)}
.genre-tile:before{inset:0;z-index:-2;background:linear-gradient(135deg,#b796e9,#4b405e 40%,#70b7b4)}
.genre-tile:after{inset:1px;z-index:-1;background:linear-gradient(125deg,#30223f,#151b2a)}
.genre-symbol{border-left:3px solid #b39aff;padding-left:12px;color:#c8adff;margin-bottom:22px;line-height:1.1}
.genre-tile:nth-child(even) .genre-symbol{border-color:#70efe4}
.genre-tile small{border-top:1px solid #b195d133;padding-top:11px;margin-top:13px;color:#bab2c9}
.genre-tile small svg{color:#70efe4}
:root[data-theme=light] .game-card,:root[data-theme=light] .genre-tile{background:transparent;border:0;box-shadow:none}
:root[data-theme=light] .game-card:before,:root[data-theme=light] .genre-tile:before{background:linear-gradient(135deg,#74509f,#ad9cbf 45%,#1f7c75)}
:root[data-theme=light] .game-card:after,:root[data-theme=light] .genre-tile:after{background:linear-gradient(130deg,#f3ecff,#fff 65%,#e7f4f1)}
:root[data-theme=light] .card-info{background:linear-gradient(125deg,#9872c315,transparent 65%)}
:root[data-theme=light] .card-info:before{background:linear-gradient(90deg,#7650a2 0 55%,transparent 55% 65%,#22766b 65%)}
:root[data-theme=light] .card-info:after{border-color:#287d72}
:root[data-theme=light] .card-launch{background:linear-gradient(90deg,#d8c7ef,#e0f0eb);color:#4c2c76;border-color:#b9a2d0}
:root[data-theme=light] .card-launch svg,:root[data-theme=light] .genre-tile small svg{color:#18695f}
:root[data-theme=light] .genre-symbol{color:#64409d;border-color:#7650a2}
:root[data-theme=light] .genre-tile:nth-child(even) .genre-symbol{color:#17665f;border-color:#287d72}
:root[data-theme=light] .genre-tile small{color:var(--muted);border-color:#bda9d0}
@media(hover:hover) and (pointer:fine){.game-card:hover{transform:translateY(-5px);filter:none}.genre-tile:hover{transform:translateY(-3px)}.genre-tile:hover:before{background:linear-gradient(135deg,#ddc7ff,#8b71ac,#87fff1)}}
@media(max-width:540px){.game-card{--panel-cut:18px}.card-info{padding:14px 12px 2px}.card-info:before{width:35px;height:3px;margin-bottom:12px}.card-info:after{width:8px;height:8px;right:10px;top:10px}.card-launch{margin:0 -10px;padding:10px 12px 10px 20px;font-size:10px}.save-button{right:13px;top:13px}.genre-tile{padding:20px 17px}.genre-symbol{margin-bottom:18px}}
@media(hover:none){.game-card:hover,.genre-tile:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.game-card,.genre-tile,.game-card:hover,.genre-tile:hover{transform:none;transition:none}}