/* ═══════════════════════════════════════════════════════════════════════════
   미니게임 — 좌하단 도트 강아지와 뼈다귀 돌림판
   ═══════════════════════════════════════════════════════════════════════════

   왜 style.css가 아니라 별도 파일인가 —
     이 저장소는 스타일시트 한 장(style.css)을 쓰는 것이 관례다. 여기서 의도적으로
     벗어났다. style.css의 ?v= 동일성을 강제하는 테스트가 다섯 군데(test-appbar ·
     test-list-ui · test-workload · test-skeleton · test-splash)에 하드코딩돼 있어,
     장난감 하나를 고칠 때마다 3,474줄짜리 전역 파일의 버스터가 올라간다. 그러면
     관계없는 페이지 전부의 CSS 캐시가 매번 깨진다. 미니게임은 그 값을 치를 만한
     기능이 아니다.

   레트로 팔레트는 전역 :root를 오염시키지 않도록 이 파일 안에서 --mg-로 따로 둔다.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* 2000년대 게임 UI — 채도 높은 원색과 두꺼운 검정 테두리 */
  --mg-ink:      #1A1A1A;   /* 테두리·글자. 순검정보다 살짝 눅여 눈이 덜 아프다 */
  --mg-paper:    #F2E9D8;   /* 대화상자 바탕(빛바랜 종이) */
  --mg-paper-2:  #E4D7BF;   /* 눌린 면 */
  --mg-red:      #E23B2E;
  --mg-blue:     #3FA9D8;
  --mg-shadow:   rgba(0,0,0,0.45);
}

/* ── 좌하단 위젯 ────────────────────────────────────────────────────────────
   사이드바가 좌측 전체 높이를 차지하므로(.sidebar{inset:0 auto 0 0}) 코너에 그냥
   붙이면 사이드바 푸터 위에 얹힌다. .progress-line이 같은 문제를 푼 방식대로
   사이드바 폭만큼 밀고, 접힘 상태에 따라 같이 움직인다. */
.mg-widget {
  position: fixed;
  bottom: var(--sp-6);
  left: calc(var(--sb-w) + var(--sp-4));
  /* 9999가 quick-assign 메뉴·publish 팝업·admin 토스트에 실제로 쓰인다.
     위젯은 그것들 **아래**여야 한다 — 장식이 기능을 가리면 안 된다. */
  z-index: 9990;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: left var(--t-n) var(--ease), transform var(--t-f) var(--ease);
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.18));
}
.sb-collapsed .mg-widget { left: calc(var(--sb-w-col) + var(--sp-4)); }

.mg-widget:hover  { transform: translateY(-3px); }
.mg-widget:active { transform: translateY(0); }
.mg-widget:focus-visible {
  outline: 3px solid var(--mg-blue);
  outline-offset: 3px;
}

.mg-widget__canvas {
  display: block;
  /* 캔버스를 CSS로 줄일 때 보간이 걸리면 애써 만든 도트가 흐려진다 */
  image-rendering: pixelated;
}

/* 스플래시가 떠 있는 동안은 감춘다.
   #eySplash는 z-index 1200이고 위젯은 9990이라 z-index로는 위젯이 이긴다. 게다가
   inert는 #layout에만 걸려서(splash.js) body 직속인 이 버튼은 스플래시 중에도
   눌린다. 그래서 쌓임 순서가 아니라 표시 자체를 막는다. */
html.ey-splashing .mg-widget,
html.ey-splashing .mg-backdrop { display: none !important; }

/* ── 모달 ───────────────────────────────────────────────────────────────────
   9999(quick-assign 메뉴 등) 위에 확실히 올라와야 해서 10000/10001을 쓴다.
   1001~1199 대역으로는 그 요소들에 뚫린다 — 실측으로 확인한 값이다. */
.mg-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--mg-shadow);
}
/* hidden 속성이 display를 이기도록 못 박는다. HTML에 인라인 display를 쓰지 않는
   것이 이 저장소 규칙이라(test-workload.js가 검사한다) 가드를 여기에 둔다. */
.mg-backdrop[hidden] { display: none !important; }

.mg-panel {
  position: relative;
  z-index: 10001;
  width: min(520px, 100%);
  max-height: calc(100vh - var(--sp-8));
  overflow: auto;
  background: var(--mg-paper);
  color: var(--mg-ink);
  /* 둥근 모서리를 쓰지 않는다 — 각진 테두리가 이 시절 UI의 인상을 만든다 */
  border: 4px solid var(--mg-ink);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.35);
}
.mg-panel:focus { outline: none; }

