:root {
  color-scheme: dark;
  --bg: #061024;
  --panel: rgba(8, 18, 42, 0.86);
  --line: rgba(64, 209, 255, 0.28);
  --cyan: #40d7ff;
  --pink: #f45cff;
  --green: #73ff69;
  --yellow: #ffe65a;
  --orange: #ffad38;
  --red: #ff4d4d;
  --text: #f2fbff;
  --muted: #9fb7d1;
  --shadow: 0 0 22px rgba(64, 215, 255, 0.18), 0 0 70px rgba(244, 92, 255, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 50% -15%,rgba(70,159,255,.24),transparent 34%),
    radial-gradient(circle at 20% 18%,rgba(244,92,255,.14),transparent 28%),
    radial-gradient(circle at 80% 78%,rgba(115,255,105,.10),transparent 32%),
    linear-gradient(180deg,#050914 0%,#08142c 52%,#040712 100%);
  overflow-x:hidden;
  touch-action:manipulation;
}
button{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
.game-shell{
  width:min(100%,1160px);
  min-height:100svh;
  margin:0 auto;
  padding:max(10px,env(safe-area-inset-top)) clamp(10px,2vw,22px) max(12px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-rows:auto auto minmax(390px,1fr) auto auto;
  gap:clamp(8px,1.4vh,14px);
}
.topbar,.hud,.control-panel,.club-panel,.course-meta{position:relative;z-index:2}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-hex{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:var(--cyan);border:1px solid rgba(64,215,255,.44);background:linear-gradient(145deg,rgba(47,139,255,.24),rgba(244,92,255,.11));box-shadow:0 0 24px rgba(64,215,255,.22)}
.eyebrow{margin:0 0 3px;color:var(--muted);font-size:.72rem;letter-spacing:.19em;text-transform:uppercase}
h1{margin:0;font-size:clamp(1.75rem,7vw,3.9rem);line-height:.9;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 18px rgba(64,215,255,.42),0 0 34px rgba(244,92,255,.24)}
.header-actions{display:flex;align-items:center;gap:8px}
.icon-button,.tools-button,.quick-restart-button,.primary-button,.ghost-button,.shoot-button{
  border:1px solid rgba(64,215,255,.42);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(12,42,84,.96),rgba(6,15,35,.96));
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,opacity .14s ease;
  font-weight:900;
}
.icon-button{width:48px;height:48px;display:grid;place-items:center;font-size:1.12rem}
.tools-button{min-height:46px;padding:0 14px}
.quick-restart-button{width:46px;height:46px;display:grid;place-items:center;font-size:1.1rem;padding:0}
button:active{transform:translateY(1px) scale(.985)}
button:focus-visible{outline:3px solid rgba(255,230,90,.75);outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,12px)}
.hud-card,.course-panel,.step-card,.power-card,.club-panel,.course-meta,.overlay-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(8,21,49,.92),rgba(4,10,24,.86));box-shadow:var(--shadow)}
.hud-card{min-height:70px;padding:10px clamp(9px,1.8vw,15px);border-radius:19px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hud-card span,.course-meta span,.step-label{color:var(--muted);font-size:clamp(.65rem,2.3vw,.82rem);letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.hud-card strong{margin-top:4px;font-size:clamp(1.14rem,4.8vw,2.25rem);line-height:1;white-space:nowrap}
#totalValue{color:var(--green);text-shadow:0 0 14px rgba(115,255,105,.4)}
.course-panel{position:relative;min-height:390px;border-radius:28px;background:radial-gradient(circle at 50% 8%,rgba(244,92,255,.16),transparent 26%),radial-gradient(circle at 50% 70%,rgba(64,215,255,.13),transparent 38%),linear-gradient(180deg,rgba(8,18,45,.84),rgba(3,8,20,.94));overflow:hidden;isolation:isolate}
.course-panel::before,.course-panel::after{content:"";position:absolute;inset:0;pointer-events:none}
.course-panel::before{background:linear-gradient(130deg,transparent 0 18%,rgba(64,215,255,.07) 18.4%,transparent 19%),linear-gradient(35deg,transparent 0 62%,rgba(244,92,255,.05) 62.4%,transparent 63%)}
.course-panel::after{border-radius:28px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0 60px rgba(64,215,255,.08)}
canvas{width:100%;height:100%;display:block;touch-action:none}
.toast-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.toast{position:absolute;transform:translate(-50%,-50%);font-size:clamp(.75rem,2.8vw,1rem);font-weight:900;text-shadow:0 2px 16px rgba(0,0,0,.55);white-space:nowrap;animation:toastFloat .95s ease forwards}
@keyframes toastFloat{0%{opacity:0;transform:translate(-50%,-15%)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-145%)}}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(3,8,20,.58);backdrop-filter:blur(5px);z-index:5}
.overlay-visible{display:flex}
.overlay-card{width:min(100%,540px);border-radius:24px;padding:18px}
.overlay-kicker{margin:0 0 6px;color:var(--cyan);text-transform:uppercase;letter-spacing:.18em;font-size:.74rem}
.overlay-card h2{margin:0 0 10px;font-size:clamp(1.35rem,5vw,2.1rem);line-height:1.05}
.overlay-card p{color:#d6e9ff;line-height:1.45}
.small-note{margin:10px 0 0;color:var(--muted);font-size:.88rem}
.result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:13px 0 14px}
.result-grid div{padding:10px 12px;border-radius:16px;border:1px solid rgba(64,215,255,.18);background:rgba(2,8,19,.5)}
.result-grid span{display:block;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em}
.result-grid strong{display:block;margin-top:4px;font-size:1.22rem}
.overlay-actions{display:flex;flex-wrap:wrap;gap:10px}
.primary-button,.ghost-button,.shoot-button{min-height:46px;padding:0 16px;font-weight:900;letter-spacing:.04em}
.primary-button{background:linear-gradient(180deg,rgba(25,115,207,.96),rgba(6,25,58,.96))}
.ghost-button{background:linear-gradient(180deg,rgba(15,38,72,.94),rgba(6,15,35,.96))}
.shoot-button{min-height:58px;padding-inline:22px;border-radius:22px;color:#f5fbff;background:linear-gradient(180deg,rgba(244,92,255,.32),rgba(20,53,116,.96));text-transform:uppercase;font-size:clamp(1.02rem,4vw,1.35rem)}
.control-panel{display:grid;grid-template-columns:.9fr 1.7fr 1fr;gap:clamp(8px,1.3vw,12px)}
.step-card,.power-card{min-height:82px;border-radius:22px;padding:12px 14px}
.aim-card{display:grid;align-content:center}
.aim-card strong{margin-top:2px;font-size:clamp(1.5rem,5vw,2.25rem)}
.hint{color:var(--muted);font-size:.86rem}
.power-card{display:flex;flex-direction:column;justify-content:center}
.power-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.power-heading strong{color:var(--cyan);font-size:.9rem}
.power-meter{position:relative;height:34px;margin-top:10px;border-radius:999px;border:1px solid rgba(64,215,255,.35);background:rgba(3,8,20,.8);overflow:hidden;box-shadow:inset 0 0 20px rgba(0,0,0,.35)}
.power-zone{position:absolute;top:6px;bottom:6px}
.zone-safe{left:2%;width:39%;border-radius:999px 0 0 999px;background:linear-gradient(90deg,rgba(115,255,105,.22),rgba(115,255,105,.52))}
.zone-good{left:41%;width:34%;background:linear-gradient(90deg,rgba(255,230,90,.52),rgba(255,173,56,.62))}
.zone-hot{left:75%;right:2%;border-radius:0 999px 999px 0;background:linear-gradient(90deg,rgba(255,100,70,.62),rgba(255,77,77,.5))}
#powerNeedle{position:absolute;top:1px;bottom:1px;left:50%;width:7px;border-radius:999px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.85),0 0 24px rgba(64,215,255,.45);transform:translateX(-50%)}
.button-stack{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.club-panel{border-radius:22px;padding:10px 12px 12px;overflow:hidden}
.club-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}
.club-header strong{display:block;margin-top:2px;font-size:.98rem}
#holeTip{color:var(--yellow);font-size:.82rem;font-weight:900;text-align:right}
.club-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.club-card{min-height:66px;border:1px solid rgba(64,215,255,.24);border-radius:16px;padding:7px 8px;background:linear-gradient(180deg,rgba(8,21,49,.74),rgba(3,9,22,.82));cursor:pointer;text-align:left;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center}
.club-copy{min-width:0}
.club-art{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 14px rgba(64,215,255,.14);position:relative;overflow:hidden}
.club-art span{position:relative;z-index:1;font-size:1.15rem;line-height:1;text-shadow:0 0 12px rgba(255,255,255,.32)}
.club-art--driver{background:linear-gradient(145deg,rgba(47,139,255,.44),rgba(14,46,102,.96));color:#dff9ff}
.club-art--wedge{background:linear-gradient(145deg,rgba(255,225,90,.5),rgba(122,86,18,.96));color:#fffbe6}
.club-art--putter{background:linear-gradient(145deg,rgba(78,241,132,.46),rgba(16,88,42,.96));color:#efffe8}
.club-card strong{display:block;font-size:.78rem;line-height:1.05}
.club-card span{display:block;margin-top:3px;color:var(--muted);font-size:.64rem;line-height:1.08}
.club-card .club-tag{display:inline-flex;margin-top:5px;padding:2px 6px;border-radius:999px;color:#071026;background:var(--cyan);font-size:.55rem;font-weight:900;font-style:normal;letter-spacing:.05em;text-transform:uppercase}
.club-card.is-selected{border-color:rgba(115,255,105,.82);box-shadow:0 0 18px rgba(115,255,105,.16),inset 0 0 0 1px rgba(115,255,105,.22)}
.course-meta{border-radius:20px;padding:10px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;gap:10px}
.course-meta strong{display:block;margin-top:3px;white-space:nowrap}
.compact{min-height:40px;padding-inline:12px}
.rotate-prompt{display:none}

/* Phone portrait: force landscape */
@media (max-width:700px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  body{position:fixed;inset:0;width:100%;background:radial-gradient(circle at 50% 18%,rgba(64,215,255,.22),transparent 35%),#050914}
  .rotate-prompt{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 20%,rgba(64,215,255,.24),transparent 34%),radial-gradient(circle at 20% 80%,rgba(244,92,255,.16),transparent 32%),rgba(3,8,20,.96);color:var(--text);text-align:center}
  .rotate-card{width:min(100%,360px);border:1px solid rgba(64,215,255,.42);border-radius:26px;padding:26px 20px;background:linear-gradient(180deg,rgba(8,21,49,.92),rgba(4,10,24,.96));box-shadow:0 0 28px rgba(64,215,255,.18),0 0 80px rgba(244,92,255,.12)}
  .rotate-icon{width:76px;height:76px;margin:0 auto 14px;display:grid;place-items:center;border-radius:24px;border:1px solid rgba(64,215,255,.5);background:rgba(6,18,42,.9);color:var(--cyan);font-size:2.6rem;text-shadow:0 0 18px rgba(64,215,255,.7)}
  .rotate-card h2{margin:0 0 8px;font-size:1.7rem;line-height:1.1}
  .rotate-card p{margin:0;color:#c9def5;line-height:1.45}
}

/* Phone landscape: full-screen course, overlay UI */
@media (max-height:560px) and (max-width:1020px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  body{position:fixed;inset:0;width:100%}
  .game-shell{height:100dvh;min-height:100dvh;width:100%;padding:4px 6px;gap:0;grid-template-rows:minmax(0,1fr)}
  .topbar{position:absolute;top:7px;right:8px;z-index:60;pointer-events:none}
  .topbar .brand{display:none}
  .header-actions{pointer-events:auto}
  .tools-button{display:inline-grid;min-height:32px;height:32px;padding:0 10px;border-radius:12px;font-size:.76rem;background:rgba(5,13,31,.74);backdrop-filter:blur(6px)}
  .quick-restart-button,.icon-button{width:32px;height:32px;min-height:32px;border-radius:12px;background:rgba(5,13,31,.74);backdrop-filter:blur(6px);font-size:.86rem}
  .hud{position:absolute;top:7px;left:8px;z-index:35;width:min(560px,58vw);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:0;pointer-events:none}
  .hud-card{min-height:32px;padding:3px 6px;border-radius:11px;background:rgba(4,11,27,.62);backdrop-filter:blur(6px)}
  .hud-card span{font-size:.46rem;letter-spacing:.055em}
  .hud-card strong{margin-top:1px;font-size:clamp(.58rem,1.7vw,.84rem)}
  .course-panel{height:100%;min-height:0;border-radius:16px;grid-row:1}
  .control-panel{position:absolute;left:8px;right:8px;bottom:max(7px,env(safe-area-inset-bottom));z-index:50;display:grid;grid-template-columns:.50fr 1.15fr 1.35fr;gap:5px;max-width:860px}
  .step-card,.power-card{min-height:44px;padding:6px 8px;border-radius:13px;background:rgba(5,13,31,.72);backdrop-filter:blur(6px)}
  .step-label{font-size:.46rem;letter-spacing:.055em}
  .aim-card strong{font-size:clamp(.82rem,2.7vw,1.08rem)}
  .hint{display:none}
  .power-heading strong{font-size:.66rem}
  .power-meter{height:21px;margin-top:4px}
  .button-stack{display:grid;grid-template-columns:.9fr .9fr 1.1fr;gap:5px}
  #viewAheadButton,#lockAimButton,.shoot-button{height:44px;min-height:44px;border-radius:13px;font-size:.78rem;padding:0 8px}
  .club-panel,.course-meta{display:none}
  body.mobile-tools-open .club-panel{display:block;position:fixed;right:8px;top:46px;bottom:58px;left:auto;width:min(390px,46vw);max-height:none;z-index:80;overflow:auto;padding:10px;border-radius:16px;backdrop-filter:blur(10px)}
  body.mobile-tools-open .club-list{display:grid;grid-template-columns:1fr;gap:7px}
  body.mobile-tools-open .course-meta{display:none}
}

/* Overlay safety */
body.has-active-overlay{overflow:hidden}
body.has-active-overlay .course-panel,.course-panel:has(.overlay-visible){z-index:9998;overflow:visible}
body.has-active-overlay .topbar,body.has-active-overlay .hud,body.has-active-overlay .control-panel,body.has-active-overlay .club-panel,body.has-active-overlay .course-meta{display:none!important}
body.has-active-overlay .overlay-visible{position:fixed;inset:0;z-index:9999;display:flex!important;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 15%,rgba(64,215,255,.18),transparent 34%),radial-gradient(circle at 50% 82%,rgba(244,92,255,.16),transparent 30%),rgba(3,8,20,.9);backdrop-filter:blur(7px)}
body.has-active-overlay .overlay-card{width:min(94vw,560px);max-height:min(86svh,560px);overflow:auto;border-radius:22px;padding:clamp(14px,3vw,20px)}
@media (max-height:560px) and (max-width:1020px) and (orientation:landscape){
  body.has-active-overlay .game-shell{display:block;height:100svh;padding:0}
  body.has-active-overlay .course-panel{height:100svh;border-radius:0}
  body.has-active-overlay .overlay-card{width:min(92vw,620px);max-height:88svh;padding:12px 14px;border-radius:18px}
  body.has-active-overlay .overlay-kicker{font-size:.62rem;margin-bottom:4px}
  body.has-active-overlay .overlay-card h2{font-size:clamp(1rem,3.2vw,1.45rem);line-height:1.05;margin-bottom:7px}
  body.has-active-overlay .overlay-card p,body.has-active-overlay .small-note{font-size:.82rem;line-height:1.32}
  body.has-active-overlay .result-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:8px 0 10px}
  body.has-active-overlay .result-grid div{padding:7px 8px;border-radius:12px}
  body.has-active-overlay .result-grid span{font-size:.58rem}
  body.has-active-overlay .result-grid strong{font-size:.9rem}
  body.has-active-overlay .primary-button,body.has-active-overlay .ghost-button{min-height:38px;height:38px;border-radius:13px;padding:0 14px;font-size:.86rem}
}


.course-select {
  margin: 12px 0 14px;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 8px;
}

.course-card {
  min-height: 82px;
  border: 1px solid rgba(64,215,255,0.28);
  border-radius: 18px;
  padding: 10px 12px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(8, 21, 49, 0.86), rgba(3, 9, 22, 0.88));
  cursor: pointer;
  text-align: left;
}

.course-card strong {
  display: block;
  font-size: 1rem;
}

.course-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.2;
}

.course-card em {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #071026;
  background: var(--cyan);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.course-card.is-selected {
  border-color: rgba(115,255,105,0.82);
  box-shadow: 0 0 18px rgba(115,255,105,0.16), inset 0 0 0 1px rgba(115,255,105,0.22);
}

.course-card.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.72);
}

.course-card.is-locked em {
  background: rgba(255,255,255,0.18);
  color: var(--text);
}

/* Hex Golf final v4 club addition */
.club-art--hybrid {
  background: linear-gradient(145deg, rgba(179,108,255,0.52), rgba(54,22,112,0.98));
  color: #f3e9ff;
}

/* Hex Golf final v5 Pure Drive skill-check */
.zone-pure {
  display: none;
  left: 92.5%;
  width: 5.5%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,214,107,0.96), rgba(255,173,56,0.86));
  box-shadow: 0 0 14px rgba(255,214,107,0.75), inset 0 0 0 1px rgba(255,255,255,0.5);
  z-index: 3;
}

