/* 視点操作は戦闘の入力を妨げず、タッチでも44pxを確保する。 */
#boardView{display:flex;flex-shrink:0;gap:4px}
#boardView button{width:44px;min-height:44px;padding:0;border:1px solid #8dbfd055;border-radius:12px;background:linear-gradient(145deg,#2b465a,#15273d);color:#c5eef5;font:26px/1 sans-serif}
#boardView button:hover:not(:disabled){border-color:#d2eff5;background:#355368}
#boardView button:disabled{opacity:.3}
#boardView #dangerZone{font-size:18px;font-weight:700;color:#ffc4c4}
#boardView #dangerZone[aria-pressed="true"]{background:linear-gradient(145deg,#6a2b36,#3a1520);border-color:#ff9a9a;color:#fff0f0}
#boardView #dangerZone.hidden{display:none}
#boardView{align-items:center}
/* FFタクティクスの羅針盤のように、いまの向きを菱形で見せる。印の角が、元の「奥」の角 */
#viewCompass{position:relative;display:block;flex:0 0 auto;width:18px;height:18px;margin:0 6px;border:1.5px solid #8dd0e0aa;background:linear-gradient(135deg,#2b465a99,#15273d99);box-shadow:0 0 8px #6fd0e855;transform:rotate(45deg)}
#viewCompass::after{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:#ffe08a;box-shadow:0 0 6px #ffe08a}
#boardCanvas.turning{cursor:grabbing}
#boardScreen.compact.short #viewCompass{display:none}
#boardScreen:not(.compact) #cmdBar{max-width:calc(100vw - 260px)}
#boardScreen:not(.compact) #phaseLabel{white-space:normal;max-width:180px}
#boardScreen.compact:not(.short) #cmdBar{left:6px;grid-template-columns:88px repeat(3,minmax(0,1fr))}
#boardScreen.compact:not(.short) #actHere{grid-column:2}
#boardScreen.compact:not(.short) #cancelSel{grid-column:3}
#boardScreen.compact:not(.short) #endTurn{grid-column:4}
#boardScreen.compact:not(.short) #cmdBar>.cb-b,#boardScreen.compact:not(.short) #endTurn{min-height:44px;padding:5px 3px;line-height:1.3}
#boardScreen.compact:not(.short) #phaseLabel{padding-right:100px;min-height:44px;display:flex;align-items:center;font-size:11px;line-height:1.3;letter-spacing:.02em}
#boardScreen.compact:not(.short) #boardView{position:absolute;top:6px;right:6px}
#boardScreen.compact:not(.short) #skills{bottom:120px;max-height:min(270px,calc(100% - 368px));overflow-y:auto;overscroll-behavior:contain}
#boardScreen.compact:not(.short) #unitInfo,#boardScreen.compact:not(.short) #cmdMenu.sheet{bottom:120px}
#boardScreen.compact #boardView button{min-width:44px;width:44px;min-height:44px;font-size:26px}
#boardScreen.compact.short #cmdBar{grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,88px)) 92px}
#boardScreen.compact.short #boardView{grid-column:-2}
.skill.spirit.fallen{border-color:#a7789055;background:#271d2c;color:#bca5bc;opacity:.8}
.skill.spirit.fallen .sk-art{filter:grayscale(.8);opacity:.65}
.skill.spirit.fallen .sk-d{color:#e8b0bb}
#boardScreen.compact .skill.spirit.fallen .sk-d{display:block;font-size:10px;line-height:1.4}
.cm-sp.fallen{border-color:#a7789055;background:#271d2c}
.cm-sp.fallen .cm-spn small{color:#e8b0bb}
/* 待機の向きは戦場の斜め4方向と同じ配置で選ぶ。 */
#cmdMenu.facing{width:278px;padding:12px;overflow-y:auto}
#cmdMenu.facing .cm-desc{display:none}
.cm-facing-help{margin:0 0 10px;font-size:11px;line-height:1.6;color:#bccce1}
.cm-facing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cm-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;padding:8px;border:1px solid #526680;border-radius:10px;background:linear-gradient(145deg,#223653,#112036);color:#edf8ff;transition:background .15s,border-color .15s}
.cm-face b{font:700 28px/1 sans-serif;color:#9fe7f5}
.cm-face span{font-size:13px;line-height:1.25;letter-spacing:.08em}
.cm-face small{font-size:9px;line-height:1.2;color:#aabed5}
.cm-face.current{border-color:#98deef;background:linear-gradient(145deg,#294660,#173246)}
.cm-face:hover,.cm-face:focus-visible{outline:2px solid #f4d58e;outline-offset:2px;border-color:#f4d58e;background:#354865}
#cmdMenu.facing [data-k=back]{justify-content:center;margin-top:8px;min-height:36px;background:#ffffff0a}
.cm-facing-keys{margin:8px 0 0;font:10px/1.4 var(--gothic);color:#99aec7;text-align:center}
.side-ally .ui-facing{color:#8fe8ff}
.side-ally .ui-facing b{border-color:#8fe8ff}
.cm-combo{display:grid;grid-template-columns:1fr auto;gap:4px;margin:4px 2px 6px;padding:8px;border:1px solid #77d7e355;border-radius:8px;background:#65c4e510;font:12px/1.5 var(--gothic);color:#cbeef5}
.cm-combo b{color:#a3efff;font-size:13px}
.cm-combo small{grid-column:1/-1;font-size:10px;color:#b6c9dd}
#cmdMenu.followup .cm-b{min-height:44px}
.cm-route-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0}
.cm-route-tabs button{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:44px;padding:7px 2px;border:1px solid #526680;border-radius:8px;background:#ffffff08;font:12px/1.4 var(--gothic);color:#d6e6f7}
.cm-route-tabs button small{font-size:10px;color:#a5bbd0}
.cm-route-tabs button[aria-pressed=true]{border-color:#94dfed;background:#5dc4e022;color:#adf2ff}
.cm-route-tabs button:focus-visible{outline:2px solid #f4d58e;outline-offset:2px}
#boardScreen.compact #cmdMenu.sheet .cm-route-tabs{grid-column:1/-1}
.r-equipment{border-color:#86cee4!important}
.bond-route{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#ffffff03}
.bond-route h4{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin:0 0 6px;color:var(--c);font-size:13px}
.bond-route h4 small{font:11px/1.5 var(--gothic);color:#bed0e1}
.bond-route>p{margin:0 0 5px;font-size:10.5px;line-height:1.6;color:#aebfd2}
.cm-spirit-choice b{color:#fff1d4}
#boardScreen.compact #cmdMenu.sheet .cm-combo{grid-column:1/-1;margin:0}
#boardScreen.compact #cmdMenu.sheet.followup{grid-template-columns:repeat(2,minmax(0,1fr))}
#boardScreen.compact #cmdMenu.sheet.facing{display:flex;flex-direction:column;width:auto;gap:0;padding:10px 12px}
#boardScreen.compact #cmdMenu.sheet.facing .cm-face{min-height:60px;padding:6px}
#boardScreen.compact #cmdMenu.sheet.facing .cm-facing-grid{gap:6px}
#boardScreen.compact #cmdMenu.sheet.facing [data-k=back]{flex-shrink:0}
@media(max-height:500px){
  #boardScreen.compact #cmdMenu.sheet.facing{padding:8px 10px;bottom:10px;max-height:calc(100% - 80px)}
  #boardScreen.compact:has(#cmdMenu.facing:not(.hidden)) #cmdBar{display:none}
  #boardScreen.compact:has(#cmdMenu.facing:not(.hidden)) #missionBox{visibility:hidden}
  #boardScreen.compact.short #cmdMenu.sheet.facing{left:auto;right:10px;width:306px}
  #boardScreen.compact #cmdMenu.sheet.facing .cm-head{margin-bottom:4px;padding-bottom:4px}
  #boardScreen.compact #cmdMenu.sheet.facing .cm-face{min-height:50px;flex-direction:row;gap:6px}
  #boardScreen.compact #cmdMenu.sheet.facing .cm-face b{font-size:23px}
  #boardScreen.compact #cmdMenu.sheet.facing .cm-face small{display:none}
  #boardScreen.compact #cmdMenu.sheet.facing .cm-face.current span::after{content:' 現在';font-size:9px;color:#afdce8}
  #boardScreen.compact #cmdMenu.sheet.facing .cm-facing-help{margin-bottom:6px;font-size:10px}
  #boardScreen.compact #cmdMenu.sheet.facing .cm-facing-keys{display:none}
}

/* 精霊が多いとき：右側の欄を詰めて、ミッションと札が重ならないようにする（board.js の fitSide） */
#boardScreen.crowded #renoirBox,#boardScreen.crowded #renoirCanvas{width:84px;height:84px}
#boardScreen.crowded .rn-label{display:none}
#boardScreen.crowded #boardSide{gap:6px}
#skills{overscroll-behavior:contain;scrollbar-width:thin}
#skills.dense{gap:4px;overflow-y:auto}
#skills.dense .skill.spirit{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 6px;min-height:36px;padding:4px 9px 4px 38px}
#skills.dense .skill.spirit .sk-art{top:3px;width:26px;height:30px}
#skills.dense .skill.spirit .sk-n{font-size:13px}
#skills.dense .skill.spirit .sk-c{font-size:10.5px;white-space:nowrap}
#skills.dense .skill.spirit .sk-d{display:none}
#skills.dense .skill.spirit.armed .sk-d,#skills.dense .skill.spirit.fallen .sk-d{display:block;flex-basis:100%;font-size:10px;line-height:1.3}
#boardScreen.fitting #skills .skill,#boardScreen.fitting #boardSide *{transition:none!important}

#boardScreen.compact .enc-goal{display:none}
#missionBox .mb-goal span{color:#ffd9a8;font-weight:700}
#missionBox .mb-goal i{border-color:#ffd9a8}