@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --parchment:#F5F0E8;--parchment2:#EDE8DC;--strip:#D4C9B0;
  --text1:#2C2416;--text2:#6B5E4A;
  /* Sage shifted slightly cooler (was #7A9472) for stronger luminance separation
     from terra under red-green color blindness. Still parchment-compatible. */
  --sage:#5F9583;--terra:#B5755A;
  --warm:#FDFAF4;--sage-light:#DEEBE4;--terra-light:#F5EBE5;
}
body{font-family:'IBM Plex Mono',monospace;background:var(--parchment);color:var(--text1);min-height:100dvh;position:relative;-webkit-tap-highlight-color:transparent}
/* On wider viewports the game stays in a 600px canvas (the original aesthetic).
   On mobile it expands to fill the viewport so games are usable on phones. */
#game{width:100%;min-height:100dvh;position:relative;overflow:hidden}
@media (min-width: 720px){
  #game{height:600px;min-height:600px}
  body{overflow:hidden}
}

.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:999}

/* TYPOGRAPHY */
.serif{font-family:'Lora',serif}
.mono{font-family:'IBM Plex Mono',monospace}

/* MOBILE BASELINE — applied to most screens via media query at end */
button{font-family:inherit}

/* BUTTONS */
.btn{background:var(--terra);color:var(--warm);border:none;padding:.75rem 2rem;font-family:'IBM Plex Mono',monospace;font-size:.85rem;letter-spacing:.05em;cursor:pointer;transition:all .2s;position:relative}
.btn:hover{background:var(--text1)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--strip);padding:.6rem 1.5rem;font-family:'IBM Plex Mono',monospace;font-size:.8rem;cursor:pointer;transition:all .2s}
.btn-ghost:hover{border-color:var(--terra);color:var(--terra)}

/* RESTART BUTTONS */
.restart-game{position:absolute;top:14px;right:18px;z-index:80;background:transparent;border:none;color:var(--text2);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:.45;transition:opacity .2s,color .2s;padding:4px 6px;display:none}
.restart-game:hover{opacity:1;color:var(--terra)}
.restart-game.confirming{opacity:1;color:var(--terra)}
body[data-screen="briefing"] .restart-game,
body[data-screen="rate-screen"] .restart-game,
body[data-screen="reveal-screen"] .restart-game{display:inline-block}
.restart-round,.skip-round{background:transparent;border:none;color:var(--text2);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;opacity:.5;transition:opacity .2s,color .2s;padding:4px 6px;margin-right:6px}
.restart-round:hover,.skip-round:hover{opacity:1;color:var(--terra)}
.restart-round.confirming,.skip-round.confirming{opacity:1;color:var(--terra)}

/* MUTE TOGGLE */
.mute-toggle{background:transparent;border:1px solid var(--strip);color:var(--text2);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:3px 8px;transition:color .2s,border-color .2s,background .2s;line-height:1}
.mute-toggle:hover{color:var(--terra);border-color:var(--terra)}
.mute-toggle.muted{color:var(--text2);opacity:.55}

/* TRANSITIONS */
.fade-in{animation:fadeInGame .4s ease forwards}
@keyframes fadeInGame{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .score-chip,.streak-dot,.ink-bloom,.score-box,.calibration-badge,.p-stat,.weakness-fill,.timer-fill{transition:none !important;animation:none !important}
  .ink-bloom.fire{animation:none !important;opacity:0 !important}
  .timer-bar.bar-urgent{animation:none !important}
}