/* 싱글 게임 공통 틀 "게임 집중 화면" (2026-10-28, 디자인 D 2차).
   큰 머리 배너/아이콘을 없애고: 위에 얇은 게임 바(← · 아이콘 · 이름 · 숫자들 · ?/↻), 가운데 큰 놀이판,
   아래 한 줄 안내. 결과는 놀이판 위에 뜨는 결과 카드(game-ui.js JoyGame.result).
   게임마다 <main class="gx" style="--acc:#..; --acc2:#.."> 로 강조색만 바꾼다. */

.gx{
  --acc:#45e6ff;
  --acc2:#9b7bff;
  position:relative;
  z-index:10;
  max-width:760px;
  margin:0 auto;
  padding:18px clamp(12px,4vw,24px) 60px;
  isolation:isolate;
}
/* 놀이판 뒤 은은한 강조색 빛 (천천히 숨쉬듯) */
.gx::before{
  content:'';
  position:fixed;
  z-index:-1;
  inset:0;
  background:
    radial-gradient(600px 420px at 50% 42%, color-mix(in srgb, var(--acc) 13%, transparent), transparent 70%),
    radial-gradient(520px 380px at 70% 70%, color-mix(in srgb, var(--acc2) 11%, transparent), transparent 70%);
  animation:gxBreath 9s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes gxBreath{ to{ opacity:.55; transform:scale(1.06); } }

/* ---------- 게임 바 ---------- */
.gx-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 8px 10px;
  border-radius:20px;
  background:rgba(12,15,26,0.78);
  border:1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,0.9);
}
.gx-back{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:none;
  border-radius:12px;
  color:var(--sub);
  text-decoration:none;
  font-size:18px;
  transition:background .2s, color .2s;
}
.gx-back:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.gx-ic{ width:34px; height:34px; flex:none; object-fit:contain; }
.gx-title{
  margin:0;
  font-size:17px;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#fff;
  white-space:nowrap;
}
.gx-stats{ display:flex; gap:6px; margin-left:auto; }
.gx-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:62px;
  padding:5px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
}
.gx-stat span{ font-size:10.5px; font-weight:700; color:var(--sub); }
.gx-stat b{
  font-size:18px;
  font-weight:900;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  color:#fff;
  transition:color .3s, transform .25s cubic-bezier(.3,1.6,.5,1);
}
.gx-stat b.bump{ transform:scale(1.25); color:var(--acc); }
.gx-stat b.warn{ color:var(--danger); }
.gx-actions{ display:flex; gap:6px; }
.gx-btn{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);
  color:#fff;
  font:800 16px var(--font);
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.gx-btn:hover{ background:rgba(255,255,255,0.12); }
.gx-btn:active{ transform:scale(.92); }
.gx-btn.spin{ animation:gxSpin .5s ease; }
@keyframes gxSpin{ to{ transform:rotate(-360deg); } }

/* ---------- 놀이판 ---------- */
.gx-stage{
  position:relative;
  margin-top:16px;
  padding:clamp(18px,4vw,30px);
  border-radius:28px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, rgba(15,19,32,0.94), rgba(9,12,21,0.94));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06);
  text-align:center;
}
.gx-stage.shake{ animation:shake .4s ease; }
.gx-hint{
  min-height:22px;
  margin-top:14px;
  font-size:14px;
  font-weight:600;
  text-align:center;
  color:var(--sub);
  transition:color .2s;
}
.gx-hint.win{ color:var(--success); }
.gx-hint.lose{ color:var(--danger); }
.gx-hint.info{ color:var(--sub); }

