.mgh-root{ max-width:1100px; margin:18px auto; font-family:Inter, Arial, sans-serif; }
.mgh-app{ background:linear-gradient(180deg,#081220,#071018); border-radius:14px; padding:18px; color:#e6eef6; box-shadow:0 10px 40px rgba(0,0,0,0.6); }
.mgh-header{ display:flex; align-items:center; gap:12px; }
.mgh-logo{ width:56px; height:56px; border-radius:10px; background:linear-gradient(90deg,#3ddc97,#5fb0ff); display:flex; align-items:center; justify-content:center; font-weight:700; color:#042024; }
.mgh-controls{ display:flex; gap:10px; margin-top:12px; }
.mgh-btn{ background:rgba(255,255,255,0.04); border:0; padding:10px 12px; border-radius:10px; color:#cfeff0; cursor:pointer; }
.mgh-btn.primary{ background:linear-gradient(90deg,#3ddc97,#5fb0ff); color:#022; }
#tttBoard{ display:grid; grid-template-columns:repeat(3,120px); gap:10px; }
.tttCell{ background:rgba(255,255,255,0.03); height:120px; display:flex; align-items:center; justify-content:center; font-size:48px; border-radius:12px; cursor:pointer; }
#puzzleGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tile{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)); padding:16px; border-radius:10px; text-align:center; font-size:22px; height:92px; display:flex; align-items:center; justify-content:center; }
.tile.empty{ background:transparent; }
.mgh-leader{ margin-top:12px; }
.mgh-lbItem{ padding:8px; background:rgba(255,255,255,0.02); margin-bottom:6px; border-radius:8px; display:flex; justify-content:space-between; }
@media(max-width:700px){ #tttBoard .tttCell{ height:80px; font-size:36px; } }