.hsw{
  --hsw-bg:#0a0e14; --hsw-panel:#111722; --hsw-panel2:#0d131c;
  --hsw-line:#1d2838; --hsw-accent:#22d3ee; --hsw-accent2:#f59e0b;
  --hsw-danger:#ef4444; --hsw-text:#cdd8e6; --hsw-muted:#5f7186;
  --hsw-up:#1a2433; --hsw-up2:#222f42; --hsw-down:#0c121b;
  --c1:#4fc3f7; --c2:#5fd97a; --c3:#ff7a59; --c4:#c084fc;
  --c5:#fbbf24; --c6:#2dd4bf; --c7:#f472b6; --c8:#94a3b8;
  max-width:760px; margin:0 auto; padding:8px 14px 48px;
  color:var(--hsw-text);
  font-family:"IBM Plex Sans KR", system-ui, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.hsw *{box-sizing:border-box;}
.hsw button{font-family:inherit; cursor:pointer; border:none; color:var(--hsw-text); background:transparent;}

.hsw-head{text-align:center; margin-bottom:18px;}
.hsw-head h1{
  font-family:"Chakra Petch", sans-serif; font-weight:700; letter-spacing:.04em;
  font-size:clamp(26px,6vw,40px); margin:0; line-height:1;
  background:linear-gradient(90deg,var(--hsw-accent),#a5f3fc 40%,var(--hsw-accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hsw-sub{color:var(--hsw-muted); font-size:13px; margin-top:6px;}

.hsw-toolbar{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px;}
.hsw-seg{display:flex; background:var(--hsw-panel2); border:1px solid var(--hsw-line); border-radius:12px; padding:4px; gap:2px;}
.hsw-diff{padding:8px 14px; border-radius:9px; font-size:14px; font-weight:600;
  font-family:"Chakra Petch", sans-serif; transition:.15s; color:var(--hsw-muted);}
.hsw-diff.active{background:linear-gradient(180deg,var(--hsw-up2),var(--hsw-up)); color:var(--hsw-accent);
  box-shadow:0 0 0 1px rgba(34,211,238,.25), 0 4px 14px rgba(0,0,0,.4);}
.hsw-diff:hover{color:var(--hsw-text);}

.hsw-mode{padding:8px 14px; border-radius:11px; font-size:14px; font-weight:600;
  border:1px solid var(--hsw-line); background:var(--hsw-panel2); color:var(--hsw-muted);
  display:flex; align-items:center; gap:7px; transition:.15s;}
.hsw-mode.on{color:var(--hsw-accent2); border-color:rgba(245,158,11,.4); box-shadow:0 0 18px rgba(245,158,11,.12);}
.hsw-mode .dot{width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.7;}

.hsw-hud{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  background:linear-gradient(180deg,var(--hsw-panel),var(--hsw-panel2));
  border:1px solid var(--hsw-line); border-radius:16px; padding:12px 18px; margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);}
.hsw-stat{font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:26px; letter-spacing:.05em;
  display:flex; align-items:center; gap:8px;}
.hsw-stat.mines{color:var(--hsw-accent2);}
.hsw-stat.time{color:var(--hsw-accent); justify-self:end;}
.hsw-stat .ico{font-size:18px; opacity:.85;}
.hsw-face{width:50px; height:50px; border-radius:14px;
  background:linear-gradient(180deg,var(--hsw-up2),var(--hsw-down));
  border:1px solid var(--hsw-line); font-size:24px;
  display:flex; align-items:center; justify-content:center; transition:.12s;
  box-shadow:0 4px 12px rgba(0,0,0,.4);}
.hsw-face:active{transform:scale(.92);}

.hsw-board-shell{background:var(--hsw-panel2); border:1px solid var(--hsw-line);
  border-radius:18px; padding:14px; overflow:hidden; position:relative;
  box-shadow:inset 0 0 50px rgba(0,0,0,.5);}
.hsw-board-shell::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(34,211,238,.05) 1px, transparent 1px);
  background-size:22px 22px; pointer-events:none; opacity:.5;}
.hsw #board{display:block; width:100%; height:auto; touch-action:manipulation; position:relative;}

