/* ============================================================
   区別ニュースRPG入口(gate)スタイル
   素材パス・寸法は theme.json の gate セクションから
   CSS変数(--gate-*)として gate-main.js が注入する
   ============================================================ */

.gate-body { background: #0f0f1e; overflow: hidden; }

#gate-app {
  position: fixed;
  inset: 0;
  font-family: var(--font-family);
}

.gate-screen { position: absolute; inset: 0; }

.gate-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- 市民キャラ(区選択画面) ---------- */
#gate-citizen {
  position: absolute;
  left: var(--gate-citizen-x, 63%);
  top: var(--gate-citizen-y, 82%);
  width: var(--gate-citizen-size, 76px);
  height: var(--gate-citizen-size, 76px);
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.4));
}
#gate-citizen img { width: 100%; height: 100%; image-rendering: pixelated; }

#gate-citizen.gate-idle-bob { animation: gateBob 1.3s steps(2) infinite; }
@keyframes gateBob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -5px; }
}

#gate-citizen.gate-jump-up { animation: gateJumpUp var(--gate-jump-dur, 700ms) cubic-bezier(0.5, -0.4, 0.7, 1) forwards; }
@keyframes gateJumpUp {
  0% { translate: 0 0; scale: 1 1; }
  18% { translate: 0 6px; scale: 1.15 0.75; }   /* しゃがみ込み */
  40% { translate: 0 -40vh; scale: 0.95 1.1; }
  100% { translate: 0 -120vh; scale: 0.9 1.1; opacity: 1; }
}

/* ---------- 白枠RPGメニュー(区選択) ---------- */
#ward-menu {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: min(280px, 44vw);
  padding: 18px 20px;
  border: 12px solid transparent;
  border-image: var(--gate-menu-frame) var(--gate-menu-slice, 24) fill / 14px stretch;
  color: #ffffff;
}

#menu-city {
  margin: 0 0 10px;
  font-size: 1.25rem;
  text-align: center;
  color: #ffffff;
  text-shadow: 2px 2px 0 #000;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 8px;
}

#ward-list { list-style: none; margin: 0; padding: 0; }
#ward-list li + li { margin-top: 2px; }

.ward-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-family);
  font-size: 1.05rem;
  color: #ffffff;
  background: transparent;
  border: none;
  padding: 9px 8px 9px 26px;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
}
.ward-item::before {
  content: "▶";
  position: absolute;
  left: 4px;
  opacity: 0;
  color: #f5d76e;
}
.ward-item:hover, .ward-item:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}
.ward-item:hover::before, .ward-item:focus-visible::before {
  opacity: 1;
  animation: cursorBlink 0.7s steps(2) infinite;
}
@keyframes cursorBlink { 50% { opacity: 0.3; } }

/* ---------- 記事一覧画面(鍵穴背景) ---------- */
#news-panel {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  border: 12px solid transparent;
  border-image: var(--gate-panel-frame) var(--gate-panel-slice, 24) fill / 14px stretch;
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* PC: 左パネルで鍵穴背景を大きく見せる */
@media (min-width: 768px) {
  #news-panel {
    left: 3%;
    top: 5%;
    bottom: 5%;
    width: min(420px, 42vw);
    padding: 14px 16px;
  }
}

/* スマホ: 鍵穴画像を全面背景にし、半透明パネルを重ねて一体に見せる */
@media (max-width: 767px) {
  #news-panel {
    left: 3%;
    right: 3%;
    top: 30%;
    bottom: 3%;
    padding: 12px 12px;
  }
}

#news-header { flex-shrink: 0; }
#news-back { font-size: 0.8rem; padding: 5px 10px; margin-bottom: 8px; }

#news-heading {
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  color: #f5d76e;
  text-shadow: 2px 2px 0 #000;
}

.news-source { margin: 0 0 8px; font-size: 0.7rem; opacity: 0.75; }

