/* ============================================================
   shell.css — 케빈샘 THE GAME 공용 셸 (디자인 시스템)
   모든 게임 페이지가 이 파일을 link 해 헤더·푸터·색조 통일
   ============================================================ */

/* ---------- 디자인 토큰 ---------- */
:root{
  --bg:#070a10; --bg-2:#0c1019;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.28);
  --ink-hi:#F5F7FA;
  --ink:#B0B6C5;
  --ink-low:#6E7385;
  --ink-dim:#4A4F60;
  --cyan:#3FD7C9;
  --cyan-soft:#9BE8E0;
  --cyan-deep:#1A8B82;
  --gold:#F4C430;
  --danger:#FF6B6B;
  /* 보라톤 페이지 호환 alias (app.css의 보라톤 토큰을 시안톤으로 덮어쓰기) */
  --accent:#3FD7C9;
  --accent-2:#1A8B82;
  --line-soft:rgba(255,255,255,.16);
  --brand-glow:#3FD7C9;
  --brand-1:#3FD7C9;
  --brand-2:#1A8B82;
  --gold-ink:#F4C430;
  --warn:#FF9E3D;
}

/* ---------- 폰트 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Oswald:wght@600&family=JetBrains+Mono:wght@500&display=swap');

/* ---------- 본문 기본 ---------- */
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Pretendard',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.shell-display{font-family:'Teko','Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase;line-height:.9}
.shell-mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---------- HUD 오버레이 (선택적, body에 적용 가능) ---------- */
.hud-scanlines::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.hud-vignette::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
}

/* ============================================================
   공용 헤더 (.shell-top)
   ============================================================ */
.shell-top{
  position:relative; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(36px, 4vw, 72px);
  max-width:1700px; margin:0 auto; width:100%;
  background:transparent;
}
.shell-top .brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.shell-top .brand .mark{
  width:42px;height:46px; display:grid; place-items:center;
  background:linear-gradient(135deg,#13161f,#070a10);
  border:1px solid var(--line-2); color:var(--cyan);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  font-weight:800; font-size:16px;
  box-shadow:inset 0 0 12px rgba(63,215,201,.15);
}
.shell-top .brand .name b{font-size:14px; letter-spacing:.1em; color:var(--ink-hi); display:block; line-height:1.15; font-weight:800; font-family:'Pretendard',sans-serif}
.shell-top .brand .name span{font-size:9.5px; letter-spacing:.46em; color:var(--ink-low); font-family:'Pretendard',sans-serif}

.shell-top .crumb{
  display:flex; align-items:center; gap:14px;
  font-family:'Teko',sans-serif; font-size:12px; letter-spacing:.34em; color:var(--ink-low);
}
.shell-top .crumb .now{color:var(--cyan)}
.shell-top .crumb .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}

.shell-top .session{display:flex; align-items:center; gap:18px; font-family:'Teko',sans-serif; font-size:13px; letter-spacing:.34em; color:var(--ink-low)}
.shell-top .session .pipe{width:1px;height:14px;background:var(--line-2)}
.shell-top .session .live{display:inline-flex; align-items:center; gap:7px; color:var(--cyan)}
.shell-top .session .live::before{content:""; width:6px;height:6px;border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:shell-pulse 2s infinite}
@keyframes shell-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   공용 푸터 (.shell-footer)
   ============================================================ */
.shell-footer{
  position:relative; z-index:20;
  padding:12px clamp(36px, 4vw, 72px) 14px;
  border-top:1px solid var(--line);
  background:rgba(5,8,14,.7);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-low);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
  max-width:1700px; margin:0 auto; width:100%;
}
.shell-footer .left, .shell-footer .right{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.shell-footer .sys{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink-low); letter-spacing:.24em; font-size:9.5px;
}
.shell-footer .sys::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan); opacity:.85;
}
.shell-footer .pipe{ width:1px; height:11px; background:var(--line-2); flex-shrink:0 }
.shell-footer .brand-mini{
  color:var(--ink-hi); font-weight:600; letter-spacing:.08em;
  font-family:'Pretendard',sans-serif; font-size:11px;
}
.shell-footer .info{ font-family:'Pretendard',sans-serif; font-size:11px; color:var(--ink-low); text-decoration:none }
.shell-footer a.info:hover{ color:var(--cyan) }
.shell-footer .copy{ color:var(--ink-dim); font-size:10px; letter-spacing:.06em }

@media (max-width:760px){
  .shell-footer{ flex-direction:column; align-items:flex-start; gap:8px; font-size:10px }
  .shell-footer .right{ flex-direction:column; align-items:flex-start; gap:6px }
  .shell-footer .pipe{ display:none }
}

/* ============================================================
   공용 뒤로가기 / 이정표 배지
   ============================================================ */
.shell-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; font-size:11px; letter-spacing:.28em; font-family:'Teko',sans-serif;
  color:var(--ink); background:rgba(12,16,25,.7);
  border:1px solid var(--line-2); border-radius:3px;
  text-decoration:none;
  transition:border-color .15s, color .15s, transform .12s;
}
.shell-back:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateX(-2px) }
.shell-back::before{ content:"←"; }