*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}body{background-image:radial-gradient(70% 55% at 20% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),radial-gradient(60% 50% at 100% 100%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%);background-attachment:fixed}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.game{width:min(92vw,460px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.title{font-size:clamp(34px,10vw,52px);font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(160deg,color-mix(in srgb,var(--text) 92%,var(--accent)),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.diff{display:flex;gap:6px}.chip{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700;cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease}.chip:hover{border-color:var(--accent);transform:translateY(-1px)}.chip.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 40%,transparent)}.stats{display:flex;gap:8px}.stat{flex:1;background:linear-gradient(180deg,color-mix(in srgb,#ffffff 8%,var(--board-bg)),var(--board-bg));color:var(--accent-text);border-radius:10px;padding:8px 10px;text-align:center;min-width:0;box-shadow:inset 0 1px color-mix(in srgb,#ffffff 18%,transparent),0 2px 8px color-mix(in srgb,var(--board-bg) 45%,transparent)}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.stat .value{font-size:20px;font-weight:800;line-height:1.1;white-space:nowrap}.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.how{font-size:13px;opacity:.85;flex:1}.how b{font-weight:700}.btn{background:linear-gradient(180deg,color-mix(in srgb,#ffffff 12%,var(--accent)),var(--accent));color:var(--accent-text);border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent);transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent)}.btn:active{filter:brightness(.96);transform:translateY(0)}.board{position:relative;background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,#ffffff 10%,var(--board-bg)),var(--board-bg));border-radius:14px;padding:clamp(10px,3vw,14px);box-shadow:inset 0 1px color-mix(in srgb,#ffffff 14%,transparent),inset 0 0 0 1px color-mix(in srgb,#000000 8%,transparent),0 10px 30px color-mix(in srgb,var(--board-bg) 40%,transparent)}.deck{display:grid;grid-template-columns:repeat(var(--cols, 4),1fr);gap:clamp(6px,2vw,10px);--card-radius: 12px;--back-base: color-mix(in srgb, var(--accent) 20%, var(--surface));--back-deep: color-mix(in srgb, var(--accent) 46%, var(--board-bg));--back-motif: color-mix(in srgb, var(--accent) 62%, var(--surface));--back-line: color-mix(in srgb, var(--accent) 34%, transparent);--frame-hi: color-mix(in srgb, #ffffff 42%, transparent);--frame-lo: color-mix(in srgb, #000000 16%, transparent);--match-glow: #4caf7d}.card{aspect-ratio:1 / 1;border:none;background:transparent;padding:0;cursor:pointer;perspective:700px;-webkit-tap-highlight-color:transparent}.card:disabled{cursor:default}.card.cursor{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--card-radius);z-index:2}.inner{position:relative;display:block;width:100%;height:100%;transition:transform .42s cubic-bezier(.2,.85,.3,1.2);transform-style:preserve-3d;will-change:transform}.card.flipped .inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--card-radius);backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:clamp(24px,9vw,44px);line-height:1;user-select:none;overflow:hidden}.deck[data-diff=hard] .face{font-size:clamp(16px,6vw,30px)}.deck[data-diff=hard]{--card-radius: 10px}.face.back{background-color:var(--back-base);background-image:repeating-linear-gradient(45deg,var(--back-line) 0,var(--back-line) 1.5px,transparent 1.5px,transparent clamp(9px,3.2vw,15px)),repeating-linear-gradient(-45deg,var(--back-line) 0,var(--back-line) 1.5px,transparent 1.5px,transparent clamp(9px,3.2vw,15px)),radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,#ffffff 16%,transparent),transparent 55%),linear-gradient(160deg,var(--back-base),var(--back-deep));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--back-deep) 70%,transparent),inset 0 0 0 3.5px var(--frame-hi),inset 0 -6px 14px color-mix(in srgb,#000000 14%,transparent),inset 0 6px 12px color-mix(in srgb,#ffffff 12%,transparent);transition:filter .16s ease,box-shadow .2s ease}.face.back:after{content:"✦";font-size:clamp(20px,7vw,34px);font-weight:700;color:var(--back-motif);text-shadow:0 1px 0 color-mix(in srgb,#ffffff 30%,transparent),0 0 12px color-mix(in srgb,var(--back-motif) 45%,transparent);opacity:.9}.face.front{background:radial-gradient(70% 70% at 50% 30%,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));transform:rotateY(180deg);box-shadow:inset 0 0 0 1.5px var(--line),inset 0 0 0 6px color-mix(in srgb,var(--accent) 6%,transparent),inset 0 2px 6px color-mix(in srgb,#ffffff 20%,transparent)}.card:not(.flipped):not(:disabled):hover .face.back{filter:brightness(1.06) saturate(1.05);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--back-deep) 70%,transparent),inset 0 0 0 3.5px var(--frame-hi),inset 0 -6px 14px color-mix(in srgb,#000000 14%,transparent),0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}.card:not(.flipped):active .inner{transform:scale(.95)}.card.matched .face.front{background:radial-gradient(75% 75% at 50% 32%,color-mix(in srgb,var(--match-glow) 26%,var(--surface)),color-mix(in srgb,var(--match-glow) 12%,var(--surface)));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--match-glow) 70%,transparent),inset 0 0 14px color-mix(in srgb,var(--match-glow) 24%,transparent),0 0 0 1px color-mix(in srgb,var(--match-glow) 40%,transparent),0 0 18px color-mix(in srgb,var(--match-glow) 40%,transparent);animation:matched .52s cubic-bezier(.2,.8,.2,1)}@keyframes matched{0%{transform:rotateY(180deg) scale(1)}35%{transform:rotateY(180deg) scale(1.14)}60%{transform:rotateY(180deg) scale(.97)}to{transform:rotateY(180deg) scale(1)}}.overlay{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:var(--overlay-bg);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .26s ease}.overlay.show{opacity:1;pointer-events:auto}.overlay.win:before{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--match-glow) 55%,#ffffff) 50%,transparent 58%);opacity:.5;mix-blend-mode:screen;animation:winSweep 2.4s ease-in-out infinite;pointer-events:none}@keyframes winSweep{0%{transform:translate(-70%) rotate(4deg)}to{transform:translate(70%) rotate(4deg)}}.overlay .msg{position:relative;font-size:clamp(24px,8vw,38px);font-weight:800}.overlay.win .msg{background:linear-gradient(100deg,var(--match-glow),color-mix(in srgb,var(--match-glow) 40%,var(--accent)),var(--match-glow));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:winText 2.4s ease-in-out infinite}@keyframes winText{0%,to{background-position:0% 0}50%{background-position:100% 0}}.overlay .sub{position:relative;font-size:15px;font-weight:700;opacity:.9}.overlay .actions{position:relative;display:flex;gap:10px;margin-top:4px}@media(prefers-reduced-motion:reduce){.inner{transition:transform .2s ease}.card.matched .face.front,.overlay.win:before,.overlay.win .msg{animation:none}}