#news-list { list-style: none; margin: 0; padding: 0; }
#news-list li + li { margin-top: 6px; }

.news-item {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px; /* 指で押しやすいサイズ */
  text-align: left;
  font-family: var(--font-family);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(245, 215, 110, 0.28);
  touch-action: pan-y;
  animation: newsItemIn 0.3s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
}
@keyframes newsItemIn {
  from { translate: -14px 0; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}
.news-item:hover, .news-item:focus-visible {
  background: rgba(245, 215, 110, 0.18);
  border-color: #f5d76e;
  outline: none;
}

.news-thumb {
  width: 52px;
  height: 38px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  flex-shrink: 0;
}

.news-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.news-title { font-size: clamp(0.9rem, 3.4vw, 1rem); line-height: 1.45; }
.news-meta { font-size: 0.72rem; color: #f5d76e; opacity: 0.9; }
.news-read-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 2px;
  font-size: 0.76rem;
  color: #f5d76e;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-excerpt {
  font-size: 0.75rem;
  opacity: 0.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-empty {
  padding: 24px 8px;
  text-align: center;
  opacity: 0.85;
  animation: blink 1.4s steps(2) infinite;
}

/* ---------- 鍵穴吸い込み演出 ---------- */
.gate-suck-sprite {
  position: absolute;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition-property: left, top, transform;
  transition-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4);
  pointer-events: none;
  z-index: 6;
}
.gate-suck-sprite img { width: 100%; image-rendering: pixelated; }

.gate-vortex {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  animation: vortexSpin 1s linear infinite, vortexIn 0.3s ease-out;
  opacity: 0.9;
}
@keyframes vortexSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes vortexIn { from { opacity: 0; } }

/* ---------- 読み込み ---------- */
#gate-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  animation: blink 1s steps(2) infinite;
}

/* ---------- 狭い縦画面の微調整 ---------- */
@media (max-width: 480px) {
  #ward-menu { width: min(240px, 62vw); left: 5%; padding: 14px 14px; }
  .ward-item { min-height: 44px; font-size: 1rem; padding: 10px 6px 10px 24px; }
  #menu-city { font-size: 1.1rem; }
  .news-item { min-height: 56px; padding: 12px 12px; }
}
@media (max-height: 520px) {
  #ward-menu { top: 48%; padding: 10px 12px; }
  .ward-item { padding: 6px 6px 6px 24px; font-size: 0.92rem; }
  #news-panel { top: 12%; }
}

/* ---------- Home画面: 徘徊する市民たち ---------- */
#gate-citizens { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.gate-wanderer {
  position: absolute;
  transform: translate(-50%, -100%); /* 足元基準 */
  pointer-events: none;
  transition-property: left, top;
  transition-timing-function: linear;
}
/* 接地影: ドロップシャドウではなく足元の楕円影で地面に馴染ませる */
.gate-wanderer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 70%;
  height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: -1;
}
.gate-wanderer img { width: 100%; height: 100%; image-rendering: pixelated; }
.gate-wanderer.flip img { transform: scaleX(-1); }
.gate-wanderer.walking { animation: gateWalkHop 0.32s steps(2) infinite; }
@keyframes gateWalkHop {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -4px; }
}
.gate-wanderer.gate-jump-up { animation: gateJumpUp var(--gate-jump-dur, 700ms) cubic-bezier(0.5, -0.4, 0.7, 1) forwards; }

/* 記事クリック時: 慌てて騒ぐ市民 */
.gate-scurry { z-index: 6; animation: gateScurryHop 0.22s steps(2) infinite; }
@keyframes gateScurryHop {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -8px; }
}
.gate-scurry-out { animation: gateScurryOut 0.25s ease-in forwards !important; }
@keyframes gateScurryOut { to { scale: 0; opacity: 0; } }

/* パラグライダーで鍵穴の風景へ */
.gate-paraglider {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 7;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.3));
}
.gate-paraglider img { width: 100%; image-rendering: pixelated; }