* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #080b12; color: #f4eee3; font-family: sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; display: grid; place-items: center; }
[hidden] { display: none !important; }
#war-screen { position: absolute; left: 50%; top: 50%; width: 480px; height: 720px; transform: translate(-50%, -50%) scale(var(--war-scale, 1)); transform-origin: center; background: #161d2c; padding: 16px; font-size: 20px; line-height: 1.15; overflow: hidden; display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; height: 44px; flex-shrink: 0; }
h1 { font-size: 26px; margin: 0; }
p { margin: 8px 0; }
#war-status { min-height: 0; max-height: 48px; overflow: hidden; color: #f5dba1; margin: 4px 0; flex-shrink: 0; }
#war-status:empty { display: none; margin: 0; }
button, select { font: inherit; color: #fff; background: #293b58; border: 1px solid #889ab4; border-radius: 6px; min-height: 42px; padding: 5px 10px; }
button:disabled { opacity: .5; }
select { width: 100%; }
#war-lobby {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#war-lobby > * { flex-shrink: 0; }
#war-viewer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#war-enemies-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #141b29;
  font-size: 18px;
  line-height: 1.25;
}
#war-enemies-panel[hidden] { display: none !important; }
#war-enemies-panel .enemy-page-header {
  height: 44px;
}
#war-enemies-panel .header-back-btn,
#war-enemies-panel .footer-back-btn {
  color: #93c5fd;
  background: #1c2b42;
  border: 1px solid #4a638a;
}
#war-enemies-panel .footer-back-btn {
  color: #fff;
  background: #253856;
  border-color: #60a5fa;
}
#war-enemies-panel .enemy-page-header h1 {
  font-size: 20px;
}
.lobby-watch-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.phase-watch-btn, .awards-watch-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-height: 58px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #1c2b42;
  border: 1px solid #4a638a;
  text-align: center;
}
.phase-watch-btn .btn-top-row { font-size: 19px; font-weight: bold; color: #ffd679; }
.phase-watch-btn .btn-bottom-row { font-size: 16px; font-weight: bold; color: #92c4f8; }
.phase-watch-btn .btn-view-count {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-left: 2px;
}
.awards-watch-btn { background: #26243a; border-color: #6d548f; min-height: 54px; }
.awards-watch-btn .btn-top-row { font-size: 18px; font-weight: bold; color: #f0cf90; }
.awards-watch-btn .btn-bottom-row { font-size: 16px; font-weight: bold; color: #d8b4fe; }
.claim-reward-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #1f3228;
  border: 1px solid #4a8f6d;
  text-align: center;
}
.claim-reward-btn .btn-top-row { font-size: 18px; font-weight: bold; color: #b7f0c9; }
.claim-reward-btn .btn-bottom-row { font-size: 16px; font-weight: bold; color: #86efac; }
.claim-reward-btn:disabled { opacity: .55; }
.claim-reward-btn.is-claimed {
  background: #1a2430;
  border-color: #4a5568;
}
.claim-reward-btn.is-claimed .btn-top-row { color: #94a3b8; }
.claim-reward-btn.is-claimed .btn-bottom-row { color: #64748b; }
.phase-watch-btn .btn-mid-row {
  font-size: 15px;
  font-weight: bold;
  color: #c4b5fd;
}
.enemy-list-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #2b1f32;
  border: 1px solid #7d4a8f;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.enemy-list-btn:hover {
  background: #382742;
  border-color: #9d5cb4;
}
.enemy-list-btn .btn-top-row { font-size: 18px; font-weight: bold; color: #f5b7ea; }
.enemy-list-btn .btn-bottom-row { font-size: 16px; font-weight: bold; color: #d8b4fe; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.controls button { flex: 1; }
.war-play-controls {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: auto;
  margin-bottom: 0;
  height: 44px;
  flex-shrink: 0;
}
.btn-play-large { flex: 2; font-size: 22px; font-weight: bold; height: 100%; min-height: 44px; background: #324c73; border: 2px solid #8ba4cc; }
.sub-controls { flex: 1; display: flex; height: 100%; }
.sub-controls #war-speed { display: none !important; }
.sub-controls #war-skip { width: 100%; height: 100%; min-height: 44px; font-size: 20px; font-weight: bold; background: #263650; }
#war-stage {
  margin-top: 0;
  background-position: center;
  background-size: cover;
  border-radius: 6px;
  padding: 8px 6px 6px;
  background-color: #0b1020;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
  gap: 6px;
}
#war-hud { display: flex; justify-content: space-between; align-items: center; background: #0b1020ee; padding: 4px 10px; border-radius: 4px; margin-bottom: 0; height: 32px; flex-shrink: 0; }
#war-remaining { margin: 0; color: #f5dba1; font-size: 23px; font-weight: bold; line-height: 32px; }
#war-turn { margin: 0; color: #92c4f8; font-size: 22px; font-weight: bold; line-height: 32px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; flex-shrink: 0; }
.card {
  position: relative;
  min-width: 0;
  height: auto;
  min-height: 168px;
  background: #182338ee;
  border: 1px solid #7788a4;
  padding: 3px 4px 4px;
  border-radius: 5px;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.card.empty { border-style: dashed; min-height: 168px; }
.card.defeat,
.card.rotate-out,
.card.rotate-in,
.card.reinforce-enemy,
.card.reinforce-ally,
.card.hit,
.card.attack-up,
.card.attack-down { overflow: hidden; }
.card img { width: 100%; height: 56px; object-fit: contain; display: block; flex-shrink: 0; }
#war-enemies .card { min-height: 196px; }
#war-enemies .card img { height: 96px; }
#war-allies .card img { height: 64px; }
/* 名前は省略禁止。「プレイヤーのキャラクター」を1塊で全文表示 */
.card-name {
  margin: 2px 0 1px;
  min-height: 2.3em;
  height: auto;
  max-height: none;
  display: block;
  overflow: visible;
  flex-shrink: 0;
  text-align: center;
  width: 100%;
}
.card-name .name-full {
  margin: 0;
  line-height: 1.2;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-all;
  overflow-wrap: anywhere;
  width: 100%;
}
.card-name .name-full.name-mid { font-size: 14px; }
.card-name .name-full.name-long { font-size: 12px; }
.card-job { margin: 1px 0; line-height: 1.1; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: #b8cde4; flex-shrink: 0; }
.card-hp { margin: 1px 0; line-height: 1.1; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-weight: bold; color: #fff; flex-shrink: 0; }
.card progress { width: 100%; height: 7px; display: block; accent-color: #79ce8b; margin-top: auto; }
.kill-badge { position: absolute; top: 4px; right: 4px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: #2a1a12ee; border: 1px solid #c9a06a; color: #ffe09a; font-size: 18px; line-height: 26px; text-align: center; z-index: 2; }
#war-scene { text-align: center; font-size: 19px; font-weight: bold; color: #ffd679; min-height: 26px; line-height: 26px; margin: 0; padding: 2px 4px; background: #0b1020dd; border-radius: 4px; flex-shrink: 0; }
#war-viewer.result-mode #war-stage, #war-viewer.result-mode > .controls { display: none; }
#war-viewer.result-mode #war-back { margin-top: auto; }
#war-result { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; margin-top: 2px; }
#war-summary { text-align: center; margin: 6px 0 2px; font-size: 40px; font-weight: 900; line-height: 1.15; }
#war-summary.success { color: #4ade80; text-shadow: 0 0 12px #22c55e88; }
#war-summary.fail { color: #f87171; text-shadow: 0 0 12px #ef444488; }
#war-summary .reinforce-notice { display: block; font-size: 20px; font-weight: bold; color: #fb923c; margin-top: 6px; text-shadow: none; line-height: 1.3; }
.war-result-meta {
  text-align: center;
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  color: #ffd679;
}
.war-result-meta .war-result-phase { display: block; }
.war-result-meta .war-result-clan { display: block; margin-top: 2px; font-size: 26px; color: #fde68a; }
#war-stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex-shrink: 0; }
.stat-card { background: #162238; border: 1px solid #3b4e70; border-radius: 6px; padding: 4px 6px; text-align: center; }
.stat-card .stat-label { font-size: 15px; color: #94a3b8; display: block; margin-bottom: 2px; }
.awards-watch-btn {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.awards-watch-btn:hover { color: inherit; }
.stat-card .stat-value { font-size: 20px; font-weight: bold; color: #f1f5f9; display: block; }
#war-back { width: 100%; min-height: 44px; font-size: 20px; font-weight: bold; margin-top: 6px; margin-bottom: 0; flex-shrink: 0; }

@keyframes war-card-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes war-card-exit {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes war-card-hit {
  0%, 100% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-6px); filter: brightness(1.4) drop-shadow(0 0 6px #ff3b30); }
  40% { transform: translateX(6px); filter: brightness(1.4) drop-shadow(0 0 6px #ff3b30); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes war-card-attack-up {
  0% { transform: translateY(0); }
  35% { transform: translateY(-20px) scale(1.05); }
  100% { transform: translateY(0); }
}
@keyframes war-card-attack-down {
  0% { transform: translateY(0); }
  35% { transform: translateY(20px) scale(1.05); }
  100% { transform: translateY(0); }
}
@keyframes war-dmg-float {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.35); }
  70% { opacity: 1; transform: translate(-50%, -24px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(0.9); }
}
@keyframes war-defeat-rise {
  0% {
    opacity: 1;
    filter: brightness(0.9);
    transform: translateY(0);
  }
  30% {
    opacity: 0.85;
    filter: brightness(0.2) grayscale(1);
    transform: translateY(-6px);
  }
  100% {
    opacity: 0;
    filter: brightness(0.05) grayscale(1);
    transform: translateY(-28px);
  }
}
@keyframes war-defeat-fall {
  0% {
    opacity: 1;
    filter: brightness(0.9);
    transform: translateY(0);
  }
  30% {
    opacity: 0.85;
    filter: brightness(0.2) grayscale(1);
    transform: translateY(6px);
  }
  100% {
    opacity: 0;
    filter: brightness(0.05) grayscale(1);
    transform: translateY(28px);
  }
}
@keyframes war-reinforce-enemy {
  0% { opacity: 0; transform: translateY(-20px); filter: brightness(1.2); }
  100% { opacity: 1; transform: translateY(0); filter: none; }
}
@keyframes war-reinforce-ally {
  0% { opacity: 0; transform: translateY(20px); filter: brightness(1.2); }
  100% { opacity: 1; transform: translateY(0); filter: none; }
}
/* 交代退場：やられ（暗転上下）と違い、横へスライド＋青み（HP残したまま） */
@keyframes war-rotate-out {
  0% { opacity: 1; filter: brightness(1.08) saturate(1.15); transform: translateX(0) scale(1); box-shadow: 0 0 0 #38bdf800; }
  45% { opacity: 1; filter: brightness(1.2) saturate(1.25); transform: translateX(18px) scale(0.98); box-shadow: 0 0 14px #38bdf866; }
  100% { opacity: 0; filter: brightness(1.25) saturate(1.3); transform: translateX(52px) scale(0.9); box-shadow: 0 0 8px #38bdf844; }
}
@keyframes war-rotate-in {
  0% { opacity: 0; filter: brightness(1.35); transform: translateX(-44px) scale(0.9); box-shadow: 0 0 16px #60a5fa88; }
  55% { opacity: 1; filter: brightness(1.1); transform: translateX(4px) scale(1.03); box-shadow: 0 0 10px #60a5fa55; }
  100% { opacity: 1; filter: none; transform: none; box-shadow: none; }
}

.card.enter { animation: war-card-enter .32s ease-out; }
.card.exit { animation: war-card-exit .28s ease-in; }
.card.hit { animation: war-card-hit .32s ease-out; }
.card.attack-up { animation: war-card-attack-up .28s ease-out; z-index: 3; }
.card.attack-down { animation: war-card-attack-down .28s ease-out; z-index: 3; }
.card.defeat {
  z-index: 4;
  box-shadow: inset 0 0 0 2px #000, 0 0 8px #000a;
}
.card.defeat.rise { animation: war-defeat-rise .28s ease-out forwards; }
.card.defeat.fall { animation: war-defeat-fall .28s ease-out forwards; }
.card.reinforce { animation: war-reinforce-enemy .22s ease-out forwards; z-index: 3; }
.card.reinforce-enemy { animation: war-reinforce-enemy .22s ease-out forwards; z-index: 3; }
.card.reinforce-ally { animation: war-reinforce-ally .22s ease-out forwards; z-index: 3; }
.card.rotate-out {
  z-index: 4;
  border-color: #60a5fa;
  animation: war-rotate-out .38s ease-in forwards;
}
.card.rotate-in {
  z-index: 3;
  border-color: #93c5fd;
  animation: war-rotate-in .32s ease-out forwards;
}

.card-dmg {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ff2a2a;
  font-size: 32px;
  font-weight: 900;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0 0 10px #ff0055;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
  animation: war-dmg-float .6s ease-out forwards;
}

/* ゲーム本体 subview 内包時（別ウィンドウの絶対配置スケールは使わない） */
/* スクロールはこの画面の #war-lobby のみ。他 subview は触らない */
.main-views-container:has(#subview-clan-war.active) {
  overflow: hidden;
}
#subview-clan-war {
  padding: 0 !important;
  overflow: hidden;
  min-height: 0;
}
#subview-clan-war.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
#subview-clan-war #war-screen,
#subview-clan-war .war-screen-embedded {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  transform: none;
  padding: 10px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  line-height: 1.15;
}
#subview-clan-war header {
  gap: 8px;
}