/* ==========================================================================
   논리 카드 챌린지 — 보드게임 · 종이카드 감성
   어두운 테이블(펠트) 위에 놓인 따뜻한 종이 매트와 카드보드게임 카드들
   ========================================================================== */

:root {
  --felt: #17251d;
  --felt-deep: #0e1712;

  --paper: #f6ecd6;
  --paper-2: #ede1c3;
  --paper-deep: #d9c69c;
  --paper-shadow: rgba(17, 12, 3, 0.4);

  --ink: #2a2013;
  --ink-soft: #6b5c42;
  --ink-faint: #a3927099;

  --accent: #8a2f2f;
  --accent-deep: #6e2222;
  --accent-soft: #8a2f2f1f;

  --navy: #2c3a55;
  --navy-soft: #2c3a551a;

  --forest: #3b6e55;
  --forest-deep: #2a4e3d;
  --forest-soft: #3b6e551f;

  --brass: #a9812f;
  --brass-deep: #7a5e22;
  --brass-soft: #a9812f22;

  --signal-true: #c9a04a;
  --signal-true-soft: #c9a04a26;
  --signal-false: #5c8ec2;
  --signal-false-soft: #5c8ec226;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* type scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.5rem;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  font-size: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: "Gowun Dodum", "Noto Sans KR", sans-serif;
  font-size: var(--fs-base);
  color: var(--ink);
  background: linear-gradient(180deg, var(--felt), var(--felt-deep));
  min-height: 100vh;
}

h1, h2 {
  font-family: "Gowun Batang", "Gowun Dodum", serif;
  margin: 0;
}

button { font: inherit; }

/* ---------------- header ---------------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid rgba(246, 236, 214, 0.08);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand-mark { flex-shrink: 0; }
.app-header h1 {
  font-size: var(--fs-lg);
  color: var(--paper);
  cursor: pointer;
  transition: opacity 140ms var(--ease-out);
}
.app-header h1:hover { opacity: 0.75; }
.app-header h1:active { opacity: 0.55; }

.link-btn {
  background: rgba(246, 236, 214, 0.08);
  border: 1px solid rgba(246, 236, 214, 0.22);
  color: var(--paper-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.link-btn:hover { background: rgba(246, 236, 214, 0.16); border-color: rgba(246, 236, 214, 0.35); }
.link-btn:active { transform: scale(0.97); }

/* ---------------- layout ---------------- */

#app {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
}

.screen.hidden { display: none; }

.panel {
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: calc(var(--radius) + 6px);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: 0 20px 40px var(--paper-shadow);
}

/* ---------------- start screen ---------------- */

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--paper-deep);
}
.hero-title-text {
  font-size: 2.6rem;
  line-height: 1.15;
  background: linear-gradient(100deg, var(--ink) 25%, var(--brass) 48%, var(--ink) 65%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShine 6s ease-in-out infinite;
}
@keyframes titleShine {
  0%, 15% { background-position: 200% 0; }
  85%, 100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-text { animation: none; background-position: 0 0; }
}
.link-btn--on-paper {
  background: transparent;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}
.link-btn--on-paper:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.eyebrow {
  font-family: "Gowun Dodum", sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brass-deep);
  margin: 0 0 var(--sp-2);
}

.intro {
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-lg);
}
.intro strong { color: var(--ink); font-weight: 700; }

.difficulty-tabs {
  display: flex;
  gap: var(--sp-2);
  background: var(--paper-2);
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--paper-deep);
  margin: 0 0 var(--sp-5);
}
.tab-btn {
  flex: 1;
  padding: var(--sp-3) var(--sp-2);
  border-radius: calc(var(--radius-sm) - 4px);
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 700;
  font-family: "Gowun Dodum", sans-serif;
  font-size: var(--fs-sm);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.tab-btn.active {
  background: var(--ink);
  color: var(--paper);
}

.best-score-line {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin-bottom: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.best-score-line strong {
  color: var(--brass-deep);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.credit-line {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
}
.credit-line a {
  color: rgba(246, 236, 214, 0.5);
  text-decoration: none;
  transition: color 140ms var(--ease-out);
}
.credit-line a:hover,
.credit-line a:focus-visible {
  color: var(--paper);
}

/* ---------------- buttons ---------------- */

.primary-btn, .secondary-btn, .small-btn, .ghost-btn {
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: "Gowun Dodum", sans-serif;
  font-weight: 700;
  transition: transform 140ms var(--ease-out), filter 140ms var(--ease-out), background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.primary-btn:active, .secondary-btn:active, .small-btn:active, .ghost-btn:active, .link-btn--on-paper:active {
  transform: scale(0.97);
}

.primary-btn {
  display: block;
  width: 100%;
  padding: var(--sp-4);
  font-size: var(--fs-md);
  margin-top: var(--sp-5);
  color: var(--paper);
  background: var(--accent);
  border: none;
  box-shadow: 0 8px 20px rgba(110, 34, 34, 0.28);
}
.primary-btn:hover { filter: brightness(1.08); }

.secondary-btn {
  padding: var(--sp-3);
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  flex: 1 1 0%;
  width: auto;
  margin-top: 0;
}
.secondary-btn:hover { background: var(--navy-soft); }

.small-btn {
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--paper-deep);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.small-btn:hover { color: var(--ink); border-color: var(--ink-soft); }

#btn-submit { margin-top: var(--sp-4); }

.ghost-btn {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: transparent;
  border: 1.5px solid var(--paper-deep);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  text-align: center;
  cursor: pointer;
}
.ghost-btn:hover { color: var(--accent-deep); border-color: var(--accent); }
.ghost-btn.hidden { display: none; }

.round-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.round-actions.hidden { display: none; }
.round-actions .primary-btn { flex: 1 1 0%; width: auto; margin-top: 0; }

/* ---------------- game topbar ---------------- */

.game-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-5);
}
#round-indicator {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.score-plate {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.score-plate .score-label {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-weight: 600;
}
#session-score {
  font-weight: 700;
  color: var(--brass-deep);
  font-size: var(--fs-xl);
  line-height: 1;
  display: inline-block;
}
@keyframes scorePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
#session-score.pulse { animation: scorePulse 380ms var(--ease-out); }

