
body[data-svc="paddlejam"] {
  --pj-lime: #D4F53E;
  --pj-lime-deep: #9FC21A;
  --pj-bg: #0B1210;
  --pj-panel: #101A16;
  --pj-panel-2: #16231D;
  --pj-edge: #3E5A4C;
  --pj-ink-sub: #B9C2BA;
  background: var(--pj-bg);
}

.pj-main {
  position: relative;
  padding-bottom: var(--k-sec-y-s);
  background:
    radial-gradient(60% 420px at 85% 0, rgba(232, 255, 200, .07), transparent 70%),
    repeating-linear-gradient(45deg, rgba(159, 178, 168, .09) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(159, 178, 168, .09) 0 1px, transparent 1px 18px),
    var(--pj-bg);
}
.pj-main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(var(--k-gutter) * .5 - 4px), #26302B calc(var(--k-gutter) * .5 - 4px) calc(var(--k-gutter) * .5 + 4px), transparent 0),
    linear-gradient(-90deg, transparent calc(var(--k-gutter) * .5 - 4px), #26302B calc(var(--k-gutter) * .5 - 4px) calc(var(--k-gutter) * .5 + 4px), transparent 0);
}

.pj-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pj-hero { position: relative; overflow: hidden; background: #070B0A; }
.pj-scene { display: block; width: 100%; height: clamp(300px, 86vw, 480px); }
.pj-hero-in {
  position: relative; z-index: 1;
  padding: var(--k-sp-4) var(--k-gutter) var(--k-sp-5);
  display: grid; gap: var(--k-sp-2); justify-items: start; align-content: center;
  background: #0A100E;
}
@media (max-width: 1099px) {
  .pj-hero { display: flex; flex-direction: column; }
  .pj-hero-in { border-top: var(--k-border-w) solid #1E2A24; }
}
@media (min-width: 1100px) {
  .pj-hero {
    display: grid; grid-template-columns: minmax(480px, 40%) minmax(0, 1fr);
    min-height: min(calc(100svh - 64px), 900px);
  }
  .pj-hero-in { grid-column: 1; grid-row: 1; padding: var(--k-sp-5) var(--k-sp-5) var(--k-sp-5) var(--k-gutter); border-right: var(--k-border-w) solid #1E2A24; }
  .pj-scene {
    grid-column: 2; grid-row: 1; height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px); mask-image: linear-gradient(90deg, transparent 0, #000 72px);
  }
}
.pj-fine { visibility: var(--pj-fine, visible); }
.pj-lane { --pj-fine: hidden; }
@media (max-width: 1099px) { .pj-hero { --pj-fine: hidden; } }

.pj-chips { display: flex; align-items: center; gap: var(--k-sp-1); }
.pj-chips span {
  padding: 3px 10px; border: var(--k-border-w) solid #E9EEE6; border-radius: 2px;
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .16em; color: #E9EEE6;
}
.pj-mark { width: 44px; height: auto; margin-right: var(--k-sp-1); border-radius: 9px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .9); }
.pj-title {
  font-family: var(--k-font-en); font-weight: 800; line-height: .88; letter-spacing: .02em;
  font-size: clamp(72px, min(10vw, 11.5svh), 148px); color: var(--k-ink);
}
.pj-title span { display: block; }
.pj-tagline { font-weight: 900; font-size: var(--k-fs-h2); line-height: 1.4; letter-spacing: var(--k-head-ls); color: var(--k-ink); }
.pj-hero-lead { font-size: var(--k-fs-lead); line-height: 1.85; color: var(--k-ink-mid); max-width: 34em; }
.pj-main em { font-style: normal; font-weight: 900; color: var(--k-ink); }
.pj-duty {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--k-sp-2); align-items: start;
  margin-top: var(--k-sp-2); padding-top: var(--k-sp-3); border-top: var(--k-border-w) solid #1E2A24;
  font-size: var(--k-fs-sm); line-height: 1.8; color: var(--k-ink-mid);
}
.pj-duty-ball { width: 26px; height: 26px; margin-top: 2px; }
.pj-duty b { font-weight: 700; color: var(--k-ink); }

.pj-stencil { font-family: var(--k-font-en); font-weight: 800; font-size: 30px; letter-spacing: .08em; fill: #2B1F05; opacity: .85; }
.pj-stencil-ja { font-family: var(--k-font-head); font-weight: 900; font-size: 13px; letter-spacing: .12em; fill: #2B1F05; opacity: .75; }
.pj-plate { font-family: var(--k-font-en); font-weight: 800; font-size: 10px; letter-spacing: .1em; fill: #B9C2BA; }
.pj-plate-l { font-family: var(--k-font-en); font-weight: 800; font-size: 11px; letter-spacing: .1em; fill: #C9D4CC; }
.pj-lane-tag { font-family: var(--k-font-en); font-weight: 800; font-size: 13px; letter-spacing: .24em; fill: #6E8A7C; }

.pj-panel {
  position: relative; z-index: 1;
  width: min(100% - var(--k-gutter) * 2 - 28px, 1152px); margin-inline: auto; margin-top: calc(var(--k-sp-5) + 14px);
  padding: var(--k-sp-5) clamp(20px, 4vw, 56px);
  background: linear-gradient(180deg, #1F4C3B, #1B4434);
  border: 4px solid #E9EEE6;
  box-shadow: 0 0 0 14px #11261E, 0 0 0 16px #2C4A3D, 0 30px 44px 2px rgba(0, 0, 0, .75);
}
.pj-lane + .pj-panel { margin-top: 14px; }
@media (max-width: 599px) {
  .pj-panel { width: calc(100% - 32px); padding: var(--k-sp-4) 16px; box-shadow: 0 0 0 8px #11261E, 0 0 0 10px #2C4A3D, 0 24px 36px rgba(0, 0, 0, .75); }
  .pj-sheet-head, .pj-sheet-rows { padding-inline: var(--k-sp-2); }
}
.pj-head { display: grid; gap: 4px; margin-bottom: var(--k-sp-4); padding-bottom: var(--k-sp-3); border-bottom: 3px solid rgba(233, 238, 230, .85); }
.pj-en { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .26em; color: #C9D4CC; }
.pj-h2 { font-weight: 900; font-size: var(--k-fs-h2); line-height: 1.35; letter-spacing: var(--k-head-ls); color: var(--k-ink); }
.pj-sub { font-size: var(--k-fs-sm); color: #D5DDD7; }

.pj-about { display: grid; gap: var(--k-sp-4); }
.pj-lead { font-weight: 700; font-size: var(--k-fs-lead); line-height: 1.9; color: var(--k-ink); }
.pj-prose { display: grid; gap: var(--k-sp-3); font-size: var(--k-fs-body); line-height: 1.95; color: #DCE3DE; }
@media (min-width: 900px) {
  .pj-about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--k-col-gap); }
  .pj-sheet, .pj-note { grid-column: 1 / -1; }
}
.pj-note { font-size: var(--k-fs-sm); color: #D5DDD7; }

.pj-sheet {
  position: relative; margin-top: var(--k-sp-3);
  padding: 10px 10px 12px; background: #6E5114; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #4E390D, 0 16px 26px -12px rgba(0, 0, 0, .9);
}
.pj-sheet::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 120px; height: 26px; margin-left: -60px;
  background: linear-gradient(180deg, #C3C9CD, #7D8488); border: 2px solid #3A3F43; border-radius: 6px 6px 3px 3px;
}
.pj-sheet-head, .pj-sheet-rows { background: #EEEBDD; color: #1B1F1C; }
.pj-sheet-head {
  display: flex; align-items: baseline; gap: var(--k-sp-2); padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-2);
  border-bottom: 3px double #1B1F1C; font-weight: 900; font-size: var(--k-fs-h3);
}
.pj-sheet-head span { font-family: var(--k-font-en); font-weight: 800; letter-spacing: .12em; color: #B8402F; }
.pj-sheet-rows { padding: 0 var(--k-sp-3) var(--k-sp-2); }
.pj-sheet-rows > div { display: grid; gap: 2px var(--k-sp-3); padding: var(--k-sp-2) 0; border-bottom: 1px solid #B9B39F; }
.pj-sheet-rows > div:last-child { border-bottom: 0; }
.pj-sheet-rows dt { font-weight: 900; font-size: var(--k-fs-h4); }
.pj-sheet-rows dd { margin: 0; font-size: var(--k-fs-body); line-height: 1.75; color: #33392F; }
@media (min-width: 700px) {
  .pj-sheet-rows > div { grid-template-columns: 12em minmax(0, 1fr); align-items: baseline; }
  .pj-sheet-rows dt { border-right: 1px solid #B9B39F; }
}

.pj-court { position: relative; border: 3px solid #E9EEE6; background: #23563F; }
.pj-feats { display: grid; grid-template-columns: minmax(0, 1fr); }
.pj-feats li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--k-sp-3); align-items: center;
  padding: var(--k-sp-4) var(--k-sp-3);
}
.pj-feats li + li { border-top: 3px solid #E9EEE6; }
.pj-feats p { font-weight: 700; font-size: var(--k-fs-h4); line-height: 1.75; color: var(--k-ink); }
.pj-ico { width: 64px; height: 64px; }
.pj-court-net { display: none; }
@media (min-width: 760px) {
  .pj-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-feats li { grid-template-columns: 80px minmax(0, 1fr); padding: var(--k-sp-5) var(--k-sp-4); }
  .pj-ico { width: 80px; height: 80px; }
  .pj-feats li + li { border-top: 0; }
  .pj-feats li:nth-child(odd) { border-right: 3px solid #E9EEE6; }
  .pj-feats li:nth-child(n+3) { padding-top: calc(var(--k-sp-5) + 8px); }
  .pj-court-net {
    display: block; position: absolute; left: -10px; right: -10px; top: 50%; height: 14px; margin-top: -7px; pointer-events: none;
    background:
      linear-gradient(180deg, #F2F4EF 0 4px, transparent 4px),
      repeating-linear-gradient(90deg, rgba(233, 238, 230, .55) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(0deg, rgba(233, 238, 230, .55) 0 1px, transparent 1px 5px),
      #0E1A15;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .45);
  }
  .pj-court-net::before, .pj-court-net::after { content: ""; position: absolute; top: -6px; width: 8px; height: 24px; background: linear-gradient(90deg, #3A3F43, #8F969B, #3A3F43); }
  .pj-court-net::before { left: 0; } .pj-court-net::after { right: 0; }
}

.pj-shots { display: grid; gap: var(--k-sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .pj-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-shot-main { grid-column: 1 / -1; }
}
.pj-shots figure { margin: 0; }
.pj-shots .shot { border: 6px solid #0E1A15; border-radius: 4px; background: #0E1A15; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .95); }
.pj-shots figcaption { display: flex; align-items: baseline; gap: var(--k-sp-2); margin-top: var(--k-sp-2); font-weight: 700; font-size: var(--k-fs-sm); color: var(--k-ink); }
.pj-cap-no { font-family: var(--k-font-en); font-weight: 800; letter-spacing: .18em; color: #C9D4CC; }
.shot:focus-visible, .pj-main a:focus-visible { outline: 3px solid #F2F4EF; outline-offset: 3px; }

.pj-arc { display: none; }
.pj-week { display: grid; gap: var(--k-sp-3); position: relative; }
.pj-week li { position: relative; display: grid; gap: 2px; align-content: start; padding-left: 44px; }
.pj-wball { position: absolute; left: 0; top: 0; width: 28px; height: 28px; }
.pj-week li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 34px; bottom: calc(var(--k-sp-3) * -1 + 4px); border-left: 2px dashed rgba(233, 238, 230, .45); }
.pj-day { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .16em; color: #C9D4CC; }
.pj-week b { font-weight: 900; font-size: var(--k-fs-h3); color: var(--k-ink); }
.pj-week li > span:last-child { font-size: var(--k-fs-sm); line-height: 1.8; color: #DCE3DE; }
@media (min-width: 900px) {
  .pj-arc { display: block; width: 100%; height: 70px; margin-bottom: -26px; }
  .pj-week { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--k-sp-3); }
  .pj-week li { padding: 40px 0 0; justify-items: center; text-align: center; }
  .pj-wball { left: calc(50% - 14px); }
  .pj-week li::after { display: none; }
}
.pj-week-note { margin-top: var(--k-sp-4); padding-top: var(--k-sp-3); border-top: 3px solid rgba(233, 238, 230, .85); font-weight: 700; color: var(--k-ink); }

.pj-try { display: grid; gap: var(--k-sp-4); align-items: end; }
@media (min-width: 900px) { .pj-try { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pj-cta h2 { color: var(--k-ink); }
.pj-cta > p:not(.pj-en) { color: #DCE3DE; }
.pj-btn {
  min-height: 52px; padding: 0 var(--k-sp-4); font-size: var(--k-fs-body); color: #0B1210;
  background: linear-gradient(180deg, #E4FF6A, #B8DC1E); border-color: #4E6408;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 #4E6408, 0 6px 12px rgba(0, 0, 0, .5);
}
@media (hover: hover) and (pointer: fine) { .pj-btn:hover { background: linear-gradient(180deg, #EEFF8E, #C8EA2E); } }
.pj-dock { display: block; width: 100%; max-width: 520px; height: auto; justify-self: end; }
.pj-nav { margin-top: var(--k-sp-5); padding-top: var(--k-sp-4); border-top: 3px solid rgba(233, 238, 230, .85); }
.pj-nav a { background: #11261E; border: var(--k-border-w) solid #4E7563; }
.pj-nav .svc-dir { color: #C9D4CC; }
@media (hover: hover) and (pointer: fine) { .pj-nav a:hover { border-color: #F2F4EF; background: #173328; } }

.pj-lane { position: relative; z-index: 2; width: min(100%, 1400px); margin-inline: auto; margin-top: var(--k-sp-3); margin-bottom: -14px; }
.pj-lane-svg { display: block; width: 100%; height: clamp(120px, 14vw, 170px); overflow: visible; }

.pj-fb { transform-box: fill-box; transform-origin: center bottom; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.pj-fb.is-got { opacity: 0; transform: translateY(-10px) scale(.7); }
.pj-hb { transition: opacity .18s var(--ease-out); }
.pj-hb.is-off { opacity: 0; }
.pj-bot-parked .pj-beamcone, .pj-bot-parked .pj-lamp { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .pj-brush { transform-box: fill-box; transform-origin: center; animation: pj-spin 1.1s linear infinite; }
  .pj-beacon { animation: pj-blink 1.6s steps(1, end) infinite; }
}
@keyframes pj-spin { to { transform: rotate(-360deg); } }
@keyframes pj-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .pj-fb, .pj-hb { transition: none; }
}
