/* pages/landing/skin-playful.css — the playful game-board skin (ADR 0015).
   Loaded LAST, same pattern as the trainer's 2026-08 ember skin: the page's
   own stylesheets keep their layout, this file re-voices them.

   Two levers, in order:
   1. Token remap — landing rules read --panel/--accent/--display/… so the
      skin points those at the --play-* group for this page only. Every
      value is a var() reference; no literal colours (decision 0008).
   2. Structural overrides — thick ink borders, tight radii, chunky offset
      "edge" shadows in place of blur, and the hand-drawn display face. */

body.landing{
  --bg:var(--play-bg); --panel:var(--play-paper); --panel2:var(--play-paper);
  --card:var(--play-card); --line:var(--play-track); --line2:var(--play-soft);
  --ink:var(--play-ink); --dim:var(--play-mute); --mute:var(--play-mute);
  --accent:var(--play-accent); --accent2:var(--play-link);
  --accent-soft:var(--play-accent-soft); --accent-deep:var(--play-link);
  --hover:var(--play-paper); --cell:var(--play-track);
  --shadow1:transparent; --shadow2:transparent; --shimmer:transparent;
  --display:var(--play-display);
}

/* Flat paper ground — the glows, grid and vignettes retire. */
body.landing{background:var(--play-bg);font:17px/1.5 var(--play-display)}
body.landing::before,body.landing::after{content:none}
.landing section::before{content:none}
#intro::before{content:none}
.hero::before{content:none}
.drill::before{content:none}

.landing ::selection{background:var(--play-accent);color:var(--play-accent-ink)}
.landing :focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.skip{color:var(--play-accent-ink);font-family:var(--play-display)}
/* The proof digits stay mono (landing-hi test); their captions speak the kit.
   drill.css styles the caption as .proof span[data-i18n], so the selector
   matches it and this later sheet wins. */
.proof span[data-i18n]{font-family:var(--play-display)}

/* Type — Patrick Hand carries Latin display; Devanagari and Japanese keep
   their proven faces via the token stack's fallthrough. */
.landing h1{letter-spacing:0;line-height:1.02;font-weight:700}
.landing h2{letter-spacing:0}
.eyebrow{font:600 19px/1 var(--play-script);letter-spacing:.04em;text-transform:none;color:var(--play-ink)}
.eyebrow::before{width:26px;background:var(--play-ink)}
.lede,.sub{color:var(--play-mute)}

/* Nav — paper bar with an ink rule. */
.lnav{background:var(--play-bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-width:2px}
.lnav.scrolled{background:var(--play-bg)}
.nav-links a{font:600 15px/1 var(--play-display);color:var(--play-mute)}
.nav-links a:hover{color:var(--play-ink);background:var(--play-paper);border-color:var(--play-ink);transform:none}

/* Buttons — the chunky pressable pair from components/playful.css, applied
   to the landing's own .lbtn so every existing CTA converts. */
.lbtn{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);color:var(--play-ink);box-shadow:0 4px 0 var(--play-edge);font:700 15px/1 var(--play-display)}
.lbtn:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge);background:var(--play-card);border-color:var(--play-ink)}
.lbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.lbtn.solid{background:var(--play-accent);color:var(--play-accent-ink);box-shadow:0 4px 0 var(--play-edge)}
.lbtn.solid:hover{box-shadow:0 3px 0 var(--play-edge)}
.lbtn.big{font-size:18px;border-radius:16px}

/* Hero — mascot row sits where the sub-paragraph used to. */
.kana-row{color:var(--play-accent)}
.hero-tanu{display:flex;align-items:center;gap:14px;margin:24px 0 26px}
.hero-tanu .p-tanu{width:64px;height:64px;color:var(--play-ink)}
.hero-tanu .p-bub{font-size:18px;margin:0}
.proof div{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);box-shadow:0 4px 0 var(--play-edge)}

