/* App shell: top navigation bar, bottom tab bar (mobile). */
#boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); transition: opacity .35s, visibility .35s; }
#boot.gone { opacity: 0; visibility: hidden; }
#boot .logo-mark { width: 72px; height: 72px; margin: 0 auto; animation: k-boot 1.1s var(--ease) infinite; }
#boot > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* letter-spacing adds space after the last letter too: the same space before keeps it centred */
#boot .boot-word { font-size: 40px; margin: 16px 0 4px; }
#boot p { margin-top: 16px; color: var(--muted); font-size: 13px; text-align: center; }
#boot .bar { width: 180px; margin: 10px auto 0; }
@keyframes k-boot { 50% { transform: scale(.88) rotate(-6deg); } }

.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
/* Yatta logo: the front card floats, the star twinkles, the spark blinks */
.yatta-emblem { width: 100%; height: 100%; overflow: visible; }
.yatta-emblem g, .yatta-emblem path, .yatta-emblem circle { transform-box: fill-box; transform-origin: 50% 50%; }
.yatta-front { animation: yatta-float 3.6s ease-in-out infinite; }
.yatta-back { animation: yatta-back 3.6s ease-in-out infinite; }
.yatta-star { animation: yatta-star 2.4s ease-in-out infinite; }
.yatta-spark { animation: yatta-spark 1.8s ease-in-out infinite; }
@keyframes yatta-float { 50% { transform: translateY(-1.5px) rotate(4deg); } }
@keyframes yatta-back { 50% { transform: rotate(-4deg); } }
@keyframes yatta-star { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.75) rotate(45deg); } }
@keyframes yatta-spark { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }
.logo-word { font: 800 26px/1 var(--display); letter-spacing: .06em; color: var(--text); }
.logo-word i { font-style: normal; }
.logo-word i.bang { color: var(--accent); }
.logo:hover .yatta-front { animation-duration: 1.2s; }
@media (prefers-reduced-motion: reduce) { .yatta-emblem * { animation: none; } }
.lite .yatta-emblem * { animation: none; }

