#hoyabomb {
    width: 10%;
    right: 0px;
}

.bomb {
    position: absolute;
    top: 0%;
    z-index: 99;
}

.chara {
    position: absolute;
    bottom: 10%;
    visibility: hidden;
    z-index: 99;
    height: auto;
    width: 15%;
    opacity: 0;
}

.svgarea.charaarea {
    overflow: visible;
}

.hp-frame {
    position: absolute;
    top: 0px;
    width: 500px;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
}

.hp-bar {
    height: 100%;
    width: 100%;
    background-color: darksalmon;
}

#hp-frame-original {
    display: none;
}

.content-quest {
    background: #6cc88a;
    position: absolute;
    top: 0px;
    width: 100%;
    height: calc(100dvh - 61px);
}

#favoimg {
    left: 0px;
    position: relative;
    height: 100%;
    max-width: 50%;
    object-fit: cover;
    border-radius: 10px;
}

#favoframe {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    border-radius: 10px;
}

.favo-comment {
    height: 100%;
    width: 100%;
    position: relative;
    /* border:medium solid #e06817; */
}

#favo-commenttxt {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 70%;
    height: 80%;
    overflow: hidden;
}

#optionarea-img {
    width: 100%;
    height: 100%
}

.q-options {
    height: 100%;
}

.q-option {
    height: 50%;
    padding: 0px 0px 0px 0px;
    /* border:medium solid #4716ce; */
}

.FP-icon {
    position: absolute;
    width: auto;
    height: 100%;
    z-index: 50;
}

.battle-field {
    width: 100%;
    height: calc((var(--vh, 1vh) *100 - 61px) * 0.3);
    position: relative;
    overflow: hidden;
}

.favo-field {
    height: calc((var(--vh, 1vh) *100 - 61px) * 0.3);
    width: 100%;
    position: relative;
    display: flex;
}

.option-field {
    height: calc((var(--vh, 1vh) *100 - 61px) * 0.4);
    position: relative;
    max-width: 100000px;
}

@media (max-width: 991px) {
    .content-quest {
        top: 0px;
        height: calc(100dvh - 50px);
    }
    .chara {
        width: 40%;
    }
    .battle-field {
        height: calc((var(--vh, 1vh) *100 - 50px) * 0.3);
        width: 100%;
        position: relative;
    }
    .favo-field {
        height: calc((var(--vh, 1vh) *100 - 50px) * 0.3);
    }
    .option-field {
        height: calc((var(--vh, 1vh) *100 - 50px) * 0.4);
    }
    #hoyabomb {
        width: 20%;
        right: 0px;
    }
    .hp-frame {
        height: 10px;
    }
}

@media (max-width: 768px) {
    .q-option {
        height: 25%;
    }
}

/* 背景は「空と海（sea.png）」＋手前の砂浜（quests.php の #beach）。
   キャラは砂浜に立つ（足元は下から10%）。海の青がキャラの服と重ならないよう、
   水平線を上から30%に上げ、下から45%を砂浜にしている。
   sea.png の水平線は画像の上から約62%。top:30% と translateY(-62%) で水平線を30%の位置にそろえる */
#seaimg {
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    height: auto;
    min-height: 90%;
    object-fit: cover;
    transform: translateY(-62%);
}
#beach {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 48%;
    display: block;
}
.beach-wet { fill: #d9b77c; }
.beach-sand { fill: #efd6a2; }
.beach-foam path {
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .85;
    vector-effect: non-scaling-stroke;
}
/* 波打ちぎわがゆっくり寄せては返す */
.beach-foam {
    animation: beach-wave 4s ease-in-out infinite;
}
@keyframes beach-wave {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-18px, 3px); }
}
.beach-dots circle { fill: #c9a56a; }
@media (prefers-reduced-motion: reduce) {
    .beach-foam { animation: none; }
}

#dispinfo2-correct {
    position: absolute;
    top: 0%;
    left: 0%;
    display: none;
    transition: opacity 1s;
    font-weight: bold;
    font-size: 20px;
    color: #f5f5f5;
}

#dispinfo-correct {
    position: absolute;
    top: 70%;
    left: 20%;
    display: none;
    transition: opacity 1s;
    font-weight: bold;
}

/* 制限時間の時計（battle.js の makeClock）。敵の左上に出る */
.quiz-clock {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.quiz-clock-bell { fill: #f2b233; stroke: #5b3b0a; stroke-width: 3; }
.quiz-clock-face { fill: #fffdf4; stroke: #5b3b0a; stroke-width: 5; }
.quiz-clock-pie {
    fill: none;
    stroke: #7fd3ff;
    stroke-width: 32;
    stroke-dasharray: 100 100;
    transition: stroke .3s;
}
.quiz-clock-ticks line { stroke: #5b3b0a; stroke-width: 4; stroke-linecap: round; }
.quiz-clock-hand { stroke: #d6402e; stroke-width: 5; stroke-linecap: round; }
.quiz-clock-pin { fill: #5b3b0a; }
.quiz-clock.hurry .quiz-clock-pie { stroke: #ff8a7a; }
.quiz-clock.hurry svg { animation: quiz-clock-shake .25s linear infinite; }
@keyframes quiz-clock-shake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

/* 早押し（2秒以内に正解）の演出。battle.js の celebrateQuick。画面の上にかぶせて1.6秒で消す */
.quick-fx {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    overflow: hidden;
}
.quick-fx-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--cx) var(--cy), rgba(255, 255, 255, .95), rgba(255, 248, 200, .55) 35%, rgba(255, 255, 255, 0) 70%);
    animation: quick-flash .45s ease-out forwards;
}
@keyframes quick-flash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}
/* 斜めに走る光の帯 */
.quick-fx-sweep {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 30%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 45%, rgba(255, 236, 140, .9) 50%, rgba(255, 255, 255, .85) 55%, rgba(255, 255, 255, 0));
    transform: translateX(-120%) skewX(-20deg);
    animation: quick-sweep .55s cubic-bezier(.3, .7, .4, 1) .05s forwards;
}
@keyframes quick-sweep {
    to { transform: translateX(460%) skewX(-20deg); }
}
/* 集中線っぽい光の放射 */
.quick-fx-burst {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    width: 160vmax;
    height: 160vmax;
    margin: -80vmax 0 0 -80vmax;
    background: repeating-conic-gradient(rgba(255, 230, 120, .55) 0 4deg, rgba(255, 255, 255, 0) 4deg 18deg);
    -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 4%, #000 12%, rgba(0, 0, 0, 0) 45%);
    mask: radial-gradient(circle, rgba(0, 0, 0, 0) 4%, #000 12%, rgba(0, 0, 0, 0) 45%);
    animation: quick-burst .9s ease-out forwards;
}
@keyframes quick-burst {
    0% { opacity: 0; transform: scale(.3) rotate(0); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.1) rotate(25deg); }
}
.quick-fx-ring {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid rgba(255, 238, 150, .95);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 220, 90, .9);
    animation: quick-ring .6s ease-out forwards;
}
@keyframes quick-ring {
    from { opacity: 1; transform: scale(.2); }
    to { opacity: 0; transform: scale(9); border-width: 1px; }
}
.quick-fx-text,
.quick-fx-streak {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: .04em;
    transform: translate(-50%, -50%);
}
.quick-fx-text {
    font-size: var(--fs);
    color: #fff3a0;
    background: linear-gradient(180deg, #fffbe0 0%, #ffe14d 45%, #ff9d2e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #fff;
    filter: drop-shadow(0 0 6px rgba(255, 190, 40, .9)) drop-shadow(0 3px 0 #c0561b);
    animation: quick-text 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
@keyframes quick-text {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-12deg); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1.35) rotate(3deg); }
    30% { transform: translate(-50%, -50%) scale(1) rotate(0); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(1.05); }
}
.quick-fx-streak {
    margin-top: calc(var(--fs) * .85);
    font-size: calc(var(--fs) * .42);
    color: #fff;
    background: linear-gradient(90deg, #ff6fae, #ffb13b);
    padding: .15em .7em;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    animation: quick-streak 1.3s ease-out .12s both;
}
@keyframes quick-streak {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    32% { transform: translate(-50%, -50%) scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -90%); }
}
.quick-fx-star {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 255, 255, .9);
    opacity: 0;
    animation: quick-star .9s cubic-bezier(.15, .8, .3, 1) var(--delay) forwards;
}
@keyframes quick-star {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) {
    .quick-fx-burst, .quick-fx-sweep, .quick-fx-star { display: none; }
}

