:root{
  --bg:#070b14; --panel:#101a2c; --panel2:#16233a; --line:rgba(255,255,255,.1);
  --fire:#ff9b3d; --fire2:#ffcf7a; --ice:#7fb6ff; --frost:#bcd8ff;
  --txt:#e7eef9; --dim:#8a99b5; --hope:#5fd28a; --disc:#ff6b6b;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%; overflow:hidden;}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Apple SD Gothic Neo','Segoe UI',system-ui,sans-serif;
  user-select:none; -webkit-user-select:none;
}

/* 상단바 */
#topbar{
  display:flex; align-items:center; gap:10px; height:46px; padding:0 12px;
  background:linear-gradient(180deg,#13203a,#0c1424); border-bottom:1px solid var(--line);
  position:relative; z-index:30;
}
#topbar .back{color:var(--frost); text-decoration:none; font-size:14px; font-weight:600;}
#topbar .brand{font-weight:800; letter-spacing:.5px; display:flex; align-items:center; gap:6px;}
#topbar .brand .ic{filter:drop-shadow(0 0 6px var(--fire));}
#topbar .spacer{flex:1;}
#topbar .hs{font-size:12px; color:var(--dim);} #topbar .hs b{color:var(--fire2);}
#helpBtn{width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  background:#1b2a45; color:var(--frost); font-weight:800; cursor:pointer;}

#app{position:absolute; top:46px; left:0; right:0; bottom:0;}
#stage{position:relative; width:100%; height:100%; overflow:hidden;}
#game{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;}

