/* =========================================================
   SUN LABO あそぶ — ゲームの体裁
   toc.css（案D わいわい屋台）の上に重ねる。ゲームのページだけで読む。

   共通の作り:
   - .gm      ひとつのゲームの外枠。黒枠 + ずらした影
   - .gm-bar  上の帯（何問目 / 得点）
   - .gm-ask  問いかけと判定。正解で緑、はずれで赤に変わる
   - .gm-result 終わったあとの成績

   ゲームごとに地の表情を変える（案D の「揃えない」方針をそのまま持ち込む）。
   ========================================================= */

.gm {
    border: var(--bd); border-radius: var(--r); box-shadow: var(--sh);
    padding: 1.2rem 1.3rem 1.4rem; position: relative; overflow: hidden;
}
.gm-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-size: .78rem; font-weight: 900; color: var(--c-muted);
    padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 2px dashed var(--c-hair);
}
.gm-bar b { font-size: 1.15rem; color: var(--c-ink); margin: 0 .1em; }

.gm-ask {
    margin: 1rem 0 .9rem; font-weight: 900; font-size: 1.02rem; text-align: center;
    min-height: 1.6em;
}
.gm-ask.is-right { color: #1f7a52; }
.gm-ask.is-wrong { color: #c53a2c; }

.gm-actions { text-align: center; margin-top: .4rem; }

/* はずれたときの揺れ */
.nope { animation: nope .34s ease-out; }
@keyframes nope {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
}

/* 成績 */
.gm-result { text-align: center; padding: 1.6rem .5rem .6rem; }
.gm-big { font-size: clamp(2.6rem, 9vw, 4.4rem); font-weight: 900; line-height: 1; margin: 0 0 .3rem; }
.gm-big small { font-size: .3em; color: var(--c-muted); margin-left: .2em; }
.gm-msg { font-weight: 700; color: #4d4841; margin-bottom: 1.2rem; }
.gm-again { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   1. この形、どの食べもの？ — 検体のカルテ
   ========================================================= */
.gm-guess {
    background-color: #fffdf6;
    background-image: linear-gradient(#dde6f0 1px, transparent 1px),
                      linear-gradient(90deg, #dde6f0 1px, transparent 1px);
    background-size: 20px 20px;
}
.gm-guess .gm-bar { border-bottom-color: #c3d0e0; }
.gm-guess .gm-round { letter-spacing: .04em; }
.gm-guess .gm-plot { background: #fff; }

/* 波形は 600x300 で組んである。それ以上に引き伸ばしても情報は増えず、
   縦横比 2:1 のぶん高さだけが伸びて画面からあふれる。 */
.gm .gm-plot { max-width: 640px; margin-inline: auto; }

.gm-choices {
    display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    margin-bottom: .6rem;
}
.gm-choice {
    font: inherit; font-weight: 900; font-size: .86rem; cursor: pointer;
    background: var(--c-surface); border: var(--bd); border-radius: var(--r);
    padding: .7rem .5rem .6rem; box-shadow: 3px 3px 0 var(--c-ink);
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    transition: transform .13s, box-shadow .13s, background .13s;
}
.gm-choice img { width: 70px; height: 52px; object-fit: contain; }
.gm-choice:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--c-ink); }
.gm-choice:disabled { cursor: default; opacity: .55; color: var(--c-ink); }
.gm-choice.is-right { background: #d8f3e4; opacity: 1; box-shadow: 5px 5px 0 var(--c-ink); }
.gm-choice.is-wrong { background: #ffdcd6; opacity: 1; }

.gm-tell {
    background: var(--c-yellow); border: var(--bd); border-radius: var(--r);
    box-shadow: 3px 3px 0 var(--c-ink); padding: .8rem 1rem; font-size: .86rem;
    font-weight: 700; line-height: 1.75;
}
.gm-tell strong { display: block; font-size: 1rem; }
.gm-tell a { display: inline-block; margin-top: .3rem; font-weight: 900; text-decoration: none; }
.gm-tell a:hover { text-decoration: underline; }

/* =========================================================
   2. 硬いのはどっち？ — 対決
   ========================================================= */
.gm-harder { background: var(--c-paper); }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; position: relative; }
.side {
    --sd: var(--c-ink);
    background: #f4f1ea;
    background: color-mix(in srgb, var(--sd) 22%, #fff);
    border: var(--bd); border-radius: var(--r); overflow: hidden;
    display: flex; flex-direction: column;
    transition: background .25s;
}
.side-btn {
    font: inherit; color: var(--c-ink); cursor: pointer; background: none; border: 0; padding: 1.1rem .8rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%;
    transition: transform .14s;
}
.side-btn img { width: 74%; max-width: 168px; height: 118px; object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.side-name { font-weight: 900; font-size: 1.1rem; }
.side-onm { font-size: .74rem; font-weight: 900; color: var(--c-muted); letter-spacing: .05em; }
.side-btn:hover:not(:disabled) { transform: translateY(-5px); }
.side-btn:disabled { cursor: default; color: var(--c-ink); }

.vs {
    align-self: center; z-index: 2; margin: 0 -14px;
    font-weight: 900; font-size: .84rem; letter-spacing: .08em;
    background: var(--c-ink); color: var(--c-yellow);
    border: 2px solid var(--c-ink); border-radius: 999px; padding: .3rem .7rem;
}

/* 数値は選んだあとにだけ見せる。直感と実測のずれを味わうため */
.side-val {
    max-height: 0; opacity: 0; overflow: hidden;
    padding: 0 .9rem; transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
    border-top: 0 solid var(--c-ink);
}
.duel.is-open .side-val { max-height: 92px; opacity: 1; padding: .7rem .9rem .9rem; border-top-width: 2.5px; }
.side-val .bar { height: 12px; background: #fff; border: 2px solid var(--c-ink); border-radius: 999px; overflow: hidden; }
.side-val .bar i { display: block; height: 100%; width: 0; background: var(--sd); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.side-val strong { display: block; margin-top: .3rem; font-size: 1.5rem; font-weight: 900; }
.side-val strong em { font-style: normal; font-size: .55em; color: var(--c-muted); margin-left: .12em; }

.duel.is-open .side.is-win { background: color-mix(in srgb, var(--sd) 42%, #fff); }
.duel.is-open .side.is-lose { opacity: .72; }

/* =========================================================
   3. オノマトペあわせ — かるた
   ========================================================= */
.gm-karuta { background: #f3ede0; }

.ka-words { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 1.2rem; }
.ka-word {
    --tilt: 0deg;
    font: inherit; cursor: pointer; font-family: "Kaisei Decol", serif; font-weight: 700;
    font-size: .98rem; line-height: 1.5; letter-spacing: .06em;
    background: #fffdf5; color: var(--c-ink);
    border: var(--bd); border-radius: 6px; box-shadow: 3px 3px 0 var(--c-ink);
    padding: .7rem .8rem; min-width: 84px; min-height: 96px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    transform: rotate(var(--tilt));
    transition: transform .14s, box-shadow .14s, background .14s;
}
.ka-word:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 5px 6px 0 var(--c-ink); }
.ka-word.on { background: var(--c-yellow); transform: rotate(0deg) translateY(-5px); box-shadow: 6px 7px 0 var(--c-ink); }
.ka-word.is-got { opacity: .3; pointer-events: none; transform: rotate(var(--tilt)) scale(.92); box-shadow: none; }

.ka-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.ka-card {
    --tilt: 0deg;
    font: inherit; cursor: pointer; padding: .4rem; background: #fff;
    border: var(--bd); border-radius: 8px; box-shadow: 3px 3px 0 var(--c-ink);
    transform: rotate(var(--tilt));
    transition: transform .14s, box-shadow .14s;
}
.ka-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 5px 6px 0 var(--c-ink); }
.ka-card .wv-plot { border: 0; background: none; padding: 0; }
.ka-card .wv-plot .bubble { font-size: .8rem; box-shadow: 3px 3px 0 var(--c-ink); }
.ka-card.is-got { opacity: .45; pointer-events: none; transform: rotate(var(--tilt)) scale(.95); }

.ka-got { margin-top: 1.4rem; }
.ka-got-label { font-size: .74rem; font-weight: 900; color: var(--c-muted); margin-bottom: .5rem; }
.ka-got-list { display: flex; gap: 8px; flex-wrap: wrap; min-height: 72px; }
.ka-got-item {
    --sd: var(--c-ink);
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    width: 92px; padding: .4rem .3rem .5rem; text-decoration: none; color: inherit;
    background: #f6f3ec;
    background: color-mix(in srgb, var(--sd) 18%, #fff);
    border: 2px solid var(--c-ink); border-radius: 8px;
    animation: got-in .35s cubic-bezier(.2, 1.5, .4, 1);
}
.ka-got-item img { width: 46px; height: 34px; object-fit: contain; }
.ka-got-item span { font-size: .76rem; font-weight: 900; }
.ka-got-item small { font-size: .62rem; color: var(--c-muted); font-weight: 700; }
@keyframes got-in {
    from { opacity: 0; transform: translateY(-14px) rotate(-6deg); }
    to { opacity: 1; transform: none; }
}

/* =========================================================
   狭い画面
   ========================================================= */
@media (max-width: 620px) {
    .gm { padding: 1rem .9rem 1.2rem; }
    .gm-choices { grid-template-columns: repeat(2, 1fr); }
    .gm-choice img { width: 58px; height: 44px; }
    .duel { grid-template-columns: 1fr; gap: 10px; }
    .vs { justify-self: center; margin: -4px 0; }
    .side-btn img { height: 96px; }
    .ka-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ka-word { min-width: 68px; min-height: 80px; font-size: .88rem; padding: .5rem .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nope, .ka-got-item { animation: none; }
}

/* =========================================================
   シェア
   X / LINE は各サービスの投稿画面を開く。
   Instagram は外部から投稿内容を受け取れないので、端末の共有シート
   （navigator.share）か、クリップボードへの写しに落ちる。
   ========================================================= */
.share { margin: 0 auto 1.3rem; max-width: 26rem; }
.share-label { font-size: .74rem; font-weight: 900; color: var(--c-muted); margin-bottom: .55rem; }
.share-btns { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.sh {
    font: inherit; font-weight: 900; font-size: .84rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1.05rem; border: var(--bd); border-radius: 999px;
    background: var(--c-surface); color: var(--c-ink); text-decoration: none;
    box-shadow: 3px 3px 0 var(--c-ink);
    transition: transform .13s, box-shadow .13s;
}
.sh:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--c-ink); }
.sh svg { width: 17px; height: 17px; flex: none; }
.sh-x { background: #1c1b1f; color: #fff; }
.sh-line { background: #06c755; color: #fff; }
/* Instagram の地はグラデーション。文字は白 */
.sh-ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 48%, #6228d7); color: #fff; }
.sh-sheet { background: var(--c-yellow); color: var(--c-ink); }
.sh[hidden] { display: none; }

/* 結果カード（share.js が canvas で描く 1200×630）。何が添付されるかを先に見せる */
.share-card { margin: 0 auto .8rem; max-width: 20rem; }
.share-card img {
    display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
    border: var(--bd); border-radius: var(--r-sm); box-shadow: 3px 3px 0 var(--c-ink);
}
.share-card figcaption { margin-top: .35rem; font-size: .7rem; font-weight: 700; color: var(--c-muted); text-align: center; }

.share-note {
    margin: .7rem 0 0; font-size: .78rem; font-weight: 700; color: #4d4841;
    background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: var(--r-sm);
    padding: .5rem .8rem; word-break: break-all;
}

@media (max-width: 620px) {
    .sh { padding: .5rem .85rem; font-size: .8rem; }
}

/* 「硬いのはどっち？」の重ね描き。
   数字のバーだけだと大小しか分からない。線を重ねると立ち上がりの差が目に見える。 */
.duel-plot { margin: 1rem 0 .2rem; background: var(--c-surface); border: var(--bd);
             border-radius: var(--r); box-shadow: var(--sh); padding: .9rem 1rem .6rem; }
.duel-plot .dp-cap { margin: 0 0 .5rem; font-size: .84rem; line-height: 1.75; color: var(--c-sub); }
.duel-plot .dp-cap strong { color: var(--c-text); }
.duel-plot svg { display: block; width: 100%; height: auto; }
.duel-plot .dp-ax { stroke: #d9d4cc; stroke-width: 1.5; }
.duel-plot .dp-n { font-size: 11px; fill: #9a948c; font-family: inherit; }
.duel-plot .dp-w { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.duel-plot .dp-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .5rem;
                        font-size: .84rem; }
.duel-plot .dp-key { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.duel-plot .dp-key::before { content: ""; width: 18px; height: 4px; border-radius: 2px;
                             background: var(--c); }
@media (max-width: 619px) { .duel-plot { padding: .6rem .7rem .4rem; } }


/* =========================================================
   背の低い画面（ノート型を横に広げたときなど）
   幅は足りていても高さが足りない場合。波形の高さは幅で決まるので、
   画面の高さから逆算した幅の上限をかける。
   ========================================================= */
@media (max-height: 760px) {
    .gm { padding: .8rem 1.1rem 1rem; }
    .gm-bar { margin-bottom: .5rem; padding-bottom: .4rem; }
    /* 縦横比が 2:1 なので、使える高さの 2 倍が幅の上限になる。
       24rem は波形の上下にある帯・問い・選択肢のぶん。 */
    /* 下限がないと、スマホを横にした高さ 375〜430px で 0 近くまで潰れる（V5-1） */
    .gm .gm-plot { max-width: clamp(280px, calc((100vh - 24rem) * 2), 640px); }
    .gm-ask { margin: .5rem 0; }
    .gm-choices { gap: 8px; margin-bottom: .4rem; }
    .gm-choice { padding: .45rem .5rem .4rem; font-size: .82rem; }
    .gm-choice img { width: 52px; height: 39px; }
}

/* color-mix の無いブラウザ（Safari 16.2 未満）向け。var() を含む color-mix は無効になると
   前の行の素の色にも戻らず unset に落ちるので、対応しているときだけ上書きさせる（V5-10） */
@supports not (background: color-mix(in srgb, red 50%, #fff)) {
    .side { background: #f4f1ea !important; }
    .duel.is-open .side.is-win { background: #fff3c4 !important; }
    .ka-got-item { background: #f6f3ec !important; }
}

/* オノマトペあわせの札の波形枠は span（inline）。中の svg が block なので inline が分割され、
   フキダシ（絶対配置）の基準が未定義になる（Safari でずれる）。block にする（V5-4） */
.ka-card .wv-plot { display: block; }

/* 強制カラー（Windows のハイコントラスト等）では、伏せた色（ほぼ黒）の線が地に溶けて波形が見えない（R2B-4） */
@media (forced-colors: active) {
    .gm-plot .wave-path, .ka-card .wave-path { stroke: CanvasText !important; }
}