.mg-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--mg-ink);
}
.mg-panel__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mg-paper);
}
.mg-panel__body { padding: var(--sp-4); }

/* ── 버튼 ── 눌리는 느낌을 그림자 위치로 낸다 (2000년대 위젯의 관용 표현) */
.mg-btn {
  font: inherit;
  font-weight: 800;
  padding: var(--sp-2) var(--sp-4);
  color: var(--mg-ink);
  background: var(--mg-paper-2);
  border: 3px solid var(--mg-ink);
  box-shadow: 3px 3px 0 var(--mg-ink);
  cursor: pointer;
  transition: transform var(--t-f) var(--ease), box-shadow var(--t-f) var(--ease);
}
.mg-btn:hover:not(:disabled) { background: #EFE2C6; }
.mg-btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--mg-ink);
}
.mg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mg-btn:focus-visible { outline: 3px solid var(--mg-blue); outline-offset: 2px; }

.mg-btn--close {
  padding: 2px 8px;
  color: var(--mg-paper);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 16px;
}
.mg-btn--close:hover:not(:disabled) { background: transparent; color: var(--mg-red); }
.mg-btn--go, .mg-btn--spin { background: var(--mg-red); color: #fff; }
.mg-btn--go:hover:not(:disabled), .mg-btn--spin:hover:not(:disabled) { background: #C93125; }

/* ── 참가자 고르기 ── */
.mg-note { margin: 0 0 var(--sp-3); font-size: 13px; }

.mg-pick__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-1);
  max-height: 260px;
  overflow: auto;
  padding: var(--sp-2);
  border: 3px solid var(--mg-ink);
  background: #fff;
}
.mg-pick__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
}
.mg-pick__row:hover { background: var(--mg-paper-2); }
.mg-pick__box { width: 15px; height: 15px; accent-color: var(--mg-red); cursor: pointer; }
.mg-pick__name { font-size: 13px; font-weight: 600; }

.mg-pick__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.mg-pick__count { font-size: 12px; font-weight: 700; }

/* ── 돌림판 ── */
.mg-wheel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.mg-wheel__canvas {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;   /* 좁은 화면에서 줄어도 도트를 유지한다 */
  cursor: pointer;
}
.mg-wheel__foot { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.mg-wheel__result { margin: 0; min-height: 22px; text-align: center; }
.mg-wheel__result-label {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--mg-red);
}
.mg-wheel__result-name { font-size: 15px; font-weight: 800; }

/* ── 움직임 줄이기 ──
   전역 킬 스위치가 있지만 이 기능은 회전이 본체라 따로 다룬다. JS도 같은 질문을 해서
   회전을 건너뛰고 결과만 보여준다 — 여기서는 남은 전환만 끈다. */
@media (prefers-reduced-motion: reduce) {
  .mg-widget, .mg-btn { transition: none; }
  .mg-widget:hover { transform: none; }
}

/* ── MOBILE PASS (≤767px) ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 모바일에선 사이드바가 화면 밖으로 빠져 있으므로 코너에 붙인다 */
  .mg-widget { left: var(--sp-4) !important; bottom: var(--sp-4); }
  /* 서랍이 열리면 위젯이 그 위를 덮는다(9990 > 300). 예전에는 이때 위젯을 숨겼는데,
     그러면 모바일에서 메뉴를 펼친 순간 강아지가 사라져 찾을 수가 없다. 숨기는 대신
     데스크톱과 똑같이 서랍 폭만큼 오른쪽으로 민다 — 메뉴를 가리지 않으면서 계속 보인다.
     열림 표시는 .sidebar 자신에게 붙고(nav.js) 위젯은 body 직속이라 형제 결합자로는
     닿지 않는다. :has()가 유일한 순수 CSS 경로다. 못 쓰는 브라우저에서는 이 규칙만
     무시되어 위젯이 코너에 그대로 남는다 — 예전처럼 사라지지는 않는다. */
  body:has(.sidebar.is-open) .mg-widget {
    left: calc(var(--sb-w) + var(--sp-4)) !important;
  }
  .mg-panel { width: 100%; }
  .mg-pick__list { grid-template-columns: 1fr 1fr; max-height: 200px; }
}