/* HUD */
#hud{position:absolute; top:8px; left:8px; right:8px; z-index:10; pointer-events:none;}
.hudRow{display:flex; gap:6px; flex-wrap:wrap;}
.hudRow.top .pill{
  background:rgba(12,20,36,.82); border:1px solid var(--line); border-radius:20px;
  padding:4px 9px; font-size:12px; display:flex; align-items:center; gap:4px; backdrop-filter:blur(4px);
}
.pill .lab{opacity:.85;} .pill b{font-weight:800;}
.pill.score b{color:var(--fire2);}
.pill .val.tWarm{color:var(--hope);} .pill .val.tCold{color:var(--frost);} .pill .val.tFrost{color:#ff8a8a;}
.hudRow.res{margin-top:5px;}
.hudRow.res .rs{background:rgba(12,20,36,.82); border:1px solid var(--line); border-radius:8px;
  padding:3px 8px; font-size:12.5px; display:flex; align-items:center; gap:3px;}
.hudRow.res .rs b{font-weight:800;}
.bars{display:flex; gap:8px; margin-top:5px; max-width:340px;}
.barWrap{flex:1; background:rgba(12,20,36,.82); border:1px solid var(--line); border-radius:8px; padding:3px 7px;}
.barWrap .bl{font-size:10.5px; color:var(--dim);} .barWrap .bl b{color:var(--txt);}
.bar{height:6px; border-radius:4px; background:#0a1220; overflow:hidden; margin-top:2px;}
.barWrap.hope #hopeBar{height:100%; background:linear-gradient(90deg,#3aa86a,var(--hope)); width:60%; transition:width .4s;}
.barWrap.disc #discBar{height:100%; background:linear-gradient(90deg,#a83a3a,var(--disc)); width:8%; transition:width .4s;}
.snap{margin-top:6px; display:inline-block; padding:4px 11px; border-radius:8px; font-size:12.5px; font-weight:800;}
.snap.warn{background:rgba(70,110,200,.85); border:1px solid var(--ice); color:#eaf3ff; animation:blink 1.1s infinite;}
.snap.active{background:rgba(40,80,180,.92); border:1px solid #aee; color:#fff;}
@keyframes blink{50%{opacity:.45;}}

/* 하단 패널 */
#panel{
  position:absolute; left:8px; right:8px; bottom:78px; z-index:12;
  background:rgba(12,20,36,.93); border:1px solid var(--line); border-radius:14px;
  padding:9px 11px; backdrop-filter:blur(6px); min-height:54px;
}
.pTitle{font-weight:800; font-size:14px; margin-bottom:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.pcost{font-size:11px; color:var(--dim); font-weight:600;}
.pHint{font-size:11.5px; color:var(--dim); margin-bottom:7px; line-height:1.4;}
.pRow{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.pBtn{background:#1d2c48; color:var(--txt); border:1px solid var(--line); border-radius:9px;
  padding:7px 11px; font-size:13px; font-weight:700; cursor:pointer;}
.pBtn:active{transform:scale(.96);}
.pBtn.prim{background:linear-gradient(180deg,#ff9b3d,#e8761f); color:#1a0f04; border:none;}
.pBtn.ghost{background:transparent; color:var(--dim);}
.wlab{font-size:14px; font-weight:800; margin-right:2px;}

/* 컨트롤 */
#controls{position:absolute; left:8px; right:8px; bottom:8px; z-index:12;}
#dayBar{height:5px; background:#0a1220; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:7px;}
#dayProg{height:100%; width:0; background:linear-gradient(90deg,var(--fire),var(--fire2));}
.ctrlRow{display:flex; gap:8px;}
.ctrlRow button{flex:1; padding:12px; border-radius:12px; font-size:15px; font-weight:800;
  border:1px solid var(--line); background:#16233a; color:var(--txt); cursor:pointer;}
.ctrlRow button:active{transform:scale(.97);}
.ctrlRow #pauseBtn{flex:0 0 56px;}
.ctrlRow .prim{flex:2; background:linear-gradient(180deg,#ff9b3d,#e8761f); color:#1a0f04; border:none;}

/* 오버레이 공통 */
.ov{position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(5,9,18,.82); backdrop-filter:blur(5px); padding:16px;}
/* hidden 속성으로 닫는 오버레이가 .ov{display:flex}에 가려 안 닫히던 버그 수정 */
.ov[hidden]{display:none;}
.ovCard{background:linear-gradient(180deg,#15233c,#0d1626); border:1px solid var(--line);
  border-radius:18px; padding:22px; max-width:430px; width:100%; text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.6); max-height:90%; overflow:auto;}
.ovCard.wide{max-width:520px;}
.ovCard h1{margin:0 0 4px; font-size:30px; filter:drop-shadow(0 0 12px var(--fire));}
.ovCard h2{margin:0 0 8px; font-size:21px;}
.ovCard .sub{color:var(--fire2); font-weight:700; margin:0 0 12px; font-size:14px;}
.ovCard .lead{color:#cdd8ec; font-size:13.5px; line-height:1.6; margin:0 0 14px; text-align:left;}
.ovCard .tip{color:var(--dim); font-size:12px; margin:14px 0 0;}
.ovBtns{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:6px;}
.ovBtns button{padding:11px 18px; border-radius:11px; font-size:14px; font-weight:800;
  border:1px solid var(--line); background:#1d2c48; color:var(--txt); cursor:pointer;}
.ovBtns .primary{background:linear-gradient(180deg,#ff9b3d,#e8761f); color:#1a0f04; border:none;}

/* 건설 메뉴 */
.bmList{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 14px; text-align:left;}
.bmItem{display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:12px;
  border:1px solid var(--line); background:#16233a; color:var(--txt); cursor:pointer;}
.bmItem:active{transform:scale(.97);}
.bmItem.dim{opacity:.5;}
.bmItem .bmEm{font-size:22px;}
.bmItem .bmName{font-weight:800; font-size:14px;}
.bmItem .bmDesc{font-size:10.5px; color:var(--dim); line-height:1.35; min-height:28px;}
.bmItem .bmCost{font-size:11.5px; color:var(--fire2); font-weight:700; margin-top:2px;}

/* 이벤트 */
.evHead{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:6px;}
.evIcon{font-size:30px;}
.evChoices{display:flex; flex-direction:column; gap:9px; margin-top:6px;}
.evBtn{display:flex; flex-direction:column; gap:2px; text-align:left; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#1d2c48; color:var(--txt); cursor:pointer;}
.evBtn:active{transform:scale(.98);}
.evBtn b{font-size:14.5px;} .evBtn span{font-size:11.5px; color:var(--fire2);}

/* 결과 통계 */
.resStats{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 16px;}
.resStats .rs{display:flex; justify-content:space-between; background:#10192a; border:1px solid var(--line);
  border-radius:9px; padding:8px 11px;}
.resStats .rs span{color:var(--dim); font-size:12.5px;} .resStats .rs b{font-size:14px; color:var(--fire2);}

.howText{text-align:left;}
.howText p{font-size:12.5px; line-height:1.6; color:#cdd8ec; margin:0 0 10px;}
.howText b{color:var(--frost);}

/* 토스트 */
#toast{position:absolute; left:50%; bottom:150px; transform:translateX(-50%) translateY(10px);
  background:rgba(8,14,26,.95); border:1px solid var(--fire); color:#fff; padding:9px 15px;
  border-radius:11px; font-size:13px; font-weight:700; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:25; max-width:88%; text-align:center;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media(min-width:560px){
  .bmList{grid-template-columns:1fr 1fr 1fr;}
}
@media(max-height:620px){
  #panel{bottom:70px; padding:7px 10px; min-height:46px;}
  .pHint{display:none;}
}