/* Shared Reading/Writing trainer CSS extracted from duplicated study page styles. */

.app-shell {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 1 auto;
    }

.scoreline {
        
        
        
        
        margin-bottom: 18px;
        font-size: 15px;
    }

.hiragana-wrap {
        min-height: 162px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }

.hiragana {
        font-size: 128px;
        line-height: 1;
        transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
        text-shadow: var(--ma-native-text-shadow,0 0 18px rgba(255,255,255,0.08));
    }

.flash-correct {
        color: var(--ma-success);
        text-shadow: var(--ma-native-text-shadow,0 0 24px color-mix(in srgb,var(--ma-success) 45%,transparent));
        transform: scale(1.05);
    }

.flash-wrong {
        color: var(--ma-danger);
        text-shadow: var(--ma-native-text-shadow,0 0 24px color-mix(in srgb,var(--ma-danger) 35%,transparent));
        transform: scale(1.03);
    }

.hint {
        margin-top: 10px;
        min-height: 22px;
        color: var(--muted);
        font-size: 16px;
        letter-spacing: 1px;
    }

.combo-tier-notice {
        min-height: 22px;
        margin-top: 8px;
        font-size: 14px;
        font-weight: 700;
        color: var(--ma-warning);
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.22s ease, transform 0.22s ease;
        pointer-events: none;
    }

.combo-tier-notice.show {
        opacity: 1;
        transform: translateY(0);
    }

.daily-badge {
        display: none;
        margin: 0 auto 12px;
        width: fit-content;
        background: color-mix(in srgb,var(--ma-warning) 18%,var(--ma-card-3));
        border: 1px solid color-mix(in srgb,var(--ma-warning) 55%,var(--ma-border));
        color: color-mix(in srgb,var(--ma-warning) 55%,var(--ma-text));
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.4px;
    }

body.daily-challenge-active .daily-badge {
        display: inline-block;
    }

body.daily-challenge-active .main {
        border-color: color-mix(in srgb,var(--ma-warning) 55%,var(--ma-border));
        box-shadow: var(--ma-shadow), 0 0 0 1px color-mix(in srgb,var(--ma-warning) 12%,transparent);
    }

body.daily-challenge-active {
        background: var(--ma-native-page,radial-gradient(circle at top,color-mix(in srgb,var(--ma-warning) 22%,var(--ma-app-bg)) 0%,var(--ma-app-bg) 58%));
    }

.input-wrap { margin-top: 8px; }

input[type="text"], input[type="number"], textarea {
        width: min(260px, 90%);
        background: var(--ma-card-3);
        color: var(--text);
        border: 1px solid var(--ma-border-strong);
        border-radius: 12px;
        font-size: 24px;
        text-align: center;
        padding: 12px 14px;
        outline: none;
    }

input[type="number"] { font-size: 18px; }

