/* ============================================
   連想ゲーム — ソフビトイ風テーマ
   白背景 × まるいキャラ × コーラル/イエロー/スカイ/パープル
   ============================================ */
:root{
  --bg:#fdfdfa;
  --paper:#ffffff;
  --ink:#22304f;           /* キャラの目の紺 */
  --sub:#6b7280;
  --muted:#9aa0ab;
  --line:#e8e6df;
  --coral:#f4693c;
  --coral-deep:#d9552c;
  --coral-soft:#fdeee8;
  --yellow:#ffc93c;
  --yellow-soft:#fff5d9;
  --sky:#56b7e6;
  --sky-soft:#eaf4fb;
  --purple:#a58bd8;
  --purple-soft:#f2edfa;
  --green:#5cb85c;
  --green-soft:#eaf7e9;
  --pink:#f7a6b9;
  --pink-soft:#fdeef2;
  --navy:#2e3a67;
  --shadow:0 10px 24px rgba(46,58,103,.10);
}
*{box-sizing:border-box;}

/* Material Symbols */
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;
  display:inline-block;vertical-align:-0.22em;line-height:1;font-size:1.2em;
  letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga";
  font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;}
.ms.fill{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24;}
h1 .ms{font-size:1em;vertical-align:-0.12em;color:var(--coral);}
.btn .ms,.chip .ms{font-size:1.15em;vertical-align:-0.2em;}
.stepno .ms,.bd .ms,.src .ms{font-size:1.1em;vertical-align:-0.18em;}
.confetti .ms{font-size:22px;}
body{margin:0;background:var(--bg) url("images/bg.svg");background-size:560px;color:var(--ink);line-height:1.75;
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:1100px;margin:0 auto;padding:30px 18px 30px;position:relative;}
.deco{display:none;}

/* ヘッダー = キャラの行進（背景・影なし） */
header.hd{background:none;border:none;box-shadow:none;border-radius:0;
  text-align:center;margin-bottom:26px;padding:10px 0 0;}
h1{margin:0 0 10px;padding:0;line-height:0;font-size:0;display:flex;justify-content:center;}
.logo{width:min(340px,74vw);height:auto;display:block;transition:transform .18s ease;
  cursor:pointer;user-select:none;-webkit-user-drag:none;}
.logo:hover{transform:scale(1.03);}
h1 .em{display:inline-block;animation:wiggle 2.6s ease-in-out infinite;letter-spacing:0;}
@keyframes wiggle{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(8deg);}}
.tag{color:var(--sub);font-size:12.5px;margin:0 0 10px;letter-spacing:.12em;}
.hero{width:100%;max-width:none;height:auto;display:block;margin:0 auto;animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.hidden{display:none;}

/* loader */
.loader{background:var(--paper);border-radius:24px;box-shadow:var(--shadow);padding:24px;text-align:center;}
.loader p{font-size:14px;color:var(--sub);margin:0 0 12px;}
.loader label{display:inline-block;background:var(--coral);color:#fff;border-radius:999px;
  padding:12px 26px;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--coral-deep);}
.loader input{display:none;}

/* カテゴリチップ = カラフルに循環 */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px;justify-content:center;}
.chip{border:none;background:var(--paper);color:var(--ink);border-radius:999px;box-shadow:var(--shadow);
  padding:8px 18px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:.15s;}
