.game-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.game-thumb{border-radius:16px;flex:none;box-shadow:0 6px 14px rgba(255,150,180,.25)}
.game-head h1{margin:0;font-size:26px;color:#5a4a6a;text-shadow:0 2px 0 #fff}
.game-head .sub{margin:2px 0 0;color:#9a86ad;font-size:14px}
.hf-wrap { max-width: 820px; margin: 0 auto; }
.hf-top { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 6px 0 12px; }
.hf-score { font-weight: 800; color: #fff; background: #2aa7e0; border-radius: 999px; padding: 5px 16px; white-space: nowrap; }
.hf-best { font-weight: 700; color: #2f6a86; }
.hf-board-wrap { position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: inset 0 0 0 3px #bfe3f5, 0 8px 24px rgba(40,120,160,.18); }
#hfBoard { width: 100%; display: block; touch-action: none; cursor: crosshair; background: #63c6ee; }
.hf-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,60,90,.42); }
.hf-overlay.hidden { display: none; }
.hf-ovcard { background: #fff; border-radius: 20px; padding: 22px 26px; text-align: center; max-width: 84%;
  box-shadow: 0 16px 44px rgba(0,0,0,.3); }
.hf-ovcard h2 { margin: 6px 0 4px; color: #2aa7e0; }
.hf-ovcard p { margin: 0 0 14px; color: #4a6472; }