/* ==========================================================================
   minigame-lobby — 미니게임 첫 화면 (minigame.html)
   근거: ../04-페이지/미니게임.md
   whaley 에는 업/다운 로비가 없다(/futures 로 바로 들어감). 스카이시티는 네 갈래를
   큰 카드로 먼저 보여 주고 고르게 한다. 카드 틀은 메인 프로모 카드와 같은 결
   (남색 판 + 갈래 색 번짐 + 투명 3D 그림)로 맞췄다. 공통 조각은 minigame.css.
   ========================================================================== */
:root{
  --mg-card-h:     268px;
  --mg-card-pad:   28px;
  --mg-art-w:      44%;      /* 카드 폭 대비 그림 폭 — 1180 창에서도 글이 눌리지 않게 */
  --mg-art-max:    290px;
  --mg-body-w:     58%;
  --mg-spark-h:    52px;
  --mg-cta-h:      44px;
  --mg-hero-title: 40px;
  --mg-card-title: 24px;
  --mg-price:      22px;
  --mg-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --mg-dur:        .45s;
}

.mg-lobby{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }   /* ⚠ 열을 minmax(0,1fr) 로 못박는다 — 기본(auto)이면 카드 안 차트 폭만큼 줄이 늘어나 화면 밖으로 밀렸다 */

/* ---- 머리 : 제목 · 소개 · 3단계 ---------------------------------------- */
.mg-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:34px 36px 30px; border-radius:var(--mg-r-lg);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(58,91,217,.28), transparent 60%),
    radial-gradient(40% 90% at 78% 100%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 100%);
  border:1px solid var(--line);
}
/* 뒤에 깔리는 오르내림 선 — 무엇을 하는 곳인지 한눈에 */
.mg-hero::after{
  content:""; position:absolute; right:-20px; bottom:-10px; z-index:-1;
  width:520px; height:180px; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 180'%3E%3Cpath d='M0 150 L40 132 L70 140 L110 104 L150 116 L190 80 L230 92 L270 60 L310 74 L350 40 L390 56 L430 28 L470 38 L520 10' fill='none' stroke='%23fcb826' stroke-width='3' stroke-linejoin='round' opacity='.55'/%3E%3Cpath d='M0 150 L40 132 L70 140 L110 104 L150 116 L190 80 L230 92 L270 60 L310 74 L350 40 L390 56 L430 28 L470 38 L520 10 L520 180 L0 180Z' fill='%23fcb826' opacity='.07'/%3E%3C/svg%3E") no-repeat right bottom / contain;
}
.mg-hero__eyebrow{
  font-family:var(--font-display); font-size:var(--mg-fs-md); font-weight:800;
  letter-spacing:.18em; color:var(--accent-fg);
}
.mg-hero__title{ margin-top:6px; font-size:var(--mg-hero-title); font-weight:900; line-height:1.15; letter-spacing:-.02em; }
.mg-hero__title span{
  background:linear-gradient(180deg, #ffe08a 0%, var(--accent) 55%, var(--accent-fg) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mg-hero__lead{ max-width:620px; margin-top:12px; font-size:var(--mg-fs-md); line-height:1.7; color:var(--text-sub); }
.mg-hero__lead b{ font-weight:900; }
.mg-steps{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; counter-reset:none; }
.mg-steps li{
  display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center;
  padding:10px 16px 10px 10px; border-radius:var(--mg-r);
  background:color-mix(in srgb, var(--bg-deep) 55%, transparent); border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.mg-steps i{
  grid-row:span 2; width:30px; height:30px; border-radius:var(--r-full);
  display:grid; place-items:center; font-style:normal;
  font-family:var(--font-display); font-size:var(--mg-fs-lg); font-weight:800;
  background:var(--accent); color:var(--accent-ink);
}
.mg-steps b{ font-size:var(--mg-fs-base); font-weight:900; line-height:1.3; }
.mg-steps span{ font-size:var(--mg-fs-sm); color:var(--text-sub); line-height:1.3; }

/* ---- 큰 카드 4장 (2 × 2) ------------------------------------------------ */
.mg-cats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.mg-cat{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:var(--mg-card-h); padding:var(--mg-card-pad);
  display:flex; border-radius:var(--mg-r-lg);
  background:
    radial-gradient(70% 90% at 88% 40%, color-mix(in oklab, var(--c) 30%, transparent), transparent 62%),
    linear-gradient(155deg, color-mix(in oklab, var(--c) 7%, var(--surface)) 0%, var(--bg-deep) 100%);
  border:1px solid color-mix(in oklab, var(--c) 22%, var(--line));
  box-shadow:var(--shadow-card);
  transition:border-color var(--t), box-shadow var(--t);
}
/* 옅은 격자 — 시세판 느낌 */
.mg-cat::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgb(var(--fg-rgb) / .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--fg-rgb) / .035) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(90deg, transparent 35%, #000 80%);
          mask-image:linear-gradient(90deg, transparent 35%, #000 80%);
}
.mg-cat:hover{
  border-color:color-mix(in oklab, var(--c) 55%, var(--line));
  box-shadow:var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--c) 25%, transparent), 0 18px 48px -18px var(--c);
}
.mg-cat:focus-visible{ outline:2px solid var(--accent-line); outline-offset:3px; }

.mg-cat__glow{
  position:absolute; right:8%; top:50%; z-index:-1;
  width:240px; height:240px; border-radius:var(--r-full);
  background:radial-gradient(circle, color-mix(in oklab, var(--c) 45%, transparent) 0%, transparent 70%);
  transform:translateY(-50%); filter:blur(8px); opacity:.7;
  transition:opacity var(--mg-dur) var(--mg-ease-out), transform var(--mg-dur) var(--mg-ease-out);
}
.mg-cat__art{
  position:absolute; right:-6px; top:50%; z-index:-1;
  width:var(--mg-art-w); max-width:var(--mg-art-max); height:auto;
  transform:translateY(-50%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));
  transition:transform var(--mg-dur) var(--mg-ease-out);
  pointer-events:none;
}
.mg-cat:hover .mg-cat__art{ transform:translateY(-54%) scale(1.04) rotate(-1.5deg); }
.mg-cat:hover .mg-cat__glow{ opacity:1; transform:translateY(-50%) scale(1.12); }

