/* ===== v2：3人パーティ・属性・成長まわり ===== */
.own { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 4px; background: var(--oc); color: #fff; font-size: 10px; font-weight: 700; border-radius: 2px; vertical-align: 1px; line-height: 1; }
.el { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border: 1.5px solid var(--ec); color: var(--ec); background: #fff; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: 1px; }
.card[style*="--oc"] { border-bottom: 5px solid var(--oc); }
.card .ctype { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.card.dim { opacity: .55; }
.hand .card.dim:hover { transform: none; }

/* 戦闘：パーティ */
.field { align-items: center; }
.party { display: flex; flex-direction: column; gap: 6px; width: 190px; flex-shrink: 0; }
.member { position: relative; display: flex; gap: 6px; align-items: center; padding: 4px; border: 2px solid transparent; border-left: 4px solid var(--oc); cursor: pointer; background: #0000002a; }
.member .wipe { width: 52px; height: 46px; margin: 0; flex-shrink: 0; }
.member .minfo { flex: 1; min-width: 0; }
.member .pname { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.member .pname small { margin-left: 5px; font-size: 10px; opacity: .8; font-family: var(--f-num); }
.member .hpbar { margin: 2px 0; }
.member .sts { justify-content: flex-start; min-height: 0; margin-top: 2px; }
.member.down { filter: grayscale(1); opacity: .6; }
.member .dc { position: absolute; inset: auto 0 0 0; background: #000b; color: #fff; font-size: 9px; text-align: center; }
.member.tgt { border-color: #efe8d888; border-style: dashed; }
.member.tgt:hover { border-style: solid; border-color: var(--paper); }
.member.hit, .member.guardfx, .member.debufffx { position: relative; }
.member.hit::before, .member.guardfx::before, .member.debufffx::before { content: ''; position: absolute; inset: 0; pointer-events: none; animation: hitFlash .45s ease-out var(--fd, 0ms) both; }
.member.hit::before { background: #ff2a2a; mix-blend-mode: screen; }
.member.guardfx::before { background: #5a9cff; }
.member.debufffx::before { background: #b070ff; }
.member.hit { animation: hitShake .4s linear var(--fd, 0ms) both; }
.ap { display: flex; gap: 3px; height: 9px; }
.ap i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--oc); background: transparent; }
.ap i.on { background: var(--oc); box-shadow: 0 0 0 1px #fff8; }
.intent .to { width: 100%; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.intent .to::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 3px; background: var(--oc); border-radius: 50%; }
.eel { display: flex; gap: 6px; justify-content: center; font-size: 10px; min-height: 18px; align-items: center; }
.eel span { display: inline-flex; align-items: center; }
.eel .r { opacity: .75; }
.teamst { display: flex; justify-content: center; gap: 3px; padding: 2px 0 0; }
.aps { display: flex; gap: 4px; }
.aps span { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; background: var(--oc); color: #fff; font-family: var(--f-num); font-size: 18px; }
.aps span b { font-family: var(--f-body); font-size: 11px; }
.aps span.down { filter: grayscale(1); opacity: .5; }

/* マップ等：パーティ一覧 */
.pstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.pchip { text-align: left; padding: 6px 8px; background: var(--card); border: 2px solid var(--ink); border-left: 5px solid var(--oc); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pchip b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip small { font-size: 10px; }
.xpbar { height: 5px; background: #0002; margin-top: 3px; }
.xpbar div { height: 100%; background: var(--oc, var(--shu)); }
.xpbar.max div { background: var(--kin); }
.xprow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.xpm { padding: 6px 8px; background: var(--card); border: 2px solid var(--ink); border-left: 5px solid var(--oc); display: flex; flex-direction: column; }
.xpm em { color: var(--shu); font-style: normal; font-weight: 700; }

/* レベルアップ */
.lvhead { display: flex; gap: 12px; align-items: center; margin: 8px 0; padding: 8px; border-left: 6px solid var(--oc); background: var(--card); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.lvhead .wipe { width: 70px; height: 60px; margin: 0; }
.lvhead em { color: var(--shu); font-style: normal; font-weight: 700; font-size: 18px; }
.lvopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0; }
.lvopt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-align: center; }
.lvopt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.lvopt b { font-size: 15px; }
.lvopt small { line-height: 1.5; }
.lvopt .card { pointer-events: none; }
.lvopt.perk { border-color: var(--kin); }
.rec { position: absolute; top: -10px; right: 8px; background: var(--shu); color: #fff; font-style: normal; font-size: 11px; padding: 1px 8px; }

/* 編成 */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 14px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; background: var(--card); border: 2px solid var(--ink); border-bottom: 6px solid var(--oc); }
.slot.on { outline: 3px solid var(--shu); outline-offset: 2px; }
.slot .wipe { width: 72px; height: 62px; margin: 0; }
.slot b { font-size: 13px; }
.style { border-left: 6px solid var(--oc); }
.style b small { font-weight: 400; }
.style .ic { color: #fff; }

/* コラボ・パーティ詳細 */
.collabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 10px 0; }
.cmem { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--card); border: 2px solid var(--ink); border-left: 6px solid var(--oc); text-align: left; }
.cmem button { text-align: left; padding: 6px 8px; border: 2px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; }
.cmem button small { font-size: 10px; }
.pinfo { border-left: 6px solid var(--oc); padding: 4px 10px 10px; margin-bottom: 14px; }
.pinfo h4 { margin: 4px 0; }
.pinfo .cardgrid { max-height: none; }

/* RPG テーマでの見た目 */
body.rpg :is(.pchip, .xpm, .lvhead, .lvopt, .slot, .cmem, .cmem button) { background: var(--win-bg); color: var(--win-fg); border: var(--win-bd); border-radius: var(--win-rad); box-shadow: var(--win-sh); }
body.rpg :is(.pchip, .xpm, .slot, .cmem, .lvhead) { border-left: 6px solid var(--oc); }
body.rpg .member { background: #0005; border-radius: var(--win-rad); }
body.rpg .member .pname { color: var(--scene-fg, #fff); text-shadow: 0 1px 0 #000, 0 0 3px #000; }
body.rpg .lvopt small, body.rpg .pchip small, body.rpg .cmem small { color: var(--win-sub); }
body.rpg .rec { background: var(--acc); color: var(--acc-fg); }
body.rpg .slot.on { outline-color: var(--acc); }
body.rpg .eel { color: var(--scene-fg, #fff); text-shadow: 0 1px 0 #000; }

@media (max-width: 760px) {
  .field { flex-direction: column-reverse; align-items: stretch; padding: 104px 4px 6px; gap: 6px; }
  .party { flex-direction: row; width: auto; gap: 4px; }
  .member { flex: 1; flex-direction: column; align-items: stretch; gap: 2px; padding: 3px; min-width: 0; border-left-width: 3px; }
  .member .wipe { display: none; }
  .member .pname { font-size: 11px; }
  .member .pname small { font-size: 9px; margin-left: 2px; }
  .member .hpbar { height: 13px; }
  .member .dc { position: static; }
  .own { width: 14px; height: 14px; font-size: 9px; margin-right: 2px; }
  .el { width: 13px; height: 13px; font-size: 8px; margin-left: 2px; }
  .aps span { font-size: 14px; padding: 1px 5px; }
  .aps span b { font-size: 9px; }
  .ctrl .pile { padding: 4px 8px; }
  .pstrip, .xprow { gap: 4px; }
  .pchip, .xpm { padding: 4px 5px; }
  .pchip b { font-size: 11px; }
  .pchip small { font-size: 9px; }
  .slots { gap: 6px; }
  .slot .wipe { width: 56px; height: 48px; }
  .lvopts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lvopt { padding: 10px 6px; }
  .intent .to { font-size: 9px; }
  .eel { font-size: 9px; min-height: 14px; }
}
.member .pname small { color: inherit; }
@media (max-width: 760px) {
  .styleselect .styles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .styleselect .style { padding: 8px; gap: 3px; }
  .styleselect .style .ic { width: 28px; height: 28px; font-size: 15px; }
  .styleselect .style small { font-size: 10px; line-height: 1.45; }
}