/* 6.1: bundled fonts (SIL Open Font License; see assets/fonts) so the title and menus look the same on every device. */
@font-face { font-family:"Lilita One"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/lilita-one-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:600; font-display:swap; src:url("assets/fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:800; font-display:swap; src:url("assets/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:900; font-display:swap; src:url("assets/fonts/nunito-latin-900-normal.woff2") format("woff2"); }

:root { --jungle:#0E4D2E; --sun:#FFD23F; --hib:#FF4F8B; box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#06180F; } }
:root[data-theme="dark"] { --bg:#06180F; }
html { scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
body { margin:0; height:100%; background:var(--bg, #0B3A23); background-image:radial-gradient(circle at 20% 10%, rgba(255,210,63,.12), transparent 40%), radial-gradient(circle at 85% 90%, rgba(255,79,139,.12), transparent 45%); overflow:hidden; font-family:"Nunito", sans-serif; touch-action:none; -webkit-user-select:none; user-select:none; }
#wrap { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
canvas { display:block; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 4px rgba(255,210,63,.25); outline:none; max-width:100%; max-height:100%; }
#touch { display:none; position:absolute; inset:0; pointer-events:none; }
body.touch #touch { display:block; }
.tb { position:absolute; pointer-events:auto; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.22); border:3px solid rgba(255,255,255,.55); color:#fff; font:900 15px "Nunito",sans-serif; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.tb.on { background:rgba(255,210,63,.6); }
.tb.big { width:78px; height:78px; font-size:17px; }
.tb.sm { width:46px; height:46px; font-size:12px; }
#tl { left:14px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
#tr { left:96px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
#td { left:55px; bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
#tj { right:16px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
#tx { right:106px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
#ts { right:22px; bottom:calc(110px + env(safe-area-inset-bottom,0px)); }
#tm { right:84px; bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
#tp { right:14px; top:calc(10px + env(safe-area-inset-top,0px)); }
@media (prefers-reduced-motion: reduce) { canvas { box-shadow:none; } }