.mg-cat__body{ width:var(--mg-body-w); display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.mg-cat__syms{ display:flex; align-items:center; }
.mg-cat__syms .ud-sym-ico{ margin-right:-6px; box-shadow:0 0 0 2px var(--bg-deep), inset 0 0 0 1px color-mix(in oklab, var(--c) 35%, transparent); }
.mg-cat__syms em{ margin-left:14px; font-style:normal; font-size:var(--mg-fs-sm); font-weight:800; color:var(--text-sub); }
.mg-cat__title{ margin-top:4px; font-size:var(--mg-card-title); font-weight:900; line-height:1.25; letter-spacing:-.01em; }
.mg-cat__desc{ font-size:var(--mg-fs-base); line-height:1.55; color:var(--text-sub); }

.mg-cat__live{
  width:100%; margin-top:4px; padding:10px 12px 6px; border-radius:var(--mg-r);
  background:color-mix(in srgb, var(--bg-deep) 60%, transparent); border:1px solid var(--line);
}
.mg-cat__quote{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.mg-cat__quote small{ width:100%; font-size:var(--mg-fs-sm); font-weight:700; color:var(--mg-t5); }
.mg-cat__quote b{ font-size:var(--mg-price); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mg-spark{ display:block; width:100%; height:var(--mg-spark-h); margin-top:4px; }

.mg-cat__cta{
  margin-top:auto; height:var(--mg-cta-h); padding:0 14px 0 18px; border-radius:var(--mg-r);
  display:inline-flex; align-items:center; gap:4px;
  background:var(--accent); color:var(--accent-ink); font-size:var(--mg-fs-base); font-weight:900;
  box-shadow:inset 0 -3px 0 0 var(--accent-fg), inset 0 2px 0 0 rgba(255,255,255,.45), var(--glow-gold);
  transition:background var(--t-fast);
}
.mg-cat__cta svg{ width:18px; height:18px; transition:transform var(--t-fast); }
.mg-cat:hover .mg-cat__cta{ background:color-mix(in srgb, var(--gold) 75%, #fff); }
.mg-cat:hover .mg-cat__cta svg{ transform:translateX(3px); }

/* ---- 아래 띠 : 진행 중 라운드 · 최근 결과 -------------------------------- */
.mg-strip__head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.mg-strip__head h2{ font-size:var(--fs-xl); font-weight:900; }
.mg-strip__head span{ font-size:var(--mg-fs-sm); color:var(--mg-t5); }
.mg-strip__track{ gap:10px; padding-bottom:4px; }

.mg-oc{
  flex:none; width:210px; padding:12px 14px; border-radius:var(--mg-r);
  display:grid; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--line-strong);
  font-size:var(--mg-fs-sm); font-variant-numeric:tabular-nums;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.mg-oc:hover{ background:var(--surface-2); }
.mg-oc.is-win{ border-left-color:var(--mg-up); }
.mg-oc.is-lose{ border-left-color:var(--mg-down); }
.mg-oc__top{ display:flex; align-items:center; gap:7px; }
.mg-oc__top b{ font-weight:900; }
.mg-oc__top .mg-side{ margin-left:auto; }
.mg-oc__row{ display:flex; justify-content:space-between; color:var(--text-sub); }
.mg-oc__row b{ color:var(--text); font-weight:800; }
.mg-oc__foot{ display:flex; justify-content:space-between; padding-top:6px; border-top:1px solid var(--line); }
.mg-oc__foot b{ color:var(--accent-fg); font-weight:900; }
.mg-oc__foot em{ font-style:normal; font-weight:900; }
.mg-oc.is-win .mg-oc__foot em{ color:var(--mg-up); }
.mg-oc.is-lose .mg-oc__foot em{ color:var(--mg-down); }

@media (prefers-reduced-motion:reduce){
  .mg-cat:hover .mg-cat__art, .mg-cat:hover .mg-cat__glow{ transform:translateY(-50%); }
}