/* ---------------- truth table: dark "readout window" cut into the paper ---------------- */

.truth-table-wrap {
  margin-bottom: var(--sp-5);
  background: linear-gradient(180deg, #201c30, #17141f);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(17, 12, 3, 0.35);
}

.tt-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(246, 236, 214, 0.4);
}
.tt-head .tt-inputs { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.tt-head .tt-inputs span { width: 56px; text-align: center; }
.tt-head .tt-arrow-spacer { flex: 1 1 auto; min-width: 24px; }
.tt-head .tt-out-label { width: 72px; text-align: center; flex-shrink: 0; }

.tt {
  display: flex;
  flex-direction: column;
}
.tt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-top: 1px solid rgba(246, 236, 214, 0.06);
}
.tt-row:first-child { border-top: none; }
.tt-inputs {
  display: flex;
  gap: var(--sp-2);
  flex: 0 0 auto;
}
.tt-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 56px;
  padding: var(--sp-2) 0;
  border-radius: var(--radius-sm);
  transition: background 200ms var(--ease-out);
}
.tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tt-val {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.tt-cell.is-true { background: var(--signal-true-soft); }
.tt-cell.is-true .tt-dot { background: var(--signal-true); }
.tt-cell.is-true .tt-val { color: var(--signal-true); }
.tt-cell.is-false { background: var(--signal-false-soft); }
.tt-cell.is-false .tt-dot { background: var(--signal-false); }
.tt-cell.is-false .tt-val { color: var(--signal-false); }

/* 입력에서 출력까지 이어지는 회로선 — 빈 공간을 채우고 신호 흐름을 표현 */
.tt-arrow {
  flex: 1 1 auto;
  position: relative;
  height: 2px;
  min-width: 24px;
  margin: 0 2px;
  transition: background 200ms var(--ease-out);
}
.tt-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.tt-row.is-true .tt-arrow { background: linear-gradient(90deg, var(--signal-true-soft), var(--signal-true)); }
.tt-row.is-true .tt-arrow::after { border-left: 6px solid var(--signal-true); }
.tt-row.is-false .tt-arrow { background: linear-gradient(90deg, var(--signal-false-soft), var(--signal-false)); }
.tt-row.is-false .tt-arrow::after { border-left: 6px solid var(--signal-false); }

.tt-out {
  width: 72px;
  padding: var(--sp-2) 0;
  flex-shrink: 0;
}
.tt-out .tt-val { font-size: var(--fs-md); }
.tt-out.is-true { background: var(--signal-true); }
.tt-out.is-true .tt-dot { background: rgba(23, 20, 31, 0.55); }
.tt-out.is-true .tt-val { color: #241a05; }
.tt-out.is-false { background: var(--signal-false); }
.tt-out.is-false .tt-dot { background: rgba(23, 20, 31, 0.55); }
.tt-out.is-false .tt-val { color: #0c1b2c; }

/* ---------------- expression build area ---------------- */

.build-area { margin-bottom: var(--sp-3); }

.build-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brass-deep);
  margin-bottom: var(--sp-2);
}

.expression-strip {
  min-height: 68px;
  background: linear-gradient(180deg, var(--felt), var(--felt-deep));
  border-radius: var(--radius);
  padding: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(246, 236, 214, 0.06);
}
.expression-strip .placeholder {
  color: rgba(246, 236, 214, 0.35);
  font-size: var(--fs-sm);
  margin: 0 auto;
}

@keyframes cardPop {
  from { opacity: 0; transform: scale(0.8) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.expression-strip .card:last-child {
  animation: cardPop 200ms var(--ease-out);
}

.build-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-2);
  gap: var(--sp-2);
}
#card-count-display {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------------- cards ---------------- */

.card-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
}