body.pure-driver-active .zone-pure {
  display: block;
}

body.pure-driver-active .power-meter::after {
  content: "PURE";
  position: absolute;
  right: 3.2%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  color: #071026;
  font-size: 0.55rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Hex Golf final v6 club UI polish */
@media (min-width: 900px) {
  .club-panel {
    padding: 9px 10px 10px;
  }

  .club-header {
    margin-bottom: 7px;
  }
}

@media (max-height:560px) and (max-width:1020px) and (orientation:landscape){
  body.mobile-tools-open .control-panel {
    display: none;
  }

  body.mobile-tools-open .club-panel {
    display: block;
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: max(7px, env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-height: 128px;
    z-index: 82;
    overflow: hidden;
    padding: 8px;
    border-radius: 15px;
    background: rgba(5, 13, 31, 0.82);
    backdrop-filter: blur(10px);
  }

  body.mobile-tools-open .club-header {
    margin-bottom: 6px;
    align-items: center;
  }

  body.mobile-tools-open .club-header strong {
    font-size: 0.82rem;
  }

  body.mobile-tools-open #holeTip {
    max-width: 56vw;
    font-size: 0.66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.mobile-tools-open .club-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body.mobile-tools-open .club-card {
    min-height: 54px;
    grid-template-columns: 30px 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
  }

  body.mobile-tools-open .club-art {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  body.mobile-tools-open .club-art span {
    font-size: 0.92rem;
  }

  body.mobile-tools-open .club-card strong {
    font-size: 0.66rem;
  }

  body.mobile-tools-open .club-card span {
    display: none;
  }

  body.mobile-tools-open .club-card .club-tag {
    margin-top: 3px;
    padding: 2px 5px;
    font-size: 0.48rem;
  }
}

@media (max-width: 760px) and (min-height:561px) {
  .club-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Hex Golf final v12 ball-core selector */
.core-select {
  margin: 10px 0 14px;
}

.core-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.core-card {
  min-height: 54px;
  border: 1px solid rgba(64,215,255,0.24);
  border-radius: 14px;
  padding: 7px 8px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(8,21,49,0.78), rgba(3,9,22,0.88));
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 7px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.core-card strong {
  display: block;
  font-size: 0.72rem;
  line-height: 1.05;
}

.core-card em {
  display: inline-flex;
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--cyan);
  color: #071026;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.core-card.is-selected {
  border-color: rgba(115,255,105,0.82);
  box-shadow: 0 0 16px rgba(115,255,105,0.18), inset 0 0 0 1px rgba(115,255,105,0.22);
}

.core-card.is-locked {
  opacity: 0.48;
  filter: saturate(0.65);
}

.core-card.is-locked em {
  color: var(--text);
  background: rgba(255,255,255,0.16);
}

.core-swatch {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: radial-gradient(circle at 35% 28%, #fff, var(--core, #40d7ff) 42%, rgba(7,18,45,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 0 14px var(--glow, #40d7ff);
}

.core-panel-inline {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.core-list-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px;
}

.core-list-compact .core-card {
  min-height: 44px;
  grid-template-columns: 22px 1fr;
  padding: 5px 6px;
}

.core-list-compact .core-swatch {
  width: 20px;
  height: 20px;
  border-radius: 7px;
}

.core-list-compact .core-card strong {
  font-size: 0.58rem;
}

.core-list-compact .core-card em {
  font-size: 0.44rem;
}

@media (max-height:560px) and (max-width:1020px) and (orientation:landscape) {
  body.mobile-tools-open .core-panel-inline {
    display: none;
  }

  .core-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .core-card {
    min-height: 46px;
    grid-template-columns: 24px 1fr;
    padding: 5px 6px;
  }

  .core-swatch {
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }

  .core-card strong {
    font-size: 0.62rem;
  }

  .core-card em {
    font-size: 0.46rem;
  }
}


/* Hex Golf final v14 mobile landscape club UI revision
   Keep desktop unchanged. On phones in landscape, club selection is now a
   permanent bottom UI strip instead of a top/right overlay. */
@media (max-height:560px) and (max-width:1020px) and (orientation:landscape) {
  .game-shell {
    position: relative;
  }

  .tools-button {
    display: none !important;
  }

  .topbar {
    top: 7px;
    right: 8px;
  }

  .header-actions {
    gap: 5px;
  }

  .control-panel,
  body.mobile-tools-open .control-panel {
    display: grid !important;
    bottom: max(6px, env(safe-area-inset-bottom));
    max-width: 860px;
  }

  .club-panel,
  body.mobile-tools-open .club-panel {
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 51px) !important;
    width: auto !important;
    max-width: 860px;
    max-height: 46px !important;
    z-index: 54 !important;
    overflow: hidden !important;
    padding: 4px 5px !important;
    border-radius: 13px !important;
    background: rgba(5, 13, 31, 0.76) !important;
    backdrop-filter: blur(8px);
  }

  .club-header,
  body.mobile-tools-open .club-header,
  .core-panel-inline,
  body.mobile-tools-open .core-panel-inline,
  .course-meta,
  body.mobile-tools-open .course-meta {
    display: none !important;
  }

  .club-list,
  body.mobile-tools-open .club-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .club-card,
  body.mobile-tools-open .club-card {
    min-height: 37px !important;
    height: 37px !important;
    grid-template-columns: 24px 1fr !important;
    gap: 5px !important;
    padding: 4px 5px !important;
    border-radius: 10px !important;
    align-items: center !important;
  }

  .club-art,
  body.mobile-tools-open .club-art {
    width: 22px !important;
    height: 22px !important;
    border-radius: 8px !important;
  }

  .club-art span,
  body.mobile-tools-open .club-art span {
    display: block !important;
    font-size: 0.78rem !important;
  }

  .club-card strong,
  body.mobile-tools-open .club-card strong {
    font-size: clamp(0.52rem, 1.55vw, 0.66rem) !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .club-card .club-copy > span,
  .club-card .club-tag,
  body.mobile-tools-open .club-card .club-copy > span,
  body.mobile-tools-open .club-card .club-tag {
    display: none !important;
  }

  .club-card.is-selected {
    border-color: rgba(115,255,105,.95) !important;
    box-shadow: 0 0 14px rgba(115,255,105,.22), inset 0 0 0 1px rgba(115,255,105,.28) !important;
  }
}

@media (max-height:430px) and (max-width:900px) and (orientation:landscape) {
  .club-panel,
  body.mobile-tools-open .club-panel {
    bottom: calc(max(5px, env(safe-area-inset-bottom)) + 47px) !important;
    max-height: 42px !important;
    padding: 3px 4px !important;
  }

  .club-card,
  body.mobile-tools-open .club-card {
    min-height: 34px !important;
    height: 34px !important;
  }

  .club-art,
  body.mobile-tools-open .club-art {
    width: 20px !important;
    height: 20px !important;
  }

  .club-card strong,
  body.mobile-tools-open .club-card strong {
    font-size: 0.52rem !important;
  }
}


/* Hex Golf final v16 mobile landscape HUD + Clubs button revision
   Desktop/wide-screen remains unchanged. */
.clubs-bottom-button {
  display: none;
}

@media (max-height:560px) and (max-width:1020px) and (orientation:landscape) {
  .clubs-bottom-button {
    display: inline-grid !important;
  }

  .tools-button {
    display: none !important;
  }

  /* Move game HUD/actions down so the wrapper nav does not cover them. */
  .topbar {
    top: max(38px, env(safe-area-inset-top)) !important;
    right: 8px !important;
  }

  .hud {
    top: max(38px, env(safe-area-inset-top)) !important;
    width: min(520px, 58vw) !important;
  }

  .control-panel,
  body.mobile-tools-open .control-panel {
    display: grid !important;
    grid-template-columns: .44fr .92fr 1.72fr !important;
    gap: 5px !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    max-width: 860px !important;
  }

  .power-card {
    padding: 5px 7px !important;
  }

  .power-meter {
    height: 18px !important;
    margin-top: 3px !important;
  }

  .power-heading strong {
    font-size: 0.6rem !important;
  }

  .button-stack {
    display: grid !important;
    grid-template-columns: .74fr .66fr .78fr .92fr !important;
    gap: 4px !important;
  }

  #viewAheadButton,
  #bottomClubsButton,
  #lockAimButton,
  .shoot-button {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: clamp(0.58rem, 1.7vw, 0.76rem) !important;
    padding: 0 5px !important;
  }

  .shoot-button {
    font-size: clamp(0.66rem, 1.9vw, 0.84rem) !important;
  }

  /* Club picker is hidden by default and opens only when the bottom Clubs button is tapped. */
  .club-panel {
    display: none !important;
  }

  body.mobile-tools-open .club-panel {
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 49px) !important;
    width: auto !important;
    max-width: 860px !important;
    max-height: 46px !important;
    z-index: 82 !important;
    overflow: hidden !important;
    padding: 4px 5px !important;
    border-radius: 13px !important;
    background: rgba(5, 13, 31, 0.86) !important;
    backdrop-filter: blur(9px) !important;
  }

  body.mobile-tools-open .club-header,
  body.mobile-tools-open .core-panel-inline,
  body.mobile-tools-open .course-meta {
    display: none !important;
  }

  body.mobile-tools-open .club-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body.mobile-tools-open .club-card {
    height: 37px !important;
    min-height: 37px !important;
    grid-template-columns: 24px 1fr !important;
    gap: 5px !important;
    padding: 4px 5px !important;
    border-radius: 10px !important;
  }

  body.mobile-tools-open .club-art {
    width: 22px !important;
    height: 22px !important;
    border-radius: 8px !important;
  }

  body.mobile-tools-open .club-art span {
    font-size: 0.78rem !important;
  }

  body.mobile-tools-open .club-card strong {
    font-size: clamp(0.52rem, 1.55vw, 0.66rem) !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.mobile-tools-open .club-card .club-copy > span,
  body.mobile-tools-open .club-card .club-tag {
    display: none !important;
  }
}

@media (max-height:430px) and (max-width:900px) and (orientation:landscape) {
  .topbar,
  .hud {
    top: max(32px, env(safe-area-inset-top)) !important;
  }

  .control-panel,
  body.mobile-tools-open .control-panel {
    grid-template-columns: .40fr .86fr 1.78fr !important;
  }

  #viewAheadButton,
  #bottomClubsButton,
  #lockAimButton,
  .shoot-button {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 0.58rem !important;
  }

  body.mobile-tools-open .club-panel {
    bottom: calc(max(5px, env(safe-area-inset-bottom)) + 43px) !important;
    max-height: 41px !important;
    padding: 3px 4px !important;
  }

  body.mobile-tools-open .club-card {
    height: 33px !important;
    min-height: 33px !important;
  }
}


/* Hex Golf final v18 mobile HUD / action text / club-label polish */
@media (max-height:560px) and (max-width:1020px) and (orientation:landscape) {
  /* Move these up a bit from v16 while still leaving room below the wrapper nav. */
  .topbar {
    top: max(31px, env(safe-area-inset-top)) !important;
  }

  .hud {
    top: max(31px, env(safe-area-inset-top)) !important;
  }

  #viewAheadButton,
  #bottomClubsButton,
  #lockAimButton,
  .shoot-button {
    display: inline-grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #bottomClubsButton {
    transform: none !important;
  }

  body.mobile-tools-open .club-card strong {
    font-size: 0 !important;
  }

  body.mobile-tools-open .club-card strong::after {
    content: attr(data-short);
    font-size: clamp(0.54rem, 1.55vw, 0.68rem);
    line-height: 1;
    white-space: nowrap;
  }
}

@media (max-height:430px) and (max-width:900px) and (orientation:landscape) {
  .topbar,
  .hud {
    top: max(27px, env(safe-area-inset-top)) !important;
  }

  body.mobile-tools-open .club-card strong::after {
    content: attr(data-letter);
    font-size: 0.62rem;
  }
}