.chip:hover{transform:translateY(-3px);}
.chip:nth-of-type(4n+1).active{background:var(--coral);color:#fff;}
.chip:nth-of-type(4n+2).active{background:var(--sky);color:#fff;}
.chip:nth-of-type(4n+3).active{background:var(--purple);color:#fff;}
.chip:nth-of-type(4n+4).active{background:var(--green);color:#fff;}
.chip.active{background:var(--coral);color:#fff;}
.empty{text-align:center;color:var(--muted);font-size:14px;padding:24px 0;grid-column:1/-1;}

/* ===== ニュース一覧: 最大3カラム ===== */
.list{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:720px){.list{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.list{grid-template-columns:repeat(3,1fr);}}

.scard{background:var(--paper);color:var(--ink);border-radius:26px;box-shadow:var(--shadow);
  padding:20px 22px;display:flex;flex-direction:column;transition:.18s;border-top:6px solid var(--sky);}
.scard:nth-child(3n+1){border-top-color:var(--coral);}
.scard:nth-child(3n+2){border-top-color:var(--yellow);}
.scard:nth-child(3n+3){border-top-color:var(--purple);}
.scard:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(46,58,103,.15);}

/* バッジ = 横並び */
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;align-items:center;}
.bd{display:inline-block;background:var(--navy);color:#fff;border-radius:999px;
  padding:2px 12px;font-size:11px;font-weight:800;letter-spacing:.04em;}
.src{display:inline-block;background:var(--sky-soft);color:#2a6db3;border-radius:999px;
  padding:2px 11px;font-size:11px;font-weight:800;}
a.src{text-decoration:none;cursor:pointer;transition:background .15s,color .15s;}
a.src:hover{background:#cfe4f7;color:#1c5b9c;}
a.src .ms:last-child{font-size:.95em;vertical-align:-0.12em;margin-left:1px;opacity:.7;}
.cat{display:inline-block;background:var(--coral-soft);color:var(--coral-deep);border-radius:999px;
  padding:2px 11px;font-size:11px;font-weight:800;}

.scard h3{margin:2px 0 6px;font-size:15px;line-height:1.65;}
.scard .es{font-size:12.5px;color:var(--sub);margin:0 0 14px;flex:1;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.btn{border-radius:999px;padding:12px 24px;font-size:14px;font-weight:800;cursor:pointer;
  font-family:inherit;border:none;transition:.15s;}
.btn:active{transform:translateY(2px);}
.btn.primary{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-deep);}
.btn.primary:hover{transform:translateY(-2px);}
.btn.primary:active{box-shadow:0 1px 0 var(--coral-deep);}
.btn.ghost{background:var(--sky-soft);color:#2a6db3;box-shadow:none;}
.btn.ghost:hover{background:#d8ecf9;transform:translateY(-2px);}

/* ===== プレイ画面 ===== */
#stage{max-width:720px;margin:0 auto;}
.top{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.back{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0;font-family:inherit;font-weight:800;}
.back:hover{color:var(--ink);}
.score{margin-left:auto;font-size:15px;color:var(--sub);font-weight:800;
  background:var(--paper);border-radius:999px;box-shadow:var(--shadow);padding:4px 16px;}
.score b{color:var(--coral);font-size:17px;}

/* 進捗バー */
.bar{height:16px;background:var(--paper);border-radius:99px;box-shadow:inset 0 2px 5px rgba(46,58,103,.08);overflow:hidden;margin:10px 0 20px;}
.bar>i{display:block;height:100%;border-radius:99px;width:0;transition:.4s;
  background:linear-gradient(90deg,var(--yellow),var(--coral));}

.stepno{display:inline-block;font-size:12.5px;color:#fff;font-weight:800;letter-spacing:.06em;
  background:var(--purple);border-radius:999px;padding:4px 16px;margin-bottom:10px;}
.evt{font-size:12.5px;color:var(--muted);margin-bottom:14px;line-height:1.6;font-weight:700;}
.qq{font-size:18px;font-weight:800;margin:6px 0 18px;line-height:1.7;color:var(--ink);
  background:var(--paper);border-radius:20px;box-shadow:var(--shadow);padding:14px 18px;}

/* 選択肢 */
.opts{display:flex;flex-direction:column;gap:12px;}
.opt{display:flex;align-items:center;gap:13px;text-align:left;background:var(--paper);
  border:none;border-radius:20px;box-shadow:var(--shadow);padding:14px 16px;font-size:14.5px;color:var(--ink);
  cursor:pointer;transition:.15s;width:100%;font-family:inherit;font-weight:700;}
.opt:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 14px 26px rgba(46,58,103,.14);}
.opt:disabled{cursor:default;}
.opt .mk{flex:none;width:30px;height:30px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;}
.opt:nth-child(1) .mk{background:var(--coral);}
.opt:nth-child(2) .mk{background:var(--sky);}
.opt:nth-child(3) .mk{background:var(--purple);}
.opt:nth-child(4) .mk{background:var(--green);}
.opt.correct{background:var(--green-soft);color:#2f7a2f;animation:pop .3s ease;}
.opt.correct .mk{background:var(--green);}
.opt.wrong{background:var(--coral-soft);color:var(--coral-deep);animation:shake .35s ease;}
.opt.wrong .mk{background:var(--coral);}
.opt.faded{opacity:.4;}
@keyframes pop{0%{transform:scale(1);}50%{transform:scale(1.04);}100%{transform:scale(1);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* アナリストの吹き出し = ネイビー */
.analyst{background:var(--navy);color:#fff;border-radius:22px;padding:16px 18px;margin-top:22px;display:none;position:relative;}
.analyst::before{content:"";position:absolute;top:-12px;left:38px;
  border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:13px solid var(--navy);}
.analyst.show{display:block;animation:rise .3s ease;}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.analyst .who{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.analyst .av{width:38px;height:38px;flex:none;border-radius:50%;background:#fff;display:block;
  object-fit:cover;object-position:50% 22%;}
.analyst .who b{font-size:13px;color:#aebbdf;letter-spacing:.05em;}
.analyst p{margin:0;font-size:14.5px;}
.analyst p b{color:var(--yellow);}
.next{margin-top:20px;display:none;width:100%;background:var(--coral);color:#fff;
  border:none;border-radius:999px;padding:15px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 5px 0 var(--coral-deep);}
.next.show{display:block;}
.next:active{transform:translateY(2px);box-shadow:0 1px 0 var(--coral-deep);}

/* ===== 結果 ===== */
.result{text-align:center;background:var(--paper);color:var(--ink);border-radius:28px;box-shadow:var(--shadow);
  padding:30px 22px;margin-bottom:18px;border-top:6px solid var(--yellow);}
.stars{font-size:32px;letter-spacing:5px;margin-bottom:4px;color:var(--yellow);}
.result .big{font-size:48px;font-weight:800;color:var(--coral);}
.result .big small{font-size:22px;color:var(--muted);font-weight:700;}
.result h2{margin:8px 0 2px;font-size:19px;}
.band{border-radius:22px;padding:15px 18px;font-size:14px;margin-bottom:14px;text-align:left;box-shadow:var(--shadow);}
.band b{font-size:12.5px;display:block;margin-bottom:5px;letter-spacing:.05em;}
.band.sec{background:var(--navy);color:#fff;}
.band.sec b{color:#aebbdf;}
.band.chk{background:var(--yellow-soft);color:#5c4a10;}
.band.chk b{color:#a9861f;}

/* ===== 解答一覧 ===== */
.anscard{background:var(--paper);color:var(--ink);border-radius:22px;box-shadow:var(--shadow);
  padding:16px 18px;margin-bottom:14px;}
.ast{display:inline-block;font-size:11.5px;color:#fff;font-weight:800;background:var(--purple);
  border-radius:999px;padding:2px 13px;margin-bottom:8px;}
.aq{font-size:14.5px;font-weight:800;margin-bottom:10px;line-height:1.7;}
.aopt{display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:16px;
  padding:8px 12px;margin-bottom:7px;font-size:13px;font-weight:700;background:var(--paper);}
.aopt>span:nth-child(2){flex:1;min-width:0;}
.aopt .mk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sky);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.aopt.ok{background:var(--green-soft);border-color:var(--green);color:#2f7a2f;}
.aopt.ok .mk{background:var(--green);}
.abadge{margin-left:auto;flex:none;white-space:nowrap;font-size:11px;font-weight:800;background:var(--green);color:#fff;
  border-radius:999px;padding:1px 11px;}
.areason{background:var(--sky-soft);border-radius:14px;padding:9px 13px;font-size:12.5px;margin-top:8px;}
.areason b{display:block;font-size:11.5px;color:#2a6db3;margin-bottom:2px;}

/* ===== 遊びコール ===== */
.calls{background:var(--paper);color:var(--ink);border-radius:24px;box-shadow:var(--shadow);
  padding:20px 22px;margin-bottom:14px;border-top:6px solid var(--sky);}
.calls .ct{display:block;font-size:14px;margin-bottom:12px;letter-spacing:.04em;font-weight:800;color:var(--navy);}
.call{border-top:2px dashed var(--line);padding:12px 0 6px;}
.chd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.chd b{font-size:14.5px;}
.tik{font-size:11px;color:var(--sub);background:#f2f1ec;border-radius:999px;padding:1px 9px;font-weight:800;}
.dir{font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 12px;margin-left:auto;color:#fff;flex:none;white-space:nowrap;}
.tik{flex:none;white-space:nowrap;}
.dir.up{background:var(--green);}
.dir.dn{background:var(--coral);}
.basis{font-size:12.5px;color:var(--sub);margin:4px 0 6px;}
.verdict{font-size:13px;margin:2px 0 6px;font-weight:700;}
.verdict.rec{color:#2f7a2f;}
.verdict.err{color:var(--coral-deep);}
.vb{font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 11px;margin-left:6px;white-space:nowrap;}
.vb.hit{background:var(--green-soft);color:#2f7a2f;}
.vb.miss{background:var(--coral-soft);color:var(--coral-deep);}
.vb.flat{background:#f2f1ec;color:var(--sub);}
.cnote{font-size:11.5px;color:var(--muted);margin:10px 0 0;}

/* 騰落率チャート（銘柄ごと） */
.chartwrap{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:12px 16px 8px;margin:8px 0 12px;}
.chead2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.ct2{font-size:12px;color:var(--sub);}
.chg{margin-left:auto;flex:none;white-space:nowrap;font-size:13px;font-weight:800;border-radius:999px;padding:2px 13px;color:#fff;}
.chg.cpos{background:var(--green);}
.chg.cneg{background:var(--coral);}
.plchart{width:100%;height:auto;display:block;}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0 4px;}
.lg{font-size:11.5px;font-weight:800;color:var(--sub);display:flex;align-items:center;gap:5px;}
.lg i{display:inline-block;width:16px;height:4px;border-radius:2px;}

/* ナビ（成績表・間違いノート） */
.navrow{display:flex;gap:10px;justify-content:flex-end;margin-bottom:14px;}
.btn.sm{padding:8px 16px;font-size:13px;}

/* 称号カード */
.titlecard{display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;
  border-radius:20px;padding:14px 18px;margin-bottom:14px;}
.titlecard .ms{color:var(--yellow);}
.titlecard b{font-size:17px;display:block;}
.titlecard small{font-size:11.5px;color:#aebbdf;}

/* 成績表 */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-bottom:16px;}
.statcard{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:14px 10px;text-align:center;}
.statcard b{display:block;font-size:24px;color:var(--coral);}
.statcard span{font-size:11.5px;color:var(--sub);font-weight:700;}
.sbarrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.sblabel{flex:0 0 96px;font-size:12.5px;font-weight:800;}
.sbar{flex:1;height:12px;background:var(--sky-soft);border-radius:99px;overflow:hidden;}
.sbar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sky),var(--green));}
.sbpct{flex:0 0 96px;font-size:11.5px;color:var(--sub);font-weight:700;text-align:right;}
.hrow{display:flex;align-items:center;gap:10px;border-top:2px dashed var(--line);padding:8px 0;font-size:13px;}
.hdate{flex:none;font-size:11px;color:var(--muted);font-weight:700;}
.hname{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.hname small.hnews{display:block;font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hwin{flex:none;font-size:11px;color:#2a6db3;background:var(--sky-soft);border-radius:99px;padding:1px 9px;font-weight:800;}
.hscore{flex:none;font-weight:800;font-size:12.5px;white-space:nowrap;}

/* T+N 評価行 */
.evalline{line-height:2.1;}
.ewin{display:inline-block;}
.ewin.pend{color:var(--muted);}

/* ===== レスポンシブQA ===== */
.chd b{min-width:0;overflow-wrap:anywhere;}
.hrow{flex-wrap:wrap;}
.verdict{overflow-wrap:anywhere;}
.basis{overflow-wrap:anywhere;}
@media(max-width:420px){
  .sblabel{flex:0 0 78px;font-size:11.5px;}
  .sbpct{flex:0 0 auto;font-size:11px;}
  .statcard b{font-size:19px;}
  .btn{padding:10px 16px;font-size:13px;}
  .navrow{justify-content:center;}
  .logo{width:min(260px,80vw);}
}

footer .disc{margin:0;}
footer .copy{margin:8px 0 0;font-size:11px;letter-spacing:.09em;color:var(--muted);}
footer{margin-top:36px;font-size:11.5px;color:var(--muted);border-top:2px dashed var(--line);
  padding-top:16px;text-align:center;letter-spacing:.05em;}

/* 初回の保存告知バナー */
.notice{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:14px;max-width:560px;width:calc(100% - 32px);
  background:var(--navy);color:#fff;border-radius:18px;padding:13px 17px;font-size:12.5px;line-height:1.7;
  box-shadow:0 12px 30px rgba(46,58,103,.35);}
.notice b{color:var(--yellow);}
.notice button{flex:none;background:var(--coral);color:#fff;border:none;border-radius:999px;
  padding:8px 20px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;}
.linkbtn{background:none;border:none;color:var(--coral-deep);text-decoration:underline;
  cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:700;padding:0;}

/* confetti */
.confetti{position:fixed;top:-30px;font-size:22px;animation:fall linear forwards;pointer-events:none;z-index:99;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.8;}}

.errnote{display:inline-block;color:var(--muted);font-size:11.5px;margin-left:4px;}

/* ===== 一覧のツールバー（検索・未プレイ・並び替え） ===== */
.searchrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center;margin-bottom:14px;}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:999px;
  box-shadow:var(--shadow);padding:9px 18px;flex:1 1 260px;max-width:420px;}
.searchbox .ms{color:var(--muted);font-size:1.1em;flex:none;}
.searchbox input{border:none;outline:none;background:none;font-family:inherit;font-size:14px;
  color:var(--ink);width:100%;font-weight:700;}
.searchbox input::placeholder{color:var(--muted);font-weight:500;}
.searchbox input::-webkit-search-cancel-button{cursor:pointer;}
.chip.tgl{display:inline-flex;align-items:center;gap:5px;flex:none;}
.chip.tgl .ms{font-size:1.05em;}
.chip.tgl.active{background:var(--green);color:#fff;}
.doneb{display:inline-flex;align-items:center;gap:3px;background:var(--green-soft);color:#3f8f3f;
  border-radius:999px;padding:2px 11px;font-size:11px;font-weight:800;flex:none;white-space:nowrap;}
.doneb .ms{font-size:1.05em;}
.sentinel{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:26px 0;color:var(--muted);font-size:12.5px;font-weight:700;}
.listcount{text-align:center;color:var(--muted);font-size:12px;padding:22px 0 0;margin:0;letter-spacing:.05em;}
.ms.spin{animation:spin 1.1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}