/* =========================================================
   미궁 (Maze of Memory) — 스타일
   다크 테마 / PC통신 감성 (검은 배경 + 초록 텍스트)
   모바일 우선, 큰 버튼
   ========================================================= */

:root {
  --bg: #000000;
  --green: #33ff66;
  --green-dim: #1f9c40;
  --green-faint: #0c5e26;
  --amber: #ffcc33;
  --red: #ff4455;
  --panel: #061a0c;
  --border: #144a22;
  --font: "Courier New", "D2Coding", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--green);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
}

/* 공통 화면 컨테이너 */
.screen {
  width: 100%;
  max-width: 520px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.hidden { display: none !important; }

/* 데미지 효과: 화면 전체 빨간 테두리 깜빡 */
#damage-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
}
#damage-flash.hit { animation: dmgflash 0.42s ease-out; }
@keyframes dmgflash {
  0%   { opacity: 1; box-shadow: inset 0 0 70px 26px rgba(255, 24, 44, 0.9); }
  60%  { opacity: 1; box-shadow: inset 0 0 80px 30px rgba(255, 24, 44, 0.45); }
  100% { opacity: 0; box-shadow: inset 0 0 80px 30px rgba(255, 24, 44, 0); }
}

/* ---------- 시작 화면 ---------- */
#start-screen, #end-screen {
  align-items: center;
  /* 내용이 화면보다 길면 위에서부터 보이며 스크롤되고, 짧으면 중앙정렬(safe) */
  justify-content: safe center;
  text-align: center;
  gap: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 28px;
}

/* 시작화면 상단 여백(미궁 로고 위) — 노치/상태바 safe-area 포함 */
#start-screen {
  padding-top: calc(env(safe-area-inset-top, 0px) + 44px);
}

.logo {
  font-size: 64px;
  letter-spacing: 12px;
  text-shadow: 0 0 12px var(--green), 0 0 28px var(--green-dim);
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.6; }
  98% { opacity: 0.9; }
}

.subtitle { color: var(--green-dim); font-size: 14px; }

/* 스테이지 선택 */
.stage-heading { color: var(--green); font-size: 18px; letter-spacing: 3px; }
.stage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 340px;
}
.stage-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--green);
  font-family: var(--font);
  cursor: pointer;
  padding: 4px;
}
.stage-cell .sn { font-size: 20px; font-weight: bold; }
.stage-cell .sr { font-size: 9px; color: var(--amber); line-height: 1.1; text-align: center; }
.stage-cell.unlocked { border-color: var(--green); box-shadow: 0 0 6px var(--green-faint); }
.stage-cell.cleared { background: #0a2912; }
.stage-cell:active { transform: scale(0.95); }
.stage-cell.locked { opacity: 0.35; cursor: not-allowed; color: var(--green-faint); }
.stage-cell .lock { font-size: 16px; }

.end-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }

/* 상점 */
.shop {
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel);
}
.shop-head { display: flex; justify-content: space-between; font-size: 14px; color: var(--green); margin-bottom: 6px; }
.shop-gold { color: var(--amber); }
.shop-items { display: flex; flex-direction: column; gap: 6px; }
.shop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.shop-row .nm { flex: 1; text-align: left; color: var(--green-dim); }
.shop-row .own { color: var(--green-faint); font-size: 11px; }
.shop-row button {
  background: transparent; border: 1px solid var(--green); color: var(--green);
  font-family: var(--font); padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.shop-row button:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--border); color: var(--green-faint); }

/* 온라인 랭킹 */
.leaderboard {
  width: 100%;
  max-width: 340px;
  margin: 4px auto;
  font-size: 13px;
  text-align: left;
}
.leaderboard .lb-title { color: #66ccff; font-size: 14px; margin-bottom: 6px; text-align: center; }
.leaderboard .lb-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--green);
}
.leaderboard .lb-row:nth-child(2) { color: var(--amber); }  /* 1위 강조 */
.leaderboard .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard .lb-score { color: var(--green-dim); flex: 0 0 auto; }
.leaderboard .lb-msg { color: var(--green-faint); text-align: center; padding: 6px; }
.hint-text { color: var(--green-faint); font-size: 12px; max-width: 320px; }

.seed-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}
.seed-row label { font-size: 13px; color: var(--green-dim); text-align: left; }
#seed-input, #nick-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--green);
  font-family: var(--font);
  font-size: 18px;
  min-height: 54px;
  padding: 14px 14px;
  text-align: center;
  border-radius: 8px;
}
#seed-input:focus, #nick-input:focus { outline: 1px solid var(--green); border-color: var(--green); }
#nick-input::placeholder { color: var(--green-faint); }

#lang-select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--green);
  font-family: var(--font);
  font-size: 16px;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
}
#lang-select:focus { outline: 1px solid var(--green); }

