/* ============================================================
   GANP PLAY LAYER — the visual grammar
   Phase 1: homepage only. Load AFTER ganp.css.
   Rule: 80% clean, 20% chaos. Devices below are punctuation,
   not decoration. Do not apply all seven in one section.
   ============================================================ */

/* --- 1. COURT LINES AS LAYOUT LINES ------------------------ */
/* baseline: line runs to one side and stops in a circle */
.court-div--baseline::after { left: auto; right: 8%; transform: translateY(-50%); }

/* --- 2. NUMBERED PLAY SPOTS -------------------------------- */
/* painted pavement numbers, not corporate step circles */
.spot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--orange-deep); color: var(--orange-text); font-family: 'Anton', var(--display); font-size: 22px; line-height: 1; letter-spacing: 0.02em; transform: rotate(-5deg); background: transparent; }
.spot--alt { transform: rotate(4deg); }
.spot--on-navy { border-color: rgba(255,255,255,0.5); color: #fff; }

/* --- 3. THE GANP ARROW ------------------------------------- */
/* one arrow. chalked route, slight bend. never a second style. */
.g-arrow { display: inline-block; width: 62px; height: 26px; flex: none; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28' fill='none' stroke='%23C65300' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17C14 7 27 22 42 12'/%3E%3Cpath d='M36 5l10 6-9 7'/%3E%3C/svg%3E"); }
.g-arrow--light { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28' fill='none' stroke='%23FF9A4D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17C14 7 27 22 42 12'/%3E%3Cpath d='M36 5l10 6-9 7'/%3E%3C/svg%3E"); }

/* --- 4. TARGET CIRCLES ------------------------------------- */
/* punctuation for a single number. one per section, maximum. */
.is-target { position: relative; padding-left: 16px; }
.is-target b { position: relative; z-index: 1; }
.cred-i.is-target { gap: 22px; }
.is-target::before { content: ""; position: absolute; left: 1px; top: -15px; width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,154,77,0.6); pointer-events: none; }
.is-target::after { content: ""; position: absolute; left: 11px; top: -5px; width: 44px; height: 44px; border-radius: 50%; border: 3px dashed rgba(255,154,77,0.34); pointer-events: none; }

/* --- 5. CONTROLLED SCRIBBLES ------------------------------- */
/* rough orange loop around a word. irregular on purpose. */
.mark-circle { position: relative; display: inline-block; padding: 0 0.18em; }
.mark-circle::after { content: ""; position: absolute; left: -14%; top: -22%; width: 128%; height: 150%; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 104' fill='none' stroke='%23FF9A4D' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M14 55C10 24 63 8 133 9c74 1 119 18 116 44-3 27-59 44-127 42C56 93 15 79 14 55c0-13 9-24 24-32'/%3E%3C/svg%3E"); }
/* chalk underline */
.mark-under { position: relative; }
.mark-under::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.22em; height: 0.16em; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' fill='none' stroke='%23FF9A4D' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M4 8c38-4 76-5 114-3 26 1 52 3 78 1'/%3E%3C/svg%3E"); }
/* a score chalked in the corner of a band */
.score-mark { position: absolute; right: 4%; top: 26px; font-family: 'Anton', var(--display); font-size: 15px; letter-spacing: 0.12em; color: rgba(255,255,255,0.42); transform: rotate(-3deg); pointer-events: none; }

/* --- 6. REAL-WORLD LABELS ---------------------------------- */
/* found-around-a-game labels instead of corporate eyebrows */
.label-play { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.22em; color: var(--orange-text); margin: 0 0 16px; }
.label-play::before { content: ""; width: 26px; height: 3px; background: currentColor; border-radius: 2px; }
.label-play.on-navy { color: var(--orange); }

/* --- 7. MOVEMENT IN THE LAYOUT ----------------------------- */
/* motion without animation lives on .spot and .score-mark above */

/* method rows: painted numbers + the one arrow */
.method-row { position: relative; }
.method-row .method-arrow { display: none; }
.method-lead { display: flex; align-items: center; gap: 16px; }
/* stacked on phones: the route turns and carries on down the list */
@media (max-width: 820px) { .method-lead { gap: 12px; } .method-row .g-arrow { width: 40px; height: 20px; margin-left: 16px; transform: rotate(90deg); transform-origin: center; } }

/* the "bring GANP" nav panel */
.nav-panel { padding: 6px 0 4px; }
.nav-panel .np-q { display: block; padding: 8px 18px 10px; font-family: var(--display); text-transform: uppercase; font-size: 12px; letter-spacing: 0.18em; color: var(--orange-text); }
.nav-panel a b { display: block; font-weight: 800; }
.nav-panel a small { display: block; font-size: 12.5px; opacity: 0.72; font-weight: 600; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .spot, .score-mark { transform: none; }
}