@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --bg: #FBF8F4;
  --bg-tint: #F5EFE8;
  --surface: #FFFFFF;
  --surface-2: #FAF5F0;

  --ink: #2A2138;
  --ink-2: #5B5168;
  --ink-3: #9A92A6;
  --ink-soft: #D8D2E0;

  --peach: #FFB5A7;
  --peach-deep: #F8896C;
  --mint: #98DDCA;
  --mint-deep: #5DC0A1;
  --lavender: #C7B8EA;
  --lavender-deep: #9C82D8;
  --sun: #FFE066;
  --sun-deep: #F8C72E;
  --coral: #FF85A1;
  --sky: #A0CFEC;
  --blush: #FFC9C9;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --r-1: 12px; --r-2: 18px; --r-3: 24px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(40,30,80,.04), 0 2px 6px rgba(255,140,170,.06);
  --shadow-2: 0 4px 12px rgba(40,30,80,.06), 0 8px 24px rgba(255,140,170,.08);
  --shadow-3: 0 8px 28px rgba(40,30,80,.08), 0 16px 48px rgba(255,140,170,.10);

  --ease: cubic-bezier(.4,.16,.2,1);
  --t-fast: 120ms; --t-mid: 220ms; --t-slow: 380ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--lavender); color: white; }

html, body {
  height: 100%;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(circle at 12% 18%, #FFE5E0 0%, transparent 35%),
    radial-gradient(circle at 88% 25%, #DBF3E8 0%, transparent 38%),
    radial-gradient(circle at 50% 92%, #E9DDFA 0%, transparent 42%),
    radial-gradient(circle at 5% 95%, #FFF3CC 0%, transparent 30%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100svh;
  overflow-x: hidden;
}
a { color: var(--peach-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.brand-font {
  font-family: 'Press Start 2P', monospace;
  letter-spacing: -.02em;
  font-weight: normal;
}

/* ── 노이즈 텍스처 (선택적) ── */
.noise::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─── 버튼 ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 14px 24px;
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; user-select: none;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.96); }

.btn-primary {
  color: white;
  background: linear-gradient(135deg, var(--peach), var(--peach-deep));
  box-shadow: var(--shadow-2);
}
.btn-primary:hover { box-shadow: var(--shadow-3); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid var(--ink-soft);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface-2); }

.btn-icon {
  width: 44px; height: 44px; padding: 0;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-1);
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-1px); }

.btn-kakao {
  background: #FEE500; color: #191919;
  box-shadow: var(--shadow-1);
}
.btn-kakao:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }

/* ── 카드 ── */
.card {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

/* ── 타이틀 화면 ── */
#title-screen {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--s-7) var(--s-5);
  gap: var(--s-6);
  position: relative; z-index: 1;
}
.brand-mark {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 5vw, 32px);
  color: var(--ink);
  animation: brandIn .9s var(--ease) both;
  text-decoration: none;
}
.brand-mark .icon {
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: 1.4em;
  filter: drop-shadow(0 4px 12px rgba(255,180,167,.4));
}
.logo-block {
  width: .5em; height: 1em;
  border-radius: 4px;
  position: relative;
}
.logo-block::after {
  content: ''; position: absolute; left: 8%; right: 8%; top: 8%; height: 18%;
  background: rgba(255,255,255,.55); border-radius: 2px;
}
.logo-block-a {
  background: var(--peach-deep);
  animation: logoFloatA 2.6s var(--ease) infinite;
}
.logo-block-b {
  background: var(--mint-deep);
  height: .7em;
  animation: logoFloatB 2.6s var(--ease) infinite .3s;
}
@keyframes logoFloatA {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes logoFloatB {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.brand-tagline {
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: .04em;
  animation: brandIn .9s .15s var(--ease) both;
}
@keyframes brandIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── 모드 카드 ── */
.mode-grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-3);
  width: 100%; max-width: 380px;
  animation: brandIn .9s .3s var(--ease) both;
}
.mode-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border-radius: var(--r-2);
  border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
  position: relative; overflow: hidden;
}
.mode-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, var(--peach));
  transition: width var(--t-mid) var(--ease);
}
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.mode-card:hover::before { width: 8px; }
.mode-card:active { transform: scale(.98); }
.mode-card[data-mode="solo"]   { --accent: var(--sun-deep); }
.mode-card[data-mode="ai"]     { --accent: var(--mint-deep); }
.mode-card[data-mode="friend"] { --accent: var(--lavender-deep); }
.mode-card .emoji {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, var(--accent), white);
  border-radius: var(--r-2);
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent), transparent 70%);
}
.mode-card .body { flex: 1; min-width: 0; }
.mode-card .title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.mode-card .desc  { font-size: 12px; color: var(--ink-2); letter-spacing: .02em; }
.mode-card .arrow {
  color: var(--ink-3); font-size: 18px;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mode-card:hover .arrow { color: var(--ink); transform: translateX(4px); }

/* ── 우상단 컨트롤 ── */
.top-controls {
  position: fixed; top: var(--s-4); right: var(--s-4);
  display: flex; gap: var(--s-2);
  z-index: 50;
}

/* ── 모달 ── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(40,30,80,.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
  z-index: 100;
  animation: fadeIn var(--t-mid) var(--ease);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--s-6);
  box-shadow: var(--shadow-3);
  width: 100%; max-width: 380px;
  animation: popIn var(--t-mid) var(--ease);
}
.modal h2 { font-size: 18px; margin-bottom: var(--s-4); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 슬라이더 ── */
.volume-row { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.volume-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: var(--r-pill);
  background: var(--ink-soft); outline: 0;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  background: var(--peach-deep); border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 6px rgba(255,140,170,.4);
}
.volume-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--peach-deep); border-radius: 50%; border: 0; cursor: pointer;
}