/* The drill window becomes the wireframe's "try one" card. */
.drill{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);box-shadow:6px 6px 0 var(--play-edge)}
.dots i{border:2px solid var(--play-ink)}
.dr-tab{border:2px solid var(--play-ink);border-radius:999px;background:var(--play-card);color:var(--play-ink);font:600 13px var(--play-display)}
.dr-tab[aria-pressed="true"]{background:var(--play-accent);color:var(--play-accent-ink);border-color:var(--play-ink)}
.streak{border:2px solid var(--play-ink);border-radius:999px;background:var(--play-card);color:var(--play-accent);font-weight:700}
.dr-input input{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink)}
.dr-input input:focus{border-color:var(--play-link);background:var(--play-card)}
.dr-check,.choice{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);color:var(--play-ink);box-shadow:0 4px 0 var(--play-edge);font:700 15px var(--play-display)}
.dr-check:hover,.choice:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.grade{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);color:var(--play-ink);box-shadow:0 4px 0 var(--play-edge)}
.grade:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}

/* Cards below the fold — one ink-outline treatment for every surface. */
.icard,.set,.pl-win,.today-card,.tile,.jlpt-card{
  border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);box-shadow:none;
}
.icard:hover,.set:hover{transform:translateY(-2px);border-color:var(--play-ink);box-shadow:0 4px 0 var(--play-edge)}
.set::before{content:none}
.set .g{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-paper)}
.ic-min{border:2px solid var(--play-ink);border-radius:999px;background:var(--play-card)}
.feat li::before{background:var(--play-accent);box-shadow:0 0 0 3px var(--play-accent-soft)}
.jlpt-card summary:focus-visible{outline:3px solid var(--play-link)}

/* Closing band — the boss-panel treatment. */
.band .wrap{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-boss);box-shadow:6px 6px 0 var(--play-edge)}
.band h2{color:var(--play-boss-ink)}
.band h2 em{color:var(--play-accent)}
.band .lbtn{border-color:var(--play-boss-line)}

.lfoot{border-top:2px solid var(--play-ink)}
.lfoot a{font:600 15px var(--play-display)}
.viz-tip{border:2px solid var(--play-ink);border-radius:10px;background:var(--play-card);color:var(--play-ink);box-shadow:0 3px 0 var(--play-edge)}

@media (prefers-reduced-motion: reduce){
  .lbtn,.dr-check,.choice,.grade,.icard,.set{transition:none}
}

/* Below-the-fold, wholesale wireframe-1a revision: the journey strip, the
   league ladder teaser, and the passport-stamp card. */
.jroute{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:0;border:2px solid var(--play-ink);border-radius:14px;background:var(--play-paper);padding:26px 14px 20px}
.jstop{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--play-ink);font-family:var(--play-display);min-width:130px;text-align:center}
.jstop .p-node{width:64px;height:64px;font-size:1.6rem}
.jstop:hover .p-node{box-shadow:0 4px 0 var(--play-edge);transform:translateY(-2px)}
.jstop:focus-visible{outline:3px solid var(--play-link);outline-offset:3px;border-radius:10px}
.jstop b{font-size:1.05rem}
.jstop .tagline{color:var(--play-mute);font-size:.85rem}
.jstop.is-locked{color:var(--play-mute)}
.jroute .p-trail{width:46px;margin-top:32px}
.row-center{display:flex;justify-content:center;margin-top:20px}
/* .stamp retired with 16c: the exam band is the section now, and the prose
   sits in a plain panel the footer pill opens. */
#jlpt .jlpt-card.stamp::after{content:"合格";position:absolute;top:-18px;right:20px;width:58px;height:58px;border:3px solid var(--play-accent);border-radius:50%;color:var(--play-accent);display:flex;align-items:center;justify-content:center;font-family:var(--jp);font-size:1.05rem;transform:rotate(12deg);background:var(--play-card)}

/* The second course's offer under the N5 route (decision 0019): the kit's
   box, the kit's button. */
.travel-offer{margin:28px auto 0;max-width:640px;padding:18px 20px;text-align:left}
.travel-offer h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px;font:700 1.35rem var(--play-display)}
.travel-offer .lede{margin:0 0 14px}