/* 左上の能力値の札（battle.js の updateBattleStatus） */
#battle-status {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 101;
    display: flex;
    gap: .8em;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(6, 41, 58, .55);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.battle-status-label {
    opacity: .75;
    font-weight: 400;
    margin-right: .15em;
}
#battle-status.low .battle-status-hp {
    color: #ffb3a8;
}

/* 着弾したときに浮かぶダメージ（battle.js の showDamage） */
.dmg-pop {
    position: absolute;
    z-index: 102;
    pointer-events: none;
    white-space: nowrap;
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 1px #1d2b4a;
    text-shadow: 0 2px 0 #1d2b4a, 0 0 6px rgba(0, 0, 0, .35);
    animation: dmg-pop 1.2s ease-out forwards;
}
.dmg-pop small {
    font-size: .5em;
    margin-left: .15em;
}
.dmg-pop--hurt {
    color: #ff6b5b;
    -webkit-text-stroke-color: #5a1010;
    text-shadow: 0 2px 0 #5a1010, 0 0 6px rgba(0, 0, 0, .35);
}
.dmg-pop--crit {
    font-size: 40px;
    color: #ffe14d;
    -webkit-text-stroke: 1.5px #a0400c;
    text-shadow: 0 3px 0 #a0400c, 0 0 12px rgba(255, 200, 40, .95);
    animation-name: dmg-pop-crit;
}
/* チャージショットのダメージは、さらに大きく、白く光らせる */
.dmg-pop--charge {
    font-size: 52px;
    text-shadow: 0 3px 0 #a0400c, 0 0 14px #fff, 0 0 26px rgba(255, 200, 40, 1);
}
@keyframes dmg-pop {
    0% { opacity: 0; transform: translate(-50%, 0) scale(.5); }
    15% { opacity: 1; transform: translate(-50%, -18px) scale(1.2); }
    30% { transform: translate(-50%, -22px) scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}
@keyframes dmg-pop-crit {
    0% { opacity: 0; transform: translate(-50%, 0) scale(.3) rotate(-10deg); }
    15% { opacity: 1; transform: translate(-50%, -22px) scale(1.5) rotate(4deg); }
    30% { transform: translate(-50%, -26px) scale(1) rotate(0); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -56px) scale(1.05); }
}
@media screen and (max-width: 767px) {
    .dmg-pop { font-size: 22px; }
    .dmg-pop--crit { font-size: 32px; }
    .dmg-pop--charge { font-size: 40px; }
    #battle-status { font-size: 11px; }
}

/* 弱攻撃のバケツと水しぶき（battle.js の splash / throwWater） */
.splash-bucket {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2));
}
.splash-drop {
    position: absolute;
    z-index: 101;
    pointer-events: none;
    background: #3fb4f0;
    border: 1px solid #1d78b8;
    border-radius: 2px;
}
.splash-drop--light {
    background: #bff0ff;
    border-color: #6cc6ef;
}
.dmg-pop--weak {
    font-size: 20px;
    color: #bff0ff;
    -webkit-text-stroke-color: #1d5a88;
    text-shadow: 0 2px 0 #1d5a88, 0 0 6px rgba(0, 0, 0, .3);
}

/* 中攻撃のホヤ（battle.js の squirt） */
.squirt-hoya {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    height: auto;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2));
}

/* チャージショット（battle.js の atk_motion_man.chargeShot） */
.charge-dim {
    position: absolute;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    background: radial-gradient(circle at var(--x) var(--y), rgba(0, 10, 30, 0) 0, rgba(0, 10, 30, .15) 12%, rgba(0, 10, 30, .5) 55%);
}
.charge-glow {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 235, .95) 0, rgba(255, 225, 90, .75) 30%, rgba(255, 160, 60, .25) 55%, rgba(255, 160, 60, 0) 70%);
}
.charge-hoya {
    position: absolute;
    z-index: 101;
    pointer-events: none;
    height: auto;
    filter: brightness(1.25) drop-shadow(0 0 6px #fff6b0) drop-shadow(0 0 14px #ffd84d);
}
.charge-spark,
.charge-trail {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    border-radius: 50%;
    background: #fffbe0;
    box-shadow: 0 0 6px 2px #ffd84d;
}
.charge-trail {
    background: radial-gradient(circle, rgba(255, 255, 235, .9) 0, rgba(255, 216, 77, .6) 45%, rgba(255, 216, 77, 0) 70%);
    box-shadow: none;
}
.charge-ring {
    position: absolute;
    z-index: 101;
    pointer-events: none;
    border-radius: 50%;
    border: 5px solid #fff6b0;
    box-shadow: 0 0 14px #ffd84d, inset 0 0 14px #ffd84d;
}
.charge-flash {
    position: absolute;
    inset: 0;
    z-index: 101;
    pointer-events: none;
    background: #fffbe8;
}

/* 速球（早押し2連続。battle.js の atk_motion_man.fastThrow） */
.fast-hoya {
    position: absolute;
    z-index: 101;
    pointer-events: none;
    height: auto;
    filter: drop-shadow(0 0 4px #fff);
}
.fast-trail {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .85) 0, rgba(255, 190, 120, .45) 45%, rgba(255, 190, 120, 0) 70%);
}
.fast-ring { border-width: 3px; }

