/* ============================================================
   여수 365 섬 탐험대 — 공통 스타일
   ============================================================ */
:root{
  --deep:#0a3d3d; --teal:#0d6b6b; --mint:#e5f2f1; --gold:#ffd66b;
  --sea:#2b8fb3; --sky:#bfe6f0; --sand:#f6e7c8; --coral:#e8734a;
  --island-ink:#20302f; --ok:#b9f5c8; --bad:#ff8c7a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;font-family:"Noto Sans KR","Malgun Gothic",sans-serif;color:var(--island-ink);
  background:linear-gradient(180deg,#0a3d3d 0%,#12626b 45%,#2b8fb3 100%);
  min-height:100vh;padding:14px 12px 28px;
  display:flex;align-items:flex-start;justify-content:center;
}
.wrap{width:100%;max-width:520px}
.wrap.wide{max-width:820px}

header{text-align:center;margin-bottom:12px;color:#fff}
header h1{margin:0;font-size:22px;text-shadow:0 2px 6px rgba(0,0,0,.25)}
header .sub{font-size:12px;color:rgba(255,255,255,.82);margin-top:3px;line-height:1.6}

/* ---------- HUD ---------- */
.hud{display:flex;gap:7px;margin-bottom:10px}
.stat{
  flex:1;background:rgba(255,255,255,.94);border-radius:12px;padding:7px 3px;
  text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.14);min-width:0;
}
.stat .lb{font-size:10px;color:#6b8280;letter-spacing:.3px;white-space:nowrap}
.stat .vl{font-size:18px;font-weight:800;color:var(--deep);line-height:1.25;white-space:nowrap}
.stat.warn .vl{color:var(--coral)}

/* ---------- 스테이지 영역 ---------- */
.stage{
  position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.3);background:var(--sky);
}

/* ---------- 버튼 ---------- */
.btn{
  display:block;width:100%;margin-top:10px;padding:13px;border:0;border-radius:14px;
  background:var(--teal);color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 0 #07514f;font-family:inherit;
}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #07514f}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:rgba(255,255,255,.93);color:var(--deep);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.btn.sm{padding:9px;font-size:13px}
.row{display:flex;gap:8px}

/* ---------- 오버레이 ---------- */
.overlay{
  position:absolute;inset:0;z-index:30;background:rgba(6,44,52,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-align:center;padding:22px;
}
.overlay h2{margin:0 0 6px;font-size:23px}
.overlay p{margin:3px 0;font-size:13px;color:#cfe8ee;line-height:1.7;max-width:400px}
.overlay .big{font-size:42px;font-weight:900;color:var(--gold);margin:6px 0}
.overlay .btn{max-width:270px}
.overlay .legend{
  background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;margin:12px 0 2px;
  font-size:12px;text-align:left;line-height:1.9;width:100%;max-width:280px;
}
.rank{font-size:12px;margin-top:9px;color:#a9d6e2;min-height:16px}
.miniboard{
  margin-top:10px;background:rgba(255,255,255,.1);border-radius:10px;
  padding:8px 12px;text-align:left;font-size:12px;width:100%;max-width:280px;
}
.miniboard .mb-title{
  font-weight:800;color:var(--gold);margin-bottom:5px;text-align:center;
  font-size:11px;letter-spacing:.5px;
}
.miniboard .mb-row{display:flex;align-items:center;gap:6px;padding:2.5px 0;color:#e8f5f3}
.miniboard .mb-row .mb-rk{width:16px;color:var(--gold);font-weight:800;flex-shrink:0}
.miniboard .mb-row .mb-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miniboard .mb-row .mb-sc{font-weight:700;color:#fff}
.hidden{display:none !important}

/* ---------- 이펙트 ---------- */
.fx{
  position:absolute;z-index:20;font-weight:900;font-size:17px;pointer-events:none;
  animation:fxpop .7s ease forwards;text-shadow:0 2px 4px rgba(0,0,0,.4);
}
@keyframes fxpop{
  0%{opacity:1;transform:translate(-50%,0) scale(.8)}
  100%{opacity:0;transform:translate(-50%,-44px) scale(1.1)}
}

/* ---------- 하단 네비 ---------- */
.nav{margin-top:11px;text-align:center}
.nav a{
  color:rgba(255,255,255,.92);font-size:12px;text-decoration:none;
  background:rgba(0,0,0,.24);padding:6px 13px;border-radius:20px;
}
.note{
  text-align:center;color:rgba(255,255,255,.55);font-size:10px;margin-top:14px;line-height:1.7;
}