/* ── 친구 리스트 ── */
.app-shell {
  max-width: 480px; margin: 0 auto;
  padding: var(--s-7) var(--s-4) calc(var(--s-7) + 80px);
  position: relative; z-index: 1;
}
.app-header {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.app-back {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-size: 18px; box-shadow: var(--shadow-1);
}
.app-title { font-size: 20px; font-weight: 800; }

.friend-list { display: flex; flex-direction: column; gap: var(--s-2); }
.friend-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
}
.friend-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--peach));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: white; font-weight: 800;
  position: relative; flex-shrink: 0;
}
.friend-avatar::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-3);
  border: 2px solid var(--surface);
}
.friend-avatar[data-online="true"]::after {
  background: var(--mint-deep);
  box-shadow: 0 0 0 2px var(--mint), 0 0 8px var(--mint-deep);
}
.friend-name { font-weight: 700; color: var(--ink); }
.friend-status { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.friend-info { flex: 1; min-width: 0; }
.friend-call-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mint-deep); color: white; font-size: 16px;
  border: 0; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(93,192,161,.4);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.friend-call-btn:active { transform: scale(.92); }
.friend-call-btn:disabled {
  background: var(--ink-soft); cursor: not-allowed; box-shadow: none;
}

.empty-state {
  text-align: center; padding: var(--s-7) var(--s-4);
  color: var(--ink-3);
}
.empty-state .icon { font-size: 56px; margin-bottom: var(--s-4); opacity: .6; }

/* ── 수신 (벨) 화면 ── */
.call-screen {
  position: fixed; inset: 0;
  background: linear-gradient(160deg, #FFE5E0 0%, #DBF3E8 50%, #E9DDFA 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-7);
  gap: var(--s-5);
  z-index: 200;
}
.call-screen[hidden] { display: none; }
.call-avatar {
  width: 140px; height: 140px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--peach));
  display: flex; align-items: center; justify-content: center;
  font-size: 60px; color: white; font-weight: 800;
  animation: ring 1.4s var(--ease) infinite;
}
@keyframes ring {
  0%   { box-shadow: 0 0 0  0 rgba(152,221,202,.6); transform: scale(1); }
  50%  { box-shadow: 0 0 0 28px rgba(152,221,202,0);  transform: scale(1.04); }
  100% { box-shadow: 0 0 0  0 rgba(152,221,202,0);  transform: scale(1); }
}
.call-name { font-size: 22px; font-weight: 800; }
.call-sub { font-size: 13px; color: var(--ink-2); }
.call-actions { display: flex; gap: var(--s-7); margin-top: var(--s-4); }
.call-btn {
  width: 72px; height: 72px; border-radius: 50%;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: white;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.call-btn-accept { background: var(--mint-deep); box-shadow: 0 8px 20px rgba(93,192,161,.4); }
.call-btn-decline { background: var(--coral); box-shadow: 0 8px 20px rgba(255,133,161,.4); }
.call-btn:active { transform: scale(.92); }

/* ── 게임 화면 ── */
.game-shell {
  display: flex; flex-direction: column; align-items: center;
  min-height: 100svh; padding: var(--s-4);
  gap: var(--s-3); position: relative; z-index: 1;
}
.game-bar {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; max-width: 480px;
  margin-bottom: var(--s-2);
}
.game-bar .back { margin-right: auto; }
.game-status {
  flex: 1; text-align: center;
  font-size: 13px; color: var(--ink-2); font-weight: 600;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}
.score-row {
  display: flex; gap: var(--s-3);
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
}
.score-chip {
  background: var(--surface); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: var(--s-2);
}
.score-chip .label { color: var(--ink-3); font-size: 9px; }
.score-chip .val { color: var(--ink); }

#board {
  background: linear-gradient(180deg, #FBF5EE, #F2E9DD);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.6);
  display: block;
  touch-action: none;
}

.preview-row {
  display: flex; gap: var(--s-3); align-items: center; justify-content: center;
  background: var(--surface);
  border-radius: var(--r-2);
  padding: var(--s-3);
  box-shadow: var(--shadow-1);
  margin-top: var(--s-3);
}
.preview-row .label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; color: var(--ink-3);
}
.preview-canvas { background: var(--surface-2); border-radius: var(--r-1); }

