.rje-kana-shell {
    --rje-kana-bg: #ffffff;
    --rje-kana-soft: #f7f8fb;
    --rje-kana-text: #1f2937;
    --rje-kana-muted: #667085;
    --rje-kana-border: #e4e7ec;
    --rje-kana-accent: #b42318;
    box-sizing: border-box;
    width: 100%;
    color: var(--rje-kana-text);
    font-family: inherit;
}

.rje-kana-shell *,
.rje-kana-shell *::before,
.rje-kana-shell *::after {
    box-sizing: inherit;
}

.rje-kana-hero,
.rje-kana-section-heading {
    margin-bottom: 24px;
}

.rje-kana-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--rje-kana-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rje-kana-hero h2,
.rje-kana-section-heading h2 {
    margin: 0 0 8px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
}

.rje-kana-hero p,
.rje-kana-section-heading p,
.rje-kana-feature-card p {
    margin: 0;
    color: var(--rje-kana-muted);
    line-height: 1.7;
}

.rje-kana-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.rje-kana-feature-card {
    padding: 24px;
    border: 1px solid var(--rje-kana-border);
    border-radius: 18px;
    background: var(--rje-kana-bg);
    box-shadow: 0 10px 25px rgba(16, 24, 40, .06);
}

.rje-kana-feature-card--muted {
    background: var(--rje-kana-soft);
}

.rje-kana-feature-symbol {
    margin-bottom: 12px;
    font-size: 56px;
    line-height: 1;
}

