:root{
  --bg-dark:#0b0b09;
  --burnt:#a85f2b;
  --honey:#d9a86f;
  --olive:#9faf7a;
  --paper:#fbf7f1;
  --muted:#cfc5b9;
}

*{ box-sizing:border-box }

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 10% 10%, #20170f 0%, #0b0b09 65%);
  font-family:Inter,system-ui,sans-serif;
}

/* =========================
   Layout
   ========================= */

.game-wrapper{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:3rem;
}

.screen{
  display:none;
  max-width:900px;
  width:100%;
}

.screen.active{
  display:block;
}

/* =========================
   Intro
   ========================= */

.intro-card{
  padding:3rem;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}

.game-title{
  font-family:'Playfair Display',serif;
  color:var(--burnt);
  font-size:3rem;
  margin:0 0 0.5rem;
}

.game-instruction{
  color:var(--muted);
  max-width:640px;
  line-height:1.6;
}

.primary-btn{
  margin-top:1.5rem;
  padding:.9rem 2rem;
  border-radius:12px;
  border:none;
  background:linear-gradient(90deg,var(--honey),var(--burnt));
  color:#1b120a;
  font-weight:600;
  cursor:pointer;
}

/* =========================
   Card + Scratch (FIXED)
   ========================= */

/* OUTER CARD — NO PADDING */
.card-container{
  position:relative;
  margin-top:2rem;
  width:100%;
  min-height:360px;
  border-radius:22px;
  background:linear-gradient(180deg,#2a1f15,#15110d);
  box-shadow:0 40px 90px rgba(0,0,0,.7);
  overflow:hidden; /* CRITICAL */
}

/* INNER CONTENT — ALL PADDING MOVED HERE */
.poem-layer{
  position:relative;
  z-index:1;
  height:100%;
  padding:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.poem-text{
  font-family:'Playfair Display',serif;
  color:var(--paper);
  font-size:1.35rem;
  line-height:1.75;
  white-space:pre-wrap;
  text-align:center;
  text-shadow:0 10px 25px rgba(0,0,0,.5);
}

/* SCRATCH CANVAS — FULL BLEED */
.scratch-canvas{
  position:absolute;
  inset:0;                 /* 🔑 THIS fixes the gap */
  width:100%;
  height:100%;
  z-index:2;
  border-radius:22px;      /* must match card */
  cursor:none;
}

/* =========================
   Response + Controls
   ========================= */

.response-text{
  margin-top:1.6rem;
  color:var(--muted);
}

.action-buttons{
  margin-top:1.6rem;
  display:flex;
  gap:1rem;
}

.secondary-btn{
  background:none;
  border:1px solid rgba(255,255,255,.08);
  padding:.6rem 1.1rem;
  border-radius:10px;
  color:var(--olive);
  cursor:pointer;
}

/* ===============================
   FOOTER — UNIVERSAL (TRANSPARENT)
   =============================== */

.footer-section {
  padding: 3rem 1.5rem 2.5rem;
  background: transparent;
}

.footer-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: center;
}

/* Navigation row */
.footer-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  font-size: 0.9rem;
  color: white;
  opacity: 0.75;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}

.footer-link:hover {
  opacity: 1;
}

/* Legal line */
.footer-legal {
  font-size: 0.75rem;
  opacity: 0.55;
  letter-spacing: 0.03em;
  text-align: center;
}