.auth-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}
.auth-status { color: var(--amber); font-size: 12px; }

/* ---------- Google 로그인 버튼 (Google 브랜딩 가이드 준수) ----------
   레이아웃 공통(.gsi-btn) + 라이트(.gsi-light)/다크(.gsi-dark) 두 변형.
   앱이 다크 테마라 기본은 .gsi-dark 적용. 시스템이 라이트면 자동으로 라이트로 전환. */
.gsi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: "Roboto", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.gsi-btn:active { transform: scale(0.99); }
.gsi-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.gsi-logo { display: inline-flex; width: 18px; height: 18px; flex: none; }
.gsi-logo svg { width: 18px; height: 18px; display: block; }
.gsi-text { white-space: nowrap; }

/* 라이트 변형 */
.gsi-btn.gsi-light { background: #ffffff; color: #1f1f1f; border-color: #747775; }
.gsi-btn.gsi-light:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.gsi-btn.gsi-light:active { background: #ececed; }

/* 다크 변형 (Google 다크 버튼 스펙: bg #131314, text #E3E3E3, border #8E918F)
   앱이 항상 다크 테마이므로 시스템 모드와 무관하게 다크로 고정한다. */
.gsi-btn.gsi-dark { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.gsi-btn.gsi-dark:hover { background: #1c1c1d; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.gsi-btn.gsi-dark:active { background: #232324; }

/* ---------- 버튼 ---------- */
.big-btn {
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  background: var(--panel);
  color: var(--green);
  border: 1px solid var(--border);
  font-family: var(--font);
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.big-btn:active { transform: scale(0.97); }
.big-btn.primary {
  border-color: var(--green);
  box-shadow: 0 0 10px var(--green-faint);
}
.big-btn.primary:hover { background: #0a2912; }
.big-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.icon-btn {
  background: transparent;
  border: none;
  color: var(--green);
  font-size: 20px;
  cursor: pointer;
}

/* ---------- 게임 화면 ---------- */
#game-screen { padding: 0; }

/* 상단: 좌측 정보칼럼 + 우측 지도(한 영역) */
#topbar {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  background: #030d05;
  border-bottom: 1px solid var(--border);
}
.info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.info-title { display: flex; align-items: center; justify-content: space-between; }
.hud-title { font-size: 16px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-title .floor { color: var(--amber); font-size: 12px; margin-left: 4px; letter-spacing: 0; }
.info-stats { display: flex; align-items: center; gap: 10px; }
.hp { font-size: 16px; color: var(--red); letter-spacing: 1px; }
.wallet { font-size: 13px; color: var(--amber); white-space: nowrap; }
.inventory { font-size: 11px; color: var(--green-dim); word-break: keep-all; line-height: 1.4; }

/* 진척도 가로 바 */
.progress-bar {
  height: 9px;
  background: #08220f;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green-dim), var(--green));
  box-shadow: 0 0 6px var(--green-faint);
  transition: width 0.25s ease;
}

/* 중앙 로그 */
.log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: 15px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.log .line { opacity: 0; animation: fadein 0.35s forwards; }
@keyframes fadein { to { opacity: 1; } }
.log .sys   { color: var(--green-faint); font-size: 13px; }
.log .event { color: var(--amber); }
.log .danger{ color: var(--red); }
.log .good  { color: var(--green); }
.log .hint  { color: #66ccff; font-style: italic; }
.log .story { color: #c89bff; font-style: italic; text-shadow: 0 0 8px rgba(200,155,255,0.3); }
.log .sep   { color: var(--green-faint); }

/* 하단 컨트롤 */
#controls {
  position: relative;          /* 아이템 팝업 기준 */
  border-top: 1px solid var(--border);
  padding: 10px 16px 20px;
  background: #030d05;
}

.dir-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 2px;             /* 액션줄 아래로 내려옴 */
}
.dir-mid { display: flex; gap: 84px; }
.dir-btn {
  width: 74px;
  height: 36px;               /* 높이 축소 */
  background: var(--panel);
  color: var(--green);
  border: 1px solid var(--border);
  font-family: var(--font);
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
}
/* 갈 수 있는 방향: 활성 / 막힌 방향: 비활성 */
.dir-btn:not(:disabled) {
  border-color: var(--green);
  box-shadow: 0 0 8px var(--green-faint);
}
.dir-btn:active:not(:disabled) { transform: scale(0.95); background: #0a2912; }
.dir-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  border-color: var(--border);
  box-shadow: none;
}
/* 갈림길 힌트로 추천된 방향 강조 */
.dir-btn.suggested {
  border-color: #66ccff !important;
  color: #66ccff;
  animation: pulse-blue 0.7s ease-in-out infinite alternate;
}
@keyframes pulse-blue {
  from { box-shadow: 0 0 6px rgba(102, 204, 255, 0.4); }
  to   { box-shadow: 0 0 16px rgba(102, 204, 255, 0.9); }
}

/* 액션줄: 갈림길 힌트(있을 때) + 아이템 아이콘 (위쪽, 공간 절약) */
.action-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 4px; }
.action-row .big-btn { min-height: 38px; flex: 1; font-size: 14px; }

#battle-controls { display: flex; gap: 10px; }

/* 아이템 패널 — 컨트롤 위로 뜨는 팝업 */
.item-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 6px);    /* 컨트롤 바로 위 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(6, 26, 12, 0.97);
  border: 1px solid var(--green);
  border-radius: 10px;
  box-shadow: 0 0 16px var(--green-faint);
  z-index: 20;
}
.item-panel .item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}
.item-panel .item-row button {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: var(--font);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.item-panel .empty { color: var(--green-faint); text-align: center; padding: 12px; }

/* 종료 화면 */
#end-title { font-size: 32px; text-shadow: 0 0 12px currentColor; }
.end-minimap {
  width: 240px;
  height: 240px;
  max-width: 80vw;
  max-height: 80vw;
  background: #020a04;
  border: 1px solid var(--green);
  border-radius: 8px;
  margin: 4px auto;
}

#end-title.clear { color: var(--green); }
#end-title.over  { color: var(--red); }
#end-detail { color: var(--green-dim); font-size: 15px; line-height: 1.6; }
.epic {
  color: var(--amber);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 14px;
  text-shadow: 0 0 10px rgba(255, 204, 51, 0.5);
  animation: epicglow 2.2s ease-in-out infinite alternate;
}
@keyframes epicglow {
  from { text-shadow: 0 0 8px rgba(255, 204, 51, 0.35); }
  to   { text-shadow: 0 0 18px rgba(255, 204, 51, 0.8); }
}
.seed-share { color: var(--amber); font-size: 14px; }

/* ---------- 본문: 상단 지도(폭 80%·범례 좌측) + 아래 로그(스크롤) ---------- */
#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;       /* flex 자식 스크롤 위해 */
}
.prog-label { font-size: 14px; color: var(--green); letter-spacing: 1px; }
.prog-label #map-progress { color: var(--amber); font-weight: bold; }
.map-legend {
  color: var(--green-dim);
  font-size: 10px;
  line-height: 1.6;
  word-break: keep-all;
  margin-top: 2px;
}
.map-wrap { flex: 0 0 auto; display: flex; align-items: center; }
#minimap {
  width: 170px;
  height: 170px;
  background: #020a04;
  border: 1px solid var(--border);
  border-radius: 6px;
  image-rendering: pixelated;
}
@media (max-width: 400px) { #minimap { width: 140px; height: 140px; } }
#content .log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* 작은 아이콘 버튼 (아이템 팝업 토글 등) */
.icon-btn-sm {
  flex: 0 0 auto;
  width: 42px;
  height: 38px;
  background: var(--panel);
  border: 1px solid var(--green);
  border-radius: 8px;
  color: var(--green);
  font-size: 19px;
  cursor: pointer;
}
.icon-btn-sm:active { transform: scale(0.95); }

/* 갈림길 힌트 버튼 강조 */
#fork-btn {
  border-color: #66ccff;
  color: #66ccff;
  box-shadow: 0 0 8px rgba(102, 204, 255, 0.3);
}

/* ---------- 광고-힌트 팝업 모달 ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal-box {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--green);
  border-radius: 12px;
  box-shadow: 0 0 24px var(--green-faint);
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
/* 광고 팝업 내부: 제목·설명·버튼 사이 간격 확보 */
#ad-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.modal-box h3 { color: var(--green); font-size: 20px; }
.modal-desc { color: var(--green-dim); font-size: 14px; line-height: 1.6; }

/* 제목 + ! 정보 아이콘 */
.ad-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ad-info {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green);
  font-weight: bold;
  font-family: var(--font);
  cursor: pointer;
  line-height: 1;
  flex: 0 0 auto;
}
.ad-info:active { transform: scale(0.9); }
.ad-box {
  width: 100%;
  height: 150px;
  border: 1px dashed var(--green-dim);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-faint);
  font-size: 28px;
  letter-spacing: 8px;
  background: repeating-linear-gradient(45deg, #061a0c, #061a0c 10px, #08220f 10px, #08220f 20px);
}
.ad-count { color: var(--green-dim); font-size: 13px; }
#ad-timer { color: var(--amber); font-weight: bold; }

/* 작은 화면 대응 */
@media (max-height: 640px) {
  .logo { font-size: 48px; }
  .log { font-size: 14px; }
}

/* 개인정보처리방침 링크 */
.legal-row { margin-top: 18px; text-align: center; }
.legal-row a { color: var(--green-faint); font-size: 12px; text-decoration: none; letter-spacing: 1px; }
.legal-row a:hover { color: var(--green); text-decoration: underline; }