/* MATSUI WORKS | Pop illustrated gallery + per-game motion v1 */
.game-card{position:relative;isolation:isolate;transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .24s,box-shadow .32s}
.game-card:hover,.game-card:focus-visible{transform:translateY(-6px);border-color:#daeeb0;box-shadow:0 16px 36px #0008,0 0 0 1px #ffffff18}
.game-card:active{transform:translateY(-1px) scale(.995)}
.game-card .game-art{height:199px;isolation:isolate;background:#20213c}
.game-art.has-cover:after{display:none}
.game-art.has-cover .art-symbol{opacity:0;visibility:hidden}
.game-art.has-cover .art-grid{z-index:2;opacity:.08}
.cover-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:1;opacity:0;transform:scale(1.015);transition:opacity .35s ease,transform .65s cubic-bezier(.2,.75,.25,1)}
.game-art.has-cover .cover-image{opacity:1}
.game-card:hover .cover-image,.game-card:focus-visible .cover-image{transform:scale(1.09)}
.cover-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#09081c12 0%,transparent 38%,#090a2460 100%)}
.cover-shine{position:absolute;inset:-65% -135%;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#ffffff00 46%,#ffffff48 49%,#ffffff08 52%,transparent 56%);transform:translateX(-47%);opacity:0}
.game-card:hover .cover-shine,.game-card:focus-visible .cover-shine{animation:mw-cover-sweep .72s ease-out 1}
.game-card .game-title-row span{transition:transform .28s,color .28s}
.game-card:hover .game-title-row span,.game-card:focus-visible .game-title-row span{transform:translate(3px,-3px);color:#fff}
.game-card:hover .game-title-row h3,.game-card:focus-visible .game-title-row h3{text-shadow:0 0 12px #dcff9c29}
.game-card .game-bottom em{transition:color .25s,text-shadow .25s}
.game-card:hover .game-bottom em{color:#eaffc1;text-shadow:0 0 13px #d4ff8699}
.cover-fx{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.cover-fx i{position:absolute;display:grid;place-items:center;font-family:system-ui,sans-serif;font-style:normal;font-weight:900;font-size:19px;line-height:1;will-change:transform,opacity;filter:drop-shadow(0 1px 4px #0008);opacity:.8}
.game-card:hover .cover-fx i,.game-card:focus-visible .cover-fx i{opacity:1;animation-duration:1.3s}
/* Common subtle breathing of thumbnails, different phase per card. */
.cover-image.motion-alive{animation:mw-cover-breathe 11s ease-in-out infinite alternate}
.game-card:hover .cover-image.motion-alive{animation:none}
/* 01 Office drama - pressure marks shiver, then retreat. */
.game-card[data-motion="office"] .cover-fx i{color:#ffd9e8;background:#583956ac;border:1px solid #fff7;border-radius:9px;padding:5px 6px}
.game-card[data-motion="office"] .cover-fx i:nth-child(1){right:8%;top:11%;animation:mw-anxious 4.2s ease-in-out infinite}
.game-card[data-motion="office"] .cover-fx i:nth-child(2){right:20%;bottom:14%;font-size:27px;animation:mw-wiggle 3.5s ease-in-out infinite reverse}
.game-card[data-motion="office"] .cover-fx i:nth-child(3){left:5%;top:14%;font-size:13px;animation:mw-anxious 5s ease-in-out infinite .7s}
/* 02 Miscommunication - three colorful message bubbles drift independently. */
.game-card[data-motion="talk"] .cover-fx i{border:1px solid #ffffffaa;border-radius:11px;background:#5965b3d6;color:white;padding:5px 9px;font-size:18px;box-shadow:0 4px 12px #1314305e}
.game-card[data-motion="talk"] .cover-fx i:nth-child(1){top:8%;left:6%;animation:mw-float 3.1s ease-in-out infinite}
.game-card[data-motion="talk"] .cover-fx i:nth-child(2){right:8%;top:14%;background:#ff85b3d9;animation:mw-float 3.8s ease-in-out infinite -1s}
.game-card[data-motion="talk"] .cover-fx i:nth-child(3){bottom:8%;right:19%;font-size:15px;background:#91a6eecc;animation:mw-float 4.7s ease-in-out infinite -2s}
/* 03 PACE - calm light with a slight uncanny glitch when approached. */
.game-card[data-motion="pace"] .cover-fx{background:linear-gradient(180deg,transparent 48%,#adbbff12 50%,transparent 52%);animation:mw-night-breathe 6.5s ease-in-out infinite}
.game-card[data-motion="pace"] .cover-fx i{color:#c5fff3;text-shadow:0 0 10px #7effd4}
.game-card[data-motion="pace"] .cover-fx i:nth-child(1){right:15%;top:50%;animation:mw-soft-blink 4s steps(1) infinite}
.game-card[data-motion="pace"] .cover-fx i:nth-child(2){left:11%;bottom:19%;font-size:24px;animation:mw-soft-blink 5.3s ease-in-out infinite}
.game-card[data-motion="pace"] .cover-fx i:nth-child(3){right:40%;top:18%;animation:mw-soft-blink 6s ease-in-out infinite -2s}
/* 04 Circuit - current races from power source to bulb. */
.game-card[data-motion="circuit"] .cover-fx i{color:#fff4a0;text-shadow:0 0 8px #ffd741,0 0 17px #ffb900}
.game-card[data-motion="circuit"] .cover-fx i:nth-child(1){left:14%;top:30%;font-size:30px;animation:mw-electric 2.7s ease-in-out infinite}
.game-card[data-motion="circuit"] .cover-fx i:nth-child(2){left:47%;bottom:29%;font-size:12px;animation:mw-trace 2.7s linear infinite .65s}
.game-card[data-motion="circuit"] .cover-fx i:nth-child(3){right:11%;top:14%;font-size:26px;animation:mw-wiggle 4s ease-in-out infinite}
/* 05 Sprint - digits slide, countdown gently pulses. */
.game-card[data-motion="sprint"] .cover-fx i{color:white;background:#164b9f99;border:1px solid #c7ffffa9;padding:5px 7px;border-radius:7px}
.game-card[data-motion="sprint"] .cover-fx i:nth-child(1){left:7%;top:18%;animation:mw-float 2.2s ease-in-out infinite}
.game-card[data-motion="sprint"] .cover-fx i:nth-child(2){right:8%;top:34%;color:#ffe7ac;animation:mw-speed 3.5s ease-in-out infinite}
.game-card[data-motion="sprint"] .cover-fx i:nth-child(3){right:28%;bottom:5%;animation:mw-speed 2.8s ease-in-out infinite -1s}
/* 06 Code Lock - digits tick into position. */
.game-card[data-motion="code"] .cover-fx i{color:#fef0af;background:#1f1b16bb;border:1px solid #f0c87c91;padding:7px 9px;border-radius:5px;font-family:monospace}
.game-card[data-motion="code"] .cover-fx i:nth-child(1){left:10%;bottom:10%;animation:mw-dial 4.2s steps(1) infinite}
.game-card[data-motion="code"] .cover-fx i:nth-child(2){left:23%;bottom:10%;animation:mw-dial 4.2s steps(1) infinite .19s}
.game-card[data-motion="code"] .cover-fx i:nth-child(3){left:36%;bottom:10%;animation:mw-dial 4.2s steps(1) infinite .38s}
/* 07 Flip Lab - tiles illuminate sequentially. */
.game-card[data-motion="flip"] .cover-fx i{color:#ffeeb0;background:#fff5ab21;border:1px solid #ffe2846b;border-radius:5px;padding:6px;font-size:21px}
.game-card[data-motion="flip"] .cover-fx i:nth-child(1){bottom:9%;left:9%;animation:mw-tile 3s steps(1) infinite}
.game-card[data-motion="flip"] .cover-fx i:nth-child(2){bottom:9%;left:21%;animation:mw-tile 3s steps(1) infinite 1s}
.game-card[data-motion="flip"] .cover-fx i:nth-child(3){right:12%;top:19%;animation:mw-wiggle 3s ease-in-out infinite}
/* 08 Route Zero - path arrow runs towards target. */
.game-card[data-motion="route"] .cover-fx i{color:#e4ffa8;background:#2d5d67cc;border-radius:99px;padding:6px 8px;font-size:17px}
.game-card[data-motion="route"] .cover-fx i:nth-child(1){left:8%;bottom:17%;animation:mw-soft-blink 3.1s ease-in-out infinite}
.game-card[data-motion="route"] .cover-fx i:nth-child(2){left:43%;bottom:27%;color:#ffef9c;animation:mw-path 2.4s ease-in-out infinite}
.game-card[data-motion="route"] .cover-fx i:nth-child(3){right:9%;bottom:12%;background:#d95b6ee0;color:white;animation:mw-soft-blink 3.1s ease-in-out infinite -1.2s}
/* 09 Orbit Sync - a circular orbit and satellites rotate over the art. */
.game-card[data-motion="orbit"] .cover-fx:before{content:"";position:absolute;width:90px;height:90px;border:1px dashed #c3f6ffac;border-radius:50%;right:10%;bottom:10%;box-shadow:0 0 13px #66dff767;animation:mw-orbit 8s linear infinite}
.game-card[data-motion="orbit"] .cover-fx i{color:#dffeff;text-shadow:0 0 12px #00e8ff}
.game-card[data-motion="orbit"] .cover-fx i:nth-child(1){right:11%;bottom:18%;animation:mw-orbit 7s linear infinite}
.game-card[data-motion="orbit"] .cover-fx i:nth-child(2){right:24%;bottom:8%;animation:mw-orbit 8s linear infinite reverse}
.game-card[data-motion="orbit"] .cover-fx i:nth-child(3){left:10%;top:14%;font-size:28px;animation:mw-soft-blink 3s ease-in-out infinite}
/* 10 Color Echo - four pads blink in a repeating rhythm. */
.game-card[data-motion="echo"] .cover-fx i{font-size:25px;text-shadow:0 0 10px currentColor,0 0 20px currentColor;opacity:.32}
.game-card[data-motion="echo"] .cover-fx i:nth-child(1){right:28%;bottom:11%;color:#ff88d8;animation:mw-echo 3.2s steps(1) infinite}
.game-card[data-motion="echo"] .cover-fx i:nth-child(2){right:16%;bottom:11%;color:#7fe9ff;animation:mw-echo 3.2s steps(1) infinite .8s}
.game-card[data-motion="echo"] .cover-fx i:nth-child(3){right:4%;bottom:11%;color:#ffea8a;animation:mw-echo 3.2s steps(1) infinite 1.6s}
/* 11 Shogi - critical move arrow, king threatened. */
.game-card[data-motion="shogi"] .cover-fx i{color:#ffb3a4;text-shadow:0 0 10px #ff5539,0 0 22px #c32b3f}
.game-card[data-motion="shogi"] .cover-fx i:nth-child(1){right:15%;bottom:15%;font-size:25px;animation:mw-threat 3.9s ease-in-out infinite}
.game-card[data-motion="shogi"] .cover-fx i:nth-child(2){right:37%;bottom:31%;font-size:28px;animation:mw-path 3.9s ease-in-out infinite -.7s}
.game-card[data-motion="shogi"] .cover-fx i:nth-child(3){left:10%;top:10%;font-size:20px;animation:mw-soft-blink 4.4s ease-in-out infinite}
/* 12 Hanarashi - pink petals sway and fall around the bullet bloom. */
.game-card[data-motion="sakura"] .cover-fx i{color:#ffb3ec;text-shadow:0 0 8px #ff68d3,0 0 19px #ff6aca;font-size:25px}
.game-card[data-motion="sakura"] .cover-fx i:nth-child(1){left:12%;top:4%;animation:mw-sakura 5.8s ease-in-out infinite}
.game-card[data-motion="sakura"] .cover-fx i:nth-child(2){right:12%;top:6%;animation:mw-sakura 7s ease-in-out infinite -2.1s}
.game-card[data-motion="sakura"] .cover-fx i:nth-child(3){left:43%;top:24%;font-size:14px;animation:mw-sakura 6s ease-in-out infinite -3s}
/* Motion primitives: movement comes from cheap opacity / transform paths. */
@keyframes mw-cover-sweep{0%{transform:translateX(-46%);opacity:0}24%{opacity:.8}100%{transform:translateX(46%);opacity:0}}
@keyframes mw-cover-breathe{0%{transform:scale(1.015) translateY(0)}100%{transform:scale(1.05) translateY(-3px)}}
@keyframes mw-float{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(4px,-10px,0) rotate(5deg)}}
@keyframes mw-anxious{0%,68%,100%{transform:translate(0,0) rotate(0)}70%,75%{transform:translate(2px,-2px) rotate(7deg)}72%,78%{transform:translate(-2px,1px) rotate(-8deg)}}
@keyframes mw-wiggle{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(15deg) scale(1.16)}}
@keyframes mw-soft-blink{0%,100%{opacity:.25;transform:scale(.9)}45%,55%{opacity:1;transform:scale(1.18)}}
@keyframes mw-night-breathe{0%,100%{opacity:.35}40%{opacity:.85}70%{opacity:.25}}
@keyframes mw-electric{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.22)}}
@keyframes mw-trace{0%{opacity:0;transform:translateX(-24px)}45%{opacity:1}100%{opacity:0;transform:translateX(54px)}}
@keyframes mw-speed{0%,100%{transform:translateX(-8px) rotate(-8deg);opacity:.45}50%{transform:translateX(10px) rotate(12deg);opacity:1}}
@keyframes mw-dial{0%,10%,78%,100%{transform:translateY(0)}12%,16%{transform:translateY(5px)}18%,24%{transform:translateY(0)}26%,30%{transform:translateY(-4px)}}
@keyframes mw-tile{0%,25%,80%,100%{transform:scale(.88);opacity:.3}28%,44%{transform:scale(1.16);opacity:1}}
@keyframes mw-path{0%,100%{transform:translate(-12px,8px);opacity:0}45%{transform:translate(8px,-7px);opacity:1}65%{transform:translate(23px,-12px);opacity:0}}
@keyframes mw-orbit{to{transform:rotate(360deg)}}
@keyframes mw-echo{0%,22%,100%{opacity:.18;transform:scale(.85)}3%,14%{opacity:1;transform:scale(1.3)}}
@keyframes mw-threat{0%,100%{opacity:.4;transform:scale(.9)}48%{opacity:1;transform:scale(1.22)}}
@keyframes mw-sakura{0%{transform:translate(-8px,-20px) rotate(-28deg);opacity:0}15%{opacity:1}70%{opacity:.95}100%{transform:translate(29px,115px) rotate(75deg);opacity:0}}
/* Pause animations outside the viewport and honor motion sensitivity. */
.motion-paused .cover-fx,.motion-paused .cover-fx:before,.motion-paused .cover-fx i,.motion-paused .cover-image{animation-play-state:paused!important}
@media(max-width:850px){.game-card .game-art{height:180px}}
@media(max-width:580px){.game-card .game-art{height:112px}.cover-fx i{font-size:12px!important;padding:3px!important}.game-card[data-motion="orbit"] .cover-fx:before{width:44px;height:44px}.game-card[data-motion="sakura"] .cover-fx i:nth-child(3){display:none}.game-card:hover .cover-image{transform:scale(1.04)}}
@media(pointer:coarse){.cover-image.motion-alive{animation:none}.game-card .cover-fx i{animation-duration:6s!important}.game-card:hover .cover-shine{animation:none}}
@media(prefers-reduced-motion:reduce){.game-card,.cover-image,.game-card .game-title-row span{transition:none!important}.cover-image,.cover-fx,.cover-fx:before,.cover-fx i,.cover-shine{animation:none!important}.cover-fx i{opacity:.55}.game-card:hover{transform:none}}