:root{
  /* 墨・生成り・朱。青みのある暗色とミント緑はやめた。 */
  --bg:#15171a; --bg2:#1c1f24; --sunk:#101216; --line:#2b3037;
  --fg:#eae5dd; --dim:#8d8880; --faint:#5f5b55;
  --aka:#d4553a;      /* 朱。相手の断り・地雷・押せるものの色 */
  --kin:#c9a24a;      /* 金。点・値・通った手の色 */
  --negi:#8cc152;     /* ねぎだけ */
  --mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Songti SC",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:16px;line-height:1.75;-webkit-text-size-adjust:100%}
body{padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
code{background:var(--sunk);padding:.1em .35em;border-radius:2px;font-size:.85em}
.screen{max-width:680px;margin:0 auto;
  padding:calc(22px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 56px calc(18px + env(safe-area-inset-left))}
h1,h2{line-height:1.3;font-weight:600}
section{margin-top:34px}
/* 見出しは小さく字間を開けて、罫で仕切る。箱で囲わない。 */
section>h2{font-size:.82rem;color:var(--dim);letter-spacing:.22em;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin:0 0 14px}
.face{width:100%;height:100%;display:block}

/* 受付 */
.lang{float:right;margin-top:10px;background:none;border:1px solid var(--line);
  color:var(--dim);padding:5px 13px;border-radius:2px;font-size:.82rem;letter-spacing:.08em}
.lang:active{border-color:var(--aka);color:var(--aka)}
.title h1{font-family:var(--mincho);font-size:2.15rem;margin:10px 0 0;letter-spacing:.04em;font-weight:600}
.title h1 span{display:block;font-family:-apple-system,"Hiragino Sans",sans-serif;
  font-size:.66rem;color:var(--aka);letter-spacing:.42em;margin-top:8px;font-weight:600}
.lead{color:var(--dim);font-size:.98rem;margin:18px 0 0;max-width:34em}
.title h2{font-size:.82rem;color:var(--dim);letter-spacing:.22em;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin:34px 0 14px}
/* 空きマスに線の色が出ないよう、桝目は各セルの影で描く */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:1px;background:none}
.cardchar{background:var(--bg);border:0;border-radius:0;padding:12px 6px 13px;text-align:center;
  transition:.14s;box-shadow:0 0 0 1px var(--line)}
.cardchar svg{width:62px;height:62px;margin:0 auto}
.cardchar b{display:block;font-family:var(--mincho);font-size:clamp(.84rem,3.6vw,.98rem);margin-top:5px;font-weight:600;line-height:1.4;white-space:nowrap}
.cardchar span{display:block;font-size:.72rem;color:var(--faint);letter-spacing:.04em;margin-top:2px}
.cardchar.on{background:var(--bg2);box-shadow:0 0 0 1px var(--aka),inset 0 2px 0 var(--aka)}
.cardchar.on b{color:var(--aka)}
.diffs{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.diff{display:grid;grid-template-columns:minmax(40px,auto) 1fr;grid-template-rows:auto auto;gap:0 14px;
  background:var(--bg);border:0;border-radius:0;padding:14px 4px;text-align:left}
.diff b{grid-row:1/3;align-self:center;font-family:var(--mincho);font-size:1.7rem;text-align:center;color:var(--aka);font-weight:600;
  white-space:nowrap}  /* 英語だと Easy / Hard と語になる。38px 固定だと本文に重なっていた。 */
.diff span{font-size:1.04rem;font-weight:600}
.diff em{font-size:.86rem;color:var(--dim);font-style:normal;line-height:1.7}
.diff:active{background:var(--bg2)}
/* 出会い方 */
.meets{display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px}
.meet{display:grid;gap:4px;background:var(--bg);border:0;border-radius:0;padding:15px 4px;text-align:left}
.meet b{font-family:var(--mincho);font-size:1.26rem;font-weight:600;letter-spacing:.02em}
.meet span{font-size:.8rem;color:var(--dim);letter-spacing:.1em}
.meet em{font-size:.86rem;color:var(--dim);font-style:normal;line-height:1.75}
.meet.on{background:var(--bg2);box-shadow:inset 3px 0 0 var(--aka)}
.meet.on b{color:var(--aka)}
.meet.on span{color:var(--aka)}
.meetbadge{color:var(--aka);font-size:.8rem;letter-spacing:.14em;font-weight:600}
.meetnote{margin:20px 0 0}
.known{margin:10px 0 0;font-size:.88rem;color:var(--fg);background:var(--sunk);
  border-left:2px solid var(--kin);padding:8px 12px;border-radius:0;line-height:1.8}
.foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--faint);line-height:1.9}

/* お題 */
.homebtn{background:none;border:1px solid var(--line);color:var(--dim);
  font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:2px;letter-spacing:.06em}
.homebtn:active{border-color:var(--aka);color:var(--aka)}
.briefhead{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.tag{color:var(--aka);letter-spacing:.14em;font-weight:600}
.tag2{display:inline-block;color:var(--aka);font-size:.74rem;letter-spacing:.18em;font-weight:600}
.src,.srcq{color:var(--faint);font-size:.76rem;letter-spacing:.04em}
.brief h1{font-family:var(--mincho);font-size:1.75rem;margin:16px 0 0;letter-spacing:.03em;font-weight:600}
.price{font-family:var(--mincho);font-size:2.6rem;font-weight:600;color:var(--kin);
  line-height:1.1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.detail{font-size:.94rem;color:var(--dim);background:none;border:0;
  border-left:1px solid var(--line);border-radius:0;padding:2px 0 2px 14px;margin:16px 0 0}
.vs{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:start;margin:30px 0 0;
  border-top:1px solid var(--line);padding-top:22px}
.vs svg{width:88px;height:88px}
.vs h2{font-family:var(--mincho);font-size:1.35rem;margin:5px 0 3px;font-weight:600;letter-spacing:.03em}
.vs p{font-size:.96rem;color:var(--dim);margin:0 0 10px}
.vs p.org{font-size:.86rem;color:var(--kin);margin:0 0 8px;letter-spacing:.04em}
.facts{margin:0;padding-left:0;list-style:none;font-size:.9rem;color:var(--dim)}
.facts li{margin:5px 0;padding-left:14px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--faint)}
.go{display:block;width:100%;margin-top:30px;background:var(--aka);color:#15171a;
  font-weight:700;padding:17px;border-radius:2px;font-size:1.1rem;letter-spacing:.1em}
.go:active{background:#b8462f}

/* ロープレ */
.play{padding-top:14px}
.hud{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:center;
  background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;padding:11px 0}
.clock b{font-family:var(--mincho);font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:600}
.clock span{display:block;font-size:.76rem;color:var(--dim);letter-spacing:.14em}
.trustbar{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--dim);letter-spacing:.1em}
.trustbar .bar{flex:1;height:3px;background:var(--sunk);border-radius:0;overflow:hidden}
.trustbar i{display:block;height:100%;width:77%;background:var(--dim);transition:width .25s}
.trustbar i.hi{background:var(--kin)} .trustbar i.lo{background:var(--aka)}
.trustbar b{font-family:var(--mincho);font-variant-numeric:tabular-nums;color:var(--fg);font-size:1.15rem}
.questmini{grid-column:1/3;display:flex;gap:10px;align-items:baseline;border-top:1px solid var(--line);padding-top:8px}
.questmini b{font-size:.94rem}
.questmini span{font-family:var(--mincho);font-size:1.05rem;color:var(--kin);font-variant-numeric:tabular-nums}

.stage{margin-top:20px;text-align:center}
/* 相手の断りは朱の罫で受ける。赤入れの見立て。 */
.bubble{position:relative;background:var(--sunk);border:0;border-left:2px solid var(--aka);
  border-radius:0;padding:12px 16px;text-align:left}
.bubble .who{font-size:.8rem;color:var(--aka);font-weight:600;letter-spacing:.16em}
.bubble p{margin:7px 0 9px;font-size:1.2rem;line-height:1.75}
/* 主人公と相手を向かい合わせる */
.duel{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;
  gap:0;margin:6px auto 0;max-width:380px}
.herobox{position:relative;z-index:3;justify-self:end;width:100%;max-width:168px;margin-right:-2px}
.hero{width:100%;display:block;overflow:visible}
.hero .harm{transform-box:view-box;transform-origin:141px 152px}
/* ねぎは振る瞬間に湧いて出る */
.hero .negiheld{animation:negipop .13s ease-out both}
@keyframes negipop{0%{opacity:0}100%{opacity:1}}
.herobox:not([class*="move-"]) .hero{animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* 斬り方。腕（.harm）の回転＋体の踏み込み。点数には一切影響しない。 */
.move-kesa   .harm{animation:kesa .48s cubic-bezier(.2,.85,.3,1) both}
.move-yoko   .harm{animation:yoko .44s cubic-bezier(.2,.85,.3,1) both}
.move-tsuki  .harm{animation:tsuki .40s cubic-bezier(.25,.9,.35,1) both}
.move-kabuto .harm{animation:kabuto .52s cubic-bezier(.2,.9,.3,1) both}
.move-nidan  .harm{animation:nidan .68s cubic-bezier(.25,.85,.35,1) both}
@keyframes kesa  {0%{transform:rotate(0)}30%{transform:rotate(-34deg)}46%{transform:rotate(66deg)}72%{transform:rotate(74deg)}100%{transform:rotate(0)}}
@keyframes yoko  {0%{transform:rotate(0)}28%{transform:rotate(-52deg)}50%{transform:rotate(82deg)}74%{transform:rotate(72deg)}100%{transform:rotate(0)}}
@keyframes tsuki {0%{transform:rotate(0)}30%{transform:rotate(14deg)}44%{transform:rotate(86deg)}66%{transform:rotate(84deg)}100%{transform:rotate(0)}}
@keyframes kabuto{0%{transform:rotate(0)}34%{transform:rotate(-58deg)}52%{transform:rotate(40deg)}76%{transform:rotate(46deg)}100%{transform:rotate(0)}}
@keyframes nidan {0%{transform:rotate(0)}18%{transform:rotate(-40deg)}32%{transform:rotate(62deg)}
  50%{transform:rotate(-46deg)}70%{transform:rotate(70deg)}100%{transform:rotate(0)}}
.move-kesa   .hero{animation:stepIn .48s ease-out both}
.move-yoko   .hero{animation:stepSweep .44s ease-out both}
.move-tsuki  .hero{animation:stepThrust .40s cubic-bezier(.3,1.4,.5,1) both}
.move-kabuto .hero{animation:stepDrop .52s ease-out both}
.move-nidan  .hero{animation:stepIn .68s ease-out both}
@keyframes stepIn    {0%{transform:translateX(0)}28%{transform:translateX(-7px)}48%{transform:translateX(16px)}100%{transform:translateX(0)}}
@keyframes stepSweep {0%{transform:translateX(0) rotate(0)}30%{transform:translateX(-6px) rotate(4deg)}52%{transform:translateX(13px) rotate(-7deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes stepThrust{0%{transform:translateX(0)}28%{transform:translateX(-10px)}46%{transform:translateX(30px)}70%{transform:translateX(24px)}100%{transform:translateX(0)}}
@keyframes stepDrop  {0%{transform:translateY(0)}34%{transform:translateY(-9px)}54%{transform:translateY(7px)}100%{transform:translateY(0)}}

.movename{position:absolute;left:50%;top:4px;transform:translateX(-50%);
  font-family:var(--mincho);font-weight:600;font-size:1.4rem;color:var(--negi);letter-spacing:.14em;
  text-shadow:0 2px 0 #1b2a12;opacity:0;pointer-events:none;white-space:nowrap}
.movename.show{animation:namein .6s ease-out both}
@keyframes namein{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}
  22%{opacity:1;transform:translate(-50%,0) scale(1.05)}70%{opacity:1}100%{opacity:0}}

.charwrap{position:relative;z-index:1;width:100%;max-width:170px;justify-self:start;margin-left:0}
.charwrap .charbox{aspect-ratio:1/1}
.charbox{width:100%;height:100%}
.charbox.whacked{animation:whack .33s cubic-bezier(.36,.07,.19,.97)}
@keyframes whack{
  0%{transform:none}
  18%{transform:translate(-9px,7px) rotate(-9deg) scale(1.06,.9)}
  40%{transform:translate(7px,4px) rotate(6deg) scale(.94,1.05)}
  65%{transform:translate(-4px,2px) rotate(-3deg)}
  100%{transform:none}
}
.fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.fx .impact{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  font-family:var(--mincho);font-weight:600;font-size:1.8rem;color:var(--kin);text-shadow:0 2px 0 #4a3100;
  animation:pop .33s ease-out forwards;white-space:nowrap}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
  35%{transform:translate(-50%,-62%) scale(1.15);opacity:1}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}

.negi{display:inline-flex;align-items:center;gap:9px;margin-top:10px;
  background:none;border:1px solid #3c5230;color:var(--negi);
  padding:10px 18px;border-radius:2px;font-weight:600;font-size:.98rem;letter-spacing:.06em}
.negi .negiicon{width:13px;height:auto;display:block}
.negi em{font-style:normal;font-family:var(--mincho);font-size:1.12rem;font-variant-numeric:tabular-nums}
.negi.hot{border-color:var(--negi);box-shadow:0 0 0 0 rgba(140,193,82,.5);animation:hotpulse 1.1s infinite}
@keyframes hotpulse{70%{box-shadow:0 0 0 12px rgba(140,193,82,0)}100%{box-shadow:0 0 0 0 rgba(140,193,82,0)}}
.negi:active{transform:scale(.96)}
.negihint{font-size:.76rem;color:var(--faint);margin:8px 0 0;letter-spacing:.04em}

.choices{margin-top:22px;display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prompt{grid-column:1/-1;background:var(--bg);font-size:.88rem;color:var(--dim);margin:0;padding:0 0 12px}
.opt{text-align:left;background:var(--bg);border:0;border-radius:0;
  padding:16px 4px;font-size:1.08rem;line-height:1.75;transition:.12s}
.opt:active{background:var(--bg2)}
.fb{margin-top:22px;background:var(--sunk);border:0;border-left:2px solid var(--dim);
  border-radius:0;padding:14px 16px}
.fb.win{border-left-color:var(--kin)} .fb.ok{border-left-color:var(--dim)}
.fb.bad{border-left-color:var(--aka)} .fb.mine{border-left-color:var(--aka)}
.fb b{font-size:1.02rem;letter-spacing:.1em;font-weight:700}
.fb.win b{color:var(--kin)} .fb.mine b{color:var(--aka)}
.fb.ok b{color:var(--dim)} .fb.bad b{color:var(--aka)}
.fb p{font-size:.94rem;color:var(--dim);margin:6px 0 14px;line-height:1.8}
.fb button{background:var(--fg);color:#15171a;font-weight:700;padding:13px 24px;
  border-radius:2px;width:100%;letter-spacing:.1em;font-size:1rem}

/* ジャッジ */
.verdict{display:grid;grid-template-columns:148px 1fr;gap:18px;align-items:center;
  background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;padding:20px 0}
.verdict svg{width:104px;height:104px}
.verdict .vspair>svg{width:50%;height:auto}
.verdict .vspair .vhero>svg{width:100%;height:auto}
.verdict h1{font-family:var(--mincho);font-size:2.3rem;margin:3px 0;font-weight:600;letter-spacing:.06em}
.verdict.buy h1{color:var(--kin)}
.verdict.hold h1{color:var(--fg)}
.verdict.no h1{color:var(--aka)}
.vline{font-size:.96rem;color:var(--dim);margin:0}
.meta{font-size:.76rem;color:var(--faint);margin:8px 0 0;letter-spacing:.04em}
.scorewrap{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;margin-top:22px}
.radar{width:100%;height:auto}
.axlist{display:grid;gap:5px}
.ax{display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center;font-size:.84rem;color:var(--dim)}
.ax b{text-align:right;font-family:var(--mincho);font-variant-numeric:tabular-nums;color:var(--faint);font-size:1.22rem}
.ax.on b{color:var(--kin)}
.totals{display:flex;gap:14px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.totals div{flex:1}
.totals em{display:block;font-size:.68rem;color:var(--faint);font-style:normal;letter-spacing:.06em;white-space:nowrap}
.totals b{font-family:var(--mincho);font-size:1.55rem;font-variant-numeric:tabular-nums}
.negibox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;
  background:none;border:1px solid #3c5230;border-radius:2px;padding:11px 15px}
.negibox b{color:var(--negi);font-family:var(--mincho);font-size:1.18rem}
.negibox em{font-style:normal;font-size:.86rem;color:#7a8c68}
.negibox .negiicon{width:14px;height:auto;display:block}
.card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:16px 0 4px;margin-bottom:0}
.card>b{font-size:.84rem;letter-spacing:.12em;font-weight:600}
.card.mine{border-top:0;border-left:2px solid var(--aka);padding:12px 0 12px 14px;margin-bottom:10px}
.card.mine>b{color:var(--aka)}
.card.model{border-top:0;border-left:2px solid var(--kin);padding:12px 0 12px 14px;margin-bottom:10px}
.card.model>b{color:var(--kin)}
.card .pick{font-size:.98rem;margin:6px 0 2px}
.card .why,.card .how{font-size:.92rem;color:var(--dim);margin:6px 0;line-height:1.8}
.card blockquote{margin:10px 0 4px;padding:10px 14px;background:var(--sunk);border-radius:0;
  border-left:1px solid var(--line);font-size:.94rem;color:#d6cfc4}
.again{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.again button,.again .link{flex:1;min-width:140px;text-align:center;padding:16px;border-radius:2px;
  background:var(--aka);color:#15171a;font-weight:700;text-decoration:none;letter-spacing:.1em;font-size:1rem}
.again .ghost{background:none;border:1px solid var(--line);color:var(--dim);font-weight:600}

@media (max-width:420px){
  .scorewrap{grid-template-columns:1fr}
  .vs{grid-template-columns:72px 1fr;gap:14px}
  .vs svg{width:72px;height:72px}
  .verdict{grid-template-columns:132px 1fr;gap:12px}
  .verdict>svg{width:76px;height:76px}
  .ax{grid-template-columns:40px 1fr;gap:8px}
  .title h1{font-size:1.85rem}
  .price{font-size:2.25rem}
}

/* ジャッジの2人 */
.vspair{display:flex;align-items:flex-end;gap:2px}
.vspair .vhero{width:50%;flex:0 0 50%}
/* 判定画面ではねぎを振らないので、うなだれた腕がはみ出さないよう枠で切る */
.vspair .vhero .hero{width:100%;display:block;overflow:hidden}
.vspair .face{width:50%}
@media (prefers-reduced-motion:reduce){
  .hero,.harm,.herobox .hero{animation:none !important}
}

/* 攻め方 */
.apline{margin:0 0 8px;font-size:.84rem;color:var(--kin);font-weight:600;letter-spacing:.14em}
.fb.miss{border-left-color:var(--dim)}
.fb.miss b{color:var(--dim)}
.aplist{display:flex;flex-wrap:wrap;gap:1px;margin-bottom:16px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.apchip{display:flex;align-items:baseline;gap:8px;background:var(--bg);
  border:0;border-radius:0;padding:10px 14px;font-size:.9rem;flex:1 1 auto}
.apchip b{font-weight:600}
.apchip span{color:var(--faint);font-size:.82rem}
.apchip em{font-style:normal;color:var(--faint);font-size:.82rem;font-variant-numeric:tabular-nums}
.apchip.hit b,.apchip.hit em{color:var(--kin)}
.apchip.miss b,.apchip.miss em{color:var(--aka)}
.aphit{color:var(--kin);font-weight:600}
.apbad{color:var(--aka);font-weight:600}

/* ------------------------------------------------- ねぎを選択肢に置く
   5つ目は「返し」ではない。手番も点も動かない。だから引用符を付けず、
   ねぎ色の細い枠にして、並びの中で明らかに別物に見えるようにする。 */
.opt.negiopt{display:flex;align-items:center;gap:10px;margin-top:10px;
  color:var(--negi);border:1px dashed #3c5230;padding:12px 14px;
  font-size:.98rem;letter-spacing:.02em}
.opt.negiopt .negiicon{width:13px;height:auto;flex:none}
.opt.negiopt:active{background:#1a2015}
/* 叩かれた相手のひとこと。ヒントの行を借りて出す。 */
.negisay{color:var(--negi);font-style:normal}
/* 結果画面のねぎ。押せる。 */
.negibox{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.negibox b i{font-style:normal;font-variant-numeric:tabular-nums}
.negibox.whacked{animation:whack .33s cubic-bezier(.36,.07,.19,.97)}
.negiendsay{min-height:1.5em;margin:8px 0 0;color:var(--negi);font-size:.95rem;
  opacity:0;transition:opacity .18s ease}
.negiendsay.show{opacity:1}

/* ------------------------------------------------- 足した5つの技
   腕の角度は「構え → 当たる角度 → 余韻 → 戻る」の4点で作る。
   当たる%は app.js の hit と揃える（ずれると音と絵が合わない）。 */
.move-karatake .harm{animation:karatake .54s cubic-bezier(.2,.9,.3,1) both}
.move-gyaku    .harm{animation:gyaku    .46s cubic-bezier(.2,.85,.3,1) both}
.move-kote     .harm{animation:kote     .32s cubic-bezier(.3,.95,.4,1) both}
.move-tsubame  .harm{animation:tsubame  .72s cubic-bezier(.25,.85,.35,1) both}
.move-midare   .harm{animation:midare   .90s linear both}
@keyframes karatake{0%{transform:rotate(0)}32%{transform:rotate(-76deg)}50%{transform:rotate(80deg)}
  74%{transform:rotate(72deg)}100%{transform:rotate(0)}}
@keyframes gyaku   {0%{transform:rotate(0)}30%{transform:rotate(62deg)}46%{transform:rotate(-44deg)}
  70%{transform:rotate(-34deg)}100%{transform:rotate(0)}}
@keyframes kote    {0%{transform:rotate(0)}26%{transform:rotate(-20deg)}40%{transform:rotate(48deg)}
  64%{transform:rotate(42deg)}100%{transform:rotate(0)}}
@keyframes tsubame {0%{transform:rotate(0)}18%{transform:rotate(-46deg)}30%{transform:rotate(64deg)}
  48%{transform:rotate(-8deg)}64%{transform:rotate(-56deg)}82%{transform:rotate(-40deg)}100%{transform:rotate(0)}}
@keyframes midare  {0%{transform:rotate(0)}12%{transform:rotate(-34deg)}22%{transform:rotate(58deg)}
  36%{transform:rotate(-26deg)}48%{transform:rotate(64deg)}62%{transform:rotate(-30deg)}
  74%{transform:rotate(70deg)}88%{transform:rotate(26deg)}100%{transform:rotate(0)}}
.move-karatake .hero{animation:stepDrop   .54s ease-out both}
.move-gyaku    .hero{animation:stepIn     .46s ease-out both}
.move-kote     .hero{animation:stepThrust .32s cubic-bezier(.3,1.4,.5,1) both}
.move-tsubame  .hero{animation:stepSweep  .72s ease-out both}
.move-midare   .hero{animation:stepSweep  .90s ease-in-out both}

/* ------------------------------------------------- 関節（肩・肘・腰・首）
   行政書士アプリと同じ考え方で、親を回すと子が付いてくる入れ子にした。
   肘・胴・頭の角度は、技ごとの腕の曲線から機械的に導いている：
     肘 … 振りかぶり（腕がマイナス）では畳み、当てるとき（プラス）はほぼ伸ばす
     胴 … 腕と逆に少しひねる（反動）
     首 … 胴の半分だけ付いていく
   手で10技ぶん書くとズレるので、下は生成したもの。腕の曲線を直せば作り直せる。 */
.hero .hfore{transform-box:view-box;transform-origin:141px 131px}
.hero .hbody{transform-box:view-box;transform-origin:100px 198px}
.hero .hhead{transform-box:view-box;transform-origin:100px 124px}
.move-kesa .hfore{animation:kesaF .48s cubic-bezier(.2,.85,.3,1) both}
.move-kesa .hbody{animation:kesaB .48s cubic-bezier(.2,.85,.3,1) both}
.move-kesa .hhead{animation:kesaH .48s cubic-bezier(.2,.85,.3,1) both}
@keyframes kesaF{0%{transform:rotate(0.0deg)} 30%{transform:rotate(-20.4deg)} 46%{transform:rotate(9.2deg)} 72%{transform:rotate(10.4deg)} 100%{transform:rotate(0.0deg)}}
@keyframes kesaB{0%{transform:rotate(-0.0deg)} 30%{transform:rotate(4.4deg)} 46%{transform:rotate(-8.6deg)} 72%{transform:rotate(-9.6deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes kesaH{0%{transform:rotate(-0.0deg)} 30%{transform:rotate(2.0deg)} 46%{transform:rotate(-4.0deg)} 72%{transform:rotate(-4.4deg)} 100%{transform:rotate(-0.0deg)}}
.move-yoko .hfore{animation:yokoF .44s cubic-bezier(.2,.85,.3,1) both}
.move-yoko .hbody{animation:yokoB .44s cubic-bezier(.2,.85,.3,1) both}
.move-yoko .hhead{animation:yokoH .44s cubic-bezier(.2,.85,.3,1) both}
@keyframes yokoF{0%{transform:rotate(0.0deg)} 28%{transform:rotate(-31.2deg)} 50%{transform:rotate(11.5deg)} 74%{transform:rotate(10.1deg)} 100%{transform:rotate(0.0deg)}}
@keyframes yokoB{0%{transform:rotate(-0.0deg)} 28%{transform:rotate(6.8deg)} 50%{transform:rotate(-10.7deg)} 74%{transform:rotate(-9.4deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes yokoH{0%{transform:rotate(-0.0deg)} 28%{transform:rotate(3.1deg)} 50%{transform:rotate(-4.9deg)} 74%{transform:rotate(-4.3deg)} 100%{transform:rotate(-0.0deg)}}
.move-tsuki .hfore{animation:tsukiF .40s cubic-bezier(.25,.9,.35,1) both}
.move-tsuki .hbody{animation:tsukiB .40s cubic-bezier(.25,.9,.35,1) both}
.move-tsuki .hhead{animation:tsukiH .40s cubic-bezier(.25,.9,.35,1) both}
@keyframes tsukiF{0%{transform:rotate(0.0deg)} 30%{transform:rotate(2.0deg)} 44%{transform:rotate(12.0deg)} 66%{transform:rotate(11.8deg)} 100%{transform:rotate(0.0deg)}}
@keyframes tsukiB{0%{transform:rotate(-0.0deg)} 30%{transform:rotate(-1.8deg)} 44%{transform:rotate(-11.2deg)} 66%{transform:rotate(-10.9deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes tsukiH{0%{transform:rotate(-0.0deg)} 30%{transform:rotate(-0.8deg)} 44%{transform:rotate(-5.2deg)} 66%{transform:rotate(-5.0deg)} 100%{transform:rotate(-0.0deg)}}
.move-kabuto .hfore{animation:kabutoF .52s cubic-bezier(.2,.9,.3,1) both}
.move-kabuto .hbody{animation:kabutoB .52s cubic-bezier(.2,.9,.3,1) both}
.move-kabuto .hhead{animation:kabutoH .52s cubic-bezier(.2,.9,.3,1) both}
@keyframes kabutoF{0%{transform:rotate(0.0deg)} 34%{transform:rotate(-34.8deg)} 52%{transform:rotate(5.6deg)} 76%{transform:rotate(6.4deg)} 100%{transform:rotate(0.0deg)}}
@keyframes kabutoB{0%{transform:rotate(-0.0deg)} 34%{transform:rotate(7.5deg)} 52%{transform:rotate(-5.2deg)} 76%{transform:rotate(-6.0deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes kabutoH{0%{transform:rotate(-0.0deg)} 34%{transform:rotate(3.5deg)} 52%{transform:rotate(-2.4deg)} 76%{transform:rotate(-2.8deg)} 100%{transform:rotate(-0.0deg)}}
.move-nidan .hfore{animation:nidanF .68s cubic-bezier(.25,.85,.35,1) both}
.move-nidan .hbody{animation:nidanB .68s cubic-bezier(.25,.85,.35,1) both}
.move-nidan .hhead{animation:nidanH .68s cubic-bezier(.25,.85,.35,1) both}
@keyframes nidanF{0%{transform:rotate(0.0deg)} 18%{transform:rotate(-24.0deg)} 32%{transform:rotate(8.7deg)} 50%{transform:rotate(-27.6deg)} 70%{transform:rotate(9.8deg)} 100%{transform:rotate(0.0deg)}}
@keyframes nidanB{0%{transform:rotate(-0.0deg)} 18%{transform:rotate(5.2deg)} 32%{transform:rotate(-8.1deg)} 50%{transform:rotate(6.0deg)} 70%{transform:rotate(-9.1deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes nidanH{0%{transform:rotate(-0.0deg)} 18%{transform:rotate(2.4deg)} 32%{transform:rotate(-3.7deg)} 50%{transform:rotate(2.8deg)} 70%{transform:rotate(-4.2deg)} 100%{transform:rotate(-0.0deg)}}
.move-karatake .hfore{animation:karatakeF .54s cubic-bezier(.2,.9,.3,1) both}
.move-karatake .hbody{animation:karatakeB .54s cubic-bezier(.2,.9,.3,1) both}
.move-karatake .hhead{animation:karatakeH .54s cubic-bezier(.2,.9,.3,1) both}
@keyframes karatakeF{0%{transform:rotate(0.0deg)} 32%{transform:rotate(-45.6deg)} 50%{transform:rotate(11.2deg)} 74%{transform:rotate(10.1deg)} 100%{transform:rotate(0.0deg)}}
@keyframes karatakeB{0%{transform:rotate(-0.0deg)} 32%{transform:rotate(9.9deg)} 50%{transform:rotate(-10.4deg)} 74%{transform:rotate(-9.4deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes karatakeH{0%{transform:rotate(-0.0deg)} 32%{transform:rotate(4.6deg)} 50%{transform:rotate(-4.8deg)} 74%{transform:rotate(-4.3deg)} 100%{transform:rotate(-0.0deg)}}
.move-gyaku .hfore{animation:gyakuF .46s cubic-bezier(.2,.85,.3,1) both}
.move-gyaku .hbody{animation:gyakuB .46s cubic-bezier(.2,.85,.3,1) both}
.move-gyaku .hhead{animation:gyakuH .46s cubic-bezier(.2,.85,.3,1) both}
@keyframes gyakuF{0%{transform:rotate(0.0deg)} 30%{transform:rotate(8.7deg)} 46%{transform:rotate(-26.4deg)} 70%{transform:rotate(-20.4deg)} 100%{transform:rotate(0.0deg)}}
@keyframes gyakuB{0%{transform:rotate(-0.0deg)} 30%{transform:rotate(-8.1deg)} 46%{transform:rotate(5.7deg)} 70%{transform:rotate(4.4deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes gyakuH{0%{transform:rotate(-0.0deg)} 30%{transform:rotate(-3.7deg)} 46%{transform:rotate(2.6deg)} 70%{transform:rotate(2.0deg)} 100%{transform:rotate(-0.0deg)}}
.move-kote .hfore{animation:koteF .32s cubic-bezier(.3,.95,.4,1) both}
.move-kote .hbody{animation:koteB .32s cubic-bezier(.3,.95,.4,1) both}
.move-kote .hhead{animation:koteH .32s cubic-bezier(.3,.95,.4,1) both}
@keyframes koteF{0%{transform:rotate(0.0deg)} 26%{transform:rotate(-12.0deg)} 40%{transform:rotate(6.7deg)} 64%{transform:rotate(5.9deg)} 100%{transform:rotate(0.0deg)}}
@keyframes koteB{0%{transform:rotate(-0.0deg)} 26%{transform:rotate(2.6deg)} 40%{transform:rotate(-6.2deg)} 64%{transform:rotate(-5.5deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes koteH{0%{transform:rotate(-0.0deg)} 26%{transform:rotate(1.2deg)} 40%{transform:rotate(-2.9deg)} 64%{transform:rotate(-2.5deg)} 100%{transform:rotate(-0.0deg)}}
.move-tsubame .hfore{animation:tsubameF .72s cubic-bezier(.25,.85,.35,1) both}
.move-tsubame .hbody{animation:tsubameB .72s cubic-bezier(.25,.85,.35,1) both}
.move-tsubame .hhead{animation:tsubameH .72s cubic-bezier(.25,.85,.35,1) both}
@keyframes tsubameF{0%{transform:rotate(0.0deg)} 18%{transform:rotate(-27.6deg)} 30%{transform:rotate(9.0deg)} 48%{transform:rotate(-4.8deg)} 64%{transform:rotate(-33.6deg)} 82%{transform:rotate(-24.0deg)} 100%{transform:rotate(0.0deg)}}
@keyframes tsubameB{0%{transform:rotate(-0.0deg)} 18%{transform:rotate(6.0deg)} 30%{transform:rotate(-8.3deg)} 48%{transform:rotate(1.0deg)} 64%{transform:rotate(7.3deg)} 82%{transform:rotate(5.2deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes tsubameH{0%{transform:rotate(-0.0deg)} 18%{transform:rotate(2.8deg)} 30%{transform:rotate(-3.8deg)} 48%{transform:rotate(0.5deg)} 64%{transform:rotate(3.4deg)} 82%{transform:rotate(2.4deg)} 100%{transform:rotate(-0.0deg)}}
.move-midare .hfore{animation:midareF .90s linear both}
.move-midare .hbody{animation:midareB .90s linear both}
.move-midare .hhead{animation:midareH .90s linear both}
@keyframes midareF{0%{transform:rotate(0.0deg)} 12%{transform:rotate(-20.4deg)} 22%{transform:rotate(8.1deg)} 36%{transform:rotate(-15.6deg)} 48%{transform:rotate(9.0deg)} 62%{transform:rotate(-18.0deg)} 74%{transform:rotate(9.8deg)} 88%{transform:rotate(3.6deg)} 100%{transform:rotate(0.0deg)}}
@keyframes midareB{0%{transform:rotate(-0.0deg)} 12%{transform:rotate(4.4deg)} 22%{transform:rotate(-7.5deg)} 36%{transform:rotate(3.4deg)} 48%{transform:rotate(-8.3deg)} 62%{transform:rotate(3.9deg)} 74%{transform:rotate(-9.1deg)} 88%{transform:rotate(-3.4deg)} 100%{transform:rotate(-0.0deg)}}
@keyframes midareH{0%{transform:rotate(-0.0deg)} 12%{transform:rotate(2.0deg)} 22%{transform:rotate(-3.5deg)} 36%{transform:rotate(1.6deg)} 48%{transform:rotate(-3.8deg)} 62%{transform:rotate(1.8deg)} 74%{transform:rotate(-4.2deg)} 88%{transform:rotate(-1.6deg)} 100%{transform:rotate(-0.0deg)}}

/* ------------------------------------------------- ねぎは選択肢の5つ目だけ
   盤の上のボタンと二重だったのでやめた。回数と但し書きはここが持つ。 */
.opt.negiopt{align-items:center;gap:12px}
.opt.negiopt span{display:block;min-width:0}
.opt.negiopt b{display:block;font-weight:600;font-size:1rem;letter-spacing:.02em}
.opt.negiopt i{display:block;font-style:normal;font-size:.76rem;color:#6f8a58;margin-top:1px}
.opt.negiopt em{margin-left:auto;font-style:normal;font-family:var(--mincho);
  font-size:1.2rem;font-variant-numeric:tabular-nums;flex:none}
.opt.negiopt.hot{border-style:solid;border-color:var(--negi);
  box-shadow:0 0 0 2px rgba(140,193,82,.18)}
/* 叩かれた相手のひとことは、人物のすぐ下に出す */
/* ひとことは2行になることがある。出た瞬間に下が動かないよう、先に場所を取る。 */
.negihint{min-height:2.6em;text-align:center;line-height:1.5}