:root{color-scheme:dark;--ink:#f7f4ff;--muted:#aaa9c7;--violet:#aa8cff;--pink:#ff8ebd;--panel:#0f112ec2}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:#080b20;margin:0;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;overflow-x:hidden}body:before{content:"";z-index:-2;filter:saturate(.8);background:linear-gradient(90deg,#07081af2 0%,#07081aa8 48%,#07081ae6 100%),url(/assets/optimized/game-bg.webp) 50% 30%/cover;position:fixed;inset:0}body:after{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 15% 20%,#fffc 0 1px,#0000 1.5px),radial-gradient(circle at 75% 15%,#c1b1ffb3 0 1px,#0000 1.5px),radial-gradient(circle at 60% 70%,#ffffff73 0 1px,#0000 1.5px);background-size:180px 180px,240px 240px,130px 130px;animation:18s linear infinite drift;position:fixed;inset:0}button,select{font:inherit}button{color:inherit}.app{width:min(900px,100% - 32px);margin:0 auto;padding:28px 0 36px}.hero{justify-content:space-between;align-items:end;margin:0 4px 16px;display:flex}.eyebrow{color:#c7baff;letter-spacing:.24em;margin:0 0 8px;font-size:11px;font-weight:700}h1{letter-spacing:-.04em;text-shadow:0 0 30px #b59cff47;margin:0;font-family:Georgia,Songti SC,serif;font-size:clamp(38px,5vw,58px);font-weight:500}.subtitle{color:var(--muted);margin:8px 0 0;font-size:14px}.sound-button{cursor:pointer;backdrop-filter:blur(10px);background:#0e0f2a9e;border:1px solid #ffffff2e;border-radius:50%;width:43px;height:43px;transition:all .2s}.sound-button:hover{border-color:var(--violet);transform:translateY(-2px)}.sound-button[aria-pressed=false]{opacity:.45}.game-shell{background:var(--panel);backdrop-filter:blur(24px);border:1px solid #ffffff24;border-radius:25px;padding:16px 20px;box-shadow:0 32px 90px #00000059}.toolbar{justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px;display:flex}.stats{gap:8px;display:flex}.stats div{border-right:1px solid #ffffff1a;min-width:78px;padding:8px 12px}.stats div:last-child{border:0}.stats span{color:var(--muted);letter-spacing:.12em;font-size:10px;display:block}.stats strong{font-variant-numeric:tabular-nums;margin-top:2px;font-size:20px;display:block}.actions{gap:9px;display:flex}select,.actions button,.modal button{cursor:pointer;background:#ffffff12;border:1px solid #ffffff24;border-radius:11px;outline:none;padding:10px 15px}.actions button,.modal button{background:linear-gradient(135deg,#8e70ea,#d675a9);border:0;font-weight:700;box-shadow:0 8px 24px #975fdc42}.board{grid-template-columns:repeat(var(--columns,4), 1fr);perspective:1000px;gap:10px;width:min(100%,540px);margin-inline:auto;display:grid}.card{aspect-ratio:1;cursor:pointer;perspective:900px;background:0 0;border:0;min-width:0;padding:0}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);display:block;position:relative}.card.is-flipped .card-inner,.card.is-matched .card-inner{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:15px;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.card-back{background:linear-gradient(145deg,#423c82e6,#141842f0);border:1px solid #cbbcff4d;box-shadow:inset 0 0 25px #b797ff24,0 8px 20px #0003}.card-back:before{content:"";border:1px solid #ffffff21;border-radius:10px;position:absolute;inset:8px}.card-back i{color:#d8cbff;text-shadow:0 0 16px #a88aff;font-size:clamp(20px,3vw,36px);font-style:normal}.card-front{color:#242044;background:linear-gradient(155deg,#fbeffff5,#b29fe3eb);border:1px solid #ffffff3d;transform:rotateY(180deg);box-shadow:inset 0 0 35px #ffffff80}.card-front:after{content:"";pointer-events:none;background:radial-gradient(circle at 50% 35%,#ffffff6b,#0000 48%);position:absolute;inset:0}.card-front img{z-index:1;object-fit:contain;filter:drop-shadow(0 5px 7px #3b275833);width:92%;height:92%;display:block}.card.is-matched{cursor:default}.card.is-matched .card-front{animation:.55s matched;box-shadow:0 0 28px #ffa0d573}.card:focus-visible{outline-offset:4px;border-radius:15px;outline:2px solid #fff}.hint{color:var(--muted);text-align:center;margin:11px 0 0;font-size:12px}.hint span{background:var(--pink);width:5px;height:5px;box-shadow:0 0 9px var(--pink);border-radius:50%;margin:0 7px 2px 0;display:inline-block}.modal{z-index:20;backdrop-filter:blur(15px);background:#050614bd;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal[hidden]{display:none}.modal-card{text-align:center;background:linear-gradient(145deg,#242047,#11142f);border:1px solid #fff3;border-radius:24px;width:min(460px,100%);padding:42px 32px;animation:.45s both reveal;box-shadow:0 30px 100px #00000080}.win-star{color:#eadcff;text-shadow:0 0 28px #b592ff;font-size:48px}.modal h2{margin:9px 0;font-family:Georgia,Songti SC,serif;font-size:28px;font-weight:500}.modal p:not(.eyebrow){color:var(--muted)}.modal button{min-width:150px;margin-top:12px}.game-toast{bottom:max(24px, calc(env(safe-area-inset-bottom) + 16px));z-index:30;color:#fff8ed;opacity:0;pointer-events:none;background:#231639f2;border:1px solid #db7d74b3;border-radius:999px;align-items:center;gap:10px;max-width:min(90vw,460px);padding:9px 17px 9px 10px;transition:opacity .18s,transform .22s;display:flex;position:fixed;left:50%;transform:translate(-50%,16px)scale(.96);box-shadow:0 14px 42px #0904166b,0 0 22px #db7d7429}.game-toast.is-visible{opacity:1;transform:translate(-50%)scale(1)}.game-toast img{object-fit:contain;flex:none;width:32px;height:32px}.game-toast span{font-size:12px;line-height:1.4}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@keyframes matched{50%{filter:brightness(1.1);transform:scale(1.07)}}@keyframes reveal{0%{opacity:0;transform:translateY(16px)scale(.96)}}@keyframes drift{to{background-position:180px 90px,-240px 120px,130px -65px}}@media (width<=680px){.app{width:min(100% - 20px,540px);padding:18px 0 28px}.hero{align-items:center}h1{font-size:38px}.subtitle{max-width:280px;line-height:1.6}.game-shell{border-radius:19px;padding:12px}.toolbar{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:10px}.stats{justify-content:center}.stats div{text-align:center;flex:1;min-width:0}.actions>*{flex:1}select,.actions button{width:100%;font-size:12px}.board{gap:7px}.card-face{border-radius:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}