#minigame-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center;
  background: rgba(4, 6, 14, 0.78); backdrop-filter: blur(6px);
}
body.mg-modal-open::-webkit-scrollbar, body.mg-modal-open ::-webkit-scrollbar, #minigame-modal ::-webkit-scrollbar { width: 10px; height: 10px; }
body.mg-modal-open::-webkit-scrollbar-track, body.mg-modal-open ::-webkit-scrollbar-track, #minigame-modal ::-webkit-scrollbar-track { background: rgba(5, 9, 18, 0.55); border-radius: 999px; border: 1px solid rgba(91, 224, 230, 0.08); }
body.mg-modal-open::-webkit-scrollbar-thumb, body.mg-modal-open ::-webkit-scrollbar-thumb, #minigame-modal ::-webkit-scrollbar-thumb { border-radius: 999px; border: 2px solid rgba(5, 9, 18, 0.9); background: linear-gradient(180deg, rgba(91, 224, 230, 0.75), rgba(122, 96, 220, 0.7)); box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.12); }
body.mg-modal-open::-webkit-scrollbar-thumb:hover, body.mg-modal-open ::-webkit-scrollbar-thumb:hover, #minigame-modal ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(143, 240, 245, 0.95), rgba(150, 122, 255, 0.9)); box-shadow: 0 0 12px rgba(91, 224, 230, 0.35), inset 0 0 6px rgba(255, 255, 255, 0.2); }
body.mg-modal-open::-webkit-scrollbar-corner, body.mg-modal-open ::-webkit-scrollbar-corner, #minigame-modal ::-webkit-scrollbar-corner { background: transparent; }
body.mg-modal-open, body.mg-modal-open * { scrollbar-width: thin; scrollbar-color: rgba(103, 170, 224, 0.7) rgba(5, 9, 18, 0.55); }
body.mg-modal-open #game-rating-display { display: none !important; }
#minigame-modal .mg-shell-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

#mg-root {
  --mg-gold: #e8c46a;
  --mg-gold-d: #b07d1f;
  --mg-ink: #0b0e1a;
  --mg-panel: rgba(18, 22, 38, 0.96);
  --mg-line: rgba(232, 196, 106, 0.22);
  --mg-text: #ece6d6;
  --mg-sub: rgba(236, 230, 214, 0.55);
  box-sizing: border-box;
  width: min(1040px, 96vw); height: min(88vh, 760px);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(232, 196, 106, 0.08), transparent 60%),
    linear-gradient(160deg, rgba(20, 26, 46, 0.74) 0%, rgba(12, 16, 32, 0.82) 60%, rgba(8, 10, 22, 0.86) 100%),
    url(/img/minigames/tetra/ui/mg_bg.png) center / cover no-repeat,
    #0c1020;
  border: 1px solid var(--mg-line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  color: var(--mg-text);
  overflow: hidden; position: relative;
  font-family: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
}
#mg-root::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(232, 196, 106, 0.02) 0 2px, transparent 2px 22px);
  opacity: 0.5;
}

.mg-view { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; }
.mg-view-enter { opacity: 0; transform: translateY(8px) scale(.992); }
.mg-view-enter-active { opacity: 1; transform: none; transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1); }