.hsw .hex{cursor:pointer;}
.hsw .hex polygon{transition:fill .12s, stroke .12s;}
.hsw .hex .up{fill:url(#gUp); stroke:#2a3a52; stroke-width:1.4;}
.hsw .hex:hover .up{fill:url(#gHover);}
.hsw .hex .down{fill:var(--hsw-down); stroke:#13202f; stroke-width:1.4;}
.hsw .hex text{font-family:"Chakra Petch",sans-serif; font-weight:700; pointer-events:none; user-select:none;}
.hsw .reveal-anim{animation:hswpop .18s ease-out;}
@keyframes hswpop{from{transform:scale(.6); opacity:.2;} to{transform:scale(1); opacity:1;}}
.hsw .flagged .up{fill:url(#gFlag); stroke:rgba(245,158,11,.6);}
.hsw .boom .down{fill:#3a1212; stroke:var(--hsw-danger);}

.hsw-msg{text-align:center; margin-top:16px; min-height:24px;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:17px;}
.hsw-msg.win{color:var(--hsw-accent);}
.hsw-msg.lose{color:var(--hsw-danger);}
.hsw-hint{text-align:center; color:var(--hsw-muted); font-size:12px; margin-top:20px; line-height:1.7;}
.hsw-hint b{color:var(--hsw-text); font-weight:600;}

.hsw-board-wrap{margin-top:34px;}
.hsw-lb-title{text-align:center; font-family:"Chakra Petch",sans-serif; font-weight:700;
  font-size:18px; color:var(--hsw-accent); letter-spacing:.02em; margin:0 0 14px;}
.hsw-lb-tabs{display:flex; gap:2px; justify-content:center; margin-bottom:12px;
  background:var(--hsw-panel2); border:1px solid var(--hsw-line); border-radius:11px; padding:4px; width:max-content; margin-left:auto; margin-right:auto;}
.lb-tab{padding:6px 16px; border-radius:8px; font-size:13px; font-weight:600;
  font-family:"Chakra Petch",sans-serif; color:var(--hsw-muted); transition:.15s;}
.lb-tab.active{background:var(--hsw-up); color:var(--hsw-accent2);}

.hsw-lb{list-style:none; margin:0 auto; padding:0; max-width:420px;
  background:var(--hsw-panel2); border:1px solid var(--hsw-line); border-radius:14px; overflow:hidden;}
.hsw-lb li{display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--hsw-line); font-size:15px;}
.hsw-lb li:last-child{border-bottom:none;}
.hsw-lb li.empty{color:var(--hsw-muted); font-size:13px; justify-content:center; padding:22px 16px;}
.hsw-lb .rk{font-family:"Chakra Petch",sans-serif; font-weight:700; color:var(--hsw-muted); width:24px;}
.hsw-lb li:nth-child(1) .rk{color:#ffd54f;}
.hsw-lb li:nth-child(2) .rk{color:#cfd8e3;}
.hsw-lb li:nth-child(3) .rk{color:#e0a06a;}
.hsw-lb .nm{flex:1; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hsw-lb .sc{font-family:"Chakra Petch",sans-serif; font-weight:700; color:var(--hsw-accent);}
.hsw-lb li.me{background:rgba(34,211,238,.07);}
.hsw-lb li.me .nm::after{content:" (나)"; color:var(--hsw-accent); font-size:12px;}

/* ===== 도움말 바 / 룰·학습 버튼 ===== */
.hsw-helpbar{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px;}
.hsw-help-btn{display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:9px 16px; border-radius:11px; font-size:14px; font-weight:600;
  font-family:"IBM Plex Sans KR",sans-serif; border:1px solid var(--hsw-line);
  background:var(--hsw-panel2); color:var(--hsw-text); transition:.15s; cursor:pointer;}
.hsw-help-btn:hover{border-color:var(--hsw-accent); color:var(--hsw-accent);}
.hsw-help-btn.primary{background:linear-gradient(180deg,#16384a,#0e2733);
  border-color:rgba(34,211,238,.45); color:var(--hsw-accent); box-shadow:0 0 20px rgba(34,211,238,.12);}
.hsw-help-btn.primary:hover{box-shadow:0 0 26px rgba(34,211,238,.22);}

/* ===== 학습 모드 코치 패널 ===== */
.hsw-coach{background:linear-gradient(180deg,#0f2230,#0c1922);
  border:1px solid rgba(34,211,238,.3); border-radius:16px; padding:14px 16px; margin-bottom:14px;
  box-shadow:0 0 28px rgba(34,211,238,.1);}
.coach-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.coach-step{font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:13px;
  color:var(--hsw-accent); letter-spacing:.06em;}
.coach-exit{font-size:12px; color:var(--hsw-muted); padding:3px 8px; border-radius:7px;}
.coach-exit:hover{color:var(--hsw-text);}
.coach-msg{font-size:15px; line-height:1.6; color:var(--hsw-text); min-height:24px;}
.coach-msg b{color:var(--hsw-accent);}
.coach-msg.good{color:var(--hsw-accent);}
.coach-msg.good b{color:#a5f3fc;}
.coach-btns{display:flex; gap:8px; justify-content:flex-end; margin-top:10px;}
.coach-next,.coach-retry{padding:8px 16px; border-radius:10px; font-weight:600; font-size:14px;
  font-family:"Chakra Petch",sans-serif;}
.coach-next{background:linear-gradient(180deg,#16384a,#0e2733); border:1px solid rgba(34,211,238,.45); color:var(--hsw-accent);}
.coach-retry{background:var(--hsw-panel2); border:1px solid var(--hsw-line); color:var(--hsw-muted);}

/* 학습 모드 타겟 하이라이트 */
.hsw .hex.hint-target polygon{stroke:var(--hsw-accent) !important; stroke-width:2.6 !important;
  animation:hswpulse 1.1s ease-in-out infinite;}
@keyframes hswpulse{0%,100%{opacity:1;} 50%{opacity:.4;}}

/* ===== 룰 설명 페이지 ===== */
.hsw-guide{padding-bottom:48px;}
.guide-card{background:var(--hsw-panel2); border:1px solid var(--hsw-line); border-radius:16px;
  padding:18px 20px; margin-bottom:14px;}
.guide-card.highlight{border-color:rgba(45,212,191,.35); box-shadow:0 0 24px rgba(45,212,191,.08);}
.guide-card.win{border-color:rgba(34,211,238,.35);}
.guide-card h3{display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:17px; color:var(--hsw-text);}
.guide-card .g-no{display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; font-size:14px;
  background:var(--hsw-up); color:var(--hsw-accent); border:1px solid var(--hsw-line);}
.guide-card p{margin:0 0 8px; font-size:15px; line-height:1.7; color:#aebacb;}
.guide-card p:last-child{margin-bottom:0;}
.guide-card b{color:var(--hsw-text); font-weight:600;}
.g-tip{background:var(--hsw-up); border-radius:10px; padding:10px 12px !important; font-size:14px !important;}
.guide-list{list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.guide-list li{display:flex; align-items:center; gap:12px; font-size:15px; color:#aebacb;}
.guide-list.plain li{gap:8px;}
.guide-list .num{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; background:var(--hsw-down); border:1px solid var(--hsw-line);
  font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:17px;}
.num.c1{color:var(--c1);} .num.c2{color:var(--c2);} .num.c3{color:var(--c3);}
.guide-svg{text-align:center; margin:14px 0 4px;}
.guide-svg svg{width:100%; max-width:320px; height:auto;}
.guide-svg-cap{font-size:12px; color:var(--hsw-muted); margin-top:6px;}

/* ===== 풀스크린 몰입 모드 (네비바/푸터 가림) ===== */
body.hsw-locked{overflow:hidden !important;}
.hsw-screen{position:fixed; inset:0; z-index:2147483000; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(34,211,238,.07), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(245,158,11,.06), transparent 55%),
    #0a0e14;
  font-family:"IBM Plex Sans KR", system-ui, sans-serif;}
.hsw-screen .hsw{padding-top:8px;}

.hsw-topbar{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:rgba(10,14,20,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid #1d2838;}
.hsw-close{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; text-decoration:none; font-size:20px; line-height:1;
  background:#0d131c; border:1px solid #1d2838; color:#cdd8e6; transition:.15s;}
.hsw-close:hover{border-color:#ef4444; color:#ef4444;}
.hsw-brand{font-family:"Chakra Petch",sans-serif; font-weight:700; letter-spacing:.12em; font-size:15px;
  color:#5f7186;}
.hsw-lang{display:flex; gap:2px; background:#0d131c; border:1px solid #1d2838; border-radius:11px; padding:3px;}
.hsw-lang button{padding:6px 11px; border-radius:8px; font-size:13px; font-weight:600;
  font-family:"Chakra Petch",sans-serif; color:#5f7186; background:transparent; border:none; cursor:pointer; transition:.15s;}
.hsw-lang button.active{background:#222f42; color:#22d3ee;}
.hsw-lang button:hover{color:#cdd8e6;}