/* レイアウト：横向き1画面。木版画ポスターのように色面を大きく分ける */
:root {
  --ink: #15101c;
  --paper: #f5ecd6;
  --paper-dim: #d8ccb0;
  --persimmon: #e4552a;
  --gold: #f6c445;
  --crimson: #f03a2e;
  --display: "Dela Gothic One", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  color-scheme: dark;
}
/* manipulation：2回タップでの拡大を止める（スクロールはできる） */
html, body { height: 100%; background: var(--ink); overscroll-behavior: none; touch-action: manipulation; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* dvh：スマホのアドレスバーを除いた、今見えている高さ */
#app { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
.screen { position: absolute; inset: 0; }

/* タイトル */
#screen-title {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  background: var(--persimmon);
  overflow: hidden;
}
#screen-title[hidden] { display: none; }
.title-art { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 5vh; padding-left: max(5vw, env(safe-area-inset-left, 0px)); }
/* 山の上に並ぶキャラたち（main.js の drawTitleCast が描く） */
#title-cast { position: absolute; left: 0; bottom: 0; width: 100%; height: 58%; pointer-events: none; }
.title-sun {
  position: absolute; width: 110vh; height: 110vh; border-radius: 50%;
  background: var(--gold); left: -14vh; top: -8vh;
}
.title-mountain {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: var(--ink);
  clip-path: polygon(0 62%, 14% 28%, 26% 58%, 44% 8%, 60% 54%, 76% 26%, 100% 66%, 100% 100%, 0 100%);
}
.logo { position: relative; margin: 0; font-family: var(--display); font-weight: 400; line-height: .95; font-size: min(34vh, 21vw); color: var(--ink); letter-spacing: -.03em; }
.logo-sub { position: relative; font-weight: 900; font-size: clamp(13px, 3.2vh, 24px); letter-spacing: .34em; color: var(--ink); margin-top: 1.5vh; }
.tagline { position: relative; font-weight: 700; font-size: clamp(12px, 3vh, 20px); margin: 1vh 0 8vh; color: var(--ink); }
.title-menu {
  background: var(--ink); min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.8vh;
  padding-block: 3vh; padding-left: 4vw; padding-right: max(4vw, env(safe-area-inset-right, 0px));
  overflow-y: auto;
}
.mode {
  display: grid; grid-template-columns: 1fr; text-align: left; padding: 1.5vh 18px;
  border: 0; border-left: 8px solid var(--persimmon); background: #241c2d;
  transition: transform .08s, background .08s;
}
.mode:hover, .mode:focus-visible { background: #352a42; transform: translateX(6px); }
.mode:active { transform: translateX(10px); }
.mode b { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 5.6vh, 34px); line-height: 1.2; }
.mode span { font-size: clamp(11px, 2.7vh, 15px); color: var(--paper-dim); }
.mode[disabled] { opacity: .5; border-left-color: #6d6377; cursor: not-allowed; transform: none; }
.title-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .6vh; }
.chip { background: transparent; border: 2px solid #4b3f57; padding: 6px 14px; font-size: clamp(12px, 2.8vh, 15px); font-weight: 700; color: var(--paper); }
.chip:hover { border-color: var(--paper); }
.chip.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* キャラ選択 */
#screen-select {
  background: var(--ink); display: flex; flex-direction: column; gap: 2vh;
  padding-block: 2.5vh; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-y: auto;
}
#screen-select[hidden] { display: none; }
.select-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.select-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(18px, 5.6vh, 34px); flex: 1 1 auto; }
#cpu-level { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: clamp(12px, 2.8vh, 15px); }
#cpu-level[hidden] { display: none; }
#char-list { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.char-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border: 0; text-align: left;
  background: var(--card); overflow: hidden; transition: transform .1s;
}
.char-card:hover, .char-card:focus-visible { transform: translateY(-4px); }
.char-card.picked { outline: 5px solid var(--gold); outline-offset: -5px; }
.char-card.picked::after {
  content: "1P"; position: absolute; top: 8px; left: 8px; background: var(--gold); color: var(--ink);
  font-family: var(--display); padding: 2px 10px; font-size: clamp(14px, 3.4vh, 20px);
}
.portrait { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; display: block; }
.char-info { background: var(--ink); margin: 0 6px 6px; padding: 1.2vh 12px; display: grid; gap: .4vh; }
.char-name { font-family: var(--display); font-size: clamp(13px, min(5vh, 1.95vw), 30px); line-height: 1.15; white-space: nowrap; }
.char-title { font-size: clamp(11px, 2.6vh, 14px); font-weight: 700; color: var(--gold); }
.char-style { margin: 0; font-size: clamp(11px, 2.6vh, 14px); color: var(--paper-dim); line-height: 1.4; }
.char-stats { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; margin: 0; font-size: clamp(10px, 2.4vh, 13px); }
.char-stats dt { font-weight: 700; }
.char-stats dd { margin: 0; letter-spacing: .05em; color: var(--gold); }
@media (max-height: 460px), (max-width: 1500px) {
  .char-style { display: none; }
}
/* スマホ横向きなど低い画面では4列にして、強さまで見せる。収まらない分は縦にスクロール */
@media (max-height: 460px) {
  #char-list { flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  .portrait { flex: none; height: 34vh; }
  .char-title { display: none; }
  .char-info { padding: 6px 10px; }
  .char-name { font-size: clamp(14px, 5vh, 22px); }
  .char-stats { font-size: 12px; }
}