input[type="text"]:disabled,
    input[type="number"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.trial-config {
        display: flex;
        margin-top: 14px;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

.trial-config[hidden] { display: none; }

.trial-box {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }

.trial-box label {
        font-size: 13px;
        color: var(--muted);
    }

.trial-box input { width: 120px; }

.game-over {
        margin-top: 16px;
        display: none;
    }

.game-over.is-active:not([hidden]) {
        display: block;
    }

.game-over-title {
        color: var(--ma-native-danger,#ff8a8a);
        margin-bottom: 10px;
        font-size: 22px;
        font-weight: 700;
    }

.game-over-answer {
        color: var(--ma-native-text,#ddd);
        font-size: 16px;
        margin-bottom: 10px;
    }

.game-over #retryBtn {
        display: none;
    }

.game-over.is-active #retryBtn.is-active:not([hidden]) {
        display: inline-flex;
    }

.btn {
        appearance: none;
        border: 1px solid var(--ma-native-border,#3a3a3a);
        background: var(--ma-native-control,#252525);
        color: var(--text);
        border-radius: 10px;
        padding: 10px 14px;
        cursor: pointer;
        font-size: 15px;
        transition: all 0.15s ease;
    }

.btn-danger {
        background: var(--ma-native-danger-bg,#472323);
        border-color: var(--ma-native-border,#6c3030);
    }

.btn-danger:hover { background: var(--ma-native-danger-bg,#5b2c2c); }

.start-wrap {
        margin-top: 14px;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

.start-wrap[hidden] { display: none; }

/* Guided-set surfaces use the same roles on web and native. SessionControls
   owns feedback/pause state; the platform keyboard consumes that state. */
.ma-study-setup{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;flex-basis:100%;text-align:left;max-width:430px;padding:14px;border:1px solid var(--ma-border);border-radius:var(--ma-radius-md);background:var(--ma-surface-inset);}
.ma-study-setup label{font-weight:750;font-size:.86rem;color:var(--ma-text-strong);}
.ma-study-setup select{width:auto;min-height:44px;max-width:100%;font-size:.85rem;padding:8px;}
.ma-study-setup p{grid-column:1/-1;margin:0;font-size:.78rem;line-height:1.45;color:var(--ma-muted);}
.ma-study-progress{display:grid;gap:6px;min-width:180px;max-width:100%;margin:10px 0 4px;color:var(--ma-text-soft);font-size:.75rem;}
.ma-study-progress progress{appearance:none;width:100%;height:5px;border:0;border-radius:8px;overflow:hidden;background:var(--ma-border);}
.ma-study-progress progress::-webkit-progress-bar{background:var(--ma-border);}
.ma-study-progress progress::-webkit-progress-value{background:var(--ma-trainer-accent);border-radius:8px;}
.ma-study-progress progress::-moz-progress-bar{background:var(--ma-trainer-accent);}
body.ma-study-feedback-open .ma-trainer-stage{display:none;}
body.ma-study-feedback-open .ma-trainer-skip{display:none;}
.ma-study-feedback{width:100%;display:grid;gap:14px;margin:14px 0;text-align:center;padding:16px 12px;border:1px solid color-mix(in srgb,var(--ma-danger) 50%,var(--ma-border));border-radius:18px;background:color-mix(in srgb,var(--ma-danger) 6%,var(--ma-card));box-sizing:border-box;}
.ma-study-feedback__title{font:800 1.1rem/1.3 var(--ma-font-display);color:var(--ma-danger);margin:0;}
.ma-study-feedback[data-outcome="skipped"]{border-color:var(--ma-border);background:var(--ma-surface-inset);}
.ma-study-feedback[data-outcome="skipped"] .ma-study-feedback__title{color:var(--ma-text-soft);}
.ma-study-feedback__correction{display:grid;gap:5px;margin:0;font-size:.85rem;line-height:1.5;overflow-wrap:anywhere;color:var(--ma-muted);}
.ma-study-feedback__correction strong{color:var(--ma-text-strong);}
.ma-study-contrast{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.ma-study-contrast__item{display:grid;gap:5px;place-items:center;flex:1;max-width:9.5rem;padding:12px;border:1px solid var(--ma-border);border-radius:var(--ma-radius-md);background:var(--ma-surface-inset);}
.ma-study-contrast__item strong{font:650 clamp(2.4rem,10vw,3.5rem)/1.3 var(--ma-font-jp);color:var(--ma-text-strong);}
.ma-study-contrast__item span{font-size:.9rem;color:var(--ma-text-soft);}

.ma-study-feedback__note{max-width:44ch;margin:0 auto;font-size:.88rem;line-height:1.5;color:var(--ma-text-soft);}
.ma-study-feedback>.ma-button{justify-self:stretch;min-height:48px;}
.ma-study-summary{display:grid;gap:16px;overflow-wrap:anywhere;}
.ma-study-summary p,.ma-study-summary h3{margin:0;}
.ma-study-summary__intro{color:var(--ma-text-soft);line-height:1.5;}
.ma-study-summary__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.ma-study-summary__stats>div{display:grid;gap:5px;padding:14px 6px;text-align:center;background:var(--ma-surface-inset);border:1px solid var(--ma-border);border-radius:var(--ma-radius-md);}
.ma-study-summary__stats strong{color:var(--ma-text-strong);font-size:1.35rem;font-weight:850;}
.ma-study-summary__stats span,.ma-study-summary__meta,.ma-study-summary__note{font-size:.8rem;line-height:1.5;color:var(--ma-muted);}
.ma-study-summary h3{font-size:.95rem;color:var(--ma-text-strong);}
.ma-study-summary__kana{display:flex;flex-wrap:wrap;gap:8px;}
.ma-study-summary__kana>span{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--ma-border);border-radius:12px;background:var(--ma-surface-inset);}
.ma-study-summary__kana strong{font:700 1.3rem var(--ma-font-jp);}
.ma-study-summary__kana span>span{color:var(--ma-text-soft);font-size:.85rem;}
.ma-study-summary__details{border-block:1px solid var(--ma-border);padding:10px 0;font-size:.85rem;}
.ma-study-summary__details summary{cursor:pointer;min-height:32px;align-content:center;color:var(--ma-text-soft);}
.ma-study-summary__details p{display:flex;justify-content:space-between;gap:12px;padding:5px 0;}
.ma-answer-feedback{min-height:1.5em;margin:6px 0;font-size:.85rem;font-weight:750;color:var(--ma-text-strong);overflow-wrap:anywhere;}
body:not(.trainer-session-active) .ma-answer-feedback,body.ma-study-feedback-open .ma-answer-feedback{display:none;}
.ma-answer-feedback[data-outcome="incorrect"]{color:var(--ma-danger);}
.ma-answer-feedback[data-outcome="correct"]{color:var(--ma-success);}
.ma-study-summary__actions{display:flex;flex-wrap:wrap;gap:10px;}
.ma-study-summary__actions>.ma-button{flex:1;min-height:48px;}
@media(max-width:380px){.ma-study-setup{grid-template-columns:minmax(0,1fr);}.ma-study-setup select{width:100%;}}
html[data-ma-large-text] .ma-study-setup{grid-template-columns:minmax(0,1fr);}
html[data-ma-large-text] .ma-study-summary__stats{grid-template-columns:minmax(0,1fr);}

.session-actions {
        margin-top: 14px;
        display: none;
        
        
        
    }

.session-actions.is-active:not([hidden]) {
        display: flex;
    }

.left-panel { grid-column:2;grid-row:1; }

.right-panel { grid-column:2;grid-row:2; }

.panel-content {
        padding: 12px;
        display: block;
        overflow-y: auto;
        min-height: 0;
    }

.panel-content.hidden { display: none; }

.heatmap {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

.cell {
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        user-select: none;
        border: 1px solid var(--ma-native-border,rgba(255,255,255,0.08));
    }

.cell.combo {
        font-size: 16px;
        letter-spacing: -0.04em;
        padding: 2px;
    }

.score-block h3 {
        margin: 0 0 10px;
        font-size: 16px;
        text-align: center;
    }

.score-subtitle {
        margin: 10px 0 6px;
        color: var(--muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.score-row:last-child { border-bottom: none; }

.popup-title {
        font-size: 22px;
        margin-bottom: 6px;
    }

.tab-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

.tab-button {
        text-align: center;
        padding: 8px 12px;
        cursor: pointer;
        user-select: none;
        font-weight: 700;
        border-right: 1px solid var(--border);
    }

.tab-button:last-child { border-right: none; }

.section-title {
        margin: 0 0 10px;
        font-size: 16px;
        text-align: center;
    }

.button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 10px;
    }

.toggle-btn.disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.nav-btn {
        display: block;
        width: 100%;
        text-decoration: none;
        background: var(--ma-native-surface,#1f2f47);
        border: 1px solid var(--ma-native-border,#36527c);
        border-radius: 10px;
        padding: 11px 12px;
        text-align: center;
        color: var(--text);
        font-size: 15px;
        font-weight: 600;
    }

.nav-btn:hover {
        background: var(--ma-native-hover,#294061);
        border-color: var(--ma-native-writing,#66a8ff);
    }

.nav-btn-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 8px;
    }

.beta-badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 999px;
        border: 1px solid var(--ma-native-border,#7a6230);
        background: var(--ma-native-warning-bg,#3a3016);
        color: var(--ma-native-gold,#f3d27a);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        line-height: 1.2;
    }

.rows-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
        gap: 10px;
    }

.options-stack {
        display: grid;
        gap: 18px;
        width: min(900px, 100%);
        margin: 0 auto;
    }

.bottom-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

.muted-note {
        margin-top: 8px;
        color: var(--muted);
        font-size: 12px;
        text-align: center;
    }

.file-input { display: none; }

.version-tag {
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        margin-top: 4px;
    }





.modal-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

.stat-card {
        background: var(--ma-native-inset,var(--ma-surface-soft, #222));
        border: 1px solid var(--ma-border, var(--border));
        color: var(--ma-text, var(--text));
        border-radius: 12px;
        padding: 12px;
    }

.stat-card .label {
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 6px;
    }

.stat-card .value {
        font-size: 22px;
        font-weight: 700;
    }

.session-list {
        background: var(--ma-native-surface,var(--ma-surface-soft, #222));
        border: 1px solid var(--ma-border, var(--border));
        color: var(--ma-text, var(--text));
        border-radius: 12px;
        padding: 12px;
        margin-top: 10px;
        text-align: left;
    }

.session-list h3 {
        margin: 0 0 10px;
        font-size: 16px;
    }

.session-list-item:last-child { border-bottom: none; }




@media (max-width: 1180px) and (min-width: 761px) {
  body { padding: 18px; }
  .main { width: min(520px, calc(100vw - 32px)); padding: 22px 28px 132px; }
  .hiragana, .prompt { font-size: 116px; }
  .hiragana-wrap, .prompt-wrap { min-height: 142px; }
  .side-panel { top: 124px; width: 218px; }
}

@media (max-width: 760px) {
  body {
    display: block;
    padding: 10px;
    min-height: 100svh;
    overflow-x: hidden;
  }
  .app-shell { display: block; min-height: auto; }
  .main {
    width: 100%;
    max-width: none;
    margin: 0 auto 94px;
    border-radius: 26px;
    padding: 20px 14px 28px;
    min-height: auto;
  }
  .main h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .subline { font-size: 1rem; margin-bottom: 14px; }
  .scoreline { gap: 8px; margin-bottom: 12px; }
  .score-pill { padding: 8px 11px; font-size: 0.95rem; }
  .hiragana-wrap, .prompt-wrap { min-height: 132px; margin-bottom: 8px; }
  .hiragana, .prompt { font-size: clamp(5rem, 28vw, 7rem); }
  .prompt-small { font-size: clamp(3.8rem, 20vw, 5rem); }
  .hint, .combo-tier-notice { font-size: 0.9rem; min-height: 20px; }
  input[type="text"] { width: min(100%, 320px); font-size: 20px; padding: 10px 12px; }
  .trial-config { margin-top: 8px; gap: 8px; }
  .choice-grid { width: 100%; gap: 8px; }
  .choice-btn { min-height: 58px; font-size: 30px; padding: 12px 6px; border-radius: 12px; }
  .choice-btn.choice-combo { font-size: 24px; }
  .left-panel, .right-panel {
    position: static;
    width: 100%;
    max-height: none;
    margin: 10px auto;
  }
  .panel-content { max-height: 260px; }
  .bottom-shell { z-index: 75; }
  .tab-button { padding: 12px 10px; font-size: 1rem; }
  .button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rows-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .toggle-btn, .btn { padding: 10px 10px; font-size: 0.95rem; }
}

body[data-display-mode="mobile"] .main {
  width: 100%;
  max-width: none;
  padding: 20px 14px 28px;
}

@media (max-width: 760px) {
  body {
    padding-top: 10px;
    background-color: var(--ma-native-page,#05060b);
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .app-shell { align-items: flex-start; }
  .main { margin-top: 0; }
}

@media (min-width: 761px) {
  
}

.bottom-shell.ma-modifiers-only{background:var(--ma-collection-surface,var(--ma-native-surface,linear-gradient(180deg,rgba(11,14,20,.96),rgba(5,6,10,.98))));border-top:1px solid var(--ma-collection-border,var(--ma-native-border,rgba(255,255,255,.08)));box-shadow:var(--ma-native-shadow,0 -18px 50px rgba(0,0,0,.38))}

.bottom-shell.ma-modifiers-only .tab-row{grid-template-columns:1fr;width:min(520px,100%);margin:0 auto}

.bottom-shell.ma-modifiers-only .tab-button{border-right:0;min-height:54px;font-size:18px;letter-spacing:-.01em;background:var(--ma-collection-inset,var(--ma-native-control,linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))))}

@media(max-width:760px){
}

.bottom-shell.ma-modifiers-only{z-index:9999; pointer-events:auto;}

.bottom-shell.ma-modifiers-only .tab-button{cursor:pointer; user-select:none;}

.main { width: min(680px, calc(100vw - 32px)); }

.scoreline {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  
  
  gap: 12px;
  min-height: 44px;
}

.score-pill {
  min-width: 118px;
  
  
  
}

.score-pill:nth-child(2) { min-width: 174px; }

#endlessWrongPill, #dailyProgressPill, #testQuestionPill { min-width: 150px; }

@media (max-width: 760px) {
  .main { width: 100%; }
  .scoreline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .score-pill, .score-pill:nth-child(2), #endlessWrongPill, #dailyProgressPill, #testQuestionPill {
    min-width: 0;
    width: 100%;
  }
}

/* Display-mode trainer control sizing. Structural card/panel geometry is owned
   once by the responsive trainer workspace section below. */
body[data-effective-display-mode="tablet"] .hiragana,
body[data-effective-display-mode="tablet"] .prompt{font-size:clamp(6.6rem,15vw,8.2rem);}
body[data-effective-display-mode="tablet"] .hiragana-wrap,
body[data-effective-display-mode="tablet"] .prompt-wrap{min-height:148px;}
body[data-effective-display-mode="tablet"] .scoreline{grid-template-columns:repeat(2,minmax(0,max-content));gap:9px;}
body[data-effective-display-mode="tablet"] .score-pill,
body[data-effective-display-mode="tablet"] .score-pill:nth-child(2),
body[data-effective-display-mode="tablet"] #endlessWrongPill,
body[data-effective-display-mode="tablet"] #dailyProgressPill,
body[data-effective-display-mode="tablet"] #testQuestionPill{min-width:0;width:auto;}
body[data-effective-display-mode="tablet"] .panel-content{max-height:320px;}
body[data-effective-display-mode="tablet"] .button-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
body[data-effective-display-mode="tablet"] .rows-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
body[data-effective-display-mode="tablet"] .toggle-btn,
body[data-effective-display-mode="tablet"] .btn{min-height:46px;font-size:.98rem;}

body[data-effective-display-mode="phone"] .main h1{font-size:clamp(1.85rem,8.6vw,2.55rem);}
body[data-effective-display-mode="phone"] .scoreline{grid-template-columns:repeat(2,minmax(0,1fr));}
body[data-effective-display-mode="phone"] .score-pill,
body[data-effective-display-mode="phone"] .score-pill:nth-child(2),
body[data-effective-display-mode="phone"] #endlessWrongPill,
body[data-effective-display-mode="phone"] #dailyProgressPill,
body[data-effective-display-mode="phone"] #testQuestionPill{min-width:0;width:100%;padding:8px 10px;font-size:.9rem;}
body[data-effective-display-mode="phone"] .hiragana-wrap,
body[data-effective-display-mode="phone"] .prompt-wrap{min-height:112px;}
body[data-effective-display-mode="phone"] .hiragana,
body[data-effective-display-mode="phone"] .prompt{font-size:clamp(4.8rem,27vw,6.8rem);}
body[data-effective-display-mode="phone"] input[type="text"]{width:min(100%,320px);font-size:20px;}
body[data-effective-display-mode="phone"] .panel-content{max-height:260px;}
body[data-effective-display-mode="phone"] .choice-grid,
body[data-effective-display-mode="phone"] .button-grid,
body[data-effective-display-mode="phone"] .rows-grid{width:100%;gap:8px;}
body[data-effective-display-mode="phone"] .button-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
body[data-effective-display-mode="phone"] .rows-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
body[data-effective-display-mode="phone"] .choice-btn{min-height:56px;font-size:28px;border-radius:12px;}
body[data-effective-display-mode="phone"] .bottom-shell{z-index:75;}

/* Mode-specific static states previously stored as inline styles. */
.daily-badge.test-badge-reading {
  background: var(--ma-native-success-bg,#123127);
  border-color: var(--ma-native-border,#2f8f68);
  color: var(--ma-native-reading,#bff3de);
}

.daily-badge.test-badge-writing {
  background: var(--ma-native-selected,#12233d);
  border-color: var(--ma-native-border,#3f73c8);
  color: var(--ma-native-writing,#cfe1ff);
}

.beta-badge.writing-beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.beta-badge .beta-badge-muted {
  opacity: 0.8;
}


.srs-debug-head,
.storage-debug-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.srs-debug-title,
.storage-debug-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.srs-debug-close,
.storage-debug-close {
  border: 1px solid var(--ma-native-border,rgba(255,255,255,0.14));
  background: var(--ma-native-surface,#1f1f1f);
  color: var(--ma-native-text,#f3f3f3);
  border-radius: 8px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 12px;
}

.srs-debug-grid,
.storage-debug-grid {
  display: grid;
  gap: 8px;
}

.srs-debug-muted,
.storage-debug-muted {
  color: var(--ma-native-secondary,#bfbfbf);
}

.srs-debug-card,
.storage-debug-card {
  padding: 10px;
  border-radius: 12px;
  background: var(--ma-native-surface,rgba(255,255,255,0.04));
  border: 1px solid var(--ma-native-border,rgba(255,255,255,0.08));
}

.srs-debug-card-title,
.storage-debug-card-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.srs-debug-row,
.storage-debug-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.srs-debug-total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ma-native-border,rgba(255,255,255,0.08));
}
.ma-pause-host {
        position: relative;
    }
.session-actions{gap:10px;flex-wrap:wrap;justify-content:center;}
.ma-session-paused .ma-trainer-card{border-color:color-mix(in srgb,var(--ma-warning) 48%,var(--ma-border));}
.ma-pause-overlay{
  position:absolute;
  top:16px;
  right:16px;
  width:max-content;
  padding:7px 11px;
  border-radius:var(--ma-radius-pill);
  text-align:center;
  background:color-mix(in srgb,var(--ma-warning) 14%,var(--ma-card));
  border:1px solid color-mix(in srgb,var(--ma-warning) 36%,var(--ma-border));
  color:color-mix(in srgb,var(--ma-warning) 76%,var(--ma-text));
  font-size:.78rem;
  font-weight:850;
  display:none;
  z-index:3;
}
.ma-session-paused .ma-pause-overlay{display:block;}

/* Trainer top stat layout ownership.
   Compact fixed-size pills keep idle, standard, Speed Run, Daily, and Test mode centred without overlap. */
.scoreline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 8px 10px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 12px;
  min-height: 40px;
}

.score-pill {
  font-variant-numeric: tabular-nums;
  min-height: 38px;
  height: 38px;
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  padding: 6px 14px;
  font-size: clamp(0.98rem, 1.55vw, 1.16rem);
  line-height: 1;
}

.scoreline > .score-pill:nth-child(1) { width: 132px; }
.scoreline > .score-pill:nth-child(2) { width: 184px; }

#endlessTotalPill,
#dailyCorrectPill,
#testCorrectPill {
  width: 132px;
}

#endlessWrongPill,
#dailyWrongPill,
#testWrongPill {
  width: 148px;
}

#dailyProgressPill,
#testQuestionPill {
  width: 160px;
}

#dailyOfficialPill {
  width: 142px;
}

#trialTimerPill:not([hidden]) {
  width: 196px;
  min-width: 196px;
  max-width: 196px;
}

#trialTimer {
  display: inline-block;
  min-width: 5.4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body[data-effective-display-mode="tablet"] .scoreline {
  gap: 8px 9px;
  margin-bottom: 10px;
}

body[data-effective-display-mode="tablet"] .score-pill {
  height: 36px;
  min-height: 36px;
  padding: 5px 12px;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
}

body[data-effective-display-mode="tablet"] .scoreline > .score-pill:nth-child(1) { width: 120px; }
body[data-effective-display-mode="tablet"] .scoreline > .score-pill:nth-child(2) { width: 168px; }
body[data-effective-display-mode="tablet"] #endlessTotalPill,
body[data-effective-display-mode="tablet"] #dailyCorrectPill,
body[data-effective-display-mode="tablet"] #testCorrectPill { width: 120px; }
body[data-effective-display-mode="tablet"] #endlessWrongPill,
body[data-effective-display-mode="tablet"] #dailyWrongPill,
body[data-effective-display-mode="tablet"] #testWrongPill { width: 136px; }
body[data-effective-display-mode="tablet"] #dailyProgressPill,
body[data-effective-display-mode="tablet"] #testQuestionPill { width: 150px; }
body[data-effective-display-mode="tablet"] #dailyOfficialPill { width: 132px; }
body[data-effective-display-mode="tablet"] #trialTimerPill:not([hidden]) {
  width: 184px;
  min-width: 184px;
  max-width: 184px;
}

body[data-effective-display-mode="phone"] .scoreline {
  gap: 8px;
  margin-bottom: 10px;
}

body[data-effective-display-mode="phone"] .score-pill {
  flex: 1 1 calc(50% - 8px);
  width: auto;
  max-width: calc(50% - 4px);
  height: 36px;
  min-height: 36px;
  padding: 5px 10px;
  font-size: 0.95rem;
}

body[data-effective-display-mode="phone"] #trialTimerPill:not([hidden]) {
  flex: 1 1 calc(50% - 8px);
  width: auto;
  min-width: 0;
  max-width: calc(50% - 4px);
}

@media (max-width: 760px) {
  .scoreline {
    gap: 8px;
    margin-bottom: 10px;
  }

  .score-pill {
    flex: 1 1 calc(50% - 8px);
    width: auto;
    max-width: calc(50% - 4px);
    height: 36px;
    min-height: 36px;
    padding: 5px 10px;
    font-size: 0.95rem;
  }

  #trialTimerPill:not([hidden]) {
    flex: 1 1 calc(50% - 8px);
    width: auto;
    min-width: 0;
    max-width: calc(50% - 4px);
  }
}


/* Responsive trainer-owned rules moved from mode-atlas-responsive.css.
   Keep trainer card, stats, and mobile answer UI owned by the study layout file. */
@media (max-width: 760px){
  .practice-card,.trainer-card,.game-card,.quiz-card,.main-card{
    width:100%;max-width:100%;margin-left:auto;margin-right:auto;
    padding:clamp(22px,6vw,34px);border-radius:30px;min-height:auto;
  }
  .practice-card h1,.trainer-card h1,.game-card h1,.quiz-card h1,.main-card h1{
    font-size:clamp(2.3rem,11vw,4rem);line-height:1.02;
  }
  .score-row,.stats-row,.session-stats,.score-pills,.session-metrics{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:100%;
  }
  .score-pill,.stat-pill,.metric-pill,.session-stat,.session-metric{
    width:100%;min-width:0;height:auto;min-height:50px;padding:10px 12px;
    display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.15;
  }
  .kana-display,.prompt,.question,.kana-big{font-size:clamp(5rem,30vw,9rem);line-height:1;}
  input[type="text"],input[type="search"],textarea{font-size:16px;max-width:100%;}
  .modifier-toggle,.modifiers-toggle,#modifierToggle,.modifiers-header{
    width:100%;left:auto;right:auto;max-width:100%;overflow:hidden;
  }
  body{overflow-x:hidden;}
  .scoreline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* Responsive study-nav ownership moved from mode-atlas-responsive.css. */
@media (max-width: 820px){
  

  

  

  

  

  
}

@media (max-width: 520px){
  
}

/* Responsive bottom-shell ownership moved from mode-atlas-responsive.css. */
@media (max-width: 760px) {
  /* Avoid the bottom modifier control creating sideways page scroll. */
  .bottom-shell,
  .modifiers-shell,
  .modifier-panel,
  .bottom-shell.ma-modifiers-only {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    overflow-x: hidden;
  }
}


/* Responsive score/stat pill ownership moved from mode-atlas-responsive.css. */
.score-pill[hidden],
.stat-pill[hidden],
.metric-pill[hidden],
.session-stat[hidden],
.session-metric[hidden],
.score-pill[style*="display: none"],
.score-pill[style*="display:none"],
.stat-pill[style*="display: none"],
.stat-pill[style*="display:none"],
.metric-pill[style*="display: none"],
.metric-pill[style*="display:none"],
.session-stat[style*="display: none"],
.session-stat[style*="display:none"],
.session-metric[style*="display: none"],
.session-metric[style*="display:none"],
#endlessWrongPill[style*="display: none"],
#endlessWrongPill[style*="display:none"],
#dailyProgressPill[style*="display: none"],
#dailyProgressPill[style*="display:none"],
#testQuestionPill[style*="display: none"],
#testQuestionPill[style*="display:none"],
#correctPill[style*="display: none"],
#correctPill[style*="display:none"],
#wrongPill[style*="display: none"],
#wrongPill[style*="display:none"] {
  display: none;
}

@media (max-width: 760px) {
  .score-row,
  .stats-row,
  .session-stats,
  .score-pills,
  .session-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }
  .score-pill:not([style*="display: none"]):not([style*="display:none"]),
  .stat-pill:not([style*="display: none"]):not([style*="display:none"]),
  .metric-pill:not([style*="display: none"]):not([style*="display:none"]) {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
}

/* === Shared trainer visual ownership ===
   Reading and Writing set only --ma-trainer-* accent tokens in their page CSS.
   This block owns the shared trainer chrome that previously lived twice in the
   Reading and Writing page styles. */
body.ma-reading-page,
body.ma-writing-page{
  --ma-trainer-heatmap-neutral:var(--ma-collection-inset,var(--ma-native-inset,#555));
  --ma-trainer-heatmap-wrong:var(--ma-native-danger-bg,#b23b3b);
  --ma-trainer-heatmap-correct:var(--ma-native-success-bg,#2e7d32);
  --ma-trainer-heatmap-even:var(--ma-native-warning-bg,#9a8c25);
  margin:0;
  min-height:100vh;
  color:var(--ma-text);
  background:var(--ma-app-bg);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  padding:var(--ma-page-inset-top,0px) 24px var(--ma-page-inset-bottom,24px);
}

.ma-trainer-card{
  width:min(540px,calc(100vw - 32px));
  background:var(--ma-card);
  border:1px solid var(--ma-border);
  border-radius:20px;
  box-shadow:none;
  padding:24px 30px;
  text-align:center;
  position:relative;
}
.ma-trainer-card h1{
  margin:0 0 10px;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.01em;
  text-shadow:none;
}
.ma-trainer-card .subline{color:var(--ma-muted);font-size:15px;margin-bottom:20px;}

.ma-trainer-score{
  background:var(--ma-control-active);
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 18%,var(--ma-border));
  color:var(--ma-text);
  padding:8px 14px;
}
.ma-trainer-input{width:min(260px,90%);font-size:24px;text-align:center;padding:12px 14px;}
.ma-trainer-input--number{width:120px;font-size:18px;}
.ma-trainer-input:focus{border-color:color-mix(in srgb,var(--ma-trainer-accent) 55%,var(--ma-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--ma-trainer-accent) 15%,transparent);}
.ma-trainer-button:hover:not(:disabled){border-color:color-mix(in srgb,var(--ma-trainer-accent) 58%,var(--ma-border));box-shadow:0 0 0 1px color-mix(in srgb,var(--ma-trainer-accent) 24%,transparent);}
.ma-trainer-button.active,
.ma-trainer-button[aria-pressed="true"]{
  background:var(--ma-native-selected,linear-gradient(180deg,color-mix(in srgb,var(--ma-trainer-accent) 24%,var(--ma-card-2)),color-mix(in srgb,var(--ma-trainer-accent) 12%,var(--ma-card-3))));
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 58%,var(--ma-border));
  color:var(--ma-trainer-active-text);
}
/* Session actions are ordinary controls, not selected practice options. */
.ma-trainer-button.btn-secondary:not(.ma-trainer-skip){
  background:var(--ma-native-control,linear-gradient(180deg,color-mix(in srgb,var(--ma-trainer-accent) 24%,var(--ma-card-2)),color-mix(in srgb,var(--ma-trainer-accent) 12%,var(--ma-card-3))));
  border-color:var(--ma-native-border,color-mix(in srgb,var(--ma-trainer-accent) 58%,var(--ma-border)));
  color:var(--ma-native-text,var(--ma-trainer-active-text));
}

/* Supporting panels occupy their own column in the shared workspace. */
.ma-trainer-side-panel{position:static;width:100%;max-height:none;background:var(--ma-card);border:1px solid var(--ma-border);border-radius:14px;overflow:hidden;box-shadow:none;z-index:5;display:flex;flex-direction:column;}
.ma-trainer-side-panel .panel-header{
  background:var(--ma-card-2);
  border-bottom:1px solid color-mix(in srgb,var(--ma-trainer-accent) 14%,var(--ma-border));
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
}

/* Score/history rows are structural, not page-specific decoration. */
.ma-trainer-score-card{
  background:var(--ma-native-surface,linear-gradient(180deg,color-mix(in srgb,var(--ma-trainer-accent) 6%,transparent),rgba(255,255,255,.02)));
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 12%,var(--ma-border));
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
}
.ma-trainer-shell .score-row,
.ma-trainer-shell .session-list-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  padding:4px 0;
  border-bottom:1px solid color-mix(in srgb,var(--ma-trainer-accent) 10%,var(--ma-border));
  font-size:14px;
}
.ma-trainer-shell .session-list-item{gap:12px;}
.ma-trainer-shell .score-row:last-child,
.ma-trainer-shell .session-list-item:last-child{border-bottom:none;}

/* Trainer heatmap detail popup. Its mechanics were previously lost with the
   page-specific CSS during 2.25.0 consolidation. */
.ma-trainer-shell .cell:hover{outline:2px solid color-mix(in srgb,var(--ma-trainer-accent) 28%,transparent);}
.ma-reading-page .popup,
.ma-writing-page .popup{
  position:fixed;
  display:block;
  z-index:90;
  min-width:160px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--ma-trainer-accent) 18%,var(--ma-border));
  border-radius:12px;
  background:var(--ma-surface-strong);
  box-shadow:var(--ma-native-shadow,0 12px 28px rgba(0,0,0,.35));
  color:var(--ma-text);
  font-size:14px;
  line-height:1.45;
}
.ma-reading-page .popup[hidden],
.ma-writing-page .popup[hidden]{display:none;}

/* Modifiers is a fixed application control, not a card/surface in document
   flow. The shared shell owns its fixed geometry. */
.ma-reading-page .bottom-shell,
.ma-writing-page .bottom-shell{
  position:fixed;
  left:var(--ma-rail-width,0px);
  right:0;
  bottom:0;
  width:auto;
  z-index:9999;
  border:0;
  border-top:1px solid color-mix(in srgb,var(--ma-trainer-accent) 16%,var(--ma-border));
  border-radius:0;
  box-shadow:var(--ma-native-shadow,0 -18px 50px rgba(0,0,0,.38));
}
.ma-reading-page .tab-button.active,
.ma-writing-page .tab-button.active{
  background:var(--ma-native-selected,linear-gradient(180deg,color-mix(in srgb,var(--ma-trainer-accent) 18%,var(--ma-card-2)),var(--ma-card-2)));
  color:var(--ma-trainer-active-text);
}
.ma-reading-page .toggle-btn,
.ma-writing-page .toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  user-select:none;
  line-height:1.15;
  background:var(--ma-control);
  border-color:var(--ma-border-strong);
  color:var(--ma-text);
}
.ma-reading-page .toggle-btn:hover,
.ma-writing-page .toggle-btn:hover{border-color:color-mix(in srgb,var(--ma-trainer-accent) 58%,var(--ma-border));box-shadow:0 0 0 1px color-mix(in srgb,var(--ma-trainer-accent) 24%,transparent);}
.ma-reading-page .toggle-btn.active,
.ma-writing-page .toggle-btn.active{
  background:var(--ma-native-selected,linear-gradient(180deg,color-mix(in srgb,var(--ma-trainer-accent) 24%,var(--ma-card-2)),color-mix(in srgb,var(--ma-trainer-accent) 12%,var(--ma-card-3))));
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 58%,var(--ma-border));
  color:var(--ma-trainer-active-text);
}

body.ma-reading-page.test-mode-active .ma-trainer-card,
body.ma-writing-page.test-mode-active .ma-trainer-card{
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 70%,var(--ma-border));
  box-shadow:var(--ma-shadow),0 0 0 1px color-mix(in srgb,var(--ma-trainer-accent) 18%,transparent);
}
body.ma-reading-page.test-mode-active,
body.ma-writing-page.test-mode-active{
  background:var(--ma-native-page,radial-gradient(circle at top,var(--ma-trainer-test-bg) 0%,var(--ma-bg) 58%));
}

/* The website's fixed setup trigger needs scroll clearance. The iOS dock
   reserves its own safe-area space in ios-chrome. */
html:not([data-ma-runtime="ios"]) body:is([data-effective-display-mode="phone"],[data-effective-display-mode="tablet"]):not(.trainer-session-active) .ma-trainer-shell{
  padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
}

/* Responsive trainer workspace. One shared owner controls card, side-panel,
   and page geometry for the effective display mode. */
@media (max-width:1180px) and (min-width:761px){
  .ma-trainer-card{width:min(760px,calc(100vw - 32px));}
}
@media (max-width:760px){
  html:not([data-ma-runtime="ios"]) .ma-pause-overlay{display:none;}
  .session-actions .ma-button{min-width:130px;padding-inline:14px;}
  body.ma-reading-page,
  body.ma-writing-page{display:block;padding:var(--ma-page-inset-top,max(6px,env(safe-area-inset-top,0px))) var(--ma-page-inset-right,6px) var(--ma-page-inset-bottom,max(14px,env(safe-area-inset-bottom,0px))) var(--ma-page-inset-left,6px);min-height:100svh;overflow-x:hidden;}
  .ma-trainer-shell{display:block;min-height:auto;}
  .ma-trainer-card{width:100%;max-width:none;box-sizing:border-box;margin:0 auto 86px;border-radius:22px;padding:18px 10px 22px;min-height:auto;}
  .ma-trainer-score{padding:8px 11px;font-size:.95rem;}
  .ma-trainer-input{width:min(100%,320px);font-size:20px;padding:10px 12px;}
  .ma-trainer-input--number{width:120px;font-size:18px;}
  .ma-trainer-side-panel{position:static;width:100%;max-height:none;margin:8px auto;}
  body.study-nav-hidden .ma-trainer-side-panel{position:static;max-height:none;}
  .ma-reading-page .bottom-shell,
  .ma-writing-page .bottom-shell{width:100%;max-width:100%;overflow-x:hidden;}
}
body[data-effective-display-mode="tablet"].ma-reading-page,
body[data-effective-display-mode="tablet"].ma-writing-page{display:block;padding:var(--ma-page-inset-top,max(8px,env(safe-area-inset-top,0px))) var(--ma-page-inset-right,8px) var(--ma-page-inset-bottom,max(18px,env(safe-area-inset-bottom,0px))) var(--ma-page-inset-left,8px);min-height:100dvh;overflow-x:hidden;}
body[data-effective-display-mode="tablet"] .ma-trainer-shell{display:block;width:100%;min-height:auto;margin-inline:auto;}
body[data-effective-display-mode="tablet"] .ma-trainer-card{width:min(760px,calc(100vw - 32px));max-width:none;box-sizing:border-box;margin:0 auto 94px;padding:22px 28px 58px;}
body[data-effective-display-mode="tablet"] .ma-trainer-side-panel,
html[data-effective-display-mode="tablet"] body .ma-trainer-side-panel{position:static;width:min(760px,calc(100vw - 32px));max-height:none;margin:10px auto;}
body[data-effective-display-mode="tablet"].study-nav-hidden .ma-trainer-side-panel{position:static;max-height:none;}

body[data-effective-display-mode="phone"].ma-reading-page,
body[data-effective-display-mode="phone"].ma-writing-page{display:block;padding:var(--ma-page-inset-top,0px) var(--ma-page-inset-right,6px) var(--ma-page-inset-bottom,max(14px,env(safe-area-inset-bottom,0px))) var(--ma-page-inset-left,6px);min-height:100dvh;overflow-x:hidden;}
body[data-effective-display-mode="phone"] .ma-trainer-shell{display:block;min-height:auto;}
body[data-effective-display-mode="phone"] .ma-trainer-card{width:100%;max-width:none;box-sizing:border-box;margin:0 auto 72px;padding:18px 10px 22px;border-radius:22px;}
body[data-effective-display-mode="phone"]:not(.trainer-session-active) .ma-trainer-prompt-wrap{min-height:64px;margin-bottom:2px;}
body[data-effective-display-mode="phone"]:not(.trainer-session-active) .ma-trainer-prompt-wrap .hiragana,
body[data-effective-display-mode="phone"]:not(.trainer-session-active) .ma-trainer-prompt-wrap .prompt{
  font-size:clamp(2rem,10vw,2.8rem);
  color:var(--ma-muted);
  text-shadow:none;
  opacity:.72;
}
body[data-effective-display-mode="phone"] .ma-trainer-input{width:min(100%,320px);font-size:20px;padding:10px 12px;}
body[data-effective-display-mode="phone"] .ma-trainer-side-panel,
html[data-effective-display-mode="phone"] body .ma-trainer-side-panel{position:static;width:100%;max-height:none;margin:8px auto;}
body[data-effective-display-mode="phone"].study-nav-hidden .ma-trainer-side-panel{position:static;max-height:none;}

@media(min-width:980px){
  body[data-effective-display-mode="tablet"]:not(.trainer-session-active) .ma-trainer-shell{width:min(1080px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);grid-template-rows:auto auto;gap:14px 18px;align-items:start;margin:0 auto 94px;}
  body[data-effective-display-mode="tablet"]:not(.trainer-session-active) .ma-trainer-card{grid-column:1;grid-row:1 / span 2;width:100%;margin:0;}
  body[data-effective-display-mode="tablet"]:not(.trainer-session-active) .ma-trainer-side-panel,
  html[data-effective-display-mode="tablet"] body:not(.trainer-session-active) .ma-trainer-side-panel{width:100%;margin:0;}
  body[data-effective-display-mode="tablet"]:not(.trainer-session-active) .left-panel{grid-column:2;grid-row:1;}
  body[data-effective-display-mode="tablet"]:not(.trainer-session-active) .right-panel{grid-column:2;grid-row:2;}
}

/* === 2.31 focused trainer workspace === */
.ma-session-hud{
  display:grid;
  gap:10px;
  width:100%;
  margin:0 auto 16px;
}
.ma-session-hud .scoreline{margin-bottom:0;}
.ma-session-hud .ma-trainer-score{
  min-height:34px;
  height:auto;
  padding:7px 11px;
  gap:7px;
  color:var(--ma-muted);
  font-size:.82rem;
  font-weight:700;
}
.ma-session-hud .ma-trainer-score strong{
  color:var(--ma-text-strong);
  font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.ma-session-progress{
  width:min(520px,100%);
  margin:0 auto;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--ma-trainer-accent) 18%,var(--ma-border));
  border-radius:var(--ma-radius-control);
  background:var(--ma-surface-inset);
}
.ma-session-progress__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:var(--ma-muted);
  font-size:.76rem;
  font-weight:800;
}
.ma-session-progress__meta strong{color:var(--ma-text-strong);font-variant-numeric:tabular-nums;}
.ma-session-progress .ma-progress__fill{--ma-progress-color:var(--ma-trainer-accent);}

.start-wrap .ma-button,
.session-actions .ma-button{gap:8px;}
.start-wrap .ma-button{min-width:170px;}
.ma-trainer-skip{
  color:var(--ma-muted);
  background:transparent;
  border-color:var(--ma-border);
  box-shadow:none;
}
.ma-trainer-skip:hover:not(:disabled){
  color:var(--ma-text);
  background:var(--ma-control-hover);
  border-color:var(--ma-border-strong);
  box-shadow:none;
}
.ma-trainer-results-link{margin-bottom:10px;gap:7px;}
.ma-kana-selection{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.ma-kana-selection>div{
  padding:14px;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-md);
  background:var(--ma-surface-inset);
}

/* Setup and active practice are distinct visual states. The shared trainer
   visibility owner toggles body.trainer-session-active; presentation consumes
   that state directly instead of re-deriving session state from DOM shape. */
html:not([data-ma-runtime="ios"]) body:is(.ma-reading-page,.ma-writing-page)[data-effective-display-mode="desktop"]{padding-bottom:64px;}
html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"] .ma-trainer-shell{display:grid;grid-template-columns:minmax(0,1fr) 248px;align-items:start;align-content:start;gap:16px 20px;width:min(1100px,100%);margin:16px auto 0;padding:0 24px;}
html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"] .ma-trainer-card{grid-column:1;grid-row:1/3;justify-self:center;align-self:start;width:min(660px,100%);margin:0;}
html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"] .left-panel{max-height:clamp(220px,calc(100dvh - 420px),400px);}
html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"] .right-panel{max-height:220px;}
html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"].study-nav-hidden .ma-trainer-shell{grid-template-columns:1fr;}

html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"]:not(.trainer-session-active) .ma-trainer-prompt-wrap{min-height:110px;}
html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"]:not(.trainer-session-active) .ma-trainer-prompt-wrap :is(.hiragana,.prompt){font-size:96px;}
html:not([data-ma-runtime="ios"]) body[data-effective-display-mode="desktop"]:not(.trainer-session-active) :is(.hint,.combo-tier-notice):empty{display:none;}
.ma-trainer-header{
  display:grid;
  justify-items:center;
  gap:0;
}
.ma-trainer-stage{
  width:100%;
  display:grid;
  justify-items:center;
  gap:0;
}
.ma-trainer-session-controls{
  width:100%;
  display:grid;
  justify-items:center;
}

body.trainer-session-active .ma-trainer-card{
  width:min(660px,calc(100vw - 32px));
  padding:18px 34px 24px;
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 36%,var(--ma-border));
  box-shadow:none;
}
body.trainer-session-active .ma-trainer-header{
  min-height:28px;
  margin-bottom:2px;
}
body.trainer-session-active .ma-trainer-header h1{
  margin:0;
  color:var(--ma-text-soft);
  font-size:.88rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-shadow:none;
}
body.trainer-session-active .ma-trainer-header .subline,
body.trainer-session-active .writing-beta-badge{
  display:none;
}
body.trainer-session-active .daily-badge:not([hidden]){
  margin:8px auto 0;
}
body.trainer-session-active .ma-trainer-stage{
  gap:10px;
  padding-top:4px;
}
body.trainer-session-active .ma-session-hud{
  width:100%;
  padding:0 0 12px;
  border-bottom:1px solid color-mix(in srgb,var(--ma-trainer-accent) 14%,var(--ma-border));
}
body.trainer-session-active .ma-session-hud .scoreline{
  margin-bottom:0;
}
body.trainer-session-active .ma-session-progress{
  margin-top:10px;
}
body.trainer-session-active .ma-trainer-prompt-wrap{
  min-height:220px;
  margin:0;
  padding:14px 0 6px;
}
body.trainer-session-active.ma-reading-page .hiragana{
  font-size:clamp(8rem,13vw,10.5rem);
}
body.trainer-session-active.ma-writing-page .prompt{
  font-size:clamp(6.5rem,10vw,8.25rem);
}
body.trainer-session-active.ma-writing-page .prompt-small{
  font-size:clamp(5rem,8vw,6.5rem);
}
body.trainer-session-active .ma-trainer-answer-wrap{
  width:100%;
  margin-top:0;
}
body.trainer-session-active .ma-trainer-input{
  width:min(340px,100%);
  min-height:56px;
  font-size:26px;
  border-radius:var(--ma-radius-control);
}
body.trainer-session-active.ma-writing-page .choice-grid{
  width:min(480px,100%);
  gap:12px;
  margin:0 auto;
}
body.trainer-session-active.ma-writing-page .choice-btn{
  min-height:78px;
  padding:16px 8px;
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 18%,var(--ma-border));
}
body.trainer-session-active .ma-trainer-session-controls{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--ma-trainer-accent) 10%,var(--ma-border));
}
body.trainer-session-active .session-actions{
  width:100%;
  margin-top:0;
  justify-content:center;
}
body.trainer-session-active .session-actions .ma-button{
  min-height:38px;
  padding:7px 12px;
  font-size:.82rem;
}
body.trainer-session-active .session-actions .ma-trainer-skip{
  opacity:.68;
}
body.trainer-session-active .session-actions .ma-trainer-skip:hover,
body.trainer-session-active .session-actions .ma-trainer-skip:focus-visible{
  opacity:1;
}

/* Result state keeps the answer and retry action in the same visible practice frame. */
body.trainer-session-result .ma-trainer-prompt-wrap{
  min-height:150px;
  padding:6px 0 2px;
}
body.trainer-session-result.ma-reading-page .hiragana{font-size:clamp(5.5rem,10vw,7.5rem);}
body.trainer-session-result.ma-writing-page .prompt{font-size:clamp(4.8rem,8vw,6.2rem);}
body.trainer-session-result .ma-trainer-session-controls{
  margin-top:8px;
  padding-top:10px;
}
body.trainer-session-result .game-over{
  margin-top:0;
  padding-top:2px;
}
body.trainer-session-result .game-over-title{margin-bottom:6px;}
body.trainer-session-result .game-over-answer{margin-bottom:8px;}
body.trainer-session-retry .session-actions{display:flex!important;}
body.trainer-session-retry .session-actions #skipKanaBtn,
body.trainer-session-retry .session-actions #pauseSessionBtn{display:none!important;}
body.trainer-session-retry .session-actions #endSessionBtn{display:inline-flex!important;}

body.trainer-session-active .ma-trainer-side-panel{
  opacity:.24;
  transform:scale(.985);
  transition:opacity var(--ma-motion-fast) ease,transform var(--ma-motion-fast) ease;
}
body.trainer-session-active .ma-trainer-side-panel:hover,
body.trainer-session-active .ma-trainer-side-panel:focus-within{
  opacity:1;
  transform:none;
}
body.trainer-session-active .bottom-shell.ma-modifiers-only{
  opacity:0;
  transform:translateY(102%);
  pointer-events:none;
  transition:opacity var(--ma-motion-fast) ease,transform var(--ma-motion-medium) ease;
}
body:not(.trainer-session-active) .bottom-shell.ma-modifiers-only{
  opacity:1;
  transform:translateY(0);
  transition:opacity var(--ma-motion-fast) ease,transform var(--ma-motion-medium) ease;
}
body.study-nav-hidden .ma-trainer-side-panel{display:none;}
body.study-nav-hidden .ma-trainer-card{width:min(700px,calc(100vw - 32px));}
body.study-nav-hidden.trainer-session-active .ma-trainer-card{width:min(760px,calc(100vw - 32px));}

@media(max-width:900px){
  .ma-kana-selection{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .ma-session-hud .scoreline{gap:7px;}
  .ma-session-hud .ma-trainer-score{width:auto!important;min-width:0!important;flex:1 1 calc(50% - 7px);font-size:.78rem;}
  .ma-session-hud .ma-trainer-score strong{font-size:.86rem;}
  body.trainer-session-active .ma-trainer-card{
    width:100%;
    margin-bottom:18px;
    padding:12px 12px 16px;
    min-height:0;
  }
  body.trainer-session-active .ma-trainer-header{min-height:22px;}
  body.trainer-session-active .ma-trainer-header h1{font-size:.72rem;letter-spacing:.11em;}
  body.trainer-session-active .ma-trainer-prompt-wrap{
    min-height:clamp(150px,27svh,220px);
    padding:8px 0 2px;
  }
  body.trainer-session-active.ma-reading-page .hiragana{font-size:clamp(6rem,30vw,8.25rem);}
  body.trainer-session-active.ma-writing-page .prompt{font-size:clamp(4.8rem,22vw,6.4rem);}
  body.trainer-session-active.ma-writing-page .prompt-small{font-size:clamp(3.8rem,18vw,5.1rem);}
  body.trainer-session-active .ma-session-hud{padding-bottom:8px;}
  body.trainer-session-active .ma-session-hud .scoreline{gap:6px;}
  body.trainer-session-active .ma-session-hud .ma-trainer-score{min-height:32px;padding:6px 9px;font-size:.74rem;}
  body.trainer-session-active .ma-session-hud .ma-trainer-score strong{font-size:.82rem;}
  body.trainer-session-active .ma-trainer-input{width:min(100%,340px);min-height:50px;font-size:21px;}
  body.trainer-session-result .ma-trainer-card{min-height:0;}
  body.trainer-session-result .ma-trainer-prompt-wrap{min-height:clamp(110px,22svh,155px);padding:4px 0;}
  body.trainer-session-result.ma-reading-page .hiragana{font-size:clamp(4.9rem,25vw,6.6rem);}
  body.trainer-session-result.ma-writing-page .prompt{font-size:clamp(4.1rem,20vw,5.6rem);}
  body.trainer-session-result .ma-trainer-input{min-height:48px;}
  body.trainer-session-result .game-over-title{font-size:1.15rem;}
  body.trainer-session-result .game-over-answer{font-size:.92rem;}
  body.trainer-session-active.ma-writing-page .choice-grid{gap:9px;}
  body.trainer-session-active.ma-writing-page .choice-btn{min-height:64px;padding:12px 6px;}
  body.trainer-session-active .ma-trainer-side-panel{display:none;}
  body.trainer-session-active .session-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body.trainer-session-retry .session-actions{
    display:grid!important;
    grid-template-columns:1fr;
  }
  body.trainer-session-retry .session-actions #endSessionBtn{
    width:100%;
  }
  body.trainer-session-active .session-actions .ma-button{width:100%;min-width:0;}
  body.trainer-session-active .session-actions .ma-trainer-skip{
    grid-column:1 / -1;
    order:3;
  }
  body.ma-phone-keyboard-open.trainer-session-active .ma-trainer-prompt-wrap{
    min-height:clamp(128px,23svh,180px);
  }
  body.ma-phone-keyboard-open.trainer-session-active .ma-trainer-session-controls{
    margin-top:10px;
    padding-top:10px;
  }
}

body[data-effective-display-mode="tablet"].trainer-session-active .ma-trainer-card{
  width:min(820px,calc(100vw - 32px));
  margin-bottom:22px;
  padding:18px 28px 24px;
}
body[data-effective-display-mode="tablet"].trainer-session-active .ma-trainer-side-panel{
  display:none;
}
body[data-effective-display-mode="tablet"].trainer-session-result .ma-trainer-card{
  min-height:0;
}
body[data-effective-display-mode="tablet"].trainer-session-result .ma-trainer-prompt-wrap{
  min-height:135px;
}

@media(prefers-reduced-motion:reduce){
  body.trainer-session-active .ma-trainer-side-panel,
  body.trainer-session-active .bottom-shell.ma-modifiers-only,
  body:not(.trainer-session-active) .bottom-shell.ma-modifiers-only{transition:none;}
}


/* Trainer disclosure controls are native buttons for keyboard operation without changing their visual role. */
.ma-trainer-side-panel button.panel-header,
.bottom-shell button.tab-button{
  appearance:none;
  width:100%;
  margin:0;
  background:transparent;
  color:inherit;
  -webkit-text-fill-color:currentColor;
  box-shadow:none;
  font:inherit;
}
.ma-trainer-side-panel button.panel-header{border:0;text-align:inherit;}
.bottom-shell button.tab-button{border-top:0;border-bottom:0;border-left:0;}
button.cell{appearance:none;min-height:0;padding:0;color:inherit;-webkit-text-fill-color:currentColor;font:inherit;box-shadow:none;}