.ob-br-wrap{position:relative;width:100%;max-width:440px}
.ob-br-wrap canvas{width:100%;height:auto;aspect-ratio:440/340;display:block;border-radius:12px}
.ob-br-hud{display:flex;gap:6px;justify-content:center;margin:12px 0}
.ob-br-life{width:8px;height:8px;background:#607647;border-radius:50%}.ob-br-life-lost{background:#173b3122}
.ob-br-controls{display:flex;justify-content:center;gap:8px}
.ob-br-ctl,.ob-mg-btn{font-family:inherit;font-size:12px;font-weight:600;color:#173b31;min-height:44px;min-width:48px;background:#f9f7f0;border:1px solid #173b3133;border-radius:10px;padding:10px 16px;cursor:pointer;touch-action:none}
.ob-br-ctl-wide{min-width:80px}.ob-br-ctl:active,.ob-mg-btn:active{background:#d4e293}
.ob-br-ctl:focus-visible,.ob-mg-btn:focus-visible{outline:2px solid #d6803d;outline-offset:2px}
.ob-mg-wrap{position:relative;width:100%;max-width:390px}
.ob-mg-stats{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px;font-size:10px;color:#718065}
.ob-mg-stat b{color:#173b31;font-variant-numeric:tabular-nums;margin-left:3px}
.ob-mg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ob-mg-card{position:relative;aspect-ratio:1;border:1px solid #173b3120;border-radius:12px;background:#e4e9d6;cursor:pointer;display:grid;place-items:center;min-width:0;padding:8px;transition:background .18s,transform .18s,box-shadow .18s;box-shadow:0 2px 0 #173b3114}
.ob-mg-card::before{content:"";width:12px;height:12px;transform:rotate(45deg);background:#173b3130;box-shadow:4px 4px 0 #173b3118;border-radius:2px;position:absolute;transition:opacity .15s}
.ob-mg-card:hover:not(:disabled){transform:translateY(-2px);border-color:#779564}
.ob-mg-card:focus-visible{outline:3px solid #d6803d;outline-offset:2px}
.ob-mg-face{display:grid;place-items:center;width:100%;height:100%;opacity:0;transform:scale(.7);transition:opacity .17s,transform .22s}
.ob-mg-sym{display:block;width:72%;max-width:58px;height:auto}
.ob-mg-card.is-up,.ob-mg-card.is-matched{background:#173b31;border-color:#173b31}
.ob-mg-card.is-up .ob-mg-face,.ob-mg-card.is-matched .ob-mg-face{opacity:1;transform:scale(1)}
.ob-mg-card.is-up::before,.ob-mg-card.is-matched::before{opacity:0}
.ob-mg-card.is-matched{box-shadow:inset 0 0 0 2px #c9d995;opacity:.85;cursor:default}
.ob-mg-card.is-celebrate{animation:ob-match-win .5s ease both}
.ob-mg-tray{display:flex;justify-content:center;gap:8px;margin-top:14px}
.ob-mg-keys,.ob-br-keys{font-size:11px!important}
@keyframes ob-match-win{50%{transform:scale(.94);box-shadow:0 0 0 3px #d4e293}}
@media(max-width:520px){.ob-mg-grid{gap:6px}.ob-mg-card{border-radius:9px}.ob-mg-stats{font-size:9px}.ob-br-ctl{min-width:56px}}
@media(prefers-reduced-motion:reduce){.ob-mg-card,.ob-mg-face,.ob-mg-card::before{animation:none!important;transition:none!important}}