/* 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: 0 0 18px rgba(255,255,255,0.08);
    }

.flash-correct {
        color: var(--ma-success);
        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: 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: 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: #ff8a8a;
        margin-bottom: 10px;
        font-size: 22px;
        font-weight: 700;
    }

.game-over-answer {
        color: #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 #3a3a3a;
        background: #252525;
        color: var(--text);
        border-radius: 10px;
        padding: 10px 14px;
        cursor: pointer;
        font-size: 15px;
        transition: all 0.15s ease;
    }

.btn-danger {
        background: #472323;
        border-color: #6c3030;
    }

.btn-danger:hover { background: #5b2c2c; }

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

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

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

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

.left-panel { left: 12px; }

.right-panel { right: 12px; }

.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 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; }

.drawer-content.open { display: block; }

.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: #1f2f47;
        border: 1px solid #36527c;
        border-radius: 10px;
        padding: 11px 12px;
        text-align: center;
        color: var(--text);
        font-size: 15px;
        font-weight: 600;
    }

.nav-btn:hover {
        background: #294061;
        border-color: #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 #7a6230;
        background: #3a3016;
        color: #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-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-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; }
  .bottom-shell .drawer-content { max-height: 46vh; }
}

@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; }
  .drawer-content { height: auto; min-height: 0; max-height: min(62vh, 460px); padding: 12px; }
  .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: #05060b;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .app-shell { align-items: flex-start; }
  .main { margin-top: 0; }
}

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

.bottom-shell.ma-modifiers-only{background:linear-gradient(180deg,rgba(11,14,20,.96),rgba(5,6,10,.98));border-top:1px solid rgba(255,255,255,.08);box-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:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}

.bottom-shell.ma-modifiers-only .drawer-content{background:radial-gradient(circle at top left,rgba(255,255,255,.055),transparent 36%),linear-gradient(180deg,rgba(16,20,28,.98),rgba(9,10,14,.98));border-top:1px solid rgba(255,255,255,.07);min-height:auto;max-height:min(58vh,560px);padding:18px;}

.bottom-shell.ma-modifiers-only .options-stack{gap:16px;width:min(1080px,100%);}

.bottom-shell.ma-modifiers-only .options-stack>div{padding:14px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075)}

.bottom-shell.ma-modifiers-only .section-title{margin:0 0 12px;text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:900}

.bottom-shell.ma-modifiers-only .button-grid,.bottom-shell.ma-modifiers-only .rows-grid{gap:8px}

.bottom-shell.ma-modifiers-only .toggle-btn{min-height:44px;border-radius:14px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.09);font-weight:850}

.bottom-shell.ma-modifiers-only .toggle-btn.active{transform:translateY(-1px)}

@media(max-width:760px){
  .bottom-shell.ma-modifiers-only .drawer-content{max-height:62vh;padding:12px}
  .bottom-shell.ma-modifiers-only .options-stack>div{padding:12px;border-radius:16px}
  .bottom-shell.ma-modifiers-only .button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bottom-shell.ma-modifiers-only .rows-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bottom-shell.ma-modifiers-only .toggle-btn{font-size:14px;padding:10px 8px}
}

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

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

.bottom-shell.ma-modifiers-only .drawer-content{display:none;}

.bottom-shell.ma-modifiers-only .drawer-content.open{display:block;}

.bottom-shell.ma-modifiers-only .toggle-btn,
.bottom-shell.ma-modifiers-only .btn {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: var(--text,#f3f3f3);
  box-shadow: none;
}

.bottom-shell.ma-modifiers-only .toggle-btn:hover,
.bottom-shell.ma-modifiers-only .btn:hover {
  transform: translateY(-1px);
  background: rgba(var(--ma-active-rgb, 103,215,139), .12);
  border-color: rgba(var(--ma-active-rgb, 103,215,139), .46);
  box-shadow: 0 0 0 1px rgba(var(--ma-active-rgb, 103,215,139), .18), 0 10px 22px rgba(0,0,0,.18);
}

.bottom-shell.ma-modifiers-only .toggle-btn.active,
.bottom-shell.ma-modifiers-only .toggle-btn[aria-pressed="true"],
.bottom-shell.ma-modifiers-only .btn.active,
.bottom-shell.ma-modifiers-only .btn[aria-pressed="true"] {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(var(--ma-active-rgb, 103,215,139), .30), rgba(var(--ma-active-rgb, 103,215,139), .14));
  border-color: rgba(var(--ma-active-rgb, 103,215,139), .78);
  color: var(--ma-active-text, #d9ffe7);
  box-shadow: inset 0 0 0 1px rgba(var(--ma-active-rgb, 103,215,139), .28), 0 0 0 1px rgba(var(--ma-active-rgb, 103,215,139), .16), 0 12px 26px rgba(var(--ma-active-rgb, 103,215,139), .12);
}

.bottom-shell.ma-modifiers-only .toggle-btn.disabled,
.bottom-shell.ma-modifiers-only .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: 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"] .bottom-shell .drawer-content{max-height:min(54vh,520px);}
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;}
body[data-effective-display-mode="phone"] .drawer-content{max-height:min(62vh,460px);padding:12px;}

/* Mode-specific static states previously stored as inline styles. */
.daily-badge.test-badge-reading {
  background: #123127;
  border-color: #2f8f68;
  color: #bff3de;
}

