@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Kosugi+Maru&display=swap');

/* ============ マナバト！ 共通スタイル ============ */
:root {
    --primary: #FFDE59;
    --secondary: #64C5EB;
    --accent: #FF9BCC;
    --dark: #444;
    --gray: #f4f8fb;
    --line: #e3e9ed;
    --red: #ff6b6b;
    --radius: 20px;
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
    font-family: 'Kosugi Maru', sans-serif;
    background: linear-gradient(180deg, #e8f6ff 0%, #f4f8fb 300px);
    color: var(--dark);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .scr-title, .mb-logo, .auth-title { font-family: 'Mochiy Pop One', cursive; }
button { font-family: inherit; cursor: pointer; }
input, select {
    font-family: inherit; font-size: 1rem;
    padding: 10px 14px; border: 3px solid var(--line); border-radius: 14px;
    width: 100%; background: #fff;
}
input:focus, select:focus { border-color: var(--secondary); outline: none; }
label { display: block; margin-bottom: 14px; font-weight: bold; font-size: 0.9rem; }
label input, label select { margin-top: 6px; font-weight: normal; }

#app { max-width: 860px; margin: 0 auto; padding: 0 14px 60px; }

/* ---- ヘッダー ---- */
.mb-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 4px; flex-wrap: wrap;
}
.mb-logo { font-size: 1.4rem; color: #ff8c42; text-shadow: 2px 2px 0 #fff; cursor: pointer; }
.mb-sub { font-size: 0.85rem; color: #888; flex: 1; }
.mb-pts {
    background: #fff; border: 3px solid var(--primary); border-radius: 50px;
    padding: 4px 14px; font-size: 0.95rem; box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}

/* ---- 共通ボタン ---- */
.btn-big {
    display: block; width: 100%; max-width: 380px; margin: 18px auto 0;
    background: var(--red); color: #fff; border: none; border-radius: 50px;
    padding: 15px 20px; font-size: 1.1rem; font-weight: bold;
    box-shadow: 0 5px 0 #b33939; transition: transform 0.1s;
}
.btn-big:hover { transform: translateY(2px); box-shadow: 0 3px 0 #b33939; }
.btn-mini {
    background: var(--secondary); color: #fff; border: none; border-radius: 50px;
    padding: 10px 18px; font-size: 0.9rem; font-weight: bold;
    box-shadow: 0 3px 0 #3f8cab;
}
.btn-back {
    display: block; margin: 20px auto 0; background: none; border: none;
    color: #888; font-size: 0.9rem; text-decoration: underline;
}
.scr-title { text-align: center; color: var(--secondary); margin: 10px 0 16px; }

/* ---- トースト ---- */
.toast {
    position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
    background: #333; color: #fff; padding: 12px 22px; border-radius: 50px;
    font-size: 0.9rem; opacity: 0; transition: all 0.3s; z-index: 999; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-err { background: #c0392b; }

/* ---- 認証 ---- */
.auth-wrap {
    max-width: 460px; margin: 20px auto; background: #fff;
    border: 4px solid var(--primary); border-radius: var(--radius);
    padding: 26px; box-shadow: 0 8px 0 rgba(0,0,0,0.08);
}
.auth-title { text-align: center; color: #ff8c42; margin: 0; font-size: 2rem; }
.auth-catch { text-align: center; color: #888; font-size: 0.85rem; margin-top: 4px; }
.auth-tabs { display: flex; gap: 6px; margin: 18px 0; }
.auth-tab {
    flex: 1; background: var(--gray); border: 2px solid var(--line); border-radius: 50px;
    padding: 8px 4px; font-size: 0.8rem; font-weight: bold; color: #777;
}
.auth-tab.on { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.auth-note { font-size: 0.75rem; color: #999; margin-top: 16px; }
.remind-q { background: var(--gray); border-radius: 12px; padding: 10px 14px; font-weight: bold; }

/* ---- アバター編集 ---- */
.ed-wrap { background: #fff; border: 4px solid var(--accent); border-radius: var(--radius); padding: 20px; }
.ed-preview { text-align: center; background: var(--gray); border-radius: 16px; padding: 10px; }
.ed-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ed-label { font-weight: bold; font-size: 0.85rem; width: 90px; }
.ed-opts { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.ed-opt {
    border: 3px solid var(--line); background: #fff; border-radius: 12px;
    padding: 7px 12px; font-size: 0.85rem;
}
.ed-opt.on { border-color: var(--red); background: #fff2f2; font-weight: bold; }
.ed-swatch { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.ed-swatch.on { outline: 3px solid var(--red); outline-offset: 2px; }
.ed-actions { text-align: center; margin-top: 18px; }

/* ---- ホーム ---- */
.home-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.home-avatar { flex: 0 0 200px; margin: 0 auto; text-align: center; }
.home-avbox {
    background: #fff; border: 4px solid var(--primary); border-radius: var(--radius);
    padding: 14px; box-shadow: 0 6px 0 rgba(0,0,0,0.08);
}
.home-nick { font-weight: bold; margin-top: 8px; }
.home-menu { flex: 1; min-width: 260px; display: grid; gap: 12px; }
.menu-card {
    text-align: left; background: #fff; border: 3px solid var(--line); border-radius: 16px;
    padding: 14px 18px; font-size: 1.05rem; font-weight: bold; color: var(--dark);
    box-shadow: 0 4px 0 rgba(0,0,0,0.06); transition: transform 0.1s;
}
.menu-card:hover { transform: translateY(-2px); border-color: var(--secondary); }
.menu-card small { display: block; font-size: 0.78rem; color: #999; font-weight: normal; }
.menu-card.resume { border-color: var(--red); background: #fff7f7; }

/* ---- 教科えらび ---- */
.subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.subj-card {
    background: #fff; border: 4px solid var(--line); border-radius: var(--radius);
    padding: 18px; text-align: center; transition: transform 0.12s;
    display: flex; flex-direction: column; gap: 4px;
}
.subj-card:hover { transform: translateY(-4px); }
.subj-icon { font-size: 2.4rem; }
.subj-name { font-family: 'Mochiy Pop One', cursive; font-size: 1.2rem; }
.subj-game { font-weight: bold; color: var(--secondary); font-size: 0.95rem; }
.subj-desc { font-size: 0.78rem; color: #888; }
.subj-eng  { border-color: #8B4513; } .subj-eng .subj-game { color: #8B4513; }
.subj-math { border-color: #0077b6; } .subj-math .subj-game { color: #0077b6; }
.subj-jpn  { border-color: #c94f4f; } .subj-jpn .subj-game { color: #c94f4f; }
.subj-sci  { border-color: #2d8a4e; } .subj-sci .subj-game { color: #2d8a4e; }
.subj-soc  { border-color: #7b4fd1; } .subj-soc .subj-game { color: #7b4fd1; }

/* ---- ゲーム前の要点カード ---- */
.pre-wrap { background: #fff; border: 4px solid var(--secondary); border-radius: var(--radius); padding: 24px; text-align: center; }
.pre-desc { color: #666; }
.pre-units {
    text-align: left; background: var(--gray); border-radius: 14px; padding: 14px 18px;
    max-width: 460px; margin: 14px auto; font-size: 0.9rem;
}
.pre-units ul { margin: 6px 0 0; padding-left: 1.3em; }
.pre-tip { font-size: 0.85rem; color: #e67e22; font-weight: bold; }

/* ---- ゲーム共通 ---- */
.game-area {
    background: #fff; border: 4px solid var(--primary); border-radius: var(--radius);
    padding: 14px; min-height: 480px; position: relative;
}
.g-hud { display: flex; justify-content: space-between; font-weight: bold; padding: 2px 6px 8px; }
.shake { animation: shake 0.3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ワードシューター / 計算メテオ */
.ws-field, .mm-field {
    position: relative; height: 340px; border-radius: 14px; overflow: hidden;
    background: linear-gradient(180deg, #1a2a52 0%, #3b4d85 100%);
}
.ws-avatar { position: absolute; left: 6px; bottom: 8px; z-index: 2; }
.ws-enemy {
    position: absolute; display: flex; flex-direction: column; align-items: center;
    transition: opacity 0.3s; z-index: 1;
}
.ws-ghost { font-size: 2.2rem; }
.ws-word {
    background: #fff; border-radius: 50px; padding: 2px 12px; font-weight: bold;
    font-size: 0.85rem; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.ws-boom { animation: boom 0.35s forwards; }
@keyframes boom { to { transform: scale(1.8); opacity: 0; } }
.ws-leak { animation: leak 0.35s forwards; }
@keyframes leak { to { transform: translateY(20px); opacity: 0; } }
.ws-form, .mm-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ws-input, .mm-input { flex: 1; min-width: 180px; }
.mm-town { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
.mm-avatar { display: inline-block; vertical-align: bottom; }
.mm-houses { font-size: 1.9rem; letter-spacing: 4px; }
.mm-meteor {
    position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 1;
}
.mm-rock { font-size: 2.4rem; }
.mm-q {
    background: #fff; border-radius: 12px; padding: 2px 12px; font-weight: bold;
    white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.mm-pad { display: flex; gap: 5px; width: 100%; flex-wrap: wrap; }
.mm-key {
    flex: 1; min-width: 40px; background: var(--gray); border: 2px solid var(--line);
    border-radius: 10px; padding: 8px 0; font-size: 1rem; font-weight: bold;
}

/* 漢字ペアフリップ */
.pf-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pf-msg { font-weight: bold; color: #e67e22; flex: 1; }
.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf-card {
    position: relative; aspect-ratio: 3/2; border: 3px solid var(--line); border-radius: 12px;
    background: var(--secondary); font-size: 1rem; font-weight: bold; color: #fff;
    overflow: hidden; padding: 2px;
}
.pf-card .pf-back { display: none; }
.pf-card.open, .pf-card.done { background: #fff; color: var(--dark); border-color: var(--accent); }
.pf-card.open .pf-front, .pf-card.done .pf-front { display: none; }
.pf-card.open .pf-back, .pf-card.done .pf-back { display: block; }
.pf-card.done { opacity: 0.55; border-color: #2ecc71; }

/* サイエンスランナー */
.rn-q {
    background: var(--gray); border-radius: 12px; padding: 8px 14px;
    font-weight: bold; margin-bottom: 8px; min-height: 42px;
}
.rn-wrap { border-radius: 14px; overflow: hidden; }
.rn-wrap canvas { display: block; width: 100%; }
.rn-hint { text-align: center; font-size: 0.78rem; color: #999; margin-top: 6px; }

/* クイズバトル */
.qb-stage { display: flex; align-items: center; justify-content: space-around; padding: 8px 0 14px; }
.qb-side { text-align: center; width: 40%; }
.qb-vs { font-family: 'Mochiy Pop One', cursive; color: var(--red); font-size: 1.3rem; }
.qb-enemy { font-size: 4rem; line-height: 1.1; }
.qb-hit { animation: hitflash 0.4s; }
@keyframes hitflash { 0%,100%{filter:none; transform:none} 50%{filter:brightness(2); transform:translateX(8px)} }
.qb-bar { background: #eee; border-radius: 50px; height: 12px; overflow: hidden; margin-top: 6px; }
.qb-fill { height: 100%; transition: width 0.4s; }
.qb-me { background: #2ecc71; }
.qb-foe { background: var(--red); }
.qb-name { font-size: 0.85rem; font-weight: bold; margin-top: 4px; }
.qb-qbox { background: var(--gray); border-radius: 14px; padding: 16px; }
.qb-q { font-weight: bold; margin: 0 0 12px; }
.qb-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qb-choice {
    background: #fff; border: 3px solid var(--line); border-radius: 12px;
    padding: 12px 8px; font-size: 0.92rem; font-weight: bold;
}
.qb-choice:hover:not(:disabled) { border-color: var(--secondary); }
.qb-choice.is-right { border-color: #2ecc71; background: #eafff1; }
.qb-choice.is-wrong { border-color: var(--red); background: #ffecec; }
.qb-exp { color: #c0392b; font-size: 0.88rem; font-weight: bold; margin: 10px 0 0; }
@media (max-width: 520px) { .qb-choices { grid-template-columns: 1fr; } }

/* ---- けっか・ふりかえり ---- */
.res-wrap { background: #fff; border: 4px solid var(--primary); border-radius: var(--radius); padding: 24px; }
.res-stats {
    display: flex; justify-content: center; gap: 24px; font-size: 1.15rem;
    background: var(--gray); border-radius: 14px; padding: 12px; flex-wrap: wrap;
}
.res-review h3 { color: #e67e22; }
.res-wrong { background: #fff8f0; border: 2px dashed #ffb74d; border-radius: 12px; padding: 10px 16px; margin-bottom: 10px; }
.rw-q { font-weight: bold; margin: 0; }
.rw-a { margin: 4px 0 0; color: #2d8a4e; }
.rw-exp { margin: 4px 0 0; font-size: 0.85rem; color: #888; }
.res-perfect { text-align: center; font-size: 1.3rem; font-weight: bold; color: #e6a817; }
.res-actions { text-align: center; margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.res-actions .btn-big { margin: 0; width: auto; }

/* ---- クイズモード ---- */
.quiz-wrap { background: #fff; border: 4px solid var(--secondary); border-radius: var(--radius); padding: 22px; }
.quiz-top { display: flex; justify-content: space-between; align-items: center; }
.quiz-count { font-weight: bold; color: var(--secondary); }
.quiz-unit { font-size: 0.8rem; color: #999; margin: 4px 0; }
.quiz-q { font-size: 1.15rem; font-weight: bold; }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-choice {
    background: #fff; border: 3px solid var(--line); border-radius: 14px;
    padding: 14px 10px; font-size: 1rem; font-weight: bold;
}
.quiz-choice:hover:not(:disabled) { border-color: var(--secondary); }
.quiz-choice.is-right { border-color: #2ecc71; background: #eafff1; }
.quiz-choice.is-wrong { border-color: var(--red); background: #ffecec; }
.quiz-fb { margin-top: 14px; text-align: center; }
.fb-ok { color: #2d8a4e; font-weight: bold; }
.fb-ng { color: #c0392b; font-weight: bold; }
.quiz-empty { text-align: center; color: #888; padding: 30px 0; }
@media (max-width: 520px) { .quiz-choices { grid-template-columns: 1fr; } }

/* ---- ガチャ ---- */
.gc-wrap { background: #fff; border: 4px solid var(--accent); border-radius: var(--radius); padding: 24px; text-align: center; }
.gc-machine { font-size: 4.5rem; margin: 8px 0; display: inline-block; }
.gc-machine.spin { animation: spin-shake 0.9s; }
@keyframes spin-shake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg)} 40%{transform:rotate(12deg)} 60%{transform:rotate(-9deg)} 80%{transform:rotate(6deg)} }
.gc-rates { font-size: 0.75rem; color: #999; }
.gc-card {
    display: inline-block; background: #fff; border: 4px solid; border-radius: 16px;
    padding: 16px 30px; margin-top: 10px; box-shadow: 0 5px 0 rgba(0,0,0,0.08);
}
.gc-card.gc-new { animation: pop-in 0.4s; }
@keyframes pop-in { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gc-emoji { font-size: 3rem; display: block; }
.gc-rar { display: inline-block; color: #fff; font-size: 0.75rem; border-radius: 50px; padding: 2px 12px; font-weight: bold; margin: 4px 0; }
.gc-card p { font-size: 0.8rem; color: #888; margin: 4px 0 0; }
.gc-invtitle { margin: 22px 0 8px; }
.gc-inv { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gc-item {
    display: inline-flex; flex-direction: column; align-items: center;
    border: 3px solid; border-radius: 12px; padding: 6px 10px; font-size: 1.5rem; background: var(--gray);
}
.gc-item small { font-size: 0.6rem; font-weight: bold; color: #888; }
.gc-none { color: #999; }

/* ---- きせかえ ---- */
.dr-wrap { background: #fff; border: 4px solid var(--secondary); border-radius: var(--radius); padding: 24px; }
.dr-preview { text-align: center; background: var(--gray); border-radius: 16px; padding: 10px; }
.dr-slot { margin-top: 14px; }
.dr-slotname { font-weight: bold; font-size: 0.9rem; }
.dr-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dr-item {
    border: 3px solid var(--line); background: #fff; border-radius: 12px;
    padding: 8px 12px; font-size: 1.3rem;
}
.dr-item.on { outline: 3px solid var(--red); outline-offset: 1px; }

/* ---- 学習のきろく ---- */
.pg-wrap { display: grid; gap: 14px; }
.pg-weakbox {
    background: #fff4e5; border: 3px dashed #ffb74d; border-radius: 14px;
    padding: 12px 18px; font-weight: bold; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pg-card { background: #fff; border: 4px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.pg-head { display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 1.05rem; }
.pg-barwrap { background: #eee; border-radius: 50px; height: 12px; margin: 10px 0 6px; overflow: hidden; }
.pg-bar { height: 100%; background: linear-gradient(90deg, var(--secondary), #2ecc71); border-radius: 50px; }
.pg-stats { font-size: 0.85rem; color: #777; margin: 0; }
.pg-units summary { cursor: pointer; font-size: 0.85rem; color: var(--secondary); font-weight: bold; margin-top: 6px; }
.pg-unit { font-size: 0.85rem; margin: 4px 0; }

/* ---- せってい ---- */
.st-wrap { background: #fff; border: 4px solid var(--line); border-radius: var(--radius); padding: 24px; }
.st-mode { font-size: 0.85rem; color: #888; text-align: center; }
.st-block { border-top: 2px dashed var(--line); padding: 14px 0; }
.st-block h3 { font-size: 0.95rem; margin: 0 0 8px; }
.st-block input, .st-block select { max-width: 300px; display: inline-block; margin-right: 8px; }

@media (max-width: 640px) {
    .home-avatar { flex: 1 1 100%; }
    .pf-grid { grid-template-columns: repeat(4, 1fr); }
    .pf-card { font-size: 0.8rem; }
    .st-block input, .st-block select { max-width: 100%; margin-bottom: 8px; }
}