/* ステージ選択 */
#screen-stage {
  background: var(--ink); display: flex; flex-direction: column; gap: 2vh;
  padding-block: 2.5vh; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-y: auto;
}
#screen-stage[hidden] { display: none; }
#stage-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 44vw), 1fr)); gap: 10px; }
.stage-card {
  display: flex; flex-direction: column; padding: 0; border: 0; text-align: left; background: #241c2d; overflow: hidden;
  transition: transform .1s;
}
.stage-card:hover, .stage-card:focus-visible { transform: translateY(-3px); outline: 3px solid var(--gold); outline-offset: -3px; }
.stage-card canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: #120d18; }
.stage-name { font-family: var(--display); font-size: clamp(15px, 4.6vh, 20px); padding: 6px 10px 2px; color: var(--paper); }
.stage-note { font-size: 12px; font-weight: 700; color: var(--paper-dim); padding: 0 10px 8px; line-height: 1.4; }
.stage-card.home .stage-name { color: var(--gold); }
#stage-list.no-gimmick .stage-note { text-decoration: line-through; opacity: .5; }
#stage-list.no-gimmick .stage-card.home .stage-note { text-decoration: none; opacity: 1; }

/* 戦闘 */
#screen-battle { background: #000; display: flex; align-items: center; justify-content: center; touch-action: none; }
#screen-battle[hidden] { display: none; }
#game { display: block; }
#btn-pause {
  position: absolute; top: calc(var(--canvas-top, 0px) + var(--canvas-h, 100vh) * .135); left: 50%; transform: translateX(-50%);
  width: 44px; height: 36px; background: var(--ink); border: 2px solid var(--paper); z-index: 4; font-weight: 900; font-size: 14px; color: var(--paper);
}
#training-tools { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: clamp(12px, 3vh, 15px); font-weight: 700; }
#training-tools[hidden] { display: none; }
#training-tools select { font: inherit; background: var(--paper); color: var(--ink); border: 0; padding: 3px 6px; }