.card {
  position: relative;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-1) var(--sp-2);
  text-align: center;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--paper);
  border: 1.5px solid var(--paper-deep);
  box-shadow: 0 2px 5px rgba(20, 14, 4, 0.12);
  transition: transform 140ms var(--ease-out), border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}

.card .symbol {
  font-family: "Gowun Batang", serif;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--ink);
}
.card .label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.card:hover { transform: translateY(-2px); border-color: var(--ink-soft); box-shadow: 0 6px 14px rgba(20, 14, 4, 0.18); }
.card:active { transform: scale(0.96); }

.card.op .symbol { color: var(--navy); }
.card.var .symbol { color: var(--forest-deep); }

.expression-strip .card {
  padding: var(--sp-2) var(--sp-3);
  cursor: default;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.expression-strip .card:hover { transform: none; border-color: var(--paper-deep); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }

/* ---------------- feedback ---------------- */

.feedback {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  line-height: 1.65;
  border: 1px solid transparent;
}
.feedback.hidden { display: none; }

@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.feedback.pop { animation: feedbackIn 220ms var(--ease-out); }

.feedback .stars {
  font-size: var(--fs-lg);
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--brass-deep);
}
.feedback .stars span {
  display: inline-block;
  opacity: 0;
  animation: starPop 280ms var(--ease-out) forwards;
}
.feedback .stars span:nth-child(1) { animation-delay: 40ms; }
.feedback .stars span:nth-child(2) { animation-delay: 110ms; }
.feedback .stars span:nth-child(3) { animation-delay: 180ms; }
@keyframes starPop {
  from { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.feedback.success {
  background: var(--forest-soft);
  border-color: var(--forest);
  color: var(--forest-deep);
}
.feedback.success.tier-perfect {
  background: var(--brass-soft);
  border-color: var(--brass);
  color: var(--brass-deep);
}
.feedback strong { color: var(--ink); }

.feedback.error {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* ---------------- end screen ---------------- */

#screen-end h2 {
  font-size: var(--fs-xl);
  color: var(--ink);
}
.end-total {
  font-weight: 700;
  color: var(--brass-deep);
  background: var(--brass-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) 0;
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--fs-3xl);
}
.end-best-note {
  color: var(--forest-deep);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.round-summary-wrap { margin: var(--sp-5) 0 var(--sp-1); }
#round-summary {
  width: 100%;
  border-collapse: collapse;
}
#round-summary th, #round-summary td {
  padding: var(--sp-2) var(--sp-2);
  text-align: center;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--paper-deep);
}
#round-summary th {
  color: var(--ink-faint);
  font-weight: 700;
  font-size: var(--fs-xs);
}
#round-summary tbody tr:last-child td { border-bottom: none; }

/* ---------------- tutorial modal ---------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 23, 18, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--paper);
  border-radius: calc(var(--radius) + 4px);
  padding: var(--sp-6) var(--sp-5);
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.modal-box h2 { color: var(--ink); font-size: var(--fs-xl); }
.modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: transparent;
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  cursor: pointer;
}
.tutorial-note { color: var(--ink-soft); line-height: 1.7; font-size: var(--fs-sm); }
.tutorial-note strong { color: var(--ink); }

.tutorial-op-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.tutorial-op {
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}
.tutorial-op.new-op {
  border-color: var(--forest);
  background: var(--forest-soft);
}
.tutorial-op .op-symbol {
  font-family: "Gowun Batang", serif;
  font-size: var(--fs-xl);
  width: 40px;
  text-align: center;
  flex-shrink: 0;
  color: var(--navy);
}
.tutorial-op.new-op .op-symbol { color: var(--forest-deep); }
.tutorial-op .op-body { flex: 1; min-width: 0; }
.tutorial-op .op-name { font-weight: 700; color: var(--ink); font-size: var(--fs-base); }
.tutorial-op .op-desc { font-size: var(--fs-sm); color: var(--ink-soft); margin: 2px 0 var(--sp-3); }
.tutorial-op table { font-size: var(--fs-xs); width: 100%; border-collapse: collapse; }
.tutorial-op th, .tutorial-op td { padding: var(--sp-1) var(--sp-2); text-align: center; border-bottom: 1px solid var(--paper-deep); }
.tutorial-op thead th { color: var(--ink-faint); }

.badge-new {
  display: inline-block;
  background: var(--forest);
  color: var(--paper);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: var(--sp-2);
  vertical-align: middle;
}

/* ---------------- responsive ---------------- */

@media (max-width: 420px) {
  .panel { padding: var(--sp-5) var(--sp-4); }
  .app-header h1 { font-size: var(--fs-md); }
  .card-palette { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  .tt-inputs { flex-wrap: wrap; }
}