.hc-game-overlay{position:fixed;inset:0;z-index:9700;background:#f5f7fb;overflow:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033}.hc-game-head{position:sticky;top:0;z-index:3;background:linear-gradient(135deg,#003f87,#075fbe);color:#fff;padding:calc(12px + env(safe-area-inset-top)) 16px 14px;display:flex;align-items:center;gap:12px}.hc-game-back{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px}.hc-game-title{font-size:18px;font-weight:900}.hc-game-sub{font-size:12px;opacity:.85}.hc-game-wrap{max-width:560px;margin:auto;padding:14px 12px calc(30px + env(safe-area-inset-bottom))}.hc-game-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.hc-game-stat{background:#fff;border:1px solid #dce4ef;border-radius:13px;padding:9px 4px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.04)}.hc-game-stat small{display:block;color:#667085;font-size:10px;font-weight:800}.hc-game-stat strong{display:block;color:#003f87;font-size:17px;margin-top:2px}.hc-puzzle{display:grid;grid-template-columns:repeat(4,1fr);aspect-ratio:4/3;border:3px solid #fff;border-radius:16px;overflow:hidden;box-shadow:0 5px 18px rgba(0,32,80,.18);background:#dce7f3}.hc-piece{border:1px solid rgba(255,255,255,.75);background-image:url('https://haitiancorner.com/app/ayiti-puzzle/citadelle-v1.png?v=3');background-repeat:no-repeat;background-size:400% 400%;touch-action:none;cursor:grab;position:relative}.hc-piece.selected{outline:4px solid #f2b705;outline-offset:-4px;z-index:2}.hc-game-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.hc-game-actions button,.hc-game-primary{border:1px solid #d8e0eb;border-radius:12px;padding:12px;background:#fff;color:#003f87;font-weight:800;font-size:14px}.hc-game-primary{display:block;width:100%;margin-top:12px;background:#003f87;color:#fff;border-color:#003f87}.hc-game-rank{margin-top:12px;background:#fff;border:1px solid #dce4ef;border-radius:14px;padding:13px 16px;text-align:center}.hc-game-rank strong{color:#003f87}.hc-game-note{text-align:center;color:#7b8494;font-size:12px;margin-top:10px}.hc-game-win{position:fixed;inset:0;z-index:9701;background:rgba(0,20,55,.78);display:flex;align-items:center;justify-content:center;padding:24px}.hc-game-win-card{background:#fff;border-radius:20px;padding:28px 22px;text-align:center;max-width:360px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}

@media (min-width: 800px) {
  .hc-game-head {
    padding: 22px 38px;
  }

  .hc-game-title {
    font-size: 25px;
  }

  .hc-game-sub {
    font-size: 14px;
  }

  .hc-game-wrap {
    max-width: 980px;
    padding: 28px 34px 46px;
  }

  .hc-game-wrap > #hcPuzzleClue {
    max-width: 900px;
    margin: 0 auto 18px;
    padding: 17px 22px !important;
    font-size: 18px !important;
  }

  .hc-game-stats {
    max-width: 900px;
    margin: 0 auto 18px;
    gap: 16px;
  }

  .hc-game-stat {
    padding: 16px 8px;
    border-radius: 16px;
  }

  .hc-game-stat small {
    font-size: 13px;
  }

  .hc-game-stat strong {
    font-size: 25px;
  }

  .hc-puzzle {
    width: min(900px, 82vw);
    max-width: 900px;
    margin: 0 auto;
    border-width: 4px;
    border-radius: 20px;
  }

  .hc-game-actions {
    width: min(900px, 82vw);
    margin: 18px auto 0;
    gap: 16px;
  }

  .hc-game-actions button {
    padding: 16px;
    font-size: 17px;
  }

  .hc-game-rank,
  .hc-game-primary,
  .hc-game-note {
    width: min(900px, 82vw);
    margin-left: auto;
    margin-right: auto;
  }

  .hc-game-primary {
    padding: 16px;
    font-size: 17px;
  }

  .hc-game-note {
    font-size: 14px;
  }
}