:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--background-color: #22272a;--card-color: #0d0d0d;--card-flipped-color: #1d3747;--button-color: #0d0d0d;--text-color: #ffffff;--toggle-button-color: #22272a;background-color:var(--background-color);color:var(--text-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .5s ease,color .5s ease}:root[data-theme=light]{--background-color: #ecf6ff;--card-color: #b6ddef;--card-flipped-color: #70b5d4;--button-color: #cde3ef;--text-color: #22272a;--toggle-button-color: #70b5d4}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100%}#root{max-width:1280px;margin:0 auto}h1{display:flex}.main-container{display:flex;width:100%;height:100%;align-items:center;flex-direction:column}.playfield{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px}.restart-button{width:min(340px,70vw);margin:22px auto 32px;padding:12px 18px;text-align:center;font-weight:800;color:var(--text-color);border-radius:14px;background:var(--button-color);border:none;cursor:pointer;box-shadow:0 10px 28px #22d3ee38;transition:filter .2s ease,transform .06s ease}.restart-button:hover{filter:brightness(1.77)}.restart-button:active{transform:translateY(1px) scale(.99)}.restart-button:focus-visible{outline:3px solid rgba(124,92,255,.55);outline-offset:3px}.main-text{color:var(--text-color)}.card{width:100px;height:100px;perspective:1200px}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease;border-radius:20px}.card.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden}.card-front{background:var(--card-color)}.card-back{background:var(--card-flipped-color);transform:rotateY(180deg)}.card-back.matched{transition-delay:.1s;background:#597a54;box-shadow:0 0 10px #0aa3d699,0 0 20px #0aa3d666,0 0 40px #0aa3d633}.stats{display:flex;flex-direction:row;width:400px;height:100px;justify-content:space-evenly;align-items:center}.box{display:flex;width:100px;height:80px;border-radius:10px;justify-content:center;align-items:center;text-align:center;color:var(--text-color);background-color:var(--button-color)}.hud{display:flex;flex-direction:column;justify-content:center;align-items:center}:root{--track-width: 100px;--track-height: 40px;--track-padding: 4px;--knob-size: 32px;--track-bg: var(--card-color);--knob-bg: var(--toggle-button-color)}.toggle-container{position:fixed;right:20px;top:20px;display:flex;align-items:center;width:var(--track-width);height:var(--track-height);padding:var(--track-padding);border-radius:40px;background:var(--track-bg);box-sizing:border-box;transition:background .3s ease}.theme-toggle{width:var(--knob-size);height:var(--knob-size);border-radius:50%;border:1px solid var(--border);background:var(--knob-bg);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 12px #0000002e;transition:transform .3s ease,background .3s ease;transform:translate(0);font-size:20px}.toggle-container.light .theme-toggle{transform:translate(calc(var(--track-width) - var(--knob-size) - var(--track-padding) * 2))}.theme-toggle:hover{filter:brightness(1.1)}.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){.toggle-container,.theme-toggle{transition:none!important}}.win-modal{position:fixed;inset:0;z-index:9999;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center}.win-button{width:200px;height:40px;border-radius:80px;border-width:0px;background-color:var(--button-color)}.win-button:hover{background-color:var(--card-color)}.win-text{display:flex;width:300px;height:200px;background-color:var(--background-color);flex-direction:column;justify-content:center;align-items:center;border-radius:20px;animation:jump 1s cubic-bezier(.28,.84,.42,1) infinite;will-change:transform}.win-text:hover{animation:none}@keyframes jump{0%{transform:translateY(0)}20%{transform:translateY(0)}40%{transform:translateY(-18px)}60%{transform:translateY(0)}75%{transform:translateY(-6px)}90%{transform:translateY(0)}to{transform:translateY(0)}}h1{font-size:40px}