.memory-game{overflow:hidden}.memory-toolbar{flex-wrap:wrap;align-items:center;gap:1rem;margin:1.5rem 0;display:flex}.memory-score{font-variant-numeric:tabular-nums;margin-left:auto;font-size:.875rem;font-weight:600}.memory-score-won{color:var(--color-success)}.memory-table{color:#f3eddb;background-color:#133f3b;background-image:radial-gradient(at 50% 0,#32675a80,#0000 75%),repeating-linear-gradient(45deg,#ffffff03 0 1px,#0000 1px 4px);border:1px solid #687c68;border-radius:1rem;padding:1.25rem 2rem 1rem;box-shadow:inset 0 0 50px #061d2750,0 8px 24px #00000012}.memory-table-heading,.memory-table-footer{letter-spacing:.18em;color:#d4d9bb;justify-content:space-between;align-items:center;font:600 .625rem/1.5 system-ui,sans-serif;display:flex}.memory-progress{gap:.4rem;display:flex}.memory-progress i{border:1px solid #a1b8a6;border-radius:50%;width:.4rem;height:.4rem;transition:background .2s}.memory-progress i.is-complete{background:#e7c889;border-color:#e7c889}.memory-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;max-width:34rem;margin:1.5rem auto;display:grid}.memory-card{aspect-ratio:3/4;perspective:900px;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:.625rem;width:100%;padding:0;display:block;position:relative}.memory-card:disabled{cursor:default}.memory-card:focus-visible{outline-offset:4px;outline:3px solid #f5d58b}.memory-card-inner{transform-style:preserve-3d;border-radius:inherit;transition:transform .35s;display:block;position:absolute;inset:0;box-shadow:0 4px 7px #061b2b55}.memory-card.is-revealed .memory-card-inner{transform:rotateY(180deg)}.memory-card-back,.memory-card-front{border-radius:inherit;backface-visibility:hidden;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.memory-card-back{outline-offset:-1px;color:#f3dcad;background-color:#263b66;background-image:repeating-linear-gradient(45deg,#0000 0 8px,#d8c39b2e 8px 9px,#0000 9px 16px),repeating-linear-gradient(-45deg,#0000 0 8px,#d8c39b2e 8px 9px,#0000 9px 16px);border:4px solid #efeadb;outline:1px solid #d7cfbc;flex-direction:column;gap:.6rem}.memory-card-back:after{content:"";border:1px solid #d8c39b80;border-radius:3px;position:absolute;inset:5px}.memory-card-medallion{background:#263b66;border:1px solid #d8c39b;border-radius:50%;place-items:center;width:2.5rem;height:2.5rem;font:italic 1.5rem Georgia,serif;display:grid;box-shadow:0 0 0 4px #263b66,0 0 0 5px #d8c39b70}.memory-card-back-label{letter-spacing:.15em;background:#263b66;padding:.15rem .3rem;font:600 .5rem system-ui,sans-serif}.memory-card-front{color:#203248;background:#fffdf7;border:1px solid #d9d4c8;transform:rotateY(180deg)}.memory-card.is-red .memory-card-front{color:#b73348}.memory-card-corner{justify-items:center;font:700 1.15rem/1 Georgia,serif;display:grid;position:absolute;top:.45rem;left:.55rem}.memory-card-corner small{margin-top:.15rem;font-size:.85rem}.memory-card-corner-bottom{inset:auto .55rem .45rem auto;transform:rotate(180deg)}.memory-card-suit{font:3.5rem/1 Georgia,serif}.memory-card.is-matched .memory-card-inner{box-shadow:0 0 0 2px #c4d7a3,0 4px 7px #061b2b55}.memory-card-check{color:#35643c;background:#e6efd8;border-radius:50%;place-items:center;width:1rem;height:1rem;font:700 .65rem system-ui,sans-serif;display:grid;position:absolute;top:.4rem;right:.4rem}.memory-table-footer{justify-content:center;font-size:.55rem}.memory-ready{text-align:center;justify-items:center;padding:2.25rem 0;display:grid}.memory-ready p{margin-top:1.5rem;font:1.5rem/1.4 Georgia,serif}.memory-ready>span{color:#c4d4c9;margin-top:.5rem;font-size:.8rem}.memory-preview{justify-content:center;width:13rem;height:8rem;display:flex;position:relative}.memory-preview span{border:3px solid #eee5d1;border-radius:.5rem;place-items:center;width:5.5rem;height:7.5rem;font:2.5rem Georgia,serif;display:grid;position:absolute;box-shadow:0 5px 12px #061b2b60}.memory-preview span:first-child{color:#203248;background:#fffdf7;transform:translate(-2.8rem)rotate(-17deg)}.memory-preview span:nth-child(2){z-index:1;color:#f3dcad;background:repeating-linear-gradient(45deg,#263b66 0 8px,#415075 8px 9px);transform:translateY(-.5rem)}.memory-preview span:last-child{color:#b73348;background:#fffdf7;transform:translate(2.8rem)rotate(17deg)}.memory-example-board{background:#133f3b;border-radius:.5rem;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-top:1rem;padding:.75rem;display:grid}.memory-example-position{color:#d4d9bb;justify-items:center;gap:.4rem;font:.65rem system-ui,sans-serif;display:grid}.memory-example-card{aspect-ratio:3/4;color:#f3dcad;background:repeating-linear-gradient(45deg,#263b66 0 8px,#415075 8px 9px);border:2px solid #efe5d1;border-radius:.3rem;place-items:center;width:100%;font:1.2rem Georgia,serif;display:grid}.memory-example-card.is-face-up{color:#203248;background:#fffdf7}.memory-example-card.is-red{color:#b73348}.memory-example-card.is-matched{box-shadow:0 0 0 2px #c4d7a3}@media (hover:hover){.memory-card:not(:disabled):not(.is-revealed):hover .memory-card-inner{transform:translateY(-4px)rotate(-1deg);box-shadow:0 8px 12px #061b2b70}}@media (width<=639px){.memory-table{padding:1rem .75rem}.memory-grid{gap:.6rem;margin:1.25rem auto}.memory-score{margin-left:0}.memory-card-back{border-width:3px;gap:.4rem}.memory-card-medallion{width:1.6rem;height:1.6rem;font-size:1rem}.memory-card-back-label{font-size:.35rem}.memory-card-corner{font-size:.9rem;top:.3rem;left:.3rem}.memory-card-corner small{font-size:.65rem}.memory-card-corner-bottom{inset:auto .3rem .3rem auto}.memory-card-suit{font-size:2rem}.memory-card-check{width:.75rem;height:.75rem;font-size:.5rem;top:.25rem;right:.25rem}}@media (prefers-reduced-motion:reduce){.memory-card-inner,.memory-progress i{transition:none}.memory-card:not(:disabled):not(.is-revealed):hover .memory-card-inner{transform:none}}