/* 모바일 터치 컨트롤 */
.touch-pad {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2);
  width: 100%; max-width: 480px;
  margin-top: var(--s-3);
}
.touch-btn {
  height: 56px; border: 0; border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); font-size: 22px;
  cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease);
}
.touch-btn:active { transform: scale(.93); background: var(--surface-2); }
.touch-btn-accent { background: var(--lavender); color: white; box-shadow: 0 4px 12px rgba(156,130,216,.3); }

/* AI 협력 모드 전용: 블록 순서 바꾸기 버튼 — 데스크톱·모바일 모두 노출 */
.ai-swap {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  width: 100%; max-width: 480px;
  height: 52px;
  border: 0; border-radius: var(--r-pill);
  background: var(--lavender); color: white;
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(156,130,216,.35);
  transition: transform var(--t-fast) var(--ease);
}
.ai-swap:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(156,130,216,.45); }
.ai-swap:active { transform: scale(.97); }
.ai-swap[hidden] { display: none; }

@media (hover: hover) {
  .touch-pad { display: none; }
}

/* ── 토스트 ── */
.toast {
  position: fixed; bottom: var(--s-7); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: white;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-3);
  z-index: 300;
  animation: toastIn .25s var(--ease), toastOut .35s var(--ease) 1.7s forwards;
}
@keyframes toastIn  { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ── 정보 페이지 (article) ── */
.app-shell.article { max-width: 720px; }
.prose {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--s-7) var(--s-6);
  box-shadow: var(--shadow-1);
  font-size: 15px; line-height: 1.75;
  color: var(--ink);
}
.prose h1 {
  font-size: clamp(22px, 4.5vw, 28px);
  font-weight: 800; letter-spacing: -.01em;
  margin-bottom: var(--s-4);
  color: var(--ink);
}
.prose h2 {
  font-size: 18px; font-weight: 800;
  margin-top: var(--s-7); margin-bottom: var(--s-3);
  color: var(--ink);
  padding-bottom: var(--s-2);
  border-bottom: 1.5px dashed var(--ink-soft);
}
.prose h3 {
  font-size: 15px; font-weight: 700;
  margin-top: var(--s-5); margin-bottom: var(--s-2);
  color: var(--ink-2);
}
.prose p { margin-bottom: var(--s-4); color: var(--ink-2); }
.prose .lead { font-size: 16px; color: var(--ink); }
.prose ul { margin: 0 0 var(--s-4) var(--s-5); }
.prose li { margin-bottom: var(--s-2); color: var(--ink-2); line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--peach-deep); }
.prose a:hover { color: var(--ink); }
.prose .kv-table {
  width: 100%; border-collapse: collapse;
  margin: var(--s-3) 0 var(--s-5);
  font-size: 13px;
}
.prose .kv-table th, .prose .kv-table td {
  text-align: left; padding: var(--s-3);
  border-bottom: 1px solid var(--ink-soft);
}
.prose .kv-table th {
  background: var(--surface-2);
  font-weight: 700; color: var(--ink);
}
.prose .kv-table tr:hover td { background: var(--surface-2); }

.article-footer {
  text-align: center; padding: var(--s-5) var(--s-4);
  font-size: 12px; color: var(--ink-3);
  margin-top: var(--s-5);
}
.article-footer a { color: var(--ink-2); margin: 0 4px; }
.article-footer a:hover { color: var(--peach-deep); }

/* ── 원작 footer ── */
.origin-footer {
  margin-top: var(--s-7);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.55);
  border: 1px dashed var(--ink-soft);
  border-radius: var(--r-1);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: 380px; width: 100%;
  animation: brandIn .9s .5s var(--ease) both;
}
.origin-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; color: var(--ink);
  letter-spacing: .04em;
}
.origin-line {
  font-size: 10px; color: var(--ink-3);
  line-height: 1.55; text-align: center;
}
.origin-nav {
  font-size: 11px; color: var(--ink-3);
  margin-top: 6px; line-height: 1.7;
}
.origin-nav a { color: var(--ink-2); text-decoration: none; }
.origin-nav a:hover { color: var(--peach-deep); }

/* ── 초대 화면 ── */
.invite-card {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--s-6);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-4); width: 100%; max-width: 380px;
  margin: var(--s-7) auto;
  animation: popIn .35s var(--ease);
}
.invite-qr {
  width: 200px; height: 200px;
  background: white; padding: 12px; border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
}
.invite-qr canvas, .invite-qr img { width: 100% !important; height: 100% !important; display: block; }
.invite-url {
  width: 100%;
  font-family: 'Pretendard Variable', monospace;
  font-size: 12px; color: var(--ink-2);
  background: var(--surface-2);
  padding: var(--s-3); border-radius: var(--r-1);
  text-align: center;
  word-break: break-all;
}
.invite-share-row {
  display: flex; gap: var(--s-2); width: 100%;
}
.invite-share-row .btn { flex: 1; }