/* ═══════════════════════════════════════════════════════════════
   common.css — single source of truth for kenkenhelper.netlify.app
   Two fully independent palettes. Light = warm cream. Dark = cool blue-grey.
   Never invert. Never mix.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── LIGHT MODE ── warm, editorial, cream/green ── */
:root {
  /* Backgrounds */
  --page:    #f5f2ed;
  --surface: #ffffff;
  --panel:   #ede9e2;
  --panel2:  #e2ddd5;
  --panel3:  #d4cec4;

  /* Text */
  --ink:  #16130f;
  --ink2: #36312c;
  --ink3: #5c5650;

  /* Borders */
  --border:  rgba(22,19,15,0.14);
  --border2: rgba(22,19,15,0.32);

  /* Accent — green */
  --accent:       #2d7d52;
  --accent-light: #e8f5ee;
  --accent-mid:   #5fab80;
  --accent-dark:  #1e5e3b;

  /* Semantic */
  --red:          #b83232;
  --red-light:    #fdf0f0;
  --red-mid:      #d06060;

  --amber:        #7a4e00;
  --amber-light:  #fef6e6;
  --amber-mid:    #a06820;

  --blue:         #2a4a8a;
  --blue-light:   #eef2fc;
  --blue-mid:     #5070c0;

  --purple:       #6b3fa0;
  --purple-light: #f2ecfa;
  --purple-mid:   #9060c8;

  --green:        #2a7a4e;
  --green-light:  #e6f4ed;
  --green-mid:    #5fab80;

  --gold:         #a07020;
  --gold-light:   #fdf4e0;

  /* Solver highlights */
  --hl-solved:         #e8f5ee;
  --hl-solved-border:  #2d7d52;
  --hl-cage:           #fef6e6;
  --hl-cage-border:    #a06820;
  --hl-row-col:        #eef2fc;
  --hl-row-col-border: #5070c0;
  --hl-elim:           #fdf0f0;
  --hl-elim-border:    #d06060;
  --hl-try:            #f2ecfa;
  --hl-try-border:     #9060c8;

  /* KenKen cage tints */
  --cage-0:  rgba(45,125,82,0.13);
  --cage-1:  rgba(42,74,138,0.13);
  --cage-2:  rgba(160,64,32,0.13);
  --cage-3:  rgba(107,63,160,0.13);
  --cage-4:  rgba(32,120,160,0.13);
  --cage-5:  rgba(140,110,0,0.13);
  --cage-6:  rgba(160,32,90,0.13);
  --cage-7:  rgba(0,130,130,0.13);
  --cage-8:  rgba(100,70,30,0.13);
  --cage-9:  rgba(60,140,60,0.13);
  --cage-10: rgba(140,60,60,0.13);
  --cage-11: rgba(60,60,160,0.13);

  /* Game pieces */
  --tiger:       #d4820a;
  --tiger-dark:  #8a5000;
  --tiger-light: #fef3e0;
  --tiger-glow:  rgba(212,130,10,0.22);
  --lamb:        #3a6fa8;
  --lamb-dark:   #1e4a78;
  --lamb-light:  #e8f0fa;
  --lamb-glow:   rgba(58,111,168,0.22);

  /* Board */
  --board-bg:   #fdf8f0;
  --board-line: #9a8e7e;
  --node-empty: #f0ebe0;

  /* Buttons */
  --btn-bg:       #e8e2d8;
  --btn-bg-hover: #d8d0c4;

  /* Combo panel (KenKen calc) */
  --combo:       #3d5a80;
  --combo-light: #eef2f7;
  --combo-mid:   #7a9bbf;
  --combo-border:#b0c4d8;

  /* Radii */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 13px;

  /* Aliases kept for backward compat */
  --cream:  #f5f2ed;
  --cream2: #ede9e2;
  --cream3: #e2ddd5;
  --r: 8px;
}

