/* ══════════════════════════════════════════════════════════════
   skin_game.css — 캐주얼 퍼즐 게임 스킨 (2026-10-03)
   Macho 「게임 ui 같지가 않아 · 툰블라스트처럼 직관적이고 심플하게」
   · 그림 테두리(border-image) 액자를 걷고 둥근 판 + 굵은 테두리 + 아래 그림자로 통일
   · 플레이 화면 = 하늘색 배경 · 볼록한 블록 · 남색 판
   · 되돌리는 법 = index.html 의 이 파일 <link> 한 줄을 지운다
   ══════════════════════════════════════════════════════════════ */
:root{
  --gs-navy:#1D3F8F; --gs-navy-d:#12296B; --gs-sky1:#5CC3F7; --gs-sky2:#2F86E4;
  --gs-cream:#FFF6DC; --gs-line:#2A3F7A;
  --gs-green1:#7BE04A; --gs-green2:#3FB61C; --gs-green-d:#2A8410;
  --gs-yel1:#FFE25A; --gs-yel2:#FFB400; --gs-yel-d:#C97E00;
  --gs-blue1:#5CB8FF; --gs-blue2:#2380F0; --gs-blue-d:#1458B0;
  --gs-red1:#FF7A6B; --gs-red2:#EE3B30; --gs-red-d:#A81E18;
}

/* ───────── 공통 버튼 : 둥글고 볼록하게 ───────── */
body .k-btn{
  border:0; border-image:none; border-radius:16px; padding:12px 18px;
  background:linear-gradient(180deg,#FFFFFF,#DCE6F5); color:#2A3F7A;
  box-shadow:0 4px 0 #9FB1D0, inset 0 2px 0 rgba(255,255,255,.9);
  filter:none; font-size:17px; text-shadow:none;
}
body .k-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #9FB1D0 }
body .k-btn.blue, body .k-btn.green{ border-image:none;
  background:linear-gradient(180deg,var(--gs-green1),var(--gs-green2)); color:#fff;
  box-shadow:0 4px 0 var(--gs-green-d), inset 0 2px 0 rgba(255,255,255,.45); text-shadow:0 2px 0 rgba(0,0,0,.22) }
body .k-btn.red{ border-image:none;
  background:linear-gradient(180deg,var(--gs-red1),var(--gs-red2)); color:#fff;
  box-shadow:0 4px 0 var(--gs-red-d), inset 0 2px 0 rgba(255,255,255,.4); text-shadow:0 2px 0 rgba(0,0,0,.22) }
body .k-btn.yellow{ border-image:none;
  background:linear-gradient(180deg,var(--gs-yel1),var(--gs-yel2)); color:#6B3F00;
  box-shadow:0 4px 0 var(--gs-yel-d), inset 0 2px 0 rgba(255,255,255,.6) }
body .k-btn.blue:active, body .k-btn.green:active{ box-shadow:0 1px 0 var(--gs-green-d) }
body .k-btn.red:active{ box-shadow:0 1px 0 var(--gs-red-d) }
body .k-btn.yellow:active{ box-shadow:0 1px 0 var(--gs-yel-d) }

/* ───────── 상단 바 ───────── */
body .appbar{
  border:0; border-image:none; margin:6px 0 8px; padding:6px 8px; min-height:48px;
  background:linear-gradient(180deg,#3A6FD8,var(--gs-navy)); border-radius:18px;
  box-shadow:0 4px 0 var(--gs-navy-d), inset 0 2px 0 rgba(255,255,255,.28);
}
body .appbar .ttl{ color:#fff; font-size:21px; text-shadow:0 2px 0 rgba(0,0,0,.28) }
body .appbar .back, body .bar .home{
  border:0; border-image:none; width:44px; height:44px; padding:0; border-radius:50%;
  background:linear-gradient(180deg,var(--gs-yel1),var(--gs-yel2)); color:#6B3F00; font-size:20px;
  box-shadow:0 3px 0 var(--gs-yel-d), inset 0 2px 0 rgba(255,255,255,.6);
}
body .appbar .back:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--gs-yel-d) }
body .hudchip{
  border:0; border-image:none; border-radius:999px; padding:4px 14px 4px 4px; gap:6px;
  background:var(--gs-navy-d); color:#fff; font-size:19px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35);
}
body .hudchip .t{ color:#BFD4FF }

/* ───────── 하단 탭 ───────── */
body .tabbar{
  border:0; border-image:none; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#3A6FD8,var(--gs-navy));
  border-radius:20px 20px 0 0;
  box-shadow:0 -4px 14px rgba(18,41,107,.28), inset 0 2px 0 rgba(255,255,255,.28);
}
body .tabbar button{ min-height:58px; padding:4px 0 2px; gap:3px; color:#CFE0FF; z-index:0 }
body .tabbar button .ic{
  width:42px; height:42px; background:transparent; border:0; box-shadow:none; padding:5px; color:#fff;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));
}
body .tabbar button .tx{ font-size:12px; opacity:1; color:#CFE0FF; margin-top:0 }
body .tabbar button.on::after{
  content:''; position:absolute; left:6%; right:6%; top:-12px; bottom:-2px; z-index:-1;
  background:linear-gradient(180deg,var(--gs-sky1),var(--gs-sky2)); border-radius:16px 16px 10px 10px;
  box-shadow:0 0 0 3px var(--gs-navy-d), inset 0 2px 0 rgba(255,255,255,.5);
}
body .tabbar button.on .ic{
  background:transparent; border:0; box-shadow:none; color:#fff;
  transform:translateY(-8px) scale(1.22);
}
body .tabbar button.on .tx{ color:#fff; font-weight:400; transform:translateY(-3px) }
body .tabbar button:active .ic{ transform:scale(.92) }
body .tabbar button.on:active .ic{ transform:translateY(-6px) scale(1.14) }
body .tabbar .dot{ background:#FF3B4E; box-shadow:0 0 0 2px #fff; width:10px; height:10px; transform:translate(16px,-2px) }

/* ───────── 플레이 화면 ───────── */
body.play, body.play .wrap{
  background-color:#4FB0F5;
  background-image:
    radial-gradient(circle at 15% 12%,rgba(255,255,255,.35) 0 38px,transparent 39px),
    radial-gradient(circle at 26% 14%,rgba(255,255,255,.35) 0 26px,transparent 27px),
    radial-gradient(circle at 82% 30%,rgba(255,255,255,.22) 0 44px,transparent 45px),
    radial-gradient(circle at 70% 32%,rgba(255,255,255,.22) 0 28px,transparent 29px),
    linear-gradient(180deg,#7FD4FF 0%,#4FB0F5 45%,#3C8FE8 100%);
}
body.play .wrap{ min-height:100vh; min-height:100dvh }

/* 목표 · 남은 횟수 — 한 판에 담는다 */
body.play .hud{
  gap:0; align-items:stretch; margin:0 0 8px; padding:8px; position:relative;
  background:linear-gradient(180deg,#3A6FD8,var(--gs-navy)); border-radius:20px;
  box-shadow:0 4px 0 var(--gs-navy-d), inset 0 2px 0 rgba(255,255,255,.28);
}
body.play .hud .box{
  border:0; border-image:none; border-radius:14px; padding:6px 8px; min-height:84px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
body.play .hud .box.gl{
  order:1; flex:1 1 auto; background:var(--gs-cream);
  box-shadow:inset 0 3px 0 rgba(120,90,30,.16);
}
body.play .hud .box.gl b{ color:#2A3F7A }
body.play .hud .box.gl .ml{ color:#5A4A2A; font-size:12.5px }
body.play .hud .box.mv{
  order:2; flex:0 0 96px; margin-left:8px; background:transparent; padding:0;
}
body.play .hud .box.mv .ic{ display:none }
body.play .hud .box.mv b{
  width:68px; height:68px; line-height:60px; border-radius:50%; text-align:center;
  background:radial-gradient(circle at 50% 30%,#FFFFFF,#E9F1FF); color:#1D3F8F; font-size:32px;
  border:4px solid var(--gs-yel2); box-shadow:0 3px 0 var(--gs-yel-d), inset 0 -3px 0 rgba(29,63,143,.12);
}
body.play .hud .box.mv span{ color:#fff; font-size:12.5px; margin-top:5px; text-shadow:0 1px 0 rgba(0,0,0,.3) }

/* 진행 띠 */
body.play .restore, body.play .restore.slim{
  border:0; border-image:none; background:rgba(18,41,107,.32); border-radius:999px;
  padding:5px 12px; margin:0 0 8px; display:flex; align-items:center; gap:8px;
}
body.play .restore .rs-track{ flex:1; height:12px; border:0; background:rgba(255,255,255,.35); border-radius:999px }
body.play .restore .rs-track i{ border-radius:999px; background:linear-gradient(180deg,var(--gs-yel1),var(--gs-yel2)) }
body.play .restore .rs-lab{ margin:0; gap:6px; color:#fff; font-size:12px }
body.play .restore .rs-lab span{ display:none }
body.play .restore .rs-lab em{ color:#fff !important; font-family:var(--font-t); font-size:14px }

/* 판 */
body.play #m3host{
  border:7px solid var(--gs-navy); border-image:none; padding:0; border-radius:18px;   /* ★padding 이 아니라 border — 판 폭을 clientWidth 로 재므로 padding 을 주면 판이 넘친다 */
  background:#17306F;
  box-shadow:0 5px 0 var(--gs-navy-d), inset 0 3px 8px rgba(0,0,0,.45), 0 0 0 3px #4E86E8;
}
body.play .bl-board{ border-radius:10px; background:#17306F }
/* 블록 — 볼록한 젤리 */
body.play .bl-item{
  border-radius:24%; border-width:0 !important;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.20), inset 0 4px 0 rgba(255,255,255,.42),
             inset 0 0 0 1.5px rgba(0,0,0,.16);
}
body.play .bl-item.bl-sp{
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.20), inset 0 4px 0 rgba(255,255,255,.5),
             inset 0 0 0 2.5px rgba(255,255,255,.85), 0 0 10px rgba(255,255,255,.7);
}

/* ───────── 결과창 ───────── */
body .result{ background:rgba(14,28,74,.62) }
body .result .inner{
  border:0; border-image:none; border-radius:24px; padding:16px 14px 14px;
  background:var(--gs-cream);
  box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--gs-navy), 0 12px 0 4px var(--gs-navy-d), 0 24px 40px rgba(0,0,0,.35);
  max-width:330px; position:relative;
}
body .rs2 .rs2-top{ padding:0 }
/* 리본 제목 */
body .rs2 .rs2-top > b{
  margin:0 auto 6px; width:max-content; min-width:150px; padding:8px 26px 10px;
  background:linear-gradient(180deg,var(--gs-red1),var(--gs-red2)); color:#fff; font-size:26px;
  border-radius:14px; box-shadow:0 4px 0 var(--gs-red-d), inset 0 2px 0 rgba(255,255,255,.4);
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
body .rs2 .rs2-stars{ margin-top:14px }
body .rs2 .kstar{ width:58px; height:54px; margin:0 2px; filter:drop-shadow(0 3px 0 rgba(160,100,0,.45)) }
body .rs2 .kstar:nth-child(2){ width:70px; height:66px; position:relative; top:-8px }
body .rs2 .kstar.off{ filter:grayscale(1) opacity(.45) }
body .rs2 .rs2-rec{ display:block; width:max-content; max-width:100%; margin:8px auto 0; font-size:13px }
body .rs2 .rs2-rec.new{ background:#FFE9A8; color:#7a4a00 }
body .rs2 .rs2-stars .sub{ display:none }
body .rs2 .rs2-gain{ margin:10px 0 10px; gap:8px; font-size:17px }
body .rs2 .rs2-gain .gi, body .rs2 .rs2-gain .gi.coin{ background:#fff; border:2px solid #E3D3A6; padding:6px 14px; color:#5A4A2A }
body .rs2 .rs2-murmur{ display:none }
body .rs2-x{
  right:6px; top:6px; width:40px; height:40px; border:0; color:#fff; font-size:18px; z-index:3;
  background:linear-gradient(180deg,var(--gs-red1),var(--gs-red2));
  box-shadow:0 3px 0 var(--gs-red-d), 0 0 0 3px #fff;
}
body button.rs2-adx2{
  border-radius:16px; min-height:56px; margin:0 0 10px;
  background:linear-gradient(180deg,#C58BFF,#8E4BE6); color:#fff;
  box-shadow:0 4px 0 #5E28A8, inset 0 2px 0 rgba(255,255,255,.4);
}
body button.rs2-adx2:active{ box-shadow:0 1px 0 #5E28A8 }
body .rs2-adx2 .rs2-adg{ color:#FFE9A8 }
body .rs2-adx2 .rs2-adg strong{ color:#FFE25A }
body .rs2 .k-btn.wide{ font-size:19px; padding:13px 14px }
body .rs2 .rs2-more{ color:#7A6A4A }

/* 실패창 */
body .result .inner > b:first-child{
  margin:0 auto 10px !important; width:max-content; padding:8px 24px 10px;
  background:linear-gradient(180deg,#8FA3C8,#5F759F); color:#fff !important; font-family:var(--font-t);
  font-weight:400 !important; font-size:24px !important; border-radius:14px;
  box-shadow:0 4px 0 #3E4F73, inset 0 2px 0 rgba(255,255,255,.4); text-shadow:0 2px 0 rgba(0,0,0,.25);
}
body .result .inner > .sub{ text-align:center }
body .lo-btn{
  border:0; border-radius:16px; padding:10px 12px; margin-top:10px; font-family:var(--font-t);
  box-shadow:0 4px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.45);
}
body .lo-btn b{ font-weight:400; font-size:18px }
body .lo-btn span{ opacity:.9; font-size:12px }
body .lo-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.2) }
body .lo-btn.coin { background:linear-gradient(180deg,var(--gs-yel1),var(--gs-yel2)); color:#6B3F00; box-shadow:0 4px 0 var(--gs-yel-d), inset 0 2px 0 rgba(255,255,255,.6) }
body .lo-btn.again{ background:linear-gradient(180deg,var(--gs-green1),var(--gs-green2)); color:#fff; box-shadow:0 4px 0 var(--gs-green-d), inset 0 2px 0 rgba(255,255,255,.45) }
body .lo-btn.shop { background:linear-gradient(180deg,var(--gs-blue1),var(--gs-blue2)); color:#fff; box-shadow:0 4px 0 var(--gs-blue-d), inset 0 2px 0 rgba(255,255,255,.45) }
body .lo-btn.skip { background:linear-gradient(180deg,#fff,#DCE6F5); color:#2A3F7A; box-shadow:0 4px 0 #9FB1D0 }
body .lo-btn.out  { background:transparent; color:#7A6A4A; box-shadow:none }
body .lo-btn:disabled{ filter:grayscale(.8); opacity:.55 }

/* ───────── 큰 주 버튼 (다음 역 등) — 초록 = 「계속 간다」 ───────── */
body .bigbtn{
  border:0; border-image:none; border-radius:16px; padding:13px 14px; min-height:52px;
  background:linear-gradient(180deg,var(--gs-green1),var(--gs-green2)); color:#fff; font-size:20px;
  box-shadow:0 4px 0 var(--gs-green-d), inset 0 2px 0 rgba(255,255,255,.45); text-shadow:0 2px 0 rgba(0,0,0,.22);
  filter:none;
}
body .bigbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--gs-green-d) }
body .bigbtn:disabled{ filter:grayscale(.85); opacity:.55 }
/* 안내 말풍선이 진행 띠를 가리지 않게 살짝 내린다 */