.rje-kana-feature-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.rje-kana-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.rje-kana-card {
    min-width: 0;
    padding: 16px 8px 14px;
    border: 1px solid var(--rje-kana-border);
    border-radius: 14px;
    background: var(--rje-kana-bg);
    color: var(--rje-kana-text);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.rje-kana-card:hover,
.rje-kana-card:focus-visible {
    transform: translateY(-2px);
    border-color: #f0a29b;
    box-shadow: 0 8px 18px rgba(16, 24, 40, .09);
    outline: none;
}

.rje-kana-card.is-active {
    border-color: var(--rje-kana-accent);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

.rje-kana-character,
.rje-kana-bangla,
.rje-kana-romaji {
    display: block;
    text-align: center;
}

.rje-kana-character {
    margin-bottom: 7px;
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 600;
    line-height: 1.15;
}

.rje-kana-bangla {
    font-size: 15px;
    font-weight: 700;
}

.rje-kana-romaji {
    margin-top: 2px;
    color: var(--rje-kana-muted);
    font-size: 13px;
    text-transform: lowercase;
}

@media (max-width: 767px) {
    .rje-kana-home-grid {
        grid-template-columns: 1fr;
    }

    .rje-kana-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .rje-kana-card {
        padding: 12px 4px 10px;
        border-radius: 11px;
    }

    .rje-kana-character {
        font-size: 32px;
    }

    .rje-kana-bangla {
        font-size: 13px;
    }

    .rje-kana-romaji {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .rje-kana-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.rje-kana-table{display:flex;flex-direction:column;gap:10px}.rje-kana-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.rje-kana-card--empty{background:#f8fafc;border-style:dashed;box-shadow:none;min-height:98px}.rje-kana-advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.rje-kana-panel{padding:20px;border:1px solid #e4e7ec;border-radius:18px;background:#fff}.rje-kana-yoon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rje-kana-card--compact{padding:10px 5px}.rje-kana-card--compact .rje-kana-character{font-size:30px}@media(max-width:767px){.rje-kana-advanced-grid{grid-template-columns:1fr}.rje-kana-row{gap:6px}.rje-kana-yoon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rje-kana-card--empty{min-height:80px}}


/* Version 0.3.0: Character lesson engine */
.rje-kana-learn-layout{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:22px;align-items:start
}
.rje-kana-lesson-panel,.rje-kana-picker-panel{
padding:22px;border:1px solid var(--rje-border);border-radius:18px;background:#fff;
box-shadow:0 8px 24px rgba(16,24,40,.06)
}
.rje-kana-progress-line{display:flex;justify-content:space-between;gap:15px;margin-bottom:8px;color:var(--rje-muted);font-size:13px;font-weight:700}
.rje-kana-progress-track{height:8px;overflow:hidden;border-radius:999px;background:#edf1f5}
.rje-kana-progress-fill{display:block;width:2%;height:100%;border-radius:999px;background:var(--rje-accent);transition:width .25s ease}
.rje-kana-lesson-hero{
display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:285px;
margin:22px 0;padding:24px;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#fff7f7 100%);
border:1px solid #f3d6d6
}
.rje-kana-lesson-character{
font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
font-size:clamp(100px,18vw,170px);font-weight:600;line-height:1
}
.rje-kana-lesson-bangla{margin-top:15px;color:var(--rje-accent);font-size:27px;font-weight:800}
.rje-kana-lesson-romaji{margin-top:4px;color:var(--rje-muted);font-size:20px;font-weight:700}
.rje-kana-lesson-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rje-kana-lesson-meta>div{padding:13px;border:1px solid var(--rje-border);border-radius:12px;background:var(--rje-soft)}
.rje-kana-lesson-meta span,.rje-kana-lesson-meta strong{display:block}
.rje-kana-lesson-meta span{margin-bottom:5px;color:var(--rje-muted);font-size:12px}
.rje-kana-lesson-meta strong{font-size:14px}
.rje-kana-lesson-note{margin-top:16px;padding:14px 16px;border-radius:12px;background:#fff8e8;color:#6d5010;line-height:1.65;font-size:14px}
.rje-kana-lesson-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;margin-top:18px}
.rje-kana-nav-button,.rje-kana-learned-button{
min-height:46px;padding:10px 14px;border-radius:11px;font-weight:700;cursor:pointer
}
.rje-kana-nav-button{border:1px solid var(--rje-border);background:#fff;color:var(--rje-text)}
.rje-kana-next{text-align:right}
.rje-kana-learned-button{border:1px solid var(--rje-accent);background:var(--rje-accent);color:#fff}
.rje-kana-learned-button.is-learned{background:#18794e;border-color:#18794e}
.rje-kana-nav-button:disabled{cursor:not-allowed;opacity:.4}
.rje-kana-picker-panel h3{margin:0 0 15px}
.rje-kana-picker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rje-kana-picker-item{
min-width:0;padding:9px 3px;border:1px solid var(--rje-border);border-radius:10px;background:#fff;
color:var(--rje-text);cursor:pointer
}
.rje-kana-picker-item span,.rje-kana-picker-item small{display:block;text-align:center}
.rje-kana-picker-item span{font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:26px;font-weight:600}
.rje-kana-picker-item small{margin-top:2px;color:var(--rje-muted);font-size:10px}
.rje-kana-picker-item.is-active{border-color:var(--rje-accent);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.rje-kana-picker-item.is-learned::after{content:"✓";display:block;margin-top:2px;color:#18794e;font-size:11px;font-weight:800}

@media(max-width:850px){
.rje-kana-learn-layout{grid-template-columns:1fr}
}
@media(max-width:520px){
.rje-kana-lesson-panel,.rje-kana-picker-panel{padding:15px;border-radius:14px}
.rje-kana-lesson-hero{min-height:240px;margin:16px 0;padding:18px}
.rje-kana-lesson-meta{grid-template-columns:1fr}
.rje-kana-lesson-nav{grid-template-columns:1fr 1fr}
.rje-kana-learned-button{grid-column:1/-1;grid-row:2}
.rje-kana-picker-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.rje-kana-picker-item span{font-size:23px}
}


/* Version 0.4.0: stroke animation, audio and writing practice */
.rje-kana-practice-tools{display:grid;gap:16px;margin-top:18px}
.rje-kana-tool-card{
padding:18px;border:1px solid var(--rje-border);border-radius:15px;background:#fff
}
.rje-kana-tool-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.rje-kana-tool-heading h3{margin:0 0 5px;font-size:18px}
.rje-kana-tool-heading p,.rje-kana-audio-note{margin:0;color:var(--rje-muted);font-size:13px;line-height:1.6}
.rje-kana-stroke-status{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:var(--rje-soft);color:var(--rje-muted);font-size:11px;font-weight:700}
.rje-kana-stroke-stage,.rje-kana-canvas-wrap{
position:relative;overflow:hidden;width:min(100%,420px);aspect-ratio:1;margin:0 auto;
border:1px solid var(--rje-border);border-radius:14px;background:#fff
}
.rje-kana-grid-lines{
position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(to right,transparent calc(50% - .5px),#e7ebef calc(50% - .5px),#e7ebef calc(50% + .5px),transparent calc(50% + .5px)),
linear-gradient(to bottom,transparent calc(50% - .5px),#e7ebef calc(50% - .5px),#e7ebef calc(50% + .5px),transparent calc(50% + .5px)),
linear-gradient(45deg,transparent calc(50% - .5px),#f0f2f5 calc(50% - .5px),#f0f2f5 calc(50% + .5px),transparent calc(50% + .5px)),
linear-gradient(-45deg,transparent calc(50% - .5px),#f0f2f5 calc(50% - .5px),#f0f2f5 calc(50% + .5px),transparent calc(50% + .5px))
}
.rje-kana-stroke-svg{position:absolute;inset:8%;display:flex;align-items:center;justify-content:center}
.rje-kana-stroke-svg svg{display:block;width:100%;height:100%;--shadow:#e1e5e9;--stroke:#111827}
.rje-kana-stroke-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:170px;color:#d5dae0}
.rje-kana-tool-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center;margin-top:12px}
.rje-kana-tool-button,.rje-kana-audio-button,.rje-kana-stroke-speed{
min-height:42px;padding:9px 14px;border:1px solid var(--rje-border);border-radius:10px;background:#fff;color:var(--rje-text);font-weight:700;cursor:pointer
}
.rje-kana-audio-button{width:100%;border-color:var(--rje-accent);background:var(--rje-accent);color:#fff;font-size:16px}
.rje-kana-audio-note{margin-top:10px}
.rje-kana-speed-label{display:flex;gap:7px;align-items:center;color:var(--rje-muted);font-size:12px;font-weight:700}
.rje-kana-stroke-speed{min-height:38px;padding:6px 9px}
.rje-kana-writing-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2}
.rje-kana-canvas-guide{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none;
font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:clamp(140px,30vw,250px);color:rgba(31,41,55,.10)
}
.rje-kana-canvas-guide.is-hidden{display:none}
.rje-kana-writing-card .rje-kana-tool-actions{justify-content:center}

.rje-kana-stroke-svg .rje-stroke-animate{
stroke-dasharray:3333;
stroke-dashoffset:3333;
animation-name:rjeKanaDrawStroke;
animation-timing-function:linear;
animation-fill-mode:forwards;
animation-duration:var(--rje-stroke-duration,.9s);
animation-delay:var(--rje-stroke-delay,0s)
}
@keyframes rjeKanaDrawStroke{to{stroke-dashoffset:0}}

@media(max-width:520px){
.rje-kana-tool-card{padding:14px}
.rje-kana-stroke-stage,.rje-kana-canvas-wrap{width:100%}
.rje-kana-tool-heading{display:block}
.rje-kana-stroke-status{display:inline-block;margin-top:8px}
}


/* Version 0.5.0: quiz and test engine */
.rje-kana-quiz-card,.rje-kana-results{
max-width:760px;margin:0 auto;padding:24px;border:1px solid var(--rje-border);border-radius:18px;
background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.06)
}
.rje-kana-quiz-topline{display:flex;justify-content:space-between;gap:15px;color:var(--rje-muted);font-size:13px;font-weight:700}
.rje-kana-quiz-progress{height:8px;margin:10px 0 24px;overflow:hidden;border-radius:999px;background:#edf1f5}
.rje-kana-quiz-progress span{display:block;width:0;height:100%;border-radius:999px;background:var(--rje-accent);transition:width .25s ease}
.rje-kana-question-area{text-align:center}
.rje-kana-question-label{display:block;color:var(--rje-muted);font-size:13px;font-weight:700}
.rje-kana-question-prompt{
min-height:125px;display:flex;align-items:center;justify-content:center;margin:12px 0 3px;
font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:clamp(64px,13vw,112px);font-weight:600;line-height:1.1
}
.rje-kana-question-prompt.is-text{font-family:inherit;font-size:clamp(34px,7vw,56px)}
.rje-kana-question-subtext{min-height:24px;color:var(--rje-muted);font-size:14px}
.rje-kana-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.rje-kana-answer{
min-height:68px;padding:12px;border:1px solid var(--rje-border);border-radius:13px;background:#fff;
color:var(--rje-text);font-size:18px;font-weight:700;cursor:pointer;transition:.15s ease
}
.rje-kana-answer:hover,.rje-kana-answer:focus-visible{border-color:#ef9a9a;transform:translateY(-1px);outline:none}
.rje-kana-answer.is-correct{border-color:#18794e;background:#ecfdf3;color:#12623f}
.rje-kana-answer.is-wrong{border-color:#c62828;background:#fff1f1;color:#9d1d1d}
.rje-kana-answer:disabled{cursor:default;transform:none}
.rje-kana-feedback{margin-top:16px;padding:14px 16px;border-radius:12px;line-height:1.6;font-weight:700}
.rje-kana-feedback.is-correct{background:#ecfdf3;color:#12623f}
.rje-kana-feedback.is-wrong{background:#fff1f1;color:#9d1d1d}
.rje-kana-quiz-actions{text-align:center}
.rje-kana-quiz-next,.rje-kana-retry-button{
min-height:46px;margin-top:16px;padding:10px 20px;border:1px solid var(--rje-accent);border-radius:11px;
background:var(--rje-accent);color:#fff;font-weight:800;cursor:pointer
}
.rje-kana-results-summary{text-align:center}
.rje-kana-results-summary h3{margin:0 0 8px}
.rje-kana-result-score{font-size:52px;font-weight:800}
.rje-kana-result-accuracy{margin:5px 0 12px;color:var(--rje-muted)}
.rje-kana-result-stats{display:flex;justify-content:center;gap:18px;font-weight:700}
.rje-kana-result-correct{color:#18794e}
.rje-kana-result-wrong{color:#c62828}
.rje-kana-review-section{margin-top:28px;padding-top:22px;border-top:1px solid var(--rje-border)}
.rje-kana-review-section h3{margin:0 0 14px}
.rje-kana-review-list{display:grid;gap:10px}
.rje-kana-review-item{padding:13px 15px;border:1px solid var(--rje-border);border-radius:12px;background:var(--rje-soft);line-height:1.55}
.rje-kana-review-item strong{color:var(--rje-accent)}
.rje-kana-review-empty{color:#18794e;font-weight:700}

@media(max-width:520px){
.rje-kana-quiz-card,.rje-kana-results{padding:16px;border-radius:14px}
.rje-kana-answer-grid{grid-template-columns:1fr}
.rje-kana-question-prompt{min-height:105px}
.rje-kana-result-stats{flex-direction:column;gap:4px}
}


/* Version 0.6.0: weak review and special Kana rules */
.rje-kana-weak-controls{text-align:center;margin-top:14px}
.rje-kana-clear-weak{
min-height:42px;padding:9px 15px;border:1px solid var(--rje-border);border-radius:10px;
background:#fff;color:#9d1d1d;font-weight:700;cursor:pointer
}
.rje-kana-weak-empty{
max-width:620px;margin:0 auto;padding:28px;border:1px solid var(--rje-border);border-radius:18px;
background:#fff;text-align:center;box-shadow:0 8px 24px rgba(16,24,40,.06)
}
.rje-kana-empty-icon{
display:flex;align-items:center;justify-content:center;width:68px;height:68px;margin:0 auto 12px;
border-radius:50%;background:#ecfdf3;color:#18794e;font-size:34px;font-weight:800
}
.rje-kana-weak-empty h3{margin:0 0 7px}
.rje-kana-weak-empty p{margin:0;color:var(--rje-muted)}

.rje-kana-rule-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.rje-kana-rule-tab{
padding:9px 14px;border:1px solid var(--rje-border);border-radius:999px;background:#fff;
color:var(--rje-text);font-weight:700;cursor:pointer
}
.rje-kana-rule-tab.is-active{border-color:var(--rje-accent);background:var(--rje-accent);color:#fff}
.rje-kana-rule-panel{
display:none;grid-template-columns:minmax(160px,.35fr) minmax(0,1fr);gap:24px;padding:24px;
border:1px solid var(--rje-border);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.06)
}
.rje-kana-rule-panel.is-active{display:grid}
.rje-kana-rule-symbol{
display:flex;align-items:center;justify-content:center;min-height:220px;border-radius:16px;
background:linear-gradient(180deg,#fff 0%,#fff7f7 100%);border:1px solid #f3d6d6;
font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:clamp(70px,11vw,120px);font-weight:600
}
.rje-kana-rule-label{
display:inline-block;margin-bottom:8px;padding:5px 9px;border-radius:999px;background:var(--rje-soft);
color:var(--rje-muted);font-size:11px;font-weight:700
}
.rje-kana-rule-content h3{margin:0 0 10px;font-size:24px}
.rje-kana-rule-content>p{margin:0;color:var(--rje-muted);line-height:1.75}
.rje-kana-rule-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.rje-kana-rule-example{padding:13px;border:1px solid var(--rje-border);border-radius:12px;background:var(--rje-soft)}
.rje-kana-rule-example strong,.rje-kana-rule-example span,.rje-kana-rule-example small{display:block}
.rje-kana-rule-example strong{font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:24px}
.rje-kana-rule-example span{margin-top:3px;font-size:13px;font-weight:700}
.rje-kana-rule-example small{margin-top:4px;color:var(--rje-muted)}
.rje-kana-rule-tip{margin-top:16px;padding:13px 15px;border-radius:12px;background:#fff8e8;color:#6d5010;line-height:1.65}

@media(max-width:700px){
.rje-kana-rule-panel,.rje-kana-rule-panel.is-active{grid-template-columns:1fr}
.rje-kana-rule-symbol{min-height:165px}
.rje-kana-rule-examples{grid-template-columns:1fr}
}


/* Version 0.7.0: login-free progress dashboard */
.rje-kana-dashboard-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px
}
.rje-kana-dashboard-card,.rje-kana-recent-learned-card,.rje-kana-achievement-card{
padding:20px;border:1px solid var(--rje-border);border-radius:16px;background:#fff;
box-shadow:0 7px 20px rgba(16,24,40,.05)
}
.rje-kana-overall-card{background:linear-gradient(135deg,#fff 0%,#fff5f5 100%);border-color:#f1d1d1}
.rje-kana-dashboard-label{display:block;color:var(--rje-muted);font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.rje-kana-dashboard-big-number{margin:9px 0 8px;font-size:38px;font-weight:850;line-height:1}
.rje-kana-dashboard-card p,.rje-kana-overall-text{margin:9px 0 0;color:var(--rje-muted);font-size:13px;line-height:1.55}
.rje-kana-dashboard-progress{height:8px;margin-top:13px;overflow:hidden;border-radius:999px;background:#edf1f5}
.rje-kana-dashboard-progress span{display:block;width:0;height:100%;border-radius:999px;background:var(--rje-accent);transition:width .3s ease}
.rje-kana-dashboard-card-head{display:flex;gap:13px;align-items:center}
.rje-kana-dashboard-symbol{
display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:13px;
background:var(--rje-soft);font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:30px;font-weight:650
}
.rje-kana-dashboard-card-head strong{display:block;margin-top:4px;font-size:21px}
.rje-kana-continue-character{
display:flex;align-items:center;justify-content:center;width:78px;height:78px;margin:12px 0;
border-radius:16px;background:#fff7f7;border:1px solid #f3d6d6;
font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:46px;font-weight:650
}
.rje-kana-continue-title{display:block;font-size:17px}
.rje-kana-recent-learned-card,.rje-kana-achievement-card{margin-top:16px}
.rje-kana-recent-learned-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.rje-kana-recent-item{
display:flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:5px 9px;
border:1px solid var(--rje-border);border-radius:12px;background:var(--rje-soft);
font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:27px;font-weight:650
}
.rje-kana-recent-empty{color:var(--rje-muted);font-size:13px}
.rje-kana-achievement-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:13px}
.rje-kana-achievement{
padding:14px;border:1px solid var(--rje-border);border-radius:13px;background:var(--rje-soft);
opacity:.45;filter:grayscale(1)
}
.rje-kana-achievement.is-unlocked{opacity:1;filter:none;border-color:#efd27b;background:#fff9df}
.rje-kana-achievement span,.rje-kana-achievement strong,.rje-kana-achievement small{display:block}
.rje-kana-achievement span{font-size:25px}
.rje-kana-achievement strong{margin-top:5px;font-size:13px}
.rje-kana-achievement small{margin-top:3px;color:var(--rje-muted);font-size:11px}
.rje-kana-dashboard-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.rje-kana-refresh-progress,.rje-kana-reset-progress{
min-height:43px;padding:9px 15px;border:1px solid var(--rje-border);border-radius:10px;background:#fff;font-weight:750;cursor:pointer
}
.rje-kana-reset-progress{color:#a51e1e;border-color:#edb6b6}
.rje-kana-reset-message{max-width:620px;margin:14px auto 0;padding:12px 15px;border-radius:11px;background:#ecfdf3;color:#12623f;text-align:center;font-weight:700}

@media(max-width:850px){
.rje-kana-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rje-kana-achievement-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
.rje-kana-dashboard-grid{grid-template-columns:1fr}
.rje-kana-achievement-list{grid-template-columns:1fr}
}


/* Release Candidate 0.9.0-rc1: accessibility and final polish */
.rje-kana-shell button:focus-visible,
.rje-kana-shell select:focus-visible,
.rje-kana-shell input:focus-visible{
outline:3px solid color-mix(in srgb,var(--rje-accent) 35%,transparent);
outline-offset:2px
}
.rje-kana-shell [hidden]{display:none!important}
.rje-kana-answer,.rje-kana-nav-button,.rje-kana-tool-button,.rje-kana-rule-tab,
.rje-kana-picker-item,.rje-kana-refresh-progress,.rje-kana-reset-progress{
-webkit-tap-highlight-color:transparent
}
.rje-kana-stroke-fallback::after{
content:"Stroke data unavailable";position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--rje-muted);
font-family:inherit;font-size:11px;font-weight:700;white-space:nowrap
}
@media(prefers-reduced-motion:reduce){
.rje-kana-shell *{scroll-behavior:auto!important;transition:none!important}
.rje-kana-stroke-svg .rje-stroke-animate{animation-duration:.01ms!important;animation-delay:0s!important}
}
@media(prefers-contrast:more){
.rje-kana-card,.rje-kana-dashboard-card,.rje-kana-tool-card,.rje-kana-quiz-card,
.rje-kana-rule-panel,.rje-kana-answer{border-width:2px}
}
@media(max-width:380px){
.rje-kana-row{gap:4px}
.rje-kana-card{padding-left:2px;padding-right:2px}
.rje-kana-character{font-size:26px}
.rje-kana-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* Version 1.0.1: Elementor readability and spacing fix */
.rje-kana-picker-grid{gap:14px 12px}
.rje-kana-picker-item{min-height:76px;padding:11px 6px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;border:1px solid var(--rje-border);background:#fff;box-shadow:0 2px 7px rgba(16,24,40,.035)}
.rje-kana-picker-item span{display:block;font-size:31px;line-height:1.08;margin:0 0 7px}
.rje-kana-picker-item small{display:block;margin:0;font-size:11px;line-height:1.2;letter-spacing:.08em;font-weight:800}
.rje-kana-picker-item:hover,.rje-kana-picker-item:focus-visible{border-color:color-mix(in srgb,var(--rje-accent) 48%,#fff);box-shadow:0 7px 16px rgba(16,24,40,.08);transform:translateY(-1px)}
.rje-kana-picker-item.is-active{background:#fff8f8;border-width:2px}
.rje-kana-row{gap:14px 10px}
.rje-kana-card{min-height:112px;padding:17px 8px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.rje-kana-character{margin:0 0 10px;line-height:1.08}
.rje-kana-bangla{margin:0 0 5px;line-height:1.25}
.rje-kana-romaji{margin:0;line-height:1.25}
.rje-kana-table--compact .rje-kana-card,.rje-kana-card--compact{min-height:118px;padding:17px 8px 14px}
.rje-kana-table--compact .rje-kana-character,.rje-kana-card--compact .rje-kana-character{font-size:34px;margin-bottom:10px}
.rje-kana-advanced-grid{gap:24px;align-items:start}
.rje-kana-panel{overflow:visible;padding:26px 20px 22px}
.rje-kana-panel>h3{position:static!important;display:block;width:auto;max-width:100%;margin:0 0 20px!important;padding:0!important;overflow:visible!important;white-space:normal!important;line-height:1.35!important;font-size:18px!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;transform:none!important;background:transparent!important;color:var(--rje-text)!important}
.rje-kana-yoon-grid{gap:14px 10px}
.rje-kana-section-heading{position:relative;z-index:1}
.rje-kana-section-heading h2{line-height:1.2!important;margin-bottom:12px!important}
.rje-kana-section-heading p{line-height:1.7!important}
.rje-kana-shell small,.rje-kana-shell span,.rje-kana-shell strong{text-decoration:none}
@media(max-width:900px){.rje-kana-picker-grid{gap:12px 9px}.rje-kana-picker-item{min-height:72px}.rje-kana-advanced-grid{gap:20px}}
@media(max-width:520px){.rje-kana-picker-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 6px}.rje-kana-picker-item{min-height:66px;padding:8px 3px 7px}.rje-kana-picker-item span{font-size:27px;margin-bottom:5px}.rje-kana-picker-item small{font-size:9px}.rje-kana-row{gap:9px 5px}.rje-kana-card{min-height:92px;padding:12px 4px 10px}.rje-kana-character{margin-bottom:7px}.rje-kana-table--compact .rje-kana-card,.rje-kana-card--compact{min-height:98px;padding:13px 4px 10px}.rje-kana-table--compact .rje-kana-character,.rje-kana-card--compact .rje-kana-character{font-size:29px;margin-bottom:7px}.rje-kana-panel{padding:20px 12px 16px}.rje-kana-panel>h3{margin-bottom:16px!important;font-size:16px!important}.rje-kana-yoon-grid{gap:9px 5px}}
@media(max-width:380px){.rje-kana-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 6px}}


/* v1.0.2 — Basic-chart Kana detail window. Visual/UX only; no database changes. */
html.rje-kana-detail-open{overflow:hidden}
.rje-kana-detail-backdrop{
position:fixed;inset:0;z-index:999990;background:rgba(17,24,39,.38);backdrop-filter:blur(3px)
}
.rje-kana-detail-drawer{
position:fixed;z-index:999991;top:18px;right:18px;bottom:18px;width:min(520px,calc(100vw - 36px));
overflow:auto;padding:22px;border:1px solid rgba(255,255,255,.7);border-radius:24px;
background:linear-gradient(145deg,#fff8fb 0%,#f2efff 48%,#e8fbff 100%);
box-shadow:0 28px 80px rgba(15,23,42,.24);color:#182230
}
.rje-kana-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.rje-kana-detail-kicker{display:block;margin-bottom:4px;color:#667085;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.rje-kana-detail-position{display:block;font-size:15px}
.rje-kana-detail-close{
width:42px;height:42px;border:1px solid #d9dee7;border-radius:50%;background:rgba(255,255,255,.88);
font-size:28px;line-height:1;cursor:pointer;color:#344054
}
.rje-kana-detail-hero{
display:flex;align-items:center;justify-content:center;min-height:220px;margin-bottom:12px;
border:1px solid rgba(196,86,86,.24);border-radius:20px;background:rgba(255,255,255,.68)
}
.rje-kana-detail-character{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:138px;font-weight:500;line-height:1}
.rje-kana-detail-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.rje-kana-detail-info>div{padding:13px 14px;border:1px solid rgba(214,219,229,.9);border-radius:13px;background:rgba(255,255,255,.72)}
.rje-kana-detail-info span{display:block;margin-bottom:3px;color:#667085;font-size:12px;font-weight:700}
.rje-kana-detail-info strong{font-size:18px}
.rje-kana-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px}
.rje-kana-detail-action,.rje-kana-detail-stroke-controls button,.rje-kana-detail-clear{
min-height:46px;border:1px solid #d7ddea;border-radius:12px;background:rgba(255,255,255,.86);
color:#182230;font:inherit;font-weight:800;cursor:pointer
}
.rje-kana-detail-action:hover,.rje-kana-detail-action:focus-visible,
.rje-kana-detail-stroke-controls button:hover,.rje-kana-detail-clear:hover{border-color:var(--rje-accent);box-shadow:0 5px 16px rgba(16,24,40,.08)}
.rje-kana-detail-favourite.is-on{color:#b42318;background:#fff4f3;border-color:#f1a7a1}
.rje-kana-detail-section{margin-top:14px;padding:16px;border:1px solid rgba(214,219,229,.85);border-radius:18px;background:rgba(255,255,255,.62)}
.rje-kana-detail-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px}
.rje-kana-detail-section-title strong{font-size:16px}
.rje-kana-detail-stroke-status{color:#16803c;font-size:11px;font-weight:800}
.rje-kana-detail-stroke-stage{
position:relative;display:flex;align-items:center;justify-content:center;min-height:260px;overflow:hidden;
border:1px solid #e1e6ee;border-radius:15px;background:
linear-gradient(45deg,transparent calc(50% - .5px),#e6eaf0 50%,transparent calc(50% + .5px)),
linear-gradient(-45deg,transparent calc(50% - .5px),#e6eaf0 50%,transparent calc(50% + .5px)),#fff
}
.rje-kana-detail-stroke-svg{position:absolute;inset:18px;display:flex;align-items:center;justify-content:center}
.rje-kana-detail-stroke-svg svg{display:block;width:100%;height:100%;max-width:280px;max-height:230px}
.rje-kana-detail-stroke-fallback{font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:150px;line-height:1}
.rje-kana-detail-stroke-controls{display:flex;gap:8px;justify-content:center;margin-top:10px}
.rje-kana-detail-stroke-controls button{min-height:40px;padding:7px 13px;font-size:12px}
.rje-kana-detail-writing-wrap{position:relative;overflow:hidden;border:1px solid #e1e6ee;border-radius:15px;background:#fff}
.rje-kana-detail-writing-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#edf0f4;font-family:"Yu Gothic","Noto Sans JP",sans-serif;font-size:170px;pointer-events:none}
.rje-kana-detail-canvas{position:relative;z-index:1;display:block;width:100%;height:220px;touch-action:none}
.rje-kana-detail-clear{display:block;margin:10px 0 0 auto;min-height:38px;padding:6px 15px;font-size:12px}

/* Keep the canonical R-row visually independent in both Hiragana and Katakana charts. */
.rje-kana-table>.rje-kana-row:nth-child(9){margin-top:2px;margin-bottom:2px}

@media(max-width:767px){
.rje-kana-detail-backdrop{background:rgba(17,24,39,.28)}
.rje-kana-detail-drawer{
top:auto;left:0;right:0;bottom:0;width:100%;max-height:88dvh;padding:18px 15px 24px;
border-radius:24px 24px 0 0
}
.rje-kana-detail-hero{min-height:170px}
.rje-kana-detail-character{font-size:112px}
.rje-kana-detail-stroke-stage{min-height:220px}
.rje-kana-detail-info,.rje-kana-detail-actions{grid-template-columns:1fr 1fr}
.rje-kana-detail-canvas{height:190px}
}
@media(max-width:420px){
.rje-kana-detail-info,.rje-kana-detail-actions{grid-template-columns:1fr}
.rje-kana-detail-drawer{max-height:91dvh}
}


/* =========================================================
   v1.0.3 — Kanji Visual Language Adoption
   VISUAL ONLY: no shortcode/content/admin/database changes.
   Palette and motion are adapted from RJE Kanji Learning.
   ========================================================= */

/* Shared Kanji palette + typography */
.rje-kana-shell{
  --rje-kanji-ink:#172033;
  --rje-kanji-muted:#667085;
  --rje-kanji-purple:#7c3aed;
  --rje-kanji-pink:#ec4899;
  --rje-kanji-blue:#2563eb;
  --rje-kanji-cyan:#06b6d4;
  --rje-kanji-green:#059669;
  --rje-kanji-yellow:#f59e0b;
  --rje-kanji-orange:#ea580c;
  --rje-kanji-red:#dc2626;
  --rje-kanji-line:#e9d5ff;
  --rje-kanji-shadow:0 14px 34px rgba(52,37,93,.12);

  color:var(--rje-kanji-ink);
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Bengali","Noto Sans JP",sans-serif;
}

.rje-kana-shell button,
.rje-kana-shell select,
.rje-kana-shell input{
  font-family:inherit;
}

/* Main section headings */
.rje-kana-hero,
.rje-kana-section-heading{
  position:relative;
}

.rje-kana-hero{
  overflow:hidden;
  padding:30px 22px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,255,255,.92) 0 7%,transparent 8%),
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.52) 0 8%,transparent 9%),
    linear-gradient(135deg,#fff1f2 0%,#f5d0fe 38%,#ddd6fe 68%,#cffafe 100%);
  box-shadow:0 18px 45px rgba(109,40,217,.16);
}

.rje-kana-hero:before,
.rje-kana-hero:after{
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  border-radius:50%;
  opacity:.27;
  pointer-events:none;
}

.rje-kana-hero:before{
  left:-55px;
  bottom:-72px;
  background:linear-gradient(135deg,#fb7185,#f59e0b);
}

.rje-kana-hero:after{
  right:-58px;
  top:-72px;
  background:linear-gradient(135deg,#38bdf8,#8b5cf6);
}

.rje-kana-eyebrow{
  position:relative;
  z-index:1;
  color:#6d28d9;
  font-weight:900;
  letter-spacing:.14em;
}

.rje-kana-hero h2,
.rje-kana-section-heading h2{
  position:relative;
  z-index:1;
  font-weight:900;
  background:linear-gradient(90deg,#4f46e5,#9333ea,#db2777);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.rje-kana-hero p,
.rje-kana-section-heading p{
  position:relative;
  z-index:1;
  color:var(--rje-kanji-muted);
}

/* Shared premium cards */
.rje-kana-feature-card,
.rje-kana-panel,
.rje-kana-lesson-panel,
.rje-kana-picker-panel,
.rje-kana-tool-card,
.rje-kana-quiz-card,
.rje-kana-results,
.rje-kana-dashboard-card,
.rje-kana-recent-learned-card,
.rje-kana-achievement-card,
.rje-kana-rule-panel,
.rje-kana-weak-empty{
  border:1px solid rgba(139,92,246,.20);
  border-radius:22px;
  background:linear-gradient(145deg,#fff 0%,#faf5ff 52%,#eef2ff 100%);
  box-shadow:0 8px 22px rgba(91,33,182,.10);
}

/* Main chart cards — Kanji tile treatment */
.rje-kana-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(139,92,246,.22);
  border-radius:20px;
  background:linear-gradient(145deg,#fff 0%,#faf5ff 52%,#eef2ff 100%);
  box-shadow:0 7px 18px rgba(91,33,182,.08);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease,
    background-position .35s ease;
}

.rje-kana-card:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:68px;
  height:68px;
  right:-25px;
  top:-27px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(236,72,153,.22),rgba(139,92,246,.07));
}

/* Kanji-style category color rhythm */
.rje-kana-row:nth-child(6n+2) .rje-kana-card:not(.rje-kana-card--empty){
  background:linear-gradient(145deg,#fff,#ecfeff,#eff6ff);
  border-color:#bae6fd;
}
.rje-kana-row:nth-child(6n+3) .rje-kana-card:not(.rje-kana-card--empty){
  background:linear-gradient(145deg,#fff,#ecfdf5,#f0fdf4);
  border-color:#bbf7d0;
}
.rje-kana-row:nth-child(6n+4) .rje-kana-card:not(.rje-kana-card--empty){
  background:linear-gradient(145deg,#fff,#fff7ed,#fffbeb);
  border-color:#fed7aa;
}
.rje-kana-row:nth-child(6n+5) .rje-kana-card:not(.rje-kana-card--empty){
  background:linear-gradient(145deg,#fff,#fdf2f8,#fff1f2);
  border-color:#fbcfe8;
}
.rje-kana-row:nth-child(6n+6) .rje-kana-card:not(.rje-kana-card--empty){
  background:linear-gradient(145deg,#fff,#f5f3ff,#eef2ff);
  border-color:#ddd6fe;
}

.rje-kana-card--empty{
  background:linear-gradient(145deg,#f8fafc,#f5f3ff);
  border:1px dashed #d8d2e8;
  box-shadow:none;
}

.rje-kana-character{
  position:relative;
  color:#2b1f45;
  text-shadow:0 3px 10px rgba(109,40,217,.10);
  transition:transform .22s ease,color .22s ease;
}

.rje-kana-bangla{
  position:relative;
  color:#6d28d9;
  font-weight:850;
}

.rje-kana-romaji{
  position:relative;
  color:var(--rje-kanji-muted);
  font-weight:700;
}

/* Active card */
.rje-kana-card.is-active,
.rje-kana-picker-item.is-active{
  border-color:#a78bfa;
  background:linear-gradient(145deg,#fff,#f5f3ff,#ede9fe);
  box-shadow:0 0 0 3px rgba(124,58,237,.12),0 12px 25px rgba(91,33,182,.13);
}

/* Character picker */
.rje-kana-picker-item{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(139,92,246,.18);
  border-radius:14px;
  background:linear-gradient(145deg,#fff,#faf5ff);
  box-shadow:0 5px 13px rgba(76,29,149,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease;
}

.rje-kana-picker-item span{
  color:#2b1f45;
}

.rje-kana-picker-item small{
  color:#667085;
  font-weight:800;
}

.rje-kana-picker-item.is-learned{
  border-color:#a7f3d0;
  background:linear-gradient(145deg,#fff,#ecfdf5,#f0fdf4);
}

/* Lesson hero */
.rje-kana-lesson-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.8);
  border-radius:28px;
  background:linear-gradient(135deg,#fdf2f8 0%,#ede9fe 48%,#cffafe 100%);
  box-shadow:0 16px 38px rgba(109,40,217,.14);
}

.rje-kana-lesson-hero:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-75px;
  bottom:-110px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(236,72,153,.28));
}

.rje-kana-lesson-character{
  position:relative;
  z-index:1;
  background:linear-gradient(145deg,#312e81,#7c3aed,#db2777);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 5px 9px rgba(109,40,217,.14));
}

.rje-kana-lesson-bangla{
  position:relative;
  z-index:1;
  color:#7c3aed;
}

.rje-kana-lesson-romaji{
  position:relative;
  z-index:1;
  color:#4b5563;
}

/* Progress bars */
.rje-kana-progress-track,
.rje-kana-quiz-progress,
.rje-kana-dashboard-progress{
  background:#ede9fe;
}

.rje-kana-progress-fill,
.rje-kana-quiz-progress span,
.rje-kana-dashboard-progress span{
  background:linear-gradient(90deg,#7c3aed,#ec4899);
}

/* Meta/info chips */
.rje-kana-lesson-meta>div{
  border:1px solid #e9d5ff;
  background:linear-gradient(135deg,#fff,#f5f3ff);
}

/* Buttons */
.rje-kana-nav-button,
.rje-kana-tool-button,
.rje-kana-stroke-speed,
.rje-kana-clear-weak,
.rje-kana-refresh-progress,
.rje-kana-reset-progress,
.rje-kana-detail-action,
.rje-kana-detail-stroke-controls button,
.rje-kana-detail-clear{
  border:1px solid #ddd6fe;
  border-radius:14px;
  background:linear-gradient(135deg,#fff,#f5f3ff);
  color:#5b21b6;
  box-shadow:0 6px 16px rgba(76,29,149,.09);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease;
}

.rje-kana-learned-button,
.rje-kana-audio-button,
.rje-kana-quiz-next,
.rje-kana-retry-button{
  border:0;
  border-radius:14px;
  background:linear-gradient(120deg,#312e81,#7c3aed,#db2777);
  color:#fff;
  box-shadow:0 10px 22px rgba(91,33,182,.22);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.rje-kana-learned-button.is-learned{
  background:linear-gradient(135deg,#047857,#10b981,#84cc16);
}

/* Quiz answers */
.rje-kana-answer{
  border:1px solid #e9d5ff;
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#faf5ff);
  box-shadow:0 6px 15px rgba(76,29,149,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.rje-kana-answer.is-correct{
  border-color:#a7f3d0;
  background:linear-gradient(145deg,#fff,#ecfdf5,#d1fae5);
  color:#047857;
}

.rje-kana-answer.is-wrong{
  border-color:#fecaca;
  background:linear-gradient(145deg,#fff,#fff1f2,#fee2e2);
  color:#b91c1c;
}

/* Rule tabs and panels */
.rje-kana-rule-tab{
  border:1px solid #ddd6fe;
  background:linear-gradient(135deg,#fff,#f5f3ff);
  color:#6d28d9;
  box-shadow:0 5px 13px rgba(76,29,149,.07);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.rje-kana-rule-tab.is-active{
  border-color:transparent;
  background:linear-gradient(120deg,#312e81,#7c3aed,#db2777);
  color:#fff;
}

/* Dashboard visual accents */
.rje-kana-overall-card{
  background:linear-gradient(135deg,#fdf2f8 0%,#ede9fe 52%,#cffafe 100%);
  border-color:rgba(139,92,246,.20);
}

.rje-kana-dashboard-symbol{
  background:linear-gradient(135deg,#ede9fe,#fae8ff);
  color:#6d28d9;
}

.rje-kana-achievement.is-unlocked{
  border-color:#fcd34d;
  background:linear-gradient(145deg,#fff,#fffbeb,#fef3c7);
}

/* New detail window — Kanji lesson visual treatment */
.rje-kana-detail-drawer{
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(135deg,#fdf2f8 0%,#ede9fe 48%,#cffafe 100%);
  box-shadow:0 22px 60px rgba(109,40,217,.22);
}

.rje-kana-detail-kicker{
  color:#7c3aed;
  font-weight:900;
}

.rje-kana-detail-position{
  color:#312e81;
}

.rje-kana-detail-hero{
  border:1px solid rgba(139,92,246,.20);
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 25px rgba(91,33,182,.08);
}

.rje-kana-detail-character{
  background:linear-gradient(145deg,#312e81,#7c3aed,#db2777);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 5px 9px rgba(109,40,217,.14));
}

.rje-kana-detail-info>div,
.rje-kana-detail-section{
  border:1px solid rgba(139,92,246,.18);
  background:rgba(255,255,255,.74);
  box-shadow:0 7px 18px rgba(76,29,149,.06);
}

.rje-kana-detail-info span{
  color:#7c3aed;
}

.rje-kana-detail-info strong{
  color:#172033;
}

.rje-kana-detail-close{
  border:1px solid #ddd6fe;
  background:linear-gradient(135deg,#fff,#f5f3ff);
  color:#5b21b6;
  box-shadow:0 6px 16px rgba(76,29,149,.10);
}

/* Kanji-like light sweep for important interactive surfaces */
.rje-kana-feature-card,
.rje-kana-card,
.rje-kana-picker-item,
.rje-kana-answer,
.rje-kana-dashboard-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.rje-kana-feature-card:after,
.rje-kana-card:not(.rje-kana-card--empty):after,
.rje-kana-picker-item:before,
.rje-kana-answer:before,
.rje-kana-dashboard-card:after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-70% -120%;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.58) 49%,transparent 60%);
  transform:translateX(-34%) rotate(7deg);
  transition:transform .58s ease;
  pointer-events:none;
}

/* Desktop premium hover language copied from Kanji visual system */
@media (hover:hover) and (pointer:fine){
  .rje-kana-feature-card:hover,
  .rje-kana-card:not(.rje-kana-card--empty):hover,
  .rje-kana-picker-item:hover,
  .rje-kana-answer:not(:disabled):hover,
  .rje-kana-dashboard-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 34px rgba(76,29,149,.16);
    border-color:#c4b5fd;
    filter:saturate(1.05);
  }

  .rje-kana-card:not(.rje-kana-card--empty):hover .rje-kana-character,
  .rje-kana-picker-item:hover span{
    transform:scale(1.07);
    color:#6d28d9;
  }

  .rje-kana-feature-card:hover:after,
  .rje-kana-card:not(.rje-kana-card--empty):hover:after,
  .rje-kana-picker-item:hover:before,
  .rje-kana-answer:not(:disabled):hover:before,
  .rje-kana-dashboard-card:hover:after{
    transform:translateX(42%) rotate(7deg);
  }

  .rje-kana-nav-button:hover,
  .rje-kana-tool-button:hover,
  .rje-kana-clear-weak:hover,
  .rje-kana-refresh-progress:hover,
  .rje-kana-reset-progress:hover,
  .rje-kana-detail-action:hover,
  .rje-kana-detail-stroke-controls button:hover,
  .rje-kana-detail-clear:hover{
    transform:translateY(-3px);
    border-color:#c4b5fd;
    box-shadow:0 10px 22px rgba(109,40,217,.15);
  }

  .rje-kana-learned-button:hover,
  .rje-kana-audio-button:hover,
  .rje-kana-quiz-next:hover,
  .rje-kana-retry-button:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(91,33,182,.28);
    filter:saturate(1.08);
  }

  .rje-kana-rule-tab:hover{
    transform:translateY(-2px);
    border-color:#c4b5fd;
    box-shadow:0 9px 18px rgba(109,40,217,.13);
  }
}

/* Touch feedback */
.rje-kana-card:active,
.rje-kana-picker-item:active,
.rje-kana-nav-button:active,
.rje-kana-tool-button:active,
.rje-kana-learned-button:active,
.rje-kana-audio-button:active,
.rje-kana-quiz-next:active,
.rje-kana-retry-button:active{
  transform:scale(.975);
}

/* Focus language */
.rje-kana-shell button:focus-visible,
.rje-kana-shell select:focus-visible{
  outline:4px solid rgba(37,99,235,.24);
  outline-offset:3px;
}

/* Mobile tuning */
@media(max-width:520px){
  .rje-kana-hero{
    padding:25px 14px;
    border-radius:23px;
  }

  .rje-kana-lesson-panel,
  .rje-kana-picker-panel,
  .rje-kana-panel,
  .rje-kana-tool-card,
  .rje-kana-quiz-card,
  .rje-kana-results{
    border-radius:19px;
  }

  .rje-kana-card{
    border-radius:16px;
  }

  .rje-kana-detail-drawer{
    border-radius:24px 24px 0 0;
  }
}

@media(prefers-reduced-motion:reduce){
  .rje-kana-shell *{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   v1.0.4 — Kana Detail Window targeted fixes
   - Close icon visibility
   - Pronunciation label readability
   - Detail Stroke Guide animation binding
   No shortcode/content/admin/database changes.
   ========================================================= */

/* Make the close "×" unmistakably visible even under Elementor/theme button CSS */
.rje-kana-detail-close{
  display:grid!important;
  place-items:center!important;
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  color:#4c1d95!important;
  background:linear-gradient(135deg,#ffffff,#f3e8ff)!important;
  border:2px solid #c4b5fd!important;
  border-radius:50%!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:38px!important;
  font-weight:500!important;
  line-height:1!important;
  text-align:center!important;
  text-indent:0!important;
  letter-spacing:0!important;
  opacity:1!important;
  visibility:visible!important;
  -webkit-text-fill-color:#4c1d95!important;
  box-shadow:0 7px 18px rgba(76,29,149,.16)!important;
  z-index:5!important;
}

/* Increase the two pronunciation labels requested in the detail window */
.rje-kana-detail-info span{
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:850!important;
  letter-spacing:0!important;
  color:#6d28d9!important;
  margin-bottom:6px!important;
}

.rje-kana-detail-info strong{
  font-size:20px!important;
  line-height:1.3!important;
}

/*
 Detail Stroke Guide:
 the original animation rule only targeted .rje-kana-stroke-svg.
 The detail window uses .rje-kana-detail-stroke-svg, so the PLAY/REPLAY
 buttons were adding the animation class without any matching CSS animation.
*/
.rje-kana-detail-stroke-svg .rje-stroke-animate{
  stroke-dasharray:3333!important;
  stroke-dashoffset:3333!important;
  animation-name:rjeKanaDrawStroke!important;
  animation-timing-function:linear!important;
  animation-fill-mode:forwards!important;
  animation-duration:var(--rje-stroke-duration,.85s)!important;
  animation-delay:var(--rje-stroke-delay,0s)!important;
}

/* Keep SVG strokes visible and correctly scaled in the detail guide */
.rje-kana-detail-stroke-svg svg{
  overflow:visible!important;
}

.rje-kana-detail-stroke-svg svg g[data-strokesvg="strokes"] > *{
  vector-effect:non-scaling-stroke;
}

/* Better button clarity for the guide controls */
.rje-kana-detail-stroke-controls button{
  font-size:13px!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
}

/* Mobile-specific readability */
@media(max-width:767px){
  .rje-kana-detail-close{
    flex-basis:50px!important;
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
    font-size:40px!important;
  }

  .rje-kana-detail-info span{
    font-size:16px!important;
  }

  .rje-kana-detail-info strong{
    font-size:21px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .rje-kana-detail-stroke-svg .rje-stroke-animate{
    animation-duration:.01ms!important;
    animation-delay:0s!important;
  }
}


/* v1.0.5 — detail Stroke Guide reliability */
.rje-kana-detail-stroke-svg svg[data-strokesvg]{
  --shadow:#e5e7eb!important;
  --stroke:#111827!important;
}

.rje-kana-detail-stroke-svg svg[data-strokesvg] > g[data-strokesvg="strokes"]{
  fill:none!important;
}

.rje-kana-detail-stroke-svg svg[data-strokesvg] > g[data-strokesvg="strokes"] path,
.rje-kana-detail-stroke-svg svg[data-strokesvg] > g[data-strokesvg="strokes"] line,
.rje-kana-detail-stroke-svg svg[data-strokesvg] > g[data-strokesvg="strokes"] polyline{
  stroke-dasharray:3333;
  stroke-dashoffset:3333;
  will-change:stroke-dashoffset;
}


/* =========================================================
   v1.0.6 — Advanced Chart detail-window extension
   Same approved detail experience for Dakuten/Handakuten/Yōon.
   ========================================================= */

button.rje-kana-advanced-card{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-align:center;
}

button.rje-kana-advanced-card:hover,
button.rje-kana-advanced-card:focus-visible{
  border-color:#c4b5fd;
}

button.rje-kana-advanced-card:active{
  transform:scale(.975);
}

/* Component-wise Stroke Guide for combinations such as きゃ / キャ */
.rje-kana-detail-stroke-svg.is-multi{
  inset:14px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:center;
}

.rje-kana-detail-stroke-component{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rje-kana-detail-stroke-svg.is-multi .rje-kana-detail-stroke-component:first-child{
  flex:1 1 64%;
}

.rje-kana-detail-stroke-svg.is-multi .rje-kana-detail-stroke-component:last-child{
  flex:1 1 36%;
}

.rje-kana-detail-stroke-component svg{
  width:100%!important;
  height:100%!important;
  max-width:220px!important;
  max-height:220px!important;
}

/* Make the second small Kana component visually smaller in a Yōon guide. */
.rje-kana-detail-stroke-svg.is-multi .rje-kana-detail-stroke-component:last-child svg{
  transform:scale(.72);
  transform-origin:center;
}

@media(max-width:767px){
  .rje-kana-detail-stroke-svg.is-multi{
    gap:5px;
  }

  .rje-kana-detail-stroke-component svg{
    max-width:180px!important;
    max-height:180px!important;
  }
}


/* =========================================================
   v1.0.8 — Mobile Kana Detail true full-screen fix
   Built directly from stable v1.0.6.
   Applies to Basic + Advanced, Hiragana + Katakana.
   ========================================================= */

@media(max-width:767px){
  /*
   * Override the former bottom-sheet layout.
   * Use the complete visual viewport instead of max-height:88/91dvh.
   */
  .rje-kana-detail-drawer{
    position:fixed!important;
    z-index:2147483001!important;
    inset:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;

    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:none!important;

    margin:0!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;

    padding:
      calc(16px + env(safe-area-inset-top,0px))
      15px
      calc(22px + env(safe-area-inset-bottom,0px))!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    background:linear-gradient(145deg,#fff8fb 0%,#f2efff 48%,#e8fbff 100%)!important;
  }

  .rje-kana-detail-backdrop{
    position:fixed!important;
    z-index:2147483000!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    background:rgba(17,24,39,.38)!important;
  }

  /*
   * Keep the close control inside the safe top area and visible while the
   * long detail panel itself scrolls.
   */
  .rje-kana-detail-head{
    position:sticky;
    top:0;
    z-index:10;
    padding-top:1px;
  }

  .rje-kana-detail-close{
    position:relative;
    z-index:11;
  }

  /*
   * Prevent Elementor/theme ancestor transforms from visually clipping the
   * detail experience where supported.
   */
  html.rje-kana-detail-open,
  html.rje-kana-detail-open body{
    overflow:hidden!important;
    overscroll-behavior:none;
  }
}

@media(max-width:420px){
  /* Explicitly cancel the old 91dvh rule. */
  .rje-kana-detail-drawer{
    max-height:none!important;
    height:100vh!important;
    height:100dvh!important;
    border-radius:0!important;
  }
}


/* =========================================================
   v1.0.9 — Previous / Next inside Kana Detail Window
   Applies to Hiragana + Katakana, Basic + Advanced.
   ========================================================= */

.rje-kana-detail-sequence-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 14px;
}

.rje-kana-detail-seq-btn{
  min-height:48px;
  padding:9px 15px;
  border:1px solid #d8ccff!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#ffffff,#f5f3ff 55%,#eef2ff)!important;
  color:#5b21b6!important;
  box-shadow:0 7px 18px rgba(91,33,182,.10)!important;
  font:inherit!important;
  font-weight:850!important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  letter-spacing:.01em;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.rje-kana-detail-seq-btn > span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:29px;
  line-height:1;
  font-weight:700;
  color:#7c3aed;
}

.rje-kana-detail-seq-prev{
  justify-content:flex-start;
}

.rje-kana-detail-seq-next{
  justify-content:flex-end;
}

.rje-kana-detail-seq-btn:disabled{
  opacity:.34!important;
  cursor:not-allowed!important;
  filter:grayscale(.25);
  box-shadow:none!important;
}

.rje-kana-detail-seq-btn:active:not(:disabled){
  transform:scale(.975);
}

@media(hover:hover) and (pointer:fine){
  .rje-kana-detail-seq-btn:hover:not(:disabled){
    transform:translateY(-2px);
    border-color:#a78bfa!important;
    box-shadow:0 11px 24px rgba(91,33,182,.16)!important;
  }
}

@media(max-width:767px){
  .rje-kana-detail-sequence-nav{
    gap:10px;
    margin:0 0 12px;
  }

  .rje-kana-detail-seq-btn{
    min-height:50px;
    padding:8px 12px;
    border-radius:15px!important;
    font-size:14px!important;
  }

  .rje-kana-detail-seq-btn > span{
    width:30px;
    height:30px;
    font-size:31px;
  }
}

@media(max-width:380px){
  .rje-kana-detail-sequence-nav{
    gap:8px;
  }

  .rje-kana-detail-seq-btn{
    padding-left:9px;
    padding-right:9px;
    font-size:13px!important;
  }
}


/* =========================================================
   v1.0.10 — Kana Detail main-character card enlargement
   Stable baseline: v1.0.9
   Scope: detail windows shared by Hiragana/Katakana,
          Basic/Advanced charts.
   ========================================================= */

/*
 * Increase the selected Kana display card approximately 50% vertically.
 * This targets only the large main-character card inside Kana Details,
 * not the chart tiles, database, or lesson structure.
 */
.rje-kana-detail-hero{
  min-height:clamp(255px,30vw,330px)!important;
  height:auto!important;
  padding:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Scale the selected Hiragana/Katakana with the enlarged card. */
.rje-kana-detail-character{
  font-size:clamp(150px,16vw,210px)!important;
  line-height:.92!important;
  display:block!important;
  max-width:100%!important;
  text-align:center!important;
}

/* Yōon / multi-character combinations need slightly smaller type to fit safely. */
.rje-kana-detail-character[data-rje-multi="true"]{
  font-size:clamp(112px,13vw,172px)!important;
}

/* Mobile: preserve the requested ~50% vertical increase without horizontal clipping. */
@media(max-width:767px){
  .rje-kana-detail-hero{
    min-height:234px!important;
    padding:18px!important;
    border-radius:19px!important;
  }

  .rje-kana-detail-character{
    font-size:132px!important;
    line-height:.92!important;
  }
}

/* Narrow phones: keep the larger visual while preventing overflow. */
@media(max-width:390px){
  .rje-kana-detail-hero{
    min-height:222px!important;
    padding:15px!important;
  }

  .rje-kana-detail-character{
    font-size:122px!important;
  }
}