.mg-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--mg-line);
  background: linear-gradient(180deg, rgba(232, 196, 106, 0.09), rgba(8, 10, 22, 0.04));
  box-shadow: 0 1px 0 rgba(91, 224, 230, 0.16), 0 8px 22px -10px rgba(0, 0, 0, 0.6);
  position: relative; z-index: 2;
}
.mg-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; font-size: 20px; font-weight: 800; letter-spacing: 0.5px;
  background: linear-gradient(180deg, #fff4d4, var(--mg-gold)); -webkit-background-clip: text;
  background-clip: text; color: transparent; text-shadow: 0 2px 12px rgba(232, 196, 106, 0.2);
  pointer-events: none;
}
.mg-hdr-side { margin-left: auto; display: flex; align-items: center; gap: 12px; min-height: 36px; position: relative; z-index: 1; }
.mg-hdr-rank { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 9px; background: linear-gradient(180deg, rgba(22,30,54,.72), rgba(10,16,32,.82)); border: 1px solid rgba(91,224,230,.32); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 16px rgba(0,0,0,.32); }
.mg-hdr-rank:empty { display: none; }
.mg-hdr-level { display: flex; align-items: center; gap: 8px; padding: 6px 13px; background: linear-gradient(180deg, rgba(34,26,10,.78), rgba(18,13,6,.86)); border: 1px solid rgba(232,196,106,.4); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 5px 16px rgba(0,0,0,.32); }
.mg-hdr-level:empty { display: none; }
.mg-lv-num { font-size: 13px; font-weight: 900; letter-spacing: .04em; background: linear-gradient(180deg, #fff4d4, var(--mg-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.mg-lv-bar { position: relative; width: 62px; height: 7px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid rgba(232,196,106,.28); overflow: hidden; }
.mg-lv-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #e8c46a, #ffe9a8); box-shadow: 0 0 8px rgba(232,196,106,.6); }
.mg-xp-toast { position: fixed; right: 22px; bottom: 26px; z-index: 100020; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(168deg, rgba(24,20,8,.96), rgba(12,10,4,.97)); border: 1px solid rgba(232,196,106,.5); border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.55), 0 0 22px rgba(232,196,106,.16); animation: mgXpIn .28s cubic-bezier(.2,.9,.25,1.2); pointer-events: none; }
.mg-xp-toast b { font-size: 15px; font-weight: 900; color: #ffe9a8; text-shadow: 0 0 12px rgba(232,196,106,.5); }
.mg-xp-toast span { font-size: 11px; font-weight: 700; color: #b9a97c; }
.mg-xp-toast.out { animation: mgXpOut .4s ease forwards; }
@keyframes mgXpIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mgXpOut { to { opacity: 0; transform: translateY(10px); } }
#mg-levelup-fx { position: fixed; inset: 0; z-index: 100030; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#mg-levelup-fx .mg-lvfx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(255,233,168,.32), rgba(0,0,0,0) 55%); animation: mgLvFlash 2.6s ease forwards; }
#mg-levelup-fx .mg-lvfx-core { position: relative; text-align: center; animation: mgLvPop .5s cubic-bezier(.2,.9,.25,1.3); }
#mg-levelup-fx .mg-lvfx-title { font-size: 20px; font-weight: 900; letter-spacing: .5em; text-indent: .5em; color: #ffe9a8; text-shadow: 0 0 24px rgba(232,196,106,.8); }
#mg-levelup-fx .mg-lvfx-num { margin-top: 6px; font-size: 64px; font-weight: 900; background: linear-gradient(180deg, #fff7dd, #e8c46a 65%, #a87d24); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(232,196,106,.55)); }
#mg-levelup-fx.out { opacity: 0; transition: opacity .55s ease; }
@keyframes mgLvFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: .25; } }
@keyframes mgLvPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mg-hdr-rank .mg-card-rank-txt { font-size: 14px; font-weight: 800; color: #eaf4ff; white-space: nowrap; letter-spacing: .02em; }
.mg-hdr-rank svg, .mg-hdr-rank img, .mg-hdr-rank canvas { flex: none; display: block; }
@media (max-width: 560px) { .mg-hdr-rank { padding: 4px 8px 4px 5px; gap: 6px; } .mg-hdr-rank .mg-card-rank-txt { font-size: 12px; } }
.mg-close-btn, .mg-back-btn {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--mg-line);
  color: var(--mg-text); border-radius: 10px; cursor: pointer;
  font-weight: 700; transition: 0.15s;
}
.mg-close-btn { width: 36px; height: 36px; font-size: 22px; line-height: 1; }
.mg-back-btn { padding: 8px 14px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mg-back-image { width: 19px; height: 19px; object-fit: contain; flex: 0 0 19px; display: block; }
.mg-close-btn:hover, .mg-back-btn:hover { background: rgba(232, 196, 106, 0.16); border-color: var(--mg-gold); }

@media (max-width: 560px) {
  .mg-header { min-height: 98px; box-sizing: border-box; align-items: flex-start; padding: 8px 100px 50px 10px !important; gap: 6px !important; }
  .mg-back-btn { flex: 0 0 auto; min-height: 34px; padding: 7px 10px !important; white-space: nowrap; line-height: 1.2; }
  .mg-title { top: 20px; max-width: 34%; font-size: 14px !important; }
  .mg-hdr-side { position: absolute; left: 8px; right: 8px; bottom: 6px; min-width: 0; min-height: 38px; margin: 0; justify-content: center; gap: 6px; }
  .mg-hdr-rank { min-width: 0; max-width: 176px; overflow: hidden; padding: 3px 8px 3px 5px; gap: 5px; }
  .mg-hdr-rank .mg-card-rank-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .mg-hdr-rank svg, .mg-hdr-rank img, .mg-hdr-rank canvas { width: 32px !important; height: 32px !important; object-fit: contain; }
  .mg-hdr-side .mg-close-btn, .mg-hdr-side .mg-help-btn, .mg-hdr-side .mg-fs-btn, .mg-hdr-side .mg-set-hdr, .mg-hdr-side .mg-score-hdr { width: 34px; height: 34px; flex: 0 0 34px; margin-right: 0; }
}
@media (max-width: 360px) {
  .mg-hdr-rank { max-width: 130px; }
  .mg-hdr-side .mg-fs-btn { display: none; }
}

.mg-game-grid {
  flex: 1; overflow-y: auto; padding: 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; align-content: start;
}
.mg-game-card {
  text-align: left; cursor: pointer; padding: 0; overflow: hidden;
  background: linear-gradient(165deg, rgba(20, 30, 42, 0.82), rgba(12, 14, 22, 0.78));
  border: 1px solid rgba(91, 224, 230, 0.2); border-radius: 16px; color: var(--mg-text);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.mg-game-card:hover { transform: translateY(-5px) scale(1.012); border-color: rgba(91, 224, 230, 0.6); box-shadow: 0 22px 56px rgba(20, 120, 140, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.mg-game-card { position: relative; }
.mg-game-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.02) 46%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.03) 55%, transparent 61%) no-repeat; background-size: 260% 100%; background-position: 130% 0; }
.mg-game-card:hover::after { opacity: 1; animation: mgCardSheen1 .85s cubic-bezier(.25,.7,.3,1) 1; }
@keyframes mgCardSheen1 { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.mg-game-card:active { transform: translateY(-1px) scale(.995); }
.mg-game-card-art { height: 116px; position: relative; background: linear-gradient(135deg, #2a1c3e, #101428); }
.mg-art-gangOfFour {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 90, 68, 0.5), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(63, 224, 127, 0.4), transparent 50%),
    radial-gradient(circle at 50% 30%, rgba(255, 207, 74, 0.45), transparent 45%),
    linear-gradient(135deg, #2a1430, #0e1226);
}
.mg-art-gangOfFour::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 62px; transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 7px;
  background: radial-gradient(circle at 50% 40%, #16162a 0 5px, rgba(0,0,0,0) 6px), linear-gradient(160deg, #ffffff, #dfe5f0);
  box-shadow: 11px 7px 0 -3px rgba(255,255,255,.45), 0 10px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.08);
}
.mg-art-tetris { background: radial-gradient(circle at 30% 25%, rgba(0,230,210,.22), rgba(0,0,0,0) 55%), linear-gradient(135deg, #14233a, #0c1020); }
.mg-art-tetris::after { content: ''; position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; transform: translate(-50%, -50%); border-radius: 3px; background: #00e6d2; box-shadow: -19px 0 0 #007aff, 19px 0 0 #af52de, 0 -19px 0 #ff9500, 0 8px 22px rgba(0,0,0,.5), -19px 1px 14px rgba(0,0,0,.35), 19px 1px 14px rgba(0,0,0,.35); }
.mg-game-card[data-game="tetris"] { position: relative; order: -1; grid-column: span 2; min-height: 318px; border-radius: 10px; background: #050813; border-color: rgba(91,224,230,.26); }
.mg-game-card[data-game="tetris"]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,5,12,.05) 12%, rgba(2,5,12,.18) 48%, rgba(2,5,12,.92)), url(/img/minigames/tetra/generated/tetra-main-menu-bg-v2.png) center / cover no-repeat; pointer-events: none; }
.mg-game-card[data-game="tetris"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(91,224,230,.10), rgba(255,211,110,.10)); box-shadow: inset 0 0 0 1px rgba(91,224,230,.52), 0 0 30px rgba(91,224,230,.22); transition: opacity .16s ease; }
.mg-game-card[data-game="tetris"]:hover::after { opacity: 1; }
.mg-game-card[data-game="tetris"] .mg-game-card-art { position: absolute; inset: 0; height: auto; background: none; }
.mg-game-card[data-game="tetris"] .mg-art-tetris::after { display: none; }
.mg-game-card[data-game="tetris"] .mg-game-card-body { position: relative; z-index: 1; min-height: 318px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 18px 16px; box-sizing: border-box; }
.mg-game-card[data-game="tetris"] .mg-game-card-name { font-size: 22px; text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 18px rgba(91,224,230,.24); }
@media (max-width: 720px) { .mg-game-card[data-game="tetris"] { grid-column: span 1; } }
.mg-art-omok { background: radial-gradient(circle at 70% 30%, rgba(232,196,106,.2), rgba(0,0,0,0) 55%), linear-gradient(135deg, #2a2416, #0e1018); }
.mg-art-omok::after { content: ''; position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%, -50%); border-radius: 4px; background: radial-gradient(circle at 34% 40%, #14141f 0 8px, rgba(0,0,0,0) 9px), radial-gradient(circle at 62% 58%, #f4f4f8 0 8px, rgba(0,0,0,0) 9px), repeating-linear-gradient(0deg, rgba(232,196,106,.45) 0 1px, rgba(0,0,0,0) 1px 17px), repeating-linear-gradient(90deg, rgba(232,196,106,.45) 0 1px, rgba(0,0,0,0) 1px 17px), linear-gradient(160deg, #d9b06a, #b07d1f); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.mg-game-card-body { padding: 14px 16px 16px; }
.mg-game-card-name { font-size: 16px; font-weight: 800; color: #fff5d8; }
.mg-game-card-desc { font-size: 12px; color: var(--mg-sub); margin-top: 5px; line-height: 1.5; min-height: 32px; }
.mg-game-card-meta { font-size: 11px; color: var(--mg-gold); margin-top: 8px; font-weight: 700; }

.mg-empty { padding: 40px; text-align: center; color: var(--mg-sub); font-size: 14px; }

.mg-browse-bar { padding: 14px 22px; border-bottom: 1px solid var(--mg-line); }
.mg-create-btn, .mg-btn-gold {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fbe39a, var(--mg-gold-d)); color: #2a1d04;
  border: none; border-radius: 11px; padding: 11px 20px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 18px rgba(232, 196, 106, 0.25), inset 0 1px 0 rgba(255,255,255,.5); transition: 0.15s; font-size: 14px;
}
.mg-create-btn::after, .mg-btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%) no-repeat; background-size: 240% 100%; background-position: 130% 0; opacity: 0; pointer-events: none; }
.mg-create-btn:hover, .mg-btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 9px 26px rgba(232,196,106,.38), 0 0 22px rgba(232,196,106,.22), inset 0 1px 0 rgba(255,255,255,.5); }
.mg-create-btn:hover::after, .mg-btn-gold:hover::after { opacity: 1; animation: mgCardSheen2 .7s cubic-bezier(.25,.7,.3,1) 1; }
.mg-dialog input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(91,224,230,.7), rgba(192,107,255,.65)); outline: none; box-shadow: inset 0 0 6px rgba(0,0,0,.55); }
.mg-dialog input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eafcff, #5be0e6 55%, #1d7d8f); border: 1px solid rgba(234,252,255,.8); box-shadow: 0 0 10px rgba(91,224,230,.6), 0 2px 6px rgba(0,0,0,.5); cursor: pointer; }
.mg-dialog input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eafcff, #5be0e6 55%, #1d7d8f); border: 1px solid rgba(234,252,255,.8); box-shadow: 0 0 10px rgba(91,224,230,.6), 0 2px 6px rgba(0,0,0,.5); cursor: pointer; }
.mg-dialog select, .mg-dialog input[type=number] { background: rgba(5,10,20,.72); border: 1px solid rgba(91,224,230,.22); border-radius: 9px; color: var(--mg-text); padding: 8px 10px; font-weight: 700; transition: border-color .15s ease; }
.mg-dialog select:focus, .mg-dialog input[type=number]:focus { outline: none; border-color: rgba(91,224,230,.65); }
.mg-rulemem-dlg { width: 500px; max-width: 94vw; border-color: rgba(201,163,255,.42); box-shadow: 0 26px 70px rgba(0,0,0,.66), 0 0 44px rgba(201,163,255,.12), inset 0 1px 0 rgba(255,255,255,.07); }
.mg-rulemem-dlg .mg-dialog-btns button { white-space: nowrap; font-size: 12.5px; padding: 10px 6px; }
.mg-rulemem-dlg .mg-dialog-title::after { background: linear-gradient(90deg, rgba(201,163,255,0), rgba(201,163,255,.95), rgba(91,224,230,.85), rgba(91,224,230,0)); box-shadow: 0 0 12px rgba(201,163,255,.45); }
.mgrm-sub { text-align: center; font-size: 11.5px; color: #8d7fb0; font-weight: 700; margin: -8px 0 12px; }
.mgrm-list { max-height: min(340px, 46vh); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mgrm-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(120,150,200,.16); background: rgba(10,16,30,.6); }
.mgrm-row:hover { border-color: rgba(201,163,255,.4); }
.mgrm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.mgrm-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: #e7ecf5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgrm-x { cursor: pointer; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,113,130,.35); background: rgba(30,10,16,.7); color: #ffb5bf; border-radius: 7px; font-size: 12px; padding: 0; }
.mgrm-x:hover { border-color: rgba(255,113,130,.85); color: #fff; box-shadow: 0 0 10px rgba(255,113,130,.25); }
.mgrm-empty { padding: 16px 8px; text-align: center; color: #6d84a3; font-size: 12px; line-height: 1.5; }
.mgrm-del { border-color: rgba(255,113,130,.4) !important; color: #ffb5bf !important; }
.mgrm-del:hover { border-color: rgba(255,113,130,.8) !important; }
.mg-ui-pressed { transform: translateY(1px) scale(.985) !important; filter: brightness(1.12) saturate(1.08) !important; }
.mg-ui-clicked { animation: mgUiClickPulse .18s ease-out 1; }
@keyframes mgUiClickPulse {
  0% { filter: brightness(1.28) saturate(1.18); }
  100% { filter: brightness(1) saturate(1); }
}

.mg-room-list { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.mg-room-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(165deg, rgba(34, 40, 64, 0.7), rgba(16, 20, 36, 0.7));
  border: 1px solid var(--mg-line); border-radius: 13px;
}
.mg-room-info { flex: 1; }
.mg-room-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mg-room-sub { font-size: 12px; color: var(--mg-sub); margin-top: 4px; }
.mg-badge { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.4px; }
.mg-badge-waiting { background: rgba(63, 224, 127, 0.16); color: #6ff0a3; border: 1px solid rgba(63, 224, 127, 0.4); animation: mgPulse 1.8s infinite; }
.mg-badge-playing { background: rgba(255, 90, 68, 0.16); color: #ff8e7a; border: 1px solid rgba(255, 90, 68, 0.4); }
@keyframes mgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 224, 127, 0.4); } 50% { box-shadow: 0 0 0 5px rgba(63, 224, 127, 0); } }
.mg-room-act {
  border: none; border-radius: 10px; padding: 10px 18px; font-weight: 800; cursor: pointer; font-size: 13px; transition: 0.15s;
}
.mg-join { background: linear-gradient(180deg, #6ff0a3, #1f9d5e); color: #06251a; }
.mg-spectate { background: rgba(255, 255, 255, 0.07); color: var(--mg-text); border: 1px solid var(--mg-line); }
.mg-room-act:hover { transform: translateY(-1px); filter: brightness(1.08); }

.mg-dialog-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, rgba(14,26,48,.55), rgba(2,4,10,.82) 70%); backdrop-filter: blur(5px); animation: mgOvIn .18s ease-out; }
@keyframes mgOvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mgDlgIn { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 60% { opacity: 1; transform: translateY(-2px) scale(1.008); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.mg-dialog { position: relative; width: 340px; max-width: 90%; background: linear-gradient(168deg, rgba(16,26,46,.97), rgba(7,12,24,.985) 55%, rgba(9,13,26,.97)); border: 1px solid rgba(91,224,230,.34); border-radius: 16px; padding: 22px; box-shadow: 0 26px 70px rgba(0,0,0,.66), 0 0 44px rgba(91,224,230,.1), inset 0 1px 0 rgba(255,255,255,.07); animation: mgDlgIn .24s cubic-bezier(.2,.9,.25,1.15); }
.mg-dialog::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background:
  linear-gradient(90deg, rgba(91,224,230,.85), rgba(91,224,230,0) 34%) top left / 44px 1.5px no-repeat,
  linear-gradient(180deg, rgba(91,224,230,.85), rgba(91,224,230,0) 34%) top left / 1.5px 44px no-repeat,
  linear-gradient(270deg, rgba(232,196,106,.8), rgba(232,196,106,0) 34%) bottom right / 44px 1.5px no-repeat,
  linear-gradient(0deg, rgba(232,196,106,.8), rgba(232,196,106,0) 34%) bottom right / 1.5px 44px no-repeat; }
.mg-dialog-title { position: relative; font-size: 18px; font-weight: 900; margin-bottom: 18px; padding-bottom: 12px; color: #eef7ff; text-align: center; letter-spacing: .06em; text-shadow: 0 0 18px rgba(91,224,230,.35); }
.mg-dialog-title::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 130px; height: 2px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, rgba(91,224,230,0), rgba(91,224,230,.9), rgba(232,196,106,.85), rgba(232,196,106,0)); box-shadow: 0 0 12px rgba(91,224,230,.45); }
.mg-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(91,224,230,.22); background: rgba(5,10,20,.72); color: var(--mg-text); font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.mg-input:focus { outline: none; border-color: rgba(91,224,230,.65); box-shadow: 0 0 0 2px rgba(91,224,230,.14), 0 0 16px rgba(91,224,230,.12); }
.mg-dialog-create { width: 620px; max-width: 94%; padding: 0; overflow: hidden; border-color: rgba(91,224,230,.42); background: linear-gradient(180deg, rgba(10,16,30,.93), rgba(5,9,20,.97)), url(/img/minigames/tetra/generated/tetra-room-create-panel-bg-v1.png) center / cover no-repeat; box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 40px rgba(91,224,230,.12); }
.mg-dialog-create .mg-dialog-title { padding: 22px 24px 4px; font-size: 21px; letter-spacing: .04em; color: #eaf6ff; text-shadow: 0 0 16px rgba(91,224,230,.45); }
.mg-cd-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 24px 4px; }
.mg-cd-section { background: rgba(6,11,22,.55); border: 1px solid rgba(91,224,230,.16); border-radius: 12px; padding: 4px 14px 16px; backdrop-filter: blur(2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.mg-cd-section .mg-field-label:first-child { margin-top: 12px; }
.mg-dialog-create .mg-dialog-btns { padding: 8px 24px 22px; }
.mg-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--mg-text); cursor: pointer; }
.mg-toggle-row input { display: none; }
.mg-toggle-ui { position: relative; width: 46px; height: 25px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid var(--mg-line); transition: .18s ease; flex: none; }
.mg-toggle-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #cfe7ee; transition: .18s ease; }
.mg-toggle-row input:checked + .mg-toggle-ui { background: linear-gradient(180deg, #5be0e6, #2aa6bf); border-color: rgba(91,224,230,.6); }
.mg-toggle-row input:checked + .mg-toggle-ui::after { left: 23px; background: #042128; }
@media (max-width: 560px) { .mg-dialog-create { width: 92vw; } .mg-cd-body { grid-template-columns: 1fr; gap: 12px; padding: 12px 16px 4px; } .mg-dialog-create .mg-dialog-title { padding: 18px 16px 4px; } .mg-dialog-create .mg-dialog-btns { padding: 8px 16px 18px; } }
.mg-dialog-btns { display: flex; gap: 10px; margin-top: 18px; }
.mg-dialog-btns button { flex: 1; }
.mg-btn-ghost { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(159,180,200,.28); color: var(--mg-text); border-radius: 11px; padding: 11px; font-weight: 800; letter-spacing: .03em; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, color .15s ease; }
.mg-btn-ghost::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%) no-repeat; background-size: 240% 100%; background-position: 130% 0; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.mg-btn-ghost:hover { border-color: rgba(91,224,230,.6); color: #eafcff; box-shadow: 0 0 18px rgba(91,224,230,.16), inset 0 0 12px rgba(91,224,230,.06); }
.mg-btn-ghost:hover::after { opacity: 1; animation: mgCardSheen2 .7s cubic-bezier(.25,.7,.3,1) 1; }
.mg-btn-ghost:active { transform: translateY(1px) scale(.99); }

.mg-room-shell { flex: 1; display: flex; min-height: 0; position: relative; }
.mg-room-main { flex: 1; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.mg-room-main-tetris { overflow-y: auto; overflow-x: hidden; }
.mg-chat {
  position: absolute; left: 16px; bottom: 16px; z-index: 50;
  width: 300px; max-height: 40vh;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 13px;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(8, 11, 22, 0.34); backdrop-filter: blur(5px);
  opacity: 0.45; transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mg-chat:hover, .mg-chat:focus-within { opacity: 1; background: rgba(8, 11, 22, 0.9); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); }
.mg-chat.mg-chat-collapsed { height: 42px; min-height: 42px; overflow: hidden; }
.mg-chat.mg-chat-collapsed .mg-chat-list, .mg-chat.mg-chat-collapsed .mg-chat-input { display: none; }
@media (max-width: 720px) { .mg-chat { left: 0; right: 0; bottom: 0; width: auto; max-height: 32vh; border-radius: 0; opacity: 0.85; } }
.mg-chat-head { padding: 12px 16px; font-weight: 800; font-size: 13px; color: var(--mg-gold); border-bottom: 1px solid var(--mg-line); }
.mg-chat-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.mg-chat-line { font-size: 12.5px; line-height: 1.5; word-break: break-word; }
.mg-chat-name { color: #8fd0ff; font-weight: 700; }
.mg-chat-name-spec { color: #b6a0cf; font-weight: 700; }
.mg-chat-spec { color: #9b86c2; font-size: 10.5px; font-weight: 800; }
.mg-chat-msg { color: var(--mg-text); }
.mg-chat-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--mg-line); }
.mg-chat-input input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--mg-line); background: rgba(255, 255, 255, 0.04); color: var(--mg-text); font-size: 13px; }
.mg-chat-input button { background: linear-gradient(180deg, #fbe39a, var(--mg-gold-d)); color: #2a1d04; border: none; border-radius: 9px; padding: 0 14px; font-weight: 800; cursor: pointer; }

.mg-lobby { padding: 24px; height: 100%; overflow-y: auto; box-sizing: border-box; }
.mg-lobby-title { font-size: 18px; font-weight: 800; color: #fff5d8; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.mg-lobby-count { font-size: 13px; color: var(--mg-gold); background: rgba(232, 196, 106, 0.1); padding: 3px 10px; border-radius: 20px; }
.mg-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mg-seat {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px;
  background: linear-gradient(165deg, rgba(34, 40, 64, 0.7), rgba(16, 20, 36, 0.7));
  border: 1px solid var(--mg-line); border-radius: 14px; transition: 0.18s;
}
.mg-seat-ready { border-color: rgba(63, 224, 127, 0.5); box-shadow: 0 0 18px rgba(63, 224, 127, 0.12); }
.mg-seat-empty { opacity: 0.45; border-style: dashed; }
.mg-seat-avatar {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #2a1d04;
  background: linear-gradient(160deg, #fbe39a, var(--mg-gold-d)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.mg-seat-name { font-size: 14px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-tag { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 16px; }
.mg-tag-host { background: rgba(232, 196, 106, 0.18); color: var(--mg-gold); }
.mg-tag-ready { background: rgba(63, 224, 127, 0.18); color: #6ff0a3; }
.mg-tag-off { background: rgba(255, 90, 68, 0.18); color: #ff8e7a; }
.mg-kick { margin-top: 4px; background: rgba(255, 90, 68, 0.14); color: #ff8e7a; border: 1px solid rgba(255, 90, 68, 0.4); border-radius: 8px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.mg-kick:hover { background: rgba(255, 90, 68, 0.28); }
.mg-lobby-spectators { margin-top: 14px; font-size: 12px; color: var(--mg-sub); }
.mg-lobby-controls { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.mg-btn-danger { background: rgba(255, 90, 68, 0.14); color: #ff8e7a; border: 1px solid rgba(255, 90, 68, 0.4); border-radius: 11px; padding: 11px 20px; font-weight: 800; cursor: pointer; }
.mg-btn-danger:hover { background: rgba(255, 90, 68, 0.26); }
.mg-disabled, .mg-btn-gold:disabled, button:disabled.mg-btn-gold { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }
.mg-disabled, #mg-root button:disabled { pointer-events: auto; }
.mg-lobby-hint { margin-top: 16px; font-size: 12px; color: var(--mg-sub); }
.mg-lobby-note { font-size: 14px; color: var(--mg-gold); font-weight: 700; margin-top: 20px; text-align: center; }

.mg-card-svg { display: block; width: 100%; height: 100%; }

.mg-toast {
  position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: rgba(12, 16, 30, 0.96); border: 1px solid var(--mg-gold); color: #fff5d8;
  padding: 11px 20px; border-radius: 12px; font-size: 13px; font-weight: 700;
  opacity: 0; transition: 0.3s; z-index: 60; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); pointer-events: none; max-width: 80%;
}
.mg-toast-show { opacity: 1; transform: translate(-50%, 0); }

.mg-chat-head { display: flex; align-items: center; gap: 8px; }
.mg-chat-arrow { display: none; margin-left: auto; opacity: 0.7; font-size: 12px; }
.mg-chat-unread { display: none; }

@media (max-width: 720px) {
  #minigame-modal { align-items: stretch; justify-content: stretch; }
  #minigame-modal .mg-shell-wrap { align-items: stretch; justify-content: stretch; }
  #mg-root { width: 100vw; height: 100vh; height: 100dvh; max-width: none; border-radius: 0; }
  .mg-header { padding: 8px 10px; gap: 6px; flex-shrink: 0; }
  .mg-title { font-size: 15px; }
  .mg-back-btn { padding: 8px 10px; font-size: 12.5px; }
  .mg-room-shell { flex-direction: column; }
  .mg-chat { width: 100%; height: 34vh; max-height: 270px; min-height: 150px; border-left: none; border-top: 1px solid var(--mg-line); }
  .mg-chat-head { cursor: pointer; -webkit-user-select: none; user-select: none; min-height: 40px; }
  .mg-chat-arrow { display: inline; }
  .mg-chat-unread {
    display: none; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: 10px; background: #ff5a44; color: #fff; font-size: 11.5px; font-weight: 800;
  }
  .mg-dialog { width: 92vw; max-width: 92vw; padding: 18px 16px; }
  .mg-mode-btn, .mg-diff-btn { padding: 12px 12px; font-size: 13.5px; }
  .mg-room-act { padding: 12px 16px; font-size: 13.5px; }
  .mg-lobby-controls { flex-wrap: wrap; gap: 8px; }
  .mg-lobby-controls button { padding: 13px 16px; font-size: 13.5px; }
  .mg-game-card { width: calc(50% - 8px); min-width: 150px; }
  .mg-multi-grid { grid-template-columns: 1fr; max-width: 520px; padding: 0 14px 22px; gap: 14px; }
  .mg-mode-cards { grid-template-columns: 1fr; max-width: 520px; padding: 0 14px 22px; gap: 14px; }
  .mg-mode-card { min-height: 190px; aspect-ratio: 2 / 1; padding: 112px 18px 18px; }
  .mg-solo-lb { width: calc(100% - 32px); margin-bottom: 34px; }
  .mg-first-row { flex-wrap: wrap; }
  .mg-toast { max-width: 92%; font-size: 13px; }
}

#mg-root.mg-full { width: 100vw; height: 100vh; max-width: none; border-radius: 0; }

.mg-fs-btn, .mg-help-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--mg-line); color: var(--mg-text);
  border-radius: 10px; cursor: pointer; font-weight: 800; transition: 0.15s; flex-shrink: 0;
}
.mg-fs-btn:hover, .mg-help-btn:hover { background: rgba(232, 196, 106, 0.16); border-color: var(--mg-gold); color: var(--mg-gold); }

.mg-help-overlay {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 16, 0.86); backdrop-filter: blur(4px); padding: 20px;
}
.mg-help-panel {
  position: relative; width: min(660px, 96%); max-height: 92%; overflow-y: auto;
  background: linear-gradient(180deg, #1a2138, #0c1020); border: 1px solid var(--mg-gold);
  border-radius: 18px; padding: 26px 28px 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(232, 196, 106, 0.1);
}
.mg-help-close {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; line-height: 1;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--mg-line); color: var(--mg-text);
  border-radius: 9px; font-size: 20px; cursor: pointer;
}
.mg-help-close:hover { background: rgba(232, 196, 106, 0.16); border-color: var(--mg-gold); }
.mg-help-h1 { font-size: 22px; font-weight: 800; background: linear-gradient(180deg, #fff4d4, var(--mg-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; }
.mg-help-sec { margin-top: 20px; }
.mg-help-h2 { font-size: 15px; font-weight: 800; color: var(--mg-gold); margin-bottom: 8px; border-left: 3px solid var(--mg-gold); padding-left: 10px; }
.mg-help-body p { font-size: 13px; line-height: 1.75; color: var(--mg-text); margin: 6px 0; }
.mg-help-cards { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-end; }
.mg-help-card { width: 62px; height: 87px; display: inline-block; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)); }
.mg-help-card .mg-card-svg { width: 62px; height: 87px; }
.mg-help-special { display: flex; flex-direction: column; gap: 12px; }
.mg-help-sp { display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--mg-line); border-radius: 12px; padding: 12px 14px; }
.mg-help-sp-name { font-weight: 800; color: #fff5d8; font-size: 14px; margin-bottom: 3px; }
.mg-help-sp-desc { font-size: 12.5px; color: var(--mg-sub); line-height: 1.6; }
.mg-help-hand-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(232, 196, 106, 0.1); }
.mg-help-hand-name { width: 130px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--mg-gold); }
.mg-help-hand-cards { display: flex; gap: 3px; flex-wrap: wrap; }

.mg-tag-bot { background: rgba(103, 232, 249, 0.18); color: #67e8f9; }
.mg-btn-bot { background: rgba(103, 232, 249, 0.12); color: #9be9f7; border: 1px solid rgba(103, 232, 249, 0.35); border-radius: 11px; padding: 11px 18px; font-weight: 800; cursor: pointer; transition: 0.15s; }
.mg-btn-bot:hover { background: rgba(103, 232, 249, 0.22); transform: translateY(-1px); }

.mg-field-label { font-size: 12px; font-weight: 700; color: var(--mg-gold); margin: 14px 0 8px; }
.mg-mode-row { display: flex; gap: 8px; }
.mg-mode-btn { flex: 1; padding: 11px; border-radius: 10px; border: 1px solid var(--mg-line); background: rgba(255,255,255,0.04); color: var(--mg-text); font-weight: 800; font-size: 13px; cursor: pointer; transition: 0.15s; }
.mg-mode-btn.mg-mode-on { background: linear-gradient(180deg, #fbe39a, var(--mg-gold-d)); color: #2a1d04; border-color: var(--mg-gold); }
.mg-points-wrap { margin-top: 4px; }
.mg-points-row { display: flex; gap: 6px; }
.mg-pt-btn { flex: 1; padding: 9px; border-radius: 9px; border: 1px solid var(--mg-line); background: rgba(255,255,255,0.04); color: var(--mg-text); font-weight: 800; font-size: 13px; cursor: pointer; }
.mg-pt-btn.mg-pt-on { background: rgba(232,196,106,0.2); border-color: var(--mg-gold); color: #fff5d8; }
.mg-mode-hint { font-size: 11px; color: var(--mg-sub); margin-top: 8px; line-height: 1.5; }
.mg-lobby-mode { font-size: 12px; color: #9be9f7; background: rgba(103,232,249,0.12); padding: 3px 10px; border-radius: 20px; font-weight: 700; }

.mg-score-hdr { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(103,232,249,0.14); border: 1px solid rgba(103,232,249,0.4); color: #9be9f7; border-radius: 10px; cursor: pointer; font-size: 16px; transition: 0.15s; flex-shrink: 0; }
.mg-score-hdr:hover { background: rgba(103,232,249,0.24); }

.mg-diff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.mg-diff-btn { padding: 12px; font-weight: 800; }

.mg-first-row { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.mg-first-row .mg-field-label { margin: 0; }

.mg-badge-mode { background: rgba(232, 196, 106, 0.14); color: #fbe39a; border: 1px solid rgba(232, 196, 106, 0.3); }

.mg-card-rank { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(232, 196, 106, 0.12); }
.mg-card-rank-txt { font-size: 11.5px; font-weight: 800; color: #fbe39a; }
.mg-rank-svg { flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)); }
.mg-rank-t9 { filter: drop-shadow(0 0 8px rgba(255,220,120,0.65)); }

.mg-ranked-btn {
  background: linear-gradient(180deg, #7c5cd6, #4b2da0); color: #fff; border: 1px solid #a78bfa;
  border-radius: 11px; padding: 10px 18px; font-weight: 800; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 5px 16px rgba(124, 92, 214, 0.35); transition: 0.15s;
}
.mg-ranked-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.mg-browse-bar { display: flex; gap: 10px; }

.mg-queue-overlay { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(5, 7, 16, 0.76); backdrop-filter: blur(4px); }
.mg-queue-box { position: relative; width: 360px; max-width: 90%; box-sizing: border-box; text-align: center; background: linear-gradient(180deg, rgba(12,18,34,.88), rgba(5,8,18,.94)), url(/img/minigames/tetra/generated/tetra-ui-frame-atlas-v1.png) center / cover no-repeat; border: 1px solid rgba(91,224,230,.36); border-radius: 10px; padding: 28px 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 36px rgba(91,224,230,0.18); }
.mg-queue-spin { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid rgba(167,139,250,0.25); border-top-color: #a78bfa; animation: mgSpin 0.9s linear infinite; }
@keyframes mgSpin { to { transform: rotate(360deg); } }
.mg-queue-me { margin-bottom: 8px; }
.mg-queue-title { font-size: 16px; font-weight: 800; color: #fff5d8; margin-bottom: 6px; }
.mg-queue-found { color: #9dffc8; font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 14px rgba(111,240,163,.55); animation: mgFoundPop 0.5s cubic-bezier(.2,.8,.3,1); }
@keyframes mgFoundPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.mg-queue-sub { font-size: 12px; color: rgba(236,230,214,0.55); margin-bottom: 16px; min-height: 16px; }
.mg-queue-players { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.mg-queue-pl { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13.5px; font-weight: 700; color: #ece6d6; }

.mg-rp-banner { position: absolute; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; background: rgba(5, 7, 16, 0.75); backdrop-filter: blur(4px); }
.mg-rp-box { width: 340px; max-width: 92%; background: linear-gradient(180deg, #1a2138, #0c1020); border: 1px solid var(--mg-gold, #e8c46a); border-radius: 18px; padding: 22px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(232,196,106,0.15); animation: mgFoundPop 0.4s cubic-bezier(.2,.8,.3,1); }
.mg-rp-title { font-size: 15px; font-weight: 800; color: #fff5d8; margin-bottom: 14px; }
.mg-rp-mine { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 10px; }
.mg-rp-emblem-pop { animation: mgRankPop 0.8s cubic-bezier(.2,.8,.3,1); }
@keyframes mgRankPop { 0% { transform: scale(0.3) rotate(-15deg); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: none; opacity: 1; } }
.mg-rp-info { text-align: left; }
.mg-rp-tier { font-size: 14px; font-weight: 800; color: #fbe39a; }
.mg-rp-delta { font-size: 21px; font-weight: 900; }
.mg-rp-gain { color: #6ff0a3; }
.mg-rp-loss { color: #ff8e7a; }
.mg-rp-now { font-size: 12px; color: rgba(236,230,214,0.6); }
.mg-rp-event { font-size: 13px; font-weight: 800; margin: 6px 0; }
.mg-rp-event-up { color: #ffd964; font-size: 16px; animation: mgFoundPop 0.6s; }
.mg-rp-event-down { color: #ff8e7a; }
.mg-rp-streak { color: #ffb86b; }
.mg-rp-promo { color: #9ae6ff; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mg-promo-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.15); display: inline-block; }
.mg-promo-w { background: #6ff0a3; box-shadow: 0 0 7px rgba(111,240,163,0.7); }
.mg-promo-l { background: #ff8e7a; }
.mg-rp-others { border-top: 1px solid rgba(232,196,106,0.14); margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mg-rp-other-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.mg-rp-other-name { flex: 1; text-align: left; color: #ece6d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-rp-close { margin-top: 14px; width: 100%; }
.mg-seat-rank { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: #fbe39a; margin-top: 3px; }

.mg-chat-rank { display: inline-flex; vertical-align: -3px; margin-right: 3px; }
.mg-chat-rank .mg-rank-svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

.mg-dc-banner { background: linear-gradient(135deg, rgba(255,80,80,.22), rgba(255,150,40,.16)); border: 1px solid rgba(255,90,90,.45); color: #ffb3b3; font-weight: 800; font-size: 13px; text-align: center; padding: 7px 12px; border-radius: 10px; margin: 0 0 8px; letter-spacing: .5px; animation: mgDcPulse 1s ease-in-out infinite; }
@keyframes mgDcPulse { 0%,100% { box-shadow: 0 0 8px rgba(255,80,80,.2); } 50% { box-shadow: 0 0 16px rgba(255,80,80,.5); } }

.mgc-ov { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mgc-stage { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.mgc-ring { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 24px rgba(120,80,220,.45)); }
.mgc-num { position: relative; font-size: 110px; font-weight: 900; line-height: 1; background: linear-gradient(160deg,#eafcff,#9bd0ff 40%,#c79bff 75%,#ff8aa0); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(120,90,220,.5); font-family: 'Segoe UI', sans-serif; }
.mgc-num.mgc-pop { animation: mgcPop .76s cubic-bezier(.2,.8,.2,1); }
@keyframes mgcPop { 0% { opacity: 0; transform: scale(2.1); filter: blur(6px); } 18% { opacity: 1; transform: scale(1); filter: blur(0); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: .25; transform: scale(.7); } }
.mgc-flash { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(123,233,255,.6) 40%, rgba(163,93,223,.25) 70%, rgba(0,0,0,0) 75%); opacity: 0; }
.mgc-flash.mgc-burst { animation: mgcBurst .4s ease-out forwards; }
@keyframes mgcBurst { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(7); } }

.mg-ic { width: 100%; height: 100%; display: block; overflow: visible; }
.mg-sub-title { text-align: center; font-size: 17px; font-weight: 900; letter-spacing: 2px; margin: 14px 0 6px; background: linear-gradient(90deg,#7be9ff,#c79bff,#ff8aa0); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; }
.mg-start-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(22px, 2.8vw, 34px); width: min(100%, 980px); margin: 0 auto; padding: clamp(24px,5vh,54px) 24px; box-sizing: border-box; }
.mg-multi-grid { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 18px; width: min(100%, 980px); margin: 0 auto; padding: 22px 28px 34px; box-sizing: border-box; overflow-y: auto; }
.mg-start, .mg-solo, .mg-multi, .mg-league { position: relative; min-height: 520px; background: #050813 url(/img/minigames/tetra/generated/tetra-main-menu-bg-v2.png) center / cover no-repeat; overflow: hidden; }
.mg-start::before, .mg-solo::before, .mg-multi::before, .mg-league::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,6,14,.12), rgba(3,6,14,.68)); }
.mg-start > *, .mg-solo > *, .mg-multi > *, .mg-league > * { position: relative; z-index: 1; }
.mg-solo { overflow: hidden; }
.mg-solo-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 18px 38px; box-sizing: border-box; }
.mg-solo-section { width: min(100%, 980px); margin: 0 auto 22px; padding: 16px; box-sizing: border-box; border: 1px solid rgba(91,224,230,.14); border-radius: 14px; background: linear-gradient(145deg,rgba(7,14,28,.76),rgba(10,8,22,.7)); box-shadow: 0 18px 46px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025); }
.mg-solo-section-head { display: flex; align-items: center; gap: 12px; margin: 0 2px 14px; }
.mg-section-icon { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.42)); }
.mg-solo-section-title { color: #effcff; font-size: 19px; line-height: 1.15; font-weight: 950; letter-spacing: .04em; }
.mg-solo-section-kicker { margin-top: 3px; color: rgba(143,240,245,.52); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.mg-mode-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; width: 100%; box-sizing: border-box; margin: 0; padding: 0; }
.mg-mode-cards-practice { grid-template-columns: repeat(2,minmax(0,1fr)); }
.mg-mode-cards-challenge { grid-template-columns: repeat(2,minmax(0,1fr)); }
.mg-solo-leaderboard { border-color: rgba(255,196,86,.22); background: linear-gradient(145deg,rgba(25,18,8,.72),rgba(10,10,24,.76)); }
@media (max-width: 560px) {
  .mg-multi-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 14px 22px; }
  .mg-start-grid { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; }
  .mg-tetra-entry-card { height: 220px; padding: 134px 22px 22px; }
}

.mg-pick, .mg-mode-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; aspect-ratio: 2 / 1; min-height: 210px; padding: 124px 18px 20px; border-radius: 8px; cursor: pointer; border: 0; background-color: transparent; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(91,224,230,.16); transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease; overflow: hidden; }
.mg-pick::before, .mg-mode-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,5,12,0) 34%, rgba(2,5,12,.72) 72%, rgba(2,5,12,.92)); opacity: 1; pointer-events: none; }
.mg-pick::after, .mg-mode-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.02) 46%, rgba(255,255,255,.17) 50%, rgba(255,255,255,.04) 55%, transparent 61%) no-repeat, linear-gradient(180deg, rgba(91,224,230,.07), rgba(255,211,110,.10)); background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; box-shadow: inset 0 0 0 1px rgba(91,224,230,.55), 0 0 28px rgba(91,224,230,.18); transition: opacity .16s ease; }
.mg-pick:hover, .mg-mode-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: inset 0 0 0 1px rgba(91,224,230,.34), 0 18px 38px rgba(0,0,0,.34), 0 0 34px rgba(91,224,230,.12); }
.mg-pick:hover::after, .mg-mode-card:hover::after { opacity: 1; animation: mgCardSheen2 .85s cubic-bezier(.25,.7,.3,1) 1; }
@keyframes mgCardSheen2 { from { background-position: 130% 0, 0 0; } to { background-position: -40% 0, 0 0; } }
.mg-pick:active, .mg-mode-card:active { transform: translateY(-1px) scale(.99); }
.mg-pick.mg-ui-pressed, .mg-mode-card.mg-ui-pressed, .mg-game-card[data-game="tetris"].mg-ui-pressed { filter: none !important; }
.mg-pick.mg-ui-clicked, .mg-mode-card.mg-ui-clicked, .mg-game-card[data-game="tetris"].mg-ui-clicked { animation: none; }
.mg-pick-ic { display: none; }
.mg-pick-icon { position: absolute; left: 22px; bottom: 22px; z-index: 2; width: 70px; height: 70px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 9px 18px rgba(0,0,0,.52)); transition: transform .18s ease, filter .18s ease; }
.mg-pick-copy { position: relative; z-index: 2; min-width: 0; margin-left: 88px; }
.mg-pick:hover .mg-pick-icon { transform: translateY(-3px) scale(1.045); filter: drop-shadow(0 12px 22px rgba(70,210,255,.28)); }
.mg-pick-name { position: relative; z-index: 1; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 0; text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 0 18px rgba(91,224,230,.24); }
.mg-pick-sub { position: relative; z-index: 1; font-size: 12px; font-weight: 700; color: rgba(235,250,255,.72); text-align: left; line-height: 1.35; min-height: 32px; }
.mg-pick-solo:hover { border-color: rgba(91,224,230,.7); }
.mg-pick-multi:hover { border-color: rgba(255,180,80,.6); }
.mg-pick-bot:hover { border-color: rgba(120,200,255,.7); }
.mg-pick-league:hover { border-color: rgba(255,200,80,.7); }

.mg-mode-card { aspect-ratio: 2 / 1; min-height: 210px; padding: 124px 18px 18px; gap: 6px; }
.mg-tetra-entry-card { width: 100%; min-width: 0; height: clamp(245px, 29vh, 310px); min-height: 0; aspect-ratio: auto; padding: clamp(142px, 20vh, 200px) 28px 24px; background-size: cover; box-sizing: border-box; }
.mg-tetra-entry-card .mg-pick-icon { width: 82px; height: 82px; left: 28px; bottom: 25px; }
.mg-tetra-entry-card .mg-pick-copy { margin-left: 100px; }
.mg-multi-grid .mg-pick { width: 100%; min-height: 220px; height: clamp(220px,26vh,260px); aspect-ratio: auto; box-sizing: border-box; padding: 126px 26px 24px; }
.mg-mode-ic { display: none; }
.mg-mode-name { position: relative; z-index: 1; font-size: 17px; font-weight: 900; color: #fff; text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 0 16px rgba(91,224,230,.24); }
.mg-mode-desc { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: rgba(235,250,255,.68); text-align: left; line-height: 1.35; min-height: 30px; }
.mg-mode-card[data-opener] .mg-mode-name { background: linear-gradient(90deg,#7be9ff,#a35ddf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mg-art-entry-solo { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-solo-multi-wide-v2.png); background-size: 200% 100%; background-position: left center; }
.mg-art-entry-multi { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-solo-multi-wide-v2.png); background-size: 200% 100%; background-position: right center; }
.mg-art-sprint { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-sprint-v1.png); }
.mg-art-blitz { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-blitz-v1.png); }
.mg-art-finesse { background-image: linear-gradient(135deg,rgba(20,170,220,.28),rgba(88,42,176,.12)),url(/img/minigames/tetra/generated/tetra-mode-card-wide-zen-v1.png); }
.mg-art-zen { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-zen-v1.png); }
.mg-art-opener { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-opener-v1.png); }
.mg-art-bot { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-bot-v1-a1.png); }
.mg-art-league { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-league-v1-a1.png); }
.mg-art-room { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-room-v1-a1.png); }
.mg-art-quickplay { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-quickplay-v1-a1.png); }
.mg-mode-card[data-opener] { background-image: url(/img/minigames/tetra/generated/tetra-mode-card-wide-opener-v1.png); }
.mg-start-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 980px); margin: 0 auto 24px; padding: 0 24px; box-sizing: border-box; }
.mg-start-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(91,224,230,.24); border-radius: 8px; background: linear-gradient(180deg, rgba(10,18,34,.72), rgba(5,8,18,.84)); color: #eafcff; cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.mg-start-shortcut:hover { transform: translateY(-2px); border-color: rgba(91,224,230,.58); background: linear-gradient(180deg, rgba(18,34,58,.78), rgba(8,12,24,.9)); }
.mg-start-shortcut span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 900; }
.mg-start-shortcut b { flex: 0 0 auto; font-size: 11px; color: #ffd36e; letter-spacing: 0; }
@media (max-width: 560px) {
  .mg-start-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px 18px; margin-bottom: 0; }
  .mg-start-shortcut { padding: 10px 11px; }
  .mg-start-shortcut span { font-size: 11px; }
  .mg-tetra-entry-card { min-height: clamp(240px, 30vh, 290px); padding: clamp(136px, 18vh, 170px) 22px 22px; }
}
@media (max-width: 720px) {
  .mg-start-grid { align-content: center; padding: 18px 14px 26px; }
  .mg-multi-grid { gap: 14px; padding: 18px 14px 28px; }
  .mg-multi-grid .mg-pick { min-height: 190px; height: 210px; padding: 104px 18px 18px; }
  .mg-solo-scroll { padding: 14px 10px 30px; }
  .mg-solo-section { padding: 12px; margin-bottom: 14px; }
  .mg-mode-cards-practice, .mg-mode-cards-challenge { grid-template-columns: minmax(0,1fr); }
  .mg-mode-card { min-height: 190px; }
  .mg-section-icon { width: 44px; height: 44px; }
  .mg-pick-icon { width: 58px; height: 58px; left: 17px; bottom: 18px; }
  .mg-pick-copy { margin-left: 70px; }
  .mg-tetra-entry-card .mg-pick-icon { width: 68px; height: 68px; left: 20px; bottom: 22px; }
  .mg-tetra-entry-card .mg-pick-copy { margin-left: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-view-enter,
  .mg-view-enter-active {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.mg-br { display: flex; flex-direction: column; height: 100%; }
.mg-br-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(10,16,30,.58), rgba(5,8,18,.34)); box-shadow: inset 0 -1px 0 rgba(91,224,230,.08); }
.mg-br-telemetry { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(6,10,20,.42); flex-wrap: wrap; }
.mg-br-tel { display: flex; align-items: baseline; gap: 6px; min-width: 84px; max-width: 150px; padding: 4px 9px; border: 1px solid rgba(91,224,230,.18); background: rgba(12,18,32,.66); border-radius: 6px; box-sizing: border-box; overflow: hidden; }
.mg-br-tel span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(236,230,214,.58); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.mg-br-tel b { flex: 0 0 auto; color: #8ff0f5; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-br-tel.risk-warn b { color: #ffd36e; }
.mg-br-tel.risk-danger b, .mg-br-tel.risk-apex b { color: #ff6d78; }
.mg-br-tel.on, .mg-br-hyper.on { border-color: rgba(255,211,110,.55); box-shadow: inset 0 0 0 1px rgba(255,211,110,.12), 0 0 12px rgba(255,211,110,.16); }
.mg-br-tel.on b, .mg-br-hyper.on b { color: #ffe48f; }
.mg-br-alive { margin-left: auto; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .5px; }
.mg-br-alive b { color: #5be0e6; font-size: 19px; font-weight: 900; text-shadow: 0 0 10px rgba(91,224,230,.5); margin-left: 4px; }
.mg-br-addbots, .mg-br-bar .mg-create-btn { font-size: 12px; }
.mg-br-addbots { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 18px; border: 1px solid rgba(255,211,110,.54); border-radius: 9px; background: linear-gradient(180deg, rgba(255,220,125,.96), rgba(190,124,35,.96)); box-shadow: 0 8px 24px rgba(255,170,60,.28), inset 0 1px 0 rgba(255,255,255,.45); letter-spacing: 0; }
.mg-br-addbots:hover { filter: none; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,170,60,.36), inset 0 1px 0 rgba(255,255,255,.5); }
.mg-br-lb-btn { min-height: 40px; padding: 0 14px; font-weight: 900; }
.mg-br-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.mg-br-sidemap { position: absolute; top: 0; bottom: 0; height: 100%; width: calc((100% - var(--mg-cw, 600px)) / 2 - 8px); z-index: 1; opacity: .96; pointer-events: none; }
.mg-br-mapL { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.mg-br-mapR { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
.mg-br-board { position: relative; z-index: 3; width: var(--mg-cw, 600px); display: flex; align-items: center; justify-content: center; min-width: 0; }
.mg-br-field-stats { position: absolute; left: max(8px, calc(50% - 185px)); top: 50%; transform: translate(-100%, -50%); z-index: 6; display: grid; grid-template-columns: 1fr; gap: 6px; width: 86px; pointer-events: none; }
.mg-br-field-stats div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 5px 6px; border-radius: 7px; border: 1px solid rgba(91,224,230,.24); background: linear-gradient(180deg, rgba(7,14,26,.82), rgba(4,8,16,.64)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.24); }
.mg-br-field-stats b { color: #8ff0f5; font-size: 17px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.mg-br-field-stats span { margin-top: 4px; color: rgba(236,230,214,.62); font-size: 9px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.mg-br-alti { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 4; }
.mg-br-side { position: absolute; right: 8px; top: 10px; z-index: 4; }
@media (max-width: 760px) {
  .mg-br-sidemap { display: none; }
  .mg-br-board { width: 96vw; }
  .mg-br-side { position: static; }
  .mg-br-field-stats { left: 50%; top: auto; bottom: 6px; transform: translateX(-50%); grid-template-columns: repeat(4, minmax(54px, 1fr)); width: min(92vw, 310px); gap: 4px; }
  .mg-br-field-stats div { min-height: 34px; padding: 4px; }
  .mg-br-field-stats b { font-size: 13px; }
  .mg-br-field-stats span { font-size: 8px; margin-top: 2px; }
}

.mg-br-stat { font-size: 13px; opacity: .92; margin-left: 10px; }
.mg-br-stat b { color: #5be0e6; }
.mg-br-board { position: relative; }
.mg-br-attacker { position: absolute; top: 6px; left: 50%; transform: translateX(-50%) translateY(-6px); padding: 3px 10px; border-radius: 999px; background: rgba(214,47,67,.92); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .12s ease; z-index: 7; }
.mg-br-attacker.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mg-br-hyper-ov { position: absolute; left: 50%; top: 42px; transform: translateX(-50%) translateY(-8px); display: flex; align-items: baseline; gap: 11px; max-width: 88%; padding: 7px 16px; border-radius: 7px; border: 1px solid rgba(255,211,110,.62); background: linear-gradient(180deg, rgba(36,28,10,.88), rgba(10,16,30,.82)); color: #ffe48f; font-weight: 900; pointer-events: none; opacity: 0; z-index: 9; box-shadow: 0 0 26px rgba(255,211,110,.34), 0 0 48px rgba(91,224,230,.12), inset 0 0 0 1px rgba(255,255,255,.08); transition: opacity .14s ease, transform .14s ease; }
.mg-br-hyper-ov.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mg-br-hyper-ov span { font-size: 15px; letter-spacing: 1px; white-space: nowrap; color: #fff4c2; text-shadow: 0 0 12px rgba(255,211,110,.55); }
.mg-br-hyper-ov b { font-size: 12px; white-space: nowrap; color: #8ff0f5; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(91,224,230,.45); }
.mg-br-fatigue-ov { position: absolute; left: 50%; top: 8px; transform: translateX(-50%) translateY(-6px); display: flex; align-items: baseline; gap: 8px; max-width: 84%; padding: 5px 12px; border-radius: 7px; border: 1px solid rgba(255,96,110,.5); background: linear-gradient(180deg, rgba(46,12,20,.82), rgba(10,16,30,.76)); color: #ffd1d6; font-weight: 900; pointer-events: none; opacity: 0; z-index: 8; box-shadow: 0 0 18px rgba(255,74,90,.24), inset 0 0 0 1px rgba(255,255,255,.06); transition: opacity .14s ease, transform .14s ease; }
.mg-br-fatigue-ov.show { opacity: .96; transform: translateX(-50%) translateY(0); }
.mg-br-fatigue-ov span { font-size: 12px; white-space: nowrap; color: #ffe1e5; text-shadow: 0 0 10px rgba(255,96,110,.48); }
.mg-br-fatigue-ov b { font-size: 11px; white-space: nowrap; color: #ffd36e; font-variant-numeric: tabular-nums; }
.mg-br-hyper-sprite { position: absolute; left: 50%; top: 43%; width: 174%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%) scaleX(1.22) scaleY(.38); pointer-events: none; opacity: 0; z-index: 0; background-image: url(/img/minigames/tetra/generated/tetra-hyperspeed-sprite-30f-v1.png); background-repeat: no-repeat; background-size: 600% 500%; background-position: 0% 0%; mix-blend-mode: screen; filter: saturate(1.16) drop-shadow(0 0 14px rgba(91,224,230,.48)); }
.mg-br-hyper-sprite.show { opacity: .34; }
.mg-br-hyper-sprite.show.settled { opacity: .16; transform: translate(-50%, -50%) scaleX(1.18) scaleY(.26); }
.mg-br-feed { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; z-index: 7; max-width: 230px; }
.mg-br-feed-row { font-size: 12px; font-weight: 700; color: #ffd23f; background: rgba(10,12,20,.72); border-radius: 5px; padding: 2px 7px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mg-br-feed-row { min-height: 24px; display: flex; align-items: center; border: 1px solid rgba(255,210,80,.24); box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); animation: brFeedHold 10s linear forwards; }
.mg-br-attacker { max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .mg-br { overflow-x: hidden; }
  .mg-br-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .mg-br-telemetry { justify-content: flex-start; padding: 6px 8px; gap: 5px; }
  .mg-br-tel { flex: 1 1 calc(50% - 6px); min-width: 0; max-width: none; padding: 4px 7px; }
  .mg-br-tel span { font-size: 9px; }
  .mg-br-tel b { font-size: 11px; }
  .mg-br-alive { margin-left: 0; }
  .mg-br-addbots, .mg-br-bar .mg-create-btn { margin-left: 0; flex: 1 1 100%; order: 9; min-height: 38px; border-radius: 8px; }
  .mg-br-stage { width: 100%; box-sizing: border-box; }
  .mg-br-stage > * { max-width: 100%; box-sizing: border-box; }
  .mg-br-board { order: 1; width: 100%; min-height: auto; height: fit-content; max-width: 100%; overflow: visible; display: flex; justify-content: center; align-items: flex-start; }
  .mg-br-alti { order: 2; width: 100%; flex-direction: row; justify-content: center; padding: 0; gap: 6px; }
  .mg-br-alti-track { display: none; }
  .mg-br-alti-lbl { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border: 1px solid rgba(91,224,230,.22); border-radius: 999px; background: rgba(7,10,20,.52); }
  .mg-br-alti-lbl b { font-size: 13px; }
  .mg-br-alti-lbl span { font-size: 10px; }
  .mg-br-map { order: 3; }
  .mg-br-feed { position: static; order: 3; max-width: 100%; align-self: center; align-items: center; margin-top: 2px; }
  .mg-br-feed-row { font-size: 10px; padding: 1px 5px; max-width: 92vw; }
  .mg-br-attacker { font-size: 11px; }
  .mg-br-hyper-ov { top: 52px; gap: 7px; padding: 5px 9px; }
  .mg-br-hyper-ov span { font-size: 11px; }
  .mg-br-hyper-ov b { font-size: 10px; }
  .mg-br-fatigue-ov { top: 8px; gap: 6px; padding: 4px 8px; }
  .mg-br-fatigue-ov span { font-size: 10px; }
  .mg-br-fatigue-ov b { font-size: 9px; }
  .mg-br-hyper-sprite { top: 43%; width: 184%; transform: translate(-50%, -50%) scaleX(1.18) scaleY(.34); }
  .mg-br-hyper-sprite.show { opacity: .3; }
  .mg-br-hyper-sprite.show.settled { opacity: .14; transform: translate(-50%, -50%) scaleX(1.16) scaleY(.24); }
  .mg-br-stat { margin-left: 6px; font-size: 12px; }
}

.mg-league { overflow-x: hidden; }
.mg-league-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 28px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; width: min(100%, 980px); margin: 0 auto; }
.mg-league-body > * { box-sizing: border-box; max-width: 100%; }
.mg-season-chip { align-self: flex-start; min-height: 24px; padding: 4px 10px; border: 1px solid rgba(91,224,230,.24); border-radius: 999px; background: rgba(5,10,22,.58); color: #8ff0f5; font-size: 11px; font-weight: 900; letter-spacing: .3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.mg-league-me { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(8,16,32,.88), rgba(18,12,28,.78)), url(/img/minigames/tetra/generated/tetra-league-match-bg-v1.png) center / cover no-repeat; border: 1px solid rgba(232,196,106,.26); border-radius: 10px; padding: 18px; box-sizing: border-box; box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04); }
.mg-league-me::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(91,224,230,.10), rgba(255,211,110,.08) 54%, rgba(0,0,0,0)); }
.mg-league-me > * { position: relative; z-index: 1; }
.mg-league-find { align-self: center; min-width: 240px; font-size: 15px; font-weight: 900; padding: 12px 28px; border: 1px solid rgba(255,211,110,.55); border-radius: 9px; box-shadow: 0 10px 30px rgba(255,170,60,.28), inset 0 1px 0 rgba(255,255,255,.45); }
.mg-pc-head { display: flex; align-items: center; gap: 14px; }
.mg-pc-head > svg, .mg-pc-head > .emb, .mg-pc-head > img { flex: 0 0 auto; }
.mg-pc-id { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.mg-pc-name { font-size: 18px; font-weight: 900; color: #ece6d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-pc-tier { font-size: 13px; color: #e8c46a; font-weight: 700; }
.mg-pc-form { margin-top: 5px; display: flex; gap: 3px; }
.mg-form { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; color: #0b0e1a; }
.mg-form-win { background: #4fe06a; } .mg-form-lose { background: #ff5a6e; color: #fff; } .mg-form-draw { background: #7a8190; }
.mg-pc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mg-pc-st { background: rgba(5,10,22,.62); border: 1px solid rgba(91,224,230,.10); border-radius: 8px; padding: 8px 6px; text-align: center; min-width: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.mg-pc-v { font-size: 16px; font-weight: 900; color: #5be0e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-pc-l { font-size: 11px; color: rgba(236,230,214,.55); margin-top: 2px; }
.mg-lb-list { display: flex; flex-direction: column; gap: 5px; padding-bottom: 10px; }
.mg-lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(8,14,28,.62); border: 1px solid rgba(91,224,230,.08); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.mg-lb-click { cursor: pointer; } .mg-lb-click:hover { background: rgba(18,34,58,.72); border-color: rgba(91,224,230,.26); }
.mg-lb-rank { width: 28px; text-align: center; font-weight: 900; color: #e8c46a; }
.mg-lb-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ece6d6; font-weight: 600; }
.mg-lb-rp { flex: 0 0 auto; }
.mg-mh-opp { flex: 1 1 0; }
.mg-lb-rp { font-weight: 800; color: #5be0e6; }
.mg-pc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100050; padding: 16px; box-sizing: border-box; width: 100vw; max-width: 100vw; overflow-x: hidden; }
.mg-pc-box { position: relative; width: min(440px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: 86vh; overflow-y: auto; overflow-x: hidden; background: var(--mg-panel, #12162a); border: 1px solid rgba(232,196,106,.25); border-radius: 16px; padding: 20px; box-sizing: border-box; }
.mg-pc-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #ece6d6; font-size: 20px; cursor: pointer; }
.mg-mh-list { display: flex; flex-direction: column; gap: 4px; }
.mg-mh-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(10,12,20,.5); border-radius: 8px; font-size: 13px; }
.mg-mh-oc { width: 18px; height: 18px; border-radius: 4px; font-weight: 900; font-size: 11px; display: flex; align-items: center; justify-content: center; color: #0b0e1a; }
.mg-mh-win .mg-mh-oc { background: #4fe06a; } .mg-mh-lose .mg-mh-oc { background: #ff5a6e; color: #fff; } .mg-mh-draw .mg-mh-oc { background: #7a8190; }
.mg-mh-opp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ece6d6; }
.mg-mh-rp { font-weight: 800; color: #e8c46a; flex: 0 0 auto; } .mg-mh-apm { color: rgba(236,230,214,.6); font-size: 12px; flex: 0 0 auto; }
.mg-mh-oc { flex: 0 0 auto; } .mg-lb-rank { flex: 0 0 auto; }
.mg-pc-solos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mg-pc-solo { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: rgba(5,10,22,.62); border: 1px solid rgba(255,255,255,.06); border-left: 3px solid #58e07a; min-width: 0; overflow: hidden; }
.mg-pc-solo.mg-pc-solo-bz { border-left-color: #ff5a6e; }
.mg-pc-solo-l { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #8fa4c4; text-transform: uppercase; white-space: nowrap; }
.mg-pc-solo b { font-size: 17px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-pc-solo-r { margin-left: auto; font-size: 12px; font-weight: 900; color: #5be0e6; white-space: nowrap; }
.mg-pc-solo-none { font-size: 12px; color: rgba(143,164,196,.6); font-weight: 700; }
@media (max-width: 560px) { .mg-pc-solos { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .mg-pc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .mg-pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-pc-v { font-size: 14px; } }

.mg-rp-click { cursor: pointer; }
.mg-rp-click:hover { filter: brightness(1.12); }
.mg-queue-pl { display: inline-flex; align-items: center; gap: 8px; }
.mg-queue-pl-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mg-queue-pl-nm { font-weight: 700; color: #ece6d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.mg-queue-pl-tier { font-size: 11px; color: #e8c46a; }

.mg-rank-img { display: inline-block; vertical-align: middle; object-fit: contain; flex: 0 0 auto; }

.mg-mh-replay { flex: 0 0 auto; background: rgba(91,224,230,.15); border: 1px solid rgba(91,224,230,.4); color: #5be0e6; border-radius: 6px; width: 24px; height: 22px; font-size: 11px; cursor: pointer; padding: 0; }
.mg-mh-replay:hover { background: rgba(91,224,230,.3); }

.mg-br-result-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6,8,14,.85); z-index: 12; }
.mg-br-result-ov.mg-br-result-watch { align-items: flex-end; justify-content: center; padding: 0 14px 22px; box-sizing: border-box; background: linear-gradient(180deg, rgba(6,8,14,.08), rgba(6,8,14,.58)); pointer-events: none; }
.mg-br-result-ov.mg-br-result-watch .mg-br-result-box { pointer-events: auto; width: min(520px, calc(100vw - 28px)); padding: 14px 18px; border-radius: 10px; }
.mg-br-result-ov.mg-br-result-watch.collapsed { align-items: flex-end; justify-content: flex-end; background: transparent; padding: 0 22px 22px 0; }
.mg-br-result-ov.mg-br-result-watch.collapsed .mg-br-result-title,
.mg-br-result-ov.mg-br-result-watch.collapsed .mg-br-result-place,
.mg-br-result-ov.mg-br-result-watch.collapsed .mg-br-result-bounty,
.mg-br-result-ov.mg-br-result-watch.collapsed .mg-br-result-stats,
.mg-br-result-ov.mg-br-result-watch.collapsed #mg-br-retry,
.mg-br-result-ov.mg-br-result-watch.collapsed #mg-br-rback { display: none; }
.mg-br-result-ov.mg-br-result-watch.collapsed .mg-br-result-box { width: auto; padding: 8px 10px; background: rgba(8,12,22,.82); border-color: rgba(91,224,230,.35); box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.mg-br-result-ov.mg-br-result-watch .mg-br-result-title { font-size: 18px; }
.mg-br-result-ov.mg-br-result-watch .mg-br-result-place { font-size: 30px; margin: 2px 0 10px; }
.mg-br-result-ov.mg-br-result-watch .mg-br-result-stats { gap: 8px 12px; margin-bottom: 10px; }
.mg-br-result-ov.mg-br-result-watch .mg-br-rs b { font-size: 17px; }
.mg-br-result-ov.mg-br-result-watch .mg-br-rs span { font-size: 9px; }
.mg-br-result-box { text-align: center; padding: 24px 28px; background: rgba(18,22,38,.9); border: 1px solid rgba(232,196,106,.25); border-radius: 16px; }
.mg-br-result-title { font-size: 26px; font-weight: 900; color: #ff5a6e; letter-spacing: 3px; }
.mg-br-result-bounty { display: flex; flex-direction: column; align-items: center; margin: 4px 0 2px; }
.mg-br-result-bounty b { color: #ffd23f; font-size: 44px; line-height: 1; font-weight: 900; text-shadow: 0 0 20px rgba(255,211,63,.36); }
.mg-br-result-bounty span { color: rgba(236,230,214,.68); font-size: 11px; font-weight: 900; }
.mg-br-result-place { font-size: 42px; font-weight: 900; color: #5be0e6; margin: 4px 0 16px; }
.mg-br-result-stats { display: grid; grid-template-columns: repeat(4, minmax(62px, 1fr)); gap: 12px 16px; justify-items: center; margin-bottom: 18px; }
.mg-br-rs { display: flex; flex-direction: column; gap: 2px; }
.mg-br-rs b { font-size: 22px; font-weight: 900; color: #e8c46a; }
.mg-br-rs span { font-size: 11px; color: rgba(236,230,214,.6); }
.mg-br-result-btns { display: flex; gap: 10px; justify-content: center; }

.mg-br-lead { width: 260px; display: flex; flex-direction: column; gap: 3px; box-sizing: border-box; }
.mg-br-lead-h { font-size: 12px; font-weight: 800; color: #e8c46a; margin-bottom: 2px; }
.mg-br-lead-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 7px 8px; background: rgba(18,22,38,.6); border-radius: 6px; font-size: 12px; }
.mg-br-lead-row { min-height: 50px; transition: transform .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mg-br-lead-row.me { background: rgba(91,224,230,.18); border: 1px solid rgba(91,224,230,.5); }
.mg-br-lead-row.top { border-left: 3px solid #ffd23f; }
.mg-br-lead-row.atk { box-shadow: inset 0 0 0 1px rgba(255,59,92,.6); }
.mg-br-lead-row.wanted { background: rgba(88,12,24,.7); border: 1px solid rgba(255,72,92,.55); }
.mg-ll-r { grid-row: 1 / span 2; width: 28px; text-align: center; font-weight: 900; color: #e8c46a; font-variant-numeric: tabular-nums; }
.mg-ll-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ece6d6; font-weight: 800; }
.mg-ll-bounty { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; color: #ffd23f; white-space: nowrap; }
.mg-ll-bounty i { font-style: normal; color: rgba(255,230,160,.72); font-size: 9px; font-weight: 900; }
.mg-ll-bounty b { color: #ffd23f; font-size: 19px; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255,211,63,.24); }
.mg-ll-a { color: #ffd23f; font-weight: 900; font-size: 11px; white-space: nowrap; }
.mg-ll-f { color: #5be0e6; font-weight: 700; font-size: 11px; }
.mg-ll-k { grid-column: 2; color: rgba(236,230,214,.72); font-weight: 800; white-space: nowrap; }
.mg-ll-w { grid-column: 2; color: #9fb4c8; font-size: 10px; font-weight: 800; }
@media (max-width: 720px) { .mg-br-lead { width: 100%; max-width: 100%; } }

.mg-br-side {
  grid-column: 3; grid-row: 1; position: static; z-index: 6; margin-top: 232px;
  display: flex; flex-direction: column; gap: 10px; width: 230px; box-sizing: border-box;
  padding: 8px; border: 1px solid rgba(91,224,230,.22); border-radius: 10px;
  background: rgba(7,10,20,.72); box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}
.mg-br-side .mg-br-lead { width: 100%; }
.mg-br-side .mg-br-feed { position: static; top: auto; right: auto; max-width: 100%; align-items: stretch; }
@media (max-width: 720px) { .mg-br-side { position: static; width: 100%; max-width: 100%; order: 4; margin-top: 0; } }

.mg-rank-prov { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(40,48,68,.55); border: 1.5px dashed rgba(159,179,200,.5); color: #9fb3c8; font-weight: 800; letter-spacing: .5px; box-sizing: border-box; vertical-align: middle; }
.mg-pc-prov { font-size: 11px; color: #e8c46a; font-weight: 700; margin-top: 2px; }

.mg-season-chip { display: inline-block; align-self: flex-start; padding: 4px 12px; margin-bottom: 8px; border-radius: 999px; background: linear-gradient(135deg, rgba(232,196,106,.2), rgba(91,224,230,.14)); border: 1px solid rgba(232,196,106,.4); color: #e8c46a; font-weight: 800; font-size: 12px; letter-spacing: .5px; }
.mg-season-chip:empty { display: none; }

.mg-ft-hud { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 14px; padding: 9px 24px; min-width: 320px; max-width: 94%; background: url(/img/minigames/tetra/ui/ft_panel_bg.png) center/100% 100% no-repeat; box-sizing: border-box; }
.mg-fth-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mg-fth-side.r { flex-direction: row-reverse; }
.mg-fth-nm { font-weight: 800; color: #ece6d6; font-size: 13px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-fth-center { text-align: center; min-width: 84px; }
.mg-fth-score { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: 2px; }
.mg-fth-score i { color: #5be0e6; margin: 0 5px; font-style: normal; }
.mg-fth-meta { font-size: 11px; color: #e8c46a; font-weight: 800; letter-spacing: .5px; }
.mg-round-inter { position: absolute; inset: 0; z-index: 14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(91,224,230,.14), rgba(6,8,14,.9) 58%, rgba(2,3,9,.96)); }
.mg-round-inter::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(91,224,230,.16) 45%, rgba(255,90,110,.18) 55%, transparent 70%); transform: translateX(-120%) skewX(-12deg); animation: mgRiSweep .85s cubic-bezier(.2,.75,.2,1) .12s 1 both; pointer-events: none; }
.mg-round-inter.mg-ri-lost { background: radial-gradient(circle at 50% 42%, rgba(255,90,110,.13), rgba(6,8,14,.9) 58%, rgba(2,3,9,.96)); }
.mg-ri-plates { position: relative; z-index: 1; display: flex; gap: 38px; padding: 26px 34px; border-radius: 14px; overflow: visible; background: radial-gradient(ellipse at 50% 48%, rgba(91,224,230,.18), rgba(255,90,110,.12) 42%, transparent 72%); animation: mgRiPop .34s cubic-bezier(.2,.9,.24,1) 1 both; filter: drop-shadow(0 26px 54px rgba(0,0,0,.58)) drop-shadow(0 0 22px rgba(91,224,230,.2)); }
@keyframes mgRiSweep { 0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translateX(120%) skewX(-12deg); opacity: 0; } }
@keyframes mgRiPop { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
.mg-ri-plate { width: 220px; height: 276px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.mg-ri-plate.win { background-image: url(/img/minigames/tetra/ui/round_win_plate.png); }
.mg-ri-plate.loss { background-image: url(/img/minigames/tetra/ui/round_loss_plate.png); }
.mg-ri-plate-lbl { font-size: 27px; font-weight: 900; letter-spacing: 3px; }
.mg-ri-plate.win .mg-ri-plate-lbl { color: #5be0e6; }
.mg-ri-plate.loss .mg-ri-plate-lbl { color: #ff6a7a; }
.mg-ri-plate-nm { max-width: 82%; font-size: 16px; font-weight: 900; color: #ece6d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.mg-ri-score { position: relative; z-index: 1; font-size: 44px; font-weight: 900; color: #fff; letter-spacing: 5px; text-shadow: 0 4px 18px rgba(0,0,0,.8); }
.mg-ri-ring { position: relative; z-index: 1; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; background: url(/img/minigames/tetra/ui/countdown_ring.png) center/contain no-repeat; font-size: 43px; font-weight: 900; color: #e8c46a; filter: drop-shadow(0 0 18px rgba(91,224,230,.35)); }
@media (max-width: 720px) { .mg-ft-hud { gap: 8px; padding: 6px 12px; min-width: 0; } .mg-ri-plates { gap: 10px; padding: 22px 12px; max-width: 94vw; box-sizing: border-box; } .mg-ri-plate { width: 146px; height: 184px; } .mg-ri-plate-lbl { font-size: 21px; } .mg-ri-plate-nm { font-size: 13px; } .mg-ri-score { font-size: 38px; } .mg-ri-ring { width: 88px; height: 88px; font-size: 36px; } .mg-fth-nm { max-width: 60px; } }

.mg-set-final { position: absolute; inset: 0; z-index: 18; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; text-align: center; padding: 28px; box-sizing: border-box; background: radial-gradient(circle at 50% 42%, rgba(91,224,230,.22), rgba(6,8,14,.88) 54%, rgba(2,3,9,.96)); }
.mg-set-final.loss { background: radial-gradient(circle at 50% 42%, rgba(255,90,110,.20), rgba(6,8,14,.90) 54%, rgba(2,3,9,.97)); }
.mg-set-final::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 28%, rgba(91,224,230,.24) 45%, rgba(255,211,110,.22) 53%, transparent 70%); transform: translateX(-120%) skewX(-12deg); animation: mgRiSweep .9s cubic-bezier(.2,.75,.2,1) .1s 1 both; pointer-events: none; }
.mg-set-final.loss::after { background: linear-gradient(105deg, transparent 28%, rgba(255,90,110,.24) 45%, rgba(160,90,255,.20) 54%, transparent 70%); }
.mg-set-final.mg-sf-vfx-off::before,
.mg-set-final.mg-sf-vfx-off::after,
.mg-set-final.mg-sf-vfx-off .mg-sf-title,
.mg-set-final.mg-sf-vfx-low::after { animation: none !important; }
.mg-set-final.mg-sf-vfx-off::before { opacity: .24; filter: saturate(.85) brightness(.78); }
.mg-set-final.mg-sf-vfx-low::before { opacity: .34; }
.mg-sf-kicker, .mg-sf-title, .mg-sf-score, .mg-sf-players, .mg-sf-close { position: relative; z-index: 1; }
.mg-sf-kicker { font-size: 15px; font-weight: 900; color: #e8c46a; letter-spacing: 0; text-shadow: 0 2px 12px rgba(0,0,0,.75); }
.mg-sf-title { font-size: 76px; line-height: .95; font-weight: 900; letter-spacing: 0; color: #eafcff; text-shadow: 0 0 26px rgba(91,224,230,.64), 0 5px 24px rgba(0,0,0,.8); animation: mgSfTitle .42s cubic-bezier(.2,.9,.24,1) 1 both; }
.mg-set-final.loss .mg-sf-title { color: #ffe8ed; text-shadow: 0 0 24px rgba(255,90,110,.62), 0 5px 24px rgba(0,0,0,.8); }
.mg-sf-score { font-size: 42px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 4px 18px rgba(0,0,0,.85); }
.mg-sf-players { display: flex; gap: 12px; width: min(560px, 92%); justify-content: center; }
.mg-sf-player { flex: 1 1 0; min-width: 0; padding: 10px 14px; border-radius: 10px; background: rgba(8,12,24,.72); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 14px 32px rgba(0,0,0,.35); }
.mg-sf-player.winner { border-color: rgba(91,224,230,.52); box-shadow: 0 0 22px rgba(91,224,230,.20), inset 0 0 0 1px rgba(255,255,255,.05); }
.mg-sf-player.loser { border-color: rgba(255,90,110,.34); opacity: .86; }
.mg-sf-pname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 900; color: #ece6d6; }
.mg-sf-player b { display: block; margin-top: 3px; font-size: 24px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mg-sf-close { margin-top: 8px; padding: 11px 22px; border-radius: 11px; border: 1px solid rgba(232,196,106,.45); background: rgba(16,18,30,.72); color: #fff5d8; font-size: 14px; font-weight: 900; cursor: pointer; }
.mg-sf-close:hover { background: rgba(232,196,106,.16); }
@keyframes mgSfTitle { from { opacity: 0; transform: translateY(18px) scale(.92); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (max-width: 720px) { .mg-set-final { gap: 11px; padding: 18px; } .mg-sf-title { font-size: 46px; } .mg-sf-score { font-size: 32px; } .mg-sf-players { flex-direction: column; width: min(320px, 94%); gap: 8px; } .mg-sf-player { padding: 9px 12px; } .mg-sf-player b { font-size: 21px; } .mg-sf-kicker { font-size: 13px; } }

.mg-rp-setscore { color: #5be0e6; font-weight: 900; letter-spacing: 2px; font-size: 15px; }

.mg-vs-row { display: flex; align-items: stretch; gap: 16px; justify-content: center; margin-top: 16px; width: 100%; box-sizing: border-box; }
.mg-vs-pl { flex: 1 1 0; min-width: 0; max-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; box-sizing: border-box; background: linear-gradient(165deg, rgba(22,28,50,.92), rgba(12,16,32,.92)); border: 1px solid rgba(91,224,230,.32); border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.4), 0 0 18px rgba(91,224,230,.1); }
.mg-vs-click { cursor: pointer; transition: filter .12s; }
.mg-vs-click:hover { filter: brightness(1.14); }
.mg-vs-nm { font-weight: 800; color: #ece6d6; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-vs-rank { font-size: 12px; color: #5be0e6; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mg-vs-stats { display: flex; gap: 10px; margin-top: 5px; }
.mg-vs-st { display: flex; flex-direction: column; align-items: center; }
.mg-vs-st b { font-size: 15px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.mg-vs-st span { font-size: 9px; color: rgba(236,230,214,.55); font-weight: 800; letter-spacing: .5px; }
.mg-vs-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; }
.mg-vs-mark { font-size: 30px; font-weight: 900; color: #e8c46a; letter-spacing: 3px; text-shadow: 0 0 16px rgba(232,196,106,.55); }
.mg-vs-ft { font-size: 13px; font-weight: 900; color: #ff6a7a; letter-spacing: 1px; }
.mg-mf { position: fixed; inset: 0; z-index: 12000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: linear-gradient(180deg, #05070d 0%, #090d18 48%, #05070d 100%); overflow: hidden; }
.mg-mf::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px); }
.mg-mf-pl { position: relative; display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); width: min(680px, 92%); padding: clamp(14px, 2.6vh, 24px) clamp(16px, 3vw, 30px); box-sizing: border-box; background: linear-gradient(90deg, rgba(18,24,42,.92), rgba(9,13,24,.88)); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.mg-mf-pl.me { border-left: 4px solid #34d2dd; animation: mgMfSlideL .38s cubic-bezier(.2,.9,.25,1) both; }
.mg-mf-pl.opp { border-left: 4px solid #ff4e5e; animation: mgMfSlideR .38s cubic-bezier(.2,.9,.25,1) both; }
@keyframes mgMfSlideL { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@keyframes mgMfSlideR { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: none; } }
.mg-mf-em img { display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,.65)); }
.mg-mf-id { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mg-mf-nm { font-weight: 900; color: #f2eee2; font-size: clamp(18px, 3.2vw, 26px); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-mf-rank { font-size: clamp(12px, 1.8vw, 14px); font-weight: 800; color: #8fa4c4; letter-spacing: .08em; text-transform: uppercase; }
.mg-mf-pl.me .mg-mf-rank { color: #34d2dd; }
.mg-mf-pl.opp .mg-mf-rank { color: #ff8a95; }
.mg-mf-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.mg-mf-rp { font-size: clamp(20px, 3.4vw, 30px); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; font-style: normal; }
.mg-mf-rp i { font-size: 12px; font-weight: 900; font-style: normal; color: rgba(236,230,214,.5); margin-left: 4px; letter-spacing: .06em; }
.mg-mf-stats { display: flex; gap: 14px; }
.mg-mf-st { display: flex; flex-direction: column; align-items: center; }
.mg-mf-st b { font-size: 14px; font-weight: 900; color: #dfe8f4; font-variant-numeric: tabular-nums; }
.mg-mf-st span { font-size: 9px; color: rgba(236,230,214,.5); font-weight: 800; letter-spacing: .6px; }
.mg-mf-mid { position: relative; display: flex; align-items: center; gap: 14px; width: min(680px, 92%); margin: clamp(10px, 2vh, 18px) 0; animation: mgMfFade .5s .18s ease both; }
.mg-mf-mid::before, .mg-mf-mid::after { content: ''; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,164,196,.5)); }
.mg-mf-mid::after { background: linear-gradient(90deg, rgba(143,164,196,.5), transparent); }
.mg-mf-title { font-size: clamp(15px, 2.4vw, 20px); font-weight: 900; letter-spacing: .22em; color: #eaf6ff; text-shadow: 0 0 18px rgba(91,224,230,.55); white-space: nowrap; }
.mg-mf-ft { font-size: 12px; font-weight: 900; letter-spacing: .12em; color: #05070d; background: #e8c46a; border-radius: 4px; padding: 2px 8px; }
.mg-mf-hint { margin-top: clamp(14px, 3.4vh, 30px); font-size: 12px; letter-spacing: .06em; color: rgba(143,164,196,.66); animation: mgMfFade .5s .4s ease both; }
@keyframes mgMfFade { from { opacity: 0; } to { opacity: 1; } }
.mg-mf .mg-vs-click { cursor: pointer; transition: filter .12s ease; }
.mg-mf .mg-vs-click:hover { filter: brightness(1.15); }
@media (prefers-reduced-motion: reduce) { .mg-mf-pl.me, .mg-mf-pl.opp, .mg-mf-mid, .mg-mf-hint { animation: none; } }

.mg-res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.mg-res-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; }
.mg-res-stat b { font-size: clamp(18px, 2.4vw, 28px); font-weight: 900; color: #f3faff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.mg-res-stat span { font-size: 11px; letter-spacing: .08em; color: rgba(200,220,242,.85); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.mg-res-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mg-res-btn { padding: 12px 22px; border-radius: 10px; border: 1px solid rgba(91,224,230,.34); background: rgba(12,20,38,.72); color: #dcecf7; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.mg-res-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 20px rgba(91,224,230,.28); }
.mg-res-btn-primary { background: linear-gradient(180deg, #fbe39a, #d8a93a); color: #2a1d04; border-color: rgba(232,196,106,.6); }
.mg-res-hint { font-size: 12px; letter-spacing: .04em; color: rgba(180,204,230,.72); }
@media (max-width: 560px) {
  .mg-res-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mg-res-actions { width: 100%; gap: 8px; }
  .mg-res-btn { flex: 1 1 0; min-width: 0; padding: 12px 8px; font-size: 13px; }
  .mg-res-hint { margin-top: 2px; }
}
@media (max-width: 560px) { .mg-vs-row { flex-direction: column; align-items: stretch; gap: 10px; } .mg-vs-pl { max-width: 100%; width: 100%; flex: 0 0 auto; padding: 12px 10px; box-sizing: border-box; } .mg-vs-nm { font-size: 14px; } .mg-vs-mid { flex-direction: row; gap: 12px; } .mg-vs-mark { font-size: 22px; } .mg-vs-stats { gap: 14px; } }

.mg-br-alti { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 38px; flex: 0 0 auto; padding: 4px 0; }
.mg-br-alti-track { position: relative; width: 14px; flex: 1 1 auto; min-height: 220px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,90,90,.20), rgba(232,196,106,.12) 45%, rgba(91,224,230,.10) 100%); border: 1px solid rgba(91,224,230,.32); overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,.5); }
.mg-br-alti-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(180deg, #8ff0f5, #2e86d6); box-shadow: 0 0 12px rgba(91,224,230,.5); transition: height .25s ease; }
.mg-br-alti-mark { position: absolute; left: -3px; right: -3px; bottom: 0%; height: 2px; background: #ffe9b8; box-shadow: 0 0 8px rgba(255,210,120,.95); transition: bottom .25s ease; }
.mg-br-alti-lbl { text-align: center; }
.mg-br-alti-lbl b { display: block; font-size: 16px; font-weight: 900; color: #8ff0f5; text-shadow: 0 0 10px rgba(91,224,230,.4); }
.mg-br-alti-lbl span { font-size: 10px; color: rgba(236,230,214,.6); font-weight: 800; }
.mg-br-lead-row.clickable { cursor: pointer; }
.mg-br-lead-row.clickable:hover { background: rgba(91,224,230,.14); }

.mg-br-warn { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; z-index: 8; pointer-events: none; width: 84%; }
.mg-br-warn-row { display: flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 8px; background: rgba(10,14,28,.80); border: 1px solid rgba(232,196,106,.4); font-size: 12px; font-weight: 800; color: #ffe9b8; box-shadow: 0 4px 14px rgba(0,0,0,.5); animation: brWarnIn .18s ease; }
.mg-br-warn-row.warn { border-color: rgba(255,170,60,.6); color: #ffcf6a; }
.mg-br-warn-row.danger { border-color: rgba(255,70,70,.78); color: #ff8a7a; box-shadow: 0 0 16px rgba(255,60,60,.45); }
.mg-br-warn-row.active { border-color: rgba(255,60,92,.9); color: #fff; background: linear-gradient(180deg, rgba(74,13,28,.92), rgba(12,14,28,.86)); box-shadow: 0 0 20px rgba(255,60,92,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.mg-br-warn-row .bw-l { font-size: 14px; font-weight: 900; min-width: 18px; text-align: center; }
.mg-br-warn-row .bw-f { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .72; max-width: 90px; }
.mg-br-warn-row .bw-bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.mg-br-warn-row .bw-bar i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg,#ffd36e,#ff9a3c); animation: brWarnCount linear forwards; }
.mg-br-warn-row.danger .bw-bar i { background: linear-gradient(90deg,#ff8a4d,#ff3030); }
.mg-br-warn-row.active .bw-bar i { background: linear-gradient(90deg,#ffffff,#ff3b5c); animation: none; transform: scaleX(1); box-shadow: 0 0 10px rgba(255,59,92,.9); }
@keyframes brWarnCount { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes brWarnIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mg-br-warn-more { text-align: center; font-size: 11px; font-weight: 900; color: #ff8a7a; padding: 2px 0; letter-spacing: 1px; text-shadow: 0 0 8px rgba(255,80,80,.5); }

.mg-br-result-btns { display: flex; gap: 10px; justify-content: center; }
.mg-br-result-btns .mg-create-btn { background: linear-gradient(180deg, #ffe48f, #f0a637); color: #1a1004; font-weight: 900; font-size: 15px; padding: 12px 26px; letter-spacing: .3px; box-shadow: 0 6px 20px rgba(255,170,60,.45), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.mg-br-result-btns .mg-create-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mg-br-result-btns .mg-btn-ghost { font-weight: 800; color: #ece6d6; }

.mg-br-chat { left: 18px; bottom: 18px; z-index: 90; width: min(360px, 34vw); max-height: min(520px, 58vh); opacity: .72; background: linear-gradient(180deg, rgba(8,13,25,.70), rgba(5,8,16,.54)); border-color: rgba(91,224,230,.18); box-shadow: 0 16px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04); }
.mg-br-chat:hover, .mg-br-chat:focus-within { opacity: 1; border-color: rgba(91,224,230,.36); }
.mg-br-chat .mg-chat-head { color: #8ff0f5; background: rgba(6,12,22,.46); }
@media (max-width: 900px) { .mg-br-chat { width: min(340px, 92vw); max-height: 34vh; } }
@keyframes brFeedHold { 0% { opacity: 0; transform: translateX(8px); } 4% { opacity: 1; transform: translateX(0); } 88% { opacity: 1; } 100% { opacity: 0; } }

.mg-br-lb-ov { position: absolute; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(3,6,12,.68); backdrop-filter: blur(4px); }
.mg-br-lb-box { width: min(440px, calc(100vw - 28px)); max-height: min(660px, calc(100vh - 40px)); display: flex; flex-direction: column; border-radius: 10px; border: 1px solid rgba(91,224,230,.28); background: linear-gradient(180deg, rgba(12,18,32,.96), rgba(5,8,16,.94)); box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.mg-br-lb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mg-br-lb-head b { color: #ffd23f; font-size: 16px; font-weight: 900; }
.mg-br-lb-head button { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(255,255,255,.06); color: #eafcff; font-size: 20px; line-height: 1; cursor: pointer; }
.mg-br-lb-list { overflow: auto; padding: 8px; }
.mg-br-lb-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 38px; padding: 6px 8px; border-radius: 7px; color: rgba(236,230,214,.82); }
.mg-br-lb-row:nth-child(odd) { background: rgba(255,255,255,.035); }
.mg-br-lb-row span { color: #e8c46a; font-weight: 900; font-variant-numeric: tabular-nums; }
.mg-br-lb-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eafcff; font-size: 13px; }
.mg-br-lb-row i { font-style: normal; color: #8ff0f5; font-weight: 900; font-size: 12px; white-space: nowrap; }

.mg-solo-lb { width: min(720px, calc(100% - 32px)); margin: 16px auto 28px; box-sizing: border-box; }
.mg-slb-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.mg-slb-tab { flex: 1; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(120,150,200,.22); background: rgba(20,28,46,.6); color: rgba(220,228,245,.7); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mg-slb-tab.active { background: linear-gradient(180deg, rgba(70,130,230,.35), rgba(40,80,170,.3)); color: #eaf2ff; border-color: rgba(120,170,255,.5); }
.mg-slb-body { display: flex; flex-direction: column; gap: 3px; min-height: 60px; }
.mg-slb-msg { text-align: center; color: rgba(200,210,230,.5); font-size: 13px; padding: 20px 0; }
.mg-slb-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 7px; font-size: 13px; color: rgba(228,234,248,.82); background: rgba(18,24,40,.5); }
.mg-slb-row.me { background: rgba(91,170,230,.18); color: #eafaff; }
.mg-slb-r { width: 22px; text-align: center; color: #e8c46a; font-weight: 800; }
.mg-slb-n { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-slb-v { font-weight: 800; color: #8fd8f5; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.mg-slb-rep { width: 26px; height: 24px; border: none; border-radius: 6px; background: rgba(80,140,230,.3); color: #cfe6ff; cursor: pointer; font-size: 11px; line-height: 1; }
.mg-slb-rep:hover { background: rgba(100,160,255,.5); }
.mg-slb-norep { width: 26px; display: inline-block; }
.mg-slb-mine { margin-top: 5px; border: 1px solid rgba(120,180,255,.3); }
.mg-solo-leaderboard .mg-solo-lb { width: 100%; margin: 0; padding: 12px; border: 1px solid rgba(255,202,96,.16); border-radius: 12px; background: linear-gradient(180deg,rgba(18,21,36,.84),rgba(7,10,20,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.mg-solo-leaderboard .mg-slb-tab { min-height: 42px; border-radius: 8px; background: rgba(255,255,255,.035); }
.mg-solo-leaderboard .mg-slb-tab.active { color: #fff3c8; border-color: rgba(255,205,103,.52); background: linear-gradient(180deg,rgba(170,112,25,.42),rgba(83,48,12,.38)); box-shadow: 0 0 24px rgba(255,187,67,.08); }
.mg-solo-leaderboard .mg-slb-row { min-height: 38px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.025); background: linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
.mg-solo-leaderboard .mg-slb-row:nth-child(-n+3) .mg-slb-r { color: #ffd36e; text-shadow: 0 0 12px rgba(255,190,70,.28); }

.mg-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 320px; }
.mg-loading-spin { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(120,170,255,.18); border-top-color: #5be0e6; animation: mgSpin .8s linear infinite; }
.mg-loading-txt { color: rgba(220,228,245,.7); font-size: 14px; font-weight: 700; }
@keyframes mgSpin { to { transform: rotate(360deg); } }
.mg-compact-result { position: fixed; inset: 0; z-index: 12200; display: flex; align-items: center; justify-content: center; background: rgba(2,5,12,.5); backdrop-filter: blur(2px); }
.mg-cr-panel { position: relative; width: min(560px, 92%); padding: 24px 28px 22px; border-radius: 16px; background: linear-gradient(180deg, rgba(12,18,34,.93), rgba(6,10,22,.97)); border: 1px solid rgba(91,224,230,.3); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 34px rgba(91,224,230,.12); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mg-compact-result.is-win .mg-cr-head { color: #ffe6a3; text-shadow: 0 0 18px rgba(255,200,80,.7); }
.mg-compact-result.is-lose .mg-cr-head { color: #cdd9e6; }
.mg-cr-head { font-size: clamp(28px, 5vw, 46px); font-weight: 900; letter-spacing: .1em; }
.mg-cr-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.mg-tag-team1 { background: rgba(91,140,255,.2); color: #9db8ff; border: 1px solid rgba(91,140,255,.45); }
.mg-tag-team2 { background: rgba(255,90,110,.18); color: #ffb3bd; border: 1px solid rgba(255,90,110,.45); }
.mg-btn-team { cursor: pointer; border: 1px solid rgba(91,140,255,.5); background: rgba(12,18,34,.85); color: #cfe0ff; border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 700; }
.mg-btn-team:hover { background: rgba(91,140,255,.16); }

.mg-dialog-handi { max-width: 560px; width: 92vw; }
.mg-handi-desc { font-size: 12px; color: rgba(200,220,255,.6); margin: -4px 0 10px; }
.mg-handi-body { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; }
.mg-handi-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(120,150,200,.18); border-radius: 9px; }
.mg-handi-name { flex: 1 0 100%; font-size: 13px; font-weight: 700; color: #e7ecf5; }
.mg-handi-row label { font-size: 11.5px; color: #aebccb; display: inline-flex; align-items: center; gap: 4px; }
.mg-handi-row select { background: rgba(4,8,18,.85); color: #d8e4f5; border: 1px solid rgba(120,150,200,.3); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.mg-handi-hold input { accent-color: #ff5a6e; }

.mg-dialog-wz { max-width: 620px; width: 94vw; }
.mg-wz-body { max-height: 60vh; overflow-y: auto; }
.mg-wz-steps { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.mg-wz-step { font-size: 11px; font-weight: 700; color: rgba(200,220,255,.4); padding: 3px 9px; border-radius: 7px; border: 1px solid rgba(120,150,200,.18); }
.mg-wz-step-on { color: #ffe9a8; border-color: rgba(255,210,63,.55); background: rgba(255,210,63,.1); }
.mg-wz-step-done { color: #8ff0f5; border-color: rgba(91,224,230,.4); }
.mg-wz-cards { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mg-wz-card { flex: 1 1 150px; display: flex; gap: 9px; align-items: center; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(120,150,200,.22); background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .15s, background .15s; }
.mg-wz-card:hover { border-color: rgba(91,224,230,.5); }
.mg-wz-card.mg-wz-on { border-color: #ffd23f; background: rgba(255,210,63,.09); box-shadow: 0 0 12px rgba(255,210,63,.18); }
.mg-wz-ic { font-size: 22px; }
.mg-wz-ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-wz-ct b { font-size: 13px; color: #ecf2fb; }
.mg-wz-ct span { font-size: 10.5px; color: rgba(200,220,255,.55); line-height: 1.35; }
.mg-wz-inline { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.mg-wz-row { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #b9c8da; padding: 4px 0; }
.mg-wz-row select { background: rgba(4,8,18,.85); color: #d8e4f5; border: 1px solid rgba(120,150,200,.3); border-radius: 6px; padding: 3px 7px; font-size: 12px; }
.mg-wz-row input[type=checkbox] { accent-color: #ffd23f; }
.mg-wz-customtoggle { width: 100%; margin: 8px 0; cursor: pointer; border: 1px dashed rgba(91,224,230,.4); background: rgba(10,16,30,.6); color: #8ff0f5; border-radius: 9px; padding: 8px; font-size: 12.5px; font-weight: 700; }
.mg-wz-customtoggle.mg-wz-on { border-style: solid; background: rgba(91,224,230,.1); }
.mg-wz-sec { border: 1px solid rgba(120,150,200,.16); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.mg-wz-sect { flex: 1 0 100%; font-size: 12.5px; font-weight: 800; color: #9bd8dd; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.mg-wz-soon { opacity: .45; }
.mg-wz-soonlbl { font-size: 11.5px; color: #aebccb; }
.mg-wz-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; width: 100%; }
.mg-wz-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 9px; border: 1px solid rgba(120,150,200,.18); background: rgba(255,255,255,.03); cursor: pointer; opacity: .45; transition: opacity .15s, border-color .15s; }
.mg-wz-item.mg-wz-on { opacity: 1; border-color: rgba(255,210,63,.5); }
.mg-wz-item img { width: 34px; height: 34px; object-fit: contain; }
.mg-wz-item span { font-size: 10px; color: #cdd9e8; text-align: center; }
.mg-wz-item input { display: none; }
.mg-wz-poolall { cursor: pointer; border: 1px solid rgba(91,224,230,.4); background: rgba(10,16,30,.7); color: #8ff0f5; border-radius: 6px; padding: 2px 9px; font-size: 11px; }
.mg-wz-summary { display: flex; flex-direction: column; gap: 7px; }
.mg-wz-sumrow { display: flex; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(120,150,200,.16); border-radius: 9px; font-size: 13px; color: #b9c8da; }
.mg-wz-sumrow b { color: #ffe9a8; }
.mg-badge-item { background: linear-gradient(135deg,#ffd23f,#ff8a3c); color: #241505; }
.mg-badge-team { background: linear-gradient(135deg,#5b8cff,#ff5a6e); color: #fff; }
.mg-badge-ffa { background: rgba(192,107,255,.25); color: #dfc3ff; border: 1px solid rgba(192,107,255,.5); }

.mg-set-hdr { cursor: pointer; border: 1px solid rgba(120,150,200,.3); background: rgba(12,18,34,.7); color: #cfe0ff; border-radius: 8px; width: 32px; height: 32px; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; transition: border-color .15s, transform .15s; }
.mg-set-hdr:hover { border-color: rgba(91,224,230,.6); transform: rotate(30deg); }
.mg-logout-hdr { color: #ffb5bf; border-color: rgba(255,113,130,.32); }
.mg-logout-hdr:hover { border-color: rgba(255,113,130,.75); color: #fff; transform: none; box-shadow: 0 0 14px rgba(255,113,130,.18); }
.mg-lang-hdr { width: auto !important; flex: none !important; padding: 0 10px; gap: 5px; color: #ffe9a8; border-color: rgba(232,196,106,.45); }
.mg-lang-hdr:hover { transform: none; border-color: rgba(232,196,106,.85); box-shadow: 0 0 14px rgba(232,196,106,.22); }
.mg-lang-cur { font-size: 11px; font-weight: 900; letter-spacing: .06em; font-style: normal; }
#mg-lang-menu { position: fixed; z-index: 100055; width: 148px; display: flex; flex-direction: column; gap: 3px; padding: 7px; background: linear-gradient(168deg, rgba(20,26,44,.98), rgba(8,12,24,.99)); border: 1px solid rgba(232,196,106,.45); border-radius: 11px; box-shadow: 0 16px 44px rgba(0,0,0,.6), 0 0 24px rgba(232,196,106,.12); animation: mgXpIn .16s ease-out; }
.mg-lang-item { display: flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid transparent; background: transparent; color: #cfe0ff; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; text-align: left; }
.mg-lang-item b { font-size: 10px; font-weight: 900; color: #8fa4c4; width: 22px; }
.mg-lang-item span { margin-left: auto; color: #ffe9a8; }
.mg-lang-item:hover { border-color: rgba(232,196,106,.4); background: rgba(232,196,106,.07); }
.mg-lang-item.on { color: #ffe9a8; }
.mg-lang-item.on b { color: #ffe9a8; }
.mg-gset-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px; margin-right: 10px; flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(22, 32, 56, 0.95), rgba(10, 16, 30, 0.95));
  border: 1px solid rgba(91, 224, 230, 0.45);
  border-radius: 10px; cursor: pointer; transition: 0.15s;
  color: #cfe8ff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mg-gset-btn:hover { border-color: #8ff0f5; color: #eafcff; background: linear-gradient(180deg, rgba(30, 46, 76, 0.98), rgba(14, 22, 40, 0.98)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(91, 224, 230, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.mg-gset-btn .mg-gset-ic, .mg-gset-btn img { width: 20px; height: 20px; display: block; }
#mg-nick-ov {
  --mg-gold: #e8c46a; --mg-gold-d: #b07d1f; --mg-ink: #0b0e1a;
  --mg-panel: rgba(18, 22, 38, 0.96); --mg-line: rgba(232, 196, 106, 0.22);
  --mg-text: #ece6d6; --mg-sub: rgba(236, 230, 214, 0.55);
  font-family: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
}
.mg-nick-dlg { width: 400px; }
.mgnk-cur { text-align: center; font-size: 13px; color: #9fb3cc; margin-bottom: 10px; }
.mgnk-cur b { color: #eaf4ff; }
.mgnk-sub { font-size: 12px; color: #7d92b0; line-height: 1.5; margin-bottom: 12px; text-align: center; }
.mgnk-warn { font-size: 12.5px; color: #ffb5bf; line-height: 1.55; margin-bottom: 12px; text-align: center; padding: 9px 10px; border: 1px solid rgba(255,113,130,.35); border-radius: 9px; background: rgba(40,10,16,.5); }
.mgnk-warn b { color: #ffe9a8; }
.mgnk-msg { min-height: 17px; margin-top: 8px; font-size: 12px; font-weight: 700; text-align: center; }
.mg-cm-hdr, .mg-noti-hdr { position: relative; }
.mg-cm-hdr:hover, .mg-noti-hdr:hover { transform: none; border-color: rgba(91,224,230,.7); box-shadow: 0 0 14px rgba(91,224,230,.16); }
.mg-hdr-cnt { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 999px; background: linear-gradient(180deg, #ff7a8d, #d63652); color: #fff; font-size: 10px; font-weight: 900; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 2px 8px rgba(0,0,0,.5); font-style: normal; }
#mg-cm-panel, #mg-noti-panel { position: absolute; top: 64px; right: 12px; bottom: 12px; width: 372px; max-width: calc(100vw - 24px); z-index: 8000; display: flex; flex-direction: column; background: linear-gradient(168deg, rgba(14,22,40,.97), rgba(6,10,22,.985)); border: 1px solid rgba(91,224,230,.34); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(91,224,230,.1); animation: mgCmIn .22s cubic-bezier(.2,.9,.25,1.1); overflow: hidden; }
#mg-noti-panel { bottom: auto; max-height: min(560px, calc(100vh - 90px)); }
@keyframes mgCmIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.mgcm-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid rgba(91,224,230,.2); }
.mgcm-head b { font-size: 15px; font-weight: 900; letter-spacing: .05em; color: #eaf6ff; margin-right: auto; text-shadow: 0 0 14px rgba(91,224,230,.3); }
.mgcm-x { cursor: pointer; border: 0; background: transparent; color: #8fa4c4; font-size: 15px; padding: 4px 8px; border-radius: 7px; }
.mgcm-x:hover { color: #fff; background: rgba(255,255,255,.06); }
.mgcm-tabs { display: flex; gap: 4px; padding: 8px 10px 0; }
.mgcm-tab { flex: 1; cursor: pointer; border: 0; background: transparent; color: #8fa4c4; font-size: 12px; font-weight: 800; padding: 8px 4px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; }
.mgcm-tab.on { color: #8ff0f5; border-bottom-color: #5be0e6; background: rgba(91,224,230,.06); }
.mgcm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; }
.mgcm-addrow, .mgcm-dmrow { display: flex; gap: 7px; margin: 4px 0 8px; }
.mgcm-addrow input, .mgcm-dmrow input { flex: 1; min-width: 0; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(91,224,230,.24); background: rgba(4,9,18,.75); color: #e7ecf5; font-size: 13px; }
.mgcm-addrow input:focus, .mgcm-dmrow input:focus { outline: none; border-color: rgba(91,224,230,.6); }
.mgcm-addrow button, .mgcm-dmrow button { cursor: pointer; border: 1px solid rgba(91,224,230,.45); background: rgba(10,20,36,.9); color: #8ff0f5; border-radius: 9px; padding: 0 14px; font-size: 13px; font-weight: 800; }
.mgcm-addrow button:hover, .mgcm-dmrow button:hover { border-color: rgba(91,224,230,.8); }
.mgcm-sec { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; color: #6d84a3; margin: 10px 2px 6px; text-transform: uppercase; }
.mgcm-row { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 10px; border: 1px solid rgba(120,150,200,.14); background: rgba(10,16,30,.5); margin-bottom: 6px; }
.mgcm-row:hover { border-color: rgba(91,224,230,.35); background: rgba(12,20,38,.7); }
.mgcm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mgcm-info { min-width: 0; flex: 1; }
.mgcm-name { font-size: 13.5px; font-weight: 800; color: #e7ecf5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.mgcm-sub { font-size: 11px; color: #7d92b0; }
.mgcm-emb { flex: none; display: flex; }
.mgcm-acts { display: flex; gap: 4px; flex: none; }
.mgcm-ib { cursor: pointer; width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(120,150,200,.25); background: rgba(8,14,26,.8); color: #a8c2e0; border-radius: 7px; font-size: 13px; padding: 0; }
.mgcm-ib:hover { border-color: rgba(91,224,230,.6); color: #eafcff; }
.mgcm-ib-r:hover { border-color: rgba(255,113,130,.7); color: #ffb5bf; }
.mgcm-bb { cursor: pointer; border: 1px solid rgba(120,150,200,.3); background: rgba(8,14,26,.85); color: #cfe0ff; border-radius: 7px; padding: 5px 10px; font-size: 11.5px; font-weight: 800; }
.mgcm-bb:hover { border-color: rgba(91,224,230,.6); }
.mgcm-ok { border-color: rgba(79,224,106,.5); color: #9af0ae; }
.mgcm-ok:hover { border-color: rgba(79,224,106,.85); }
.mgcm-empty { padding: 14px 6px; text-align: center; color: #5c7089; font-size: 12px; }
.mgcm-dmun { min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 999px; background: #d63652; color: #fff; font-size: 9.5px; font-weight: 900; }
.mgcm-dmhead { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; border-bottom: 1px solid rgba(91,224,230,.16); margin-bottom: 8px; color: #eaf6ff; }
.mgcm-dmlog { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.mgcm-msg { display: flex; }
.mgcm-msg span { max-width: 78%; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: rgba(30,42,66,.85); color: #dfe8f5; font-size: 13px; line-height: 1.4; word-break: break-word; }
.mgcm-msg.me { justify-content: flex-end; }
.mgcm-msg.me span { border-radius: 12px 12px 4px 12px; background: linear-gradient(180deg, rgba(37,92,110,.9), rgba(24,64,80,.9)); color: #ddfbff; }
.mgcm-nbody { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 12px; }
.mgcm-nrow { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgba(120,150,200,.12); background: rgba(10,16,30,.4); margin-bottom: 6px; }
.mgcm-nrow.un { border-color: rgba(91,224,230,.4); background: rgba(16,28,48,.7); box-shadow: inset 3px 0 0 rgba(91,224,230,.7); }
.mgcm-nic { font-size: 17px; flex: none; }
.mgcm-ninfo { flex: 1; min-width: 0; font-size: 12.5px; color: #dfe8f5; }
.mgcm-nacts { display: flex; gap: 4px; flex: none; align-items: center; }
.mgcm-toast b { font-size: 14px; }
.mgcm-toast span { font-size: 12.5px; color: #cfe0ff; font-weight: 700; }
.mgset-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.mgset-x .mgset-icon { width: 24px; height: 24px; margin: 0; }
.mg-ui-icon, .mg-inline-icon, .mg-badge-icon, .mg-mode-icon, .mg-hint-icon,
.mg-modal-icon, .mgsk-icon, .mg-edit-icon {
  display: inline-block; width: 20px; height: 20px; object-fit: contain;
  vertical-align: middle; flex: 0 0 auto; pointer-events: none;
}
.mg-set-hdr .mg-inline-icon { width: 22px; height: 22px; }
.mg-badge-icon { width: 15px; height: 15px; margin-top: -2px; }
.mg-mode-icon, .mg-hint-icon { width: 22px; height: 22px; }
.mg-modal-icon, .mgsk-icon { width: 24px; height: 24px; }
.mg-edit-icon { width: 17px; height: 17px; }
.mgset-wide-btn.mgset-off { opacity: .4; cursor: default; }
.mg-wz-tile { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; font-size: 19px; font-weight: 900; color: #fff; border: 2px solid rgba(255,255,255,.85); }
.mg-wz-tile-r { background: #e3273b; }
.mg-wz-tile-b { background: #2f6bff; }

.mg-ms-ov { position: absolute; inset: 0; z-index: 100003; display: flex; align-items: center; justify-content: center; background: rgba(4,6,12,.93); padding: 16px; }
.mg-ms { display: flex; flex-direction: column; gap: 14px; width: min(620px, 94vw); max-height: 88vh; padding: 22px 24px; border-radius: 14px; background: linear-gradient(180deg, #101a2c, #0a111f); border: 1px solid rgba(91,224,230,.22); box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.mg-ms-head { font-size: 15px; font-weight: 900; letter-spacing: .2em; color: #e8c46a; text-align: center; }
.mg-ms-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mg-ms-score { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 15px; }
.mg-ms-score b { font-weight: 900; color: #dfe8f4; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-ms-score i { font-style: normal; font-size: 30px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.mg-ms-ft { font-size: 11px; font-weight: 900; color: #05070d; background: #e8c46a; border-radius: 4px; padding: 2px 7px; }
.mg-ms-rounds { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; max-height: 46vh; padding: 4px 2px; scrollbar-width: thin; }
.mg-ms-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 9px; background: rgba(10,16,30,.85); border: 1px solid rgba(255,255,255,.06); border-left: 4px solid #58e07a; }
.mg-ms-row.l { border-left-color: #ff5a6e; }
.mg-ms-r { font-size: 13px; font-weight: 900; color: #8fa4c4; width: 32px; }
.mg-ms-oc { font-size: 14px; font-weight: 900; width: 52px; }
.mg-ms-row.w .mg-ms-oc { color: #58e07a; }
.mg-ms-row.l .mg-ms-oc { color: #ff8a95; }
.mg-ms-sc { font-size: 15px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; width: 52px; }
.mg-ms-st { font-size: 12px; color: rgba(160,178,204,.75); font-weight: 700; margin-left: auto; white-space: nowrap; }
.mg-ms-play { flex: 0 0 auto; width: 36px; height: 32px; border-radius: 8px; border: 1px solid rgba(91,224,230,.4); background: rgba(91,224,230,.12); color: #aee9ee; font-size: 13px; cursor: pointer; }
.mg-ms-play:hover { background: rgba(91,224,230,.26); }
.mg-ms-norep { width: 36px; text-align: center; color: rgba(143,164,196,.4); }
.mg-ms-close { align-self: center; min-width: 140px; }

.mg-start-shortcut { position: relative; overflow: hidden; }
.mg-start-shortcut::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: 130% 0; }
.mg-start-shortcut:hover::after { opacity: 1; animation: mgCardSheen1 .7s cubic-bezier(.25,.7,.3,1) 1; }
.mg-start-shortcut:active { transform: translateY(0) scale(.985); }
.mg-room-row { position: relative; overflow: hidden; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.mg-room-row:hover { transform: translateY(-2px); border-color: rgba(91,224,230,.5); box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 18px rgba(91,224,230,.08); }
.mg-room-row::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.09) 50%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 130% 0; }
.mg-room-row:hover::after { opacity: 1; animation: mgCardSheen1 .8s cubic-bezier(.25,.7,.3,1) 1; }
.mg-create-btn, .mg-room-act, .mg-btn-ghost, .mg-back-btn { position: relative; overflow: hidden; transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease, background .13s ease; }
.mg-create-btn:hover, .mg-room-act:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 16px rgba(91,224,230,.14); }
.mg-create-btn:active, .mg-room-act:active, .mg-btn-ghost:active, .mg-back-btn:active { transform: translateY(0) scale(.97); }
.mg-create-btn::after, .mg-room-act::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: 130% 0; }
.mg-create-btn:hover::after, .mg-room-act:hover::after { opacity: 1; animation: mgCardSheen1 .65s cubic-bezier(.25,.7,.3,1) 1; }
.mg-ms-play { transition: transform .13s ease, background .13s ease, box-shadow .13s ease; }
.mg-ms-play:hover { transform: scale(1.12); box-shadow: 0 0 14px rgba(91,224,230,.3); }
@media (prefers-reduced-motion: reduce) {
  .mg-pick:hover::after, .mg-mode-card:hover::after, .mg-game-card:hover::after, .mg-start-shortcut:hover::after, .mg-room-row:hover::after, .mg-create-btn:hover::after, .mg-room-act:hover::after { animation: none; }
}

.mg-fth2 { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 8px 18px 10px; background: linear-gradient(180deg, rgba(10,16,30,.92), rgba(6,9,18,.88)); border: 1px solid rgba(91,224,230,.28); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); pointer-events: none; }
.mg-fth2-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mg-fth2-side.r { flex-direction: row-reverse; }
.mg-fth2-nm { font-size: 13px; font-weight: 800; color: #dfe8f4; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-fth2-side.me .mg-fth2-nm { color: #8ff0f5; }
.mg-fth2-score { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.mg-fth2-score b { font-size: 26px; font-weight: 900; color: #fff; line-height: 1; }
.mg-fth2-score b.lead { color: #ffd36e; text-shadow: 0 0 14px rgba(255,211,110,.45); }
.mg-fth2-score i { font-style: normal; color: rgba(143,164,196,.7); font-size: 18px; font-weight: 900; }
.mg-fth2-chip { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #0a1420; background: linear-gradient(135deg,#8ff0f5,#5be0e6); border-radius: 8px; padding: 2px 9px; white-space: nowrap; }

.mg-lgw { position: fixed; inset: 0; z-index: 100004; display: flex; align-items: center; justify-content: center; background: rgba(4,6,12,.78); backdrop-filter: blur(5px); animation: mgLgwIn .28s ease; }
@keyframes mgLgwIn { from { opacity: 0; } to { opacity: 1; } }
.mg-lgw-band { display: flex; align-items: center; gap: 24px; width: 100%; padding: 28px max(6vw, 24px); background: linear-gradient(90deg, rgba(10,14,26,0), rgba(10,14,26,.97) 10%, rgba(10,14,26,.97) 90%, rgba(10,14,26,0)); box-sizing: border-box; }
.mg-lgw-dc .mg-lgw-band { box-shadow: inset 0 2px 0 rgba(255,90,110,.4), inset 0 -2px 0 rgba(255,90,110,.4); }
.mg-lgw-resume .mg-lgw-band { box-shadow: inset 0 2px 0 rgba(88,224,122,.45), inset 0 -2px 0 rgba(88,224,122,.45); }
.mg-lgw-spin { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 3px solid rgba(255,90,110,.2); border-top-color: #ff5a6e; animation: mgLgwSpin 1s linear infinite; }
.mg-lgw-resume .mg-lgw-spin { border-color: rgba(88,224,122,.25); border-top-color: #58e07a; }
@keyframes mgLgwSpin { to { transform: rotate(360deg); } }
.mg-lgw-txt { flex: 1 1 auto; min-width: 0; }
.mg-lgw-head { font-size: 21px; font-weight: 900; color: #f2eee2; letter-spacing: .5px; }
.mg-lgw-dc .mg-lgw-head { color: #ffb3bc; }
.mg-lgw-resume .mg-lgw-head { color: #9df0b4; }
.mg-lgw-sub { margin-top: 5px; font-size: 14px; font-weight: 800; color: #8fa4c4; }
.mg-lgw-note { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: rgba(255,90,110,.85); }
.mg-lgw-count { flex: 0 0 auto; display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.mg-lgw-count b { font-size: 50px; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 0 20px rgba(255,90,110,.4); }
.mg-lgw-resume .mg-lgw-count b { text-shadow: 0 0 20px rgba(88,224,122,.4); }
.mg-lgw-count span { font-size: 16px; color: #8fa4c4; font-weight: 900; }

.mg-mf2 { position: absolute; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(4,6,12,.87); backdrop-filter: blur(6px); animation: mgLgwIn .25s ease; }
.mg-mf2-title { font-size: 15px; font-weight: 900; letter-spacing: 6px; color: #ffd36e; text-transform: uppercase; text-shadow: 0 0 18px rgba(255,211,110,.4); }
.mg-mf2-ft { font-size: 12px; color: #8fa4c4; letter-spacing: 2px; }
.mg-mf2-band { display: flex; align-items: stretch; justify-content: center; width: 100%; padding: 24px max(5vw, 20px); background: linear-gradient(90deg, rgba(10,14,26,0), rgba(12,18,32,.97) 10%, rgba(12,18,32,.97) 90%, rgba(10,14,26,0)); border-top: 1px solid rgba(91,224,230,.22); border-bottom: 1px solid rgba(91,224,230,.22); box-sizing: border-box; }
.mg-mf2-p { flex: 1 1 0; display: flex; align-items: center; gap: 18px; min-width: 0; padding: 8px 14px; border-radius: 12px; cursor: pointer; transition: background .15s ease; }
.mg-mf2-p:hover { background: rgba(91,224,230,.07); }
.mg-mf2-p.me { justify-content: flex-end; text-align: right; animation: mgMfL .45s cubic-bezier(.2,.8,.25,1); }
.mg-mf2-p.me .mg-mf2-id { order: 2; } .mg-mf2-p.me .mg-mf2-em { order: 1; } .mg-mf2-p.me .mg-mf2-stats { order: 3; }
.mg-mf2-p.opp { flex-direction: row-reverse; justify-content: flex-end; animation: mgMfR .45s cubic-bezier(.2,.8,.25,1); }
@keyframes mgMfL { from { transform: translateX(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mgMfR { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-mf2-mid { flex: 0 0 auto; display: flex; align-items: center; padding: 0 28px; }
.mg-mf2-vs { font-size: 36px; font-weight: 900; color: #ff5a6e; letter-spacing: 2px; text-shadow: 0 0 24px rgba(255,90,110,.5); animation: mgMfVs 1.1s ease infinite alternate; }
@keyframes mgMfVs { from { transform: scale(1); } to { transform: scale(1.14); } }
.mg-mf2-nm { font-size: 21px; font-weight: 900; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-mf2-rank { font-size: 12px; color: #8fa4c4; font-weight: 800; margin-top: 2px; }
.mg-mf2-rp { display: inline-block; margin-top: 4px; font-size: 13px; color: #ffd36e; font-weight: 900; }
.mg-mf2-stats { display: flex; gap: 12px; flex: 0 0 auto; }
.mg-mf2-st { text-align: center; min-width: 56px; padding: 9px 10px; background: rgba(8,12,24,.72); border: 1px solid rgba(91,224,230,.18); border-radius: 10px; }
.mg-mf2-st b { display: block; font-size: 17px; font-weight: 900; color: #aee9ee; }
.mg-mf2-st span { font-size: 9px; letter-spacing: 1.5px; color: #8fa4c4; font-weight: 900; }
.mg-mf2-hint { font-size: 11px; color: rgba(143,164,196,.75); font-weight: 700; }
@media (max-width: 760px) {
  .mg-mf2-stats { display: none; }
  .mg-mf2-nm { font-size: 16px; }
  .mg-mf2-mid { padding: 0 14px; }
  .mg-fth2 { gap: 8px; padding: 6px 12px 8px; }
  .mg-fth2-nm { max-width: 70px; font-size: 11px; }
}

.mg-lgw .mg-lgw-band { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 34px max(6vw, 24px); }
.mg-lgw-who { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mg-lgw-who img, .mg-lgw-who svg { display: block; }
.mg-lgw-nm { font-size: 18px; font-weight: 900; color: #fff; }
.mg-lgw-rp { font-size: 13px; font-weight: 900; color: #ffd36e; background: rgba(255,211,110,.1); border: 1px solid rgba(255,211,110,.35); border-radius: 9px; padding: 3px 10px; }
.mg-lgw .mg-lgw-head { font-size: 23px; }
.mg-lgw .mg-lgw-count { align-items: center; gap: 10px; }
.mg-lgw .mg-lgw-count b { font-size: 56px; }
.mg-lgw .mg-lgw-spin { width: 26px; height: 26px; }
.mg-lgw .mg-lgw-sub { margin-top: 0; font-size: 15px; }
.mg-lgw .mg-lgw-note { margin-top: 0; font-size: 12px; }

.mg-mf3 { position: fixed; inset: 0; z-index: 99997; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 50%, rgba(10,16,30,.94), rgba(3,4,10,.98)); backdrop-filter: blur(7px); overflow: hidden; animation: mf3shake .5s .12s; }
@keyframes mf3shake { 0%,100% { transform: none; } 20% { transform: translate(3px,-2px); } 40% { transform: translate(-3px,2px); } 60% { transform: translate(2px,1px); } 80% { transform: translate(-1px,-1px); } }
.mg-mf3-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: mf3flash .55s ease-out; }
@keyframes mf3flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.mg-mf3-beams { position: absolute; inset: -20%; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 180px, rgba(91,224,230,.03) 180px 260px, transparent 260px 420px, rgba(255,90,110,.025) 420px 500px); animation: mf3beam 7s linear infinite; }
@keyframes mf3beam { from { transform: translateX(0); } to { transform: translateX(340px); } }
.mg-mf3-p { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 70px); min-height: 0; padding: 12px 4vw 12px; cursor: pointer; overflow: hidden; }
.mg-mf3-p.me { background: linear-gradient(180deg, rgba(91,224,230,.12), rgba(91,224,230,.02) 60%, transparent); box-shadow: inset 0 3px 0 rgba(91,224,230,.5); animation: mf3inL .5s cubic-bezier(.2,.85,.25,1) both; }
.mg-mf3-p.opp { background: linear-gradient(0deg, rgba(255,90,110,.12), rgba(255,90,110,.02) 60%, transparent); box-shadow: inset 0 -3px 0 rgba(255,90,110,.5); animation: mf3inR .5s cubic-bezier(.2,.85,.25,1) both; }
@keyframes mf3inL { from { transform: translateX(-9vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mf3inR { from { transform: translateX(9vw); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-mf3-core { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.mg-mf3-em { filter: drop-shadow(0 0 22px rgba(91,224,230,.35)); }
.mg-mf3-p.opp .mg-mf3-em { filter: drop-shadow(0 0 22px rgba(255,90,110,.35)); }
.mg-mf3-nm { font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; }
.mg-mf3-rank { margin-top: 3px; font-size: 13px; font-weight: 800; color: #8fa4c4; letter-spacing: 1px; }
.mg-mf3-rp { display: inline-block; margin-top: 6px; font-size: 16px; font-weight: 900; color: #ffd36e; background: rgba(255,211,110,.1); border: 1px solid rgba(255,211,110,.4); border-radius: 10px; padding: 4px 12px; }
.mg-mf3-stats { display: grid; grid-template-columns: repeat(4, minmax(86px, 118px)); gap: 10px; flex: 0 1 auto; }
.mg-mf3-st { text-align: center; padding: 10px 8px; background: rgba(8,12,24,.78); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.mg-mf3-st b { display: block; font-size: 16px; font-weight: 900; color: var(--stc, #aee9ee); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-mf3-st span { display: block; margin-top: 3px; font-size: 9px; font-weight: 900; letter-spacing: 1.2px; color: #8fa4c4; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-mf3-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; z-index: 2; }
.mg-mf3-vs { position: relative; font-size: clamp(44px, 6vw, 72px); font-weight: 900; letter-spacing: 4px; color: #ff5a6e; text-shadow: 0 0 30px rgba(255,90,110,.65), 0 0 60px rgba(255,90,110,.3); animation: mf3vs .55s cubic-bezier(.2,.9,.3,1.4) both, mf3vsPulse 1.3s .7s ease-in-out infinite alternate; }
@keyframes mf3vs { from { transform: scale(3.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mf3vsPulse { from { transform: scale(1); } to { transform: scale(1.09); } }
.mg-mf3-vs::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: 3px solid rgba(255,255,255,.7); border-radius: 50%; transform: translate(-50%,-50%); animation: mf3ring .8s .25s ease-out both; pointer-events: none; }
@keyframes mf3ring { from { width: 10px; height: 10px; opacity: .9; border-width: 4px; } to { width: 46vw; height: 46vw; opacity: 0; border-width: 1px; } }
.mg-mf3-title { font-size: 14px; font-weight: 900; letter-spacing: 6px; color: #ffd36e; text-transform: uppercase; text-shadow: 0 0 18px rgba(255,211,110,.45); background: rgba(5,8,16,.72); border: 1px solid rgba(255,211,110,.3); border-radius: 12px; padding: 7px 18px; animation: mf3title .4s .3s ease both; }
@keyframes mf3title { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-mf3-gleam { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.09) 50%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: 130% 0; animation: mgCardSheen1 1s .5s cubic-bezier(.25,.7,.3,1) both; }
.mg-mf3-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 11px; font-weight: 700; color: rgba(143,164,196,.8); z-index: 2; }
@media (max-width: 900px) {
  .mg-mf3-p { flex-direction: column; gap: 10px; }
  .mg-mf3-stats { grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 6px; width: 92vw; }
  .mg-mf3-nm { max-width: 60vw; }
}

.mg-mf3-p { flex-direction: column; gap: 12px; padding: 16px 4vw; }
.mg-mf3-p.opp { flex-direction: column-reverse; }
.mg-mf3-id { text-align: center; }
.mg-mf3-nm { max-width: 70vw; }
.mg-mf3-rank { font-size: 14px; letter-spacing: 2px; }
.mg-mf3-rpv { color: #ffd36e; font-weight: 900; }
.mg-mf3-stats { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; width: min(96vw, 1100px); }
.mg-mf3-st { flex: 1 1 0; min-width: 0; max-width: 150px; }
@media (max-width: 900px) {
  .mg-mf3-p { gap: 8px; }
  .mg-mf3-stats { flex-wrap: wrap; gap: 6px; }
  .mg-mf3-st { flex: 1 1 21%; }
  .mg-mf3-em svg, .mg-mf3-em img { width: 92px; height: 92px; }
}

.mg-cm .mg-cm-n{color:#ffd23f;font-size:18px;margin-left:6px;}
.mg-cm-range{width:100%;margin:6px 0 10px;accent-color:#ffd23f;height:22px;cursor:pointer;}
.mg-cm-hint{margin-top:14px;padding:10px 12px;border:1px solid rgba(91,224,230,.25);border-radius:10px;background:rgba(91,224,230,.06);color:#9fb3cc;font-size:12px;line-height:1.5;}
.mg-cm .mg-mode-row{flex-wrap:wrap;}

.mg-cm .mg-cd-body{display:block;}
.mg-cm .mg-mode-btn{white-space:nowrap;}
.mg-cm .mg-mode-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.mg-cm .mg-field-label{margin-top:16px;}
.mg-cm .mg-wz-inline{margin-top:14px;}

.mg-ov-gear-chip b { color: #8ff0f5; text-shadow: 0 0 8px rgba(70,220,240,.5); }
.mg-ov-result-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(20,4,12,.4), rgba(3,2,10,.8)); z-index: 30; }
.mg-ov-result-box { min-width: 340px; max-width: min(500px, calc(100vw - 32px)); padding: 28px 34px 24px; border-radius: 16px; background: linear-gradient(165deg, rgba(14,6,20,.97), rgba(6,4,14,.97)); border: 1px solid rgba(255,60,100,.5); box-shadow: 0 0 48px rgba(255,40,90,.22), 0 0 120px rgba(90,224,230,.08), inset 0 0 28px rgba(120,10,40,.2); text-align: center; }
.mg-ov-result-title { font-size: 34px; font-weight: 900; letter-spacing: 8px; color: #ff5b7f; text-shadow: 0 0 20px rgba(255,50,90,.7), 0 0 60px rgba(255,50,90,.3); }
.mg-ov-result-by { margin-top: 8px; font-size: 14px; font-weight: 700; color: #d8a8bc; }
.mg-ov-result-volt { margin-top: 16px; }
.mg-ov-result-volt b { display: block; font-size: 44px; font-weight: 900; color: #8ff0f5; text-shadow: 0 0 22px rgba(90,224,230,.6); }
.mg-ov-result-volt span { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: #6f9bb0; }
.mg-ov-result-stats { display: flex; justify-content: center; gap: 26px; margin-top: 18px; }
.mg-ov-result-stats > div { display: flex; flex-direction: column; gap: 3px; }
.mg-ov-result-stats b { font-size: 19px; font-weight: 900; color: #ffe4c0; }
.mg-ov-result-stats span { font-size: 11px; color: #8f94a8; }
.mg-ov-result-btns { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.mg-ov-result-ov.collapsed { align-items: flex-end; justify-content: center; padding-bottom: 14px; background: none; pointer-events: none; }
.mg-ov-result-ov.collapsed .mg-ov-result-box { display: none; }
.mg-ov-result-expand { pointer-events: auto; display: none; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 9px; border: 1px solid rgba(255,60,100,.55); background: linear-gradient(165deg, rgba(20,8,18,.95), rgba(8,4,14,.95)); color: #ff9db0; font-weight: 900; font-size: 13px; letter-spacing: 1px; cursor: pointer; box-shadow: 0 0 18px rgba(255,40,90,.25); }
.mg-ov-chat-sys { padding: 3px 8px; margin: 2px 0; border-left: 3px solid #ff5b7f; background: rgba(120,20,50,.18); border-radius: 4px; font-size: 12px; color: #d8b8c4; }
.mg-ov-chat-sys b { color: #ff9db0; }
.mg-ov .mg-br-attacker.show { background: linear-gradient(90deg, rgba(120,10,40,.92), rgba(50,6,24,.92)); border-color: rgba(255,90,130,.6); }
.mg-pick-ov { position: relative; overflow: hidden; }
.mg-pick-ov::after { content: 'NEW'; position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 900; letter-spacing: 1px; padding: 3px 8px; border-radius: 6px; color: #06121c; background: linear-gradient(135deg, #5be0e6, #b45bff); box-shadow: 0 0 12px rgba(120,140,255,.6); }
.mg-pick-ov .mg-pick-name { color: #9ff0f5; text-shadow: 0 0 10px rgba(90,224,230,.5); }

#mg-global-actions[hidden] { display: none !important; }
#mg-global-actions {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 110000;
}
#mg-global-actions .mga-logout {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 113, 130, .4);
  border-radius: 10px;
  appearance: none;
  background: rgba(19, 9, 18, .9);
  color: #ffb5bf;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
  font: 900 10.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  backdrop-filter: blur(9px);
  transition: color .13s ease, border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
#mg-global-actions .mga-logout:hover {
  border-color: rgba(255, 113, 130, .76);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 113, 130, .18);
}
#mg-global-actions .mga-logout:active { transform: translateY(1px) scale(.985); }
#mg-global-actions .mga-logout:disabled { cursor: wait; opacity: .55; }
#mg-global-actions .mga-logout-mark {
  position: relative;
  width: 13px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-right: 0;
  border-radius: 2px 0 0 2px;
}
#mg-global-actions .mga-logout-mark::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 1.5px;
  top: 5px;
  left: 6px;
  background: currentColor;
  box-shadow: 4px -3px 0 -1px currentColor, 4px 3px 0 -1px currentColor;
}

@media (max-width: 520px) {
  #mg-global-actions { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  #mg-global-actions .mga-logout { min-height: 32px; padding: 0 9px; }
}

.mg-close-btn.mg-image-action,
.mg-help-close.mg-image-action,
.mg-pc-close.mg-image-action {
  appearance: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  line-height: 0;
  overflow: visible;
}
.mg-close-btn.mg-image-action:hover,
.mg-help-close.mg-image-action:hover,
.mg-pc-close.mg-image-action:hover {
  border: 0;
  background: transparent;
}
.mg-close-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.48));
  transition: transform .16s cubic-bezier(.2,.8,.2,1), filter .16s ease;
}
.mg-image-action:hover .mg-close-image {
  transform: translateY(-2px) scale(1.075);
  filter: brightness(1.2) drop-shadow(0 0 15px rgba(91,224,230,.48));
}
.mg-image-action:active .mg-close-image { transform: translateY(1px) scale(.96); }
.mg-help-close.mg-image-action { top: 10px; right: 12px; }
.mg-pc-close.mg-image-action { top: 8px; right: 10px; }

.mg-mode-cards-practice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-mode-card { width: 100%; min-width: 0; box-sizing: border-box; }
.mg-mode-cards-practice > .mg-mode-card:nth-child(3) {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 1;
  min-height: 210px;
}
.mg-mode-history {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  max-width: 100%;
  margin-top: 4px;
  padding: 6px 9px;
  border: 1px solid rgba(143,240,245,.3);
  border-radius: 8px;
  background: rgba(3,9,18,.76);
  color: #c9f8fb;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 850;
  text-align: left;
  box-sizing: border-box;
}
.mg-mode-history-icon { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }

.mg-multi-grid .mg-pick {
  min-height: 220px;
  height: clamp(220px, 26vh, 260px);
  justify-content: center;
  padding: 24px 30px 24px 32px;
  background-position: center center;
}
.mg-multi-grid .mg-pick::before {
  background: linear-gradient(90deg, rgba(2,5,12,.94) 0%, rgba(2,5,12,.8) 22%, rgba(2,5,12,.42) 42%, rgba(2,5,12,.06) 60%, rgba(2,5,12,0) 70%);
}
.mg-multi-grid .mg-art-league, .mg-multi-grid .mg-art-quickplay, .mg-multi-grid .mg-art-bot, .mg-multi-grid .mg-art-room { background-size: cover; background-position: center 42%; }
.mg-multi-grid .mg-pick-icon {
  left: 32px;
  top: 50%;
  bottom: auto;
  width: 96px;
  height: 96px;
  object-fit: contain;
  object-position: center;
  transform: translateY(-50%);
}
.mg-multi-grid .mg-pick-copy { margin-left: 124px; }
.mg-multi-grid .mg-pick:hover .mg-pick-icon {
  transform: translateY(calc(-50% - 3px)) scale(1.045);
}

.mg-start-image-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(288px, 100%);
  min-width: 240px;
  aspect-ratio: 4 / 1;
  min-height: 64px;
  padding: 8px 30px 10px;
  border: 0;
  border-radius: 0;
  background: transparent url(/img/minigames/tetra/generated/ui-button-skins-v1/btn-primary-normal.png) center / 100% 100% no-repeat;
  color: #effdff;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.36));
  transition: transform .13s ease, filter .13s ease;
  box-sizing: border-box;
}
.mg-start-image-action span {
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0,0,0,.82), 0 0 12px rgba(91,224,230,.34);
}
.mg-start-image-action:hover {
  background-image: url(/img/minigames/tetra/generated/ui-button-skins-v1/btn-primary-hover.png);
  transform: translateY(-3px) scale(1.018);
  filter: brightness(1.08) drop-shadow(0 0 17px rgba(91,224,230,.34));
}
.mg-start-image-action:active {
  background-image: url(/img/minigames/tetra/generated/ui-button-skins-v1/btn-primary-press.png);
  transform: translateY(1px) scale(.985);
}
.mg-start-image-action:disabled { transform: none; filter: grayscale(.45); opacity: .5; cursor: not-allowed; }

.mg-danger-image-action {
  appearance: none;
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: min(210px, 100%);
  min-width: 178px;
  aspect-ratio: 4 / 1;
  min-height: 52px;
  padding: 8px 24px 10px;
  border: 0;
  border-radius: 0;
  background: transparent url(/img/minigames/tetra/generated/ui-button-skins-v1/btn-danger-normal.png) center / 100% 100% no-repeat;
  color: #fff1f3;
  cursor: pointer;
  filter: drop-shadow(0 9px 16px rgba(0,0,0,.34));
  transition: transform .13s ease, filter .13s ease;
  box-sizing: border-box;
}
.mg-danger-image-action span {
  font-size: 17px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 10px rgba(255,90,110,.28);
}
.mg-danger-image-action:hover {
  background-image: url(/img/minigames/tetra/generated/ui-button-skins-v1/btn-danger-hover.png);
  transform: translateY(-3px) scale(1.018);
  filter: brightness(1.08) drop-shadow(0 0 16px rgba(255,90,110,.3));
}
.mg-danger-image-action:active {
  background-image: url(/img/minigames/tetra/generated/ui-button-skins-v1/btn-danger-press.png);
  transform: translateY(1px) scale(.985);
}

@media (max-width: 720px) {
  .mg-mode-cards { width: 100%; max-width: none; padding: 0; }
  .mg-mode-cards-practice { grid-template-columns: minmax(0, 1fr); }
  .mg-mode-cards-practice > .mg-mode-card:nth-child(3) {
    grid-column: auto;
    aspect-ratio: 2 / 1;
    min-height: 190px;
  }
  .mg-mode-history { font-size: 10.5px; padding: 5px 7px; }
  .mg-multi-grid .mg-pick {
    min-height: 196px;
    height: 210px;
    padding: 20px 18px;
  }
  .mg-multi-grid .mg-pick-icon { left: 18px; width: 74px; height: 74px; }
  .mg-multi-grid .mg-pick-copy { margin-left: 88px; }
  .mg-multi-grid .mg-pick-name { font-size: 18px; }
  .mg-start-image-action { min-width: 220px; width: min(270px, 100%); min-height: 58px; }
  .mg-start-image-action span { font-size: 20px; }
  .mg-danger-image-action { min-width: 168px; width: min(198px, 100%); min-height: 50px; padding: 7px 20px 9px; }
  .mg-danger-image-action span { font-size: 16px; }
  .mg-close-btn.mg-image-action { width: 40px; height: 40px; min-width: 40px; }
}

.tetra-overlay-px { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 16, 0.78); backdrop-filter: blur(3px); }
.tetra-overlay-px .tetra-end-card { box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 40px rgba(91,224,230,.15); }
.tetra-end-score { color: #ffe27a; text-shadow: 0 0 26px rgba(255,210,80,.45); }
.tetra-rec-slot { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 2px; min-height: 4px; }
.tetra-rec-badge { font-size: 12.5px; font-weight: 900; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; }
.tetra-rec-best { color: #0d2b12; background: linear-gradient(180deg, #9dffb0, #37c65a); box-shadow: 0 4px 18px rgba(70,220,110,.35); animation: mgRecPop .5s cubic-bezier(.2,1.6,.4,1) 1; }
.tetra-rec-world { color: #2a1d04; background: linear-gradient(180deg, #ffe792, #d89b23); box-shadow: 0 4px 20px rgba(232,196,106,.45); animation: mgRecPop .5s cubic-bezier(.2,1.6,.4,1) 1; }
.tetra-rec-prev { color: #9fb3cc; background: rgba(20, 28, 48, 0.85); border: 1px solid rgba(120,150,200,.3); }
@keyframes mgRecPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tetra-end-rhint { margin-top: 10px; font-size: 12px; color: #7d92b0; text-align: center; letter-spacing: .04em; }

.mg-header { min-width: 0; }
.mg-header .mg-back-btn, .mg-header .mg-gset-btn { white-space: nowrap; flex: 0 0 auto; }
@media (min-width: 561px) {
  .mg-header .mg-title { position: static; left: auto; top: auto; transform: none; max-width: none; flex: 1 1 auto; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.mg-hdr-side { flex: 0 1 auto; min-width: 0; overflow: hidden; justify-content: flex-end; }
.mg-hdr-side .mg-hdr-rank { min-width: 0; overflow: hidden; flex: 0 1 auto; }
.mg-hdr-side .mg-hdr-rank .mg-card-rank-txt { overflow: hidden; text-overflow: ellipsis; }
.mg-hdr-side .mg-hdr-level { flex: 0 0 auto; }
@media (max-width: 1500px) {
  .mg-hdr-side .mg-myrank-badges img, .mg-hdr-side .mg-myrank-badges canvas, .mg-hdr-side .mg-myrank-badges svg { width: 24px !important; height: 24px !important; }
  .mg-hdr-rank .mg-card-rank-txt { font-size: 12.5px; }
}
@media (max-width: 1250px) {
  .mg-hdr-side .mg-myrank-badges { display: none !important; }
  .mg-hdr-rank .mg-card-rank-txt { max-width: 120px; }
}
@media (max-width: 1000px) {
  .mg-hdr-level .mg-lv-bar { display: none; }
  .mg-hdr-rank .mg-card-rank-txt { display: none; }
}

.mgsk-px { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.mgsk-px-grid { display: grid; grid-template-columns: 20px 20px; grid-template-rows: 20px 20px; gap: 3px; padding: 6px; background: rgba(4, 8, 18, 0.85); border-radius: 8px; }
.mgsk-px-grid i { display: block; width: 20px; height: 20px; }
.mgsk-px-lbl { font-size: 11px; font-weight: 800; color: #cfe0f0; letter-spacing: 0.03em; }

.mg-badge-lock { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 7px; background: rgba(232,196,106,.14); border: 1px solid rgba(232,196,106,.4); vertical-align: -2px; }
.mg-badge-lock .mg-badge-icon { width: 13px; height: 13px; }