/* ============================================
   L'Arca ~AI実験場~ | Phase 2 Design System
   ============================================ */

/* ----- Reset & Base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #0a0a1a;
  color: #f8f4ec;
  font-family: 'DotGothic16', cursive;
  font-size: 16px;
  line-height: 1.8;
  overflow-x: hidden;
  min-height: 100vh;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  pointer-events: none;
  z-index: 9998;
}

/* Horror mode body */
body.horror-mode { background: #050508; }
body.horror-mode::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,0,0.02) 2px, rgba(255,0,0,0.02) 4px);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ----- Design Tokens ----- */
:root {
  --bg-dark: #0a0a1a;
  --bg-window: #101838;
  --bg-window-grad: linear-gradient(180deg, #141c42, #0c1430);
  --border-window: #d0c8b8;
  --border-inner: #404870;
  --text-main: #f8f4ec;
  --text-dim: #8888aa;
  --text-gold: #f0c040;
  --gold: #f0c040;
  --blue: #4080f0;
  --red: #f04040;
  --green: #40c060;
  --purple: #a050e0;
  --pink: #f06090;
  --cyan: #40c8d0;
  --orange: #f09040;
}

/* ----- RPG Window Component ----- */
.rpg-window {
  background: var(--bg-window-grad);
  border: 4px solid var(--border-window);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--border-inner), 0 6px 24px rgba(0,0,0,0.5);
  padding: 16px 20px;
  color: var(--text-main);
  font-size: 14px;
  line-height: 2;
}

/* ----- RPG Button ----- */
.rpg-btn {
  display: inline-block;
  background: var(--bg-window-grad);
  border: 3px solid var(--border-window);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 4px 12px rgba(0,0,0,0.4);
  color: var(--text-main);
  padding: 10px 28px;
  font-size: 14px;
  letter-spacing: 1px;
  transition: all 0.15s ease;
}

