/* where: RPGの対戦画面 / what: 一画面で遊ぶレスポンシブUI
 * why: カード・HP・操作を常に見せる。共通アリーナへの影響を避けてスコープする。 */
.rpg-duel {
  --duel-you:#70ead3; --duel-enemy:#ff827e; --duel-line:#ffffff20;
  --duel-muted:#a4b3c1; --duel-radius:16px; --duel-gap:12px;
  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto 58px;
  gap:var(--duel-gap); height:100%; min-height:0; margin:0; overflow:hidden;
  padding:22px max(24px,calc((100% - 980px)/2)) 18px;
  border:0; border-radius:0; color:#edf5f7;
  background:radial-gradient(ellipse at 15% 35%,#17483f48,transparent 48%),
    radial-gradient(ellipse at 85% 35%,#5b272d45,transparent 48%),#080e16;
}
.rpg-shell[data-mode="battle"] { height:100dvh; }
.rpg-duel [hidden] { display:none!important; }
.rpg-duel__head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.rpg-duel .rpg-arena__title { min-width:0; margin:0; text-align:left; }
.rpg-duel .rpg-arena__title span { font:700 10px/1.6 monospace; letter-spacing:.2em; color:var(--duel-you); }
.rpg-duel .rpg-arena__title strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 clamp(16px,2.2vw,25px)/1.5 'Noto Sans JP',sans-serif; }
.rpg-duel__round { flex:none; text-align:right; }
.rpg-duel .battle-turn { margin:0; color:#edf5f7; font:700 15px/1.5 monospace; letter-spacing:.12em; }
.rpg-duel .battle-turn::before,.rpg-duel .battle-turn::after { content:none; }
.rpg-duel__round>span { font-size:11px; color:var(--duel-you); }
.rpg-duel.is-resolving .rpg-duel__round>span { color:#ffca7e; }
.rpg-duel .rpg-battle-stakes { display:flex; align-items:center; gap:12px; max-width:none; min-width:0; margin:0; padding:8px 12px; border-left:2px solid var(--duel-enemy); border-radius:0 6px 6px 0; background:#ff827e0b; font-size:12px; }
.rpg-duel .rpg-battle-stakes b { flex:none; margin:0; color:var(--duel-enemy); font:700 10px/1.5 monospace; letter-spacing:.04em; }
.rpg-duel .rpg-battle-stakes>span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#c8cbd2; }

/* カード画像だけが高さに追従し、名前・HP・SPと操作領域は縮まない。 */
.rpg-duel .field { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:42px; min-height:0; width:100%; max-width:800px; justify-self:center; }
.rpg-duel .fighter-slot { --accent:var(--duel-you); min-height:0; padding:5px; border:1px solid #70ead33d; border-radius:var(--duel-radius); background:linear-gradient(150deg,#14272d,#0c151f); box-shadow:0 12px 35px #0005; animation:duelCardIn .45s ease-out both; }
.rpg-duel .fighter-slot--enemy { --accent:var(--duel-enemy); border-color:#ff827e3d; background:linear-gradient(210deg,#302027,#15151e); animation-delay:.08s; }
.rpg-duel .fighter { --accent:var(--duel-you); min-height:0; border:0; border-radius:12px; background:#14232b; overflow:hidden; }
.rpg-duel .fighter--enemy { --accent:var(--duel-enemy); }
.rpg-duel .fighter .tcard__bg { object-fit:cover; object-position:center 35%; }
.rpg-duel .fighter .tcard__scrim { background:linear-gradient(180deg,#060c1425 50%,#060c14db); }
.rpg-duel .fighter__role { top:10px; left:10px; padding:5px 8px; border:1px solid #ffffff30; border-radius:5px; background:#071019cf; color:var(--accent); font:700 10px/1.2 monospace; letter-spacing:.08em; }
.rpg-duel .fighter__body { flex:none; position:absolute; bottom:0; left:0; right:0; padding:10px; pointer-events:none; }
.rpg-duel .fighter__status { margin:0; min-height:0; gap:3px; }
.rpg-duel .st-chip { font-size:10px; color:#eef7fa; }
.rpg-duel .fighter__skill { margin-top:4px; font-size:11px; color:#b8c4ce; }
.rpg-duel .fighter__skill b { color:#e3ecef; }
.rpg-duel .fighter__info { flex:none; padding:10px; }
.rpg-duel .fighter__title { flex-wrap:nowrap; justify-content:space-between; gap:6px; }
.rpg-duel .fighter__name { font:800 16px/1.6 'Noto Sans JP',sans-serif; }
.rpg-duel .fighter__fam { font-size:10px; }
.rpg-duel .hpbar { height:17px; margin-top:5px; background:#ffffff0c; border:1px solid #ffffff12; }
.rpg-duel .hpbar__fill { background:linear-gradient(90deg,#299d90,var(--accent)); box-shadow:0 0 12px #70ead330; }
.rpg-duel .fighter-slot--enemy .hpbar__fill { background:linear-gradient(90deg,#ac485b,var(--accent)); }
.rpg-duel .hpbar__txt { font-size:11px; }
.rpg-duel .spbar { margin-top:7px; gap:7px; }
.rpg-duel .spbar__l,.rpg-duel__sp { font:700 10px/1.3 monospace; color:#bbc9d9; }
.rpg-duel .sp-pip { height:5px; background:#ffffff14; }
.rpg-duel .sp-pip.on { background:#9dbaff; box-shadow:none; }
.rpg-duel .field__vs { display:grid; place-items:center; position:absolute; z-index:4; top:45%; left:50%; width:42px; height:42px; transform:translate(-50%,-50%) rotate(-8deg); color:#c4d0dc; background:#0c1420; border:1px solid #ffffff20; border-radius:50%; -webkit-text-fill-color:currentColor; font:italic 800 15px/1 sans-serif; filter:none; }
.rpg-duel .cmd-badge { bottom:auto; top:10px; right:10px; width:36px; height:36px; }
.rpg-duel .fighter.is-critical { box-shadow:inset 0 0 0 2px #ff827e; }

/* 親指で押せる操作領域。EXがないときは固有技が行全体を使う。 */
.rpg-duel .cmd-panel { gap:8px; margin:0; }
.rpg-duel .cmd-row { gap:8px; }
.rpg-duel .cmd { min-height:64px; padding:10px; border:1px solid #ffffff26; border-radius:12px; background:linear-gradient(145deg,#1a2633,#111b27); color:#edf5f7; touch-action:manipulation; }
.rpg-duel .cmd--attack { --c:#ffa5a0; border-color:#ffa5a059; background:linear-gradient(135deg,#482b35,#231e2a); }
.rpg-duel .cmd--guard { --c:#9ac7ff; }
.rpg-duel .cmd--break { --c:#f6cf81; }
.rpg-duel .cmd--skill { --c:#c9b5ff; }
.rpg-duel .cmd--exskill { --c:#ffe3a0; }
.rpg-duel .cmd__t { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; font-size:14px; line-height:1.3; }
.rpg-duel .cmd__ico { width:24px; height:24px; margin:0; }
.rpg-duel .cmd__d { color:#b7c2cf; font-size:11px; line-height:1.4; margin-top:4px; }
.rpg-duel .cmd__sp { display:inline-block; margin:0; padding:2px 6px; border-radius:4px; background:#ffffff12; font:700 10px/1.4 monospace; }
.rpg-duel .cmd-row--skill .cmd { min-height:56px; padding:8px; }
.rpg-duel .cmd:disabled { opacity:.58; }
.rpg-duel .cmd--skill:disabled .cmd__t { color:#c9b5ff; }
.rpg-duel .cmd:focus-visible,.rpg-duel .log:focus-visible,.rpg-duel [data-battle-continue]:focus-visible { outline:2px solid var(--duel-you); outline-offset:3px; }
.rpg-duel .cmd:active:not(:disabled) { transform:scale(.97); }
.rpg-duel .rps-hint { margin:0; color:var(--duel-muted); font-size:11px; line-height:1.4; letter-spacing:0; }
.rpg-duel__journal { display:flex; align-items:stretch; gap:14px; min-height:0; padding:8px 12px; border:1px solid var(--duel-line); border-radius:9px; background:#060c1480; }
.rpg-duel__journal>span { flex:none; align-self:center; color:#7f929f; font:700 9px/1 monospace; letter-spacing:.12em; }
.rpg-duel .log { flex:1; min-width:0; min-height:0; margin:0; padding:0 4px; max-height:none; border:0; border-radius:0; background:none; font-size:11px; line-height:1.7; overscroll-behavior:contain; scrollbar-width:thin; }
.rpg-duel .rpg-battle-result { inset:0; padding:20px; overflow:auto; background:#060c14ed; backdrop-filter:blur(8px); }
.rpg-duel .rpg-battle-result>div { width:min(100%,480px); padding:32px 22px; border:1px solid #70ead350; border-radius:20px; background:radial-gradient(ellipse at top,#16433980,transparent 80%),#0c1520; box-shadow:0 24px 80px #0008; animation:duelCardIn .35s ease-out; }
.rpg-duel .rpg-battle-result span { color:var(--duel-you); font-size:clamp(36px,8vw,64px); }
.rpg-duel .rpg-battle-result p { font-size:14px; overflow-wrap:anywhere; }
.rpg-duel .rpg-battle-result button { min-height:48px; width:100%; background:var(--duel-you); color:#08221c; }
.rpg-duel .rpg-battle-result[data-result="loss"] span { color:var(--duel-enemy); }
.rpg-duel .rpg-battle-result[data-result="draw"] span { color:#f6cf81; }
@keyframes duelCardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

@media (max-width:720px) {
  .rpg-duel { --duel-gap:8px; grid-template-rows:auto auto minmax(0,1fr) auto auto 44px;
    padding:12px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .rpg-duel .rpg-arena__title span { font-size:9px; letter-spacing:.12em; }
  .rpg-duel .battle-turn { font-size:12px; }
  .rpg-duel .rpg-battle-stakes { gap:3px; align-items:flex-start; flex-direction:column; padding:6px 9px; font-size:11px; }
  .rpg-duel .rpg-battle-stakes>span { max-width:100%; }
  .rpg-duel .field { gap:14px; }
  .rpg-duel .field__vs { width:30px; height:30px; font-size:11px; }
  .rpg-duel .fighter-slot { padding:3px; border-radius:12px; }
  .rpg-duel .fighter { border-radius:9px; }
  .rpg-duel .fighter__role { top:7px; left:7px; font-size:9px; padding:4px 6px; }
  .rpg-duel .fighter__body { padding:7px; }
  .rpg-duel .fighter__skill { display:none; }
  .rpg-duel .fighter__info { padding:7px 5px; }
  .rpg-duel .fighter__title { display:block; }
  .rpg-duel .fighter__name { font-size:13px; }
  .rpg-duel .fighter__fam { font-size:10px; line-height:1.4; }
  .rpg-duel .cmd { min-height:72px; padding:8px 3px; }
  .rpg-duel .cmd__t { gap:4px; font-size:12px; }
  .rpg-duel .cmd-row--main .cmd__t { flex-direction:column; }
  .rpg-duel .cmd__ico { width:21px; height:21px; }
  .rpg-duel .cmd__d { font-size:10px; }
  .rpg-duel .cmd-row--skill .cmd { min-height:56px; }
  .rpg-duel__journal { gap:8px; padding:5px 8px; }
  .rpg-duel__journal>span { font-size:8px; letter-spacing:.05em; }
  .rpg-duel .rps-hint { font-size:10px; }
  .rpg-duel .cmd-badge { top:35px; right:7px; width:28px; height:28px; }
}
/* 小型端末でもボタンの最小高さを保持し、余白と補助情報だけ圧縮する。 */
@media (max-height:650px) and (min-width:601px), (max-height:650px) and (orientation:portrait) {
  .rpg-duel { --duel-gap:6px; padding-top:8px; padding-bottom:8px; grid-template-rows:auto auto minmax(0,1fr) auto auto 34px; }
  .rpg-duel .rpg-arena__title span { display:none; }
  .rpg-duel .cmd { min-height:54px; padding:6px; }
  .rpg-duel .cmd-row--main .cmd__t { flex-direction:row; }
  .rpg-duel .cmd-row--skill .cmd { min-height:46px; padding:5px; }
  .rpg-duel .fighter__info { padding:5px; }
}
/* 横持ちはカードと操作を左右に分け、高さの取り合いを避ける。 */
@media (max-height:500px) and (min-width:600px) {
  .rpg-duel { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:8px 18px; padding:8px 18px; }
  .rpg-duel__head { grid-column:1/-1; }
  .rpg-duel .rpg-battle-stakes { display:none; }
  .rpg-duel .field { grid-column:1; grid-row:2/4; gap:14px; }
  .rpg-duel .cmd-panel { grid-column:2; grid-row:2; justify-content:center; }
  .rpg-duel .rps-hint { grid-column:2; grid-row:3; }
  .rpg-duel__journal { display:none; }
  .rpg-duel .fighter__skill { display:none; }
  .rpg-duel .fighter__title { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  .rpg-duel,.rpg-duel * { animation:none!important; transition:none!important; }
  .rpg-duel .dmg-float { transform:translateX(-50%); }
}