:root{--bg:#08101b;--panel:#111c2b;--panel2:#162437;--text:#f5f7fb;--muted:#91a0b5;--accent:#72e6a0;--gold:#ffd86b;--danger:#ff6d78}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#1d3450 0,#08101b 45%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
body{padding:14px;touch-action:manipulation}
.app{width:min(940px,100%);margin:auto}
header{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.logo{font-size:20px;font-weight:1000;letter-spacing:-.5px}
.version{margin-left:auto;color:#65758c;font-size:9px;font-weight:900;letter-spacing:1px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.stat{background:#101b2a;border:1px solid #24344a;border-radius:12px;padding:9px 10px;text-align:center}
.stat small{display:block;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:1px}
.stat b{display:block;margin-top:2px;font-size:18px}
.progress{height:5px;background:#26364b;border-radius:9px;overflow:hidden;margin-top:6px}.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.game{background:rgba(13,23,37,.88);border:1px solid #24344a;border-radius:20px;padding:14px;box-shadow:0 20px 60px #0008}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.top h1{margin:0;font-size:26px}.top span{color:var(--muted);font-size:12px}
.board{display:grid;gap:9px;margin:0 auto;max-width:650px;width:100%;align-items:stretch}
.card{width:100%;aspect-ratio:1 / 1;min-width:0;min-height:70px;border:0;padding:0;background:transparent;perspective:900px;cursor:pointer;touch-action:manipulation;display:block;position:relative}
.card-inner{display:block;width:100%;height:100%;min-height:70px;position:relative;transition:transform .38s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;overflow:hidden}
.back{background:linear-gradient(145deg,#243b58,#152338);border:1px solid #39516e;box-shadow:inset 0 0 0 2px #ffffff08,0 7px 16px #0005}
.back:after{content:"✦";font-size:25px;color:#7891ae;opacity:.65}
.front{transform:rotateY(180deg);background:linear-gradient(145deg,#f8fbff,#dbe6f3);color:#102033;border:2px solid #fff}
.emoji{font-size:clamp(28px,6vw,52px);filter:drop-shadow(0 5px 4px #0002)}
.card.matched .front{animation:matchPop .55s ease both;box-shadow:0 0 0 2px #72e6a0,0 0 28px #72e6a055}
@keyframes matchPop{0%{transform:rotateY(180deg) scale(1)}35%{transform:rotateY(180deg) scale(1.1)}100%{transform:rotateY(180deg) scale(1)}}
.controls{display:flex;gap:8px;margin-top:13px}.controls button{flex:1;min-height:46px;border:0;border-radius:12px;font-weight:1000;cursor:pointer}.new{background:var(--accent);color:#07120c}.mode{background:#26364b;color:#fff}
.message{text-align:center;min-height:28px;padding:8px;color:#cbd5e3;font-weight:800;font-size:13px}
.combo{color:var(--gold);font-weight:1000;text-align:center;min-height:20px}
.leader{margin-top:14px;background:#0d1725;border:1px solid #24344a;border-radius:15px;padding:12px}.leader h2{font-size:14px;margin:0 0 8px}.leader ol{margin:0;padding-left:26px}.leader li{padding:5px 0;color:#cfd8e5}.leader li b{color:#fff}.lbscore{float:right;color:var(--gold);font-weight:1000}.overlay{position:fixed;inset:0;background:#050a12dd;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50;padding:18px}
.modal{width:min(390px,92vw);background:#111c2b;border:1px solid #34485f;border-radius:22px;padding:25px;text-align:center;box-shadow:0 25px 90px #000b;animation:modalIn .4s ease}.modal h2{font-size:30px;margin:0 0 8px}.final{font-size:42px;font-weight:1000}.modal p{color:var(--muted)}.modal button{width:100%;min-height:48px;border:0;border-radius:12px;margin-top:8px;font-weight:1000}.submit{background:var(--accent)}.again{background:#26364b;color:#fff}
.fx{position:fixed;width:8px;height:14px;border-radius:2px;z-index:100;pointer-events:none;animation:burst .85s cubic-bezier(.15,.75,.25,1) forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) rotate(0) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1);opacity:0}}
.float{position:fixed;z-index:101;pointer-events:none;font-size:28px;font-weight:1000;color:var(--gold);text-shadow:0 3px 12px #000;animation:float .9s ease-out forwards}
@keyframes float{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
@keyframes modalIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:600px){body{padding:8px}.stats{grid-template-columns:repeat(2,1fr)}.game{padding:10px}.board{gap:6px}.top h1{font-size:23px}}

/* v2 mobile card visibility hardening */
.board .card .back{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  min-width:100%;
  min-height:100%;
}
.board .card .front{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
}
@media(max-width:600px){
  .board{gap:7px}
  .card,.card-inner{min-height:64px}
  .back:after{font-size:22px}
}