/* mercy-lab — goth/shoegaze design system */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@200;300;400;500&display=swap');

:root {
  --bg: #0a0612;
  --bg-grad: radial-gradient(ellipse at top, #150a1f 0%, #0a0612 60%, #050309 100%);
  --ink: #efe6d4;
  --ink-dim: #a99e8a;
  --ink-faint: #6e6555;
  --amber: #c89759;
  --crimson: #6b1f2e;
  --crimson-glow: #a83a4b;
  --plum: #2a1838;
  --line: rgba(239, 230, 212, 0.08);
  --line-bold: rgba(239, 230, 212, 0.16);
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}

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

html { font-size: 17px; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg-grad);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.65;
  min-height: 100vh;
  letter-spacing: 0.005em;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* Dither noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.lab-shell { max-width: 880px; margin: 0 auto; padding: 4rem 2rem 6rem; position: relative; z-index: 2; }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ink);
}
h1 { font-size: 2.4rem; line-height: 1.1; margin-bottom: 0.5rem; }
h2 { font-size: 1.2rem; font-weight: 400; color: var(--ink-dim); margin: 2.5rem 0 1rem; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; }
h3 { font-size: 1.05rem; font-weight: 400; }

p, li, label, .body { font-family: var(--serif); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); font-size: 0.92em; font-style: italic; }
.amber { color: var(--amber); }

a { color: var(--amber); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 600ms ease-out; }
a:hover { border-bottom-color: var(--amber); }

button, .btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-bold);
  padding: 0.7rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 800ms ease-out;
  border-radius: 1px;
}
button:hover { color: var(--amber); border-color: var(--amber); }
button:focus-visible { color: var(--amber); border-color: var(--amber); outline: 1px solid var(--amber); outline-offset: 2px; }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button:disabled:hover { color: var(--ink); border-color: var(--line-bold); }

input[type="text"], input[type="password"], textarea {
  background: rgba(0,0,0,0.3);
  border: none;
  border-bottom: 1px solid var(--line-bold);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  padding: 0.7rem 0.2rem;
  width: 100%;
  transition: border-color 800ms ease-out;
}
input:focus, textarea:focus { outline: none; border-bottom-color: var(--amber); }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

.crest {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 200;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 3rem;
}
.crest a { color: var(--ink-faint); }
.crest a:hover { color: var(--amber); }

.card { border: 1px solid var(--line); padding: 1.6rem 1.8rem; margin-bottom: 1rem; background: rgba(0,0,0,0.18); border-radius: 1px; transition: border-color 800ms; }
.card:hover { border-color: var(--line-bold); }

.fog-tile {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 1.2s ease-out;
  position: relative;
}
.fog-tile.revealed { background: rgba(200,151,89,0.06); border-color: rgba(200,151,89,0.3); }
.fog-tile.fading { opacity: 0.7; }
.fog-tile.weathered { opacity: 0.4; background: rgba(106,106,138,0.05); }
.fog-tile.mystery { background: rgba(31,27,46,0.6); border-color: rgba(168,58,75,0.2); cursor: not-allowed; }
.fog-tile.mystery:hover { border-color: rgba(168,58,75,0.4); }

.dim-mode { filter: brightness(0.7) saturate(0.7); }

/* the thumb (sunday) */
.thumb-pad {
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid var(--line-bold);
  background: radial-gradient(circle, rgba(200,151,89,0.04) 0%, transparent 70%);
  cursor: pointer;
  transition: all 600ms ease-out;
  position: relative;
  margin: 3rem auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint);
}
.thumb-pad:hover { border-color: var(--amber); background: radial-gradient(circle, rgba(200,151,89,0.12) 0%, transparent 70%); }
.thumb-pad.pressed { background: radial-gradient(circle, rgba(168,58,75,0.25) 0%, transparent 70%); border-color: var(--crimson-glow); color: var(--ink); }
.thumb-pad.both { background: radial-gradient(circle, rgba(200,151,89,0.3) 0%, transparent 70%); border-color: var(--amber); }

.progress { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }

.flag {
  display: inline-block; font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 0.2rem 0.6rem; border: 1px solid var(--line); color: var(--ink-faint); margin-right: 0.4rem;
}
.flag.amber { color: var(--amber); border-color: rgba(200,151,89,0.3); }

.answer-text { font-style: italic; color: var(--ink); padding: 1rem 0; line-height: 1.7; }
.answer-mine::before { content: '— you'; font-style: normal; color: var(--ink-faint); font-size: 0.75em; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.answer-theirs::before { content: '— her'; font-style: normal; color: var(--ink-faint); font-size: 0.75em; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }

.grid-biomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.biome-card h3 { color: var(--ink); margin-bottom: 0.3rem; }
.biome-card .biome-count { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-faint); text-transform: uppercase; }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 80px)); gap: 6px; margin-top: 1rem; }

.fade-in { animation: fade-in 1.2s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }