/* 게임 타이틀 화면의 톤: 보라빛 어둠 위 네온 회로, 이탤릭 디스플레이 로고, 하트 커서 메뉴 */
:root {
  --void: #07040f; --void-2: #120b26; --ink: #efeaff; --haze: #8d84b3;
  --soul: #ff2d6f; --circuit: #3dd8ff; --gold: #ffd23d; --mint: #3dffb4;
  --sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --display: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--sans); line-height: 1.6;
  background: var(--void);
  background-image:
    radial-gradient(ellipse at 70% -10%, rgba(255,45,111,0.18), transparent 55%),
    radial-gradient(ellipse at 10% 30%, rgba(61,216,255,0.10), transparent 50%),
    linear-gradient(rgba(61,216,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,216,255,0.045) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-attachment: fixed;
}
a { color: inherit; }
main { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: rgba(7,4,15,0.78); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(61,216,255,0.12); }
.brand { font: italic 900 22px var(--display); color: var(--circuit); text-decoration: none; text-shadow: 0 0 10px rgba(61,216,255,0.5); }
.brand span { color: var(--soul); margin-left: 4px; text-shadow: 0 0 12px rgba(255,45,111,0.6); }
.links { display: flex; gap: 18px; font-size: 14px; }
.links a { color: var(--haze); text-decoration: none; }
.links a:hover { color: var(--ink); }

.hero { padding: 72px 0 56px; }
.logo {
  font-family: var(--display); font-style: italic; font-size: clamp(72px, 16vw, 168px); line-height: 0.82; margin: 0;
  letter-spacing: -0.02em; color: var(--circuit); text-shadow: 0 0 18px rgba(61,216,255,0.55);
}
.logo > span { display: block; color: var(--soul); text-shadow: 0 0 22px rgba(255,45,111,0.7); }
.logo .beat { display: inline-block; font-style: normal; animation: beat 1.1s infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .logo .beat { animation: none; } html { scroll-behavior: auto; } }
.tag { margin: 22px 0 8px; font-size: clamp(18px, 3vw, 22px); color: var(--ink); font-weight: 700; }
.lead { max-width: 620px; color: #cfc8ef; margin: 0 0 26px; }

/* 하트 커서 메뉴 */
.menu { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.menu.row { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
.mi {
  position: relative; display: inline-block; padding: 8px 0 8px 34px; font: 700 clamp(19px, 3.2vw, 24px) var(--sans);
  color: var(--haze); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; transition: color 0.12s;
}
.mi::before {
  content: '♥'; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scale(0.4);
  color: var(--soul); opacity: 0; text-shadow: 0 0 10px var(--soul); transition: opacity 0.12s, transform 0.12s;
}
.mi:hover, .mi:focus-visible, .mi.on { color: var(--ink); outline: none; }
.mi:hover::before, .mi:focus-visible::before, .mi.on::before { opacity: 1; transform: translateY(-50%) scale(1); }
.mi .note { display: block; font-size: 13px; font-weight: 400; color: var(--haze); margin-top: 2px; }
.mi.big { font-size: clamp(22px, 4vw, 30px); }
.mi.tab { font-size: 17px; padding-top: 4px; padding-bottom: 4px; }
.mi.tab::before { top: 54%; }

.smartscreen { margin-top: 22px; max-width: 620px; color: var(--haze); font-size: 14px; }
.smartscreen summary { cursor: pointer; }
.smartscreen p { margin: 8px 0 0; color: #cfc8ef; }
.smartscreen b { color: var(--gold); }

.band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(61,216,255,0.12);
  border: 1px solid rgba(61,216,255,0.12); margin: 8px 0 64px; }
.feat { background: rgba(7,4,15,0.92); padding: 20px; }
.feat b { color: var(--circuit); font-size: 17px; }
.feat p { margin: 6px 0 0; font-size: 14px; color: #cfc8ef; }

.sec { margin: 0 0 72px; scroll-margin-top: 72px; }
.scene-title { font: italic 900 clamp(30px, 5vw, 40px) var(--display); margin: 0 0 18px; color: var(--circuit); text-shadow: 0 0 14px rgba(61,216,255,0.5); }

.hearts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.hearts li { border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--c); padding: 14px 16px; background: rgba(18,11,38,0.6); }
.hearts .hh { font-size: 30px; color: var(--c); text-shadow: 0 0 14px var(--c); line-height: 1; }
.hearts b { display: block; margin-top: 8px; font-size: 18px; }
.hearts small { color: var(--haze); }
.hearts p { margin: 6px 0 0; font-size: 14px; color: #cfc8ef; }
.hearts .lock { margin-top: 8px; font-size: 12px; color: var(--gold); }

.board { list-style: none; margin: 16px 0 0; padding: 0; max-width: 640px; }
.board li { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 14px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.board li.empty { display: block; color: var(--haze); border: 0; }
.board .pos { color: var(--haze); font-weight: 700; text-align: right; }
.board li:nth-child(1) .pos { color: var(--gold); }
.board .nick { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .ttl { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--gold); }
.board .hrt { font-size: 13px; }
.board .val { font-variant-numeric: tabular-nums; font-weight: 700; }
.board .val.win { color: var(--mint); }
.foot-note { color: var(--haze); font-size: 13px; margin-top: 10px; }

.note-block { margin-bottom: 26px; max-width: 720px; }
.note-block h3 { margin: 0 0 6px; font-size: 18px; }
.note-block h3 small { color: var(--haze); font-weight: 400; margin-left: 8px; font-size: 14px; }
.note-block ul { margin: 0; padding: 0; list-style: none; }
.note-block li { position: relative; padding: 3px 0 3px 22px; color: #cfc8ef; }
.note-block li::before { content: '♥'; position: absolute; left: 2px; top: 6px; color: var(--soul); font-size: 11px; }

.foot { text-align: center; padding: 30px 24px 48px; color: var(--haze); font-size: 14px; border-top: 1px solid rgba(61,216,255,0.1); }
.foot p { margin: 4px 0; }
.dim { opacity: 0.7; font-size: 13px; }

@media (max-width: 760px) {
  .band { grid-template-columns: 1fr 1fr; }
  .links { gap: 12px; }
  .hero { padding: 44px 0 40px; }
  .board li { grid-template-columns: 28px 1fr auto; }
  .board .hrt { display: none; }
}
@media (max-width: 420px) {
  main { padding: 0 16px; }
  .top { padding: 10px 16px; }
  .band { grid-template-columns: 1fr; }
  .links a:nth-child(3) { display: none; }
}