/* 書き取り入力だけを既存の戦闘UIへ加える。場面と人物の配置は本体に任せる。 */
#wb-root{width:100%;max-width:660px;margin:auto;box-sizing:border-box}
#wb-root *,#screen-battle.writing-battle #wb-play *{box-sizing:border-box}
#wb-root [hidden],#screen-battle.writing-battle [hidden]{display:none!important}
#wb-root button,#screen-battle.writing-battle #wb-play button{
  font:inherit;font-weight:900;min-height:44px;cursor:pointer;border:2px solid var(--line,#d5e2d8);
  background:rgba(255,255,255,.94);color:var(--ink,#224c37);border-radius:12px;padding:8px 12px;
  box-shadow:0 3px 0 var(--line,#d5e2d8);-webkit-tap-highlight-color:transparent;
}
#wb-root button:disabled,#screen-battle.writing-battle #wb-play button:disabled{opacity:.48;cursor:default}
#wb-root button:focus-visible,#screen-battle.writing-battle #wb-play button:focus-visible{
  outline:3px solid #205b43;outline-offset:2px;
}
#wb-root section{background:#fffef9;padding:16px;border-radius:18px}
.wb-heading{display:flex;flex-direction:column;background:#205b43;color:white;border-radius:16px;padding:16px}
.wb-heading b{font-size:24px}
.wb-heading span,.wb-note,#wb-root footer{font-size:12px}
.wb-note{margin:9px 0;color:#4a6757}
#wb-root footer{margin-top:14px;color:#536e5d;overflow-wrap:anywhere}
#wb-start,#wb-home-button,#screen-battle.writing-battle #wb-play #wb-submit,#screen-battle.writing-battle #wb-play #wb-next{
  background:#205b43;color:white;border-color:#164b36;
}

#screen-battle.writing-battle{--wb-ink-size:min(calc(100vw - 28px),300px);--wb-input-height:calc(var(--wb-ink-size) + 72px)}
#screen-battle.tate.battle-responsive.writing-battle[id="screen-battle"]{min-height:calc(var(--wb-ink-size) + 400px)}
#screen-battle.writing-battle #wb-play{
  width:100%;min-width:0;min-height:var(--wb-input-height);margin:0;padding:0;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
}
#screen-battle.writing-battle #wb-ink-area{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--wb-ink-size) 64px;gap:8px;
  width:100%;min-width:0;height:var(--wb-input-height);align-items:start;
}
#screen-battle.writing-battle #wb-canvas{
  display:block;width:var(--wb-ink-size);max-width:100%;height:var(--wb-ink-size);justify-self:center;align-self:start;aspect-ratio:1;margin:0;touch-action:none;
  user-select:none;-webkit-user-select:none;border:2px solid #87a28e;border-radius:6px;
  background:linear-gradient(90deg,transparent calc(50% - .5px),#d6dfd6 50%,transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px),#d6dfd6 50%,transparent calc(50% + .5px)),#fff;
}
#screen-battle.writing-battle #wb-play .wb-actions{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:14px 44px;
  width:var(--wb-ink-size);max-width:100%;justify-self:center;min-width:0;height:64px;gap:6px;
}
#screen-battle.writing-battle #wb-play .wb-actions button{
  grid-row:2;width:100%;min-width:0;padding:4px 3px;font-size:14px;line-height:1.1;
  white-space:normal;overflow-wrap:anywhere;
}
#screen-battle.writing-battle #wb-next,
#screen-battle.writing-battle #wb-retry-save,
#screen-battle.writing-battle #wb-rest{width:100%;margin:0;line-height:1.4;overflow-wrap:anywhere}
#screen-battle.writing-battle #wb-question{margin:0;font:inherit;font-weight:900;line-height:1.4}
#screen-battle.writing-battle #wb-question mark{display:inline-block;white-space:nowrap;background:#ffe5a2;color:inherit;padding:0 3px;border-radius:4px}
#screen-battle.writing-battle #wb-instruction{display:block;margin:3px 0 0;font-size:.78em;line-height:1.35}
#screen-battle.writing-battle #wb-message{display:block;margin:4px 0 0;font-size:.84em;line-height:1.35}
#screen-battle.writing-battle #wb-message:empty{display:none}
#screen-battle.writing-battle #wb-power{grid-row:1;grid-column:1/-1;justify-self:center;display:block;max-width:100%;margin:0;padding:0 2px;font-size:10.5px;line-height:1.05;color:#253d30;background:rgba(255,255,255,.9);border-radius:4px;overflow-wrap:anywhere}
#screen-battle.writing-battle .enemy-char.writing-reading{
  font-size:clamp(62px,20vw,80px)!important;white-space:nowrap;
}
#screen-battle.writing-battle .enemy-char.writing-reading.wb-long-reading{font-size:clamp(24px,calc(150px / var(--wb-reading-length,2)),60px)!important}
#screen-battle.writing-battle .pc.writing-same-answer{font-size:clamp(20px,6vw,26px)!important;white-space:nowrap}
#screen-battle.writing-battle #bStageName.wb-long-name{display:block;max-width:min(140px,calc(100vw - 224px));white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.12}
#screen-battle.writing-battle .stage-label:has(.wb-long-name)>br{display:none}
#screen-battle.writing-battle #bHp{white-space:nowrap;font-size:16px}
#wb-root #wb-travel{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:360px){
  #wb-root section{padding:12px}
  #screen-battle.writing-battle #wb-play .wb-actions button{font-size:13px}
}