.memory { max-width: 560px; margin: 0 auto; display: grid; gap: 12px; }
.memory { position: relative; }
.mbar { display: flex; align-items: center; gap: 12px; padding: 2px 2px 0; } .mbar b { font-size: 18px; color: #3C2F2F; } .mbar .mcount { color: #6b5a48; font-size: 14px; } .mbar .mcount span { font-weight: bold; color: #3C2F2F; }
.mabandon { margin: 0 0 0 auto; } .mabandon button { border: 0; background: #e6e3df; color: #6b5a48; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; }
.mabandon button.armed { width: auto; border-radius: 14px; padding: 0 10px; }
h1 .mtitle { font-size: 60%; font-weight: normal; color: #6b5a48; margin-left: 10px; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 600px) { .memory { max-width: 420px; } .mgrid { grid-template-columns: repeat(3, 1fr); } }
.mtile { position: relative; padding-top: 140%; perspective: 800px; cursor: pointer; }
.mcard { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s; }
.mtile.up .mcard { transform: rotateY(180deg); }
.mback, .mface { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 8px; overflow: hidden; box-shadow: 3px 4px 9px rgba(0,0,0,.25); background: #fff; }
.mback img, .mface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mface { transform: rotateY(180deg); }
.mtile.matched { visibility: hidden; opacity: 0; transition: opacity .5s; }
.mtile.matched .mcard { transform: rotateY(180deg); }
.mnew .mset { margin-right: 10px; font-size: 14px; } .mnew .mset select { padding: 5px 8px; border-radius: 8px; border: 1px solid #cbbfae; background: #fff; max-width: 260px; }
.mbtn { border: 0; border-radius: 16px; padding: 6px 14px; font-weight: bold; background: #1f7a2e; color: #fff; cursor: pointer; }
.mboards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.board.mboard { margin: 0; } .board.mboard h3 small { text-transform: none; letter-spacing: 0; margin-left: 6px; } .board.mboard tr.me td { background: #fff7d6; } .board.mboard td { padding: 4px 6px; border-bottom: 1px solid #f1ede6; } .board.mboard td.when { color: #8a7a68; font-size: 12px; text-align: right; } .board.mboard i { color: #b26a00; font-style: normal; font-size: 11px; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .mcard { transition: none; } }

.mfinish { text-align: center; padding: 40px 10px 30px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.mfinish .mword { font-size: 22px; margin: 0 0 16px; color: #3C2F2F; } .mfinish .mnew { margin: 0; }
.mfinish .mprize { font-size: 18px; margin: 0 0 14px; color: #1f7a2e; } .mfinish .mprize .mbtn { margin-left: 8px; }