#favo-commenttxt {
    font-size: 20px;
}

@media (min-width: 992px) {
    #favo-commenttxt {
        font-size: 50px;
    }
}

.q-option {
    cursor: pointer;
}

#waveinfo {
    bottom: 0;
    right: 45%;
    position: absolute;
    z-index: 1;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 3px rgba(6, 41, 58, .8); /* 背景が明るい空なので（以前は海の紺の上だった） */
}

#page-1{
    overflow-y: scroll;
}

  /* 選択肢の見た目は battle.css の「選択肢のボタン」（2026-09-24 に作り直した） */

  .main-panel{
    overflow-y:hidden;
    height: calc(100dvh - 117px);
  }

/* クエストの枠とカーテンの高さは PageLoadingEffects/css/component.css の末尾（採集と共通） */

/* ------------------------------------------------------------------
   クエストの最初の画面（quests.php の .qhome、quest.js の renderStages）
   ------------------------------------------------------------------ */
.qhome {
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 12px 96px;
    --q-navy: #06293a;
    --q-teal: #1aa6b7;
}

/* 海辺の場面 */
.qhero {
    position: relative;
    height: 190px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.qhero-scene {
    position: absolute;
    inset: 0;
    background: #7cc5ee;
}
.qhero-sea {
    position: absolute;
    left: 0;
    top: 42%;
    width: 100%;
    min-height: 110%;
    object-fit: cover;
    transform: translateY(-62%);
}
.qhero-beach {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 58%;
}
.qhero-beach .beach-wet { fill: #d9b77c; }
.qhero-beach .beach-sand { fill: #efd6a2; }
.qhero-player,
.qhero-enemy {
    position: absolute;
    bottom: 17%; /* 下の約14%は相棒カードが重なる */
    height: 62%;
    animation: qhero-bob 1.2s ease-in-out infinite;
}
.qhero-player {
    left: 8%;
    image-rendering: pixelated;
}
/* Vee の吹き出し（おみくじ）。Vee とおばけのあいだ、Vee の顔の高さに。しっぽは左（Vee）へ。上の見出しと重ならないように */
.qhero-bubble {
    position: absolute;
    left: 27%;
    bottom: 34%;
    max-width: 38%;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #06293a;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 20, 35, .25);
    pointer-events: none;
}
.qhero-bubble:empty { display: none; }
.qhero-bubble { transition: opacity .25s, transform .25s; }
.qhero-bubble.is-gone { opacity: 0; transform: scale(.8); } /* 海辺をタップしてホヤを投げはじめたら消す */
.qhero-bubble::after {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 10px;
    border: 7px solid transparent;
    border-right-color: #fff;
    border-left: 0;
}
@media (max-width: 767px) {
    .qhero-bubble { left: 30%; bottom: 26%; max-width: 36%; font-size: 11px; }
}
.qhero-enemy {
    right: 6%;
    height: 56%;
    animation-duration: 1.6s;
    animation-delay: -.4s;
}
/* 場面をタップすると Vee がドットのホヤを投げる（quest.js の setupHeroToy） */
.qhero-scene.is-toy {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}
.qhero-player.is-throw { animation: qtoy-throw .32s steps(4, end); }
.qhero-enemy.is-hit { animation: qtoy-hit .36s steps(6, end); }
.qhero-enemy.is-throw { animation: qtoy-enemy-throw .45s steps(5, end); } /* おばけが投げ返す前に身構える */
/* 球種ごとの振りかぶり（quest.js の windUp。時間は WINDUP_MS と同じ .62s） */
.qhero-enemy.is-wind-over { animation: qtoy-wind-over .62s steps(6, end); }
.qhero-enemy.is-wind-side { animation: qtoy-wind-side .62s steps(6, end); }
.qhero-enemy.is-wind-under { animation: qtoy-wind-under .62s steps(6, end); }
.qhero-enemy.is-wind-charge { animation: qtoy-wind-charge .62s steps(12, end); }
@keyframes qtoy-wind-over { /* 上投げ: うしろにのけぞってから、前へ振り下ろす */
    0% { transform: none; }
    60%, 80% { transform: translate(8px, -6px) rotate(12deg); }
    100% { transform: translate(-6px, 2px) rotate(-10deg); }
}
@keyframes qtoy-wind-side { /* 横投げ: 体ごと横にひねる */
    0% { transform: none; }
    60%, 80% { transform: translateX(10px) scaleX(.92); }
    100% { transform: translateX(-8px); }
}
@keyframes qtoy-wind-under { /* 下投げ: かがんでから、伸び上がる */
    0% { transform: none; }
    55%, 80% { transform: translate(4px, 8px) rotate(-6deg) scaleY(.9); }
    100% { transform: translate(-4px, -6px) rotate(4deg); }
}
@keyframes qtoy-wind-charge { /* ためる: うしろに引いて、ぶるぶる光る */
    0% { transform: none; filter: none; }
    20% { transform: translateX(8px); }
    30% { transform: translateX(11px); filter: brightness(1.3) drop-shadow(0 0 6px #ff5a3d); }
    40% { transform: translateX(7px); }
    50% { transform: translateX(11px); filter: brightness(1.4) drop-shadow(0 0 8px #ff5a3d); }
    60% { transform: translateX(7px); }
    70% { transform: translateX(11px); filter: brightness(1.5) drop-shadow(0 0 10px #ff5a3d); }
    85% { transform: translateX(9px); }
    100% { transform: translateX(-8px); filter: none; }
}
/* 振りかぶっているあいだ、手に持ったホヤ */
/* 白いおばけを倒すと、青いおばけ（ボス）が上から降りてくる */
.qhero-enemy.is-boss-in { animation: qtoy-boss-in .8s steps(8, end); }
@keyframes qtoy-boss-in {
    0% { opacity: 0; transform: translateY(-60px) scale(.6); }
    60% { opacity: 1; transform: translateY(6px) scale(1.12); }
    80% { transform: translateY(-3px) scale(.97); }
    100% { transform: none; }
}
.qtoy-windup { position: absolute; z-index: 2; pointer-events: none; }
.qtoy-windup svg { position: relative; display: block; width: 100%; height: 100%; }
.qtoy-hand { /* おばけの手（白い丸）。ホヤの下から支える */
    position: absolute;
    left: 15%;
    top: 45%;
    width: 70%;
    height: 60%;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #9fa0a0;
    box-sizing: border-box;
}
.qtoy-hand--other { left: 10%; top: 10%; width: 80%; height: 80%; }
.qhero-player.is-hit { animation: qtoy-player-hit .36s steps(6, end); } /* Vee に当たると、左へよろける */
@keyframes qtoy-enemy-throw {
    0% { transform: translateX(0) rotate(0); }
    50% { transform: translateX(8px) rotate(8deg); }
    80% { transform: translateX(-8px) rotate(-6deg); }
    100% { transform: translateX(0) rotate(0); }
}
@keyframes qtoy-player-hit {
    0% { transform: translateX(0); filter: brightness(2.2); }
    30% { transform: translateX(-10px) rotate(-8deg); filter: brightness(1.6); }
    60% { transform: translateX(-4px) rotate(3deg); filter: none; }
    100% { transform: translateX(0); }
}
/* 打ち合いのハート（quest.js の showHearts）。左上が Vee、右上がおばけ。見出しは真ん中なので重ならない */
.qtoy-hearts {
    position: absolute;
    top: 10px;
    z-index: 3;
    display: flex;
    gap: 3px;
    pointer-events: none;
    animation: qtoy-hearts-in .4s steps(4, end);
}
.qtoy-hearts--player { left: 10px; }
.qtoy-hearts--enemy { right: 10px; }
.qtoy-heart { display: block; width: 21px; height: 18px; filter: drop-shadow(0 2px 0 rgba(6, 41, 58, .55)); }
.qtoy-heart svg { display: block; }
.qtoy-heart .h-R { fill: #ff4d6d; }
.qtoy-heart .h-W { fill: #ffd1da; }
.qtoy-heart.is-lost { animation: qtoy-heart-lost .5s steps(5, end) forwards; }
.qtoy-heart.is-lost .h-R, .qtoy-heart.is-lost .h-W { fill: #5d6b73; }
@keyframes qtoy-hearts-in {
    0% { opacity: 0; transform: translateY(-12px) scale(.6); }
    100% { opacity: 1; transform: none; }
}
@keyframes qtoy-heart-lost {
    0% { transform: scale(1.5); }
    40% { transform: scale(.7); }
    100% { transform: scale(.85); opacity: .7; }
}
/* ハートが 0 になると、ちかちかして消える。戻るときは、ぽんと出る */
.qhero-player.is-ko, .qhero-enemy.is-ko { animation: qtoy-ko .7s steps(7, end) forwards; }
.qhero-player.is-back, .qhero-enemy.is-back { animation: qtoy-back .4s steps(4, end); }
@keyframes qtoy-ko {
    0%, 28%, 56% { opacity: 1; }
    14%, 42%, 70% { opacity: 0; }
    100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes qtoy-back {
    0% { opacity: 0; transform: scale(.5); }
    100% { opacity: 1; transform: none; }
}
.qtoy-spin--back { animation-direction: reverse; } /* おばけのホヤは逆回り */
.qtoy-bucket { position: absolute; z-index: 2; pointer-events: none; transform-origin: 20% 90%; } /* 打ち返すバケツ（持ち手のあたりを軸に振る） */
.qtoy-pop {
    position: absolute;
    z-index: 3;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
    -webkit-text-stroke: 4px #06293a;
    paint-order: stroke fill;
    pointer-events: none;
    transform: translate(-50%, -100%);
    animation: qtoy-pop .9s ease-out forwards;
}
@keyframes qtoy-pop {
    0% { opacity: 0; transform: translate(-50%, -60%) scale(.5); }
    20% { opacity: 1; transform: translate(-50%, -110%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}
@keyframes qtoy-throw {
    0% { transform: translateX(0) rotate(0); }
    35% { transform: translateX(-5px) rotate(-7deg); }
    60% { transform: translateX(7px) rotate(6deg); }
    100% { transform: translateX(0) rotate(0); }
}
@keyframes qtoy-hit {
    0% { transform: translateX(0); filter: brightness(2.2); }
    30% { transform: translateX(10px) rotate(8deg); filter: brightness(1.6); }
    60% { transform: translateX(4px) rotate(-3deg); filter: none; }
    100% { transform: translateX(0); }
}
.qtoy-hoya {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
.qtoy-spin {
    width: 100%;
    height: 100%;
    animation: qtoy-spin .36s steps(4, end) infinite;
}
.qtoy-spin svg { display: block; width: 100%; height: 100%; }
@keyframes qtoy-spin { to { transform: rotate(360deg); } }
.qtoy-bit {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
@keyframes qhero-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.qhero-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    text-align: center;
    color: #fff;
    pointer-events: none;
}
.qhero-title {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: .12em;
    /* 後ろが雲の白なので、紺でふちどる（ふちを文字の外側だけに出す） */
    -webkit-text-stroke: 7px var(--q-navy);
    paint-order: stroke fill;
    text-shadow: 0 4px 0 var(--q-navy);
}
.qhero-lead {
    display: inline-block;
    margin: 6px 0 0;
    padding: 2px 12px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(6, 41, 58, .6);
}

/* 相棒 */
.qpartner {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    margin: -26px 14px 0;
    padding: 10px 12px; /* 相棒のカードは 0.9 倍ほどに（海辺の場面を広げたぶん。2026-09-25） */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.qpartner-photo {
    position: relative;
    flex: none;
    width: 68px;
    height: 68px;
}
.qpartner-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.qpartner.is-empty .qpartner-photo img {
    object-fit: contain;
    background: #eef3f6;
    padding: 10px;
}
.qpartner-body {
    min-width: 0;
    flex: 1;
    color: var(--q-navy);
}
.qpartner-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--q-teal);
    letter-spacing: .1em;
}
.qpartner-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}
#favorite_level {
    margin-left: .5em;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--q-navy);
    border-radius: 999px;
    padding: 1px 8px;
    vertical-align: 2px;
}
#favorite_level:empty { display: none; }
/* パワー（Lv の横。剣の印＋数字） */
.qstat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: .35em;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    padding: 1px 8px 1px 6px;
    border-radius: 999px;
    background: #e3f1f8; /* 海の色 */
    color: #0d5a7d;
    vertical-align: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.qstat:empty { display: none; }
.qstat-icon {
    width: 13px;
    height: 13px;
}
/* 経験値バー（quest.js の setExpBar / showExpResult）。相棒カードと結果画面で使う */
.qexp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 4px;
    font-size: 11px;
    color: #5b6b75;
}
.qexp[hidden] { display: none; }
.qexp-bar {
    flex: 1;
    max-width: 220px;
    height: 6px;
    border-radius: 999px;
    background: #e3eaee;
    overflow: hidden;
}
.qexp-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #78e2a8;
}
.qexp-text { white-space: nowrap; }
/* Lv99（レベルMAX）は札とバーを金色に。バーは光がゆっくり流れる */
#favorite_level.is-max,
.qresult-exp-lv.is-max,
.qresult-exp.is-levelup .qresult-exp-lv.is-max { /* レベルアップの緑より優先 */
    color: #5a3a00;
    background: linear-gradient(90deg, #ffd84d, #f7a81f);
}
.is-max .qexp-bar i {
    width: 100% !important;
    background: linear-gradient(90deg, #ffd84d, #f7a81f, #ffe98a, #f7a81f, #ffd84d);
    background-size: 200% 100%;
    animation: qexp-max 2.4s linear infinite;
}
.is-max .qexp-text {
    font-weight: 800;
    color: #c07a00;
}
@keyframes qexp-max {
    to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .is-max .qexp-bar i { animation: none; }
}

/* 相棒の門で決まるスキル（js/skills.js） */
.qskill { margin-top: 4px; }
.qskill:empty { display: none; }
.qskill-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.qskill-kind {
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #c07a00;
}
.qskill-head b { font-size: 13px; color: #06293a; }
.qskill-head small { font-size: 11px; color: #8a99a3; }
.qskill-desc { font-size: 12px; line-height: 1.45; color: #405763; }
/* スキルの説明はふだんたたむ（名前の行を押すと開く） */
.qskill-head { cursor: pointer; }
.qskill-desc { display: none; }
.qskill.is-open .qskill-desc { display: block; }
.qskill-toggle { padding: 0 4px; border: 0; background: none; color: #1aa6b7; font-size: 13px; line-height: 1; }
.qpartner-link {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 10px; /* 12px だと名前の行のパワー（剣のマーク）にかかった（2026-09-25） */
    font-weight: 700;
    color: var(--q-teal);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 1px 7px;
    text-decoration: none;
}
.qpartner-link::after {
    content: "";
    display: inline-block;
    width: .45em;
    height: .55em;
    margin-left: .35em;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.qpartner-link:hover {
    color: #fff;
    background: var(--q-teal);
    border-color: var(--q-teal);
    text-decoration: none;
}

/* ------------------------------------------------------------------
   ステージ一覧。採集ページと同じ作り（写真＋斜めのオレンジ＋緑のボタン）
   ------------------------------------------------------------------ */
.qroute {
    margin-top: 18px;
    color: #fff;
}
.qroute-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
/* 青い背景の上なので、見出しは白（ストーリー一覧と同じ） */
.qroute-title {
    margin: 0;
    font-size: clamp(20px, 3.4vw, 26px);
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 20, 35, .45);
}
#qroute_count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    background: rgba(0, 20, 35, .28);
    border-radius: 999px;
    padding: 2px 10px;
    font-variant-numeric: tabular-nums;
}
.qroute-difficulty {
    margin: -4px 0 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 3px rgba(0, 20, 35, .5);
}
.qroute-difficulty a {
    margin-left: .8em;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}
.qroute-note {
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0 0 12px;
}
.qstages {
    list-style: none;
    margin: 0;
    padding: 0;
}
.qstage {
    padding-bottom: 10px;
}
/* 縦に詰めるため、文字は左の列、「スタート」は右の列に置く（2026-09-23。以前はボタンが下の行で、1枚が約230px） */
.qstage-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px 12px 20px;
    border-radius: 4px;
    color: #fff;
    background: #1d1f1f var(--photo) center / cover no-repeat;
    box-shadow: 0 4px 14px rgba(0, 20, 35, .35);
}
/* 採集ページのスライドと同じ斜めの帯（sampling_slider.css の .slide__overlay） */
.qstage-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(233, 156, 126, .8);
    clip-path: polygon(0 0, 38% 0, 78% 100%, 0 100%);
}
.qstage-card > * {
    position: relative;
    grid-column: 1;
    min-width: 0;
}
.qrank {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 6px;
    padding: 0 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
/* 「問題1」「臨海実験所 Lv.7」がいちばん大きい。副題（はじめの一歩）はその下に小さく */
.qstage-title {
    margin: 4px 0 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.qstage-sub {
    margin: 1px 0 0;
    font-size: 14px;
    font-weight: 700;
}
.qstage-desc {
    margin: 1px 0 4px;
    font-size: 12px;
}
.qstage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 13px;
}
.qmeta i { margin-right: .35em; }
.qmeta-off { color: rgba(255, 255, 255, .4); }
/* 推奨パワー（エンドレスだけ）。届いていれば緑、足りなければ橙 */
.qstage-rec {
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    background: rgba(255, 255, 255, .92);
}
.qstage-rec b { font-weight: 800; }
.qstage-rec span { font-size: 12px; color: #52606b; }
.qstage-rec.is-ok b { color: #1e7a4a; }
.qstage-rec.is-short b { color: #c0550c; }
.qstage-lock {
    margin-top: 6px;
    font-size: 12px;
    opacity: .9;
}
/* ボタンは採集ページの「採集 💎150」と同じ（assets.css の .bubbly-button） */
.qstart {
    grid-column: 2;
    grid-row: 1 / span 7;
    margin: 0;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    background: #78e2a8;
    color: #fff;
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    letter-spacing: .05em;
    white-space: nowrap;
    box-shadow: 0 2px 25px rgba(201, 137, 170, .5);
    cursor: pointer;
    transition: transform .1s;
}
.qstart:active { transform: scale(.96); }
.qstage.is-current .qstage-card {
    box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0, 20, 35, .35);
}
/* クリア済みは低い帯に畳み、右端に「もう一度」 */
.qstage.is-cleared .qstage-card { padding: 8px 14px 8px 20px; }
.qstage.is-cleared .qstage-title { font-size: 22px; margin-top: 2px; }
.qstage.is-cleared .qstage-sub { font-size: 13px; }
.qstage.is-cleared .qstage-desc,
.qstage.is-cleared .qstage-meta { display: none; }
.qstage.is-cleared .qstart {
    grid-column: 2;
    grid-row: 1 / span 7;
    margin: 0;
    padding: 4px 14px;
    font-size: 14px;
    background: rgba(255, 255, 255, .9);
    color: #2c8f5b;
    box-shadow: none;
}
/* 挑戦できないステージは写真ごと灰色に */
.qstage.is-locked .qstage-card {
    padding: 8px 20px 10px;
    filter: grayscale(1);
    opacity: .75;
}
.qstage.is-locked .qstage-card::before { background: rgba(60, 70, 80, .8); }
.qstage.is-locked .qstage-title { font-size: 22px; }
.qstage.is-locked .qstage-sub { font-size: 13px; }
.qstage.is-locked .qstage-desc,
.qstage.is-locked .qstage-meta { display: none; }
/* 門ごとのチャレンジの見出し（quest.js の renderStages） */
.qstage-section {
    list-style: none;
    margin: 18px 0 8px;
    color: #fff;
}
.qstage-section-title {
    margin: 0;
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 20, 35, .45);
}
.qstage-section-note {
    margin: 2px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 3px rgba(0, 20, 35, .5);
}
/* 門ごとのチャレンジの帯は青緑に（通常のステージのオレンジと見分ける） */
.qstage.is-open .qstage-card::before { background: rgba(40, 160, 170, .82); }

/* 今日のクイズは帯を紫に */
.qstage.is-daily .qstage-card::before { background: rgba(135, 85, 200, .84); }
/* 導入編の見出しの「3 / 7」と「ひらく／とじる」 */
.qstage-section-count {
    margin-left: 10px;
    padding: 1px 10px;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
    border-radius: 999px;
    background: rgba(0, 30, 50, .45);
    text-shadow: none;
}
.qstage-fold {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 10px 16px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    background: rgba(233, 156, 126, .55); /* 導入編の帯と同じ色 */
    text-shadow: 0 1px 3px rgba(0, 20, 35, .4);
    cursor: pointer;
}
.qstage-fold:hover { background: rgba(233, 156, 126, .75); }
.qstage-fold-label { flex: 1; }
.qstage-fold-act {
    flex: none;
    padding: 3px 14px;
    border-radius: 999px;
    color: #06293a;
    background: #fff;
    text-shadow: none;
}
.qstage-fold-act::after { content: " ▼"; font-size: 11px; }
.qstage-fold[aria-expanded="true"] .qstage-fold-act::after { content: " ▲"; }
/* 今日のクイズの1日1回ボーナス（dailybonus.js） */
.qstage-bonus {
    grid-column: 1 / -1; /* スタートの下まで使って、スマホでも1行に収める */
    justify-self: start;
    white-space: nowrap;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: #6a4200;
    background: #ffd84d;
}
.qstage-bonus i { margin-right: .35em; }
.qstage-bonus.is-done {
    font-weight: 600;
    color: #fff;
    background: rgba(0, 20, 35, .35);
}
.qstage[hidden] { display: none; }

/* エンドレス（臨海実験所）は帯を金色に */
.qstage.is-endless .qstage-card::before { background: rgba(240, 180, 60, .82); }

/* 狭い画面では見出しとキャラが重ならないよう、場面を高くしてキャラを小さく */
@media (max-width: 767px) {
    .qhero { height: 220px; }
    .qhero-player, .qhero-enemy { bottom: 15%; height: 47%; }
    .qhero-enemy { height: 43%; }
    .qhero-title { font-size: 34px; }
    .qhero-lead { font-size: 13px; }
    .qstage-card::before { clip-path: polygon(0 0, 62% 0, 100% 100%, 0 100%); }
    .qstage-card { padding: 10px 12px 10px 16px; }
    .qstage-title { font-size: 24px; }
    .qstage-desc { display: none; } /* スマホでは1行の説明を省く（副題と種類のしるしで分かる） */
    .qstart { padding: 7px 14px; font-size: 15px; }
}
@media (min-width: 768px) {
    .qhero { height: 260px; }
    .qhero-title { font-size: 46px; }
    .qhero-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .qhero-player, .qhero-enemy { animation: none; }
}

/* ------------------------------------------------------------------
   結果画面の経験値（quests.php の #qresult_exp）
   ------------------------------------------------------------------ */
.qresult-exp {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 6px auto 14px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 20, 35, .3);
    color: #06293a;
}
.qresult-exp[hidden] { display: none; }
.qresult-exp-pic {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
}
.qresult-exp-body {
    flex: 1;
    min-width: 0;
}
.qresult-exp-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
}
.qresult-exp-lv {
    white-space: nowrap;
    font-size: 12px;
    color: #fff;
    background: #06293a;
    border-radius: 999px;
    padding: 1px 8px;
}
.qresult-exp-gain {
    margin-left: auto;
    font-size: 15px;
    color: #2c8f5b;
}
.qresult-exp .qexp-bar {
    max-width: none;
    height: 8px;
}
.qresult-levelup {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 800;
    color: #c2501a;
}
.qresult-levelup small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #7a5220;
}
.qresult-exp.is-levelup {
    /* レベルアップしたら、カードがぴょんと跳ねて、まわりに光の輪が広がる */
    animation: qresult-jump .7s cubic-bezier(.3, 1.6, .5, 1), qresult-levelup .9s ease-out;
}
@keyframes qresult-jump {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-16px) scale(1.04); }
    55% { transform: translateY(0) scale(.98, 1.02); }
    75% { transform: translateY(-5px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes qresult-levelup {
    0% { box-shadow: 0 0 0 0 rgba(120, 226, 168, .9), 0 4px 14px rgba(0, 20, 35, .3); }
    100% { box-shadow: 0 0 0 18px rgba(120, 226, 168, 0), 0 4px 14px rgba(0, 20, 35, .3); }
}
/* Lv の札もポンと大きくなってから戻る */
.qresult-exp.is-levelup .qresult-exp-lv {
    display: inline-block;
    animation: qresult-lvpop .6s cubic-bezier(.3, 1.8, .5, 1) .1s;
    background: #2c8f5b;
}
@keyframes qresult-lvpop {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.qresult-exp.is-levelup .qresult-levelup {
    animation: qresult-lvtext .4s ease-out .15s both;
}
@keyframes qresult-lvtext {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   クエストの結果画面（quests.php の #page-3 .qresult、quest.js の endquest）
   ステージ一覧と同じ作り（写真＋斜めの帯＋緑のボタン）
   ------------------------------------------------------------------ */
.qresult {
    max-width: 760px;
    margin: 0 auto;
    padding: 14px 12px 96px;
    color: #fff;
}
.qresult-hero {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    padding: 18px 22px 20px;
    border-radius: 4px;
    background: #1d1f1f var(--photo) center / cover no-repeat;
    box-shadow: 0 4px 14px rgba(0, 20, 35, .35);
}
.qresult-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(233, 156, 126, .82);
    clip-path: polygon(0 0, 48% 0, 85% 100%, 0 100%);
}
.qresult-hero.is-lose::before { background: rgba(40, 62, 80, .85); }
.qresult-hero > * {
    position: relative;
    max-width: 68%;
}
.qresult-hero-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}
.qresult-verdict {
    margin-top: 4px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 46px;
    font-weight: 300;
    line-height: 1.1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
/* 「クリア！」の演出。幕が開ききってから（quest.js の resultVisible が .is-visible を付ける）
   1) 文字が1つずつ上から落ちて弾む  2) 光の帯が見出しを横切る */
.qv-char {
    display: inline-block;
}
.qresult-hero.is-win .qv-char {
    opacity: 0;
}
.qresult.is-visible .qresult-hero.is-win .qv-char {
    animation: qv-drop .55s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .09s) both;
}
@keyframes qv-drop {
    0% { opacity: 0; transform: translateY(-70px) rotate(-18deg) scale(1.4); }
    60% { opacity: 1; transform: translateY(6px) rotate(4deg) scale(.95); }
    100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.qresult.is-visible .qresult-hero.is-win .qresult-verdict {
    text-shadow: 0 0 18px rgba(255, 240, 180, .9), 0 1px 4px rgba(0, 0, 0, .25);
}
.qresult-hero::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 38%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 40%, rgba(255, 246, 200, 1) 50%, rgba(255, 255, 255, .85) 60%, rgba(255, 255, 255, 0));
    transform: translateX(-130%) skewX(-20deg);
    pointer-events: none;
}
.qresult.is-visible .qresult-hero.is-win::after {
    animation: qresult-shine 1.1s cubic-bezier(.25, .6, .4, 1) .45s forwards;
}
@keyframes qresult-shine {
    to { transform: translateX(400%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
    .qresult.is-visible .qresult-hero.is-win .qv-char { animation: none; opacity: 1; }
    .qresult.is-visible .qresult-hero.is-win::after { animation: none; }
    .qresult-exp.is-levelup, .qresult-exp.is-levelup .qresult-exp-lv { animation: none; }
}
.qresult-floor {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
}
.qresult-score {
    margin-top: 2px;
    font-size: 14px;
}

/* ごほうびの札 */
.qresult-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}
.qresult-rewards[hidden] { display: none; }
.qreward {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    color: #06293a;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 20, 35, .25);
}
.qreward--jewel i { color: #1f8fb8; }
.qreward--unlock { color: #2c8f5b; }
.qreward--item i { color: #c2501a; }
.qreward--drop i { color: #e0a800; } /* レア敵のドロップ */
.qreward--daily { color: #8a5a00; background: #fff4c2; }
.qreward--daily i { color: #e0a000; }
.qreward--note {
    font-weight: 600;
    font-size: 13px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    box-shadow: none;
}
.qresult .qresult-exp {
    max-width: none;
    margin: 12px 0 0;
}

/* ボタン。戻るは採集ページと同じ緑、ツイートは控えめ */
.qresult-actions {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
}
.qresult-back {
    flex: 1;
    padding: 11px 0;
    border: none;
    border-radius: 4px;
    background: #78e2a8;
    color: #fff;
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 18px;
    letter-spacing: .05em;
    box-shadow: 0 2px 25px rgba(201, 137, 170, .5);
    cursor: pointer;
}
.qresult-back:active { transform: scale(.98); }
.qresult-tweet {
    flex: none;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* ふりかえり */
.qresult-history { margin-top: 22px; }
.qresult-history-title {
    margin: 0 0 10px;
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 20, 35, .45);
}
.qresult-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.qresult-card {
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    color: #06293a;
    box-shadow: 0 3px 10px rgba(0, 20, 35, .25);
}
.qresult-card-pic {
    position: relative;
    aspect-ratio: 4 / 3;
}
.qresult-card-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.qresult-card-mark {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    background: #2ea44f;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    pointer-events: none;
}
.qresult-card.is-ng .qresult-card-mark { background: #d9534f; }
.qresult-card-quick {
    position: absolute;
    top: 8px;
    right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #7a4b00;
    background: #ffe14d;
    pointer-events: none;
}
.qresult-card-body { padding: 6px 10px 8px; }
.qresult-card-q {
    font-size: 11px;
    color: #5b6b75;
}
.qresult-card-a {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}
.qresult-card.is-ng .qresult-card-a { color: #b03a36; }

@media (max-width: 767px) {
    .qresult-hero::before { clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%); }
    .qresult-hero > * { max-width: 85%; }
    .qresult-verdict { font-size: 38px; }
    .qresult-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------
   ワールドマップ（2026-09-24。quest.js の renderQuestMap）
   島（導入編・臨海実験所・今日のクイズ・門ごとのチャレンジ）ごとに、斜めから見た盤面にマスを道でつなぐ。
   Vee が選んだマスへ跳び、下に今までと同じステージのカード（.qstage）が出る
   ------------------------------------------------------------------ */
.qmap { list-style: none; }
.qmap-tabrow { display: flex; align-items: center; gap: 6px; }
.qmap-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; padding: 0 2px 2px; }
/* タブは横にスクロールさせず、同じ幅で並べる（横が切れて見えた。2026-09-25）。長い名前は2行に */
.qmap-tabs > .qmap-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 4px 5px; }
.qmap-tabs > .qmap-tab b { white-space: normal; line-height: 1.2; text-align: center; font-size: 13px; }
/* クリアしたあとの導入編のタブは、小さな記号だけ */
.qmap-tabs > .qmap-tab.is-mini { flex: 0 0 40px; padding: 6px 0 5px; font-size: 18px; color: #9cc3d6; }
.qmap-tabs::-webkit-scrollbar { display: none; }
.qmap-tab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px 5px;
    border: 0;
    border-radius: 12px 12px 4px 4px;
    background: #0d2f45;
    color: #cfe6f2;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.qmap-tab b { font-size: 14px; white-space: nowrap; }
.qmap-tab span { font-size: 11px; opacity: .85; white-space: nowrap; }
.qmap-tab.is-on { background: #ffd84d; color: #3b2600; }
.qmap-note { margin: 8px 2px 0; font-size: 12px; font-weight: 700; color: #e8f4fa; text-shadow: 0 1px 3px rgba(0, 20, 35, .6); }
/* 盤面は SVG で描く（quest.js の proj で「奥に倒した見え方」を計算する。CSS の 3D は、タップの当たり判定がずれるので使わない） */
.qmap-stage { padding: 18px 0 0; } /* 上の余白は、盤面の奥の列に立つ Vee の頭のぶん（少しはタブに重なってよい）。2026-10-01 に 30px → 18px、下の 6px は 0（縦を詰める） */
.qmap-board { position: relative; margin: 0 auto; }
.qmap-ground { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 14px 16px rgba(0, 20, 40, .35)); }
.qmap-road { fill: none; stroke: rgba(255, 248, 220, .92); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.qmap-road.is-dotted { stroke: rgba(160, 110, 50, .4); stroke-width: 8; stroke-dasharray: 2 14; }
.qmap-node {
    position: absolute;
    padding: 0; /* 大きさと位置は quest.js が奥行きに合わせて決める */
    touch-action: manipulation; /* ダブルタップの拡大待ちで反応が遅れないように */
    border: 3px solid #fff;
    border-radius: 50%;
    background: #1aa6b7 center / cover no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 7px 0 #0d6f7b, 0 10px 10px rgba(0, 0, 0, .3);
    cursor: pointer;
}
.qmap-node-mark { display: block; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.qmap-node-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 0 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #06293a;
    background: rgba(255, 255, 255, .9);
    white-space: nowrap;
}
.qmap-node:active { transform: translateY(4px); box-shadow: 0 3px 0 #0d6f7b; }
.qmap-node.is-cleared { background-color: #ffd84d; color: #b35a00; box-shadow: 0 7px 0 #c49000, 0 10px 10px rgba(0, 0, 0, .3); }
.qmap-node.is-current { background-color: #e0463a; box-shadow: 0 7px 0 #a12b1f, 0 0 0 6px rgba(255, 255, 255, .5), 0 10px 10px rgba(0, 0, 0, .3); }
.qmap-node.is-locked { background-color: #8a99a3; box-shadow: 0 7px 0 #5f6d75; }
.qmap-node.is-locked .qmap-node-mark::before { content: "\f023"; font-family: FontAwesome; font-size: 16px; } /* 鍵 */
.qmap-node.is-missed { background-color: #c9d4da; color: #6b7d88; box-shadow: 0 7px 0 #93a3ad; }
.qmap-node.has-photo .qmap-node-mark { opacity: 0; }
.qmap-node.has-photo.is-cleared .qmap-node-mark { opacity: 1; }
.qmap-node.is-sel { outline: 4px solid #fff; outline-offset: 3px; }
/* Vee は盤面から起こして立たせる。選んだマスへピョンと跳ぶ */
.qmap-vee {
    position: absolute;
    z-index: 4;
    height: auto;
    transform: translate(-50%, -96%);
    transition: left .45s steps(6, end), top .45s steps(6, end);
    z-index: 3;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25));
}
.qmap-vee.is-hop { animation: qmap-hop .45s steps(6, end); }
/* 奥へ 跳ぶ ときの 後ろ姿（40×40 の 2コマ。2026-10-05） */
.qmap-vee.is-back { aspect-ratio: 1; object-fit: cover; object-position: 0 0; }
.qmap-vee.is-back.is-hop { animation: qmap-hop .45s steps(6, end), vee-back-step .3s step-end infinite; }
@keyframes vee-back-step { 0% { object-position: 0 0; } 50% { object-position: 100% 0; } 100% { object-position: 100% 0; } }
@keyframes qmap-hop { 0%, 100% { margin-top: 0; } 50% { margin-top: -22px; } }
.qmap-sign { margin-top: 6px; }
.qmap-sign .qstage { list-style: none; }
.qmap-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 6px;
    background: #fff;
    color: #06293a;
    box-shadow: 0 4px 14px rgba(0, 20, 35, .25);
}
.qmap-info b { font-size: 17px; }
.qmap-info span { font-size: 13px; color: #52606b; }
/* みんなでクエストの島（2026-10-03。quest.js の raidIsland） */
.qmap-links-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.qmap-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 10px; background: linear-gradient(#ff9a3d, #e8641f); color: #fff !important; font-weight: 900; text-decoration: none !important; }
.qmap-link.is-ghost { background: #fff; color: #1d2b53 !important; border: 2px solid #1d2b53; }
/* みんなで の島: カードの左に 画面の スクショ（2026-10-04） */
.qmap-links.has-shot { display: grid; grid-template-columns: 92px 1fr; column-gap: 12px; align-items: start; }
.qmap-links.has-shot > * { grid-column: 2; }
.qmap-links.has-shot > .qmap-links-shot { grid-column: 1; grid-row: 1 / span 3; width: 92px; height: auto; border-radius: 10px; border: 3px solid #1d2b53; box-shadow: 0 3px 0 rgba(0,0,0,.18); background: #fff; }
@media (max-width: 420px) { .qmap-links.has-shot { grid-template-columns: 74px 1fr; column-gap: 10px; } .qmap-links.has-shot > .qmap-links-shot { width: 74px; } }
@media (min-width: 768px) { .qmap-node { font-size: 20px; } }

/* 島の説明の「？」とモーダル（2026-09-25） */
.qmap-help {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(13, 47, 69, .85);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}
.qmap-helpmodal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 15, 30, .6);
}
.qmap-helpcard {
    max-width: 420px;
    padding: 18px 20px 16px;
    border-radius: 14px;
    background: #fff;
    color: #06293a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.qmap-helpcard { max-height: 80vh; overflow-y: auto; }
.qmap-helptitle { display: block; font-size: 18px; }
.qmap-helpitem { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e3eaee; }
.qmap-helpitem h4 { margin: 0; font-size: 14px; font-weight: 800; color: #0d6f7b; text-transform: none; }
.qmap-helpitem p { margin: 3px 0 0; font-size: 13px; line-height: 1.7; color: #33434d; }
.qmap-helpclose { margin-top: 12px; }
.qmap-helpclose { display: block; margin-left: auto; padding: 6px 18px; border: 0; border-radius: 999px; background: #1aa6b7; color: #fff; font-weight: 800; }
/* 難易度は、いちばん下に小さく */
.qroute .qroute-difficulty { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 8px 4px 0; text-align: right; }

/* スマホでは、スクロールしなくても「スタート」まで届くように詰める（2026-09-25）。
   海辺の場面を低く、盤面とカードの間を詰め、盤面の下のカードは小さめ（説明文は省く） */
@media (max-width: 767px) {
    .qhero { height: 170px; } /* 150px から少し広げた（2026-09-25） */
    .qhero-lead { display: none; } /* 低くした場面で、Vee の吹き出しと重なるので */
    .qmap-stage { padding-top: 12px; }
    .qmap-sign { margin-top: 2px; }
    .qmap-sign .qstage-card { padding: 8px 12px 8px 14px; }
    .qmap-sign .qstage-title { font-size: 22px; }
    .qmap-sign .qstage-desc { display: none; }
}

/* どの場所の生き物から問題を出すか（js/quest.js の questPics。系統ツリーのクラスのチェックと同じ形） */
.qroute-dbs { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin: 8px 4px 0; font-size: 12px; font-weight: 800; color: #06293a; }
.qroute-dbs[hidden] { display: none; }
.qroute-db { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 10px; border: 2px solid #06293a; border-radius: 999px; background: #fff; text-transform: none; cursor: pointer; }
.qroute-db input { margin: 0; accent-color: #06293a; }
.qroute-db.is-off { border-style: dashed; opacity: .6; }

/* 導入編クリアの窓（quest.js の showIntroClear。2026-09-27） */
.qintro-clear { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 20, 34, .6); animation: qic-fade .3s ease-out; }
.qintro-clear-card { position: relative; width: 100%; max-width: 380px; padding: 26px 20px 18px; border-radius: 22px; text-align: center; color: #06293a;
  background: linear-gradient(180deg, #fffdf4, #fff3d6); border: 3px solid #ffcf5a; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: qic-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.qintro-clear-vee { width: 84px; height: 84px; image-rendering: pixelated; margin: -64px auto 4px; display: block; animation: qic-hop 1s ease-in-out infinite; }
.qintro-clear-title { display: block; font-size: 22px; font-weight: 900; color: #e2740a; letter-spacing: .02em; margin-bottom: 8px; }
.qintro-clear-text { margin: 0 0 16px; font-size: 14px; line-height: 1.7; font-weight: 700; }
.qintro-clear-go { display: block; width: 100%; height: 50px; border: 0; border-radius: 14px; background: #f28c1e; color: #fff; font-size: 17px; font-weight: 900; box-shadow: 0 4px 0 #c0660a; cursor: pointer; }
.qintro-clear-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #c0660a; }
.qintro-clear-close { margin-top: 10px; border: 0; background: none; color: #4d6572; font-weight: 700; font-size: 14px; text-decoration: underline; cursor: pointer; }
@keyframes qic-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qic-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes qic-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .qintro-clear, .qintro-clear-card, .qintro-clear-vee { animation: none; } }

/* 門めぐりで、同じマスに足した綱・目のカード（quest.js の phylumIsland の more。2026-09-27）。小さめに、説明の文は出さない */
.qstage-more-head { list-style: none; margin: 4px 2px 6px; font-size: 12px; font-weight: 800; color: #eaf6ff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.qstage.is-sub { padding-bottom: 6px; }
.qstage.is-sub .qstage-card { padding-top: 8px; padding-bottom: 8px; }
.qstage.is-sub .qstage-title { font-size: 18px; }
.qstage.is-sub .qstage-desc { display: none; }

/* 導入編の問題1のカードの「まずはストーリー第1話を読もう」（js/storyguide.js） */
.qstage-story { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1f6fb2; font-size: 12px; font-weight: 800; text-decoration: none; }
.qstage-story:hover { color: #0d4467; text-decoration: none; }

/* ------------------------------------------------------------------
   ふりかえりの窓（js/quizreview.js。2026-09-28）。結果画面のカードを押すと開く
   ------------------------------------------------------------------ */
.qresult-card { cursor: pointer; transition: transform .12s; }
.qresult-card:hover, .qresult-card:focus-visible { transform: translateY(-2px); outline: 3px solid #ffcf5a; outline-offset: 1px; }
body.qrv-open .main-panel { overflow: hidden; }
.qrv-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(4, 20, 34, .62); }
.qrv-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 100%; border-radius: 18px; background: #fff; color: #06293a; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); overflow: hidden; }
.qrv-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #06293a; color: #fff; }
.qrv-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; }
.qrv-mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #2ea44f; font-weight: 900; }
.qrv-card.is-ng .qrv-mark { background: #d9534f; }
.qrv-nav, .qrv-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.qrv-nav:disabled { opacity: .3; cursor: default; }
.qrv-close { font-size: 20px; }
.qrv-body { padding: 12px 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.qrv-top { display: flex; gap: 12px; align-items: flex-start; }
.qrv-photo { flex: 0 0 42%; max-width: 42%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; cursor: zoom-in; background: #eef3f5; }
.qrv-q { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
.qrv-h { margin: 14px 0 6px; font-size: 13px; font-weight: 800; color: #4d6572; letter-spacing: .04em; }
.qrv-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qrv-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #f1f5f7; font-weight: 700; font-size: 14px; }
.qrv-opt.is-right { background: #e3f6e8; box-shadow: inset 0 0 0 2px #2ea44f; }
.qrv-opt.is-wrong { background: #fde8e7; box-shadow: inset 0 0 0 2px #d9534f; }
.qrv-opt-mark { flex: 0 0 18px; text-align: center; font-weight: 900; color: #2ea44f; }
.qrv-opt.is-wrong .qrv-opt-mark { color: #d9534f; }
.qrv-opts.has-img .qrv-opt img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
.qrv-opt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.qrv-opt-tag, .qrv-tag { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: #d9534f; }
.qrv-opt.is-right .qrv-opt-tag, .qrv-tag.is-right { background: #2ea44f; }
.qrv-timeout { color: #8a5a00; background: #fff4d6; }
.qrv-answer { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #1d6b35; }
.qrv-path { list-style: none; margin: 0; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid #dfe7eb; }
.qrv-rank { display: flex; gap: 10px; padding: 6px 10px; font-size: 14px; }
.qrv-rank + .qrv-rank { border-top: 1px solid #edf1f3; }
.qrv-rank-name { flex: 0 0 4.5em; color: #6b7d87; font-size: 12px; font-weight: 700; padding-top: 2px; }
.qrv-rank-val { font-weight: 700; overflow-wrap: anywhere; }
.qrv-rank-en { margin-left: auto; padding-left: 8px; align-self: center; color: #6b7d87; font-size: 12px; font-weight: 600; text-align: right; overflow-wrap: anywhere; } /* むずかしいだけ: 学名を右に（quizreview.js の enOf） */
.qrv-rank.is-asked { background: #fff3cf; }
.qrv-rank.is-asked .qrv-rank-name { color: #b06a00; }
.qrv-rank.is-asked .qrv-rank-name::after { content: " ◀"; }
.qrv-near { padding: 8px 10px; border-radius: 10px; background: #f6f9fa; }
.qrv-near-root { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.qrv-rank-chip { flex: 0 0 auto; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 800; color: #fff; background: #5d6d7e; }
.qrv-tree-list { list-style: none; margin: 4px 0 0 8px; padding: 0 0 0 12px; border-left: 2px solid #c9d6dc; }
.qrv-node { margin: 3px 0; }
.qrv-node-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 3px 6px; border-radius: 8px; font-size: 13px; }
.qrv-node.is-mine > .qrv-node-line { background: #fff3cf; font-weight: 800; }
.qrv-node-count { color: #6b7d87; font-size: 11px; }
.qrv-tree-list.is-species .qrv-node-line img { width: 40px; height: 30px; object-fit: cover; border-radius: 5px; }
.qrv-node-sci { color: #6b7d87; font-size: 11px; }
.qrv-more { margin: 3px 0 0 6px; font-size: 12px; color: #6b7d87; }
.qrv-treebtn { display: block; width: 100%; margin-top: 14px; height: 46px; border: 0; border-radius: 12px; background: #f28c1e; color: #fff; font-size: 16px; font-weight: 900; box-shadow: 0 4px 0 #c0660a; cursor: pointer; }
.qrv-treebtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c0660a; }
.qrv-tablewrap { margin-top: 10px; overflow-x: auto; }
.qrv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qrv-table th, .qrv-table td { padding: 4px 6px; border: 1px solid #dfe7eb; text-align: center; }
.qrv-table tr.is-diff td { color: #b0302b; font-weight: 700; }
.qrv-table .is-odd { background: #fde8e7; }
.qrv-table .is-good { background: #e3f6e8; }
.qrv-zoomable { cursor: zoom-in; }
/* 選択肢を押すと、下の分類がその選択肢のものに（is-view） */
.qrv-h-note { margin-left: 8px; font-size: 11px; font-weight: 700; color: #8a9aa3; letter-spacing: 0; }
.qrv-opt.is-link { cursor: pointer; }
.qrv-opt.is-link:hover { filter: brightness(.97); }
.qrv-opt-go { flex: 0 0 auto; color: #8a9aa3; font-size: 18px; font-weight: 900; line-height: 1; }
.qrv-opt.is-view { outline: 3px solid #f28c1e; outline-offset: 1px; }
.qrv-opt.is-view .qrv-opt-go { color: #f28c1e; }
.qrv-h-view { color: #c0660a; }
.qrv-view-photo { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.qrv-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-bottom: 8px; }
.qrv-strip-item { margin: 0; }
.qrv-strip-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.qrv-strip-item figcaption { margin-top: 2px; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.qrv-node-pic { width: 34px; height: 26px; object-fit: cover; border-radius: 5px; }
.qrv-tablephotos { display: flex; gap: 6px; margin-top: 6px; }
.qrv-tablephotos img { flex: 1; min-width: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.qrv-zoom { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(4, 20, 34, .9); cursor: zoom-out; }
.qrv-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }
/* 系統ツリーを重ねる（tree.php?embed=1） */
.qrv-tree { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3100; display: flex; flex-direction: column; background: #fff; }
.qrv-tree-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #06293a; color: #fff; }
.qrv-tree-back { border: 0; border-radius: 999px; padding: 6px 14px; background: #f28c1e; color: #fff; font-weight: 800; cursor: pointer; }
.qrv-tree-frame { flex: 1; width: 100%; border: 0; }
@media (max-width: 480px) {
    .qrv-wrap { padding: 6px; }
    .qrv-top { flex-direction: column; }
    .qrv-photo { flex: none; max-width: 100%; width: 100%; aspect-ratio: 16 / 10; }
}

/* アバタースキル（相棒の固有スキルの下。quest.js の showVeeSkill。2026-10-01） */
.qskill-avatar { margin-top: 2px; }
.qskill-avatar[hidden] { display: none; }
.qskill-avatar .qskill-kind { background: #1f6fb2; }

/* 強敵の階（学名の階。quest.js の endlessIsland の danger。2026-10-01 ユーザー要望「やばいことがわかるように、マス目を禍々しく」） */
.qmap-node.is-danger { background-color: #2a0f2e; border-color: #c43cf0; color: #ffb3f2; box-shadow: 0 7px 0 #14051a, 0 0 14px 4px rgba(196, 60, 240, .55), 0 10px 10px rgba(0, 0, 0, .4); animation: qdanger-pulse 1.8s ease-in-out infinite; }
.qmap-node.is-danger.is-cleared { background-color: #4a1a4f; color: #ffd84d; }
.qmap-node.is-danger.is-current { background-color: #7a0f2e; color: #fff; }
.qmap-node.is-danger.is-locked { background-color: #3b2a3f; color: #d9b8e6; }
@keyframes qdanger-pulse { 0%, 100% { box-shadow: 0 7px 0 #14051a, 0 0 10px 2px rgba(196, 60, 240, .4), 0 10px 10px rgba(0, 0, 0, .4); } 50% { box-shadow: 0 7px 0 #14051a, 0 0 22px 8px rgba(226, 40, 90, .6), 0 10px 10px rgba(0, 0, 0, .4); } }
@keyframes qdanger-spin { to { transform: rotate(360deg); } }
.qmap-danger { position: absolute; pointer-events: none; }
.qmap-danger::before, .qmap-danger::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 61% 30%, 93% 21%, 72% 46%, 100% 62%, 67% 66%, 72% 100%, 50% 78%, 28% 100%, 33% 66%, 0 62%, 28% 46%, 7% 21%, 39% 30%); background: radial-gradient(circle, #c43cf0 0%, #8a1234 45%, #2a0f2e 75%); opacity: .85; animation: qdanger-spin 10s linear infinite; }
.qmap-danger::after { opacity: .55; transform: rotate(25deg); animation: qdanger-spin2 14s linear infinite; }
@keyframes qdanger-spin2 { from { transform: rotate(25deg); } to { transform: rotate(-335deg); } }
.qstage.is-danger .qstage-card { box-shadow: 0 0 0 2px #c43cf0, 0 0 18px 4px rgba(196, 60, 240, .45), 0 4px 14px rgba(0, 20, 35, .35); }
.qstage.is-danger .qstage-card::before { background: linear-gradient(115deg, rgba(42, 6, 30, .92), rgba(110, 15, 50, .86) 55%, rgba(60, 10, 70, .9)); }
.qdanger { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 3px; background: #e2285a; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .08em; box-shadow: 0 0 8px rgba(226, 40, 90, .8); animation: qdanger-blink 1.4s steps(2, end) infinite; }
@keyframes qdanger-blink { 50% { background: #8a1234; } }
@media (prefers-reduced-motion: reduce) { .qmap-node.is-danger, .qmap-danger::before, .qmap-danger::after, .qdanger { animation: none; } }

/* ふりかえりの窓の「報告」（図鑑のまちがい。入力欄は js/reportform.js。2026-10-01） */
.qrv-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d5e3ea; }
.qrv-report { border: 2px solid #e05252; border-radius: 999px; padding: 4px 14px; background: transparent; color: #e05252; font-size: 13px; font-weight: 800; cursor: pointer; }
.qrv-report:hover { background: rgba(224, 82, 82, .08); }
.qrv-report:disabled { opacity: .5; cursor: default; }

/* クエストの設定（いちばん下のボタン → 窓。quest.js の openQuestSettings。2026-10-01） */
.qroute-settings { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2px solid #06293a; border-radius: 999px; background: #fff; color: #06293a; font-size: 12px; font-weight: 800; cursor: pointer; }
.qroute-settings svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.qroute-settings:disabled { opacity: .5; cursor: default; }
.qset-opts { display: flex; flex-direction: column; gap: 6px; }
.qset-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 2px solid #d5e3ea; border-radius: 12px; background: #fff; color: #06293a; text-align: left; cursor: pointer; }
.qset-opt b { font-size: 14px; }
.qset-opt span { font-size: 12px; color: #4d6572; line-height: 1.4; }
.qset-opt.is-on { border-color: #f28c1e; background: #fff6eb; }
.qset-opt:disabled { opacity: .6; cursor: wait; }
.qset-dbs { display: flex; flex-wrap: wrap; gap: 6px; }