.daily-badge.test-badge-writing {
  background: #12233d;
  border-color: #3f73c8;
  color: #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 rgba(255,255,255,0.14);
  background: #1f1f1f;
  color: #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: #bfbfbf;
}

.srs-debug-card,
.storage-debug-card {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid 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 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-surface-strong));
  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){
  
}

@media (max-width: 760px), (max-width: 900px) and (orientation: portrait){
  

  

  #studyNavHideBtn{
    display:none;
  }
}

/* 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:#555;
  --ma-trainer-heatmap-wrong:#b23b3b;
  --ma-trainer-heatmap-correct:#2e7d32;
  --ma-trainer-heatmap-even:#9a8c25;
  --ma-trainer-side-top:96px;
  margin:0;
  min-height:100vh;
  color:var(--ma-text);
  background:
    radial-gradient(circle at top,color-mix(in srgb,var(--ma-trainer-accent) 22%,transparent) 0%,transparent 34%),
    radial-gradient(circle at top,#242424 0%,var(--ma-bg) 55%);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  padding:0 24px 24px;
}

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

.ma-trainer-score{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ma-trainer-accent) 9%,transparent),rgba(255,255,255,.02));
  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"],
.ma-trainer-button.btn-secondary:not(.ma-trainer-skip){
  background: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);
}

/* Side panels deliberately clear the sticky shared navigation on desktop. */
.ma-trainer-side-panel{
  position:fixed;
  top:var(--ma-trainer-side-top);
  width:248px;
  max-height:calc(100vh - var(--ma-trainer-side-top) - 86px);
  background:var(--ma-surface-strong);
  border:1px solid color-mix(in srgb,var(--ma-trainer-accent) 14%,var(--ma-border));
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  z-index:5;
  display:flex;
  flex-direction:column;
}
body.study-nav-hidden .ma-trainer-side-panel{top:12px;max-height:calc(100vh - 98px);}
.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: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: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:0;
  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:0 -18px 50px rgba(0,0,0,.38);
}
.ma-reading-page .drawer-content,
.ma-writing-page .drawer-content{
  width:100%;
  box-sizing:border-box;
  overflow-y:auto;
  background:var(--ma-surface-strong);
  border-top-color:color-mix(in srgb,var(--ma-trainer-accent) 10%,var(--ma-border));
}
.ma-reading-page .tab-button.active,
.ma-writing-page .tab-button.active{
  background: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: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:radial-gradient(circle at top,var(--ma-trainer-test-bg) 0%,var(--ma-bg) 58%);
}
.bottom-shell.ma-modifiers-only .toggle-btn.active,
.bottom-shell.ma-modifiers-only .btn.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ma-trainer-accent) 24%,transparent),color-mix(in srgb,var(--ma-trainer-accent) 12%,transparent));
  border-color:color-mix(in srgb,var(--ma-trainer-accent) 72%,var(--ma-border));
  color:var(--ma-trainer-active-text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ma-trainer-accent) 22%,transparent),0 0 0 1px color-mix(in srgb,var(--ma-trainer-accent) 14%,transparent),0 10px 24px color-mix(in srgb,var(--ma-trainer-accent) 10%,transparent);
}

/* 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){
  body.ma-reading-page,
  body.ma-writing-page{--ma-trainer-side-top:104px;}
  .ma-trainer-card{width:min(760px,calc(100vw - 32px));}
}
@media (max-width:760px){
  .ma-pause-overlay{display:none!important;}
  .session-actions .ma-button{min-width:130px;padding-inline:14px;}
  body.ma-reading-page,
  body.ma-writing-page{display:block;padding:max(6px,env(safe-area-inset-top,0px)) 6px max(14px,env(safe-area-inset-bottom,0px));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:max(8px,env(safe-area-inset-top,0px)) 8px max(18px,env(safe-area-inset-bottom,0px));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:0 6px max(14px,env(safe-area-inset-bottom,0px));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-practice-setup-head{
  width:min(1080px,100%);
  margin:0 auto 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.ma-practice-setup-head h2{
  margin:4px 0 0;
  color:var(--ma-text-strong);
  font-family:var(--ma-font-display);
  font-size:1.35rem;
  letter-spacing:-.03em;
}
.ma-practice-setup-head p{margin:5px 0 0;color:var(--ma-muted);font-size:.84rem;line-height:1.45;}
.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. */
.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:var(--ma-shadow),0 0 0 1px color-mix(in srgb,var(--ma-trainer-accent) 10%,transparent);
}
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;
}

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;}
  .ma-practice-setup-head{align-items:flex-start;}
  body.trainer-session-active .ma-trainer-card{
    width:100%;
    margin-bottom:18px;
    padding:14px 12px 18px;
    min-height:calc(100svh - 138px);
  }
  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(185px,34svh,285px);
    padding:10px 0 2px;
  }
  body.trainer-session-active.ma-reading-page .hiragana{font-size:clamp(6.8rem,33vw,9rem);}
  body.trainer-session-active.ma-writing-page .prompt{font-size:clamp(5.2rem,24vw,7rem);}
  body.trainer-session-active.ma-writing-page .prompt-small{font-size:clamp(4rem,19vw,5.5rem);}
  body.trainer-session-active .ma-trainer-input{width:min(100%,340px);min-height:52px;font-size:22px;}
  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-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[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;
}

@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;}