:root{--hud-scale:1;--ui-text-scale:1;--damage-popup-scale:1;}
.game-body{min-height:100vh;background:linear-gradient(180deg,#06101b,#0b1523 44%,#08111d)}
.game-layout{display:grid;grid-template-columns:280px 1fr;gap:18px;max-width:1600px;margin:0 auto;padding:18px}
.game-sidebar{display:flex;flex-direction:column;gap:14px}
.side-card,.canvas-shell,.hud-top,.hud-bottom{background:rgba(10,18,32,.78);border:1px solid rgba(255,255,255,.11);border-radius:20px;backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.side-card{padding:18px}
.side-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#93afdb;margin-bottom:8px}
.side-actions{display:flex;gap:10px;flex-wrap:wrap}
.game-main{display:flex;flex-direction:column;gap:14px;font-size:calc(16px * var(--ui-text-scale));}
.canvas-shell{position:relative;padding:12px;overflow:hidden}
#gameCanvas{width:100%;height:auto;display:block;border-radius:16px;background:linear-gradient(180deg,#1f3143 0%,#152534 60%,#0a1320 100%);touch-action:none}
.overlay-panel{position:absolute;inset:24px;background:rgba(6,12,20,.92);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:18px;z-index:20;overflow:auto}
.overlay-panel.narrow{inset:56px auto auto 50%;transform:translateX(-50%);width:min(540px,calc(100% - 60px));max-height:calc(100% - 112px)}
.overlay-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.menu-grid section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:16px}
.touch-ui{position:absolute;left:14px;right:14px;bottom:18px;display:none;justify-content:space-between;align-items:end;pointer-events:none;z-index:18}
.touch-ui.enabled{display:flex}
.touch-pad{width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);position:relative;pointer-events:auto;touch-action:none}
.touch-knob{width:64px;height:64px;border-radius:50%;background:rgba(111,170,255,.72);position:absolute;left:43px;top:43px;box-shadow:0 10px 24px rgba(45,102,216,.45)}
.touch-actions{display:grid;grid-template-columns:repeat(4,minmax(0,88px));gap:8px;pointer-events:auto;align-self:end}
.touch-actions button{width:auto;min-height:72px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(13,26,48,.9);color:#fff;font-weight:700;font-size:14px;padding:8px 6px;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.2;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.touch-actions .touch-label{font-size:12px;opacity:.96;margin-bottom:5px;text-align:center}
.touch-actions .touch-key{font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.touch-actions .attack{background:linear-gradient(180deg,#24354b,#17263a)}
.touch-actions .heavy{background:linear-gradient(180deg,#4b2d24,#352018)}
.touch-actions .dodge{background:linear-gradient(180deg,#23454b,#173238)}
.touch-actions .guard{background:linear-gradient(180deg,#3a304d,#261f36)}
.touch-actions .skill{background:linear-gradient(180deg,#203c57,#14283a)}
.touch-actions .item{background:linear-gradient(180deg,#324824,#1f3216)}
.touch-actions .interact{background:linear-gradient(180deg,#4b4730,#322f1f)}
.touch-actions .ultimate{background:linear-gradient(180deg,#5b283c,#3f1b29)}
.skill-row{display:flex;gap:12px;flex-wrap:wrap}
.skill-card{min-width:135px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.skill-card small{display:block;color:#95aed6;margin-bottom:5px}
.skill-meta{margin-top:8px;color:#9bb8e8;font-size:12px}
.bottom-actions{display:flex;gap:12px;flex-wrap:wrap}
.expanded-grid{grid-template-columns:repeat(3,1fr)}
.interaction-hint{position:absolute;left:50%;bottom:180px;transform:translateX(-50%);padding:12px 16px;border-radius:999px;background:rgba(5,10,18,.75);border:1px solid rgba(255,255,255,.12);opacity:0;pointer-events:none;transition:.2s ease;z-index:19}
.interaction-hint.visible{opacity:1}
.mini-card{padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:10px;line-height:1.6}
.mini-card.active{border-color:rgba(136,176,255,.7);background:rgba(70,102,170,.16)}
#basePanel .btn,#menuPanel .btn,.overlay-panel .btn{margin-top:8px;margin-right:8px}
.result-stack{display:flex;flex-direction:column;gap:10px}
.result-line{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

.combat-mini-map{position:absolute;right:16px;top:18px;width:160px;padding:10px;border-radius:16px;background:rgba(6,12,20,.72);border:1px solid rgba(255,255,255,.12);z-index:17;backdrop-filter:blur(8px)}
.combat-mini-map canvas{display:block;width:100%;height:auto;border-radius:10px;background:rgba(255,255,255,.05)}
.combat-mini-map .mini-label{font-size:11px;color:#9bb8e8;margin-bottom:8px;display:flex;justify-content:space-between;gap:10px}
.combat-lock{position:absolute;left:16px;top:18px;max-width:260px;padding:10px 12px;border-radius:16px;background:rgba(6,12,20,.72);border:1px solid rgba(255,255,255,.12);z-index:17;backdrop-filter:blur(8px);font-size:13px;line-height:1.5}
.combat-lock strong{display:block;color:#fff}


.status-chip-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 12px;}
.status-chip{padding:8px 12px;border-radius:999px;background:rgba(17,31,48,.92);border:1px solid rgba(255,255,255,.1);font-size:12px;color:#eaf4ff;}
.status-chip.negative{background:rgba(70,24,30,.92);border-color:rgba(255,140,140,.3);color:#ffd9df;}
.status-chip.positive{background:rgba(19,47,35,.92);border-color:rgba(118,255,176,.25);color:#dcffe9;}


.phase-callout {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 72%;
  text-align: center;
  background: linear-gradient(180deg, rgba(30,16,48,.94), rgba(10,10,18,.9));
  border: 1px solid rgba(255,216,138,.55);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  pointer-events: none;
}
.phase-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #ffd875;
  margin-bottom: 8px;
}
.phase-body {
  font-size: 14px;
  line-height: 1.8;
  color: #f7f2ff;
}


.photo-banner {
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  text-align: center;
  pointer-events: none;
}

body.photo-mode .game-side,
body.photo-mode .hud-top,
body.photo-mode .status-chip-row,
body.photo-mode .hud-bottom,
body.photo-mode .combat-lock,
body.photo-mode .combat-mini-map,
body.photo-mode .interaction-hint,
body.photo-mode .touch-ui {
  display: none !important;
}

body.photo-mode .game-wrap {
  grid-template-columns: 1fr;
}

body.photo-mode .canvas-shell {
  min-height: calc(100vh - 32px);
}

body.photo-mode #gameCanvas {
  width: min(1200px, 100%);
  height: auto;
  aspect-ratio: 16 / 9;
}


.event-banner {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 360px;
  max-width: min(82vw, 720px);
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(12,18,28,.94), rgba(22,30,44,.9));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  z-index: 8;
  text-align: center;
  backdrop-filter: blur(6px);
}
.event-banner-tone {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .08em;
  opacity: .92;
  margin-bottom: 6px;
  background: rgba(255,255,255,.1);
}
.event-banner-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.event-banner-body {
  font-size: .9rem;
  line-height: 1.45;
  opacity: .92;
}
.event-banner.tone-achievement .event-banner-tone { background: rgba(255, 205, 72, .18); color: #ffe08a; }
.event-banner.tone-achievement { border-color: rgba(255, 205, 72, .35); }
.event-banner.tone-quest .event-banner-tone { background: rgba(96, 196, 255, .18); color: #8fd8ff; }
.event-banner.tone-quest { border-color: rgba(96, 196, 255, .3); }
.event-banner.tone-region .event-banner-tone { background: rgba(122, 255, 168, .18); color: #b7ffcc; }
.event-banner.tone-region { border-color: rgba(122, 255, 168, .28); }
.event-banner.tone-story .event-banner-tone { background: rgba(205, 140, 255, .18); color: #e3b7ff; }
.event-banner.tone-story { border-color: rgba(205, 140, 255, .28); }


.event-log-panel{
  position:absolute;
  left:18px;
  bottom:118px;
  width:260px;
  max-height:220px;
  overflow:auto;
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:16px;
  background:rgba(9,14,24,.78);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  z-index:6;
}
.event-log-item{
  display:grid;
  gap:3px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border-left:4px solid rgba(255,255,255,.18);
  font-size:12px;
}
.event-log-item strong{font-size:12px; line-height:1.35;}
.event-log-item span{opacity:.9; line-height:1.45;}
.event-log-item.tone-achievement,
.event-log-item.tone-positive{border-left-color:#7fe3a1;}
.event-log-item.tone-danger{border-left-color:#ff9e7a;}
.event-log-item.tone-story{border-left-color:#8cb8ff;}
body.photo-mode .event-log-panel{display:none!important;}


body.sidebar-hidden .game-layout {
  grid-template-columns: 1fr;
}
body.compact-ui .game-layout {
  gap: 10px;
}
body.compact-ui .side-card,
body.compact-ui .mini-card {
  padding: 10px;
}
body.compact-ui .hud-top {
  gap: 8px;
}
body.compact-ui .hud-bar-wrap {
  padding: 6px 8px;
}
body.compact-ui .hud-meta {
  gap: 6px;
}
body.compact-ui .event-log-panel {
  max-width: 240px;
}

.critical-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 42%, rgba(140,12,26,0.18) 68%, rgba(180,18,38,0.38) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 7;
}

.side-card.claimable-pulse {
  box-shadow: 0 0 0 1px rgba(255,194,96,.45), 0 0 28px rgba(255,194,96,.18), inset 0 0 0 1px rgba(255,230,160,.08);
  animation: ebQuestPulse 1.2s ease-in-out infinite;
}

.side-card.claimable-pulse .side-label::after {
  content: ' 報告可能';
  color: #ffd57a;
  font-weight: 700;
}

@keyframes ebQuestPulse {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

.icon-card{display:flex;align-items:flex-start;gap:12px}
.ui-card-icon{width:44px;height:44px;flex:0 0 44px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.icon-card .ui-card-icon + .ui-card-icon{margin-left:-8px}
.icon-card>div{min-width:0}