.gwrap{max-width:900px;margin:0 auto;padding:16px;font-family:Arial,sans-serif;text-align:center}
.ghead{color:#1d2b5a}.ghint{font-size:24px;margin:8px 0 14px}
.ghub{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.gcard{background:#fff;border:4px solid #ffd84d;border-radius:20px;padding:18px;text-decoration:none;color:#2b2140;box-shadow:0 4px 0 #e0b800}
.gcard .ico{font-size:64px}.gcard h2{margin:6px 0}.gcard .btn{display:inline-block;margin-top:8px;padding:12px 28px;font-size:22px;background:#1d2b5a;color:#fff;border-radius:30px}
.gbar{display:flex;align-items:center;justify-content:space-between;gap:10px}.gbar h1{margin:0;color:#1d2b5a;font-size:28px}
.gback,.gmute{font-size:30px;min-width:64px;min-height:64px;border-radius:50%;border:none;background:#ffd84d;color:#1d2b5a;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
#stage{touch-action:none;user-select:none}#stage canvas{width:100%;max-width:820px;border-radius:18px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.15);touch-action:none}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px;margin:0 auto}
.mcard{aspect-ratio:1;font-size:clamp(36px,10vw,64px);border:none;border-radius:16px;background:#1d2b5a;color:transparent;cursor:pointer;min-height:72px}
.mcard.up,.mcard.done{background:#fff8d6;color:inherit;box-shadow:inset 0 0 0 4px #ffd84d}.mcard.done{opacity:.75}
.mcard.back::after{content:"\2753";color:#ffd84d}.mcard.up::after,.mcard.done::after{content:none}
.pal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}.pal button{width:60px;height:60px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px #999;cursor:pointer}.pal button.on{box-shadow:0 0 0 5px #1d2b5a}
.again{font-size:24px;padding:14px 32px;border:none;border-radius:30px;background:#1d2b5a;color:#fff;margin-top:14px;cursor:pointer}
.cheer{font-size:40px;min-height:56px;margin-top:10px;color:#e07b00;font-weight:bold}