@font-face {
  font-family: Koodak;
  src: url("../fonts/Koodak.woff?v=1") format("woff"),
       url("../fonts/Koodak.ttf?v=1") format("truetype");
  font-weight: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200F, U+FB50-FBFF, U+FC00-FCFF, U+FE70-FEFF;
  size-adjust: 92%; /* Persian renders ~2px larger at same px - matched to English */
}
@font-face {
  font-family: Koodak;
  src: url("../fonts/KoodakEn.ttf?v=1") format("truetype");
  font-weight: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2011, U+2013-2014, U+2018-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #7ec8f0;
  font-family: Koodak, sans-serif;
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: fixed;
}
canvas { display: block; width: 100vw; height: 100vh; cursor: crosshair; touch-action: none; }
/* form controls do NOT inherit font-family from ancestors */
button, input, select, textarea { font-family: inherit; }
#load {
  position: fixed; inset: 0; z-index: 10;
  /* dark = default theme (same fallback as theme.js) */
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  overflow: hidden;
}
/* mini-menu wallpaper: same 480px tile, alpha 0.1 and 24px/s top-left
   drift as game.js _menuPattern; the tile is black, so dark mode inverts
   it to the on-screen tint (white) — light mode keeps black */
.lpat {
  position: absolute; inset: -500px; z-index: 0;
  background: url("/img/menu_pattern.png?v=8") repeat;
  opacity: 0.1;
  filter: invert(1);
  animation: ldrift 20s linear infinite;
  pointer-events: none;
}
/* loading wallpaper: stronger in both themes (user request 2026-10-31: pattern
   icons were too faint; raise/lower this one value to taste) */
#load .lpat { opacity: 0.26; }
#load .lgif, #load .ltxt, #load .lbar, #load .lslow { position: relative; z-index: 1; }
/* random loading GIF — shown as-is (no circle clip, no crop), sized like
   the old spinner circle (44x44); absent until bytes arrive */
#load .lgif {
  width: 44px; height: 44px;
  display: block;
}
#load .ltxt { font-family: Koodak, sans-serif; font-weight: bold; color: #fff; font-size: 21px; }
/* typing-style wave dots: each dot rises in turn and returns, infinite loop
   (dot 3 hands straight back to dot 1) */
.wdots { display: inline-flex; align-items: flex-end; gap: 4px; margin-left: 5px; height: 12px; vertical-align: middle; }
/* boot screen only: tighter dot row, tucked against the word (user 2026-11-04) */
#load .wdots { gap: 2px; margin-left: 2px; }
.wdots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: wdot 1.05s ease-in-out infinite; }
.wdots i:nth-child(2) { animation-delay: 0.17s; }
.wdots i:nth-child(3) { animation-delay: 0.34s; }
@keyframes wdot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
/* owner: text + GIF sit lower, closer to the % bar; both shift equally */
#load .lgif, #load .ltxt { transform: translateY(10px); }
/* slow-network hint — own line UNDER the progress bar */
#load .lslow { font-family: Koodak, sans-serif; font-weight: bold; color: #ffb3b3; font-size: 16px; min-height: 18px; }
#load .lbar {
  width: 0%; min-width: 12px; max-width: 180px; height: 12px;
  background: #fff;
  border: 2px solid #fff; border-radius: 7px;
  transition: width 0.25s;
}
/* occasional shine sweep, same mechanics as the gold text and the volume
   bars (game.js _boxShine): 6.4s cycle, band travels for the first 2.6s,
   then rests. Band colour is inverted vs the bar so it stays visible.
   inset -2px = the band also crosses the 2px border/outline, and clip-path
   keeps it inside the rounded outer edge (user request). */
#load .lbar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  clip-path: inset(0 round 7px);
  background: linear-gradient(100deg,
    transparent 42%, rgba(0, 0, 0, 0.30) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: lshine 6.4s linear infinite;
  pointer-events: none;
}
html[data-lt="light"] #load .lbar::after {
  background: linear-gradient(100deg,
    transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
}
@keyframes lshine {
  0% { transform: translateX(-100%); }
  40.625% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
/* user picked light: loading follows the same stored mode as theme.js */
html[data-lt="light"] #load { background: #fff; }
html[data-lt="light"] .lpat { filter: none; }
html[data-lt="light"] #load .ltxt { color: #000; }
html[data-lt="light"] #load .lslow { color: #d33; }
html[data-lt="light"] #load .lbar { background: #000; border-color: #000; }
/* rotate / mobile-only overlays: same wallpaper + theme as #load */
#rot, #pc { background: #000; color: #fff; }
#rot > *:not(.lpat), #pc > *:not(.lpat) { position: relative; z-index: 1; }
html[data-lt="light"] #rot, html[data-lt="light"] #pc { background: #fff; color: #000; }
/* pc gate wallpaper: same strength as #load (user request 2026-11-01) */
#pc .lpat { opacity: 0.26; }
/* rotate overlay wallpaper: same strength too (user request 2026-11-02) */
#rot .lpat { opacity: 0.26; }
@keyframes ldrift { to { transform: translate(-480px, -480px); } }
@keyframes rot { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }