/* HyodoGame 아케이드 UI 셸 — brickbreak·jogakbo·balloonpop 공유.
 * prepare_dist가 shell:"arcade" 게임에만 주입한다.
 * 게임 <style>이 이 파일 뒤에 오므로 게임 전용 덮어쓰기가 가능하다. */

:root{
  --arcade-gold:#C49A33;
  --arcade-gold-2:#BC9028;
  --arcade-gold-dk:#96721C;
  --arcade-ink:#3A362F;
  --arcade-muted:#A0977F;
  --arcade-line:#E2D8BF;
  --arcade-serif:"Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;}
body{
  font-family:var(--arcade-serif);
  color:var(--arcade-ink);
  display:flex;flex-direction:column;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(120% 70% at 50% 0%, #FCFAF6 0%, #F4F2ED 55%, #EDE9E1 100%);
}

/* ══════ 상단 바 ══════ */
#topbar{
  flex:0 0 auto;position:relative;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 18px;padding:14px 20px 16px;
  background:linear-gradient(#FCFAF6, #F7F4EE);
  box-shadow:0 2px 14px rgba(90,76,40,.08);
}
/* 상단바 하단 장식선은 게임이 opt-in 한다.
 * jogakbo·balloonpop 은 같은 자리에 금색 진행 띠(#progress)를 쓰므로
 * 셸이 무조건 주면 띠를 덮는다. */
#topbar.ruled::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--arcade-gold) 15%, #E3C36F 50%, var(--arcade-gold) 85%, transparent);
}
#brand{flex:0 0 auto;order:1;}
#title{font-size:30px;font-weight:700;letter-spacing:3px;line-height:1.2;}
#subtitle{font-size:16px;color:var(--arcade-muted);letter-spacing:2px;margin-top:2px;}

#stats{flex:1 1 auto;order:2;display:flex;gap:10px;justify-content:flex-end;}
.chip{
  background:#FFFEFB;border:1px solid #E6E0D2;border-radius:18px;
  padding:7px 18px;text-align:center;min-width:104px;
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(90,76,40,.06);
}
.chip .k{display:block;font-size:15px;color:#948B77;letter-spacing:3px;}
.chip .v{display:block;font-size:30px;font-weight:700;color:var(--arcade-gold);
  font-variant-numeric:tabular-nums;line-height:1.15;}

#utils{flex:0 0 auto;order:3;display:flex;gap:10px;}
.top-btn{
  width:70px;height:70px;display:flex;align-items:center;justify-content:center;
  border:1px solid #E0D8C6;border-radius:20px;
  background:linear-gradient(#FFFEFB, #F5F1E7);color:#6B6349;
  box-shadow:0 2px 4px rgba(90,76,40,.08);cursor:pointer;
}
.top-btn:active{background:#EFE8D6;box-shadow:none;transform:translateY(1px);}
.top-btn svg{width:32px;height:32px;}

/* ── 난이도 선택 그룹 ── */
#diffGroup{
  order:4;flex:1 0 100%;
  display:flex;gap:0;
  background:#F6F1E4;border:2px solid var(--arcade-line);border-radius:22px;
  padding:5px;box-shadow:inset 0 2px 5px rgba(140,120,70,.10);
}
.diff-btn{
  flex:1 1 0;min-height:74px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:none;border-radius:17px;background:transparent;
  font-family:inherit;color:#8A8069;cursor:pointer;position:relative;
  transition:background .18s, color .18s, box-shadow .18s;
}
.diff-btn + .diff-btn::before{
  content:'';position:absolute;left:0;top:18%;height:64%;width:1px;background:var(--arcade-line);
}
.db-row{display:flex;align-items:center;gap:10px;}
.db-mark{
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid #D9CCA8;background:#FFFDF6;color:#A8913F;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;line-height:1;
  transition:all .18s;
}
.db-name{font-size:27px;font-weight:700;letter-spacing:3px;}
.db-bars{display:flex;gap:5px;}
.db-bars i{width:20px;height:6px;border-radius:3px;background:var(--arcade-line);display:block;transition:background .18s;}
.db-bars i.on{background:#C9B478;}

.diff-btn.active{
  background:linear-gradient(#D8B155,var(--arcade-gold-2));
  color:#FFFDF7;
  box-shadow:0 3px 8px rgba(150,114,28,.35), inset 0 1px 0 rgba(255,255,255,.45);
}
.diff-btn.active::before, .diff-btn.active + .diff-btn::before{background:transparent;}
.diff-btn.active .db-mark{background:#FFFDF7;border-color:#FFFDF7;color:#9A7823;}
.diff-btn.active .db-bars i{background:rgba(255,253,247,.42);}
.diff-btn.active .db-bars i.on{background:#FFFDF7;}
.diff-btn:not(.active):active{background:#EFE7D3;}

@media (min-width:1080px){
  #diffGroup{order:2;flex:0 0 auto;}
  #stats{order:3;flex:1 1 auto;}
  #utils{order:4;}
}

/* ══════ 무대 ══════ */
/* 무대 캔버스만 좁혀 잡는다. 요소 셀렉터(canvas)로 주면 조작 버튼 안의
 * 미리보기 캔버스(jogakbo #nextCanvas·prevL·prevR)까지 absolute 가 된다. */
/* min-height:0 — 플렉스 자식이 콘텐츠(절대배치 캔버스) 때문에 접히지 않게 */
#stage{flex:1 1 auto;min-height:0;position:relative;}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* ══════ 오버레이 ══════ */
.overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:34px 28px;gap:26px;text-align:center;
  background:radial-gradient(90% 60% at 50% 40%, rgba(252,250,246,.97), rgba(240,236,228,.97));
}
.overlay.hidden{display:none;}
.ov-title{font-size:50px;font-weight:700;letter-spacing:4px;}
.ov-rule{width:130px;height:2px;background:linear-gradient(90deg,transparent,var(--arcade-gold),transparent);}
.ov-sub{font-size:27px;line-height:1.75;color:#6A6252;max-width:620px;}
.ov-note{font-size:22px;line-height:1.6;color:#8A8271;max-width:620px;}
.big-btn{
  min-width:340px;min-height:98px;padding:0 34px;
  font-size:36px;font-weight:700;font-family:inherit;letter-spacing:3px;
  color:#FFFDF7;background:linear-gradient(#D2A945,var(--arcade-gold-2));
  border:none;border-radius:26px;
  box-shadow:0 6px 0 var(--arcade-gold-dk), 0 10px 20px rgba(150,114,28,.25);cursor:pointer;
}
.big-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--arcade-gold-dk);}
.ghost-btn{
  min-width:340px;min-height:82px;padding:0 30px;
  font-size:29px;font-weight:700;font-family:inherit;
  color:#6A6252;background:#FFFEFB;
  border:2px solid #DDD5C3;border-radius:26px;cursor:pointer;
}
.ghost-btn:active{background:#F1ECE0;}

/* ══════ 칭찬 / 안내 ══════ */
#praise{
  position:absolute;left:50%;top:36%;z-index:4;
  transform:translate(-50%,-50%) scale(.88);
  font-size:46px;font-weight:700;letter-spacing:2px;color:#B98F26;
  text-shadow:0 2px 0 #FFFDF7, 0 6px 16px rgba(185,143,38,.25);
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity .3s, transform .35s cubic-bezier(.2,1.4,.4,1);
}
#praise.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
#hint{
  position:absolute;left:50%;bottom:20%;z-index:4;transform:translateX(-50%);
  font-size:29px;line-height:1.5;color:#5F5849;text-align:center;
  background:rgba(255,253,247,.96);border:1px solid #E5DDC9;
  border-radius:24px;padding:18px 34px;max-width:90%;
  box-shadow:0 6px 18px rgba(90,76,40,.12);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#hint.show{opacity:1;}