/* バケツガード（battle.js の updateGuard）。体力1/5以下で Vee が光り、次に当たるホヤを自動で弾く（操作はいらない） */
#player1.guard-ready > svg { animation: guard-glow .9s ease-in-out infinite alternate; }
/* セキサクパンチの「ため」（battle.js の skillPunch）。光りながら、ぶるぶる震える */
#player1.is-charging > svg { animation: punch-charge .12s steps(2, end) infinite; filter: drop-shadow(0 0 6px #fff6b0) drop-shadow(0 0 14px #ff9a3d); }
@keyframes punch-charge {
    from { transform: translateX(-2px); }
    to { transform: translateX(2px); }
}
@keyframes guard-glow {
    from { filter: drop-shadow(0 0 2px rgba(255, 246, 176, .4)); }
    to { filter: drop-shadow(0 0 8px #fff6b0) drop-shadow(0 0 16px #ffd84d); }
}
/* 戦闘画面の右上の札の入れ物（相棒のスキルとバケツガード）。Vee の頭の上は切れ、右は時計と、足もとはスマホで体力バーと重なった */
#battle-skills {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.skill-chip {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 10px;
    border: 2px solid #8fe3ff;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    color: #06293a;
    background: rgba(235, 250, 255, .95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.skill-chip b { font-size: 12px; font-weight: 900; color: #0d6f7b; }
.skill-chip small { font-size: 10px; font-weight: 700; color: #52606b; }
.skill-chip.is-tap { cursor: pointer; animation: skill-chip-pulse 1.2s ease-in-out infinite alternate; }
.skill-chip.is-charged { border-color: #ffb300; background: #fff1c2; animation: none; }
.skill-chip.is-charged b { color: #c07a00; }
.skill-chip.is-used { opacity: .5; animation: none; cursor: default; }
@keyframes skill-chip-pulse { to { box-shadow: 0 0 8px 2px rgba(143, 227, 255, .9); } }
/* バケツガードの札（相棒のスキルの札と同じ形で、金色） */
.guard-hint { border-color: #ffd84d; background: rgba(255, 246, 200, .95); }
.guard-hint b { color: #c07a00; }
.dmg-pop--guard {
    font-size: 30px;
    color: #fff6b0;
    -webkit-text-stroke: 1.5px #a0400c;
    text-shadow: 0 3px 0 #a0400c, 0 0 12px rgba(255, 220, 80, .95);
    animation-name: dmg-pop-crit;
}

/* ------------------------------------------------------------------
   選択肢のボタン（2026-09-24 に作り直した）。以前は灰色の箱に黒い枠、中にもう1つ灰色の箱だった。
   紺の地に白い角丸のカードを並べ、頭に A〜D の札。PC は2列×2段、スマホは1列×4段。
   答えたら正解は緑、選んだ不正解は赤、ほかは薄く（battle.js の solve が is-correct / is-wrong / is-dim を付ける）
   ------------------------------------------------------------------ */
.option-field {
    padding: 8px 10px;
    background: linear-gradient(180deg, #0d2f45, #0a2436);
}
.q-options {
    counter-reset: qopt;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
    height: 100%;
    margin: 0;
}
.q-options > .q-option {
    counter-increment: qopt;
    position: relative;
    flex: none;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0 14px 0 52px;
    border: 2px solid #cfe0ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 0 #9cb8c8;
    color: #06293a;
    cursor: pointer;
    overflow: hidden;
    transition: transform .08s, box-shadow .08s, background .2s, border-color .2s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
}
/* JS が display:block を入れる。答えると pointer-events:none も入るので、「none」ではなく「display: none」で見分ける */
.q-options > .q-option:not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; align-items: center; }
.q-options > .q-option::before { /* A〜D の札 */
    content: counter(qopt, upper-alpha);
    position: absolute;
    left: 10px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    background: #1aa6b7;
}
.q-options > .q-option:hover { border-color: #1aa6b7; }
.q-options > .q-option:active { transform: translateY(3px); box-shadow: 0 1px 0 #9cb8c8; }
.q-optiontxt {
    padding: 0;
    background: none;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
/* 答え合わせ */
.q-options > .q-option.is-correct { border-color: #2ea44f; background: #e3f7e9; box-shadow: 0 4px 0 #2ea44f; }
.q-options > .q-option.is-correct::before { background: #2ea44f; }
.q-options > .q-option.is-wrong { border-color: #d9534f; background: #fde8e6; box-shadow: 0 4px 0 #d9534f; }
.q-options > .q-option.is-wrong::before { background: #d9534f; }
.q-options > .q-option.is-dim { opacity: .45; }
/* ○×の絵は、カードの右端に小さく */
.q-options > .q-option .FP-icon { left: auto; right: 10px; top: 50%; height: min(44px, 70%); width: auto; transform: translateY(-50%); }
.q-options > .q-option .FP-icon svg { display: block; height: 100%; width: auto; }

@media (max-width: 768px) {
    .option-field { padding: 6px 8px; }
    .q-options { grid-template-columns: 1fr; gap: 6px; }
    .q-options > .q-option { padding-left: 48px; border-radius: 12px; box-shadow: 0 3px 0 #9cb8c8; }
    .q-options > .q-option::before { width: 28px; height: 28px; margin-top: -14px; font-size: 15px; }
    .q-optiontxt { font-size: 16px; }
}

/* 対戦画面の高さ（2026-09-24）。以前は「画面の高さ − 61px（スマホは50px）」の決め打ちで、実際のナビバーの高さと合わず、
   PC では選択肢の下の段が画面の下で切れていた。ナビバーの実際の高さ（--navbar-h。loginmodal.js が入れる）を引き、
   3つの段は割合（3 : 3 : 4）で分ける */
.content-quest {
    height: calc(100dvh - var(--navbar-h, 61px)) !important;
    display: flex;
    flex-direction: column;
}
.content-quest > .battle-field { flex: 3 1 0; height: auto !important; min-height: 0; }
.content-quest > .favo-field { flex: 3 1 0; height: auto !important; min-height: 0; }
.content-quest > .option-field { flex: 4 1 0; height: auto !important; min-height: 0; }

/* ナンタイリンクで消えた選択肢（battle.js の nantaiLink） */
.q-options > .q-option.is-cut { pointer-events: none; }
/* ナンタイリンクの粘液が垂れた選択肢: 上から暗く染まって沈む */
.q-options > .q-option.is-slimed { filter: grayscale(.8) brightness(.45); transform: scale(.96); transition: filter 1s ease-in, transform .6s; }
.q-options > .q-option.is-slimed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(40, 70, 60, .7), rgba(40, 70, 60, .35));
    border-radius: inherit;
    animation: slime-spread .9s ease-out;
    transform-origin: 50% 0;
}
@keyframes slime-spread { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* ウミウシの影と、こぼれる粘液（battle.js の nantaiLink）。上のゲーム画面（砂浜）にあらわれ、しずくは下の選択肢まで落ちる */
.slug-fx { position: fixed; z-index: 1200; pointer-events: none; }
.slug-body { position: absolute; left: -48px; top: -46px; width: 96px; height: 40px; opacity: 0; animation: slug-in 2.6s ease-in-out forwards; }
.slug-body svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
@keyframes slug-in {
    0% { opacity: 0; transform: translateX(-24px); }
    25% { opacity: .92; transform: translateX(0); }
    75% { opacity: .92; transform: translateX(6px); }
    100% { opacity: 0; transform: translateX(14px); }
}
.slug-drop {
    position: fixed;
    z-index: 1201;
    pointer-events: none;
    width: 12px;
    height: 14px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(circle at 35% 30%, #e9fff6, #8fd9c0 60%, #4fa98f);
    opacity: 0; /* 動きは battle.js が WAAPI で（落ちる先が毎回ちがうので） */
}
/* メガゴホーシャ（battle.js の megaBeam）。クモヒトデ・ビーム・画面ぜんたいの光 */
.beam-fx { position: absolute; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.beam-star { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; opacity: 0; }
.beam-star svg { filter: drop-shadow(0 0 10px #fff1c9) drop-shadow(0 0 22px #f0a24a); }
/* 出てくる場所に、空間がゆがむような暗い渦（虚空）。星が出るあいだだけ */
.beam-fx::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 15, 30, .85) 0, rgba(40, 20, 60, .5) 45%, rgba(0, 0, 0, 0) 70%);
    animation: beam-void 2.2s ease-out forwards;
}
@keyframes beam-void {
    0% { transform: scale(0); opacity: 0; }
    30% { transform: scale(1.1); opacity: 1; }
    80% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.6); opacity: 0; }
}
.beam-star svg { width: 100%; height: 100%; overflow: visible; }
.beam-ray {
    position: absolute;
    height: 26px;
    margin-top: -13px;
    transform-origin: 0 50%;
    opacity: 0;
    border-radius: 13px;
    background: linear-gradient(90deg, #fff, #ffe98a 35%, #ffb45e);
    box-shadow: 0 0 20px 8px rgba(255, 233, 138, .8), 0 0 40px 16px rgba(240, 162, 74, .6);
}
.beam-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle, #fff 0, rgba(255, 250, 220, .95) 40%, rgba(255, 200, 130, .8) 100%); }

/* 一時停止ボタン（battle.js の addQuitButton）。能力値の札とは別の見た目（白い丸） */
#battle-quit {
    position: absolute;
    top: 32px;
    left: 8px;
    z-index: 101;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #06293a;
    border-radius: 50%;
    background: #fff;
    color: #06293a;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 3px 0 #06293a;
}
#battle-quit:active { transform: translateY(2px); box-shadow: 0 1px 0 #06293a; }
/* 一時停止の枠（ゲーム画面の上に、ドット風のふちの箱） */
#battle-pause {
    position: absolute;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 20, 32, .55);
}
.bp-box {
    width: min(300px, 100%);
    padding: 18px 18px 16px;
    text-align: center;
    background: #0d2f45;
    color: #fff;
    box-shadow: 0 -4px 0 #0d2f45, 0 4px 0 #0d2f45, -4px 0 0 #0d2f45, 4px 0 0 #0d2f45, 0 0 0 4px #ffd84d inset, 0 12px 24px rgba(0, 0, 0, .4);
    animation: bp-in .2s steps(3, end);
}
@keyframes bp-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.bp-title { font-size: 22px; font-weight: 900; letter-spacing: .1em; color: #ffd84d; }
.bp-note { margin: 6px 0 14px; font-size: 12px; color: #cfe6f2; }
.bp-btn { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; font-size: 16px; font-weight: 900; }
.bp-go { background: #1aa6b7; color: #fff; box-shadow: 0 4px 0 #0d6f7b; }
.bp-review { background: #fff; color: #0d2f45; font-size: 14px; box-shadow: 0 4px 0 #9fb8c6; }
.bp-review:active { transform: translateY(3px); box-shadow: 0 1px 0 #9fb8c6; }
.bp-review:disabled { background: rgba(255, 255, 255, .15); color: #9fb8c6; box-shadow: none; font-weight: 700; font-size: 12px; }
.bp-quit { background: transparent; color: #ffb4a8; font-size: 13px; text-decoration: underline; }
.bp-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d6f7b; }

/* キンシネットで耐えたあと（battle.js）: Vee の体がずっと光る */
#player1.is-mycel > svg { animation: mycel-glow 1.1s ease-in-out infinite alternate; }
@keyframes mycel-glow {
    from { filter: drop-shadow(0 0 4px #fff6d6) drop-shadow(0 0 10px #ffcf6b); }
    to { filter: drop-shadow(0 0 10px #fffbe8) drop-shadow(0 0 22px #ffb03b); }
}
/* プラントヒールで回復したとき: 緑にふわっと光る */
#player1.is-heal > svg { animation: heal-glow .9s ease-out; }
@keyframes heal-glow {
    0% { filter: drop-shadow(0 0 0 rgba(120, 230, 120, 0)); }
    40% { filter: drop-shadow(0 0 12px #9ff29f) drop-shadow(0 0 24px #4fd36b); }
    100% { filter: drop-shadow(0 0 0 rgba(120, 230, 120, 0)); }
}
/* カンケイチャームで敵が攻撃に失敗したとき: 敵の上にハートがふわっと浮かぶ */
.charm-heart { position: absolute; left: 50%; top: 10%; z-index: 5; font-size: 34px; color: #ff6fa8; text-shadow: 0 0 8px #fff; pointer-events: none; animation: charm-up 1.2s ease-out forwards; }
@keyframes charm-up { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 25% { transform: translate(-50%, 0) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1); opacity: 0; } }
/* ヘンケイリペアの、2つに分かれて飛ぶ平たい虫（battle.js の splitCounter） */
.split-worm { position: absolute; z-index: 110; width: 64px; height: 42px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.split-worm svg { width: 100%; height: 100%; }
/* ゲンセイランブの、敵にまとわりつく小さな生き物の群れ（protistRumble） */
.rumble-dot {
    position: absolute; left: 50%; top: 50%; z-index: 5; width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6ffd6, #9fd14f 55%, #4f8a24);
    box-shadow: 0 0 6px rgba(190, 255, 120, .9); pointer-events: none; opacity: 0;
    animation: rumble-swarm 1.2s ease-in forwards;
}
@keyframes rumble-swarm {
    0% { opacity: 0; transform: rotate(var(--a)) translateX(90px) scale(.5); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: rotate(calc(var(--a) + 240deg)) translateX(6px) scale(1.1); }
}

/* 強い白オバケは、ほんのりオーラをまとう（battle.js の markEnemy、js/quizpower.js）。ボスの番人の札は .enemy-guardian
   はじめは赤く光らせて怒りマークを付けたが、見た目が合わなかったのでやめた（2026-09-25） */
.chara.is-strong::before {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    top: -12%;
    bottom: -8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 221, 120, .6), rgba(255, 221, 120, .28) 55%, rgba(255, 221, 120, 0));
    pointer-events: none;
    animation: enemy-aura 1.8s ease-in-out infinite alternate;
}
.chara.is-strong svg {
    filter: drop-shadow(0 0 5px rgba(255, 200, 70, .95)) drop-shadow(0 0 12px rgba(255, 221, 120, .7));
}
@keyframes enemy-aura {
    from { opacity: .55; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1.06); }
}
.enemy-guardian {
    position: absolute;
    bottom: 22px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(6, 41, 58, .85);
    border: 1px solid #ffd84d;
    color: #ffd84d;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
}

/* まどわしオバケの5択（battle.js の castConfusion / addExtraOption）。
   5つめ（#option-4）は、PC では2段のあいだに横いっぱい、スマホでは3番目に（HTML でも option-1 と option-2 のあいだに置いてある） */
.q-options > .q-option-extra { grid-column: 1 / -1; border-color: #ffd84d; box-shadow: 0 4px 0 #d9ae1a; }
.q-options > .q-option-extra::before { background: #d9ae1a; }
.q-options.is-five { gap: 6px; }
.q-options.is-five .q-optiontxt { font-size: 16px; }
@media (max-width: 768px) {
    .q-options.is-five { gap: 5px; }
    .q-options.is-five .q-optiontxt { font-size: 15px; }
}
.q-options > .q-option.is-conjured { animation: option-conjure .9s ease-out; }
@keyframes option-conjure {
    0% { transform: scale(.2); opacity: 0; box-shadow: 0 0 0 0 rgba(255, 216, 77, .9); }
    60% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 22px 8px rgba(255, 216, 77, .8); }
    100% { transform: scale(1); box-shadow: 0 4px 0 #d9ae1a; }
}
/* 呪文があと何問続くか（金の点） */
.five-turns { position: absolute; top: 4px; right: 8px; pointer-events: none; }
.five-turns { --turn-bg: #d9ae1a; --turn-fg: #fff; }
.q-options > .q-option.is-correct .five-turns, .q-options > .q-option.is-wrong .five-turns { display: none; }
/* 宣言 */
.mage-call {
    position: absolute;
    top: 12%;
    right: 4%;
    z-index: 130;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(6, 41, 58, .88);
    border: 2px solid #ffd84d;
    color: #ffd84d;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
    animation: mage-call 2.2s ease-out forwards;
}
@keyframes mage-call {
    0% { opacity: 0; transform: translateY(8px) scale(.8); }
    12% { opacity: 1; transform: translateY(0) scale(1.05); }
    20% { transform: scale(1); }
    85% { opacity: 1; }
    100% { opacity: 0; }
}
/* 唱えているあいだ、杖が光って体がふわっと浮く */
.chara.is-casting svg { animation: mage-float 2.2s ease-in-out; }
.chara.is-casting .mage-wand { filter: drop-shadow(0 0 6px #ffd84d); }
@keyframes mage-float { 0%, 100% { transform: translateY(0); } 40%, 70% { transform: translateY(-8px); } }
/* 杖から飛ぶ光の粒 */
.mage-spark {
    position: fixed;
    z-index: 1300;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe0, #ffd84d 55%, rgba(255, 216, 77, 0) 70%);
    pointer-events: none;
    opacity: 0;
}
/* 選択肢のまんなかに出る魔法陣 */
.q-options { position: relative; }
.mage-circle {
    position: absolute;
    z-index: 5;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    pointer-events: none;
    animation: mage-circle 2.2s ease-in-out forwards;
}
.mage-circle svg { width: 100%; height: 100%; fill: none; stroke: #ffd84d; stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(255, 216, 77, .9)); }
@keyframes mage-circle {
    0% { opacity: 0; transform: scale(.3) rotate(0deg); }
    30% { opacity: 1; transform: scale(1) rotate(60deg); }
    70% { opacity: .9; transform: scale(1.05) rotate(160deg); }
    100% { opacity: 0; transform: scale(1.4) rotate(220deg); }
}
/* 呪文で並びが変わった4つは、一瞬きらっとする（showExtraOption） */
.q-options > .q-option.is-reshuffled { animation: option-reshuffle .6s ease-out; }
@keyframes option-reshuffle { 0% { filter: brightness(1.6); transform: scale(.97); } 100% { filter: none; transform: none; } }
/* 呪文が切れて5つめが消えるとき（vanishExtraOption）: 金色に光ってしぼみ、光の粒になる */
.q-options > .q-option.is-vanishing { animation: option-vanish .8s ease-in forwards; }
/* 消えていく札は A〜D の数に入れない（次の問題の札が、消えたあとに1つずれないように） */
.q-options > .q-option.is-vanishing { counter-increment: none; }
.q-options > .q-option.is-vanishing::before { content: none; }
@keyframes option-vanish {
    0% { box-shadow: 0 0 0 0 rgba(255, 216, 77, .9); }
    35% { transform: scale(1.04); box-shadow: 0 0 22px 8px rgba(255, 216, 77, .85); background: #fff8d8; }
    100% { transform: scaleY(.1) scaleX(.6); opacity: 0; }
}

/* ゆきオバケ（ふぶきの呪文。battle.js の castSnow / applySnow）。写真を吹雪で隠す。
   写真は blur と白っぽさで、時計の針が9時で晴れきる（JS が transition を入れる）。吹雪のあいだは拡大（Intense）できない */
#favoimg.is-snowed { pointer-events: none; }
#snow-veil {
    position: absolute;
    z-index: 3;
    border-radius: 10px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s;
}
#snow-veil.is-on { opacity: 1; }
#snow-veil.is-on.is-thin { opacity: .25; }
.snow-haze { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(225, 240, 250, .55)); }
/* 横なぐりの雪（大小2層の点を、ななめに流す） */
.snow-fall {
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(2.5px 2.5px at 20% 30%, #fff 60%, transparent 70%),
        radial-gradient(2px 2px at 70% 60%, #fff 60%, transparent 70%),
        radial-gradient(3px 3px at 45% 85%, #fff 60%, transparent 70%),
        radial-gradient(2px 2px at 85% 15%, #fff 60%, transparent 70%);
    background-size: 46px 46px;
    animation: snow-blow .9s linear infinite;
}
.snow-fall.is-2 { background-size: 80px 80px; animation-duration: 1.4s; opacity: .8; filter: blur(.6px); }
@keyframes snow-blow { from { transform: translate(0, 0); } to { transform: translate(-46px, 46px); } }
.snow-fall.is-2 { animation-name: snow-blow-2; }
@keyframes snow-blow-2 { from { transform: translate(0, 0); } to { transform: translate(-80px, 80px); } }
/* 呪文があと何問か（白い点。写真と選択肢の両方で使う） */
.skill-turns { position: absolute; top: 6px; right: 8px; z-index: 2; --turn-bg: rgba(20, 70, 100, .85); --turn-fg: #fff; }
/* 呪文があと何問かの札（ストップウォッチ＋数字。battle.js の setTurnDots） */
.five-turns, .skill-turns {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 5px;
    border-radius: 999px;
    background: var(--turn-bg);
    color: var(--turn-fg);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.five-turns svg, .skill-turns svg { width: 15px; height: 15px; display: block; }
.five-turns b, .skill-turns b { font-variant-numeric: tabular-nums; }
.mage-call.snow-call { border-color: #bfe3f5; color: #fff; background: rgba(40, 110, 150, .85); }
/* 吹きつける雪の粒 */
.snow-puff {
    position: fixed;
    z-index: 1300;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 45%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    opacity: 0;
}

/* きりオバケ（きりの呪文。battle.js の castFog / coverOption）。選択肢を1つ霧で覆う（A〜E の札は見える。押して答えられる）。
   形は、まんなかの濃い霧（.fog-core）に、大きさのちがうかたまり（.fog-lump）を重ねた雲。縁は札の外に少しはみ出す（.has-fog で overflow を見せる） */
.mage-call.fog-call { border-color: #e6eef3; color: #fff; background: rgba(60, 80, 95, .85); }
.q-options > .q-option.has-fog { overflow: visible; z-index: 3; }
.option-field { overflow: hidden; } /* 霧のふちがはみ出して、横や縦にスクロールしないように */
.fog-cover {
    position: absolute;
    left: 36px;
    right: 0;
    top: -14px;
    bottom: -14px;
    z-index: 2;
    pointer-events: none;
    animation: fog-cover-in .9s ease-out;
}
.fog-cover.is-instant { animation: none; }
/* 答え合わせのあいだは晴れる（battle.js の openFog）。次の問題でまた掛かる */
.fog-cover { transition: opacity .35s ease-out; }
.fog-cover.is-open { opacity: 0; }
/* 文字の上は、すきまなく濃く（ふちだけぼかす） */
.fog-core {
    position: absolute;
    left: 0; /* 文字の書き出しが透けないように、左は札のきわまで */
    right: 5%;
    top: 22%;
    bottom: 22%;
    border-radius: 16px / 45%; /* 角を大きく丸めると、左の書き出しの上下が透けた */
    background: #e9eff3;
    filter: blur(5px);
}
.fog-lump {
    position: absolute;
    transform: translate(0, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(244, 248, 250, 1) 0%, rgba(236, 242, 246, .95) 55%, rgba(226, 234, 240, .55) 78%, rgba(226, 234, 240, 0) 100%);
    animation: fog-lump ease-in-out infinite alternate;
}
@keyframes fog-lump {
    from { transform: translate(-4%, -52%) scale(.96); }
    to   { transform: translate(4%, -48%) scale(1.06); }
}
.fog-cover .skill-turns { top: 18px; right: 16px; }
.fog-cover .skill-turns { --turn-bg: rgba(70, 90, 105, .9); }
@keyframes fog-cover-in { from { opacity: 0; transform: translateX(-12%) scale(.85); } to { opacity: 1; transform: none; } }
.fog-cover.is-lifting { animation: fog-lift .7s ease-in forwards; }
@keyframes fog-lift { to { opacity: 0; transform: translateY(-25%) scale(1.15); } }
/* 吐き出す霧のかたまり */
.fog-puff {
    position: fixed;
    z-index: 1300;
    width: 46px;
    height: 34px;
    margin: -17px 0 0 -23px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(248, 251, 253, .95), rgba(230, 238, 243, .6) 60%, rgba(230, 238, 243, 0));
    filter: blur(2px);
    pointer-events: none;
    opacity: 0;
}
.chara.is-casting .fog-breath { animation: fog-breath .5s ease-in-out 4; transform-origin: 20px 76px; }
@keyframes fog-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35) translateX(-4px); } }

/* レア敵のドロップ（battle.js の dropLoot）。倒れた場所から、アイテムがぽんと跳ねて光り、消える */
.loot-drop {
    position: absolute;
    z-index: 140;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    pointer-events: none;
    animation: loot-pop 1.9s ease-out forwards;
}
.loot-drop img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #ffd84d; box-shadow: 0 0 14px 4px rgba(255, 216, 77, .85); }
@keyframes loot-pop {
    0% { transform: translate(0, 0) scale(.2); opacity: 0; }
    18% { transform: translate(-10px, -46px) scale(1.15); opacity: 1; }
    32% { transform: translate(-16px, -20px) scale(1); }
    42% { transform: translate(-19px, -30px) scale(1); }
    52% { transform: translate(-21px, -22px) scale(1); }
    80% { opacity: 1; }
    100% { transform: translate(-22px, -60px) scale(.9); opacity: 0; }
}

/* ------------------------------------------------------------------
   写真と問題（2026-09-26 に作り直した）。前の見た目（緑の地 #6cc88a に、黒い太ふちの白い漫画の吹き出し）を意匠として残す。
   以前は吹き出しの絵（chatbox1.svg）を重ねて、その中に問題文を浮かせていた。いまは CSS の吹き出しで、しっぽは左の写真を指す。
   白い選択肢と見分けがつくのは、緑の段・黒い太ふち・しっぽ（紺の地に白いカードだけだと、メリハリがなかった）。
   答えたら、吹き出しの下に「正解: ○○」の札（#dispinfo-correct）、写真の左下に生き物の名前（#dispinfo2-correct）
   ------------------------------------------------------------------ */
.content-quest > .favo-field {
    gap: 16px;
    align-items: stretch;
    padding: 8px 10px 8px;
    background: linear-gradient(180deg, #6cc88a, #58b577);
}
.content-quest > .favo-field #favoimg {
    flex: none;
    width: 44%;
    max-width: 44%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
    background: #06121c;
}
.content-quest > .favo-field .favo-comment {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: relative;
    padding: 28px 14px 10px;
    border: 3px solid #231815;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 0 rgba(35, 24, 21, .25);
}
/* 吹き出しのしっぽ（写真のほうを指す）。黒い三角の上に白い三角を重ねて、ふちを描く */
.content-quest > .favo-field .favo-comment::after {
    content: "";
    position: absolute;
    top: 22px;
    left: -15px;
    border-style: solid;
    border-width: 9px 15px 9px 0;
    border-color: transparent #231815 transparent transparent;
}
.content-quest > .favo-field .favo-comment::after { z-index: 0; }
/* しっぽの中の白（quests.php の .favo-tail） */
.content-quest > .favo-field .favo-comment > .favo-tail {
    position: absolute;
    z-index: 1;
    top: 26px;
    left: -9px;
    border-style: solid;
    border-width: 5px 10px 5px 0;
    border-color: transparent #fff transparent transparent;
}
.content-quest > .favo-field .favo-comment > svg { display: none; }
/* 左上の「Q」の札（前の緑） */
.content-quest > .favo-field .favo-comment::before {
    content: "Q";
    position: absolute;
    top: 7px;
    left: 10px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #6cc88a;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 2px 0 #3f9a5d;
}
.content-quest #favo-commenttxt {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    color: #231815;
    overflow-wrap: anywhere;
}
@media (min-width: 992px) {
    .content-quest #favo-commenttxt { font-size: 30px; }
}
.content-quest #dispinfo-correct {
    position: static;
    align-self: flex-start;
    max-width: 100%;
    padding: 3px 12px;
    border-radius: 999px;
    background: #e3f7e9;
    border: 1px solid #2ea44f;
    color: #1e7a3a;
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.content-quest #dispinfo2-correct {
    top: auto;
    bottom: 8px;
    left: 18px;
    z-index: 4; /* 吹雪の幕（#snow-veil）より上 */
    max-width: calc(46% - 20px);
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(6, 41, 58, .8);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   ○×・複数選択（2026-09-26。battle.js の updatequiz / togglePick / setupSubmit）
   ------------------------------------------------------------------ */
/* ○×: 2枚を大きな記号で。札（A・B）は出さない */
.q-options.is-tf > .q-option { justify-content: center; padding-left: 14px; }
.q-options.is-tf > .q-option::before { content: none; }
.q-options.is-tf .q-optiontxt { font-size: 44px; line-height: 1; font-weight: 900; }
/* ○ は字だと細く小さく見えるので、太い輪を描く（字は見えなくする） */
.q-options.is-tf > #option-0 .q-optiontxt { font-size: 0; width: 52px; height: 52px; border: 9px solid #d94f3d; border-radius: 50%; }
.q-options.is-tf > #option-1 .q-optiontxt { color: #2f6fcf; font-size: 76px; }
@media (max-width: 768px) {
    .q-options.is-tf { grid-template-columns: 1fr 1fr; }
}
/* 複数選択: 選んだものは青緑のふちとチェック */
.q-options.is-multi > .q-option::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border: 2px solid #9cb8c8;
    border-radius: 6px;
    background: #fff;
}
.q-options.is-multi > .q-option.is-picked { border-color: #1aa6b7; background: #e3f6f8; }
.q-options.is-multi > .q-option.is-picked::after {
    border-color: #1aa6b7;
    background: #1aa6b7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.q-options.is-multi > .q-option.is-correct::after, .q-options.is-multi > .q-option.is-wrong::after, .q-options.is-multi > .q-option.is-dim::after { content: none; }
/* 「決定」ボタン（問題の吹き出しの中） */
.q-submit {
    align-self: flex-end;
    padding: 6px 22px;
    border: 0;
    border-radius: 999px;
    background: #1aa6b7;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 3px 0 #0e7584;
    cursor: pointer;
}
.q-submit:disabled { background: #b8c6cd; box-shadow: 0 3px 0 #97a6ae; cursor: default; }
.q-submit[hidden] { display: none; }
/* 生き物と関係ない問題（階級の順番）は、写真を出さず吹き出しを横いっぱいに（battle.js の updatequiz） */
.content-quest > .favo-field.no-photo #favoimg { display: none; }
.content-quest > .favo-field.no-photo .favo-comment::after, .content-quest > .favo-field.no-photo .favo-comment > .favo-tail { display: none; }
.content-quest > .favo-field.no-photo #snow-veil { display: none; }

/* 2つの分類を見比べる表（導入編。battle.js の renderQuizTable）。分かれている段は、答えたあとに色がつく */
.content-quest > .favo-field.has-table .favo-comment { gap: 4px; padding-top: 26px; justify-content: flex-start; }
.content-quest > .favo-field.has-table #favo-commenttxt { font-size: 15px; line-height: 1.3; }
.q-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; line-height: 1.25; color: #231815; }
.q-table th, .q-table td { padding: 2px 4px; border-bottom: 1px solid #d7e6dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-table tr:first-child th { font-size: 12px; color: #3f9a5d; text-align: left; }
.q-table tr > th:first-child { width: 2.6em; color: #6b7a72; font-weight: 700; text-align: left; }
.q-table td { font-weight: 700; }
.favo-field.is-answered .q-table tr.is-diff td { background: #fde7e3; color: #b23a26; }
.favo-field.is-answered .q-table tr:not(.is-diff):not(:first-child) td { background: #e3f7e9; }
/* 表で仲間はずれ（q-table-cols）は、行ではなく仲間はずれの列を赤く、ほかは緑に */
.favo-field.is-answered .q-table.q-table-cols tr:not(:first-child) td { background: #e3f7e9; color: inherit; }
.favo-field.is-answered .q-table.q-table-cols td.is-odd, .favo-field.is-answered .q-table.q-table-cols th.is-odd { background: #fde7e3; color: #b23a26; }
@media (min-width: 992px) {
    .content-quest > .favo-field.has-table #favo-commenttxt { font-size: 22px; }
    .q-table { font-size: 17px; }
}

/* 写真の選択肢（導入編の問題1。js/quiz.js の optionImgs）。スマホでも2列×2段。名前は答えたあとに下に出す */
.q-options.is-photo { grid-template-columns: 1fr 1fr; }
.q-options.is-photo > .q-option { padding: 0; background: #eef4f7 var(--opt-photo) center / cover no-repeat; border-width: 3px; }
.q-options.is-photo > .q-option::before { top: 8px; left: 8px; margin-top: 0; }
.q-options.is-photo .q-optiontxt { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 13px; text-align: center;
  color: #fff; background: rgba(6, 41, 58, .72); opacity: 0; transition: opacity .2s; }
.q-options.is-photo > .q-option.is-correct .q-optiontxt, .q-options.is-photo > .q-option.is-wrong .q-optiontxt, .q-options.is-photo > .q-option.is-dim .q-optiontxt { opacity: 1; }
.q-options.is-photo > .q-option.is-correct, .q-options.is-photo > .q-option.is-wrong { background: #eef4f7 var(--opt-photo) center / cover no-repeat; }
.q-options.is-photo > .q-option .FP-icon { top: 8px; right: 8px; transform: none; height: 34px; }
@media (max-width: 768px) { .q-options.is-photo { grid-template-columns: 1fr 1fr; gap: 6px; } .q-options.is-photo > .q-option { padding: 0; } }

/* 写真の選択肢の虫めがね（押すと大きく見る。答えにはならない）と、大きく見る窓（battle.js の showOptionZoom） */
.q-options > .q-option .opt-zoom { display: none; }
.q-options.is-photo > .q-option .opt-zoom { display: flex; position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  align-items: center; justify-content: center; background: rgba(6, 41, 58, .72); color: #fff; cursor: zoom-in; }
.q-options.is-photo > .q-option .opt-zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.q-options.is-photo > .q-option.is-correct .opt-zoom, .q-options.is-photo > .q-option.is-wrong .opt-zoom, .q-options.is-photo > .q-option.is-dim .opt-zoom { bottom: 30px; }
.opt-zoom-view { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .82); cursor: zoom-out; }
.opt-zoom-view img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.opt-zoom-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #06293a; font-size: 26px; font-weight: 900; line-height: 1; }

/* ヒント（階級のはしご。導入編の問題2。battle.js の #q-hint） */
.q-hint { margin-top: 6px; padding: 3px 8px; border-radius: 8px; background: #fff6de; color: #6b4a00; font-size: 12px; font-weight: 800; line-height: 1.4; }

/* 表でいちばん近い（goodCol）: 答えたら正解の列を濃い緑、ほかは色なし */
.favo-field.is-answered .q-table.q-table-cols td.is-good, .favo-field.is-answered .q-table.q-table-cols th.is-good { background: #bfeccd; color: #146c2e; }

/* 表でいちばん近い: 写真の生き物の列（2列目）と、選択肢の2列のあいだに区切り線 */
.q-table.q-table-split tr > :nth-child(2) { border-right: 3px solid #06293a; padding-right: 6px; }
.q-table.q-table-split tr > :nth-child(3) { padding-left: 8px; }

/* 見比べの表の下の写真（導入編の問題4。battle.js の #q-table-photos）。表の列にそろえる（左の「門・綱」の列は 2.6em） */
.q-table-photos { display: grid; grid-template-columns: 2.6em repeat(var(--n, 2), 1fr); gap: 6px; margin-top: 8px; }
.q-table-photos { flex: 1 1 0; min-height: 0; max-height: 150px; } /* 吹き出しの残りの高さだけ使う（はみ出すと問題文が押し出された） */
.content-quest > .favo-field.has-table-photos .favo-comment > * { flex-shrink: 0; }
.content-quest > .favo-field.has-table-photos .favo-comment > .q-table-photos { flex-shrink: 1; }
.q-table-photos button { height: 100%; min-height: 0; border: 2px solid #fff; border-radius: 10px; background: #eef4f7 center / cover no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); cursor: zoom-in; padding: 0; }
/* PC は吹き出しが横に広く下が狭いので、写真は表の右に縦に並べる */
@media (min-width: 992px) {
    .content-quest > .favo-field.has-table-photos .favo-comment { display: grid; grid-template-columns: 1fr minmax(120px, 22%); grid-template-rows: auto 1fr; column-gap: 12px; align-content: start; }
    .content-quest > .favo-field.has-table-photos #favo-commenttxt { grid-column: 1 / -1; }
    .content-quest > .favo-field.has-table-photos #q-table { grid-column: 1; }
    .content-quest > .favo-field.has-table-photos .q-table-photos { grid-column: 2; grid-row: 2; margin-top: 0; max-height: none; grid-template-columns: 1fr; grid-template-rows: repeat(var(--n, 2), 1fr); }
    .content-quest > .favo-field.has-table-photos .q-table-photos > span { display: none; }
}

/* スマホ: 写真が細い帯にならないよう、表を少し詰めて写真に高さを残す */
@media (max-width: 991px) {
    .content-quest > .favo-field.has-table-photos .favo-comment { padding-top: 22px; padding-bottom: 8px; gap: 3px; }
    .content-quest > .favo-field.has-table-photos #favo-commenttxt { font-size: 14px; }
    .content-quest > .favo-field.has-table-photos .q-table th, .content-quest > .favo-field.has-table-photos .q-table td { padding-top: 1px; padding-bottom: 1px; }
    .q-table-photos { min-height: 46px; margin-top: 4px; }
}

/* ふだんの早押し（battle.js の softQuick。2026-10-01）: ぶいちゃんのまわりがほわっと光り、光の粒が少し上がるだけ */
.quick-soft { position: absolute; z-index: 101; width: 0; height: 0; pointer-events: none; }
.quick-soft-glow { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 244, 190, .95) 0%, rgba(255, 210, 90, .55) 40%, rgba(255, 210, 90, 0) 70%);
    animation: quick-soft-glow .8s ease-out forwards; }
.quick-soft-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
    background: #ffe9a0; border: 1px solid #f2b632; box-shadow: 0 0 6px 2px rgba(255, 200, 70, .7); opacity: 0;
    animation: quick-soft-dot .75s ease-out forwards; }
@keyframes quick-soft-glow { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes quick-soft-dot { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .quick-soft-dot { display: none; } .quick-soft-glow { animation-duration: .5s; } }