/* タッチ操作 */
#touch { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; }
@media (pointer: coarse) { #touch { display: block; } }
body.force-touch #touch { display: block; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 46%; height: 72%; pointer-events: auto; touch-action: none; }
#stick-base {
  position: absolute; left: 30%; top: 58%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  border: 3px solid rgba(245,236,214,.55); background: rgba(21,16,28,.3); display: grid; place-items: center;
}
#stick-base.active { border-color: var(--gold); }
#stick-knob { width: 50px; height: 50px; border-radius: 50%; background: rgba(245,236,214,.72); border: 3px solid var(--ink); }
.stick-label {
  position: absolute; font-size: 11px; font-weight: 900; line-height: 1; white-space: nowrap; color: var(--paper);
  text-shadow: 0 0 3px var(--ink), 0 0 3px var(--ink), 0 1px 2px var(--ink); pointer-events: none;
}
.stick-label.up { bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); }
.stick-label.down { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); }
.stick-label.left { right: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
.stick-label.right { left: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
#touch-buttons {
  position: absolute; bottom: max(10px, env(safe-area-inset-bottom, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: repeat(3, var(--bs)); grid-auto-rows: var(--bs); gap: 6px; pointer-events: auto; --bs: clamp(50px, 17vh, 84px);
}
.tbtn {
  border-radius: 50%; border: 3px solid var(--ink); font-family: var(--display); font-size: clamp(15px, 5.4vh, 24px); color: var(--ink);
  background: rgba(245,236,214,.62); touch-action: none; padding: 0; line-height: 1;
}
.tbtn.down { transform: scale(.92); filter: brightness(.72); }
.tbtn.sp { background: rgba(228,85,42,.72); color: var(--paper); }
.tbtn.th { background: rgba(190,180,210,.62); }
.tbtn.word { font-size: clamp(11px, 3.6vh, 15px); }
.tbtn.jp { background: rgba(92,158,226,.8); grid-column: 2; }
.tbtn.gd { background: rgba(72,184,140,.8); }
.guide-hint { outline: 4px solid var(--gold); outline-offset: 2px; animation: guide-pulse .7s infinite alternate; }
#stick-base.guide-hint { border-radius: 50%; }
@keyframes guide-pulse { to { outline-color: rgba(246,196,69,.25); } }
@media (prefers-reduced-motion: reduce) { .guide-hint { animation: none; } }

/* 操作ガイド */
#guide {
  position: absolute; top: calc(var(--canvas-top, 0px) + var(--canvas-h, 100vh) * .135 + 42px); left: 50%; transform: translateX(-50%);
  width: min(560px, 70%); z-index: 4; background: rgba(21,16,28,.92); border: 2px solid var(--gold); padding: 6px 12px; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
}
#guide[hidden] { display: none; }
#guide.ok { border-color: #5fe0a0; }
.guide-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#guide-count { font-size: 11px; font-weight: 700; color: var(--gold); white-space: nowrap; }
#guide-title { font-family: var(--display); font-weight: 400; font-size: clamp(14px, 4.4vh, 22px); }
#guide.ok #guide-title { color: #5fe0a0; }
#guide-text { grid-column: 1; margin: 0; font-weight: 700; font-size: clamp(12px, 3.5vh, 16px); line-height: 1.35; }
#guide-skip { grid-column: 2; grid-row: 1 / span 2; pointer-events: auto; padding: 4px 8px; font-size: 11px; }
.tbtn.su { background: rgba(70,60,84,.68); color: var(--paper-dim); }
.tbtn.su.ready { background: var(--gold); color: var(--ink); animation: throb .6s infinite alternate; }
@keyframes throb { to { box-shadow: 0 0 0 6px rgba(246,196,69,.5); } }
@media (prefers-reduced-motion: reduce) { .tbtn.su.ready { animation: none; } }

/* 重ねる画面 */
.overlay {
  position: absolute; inset: 0; z-index: 10; background: rgba(21,16,28,.88); display: flex; align-items: center; justify-content: center;
  padding-block: 2vh; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.overlay[hidden] { display: none; }
.panel { width: min(760px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 2vh; background: var(--ink); border: 3px solid var(--paper); padding: 2.6vh 20px; }
.panel h2, .panel h3 { margin: 0; font-family: var(--display); font-weight: 400; }
.panel h2 { font-size: clamp(22px, 8vh, 48px); }
.panel h3 { font-size: clamp(14px, 4vh, 22px); color: var(--gold); }
.panel-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.action { background: var(--persimmon); border: 0; padding: 1.2vh 18px; font-weight: 900; font-size: clamp(13px, 3.4vh, 18px); color: var(--paper); }
.action.sub { background: #352a42; }
.action:hover { filter: brightness(1.12); }
table { width: 100%; border-collapse: collapse; font-size: clamp(12px, 3vh, 16px); font-variant-numeric: tabular-nums; }
th, td { padding: .7vh 8px; text-align: left; border-bottom: 1px solid #3b3145; }
th { color: var(--gold); }
.howto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; font-size: clamp(12px, 2.9vh, 15px); line-height: 1.55; }
.howto-grid p, .howto-grid ul { margin: 0; }
.howto-grid ul { padding-left: 1.1em; }
kbd { font-family: inherit; font-weight: 700; color: var(--gold); }
.only-touch { display: none; }
@media (pointer: coarse) {
  ul.only-touch, p.only-touch { display: block; }
  .only-keys { display: none; }
}
.controls-short { margin: 0; font-size: clamp(12px, 3vh, 15px); line-height: 1.5; }
#fullhint p, #fullhint ol { margin: 0; font-size: clamp(13px, 3.4vh, 16px); line-height: 1.6; }
#fullhint ol { padding-left: 1.4em; }

/* オンライン */
.online-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.online-grid[hidden] { display: none; }
.online-col { display: grid; gap: 1.2vh; align-content: start; min-width: 0; font-size: clamp(12px, 2.9vh, 15px); }
.online-col p, .online-wait p { margin: 0; }
.room-join { display: flex; gap: 8px; min-width: 0; }
#room-input {
  flex: 1 1 auto; min-width: 0; width: 100%; font-family: var(--display); font-size: clamp(18px, 5.6vh, 28px); letter-spacing: .12em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: 0; padding: 4px 10px; -webkit-user-select: text; user-select: text;
}
.online-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: clamp(13px, 3.2vh, 16px); font-weight: 700; }
.online-wait[hidden] { display: none; }
.room-code { font-family: var(--display); font-size: clamp(38px, 15vh, 76px); line-height: 1; letter-spacing: .1em; color: var(--gold); -webkit-user-select: text; user-select: text; }
.online-error { margin: 0; color: #ff8a7a; font-weight: 700; font-size: clamp(12px, 3vh, 15px); }

/* 縦持ちの案内 */
#rotate { display: none; position: absolute; inset: 0; z-index: 30; background: var(--persimmon); color: var(--ink); align-items: center; justify-content: center; flex-direction: column; gap: 16px; text-align: center; padding-inline: 24px; }
#rotate b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.3; }
#rotate p { margin: 0; font-weight: 700; }
@media (orientation: portrait) and (pointer: coarse) {
  body:not(.rotate-skip) #rotate { display: flex; }
}