:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    background: #f7f8fc;
    color: #161a2b;
    --brand: #009688;
    --brand-dark: #087d73;
    --accent: #b8d92f;
    --surface: #ffffff;
    --line: #e5e8f0;
    --muted: #697084;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: #f7f8fc;
    color: #161a2b;
    display: flex;
    flex-direction: column;
}
a { color: inherit; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    width: min(1120px, calc(100% - 32px));
    min-height: 74px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
}
.brand img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: contain;
}
.user-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.user-status__text {
    display: grid;
    gap: 2px;
    text-align: right;
}
.user-status__text strong { font-size: 14px; }
.user-status__org {
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-dark);
}
.user-status__sub {
    font-size: 11px;
    color: var(--muted);
}
.register-button {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    background: #edf1f4;
    color: #697084;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: not-allowed;
}
.register-button small {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    font-weight: 600;
}

.page-shell {
    flex: 1;
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 62px 0 76px;
}
.page-shell--narrow { width: min(820px, calc(100% - 40px)); }

.hero {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}
.brand-icon {
    width: 112px;
    height: 112px;
    display: block;
    margin: 0 auto 16px;
    border-radius: 24px;
    object-fit: contain;
}
.eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .55;
}
.hero h1 {
    margin: 0;
    font-size: clamp(48px, 10vw, 88px);
    letter-spacing: -.045em;
}
.lead {
    margin: 12px 0 34px;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 700;
}
.learning-counter {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 8px;
    padding: 24px 30px;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 14px 40px rgba(18, 26, 62, .08);
}
.counter-label {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--muted);
}
.learning-counter strong {
    font-size: clamp(34px, 7vw, 58px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.counter-unit { padding-bottom: 5px; font-weight: 700; }

.content-card {
    margin-top: 34px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(18, 26, 62, .04);
}
.intro-card h2 { margin-top: 0; font-size: 20px; }
.intro-card p { margin-bottom: 0; color: var(--muted); }

.prose { text-align: left; }
.prose h1 { margin: 0 0 12px; font-size: clamp(28px, 5vw, 40px); }
.prose h2 { margin: 30px 0 8px; font-size: 18px; }
.prose p, .prose dd { line-height: 1.85; color: #454b5f; }
.draft-badge {
    display: inline-block;
    margin: 0 0 18px !important;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff4d6;
    color: #7a5b00 !important;
    font-size: 12px;
    font-weight: 800;
}
.info-list {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0;
    margin: 24px 0;
    border-top: 1px solid var(--line);
}
.info-list dt, .info-list dd {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.info-list dt { font-weight: 800; }

.site-footer {
    border-top: 1px solid var(--line);
    background: #fff;
    padding: 26px 20px 30px;
    text-align: center;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 22px;
}
.footer-nav a {
    color: #555d71;
    font-size: 13px;
    text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }
.footer-note {
    margin: 18px 0 0;
    font-size: 12px;
    color: #9298a8;
}

@media (max-width: 720px) {
    .site-header__inner {
        width: min(100% - 24px, 1120px);
        min-height: 68px;
        gap: 10px;
    }
    .brand span { display: none; }
    .brand img { width: 42px; height: 42px; }
    .user-status { gap: 8px; }
    .user-status__sub { display: none; }
    .register-button { padding: 8px 10px; font-size: 11px; }
    .page-shell { width: min(100% - 28px, 1120px); padding-top: 38px; }
    .content-card { padding: 22px 20px; border-radius: 18px; }
    .info-list { grid-template-columns: 1fr; }
    .info-list dt { padding-bottom: 3px; border-bottom: 0; }
    .info-list dd { padding-top: 3px; }
}


/* =========================================================
   Learning app cards
========================================================= */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.app-card {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fbfdfd;
    text-align: left;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.app-card:hover {
    transform: translateY(-2px);
    border-color: #a7d5d0;
    box-shadow: 0 10px 24px rgba(0, 150, 136, .10);
}
.app-card strong { font-size: 21px; }
.app-card > span:not(.app-card__badge) {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}
.app-card__badge {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e3f5f2;
    color: var(--brand-dark);
    font-size: 10px;
    font-weight: 800;
}

/* =========================================================
   TEXtTEXt
========================================================= */
.texttext-shell { max-width: 920px; }
.app-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.app-heading h1 {
    margin: 0;
    font-size: clamp(38px, 7vw, 58px);
    letter-spacing: -.04em;
}
.app-description {
    margin: 7px 0 0;
    color: var(--muted);
}
.secondary-link, .text-link {
    color: var(--brand-dark);
    font-weight: 800;
    text-decoration: none;
}
.secondary-link:hover, .text-link:hover { text-decoration: underline; }

.guest-notice {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    padding: 13px 16px;
    border: 1px solid #dbe7e5;
    border-radius: 14px;
    background: #f3fbfa;
    color: #42525a;
    font-size: 13px;
}
.guest-notice strong {
    flex: 0 0 auto;
    color: var(--brand-dark);
}

.today-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.today-stats > div {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
.today-stats span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.today-stats strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.filter-panel {
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.filter-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 800;
}
.filter-active-label {
    padding: 3px 8px;
    border-radius: 999px;
    background: #e3f5f2;
    color: var(--brand-dark);
    font-size: 10px;
}
.filter-form {
    padding: 0 18px 18px;
}
.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.filter-grid label {
    display: grid;
    gap: 5px;
    color: #4f5668;
    font-size: 12px;
    font-weight: 800;
}
.filter-grid select,
.filter-grid input {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #d8dde7;
    border-radius: 10px;
    background: #fff;
    color: #1c2232;
    font: inherit;
}
.filter-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}
.primary-button {
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.primary-button:hover { background: var(--brand-dark); }
.primary-button--link {
    display: inline-block;
    text-decoration: none;
}

.message {
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 12px;
}
.message--error {
    background: #fff0f0;
    color: #9c2626;
}

.learning-card {
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(18, 26, 62, .06);
    scroll-margin-top: 95px;
}
.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}
.question-meta span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f0f2f7;
    color: #60677a;
    font-size: 11px;
    font-weight: 800;
}
.learning-card h2 {
    margin: 0 0 22px;
    font-size: clamp(21px, 4vw, 29px);
    line-height: 1.5;
}
.learning-block {
    margin-top: 20px;
}
.block-label {
    margin-bottom: 7px;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 900;
}
.passage,
.question-text,
.explanation {
    font-size: 17px;
    line-height: 1.95;
}
.question-text { font-weight: 800; }

ruby rt { font-size: .52em; }

.choice-list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}
.choice-button {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #d9dee7;
    border-radius: 14px;
    background: #fff;
    color: #1d2433;
    font: inherit;
    font-size: 16px;
    line-height: 1.65;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.choice-button:hover {
    border-color: var(--brand);
    background: #f3fbfa;
}
.choice-button:active { transform: scale(.995); }

.result-banner {
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
}
.result-banner.is-correct {
    background: #e8f7ef;
    color: #147247;
}
.result-banner.is-incorrect {
    background: #fff0f0;
    color: #a83232;
}
.answer-panel {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    padding: 15px 17px;
    border-radius: 14px;
    background: #f5f7fa;
}
.answer-panel span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.answer-panel strong {
    font-size: 16px;
    line-height: 1.7;
}
.answer-panel--correct { background: #edf8f5; }
.empty-state {
    padding: 22px 4px;
    text-align: center;
}
.empty-state p {
    color: var(--muted);
    line-height: 1.8;
}

@media (max-width: 720px) {
    .app-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .guest-notice {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .today-stats { gap: 6px; }
    .today-stats > div { padding: 10px 6px; }
    .today-stats strong { font-size: 16px; }
    .filter-grid { grid-template-columns: 1fr; }
    .filter-actions {
        align-items: flex-start;
        flex-direction: column;
    }
    .passage, .question-text, .explanation { font-size: 16px; }
}


/* =========================================================
   CALC
========================================================= */
.calc-shell { max-width: 920px; }
.calc-select-card { text-align: left; }
.calc-operator-list,
.calc-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.calc-option-button {
    border: 1px solid #d7dde8;
    border-radius: 12px;
    padding: 11px 15px;
    background: #fff;
    color: #202638;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.calc-option-button:hover { border-color: var(--brand); background: #f3fbfa; }
.calc-option-button.active {
    border-color: var(--brand);
    background: #e4f7f4;
    color: var(--brand-dark);
}
.calc-operator-condition {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fafbfc;
}
.calc-operator-condition h3 { margin: 0 0 14px; font-size: 18px; }
.calc-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.calc-condition-group,
.calc-condition-row {
    display: grid;
    gap: 8px;
    margin-top: 11px;
}
.calc-condition-title {
    color: #596174;
    font-size: 12px;
    font-weight: 900;
}
.calc-note {
    margin-top: 11px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}
.calc-summary {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #f1f4f8;
    color: #535b6e;
    font-size: 13px;
    line-height: 1.7;
}
.calc-start-wrap { margin-top: 18px; text-align: center; }
.calc-start-button { min-width: 180px; font-size: 17px; }

.calc-medal-panel {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #dbe5e8;
    border-radius: 15px;
    background: #fff;
}
.calc-medal-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
}
.calc-gauge-track {
    width: 100%;
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf2;
}
.calc-gauge-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14a89a, #acd52f);
    transition: width .25s ease;
}
.calc-play-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.calc-play-card { text-align: center; }
.calc-play-card h1 { margin-top: 0; }
.calc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.calc-stats > div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-radius: 12px;
    background: #f4f6f9;
}
.calc-stats span { color: var(--muted); font-size: 11px; font-weight: 800; }
.calc-stats strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.calc-problem-box {
    padding: 22px 14px;
    border-radius: 18px;
    background: #f8fafb;
}
.calc-problem {
    min-height: 58px;
    font-size: clamp(34px, 8vw, 56px);
    font-weight: 900;
    letter-spacing: .02em;
}
.calc-answer-row {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}
.calc-answer {
    min-width: 92px;
    min-height: 52px;
    padding: 5px 12px;
    border-bottom: 3px solid #b8c1cf;
    font-size: 34px;
    font-weight: 900;
}
.calc-remainder-area { align-items: center; gap: 8px; }
.calc-remainder-label { font-size: 13px; font-weight: 800; }
.calc-message { min-height: 25px; margin-top: 9px; font-weight: 900; }
.calc-message.ok { color: #168050; }
.calc-message.ng { color: #b03838; }
.calc-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    width: min(430px, 100%);
    margin: 18px auto 0;
}
.calc-key {
    min-height: 58px;
    border: 1px solid #d8dee8;
    border-radius: 14px;
    background: #fff;
    color: #202638;
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(20, 28, 50, .04);
}
.calc-key:active { transform: scale(.98); }
.calc-key--action { font-size: 15px; }
.calc-key--pass { color: #9b5f19; background: #fff8ed; }
.calc-key--finish {
    grid-column: 1 / -1;
    color: #fff;
    background: #475267;
    font-size: 16px;
}

.medal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    border: 0;
    background: rgba(10,16,31,.75);
    cursor: pointer;
}
.medal-overlay.show { display: grid; }
.medal-celebration { position: relative; display: grid; place-items: center; gap: 15px; }
.medal-coin {
    width:180px;
    height:180px;
    object-fit:contain;
    filter:drop-shadow(0 12px 22px rgba(255,190,0,.35));
    animation:manabis-medal-pop 1.05s cubic-bezier(.2,.85,.25,1.15) both;
}
@keyframes manabis-medal-pop{
    0%{transform:scale(.35) rotate(-14deg);opacity:0;filter:drop-shadow(0 0 0 rgba(255,220,60,0)) brightness(.8)}
    55%{transform:scale(1.14) rotate(7deg);opacity:1;filter:drop-shadow(0 0 34px rgba(255,220,60,.9)) brightness(1.18)}
    100%{transform:scale(1) rotate(0);filter:drop-shadow(0 12px 22px rgba(255,190,0,.35)) brightness(1)}
}
.medal-message { color: #fff; font-size: 28px; font-weight: 900; }
.medal-close-hint { color: #fff; font-size: 12px; }
.medal-reason{
    color:#fff;
    font-size:clamp(25px,5vw,40px);
    line-height:1.1;
    font-weight:950;
    letter-spacing:.05em;
    text-align:center;
    text-shadow:0 3px 14px rgba(0,0,0,.32);
}
.medal-confirm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    min-height:48px;
    padding:10px 22px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:14px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:15px;
    font-weight:900;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.home-daily-medal-overlay{cursor:default}
.home-daily-medal-overlay .medal-confirm{cursor:pointer}
.medal-spark { position: absolute; color: #ffd84d; font-size: 32px; }
.medal-spark.s1{left:-44px;top:14px}.medal-spark.s2{right:-44px;top:30px}
.medal-spark.s3{left:-32px;top:120px}.medal-spark.s4{right:-32px;top:126px}

@media (max-width: 720px) {
    .calc-columns { grid-template-columns: 1fr; }
    .calc-play-nav { align-items: flex-start; flex-direction: column; gap: 6px; }
    .calc-stats > div { padding: 8px 4px; }
    .calc-problem-box { padding-inline: 8px; }
}


.gauge-guest-note {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}
.texttext-medal-panel {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #dbe5e8;
    border-radius: 15px;
    background: #fff;
}

/* =========================================================
   Header medal count
========================================================= */
.user-status__name-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.header-medal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff7d8;
    color: #8a6200;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.header-medal-badge b { font-variant-numeric: tabular-nums; }
.medal-guest-message {
    margin-top: -7px;
    color: #fff8cf;
    font-size: 12px;
    font-weight: 800;
}

.context-return-link {
    display:inline-flex;align-items:center;min-height:38px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--brand-dark);font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.context-return-link:hover{background:#f3fbfa;border-color:#a7d5d0;}
@media (max-width:720px){.context-return-link{display:none;}}


/* =========================================================
   Nickname / public profile
========================================================= */
.nickname-settings-link {
    width: fit-content;
    margin-left: auto;
    color: var(--muted);
    font-size: 10px;
    text-decoration: none;
}
.nickname-settings-link:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}
.nickname-card h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 5vw, 42px);
}
.nickname-lead {
    margin: 0 0 20px;
    color: #454b5f;
    line-height: 1.85;
}
.privacy-note {
    display: grid;
    gap: 6px;
    margin-bottom: 22px;
    padding: 16px 17px;
    border: 1px solid #dbe8e6;
    border-radius: 14px;
    background: #f2faf9;
}
.privacy-note strong {
    color: #285b56;
    font-size: 13px;
    line-height: 1.65;
}
.privacy-note span {
    color: #697084;
    font-size: 12px;
    line-height: 1.65;
}
.nickname-form {
    display: grid;
    gap: 18px;
}
.nickname-form label {
    display: grid;
    gap: 7px;
}
.nickname-form label > span {
    font-size: 13px;
    font-weight: 900;
}
.nickname-form input {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #cfd6e1;
    border-radius: 12px;
    background: #fff;
    color: #1b2130;
    font: inherit;
    font-size: 18px;
}
.nickname-form input:focus {
    outline: 3px solid rgba(0,150,136,.12);
    border-color: var(--brand);
}
.nickname-form small {
    color: var(--muted);
    font-size: 11px;
}
.nickname-back {
    display: inline-block;
    margin-top: 22px;
}

/* =========================================================
   English word input
========================================================= */
.english-input-shell{max-width:920px}.english-gauge-panel{margin-bottom:16px;padding:14px 16px;border:1px solid #dbe5e8;border-radius:15px;background:#fff}.english-gauge-rule{margin-top:8px;color:var(--muted);font-size:11px;line-height:1.6}.english-level-form{display:flex;justify-content:flex-end;margin-bottom:14px}.english-level-form label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;font-weight:800}.english-level-form select{min-height:40px;padding:7px 10px;border:1px solid #d5dbe5;border-radius:10px;background:#fff;font:inherit}.english-word-card{text-align:center}.english-meaning-label{color:var(--brand-dark);font-size:12px;font-weight:900}.english-meaning{margin-top:5px;font-size:clamp(25px,5vw,40px);font-weight:900;line-height:1.45}.english-hint-status{margin-top:17px;color:var(--muted);font-size:12px;font-weight:800}.english-answer-reference{min-height:31px;margin-top:6px;color:#4c566b;font-size:18px}.english-answer-reference strong{color:var(--brand-dark);font-size:24px;letter-spacing:.04em}.english-input-display{min-height:45px;margin-top:4px;color:#172033;font-size:clamp(28px,6vw,42px);font-weight:900;letter-spacing:.06em}.english-letter-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:25px;margin-top:3px}.english-slot{width:18px;height:3px;border-radius:999px;background:#ccd4df}.english-slot.is-filled{height:24px;background:transparent;color:var(--brand-dark);font-size:17px;font-weight:900}.english-slot.is-hint{height:24px;background:transparent;color:#96731f;font-size:17px;font-weight:900}.english-feedback{min-height:30px;margin:12px 0 8px;font-size:17px;font-weight:900}.english-feedback.is-correct{color:#15804f}.english-feedback.is-wrong{color:#b53c3c}.english-feedback.is-hint,.english-feedback.is-pass{color:#8b6618}.english-keyboard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;width:min(760px,100%);margin:0 auto}.english-key{aspect-ratio:1.05/1;min-width:0;border:1px solid #d4dae4;border-radius:12px;background:#fff;color:#1d2536;cursor:pointer;box-shadow:0 3px 10px rgba(21,29,49,.04);font:inherit;display:inline-flex;align-items:baseline;justify-content:center;gap:1px}.english-key:hover{border-color:var(--brand);background:#f1fbf9}.english-key:active{transform:scale(.97)}.key-upper{font-size:clamp(18px,3.5vw,27px);font-weight:900}.key-lower{font-size:clamp(13px,2.5vw,19px);font-weight:800;color:#697084}.key-symbol{font-size:clamp(22px,4vw,30px);font-weight:900}.english-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(760px,100%);margin:10px auto 0}.english-action{min-height:52px;border:0;border-radius:12px;font:inherit;font-size:14px;font-weight:900;cursor:pointer}.english-action--delete{background:#edf0f4;color:#394255}.english-action--hint{background:#fff3d9;color:#825c10}.english-action--pass{background:#f8e9e9;color:#934141}.english-action--finish{background:#4a5569;color:#fff}@media(max-width:720px){.english-keyboard{gap:5px}.english-key{border-radius:9px}.english-actions{gap:5px}.english-action{min-height:48px;padding:6px 2px;font-size:12px}}


/* =========================================================
   Learning focus mode
   During active learning, the progress gauge owns the top edge.
========================================================= */
body.learning-mode .site-header {
    display: none;
}

body.learning-mode .page-shell {
    padding-top: 0;
}

body.learning-mode .site-footer {
    display: none;
}

body.learning-mode .learning-secondary-info {
    display: none !important;
}

body.learning-mode .texttext-medal-panel,
body.learning-mode #calc-medal-panel,
body.learning-mode .english-gauge-panel {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 -10px 12px;
    padding: 10px 14px 11px;
    border-radius: 0 0 14px 14px;
    border-top: 0;
    box-shadow: 0 5px 16px rgba(18, 26, 62, .10);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
}

body.learning-mode .calc-medal-panel__head {
    margin-bottom: 5px;
}

body.learning-mode .calc-gauge-track {
    height: 13px;
}

body.learning-mode .gauge-guest-note,
body.learning-mode .english-gauge-rule {
    display: none;
}

body.learning-mode .learning-card {
    margin-top: 0;
}

body.learning-mode .texttext-shell,
body.learning-mode .calc-play-shell,
body.learning-mode .english-input-shell {
    padding-bottom: 20px;
}

/* English keyboard: approximately half the former vertical height. */
body.learning-mode .english-keyboard {
    gap: 5px;
}

body.learning-mode .english-key {
    aspect-ratio: auto;
    height: 36px;
    min-height: 36px;
    border-radius: 8px;
}

body.learning-mode .key-upper {
    font-size: 18px;
    line-height: 1;
}

body.learning-mode .key-lower {
    font-size: 12px;
    line-height: 1;
}

body.learning-mode .key-symbol {
    font-size: 20px;
    line-height: 1;
}

body.learning-mode .english-actions {
    margin-top: 6px;
    gap: 5px;
}

body.learning-mode .english-action {
    min-height: 40px;
}

body.learning-mode .english-word-card {
    padding-top: 18px;
    padding-bottom: 18px;
}

body.learning-mode .english-meaning {
    margin-top: 2px;
}

body.learning-mode .english-hint-status {
    margin-top: 9px;
}

body.learning-mode .english-feedback {
    margin: 5px 0;
    min-height: 23px;
}

/* TEXtTEXt: use the reclaimed vertical space for reading. */
body.learning-mode .texttext-shell .learning-card {
    border-radius: 18px;
}

/* CALC: put the problem close to the fixed gauge. */
body.learning-mode .calc-play-card {
    padding-top: 18px;
}

@media (max-width: 720px) {
    body.learning-mode .page-shell {
        width: min(100% - 16px, 1120px);
    }

    body.learning-mode .texttext-medal-panel,
    body.learning-mode #calc-medal-panel,
    body.learning-mode .english-gauge-panel {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    body.learning-mode .english-key {
        height: 32px;
        min-height: 32px;
    }

    body.learning-mode .key-upper { font-size: 16px; }
    body.learning-mode .key-lower { font-size: 11px; }
    body.learning-mode .english-action {
        min-height: 38px;
        font-size: 12px;
    }
}


/* =========================================================
   TEXtTEXt controls during focused learning
========================================================= */
body.learning-mode .texttext-learning-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 10px;
}

body.learning-mode .texttext-control-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dde7;
    border-radius: 11px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body.learning-mode .texttext-control-button:hover {
    border-color: var(--brand);
    background: #f3fbfa;
}

body.learning-mode .texttext-control-button--finish {
    border-color: #d8dde5;
    background: #4a5569;
    color: #fff;
}

body.learning-mode .texttext-learning-filter {
    display: block !important;
    margin: 0 0 12px;
}

body.learning-mode .texttext-learning-filter:not([open]) {
    border: 0;
    background: transparent;
    margin-bottom: 0;
}

body.learning-mode .texttext-learning-filter:not([open]) > summary {
    display: none;
}

body.learning-mode .texttext-learning-filter[open] > summary {
    display: none;
}

body.learning-mode .texttext-learning-filter .filter-form {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

@media (max-width: 720px) {
    body.learning-mode .texttext-learning-controls {
        gap: 6px;
    }

    body.learning-mode .texttext-control-button {
        min-height: 40px;
        font-size: 12px;
    }
}

.kanji-drill-shell{max-width:900px;padding-top:0}.kanji-gauge-panel{position:sticky;top:0;z-index:100;margin:0 -10px 10px;padding:10px 14px 11px;border:1px solid #dbe5e8;border-top:0;border-radius:0 0 14px 14px;background:rgba(255,255,255,.97);box-shadow:0 5px 16px rgba(18,26,62,.10)}.kanji-filter-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.kanji-small-button{min-height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #d7dde7;border-radius:10px;background:#fff;color:#344054;font:inherit;font-size:12px;font-weight:900;text-decoration:none;cursor:pointer}.kanji-small-button--finish{background:#4a5569;color:#fff}.kanji-filter-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}.kanji-filter-panel[hidden]{display:none}.kanji-filter-panel label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#596174}.kanji-filter-panel select{min-height:42px;padding:8px;border:1px solid #d5dbe5;border-radius:9px;background:#fff;font:inherit}.kanji-trace-card{text-align:center;padding-top:18px}.kanji-reading{font-size:clamp(22px,4vw,34px);font-weight:900;margin-bottom:8px}.kanji-reading-list{display:grid;gap:5px;max-width:700px;margin:0 auto 10px;text-align:left}.kanji-reading-list div{display:flex;gap:10px;align-items:baseline}.kanji-reading-list span{flex:0 0 28px;color:var(--brand-dark);font-size:12px;font-weight:900}.kanji-reading-list strong{font-size:15px;line-height:1.7}.kanji-canvas-wrap{position:relative;width:min(760px,100%);margin:0 auto;touch-action:none;user-select:none}.kanji-canvas-wrap canvas{display:block;width:100%;border-radius:12px}#kanjiGuideCanvas{position:relative;z-index:1;border:1px solid #e2e6ec;background:#fff}#kanjiDrawCanvas{position:absolute;inset:0;z-index:2;touch-action:none}.kanji-trace-message{min-height:24px;margin:7px 0;color:#647084;font-size:13px;font-weight:800}.kanji-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(760px,100%);margin:0 auto}.kanji-actions button,.kanji-actions a{min-height:46px;display:flex;align-items:center;justify-content:center;border:0;border-radius:11px;font:inherit;font-size:14px;font-weight:900;text-decoration:none;cursor:pointer}#kanjiClearButton{background:#edf0f4;color:#394255}#kanjiDoneButton{background:var(--brand);color:#fff}#kanjiDoneButton:disabled{background:#d8dde5;color:#8a92a0;cursor:not-allowed}.kanji-actions a{background:#4a5569;color:#fff}@media(max-width:720px){.kanji-filter-panel{grid-template-columns:1fr}.kanji-actions{gap:5px}.kanji-actions button,.kanji-actions a{min-height:42px;font-size:13px}}

.kanji-current-bar{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px;gap:7px;align-items:center;margin-bottom:10px}
.kanji-current-bar>strong{min-height:40px;display:flex;align-items:center;padding:0 12px;border:1px solid #d7dde7;border-radius:10px;background:#fff;color:#263248;font-size:14px}
.kanji-choice-panel{margin-bottom:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.kanji-choice-panel[hidden],.kanji-subchoices[hidden]{display:none}
.kanji-choice-title{margin:0 0 8px;color:#596174;font-size:12px;font-weight:900}
.kanji-mode-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.kanji-grade-buttons{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kanji-level-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.kanji-subchoices{margin-top:14px;padding-top:12px;border-top:1px solid #edf0f3}
.kanji-choice-button{min-height:42px;display:flex;align-items:center;justify-content:center;padding:7px 8px;border:1px solid #d5dbe5;border-radius:10px;background:#fff;color:#394255;font:inherit;font-size:13px;font-weight:900;text-decoration:none;cursor:pointer}
.kanji-choice-button.is-active{border-color:var(--brand);background:var(--brand);color:#fff}
@media(max-width:720px){.kanji-current-bar{grid-template-columns:minmax(0,1fr) 70px 70px}.kanji-mode-buttons .kanji-choice-button{font-size:11px;padding-inline:3px}.kanji-grade-buttons{grid-template-columns:repeat(4,1fr)}}


/* 漢字ドリル v6: iPad / Pencil 描画中の誤操作抑制 */
.kanji-canvas-wrap,
.kanji-canvas-wrap canvas,
#kanjiDrawCanvas {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none !important;
    overscroll-behavior: contain;
}

.kanji-canvas-wrap {
    -webkit-tap-highlight-color: transparent;
}

body.learning-mode.kanji-drawing {
    overscroll-behavior: none;
}

body.learning-mode.kanji-drawing .kanji-drill-shell {
    touch-action: none;
}

/* 漢字ドリル v7: 初回は出題選択から開始 */
.kanji-choice-panel--start{
 margin-top:12px;
 padding:22px 18px 18px;
}
.kanji-start-heading{
 margin-bottom:20px;
 text-align:center;
}
.kanji-start-heading p{
 margin:0 0 4px;
 color:var(--brand-dark);
 font-size:12px;
 font-weight:900;
}
.kanji-start-heading h1{
 margin:0;
 color:#222c40;
 font-size:clamp(24px,5vw,36px);
}
.kanji-start-finish{
 margin-top:16px;
 display:flex;
 justify-content:center;
}
.kanji-start-finish .kanji-small-button{
 width:min(260px,100%);
}
.kanji-choice-panel--start .kanji-mode-buttons{
 margin-bottom:2px;
}


/* =========================================================
   百人一首
========================================================= */
.hyakunin-shell{max-width:1100px;padding-top:0}
.hyakunin-gauge-panel{
 position:sticky;top:0;z-index:120;margin:0 -10px 10px;padding:10px 14px 11px;
 border:1px solid #dbe5e8;border-top:0;border-radius:0 0 14px 14px;
 background:rgba(255,255,255,.97);box-shadow:0 5px 16px rgba(18,26,62,.10)
}
.hyakunin-menu{max-width:760px;margin:16px auto;text-align:center}
.hyakunin-menu h1{margin:2px 0 22px;font-size:clamp(30px,6vw,46px)}
.hyakunin-setting{margin:20px 0;text-align:left}
.hyakunin-setting>strong{display:block;margin-bottom:8px;font-size:13px}
.hyakunin-setting small{display:block;margin-top:8px;color:var(--muted);font-size:11px}
.hyakunin-choice-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.hyakunin-cpu-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hyakunin-choice{
 min-height:44px;border:1px solid #d4dbe5;border-radius:10px;background:#fff;color:#344054;
 font:inherit;font-size:13px;font-weight:900;cursor:pointer
}
.hyakunin-choice.is-active{border-color:var(--brand);background:var(--brand);color:#fff}
.hyakunin-start-button{width:min(360px,100%);margin-top:10px}
.hyakunin-menu-finish{display:block;margin-top:16px}

.hyakunin-topbar{
 display:grid;grid-template-columns:minmax(0,1fr) 80px 80px;gap:7px;align-items:center;margin-bottom:8px
}
.hyakunin-topbar>strong{
 min-height:38px;display:flex;align-items:center;padding:0 10px;border:1px solid #d7dde7;border-radius:9px;
 background:#fff;font-size:12px
}
.hyakunin-small-button{
 min-height:38px;display:flex;align-items:center;justify-content:center;border:1px solid #d7dde7;
 border-radius:9px;background:#fff;color:#344054;text-decoration:none;font-size:12px;font-weight:900
}
.hyakunin-small-button--finish{background:#4a5569;color:#fff}

.hyakunin-board{
 height:min(72vh,720px);min-height:520px;display:grid;grid-template-rows:1fr 2px 1fr;
 border:1px solid #dfe4eb;border-radius:16px;background:#f8fafc;overflow:hidden;
 touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none
}
.hyakunin-half{display:grid;min-height:0;padding:10px 12px}
.hyakunin-half--opponent{
 grid-template-rows:minmax(0,1fr) auto auto;
 transform:rotate(180deg)
}
.hyakunin-half--self{
 grid-template-rows:auto auto minmax(0,1fr)
}
.hyakunin-center-line{background:#d8dee8}
.hyakunin-reader{
 min-height:54px;display:flex;align-items:center;justify-content:center;padding:5px 12px;
 font-family:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif;
 font-size:clamp(18px,3.4vw,31px);font-weight:600;letter-spacing:.04em;text-align:center
}
.hyakunin-reader.is-audio::after{
 content:"♪";font-size:30px;color:var(--brand);opacity:.7
}
.hyakunin-player-line{
 display:flex;align-items:center;justify-content:center;gap:10px;padding:3px;font-size:11px;font-weight:900
}
.hyakunin-player-line strong{font-size:20px;color:var(--brand-dark)}
.hyakunin-card-row{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;align-items:stretch;min-height:0
}
.hyakunin-card{
 min-width:0;border:1px solid #d6d0c6;border-radius:10px;background:#fffdf8;color:#2b2926;
 box-shadow:0 2px 7px rgba(40,35,28,.06);padding:8px 5px;cursor:pointer;
 font-family:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif
}
.hyakunin-card span{
 display:flex;align-items:center;justify-content:center;height:100%;
 writing-mode:vertical-rl;text-orientation:upright;
 font-size:clamp(15px,2.2vw,24px);line-height:1.55;letter-spacing:.08em
}
.hyakunin-card:active{transform:scale(.98)}
.hyakunin-card.is-wrong{animation:hyakuninWrong .42s ease}
@keyframes hyakuninWrong{0%,100%{background:#fffdf8}50%{background:#ffdede}}
.hyakunin-status{min-height:30px;padding:7px;text-align:center;font-size:14px;font-weight:900;color:#475467}

@media(max-width:760px){
 .hyakunin-board{height:68vh;min-height:480px}
 .hyakunin-card-row{gap:4px}
 .hyakunin-card{padding:5px 2px;border-radius:8px}
 .hyakunin-cpu-levels{grid-template-columns:repeat(2,1fr)}
 .hyakunin-topbar{grid-template-columns:minmax(0,1fr) 66px 66px}
}


/* 百人一首 v2 */
.hyakunin-board{
    height:auto;
    min-height:calc(100dvh - 145px);
}
.hyakunin-half{
    min-height:340px;
}
.hyakunin-card-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(76px,1fr));
    gap:7px;
}
.hyakunin-card{
    min-height:76px;
    overflow:hidden;
}
.hyakunin-card span{
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:clamp(14px,2vw,21px);
    line-height:1.45;
}
.hyakunin-audio-start{
    min-width:180px;
    min-height:46px;
    border:0;
    border-radius:12px;
    background:var(--brand);
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}
.hyakunin-reader--opponent .hyakunin-audio-start{
    transform:none;
}

@media(max-width:760px){
    .hyakunin-board{
        min-height:700px;
    }
    .hyakunin-half{
        min-height:340px;
    }
    .hyakunin-card-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:repeat(3,minmax(70px,1fr));
    }
}


/* 百人一首 v3: 札は横5枚、札内文字を縦2列 */
.hyakunin-board{
    min-height:calc(100dvh - 145px);
}

.hyakunin-half{
    min-height:290px;
}

.hyakunin-card-row{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:1fr;
    gap:7px;
    align-items:stretch;
    min-height:0;
}

.hyakunin-card{
    min-width:0;
    min-height:150px;
    height:100%;
    padding:6px 3px;
    overflow:hidden;
}

.hyakunin-card span{
    display:block;
    width:100%;
    height:142px;
    margin:auto;
    writing-mode:vertical-rl;
    text-orientation:upright;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    font-size:clamp(16px,2.15vw,22px);
    line-height:1.35;
    letter-spacing:.05em;
    text-align:start;
}

@media(max-width:760px){
    .hyakunin-half{
        min-height:270px;
    }
    .hyakunin-card-row{
        grid-template-columns:repeat(5,minmax(0,1fr));
        grid-template-rows:1fr;
        gap:4px;
    }
    .hyakunin-card{
        min-height:138px;
        padding:4px 2px;
    }
    .hyakunin-card span{
        height:132px;
        font-size:clamp(13px,2.6vw,18px);
        line-height:1.25;
        letter-spacing:.03em;
    }
}


/* 百人一首 v4: 札を文字密度に合わせてコンパクト化 */
.hyakunin-board{
    min-height:auto;
    height:auto;
}

.hyakunin-half{
    min-height:0;
    padding:8px 10px;
}

.hyakunin-card-row{
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:1fr;
    gap:6px;
    align-items:stretch;
}

.hyakunin-card{
    min-height:0;
    height:168px;
    padding:3px 2px;
    overflow:hidden;
}

.hyakunin-card span{
    display:block;
    width:100%;
    height:100%;
    padding:2px 0;
    writing-mode:vertical-rl;
    text-orientation:upright;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    font-size:clamp(20px,2.6vw,28px);
    line-height:1.12;
    letter-spacing:.01em;
    text-align:start;
}

.hyakunin-reader{
    min-height:46px;
    padding:3px 8px;
}

.hyakunin-player-line{
    padding:1px 3px;
}

@media(max-width:760px){
    .hyakunin-half{
        padding:6px 8px;
    }

    .hyakunin-card-row{
        gap:4px;
    }

    .hyakunin-card{
        height:150px;
        padding:2px 1px;
    }

    .hyakunin-card span{
        font-size:clamp(17px,3vw,23px);
        line-height:1.08;
        letter-spacing:0;
    }
}


/* 百人一首 v5: タブレット縦の中央余白 / 音声開始ボタン中央1つ */
.hyakunin-board{
    position:relative;
}

.hyakunin-audio-start--center{
    position:absolute;
    left:50%;
    top:50%;
    z-index:20;
    transform:translate(-50%,-50%);
    min-width:220px;
    box-shadow:0 6px 18px rgba(20,34,55,.16);
}

/* スマホはv4の密度を維持 */
@media (min-width: 768px) and (orientation: portrait){
    .hyakunin-board{
        min-height:calc(100dvh - 145px);
        grid-template-rows:minmax(310px,1fr) 2px minmax(310px,1fr);
    }

    .hyakunin-half{
        min-height:310px;
        padding-top:18px;
        padding-bottom:18px;
    }

    .hyakunin-half--opponent{
        grid-template-rows:auto minmax(76px,1fr) auto;
    }

    .hyakunin-half--self{
        grid-template-rows:auto minmax(76px,1fr) auto;
    }

    .hyakunin-card-row{
        align-self:start;
    }

    .hyakunin-card-row--opponent{
        margin-bottom:34px;
    }

    .hyakunin-card-row--self{
        margin-top:34px;
    }

    .hyakunin-reader{
        min-height:74px;
        padding-left:18px;
        padding-right:18px;
    }
}


/* 百人一首 v6: タブレット縦は画面高を使って両陣営を離す */
@media (min-width:768px) and (orientation:portrait){
    .hyakunin-board{
        height:calc(100dvh - 190px);
        min-height:760px;
        max-height:980px;
        grid-template-rows:1fr 2px 1fr;
    }

    .hyakunin-half{
        min-height:0;
        padding:12px 10px;
    }

    /* 相手の札は相手側（画面上端）へ */
    .hyakunin-half--opponent{
        grid-template-rows:auto 1fr auto;
    }

    .hyakunin-card-row--opponent{
        align-self:start;
        margin:0;
    }

    .hyakunin-reader--opponent{
        align-self:end;
        min-height:82px;
        margin-bottom:18px;
    }

    /* 自分の札は自分側（画面下端）へ */
    .hyakunin-half--self{
        grid-template-rows:auto 1fr auto;
    }

    .hyakunin-reader--self{
        align-self:start;
        min-height:82px;
        margin-top:18px;
    }

    .hyakunin-card-row--self{
        align-self:end;
        margin:0;
    }

    .hyakunin-audio-start--center{
        top:50%;
        min-width:230px;
    }
}


/* 百人一首 v7: 中央専用エリアを設け、開始ボタンを重ねない */
.hyakunin-board{
    grid-template-rows:auto 92px auto !important;
}

.hyakunin-center-line{
    position:relative;
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f6f9;
    border-top:1px solid #d8dee8;
    border-bottom:1px solid #d8dee8;
}

.hyakunin-audio-start--center{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    margin:0;
    min-width:220px;
    z-index:1;
}

@media (min-width:768px) and (orientation:portrait){
    .hyakunin-board{
        height:calc(100dvh - 190px);
        min-height:760px;
        max-height:980px;
        grid-template-rows:minmax(270px,1fr) 120px minmax(270px,1fr) !important;
    }

    .hyakunin-center-line{
        min-height:120px;
    }

    .hyakunin-audio-start--center{
        min-width:240px;
        min-height:50px;
    }
}

@media (max-width:767px){
    .hyakunin-board{
        grid-template-rows:auto 78px auto !important;
    }

    .hyakunin-center-line{
        min-height:78px;
    }
}


/* 百人一首 v8: プレイヤー名・枚数を中央寄りに固定 */
.hyakunin-half--opponent{
    grid-template-rows:auto 1fr auto !important;
}

/* 相手側は180度回転しているため、DOM上の先頭側を中央寄りに見せる */
.hyakunin-half--opponent .hyakunin-player-line{
    grid-row:1;
    align-self:end;
    margin-bottom:6px;
}

.hyakunin-half--opponent .hyakunin-reader{
    grid-row:2;
    align-self:end;
}

.hyakunin-half--opponent .hyakunin-card-row{
    grid-row:3;
    align-self:start;
}

/* 自分側も「名前 → 読み → 札」の順で中央から手前へ */
.hyakunin-half--self{
    grid-template-rows:auto 1fr auto !important;
}

.hyakunin-half--self .hyakunin-player-line{
    grid-row:1;
    align-self:start;
    margin-top:6px;
}

.hyakunin-half--self .hyakunin-reader{
    grid-row:2;
    align-self:start;
}

.hyakunin-half--self .hyakunin-card-row{
    grid-row:3;
    align-self:end;
}


/* =========================================================
   manabis production home
========================================================= */
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

.home-shell{
    max-width:1060px;
    padding-top:34px;
    padding-bottom:48px;
}

.home-intro{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
}

.home-intro .eyebrow{
    color:var(--brand-dark);
    opacity:1;
    letter-spacing:.12em;
}

.home-intro h1{
    margin:0;
    font-size:clamp(30px,5vw,46px);
    letter-spacing:-.035em;
}

.home-intro p:not(.eyebrow){
    margin:7px 0 0;
    color:var(--muted);
    font-size:14px;
}

.home-mini-counter{
    flex:0 0 auto;
    min-width:150px;
    display:grid;
    grid-template-columns:auto auto;
    align-items:end;
    column-gap:5px;
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    text-align:right;
}

.home-mini-counter span{
    grid-column:1/-1;
    margin-bottom:2px;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
}

.home-mini-counter strong{
    font-size:25px;
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.home-mini-counter small{
    padding-bottom:2px;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
}

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

.home-app-card{
    position:relative;
    min-height:126px;
    display:grid;
    grid-template-columns:68px minmax(0,1fr) 24px;
    align-items:center;
    gap:15px;
    padding:18px 18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    color:#20283a;
    text-decoration:none;
    box-shadow:0 6px 20px rgba(25,35,60,.035);
    transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}

.home-app-card:hover{
    transform:translateY(-2px);
    border-color:#afd9d4;
    box-shadow:0 10px 25px rgba(0,150,136,.09);
}

.home-app-symbol{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#e8f7f4;
    color:var(--brand-dark);
    font-size:29px;
    font-weight:900;
    letter-spacing:-.04em;
}

.home-app-symbol--wide{
    font-size:23px;
}

.home-app-card--calc .home-app-symbol{background:#eef7df;color:#607d18}
.home-app-card--english .home-app-symbol{background:#e9f0ff;color:#365ca8}
.home-app-card--kanji .home-app-symbol{background:#fff1e5;color:#9b5729}
.home-app-card--hyakunin .home-app-symbol{background:#f3ebf9;color:#71508c}

.home-app-copy{
    min-width:0;
    display:grid;
    gap:4px;
}

.home-app-copy strong{
    font-size:21px;
    line-height:1.2;
}

.home-app-copy small{
    width:fit-content;
    padding:2px 7px;
    border-radius:999px;
    background:#f2f4f7;
    color:#687083;
    font-size:9px;
    font-weight:900;
}

.home-app-copy>span{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.home-app-arrow{
    color:#a7afbc;
    font-size:34px;
    font-weight:300;
    line-height:1;
}

.home-account-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:20px;
    padding:17px 20px;
    border:1px solid #d8e7e4;
    border-radius:17px;
    background:#f4fbfa;
}

.home-account-card strong{
    font-size:14px;
}

.home-account-card p{
    margin:3px 0 0;
    color:#657177;
    font-size:11px;
    line-height:1.55;
}

.home-account-card button{
    flex:0 0 auto;
    min-width:130px;
    padding:9px 13px;
    border:0;
    border-radius:11px;
    background:#e2e9ea;
    color:#758085;
    font:inherit;
    font-size:11px;
    font-weight:900;
}

.home-account-card button small{
    display:block;
    margin-top:1px;
    font-size:8px;
}

.home-about{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:30px auto 0;
    padding-top:22px;
    border-top:1px solid var(--line);
    color:#667084;
}

.home-about img{
    width:46px;
    height:46px;
    object-fit:contain;
}

.home-about strong{
    color:#374054;
    font-size:14px;
}

.home-about p{
    margin:2px 0 0;
    font-size:10px;
}

@media(min-width:900px){
    .home-app-card:first-child{
        grid-column:span 2;
        min-height:116px;
    }
}

@media(max-width:720px){
    .home-shell{
        padding-top:24px;
        padding-bottom:36px;
    }

    .home-intro{
        align-items:flex-start;
        margin-bottom:18px;
    }

    .home-mini-counter{
        min-width:auto;
        padding:9px 11px;
    }

    .home-mini-counter strong{font-size:20px}
    .home-intro p:not(.eyebrow){display:none}

    .home-app-grid{
        grid-template-columns:1fr;
        gap:9px;
    }

    .home-app-card{
        min-height:96px;
        grid-template-columns:54px minmax(0,1fr) 18px;
        gap:12px;
        padding:13px 14px;
        border-radius:16px;
    }

    .home-app-symbol{
        width:52px;
        height:52px;
        border-radius:14px;
        font-size:24px;
    }

    .home-app-symbol--wide{font-size:19px}
    .home-app-copy strong{font-size:18px}
    .home-app-copy>span{font-size:11px}
    .home-app-arrow{font-size:27px}

    .home-account-card{
        align-items:flex-start;
        padding:14px;
    }

    .home-account-card button{
        min-width:94px;
    }

    .home-about{
        justify-content:flex-start;
    }
}


/* manabis production home v2 */
.home-shell{
    padding-top:22px;
}

.home-learning-total{
    margin:0 0 16px;
    color:#667084;
    font-size:12px;
    font-weight:700;
    text-align:right;
}

.home-learning-total strong{
    margin:0 3px;
    color:var(--brand-dark);
    font-size:15px;
    font-variant-numeric:tabular-nums;
}

@media(max-width:720px){
    .home-shell{
        padding-top:16px;
    }

    .home-learning-total{
        margin-bottom:12px;
        font-size:11px;
        text-align:left;
    }

    .home-learning-total strong{
        font-size:14px;
    }
}


/* =========================================================
   今月の獲得メダルランキング
========================================================= */
.home-ranking{
    margin-top:22px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 6px 20px rgba(25,35,60,.035);
}

.home-ranking__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
}

.home-ranking__head>div{
    display:flex;
    align-items:baseline;
    gap:7px;
}

.home-ranking__head>div>span{
    color:var(--brand-dark);
    font-size:11px;
    font-weight:900;
}

.home-ranking__head h2{
    margin:0;
    color:#273147;
    font-size:18px;
}

.home-ranking__month{
    color:#8b94a3;
    font-size:10px;
    font-weight:800;
}

.home-ranking__top{
    display:grid;
    gap:7px;
    margin:0;
    padding:0;
    list-style:none;
}

.home-ranking__top li{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto auto;
    align-items:center;
    gap:8px;
    min-height:46px;
    padding:7px 11px;
    border-radius:12px;
    background:#f8fafb;
}

.home-ranking__top li.is-me,
.home-ranking__more li.is-me{
    background:#eef9f7;
}

.home-ranking__rank{
    font-size:20px;
    text-align:center;
}

.home-ranking__top strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#30394c;
    font-size:14px;
}

.home-ranking__top li>small,
.home-ranking__more li>small{
    padding:2px 6px;
    border-radius:999px;
    background:#dcefeb;
    color:#34766e;
    font-size:8px;
    font-weight:900;
}

.home-ranking__medals{
    color:#485266;
    font-size:16px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.home-ranking__medals small{
    margin-left:2px;
    color:#7d8797;
    font-size:9px;
}

.home-ranking__me{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid #d7ebe7;
    border-radius:12px;
    background:#f4fbfa;
    color:#5d6879;
    font-size:11px;
}

.home-ranking__me strong{
    color:var(--brand-dark);
    font-size:14px;
}

.home-ranking__me span:last-child{
    margin-left:auto;
    color:#3f4a5d;
    font-weight:900;
}

.home-ranking__more{
    margin-top:9px;
    border-top:1px solid #eef1f4;
}

.home-ranking__more summary{
    padding:11px 4px 2px;
    color:var(--brand-dark);
    font-size:11px;
    font-weight:900;
    text-align:center;
    cursor:pointer;
    list-style:none;
}

.home-ranking__more summary::-webkit-details-marker{
    display:none;
}

.home-ranking__more summary::after{
    content:" ↓";
}

.home-ranking__more[open] summary::after{
    content:" ↑";
}

.home-ranking__more ol{
    display:grid;
    gap:3px;
    margin:8px 0 0;
    padding:0;
    list-style:none;
}

.home-ranking__more li{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto auto;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:9px;
    color:#586274;
    font-size:11px;
}

.home-ranking__more li strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#3d4658;
    font-size:12px;
}

.home-ranking__more li>span:last-child{
    font-weight:900;
}

.home-ranking__empty{
    padding:18px 10px;
    color:#7a8494;
    font-size:11px;
    text-align:center;
}

@media(max-width:720px){
    .home-ranking{
        margin-top:16px;
        padding:14px;
        border-radius:16px;
    }

    .home-ranking__head h2{
        font-size:16px;
    }

    .home-ranking__top li{
        grid-template-columns:34px minmax(0,1fr) auto auto;
        min-height:43px;
        padding:6px 8px;
    }

    .home-ranking__rank{
        font-size:18px;
    }

    .home-ranking__top strong{
        font-size:13px;
    }
}


/* =========================================================
   Production header
========================================================= */
.site-header__inner{
    min-height:66px;
    gap:18px;
}

.brand{
    gap:8px;
    font-size:20px;
}

.brand img{
    width:40px;
    height:40px;
    border-radius:10px;
}

.header-actions{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.header-user-chip{
    min-width:0;
    display:grid;
    gap:1px;
    padding:0 3px;
    text-align:right;
}

.header-user-chip strong{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#30394c;
    font-size:13px;
}

.header-user-chip__org{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--brand-dark);
    font-size:9px;
    font-weight:800;
}

.header-medal-badge{
    min-height:34px;
    gap:4px;
    padding:5px 10px;
    border:1px solid #f2e6af;
    background:#fffaf0;
    font-size:12px;
}

.header-settings-link{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 9px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    color:#6a7383;
    font-size:10px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}

.header-settings-link:hover{
    color:var(--brand-dark);
    border-color:#b9d9d5;
    background:#f6fbfa;
}

.context-return-link{
    min-height:34px;
    padding:6px 9px;
    border-radius:9px;
    font-size:10px;
}

/* 旧ヘッダー要素は本番ヘッダーでは使用しない */
.user-status,
.user-status__text,
.user-status__sub,
.nickname-settings-link,
.site-header .register-button{
    /* legacy selectors retained for other pages, markup no longer emitted here */
}

@media(max-width:720px){
    .site-header__inner{
        width:min(100% - 20px,1120px);
        min-height:60px;
        gap:7px;
    }

    .brand img{
        width:38px;
        height:38px;
    }

    .header-actions{
        gap:5px;
    }

    .header-user-chip__org{
        display:none;
    }

    .header-user-chip strong{
        max-width:110px;
        font-size:12px;
    }

    .header-medal-badge{
        min-height:32px;
        padding:4px 8px;
    }

    .header-settings-link{
        min-height:32px;
        padding:4px 7px;
        font-size:9px;
    }
}

@media(max-width:430px){
    .header-settings-link{
        display:none;
    }

    .header-user-chip strong{
        max-width:92px;
    }
}


/* =========================================================
   My Page entry / My Page
========================================================= */
.header-user-chip__name{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#30394c;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
}
.header-user-chip__name:hover{
    color:var(--brand-dark);
}

.home-mypage-card{
    display:grid;
    grid-template-columns:82px minmax(0,1fr) 24px;
    align-items:center;
    gap:14px;
    margin-top:20px;
    padding:16px 18px;
    border:1px solid #d9e8e5;
    border-radius:20px;
    background:linear-gradient(135deg,#f5fbfa 0%,#ffffff 72%);
    color:#293348;
    text-decoration:none;
    box-shadow:0 6px 20px rgba(25,35,60,.035);
}
.home-mypage-card:hover{
    border-color:#afd9d4;
    box-shadow:0 10px 25px rgba(0,150,136,.08);
}
.home-mypage-card__visual{
    position:relative;
    width:76px;
    height:66px;
}
.home-mypage-avatar,
.home-mypage-pet{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-weight:900;
}
.home-mypage-avatar{
    left:0;
    top:0;
    width:58px;
    height:58px;
    background:#dff3ef;
    color:#397d74;
    font-size:29px;
}
.home-mypage-pet{
    right:0;
    bottom:0;
    width:30px;
    height:30px;
    border:3px solid #fff;
    background:#fff0d8;
    color:#a86e26;
    font-size:12px;
}
.home-mypage-card__copy{
    display:grid;
    gap:3px;
}
.home-mypage-card__copy small{
    color:var(--brand-dark);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}
.home-mypage-card__copy strong{
    font-size:19px;
}
.home-mypage-card__copy span{
    color:var(--muted);
    font-size:11px;
    line-height:1.55;
}
.home-mypage-card__arrow{
    color:#a7afbc;
    font-size:32px;
}
.home-mypage-card--guest{
    background:linear-gradient(135deg,#fafbfc 0%,#fff 72%);
}

.mypage-shell{
    max-width:960px;
}
.mypage-hero{
    display:grid;
    grid-template-columns:210px minmax(0,1fr) auto;
    align-items:center;
    gap:22px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 8px 28px rgba(25,35,60,.045);
}
.mypage-character-preview{
    position:relative;
    width:112px;
    height:96px;
}
.mypage-avatar-placeholder{
    width:88px;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#dff3ef;
    color:#397d74;
    font-size:46px;
    font-weight:900;
}
.mypage-pet-placeholder{
    position:absolute;
    right:0;
    bottom:0;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:4px solid #fff;
    border-radius:50%;
    background:#fff0d8;
    color:#a86e26;
    font-size:18px;
}
.mypage-identity{
    min-width:0;
}
.mypage-identity>span{
    color:var(--brand-dark);
    font-size:10px;
    font-weight:900;
}
.mypage-identity h1{
    margin:2px 0 5px;
    font-size:clamp(28px,5vw,42px);
}
.mypage-identity a{
    color:#687285;
    font-size:10px;
}
.mypage-medals{
    min-width:120px;
    display:grid;
    gap:3px;
    padding:13px 16px;
    border-radius:14px;
    background:#fffaf0;
    text-align:center;
}
.mypage-medals>span{
    color:#8d7c4b;
    font-size:9px;
    font-weight:900;
}
.mypage-medals strong{
    color:#815d00;
    font-size:21px;
}
.mypage-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}
.mypage-feature-card{
    position:relative;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    gap:13px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}
.mypage-feature-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:#edf7f5;
    color:var(--brand-dark);
    font-size:27px;
    font-weight:900;
}
.mypage-feature-card strong{
    font-size:16px;
}
.mypage-feature-card p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:10px;
    line-height:1.55;
}
.mypage-coming{
    position:absolute;
    right:12px;
    top:10px;
    padding:2px 6px;
    border-radius:999px;
    background:#f1f3f6;
    color:#7c8594;
    font-size:8px;
    font-weight:900;
}
.mypage-note{
    margin-top:16px;
    padding:16px 18px;
    border-radius:16px;
    background:#f6f8fa;
}
.mypage-note strong{
    font-size:12px;
}
.mypage-note p{
    margin:4px 0 0;
    color:#707989;
    font-size:10px;
    line-height:1.6;
}

.mypage-guest-preview{
    max-width:760px;
    margin:0 auto;
    padding:30px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
    text-align:center;
}
.mypage-guest-preview h1{
    margin:0;
    font-size:clamp(28px,5vw,42px);
}
.mypage-guest-lead{
    max-width:580px;
    margin:12px auto 22px;
    color:var(--muted);
    line-height:1.8;
}
.mypage-guest-visuals{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}
.mypage-guest-visuals>div{
    display:grid;
    gap:7px;
    padding:18px 10px;
    border-radius:16px;
    background:#f7f9fa;
}
.mypage-guest-visuals span{
    font-size:34px;
}
.mypage-guest-visuals strong{
    font-size:12px;
}
.mypage-guest-message{
    margin-top:18px;
    padding:14px;
    border-radius:14px;
    background:#fff8e8;
}
.mypage-guest-message strong{
    color:#815f17;
    font-size:12px;
}
.mypage-guest-message p{
    margin:4px 0 0;
    color:#8b784f;
    font-size:10px;
}
.mypage-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:18px;
    text-decoration:none;
}

@media(max-width:720px){
    .header-user-chip__name{
        max-width:110px;
        font-size:12px;
    }
    .home-mypage-card{
        grid-template-columns:62px minmax(0,1fr) 18px;
        gap:10px;
        padding:13px 14px;
        border-radius:16px;
    }
    .home-mypage-card__visual{
        width:58px;
        height:54px;
    }
    .home-mypage-avatar{
        width:48px;
        height:48px;
        font-size:24px;
    }
    .home-mypage-pet{
        width:26px;
        height:26px;
    }
    .home-mypage-card__copy strong{
        font-size:17px;
    }

    .mypage-hero{
        grid-template-columns:150px minmax(0,1fr);
        gap:14px;
        padding:17px;
    }
    .mypage-character-preview{
        width:78px;
        height:72px;
    }
    .mypage-avatar-placeholder{
        width:66px;
        height:66px;
        font-size:34px;
    }
    .mypage-pet-placeholder{
        width:34px;
        height:34px;
        border-width:3px;
    }
    .mypage-medals{
        grid-column:1/-1;
        grid-template-columns:auto auto;
        justify-content:center;
        align-items:center;
        gap:8px;
    }
    .mypage-feature-grid{
        grid-template-columns:1fr;
    }
    .mypage-guest-preview{
        padding:22px 16px;
    }
    .mypage-guest-visuals{
        grid-template-columns:1fr 1fr 1fr;
        gap:6px;
    }
    .mypage-guest-visuals>div{
        padding:13px 5px;
    }
}

.mypage-top-nav{
    margin-bottom:12px;
}
.mypage-top-nav a{
    color:var(--brand-dark);
    font-size:11px;
    font-weight:900;
    text-decoration:none;
}
.mypage-top-nav a:hover{
    text-decoration:underline;
}

.home-study-point{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid #e7ebef}.home-study-point span{font-size:12px;font-weight:800;color:#667085}.home-study-point strong{font-size:22px;line-height:1;color:#27364d}.home-study-point small{margin-left:auto;font-size:11px;color:#8a94a3}@media(max-width:600px){.home-study-point{flex-wrap:wrap}.home-study-point small{width:100%;margin-left:0}}

/* MOANAVI teacher call */
.teacher-call-wrap{
    margin-top:12px;
    display:flex;
    justify-content:center;
}
.teacher-call-button{
    min-height:42px;
    padding:9px 18px;
    border:1px solid #d5ddd9;
    border-radius:12px;
    background:#fff;
    color:#364152;
    font:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(16,24,40,.05);
}
.teacher-call-button:active{transform:translateY(1px)}
.teacher-call-button:disabled{opacity:.65;cursor:default}

/* Character collection v1 */
.header-medal-badge img{width:20px;height:20px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(120,80,0,.18))}
.mypage-character-preview{position:relative;width:210px;height:220px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.mypage-avatar-image{height:218px;max-width:124px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 10px rgba(24,34,48,.10))}
.mypage-pet-companion{position:absolute;bottom:-2px;width:90px;height:90px;z-index:3;transition:right .35s ease}
.mypage-pet-companion.affection-1{right:0}
.mypage-pet-companion.affection-2{right:12px}
.mypage-pet-companion.affection-3{right:24px}
.mypage-pet-companion.affection-4,
.mypage-pet-companion.affection-5,
.mypage-pet-companion.affection-6,
.mypage-pet-companion.affection-7{right:36px}
.mypage-pet-image{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(24,34,48,.12))}
.mypage-pet-hearts{position:absolute;inset:-52% -28% 12% -28%;z-index:4;pointer-events:none}
.mypage-pet-hearts span{position:absolute;color:#ff5f87;opacity:0;filter:drop-shadow(0 2px 4px rgba(255,70,120,.28));animation:mypage-heart-float 2.1s ease-out infinite}
.mypage-pet-hearts.hearts-1 span{display:none}.mypage-pet-hearts.hearts-1 .h2{display:block}
.mypage-pet-hearts.hearts-3 span{display:none}.mypage-pet-hearts.hearts-3 .h2,.mypage-pet-hearts.hearts-3 .h4,.mypage-pet-hearts.hearts-3 .h6{display:block}
.mypage-pet-hearts.hearts-8 span{display:block}
.mypage-pet-hearts .h1{left:8%;bottom:18%;font-size:17px;animation-delay:.0s}
.mypage-pet-hearts .h2{left:39%;bottom:2%;font-size:28px;animation-delay:.2s}
.mypage-pet-hearts .h3{right:5%;bottom:25%;font-size:20px;animation-delay:.4s}
.mypage-pet-hearts .h4{left:0;top:22%;font-size:23px;animation-delay:.6s}
.mypage-pet-hearts .h5{left:48%;top:1%;font-size:16px;animation-delay:.8s}
.mypage-pet-hearts .h6{right:0;top:13%;font-size:29px;animation-delay:1s}
.mypage-pet-hearts .h7{left:25%;top:39%;font-size:14px;animation-delay:1.2s}
.mypage-pet-hearts .h8{right:22%;top:45%;font-size:19px;animation-delay:1.4s}
@keyframes mypage-heart-float{0%,18%{opacity:0;transform:translateY(12px) scale(.35)}35%{opacity:1;transform:translateY(0) scale(1.05)}70%{opacity:1}100%{opacity:0;transform:translateY(-28px) scale(.72)}}
.mypage-medals strong{display:flex;align-items:center;justify-content:center;gap:5px}
.mypage-medals strong img{width:38px;height:38px;object-fit:contain}
.mypage-feature-card{text-decoration:none;color:inherit;grid-template-columns:68px minmax(0,1fr)}
.mypage-feature-art{width:64px;height:64px;object-fit:contain}
.mypage-feature-art--avatar{height:76px}
.mypage-reward-badge{position:absolute;right:12px;top:10px;padding:3px 7px;border-radius:999px;background:#fd9300;color:#fff;font-size:9px;font-weight:900}
.character-reward-notice{margin-top:16px;padding:18px;border-radius:18px;background:linear-gradient(135deg,#fff8e8,#fff);border:1px solid #f4d89c;display:flex;align-items:center;justify-content:space-between;gap:16px}
.character-reward-notice>div{display:flex;gap:8px;flex-wrap:wrap}.mypage-note--guest{background:#fff8e8}
.home-mypage-card__visual{position:relative;overflow:visible}.home-mypage-avatar-image{width:52px;height:62px;object-fit:contain;object-position:center bottom}.home-mypage-pet-image{position:absolute;right:0;bottom:0;width:28px;height:28px;object-fit:contain}
.collection-shell{max-width:1100px}.collection-back{display:inline-block;margin-bottom:18px;color:var(--brand-dark);text-decoration:none;font-size:12px;font-weight:800}.collection-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.collection-heading span{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--brand-dark)}.collection-heading h1{margin:3px 0 5px;font-size:clamp(28px,5vw,44px)}.collection-heading p{margin:0;color:var(--muted)}.collection-heading>b{padding:8px 11px;border-radius:999px;background:#edf7f5;color:var(--brand-dark);font-size:11px}.character-grid{display:grid;gap:14px}.character-grid--avatar{grid-template-columns:repeat(4,minmax(0,1fr))}.character-grid--pet{grid-template-columns:repeat(4,minmax(0,1fr))}.character-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 6px 22px rgba(24,34,48,.04)}.character-card.is-selected{border:2px solid var(--brand);box-shadow:0 0 0 3px rgba(0,150,136,.08)}.character-card.is-unowned{background:#fcfcfd}.character-art{height:220px;display:flex;align-items:center;justify-content:center;padding:14px;background:linear-gradient(180deg,#f8fafb,#fff)}.character-art--avatar{height:300px}.character-art img{width:100%;height:100%;object-fit:contain}.character-card-foot{padding:12px;display:grid;gap:8px}.character-card-foot strong{font-size:13px}.character-card-foot form{margin:0}.character-card-foot button{width:100%;border:1px solid #d5dce4;border-radius:10px;background:#fff;padding:8px;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.character-card-foot button.primary{border-color:var(--brand);background:var(--brand);color:#fff}.character-selected{color:var(--brand-dark);font-size:10px;font-weight:900}.character-card-foot small{color:#9aa2ad;font-size:10px}.collection-error{margin-bottom:14px;padding:11px 13px;border-radius:12px;background:#fff0f2;color:#b4233a}.collection-guest-note{margin-top:16px;padding:12px;border-radius:12px;background:#fff8e8;color:#826a32;font-size:11px}.hatch-stage,.hatch-result{margin:20px auto 28px;max-width:430px;text-align:center;padding:20px;border:1px solid var(--line);border-radius:22px;background:#fff}.hatch-stage img,.hatch-result img{width:min(280px,75vw);aspect-ratio:1;object-fit:contain}.hatch-result>span{font-size:11px;font-weight:900;letter-spacing:.15em;color:#fd9300}.hatch-result h2{margin:4px 0}.collection-subheading{margin:24px 0 12px;font-size:19px}
@media(max-width:900px){.character-grid--avatar,.character-grid--pet{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
.mypage-character-preview{width:150px;height:160px}
.mypage-avatar-image{height:158px;max-width:90px}
.mypage-pet-companion{width:64px;height:64px;bottom:-2px}
.mypage-pet-companion.affection-1{right:0}
.mypage-pet-companion.affection-2{right:8px}
.mypage-pet-companion.affection-3{right:16px}
.mypage-pet-companion.affection-4,
.mypage-pet-companion.affection-5,
.mypage-pet-companion.affection-6,
.mypage-pet-companion.affection-7{right:24px}
.character-reward-notice{align-items:flex-start;flex-direction:column}
.character-grid--avatar,.character-grid--pet{grid-template-columns:repeat(2,minmax(0,1fr))}
.character-art--avatar{height:245px}.character-art{height:170px}
.collection-heading{align-items:flex-start;flex-direction:column}
}

.kamigaku-result-medal{display:block;width:150px;height:150px;object-fit:contain;margin:8px auto;filter:drop-shadow(0 8px 18px rgba(255,190,0,.28));animation:manabis-medal-pop 1.05s cubic-bezier(.2,.85,.25,1.15) both}.kamigaku-result-medal[hidden]{display:none}


/* Character collection v2 */
.collection-empty,.collection-success{
    margin:16px 0;
    padding:14px 16px;
    border-radius:14px;
    font-size:12px;
    font-weight:800;
}
.collection-empty{background:#f4f6f8;color:#687386}
.collection-success{background:#edf8f3;color:#166a50}
.hatch-animation{
    margin:20px auto 28px;
    max-width:520px;
    min-height:480px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    text-align:center;
}
.hatch-animation__egg{
    position:relative;
    display:grid;
    place-items:center;
}
.hatch-animation__egg img{
    width:min(340px,72vw);
    aspect-ratio:1;
    object-fit:contain;
    filter:drop-shadow(0 18px 20px rgba(69,71,162,.18));
}
.hatch-animation__egg.is-hatching img{animation:manabis-egg-shake 1.45s ease both}
@keyframes manabis-egg-shake{
    0%,100%{transform:rotate(0) scale(1)}
    10%{transform:rotate(-5deg)}
    20%{transform:rotate(6deg)}
    32%{transform:rotate(-7deg) scale(1.02)}
    45%{transform:rotate(7deg) scale(1.05)}
    58%{transform:rotate(-5deg) scale(1.08);filter:brightness(1.2) drop-shadow(0 0 25px #9ec6ff)}
    75%{transform:rotate(3deg) scale(1.12);filter:brightness(1.6) drop-shadow(0 0 45px #b784ff)}
}
.hatch-animation__flash{
    position:absolute;
    width:24px;height:24px;border-radius:50%;
    background:#fff;opacity:0;
    box-shadow:0 0 80px 45px #d8ccff;
    pointer-events:none;
}
.hatch-animation__flash.go{animation:manabis-hatch-flash .65s ease both}
@keyframes manabis-hatch-flash{
    0%{opacity:0;transform:scale(.3)}
    45%{opacity:1;transform:scale(5)}
    100%{opacity:0;transform:scale(11)}
}
.hatch-animation__result{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.hatch-animation__result[hidden]{display:none}
.hatch-animation__result.show{animation:manabis-pet-appear .7s cubic-bezier(.2,.85,.25,1.2) both}
@keyframes manabis-pet-appear{
    from{opacity:0;transform:scale(.45) translateY(24px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}
.hatch-animation__result>span{
    font-size:11px;font-weight:900;letter-spacing:.15em;color:#fd9300;
}
.hatch-animation__result img{
    width:min(380px,78vw);
    max-height:350px;
    object-fit:contain;
}
.hatch-animation__result h2{margin:5px 0 2px}
.hatch-animation__result p{margin:0 0 14px;color:var(--muted)}

/* =========================================================
   manabis free home - member compatible layout v3
   ========================================================= */
.member-like-home{max-width:1180px;padding-top:10px}
.home-character-card{
    min-height:390px;
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(220px,3fr);
    gap:18px;
    align-items:center;
    padding:18px 24px;
    background:#fff;
    border:1px solid #dde7e3;
    border-radius:18px;
    box-shadow:0 3px 14px #18382e0a;
    overflow:hidden;
}
.home-character-stage{
    position:relative;
    width:100%;
    height:320px;
    justify-self:stretch;
}
.home-character-avatar{
    position:absolute;
    left:40%;
    bottom:0;
    transform:translateX(-50%);
    height:318px;
    max-width:230px;
    object-fit:contain;
    filter:drop-shadow(0 10px 13px rgba(24,34,48,.11));
}
.home-character-pet{
    position:absolute;
    left:40%;
    bottom:-2px;
    width:138px;
    height:138px;
    z-index:3;
    transition:transform .35s ease;
}
.home-character-pet.affection-1{transform:translateX(115%)}
.home-character-pet.affection-2{transform:translateX(85%)}
.home-character-pet.affection-3{transform:translateX(55%)}
.home-character-pet.affection-4,
.home-character-pet.affection-5,
.home-character-pet.affection-6,
.home-character-pet.affection-7{transform:translateX(28%)}
.home-character-pet>img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 6px 9px rgba(24,34,48,.12));
}
.home-character-visual{min-width:0}
.home-character-info{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:8px;
    min-width:0;
    padding:14px 4px;
}
.home-character-info .profile-label{
    font-size:10px;
    font-weight:900;
    color:#87938e;
    letter-spacing:.08em;
}
.home-character-info>strong{
    font-size:clamp(22px,3vw,30px);
    color:#20332c;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.home-character-info .profile-medals{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:2px;
    font-size:13px;
    color:#596963;
    font-weight:800;
    line-height:1.4;
}
.home-character-info .profile-medals img{
    flex:0 0 auto;
    width:34px;
    height:34px;
    object-fit:contain;
}
.home-profile-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    margin-top:9px;
    padding:10px 14px;
    border-radius:12px;
    background:#20332c;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900;
    text-decoration:none!important;
    box-shadow:0 4px 10px rgba(32,51,44,.12);
}
.home-profile-button:active{transform:translateY(1px)}
.home-community-learning{
    margin-top:10px;
    padding:12px 13px;
    border-radius:13px;
    background:#f3f7f5;
    border:1px solid #dde7e3;
    color:#596963;
}
.home-community-learning>strong{
    display:block;
    margin-bottom:7px;
    color:#20332c;
    font-size:12px;
    font-weight:900;
    white-space:normal;
}
.home-community-learning>div{
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    align-items:baseline;
    gap:7px;
    line-height:1.45;
}
.home-community-learning span{font-size:10px;font-weight:800;color:#7b8984}
.home-community-learning b{
    min-width:0;
    text-align:right;
    color:#238b65;
    font-size:15px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.home-character-hearts{
    position:absolute;
    inset:-52% -28% 12% -28%;
    z-index:4;
    pointer-events:none;
}
.home-character-hearts span{
    position:absolute;
    color:#ff5f87;
    opacity:0;
    filter:drop-shadow(0 2px 4px rgba(255,70,120,.28));
    animation:none;
}
.home-character-hearts.hearts-1 span{display:none}
.home-character-hearts.hearts-1 .h2{display:block}
.home-character-hearts.hearts-3 span{display:none}
.home-character-hearts.hearts-3 .h2,
.home-character-hearts.hearts-3 .h4,
.home-character-hearts.hearts-3 .h6{display:block}
.home-character-hearts.hearts-8 span{display:block}
.home-character-hearts .h1{left:8%;bottom:18%;font-size:23px}
.home-character-hearts .h2{left:39%;bottom:2%;font-size:36px;animation-delay:.2s}
.home-character-hearts .h3{right:5%;bottom:25%;font-size:27px;animation-delay:.4s}
.home-character-hearts .h4{left:0;top:22%;font-size:31px;animation-delay:.6s}
.home-character-hearts .h5{left:48%;top:1%;font-size:21px;animation-delay:.8s}
.home-character-hearts .h6{right:0;top:13%;font-size:38px;animation-delay:1s}
.home-character-hearts .h7{left:25%;top:39%;font-size:19px;animation-delay:1.2s}
.home-character-hearts .h8{right:22%;top:45%;font-size:25px;animation-delay:1.4s}
.home-character-hearts.character-idle-heart-burst span{animation:home-heart-float 1.8s ease-out both}
@keyframes home-heart-float{
    0%,18%{opacity:0;transform:translateY(12px) scale(.35)}
    35%{opacity:1;transform:translateY(0) scale(1.05)}
    70%{opacity:1}
    100%{opacity:0;transform:translateY(-28px) scale(.72)}
}
.member-like-study-point{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:0;margin:10px 0;background:#dde7e3;overflow:hidden}
.member-like-study-point>div{background:#fff;padding:12px 16px;display:flex;align-items:baseline;gap:10px}
.member-like-study-point span{font-size:11px;font-weight:800;color:#73817c}
.member-like-study-point strong{margin-left:auto;font-size:22px;color:#20332c}
.member-like-study-point small{font-size:11px}
.home-toggle{margin-top:10px;background:#fff;border:1px solid #dde7e3;border-radius:18px;box-shadow:0 3px 14px #18382e0a;overflow:hidden}
.home-toggle>summary{list-style:none;display:flex;justify-content:space-between;padding:15px 17px;font-weight:900;cursor:pointer;color:#20332c}
.home-toggle>summary::-webkit-details-marker{display:none}
.home-toggle>summary span{font-size:11px;color:#73817c}
.home-toggle[open]>summary span{font-size:0}
.home-toggle[open]>summary span::after{content:'閉じる';font-size:11px}
.home-toggle-body{padding:4px 17px 17px}
.home-member-app-list{display:grid;gap:7px}
.home-member-app-list>a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:11px 13px;border-radius:12px;background:#f6f8f7;text-decoration:none;color:#27443a}
.home-member-app-list>a>strong{display:flex;align-items:center;gap:6px;font-size:14px}
.home-member-app-list>a>b{grid-column:2;grid-row:1/3;align-self:center;color:#238b65}
.home-member-app-list>a>span{font-size:11px;color:#71807b}
.home-earned-medal{width:22px;height:22px;object-fit:contain}
.home-learning-list{display:grid;gap:6px}
.home-learning-list>div{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;background:#f6f8f7}
.home-learning-list>div>span{display:grid}
.home-learning-list strong{font-size:13px}
.home-learning-list small{color:#71807b;margin-top:2px}
.home-learning-list>div>b{margin-left:auto;font-size:12px}
.home-ranking-toggle .home-ranking__head{margin-bottom:10px}
.home-ranking-compact-more{list-style:none;padding:0;margin:7px 0 0;display:grid;gap:5px}
.home-ranking-compact-more li{display:grid;grid-template-columns:44px 1fr auto;gap:8px;padding:8px 10px;border-radius:9px;background:#f6f8f7;font-size:12px}
.home-ranking-compact-more strong{font-weight:800}
.home-ranking-compact-more b{font-size:12px}
.member-like-home .home-learning-total{margin:10px 0 0}

/* Tablet: keep the 7:3 hero. */
@media(max-width:900px){
    .member-like-home{width:100%;padding:8px 10px 35px}
    .home-character-card{
        grid-template-columns:minmax(0,7fr) minmax(190px,3fr);
        min-height:360px;
        padding:14px 18px;
        gap:12px;
    }
    .home-character-stage{height:330px}
    .home-character-avatar{height:328px;max-width:215px}
    .home-character-pet{width:128px;height:128px;bottom:-2px}
    .home-character-info>strong{font-size:22px}
    .home-character-info .profile-medals{font-size:11px}
    .member-like-study-point>div{padding:10px}
    .member-like-study-point strong{font-size:18px}
    .home-member-app-list>a>span{font-size:10px}
}

/* Phone: prioritize readability over 7:3. */
@media(max-width:560px){
    .home-character-card{
        grid-template-columns:minmax(0,1.65fr) minmax(122px,.85fr);
        min-height:270px;
        padding:10px;
        gap:7px;
    }
    .home-character-stage{height:250px}
    .home-character-avatar{height:248px;max-width:155px}
    .home-character-pet{width:90px;height:90px}
    .home-character-info{padding:8px 0;gap:5px}
    .home-character-info>strong{font-size:17px}
    .home-character-info .profile-label{font-size:8px}
    .home-character-info .profile-medals{font-size:9px;gap:3px;flex-wrap:wrap}
    .home-character-info .profile-medals img{width:25px;height:25px}
    .home-profile-button{min-height:40px;padding:8px;font-size:11px!important}
    .home-community-learning{margin-top:5px;padding:8px 9px}
    .home-community-learning>strong{margin-bottom:4px;font-size:9px}
    .home-community-learning>div{grid-template-columns:27px minmax(0,1fr);gap:4px}
    .home-community-learning span{font-size:8px}
    .home-community-learning b{font-size:11px}
    .member-like-study-point{grid-template-columns:1fr}
    .home-member-app-list>a>span{display:block;font-size:10px;line-height:1.45}
}

/* =========================================================
   Profile v1 — demo layout promoted to production
========================================================= */
.profile-shell{max-width:1120px}
.profile-demo-layout{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    gap:16px;
}
.profile-character-card,
.profile-status-card,
.profile-reward-card,
.profile-collection-card{
    background:#fff;
    border:1px solid #dde7e3;
    border-radius:18px;
    box-shadow:0 5px 18px rgba(20,32,70,.05);
}
.profile-character-card{
    position:relative;
    min-height:610px;
    padding:18px;
    overflow:hidden;
}
.profile-character-card::before{
    content:"";
    position:absolute;
    left:-15%;right:-15%;bottom:-28%;
    height:55%;
    border-radius:50% 50% 0 0;
    background:linear-gradient(180deg,#f8faff,#edf2ff);
}
.profile-character-heading{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.profile-character-heading strong{font-size:16px}
.profile-character-heading small{color:#7c8798;font-size:10px}
.profile-character-stage{
    position:relative;
    z-index:1;
    height:515px;
}
.character-medal-progress{position:relative;z-index:2;display:grid;grid-template-columns:3fr 2fr;gap:8px;margin-top:8px}.character-medal-progress span{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;color:#6d5310;font-size:12px;font-weight:900;white-space:nowrap}.character-medal-progress img{width:26px;height:26px;object-fit:contain}
.profile-character-avatar{
    position:absolute;
    left:45%;
    bottom:0;
    transform:translateX(-50%);
    height:96%;
    max-width:62%;
    object-fit:contain;
    filter:drop-shadow(0 14px 12px rgba(36,48,78,.11));
}
.profile-character-pet{
    position:absolute;
    left:45%;
    bottom:-1%;
    width:31%;
    aspect-ratio:1;
    z-index:4;
    transition:transform .35s ease;
}
.profile-character-pet.affection-1{transform:translateX(115%)}
.profile-character-pet.affection-2{transform:translateX(85%)}
.profile-character-pet.affection-3{transform:translateX(55%)}
.profile-character-pet.affection-4,
.profile-character-pet.affection-5,
.profile-character-pet.affection-6,
.profile-character-pet.affection-7{transform:translateX(28%)}
.profile-character-pet>img{
    width:100%;height:100%;object-fit:contain;
    filter:drop-shadow(0 10px 10px rgba(36,48,78,.13));
}
.profile-character-hearts{
    position:absolute;
    inset:-50% -28% 10% -28%;
    z-index:5;
    pointer-events:none;
}
.profile-character-hearts span{
    position:absolute;
    color:#ff5f87;
    opacity:0;
    filter:drop-shadow(0 3px 6px rgba(255,70,120,.28));
    animation:none;
}
.profile-character-hearts.hearts-1 span{display:none}
.profile-character-hearts.hearts-1 .h2{display:block}
.profile-character-hearts.hearts-3 span{display:none}
.profile-character-hearts.hearts-3 .h2,
.profile-character-hearts.hearts-3 .h4,
.profile-character-hearts.hearts-3 .h6{display:block}
.profile-character-hearts.hearts-8 span{display:block}
.profile-character-hearts .h1{left:11%;bottom:17%;font-size:25px}
.profile-character-hearts .h2{left:39%;bottom:5%;font-size:39px;animation-delay:.09s}
.profile-character-hearts .h3{right:7%;bottom:27%;font-size:29px;animation-delay:.18s}
.profile-character-hearts .h4{left:1%;top:23%;font-size:33px;animation-delay:.28s}
.profile-character-hearts .h5{left:49%;top:3%;font-size:24px;animation-delay:.39s}
.profile-character-hearts .h6{right:0;top:14%;font-size:41px;animation-delay:.50s}
.profile-character-hearts .h7{left:27%;top:38%;font-size:21px;animation-delay:.60s}
.profile-character-hearts .h8{right:23%;top:44%;font-size:28px;animation-delay:.68s}
.profile-character-hearts.character-idle-heart-burst span{animation:profile-heart-float 1.8s ease-out both}
@keyframes profile-heart-float{
    0%,18%{opacity:0;transform:translateY(18px) scale(.3)}
    34%{opacity:1;transform:translateY(0) scale(1.1)}
    68%{opacity:1}
    100%{opacity:0;transform:translateY(-42px) scale(.78)}
}

.profile-side{display:flex;flex-direction:column;gap:16px}
.profile-status-card{padding:20px}
.profile-status-label{
    display:block;color:#87938e;font-size:9px;font-weight:900;letter-spacing:.09em
}
.profile-status-card h1{
    margin:3px 0 4px;
    font-size:clamp(25px,4vw,34px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.profile-status-card>small{color:#7b8792;font-size:10px}
.profile-medal-status{
    display:flex;align-items:center;gap:10px;
    margin-top:18px;padding:13px;
    border-radius:14px;background:#fff9eb
}
.profile-medal-status img{width:48px;height:48px;object-fit:contain}
.profile-medal-status span{display:grid}
.profile-medal-status small{color:#8d7c4b;font-size:9px;font-weight:900}
.profile-medal-status strong{color:#815d00;font-size:21px}
.profile-small-button{
    display:flex;align-items:center;justify-content:center;
    margin-top:14px;min-height:42px;border-radius:12px;
    background:#f0f3f2;color:#34473f;text-decoration:none;font-size:11px;font-weight:900
}
.profile-guest-copy{
    margin:14px 0 0;color:#7b8792;font-size:10px;line-height:1.65
}
.profile-reward-card{
    padding:16px;display:grid;gap:9px
}
.profile-reward-card>strong{font-size:13px}
.profile-reward-card .primary-button{text-align:center}

.profile-collection-card{margin-top:16px;padding:18px}
.profile-collection-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px
}
.profile-collection-head span{
    color:#87938e;font-size:9px;font-weight:900;letter-spacing:.12em
}
.profile-collection-head h2{margin:2px 0 0;font-size:18px}
.profile-collection-tabs{
    display:flex;
    gap:8px;
    width:min(340px,100%);
}
.profile-tab{
    flex:1;
    min-height:46px;
    border:0;border-radius:999px;padding:10px 16px;
    background:#eef2f2;color:#56655f;font:inherit;font-size:14px;font-weight:900;cursor:pointer
}
.profile-tab.active{background:#20332c;color:#fff}
.profile-collection-panel{display:none}
.profile-collection-panel.active{display:block}
.profile-owned-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:9px
}
.profile-owned-item{margin:0}
.profile-owned-item button{
    width:100%;
    height:100%;
    border:2px solid transparent;
    border-radius:14px;
    padding:7px;
    background:#f7f9f8;
    cursor:pointer;
    font:inherit
}
.profile-owned-item.current button{
    border-color:#3d6be8;background:#f0f4ff;cursor:default
}
.profile-owned-item img{
    display:block;width:100%;object-fit:contain
}
.profile-owned-grid--avatar img{aspect-ratio:9/16}
.profile-owned-grid--pet img{aspect-ratio:1}
.profile-owned-item small{
    display:block;margin-top:4px;text-align:center;
    color:#687386;font-size:9px;font-weight:800
}
.profile-owned-item--locked{
    min-width:0;
}
.profile-locked-card{
    width:100%;
    height:100%;
    border:2px solid #e2e7ee;
    border-radius:14px;
    padding:7px;
    background:#eef1f5;
    box-sizing:border-box;
}
.profile-collection-silhouette{
    position:relative;
    display:block;
    overflow:visible;
}
.profile-collection-silhouette img{
    display:block;
    width:100%;
    object-fit:contain;
    filter:brightness(0);
    opacity:.9;
}
.profile-owned-grid--avatar .profile-collection-silhouette img{aspect-ratio:9/16}
.profile-owned-grid--pet .profile-collection-silhouette img{aspect-ratio:1}
.profile-collection-silhouette::after{
    content:"?";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:clamp(96px,20vw,180px);
    line-height:1;
    font-weight:950;
    -webkit-text-stroke:5px #111;
    paint-order:stroke fill;
    text-shadow:
        -2px -2px 0 #111,
         2px -2px 0 #111,
        -2px  2px 0 #111,
         2px  2px 0 #111;
    pointer-events:none;
}
.profile-owned-item--locked small{
    display:block;
    margin-top:4px;
    text-align:center;
    color:#8a94a3;
    font-size:9px;
    font-weight:800;
}


@media(max-width:900px){
    .profile-demo-layout{grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr)}
    .profile-character-card{min-height:550px}
    .profile-character-stage{height:485px}
    .profile-character-avatar{height:95%;max-width:64%}
    .profile-character-pet{width:32%}
    .profile-owned-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:650px){
    .profile-demo-layout{grid-template-columns:1fr}
    .profile-character-card{min-height:500px}
    .profile-character-stage{height:440px}
    .profile-character-avatar{left:43%;height:94%;max-width:66%}
    .profile-character-pet{left:43%;width:34%}
    .profile-side{display:grid;grid-template-columns:1fr}
    .profile-owned-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .profile-collection-head{align-items:flex-start;flex-direction:column}
}


/* Profile v2 — tablet-first full-width character area */
.profile-character-card--full{
    width:100%;
    min-height:650px;
}
.profile-character-card--full .profile-character-stage{
    height:585px;
}
.profile-character-card--full .profile-character-avatar{
    left:42%;
    height:97%;
    max-width:52%;
}
.profile-character-card--full .profile-character-pet{
    left:42%;
    width:27%;
}
.profile-info-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
}
.profile-info-card{
    min-height:104px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    padding:15px 17px;
    border:1px solid #dde7e3;
    border-radius:16px;
    background:#fff;
    box-shadow:0 3px 12px rgba(20,32,70,.035);
}
.profile-info-card>span{
    color:#87938e;
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
}
.profile-info-card>strong{
    color:#20332c;
    font-size:20px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.profile-info-card>small{
    color:#7b8792;
    font-size:9px;
}
.profile-info-card>a{
    align-self:flex-start;
    color:#238b65;
    font-size:9px;
    font-weight:900;
}
.profile-info-card--medal strong{
    display:flex;
    align-items:center;
    gap:7px;
    color:#815d00;
}
.profile-info-card--medal img{
    width:34px;
    height:34px;
    object-fit:contain;
}
.profile-reward-card--wide{
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.profile-reward-card--wide>div{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* Member-compatible COACH gauge */
.home-coach-strip{
    margin:10px 0 0;
    padding:13px 16px;
    border:1px solid #dde7e3;
    border-radius:16px;
    background:#fff;
    box-shadow:0 3px 14px #18382e0a;
}
.home-coach-strip__head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
}
.home-coach-strip__head strong{
    display:flex;
    align-items:center;
    gap:6px;
    color:#20332c;
    font-size:13px;
}
.home-coach-strip__head strong img{
    width:24px;
    height:24px;
    object-fit:contain;
}
.home-coach-strip__head span{
    color:#73817c;
    font-size:11px;
    font-weight:800;
}
.home-coach-strip__head b{
    min-width:42px;
    text-align:right;
    color:#238b65;
    font-size:14px;
}
.home-coach-gauge{
    height:9px;
    margin-top:9px;
    border-radius:999px;
    background:#edf2ef;
    overflow:hidden;
}
.home-coach-gauge i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#53b89c,#238b65);
    transition:width .35s ease;
}

@media(max-width:900px){
    .profile-character-card--full{min-height:620px}
    .profile-character-card--full .profile-character-stage{height:555px}
    .profile-character-card--full .profile-character-avatar{left:41%;height:97%;max-width:56%}
    .profile-character-card--full .profile-character-pet{left:41%;width:29%}
}
@media(max-width:560px){
    .profile-character-card--full{min-height:500px}
    .profile-character-card--full .profile-character-stage{height:440px}
    .profile-character-card--full .profile-character-avatar{left:41%;height:95%;max-width:61%}
    .profile-character-card--full .profile-character-pet{left:41%;width:33%}
    .profile-info-grid{grid-template-columns:1fr 1fr;gap:8px}
    .profile-info-card{min-height:90px;padding:12px}
    .profile-info-card>strong{font-size:16px}
    .profile-reward-card--wide{align-items:flex-start;flex-direction:column}
    .home-coach-strip__head{grid-template-columns:1fr auto}
    .home-coach-strip__head b{grid-column:2;grid-row:1}
    .home-coach-strip__head span{grid-column:1/-1}
}

/* =========================================================
   Home share + phone character layout v1
   ========================================================= */
.home-share-button{
    width:100%;
    min-height:42px;
    margin-top:2px;
    padding:9px 12px;
    border:1px solid #b9d8cd;
    border-radius:12px;
    background:#fff;
    color:#23775c;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}
.home-share-button:active{transform:translateY(1px)}
.home-share-modal[hidden]{display:none!important}
.home-share-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px}
.home-share-modal__backdrop{position:absolute;inset:0;background:rgba(18,32,27,.52)}
.home-share-modal__panel{position:relative;z-index:1;width:min(440px,100%);padding:22px;border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(18,32,27,.25)}
.home-share-modal__panel h2{margin:0 34px 14px 0;font-size:20px;color:#20332c}
.home-share-modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f0f4f2;color:#52635d;font-size:23px;line-height:1;cursor:pointer}
.home-share-preview{padding:16px;border:1px solid #dde7e3;border-radius:14px;background:#f7faf8;color:#20332c;font-size:14px;font-weight:700;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.home-share-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.home-share-actions button{min-height:44px;border-radius:12px;font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.home-share-copy{border:1px solid #b9d8cd;background:#fff;color:#23775c}
.home-share-send{border:1px solid #20332c;background:#20332c;color:#fff}
.home-share-status{min-height:1.4em;margin:9px 0 0;text-align:center;color:#23775c;font-size:11px;font-weight:800}
body.home-share-modal-open{overflow:hidden}

@media(max-width:560px){
    .home-character-card{
        grid-template-columns:1fr;
        min-height:0;
        padding:10px;
        gap:6px;
        align-items:stretch;
    }
    .home-character-stage{
        width:100%;
        height:300px;
        justify-self:stretch;
    }
    .home-character-avatar{
        left:43%;
        height:298px;
        max-width:205px;
    }
    .home-character-pet{
        left:43%;
        width:108px;
        height:108px;
        bottom:-2px;
    }
    .home-character-info{
        width:100%;
        padding:10px 2px 2px;
        gap:6px;
    }
    .home-character-info>strong{font-size:19px}
    .home-character-info .profile-label{font-size:9px}
    .home-character-info .profile-medals{font-size:10px;gap:5px;flex-wrap:nowrap}
    .home-character-info .profile-medals img{width:27px;height:27px}
    .home-profile-button{min-height:40px;padding:8px;font-size:11px!important}
    .home-community-learning{margin-top:4px;padding:9px 10px}
    .home-community-learning>strong{margin-bottom:5px;font-size:10px}
    .home-community-learning>div{grid-template-columns:32px minmax(0,1fr);gap:5px}
    .home-community-learning span{font-size:9px}
    .home-community-learning b{font-size:12px}
    .home-share-button{min-height:40px;font-size:11px}
    .home-share-modal{padding:12px}
    .home-share-modal__panel{padding:18px 15px 15px;border-radius:17px}
    .home-share-preview{font-size:13px;padding:13px}
}


/* =========================================================
   Learning app touch/zoom control
   /apps/* pages only: prevent double-tap browser zoom and
   keep rapid answer/keypad taps inside the learning UI.
========================================================= */
body.learning-viewport-locked{
    touch-action:manipulation;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
body.learning-viewport-locked button,
body.learning-viewport-locked a,
body.learning-viewport-locked input,
body.learning-viewport-locked select,
body.learning-viewport-locked textarea,
body.learning-viewport-locked canvas,
body.learning-viewport-locked [role="button"]{
    touch-action:manipulation;
}


/* CALC: subtle wrong-answer feedback without a × mark. */
.calc-answer-shake{
    animation:calc-answer-shake .18s ease-in-out 1;
}
@keyframes calc-answer-shake{
    0%,100%{transform:translateX(0)}
    30%{transform:translateX(-7px)}
    65%{transform:translateX(7px)}
}


/* =========================================================
   Learning pet — shared across /apps/*
========================================================= */
.learning-pet[hidden]{display:none!important}
.learning-pet{
    position:fixed;
    right:clamp(18px,3vw,40px);
    bottom:clamp(18px,3vw,34px);
    z-index:850;
    display:flex;
    align-items:flex-end;
    gap:10px;
    pointer-events:none;
}
.learning-pet__pet{
    position:relative;
    width:clamp(120px,16vw,210px);
    aspect-ratio:1;
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
    pointer-events:auto;
    touch-action:manipulation;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.16));
}
.learning-pet__pet img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .18s ease;
}
.learning-pet__pet:active img{transform:scale(.96)}
.learning-pet__menu{
    position:absolute;
    right:0;
    bottom:calc(100% + 8px);
    min-width:138px;
    padding:8px;
    border:1px solid #e4e8ef;
    border-radius:14px;
    background:rgba(255,255,255,.97);
    box-shadow:0 12px 30px rgba(15,23,42,.18);
    pointer-events:auto;
}
.learning-pet__menu[hidden]{display:none}
.learning-pet__menu button{
    width:100%;
    min-height:42px;
    border:0;
    border-radius:10px;
    background:#f3f5f8;
    color:#26313e;
    font:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}
.learning-pet__sparkles{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:visible;
}
.learning-pet__spark{
    position:absolute;
    left:50%;
    top:50%;
    color:#ffd84d;
    font-size:clamp(34px,5vw,58px);
    opacity:0;
    filter:drop-shadow(0 0 8px rgba(255,216,77,.95));
    text-shadow:
        0 0 7px rgba(255,255,255,.95),
        0 0 16px rgba(255,216,77,.95),
        0 2px 8px rgba(176,118,0,.35);
}
.learning-pet.is-sparkling .learning-pet__spark{
    animation:learning-pet-spark 1s ease-out both;
}
.learning-pet__spark.s1{--x:-92px;--y:-102px;animation-delay:.00s!important}
.learning-pet__spark.s2{--x:88px;--y:-92px;animation-delay:.08s!important}
.learning-pet__spark.s3{--x:-108px;--y:4px;animation-delay:.14s!important}
.learning-pet__spark.s4{--x:104px;--y:0px;animation-delay:.20s!important}
.learning-pet__spark.s5{--x:-30px;--y:-122px;animation-delay:.26s!important}
.learning-pet__spark.s6{--x:34px;--y:88px;animation-delay:.32s!important}
.learning-pet__spark.s7{--x:-104px;--y:74px;animation-delay:.18s!important}
.learning-pet__spark.s8{--x:102px;--y:72px;animation-delay:.28s!important}

.learning-pet.is-sparkling .learning-pet__pet img{
    animation:learning-pet-happy-wiggle .58s ease-in-out 1;
}
@keyframes learning-pet-happy-wiggle{
    0%,100%{transform:translateX(0) rotate(0) scale(1)}
    20%{transform:translateX(-4px) rotate(-3deg) scale(1.02)}
    45%{transform:translateX(5px) rotate(3deg) scale(1.035)}
    70%{transform:translateX(-3px) rotate(-2deg) scale(1.02)}
}
@keyframes learning-pet-spark{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-12deg)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.35) rotate(3deg)}
    58%{opacity:1}
    100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.7) rotate(30deg)}
}
.learning-pet-footprint{
    position:fixed;
    right:clamp(14px,2.5vw,28px);
    bottom:clamp(14px,2.5vw,28px);
    z-index:850;
    width:54px;
    height:54px;
    border:1px solid #dce4e1;
    border-radius:50%;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.14);
    font-size:26px;
    cursor:pointer;
    touch-action:manipulation;
}
.learning-pet-footprint[hidden]{display:none}

@media(max-width:900px){
    .learning-pet{right:18px;bottom:18px}
    .learning-pet__pet{width:clamp(120px,22vw,180px)}
}
@media(max-width:650px){
    .learning-pet{right:8px;bottom:8px}
    .learning-pet__pet{width:86px}
    .learning-pet__spark{font-size:26px}
    .learning-pet__spark.s1{--x:-48px;--y:-54px}
    .learning-pet__spark.s2{--x:46px;--y:-50px}
    .learning-pet__spark.s3{--x:-54px;--y:2px}
    .learning-pet__spark.s4{--x:52px;--y:0px}
    .learning-pet__spark.s5{--x:-16px;--y:-62px}
    .learning-pet__spark.s6{--x:18px;--y:46px}
    .learning-pet__spark.s7{--x:-50px;--y:38px}
    .learning-pet__spark.s8{--x:50px;--y:38px}
    .learning-pet__menu{right:0;bottom:calc(100% + 5px);min-width:118px}
    .learning-pet__menu button{min-height:38px;font-size:12px}
    .learning-pet-footprint{right:8px;bottom:8px;width:46px;height:46px;font-size:22px}
}


/* =========================================================
   Character idle motion
   6秒ごとにアバター → 0.41秒後にペット。
   アバターは最大1.005倍の静かな大小大小。
========================================================= */
.home-character-avatar.character-idle-avatar-motion,
.profile-character-avatar.character-idle-avatar-motion,
.character-avatar.character-idle-avatar-motion{
    transform-origin:center bottom;
    animation:character-idle-avatar-pulse .82s ease-in-out;
}
@keyframes character-idle-avatar-pulse{
    0%,100%{scale:1}
    25%{scale:1.005}
    50%{scale:.9985}
    75%{scale:1.004}
}
.home-character-pet>img.character-idle-pet-motion,
.profile-character-pet>img.character-idle-pet-motion,
.character-pet>img.character-idle-pet-motion{
    transform-origin:center bottom;
    animation:character-idle-pet-reaction .72s ease-in-out;
}
@keyframes character-idle-pet-reaction{
    0%,100%{transform:translate(0,0) rotate(0) scale(1)}
    24%{transform:translate(-2px,-2px) rotate(-1.5deg) scale(1.025)}
    48%{transform:translate(2px,-3px) rotate(1.5deg) scale(1.045)}
    72%{transform:translate(-1px,-1px) rotate(-.7deg) scale(1.02)}
}

/* Guest cumulative STUDY POINT info */
.home-study-point-total{position:relative}
.home-info-button{
    appearance:none;border:0;background:transparent;padding:0 2px;margin:0;
    color:#73817c;font:inherit;font-weight:900;line-height:1;cursor:pointer;
}
.home-info-popover{
    position:absolute;left:12px;right:12px;bottom:7px;z-index:8;
    padding:7px 9px;border:1px solid #dde7e3;border-radius:9px;
    background:#fff;color:#596963;font:inherit;font-size:10px;font-weight:800;
    line-height:1.35;text-align:left;box-shadow:0 4px 14px rgba(24,56,46,.10);
    cursor:pointer;
}
.home-info-popover[hidden]{display:none}


/* manabis home character fit v4
   Character geometry is calculated directly by JS from the confirmed
   smartphone/tablet/desktop demo rules. Existing card/stage sizes are untouched. */
.home-character-stage[data-home-character-fit]{
    overflow:hidden;
}


/* Smartphone profile character relationship
   Keep the existing profile box size; use the confirmed demo's mobile proportions only. */
@media(max-width:560px){
    .profile-character-card--full .profile-character-avatar{
        height:90%;
        max-width:78%;
    }
    .profile-character-card--full .profile-character-pet{
        bottom:-1%;
        width:38%;
    }
}


/* Smartphone profile: compact one-column character card.
   Tablet/desktop remain unchanged. */
@media(max-width:560px){
    .profile-character-card--full{
        min-height:410px;
    }
    .profile-character-card--full .profile-character-stage{
        height:350px;
    }
}


/* Smartphone profile pet horizontal placement
   Distance 3 must never clip: use the confirmed demo's right-edge positions. */
@media(max-width:560px){
    .profile-character-card--full .profile-character-pet{
        left:auto;
        right:0;
        transform:none;
    }
    .profile-character-card--full .profile-character-pet.affection-1{
        right:0;
        transform:none;
    }
    .profile-character-card--full .profile-character-pet.affection-2{
        right:6%;
        transform:none;
    }
    .profile-character-card--full .profile-character-pet.affection-3{
        right:12%;
        transform:none;
    }
    .profile-character-card--full .profile-character-pet.affection-4,
    .profile-character-card--full .profile-character-pet.affection-5,
    .profile-character-card--full .profile-character-pet.affection-6,
    .profile-character-card--full .profile-character-pet.affection-7{
        right:15%;
        transform:none;
    }
}


/* Smartphone profile fit v2:
   profile-mobile-fit.js is authoritative for character geometry on <=560px.
   Tablet and desktop continue to use existing CSS unchanged. */
@media(max-width:560px){
    .profile-character-stage[data-profile-mobile-fit]{
        overflow:hidden;
    }
}


/* Smartphone HOME / PROFILE character areas are intentionally identical. */
@media(max-width:560px){
    .profile-character-card--full{
        min-height:360px;
    }
    .profile-character-card--full .profile-character-stage{
        height:300px;
    }
    .profile-character-stage[data-profile-mobile-fit],
    .home-character-stage[data-home-character-fit]{
        overflow:hidden;
    }
}

/* Pet affection level-up notice */
.pet-affection-modal[hidden]{display:none!important}
.pet-affection-modal{
    position:fixed;
    inset:0;
    z-index:12000;
    display:grid;
    place-items:center;
    padding:18px;
}
.pet-affection-modal__backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(19,31,28,.42);
}
.pet-affection-modal__panel{
    position:relative;
    z-index:1;
    width:min(340px,calc(100vw - 36px));
    display:grid;
    justify-items:center;
    gap:7px;
    padding:25px 20px 20px;
    border:1px solid #e1e9e6;
    border-radius:22px;
    background:#fff;
    box-shadow:0 20px 60px rgba(16,35,29,.22);
    text-align:center;
    animation:pet-affection-modal-in .28s cubic-bezier(.2,.85,.25,1.12) both;
}
.pet-affection-modal__icon{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    border-radius:50%;
    background:#fff0f4;
    color:#ff5f87;
    font-size:31px;
    line-height:1;
}
.pet-affection-modal__panel strong{
    color:#20332c;
    font-size:19px;
}
.pet-affection-modal__panel b{
    color:#23775c;
    font-size:26px;
}
.pet-affection-modal__close{
    min-width:112px;
    min-height:42px;
    margin-top:5px;
    border:0;
    border-radius:12px;
    background:#20332c;
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}
@keyframes pet-affection-modal-in{
    from{opacity:0;transform:translateY(10px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}


/* =========================================================
   Pet collection / hatch — smartphone image fit
   New and owned pets must always show the whole artwork.
========================================================= */
@media(max-width:560px){
    .hatch-animation{
        width:100%;
        max-width:100%;
        min-height:0;
        margin:14px auto 22px;
        overflow:visible;
    }
    .hatch-animation__egg{
        width:100%;
    }
    .hatch-animation__egg img{
        display:block;
        width:min(220px,62vw);
        height:auto;
        max-width:100%;
        max-height:220px;
        margin:0 auto;
        aspect-ratio:1;
        object-fit:contain;
    }
    .hatch-animation__result{
        width:100%;
        max-width:100%;
        overflow:visible;
    }
    .hatch-animation__result img{
        display:block;
        width:min(220px,62vw);
        height:auto;
        max-width:100%;
        max-height:220px;
        margin:0 auto;
        aspect-ratio:1;
        object-fit:contain;
    }

    .character-grid--pet{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    .character-grid--pet .character-card{
        min-width:0;
    }
    .character-grid--pet .character-art{
        width:100%;
        height:auto;
        aspect-ratio:1;
        padding:10px;
        overflow:visible;
        box-sizing:border-box;
    }
    .character-grid--pet .character-art img{
        display:block;
        width:100%;
        height:100%;
        max-width:100%;
        max-height:100%;
        margin:auto;
        object-fit:contain;
        object-position:center;
    }
}


/* Prevent double-tap zoom on active learning / reward interactions.
   Pinch zoom remains governed by the page viewport policy. */
.learning-viewport-locked button,
.learning-viewport-locked a,
.learning-viewport-locked [role="button"],
.learning-viewport-locked input,
.learning-viewport-locked select,
.learning-viewport-locked label{
    touch-action:manipulation;
}

/* Yomi漢 */
.yomikan-shell{max-width:900px;padding-top:0}.yomikan-gauge-panel{position:sticky;top:0;z-index:100;margin:0 -10px 10px;border-top:0;border-radius:0 0 14px 14px;background:rgba(255,255,255,.97);box-shadow:0 5px 16px rgba(18,26,62,.10)}.yomikan-start-card{text-align:center}.yomikan-start-heading p{margin:0;color:var(--brand-dark);font-size:13px;font-weight:900}.yomikan-start-heading h1{margin:5px 0 6px;font-size:clamp(25px,5vw,38px)}.yomikan-start-heading span{color:var(--muted);font-size:13px}.yomikan-course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px auto 14px;width:min(680px,100%)}.yomikan-course-grid a{min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:15px;border:1px solid #d8e0e7;border-radius:15px;background:#fff;color:#273247;text-decoration:none;box-shadow:0 4px 14px rgba(21,29,49,.05)}.yomikan-course-grid strong{font-size:19px}.yomikan-course-grid span{color:#687286;font-size:12px;font-weight:700}.yomikan-finish-link{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:0 28px;border-radius:11px;background:#4a5569;color:#fff;text-decoration:none;font-weight:900}.yomikan-current-bar{display:grid;grid-template-columns:minmax(0,1fr) 76px 76px;gap:7px;align-items:center;margin-bottom:10px}.yomikan-current-bar strong,.yomikan-current-bar a{min-height:40px;display:flex;align-items:center;justify-content:center;padding:0 10px;border:1px solid #d7dde7;border-radius:10px;background:#fff;color:#344054;font-size:13px;font-weight:900;text-decoration:none}.yomikan-current-bar strong{justify-content:flex-start}.yomikan-current-bar a:last-child{background:#4a5569;color:#fff}.yomikan-play-card{text-align:center;padding-top:20px}.yomikan-word{min-height:66px;display:flex;align-items:center;justify-content:center;font-size:clamp(34px,8vw,58px);font-weight:900;line-height:1.25;letter-spacing:.04em}.yomikan-slots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:45px;margin:13px auto 2px}.yomikan-slot{width:clamp(28px,7vw,42px);height:42px;border-bottom:4px solid #cbd3de;color:#1f2b3d;font-size:clamp(24px,6vw,34px);font-weight:900;line-height:38px}.yomikan-slot.is-filled{border-color:var(--brand)}.yomikan-slot.is-hint{color:#9a7018;border-color:#d3ab4f}.yomikan-slots.is-wrong{animation:yomikan-shake .24s ease-in-out}.yomikan-feedback{min-height:30px;margin:8px 0 8px;font-size:17px;font-weight:900}.yomikan-feedback.is-correct{color:#15804f}.yomikan-feedback.is-wrong{color:#b53c3c}.yomikan-feedback.is-hint,.yomikan-feedback.is-pass{color:#8b6618}.yomikan-keyboard{width:min(760px,100%);margin:0 auto}.yomikan-keyboard-page{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.yomikan-key,.yomikan-key-gap{aspect-ratio:1/1;min-width:0}.yomikan-key{border:1px solid #d4dae4;border-radius:9px;background:#fff;color:#1d2536;box-shadow:0 2px 8px rgba(21,29,49,.04);font:inherit;font-size:clamp(16px,4vw,25px);font-weight:900;cursor:pointer}.yomikan-key:active{transform:scale(.95);background:#f1fbf9}.yomikan-key:disabled{opacity:.55;cursor:default}.yomikan-keyboard-actions{display:grid;grid-template-columns:1.15fr 1fr 1.25fr;gap:6px;margin-top:8px}.yomikan-keyboard-actions button,.yomikan-learning-actions button{min-height:48px;border:0;border-radius:11px;font:inherit;font-size:13px;font-weight:900;cursor:pointer}.yomikan-keyboard-actions button{background:#edf0f4;color:#394255}.yomikan-keyboard-actions button:first-child{background:#e8f5f2;color:#22675c}.yomikan-learning-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(760px,100%);margin:9px auto 0}.yomikan-learning-actions #yomikanHint{background:#fff3d9;color:#825c10}.yomikan-learning-actions #yomikanPass{background:#f8e9e9;color:#934141}.yomikan-keyboard-actions button:disabled,.yomikan-learning-actions button:disabled{opacity:.55;cursor:default}@keyframes yomikan-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-5px)}}@media(max-width:720px){.yomikan-course-grid{grid-template-columns:1fr}.yomikan-play-card{padding-inline:10px}.yomikan-keyboard-page{gap:3px}.yomikan-key{border-radius:7px}.yomikan-keyboard-actions,.yomikan-learning-actions{gap:5px}.yomikan-keyboard-actions button,.yomikan-learning-actions button{min-height:44px;font-size:12px}}
.yomikan-keyboard-page[hidden]{display:none}

/* Effort Award share card */
.home-share-award-wrap{
    overflow:hidden;
    border:1px solid #dde7e3;
    border-radius:16px;
    background:#f4faf7;
}
.home-share-award{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1;
    background:#f4faf7;
}
.home-share-note{
    margin:10px 2px 0;
    color:#7b8984;
    font-size:10px;
    line-height:1.5;
    text-align:center;
}
@media(max-width:560px){
    .home-share-modal__panel{
        max-height:calc(100dvh - 24px);
        overflow:auto;
    }
    .home-share-modal__panel h2{font-size:18px}
    .home-share-actions{grid-template-columns:1fr}
}