/* nori.css: shared look for every Nori game. Soft pastel, rounded, phone-first. */
:root {
  --bg: #fff7fb; --ink: #2b2240; --muted: #7a6f8f; --card: #ffffff;
  --accent: #ff7aa8; --accent-ink: #ffffff; --accent-2: #7ec8ff; --line: #f0dbe7;
  --radius: 18px; --font: ui-rounded, "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1d1828; --ink: #f4eefc; --muted: #b3a8c7; --card: #2a2338; --line: #3a3150; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { display: flex; flex-direction: column; min-height: 100dvh; overscroll-behavior: none; }
a { color: var(--accent); }

.nori-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
.nori-title { flex: 1; font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nori-icon { min-width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--card); color: var(--ink);
  font-size: 1.1rem; display: grid; place-items: center; text-decoration: none; box-shadow: 0 2px 0 var(--line); cursor: pointer; }

#game { flex: 1; display: grid; place-items: center; padding: 12px; touch-action: manipulation; user-select: none; }
canvas { max-width: 100%; max-height: 100%; touch-action: none; }

.nori-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(43, 34, 64, .35);
  backdrop-filter: blur(4px); padding: 16px; z-index: 10; }
.nori-card { width: min(380px, 100%); background: var(--card); border-radius: var(--radius); padding: 24px;
  text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.15); animation: nori-pop .18s ease-out; }
.nori-card h1, .nori-card h2 { margin: 0 0 12px; }
.nori-how { text-align: left; color: var(--muted); padding-left: 1.2em; margin: 0 0 16px; line-height: 1.5; }
.nori-score { font-size: 1.6rem; font-weight: 800; margin: 4px 0; }
.nori-best { color: var(--muted); margin: 4px 0 16px; }
.nori-btn { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: var(--accent);
  color: var(--accent-ink); font: 800 1.15rem var(--font); cursor: pointer; box-shadow: 0 4px 0 #e05c8b; }
.nori-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #e05c8b; }
.nori-vote { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: 14px; color: var(--muted); font-weight: 700; }
.nori-vote-btn { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(43, 34, 64, .06); font-size: 1.3rem; cursor: pointer; }
.nori-vote-btn:active { transform: scale(.92); }
.nori-link { display: inline-block; margin-top: 14px; font-weight: 700; }
@keyframes nori-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }