/* v1.2: 読み全体の波線 / 1画ずつHELP / iPad書き込み固定 */

/* 送り仮名あり問題は、答えの切れ目を見せない。
   「ととのえる」全体を同じ強調＋同じ波線にする。 */
.verticalQuestion .targetWithOkuri{
  background:#ffe48d;
  border-radius:7px;
  padding:4px 1px;
  text-decoration-line:underline;
  text-decoration-style:wavy;
  text-decoration-color:#d45e5e;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
}
.verticalQuestion .targetWithOkuri .kanjiReading,
.verticalQuestion .targetWithOkuri .okuriReading{
  text-decoration:none;
}

/* HELPは2本立て：1画ずつ / ぜんぶ見る */
.helpButtons{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px;position:relative;z-index:35}
.helpButtons .helpBtn{margin-top:0;min-height:50px}
.fullHintBtn{
  min-width:138px;min-height:50px;padding:10px 14px;border-radius:14px;
  background:#eef3ff;color:#3e5eaa;border:1px solid #cdd9fb;font-weight:950;
  touch-action:manipulation;pointer-events:auto;position:relative;z-index:36;
  -webkit-tap-highlight-color:transparent;
}
.fullHintBtn:active{transform:translateY(2px)}
.strokeHintCounter{font-size:11px;font-weight:950;color:#62769b;background:#fff;border:1px solid #dce5f2;border-radius:999px;padding:4px 8px;white-space:nowrap}
.shapeHintLine{
  margin-top:7px;padding:8px 10px;border-radius:13px;background:#fffdf5;border:1px solid #eee2b8;
  color:#5f6270;font-size:11px;line-height:1.45;text-align:left;
}
.shapeHintLine[hidden]{display:none}

/* 何画目かがわかる小さな番号 */
.hintStroke.v12Stroke{stroke:#789fff;opacity:.20;stroke-width:4.2}
.hintStroke.v12Stroke.hintNewest{opacity:.38;stroke:#5d82ee;animation:drawV12 .42s ease-out both}
@keyframes drawV12{from{stroke-dashoffset:var(--hint-len)}to{stroke-dashoffset:0}}
.hintOrder circle{fill:#ffffff;stroke:#89a5ef;stroke-width:1.2;opacity:.92}
.hintOrder text{font-size:5.4px;font-family:system-ui,sans-serif;font-weight:900;fill:#5574c8;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.hintOrder.latest circle{fill:#fff0a8;stroke:#e0b63e}
.hintOrder.latest text{fill:#775800}

/* Apple Pencilで書く画面では、ページ自体を操作対象にしない。 */
body.playing .challengeScreen.active{
  touch-action:none!important;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
body.playing .challengeScreen.active *:not(button){
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}
body.playing .challengeScreen.active button{touch-action:manipulation!important}

@media(max-width:760px){
  .helpButtons{grid-template-columns:1fr 118px;gap:6px}
  .fullHintBtn{min-width:118px;padding:8px 9px;font-size:12px}
  .helpButtons .helpBtn{font-size:12px;padding:8px 9px}
  .shapeHintLine{font-size:10px;padding:6px 8px;margin-top:5px}
}

@media(max-height:760px) and (min-width:761px){
  .helpButtons .helpBtn,.fullHintBtn{min-height:38px;padding:7px 10px}
  .shapeHintLine{padding:5px 8px;margin-top:4px;line-height:1.3}
}