/* 絵獣ドローバトル 筆神 — battle mockup */
:root {
  --gold: #d4af37;
  --gold-light: #f6e3a1;
  --gold-dark: #8a6d1f;
  --parchment: #f3e9d2;
  --parchment-dark: #e6d6b8;
  --ink: #2b2117;
  --bg-deep: #131a2b;
  --bg-deep2: #1d2740;
  --hp-good: #4caf50;
  --hp-mid: #e8a93a;
  --hp-bad: #d64530;
  /* 絵獣テーマ追加色 (ロゴv3 と統一) */
  --paper-cream: #fdf6e3;
  --paper-edge:  #ead9b6;
  --sun-yellow:  #ffd966;
  --sun-orange:  #f48b3a;
  --ink-red:     #d83946;
  --pop-cyan:    #4ec3d9;
  --pop-pink:    #f48fb1;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    /* 上部からの太陽光線 (ロゴv3 と同じ意匠) */
    repeating-conic-gradient(from 0deg at 50% -20%,
      rgba(248,139,58,.14) 0deg 8deg, transparent 8deg 16deg),
    /* 中央の明るい円 */
    radial-gradient(ellipse at 50% 0%, var(--sun-yellow) 0%, transparent 50%),
    /* 紙の地色 */
    linear-gradient(180deg, var(--paper-cream) 0%, var(--paper-edge) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
.hidden { display: none !important; }

/* ===== top bar ===== */
.topbar {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 10px 16px 6px;
}
#logo { height: 84px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
#logo-text {
  font-family: var(--serif); font-size: 30px; letter-spacing: .12em;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#day-banner {
  font-family: var(--serif); font-size: 15px; padding: 6px 18px;
  border: 1px solid var(--gold-dark); border-radius: 999px;
  background: rgba(0,0,0,.35); color: var(--gold-light); white-space: nowrap;
}
#day-banner.weekend { border-color: var(--gold); box-shadow: 0 0 14px rgba(212,175,55,.45); }

/* ===== battlefield ===== */
#battlefield {
  display: grid; grid-template-columns: 1fr minmax(220px, 420px) 1fr;
  gap: 18px; padding: 8px 22px 28px; max-width: 1280px; margin: 0 auto;
  align-items: start;
}
.center-col { display: flex; flex-direction: column; gap: 10px; align-items: center; padding-top: 30px; }
#vs-mark {
  font-family: var(--serif); font-size: 34px; letter-spacing: .2em; color: var(--gold);
  text-shadow: 0 0 18px rgba(212,175,55,.5);
}
#log-panel {
  width: 100%; height: 380px; overflow-y: auto;
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 3px solid var(--gold-dark); border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(90,60,20,.25), 0 6px 18px rgba(0,0,0,.5);
  padding: 12px 14px; color: var(--ink); font-size: 13px; line-height: 1.75;
}
#log .log-block { margin-bottom: 6px; }
#log .log-block:not(:first-child) { opacity: .82; }   /* 過去ターンはわずかに沈ませ最新を立たせる */
#log .turn-head { font-family: var(--serif); font-weight: bold; border-top: 1px dashed #b09760; margin-top: 6px; padding-top: 6px; }
#log .dmg { color: #a52a1a; font-weight: bold; }
#log .heal { color: #1c7c33; font-weight: bold; }
#log .sys { color: #5a4a8a; }