/* ── DARK MODE ── cool blue-grey, VS Code / Linear family ── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds — cool blue-grey, NOT warm-brown-inverted */
    --page:    #0f1117;
    --surface: #1a1d24;
    --panel:   #222530;
    --panel2:  #2a2f3d;
    --panel3:  #323848;

    /* Text — cool white */
    --ink:  #e8eaf0;
    --ink2: #a8b0c0;
    --ink3: #6a7488;

    /* Borders */
    --border:  rgba(255,255,255,0.08);
    --border2: rgba(255,255,255,0.18);

    /* Accent — same green, brighter on dark */
    --accent:       #4db87a;
    --accent-light: #0a1f14;
    --accent-mid:   #3a9060;
    --accent-dark:  #7dd4a8;

    /* Semantic — vivid enough to read, not harsh */
    --red:          #f07070;
    --red-light:    #1e0808;
    --red-mid:      #c04040;

    --amber:        #e0a030;
    --amber-light:  #1c1406;
    --amber-mid:    #b07820;

    --blue:         #6090e0;
    --blue-light:   #08101e;
    --blue-mid:     #4070c0;

    --purple:       #a070e0;
    --purple-light: #120820;
    --purple-mid:   #7848c0;

    --green:        #4db87a;
    --green-light:  #0a1f14;
    --green-mid:    #3a9060;

    --gold:         #d09030;
    --gold-light:   #1a1206;

    /* Solver highlights — tinted dark backgrounds */
    --hl-solved:         #0a2016;
    --hl-solved-border:  #4db87a;
    --hl-cage:           #1c1406;
    --hl-cage-border:    #e0a030;
    --hl-row-col:        #08101e;
    --hl-row-col-border: #6090e0;
    --hl-elim:           #1e0808;
    --hl-elim-border:    #f07070;
    --hl-try:            #120820;
    --hl-try-border:     #a070e0;

    /* KenKen cage tints — lighter on dark */
    --cage-0:  rgba(77,184,122,0.16);
    --cage-1:  rgba(96,144,224,0.16);
    --cage-2:  rgba(224,120,70,0.16);
    --cage-3:  rgba(160,112,224,0.16);
    --cage-4:  rgba(64,180,224,0.16);
    --cage-5:  rgba(200,180,60,0.16);
    --cage-6:  rgba(224,80,150,0.16);
    --cage-7:  rgba(60,200,200,0.16);
    --cage-8:  rgba(180,150,90,0.16);
    --cage-9:  rgba(100,200,100,0.16);
    --cage-10: rgba(200,90,90,0.16);
    --cage-11: rgba(90,90,220,0.16);

    /* Game pieces — same hue, adjusted for dark bg */
    --tiger:       #f0a030;
    --tiger-dark:  #c07820;
    --tiger-light: #1e1406;
    --tiger-glow:  rgba(240,160,48,0.28);
    --lamb:        #6090d8;
    --lamb-dark:   #4070b8;
    --lamb-light:  #08101e;
    --lamb-glow:   rgba(96,144,216,0.28);

    /* Board */
    --board-bg:   #181c26;
    --board-line: #3a4258;
    --node-empty: #222736;

    /* Buttons */
    --btn-bg:       #222530;
    --btn-bg-hover: #2a2f3d;

    /* Combo panel */
    --combo:       #6090d8;
    --combo-light: #08101e;
    --combo-mid:   #4070b8;
    --combo-border:#2a3a5a;

    /* Backward compat aliases */
    --cream:  #0f1117;
    --cream2: #222530;
    --cream3: #2a2f3d;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL BASE
   ═══════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Mono', 'Courier New', monospace;
  background: var(--page);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