.app { min-height: 100vh; display: flex; flex-direction: column; }
/* top bar: logo, tabs underlined like a game store, then the wallet and the account */
.top {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 clamp(16px, 3vw, 48px);
  background: rgba(20, 28, 38, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.top .logo { margin-right: 18px; }
.top > .rel, .top > .wallet, .top > .btn, .topnav { flex: none; }
.topnav { display: flex; align-items: stretch; height: 100%; gap: 4px; }
.topnav > a, .topnav button { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; background: none; border: 0; cursor: pointer;
  font: 700 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .15s; }
.topnav .rel { display: flex; height: 100%; }
.topnav > a::after, .topnav button::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform .2s var(--ease); }
.topnav > a:hover, .topnav button:hover { color: var(--text); }
.topnav > a.on, .topnav button.on { color: var(--text); }
.topnav > a.on::after, .topnav button.on::after { transform: scaleX(1); }
.topnav .badge { font-size: 10px; min-width: 17px; height: 17px; }
.more-drop { left: 0; right: auto; width: 240px; top: calc(100% + 1px); }
.dropdown .n.on { color: var(--accent); }
.me-btn { display: flex; flex: none; align-items: center; gap: 10px; color: var(--text); padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.me-btn:hover { border-color: var(--line2); }
.me-btn .avatar { width: 34px; height: 34px; }
.me-btn .me-txt { display: grid; text-align: left; line-height: 1.15; }
.me-btn .me-txt b { font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-btn .me-txt small { font-size: 11px; color: var(--muted); }
.dropdown .xp-line .bar { margin-bottom: 6px; }
.main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.wallet { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.wallet > * { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 13px; white-space: nowrap; }
.wallet .w-free { background: rgba(29, 143, 225, .1); }
.wallet .w-free .ring { width: 22px; height: 22px; }
.wallet .w-free .ring::before { inset: 3px; }
.wallet .w-chakra { color: var(--chakra); gap: 6px; }
/* the currency: an animated blue star that twinkles */
.flame { width: 18px; height: 18px; overflow: visible; filter: drop-shadow(0 0 4px rgba(56, 189, 248, .9)) drop-shadow(0 0 9px rgba(29, 143, 225, .55)); animation: st-pulse 2.4s ease-in-out infinite; }
.flame path { transform-box: fill-box; transform-origin: 50% 55%; }
/* white outline so the star stays visible on blue buttons and bright pictures */
.flame .st-out { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; animation: st-turn 6s ease-in-out infinite; }
.flame .st-in { animation: st-turn 6s ease-in-out infinite; opacity: .95; }
.flame .st-glint { transform-origin: 50% 50%; animation: st-glint 2.4s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(56, 189, 248, .8)) drop-shadow(0 0 7px rgba(29, 143, 225, .45)); } 50% { filter: drop-shadow(0 0 6px rgba(125, 211, 252, 1)) drop-shadow(0 0 12px rgba(56, 189, 248, .7)); } }
@keyframes st-turn { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(10deg) scale(1.08); } }
@keyframes st-glint { 0%, 60%, 100% { opacity: 0; transform: scale(.3); } 75% { opacity: 1; transform: scale(1.2); } }
/* the flame inside any text: sized with the font */
.chakra-ic { display: inline-flex !important; font-size: inherit !important; vertical-align: -0.14em; margin: 0 .08em; padding: 0 !important; background: none !important; }
.flame.inline { width: .95em; height: .95em; filter: drop-shadow(0 0 .12em rgba(0, 20, 50, .55)); }
@media (prefers-reduced-motion: reduce) { .flame path { animation: none; } }
.lite .flame path { animation: none; }
.wallet .w-timer { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.happy-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(255, 200, 61, .2), rgba(29, 143, 225, .2)); border: 1px solid rgba(255, 200, 61, .45); color: var(--gold); font-weight: 700; font-size: 12.5px; white-space: nowrap; box-shadow: 0 0 18px rgba(255, 200, 61, .25); }
@keyframes k-glow { 50% { box-shadow: 0 0 22px rgba(255, 200, 61, .35); } }
.online { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.online::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: 44px clamp(16px, 3vw, 48px) 110px; flex: 1; }
.page-enter { animation: k-page .35s var(--ease); }
@keyframes k-page { from { opacity: 0; transform: translateY(10px); } }
.foot { border-top: 1px solid var(--line); padding: 28px clamp(16px, 3vw, 48px); color: var(--faint); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.foot a:hover { color: var(--text); }

.dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; background: #12121b; border: 1px solid var(--line2); border-radius: 18px; padding: 8px; box-shadow: var(--shadow); z-index: 60; animation: k-drop .18s var(--ease); }
@keyframes k-drop { from { opacity: 0; transform: translateY(-6px); } }
.dropdown .n { display: block; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.dropdown a.n:hover { background: var(--surface); }
.dropdown .n.unread { background: rgba(29, 143, 225, .08); }
.dropdown .n small { display: block; color: var(--muted); font-size: 12px; }
.rel { position: relative; }

.tabbar { display: none; }
@media (max-width: 1023px) {
  .top { height: 62px; gap: 10px; padding: 0 14px; }
  .topnav, .top .open-cta, .me-btn .me-txt { display: none; }
  .top .logo { margin-right: 0; }
  .top .logo .logo-word { display: none; }
  .page { padding: 26px 16px 120px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px; border-radius: 22px; background: rgba(16, 16, 24, .95); backdrop-filter: blur(8px); border: 1px solid var(--line2); box-shadow: var(--shadow);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 10.5px; font-weight: 700; color: var(--muted); position: relative; }
  .tabbar a b { font-size: 19px; line-height: 1.1; }
  .tabbar a.on { color: #fff; }
  .tabbar a .badge { position: absolute; top: 0; right: 18%; }
  .tabbar .fab { margin-top: -26px; }
  .tabbar .fab b { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; background: var(--grad); color: #fff; font-size: 26px; box-shadow: 0 10px 30px rgba(29, 143, 225, .55); border: 3px solid var(--bg); }
  .foot { display: none; }
}
@media (max-width: 560px) {
  .wallet .w-timer { display: none; }
  .wallet > * { padding: 5px 8px; }
}
/* reward popups: the flame as big as the other reward icons */
.reward .item .flame.inline { width: 28px; height: 37px; }