@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=JetBrains+Mono:wght@800&family=Plus+Jakarta+Sans:wght@500;700;800&family=Zen+Maru+Gothic:wght@500;700&display=swap');
/* Rara Bites game shell: shared overlay for every game
   Hallmark · genre: playful · theme: Hum, pastel drop · matches /style.css tokens */
:root{--rb-paper:oklch(97% 0.015 300);--rb-paper-2:oklch(94% 0.025 300);--rb-shell:oklch(99% 0.006 95);--rb-ink:oklch(32% 0.05 280);--rb-muted:oklch(50% 0.04 280);
--rb-pink:oklch(85% 0.08 5);--rb-mint:oklch(89% 0.08 165);--rb-lav:oklch(83% 0.08 300);--rb-butter:oklch(93% 0.09 95);--rb-sky:oklch(87% 0.07 230);
--rb-display:"Bricolage Grotesque","Zen Maru Gothic","Plus Jakarta Sans",system-ui,sans-serif;--rb-mono:"JetBrains Mono",ui-monospace,monospace;--rb-spring:cubic-bezier(0.34,1.56,0.64,1)}
html,body{margin:0;height:100%;background:var(--rb-paper);overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{font-family:"Plus Jakarta Sans","Zen Maru Gothic",system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;color:var(--rb-ink)}
#game{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#game canvas{display:block;max-width:100%;max-height:100%}

.rb-ov{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;
  background:color-mix(in oklch,var(--rb-paper) 84%,transparent);backdrop-filter:blur(4px);
  background-image:radial-gradient(oklch(86% 0.03 300) 1.5px,transparent 2px);background-size:20px 20px}
.rb-ov[hidden]{display:none}
.rb-ov>*{animation:rb-in .45s var(--rb-spring) both}
.rb-ov>*:nth-child(2){animation-delay:.06s}.rb-ov>*:nth-child(3){animation-delay:.12s}.rb-ov>*:nth-child(4){animation-delay:.18s}
.rb-title{margin:0;font-family:var(--rb-display);font-size:clamp(36px,11vw,56px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:var(--rb-shell);-webkit-text-stroke:7px var(--rb-ink);paint-order:stroke fill}
.rb-day{display:inline-block;font-family:var(--rb-mono);font-size:12px;font-weight:800;letter-spacing:.06em;background:var(--rb-butter);border:3px solid var(--rb-ink);padding:2px 12px;border-radius:999px}
.rb-howto{margin:0;max-width:300px;background:var(--rb-shell);border:3px solid var(--rb-ink);border-radius:12px;box-shadow:0 0 0 4px var(--rb-shell),0 0 0 7px var(--rb-ink);padding:10px 14px;font-size:15px;line-height:1.5}
.rb-tap{margin-top:12px;font-family:var(--rb-mono);font-size:18px;font-weight:800;letter-spacing:.12em}
.rb-ver{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 8px);font-family:var(--rb-mono);font-size:11px;font-weight:800;color:var(--rb-muted);opacity:.7;animation:none !important}
.rb-tap::before{content:"▶ ";animation:rb-blink 1.1s steps(1) infinite}
@keyframes rb-blink{50%{opacity:0}}
.rb-score{font-family:var(--rb-display);font-size:88px;font-weight:800;line-height:1;letter-spacing:-.04em}
.rb-label{font-family:var(--rb-mono);font-size:13px;font-weight:800;color:var(--rb-muted);letter-spacing:.14em}
.rb-best{font-size:15px;color:var(--rb-muted);font-weight:700}
.rb-new{font-size:15px;font-weight:800;background:var(--rb-pink);border:3px solid var(--rb-ink);border-radius:999px;padding:2px 14px;animation:rb-wobble 2.4s ease-in-out infinite !important}
@keyframes rb-wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg) scale(1.06)}}
.rb-btns{display:flex;flex-direction:column;gap:14px;width:100%;max-width:270px;margin-top:8px}
.rb-btn{display:block;padding:12px 18px;border:3px solid var(--rb-ink);border-radius:999px;background:var(--rb-pink);color:var(--rb-ink);font-family:var(--rb-display);font-size:18px;font-weight:800;text-decoration:none;cursor:pointer;
  box-shadow:0 5px 0 var(--rb-ink);white-space:nowrap;transition:transform .25s var(--rb-spring),box-shadow .25s var(--rb-spring)}
.rb-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--rb-ink);transition-duration:.06s}
.rb-btn.ghost{background:var(--rb-shell)}
.rb-btn.x{background:var(--rb-sky)}

.rb-bar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 10px) 12px 0;pointer-events:none}
.rb-bar>*{pointer-events:auto}
.rb-icon{width:40px;height:40px;border:3px solid var(--rb-ink);border-radius:999px;background:var(--rb-shell);color:var(--rb-ink);font-size:16px;cursor:pointer}
.rb-lang{height:40px;border:3px solid var(--rb-ink);border-radius:999px;background:var(--rb-shell);color:var(--rb-ink);font:inherit;font-weight:800;padding:0 10px}
.rb-hud{position:fixed;top:calc(env(safe-area-inset-top) + 56px);left:0;right:0;z-index:10;text-align:center;font-family:var(--rb-display);font-size:60px;font-weight:800;pointer-events:none;color:var(--rb-shell);-webkit-text-stroke:7px var(--rb-ink);paint-order:stroke fill}
.rb-loading{width:44px;height:44px;border:5px solid var(--rb-lav);border-top-color:var(--rb-ink);border-radius:50%;animation:rb-spin .8s linear infinite}
@keyframes rb-spin{to{transform:rotate(360deg)}}
@keyframes rb-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}