/* Black-belt progression uses the same calm green palette as the dojo. */
.belt-portrait{position:relative;margin:0;width:100%;max-width:335px;align-self:center;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.belt-hero-image{display:block;width:100%;height:340px;object-fit:contain;background:#fff}
.belt-portrait figcaption{padding:10px 16px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.1em;font-weight:800;color:var(--green);background:var(--paper)}
.hero-actions{min-width:0;display:flex;flex-direction:column;gap:10px;margin-top:0}.hero-actions .belt-kicker{margin:0 0 10px;color:var(--green)}
.belt-kicker{font-size:11px;letter-spacing:.15em;font-weight:800;line-height:1.6}
.black-belt-entry{font-size:29px;letter-spacing:.06em;padding:20px 22px}
.black-belt-entry small{font-size:16px;letter-spacing:.03em;font-weight:500;margin-top:7px}
.home-belt-status{margin:16px 0 18px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.home-belt-heading{display:flex;gap:10px;align-items:center}.home-belt-heading strong{font-size:clamp(17px,3.8vw,20px);line-height:1.5;letter-spacing:.01em}
#homeBeltDot{display:block;width:19px;height:12px;border:1px solid rgba(32,33,31,.18);border-radius:2px;flex-shrink:0;background:#e5dfd1}
.belt-track{height:5px;overflow:hidden;border-radius:2px;background:#e2e5dc;margin:15px 0 12px}
.belt-track i{display:block;height:100%;width:0;background:var(--green);transition:width .2s ease}
.home-belt-status>p{font-size:14px;color:var(--muted);line-height:1.7;margin:8px 0}
.belt-rules-link{display:block;width:100%;background:#edf0e8;border:2px solid var(--green);border-radius:12px;padding:14px 12px;color:var(--green);font-size:20px;font-weight:800;line-height:1.5;cursor:pointer;min-height:58px;text-align:center;margin-top:12px}
.belt-rules-link:hover{background:var(--green);color:var(--paper)}
.belt-rules-link:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.belt-resume-hint{font-size:12px!important}.full-width{width:100%}
.belt-rules-intro p{font-size:16px;line-height:1.9;margin:16px 0}.belt-rules-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.belt-rules-table{width:100%;border-collapse:collapse;font-size:15px;text-align:left;line-height:1.75}
.belt-rules-table caption{padding:18px 14px;text-align:left;color:var(--green);font-weight:800;font-size:18px}
.belt-rules-table th,.belt-rules-table td{border-top:1px solid var(--line);padding:14px 12px;vertical-align:middle}
.belt-rules-table thead{color:var(--muted);font-size:12px;letter-spacing:.04em}.belt-rules-table tbody th{white-space:nowrap}
.rank-swatch{display:inline-block;width:13px;height:8px;margin-right:7px;background:var(--rank-color);border:1px solid rgba(0,0,0,.15);border-radius:1px;vertical-align:middle}
.complete-rule{background:#edf0e8;color:var(--green);font-weight:700}
.stats-belt-summary{border-left:3px solid var(--green);padding:8px 16px;margin:0 0 24px}.stats-belt-summary b{font-size:20px}.stats-belt-summary p{color:var(--muted);font-size:15px;margin:8px 0;line-height:1.7}
.belt-quiz-status{display:flex;align-items:center;gap:14px;margin:14px 0 20px;padding:14px 16px;background:#edf0e7;border:1px solid #d9e0d0;border-radius:15px;min-width:0}
.belt-quiz-status img{width:48px;height:72px;object-fit:contain;background:#fff;border-radius:6px;flex-shrink:0}
.belt-quiz-status>div{min-width:0}.belt-quiz-status p{margin:0 0 5px;font-size:13px;color:var(--green);line-height:1.6}
.belt-quiz-status strong{display:block;font-size:18px;line-height:1.6;overflow-wrap:anywhere}
.belt-quiz-status small{display:block;color:var(--muted);font-size:12px;line-height:1.75;margin-top:3px}
.belt-quiz-status.is-exam{background:var(--green);border-color:var(--green);color:#fffdf8}
.belt-quiz-status.is-exam p,.belt-quiz-status.is-exam small{color:#e4ecdd}
.belt-quiz-status.is-exam strong{font-size:clamp(23px,5.2vw,32px);font-weight:900;letter-spacing:.015em}
.result-belt-summary{display:flex;align-items:center;gap:16px;text-align:left;border-block:1px solid var(--line);padding:16px 0;margin:22px 0}
.result-belt-summary img{display:block;width:70px;height:105px;object-fit:contain;background:#fff;border-radius:8px}
.result-belt-summary>div{min-width:0}.result-belt-summary b{font-size:18px;color:var(--green)}
.result-belt-summary p{font-size:19px;font-weight:700;line-height:1.8;margin:9px 0 0;overflow-wrap:anywhere}
.promotion-invite{box-sizing:border-box;width:calc(100% - 32px);max-width:460px;max-height:calc(100svh - 32px);overflow:auto;border:1px solid var(--line);padding:26px;border-radius:22px;background:var(--paper);color:var(--ink);text-align:center}
.promotion-invite::backdrop{background:rgba(20,34,27,.58)}
.promotion-invite .belt-kicker{margin:4px 22px 8px;color:var(--green)}
.promotion-invite h2{margin:12px 0 8px;font-size:clamp(28px,7vw,36px);color:var(--green);line-height:1.4}
#promotionInviteProgress{font-size:14px;color:var(--muted);margin:0}
.promotion-invite img{display:block;width:100%;height:min(28svh,205px);object-fit:contain;background:#fff;margin:18px 0 12px;border-radius:12px}
.promotion-invite strong{display:block;color:var(--green);font-size:24px;line-height:1.5}
.invite-note{font-size:14px;line-height:1.8;margin:12px 0 18px;color:var(--muted)}
.invite-close{position:absolute;top:10px;right:12px;width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}
.invite-later,.ceremony-home{background:transparent;color:var(--green);border:0;min-height:48px;margin-top:8px;font-size:15px;cursor:pointer}
.belt-ceremony{text-align:center;padding:32px 22px 20px;border:1px solid var(--line);border-top:5px solid var(--belt-accent,var(--green));border-radius:22px;background:var(--paper);animation:promotion-appear .3s ease-out}
.ceremony-eyebrow{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:700;margin:0 0 18px}
.belt-ceremony h2{font-size:clamp(34px,8vw,54px);line-height:1.35;letter-spacing:.035em;color:var(--green);margin:8px 0 18px}
.ceremony-transition{font-size:clamp(23px,5.5vw,34px);font-weight:800;line-height:1.6;margin:0 0 8px}
.ceremony-streak{font-size:18px;line-height:1.75;margin:0;color:var(--green)}
.belt-ceremony figure{margin:24px auto 18px;max-width:300px}
.belt-ceremony figure img{display:block;max-height:390px;width:100%;object-fit:contain;background:#fff;border-radius:12px}
#ceremonyProgress{font-size:19px;color:var(--green);display:block;line-height:1.6}
.ceremony-distance{font-size:16px;line-height:1.85;color:var(--muted);margin:12px 0 22px}
.belt-ceremony .big-btn{max-width:440px;margin-inline:auto;text-align:center}
@keyframes promotion-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:620px){.hero-bottom{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:22px}.belt-hero-image{height:380px}.hero-actions{width:100%}.black-belt-entry{font-size:30px}}
@media(max-width:619px){.hero-bottom{gap:18px}.belt-portrait{max-width:270px}.belt-hero-image{height:290px}.hero-actions{width:100%}.home-belt-status{padding:15px}.belt-rules-table{font-size:13px}.belt-rules-table th,.belt-rules-table td{padding:12px 8px}.belt-quiz-status{gap:10px;padding:12px;margin-bottom:16px}.result-belt-summary{gap:12px}.result-belt-summary b{font-size:16px}.result-belt-summary p{font-size:17px}.promotion-invite{padding:22px 18px}.belt-ceremony{padding:28px 18px 18px}.belt-ceremony figure img{max-height:340px}}
@media(prefers-reduced-motion:reduce){.belt-ceremony{animation:none}.belt-track i{transition:none}}