/* Shared tour shell. Keep all five local palettes on the same playable surface. */
.pp-shell {
  width: min(100%, 82rem);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  font: 500 1rem/1.45 system-ui, sans-serif;
}
.pp-shell, .pp-shell * { box-sizing: border-box; }
.pp-game {
  --tour-accent: #ffc07c;
  --tour-panel: #33261f;
  --tour-ink: #f6f8f6;
  --tour-line: #797e79;
  --tour-sub: #d5ded9;
  container: putting / inline-size;
  position: relative;
  isolation: isolate;
  contain: layout paint;
  width: 100%;
  height: clamp(25rem, 74vh, 46rem);
  height: clamp(25rem, 74svh, 46rem);
  overflow: hidden;
  background: #182324;
  color: var(--tour-ink);
  border: 1px solid #47514e;
  border-radius: .65rem;
  color-scheme: dark;
}
.pp-game[data-course=s] { --tour-accent: #a9effc; --tour-panel: #142b39; }
.pp-game[data-course=w] { --tour-accent: #9eebbd; --tour-panel: #172d28; }
.pp-game[data-course=g] { --tour-accent: #ffbfd8; --tour-panel: #372635; }
.pp-game[data-course=b] { --tour-accent: #a9d5ff; --tour-panel: #19334c; }
.pp-stage, .pp-stage > canvas, .pp-overlay, .pp-labels, .pp-toasts, .pp-boot { position: absolute; inset: 0; }
.pp-stage { outline: none; user-select: none; }
.pp-stage > canvas { z-index: 0; display: block; width: 100%; height: 100%; max-width: none; touch-action: none; }
.pp-stage:focus-visible { outline: 3px solid var(--tour-accent); outline-offset: -4px; }
.pp-overlay { z-index: 1; pointer-events: none; }
.pp-labels, .pp-toasts { overflow: hidden; }
.pp-world-mark { position: absolute; left: 0; top: 0; display: none; pointer-events: none; transform-origin: bottom center; contain: layout paint; }
.pp-lab { position: absolute; top: 0; left: 0; white-space: nowrap; padding: .15em .45em; background: #172325; color: white; border-radius: .3rem; font: 750 .82rem/1.2 system-ui, sans-serif; }
.pp-lab.board { padding: 0; background: transparent; color: #fff; text-shadow: 0 1px 3px #101916; font-size: 27px; }
.pp-boot { display: grid; align-content: center; justify-items: center; gap: .4rem; padding: 1rem; text-align: center; }
.pp-boot b { color: var(--tour-accent); font-size: clamp(2.2rem, 7vw, 4rem); }
.pp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pp-overlay :is(button, a, input, summary), .pp-panel.show { pointer-events: auto; }
.pp-shell :is(button, a, input, summary):focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pp-game button { margin: 0; font-family: inherit; cursor: pointer; touch-action: manipulation; }
.pp-hud {
  position: absolute; top: .65rem; left: .65rem; z-index: 3;
  display: flex; align-items: center; gap: .45rem;
  max-width: calc(100% - 13.5rem); min-height: 2.9rem;
  padding: .25rem .6rem .25rem .25rem; background: var(--tour-panel); border: 1px solid var(--tour-line); border-radius: .5rem;
}
.pp-h-n, .pp-i-stk { display: grid; place-content: center; background: var(--tour-accent); color: #132024; text-align: center; font-weight: 850; }
.pp-h-n { align-self: stretch; min-width: 2rem; padding: .2rem; border-radius: .25rem; }
.pp-hud-l { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; min-width: 0; font: 650 .75rem/1.25 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pp-h-name { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; font-size: .92rem; font-weight: 780; }
.pp-h-par, .pp-h-st, .pp-h-tot { color: var(--tour-sub); white-space: nowrap; }
.pp-hud-l span:empty { display: none; }
.pp-ctrl { position: absolute; top: .65rem; right: .65rem; z-index: 4; display: flex; gap: .2rem; }
.pp-game .pp-b, .pp-shotbar button {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: .25rem;
  color: var(--tour-ink); background: var(--tour-panel); border: 1px solid var(--tour-line); border-radius: .38rem;
  font: 750 1rem/1 system-ui, sans-serif;
}
.pp-b svg { display: block; width: 21px; height: 21px; pointer-events: none; }
.pp-b.off svg { opacity: .66; }
.pp-b.on, .pp-b[aria-pressed=true]:not(.off), .pp-game button:active { border-color: var(--tour-accent); }
.pp-shotbar {
  position: absolute; z-index: 6; left: 50%; bottom: max(.6rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: .24rem; width: max-content; max-width: calc(100% - 1rem);
  padding: .24rem; border-radius: .52rem; border: 1px solid var(--tour-line); background: var(--tour-panel);
  color: var(--tour-ink); pointer-events: auto; font: 700 .75rem/1.15 system-ui, sans-serif;
}
.pp-shotbar[hidden] { display: none; }
.pp-shotbar label { margin: 0; padding: 0 .3rem; color: var(--tour-sub); text-align: left; }
.pp-shotbar input { display: block; min-width: 0; width: clamp(4.3rem, 17vw, 6.5rem); height: 1.6rem; padding: 0; margin: 0; accent-color: var(--tour-accent); }
.pp-shotbar button[data-putt] { padding-inline: .8rem; background: var(--tour-accent); color: #152126; }
.pp-meter { position: absolute; left: 50%; bottom: 4.8rem; transform: translateX(-50%); display: none; align-items: center; gap: .45rem; padding: .4rem .6rem; border-radius: .35rem; background: var(--tour-panel); color: white; font: 700 .77rem/1.2 system-ui, sans-serif; }
.pp-meter.show { display: flex; }
.pp-m-bar { width: 5rem; height: .52rem; background: #53615e; border-radius: 1rem; overflow: hidden; }
.pp-m-bar i { display: block; width: 100%; height: 100%; background: var(--tour-accent); transform-origin: left center; }
.pp-m-t { white-space: nowrap; }
.pp-panel { position: absolute; z-index: 8; inset: 0; display: none; padding: .7rem; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; background: #10181761; }
.pp-panel.show { display: flex; flex-direction: column; }
.pp-tour-cover, .pp-tour-invalid { flex: none; width: min(100%, 34rem); margin: auto; padding: clamp(.9rem, 3%, 1.6rem); border: 1px solid var(--tour-line); border-inline-start: 4px solid var(--tour-accent); border-radius: .7rem; background: var(--tour-panel); color: var(--tour-ink); text-align: left; line-height: 1.4; }
.pp-tour-cover::after { content: ""; display: block; clear: both; }
.pp-tour-cover h2 { margin: .26rem 0 .55rem; color: var(--tour-ink); font: 820 clamp(1.55rem, 4vw, 2.55rem)/1.08 system-ui, sans-serif; letter-spacing: -.035em; text-shadow: none; }
.pp-tour-cover small, .pp-i-of { color: var(--tour-accent); font: 750 .68rem/1.3 ui-monospace, monospace; letter-spacing: .07em; }
.pp-tour-cover p { margin: .5rem 0; color: var(--tour-ink); font-size: 1rem; line-height: 1.4; }
.pp-tour-cover .pp-tour-tip { color: var(--tour-sub); font-size: .85rem; }
.pp-tour-art { float: right; width: clamp(4.6rem, 28%, 7.4rem); max-height: 6.2rem; margin: 0 0 .35rem .7rem; object-fit: contain; border-radius: .4rem; }
.pp-tour-cover :is(.pp-b2, .pp-tour-link) {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-height: 44px; max-width: 100%;
  margin: .25rem .26rem .2rem 0; padding: .55rem .84rem; border: 1px solid var(--tour-line); border-radius: .42rem;
  background: transparent; color: var(--tour-ink); text-decoration: none; text-align: center; text-shadow: none;
  font: 730 .95rem/1.25 system-ui, sans-serif;
}
.pp-tour-cover :is(.pp-b2.pri, .pp-tour-link) { border-color: var(--tour-accent); background: var(--tour-accent); color: #142124; }
.pp-tour-cover .pp-tour-caddy { clear: both; padding: .35rem .6rem; border-inline-start: 2px solid var(--tour-accent); font-style: italic; }
.pp-tour-url { display: block; margin-top: .65rem; font-size: .8rem; color: var(--tour-sub); }
.pp-tour-url input { width: 100%; margin: .2rem 0; padding: .45rem; font: inherit; border: 1px solid var(--tour-line); background: #172225; color: white; border-radius: .3rem; }
.pp-tour-cover .pp-sc { width: 100%; table-layout: fixed; border-collapse: collapse; margin: .4rem 0 .7rem; color: var(--tour-ink); font: 650 .78rem/1.25 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.pp-sc :is(th, td) { padding: .32rem .15rem; border: 1px solid var(--tour-line); text-align: center; }
.pp-sc th { color: var(--tour-sub); }
.pp-sc .t, .pp-sc td.new { color: var(--tour-accent); font-weight: 800; }
.pp-sc td.new { box-shadow: inset 0 -2px var(--tour-accent); }
.pp-i-par { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin: .18rem 0; }
.pp-i-tap { display: inline-block; padding: .2rem .45rem; margin-top: .2rem; background: var(--tour-panel); color: var(--tour-ink); border-radius: .3rem; font-size: .75rem; }
.pp-tour-cover summary, .pp-text summary { display: list-item; cursor: pointer; padding: .62rem 0; }
.pp-tour-score ol { padding-inline-start: 1.45rem; margin: .3rem 0; }
.pp-tour-score li { padding: .3rem 0; border-bottom: 1px solid var(--tour-line); }
.pp-tour-score li b { float: right; margin-left: .5rem; }
.pp-tour-invalid { margin-block: .45rem; }
.pp-intro, .pp-splash { position: absolute; left: 50%; top: 28%; z-index: 3; display: none; max-width: calc(100% - 1rem); transform: translateX(-50%); text-align: center; }
.pp-intro.show, .pp-splash.show { display: block; }
.pp-i-card, .pp-splash { padding: .55rem .85rem; background: var(--tour-panel); border: 1px solid var(--tour-line); border-radius: .45rem; }
.pp-i-stk { display: inline-flex; align-items: baseline; gap: .3em; padding: .2rem .45rem; margin-bottom: .25rem; border-radius: .25rem; font-size: .9rem; line-height: 1; }
.pp-i-stk small { font-size: .66em; }
.pp-i-name, .pp-sp-word { color: white; font: 780 1.16rem/1.15 system-ui, sans-serif; }
.pp-i-card > div:not(.pp-i-name,.pp-i-of), .pp-sp-sub { color: var(--tour-sub); font-size: .8rem; }
.pp-toast { position: absolute; transform: translate(-50%, -100%); padding: .18rem .45rem; border-radius: .28rem; background: var(--tour-panel); color: var(--tour-ink); font: 740 .8rem/1.2 system-ui, sans-serif; text-align: center; white-space: nowrap; }
.pp-toast i { margin-left: .35em; color: var(--tour-accent); }
.pp-toast.tip { width: max-content; max-width: calc(100% - 2rem); white-space: normal; }
.pp-toast.tip i { display: block; margin: .15em 0 0; }
.pp-game[data-course] :is(.pp-chip,.pp-dial,.pp-wheel,.pp-ccard,.pp-caddy,.pp-callouts,.pp-calls,.pp-h-style,.pp-h-combo,.pp-i-trick,.pp-sponsor), .pp-splash :is(.pp-sp-burst, i) { display: none !important; }
.pp-shell .pp-text { --pp-article-accent: #ffc07c; padding: clamp(1rem, 3%, 2rem); background: #192324; color: #edf1ef; border-radius: .55rem; text-align: left; }
.pp-game[data-course=s] + .pp-text { --pp-article-accent: #a9effc; }
.pp-game[data-course=w] + .pp-text { --pp-article-accent: #9eebbd; }
.pp-game[data-course=g] + .pp-text { --pp-article-accent: #ffbfd8; }
.pp-game[data-course=b] + .pp-text { --pp-article-accent: #a9d5ff; }
.pp-shell .pp-text h1 { margin: 0 0 .45rem; color: var(--pp-article-accent); font: 800 clamp(1.5rem,4vw,2.4rem)/1.12 system-ui, sans-serif; text-shadow: none; }
.pp-shell .pp-text p, .pp-shell .pp-text li { max-width: 74ch; color: inherit; line-height: 1.55; }
.pp-shell .pp-text a { color: var(--pp-article-accent); text-underline-offset: .18em; }
@container putting (max-width: 36rem) {
  .pp-ctrl { top: .35rem; right: .35rem; gap: 1px; }
  .pp-hud { top: .35rem; left: .35rem; max-width: calc(100% - 11.9rem); padding-right: .32rem; gap: .3rem; }
  .pp-hud-l { column-gap: .25em; font-size: .68rem; }
  .pp-h-name { font-size: .78rem; }
}
@container putting (max-width: 23rem) {
  .pp-ctrl { display: grid; grid-template-columns: 44px 44px; }
  .pp-hud { max-width: calc(100% - 6.6rem); }
}
@media (max-height: 32rem) and (orientation: landscape) {
  .pp-game { height: 85vh; height: 85svh; min-height: 15rem; }
  .pp-tour-cover { padding: .75rem 1rem; }
  .pp-tour-art { max-height: 4.2rem; }
  .pp-intro, .pp-splash { top: 24%; }
}
@media (hover: hover) {
  .pp-game :is(.pp-b,.pp-b2,.pp-tour-link,.pp-shotbar button):hover { border-color: var(--tour-accent); box-shadow: inset 0 -2px var(--tour-accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .pp-game :is(.pp-b,.pp-b2,.pp-tour-link,.pp-shotbar button) { transition: border-color .14s ease, box-shadow .14s ease; }
  .pp-toast { animation: pp-tour-cue .2s ease-out both; }
  @keyframes pp-tour-cue { from { opacity: 0; transform: translate(-50%, -85%); } to { opacity: 1; transform: translate(-50%, -100%); } }
}

.pp-pause-score { margin-block: .65rem; min-width: 0; text-align: left; }
.pp-pause-score > summary { min-height: 44px; padding: .65rem; border: 1px solid var(--tour-line); border-radius: .4rem; color: var(--tour-ink); cursor: pointer; }
.pp-pause-score[open] > summary { border-color: var(--tour-accent); }
.pp-tour-score li { display: list-item; overflow-wrap: anywhere; }
.pp-tour-score li b { float: none; display: block; margin: .15rem 0 0; }
.pp-copy-status { display: block; min-height: 1em; font-size: .85rem; }

.pp-shotbar button[data-chip][hidden]{display:none}
.pp-shotbar button[data-chip]{min-width:44px;padding-inline:.4rem;font-size:.78rem;white-space:nowrap}
.pp-shotbar button[data-chip][aria-pressed=true]{background:var(--tour-accent);color:#152126}
@container (max-width:360px){.pp-shotbar{gap:.13rem}.pp-shotbar input{width:3.3rem}.pp-shotbar label{padding-inline:.12rem}}

/* Course entrance and sight controls share the game stage; the trace never captures a shot. */
.pp-game .pp-assembly-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.pp-game .pp-assembly-skip,.pp-sight-tools button{font:600 .75rem/1.16 system-ui,sans-serif;color:#f3f6ed;background:#102025;border:1px solid #9daea0;border-radius:.45rem;min-width:32px;min-height:32px;cursor:pointer}
.pp-game .pp-assembly-skip{position:absolute;z-index:8;left:.6rem;top:3.7rem;pointer-events:auto;padding:.3rem .6rem}
.pp-sight-tools{position:absolute;z-index:6;right:.5rem;top:3.5rem;display:grid;grid-template-columns:32px 32px auto;gap:3px;align-content:start;pointer-events:none}
.pp-sight-tools button{pointer-events:auto}.pp-sight-tools button:first-child,.pp-sight-tools button:nth-child(2){font-size:1.1rem}
.pp-sight-tools output{grid-column:1/-1;justify-self:end;background:#102025ed;color:#eff5e8;border-radius:.3rem;padding:.2rem .35rem;font:600 .68rem/1.25 system-ui,sans-serif;white-space:nowrap}
.pp-game .pp-assembling .pp-world-mark{visibility:hidden}
.pp-game .pp-sight-tools[hidden],.pp-game .pp-assembly-trace[hidden],.pp-game .pp-assembly-skip[hidden]{display:none}

/* Leave both rows of the compact HUD available above the camera controls. */
@container putting (max-width: 23rem) {
  .pp-sight-tools { top: calc(.7rem + 89px); }
}