/* P7b: mobile / touch adaptations. Loaded after the page CSS. No images: all chrome is CSS. */

html { -webkit-text-size-adjust: 100%; }
button, label, select, input { touch-action: manipulation; }
#cv, #stage, #duel { -webkit-touch-callout: none; }
#cv { touch-action: none; }
.mobile-only { display: none; }
html.ccz-coarse .mobile-only { display: inline-block; }
body.campaign, body.playing { overscroll-behavior: none; }

/* ---- portrait hint (phone) ---- */
.ccz-rotate {
  position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(8, 7, 5, .82); backdrop-filter: blur(2px);
  color: #efe4c8; font: 15px/1.6 system-ui, "Noto Sans CJK SC", sans-serif;
}
.ccz-rotate-card {
  width: min(340px, 100%); padding: 22px 20px 18px; text-align: center;
  border: 1px solid #6d5830; border-radius: 10px; background: linear-gradient(180deg, #2b2418, #17130d);
  box-shadow: 0 18px 60px #000;
}
.ccz-rotate-card b { color: #f3d792; font-size: 19px; letter-spacing: .08em; }
.ccz-rotate-card p { color: #b8a98a; font-size: 13px; margin: 8px 0 16px; }
.ccz-rotate-card button {
  font: inherit; color: #fff3cf; background: linear-gradient(#8a6a2e, #5b421b); border: 1px solid #c9a456;
  border-radius: 5px; padding: 9px 22px; min-height: 40px;
}
.ccz-rotate-icon {
  width: 54px; height: 34px; margin: 0 auto 12px; border: 3px solid #d8b45c; border-radius: 7px;
  position: relative; transform: rotate(90deg); animation: ccz-rotate 2.2s ease-in-out infinite;
}
.ccz-rotate-icon::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px;
  margin-left: -5px; border-radius: 50%; background: #d8b45c;
}
@keyframes ccz-rotate { 0%, 40% { transform: rotate(90deg); } 70%, 100% { transform: rotate(0deg); } }

/* ---- touch targets / dialog rows ---- */
html.ccz-coarse button { min-height: 32px; }
html.ccz-coarse .w32-x { width: 28px; height: 28px; font-size: 17px; line-height: 24px; }
html.ccz-coarse .w32-btn { min-height: 26px; }
html.ccz-coarse .w32-tabbar button { height: 28px; padding: 4px 10px; font-size: 13px; }
html.ccz-coarse .w32-list td { height: auto; padding: 6px 5px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
html.ccz-coarse .w32-list th { padding: 3px 5px; }
html.ccz-coarse .ccz-save-list td { height: auto; padding: 8px 5px; font-size: 13px; line-height: 1.3; }
html.ccz-coarse .ccz-save-foot button, html.ccz-coarse .ccz-debug button { height: 32px; min-width: 54px; }
html.ccz-coarse #menu button { min-height: 42px; font-size: 16px; }
html.ccz-coarse #toolbar { height: auto; padding: 3px 6px; overflow-x: auto; }
html.ccz-coarse #toolbar button { width: 34px; height: 36px; flex: none; }
html.ccz-coarse #camp button { width: 52px; height: 52px; background-size: 52px 52px; }

/* ---- small viewport layout ---- */
@media (max-width: 760px) {
  .ccz-import { padding: 8px; }
  .ccz-import-card { max-height: calc(100dvh - 16px); padding: 20px 14px 14px; }
  .ccz-import-actions { gap: 7px; }
  .ccz-import button { min-height: 40px; }
  .ccz-import-foot { flex-direction: column; align-items: flex-start; }

  /* title */
  #titleWrap { width: 100%; margin: 0; box-shadow: none; }
  #titleStage { aspect-ratio: 640/400; }
  #titleDiff { flex-wrap: wrap; gap: 6px; padding: 5px 8px; }
  #titleDiff #diffHint { width: 100%; line-height: 1.35; }
  #titleMenu { gap: 5px; padding: 8px; }
  #titleMenu button { height: 38px; font-size: 13px; }
  #titleFoot { flex-wrap: wrap; gap: 6px 12px; padding: 6px 8px; }
  #titleFoot .link { margin-left: 0; }
  #skipOpen { right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); }

  /* campaign header / stage */
  body.campaign header { height: auto; min-height: 34px; flex-wrap: nowrap; overflow-x: auto; gap: 7px; padding: 4px 6px; font-size: 12px; }
  body.campaign header strong { display: none; }
  body.campaign header #status { white-space: nowrap; }
  body.campaign header #bgm { display: none; }
  body.campaign #wrap { flex-direction: column; gap: 4px; padding: 4px; }
  #stage { max-width: 100%; }
  #debug { display: none; }
  #dlg { left: 6px; right: 6px; bottom: 6px; gap: 6px; padding: 6px 8px; font-size: calc(15px / var(--ztext, 1)); }
  #dlg img { width: calc(64px / var(--ztext, 1)); height: calc(72px / var(--ztext, 1)); }
  #dlgName { font-size: calc(15px / var(--ztext, 1)); }
  #dlgText { line-height: 1.35; }
  #choice { left: 8px; right: 8px; top: 18%; padding: 6px; }
  #choice button { font-size: calc(15px / var(--ztext, 1)); padding: calc(8px / var(--ztext, 1)) calc(10px / var(--ztext, 1)); }
  #place { left: 8px; top: 8px; padding: calc(3px / var(--ztext, 1)) calc(12px / var(--ztext, 1)); font-size: calc(16px / var(--ztext, 1)); }
  #center { font-size: calc(17px / var(--ztext, 1)); padding: 20px; }
  #center.box { inset: auto 8px; top: 20%; min-height: 90px; }
  #center.chapter { font-size: calc(26px / var(--ztext, 1)); }
  #mapText { left: 12px; right: 12px; bottom: 10px; font-size: calc(15px / var(--ztext, 1)); }
  #next { font-size: calc(18px / var(--ztext, 1)); }
  #next a, #next button { font-size: calc(18px / var(--ztext, 1)); padding: calc(7px / var(--ztext, 1)) calc(22px / var(--ztext, 1)); }
  #tipName { font-size: calc(13px / var(--ztext, 1)); padding: calc(2px / var(--ztext, 1)) calc(7px / var(--ztext, 1)); }
  #endingTitle { font-size: calc(24px / var(--ztext, 1)); }
  #endingBtns button { font-size: calc(15px / var(--ztext, 1)); min-height: 36px; }

  /* battle page */
  body.playing header { position: sticky; top: 0; z-index: 15; }
  body.playing header strong { display: none; }
  body.playing #info { display: none; }
  body.playing header label { font-size: 11px; }
  body.playing .viewer { display: none; }
  #hud { gap: 6px; flex-wrap: nowrap; }
  #endTurn { min-height: 30px; padding: 2px 8px; }
  body.has-panel #wrap { bottom: 112px; }
  #panel { height: 102px; padding: 4px 6px; font-size: 11px; }
  #panel h3 { font-size: 12px; margin-bottom: 2px; }
  #panel .card { margin: 3px 0; padding: 4px; gap: 5px; }
  #panel .card img { width: 34px; height: 44px; }
  #panel .vic { display: none; }
  #panel #log { font-size: 10px; }
  #menu { max-height: calc(100dvh - 8px); overflow-y: auto; padding: 5px; }
  #menu button { min-width: 96px; padding: 9px 14px; font-size: 15px; }
  body:not(.campaign) #dlg { width: calc(100vw - 12px); left: 6px; right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); transform: none; padding: 8px; min-height: 80px; }
  body:not(.campaign) #dlg img { width: 48px; height: 60px; }
  body:not(.campaign) #dlgText { font-size: 14px; }
  body:not(.campaign) #dlgOpts button { font-size: 15px; padding: 9px 12px; }
  #banner { font-size: 20px; padding: 10px 26px; }
  #resultTitle { font-size: 44px; letter-spacing: 8px; }
  #resultText { font-size: 15px; padding: 0 12px; text-align: center; }
  #minimap { right: 6px; top: 6px; }
  #minimap canvas { width: 86px; }
  #duel { padding: 0 4px 132px; gap: 4vw; }
  .duel-fighter { width: 76px; }
  .duel-name { font-size: 13px; }
  .duel-sprite { width: 62px; height: 62px; background-size: 62px auto !important; }
  .duel-hp, .duel-sp { width: 74px; }
  .duel-vs { font-size: 14px; letter-spacing: 3px; }

  /* CczHelper save/load + debug windows */
  .ccz-save { min-width: 0; width: calc(100vw - 10px); max-height: calc(100dvh - 10px); }
  .ccz-save-list { height: auto; max-height: calc(100dvh - 150px); margin: 5px; }
  .ccz-save-foot { margin: 0 5px 5px; gap: 5px; }
  .ccz-debug { min-width: 0; width: calc(100vw - 12px); }
  #layer { padding: 4px; overflow: hidden; }
  .w32 { max-width: calc(100vw - 8px); }
}

@media (max-height: 520px) and (pointer: coarse) {
  body.campaign header { position: sticky; top: 0; z-index: 15; }
  #dlg { min-height: 64px; }
  #titleFoot { display: none; }
  #titleDiff { display: none; }
}

@media (orientation: landscape) and (max-height: 430px) {
  #titleMenu button { height: 32px; }
  #titleFoot { padding: 2px 8px; }
  #stage { max-height: calc(100dvh - 46px); }
}