/* playful.css — the hand-drawn game-board component kit (docs/decisions/0015).
 *
 * Shared grammar of the playful skin: thick ink outlines, warm paper
 * surfaces, one ember accent, chunky offset "edge" shadows instead of blur.
 * Every colour comes from the --play-* group in base/tokens.css.
 *
 * The .p- prefix is the namespace; pages that opt into the skin link this
 * file in the components layer and build their layouts from these pieces.
 * Nothing here positions anything — sizing beyond intrinsic paddings and
 * page layout belong to the page stylesheet.
 */

/* Surfaces */
.p-bx{border:2px solid var(--play-ink);border-radius:12px;padding:10px;background:var(--play-card);color:var(--play-ink)}
.p-soft{border:2px dashed var(--play-soft);border-radius:12px;padding:10px;background:var(--play-paper);color:var(--play-mute)}
.p-bx.is-paper{background:var(--play-paper)}
.p-bx.is-locked{border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock)}
.p-bx.is-raised{box-shadow:0 4px 0 var(--play-edge)}
.p-bx.is-boss{background:var(--play-boss);border-color:var(--play-boss-line);color:var(--play-boss-ink)}

/* Labels */
.p-pill{border:2px solid var(--play-ink);border-radius:999px;padding:1px 12px;display:inline-block;background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);white-space:nowrap}
.p-pill.is-accent{background:var(--play-accent);color:var(--play-accent-ink)}
.p-pill.is-ghost{border-style:dashed;border-color:var(--play-soft);color:var(--play-mute)}
.p-tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--play-mute);font-family:var(--play-display)}
/* Devanagari is never uppercased (#60) and does not want Latin tracking:
   the cancel lives with the kit rule, so no page has to remember it — the
   kanji card's stroke captions shipped uppercase-transformed in Hindi
   because each page had been adding its own (bhassa-feedback#7). */
:root[lang="hi"] .p-tag{text-transform:none;letter-spacing:0}

/* Buttons — the chunky pressable pair. Same edge-shadow trick: the button
   sits on a solid ledge and travels down onto it when pressed. */
.p-btn,.p-gbtn{border:2px solid var(--play-ink);border-radius:14px;padding:6px 20px;display:inline-block;box-shadow:0 4px 0 var(--play-edge);font-family:var(--play-display);font-size:1rem;cursor:pointer;text-decoration:none;text-align:center;transition:transform .06s ease,box-shadow .06s ease}
.p-btn{background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}
.p-gbtn{background:var(--play-card);color:var(--play-ink)}
.p-btn:hover,.p-gbtn:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.p-btn:active,.p-gbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.p-btn:focus-visible,.p-gbtn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.p-btn[disabled],.p-gbtn[disabled]{border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock);box-shadow:none;cursor:default;transform:none}

/* Round icon chip (rails, checklists) */
.p-ic{width:34px;height:34px;border:2px solid var(--play-ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--play-card);color:var(--play-ink);font-size:.95rem}
.p-ic.is-accent{background:var(--play-accent);color:var(--play-accent-ink)}

/* Progress bar */
.p-bar{height:14px;border:2px solid var(--play-ink);border-radius:999px;background:var(--play-card);overflow:hidden}
/* display:block is load-bearing: every fill in the kit is an <i>, and an
   inline box ignores width and height — the bars have been drawing empty. */
.p-fill{display:block;height:100%;background:var(--play-accent);border-radius:999px}

/* Map node — the path-circle in its four states.
   default = available · is-done = mastered · is-learning = seen, not yet
   mature · is-next (+edge shadow) = up next · is-locked = not reachable. */
.p-node{width:54px;height:54px;border-radius:50%;border:3px solid var(--play-ink);display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;background:var(--play-card);color:var(--play-ink);flex:none}
.p-node.is-done{background:var(--play-accent);color:var(--play-accent-ink)}
.p-node.is-learning{background:var(--play-accent-soft)}
.p-node.is-next{box-shadow:0 4px 0 var(--play-edge)}
.p-node.is-locked{border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock)}
button.p-node{cursor:pointer}
button.p-node:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* Path connectors between nodes */
.p-trail{width:40px;border-top:3px dashed var(--play-ink);align-self:center}
.p-trail.is-locked{border-top-color:var(--play-soft)}

/* Mascot + speech. The tanuki draws itself (js/components/tanuki.js,
   decision 0016) and css/components/tanuki.css moves it; the .p-tanu circle
   is its porthole frame and the no-JS fallback. Its colour is the ink the
   character's outlines are drawn in. */
.p-tanu{border:2px solid var(--play-ink);border-radius:50%;background:var(--play-paper);display:inline-flex;align-items:center;justify-content:center;font-family:var(--play-script);font-weight:600;color:var(--play-ink);flex:none;width:44px;height:44px;overflow:hidden}
.p-bub{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink);padding:6px 12px;position:relative;font-family:var(--play-display)}
.p-bub::before{content:"";position:absolute;left:-8px;top:50%;width:12px;height:12px;background:inherit;border-left:2px solid var(--play-ink);border-bottom:2px solid var(--play-ink);transform:translateY(-50%) rotate(45deg)}
.p-bub.is-plain::before{display:none}

/* Goal ring (conic progress; --p is 0–100) */
.p-ring{--p:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;text-align:center;background:conic-gradient(var(--play-accent) calc(var(--p)*1%),var(--play-track) 0);padding:6px}
.p-ring>*{background:var(--play-card);border-radius:50%;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Avatar dot (league rows, feed) */
.p-av{width:26px;height:26px;border-radius:50%;border:2px solid var(--play-ink);background:var(--play-track);flex:none}

/* Motion — celebration accents, all opt-out via reduced motion. */
@keyframes p-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes p-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes p-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes p-rise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-34px);opacity:0}}
.p-pop{animation:p-pop .25s ease-out both}
.p-wobble{animation:p-wobble .5s ease-in-out infinite}
.p-shake{animation:p-shake .3s ease-in-out}
.p-rise{animation:p-rise .9s ease-out both}
@media (prefers-reduced-motion: reduce){
  .p-pop,.p-wobble,.p-shake,.p-rise{animation:none}
  .p-btn,.p-gbtn{transition:none}
}

/* Mascot + bubble as one row (PUI.says). */
.p-says{display:flex;align-items:center;gap:12px}