:root{
    --paper:#FBFBF7;--grid:#E0E8EC;--ink:#17243F;--ink-soft:#5D6A80;--ink-faint:#98A3B4;
    --pen:#C4362C;--ai:#2E5E8C;--brass:#A8863C;--moss:#4E7A5C;--line:#DDE2DC;--card:#FFFFFF;
    --mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
    --gothic:"Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",system-ui,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{font-family:var(--gothic);color:var(--ink);background:var(--paper);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:24px 24px;line-height:1.7;-webkit-font-smoothing:antialiased}
  #app{max-width:560px;margin:0 auto}
  .pad{padding:0 16px 72px}
  img{image-rendering:auto}

  header{position:sticky;top:0;z-index:20;padding:10px 16px 8px;
    background:rgba(251,251,247,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
  .hbar{display:flex;align-items:center;gap:9px}
  .place{font-size:12.5px;color:var(--ink-soft);flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .place b{color:var(--ink);font-weight:600}
  .score{font-family:var(--mincho);font-size:14px;color:var(--brass);flex:none}
  .mapbtn{border:1px solid var(--line);background:var(--card);color:var(--ink-soft);font:inherit;
    font-size:12px;padding:4px 10px;border-radius:3px;cursor:pointer;flex:none}
  .track{height:2px;background:var(--line);margin-top:9px;position:relative;overflow:hidden}
  .track i{position:absolute;inset:0 auto 0 0;background:var(--ai);transition:width .45s cubic-bezier(.2,.7,.3,1)}

  h1{font-family:var(--mincho);font-size:28px;line-height:1.45;margin:0 0 4px;font-weight:600;letter-spacing:.06em}
  h2{font-family:var(--mincho);font-size:16px;margin:0;font-weight:600;letter-spacing:.04em}
  p{margin:0 0 12px}
  .fine{font-size:12.5px;color:var(--ink-soft);line-height:1.65;margin:8px 0 0}
  .fine.lock{color:var(--pen)}
  .cue{font-size:13.5px;color:var(--moss);margin:16px 0 0;padding-left:11px;border-left:2px solid var(--moss)}
  .empty{font-size:13px;color:var(--ink-faint);margin:6px 0 0}
  .rule{width:44px;height:2px;background:var(--pen);margin:16px 0 18px}
  .title-wrap{padding-top:20px}

  .btn{display:block;width:100%;border:none;border-radius:3px;background:var(--ink);color:#fff;
    font:inherit;font-size:15px;font-weight:600;padding:14px;cursor:pointer;letter-spacing:.04em}
  .btn:hover{background:#22345C}
  .btn:disabled{opacity:.4;cursor:default}
  .btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line);font-weight:400;font-size:13.5px;padding:11px}
  .btn.ghost:hover{border-color:var(--ink-faint);background:var(--card)}
  .btn.stretch{background:transparent;color:var(--moss);border:1px solid var(--moss);font-size:14px;padding:12px}
  .btn.stretch:hover{background:#F0F5F1}
  .stack{display:flex;flex-direction:column;gap:9px;margin-top:20px}
  button:focus-visible,.choice:focus-visible,input:focus-visible{outline:2px solid var(--ai);outline-offset:2px}

  .panel{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:14px 15px;margin-top:16px}
  .phead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
  .phead .sub{font-size:11.5px;color:var(--ink-faint)}

  .gumbig{display:flex;align-items:center;gap:7px}
  .gumbig img{width:34px;height:34px}
  .gumbig b{font-family:var(--mincho);font-size:22px;font-weight:600;color:var(--ink);
    font-variant-numeric:tabular-nums}

  .hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
  .hcard{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:9px 6px;
    font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
  .hcard:hover{border-color:var(--ink-faint)}
  .hcard img{width:48px;height:48px}
  .hn{font-size:11.5px;font-weight:600;text-align:center;line-height:1.3;color:var(--ink)}
  .heq{font-size:10px;color:var(--moss)}
  .heq.none{color:var(--ink-faint)}
  .hr{font-size:10px;letter-spacing:.08em;padding:0 5px;border-radius:2px;border:1px solid currentColor}
  .rCommon{color:#7A8794}.rUncommon{color:var(--moss)}.rRare{color:var(--ai)}
  .rEpic{color:#7A4E9B}.rLegendary{color:var(--brass)}.rMCH{color:var(--ink-faint)}
  /* 独自ランク。由来がいくつの教科にまたがるかで決まる（MCHのレアリティとは別） */
  .rk{font-size:10px;letter-spacing:.08em;padding:0 5px;border-radius:2px;border:1px solid currentColor}
  .rk.r0{color:var(--ink-soft)}.rk.r1{color:var(--ai)}.rk.r2{color:var(--pen)}

  /* 狭い画面でも折り返して収まるようにする。min-width を固定値のままにすると、
     4つ並ぶ帯（おまかせ/小学校/中学校/世界）が 320px 幅ではみ出す */
  .seg{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
  .seg button{flex:1 1 0;min-width:clamp(62px,20vw,74px);border:1px solid var(--line);background:var(--card);
    color:var(--ink-soft);font:inherit;font-size:13px;padding:9px 4px;border-radius:3px;cursor:pointer}
  .seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .seg button:disabled{opacity:.35;cursor:default}

  .qmeta{display:flex;align-items:baseline;gap:9px;margin:22px 0 12px;flex-wrap:wrap}
  .grade{font-family:var(--mincho);font-size:13px;color:#fff;background:var(--ink);padding:2px 9px;border-radius:2px;letter-spacing:.08em}
  .grade.alt{background:var(--pen)}
  .unit{font-size:12.5px;color:var(--ink-faint)}
  .qtext{font-family:var(--mincho);font-size:21px;line-height:1.75;letter-spacing:.03em;margin:0 0 18px}
  .qtext.ch{font-size:19px;margin-top:22px}
  .figure{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:14px 12px;margin:0 0 20px}
  .figure svg{display:block;width:100%;height:auto}
  .fg-line{stroke:var(--ink);stroke-width:1.6;fill:none}
  .fg-thin{stroke:var(--ink-faint);stroke-width:1.1;fill:none}
  .fg-dash{stroke:var(--ai);stroke-width:1.4;fill:none;stroke-dasharray:4 4}
  .fg-accent{stroke:var(--pen);stroke-width:1.8;fill:none}
  .fg-fill{fill:#EAF0F4;stroke:var(--ai);stroke-width:1.4}
  .fg-fill2{fill:#F7EDE3;stroke:var(--pen);stroke-width:1.4}
  .fg-t{font-family:var(--gothic);font-size:11px;fill:var(--ink-soft)}
  .fg-t.em{fill:var(--pen)}.fg-t.b{fill:var(--ink);font-weight:600}

  .choices{display:flex;flex-direction:column;gap:9px}
  .choice{position:relative;text-align:left;font:inherit;font-size:15.5px;color:var(--ink);background:var(--card);
    border:1px solid var(--line);border-radius:3px;padding:14px 16px;cursor:pointer;width:100%;transition:border-color .15s}
  .choice:hover:not(:disabled){border-color:var(--ink-faint)}
  .choice:disabled{cursor:default}.choice.dim{opacity:.4}.choice.miss{border-color:var(--ai);color:var(--ai)}
  .choice .mark{position:absolute;inset:-6px -8px;pointer-events:none;overflow:visible}
  .choice .mark ellipse{fill:none;stroke:var(--pen);stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .5s cubic-bezier(.4,0,.3,1) forwards}
  .choice .mark line{stroke:var(--ai);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:60;
    stroke-dashoffset:60;animation:draw .28s ease-out forwards}
  .choice .mark line:nth-child(2){animation-delay:.14s}
  @keyframes draw{to{stroke-dashoffset:0}}

  .hero-row{display:flex;align-items:center;gap:11px;margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
  .ava{width:42px;height:42px;flex:none;border-radius:3px;background:#EEF0EC}
  .ava.sm{width:30px;height:30px}
  .hero-name{font-size:13px;font-weight:600;line-height:1.35}
  .hero-fit{font-size:11.5px;color:var(--ink-faint);line-height:1.35}
  .hero-fit.good{color:var(--brass)}
  .hintbtn{margin-left:auto;flex:none;border:1px solid var(--brass);color:var(--brass);background:transparent;
    font:inherit;font-size:12.5px;padding:6px 12px;border-radius:3px;cursor:pointer}
  .hintbtn:disabled{opacity:.35;cursor:default}
  .hints{margin-top:12px;display:flex;flex-direction:column;gap:8px}
  .hint{font-size:14px;line-height:1.65;background:#FBF7EC;border-left:2px solid var(--brass);padding:10px 13px;border-radius:0 3px 3px 0}
  .hint b{font-weight:600;color:var(--brass);font-size:11.5px;display:block;margin-bottom:2px}

  .verdict{margin-top:26px;animation:rise .3s ease-out}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .vhead{font-family:var(--mincho);font-size:17px;margin-bottom:12px}
  .vhead.ok{color:var(--pen)}.vhead.ng{color:var(--ai)}
  .lesson{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:16px}
  .speaker{display:flex;align-items:center;gap:9px;margin-bottom:11px}
  .speaker span{font-size:12.5px;font-weight:600}
  .lesson p{font-size:14.5px;line-height:1.8;margin:0}
  .gain{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;
    border-top:1px dashed var(--line);font-size:13px;color:var(--brass)}
  .gain em{font-style:normal;font-weight:600;color:var(--ink)}
  .gain.alt img{width:24px;height:24px}
  .gain.alt{color:var(--ink-soft)}
  .seal{width:16px;height:16px;flex:none;border:1.5px solid var(--brass);border-radius:50%;
    display:grid;place-items:center;font-size:9px;color:var(--brass)}
  .tip{margin-top:12px;background:#F3F7F4;border:1px solid #DCE7DF;border-radius:3px;padding:14px 15px;animation:rise .28s}
  .tip p{font-size:14px;line-height:1.75;margin:0;color:#2C3D33}
  .tip .speaker span{color:var(--moss)}
  .stretchbox{margin-top:14px;background:var(--card);border:1px solid var(--moss);border-radius:3px;padding:16px;animation:rise .28s}
  .stretchbox .tag{font-size:11.5px;color:var(--moss);letter-spacing:.1em;margin-bottom:9px}
  .stretchbox .sq{font-family:var(--mincho);font-size:17.5px;line-height:1.7;margin:0 0 14px}
  .stretchbox .choice{font-size:14.5px;padding:11px 14px}
  .snote{margin-top:12px;font-size:13.5px;line-height:1.75;color:var(--ink-soft);padding-top:11px;border-top:1px dashed var(--line)}
  .snote b{color:var(--moss)}
  .shint{background:none;border:none;color:var(--moss);font:inherit;font-size:12.5px;padding:0;margin-top:2px;
    cursor:pointer;text-decoration:underline;text-underline-offset:3px}

  .stat{display:flex;gap:24px;flex-wrap:wrap}
  .stat div{font-family:var(--mincho)}
  .stat b{display:block;font-size:30px;line-height:1.1;font-weight:600}
  .stat span{font-family:var(--gothic);font-size:11.5px;color:var(--ink-soft)}

  .ext{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:14px 15px;margin-top:12px}
  .ext.dim{opacity:.55}
  .exthead{display:flex;gap:11px;align-items:center}
  .exticon{width:44px;height:44px;flex:none;background:var(--paper);border:1px solid var(--line);
    border-radius:3px;padding:3px;image-rendering:pixelated;object-fit:contain}
  .exticon.sm{width:24px;height:24px;padding:1px;border:none;background:none}
  .extname{font-size:14px;font-weight:600}
  .extname .cnt{color:var(--moss);font-size:12px}
  .extsub{font-size:11.5px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;
    flex-wrap:wrap;margin-top:3px}
  .extt{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:10px 0 0}
  .cost{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line)}
  .cost span{display:flex;align-items:center;gap:3px;font-size:13px}
  .cost span.short{color:var(--pen)}
  .cost{flex-wrap:wrap}
  .cost .mini{margin-left:auto}
  .cost img{width:22px;height:22px}
  .mini{margin-left:auto;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;
    font-size:12.5px;padding:6px 14px;border-radius:3px;cursor:pointer}
  .mini:disabled{opacity:.3;cursor:default}

  .herohead{display:flex;gap:14px;align-items:center;margin:20px 0 0}
  .herohead img{width:72px;height:72px;border-radius:3px;background:#EEF0EC}
  .hh-name{font-family:var(--mincho);font-size:20px;font-weight:600;margin-bottom:4px}
  .flavor{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-top:14px;
    padding-left:12px;border-left:2px solid var(--line)}
  /* 出会ったクリスタル。外れたときは何も出さない（外れを罰に見せないため） */
  .foundrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .fnd{display:flex;align-items:center;gap:6px;background:var(--paper);
    border:1px solid var(--line);border-radius:3px;padding:4px 9px;font-size:12.5px}
  .fnd img{width:26px;height:26px}
  .fnd b{font-weight:600;color:var(--ink)}
  .fnd i{font-style:normal;font-size:11px;color:var(--ink-faint)}
  /* 表記のゆれのように、解説を省いても見せたいひとこと */
  .qnote{margin:10px 0 0;padding:9px 11px;font-size:13px;line-height:1.7;
    color:var(--ink);background:#FBF6EA;border-left:2px solid var(--brass);border-radius:2px}
  .gain.open{color:var(--moss)}
  .gain.open em{font-weight:600}
  .mini.ask{display:inline-block;width:auto;margin-left:6px}
  .gain.found img{width:26px;height:26px;flex:none}
  .gain.found{align-items:center}

  /* クラフト画面の族ごとの持ち高。要求も表示も族ポイントで揃える */
  .fams{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
  .fam{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:3px;padding:2px 8px;
    font-variant-numeric:tabular-nums}
  .fam b{font-weight:600;font-size:11.5px;color:var(--ink-soft)}
  .fam.zero{color:var(--ink-faint)}
  .fam.zero b{color:var(--ink-faint)}
  .fams.big .fam{font-size:13.5px;padding:4px 10px}
  .fams.big .fam b{font-size:12.5px}

  .eqlist{display:flex;flex-direction:column;gap:7px}
  .eqi{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);
    font:inherit;font-size:13.5px;padding:9px 12px;border-radius:3px;cursor:pointer;text-align:left;color:var(--ink-soft)}
  .eqi.on{border-color:var(--moss);color:var(--moss);background:#F0F5F1}
  /* 装備を選ぶそばで、対象英雄への到達度が動くのが見える（docs/reward-economy.md §2）*/
  .eqi em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink-faint);
    font-variant-numeric:tabular-nums}
  .eqi em.up{color:var(--moss);font-weight:600}
  .reach{border:1px solid var(--line);border-radius:3px;padding:10px 12px;margin-bottom:12px;
    background:var(--paper)}
  .reach select{font:inherit;font-size:12.5px;color:var(--ink-soft);background:transparent;
    border:0;border-bottom:1px solid var(--line);padding:2px 0;max-width:100%}
  .rnum{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:8px}
  .rnum span{font-size:12px;color:var(--ink-faint)}
  .rnum b{font-size:16px;font-variant-numeric:tabular-nums}
  .rnum b.up{color:var(--moss)}
  .rbar{position:relative;height:6px;margin-top:6px;background:var(--line);border-radius:3px;
    overflow:hidden}
  .rbar i{position:absolute;inset:0 auto 0 0;background:var(--ink-soft)}
  .rbar u{position:absolute;top:0;bottom:0;background:var(--moss)}

  .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:14px}
  .ccard{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:10px 6px;
    display:flex;flex-direction:column;align-items:center;gap:3px}
  .ccard img{width:52px;height:52px}
  .ccard.locked img{filter:grayscale(1) contrast(.35) brightness(1.35);opacity:.75}
  .cn{font-size:11.5px;font-weight:600;text-align:center;line-height:1.3}
  .ccard.locked .cn{color:var(--ink-faint)}
  .cg{width:100%;height:3px;background:var(--line);margin-top:5px;position:relative;overflow:hidden}
  .cg i{position:absolute;inset:0 auto 0 0;background:var(--moss)}
  .cgt{font-size:10px;color:var(--moss)}

  .battle{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:18px 16px;margin-top:18px;text-align:center}
  .bhero{width:96px;height:96px;border-radius:3px;background:#EEF0EC;
    filter:grayscale(1) contrast(.4) brightness(1.3);transition:filter .7s ease}
  .bhero.won{filter:none}
  .bmeta{margin:8px 0 14px}
  .bn{font-family:var(--mincho);font-size:18px;font-weight:600}
  .gauge{height:12px;background:#EDEFEA;border:1px solid var(--line);border-radius:2px;position:relative;overflow:hidden}
  .gauge i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--pen),#D9614F)}
  .gauge span{position:absolute;right:7px;top:-1px;font-size:9.5px;color:var(--ink);mix-blend-mode:normal}
  .glabel{font-size:12px;color:var(--ink-soft);margin-top:8px}
  .brow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    padding:9px 0;border-bottom:1px dashed var(--line)}
  .bt{font-size:13px;font-weight:600}
  .bs{font-size:11px;color:var(--ink-faint);line-height:1.5}
  .bv{font-family:var(--mincho);font-size:15px;color:var(--pen);flex:none}
  .bv.back{color:var(--ink-faint)}
  .bhp{font-family:var(--gothic);font-size:11px;color:var(--ink-faint);margin-left:8px}
  .btotal{text-align:right;font-family:var(--mincho);font-size:17px;color:var(--pen);margin-top:10px}
  .answer input{width:100%;font:inherit;font-size:17px;font-family:var(--mincho);padding:13px 14px;
    border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink);margin-bottom:10px}
  .chmsg{font-size:13.5px;color:var(--ai);margin-top:10px}

  .legend{display:flex;gap:12px;font-size:11px;color:var(--ink-soft);margin:10px 0 0;flex-wrap:wrap}
  .legend i{display:inline-block;width:9px;height:9px;margin-right:4px;vertical-align:-1px}
  .sw-ok{background:var(--pen)}.sw-ng{background:var(--ai)}.sw-st{background:var(--moss)}
  .sw-un{background:var(--card);border:1px solid var(--line)}
  .gridwrap{overflow-x:auto}
  table.map{border-collapse:separate;border-spacing:3px;font-size:10.5px}
  table.map th{font-weight:400;color:var(--ink-faint);font-size:10.5px;padding:0 2px;text-align:center;white-space:nowrap}
  table.map th.rowh{text-align:right;padding-right:6px;color:var(--ink-soft);font-size:11px}
  table.map td{width:24px;height:24px;padding:0}
  .cell{width:100%;height:100%;border-radius:2px;background:var(--paper);border:1px solid var(--line)}
  .cell.none{background:transparent;border-color:#EDF0EC}
  .cell.ok{background:var(--pen);border-color:var(--pen)}
  .cell.ng{background:var(--ai);border-color:var(--ai)}
  .cell.st{background:var(--moss);border-color:var(--moss)}
  .band{font-size:11px;color:var(--ink-faint);text-align:center;padding-bottom:2px}


  /* --- 出題選択：在庫バッジ --- */
  .seg button i{display:block;font-style:normal;font-size:10.5px;opacity:.65;margin-top:2px}
  .seg button.on i{opacity:.9}

  /* --- 解説トグル --- */
  .switch{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
  .switch input{position:absolute;opacity:0;width:0;height:0}
  .switch .sw{flex:none;width:40px;height:23px;border-radius:12px;background:#DDE2DC;
    border:1px solid var(--line);position:relative;transition:background .18s}
  .switch .sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;
    border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s}
  .switch input:checked + .sw{background:var(--moss);border-color:var(--moss)}
  .switch input:checked + .sw::after{transform:translateX(17px)}
  .switch input:focus-visible + .sw{outline:2px solid var(--ai);outline-offset:2px}
  .switch .lbl{font-size:14px;font-weight:600}

  /* --- テンポ優先モードのトースト --- */
  .toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:60;
    display:flex;align-items:center;gap:8px;white-space:nowrap;
    background:var(--card);border:1px solid var(--brass);border-radius:3px;
    padding:8px 15px;font-size:13px;color:var(--brass);
    box-shadow:0 4px 16px rgba(23,36,63,.14);animation:toastin .25s ease-out}
  .toast em{font-style:normal;font-weight:600;color:var(--ink)}
  .toast img{width:20px;height:20px}
  @keyframes toastin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important}
    .choice .mark ellipse,.choice .mark line{stroke-dashoffset:0}}

  /* ===================================================================
     ホームだけ 1画面完結。100dvh を3層に固定配分する。
     ホーム以外は方眼紙のまま（テスト感がコンセプトに効いている）ので、
     この節のセレクタは必ず .home の内側に閉じること。
     =================================================================== */

  :root{
    /* ボタンに重ねるグラデーション。下地は MCH の背景画像 */
    --g-chal:linear-gradient(180deg,rgba(10,16,30,.60),rgba(10,16,30,.86));
    --g-hero:linear-gradient(135deg,rgba(206,163,48,.86),rgba(36,72,124,.90));
    --g-shop:linear-gradient(135deg,rgba(72,166,178,.86),rgba(20,48,102,.92));
    --g-craft:linear-gradient(135deg,rgba(180,54,42,.86),rgba(212,166,44,.88));
    --g-quiz:linear-gradient(180deg,rgba(58,122,84,.80),rgba(92,58,140,.80));
    --tile-r:4px;
  }

  body.home{overflow:hidden}
  #app.home{
    position:relative;
    height:100vh;height:100dvh;
    display:flex;flex-direction:column;overflow:hidden;
    padding:env(safe-area-inset-top) env(safe-area-inset-right)
            env(safe-area-inset-bottom) env(safe-area-inset-left)}

  /* 背景は主役層だけでなくホーム全体に敷く。#app は max-width:560px なので、
     fixed ではなく absolute にして、広い画面でも本体の幅に収める */
  .home-bg{position:absolute;inset:0;z-index:0;opacity:.46;pointer-events:none;
    background-size:cover;background-position:center;background-repeat:no-repeat}
  #app.home > .layer{position:relative;z-index:1}

  /* 上段12% と下段32% は固定。主役層だけが伸縮して端末差を吸収する */
  .layer{min-height:0;padding:0 12px}
  /* 上段はユーザー情報とマイちゃんの助言が入るので、内容ぶんの高さを取る。
     下段は固定、主役層が残りを吸収する構造は変わらない */
  .layer-status{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;
    padding-top:7px;padding-bottom:3px;overflow:hidden}
  .layer-stage{flex:1 1 auto;position:relative;display:flex;flex-direction:column;
    justify-content:center;padding:10px 12px 12px;overflow:hidden}
  .layer-nav{flex:0 0 32%;display:flex;flex-direction:column;gap:7px;padding:8px 12px 10px}

  /* --- ステータス層 --- */
  .st-top{display:flex;align-items:center;justify-content:flex-end;gap:8px;
    font-size:clamp(10.5px,3vw,12.5px);color:var(--ink-soft)}
  .st-batt{display:flex;align-items:center;gap:4px;
    background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:3px;padding:1px 6px}
  .st-batt svg{width:20px;height:11px;display:block}
  .st-batt .cell{fill:none;stroke:var(--ink-soft);stroke-width:1.1}
  .st-batt .fill{fill:var(--moss)}
  .st-batt .fill.low{fill:var(--pen)}
  .st-batt b{font-weight:600;color:var(--ink);font-size:10.5px}
  .st-clock{font-family:var(--mincho);font-size:clamp(13px,4vw,16px);font-weight:600;color:var(--ink);
    background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:3px;padding:0 7px}

  .st-main{display:flex;align-items:center;gap:9px;min-width:0}
  .st-ava{flex:none;width:clamp(44px,13vw,58px);height:clamp(44px,13vw,58px);border-radius:50%;
    border:2px solid rgba(255,255,255,.92);background:var(--card);object-fit:cover;
    image-rendering:pixelated;box-shadow:0 1px 5px rgba(23,36,63,.22)}
  .st-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .st-line{display:flex;align-items:center;gap:8px;min-width:0}
  .st-title{flex:1;min-width:0;text-align:center;font-family:var(--mincho);
    font-size:clamp(11px,3.2vw,13.5px);color:#fff;background:#79201C;
    border:1px solid var(--brass);border-radius:3px;padding:2px 10px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .st-title.none{background:rgba(255,255,255,.78);border-color:var(--line);color:var(--ink-faint)}
  /* GUMの所持数はショップ画面だけに置き、ホームの一等地は知識マップに渡した。
     査読研究で、プログレスバーとコンセプトマップは学習者の選好が高く、仮想通貨は下位
     （docs/research-edtech.md §2）。時計と同じ行に置くので、上段の高さは変わらない */
  .st-map{margin-right:auto;display:flex;align-items:center;gap:6px;font:inherit;cursor:pointer;
    background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:3px;padding:1px 7px;
    color:var(--ink-soft)}
  .st-map b{font-weight:600;color:var(--ink);font-size:clamp(10.5px,3vw,12px);
    font-variant-numeric:tabular-nums}
  .st-map .mp-bar{width:clamp(28px,9vw,44px);height:4px;border-radius:2px;background:var(--line);
    overflow:hidden;flex:none}
  .st-map .mp-bar i{display:block;height:100%;background:var(--moss)}
  .st-name{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:11px;
    padding:2px 12px;text-align:center;font-size:clamp(11.5px,3.2vw,13px);font-weight:600;
    color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .st-advice{display:flex;align-items:flex-start;gap:7px;min-width:0}
  .st-advice > img{width:30px;height:30px;flex:none;image-rendering:pixelated}
  /* 吹き出しは文字数ぶん伸びる。3行を超えたら、収まるまで views.js が字を縮める */
  .bubble{flex:1;min-width:0;margin:0;padding:6px 11px;overflow:hidden;
    background:rgba(255,255,255,.80);border:1px solid var(--line);border-radius:12px;
    font-size:clamp(11px,3vw,13px);line-height:1.45;color:var(--ink);
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}

  /* 縦の狭い端末では上段を詰めて、主役層に高さを回す */
  @media (max-height:640px){
    .layer-status{gap:4px;padding-top:5px}
    .st-ava{width:38px;height:38px}
    .st-advice > img{width:24px;height:24px}
    .bubble{padding:4px 9px}
    .tv{gap:6px}
    .tv-name{padding:1px 10px}
    .chal{margin-top:8px}
    /* 縦が狭いときはナビも少し削って、挑む相手に高さを回す */
    .layer-nav{flex-basis:29%}
  }

  /* --- 主役層 --- */
  .layer-stage > *{position:relative;z-index:1}
  .cal{position:absolute;top:10px;right:12px;z-index:2;border:1px solid var(--line);
    background:rgba(251,251,247,.86);border-radius:var(--tile-r);padding:5px 8px;
    display:flex;align-items:center;gap:5px;font:inherit;font-size:11px;color:var(--ink-soft);
    cursor:pointer}
  .cal:hover{border-color:var(--ink-faint)}
  .cal img{width:17px;height:17px}

  /* 挑む相手。ボタンの中に置くアイコンとは別物なので、ボタンの外に大きく出す。
     原本が 64x64 しかないため、拡大時はドットを残す（にじませるとただの低解像度に見える） */
  .tv{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:9px;width:100%;min-height:0}
  .tv-art{flex:1 1 auto;width:100%;min-height:0;overflow:hidden}
  .tv-track{display:flex;height:100%;width:100%}
  .tv-track.move{transition:transform .42s cubic-bezier(.34,.68,.28,1)}
  /* 足元の影は擬似的な楕円。要素を足すと img の height:100% が効かなくなる */
  .tv-figure{flex:0 0 100%;height:100%;min-width:0;min-height:0;padding-bottom:11px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(ellipse 32% 6px at 50% calc(100% - 3px),
      rgba(23,36,63,.22),rgba(23,36,63,0) 70%)}
  .tv-figure img{height:100%;width:auto;max-width:100%;max-height:208px;object-fit:contain;
    image-rendering:pixelated;filter:drop-shadow(0 3px 8px rgba(0,0,0,.32))}
  .tv-name{display:flex;align-items:center;gap:7px;font-family:var(--mincho);
    background:rgba(251,251,247,.86);border:1px solid var(--line);border-radius:3px;padding:3px 12px}
  .tv-name b{font-size:clamp(15px,4.4vw,19px);font-weight:600;letter-spacing:.04em}
  .tv-dots{display:flex;gap:5px}
  .tv-dots i{width:6px;height:6px;border-radius:50%;background:rgba(23,36,63,.22)}
  .tv-dots i.on{background:var(--pen)}

  /* 挑戦ボタン。一番目立たせたいのはクイズなので、横幅はクイズと同じまま縦だけ低くする */
  .chal{flex:none;width:100%;margin-top:12px;padding:8px;
    border:1px solid rgba(255,255,255,.72);border-radius:var(--tile-r);cursor:pointer;
    font:inherit;font-family:var(--mincho);color:#fff;
    font-size:clamp(15px,4.4vw,18px);font-weight:600;letter-spacing:.16em;
    min-height:clamp(42px,9vh,58px);
    background-size:cover;background-position:center;background-repeat:no-repeat;
    box-shadow:0 2px 8px rgba(23,36,63,.24);text-shadow:0 1px 4px rgba(0,0,0,.65)}

  /* --- ナビ層 --- */
  .nav3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1 1 auto;min-height:0}
  /* アイコンは原本64pxを2倍で見せる。ボタンの寸法は変えないので、
     ラベルは絵の上に重ねる（等倍だと絵が小さく、ただの低解像度に見える） */
  .tile{position:relative;border:none;border-radius:var(--tile-r);cursor:pointer;font:inherit;color:#fff;
    overflow:hidden;padding:0;display:block;min-height:0;
    background-size:cover;background-position:center}
  /* 幅で狙いのサイズを決め、低いタイルでは max-height が縦を詰める。
     縦横比は保たれるので、正方形の原本が歪むことはない */
  .tile img{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
    width:clamp(52px,22vw,104px);height:clamp(52px,22vw,104px);max-height:84%;
    object-fit:contain;
    image-rendering:pixelated;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
  .tile > *{pointer-events:none}
  .tile .lab{position:absolute;left:0;right:0;bottom:5px;display:flex;flex-direction:column;
    align-items:center;line-height:1.25}
  .tile b{font-family:var(--mincho);font-size:clamp(12px,3.6vw,14.5px);font-weight:600;
    letter-spacing:.06em;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.6)}
  .tile small{font-size:10px;opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.85)}
  .tile:disabled{cursor:default;filter:grayscale(.6) brightness(.85);opacity:.75}

  .tile.quiz{flex:0 0 auto;min-height:clamp(58px,15vh,84px);
    display:flex;flex-direction:row;align-items:center;justify-content:center;gap:13px}
  .tile.quiz img{position:static;transform:none;object-fit:contain;
    width:clamp(64px,22vw,112px);height:clamp(64px,22vw,112px);max-height:92%}
  .tile.quiz b{font-size:clamp(15px,4.6vw,19px)}
  .tile .dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;
    background:var(--pen);box-shadow:0 0 0 2px rgba(255,255,255,.85)}

  /* --- 挑戦先を選ぶ画面。削れ具合はホームではなくここに出す --- */
  .trow{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:12px;
    text-align:left;font:inherit;color:var(--ink);cursor:pointer;
    background:var(--card);border:1px solid var(--line);border-radius:3px}
  .trow:hover{border-color:var(--ink-faint)}
  .trow.on{border-color:var(--brass)}
  .trow img{width:56px;height:56px;flex:none;image-rendering:pixelated}
  .trow .ti{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  .trow .tn{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
  .trow .tg{display:block;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
  .trow .tg i{display:block;height:100%;background:linear-gradient(90deg,var(--pen),#E08A5F)}
  .trow .tp{font-size:12px;color:var(--ink-soft)}
  .trow .tf{margin-left:7px;font-size:11px;color:var(--ink-faint)}
  .trow .ts{font-size:11px;color:var(--ink-faint);line-height:1.5}

  /* --- カレンダー。記録装置なので、連続日数の演出は一切置かない --- */
  .calhead{display:flex;align-items:center;gap:10px;margin-top:18px}
  .calmonth{flex:1;text-align:center;font-family:var(--mincho);font-size:18px;font-weight:600}
  .calmonth span{display:block;font-family:var(--gothic);font-size:11.5px;
    font-weight:400;color:var(--ink-faint);margin-top:2px}
  .calnav{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
    background:var(--card);color:var(--ink-soft);font-size:20px;line-height:1;padding:0;cursor:pointer}
  .calnav:hover{border-color:var(--ink-faint)}

  /* table-layout:fixed が無いと、マスの中身に引っ張られて列幅が揃わず、
     アスペクト比で伸びたボタンが隣のマスに重なる */
  table.calgrid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px;margin-top:14px}
  table.calgrid th{font-weight:400;font-size:11px;color:var(--ink-faint);padding-bottom:2px}
  table.calgrid th.sun{color:var(--pen)}
  table.calgrid th.sat{color:var(--ai)}
  table.calgrid td{width:14.28%;padding:0}
  .cald{position:relative;width:100%;aspect-ratio:1;border:1px solid var(--line);
    background:var(--card);border-radius:3px;font:inherit;padding:0;cursor:default;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
  .cald.out{border-color:transparent;background:transparent}
  /* 中の要素でクリックを受けない。ボタン自体が当たり判定になる */
  .cald > *{pointer-events:none}
  .cald .cn{font-size:11.5px;color:var(--ink-faint);line-height:1}
  .cald.on{cursor:pointer;border-color:var(--brass);background:#FDFBF4}
  .cald.on .cn{color:var(--ink);font-weight:600}
  .cald.on:hover{border-color:var(--pen)}
  .cald img{width:60%;max-width:26px;height:auto;image-rendering:pixelated}
  .cald.today{box-shadow:0 0 0 2px var(--ai)}
  .cald:disabled{cursor:default}

  .phead .sub.ok{color:var(--pen)}
  .phead .sub.ng{color:var(--ai)}
  .dq{font-family:var(--mincho);font-size:15.5px;line-height:1.7;margin:0 0 8px}
  .da{font-size:13px;color:var(--ink-soft);margin:0 0 10px}
  .da b{color:var(--ink)}

  /* --- マイページ --- */
  .st-main{width:100%;border:none;background:none;padding:0;font:inherit;color:inherit;
    text-align:left;cursor:pointer}
  .st-main .st-fields{display:flex;flex-direction:column;gap:4px}
  .st-main .st-line{display:flex;align-items:center;gap:8px;min-width:0}
  .st-main .st-name{display:block}

  .myhead{display:flex;align-items:center;gap:14px;margin-top:20px}
  .myhead img{width:64px;height:64px;border-radius:50%;border:2px solid var(--line);
    background:var(--card);image-rendering:pixelated;flex:none}
  .myhead .st-title{flex:none;text-align:left;display:inline-block}
  .myname{font-family:var(--mincho);font-size:20px;font-weight:600;margin-top:6px;
    word-break:break-all;line-height:1.4}
  .hcard.on{border-color:var(--brass);background:#FDFBF4}

  .eqi{flex-wrap:wrap}
  .eqi .tkind{flex:none;font-size:10.5px;letter-spacing:.08em;color:#fff;background:var(--ink-soft);
    border-radius:2px;padding:1px 6px}
  .eqi.on .tkind{background:var(--moss)}
  .eqi .tname{font-weight:600;color:var(--ink)}
  .eqi.on .tname{color:var(--moss)}
  .eqi.lock .tname{color:var(--ink-faint)}
  .eqi .tneed{flex-basis:100%;font-size:11px;color:var(--ink-faint);line-height:1.5;
    display:flex;justify-content:space-between;gap:10px}
  .eqi .tneed b{color:var(--ink-soft);font-weight:600;flex:none}
  .eqi:disabled{opacity:.75;cursor:default}

  /* --- ショップ --- */
  .shopitem{display:flex;align-items:center;gap:12px;margin-top:10px;padding:11px 12px;
    background:var(--card);border:1px solid var(--line);border-radius:3px}
  .shopitem.owned{border-color:var(--brass)}
  .shopitem > img{width:52px;height:52px;flex:none;image-rendering:pixelated}
  .si{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .sn{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:15px;font-weight:600;
    font-family:var(--mincho)}
  .sen{font-family:var(--gothic);font-size:11px;font-weight:400;color:var(--ink-faint);
    letter-spacing:.04em}
  .sn .cnt{font-family:var(--gothic);font-size:12px;color:var(--moss);font-weight:600}
  .ss{font-size:11px;color:var(--ink-faint)}
  .sfact{font-size:12px;line-height:1.6;color:var(--ink-soft);margin-top:2px}
  .sfact.hide{color:var(--ink-faint);font-style:italic}
  .sbuy{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  .sp{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:600;color:var(--ink)}
  .sp.short{color:var(--pen)}
  .sp img{width:15px;height:15px}
  .sbuy .mini{margin:0}

  /* --- レンジ回答（年代当て） --- */
  .rangebox{background:var(--card);border:1px solid var(--line);border-radius:3px;
    padding:16px 15px;margin-bottom:20px}
  .rio{display:flex;align-items:center;gap:8px}
  .rio input{flex:1;min-width:0;width:100%;font:inherit;font-family:var(--mincho);font-size:19px;
    text-align:center;padding:11px 8px;border:1px solid var(--line);border-radius:3px;
    background:var(--paper);color:var(--ink)}
  .rio input:disabled{opacity:.7}
  .rio span{flex:none;font-size:14px;color:var(--ink-soft)}
  .rio .ru{font-family:var(--mincho);font-size:15px;color:var(--ink)}
  .rlive{margin:12px 0 14px;font-size:13.5px;color:var(--ink-soft);text-align:center}
  .rlive b{font-family:var(--mincho);font-size:19px;color:var(--pen)}

  /* --- チャレンジの3問すすみ具合 --- */
  .chprog{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px}
  .chprog i{width:10px;height:10px;border-radius:50%;background:var(--line);
    border:1px solid var(--ink-faint)}
  .chprog i.ok{background:var(--pen);border-color:var(--pen)}
  .chprog i.ng{background:var(--ai);border-color:var(--ai)}
  .chprog i.now{background:var(--card);border-color:var(--ink);box-shadow:0 0 0 2px rgba(23,36,63,.16)}
  .chprog span{margin-left:6px;font-size:11px;color:var(--ink-faint)}

  /* コモンズの写真。クレジットは必ず添える（CC BY の条件） */
  .photo{margin:10px 0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
  .photo img{display:block;width:100%;height:auto;max-height:44vh;object-fit:contain;background:#F3F4F2}
  .photo figcaption{padding:5px 8px;font-size:10px;line-height:1.5;color:var(--ink-faint);
    border-top:1px solid var(--line);background:#FBFBF7}
  .photo figcaption a{color:var(--ink-soft)}
  .hint .photo{margin:8px 0 2px}

  /* 何をする画面かを示す帯。4択と消去法は見た目が同じで意味が正反対なので、
     読まなくても分かるように色で分ける。選択肢の「上」に置く。
     下に置くと、読む前に押してしまう */
  .band{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:14px 0 9px;padding:8px 12px;border-radius:6px;
    font-family:var(--gothic);font-size:13.5px;font-weight:600;color:#fff;letter-spacing:.02em}
  .band .bmain{display:flex;align-items:center;gap:7px}
  .band .bmain::before{content:"";width:16px;height:16px;flex:none;border-radius:3px;
    background:rgba(255,255,255,.85)}
  .band.pick{background:var(--ai)}
  .band.pick .bmain::before{clip-path:polygon(14% 46%,40% 72%,88% 16%,98% 28%,40% 94%,4% 58%)}
  .band.cut{background:var(--pen)}
  .band.cut .bmain::before{clip-path:polygon(16% 0,50% 34%,84% 0,100% 16%,66% 50%,100% 84%,
    84% 100%,50% 66%,16% 100%,0 84%,34% 50%,0 16%)}
  .band .bcnt{flex:none;font-family:var(--mincho);font-size:15px;
    background:rgba(255,255,255,.18);padding:2px 9px;border-radius:4px}

  /* 消去法の選択肢。破線にして、選んだものに×をつける */
  .choices.elim .choice{border-style:dashed;background:#FCFAF8}
  /* 絞り込み。2つ消したあと、残った2つだけが押せる */
  .choices.narrow .choice{border-style:dashed;background:#FCFAF8}
  .choice.gone{opacity:.3;border-style:solid;text-decoration:line-through;
    text-decoration-color:var(--pen)}
  .choices.narrow .choice:not(.gone):not(.x){border-style:solid}
  .choice.x{opacity:.6;color:var(--ink-faint);border-style:solid;border-color:var(--pen);
    text-decoration:line-through;text-decoration-color:var(--pen);text-decoration-thickness:2px}
  .choice.x::after{content:"×";position:absolute;right:12px;top:50%;transform:translateY(-50%);
    font-family:var(--gothic);font-size:17px;font-weight:700;color:var(--pen);opacity:.9}
  .elimbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;
    margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
  .lnk{background:none;border:none;padding:4px 2px;font:inherit;color:var(--ai);
    text-decoration:underline;cursor:pointer}

  /* 数値入力。単位は固定で出し、打たせるのは数だけ（決定4） */
  .numbox{margin-top:14px}
  .numdisp{display:flex;align-items:baseline;justify-content:center;gap:8px;
    min-height:52px;padding:8px 14px;border:1.5px solid var(--ink);border-radius:8px;
    background:var(--card)}
  .numdisp span{font-family:var(--mincho);font-size:32px;color:var(--ink);
    letter-spacing:.04em;line-height:1.2}
  .numdisp span.ph{font-family:var(--gothic);font-size:14px;color:var(--ink-faint);
    letter-spacing:0}
  .numdisp b{font-family:var(--mincho);font-size:19px;color:var(--ink-soft)}
  .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 12px}
  .key{padding:11px 0;font-family:var(--mincho);font-size:20px;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:8px;cursor:pointer}
  .key:active{background:#F1F3F0}
  .key:disabled{opacity:.45}

  /* 外したあとの3択。「このまま挑み直す」には専用ボタンを置かない */
  .retry{margin-top:16px;padding:12px 14px;border:1px dashed var(--pen);border-radius:8px;
    background:#FDF7F5}
  .retry .rhead{font-family:var(--mincho);font-size:15px;color:var(--ink)}
  .retry .racts{display:flex;gap:16px;margin-top:8px;font-size:13px}

  /* 文字パネル。なぞって読みを作る。文字数の枠も1文字目のマークも出さない（決定4） */
  .panelbox{margin-top:14px}
  .panelword{min-height:50px;display:flex;align-items:center;justify-content:center;
    padding:8px 14px;border:1.5px solid var(--ink);border-radius:8px;background:var(--card)}
  .panelword span{font-family:var(--mincho);font-size:26px;color:var(--ink);letter-spacing:.08em}
  .panelword span.ph{font-family:var(--gothic);font-size:13px;color:var(--ink-faint);letter-spacing:0}
  .panelwrap{position:relative;margin:12px 0;touch-action:none}
  /* すき間は狭く。八角形どうしの斜めの辺が向き合って、つながりが見える */
  .panelgrid{display:grid;gap:4px;touch-action:none;position:relative;z-index:1}
  /* 形は clip-path が作る（中は八角形・辺は六角形・隅は五角形）。
     角丸を残すと八角形に見えないので付けない。枠線も clip-path に切られて
     途切れるので、代わりに面の色と内側の影で境を出す */
  /* 形は clip-path が作る（中は八角形・辺は六角形・隅は五角形）。
     枠線と inset の影は clip-path に切られて途切れるので使えない。
     drop-shadow は切り抜いた形に沿うので、こちらで輪郭を出す */
  /* 形は clip-path が作る（中は八角形・辺は六角形・隅は五角形）。
     枠線も inset の影も clip-path に切られて途切れるので使えない。
     外側を縁の色で塗り、1px 内側にもう一度同じ形を切り抜いて面を置く。
     擬似要素は clip-path を継いで、自分の箱（1px小さい）に合わせて切り抜く */
  .pcell{aspect-ratio:1;position:relative;display:flex;align-items:center;
    justify-content:center;font-family:var(--mincho);font-size:23px;color:var(--ink);
    background:var(--ink-faint);border:none;padding:0;cursor:pointer;touch-action:none;
    user-select:none;-webkit-user-select:none}
  .pcell::before{content:"";position:absolute;inset:1px;background:var(--card);
    clip-path:inherit;z-index:-1}
  .pcell.on{color:var(--pen);background:var(--pen)}
  .pcell.on::before{background:#FBEEEB}
  .pcell:disabled{opacity:.45}
  /* 隣り合うマスを結ぶ薄い線。マスの下に敷き、すき間から見える */
  .panellattice{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
  .panellattice line{stroke:var(--ink-faint);stroke-width:.9;stroke-opacity:.22;
    vector-effect:non-scaling-stroke}
  .panelline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
  .panelline polyline{fill:none;stroke:var(--pen);stroke-width:1.1;stroke-opacity:.55;
    stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}