.rpg-btn:hover {
  background: linear-gradient(180deg, #1c2858, #141c48);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 6px 20px rgba(0,0,0,0.5), 0 0 12px rgba(240,192,64,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.rpg-btn:active { transform: translateY(0); box-shadow: inset 0 0 0 1px var(--border-inner); }

/* ----- Screen System ----- */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* =============================================
   Transition Overlay
   ============================================= */
.transition-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(10, 1fr);
  pointer-events: none;
}
.t-tile { background: #000; opacity: 0; }

/* =============================================
   Opening Overlay
   ============================================= */
.opening-overlay {
  position: fixed; inset: 0; z-index: 9000; background: #000;
  display: none; justify-content: center; align-items: center; flex-direction: column; padding: 24px;
}
.opening-overlay.active { display: flex; }
.opening-window { max-width: 560px; width: 100%; min-height: 200px; font-size: 15px; line-height: 2.2; white-space: pre-wrap; }
.opening-skip { margin-top: 24px; font-size: 12px; color: var(--text-dim); animation: blink 1.2s infinite; }
.blink-cursor { display: inline-block; color: var(--gold); animation: blink 0.8s step-end infinite; margin-left: 4px; }

/* =============================================
   Dialogue Overlay (Mob / Signpost)
   ============================================= */
.dialogue-overlay {
  position: fixed; inset: 0; z-index: 8000; background: rgba(0,0,0,0.5);
  display: none; justify-content: center; align-items: center; padding: 24px;
}
.dialogue-overlay.active { display: flex; }
.dialogue-box-ui {
  max-width: 640px; width: 100%;
  background: var(--bg-window-grad);
  border: 4px solid var(--border-window);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--border-inner), 0 6px 24px rgba(0,0,0,0.5);
  padding: 20px 24px;
  position: relative;
}
.dialogue-text-ui { font-size: 15px; line-height: 2.2; white-space: pre-wrap; }
.dialogue-cursor { position: absolute; bottom: 8px; right: 14px; }

/* =============================================
   Quiz Overlay
   ============================================= */
.quiz-overlay {
  position: fixed; inset: 0; z-index: 8500; background: rgba(0,0,0,0.7);
  display: none; justify-content: center; align-items: center; padding: 24px;
}
.quiz-overlay.active { display: flex; }
.quiz-window { max-width: 520px; width: 100%; }
.quiz-question { font-size: 15px; margin-bottom: 16px; line-height: 2; }
.quiz-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.quiz-input-area { display: flex; gap: 8px; margin-top: 12px; }
.quiz-input {
  flex: 1; background: #080818; border: 2px solid var(--border-inner); border-radius: 6px;
  color: var(--text-main); font-family: inherit; font-size: 16px; padding: 8px 14px;
}
.quiz-input:focus { outline: none; border-color: var(--gold); }
.quiz-submit-btn { padding: 8px 20px; }

/* =============================================
   Glitch Overlay (Horror)
   ============================================= */
.glitch-overlay {
  position: fixed; inset: 0; z-index: 9500; background: #000;
  display: none; justify-content: center; align-items: center; overflow: hidden;
}
.glitch-overlay.active { display: flex; }
.glitch-text {
  font-size: 14px; color: var(--red); line-height: 1.2; text-align: center;
  white-space: pre-wrap; animation: glitchFlicker 0.1s infinite;
  max-width: 600px; padding: 20px;
}

@keyframes glitchFlicker {
  0% { opacity: 1; transform: translate(0,0); color: #f04040; }
  20% { opacity: 0.8; transform: translate(-2px, 1px); color: #40f040; }
  40% { opacity: 1; transform: translate(1px, -1px); color: #f04040; }
  60% { opacity: 0.6; transform: translate(-1px, 2px); color: #4040f0; }
  80% { opacity: 1; transform: translate(2px, 0); color: #f0f040; }
  100% { opacity: 0.9; transform: translate(0, -1px); color: #f04040; }
}

/* =============================================
   Void World Overlay
   ============================================= */
.void-overlay {
  position: fixed; inset: 0; z-index: 9200; background: #000;
  display: none; justify-content: center; align-items: center; flex-direction: column;
}
.void-overlay.active { display: flex; }
.void-content { text-align: center; }
.void-title { font-size: 20px; color: #333; margin-bottom: 40px; letter-spacing: 8px; }
.void-character { margin: 0 auto 40px; }
.void-text { font-size: 15px; color: var(--text-main); line-height: 2.2; white-space: pre-wrap; max-width: 500px; }

/* =============================================
   Battle Overlay
   ============================================= */
.battle-overlay {
  position: fixed; inset: 0; z-index: 9100; background: #000;
  display: none; justify-content: center; align-items: center;
}
.battle-overlay.active { display: flex; }
.battle-scene { max-width: 640px; width: 100%; padding: 20px; }
.battle-enemy-area {
  text-align: center; padding: 40px 0; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.battle-enemy-sprite { font-size: 80px; animation: enemyFloat 2s ease-in-out infinite; }
@keyframes enemyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.battle-enemy-name { font-size: 18px; color: var(--red); margin-top: 12px; letter-spacing: 4px; }
.battle-ui { display: flex; flex-direction: column; gap: 12px; }
.battle-log-window { min-height: 80px; font-size: 14px; line-height: 2; }
.battle-log { white-space: pre-wrap; }
.battle-status { display: flex; align-items: center; gap: 12px; }
.battle-hp-bar { display: flex; align-items: center; gap: 8px; width: 100%; }
.hp-label { font-size: 14px; color: var(--green); min-width: 24px; }
.hp-track {
  flex: 1; height: 16px; background: #1a1a2e; border: 2px solid var(--border-inner);
  border-radius: 4px; overflow: hidden;
}
.hp-fill { height: 100%; background: var(--green); transition: width 0.5s ease; width: 100%; }
.hp-text { font-size: 12px; color: var(--text-dim); min-width: 60px; text-align: right; }
.battle-commands { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.battle-cmd { min-width: 100px; text-align: center; }

/* Battle shake */
.battle-shake { animation: shake 0.3s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.battle-flash { animation: battleFlash 0.2s; }
@keyframes battleFlash {
  0%, 100% { background: #000; }
  50% { background: #fff; }
}

/* =============================================
   MAP SCREEN
   ============================================= */
.game-frame {
  width: 100%; max-width: 720px; padding: 24px 16px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.map-header { text-align: center; }
.game-title {
  font-size: 32px; color: var(--gold);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.6), 0 0 20px rgba(240,192,64,0.3);
  letter-spacing: 8px;
}
.game-subtitle { font-size: 14px; color: var(--text-dim); letter-spacing: 4px; margin-top: 4px; }

/* Map Viewport */
.map-viewport {
  width: 100%; display: flex; justify-content: center; overflow: hidden;
  border: 4px solid var(--border-window); border-radius: 8px;
  box-shadow: 0 0 0 2px #080818, 0 8px 32px rgba(0,0,0,0.6); background: #000;
}
.map-container { position: relative; width: 640px; height: 480px; overflow: hidden; }
#map-canvas { width: 640px; height: 480px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.map-buildings { position: absolute; inset: 0; pointer-events: none; }

/* Horror map */
body.horror-mode .map-viewport { border-color: #4a3030; }
body.horror-mode .map-container { filter: saturate(0.2) brightness(0.6); }

/* Buildings */
.building {
  position: absolute; cursor: pointer; pointer-events: all; z-index: 10;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.building:hover {
  transform: translateY(-4px) scale(1.05);
  filter: brightness(1.3) drop-shadow(0 4px 8px rgba(240,192,64,0.4));
  z-index: 20;
}
.building-sprite {
  width: 100%; height: 100%; border-radius: 3px; border: 2px solid rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.4);
}
.building-sprite::before {
  content: ''; position: absolute; bottom: 100%; left: -3px; right: -3px; height: 14px;
  background: inherit; clip-path: polygon(0% 100%, 50% 10%, 100% 100%);
  filter: brightness(0.8); border-radius: 2px 2px 0 0;
}
.building-emoji { font-size: 20px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6)); position: relative; z-index: 1; }
.building-label {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #fff; white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 4px #000;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.building:hover .building-label { opacity: 1; }

/* Special building roofs */
.building.building-castle .building-sprite::before {
  clip-path: polygon(0% 100%, 10% 40%, 10% 60%, 30% 60%, 30% 0%, 40% 0%, 40% 60%, 60% 60%, 60% 0%, 70% 0%, 70% 60%, 90% 60%, 90% 40%, 100% 100%);
  height: 20px;
}
.building.building-church .building-sprite::before {
  clip-path: polygon(0% 100%, 40% 100%, 40% 30%, 50% 0%, 60% 30%, 60% 100%, 100% 100%);
  height: 18px;
}

/* Portal - no roof, swirl effect */
.building.building-portal .building-sprite {
  border-radius: 50%; border-color: rgba(64,96,176,0.6);
  background: radial-gradient(circle, #2040a0, #0a0a2a) !important;
  box-shadow: inset 0 0 12px rgba(64,128,240,0.4), 0 0 16px rgba(64,128,240,0.3);
}
.building.building-portal .building-sprite::before { display: none; }
.building.building-portal .building-emoji { animation: portalSpin 4s linear infinite; }
@keyframes portalSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.building.building-portal::after {
  background: radial-gradient(ellipse, rgba(64,128,240,0.2), transparent 70%);
}

.building::after {
  content: ''; position: absolute; inset: -6px; border-radius: 6px;
  background: radial-gradient(ellipse, rgba(240,192,64,0.15), transparent 70%);
  animation: buildingPulse 3s ease-in-out infinite; pointer-events: none;
}

/* Horror mode buildings */
body.horror-mode .building { cursor: default; pointer-events: none; }
body.horror-mode .building .building-sprite { filter: brightness(0.3) saturate(0); }
body.horror-mode .building::after { display: none; }
body.horror-mode .building-castle { pointer-events: all; cursor: pointer; }
body.horror-mode .building-castle .building-sprite { filter: brightness(0.5); }
body.horror-mode .map-signpost { pointer-events: none; opacity: 0.2; }
body.horror-mode .map-signpost::after { display: none; }

/* Mob character on map */
.map-mob {
  position: absolute; z-index: 25; cursor: pointer; pointer-events: all;
  transition: opacity 0.5s;
}
.map-mob::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(240,192,64,0.5);
  animation: interactPulse 2s ease-in-out infinite;
  pointer-events: none;
}
.map-mob.hidden { opacity: 0; pointer-events: none; }
.map-mob.hidden::after { display: none; }

/* Signpost on map */
.map-signpost {
  position: absolute; z-index: 25; cursor: pointer; pointer-events: all;
}
.map-signpost::after {
  content: ''; position: absolute; inset: -4px; border-radius: 4px;
  border: 2px solid rgba(64,200,208,0.5);
  animation: interactPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes interactPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

/* Map character */
.map-character {
  position: absolute; z-index: 30; pointer-events: none;
  transition: none;
}

/* Map UI */
.map-ui { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hint-window { width: 100%; max-width: 640px; text-align: center; padding: 12px 20px; font-size: 13px; }

/* Horror hint */
body.horror-mode .hint-window { border-color: #4a2020; }

/* Horror map text overlay - "リロードして…" scattered on map */
.horror-map-hints {
  position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden;
}
.horror-map-text {
  position: absolute; color: var(--red); font-size: 11px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; animation: horrorTextAppear 3s ease-in forwards;
  text-shadow: 0 0 6px rgba(240,64,64,0.6);
}
@keyframes horrorTextAppear {
  0% { opacity: 0; transform: scale(0.8); }
  30% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0.9; }
  100% { opacity: 0.5; }
}

/* Horror mob 10-click text flood */
.horror-flood-container {
  position: absolute; inset: 0; overflow: hidden;
}
.horror-flood-text {
  position: absolute; color: #fff; white-space: nowrap;
  pointer-events: none; animation: floodFadeIn 0.8s ease-out forwards;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
}
@keyframes floodFadeIn {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: var(--flood-opacity, 0.7); transform: scale(1); }
}

.map-links { text-align: center; }
.portal-return {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--text-dim); font-size: 13px;
  padding: 8px 16px; border: 1px solid transparent; border-radius: 6px; transition: all 0.6s ease;
}
.portal-return-emoji { font-size: 1.5rem; transition: transform 0.6s ease, filter 0.6s ease; }
.portal-return-text { transition: color 0.6s ease, letter-spacing 0.6s ease; }
.portal-return:hover { color: var(--gold); border-color: rgba(240,192,64,0.25); }
.portal-return:hover .portal-return-emoji { transform: rotate(180deg) scale(1.2); filter: drop-shadow(0 0 8px rgba(240,192,64,0.5)); }
.portal-return:hover .portal-return-text { letter-spacing: 2px; }

/* =============================================
   AREA SCREENS (Common)
   ============================================= */
.area-screen {
  background: radial-gradient(ellipse at 50% 0%, rgba(20,28,66,0.8), transparent 60%), var(--bg-dark);
}
.area-container {
  width: 100%; max-width: 800px; padding: 32px 20px 48px;
  display: flex; flex-direction: column; gap: 24px;
}
.area-header {
  display: flex; align-items: center; gap: 12px; padding-bottom: 16px;
  border-bottom: 3px solid var(--gold);
}
.area-icon { font-size: 32px; }
.area-header h2 { font-size: 20px; color: var(--gold); text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
.area-intro { font-size: 14px; }
.btn-back { align-self: center; margin-top: 16px; }

/* Theme colors */
.castle-theme  { border-bottom-color: var(--gold); }
.weapon-theme  { border-bottom-color: var(--red); }
.armor-theme   { border-bottom-color: #6090c0; }
.item-theme    { border-bottom-color: var(--green); }
.tavern-theme  { border-bottom-color: var(--orange); }
.casino-theme  { border-bottom-color: var(--pink); }
.church-theme  { border-bottom-color: var(--cyan); }
.inn-theme     { border-bottom-color: #c08030; }
.theater-theme { border-bottom-color: var(--purple); }
.fortune-theme { border-bottom-color: #b060d0; }
.dharma-theme  { border-bottom-color: var(--gold); }
.demon-theme   { border-bottom-color: var(--purple); }

.castle-theme h2  { color: var(--gold); }
.weapon-theme h2  { color: var(--red); }
.armor-theme h2   { color: #6090c0; }
.item-theme h2    { color: var(--green); }
.tavern-theme h2  { color: var(--orange); }
.casino-theme h2  { color: var(--pink); }
.church-theme h2  { color: var(--cyan); }
.inn-theme h2     { color: #c08030; }
.theater-theme h2 { color: var(--purple); }
.fortune-theme h2 { color: #b060d0; }
.dharma-theme h2  { color: var(--gold); }
.demon-theme h2   { color: var(--purple); }

/* =============================================
   CASTLE
   ============================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item {
  background: rgba(16,24,56,0.6); border: 2px solid var(--border-inner);
  border-radius: 6px; overflow: hidden; transition: border-color 0.2s, transform 0.2s;
}
.gallery-item:hover { border-color: var(--gold); transform: translateY(-4px); }
.placeholder-img {
  aspect-ratio: 4/3; background: linear-gradient(135deg, #141c42, #0c1228);
  display: flex; align-items: center; justify-content: center; font-size: 40px; opacity: 0.5;
}
.gallery-img-wrapper { aspect-ratio: 4/3; overflow: hidden; background: #0c1228; }
.gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.gallery-item:hover .gallery-img { transform: scale(1.05); }
.item-caption { padding: 10px 12px; font-size: 12px; color: var(--text-dim); text-align: center; }

/* Throne icon in intro */
.throne-icon {
  cursor: pointer; font-size: 20px; opacity: 0.5;
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
  display: inline-block;
}
.throne-icon:hover { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 6px rgba(240,192,64,0.6)); }
.throne-icon.gimmick-ready { opacity: 0.8; animation: throneHint 2s ease-in-out infinite; }
@keyframes throneHint {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(240,192,64,0.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(240,192,64,0.8)); }
}

/* Castle secret passage */
.castle-throne { text-align: center; display: none; }
.castle-throne-btn { opacity: 0.6; }
.castle-throne-btn:hover { opacity: 1; }
.castle-secret { text-align: center; }
.secret-passage-window { border-color: var(--gold); }

/* Castle painting */
.castle-painting { text-align: center; }
.painting-frame {
  display: inline-block; padding: 8px;
  background: linear-gradient(135deg, #2a1808, #1a0c04); border: 6px solid #8a6830;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.5),
    0 0 40px rgba(240,192,64,0.15);
  margin-bottom: 16px; max-width: 100%;
}
.painting-img {
  width: 100%; max-width: 500px; display: block;
  animation: dragonGlow 4s ease-in-out infinite;
}
@keyframes dragonGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(240,192,64,0.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(240,192,64,0.6)); }
}
.painting-title { font-size: 16px; color: var(--gold); margin-top: 12px; letter-spacing: 4px; }

/* Castle dragon rescue */
.castle-dragon-rescue { text-align: center; padding: 40px 0; }
.rescue-dragon-sprite { font-size: 60px; animation: dragonGlow 2s ease-in-out infinite; margin-bottom: 20px; }
.rescue-window { border-color: var(--gold); max-width: 500px; margin: 0 auto 20px; }

/* =============================================
   WEAPON SHOP
   ============================================= */
.card-grid { display: flex; flex-direction: column; gap: 16px; }
.work-card {
  display: flex; gap: 16px; background: rgba(16,24,56,0.6);
  border: 2px solid var(--border-inner); border-radius: 8px; padding: 16px;
  transition: border-color 0.2s, transform 0.2s;
}
.work-card:hover { border-color: var(--red); transform: translateX(4px); }
.card-thumb {
  width: 80px; height: 80px; background: linear-gradient(135deg, #1c1028, #120c20);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex-shrink: 0;
}
.card-body h3 { font-size: 15px; color: var(--text-main); margin-bottom: 4px; }
.card-body p { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  display: inline-block; padding: 2px 10px;
  background: rgba(240,64,64,0.15); border: 1px solid rgba(240,64,64,0.3);
  border-radius: 4px; font-size: 10px; color: var(--red);
}

/* =============================================
   ARMOR SHOP (Documents)
   ============================================= */
.doc-grid { display: flex; flex-direction: column; gap: 12px; }
.doc-item {
  display: flex; gap: 16px; padding: 16px; background: rgba(16,24,56,0.5);
  border: 2px solid var(--border-inner); border-radius: 8px; transition: border-color 0.2s;
}
.doc-item:hover { border-color: #6090c0; }
.doc-thumb {
  width: 64px; height: 80px; background: linear-gradient(180deg, #f8f4ec, #d8d0c0);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
}
.doc-info h3 { font-size: 15px; color: var(--text-main); margin-bottom: 4px; }
.doc-info p { font-size: 12px; color: var(--text-dim); }

/* =============================================
   ITEM SHOP
   ============================================= */
.story-list { display: flex; flex-direction: column; gap: 4px; }
.story-card {
  display: flex; gap: 16px; padding: 20px;
  background: rgba(16,24,56,0.4); border-left: 4px solid var(--green);
  transition: background 0.2s;
}
.story-card:hover { background: rgba(16,24,56,0.7); }
.story-phase { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; }
.phase-icon { font-size: 24px; }
.phase-label { font-size: 11px; color: var(--green); letter-spacing: 2px; }
.story-content h3 { font-size: 15px; color: var(--text-main); margin-bottom: 4px; }
.story-content p { font-size: 13px; color: var(--text-dim); }

/* =============================================
   TAVERN (AI Tools)
   ============================================= */
.tavern-grid { display: flex; flex-direction: column; gap: 12px; }
.tavern-card {
  display: flex; gap: 16px; padding: 16px;
  background: rgba(16,24,56,0.5); border: 2px solid var(--border-inner);
  border-radius: 8px; border-left: 4px solid var(--orange);
  transition: border-color 0.2s, transform 0.2s;
}
.tavern-card:hover { border-color: var(--orange); transform: translateX(4px); }
.tavern-icon {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex-shrink: 0; background: rgba(240,144,64,0.1); border-radius: 8px;
}
.tavern-info h3 { font-size: 15px; color: var(--text-main); margin-bottom: 4px; }
.tavern-info p { font-size: 12px; color: var(--text-dim); }
.tavern-link {
  color: var(--orange); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.tavern-link:hover { border-bottom-color: var(--orange); }
.tavern-note { margin-top: 16px; font-size: 13px; border-color: var(--orange); text-align: center; }

/* =============================================
   INN
   ============================================= */
.blog-list { display: flex; flex-direction: column; gap: 20px; }
.blog-entry {
  padding: 24px; background: rgba(16,24,56,0.4);
  border: 2px solid var(--border-inner); border-radius: 8px;
  border-left: 4px solid #c08030; transition: border-color 0.2s;
}
.blog-entry:hover { border-color: #c08030; }
.blog-entry h3 { font-size: 16px; color: var(--text-main); margin-bottom: 6px; }
.blog-meta { font-size: 11px; color: #c08030; margin-bottom: 12px; }
.blog-entry > p:not(.blog-meta) { font-size: 13px; color: var(--text-dim); line-height: 2; margin-bottom: 10px; }
.blog-entry > p:not(.blog-meta):last-child { margin-bottom: 0; }

/* Inn memo */
.inn-memo { margin-bottom: 16px; }
.memo-window { border-color: var(--gold); background: linear-gradient(180deg, #1c1808, #141004); }
.memo-label { font-size: 13px; color: var(--gold); margin-bottom: 8px; }
.memo-text { font-size: 18px; color: var(--text-main); font-style: italic; margin-bottom: 12px; }

/* =============================================
   THEATER (Videos)
   ============================================= */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.video-item {
  background: rgba(16,24,56,0.6); border: 2px solid var(--border-inner);
  border-radius: 8px; overflow: hidden; transition: border-color 0.2s, transform 0.2s;
}
.video-item:hover { border-color: var(--purple); transform: translateY(-4px); }
.video-placeholder {
  aspect-ratio: 16/9; background: linear-gradient(135deg, #1a0c28, #0c0818);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.play-icon { font-size: 36px; color: var(--purple); opacity: 0.6; }
.video-placeholder p { font-size: 12px; color: var(--text-dim); }
.video-caption { padding: 10px 14px; font-size: 13px; color: var(--text-dim); }
.video-embed { aspect-ratio: 16/9; width: 100%; }
.video-embed iframe { width: 100%; height: 100%; display: block; }

/* =============================================
   CASINO (Slot Machine)
   ============================================= */
.casino-slot { text-align: center; padding: 20px 0; }
.slot-display {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 20px;
}
.slot-reel {
  width: 80px; height: 80px; background: #0a0a1a;
  border: 3px solid var(--border-window); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; transition: all 0.1s;
}
.slot-reel.spinning { animation: slotSpin 0.1s linear infinite; }
@keyframes slotSpin {
  0% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
  100% { transform: translateY(-5px); }
}
.slot-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.slot-coins { font-size: 14px; color: var(--gold); }
.slot-spin-btn { padding: 12px 32px; }
.slot-result { font-size: 16px; min-height: 24px; margin-top: 8px; }
.slot-result.win { color: var(--gold); animation: blink 0.5s 3; }
.slot-result.lose { color: var(--text-dim); }
.casino-item-display { text-align: center; }
.casino-item-display .rpg-window { border-color: var(--gold); }
.item-desc { font-size: 13px; color: var(--text-dim); margin-top: 8px; }

/* =============================================
   FORTUNE (Placeholder)
   ============================================= */
.fortune-placeholder { text-align: center; padding: 60px 0; }
.fortune-crystal { font-size: 80px; animation: crystalFloat 3s ease-in-out infinite; }
@keyframes crystalFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}
.fortune-coming-soon { font-size: 14px; color: var(--text-dim); margin-top: 20px; line-height: 2; }

/* =============================================
   DHARMA (Profile/Status)
   ============================================= */
.dharma-status { max-width: 560px; width: 100%; margin: 0 auto; }
.status-header {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; background: rgba(16,24,56,0.5);
  border: 2px solid var(--gold); border-radius: 8px; margin-bottom: 16px;
}
.status-avatar { font-size: 48px; }
.status-name { font-size: 18px; color: var(--gold); }
.status-class { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.status-params {
  background: rgba(16,24,56,0.5); border: 2px solid var(--border-inner);
  border-radius: 8px; padding: 16px; margin-bottom: 16px;
}
.status-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px solid rgba(64,72,112,0.3); font-size: 13px;
}
.status-row:last-child { border-bottom: none; }
.param-label { color: var(--text-dim); }
.param-value { color: var(--text-main); text-align: right; }
.status-bio { font-size: 14px; line-height: 2.2; margin-bottom: 16px; }
.status-bio p { margin-bottom: 8px; }

/* Skills section */
.dharma-skills-section { margin-bottom: 16px; }
.dharma-section-title {
  font-size: 15px; color: var(--gold); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 2px solid rgba(240,192,64,0.3);
}
.dharma-skill-list { display: flex; flex-direction: column; gap: 10px; }
.dharma-skill-item {
  display: flex; gap: 12px; padding: 12px 16px;
  background: rgba(16,24,56,0.4); border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0; transition: background 0.2s;
}
.dharma-skill-item:hover { background: rgba(16,24,56,0.7); }
.dharma-skill-icon { font-size: 24px; flex-shrink: 0; padding-top: 2px; }
.dharma-skill-item strong { font-size: 14px; color: var(--text-main); display: block; margin-bottom: 2px; }
.dharma-skill-item p { font-size: 12px; color: var(--text-dim); }

/* Creed */
.dharma-creed { text-align: center; border-color: var(--gold); }
.dharma-creed-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.dharma-creed-text {
  font-size: 20px; color: var(--gold); margin-bottom: 8px; letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(240,192,64,0.3);
}
.dharma-creed-origin { font-size: 12px; color: var(--text-dim); }

/* =============================================
   CHURCH (Affiliate)
   ============================================= */
.church-content { display: flex; flex-direction: column; gap: 16px; }
.church-section {
  padding: 20px; background: rgba(16,24,56,0.5);
  border: 2px solid var(--border-inner); border-radius: 8px;
  border-left: 4px solid var(--cyan);
}
.church-section h3 { font-size: 16px; color: var(--text-main); margin-bottom: 8px; }
.church-section p { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.church-link-btn {
  display: inline-block; margin-top: 8px; text-decoration: none;
  border-color: var(--cyan);
}
.church-link-btn:hover { border-color: var(--gold); }
.church-link-placeholder {
  padding: 12px; background: rgba(0,0,0,0.2); border-radius: 6px;
  text-align: center; font-size: 12px; color: var(--text-dim);
}

/* =============================================
   DEMON CASTLE
   ============================================= */
.demon-container {
  background: radial-gradient(ellipse at 50% 30%, rgba(60,20,80,0.4), transparent 60%), var(--bg-dark);
}

/* Demon profile */
.demon-profile { max-width: 500px; width: 100%; margin: 0 auto; }
.demon-profile-card {
  background: rgba(16,24,56,0.5); border: 2px solid var(--purple);
  border-radius: 8px; overflow: hidden;
}
.profile-header {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  background: linear-gradient(135deg, rgba(60,20,80,0.3), rgba(16,24,56,0.3));
}
.profile-avatar { font-size: 48px; }
.profile-name-area h3 { font-size: 18px; color: var(--purple); }
.profile-aka { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.profile-bio { margin: 16px; }
.demon-reset-prompt { text-align: center; margin-top: 16px; }
.reset-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }

/* =============================================
   Animations
   ============================================= */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes buildingPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 700px) {
  .map-container { width: 100%; height: auto; aspect-ratio: 640 / 480; }
  #map-canvas { width: 100%; height: 100%; }
  .map-viewport { border-width: 3px; }
  .game-title { font-size: 24px; letter-spacing: 4px; }
  .game-subtitle { font-size: 12px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .area-header h2 { font-size: 16px; }
  .area-icon { font-size: 24px; }
  .slot-reel { width: 60px; height: 60px; font-size: 30px; }
}

@media (max-width: 480px) {
  .game-frame { padding: 16px 10px 24px; }
  .game-title { font-size: 20px; letter-spacing: 3px; }
  .hint-window { font-size: 12px; padding: 10px 14px; }
  .rpg-window { padding: 12px 14px; font-size: 13px; border-width: 3px; border-radius: 8px; }
  .rpg-btn { padding: 8px 20px; font-size: 13px; }
  .area-container { padding: 20px 14px 36px; gap: 16px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .work-card { flex-direction: column; align-items: center; text-align: center; }
  .card-thumb { width: 60px; height: 60px; }
  .story-card { flex-direction: column; align-items: flex-start; }
  .story-phase { flex-direction: row; gap: 8px; }
  .video-grid { grid-template-columns: 1fr; }
  .opening-window { font-size: 13px; padding: 14px 16px; min-height: 160px; }
  .building-emoji { font-size: 14px; }
  .building-sprite::before { height: 10px; }
  .building.building-castle .building-sprite::before { height: 14px; }
  .building.building-church .building-sprite::before { height: 12px; }
  .slot-reel { width: 50px; height: 50px; font-size: 24px; }
  .battle-enemy-sprite { font-size: 60px; }
  .battle-commands { flex-direction: column; }
  .battle-cmd { width: 100%; }
}