@font-face { font-family: "Jersey 10"; src: url("../fonts/jersey-10.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Jersey 15"; src: url("../fonts/jersey-15.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Jersey 20"; src: url("../fonts/jersey-20.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Jersey 25"; src: url("../fonts/jersey-25.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #1F2E33;
  --muted: #44555A;
  --cream: #FFFBF2;
  --line: #9FD3CF;
  --tab: #F08A4B;
  --accent: #C8452B;
  --deep: #1F5F66;
  --shadow: rgba(31, 46, 51, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--deep); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Jersey 25", system-ui, sans-serif;
  font-size: 21px;
  line-height: 1.35;
  font-synthesis: none;
  color: var(--ink);
  background: var(--deep);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
.px, .pond img, .footer-art img { image-rendering: pixelated; }
a { color: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--tab); outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pond {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: #86C25F url("../img/pond/grass.png") repeat;
}
.pond > *, .pond-water > * { position: absolute; }
.pond-edge {
  left: 5%; right: 5%; top: 22px; bottom: 30px;
  background: #4E6E36;
  clip-path: polygon(48px 0px, calc(100% - 36px) 0px, calc(100% - 36px) 3px, calc(100% - 27px) 3px, calc(100% - 27px) 6px, calc(100% - 21px) 6px, calc(100% - 21px) 9px, calc(100% - 18px) 9px, calc(100% - 18px) 12px, calc(100% - 15px) 12px, calc(100% - 15px) 15px, calc(100% - 12px) 15px, calc(100% - 12px) 18px, calc(100% - 9px) 18px, calc(100% - 9px) 21px, calc(100% - 6px) 21px, calc(100% - 6px) 24px, calc(100% - 6px) 27px, calc(100% - 3px) 27px, calc(100% - 3px) 30px, calc(100% - 3px) 33px, calc(100% - 3px) 36px, 100% 36px, 100% 39px, 100% 42px, 100% 45px, 100% 48px, 100% calc(100% - 66px), 100% calc(100% - 63px), 100% calc(100% - 60px), 100% calc(100% - 57px), 100% calc(100% - 54px), 100% calc(100% - 51px), calc(100% - 3px) calc(100% - 51px), calc(100% - 3px) calc(100% - 48px), calc(100% - 3px) calc(100% - 45px), calc(100% - 3px) calc(100% - 42px), calc(100% - 6px) calc(100% - 42px), calc(100% - 6px) calc(100% - 39px), calc(100% - 6px) calc(100% - 36px), calc(100% - 9px) calc(100% - 36px), calc(100% - 9px) calc(100% - 33px), calc(100% - 9px) calc(100% - 30px), calc(100% - 12px) calc(100% - 30px), calc(100% - 12px) calc(100% - 27px), calc(100% - 15px) calc(100% - 27px), calc(100% - 15px) calc(100% - 24px), calc(100% - 15px) calc(100% - 21px), calc(100% - 18px) calc(100% - 21px), calc(100% - 18px) calc(100% - 18px), calc(100% - 21px) calc(100% - 18px), calc(100% - 21px) calc(100% - 15px), calc(100% - 27px) calc(100% - 15px), calc(100% - 27px) calc(100% - 12px), calc(100% - 30px) calc(100% - 12px), calc(100% - 30px) calc(100% - 9px), calc(100% - 36px) calc(100% - 9px), calc(100% - 36px) calc(100% - 6px), calc(100% - 42px) calc(100% - 6px), calc(100% - 42px) calc(100% - 3px), calc(100% - 51px) calc(100% - 3px), calc(100% - 51px) 100%, 42px 100%, 42px calc(100% - 3px), 33px calc(100% - 3px), 33px calc(100% - 6px), 27px calc(100% - 6px), 27px calc(100% - 9px), 21px calc(100% - 9px), 21px calc(100% - 12px), 18px calc(100% - 12px), 18px calc(100% - 15px), 15px calc(100% - 15px), 15px calc(100% - 18px), 12px calc(100% - 18px), 12px calc(100% - 21px), 9px calc(100% - 21px), 9px calc(100% - 24px), 9px calc(100% - 27px), 6px calc(100% - 27px), 6px calc(100% - 30px), 6px calc(100% - 33px), 3px calc(100% - 33px), 3px calc(100% - 36px), 3px calc(100% - 39px), 3px calc(100% - 42px), 0px calc(100% - 42px), 0px calc(100% - 45px), 0px calc(100% - 48px), 0px calc(100% - 51px), 0px calc(100% - 54px), 0px 60px, 0px 57px, 0px 54px, 0px 51px, 0px 48px, 3px 48px, 3px 45px, 3px 42px, 3px 39px, 3px 36px, 6px 36px, 6px 33px, 6px 30px, 9px 30px, 9px 27px, 12px 27px, 12px 24px, 12px 21px, 15px 21px, 15px 18px, 18px 18px, 18px 15px, 21px 15px, 21px 12px, 27px 12px, 27px 9px, 30px 9px, 30px 6px, 36px 6px, 36px 3px, 48px 3px, 48px 0px);
}
.pond-water {
  position: absolute;
  inset: 6px;
  background: #2E8A8F url("../img/pond/water.png") repeat;
  clip-path: polygon(42px 0px, calc(100% - 30px) 0px, calc(100% - 30px) 3px, calc(100% - 24px) 3px, calc(100% - 24px) 6px, calc(100% - 18px) 6px, calc(100% - 18px) 9px, calc(100% - 15px) 9px, calc(100% - 15px) 12px, calc(100% - 12px) 12px, calc(100% - 12px) 15px, calc(100% - 9px) 15px, calc(100% - 9px) 18px, calc(100% - 6px) 18px, calc(100% - 6px) 21px, calc(100% - 6px) 24px, calc(100% - 3px) 24px, calc(100% - 3px) 27px, calc(100% - 3px) 30px, 100% 30px, 100% 33px, 100% 36px, 100% 39px, 100% 42px, 100% calc(100% - 60px), 100% calc(100% - 57px), 100% calc(100% - 54px), 100% calc(100% - 51px), 100% calc(100% - 48px), calc(100% - 3px) calc(100% - 48px), calc(100% - 3px) calc(100% - 45px), calc(100% - 3px) calc(100% - 42px), calc(100% - 3px) calc(100% - 39px), calc(100% - 3px) calc(100% - 36px), calc(100% - 6px) calc(100% - 36px), calc(100% - 6px) calc(100% - 33px), calc(100% - 6px) calc(100% - 30px), calc(100% - 9px) calc(100% - 30px), calc(100% - 9px) calc(100% - 27px), calc(100% - 12px) calc(100% - 27px), calc(100% - 12px) calc(100% - 24px), calc(100% - 12px) calc(100% - 21px), calc(100% - 15px) calc(100% - 21px), calc(100% - 15px) calc(100% - 18px), calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) calc(100% - 15px), calc(100% - 21px) calc(100% - 15px), calc(100% - 21px) calc(100% - 12px), calc(100% - 27px) calc(100% - 12px), calc(100% - 27px) calc(100% - 9px), calc(100% - 30px) calc(100% - 9px), calc(100% - 30px) calc(100% - 6px), calc(100% - 36px) calc(100% - 6px), calc(100% - 36px) calc(100% - 3px), calc(100% - 48px) calc(100% - 3px), calc(100% - 48px) 100%, 36px 100%, 36px calc(100% - 3px), 27px calc(100% - 3px), 27px calc(100% - 6px), 21px calc(100% - 6px), 21px calc(100% - 9px), 18px calc(100% - 9px), 18px calc(100% - 12px), 15px calc(100% - 12px), 15px calc(100% - 15px), 12px calc(100% - 15px), 12px calc(100% - 18px), 9px calc(100% - 18px), 9px calc(100% - 21px), 6px calc(100% - 21px), 6px calc(100% - 24px), 6px calc(100% - 27px), 3px calc(100% - 27px), 3px calc(100% - 30px), 3px calc(100% - 33px), 3px calc(100% - 36px), 0px calc(100% - 36px), 0px calc(100% - 39px), 0px calc(100% - 42px), 0px calc(100% - 45px), 0px calc(100% - 48px), 0px 54px, 0px 51px, 0px 48px, 0px 45px, 0px 42px, 3px 42px, 3px 39px, 3px 36px, 3px 33px, 6px 33px, 6px 30px, 6px 27px, 9px 27px, 9px 24px, 9px 21px, 12px 21px, 12px 18px, 15px 18px, 15px 15px, 18px 15px, 18px 12px, 21px 12px, 21px 9px, 27px 9px, 27px 6px, 33px 6px, 33px 3px, 42px 3px, 42px 0px);
}
.pond-deep {
  left: 12%; right: 12%; top: 24%; bottom: 20%;
  background: rgba(12, 52, 60, 0.2);
  clip-path: polygon(27px 0px, calc(100% - 27px) 0px, calc(100% - 27px) 3px, calc(100% - 18px) 3px, calc(100% - 18px) 6px, calc(100% - 15px) 6px, calc(100% - 15px) 9px, calc(100% - 12px) 9px, calc(100% - 12px) 12px, calc(100% - 9px) 12px, calc(100% - 9px) 15px, calc(100% - 6px) 15px, calc(100% - 6px) 18px, calc(100% - 3px) 18px, calc(100% - 3px) 21px, calc(100% - 3px) 24px, calc(100% - 3px) 27px, 100% 27px, 100% 30px, 100% 33px, 100% 36px, 100% calc(100% - 36px), 100% calc(100% - 33px), 100% calc(100% - 30px), 100% calc(100% - 27px), calc(100% - 3px) calc(100% - 27px), calc(100% - 3px) calc(100% - 24px), calc(100% - 3px) calc(100% - 21px), calc(100% - 3px) calc(100% - 18px), calc(100% - 6px) calc(100% - 18px), calc(100% - 6px) calc(100% - 15px), calc(100% - 9px) calc(100% - 15px), calc(100% - 9px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 9px), calc(100% - 15px) calc(100% - 9px), calc(100% - 15px) calc(100% - 6px), calc(100% - 18px) calc(100% - 6px), calc(100% - 18px) calc(100% - 3px), calc(100% - 27px) calc(100% - 3px), calc(100% - 27px) 100%, 27px 100%, 27px calc(100% - 3px), 18px calc(100% - 3px), 18px calc(100% - 6px), 15px calc(100% - 6px), 15px calc(100% - 9px), 12px calc(100% - 9px), 12px calc(100% - 12px), 9px calc(100% - 12px), 9px calc(100% - 15px), 6px calc(100% - 15px), 6px calc(100% - 18px), 3px calc(100% - 18px), 3px calc(100% - 21px), 3px calc(100% - 24px), 3px calc(100% - 27px), 0px calc(100% - 27px), 0px calc(100% - 30px), 0px calc(100% - 33px), 0px calc(100% - 36px), 0px 36px, 0px 33px, 0px 30px, 0px 27px, 3px 27px, 3px 24px, 3px 21px, 3px 18px, 6px 18px, 6px 15px, 9px 15px, 9px 12px, 12px 12px, 12px 9px, 15px 9px, 15px 6px, 18px 6px, 18px 3px, 27px 3px, 27px 0px);
}
.pond-shade-top { left: 0; right: 0; top: 0; height: 9px; background: rgba(12, 44, 50, 0.3); }
.pond-shade-left { left: 0; top: 0; bottom: 0; width: 6px; background: rgba(12, 44, 50, 0.22); }
.bridge-shadow { right: calc(14% - 6px); top: 16px; width: 6px; height: 222px; background: rgba(12, 44, 50, 0.32); }
.bridge { right: 14%; top: 10px; }

.slot { position: absolute; image-rendering: pixelated; }
.slot.flip { transform: scaleX(-1); }
.slot-bridge { right: calc(14% + 30px); bottom: 110px; transform: translateX(50%); }
.slot-bridge.flip { transform: translateX(50%) scaleX(-1); }
.slot-water { transform: translate(-50%, -50%); }
.slot-water.flip { transform: translate(-50%, -50%) scaleX(-1); }
.slot-water-1 { left: calc(32% + 28px); top: 64px; }
.slot-water-2 { left: calc(8.6% + 32px); top: 130px; }
.slot-water-3 { left: calc(50.9% + 26px); top: 136px; }
.slot-water-4 { left: calc(15.8% + 31px); top: 192px; }
.slot-bank { left: calc(3% + 26px); bottom: 6px; transform: translateX(-50%); }
.slot-bank.flip { transform: translateX(-50%) scaleX(-1); }

.page {
  background: repeating-conic-gradient(#D7E6CB 0% 25%, #CFE0C1 0% 50%) 0 0 / 24px 24px;
  padding: 0 16px 72px;
}

.profile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -66px;
  padding-bottom: 28px;
}
.avatar {
  width: 128px; height: 128px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #2E8A8F;
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--cream), 5px 5px 0 var(--shadow);
}
.avatar .ring { position: absolute; left: 16px; top: 86px; }
.profile h1 {
  margin: 10px 0 0;
  font-family: "Jersey 10", system-ui, sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 1px;
}

.koi {
  width: 84px; height: 51px;
  background: url("../img/koi/koi-swim.png") 0 0 / 336px 51px no-repeat;
  image-rendering: pixelated;
  animation: koi-swim 0.88s steps(4) infinite;
}
.koi-small {
  width: 56px; height: 34px;
  background: url("../img/koi/koi-swim-small.png") 0 0 / 224px 34px no-repeat;
  image-rendering: pixelated;
  animation: koi-swim-small 0.88s steps(4) infinite;
}
@keyframes koi-swim { to { background-position: -336px 0; } }
@keyframes koi-swim-small { to { background-position: -224px 0; } }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto 72px;
}
.social {
  flex: 1 1 200px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 8px 14px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 5px var(--line), 4px 4px 0 var(--shadow);
  text-decoration: none;
  font-family: "Jersey 20", system-ui, sans-serif;
  font-size: 23px;
  line-height: 1;
  transition: transform 0.12s, box-shadow 0.12s;
}

.box {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 5px var(--line), 5px 5px 0 var(--shadow);
  padding: 32px 18px 20px;
}
.tab {
  position: absolute;
  top: -19px; left: 14px;
  margin: 0;
  background: var(--tab);
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 1px 10px 0;
  font-family: "Jersey 15", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 1px;
}
.perch {
  position: absolute;
  right: 18px;
  bottom: calc(100% - 6px);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.perch .slot { position: static; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  flex: 1 1 200px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 6px 16px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--shadow);
  font-family: "Jersey 20", system-ui, sans-serif;
  font-size: 21px;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-accent { background: var(--accent); color: #FFFFFF; }

.social:hover, .btn:hover, .card:hover { transform: translate(-1px, -1px); }
.social:hover { box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 5px var(--line), 6px 6px 0 var(--shadow); }
.btn:hover { box-shadow: 5px 5px 0 var(--shadow); }
.social:active, .btn:active, .card:active { transform: translate(1px, 1px); }

.stack { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 72px; }
.row { display: flex; flex-wrap: wrap; gap: 72px 28px; align-items: stretch; }
.wide { flex: 999 1 560px; min-width: 0; }
.narrow { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }

.feature { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.thumb {
  flex: 1 1 300px;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, #D3EEEC 0 12px, #C2E5E2 12px 24px);
  display: flex; align-items: center; justify-content: center;
}
.thumb img.slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.chip {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: var(--ink); color: var(--cream);
  font-family: "Jersey 20", system-ui, sans-serif;
  font-size: 16px; line-height: 1.2;
  padding: 1px 7px; border-radius: 4px;
}
.feature-text { flex: 1 1 220px; min-width: 0; }
.feature-title { font-family: "Jersey 15", system-ui, sans-serif; font-size: 34px; line-height: 1.05; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #EEF7F6;
  text-decoration: none;
  transition: transform 0.12s, background 0.12s;
}
.card:hover { background: #E2F2F0; }
.card-icon {
  flex: 0 0 64px; height: 64px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.card-icon img.slot { position: static; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.card-text { flex: 1 1 130px; min-width: 0; }
.card-name { display: block; font-family: "Jersey 20", system-ui, sans-serif; font-size: 25px; line-height: 1.1; }
.card-desc { display: block; margin-top: 4px; font-size: 19px; line-height: 1.25; }
.card-go {
  margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
  font-family: "Jersey 20", system-ui, sans-serif;
  font-size: 17px;
  color: var(--muted);
}

.community-text { margin-bottom: 16px; }
.community .btn { margin-top: auto; flex: 0 0 auto; }

.trainer { background: #EEF5E2; box-shadow: inset 0 0 0 3px #EEF5E2, inset 0 0 0 5px #86C56A, 5px 5px 0 var(--shadow); }
.codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.code {
  min-height: 64px;
  padding: 8px 12px;
  border: 2px dashed #A9CF8E;
  border-radius: 8px;
  background: #F6FAEF;
}
.code-label { font-family: "Jersey 20", system-ui, sans-serif; font-size: 16px; letter-spacing: 0.5px; color: #3D5A2A; }
.code-value { font-size: 25px; line-height: 1.15; }

.footer {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: var(--cream);
  text-align: center;
  padding: 76px 20px 52px;
}
.footer-edge { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: #4E6E36; border-bottom: 4px solid #3B5529; }
.footer-art { position: absolute; inset: 0; }
.footer-art img { position: absolute; }
.footer-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.footer-name { margin-top: 10px; font-family: "Jersey 15", system-ui, sans-serif; font-size: 24px; }
.footer-copy { font-size: 19px; }
.footer-legal { margin-top: 6px; max-width: 520px; font-size: 18px; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .koi, .koi-small { animation: none; }
  .social, .btn, .card { transition: none; }
}

a[href^="tel"], a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; pointer-events: none; }