/* style.css — 사이트 다크톤(#2c3e50) 준수 (9.2절 팔레트) */

/* 10장 R10: 회전 잠금 실패 대비 — 가로+저높이(모바일 가로 모드)에서 안내 오버레이 */
.rotate-overlay { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-overlay {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    background: #1a2530; color: #fff; align-items: center; justify-content: center;
    text-align: center; font-size: 1.1rem; line-height: 1.8;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; }
body { background: #2c3e50; color: #ecf0f1; text-align: center; }

header { padding: 15px; background: #1a252f; color: #fff; margin-bottom: 15px; }
header a { color: #fff; text-decoration: none; font-size: 0.95rem; font-weight: bold; }

.container { max-width: 500px; margin: 0 auto; padding: 0 10px 30px; }

.game-stats { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; background: #34495e; padding: 10px 20px; border-radius: 8px; }
.stat-group { display: flex; gap: 20px; }
.stat-box { font-weight: bold; font-size: 1.05rem; color: #2ecc71; }
.stat-box.best { color: #f1c40f; }
.ingame-unlock-gauge { width: 90px; height: 5px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; margin-left: 16px; }
.ingame-unlock-gauge-fill { height: 100%; background: #22D3EE; transition: width .3s ease-out; }
#scoreVal { display: inline-block; transition: transform .09s ease-out; } /* 02문서 4.6절 펀치 */

.canvas-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 405px; /* 540:960 비율의 CSS 상한 */
  aspect-ratio: 540 / 960;
  touch-action: none;
}
#gameCanvas {
  background: #1a2530;
  border: 3px solid #34495e;
  border-radius: 8px;
  display: block;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none; flex-direction: column; justify-content: center; align-items: center;
  border-radius: 8px; z-index: 10; gap: 10px; padding: 20px;
}
.overlay h2 { color: #22D3EE; font-size: 1.6rem; }
#overOverlay h2 { color: #e74c3c; }
.overlay p { color: #ecf0f1; }
.retry-btn { background: #22D3EE; color: #1a2530; border: none; padding: 10px 22px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 0.95rem; margin-top: 8px; }
.retry-btn:hover { filter: brightness(1.1); }

.d-pad { margin-top: 15px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.d-btn { width: 64px; height: 56px; background: #34495e; color: #fff; border: none; border-radius: 10px; font-size: 1.5rem; cursor: pointer; user-select: none; touch-action: none; }
.d-btn:active { background: #22D3EE; color: #1a2530; }
.skill-btn { width: auto; padding: 0 18px; font-size: 0.85rem; font-weight: bold; background: #1e3a5f; border: 2px solid #3B82F6; }
.skill-btn:active { background: #3B82F6; color: #1a2530; }
.skill-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.reward-choices { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reward-card {
  background: #1a2530; border: 2px solid #22D3EE; border-radius: 8px;
  padding: 14px 12px; min-width: 110px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.reward-card:hover { background: #24313f; }
.reward-card .reward-name { font-weight: bold; font-size: 1rem; }
.reward-card .reward-desc { font-size: 0.78rem; color: #bdc3c7; }
.small-note { font-size: 0.75rem; color: #94a3b8; }

.info-section { margin-top: 24px; text-align: left; background: #34495e; padding: 15px; border-radius: 8px; font-size: 0.85rem; line-height: 1.6; color: #bdc3c7; }
.info-section h3 { color: #fff; margin-bottom: 8px; }

.ad-slot { margin: 0 0 15px; text-align: center; }

/* 사이트 공통 하단 UI (12.5절: 상·하단 구조 준수) */
.related-games { margin-top: 20px; text-align: left; }
.related-title { font-size: 0.95rem; margin-bottom: 10px; color: #fff; }
.related-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.related-card { flex: 1; min-width: 90px; background: #34495e; border-radius: 8px; padding: 12px 8px; text-align: center; text-decoration: none; color: #ecf0f1; font-size: 0.8rem; font-weight: bold; }
.related-emoji { display: block; font-size: 1.6rem; margin-bottom: 4px; }
.share-bar { margin-top: 20px; text-align: left; }
.share-label { display: block; font-size: 0.9rem; font-weight: bold; margin-bottom: 10px; }
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn { border: none; border-radius: 6px; padding: 9px 14px; font-size: 0.82rem; font-weight: bold; cursor: pointer; color: #fff; }
.share-native { background: #7f8c8d; }
.share-fb { background: #1877f2; }
.share-x { background: #111; }
.share-band { background: #00c73c; }
.share-copy { background: #95a5a6; }

/* 타이틀 화면 (10.2절) */
.title-logo { font-size: 1.8rem; color: #fff; letter-spacing: 2px; }
.title-stats { font-size: 0.85rem; color: #bdc3c7; display: flex; flex-direction: column; gap: 6px; }
.title-stats b { color: #FACC15; }
.unlock-gauge { width: 220px; height: 8px; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.unlock-gauge-fill { height: 100%; background: #22D3EE; }
.weapon-select { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.weapon-pick { background: #34495e; color: #bdc3c7; border: 2px solid transparent; border-radius: 6px; padding: 8px 12px; font-size: 0.82rem; font-weight: bold; cursor: pointer; }
.weapon-pick.active { border-color: #22D3EE; color: #fff; }
.weapon-pick:disabled { opacity: 0.5; cursor: not-allowed; }
.title-start { font-size: 1.05rem; padding: 12px 28px; }
.title-resume { background: #34495e; color: #fff; }
.lowspec-toggle { margin-top: 14px; font-size: 0.78rem; color: #94a3b8; display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* 성능 저하 감지 토스트 (11장 R4) */
.perf-toast {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: #1a2530; border: 1px solid #3B82F6; border-radius: 8px;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px; z-index: 20;
  font-size: 0.78rem; color: #ecf0f1; max-width: 90%;
}
.perf-toast button { background: #3B82F6; color: #1a2530; border: none; border-radius: 5px; padding: 5px 10px; font-weight: bold; font-size: 0.75rem; cursor: pointer; }
.perf-toast button#btnPerfNo { background: #34495e; color: #fff; }

.retry-btn.secondary { background: #34495e; color: #fff; }
.over-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* 02문서 9.1절: PC에서는 모바일 폭에 갇히지 않고 좌우 정보 패널을 둔다 */
.side-panel { display: none; }
.side-panel h4 { font-size: 0.8rem; color: #94a3b8; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.side-panel h4:first-child { margin-top: 0; }
.side-list { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: #ecf0f1; }
.side-list .side-row { display: flex; justify-content: space-between; gap: 8px; }
.side-list .side-empty { color: #64748b; font-style: italic; }

@media (min-width: 1000px) {
  .container {
    max-width: 1100px; display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    gap: 20px; align-items: start;
  }
  .canvas-wrapper { max-width: none; width: auto; height: min(86vh, 960px); aspect-ratio: 540/960; margin: 0 auto; }
  #gameCanvas { width: auto; height: 100%; aspect-ratio: 540/960; }
  .side-panel {
    display: block; grid-row: 1 / -1; background: #34495e; border-radius: 8px;
    padding: 14px; text-align: left; font-size: 0.82rem;
  }
  .side-panel-left { grid-column: 1; }
  .side-panel-right { grid-column: 3; }
  .ad-slot, .game-stats, .canvas-wrapper, .d-pad { grid-column: 2; }
}
.run-updates { margin-top: 8px; color: #FACC15; font-size: 0.85rem; font-weight: bold; }