/* ---------- 결과 카드 (놀이판 위) ---------- */
.gx-result{
  position:absolute;
  z-index:30;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  border-radius:inherit;
  background:rgba(6,8,15,0.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:gxFade .3s ease both;
}
.gx-result-card{
  width:min(340px, 100%);
  padding:26px 24px 22px;
  border-radius:24px;
  text-align:center;
  background:linear-gradient(180deg, rgba(26,31,50,0.98), rgba(14,17,29,0.98));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.9);
  animation:gxPop .45s cubic-bezier(.2,1.4,.4,1) both;
}
.gx-result-emoji{ font-size:44px; line-height:1; }
.gx-result-title{ margin-top:10px; font-size:22px; font-weight:900; letter-spacing:-0.03em; color:#fff; }
.gx-result.win .gx-result-title{ background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gx-result-big{
  margin-top:12px;
  font-size:46px;
  font-weight:900;
  letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.gx-result-sub{ margin-top:4px; font-size:14px; color:var(--sub); }
.gx-result-best{
  display:inline-block;
  margin-top:12px;
  padding:4px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:800;
  color:#2a1a02;
  background:linear-gradient(135deg,#ffe08a,#ffbf3f);
  animation:gxPop .5s .35s cubic-bezier(.2,1.6,.4,1) both;
}
.gx-result-stats{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.gx-result-stats div{ flex:1; padding:8px 6px; border-radius:12px; background:rgba(255,255,255,0.05); }
.gx-result-stats span{ display:block; font-size:11px; color:var(--sub); }
.gx-result-stats b{ display:block; margin-top:2px; font-size:16px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.gx-result-btns{ display:flex; gap:8px; margin-top:18px; }
.gx-result-btns .btn{ flex:1; border-radius:14px; padding:13px 10px; }
.gx-result-keys{ margin-top:10px; font-size:11.5px; color:rgba(151,163,194,0.7); }
@keyframes gxFade{ from{ opacity:0; } }
@keyframes gxPop{ from{ opacity:0; transform:scale(.85) translateY(10px); } }

/* ---------- 토스트 ---------- */
.gx-toast{
  position:absolute;
  z-index:25;
  left:50%;
  top:14px;
  padding:8px 16px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:800;
  white-space:nowrap;
  color:#fff;
  background:rgba(20,24,40,0.95);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.8);
  transform:translateX(-50%);
  animation:gxToast 1.6s ease both;
  pointer-events:none;
}
.gx-toast.win{ border-color:color-mix(in srgb, var(--success) 60%, transparent); color:var(--success); }
.gx-toast.lose{ border-color:color-mix(in srgb, var(--danger) 60%, transparent); color:var(--danger); }
@keyframes gxToast{
  0%{ opacity:0; transform:translate(-50%,-8px) scale(.9); }
  12%,80%{ opacity:1; transform:translate(-50%,0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-6px); }
}

/* ---------- 도움말 ---------- */
.gx-help{
  position:fixed;
  z-index:200;
  inset:0;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(4,6,12,0.7);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:gxFade .2s ease both;
}
.gx-help[hidden]{ display:none; }
.gx-help-card{
  width:min(420px,100%);
  padding:24px;
  border-radius:24px;
  text-align:left;
  background:linear-gradient(180deg, rgba(26,31,50,0.98), rgba(14,17,29,0.98));
  border:1px solid rgba(255,255,255,0.12);
  animation:gxPop .35s cubic-bezier(.2,1.4,.4,1) both;
}
.gx-help-card h2{ margin:0 0 12px; font-size:19px; font-weight:900; color:#fff; }
.gx-help-card ul{ margin:0; padding-left:18px; color:#cdd3e0; font-size:14px; line-height:1.75; }
.gx-help-card li b{ color:#fff; }
.gx-help-card kbd{
  padding:1px 7px;
  border-radius:6px;
  font:700 12px var(--font);
  color:#fff;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
}
.gx-help-card .btn{ width:100%; margin-top:18px; border-radius:14px; }

/* 종이 조각 */
.gx-confetti{ position:fixed; z-index:150; inset:0; pointer-events:none; }

@media (max-width:640px){
  .gx{ padding-top:12px; }
  .gx-bar{ flex-wrap:wrap; gap:8px; }
  .gx-title{ font-size:16px; }
  .gx-stats{ order:3; width:100%; margin-left:0; }
  .gx-stat{ flex:1; }
  .gx-actions{ margin-left:auto; }
  .gx-stage{ border-radius:22px; }
}
@media (prefers-reduced-motion:reduce){
  .gx::before{ animation:none; }
}
.gx-result-keys kbd{
  padding:0 5px;
  border-radius:5px;
  font:700 11px var(--font);
  color:#fff;
  background:rgba(255,255,255,0.1);
}
/* 버튼(theme.css .btn-solid/.btn-outline는 --cyan에서 색을 땀)도 게임 강조색으로 */
.gx, .gx-help{ --cyan:var(--acc); }