header {
  background: var(--ink);
  padding: 1rem 1.4rem .9rem;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -.01em;
}
.header-title em { font-style: italic; color: #8ecfa8; }
.header-sub {
  font-size: 11px;
  color: #a09890;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — grouped
   ═══════════════════════════════════════════════════════════════ */
.site-nav {
  background: #1a1610;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0 .5rem;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.nav-group { display: flex; align-items: stretch; }
.nav-group-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7060;
  padding: 0 8px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-right: 1px solid #2a2218;
  user-select: none;
}
.nav-sep {
  width: 1px;
  background: #2a2218;
  margin: 7px 0;
  flex-shrink: 0;
}
.site-nav a {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a9188;
  text-decoration: none;
  padding: 9px 10px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  min-height: 44px;           /* touch target height */
  -webkit-tap-highlight-color: transparent;
}
.site-nav a:hover { color: #d4cdc4; }
.site-nav a.active { color: #f0ebe2; border-bottom-color: #8ecfa8; }

/* ═══════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
}

/* ═══════════════════════════════════════════════════════════════
   COMMON COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Panel / card */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  margin-bottom: .9rem;
}
.panel-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Buttons */
.btn {
  padding: 9px 16px;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s, color .13s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover  { background: var(--btn-bg-hover); color: var(--ink); }
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
  font-family: 'Playfair Display', serif;
  font-size: 13px;
}
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger  { color: var(--red); border-color: var(--border2); background: transparent; }
.btn.danger:hover  { background: var(--red-light); border-color: var(--red-mid); }
.btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* Status bars */
.status-bar {
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: 12px;
  margin-bottom: .9rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.status-bar.ok   { background: var(--accent-light); color: var(--accent-dark); border-color: rgba(45,125,82,.2); }
.status-bar.warn { background: var(--amber-light);  color: var(--amber);       border-color: rgba(160,104,32,.2); }
.status-bar.err  { background: var(--red-light);    color: var(--red);         border-color: rgba(184,50,50,.2); }
.status-bar.info { background: var(--blue-light);   color: var(--blue);        border-color: rgba(42,74,138,.2); }

/* ── Score chips (games) ── */
.score-bar {
  display: flex;
  gap: 10px;
  margin-bottom: .85rem;
}
.score-chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .65rem .9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.score-chip.tigers { background: var(--tiger-light); }
.score-chip.lambs  { background: var(--lamb-light); }
.score-num {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.score-lbl { font-size: 10px; color: var(--ink3); letter-spacing: .08em; text-transform: uppercase; }

/* ── Turn card (games) ── */
.turn-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: .85rem;
  min-height: 56px;
}
.turn-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.turn-dot.tiger { background: var(--tiger); }
.turn-dot.lamb  { background: var(--lamb); }
.turn-text { font-size: 13px; color: var(--ink2); line-height: 1.45; }
.turn-text strong { color: var(--ink); font-weight: 500; }

/* ── Phase badge (games) ── */
.phase-bar {
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: .7rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.phase-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.phase-badge.placement  { background: var(--green-light); color: var(--green); }
.phase-badge.movement   { background: var(--amber-light); color: var(--amber); }
.phase-badge.setup      { background: var(--blue-light);  color: var(--blue); }

/* ── Move log (games) ── */
.move-log-title {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: .4rem;
}
.move-log { display: flex; flex-direction: column; gap: 2px; }
.log-entry {
  display: flex;
  gap: 6px;
  font-size: 11px;
  padding: 2px 0;
  color: var(--ink2);
}
.log-num { color: var(--ink3); min-width: 22px; }
.log-tiger   { color: var(--tiger); }
.log-lamb    { color: var(--lamb); }
.log-capture { color: var(--red); font-weight: 500; }

/* ── Game over card ── */
.gameover-card {
  padding: 1.4rem 1.2rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  text-align: center;
  margin-bottom: .9rem;
}
.gameover-card.tiger-wins { background: var(--tiger-light); border-color: var(--tiger-dark); }
.gameover-card.lamb-wins  { background: var(--lamb-light);  border-color: var(--lamb-dark); }
.gameover-emoji { font-size: 36px; margin-bottom: .4rem; }
.gameover-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .3rem;
}
.gameover-sub  { font-size: 13px; color: var(--ink2); margin-bottom: .9rem; line-height: 1.5; }
.gameover-stats { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; }
.gameover-stat .num { font-family: 'Playfair Display',serif; font-size: 28px; color: var(--ink); }
.gameover-stat .lbl { font-size: 10px; color: var(--ink3); text-transform: uppercase; letter-spacing:.08em; }
.play-again-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 8px;
  min-height: 44px;
  touch-action: manipulation;
}
.play-again-btn:hover { background: var(--accent-dark); }

/* ── Setup screen (games) ── */
.setup-screen { display: flex; flex-direction: column; gap: 1.2rem; }
.setup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.3rem;
}
.setup-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.setup-section { margin-bottom: 1rem; }
.setup-lbl {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: .5rem;
}
.setup-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.setup-opt {
  flex: 1;
  min-width: 100px;
  padding: 9px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .13s;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.setup-opt:hover { background: var(--btn-bg-hover); color: var(--ink); }
.setup-opt.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
}
.tiger-opt.active { background: var(--tiger); border-color: var(--tiger-dark); }
.lamb-opt.active  { background: var(--lamb);  border-color: var(--lamb-dark); }
.opt-icon { font-size: 16px; }
.start-btn {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  cursor: pointer;
  margin-top: .5rem;
  min-height: 48px;
  touch-action: manipulation;
}
.start-btn:hover { background: var(--accent-dark); }

/* ── Menu btn (games) ── */
.menu-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
}
.menu-btn:hover { background: var(--btn-bg-hover); color: var(--ink); }

/* ── Game layout ── */
.game-layout {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}
.board-col { flex: 0 0 auto; }
.info-col  { flex: 1; min-width: 200px; }
.board-wrap { position: relative; }
.board-wrap svg {
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 680px) {
  .game-layout { flex-direction: column; }
  .board-wrap svg { width: 100% !important; height: auto !important; }
  .info-col { width: 100%; }
}

/* ── Legend ── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: .85rem;
}
.legend-row { display: flex; align-items: center; gap: 5px; }
.legend-swatch {
  width: 18px; height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── Thinking dots ── */
.thinking-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.thinking-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink3);
  animation: td .9s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: .18s; }
.thinking-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes td { 0%,60%,100%{opacity:.2;transform:scale(.8)} 30%{opacity:1;transform:scale(1)} }

/* ── About section ── */
.about-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.3rem;
  margin-top: 1.4rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.7;
}
.about-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .7rem;
}
.about-p { margin-bottom: .75rem; }
.about-p:last-child { margin-bottom: 0; }
.about-p strong { color: var(--ink); font-weight: 500; }

/* ── Utility ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Responsive nav — narrow viewports (devtools, small phones) ── */
@media (max-width: 600px) {
  header { padding: .75rem 1rem; }
  .header-sub { display: none; }
  .nav-group-label { display: none; }
  .site-nav a { padding: 9px 8px; font-size: 10px; letter-spacing: .03em; }
}
@media (max-width: 420px) {
  .site-nav a { padding: 9px 6px; font-size: 9px; }
}