:root{
  --bg:#050a14;
  --panel:#0b1326cc;
  --line:#1e2a44;
  --text:#e7eefc;
  --muted:#9bb0d3;
  --accent:#7cc7ff;
  --good:#39d98a;
  --warn:#ffd166;
  --bad:#ff5c7a;
  --chip:#0f1b33cc;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --r: 16px;
  --r2: 22px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  
  --type-done: #4facfe;
  --type-next: #ff7eb3;
  --type-yet: #667;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin: 0; padding: 0; }
body{
  font-family:var(--font);
  background: radial-gradient(1200px 600px at 50% 30%, #0c1733 0%, var(--bg) 60%);
  color:var(--text);
  overflow: hidden; /* スクロール防止 */
  /* 画面全体を使用 */
  width: 100vw;
  height: 100vh;
}

/* 自動スケーリング対応 */
#app{ 
  width: 100%; 
  height: 100%; 
  padding: 10px; 
  position: relative; 
  display: flex; 
  flex-direction: column;
  /* max-width削除で全画面使用 */
}

/* --- HUD --- */
.hud{ display:flex; gap:12px; align-items:stretch; margin-bottom: 12px; }
.hudCard{
  background: linear-gradient(180deg, #0f1b33cc, #0a1226cc);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 12px 12px 10px;
  box-shadow: var(--shadow);
  flex: 1;
  min-width: 260px;
}
.hudCard.mini{ flex:0 0 150px; min-width:150px; }
.hudCard.btns{ flex:0 0 120px; min-width:120px; display:flex; justify-content:center; gap:10px; align-items:center; }

.hudTitle{ font-weight:700; letter-spacing:.08em; color:var(--muted); font-size:12px; margin-bottom:8px; }
.hudBig{ font-size:26px; font-weight:800; }
.hudSmall{ color:var(--muted); font-size:12px; margin-top:2px; }

.barRow{ display:grid; grid-template-columns: 46px 1fr auto auto; gap:8px; align-items:center; margin: 6px 0; }
.barLabel{ font-size:12px; color:var(--muted); }
.bar{ height:10px; border-radius: 999px; background: #0c1630; border:1px solid var(--line); overflow:hidden; }

.barFill{ height:100%; width:100%; background: linear-gradient(90deg, var(--good), var(--warn)); border-radius: 999px; transition: width 0.2s; }
.barFill.shield{ background: linear-gradient(90deg, #7cc7ff, #b3e3ff); }
.barFill.enemy{ background: linear-gradient(90deg, #5ee7a1, #39d98a); }
.barFill.exp { background: linear-gradient(90deg, #9c27b0, #e040fb); box-shadow: 0 0 6px rgba(224, 64, 251, 0.6); }

.barText{ font-variant-numeric: tabular-nums; color:var(--muted); font-size:12px; min-width: 92px; text-align:right;}
.smallRight{ color:var(--muted); font-size:12px; min-width: 90px; text-align:right; }

.iconBtn{ width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background: #0b142b; color: var(--text); cursor:pointer; box-shadow: var(--shadow); }
.iconBtn:hover{ filter: brightness(1.1); }

/* --- Screens Layout --- */
.screens{ width:100%; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen{ width:100%; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hidden{ display:none !important; }

.grid2{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 12px; flex: 1; min-height: 0; }
.panel{ background: linear-gradient(180deg, var(--panel), #081022cc); border:1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); padding: 14px; min-height: 0; flex: 1; overflow-y: auto; }
.panelHeader{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.panelTitle{ font-size:20px; font-weight:900; letter-spacing:.02em; }
.panelSub{ font-size:12px; color: var(--muted); }
.panelDivider{ height:1px; background: var(--line); margin: 12px 0; opacity:.9; }

/* --- Map --- */
.mapBox{ 
  position: relative; 
  height: 320px; border-radius: var(--r); border: 1px solid var(--line); background: #071028; overflow:hidden;
}
#mapSvg{ width:100%; display:block; }

.mapNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(11, 20, 43, 0.9);
  border: 1px solid var(--line);
  color: var(--muted);
  width: 40px;
  height: 60px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.mapNav:hover { background: var(--accent); color: #000; }
.mapNav.prev { left: 10px; border-radius: 8px 0 0 8px; }
.mapNav.next { right: 10px; border-radius: 0 8px 8px 0; }
.mapNav:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

.row{ display:flex; align-items:center; }
.gap{ gap:10px; }
.right{ justify-content:flex-end; }

button.primary, button.secondary{ border-radius: 14px; border: 1px solid var(--line); padding: 10px 14px; cursor:pointer; font-weight:800; }
button.primary{ background: linear-gradient(180deg, #1b6fd6, #124a94); color:#fff; }
button.secondary{ background: #0b142b; color: var(--text); }
button.small{ padding: 8px 10px; border-radius: 12px; font-weight:800; }
button:disabled{ opacity:.5; cursor:not-allowed; }

/* --- Inventory --- */
.invTabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.invTab { 
  padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line);
  background: #0b142b; color: var(--muted); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.invTab:hover { border-color: var(--accent); }
.invTab.active { background: var(--accent); color: #000; border-color: var(--accent); }

.invActions { display: flex; gap: 6px; margin-bottom: 8px; }
.invActions button { font-size: 10px; padding: 4px 8px; }

.invList{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; max-height: 400px; overflow:auto; padding-right:6px; }
.invItem{ border:1px solid var(--line); background: #07122bcc; border-radius: var(--r); padding: 8px; position:relative; font-size: 12px; }
.invItem.equipped { border-color: var(--accent); background: rgba(124, 199, 255, 0.1); }
.invItem.selected { border-color: #ff7eb3; background: rgba(255, 126, 179, 0.15); }
.invItem .invCheck { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; cursor: pointer; }
.invTop{ display:flex; justify-content:space-between; align-items:flex-start; gap:6px; margin-left: 20px; }
.invIcon{ width: 40px; height: 40px; background: #000; border-radius: 8px; display:flex; align-items:center; justify-content:center; }
.invIcon img { width: 32px; height: 32px; object-fit: contain; }
.invInfo { flex: 1; }
.invAction { display: flex; flex-direction: column; gap: 4px; }
.invName{ font-weight:800; font-size: 12px; }
.rarity { font-size: 10px; margin-left: 4px; color: #ffd700; }
.invOpts{ margin-top:4px; display:flex; flex-wrap: wrap; gap:3px; margin-left: 20px; }
.optPill{ background: #0c1a33; border:1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size:10px; color: #cfe3ff; white-space: nowrap; }
.optPill.blue{ color:#7cc7ff; border-color:#2a4d77; }

/* --- Equipment --- */
.equipBox{ margin-top: 4px; }
.equipStage{ position:relative; height: 460px; border: 1px solid var(--line); border-radius: var(--r2); background: radial-gradient(500px 260px at 50% 40%, #0d1a3a, #071028); overflow:hidden; }
.kinjirou{ position:absolute; left:50%; transform: translateX(-50%); top: 20px; height: 320px; opacity:.92; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.slot{ position:absolute; width: 92px; height: 92px; border-radius: 18px; border: 1px solid var(--line); background: #0b142bcc; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; box-shadow: var(--shadow); }
.slot span{ font-size:12px; color:var(--muted); font-weight:800; }
.slot img{ width: 42px; height: 42px; object-fit:contain; }
.slot-head{ top: 20px; left: 54%; transform: translateX(-50%); }
.slot-body{ top: 120px; left: 54%; transform: translateX(-50%); }
.slot-legs{ top: 220px; left: 54%; transform: translateX(-50%); }
.slot-weapon{ top: 110px; left: 16%; }
.slot-shield{ top: 110px; right: 16%; }

/* ★新規: お守りスロット */
.slot-charm{ width: 72px; height: 72px; border-radius: 50%; border: 2px solid #ffd166; background: linear-gradient(135deg, #1a2740, #0d1829); }
.slot-charm span{ color: #ffd166; }
.slot-charm1{ top: 200px; left: 16%; }
.slot-charm2{ top: 200px; right: 16%; }
.slot-charm3{ top: 40px; left: 16%; }
.slot-charm4{ top: 40px; right: 16%; }

.rings{ position:absolute; left: 10px; right: 10px; bottom: 10px; background: #07122bcc; border:1px solid var(--line); border-radius: 18px; padding: 6px; }
.ringsTitle{ font-weight:900; margin-bottom:4px; font-size:12px; margin-left:4px; }
.ringSlots{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ringSlot{ border-radius: 10px; border: 1px solid var(--line); background: #0b142b; padding: 2px; height: 36px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ringSlot img{ width: 28px; height: 28px; object-fit:contain; }

.subGrid{ display:grid; grid-template-columns: 1fr 220px; gap: 10px; margin-top: 10px; }
.miniPanel{ border:1px solid var(--line); background: #07122bcc; border-radius: var(--r2); padding: 12px; }
.miniTitle{ font-weight:900; margin-bottom:10px; font-size:13px; color: var(--accent); }
.statTable, .wallet{ display:grid; gap:4px; font-size:13px; color:var(--text); }

.mapCurrencyStrip{ display:flex; justify-content:flex-end; margin:10px 0 12px; }
.mapIngotChip{
  display:flex; align-items:center; gap:10px;
  min-width:220px;
  padding:10px 14px;
  border:1px solid rgba(255,214,102,.35);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(61,41,12,.92), rgba(24,16,8,.94));
  box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
}
.mapIngotChip img{
  width:52px; height:36px; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(255,214,102,.22));
}
.mapIngotLabel{ color:#ffd166; font-size:11px; font-weight:800; letter-spacing:.04em; }
.mapIngotValue{ color:#fff5d6; font-size:18px; font-weight:900; letter-spacing:.02em; }

.walletCurrencyGrid{ display:grid; gap:10px; }
.walletCurrencyCard{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(124,199,255,.18);
  background:linear-gradient(135deg, rgba(14,25,46,.94), rgba(8,15,28,.96));
}
.walletCurrencyCard.gold{ border-color:rgba(255,209,102,.22); }
.walletCurrencyCard.ingot{ border-color:rgba(255,209,102,.42); background:linear-gradient(135deg, rgba(53,35,10,.96), rgba(16,13,8,.98)); }
.walletEmoji{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  font-size:24px;
  border-radius:12px;
  background:rgba(255,209,102,.12);
}
.walletIconImg{
  width:46px; height:46px; object-fit:contain;
  border-radius:12px;
  filter: drop-shadow(0 2px 8px rgba(255,214,102,.25));
}
.walletCurrencyMeta{ display:grid; gap:2px; }
.walletCurrencyName{ color:#b9c9e8; font-size:11px; font-weight:800; letter-spacing:.04em; }
.walletCurrencyValue{ color:#fff; font-size:22px; font-weight:900; line-height:1.05; }
.walletCurrencyValue span{ font-size:12px; color:#ffd166; margin-left:4px; }
.walletCurrencySub{ color:#d8c58b; font-size:10px; }
.walletInfoRow{ display:flex; flex-wrap:wrap; gap:8px; }
.walletInfoPill{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  color:#d8e6ff;
  background:rgba(124,199,255,.1);
  border:1px solid rgba(124,199,255,.18);
}
.pvpTreasuryMini{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px; padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(53,35,10,.96), rgba(16,13,8,.98));
  border:1px solid rgba(255,209,102,.38);
}
.pvpTreasuryMini img{
  width:54px; height:38px; object-fit:contain;
  filter: drop-shadow(0 2px 8px rgba(255,214,102,.25));
}
.pvpTreasuryLabel{ color:#ffd166; font-size:11px; font-weight:800; letter-spacing:.04em; }
.pvpTreasuryValue{ color:#fff5d6; font-size:20px; font-weight:900; }
.statTable .sub { font-size: 11px; color: var(--muted); margin-left: 4px; }

.allocGrid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.allocCard{ border:1px solid var(--line); border-radius: var(--r); padding: 10px; background: #0b142b; display:flex; flex-direction:column; gap:10px; }
.allocName{ font-weight:900; font-size: 12px; text-align: center; }
.allocVal{ color:var(--accent); font-size:18px; font-weight: bold; text-align: center; }
.allocBtnGroup { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }
.allocBtnGroup button { padding: 4px 0; font-size: 10px; width: 100%; }

/* --- BATTLE --- */
.battleStage{ position:relative; height: calc(100vh - 120px); min-height: 400px; border-radius: var(--r2); border:1px solid var(--line); overflow:hidden; box-shadow: var(--shadow); flex: 1; }
.battleBg{ position:absolute; inset:0; background-size: cover; background-position: center; filter: saturate(1.05); opacity:.95; transition: background-image 0.5s; }

/* Player - 左下配置 */
.char.left{ position:absolute; bottom: 0; left: 80px; /* KPゲージ用に少し右へ */ width: 300px; height: 380px; display:flex; align-items:flex-end; justify-content:center; transition: transform 0.1s ease-out; will-change: transform; z-index: 10; }
.char img{ max-height: 360px; max-width: 280px; object-fit: contain; filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)); }
.nameTag{ position:absolute; bottom: 0; transform: translateY(54px); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); font-weight:900; color: #fff; }
.dmgMultLabel{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:bold; color:#7cc7ff; text-shadow:0 0 4px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6); white-space:nowrap; z-index:10; pointer-events:none; }

/* Player Head Bars */
.playerBuffRow { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; z-index: 20; }
.playerMiniBar { position: absolute; width: 100px; height: 8px; background: #000; border: 1px solid #555; border-radius: 4px; overflow: hidden; left: 50%; transform: translateX(-50%); }
#playerMiniHpBar { top: 10px; }
#playerMiniShieldBar { top: -2px; }
.playerMiniHpFill { height: 100%; background: linear-gradient(90deg, #ff5c7a, #ff9a9a); width: 100%; transition: width 0.2s; }
.playerMiniShieldFill { height: 100%; background: linear-gradient(90deg, #7cc7ff, #b3e3ff); width: 100%; transition: width 0.2s; }

/* Enemy & Pets */
.enemyContainer { position: absolute; inset: 0; pointer-events: none; z-index: 100; }
.petContainer { position: absolute; inset: 0; pointer-events: none; z-index: 200; }
.enemyActor { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform: translate(-50%, -50%); transition: transform 0.1s, opacity 0.2s; }
.petActor { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform: translate(-50%, -50%); transition: transform 0.1s; }
.enemyActor img, .petActor img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }

/* Buff Icons - 元のサイズ、位置を上に調整 */
.buffRow { display: flex; gap: 1px; position: absolute; top: -58px; left: 50%; transform: translateX(-50%); z-index: 10; }
.buffIcon { width: 24px; height: 24px; border-radius: 4px; background: rgba(0,0,0,0.6); border: 1px solid #fff; color: #fff; font-size: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; overflow: hidden; }
.buffIcon.buff { border-color: var(--good); color: var(--good); }
.buffIcon.debuff { border-color: var(--bad); color: var(--bad); }

/* Bars - シールドバーの位置調整 */
.miniHpBar, .miniShieldBar { position: absolute; width: 80px; height: 6px; background: #000; border: 1px solid #444; border-radius: 4px; overflow: hidden; left: 50%; transform: translateX(-50%); }
.miniHpBar { top: -20px; }
.miniShieldBar { top: -32px; }
.miniHpFill { height: 100%; background: #ff5c7a; width: 100%; transition: width 0.1s; }
.miniShieldFill { height: 100%; background: #7cc7ff; width: 100%; transition: width 0.1s; }

/* FX */
.shieldFX{ position:absolute; width: 420px; height: 420px; border-radius: 999px; transition: opacity .3s ease, transform 0.3s ease-out; pointer-events:none; opacity: 0; }
.shieldFX.player { 
  left: 50%; top: 50%; margin-left: -210px; margin-top: -210px;
  border: 5px solid rgba(124,199,255,.8); 
  box-shadow: 0 0 60px rgba(124,199,255,.5), inset 0 0 30px rgba(124,199,255,.3); 
  background: radial-gradient(circle at 50% 55%, rgba(124,199,255,.2), rgba(0,0,0,0) 60%);
  transform: scale(0);
}
.enemyShieldFX { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%) scale(0.2); border-radius: 50%; border: 2px solid rgba(255, 92, 122, 0.6); background: radial-gradient(circle, rgba(255,92,122,0.2) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; }
.enemyShieldFX.active { opacity: 1; }

.breakOverlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); font-size: 80px; font-weight: 1000; color: #ff0033; text-shadow: 0 0 20px rgba(255,0,0,0.8); opacity: 0; pointer-events: none; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 450; }
.breakOverlay.show { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }

/* --- KP Gauge & Notification (New) --- */
#kpBarContainer {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 300px;
  background: rgba(0,0,0,0.6);
  border: 2px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  z-index: 20;
}
#kpBar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%; height: 0%;
  background: linear-gradient(0deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
  transition: height 0.2s;
}
#kpBar.max {
  background: linear-gradient(0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  animation: rainbowFlow 2s linear infinite;
}
@keyframes rainbowFlow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

#kpText {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  font-weight: 900; color: #fff; text-shadow: 0 0 4px #000; font-size: 14px;
}

/* ★ここを置き換え（召喚可能！の位置をKPゲージ上へ） */
#kpNotification {
  position: absolute;

  /* KPゲージの“上端”に合わせる（KPゲージ高さ300pxの半分=150pxを利用） */
  top: calc(50% - 150px + 295px); /* 56px は通知の高さぶんの逃がし。必要なら調整OK */
  left: 10px;                   /* 左端に寄せる */
  transform: translateX(0);

  background: rgba(255, 215, 0, 0.15);
  color: #000;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 80;
  white-space: pre-line;
  text-align: left;
  max-width: 150px;
}
#kpNotification.show { opacity: 1; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.5); } 50% { box-shadow: 0 0 16px rgba(255,215,0,0.9); } }

/* --- Tactical Circle (New) --- */
#tacticalOverlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.2s;
}
#tacticalOverlay.hidden { opacity: 0; pointer-events: none; }

#tacticalCircle {
  position: relative; width: 300px; height: 300px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.6);
}
.tacItem {
  position: absolute; width: 80px; height: 80px;
  background: rgba(255,255,255,0.1); border: 2px solid #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  color: #fff; font-size: 12px; font-weight: bold; text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.tacItem span { font-size: 24px; margin-bottom: 4px; display: block; }
.tacItem.up    { top: 10px; left: 50%; transform: translateX(-50%); border-color: #7cc7ff; }
.tacItem.down  { bottom: 10px; left: 50%; transform: translateX(-50%); border-color: #ff5c7a; }
.tacItem.left  { left: 10px; top: 50%; transform: translateY(-50%); border-color: #ffd166; }
.tacItem.right { right: 10px; top: 50%; transform: translateY(-50%); border-color: #39d98a; }
.tacCenter {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #aaa; font-size: 14px;
}

/* --- Typing Display --- */
.typingCard {
  position: absolute;
  top: 20px;
  left: 60px; /* KPゲージ避け */
  min-width: 520px;
  background: rgba(13, 20, 40, 0.5); 
  border: 2px solid rgba(124, 199, 255, 0.5);
  border-radius: 16px;
  padding: 20px 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  z-index: 500;
}

.label { color: #7cc7ff; font-weight: 900; letter-spacing: 0.1em; font-size: 13px; margin-bottom: 4px; opacity: 0.8; }
.meta.large { margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }

.wordDisplay {
  font-family: 'Consolas', 'Monaco', monospace; 
  font-size: 64px; font-weight: 900; letter-spacing: 0.05em;
  display: flex; flex-wrap: wrap; gap: 2px; line-height: 1.1;
  text-shadow: 2px 4px 0 rgba(0,0,0,0.3);
}
.wordDisplay .ch { display: inline-block; color: #556; border-bottom: 3px solid transparent; }
.wordDisplay .done { color: #4facfe; text-shadow: 0 0 10px rgba(79, 172, 254, 0.6); }
.wordDisplay .next { color: #ff7eb3; border-bottom-color: #ff7eb3; transform: scale(1.1); text-shadow: 0 0 15px rgba(255, 126, 179, 0.8); }
.wordDisplay .space { width: 20px; border-bottom: 2px dashed #444; }

.subMetaRow { display: flex; gap: 30px; }
.subText { color: #e7eefc; font-size: 24px; font-weight: 700; text-shadow: 1px 2px 4px rgba(0,0,0,0.5); }

.projectiles{ position:absolute; inset:0; pointer-events:none; z-index: 150; }
.bullet{ position:absolute; width: 40px; height: 40px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-weight:1000; background: rgba(20,90,180,.35); border: 1px solid rgba(124,199,255,.55); color: #e7f6ff; transform: translate(-50%,-50%); }
.enemyBullet{ background: rgba(255,92,122,.20); border: 1px solid rgba(255,92,122,.55); color: #ffe7ee; }

.battleFooter{ position:absolute; right: 16px; bottom: 16px; z-index: 100; }
.toast{ position:absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15); color:#fff; padding: 10px 14px; border-radius: 999px; opacity:0; transition: opacity .12s ease, transform .12s ease; z-index: 200; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-6px); }

.tooltip{ position: fixed; z-index: 250; background: rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.3); border-radius: 14px; padding: 10px 12px; max-width: 320px; font-size: 12px; color: #fff; pointer-events:none; box-shadow: var(--shadow); }
.tooltip .tName{ font-weight:1000; margin-bottom:6px; font-size: 14px; color: var(--warn); }
.tooltip .tBlue{ color:#7cc7ff; }

/* Damage Popups */
.damageLayer { position: absolute; inset: 0; pointer-events: none; z-index: 400; }
.popText {
  position: absolute; font-weight: 900; white-space: nowrap;
  animation: popUp 0.5s ease-out forwards;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}
.popText.normal { color: #fff; font-size: 24px; }
.popText.crit { color: #ff3333; font-size: 42px; font-weight: 1000; text-shadow: 2px 2px 0 #000; z-index: 401; }
.popText.miss { color: #aaa; font-size: 20px; }
@keyframes popUp {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(2.0); }
  25% { transform: translate(-50%, -100%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -200%) scale(0.5); }
}

/* Common */
.modal{ position: fixed; inset:0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal.hidden{ display:none; }
.modalCard{ width: min(520px, 92vw); background: #0b142b; border:1px solid var(--line); border-radius: var(--r2); padding: 14px; box-shadow: var(--shadow); }
.modalTitle{ font-weight:1000; margin-bottom:10px; }
.modalBody{ color: var(--text); opacity:.95; margin-bottom:12px; }
.primary.danger{ background: linear-gradient(180deg, #d84a63, #a22f43); }

/* QR, Loading, Story, Result styles are same as V3 base, kept for consistency */
.qrOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.qrBox { background: #0b142b; border: 1px solid var(--line); border-radius: var(--r2); padding: 16px; width: 90%; max-width: 400px; text-align: center; }
.qrViewport { position: relative; width: 100%; padding-bottom: 100%; background: #000; overflow: hidden; border-radius: 8px; }
#qrVideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

#screenLoading { display: flex; align-items: center; justify-content: center; height: 100vh; }
.loadingBox { width: 300px; text-align: center; }
.loadingTitle { font-size: 24px; font-weight: 900; letter-spacing: 0.1em; margin-bottom: 20px; color: var(--accent); }
.loadingBarFrame { width: 100%; height: 8px; background: #0c1630; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.loadingBarFill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #fff); transition: width 0.1s; }

#screenStory { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 2000; display: flex; flex-direction: column; }
#storyBgContainer { position: absolute; inset: 0; z-index: 1; opacity: 0.6; }
#storyBgContainer img, #storyBgContainer video { width: 100%; height: 100%; object-fit: cover; }
#storyChar { position: absolute; bottom: 0; height: 80%; z-index: 2; transition: 0.3s; }
#storyChar.left { left: 5%; filter: drop-shadow(0 0 20px #000); }
#storyChar.right { right: 5%; filter: drop-shadow(0 0 20px #000); }
#storyWindow { position: absolute; bottom: 20px; left: 5%; right: 5%; height: 160px; background: rgba(0, 0, 0, 0.85); border: 2px solid #fff; border-radius: 12px; padding: 20px; z-index: 10; font-size: 18px; line-height: 1.6; cursor: pointer; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
#storyName { color: var(--warn); font-weight: bold; margin-bottom: 8px; }
#storyText { color: #fff; white-space: pre-wrap; }
.blinking { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

.resultBox { max-width: 600px; margin: 40px auto; background: #0b142b; border: 1px solid var(--line); border-radius: var(--r2); padding: 30px; box-shadow: var(--shadow); text-align: center; }
.resultSummary { font-size: 16px; color: var(--text); margin-bottom: 20px; line-height: 1.6; }
.resultExpContainer { background: rgba(0,0,0,0.3); padding: 16px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 20px; position: relative; }
.resultLvLabel { font-weight: 900; font-size: 18px; color: var(--accent); }
.levelUpText { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 48px; font-weight: 1000; color: #ffd700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 2px 2px 0 #000; pointer-events: none; opacity: 0; transition: all 0.3s; }
.levelUpText.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.dropBox { margin-top: 20px; text-align: left; }
/* ==========================================
   レスポンシブ対応 (1366x768 Chromebook向け)
   ========================================== */

/* 小さい画面向けの調整 */
@media screen and (max-height: 800px) {
  #app { padding: 8px; }
  
  .hud { gap: 8px; margin-bottom: 8px; }
  .hudCard { padding: 8px 10px 6px; border-radius: 14px; min-width: 200px; }
  .hudCard.mini { flex: 0 0 120px; min-width: 120px; }
  .hudCard.btns { flex: 0 0 100px; min-width: 100px; }
  .hudTitle { font-size: 10px; margin-bottom: 4px; }
  .hudBig { font-size: 20px; }
  .hudSmall { font-size: 10px; }
  .barRow { margin: 4px 0; gap: 6px; }
  .bar { height: 8px; }
  .barText, .barLabel { font-size: 10px; }
  .iconBtn { width: 36px; height: 36px; border-radius: 10px; }
  
  .panel { min-height: auto; padding: 10px; border-radius: 16px; }
  .panelHeader { margin-bottom: 6px; }
  .panelTitle { font-size: 16px; }
  .panelDivider { margin: 8px 0; }
  
  .grid2 { gap: 8px; }
  
  /* マップ */
  .mapBox { padding: 8px; border-radius: 12px; }
  #mapSvg { max-height: 280px; }
  
  /* バトル画面 */
  #battleBg { min-height: 280px; height: 45vh; }
  #battleField { height: 280px; }
  .typeBox { padding: 10px 16px; border-radius: 12px; }
  .typed { font-size: 24px; }
  .typeHint { font-size: 10px; }
  
  /* プレイヤー・敵 */
  #playerSpriteContainer { bottom: 20px; width: 100px; height: 120px; }
  #playerSpriteContainer img { max-height: 110px; }
  .enemyHpRow { margin: 1px 0; }
  .enemyHpRow .bar { height: 5px; }
  
  /* インベントリ */
  #invList { max-height: 280px; }
  .invItem { padding: 6px 8px; }
  .invName { font-size: 11px; }
  .invOpts { gap: 3px; }
  .optPill { font-size: 9px !important; padding: 2px 4px !important; }
  
  /* 装備スロット */
  .equipColumn { gap: 6px; }
  .slot { height: 48px; border-radius: 10px; }
  .slot img { height: 36px; }
  .ringBtn { height: 30px !important; }
  .ringBtn img { width: 22px !important; height: 22px !important; }
  
  /* ステータス */
  #totalStats { font-size: 11px; }
  
  /* 召喚通知 */
  #summonNotification { font-size: 10px; padding: 6px 10px; }
  
  /* ボタン */
  button { padding: 8px 14px; font-size: 12px; }
  button.small { padding: 4px 8px; font-size: 10px; }
}

/* さらに小さい画面 (高さ700px以下) */
@media screen and (max-height: 700px) {
  #app { padding: 4px 8px; }
  
  .hud { gap: 4px; margin-bottom: 4px; }
  .hudCard { padding: 4px 8px; }
  .hudBig { font-size: 16px; }
  .bar { height: 6px; }
  
  .panel { padding: 8px; min-height: auto; }
  .panelTitle { font-size: 14px; }
  
  #battleBg { min-height: 220px; height: 40vh; }
  #battleField { height: 220px; }
  .typed { font-size: 20px; }
  
  #invList { max-height: 220px; }
  
  /* マップSVGの高さを調整 */
  #mapSvg { max-height: 220px; }
}

/* 横幅が狭い場合 */
@media screen and (max-width: 1400px) {
  #app { max-width: 100%; }
  .grid2 { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 1200px) {
  .hudCard { min-width: 180px; }
  .hudCard.mini { flex: 0 0 100px; min-width: 100px; }
  .hudCard.btns { flex: 0 0 80px; min-width: 80px; }
}

/* モバイル向け（縦画面）*/
@media screen and (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  .hud { flex-wrap: wrap; }
  .hudCard { min-width: 150px; }
}

/* ツールチップの位置調整 */
@media screen and (max-height: 800px) {
  #tooltip {
    max-width: 280px;
    font-size: 11px;
    padding: 8px 10px;
  }
  #tooltip .tName { font-size: 13px; }
}
/* ★v16: バトルアイテムメニュー */
.battleItemOverlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:800; display:flex; align-items:center; justify-content:center; }
.battleItemOverlay.hidden{ display:none; }
.battleItemCard{ background:linear-gradient(135deg,#0d1829,#1a2740); border:2px solid #ffd166; border-radius:16px; padding:20px; min-width:320px; max-width:400px; }
.battleItemBtn{ display:block; width:100%; padding:10px 14px; margin:6px 0; background:rgba(255,255,255,.06); border:1px solid #334; border-radius:8px; cursor:pointer; text-align:left; color:#fff; }
.battleItemBtn:hover:not(:disabled){ background:rgba(255,209,102,.15); border-color:#ffd166; }
.battleItemBtn:disabled{ opacity:.4; cursor:default; }
@keyframes fadeOut{ from{opacity:1;} to{opacity:0;} }

@keyframes berserkPulse { from { filter: brightness(1.0); } to { filter: brightness(2.5) saturate(0.3); } }


@keyframes reflectBlink { from { opacity: 1; } to { opacity: 0.3; } }


#hotaruBarContainer {
  position: absolute;
  left: 42px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 300px;
  background: rgba(0,0,0,0.6);
  border: 2px solid #39d98a;
  border-radius: 12px;
  overflow: hidden;
  z-index: 20;
}
#hotaruBarBg {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%; height: 100%;
  background: linear-gradient(0deg, rgba(0,80,0,0.3), rgba(0,40,0,0.1));
}
#hotaruBar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%; height: 0%;
  background: linear-gradient(0deg, #1a6b1a, #39d98a, #66ff99, #39d98a);
  background-size: 100% 200%;
  animation: hotaruFlicker 2s ease-in-out infinite alternate;
  transition: height 0.3s;
  box-shadow: 0 0 10px rgba(57,217,138,0.5) inset;
}
@keyframes hotaruFlicker {
  0% { background-position: 0% 0%; opacity: 0.8; }
  50% { opacity: 1; }
  100% { background-position: 0% 100%; opacity: 0.85; }
}
#hotaruBarText {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  font-weight: 900; color: #39d98a; text-shadow: 0 0 4px #000; font-size: 12px;
  white-space: nowrap;
}

/* ★v20: 装備強化+99虹色アニメーション */
@keyframes enhRainbow {
  0%   { border-color: #ff0000; outline-color: #ff0000; }
  14%  { border-color: #ff7f00; outline-color: #ff7f00; }
  28%  { border-color: #ffff00; outline-color: #ffff00; }
  42%  { border-color: #00ff00; outline-color: #00ff00; }
  57%  { border-color: #0000ff; outline-color: #0000ff; }
  71%  { border-color: #4b0082; outline-color: #4b0082; }
  85%  { border-color: #9400d3; outline-color: #9400d3; }
  100% { border-color: #ff0000; outline-color: #ff0000; }
}

/* ===== PvP Styles ===== */
.pvp-stat-row { display:flex; flex-direction:column; gap:4px; align-items:center; background:#0d1829; padding:6px; border-radius:6px; }
.pvp-stat-btn { padding:2px 6px; background:#1a2540; border:1px solid #445; border-radius:4px; color:#aaa; cursor:pointer; font-size:11px; min-width:28px; }
.pvp-stat-btn:hover { border-color:#7cc7ff; color:#fff; }

/* PvP プレイヤー表示 */
.pvp-player-unit { position:absolute; text-align:center; z-index:10; }
.pvp-player-name { color:#ff7eb3; font-size:11px; font-weight:bold; text-shadow:0 0 4px rgba(255,92,122,0.5); margin-bottom:2px; white-space:nowrap; }
.pvp-player-img { transform: scaleX(-1); image-rendering:pixelated; }
.pvp-player-hpbar { height:8px; background:#333; border-radius:4px; margin:2px auto; overflow:hidden; }
.pvp-player-hpbar-fill { height:100%; background:linear-gradient(90deg,#ff3333,#39d98a); border-radius:4px; transition:width 0.2s; }
.pvp-player-shieldbar { height:5px; background:#222; border-radius:3px; margin:1px auto; overflow:hidden; }
.pvp-player-shieldbar-fill { height:100%; background:linear-gradient(90deg,#3388ff,#7cc7ff); border-radius:3px; transition:width 0.2s; }
.pvp-player-hp-text { color:#aaa; font-size:11px; }

/* PvP 待機画面 */
#pvpWaitPlayers .pvp-wait-player { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:4px; margin-bottom:4px; }
#pvpWaitPlayers .pvp-wait-player.host { background:#1a2540; }
#pvpWaitPlayers .pvp-wait-player .pvp-wait-icon { font-size:16px; }
#pvpWaitPlayers .pvp-wait-player .pvp-wait-name { color:#fff; font-size:13px; }
#pvpWaitPlayers .pvp-wait-player .pvp-wait-tag { color:#ffd166; font-size:10px; margin-left:auto; }

/* PvP 結果画面 */
.pvp-rank-row { display:flex; align-items:center; gap:10px; padding:8px; border-radius:6px; margin-bottom:4px; }
.pvp-rank-row.winner { background:linear-gradient(135deg,#2a1a00,#3a2a00); border:1px solid #ffd166; }
.pvp-rank-row.loser { background:#0d1829; }
.pvp-rank-row.me { border-left:3px solid #7cc7ff; }
.pvp-rank-medal { font-size:20px; min-width:30px; text-align:center; }
.pvp-rank-name { color:#fff; font-weight:bold; flex:1; }
.pvp-rank-stats { color:#888; font-size:11px; }

/* PvP HUD (バトル中) */
.pvp-hud-badge { position:absolute; top:4px; left:50%; transform:translateX(-50%); background:rgba(255,92,122,0.2); border:1px solid #ff5c7a; border-radius:6px; padding:2px 10px; color:#ff7eb3; font-size:11px; font-weight:bold; z-index:100; }


@media (max-width: 900px){
  .mapCurrencyStrip{ justify-content:stretch; }
  .mapIngotChip{ width:100%; min-width:0; }
  .walletCurrencyValue{ font-size:18px; }
}


.playerTitleBadge, .equipTitleBadge {
  position:absolute; left:50%; transform:translateX(-50%); z-index:22; white-space:nowrap;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
.playerTitleBadge{ top:-58px; }
.equipTitleBadge{ top:6px; }
.playerTitleBadge.hidden, .equipTitleBadge.hidden, .pvpResultReward.hidden{ display:none; }
.titleBadgeCore{
  display:inline-flex; align-items:center; justify-content:center; padding:4px 12px; border-radius:999px;
  font-weight:900; font-size:12px; letter-spacing:.04em; text-shadow:0 0 6px rgba(0,0,0,.45);
}
.pvpCosmeticCard{ width:min(920px, 96vw); max-height:92vh; overflow:hidden; }
.pvpCosmeticWallet{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:12px; border:1px solid rgba(255,209,102,.24); border-radius:14px; background:linear-gradient(135deg,rgba(44,31,0,.85),rgba(18,22,38,.95)); }
.pvpCosmeticWallet img{ width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.pvpCosmeticTabs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.pvpCosmeticTab{ padding:10px 8px; border-radius:12px; border:1px solid #3d4a63; background:#12192a; color:#b9c8df; font-weight:700; cursor:pointer; }
.pvpCosmeticTab.active{ background:linear-gradient(135deg,#2d3755,#1d2740); color:#fff; border-color:#7cc7ff; box-shadow:0 0 0 1px rgba(124,199,255,.3) inset; }
.pvpCosmeticContent{ max-height:58vh; overflow:auto; padding-right:4px; }
.pvpCosmeticList{ display:grid; gap:10px; }
.pvpCosmeticCardRow{ display:grid; grid-template-columns:104px 1fr auto; gap:12px; align-items:center; padding:12px; border-radius:14px; border:1px solid #313c55; background:linear-gradient(135deg,#10182a,#151f34); }
.pvpCosmeticPreview{ width:104px; min-height:76px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), rgba(15,20,32,.85)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pvpCosmeticPreview img{ width:92px; height:92px; object-fit:contain; }
.pvpCosmeticMeta{ display:grid; gap:6px; }
.pvpCosmeticNameRow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pvpCosmeticDesc{ color:#91a0bb; font-size:12px; line-height:1.45; }
.pvpCostChip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(255,209,102,.12); color:#ffd166; font-size:12px; font-weight:800; }
.pvpCostChip img{ width:16px; height:16px; object-fit:contain; }
.pvpActionCol{ display:grid; gap:8px; justify-items:end; }
.pvpOwnedBadge{ color:#39d98a; font-size:12px; font-weight:700; }
.pvpEquipGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.pvpSimpleCard{ padding:12px; border-radius:14px; border:1px solid #313c55; background:linear-gradient(135deg,#10182a,#151f34); display:grid; gap:8px; }
.pvpSimplePreview{ height:84px; border-radius:12px; background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), rgba(15,20,32,.85)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pvpSimplePreview img{ width:88px; height:88px; object-fit:contain; }
.pvpResultReward{ margin-bottom:12px; padding:10px 12px; border-radius:12px; background:linear-gradient(135deg,rgba(71,50,0,.92),rgba(24,30,48,.95)); border:1px solid rgba(255,209,102,.32); color:#ffe2a3; font-weight:800; }
.pvpTitleInline{ display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:900; letter-spacing:.04em; }