/* ===== side / card ===== */
.side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.card-frame {
  width: 286px; padding: 7px; border-radius: 16px; position: relative;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 28%, var(--gold) 50%, var(--gold-dark) 78%, var(--gold-light) 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
  transition: transform .35s, box-shadow .35s, filter .35s;
}
.card-frame::before, .card-frame::after {
  content: "◆"; position: absolute; color: var(--gold-light); font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 2;
}
.card-frame::before { top: -2px; left: 50%; transform: translateX(-50%); }
.card-frame::after { bottom: -2px; left: 50%; transform: translateX(-50%); }
.card-frame.active {
  transform: translateY(-10px) scale(1.035);
  box-shadow: 0 0 0 3px rgba(246,227,161,.85), 0 0 34px 8px rgba(212,175,55,.6), 0 14px 34px rgba(0,0,0,.6);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(246,227,161,.85), 0 0 26px 5px rgba(212,175,55,.5), 0 14px 34px rgba(0,0,0,.6); }
  50%     { box-shadow: 0 0 0 3px rgba(246,227,161,1),   0 0 44px 12px rgba(212,175,55,.75), 0 14px 34px rgba(0,0,0,.6); }
}
.card-frame.inactive { filter: saturate(.55) brightness(.8); }
.card {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dark) 100%);
  border-radius: 10px; overflow: hidden; color: var(--ink);
  border: 1px solid rgba(90,60,20,.4);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; color: var(--gold-light);
  background: linear-gradient(180deg, #3a3327, #241f16);
  border-bottom: 2px solid var(--gold-dark);
}
.card-name { font-family: var(--serif); font-size: 15px; font-weight: bold; letter-spacing: .04em; }
.type-chip {
  font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff;
  background: var(--tcolor, #888); border: 1px solid rgba(255,255,255,.5); white-space: nowrap;
}
.card-art {
  position: relative; height: 218px; overflow: hidden;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--tcolor) 78%, #ffffff) 0%, var(--tcolor) 72%);
  border-bottom: 2px solid var(--gold-dark);
}
.card-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  transform: scale(1.07);
}
.env-badge {
  position: absolute; bottom: 8px; right: 8px; font-size: 17px;  /* 顔にかからないよう右下(2026-06-12) */
  background: rgba(0,0,0,.45); border: 1px solid var(--gold); border-radius: 999px;
  padding: 3px 8px; color: #fff;
}
.promo-ribbon {
  position: absolute; top: 8px; left: -34px; transform: rotate(-35deg);
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  color: #241f16; font-weight: bold; font-size: 11px; padding: 3px 38px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); letter-spacing: .15em;
}
.job-line {
  font-size: 11.5px; padding: 5px 10px 2px; color: #5d4a2e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.company-line { font-size: 10.5px; padding: 0 10px; color: #8a7a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-zone { padding: 6px 10px 2px; }
.hp-row { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: bold; margin-bottom: 3px; }
.hp-bar { height: 13px; border-radius: 999px; background: #cdbb97; border: 1px solid #9a8458; overflow: hidden; }
.hp-fill { height: 100%; border-radius: 999px; background: var(--hp-good); transition: width .55s, background .55s; }
.stat-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 7px 10px 6px;
}
.stat-cell { text-align: center; background: rgba(120,90,40,.12); border-radius: 6px; padding: 3px 0; }
.stat-cell .lbl { font-size: 9px; color: #7a6845; display: block; }
.stat-cell .val { font-size: 13px; font-weight: bold; font-family: var(--serif); }
.status-row { min-height: 22px; display: flex; gap: 5px; padding: 0 10px 8px; flex-wrap: wrap; }
.status-chip { font-size: 10px; padding: 2px 8px; border-radius: 999px; color: #fff; background: #7a4f9e; }
.status-chip.burn { background: #d35420; } .status-chip.poison, .status-chip.toxic { background: #7a3fa0; }
.status-chip.paralyze { background: #c9a227; } .status-chip.sleep { background: #5a6a8a; }
.status-chip.freeze { background: #3aa7c9; } .status-chip.confuse { background: #c95a8a; }
.status-chip.buff { background: #3c7d4e; } .status-chip.debuff { background: #8a4a3a; }

/* ===== command panel ===== */
.command-panel {
  width: 286px; border-radius: 12px; padding: 11px;
  background: linear-gradient(180deg, #23202f, #16141f);
  border: 2px solid var(--gold-dark); box-shadow: 0 8px 18px rgba(0,0,0,.45);
}
.command-title { font-family: var(--serif); font-size: 12.5px; color: var(--gold-light); margin-bottom: 8px; letter-spacing: .1em; }
.command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.move-btn {
  position: relative; text-align: left; cursor: pointer; border-radius: 9px;
  border: 1px solid #6b5a2e; padding: 7px 9px 6px; color: var(--parchment);
  background: linear-gradient(180deg, #3a3450, #262238);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  font-family: var(--sans);
}
.move-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 4px 12px rgba(212,175,55,.3); }
.move-btn:active:not(:disabled) { transform: translateY(0); }
.move-btn:disabled { opacity: .38; cursor: not-allowed; }
.move-btn .mv-name { font-size: 12px; font-weight: bold; display: block; }
.move-btn .mv-meta { font-size: 10px; color: #bfb39a; display: flex; gap: 6px; margin-top: 2px; }
.move-btn .eff { position: absolute; top: 5px; right: 7px; font-size: 10px; font-weight: bold; }
.eff.up { color: #ffd76a; } .eff.down { color: #8fa3c9; }
.move-btn.promo { border-color: var(--gold); background: linear-gradient(180deg, #4d3f1d, #2c2410); }
.move-btn.yukyu { border-color: #4e8a5a; background: linear-gradient(180deg, #1f3a28, #142318); }
.wait-note { font-size: 12px; color: #8d86a8; text-align: center; padding: 14px 0 6px; font-family: var(--serif); }

/* ===== overlays ===== */
.overlay {
  position: fixed; inset: 0; background: rgba(8, 10, 20, .82); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.setup-box {
  width: min(680px, 92vw); border-radius: 16px; padding: 30px 34px;
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 4px solid var(--gold); color: var(--ink); text-align: center;
  box-shadow: 0 0 60px rgba(212,175,55,.35);
}
.setup-box h2 { font-family: var(--serif); letter-spacing: .12em; margin-bottom: 18px; }
/* 郵便番号エリア(コンパクト・iPhone収まり優先 2026-06-14) */
.postal-area { margin: 0 0 12px; padding: 7px 10px; background: rgba(255,255,255,.03);
  border: 1px solid #3a4258; border-radius: 8px; font-size: 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.postal-area .postal-label { color: var(--ink); font-weight: 600; }
.postal-area input { width: 4.5em; text-align: center; padding: 2px 6px; margin-left: 4px;
  background: #10141f; color: #ffd; border: 1px solid #4a5068; border-radius: 6px; font-size: 13px; }
.postal-area #postal-info { color: #6b5320; font-size: 11px; }
.postal-area details { width: 100%; font-size: 11px; color: #6b5320; line-height: 1.4;
  margin-top: 2px; text-align: center; }
.postal-area details summary { cursor: pointer; display: inline-block; color: #8a6a20;
  text-decoration: underline; text-decoration-style: dotted; }
.postal-area details[open] summary { margin-bottom: 3px; }
.picker-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.picker { flex: 1; min-width: 250px; text-align: left; }
.picker h3 { font-family: var(--serif); font-size: 14px; margin-bottom: 7px; color: #6b5320; }
.picker select, .picker input[type=text] {
  width: 100%; padding: 9px 10px; border-radius: 8px; border: 2px solid #b09760;
  background: #fffaf0; font-size: 13px; color: var(--ink); margin-bottom: 7px;
}
.picker .kyujin-row { display: flex; gap: 6px; }
.picker .kyujin-row input { flex: 1; margin-bottom: 0; }
.picker .kyujin-row button {
  padding: 0 13px; border-radius: 8px; border: 2px solid var(--gold-dark); cursor: pointer;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); font-weight: bold; color: #41320d;
}
.pick-result { font-size: 11.5px; min-height: 34px; line-height: 1.5; color: #444; padding: 4px 2px; }
.pick-result.ok { color: #1c6b2e; } .pick-result.ng { color: #a52a1a; }
.divider-label { text-align: center; font-size: 11px; color: #8a7a5c; margin: 2px 0 6px; }
.setup-note { font-size: 12px; color: #7a6845; margin: 14px 0 16px; }
.big-btn {
  font-family: var(--serif); font-size: 17px; letter-spacing: .2em; cursor: pointer;
  padding: 12px 46px; border-radius: 999px; border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  color: #341f04; font-weight: bold; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .15s;
}
.big-btn:hover { transform: scale(1.04); }
#winner-text { font-size: 26px; }
#winner-sub { font-size: 13px; color: #6b5320; margin: 10px 0 18px; }

@media (max-width: 900px) {
  #battlefield { grid-template-columns: 1fr; }
  .center-col { order: 3; }
  .side { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
}

/* ===== RPG戦闘演出 ===== */
.card-frame { position: relative; }
.card-frame.focus {
  transform: translateY(-12px) scale(1.13); z-index: 6;
  box-shadow: 0 0 0 3px rgba(246,227,161,.9), 0 0 40px 10px rgba(212,175,55,.55), 0 18px 40px rgba(0,0,0,.65);
}
.card-frame.dimmed { filter: brightness(.5) saturate(.5); transform: scale(.96); }
.card-frame.ko { filter: grayscale(1) brightness(.55); transform: rotate(4deg) translateY(20px); transition: all .8s ease-in; }
@keyframes shakeX {
  0%,100% { translate: 0 0; } 12% { translate: -11px 2px; rotate: -1.2deg; }
  28% { translate: 9px -2px; rotate: 1deg; } 44% { translate: -7px 1px; }
  62% { translate: 5px -1px; } 80% { translate: -3px 0; }
}
.card-frame.shake { animation: shakeX .5s; }
.flash-ov { position: absolute; inset: 0; opacity: .85; animation: flashFade .4s forwards; pointer-events: none; z-index: 3; }
@keyframes flashFade { to { opacity: 0; } }
.dmg-pop {
  position: absolute; top: 30%; left: 50%; z-index: 8; pointer-events: none;
  font-family: var(--serif); font-weight: bold; font-size: 32px; color: #ff5540;
  text-shadow: 0 2px 0 #1a0d05, 0 0 14px rgba(255,80,40,.8);
  animation: popUp 1.15s forwards;
}
.dmg-pop.strong { color: #ffd040; font-size: 40px; }
.dmg-pop.healpop { color: #6dff8a; text-shadow: 0 2px 0 #052a10, 0 0 14px rgba(80,255,140,.7); }
@keyframes popUp {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.5); }
  16% { opacity: 1; transform: translate(-50%, -8px) scale(1.2); }
  68% { opacity: 1; transform: translate(-50%, -26px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(.95); }
}
.msg-box {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(740px, 94vw); min-height: 64px; z-index: 40; cursor: pointer;
  background: linear-gradient(180deg, rgba(18,22,42,.97), rgba(10,13,26,.97));
  border: 2px solid var(--gold); border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(10,13,26,.85), 0 0 30px rgba(212,175,55,.4), 0 10px 26px rgba(0,0,0,.6);
  padding: 16px 48px 16px 20px;
  font-family: var(--serif); font-size: 16px; line-height: 1.6; color: #f4ecd8;
}
.msg-box .dmg { color: #ff8a70; } .msg-box .heal { color: #7dff9a; }
.msg-box .adv { position: absolute; right: 16px; bottom: 8px; color: var(--gold); animation: blinkAdv 1s infinite; }
@keyframes blinkAdv { 50% { opacity: .15; } }

/* ===== パーティ編成・交代 ===== */
.party-list { display: flex; flex-direction: column; gap: 5px; min-height: 96px; margin-top: 7px; }
.party-slot {
  display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  background: #fffaf0; border: 2px solid #b09760; border-radius: 8px; font-size: 12px;
}
.party-slot .slot-type { font-size: 10px; color: #fff; padding: 1px 8px; border-radius: 999px; background: var(--tcolor, #888); white-space: nowrap; }
.party-slot .slot-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; }
.party-slot .slot-prev { cursor: pointer; border: 1px solid var(--gold-dark); background: transparent; color: var(--gold-light); border-radius: 6px; padding: 2px 8px; font-size: 14px; line-height: 1; }
.party-slot .slot-prev:hover { background: rgba(212,175,55,.15); }
.party-slot .slot-up,
.party-slot .slot-down {
  cursor: pointer; border: 1px solid var(--gold-dark); background: transparent;
  color: var(--gold-light); border-radius: 6px; padding: 2px 7px; font-size: 12px; line-height: 1;
}
.party-slot .slot-up:hover:not(:disabled),
.party-slot .slot-down:hover:not(:disabled) { background: rgba(212,175,55,.15); }
.party-slot .slot-up:disabled,
.party-slot .slot-down:disabled { opacity: .3; cursor: not-allowed; }
.party-empty { color: #9a8a68; font-size: 11px; border: 2px dashed #c9b88f; border-radius: 8px; padding: 7px; text-align: center; }
.bench-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.bench-chip {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px; color: #e8dec2;
  background: #2c2840; border: 1px solid #6b5a2e;
}
.bench-chip.now { border-color: var(--gold); color: var(--gold-light); box-shadow: 0 0 8px rgba(212,175,55,.4); }
.bench-chip.dead { opacity: .4; text-decoration: line-through; }
.move-btn.switch { border-color: #4e7a8a; background: linear-gradient(180deg, #1f3340, #142028); }
.move-btn.cancel { border-color: #8a4e4e; background: linear-gradient(180deg, #402424, #281414); text-align: center; }
.card-art img.real { object-fit: cover; object-position: center 10%; transform: none; }


/* ===== タイトル画面 ===== */
#title-screen {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding-bottom: 150px;
  cursor: pointer; touch-action: manipulation;
  /* 絵獣テーマ: 紙白+上部からの太陽光線 (ロゴv3 と同じ意匠) */
  background:
    repeating-conic-gradient(from 0deg at 50% -15%,
      rgba(248,139,58,.18) 0deg 8deg, transparent 8deg 16deg),
    radial-gradient(ellipse at 50% -5%, var(--sun-yellow) 0%, transparent 55%),
    linear-gradient(180deg, var(--paper-cream) 0%, var(--paper-edge) 100%);
  transition: opacity .7s ease;
}
#title-screen.fade-out { opacity: 0; pointer-events: none; }
#ts-logo {
  width: min(560px, 82vw); max-height: 52vh; object-fit: contain;
  filter: drop-shadow(0 10px 34px rgba(40,18,4,.45)) drop-shadow(0 0 32px rgba(248,139,58,.45));
  animation: tsFloat 4.2s ease-in-out infinite;
}
@keyframes tsFloat { 50% { transform: translateY(-10px); } }
#ts-press {
  font-family: var(--serif); font-size: 15px; letter-spacing: .34em;
  color: var(--gold-light); animation: blinkAdv 1.5s infinite; cursor: pointer;
}
#ts-menu { display: flex; flex-direction: column; gap: 13px; align-items: center; animation: fadeUp .5s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
.big-btn.ghost {
  background: transparent; color: #8d86a8; border-color: #443f5c;
  cursor: not-allowed; box-shadow: none; font-size: 13px; padding: 9px 30px;
}
.big-btn.ghost:hover { transform: none; }
.ts-frieze { position: absolute; bottom: 56px; display: flex; gap: 7px; max-width: 96vw; }
.ts-frieze img {
  height: 60px; width: 60px; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--gold-dark); box-shadow: 0 4px 10px rgba(0,0,0,.5);
  animation: tsBob 2.4s ease-in-out infinite;
}
.ts-frieze img:nth-child(odd) { animation-delay: 1.2s; }
@keyframes tsBob { 50% { transform: translateY(-7px); } }
.ts-footer { position: absolute; bottom: 16px; font-size: 11px; color: #6b5320; letter-spacing: .08em;
  left: 0; right: 0; padding: 0 16px; text-align: center; box-sizing: border-box;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); line-height: 1.7; }
.sparkle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 8px rgba(246,227,161,.9);
  opacity: 0; animation: spark 4s linear infinite; pointer-events: none;
}
@keyframes spark {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-110px) scale(1.15); }
}

/* ===== 属性エフェクト(AE製・透過WebM) ===== */
.fx-ov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 4; pointer-events: none; }

/* 技の効果説明 */
.move-btn .mv-desc { display: block; font-size: 9.5px; color: #9d94b8; margin-top: 2px; line-height: 1.4; white-space: normal; }
.move-btn.promo .mv-desc { color: #c9b489; }


/* ===== スマホ向け修正(2026-06-12) ===== */
@media (max-width: 740px) {
  body { padding: 0; min-height: 100vh; }
  #setup.overlay { align-items: flex-start; padding: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .setup-box { padding: 12px 12px; max-height: none; }
  .setup-box h2 { font-size: 16px; margin-bottom: 10px; letter-spacing: .08em; }
  .picker-row { gap: 10px; flex-direction: column; }
  .picker { min-width: 0; text-align: center; }
  .picker h3 { text-align: center; font-size: 13px; margin-bottom: 5px; }
  .setup-note { text-align: center; padding: 0 8px; }
  .pick-result { text-align: center; }
  #setup .big-btn { font-size: 14px; padding: 10px 24px; letter-spacing: .08em; margin-top: 8px; }
  /* 郵便番号はコンパクト化(iPhone収まり) */
  .postal-area { margin-bottom: 8px; padding: 5px 8px; font-size: 11px; gap: 5px; }
  .postal-area .postal-label { font-size: 11.5px; }
  .postal-area input { width: 4em; padding: 1px 5px; font-size: 12.5px; }
  .postal-area #postal-info { font-size: 10px; }
}
/* セットアップ2画面化のステッパー(PC/スマホ共通: 2026-06-14) */
body.m-setup-step1 .picker[data-pside="1"] { display: none; }
body.m-setup-step2 .picker[data-pside="0"] { display: none; }
body:not(.m-setup-step1):not(.m-setup-step2) #setup-stepper { display: none; }
/* 生徒モード(2026-06-15): 自分側ではプリセット選択UIを非表示にし、求人番号入力を強制 */
body.student-mode .picker[data-pside="0"] .divider-label,
body.student-mode .picker[data-pside="0"] select#pick0,
body.student-mode .picker[data-pside="0"] #add-btn0 { display: none !important; }
#setup-stepper { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
#setup-stepper button { font-family: var(--serif); font-size: 14px; padding: 10px 22px; border-radius: 999px;
  border: 2px solid var(--gold-dark); cursor: pointer; background: linear-gradient(180deg,var(--gold-light),var(--gold));
  color: #41320d; font-weight: bold; letter-spacing: .08em; }
#setup-stepper button.ghost { background: transparent; color: var(--gold); }
#setup-stepper .step-dots { align-self: center; color: var(--gold-dark); font-size: 12px; }
/* mob-strip に自分の数値ミニ表示行を追加 */
.mob-strip-stats { display: none; }
.mob-strip.mine .mob-strip-stats { display: flex; gap: 8px; font-size: 11px; color: #9aa3b5; margin-top: 4px; }
.mob-strip.mine .mob-strip-stats b { color: #ffd76a; font-weight: 700; }
.mob-strip { flex-wrap: wrap; }
.mob-strip .ms-line1 { display: flex; align-items: center; gap: 8px; width: 100%; }


/* ===== スマホ: 幅を画面に合わせて中央配置(2026-06-12 続) ===== */
@media (max-width: 740px) {
  /* カードは固定幅のまま中央寄せ(幅を広げると不恰好)。コマンドパネルだけ画面幅にフィット */
  .side { width: 100%; align-items: center; }
  .command-panel { width: 100% !important; max-width: 100%; box-sizing: border-box; padding: 9px; }
  .command-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bench-row { margin-bottom: 6px; }
  /* iPhoneの実視領域(~650px)に収めるため低背化。説明文は2行まで */
  .move-btn { padding: 7px 9px 6px; min-height: 46px; }
  .move-btn .mv-name { font-size: 12.5px; }
  .move-btn .mv-meta { font-size: 10px; flex-wrap: wrap; }
  .move-btn .mv-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 9px; line-height: 1.35; }
  .mob-strip { box-sizing: border-box; width: 100%; }
  .mob-strip-stats { flex-wrap: wrap; justify-content: space-between; }
}

/* 絵獣ドローバトル 筆神: 編成画面のジョブクエスト固有UIを非表示(2026-06-17)
   求人番号入力欄/プリセット選択/郵便番号エリア/おまかせ編成ボタン/setup-note を消し、
   残るのは「📸 絵を撮って召喚」 ボタンとパーティリストだけ */
.picker .kyujin-row,
.picker .divider-label,
.picker .pick-result,
.picker .omakase-btn,
#postal-area,
.setup-note { display: none !important; }