/* ui.css — platform UI: fonts, sheets/modals, buttons, inputs, toasts, profile, settings, friends, leaderboards,
   daily, chests, challenges. Builds on the tokens in kit.css. Logical properties only (RTL + LTR). */

/* ------------------------------------------------------------------ fonts (OFL, assets/fonts) */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../assets/fonts/fredoka-hebrew-wght.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../assets/fonts/fredoka-latin-ext-wght.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../assets/fonts/fredoka-latin-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../assets/fonts/rubik-hebrew-wght.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../assets/fonts/rubik-latin-ext-wght.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../assets/fonts/rubik-latin-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ui-glass: linear-gradient(180deg, rgba(52, 38, 128, .86), rgba(27, 19, 74, .92));
  --ui-line: rgba(255, 255, 255, .12);
  --ui-line-2: rgba(255, 255, 255, .22);
  --ui-well: rgba(10, 6, 36, .35);
  --ui-ease: cubic-bezier(.2, .9, .25, 1.15);
  --ui-tier-wooden: #d99a52; --ui-tier-silver: #b9d4ff; --ui-tier-gold: #ffc93c; --ui-tier-legendary: #c48bff;
  --ui-r-common: #9fb0d8; --ui-r-rare: #4cc3ff; --ui-r-epic: #b46bff; --ui-r-legendary: #ffc93c;
}
html.fs-reduced-motion *, html.fs-reduced-motion *::before, html.fs-reduced-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* --------------------------------------------------------------------------------- atoms */
.ui-ico { display: inline-grid; place-items: center; inline-size: 1.25em; block-size: 1.25em; flex: none; --ico-2: rgba(255,255,255,.9); }
.ui-ico svg { inline-size: 100%; block-size: 100%; display: block; }
[dir="rtl"] .ui-ico-flip, [dir="rtl"] .login-back .ui-ico, [dir="rtl"] .ui-btn .ui-ico.ui-ico-back { transform: scaleX(-1); }

.ui-btn {
  --c1: #ff7ab4; --c2: #ff3d8b; --edge: #b51f60; --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 17px/1 var(--font-display); color: var(--fg); letter-spacing: .2px;
  border: 0; border-radius: 16px; padding: 12px 18px; min-block-size: 46px; cursor: pointer;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 4px 0 var(--edge), 0 8px 18px rgba(8, 2, 34, .35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .09s ease, box-shadow .09s ease, filter .15s ease, opacity .15s;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.ui-btn::after { content: ''; position: absolute; inset: 2px 6px auto; block-size: 42%; border-radius: 12px 12px 30px 30px; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.ui-btn:hover { filter: brightness(1.07) saturate(1.05); }
.ui-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), 0 3px 8px rgba(8, 2, 34, .3), inset 0 1px 0 rgba(255,255,255,.3); }
.ui-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ui-btn:disabled { opacity: .5; cursor: default; filter: saturate(.4); transform: none; }
.ui-btn .ui-ico { font-size: 1.1em; }
.ui-btn-gold { --c1: #ffe07a; --c2: #ffb21f; --edge: #c07800; --fg: #4a2a00; }
.ui-btn-gold .ui-ico { --ico-2: #fff6d6; }
.ui-btn-mint { --c1: #6ff3cc; --c2: #22c99a; --edge: #128a68; --fg: #053a2c; }
.ui-btn-soft .ui-ico, .ui-btn-ghost .ui-ico { --ico-2: #2b1e74; }
.ui-btn-soft { --c1: rgba(255,255,255,.2); --c2: rgba(255,255,255,.1); --edge: rgba(0,0,0,.28); }
.ui-btn-ghost { --c1: transparent; --c2: transparent; --edge: transparent; box-shadow: none; min-block-size: 40px; padding: 8px; }
.ui-btn-ghost::after { display: none; }
.ui-btn-ghost:hover { background: rgba(255,255,255,.1); }
.ui-btn-ghost:active { box-shadow: none; }
.ui-btn-danger { --c1: #ff7f7f; --c2: #e8434b; --edge: #9e1f2a; }
.ui-btn-sm { font-size: 15px; min-block-size: 38px; padding: 8px 13px; border-radius: 13px; }
.ui-btn-lg { font-size: 20px; min-block-size: 56px; padding: 14px 24px; border-radius: 19px; }
.ui-btn.is-busy { pointer-events: none; }
.ui-btn.is-busy .ui-btn-label { opacity: .4; }
.ui-btn.is-busy::before { content: ''; position: absolute; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-block-start-color: #fff; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-chip { display: inline-flex; align-items: center; gap: 5px; padding-block: 5px; padding-inline: 8px 10px; border-radius: 99px; font: 600 15px/1 var(--font-display); background: rgba(255,255,255,.1); border: 1px solid var(--ui-line); white-space: nowrap; }
.ui-chip-star .ui-ico { color: var(--gold); --ico-2: #fff7c9; }
.ui-chip-gem .ui-ico { color: #5be0ff; --ico-2: #e3fbff; }
.ui-chip-xp b { font: 700 11px/1 var(--font-display); color: #c9b8ff; letter-spacing: .5px; }
.ui-chip-chest .ui-ico { color: var(--tier, var(--ui-tier-wooden)); }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chips-big { justify-content: center; margin-block: 10px; }
.ui-chips-big .ui-chip { font-size: 19px; padding: 8px 14px; }
.ui-tier-wooden { --tier: var(--ui-tier-wooden); } .ui-tier-silver { --tier: var(--ui-tier-silver); }
.ui-tier-gold { --tier: var(--ui-tier-gold); } .ui-tier-legendary { --tier: var(--ui-tier-legendary); }
.ui-rarity-common { --rar: var(--ui-r-common); } .ui-rarity-rare { --rar: var(--ui-r-rare); }
.ui-rarity-epic { --rar: var(--ui-r-epic); } .ui-rarity-legendary { --rar: var(--ui-r-legendary); }

.ui-tag { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--font-text); padding: 5px 9px; border-radius: 99px; background: rgba(255,255,255,.1); color: var(--ink-2); }
.ui-tag-cloud { background: rgba(62, 230, 181, .16); color: #9ff5da; }
.ui-badge { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-inline-size: 20px; block-size: 20px; padding-inline: 5px; border-radius: 99px; background: var(--brand); color: #fff; font: 700 12px/20px var(--font-display); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.ui-badge:empty, .ui-badge bdi:empty { display: none; }
.ui-note { margin: 6px 0; color: var(--muted); font: 400 14px/1.45 var(--font-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ui-h4 { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 2px 10px; font: 600 16px/1.2 var(--font-display); color: var(--ink-2); letter-spacing: .3px; }
.ui-h4 small { font: 500 13px var(--font-text); color: var(--muted); }
.ui-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-empty { display: grid; justify-items: center; gap: 8px; padding: 30px 12px; color: var(--muted); text-align: center; }
.ui-empty .ui-ico { inline-size: 54px; block-size: 54px; color: rgba(255,255,255,.18); }
.ui-empty p { margin: 0; max-inline-size: 30ch; font: 500 15px/1.45 var(--font-text); }
.ui-loading { display: flex; justify-content: center; gap: 7px; padding: 34px; }
.ui-loading i { inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--brand); animation: ui-dot 1s ease-in-out infinite; }
.ui-loading i:nth-child(2) { animation-delay: .15s; background: var(--gold); }
.ui-loading i:nth-child(3) { animation-delay: .3s; background: var(--mint); }
@keyframes ui-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-9px); opacity: 1; } }
.ui-bump { animation: ui-bump .35s var(--ui-ease); }
@keyframes ui-bump { 40% { transform: scale(1.22); } }

/* --------------------------------------------------------------------------------- avatar */
.ui-avatar { --s: 48px; position: relative; display: inline-grid; place-items: center; inline-size: var(--s); block-size: var(--s); flex: none; border-radius: 50%;
  padding: max(2px, calc(var(--s) * .05)); background: var(--ring, linear-gradient(160deg, color-mix(in srgb, var(--kid) 70%, #fff), var(--kid))); box-shadow: 0 4px 12px rgba(8, 2, 34, .35); }
.ui-avatar.has-frame { padding: max(3px, calc(var(--s) * .08)); }
.ui-avatar-in { inline-size: 100%; block-size: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(120% 100% at 50% 20%, color-mix(in srgb, var(--kid) 45%, #2b1e74), #1b1440); }
.ui-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .3s, transform .4s var(--ui-ease); }
.ui-avatar.is-ready img { opacity: 1; transform: none; }
.ui-avatar-dot { position: absolute; inset-block-end: 2%; inset-inline-end: 2%; inline-size: 26%; block-size: 26%; border-radius: 50%; background: #6b6493; border: 2px solid #1b1440; }
.ui-avatar-dot.is-on { background: var(--mint); box-shadow: 0 0 8px var(--mint); }

/* --------------------------------------------------------------------------------- sheets */
/* safe-area insets are physical, so the layer padding maps them physically */
.ui-layer { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: calc(14px + var(--safe-t)) calc(14px + var(--safe-e)) calc(14px + var(--safe-b)) calc(14px + var(--safe-s)); }
.ui-backdrop { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 40%, rgba(20, 10, 60, .45), rgba(8, 4, 26, .78)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s; }
.ui-sheet {
  position: relative; display: flex; flex-direction: column; inline-size: min(560px, 100%); max-block-size: min(820px, 100%);
  background: var(--ui-glass); border: 1px solid var(--ui-line-2); border-radius: 28px; color: var(--ink);
  box-shadow: 0 30px 80px rgba(6, 2, 30, .6), inset 0 1px 0 rgba(255,255,255,.18);
  opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .22s ease, transform .32s var(--ui-ease), translate .1s;
  overflow: hidden;
}
.ui-sheet::before { content: ''; position: absolute; inset: 0 0 auto; block-size: 140px; background: radial-gradient(80% 100% at 50% 0%, rgba(255, 95, 162, .18), transparent 70%); pointer-events: none; }
.ui-sheet-sm { inline-size: min(420px, 100%); }
.ui-sheet-lg { inline-size: min(760px, 100%); }
.ui-layer.is-in .ui-backdrop { opacity: 1; }
.ui-layer.is-in .ui-sheet { opacity: 1; transform: none; }
.ui-layer.is-out .ui-backdrop { opacity: 0; }
.ui-layer.is-out .ui-sheet { opacity: 0; transform: translateY(18px) scale(.97); transition-duration: .18s; }
.ui-sheet-grip { display: none; }
.ui-sheet-head { position: relative; display: flex; align-items: center; gap: 10px; padding-block: 16px 10px; padding-inline: 20px 12px; }
.ui-sheet:focus { outline: none; }
.ui-sheet-ico { inline-size: 34px; block-size: 34px; padding: 6px; border-radius: 12px; background: linear-gradient(160deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 4px 10px rgba(255, 95, 162, .35); }
.ui-sheet-title { flex: 1; margin: 0; font: 600 23px/1.15 var(--font-display); letter-spacing: .2px; }
.ui-sheet-x { color: var(--ink-2); }
.ui-sheet-body { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 20px 18px; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.ui-sheet-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 12px 20px 18px; border-block-start: 1px solid var(--ui-line); background: rgba(10, 6, 36, .25); }
.ui-sheet-foot:empty { display: none; }
.ui-sheet-foot .ui-note { margin: 0; margin-inline-end: auto; }
.ui-confirm-text { margin: 4px 0 6px; font: 400 16px/1.5 var(--font-text); color: var(--ink-2); }

/* phones in portrait: bottom sheet */
@media (max-width: 600px) and (orientation: portrait) {
  .ui-layer { place-items: end stretch; padding: calc(40px + var(--safe-t)) 0 0; }
  .ui-sheet, .ui-sheet-sm, .ui-sheet-lg { inline-size: 100%; max-block-size: 100%; border-radius: 28px 28px 0 0; border-block-end: 0; padding-block-end: var(--safe-b); transform: translateY(100%); }
  .ui-layer.is-out .ui-sheet { transform: translateY(100%); }
  .ui-sheet-grip { display: block; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 26px; z-index: 2; cursor: grab; touch-action: none; }
  .ui-sheet-grip::after { content: ''; position: absolute; inset-block-start: 9px; inset-inline-start: 50%; inline-size: 44px; block-size: 5px; margin-inline-start: -22px; border-radius: 9px; background: rgba(255,255,255,.3); }
  .ui-sheet-head { padding-block-start: 22px; }
  .ui-sheet-sm { max-block-size: 70%; }
}
/* short landscape phones: use the full height */
@media (max-height: 500px) {
  .ui-layer { padding: calc(8px + var(--safe-t)) calc(8px + var(--safe-e)) calc(8px + var(--safe-b)) calc(8px + var(--safe-s)); }
  .ui-sheet { max-block-size: 100%; border-radius: 22px; }
  .ui-sheet-head { padding-block: 10px 6px; }
  .ui-sheet-title { font-size: 20px; }
  .ui-sheet-foot { padding-block: 8px 10px; }
}

/* --------------------------------------------------------------------------------- inputs */
.ui-field { display: grid; gap: 6px; }
.ui-field-label { font: 600 14px/1 var(--font-display); color: var(--ink-2); padding-inline-start: 4px; letter-spacing: .3px; }
.ui-field-box { position: relative; display: flex; }
.ui-input { inline-size: 100%; font: 500 18px/1.2 var(--font-text); color: #fff; background: var(--ui-well); border: 2px solid rgba(255,255,255,.14); border-radius: 15px; padding: 13px 15px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; -webkit-user-select: text; user-select: text; }
.ui-input::placeholder { color: rgba(217, 211, 255, .38); }
.ui-input:focus { border-color: var(--sky); background: rgba(10, 6, 36, .5); box-shadow: 0 0 0 4px rgba(76, 195, 255, .18); }
.ui-field-eye { position: absolute; inset-block: 0; inset-inline-end: 6px; margin-block: auto; inline-size: 40px; block-size: 40px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 9px; }
.ui-field-eye svg { inline-size: 100%; block-size: 100%; }
.ui-field-box:has(.ui-field-eye) .ui-input { padding-inline-end: 48px; }
.ui-field-err { margin: 0; min-block-size: 0; font: 500 13.5px/1.3 var(--font-text); color: #ffb3c0; padding-inline-start: 4px; }
.ui-field-err:empty { display: none; }
.ui-field.has-err .ui-input { border-color: #ff7a95; }
.ui-field.shake { animation: ui-shake .36s ease; }
@keyframes ui-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.ui-toggle { position: relative; flex: none; inline-size: 56px; block-size: 32px; border-radius: 99px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.16); box-shadow: inset 0 2px 5px rgba(0,0,0,.3); transition: background .2s; }
.ui-toggle i { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 26px; block-size: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: inset-inline-start .22s var(--ui-ease); }
.ui-toggle.is-on { background: linear-gradient(180deg, #5ef0c6, #20bf93); }
.ui-toggle.is-on i { inset-inline-start: 27px; }
.ui-toggle:focus-visible, .ui-seg-btn:focus-visible, .ui-slider:focus-visible, .ui-pill:focus-visible, .ui-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.ui-slider { -webkit-appearance: none; appearance: none; inline-size: min(190px, 40vw); block-size: 30px; background: transparent; cursor: pointer; --p: 50%; }
.ui-slider::-webkit-slider-runnable-track { block-size: 10px; border-radius: 9px; background: linear-gradient(90deg, var(--sky) var(--p), rgba(255,255,255,.16) var(--p)); }
[dir="rtl"] .ui-slider::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--sky) var(--p), rgba(255,255,255,.16) var(--p)); }
.ui-slider::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 26px; block-size: 26px; margin-block-start: -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 -3px 0 rgba(0,0,0,.08); }
.ui-slider::-moz-range-track { block-size: 10px; border-radius: 9px; background: rgba(255,255,255,.16); }
.ui-slider::-moz-range-progress { block-size: 10px; border-radius: 9px; background: var(--sky); }
.ui-slider::-moz-range-thumb { inline-size: 24px; block-size: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

.ui-seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 15px; background: var(--ui-well); border: 1px solid var(--ui-line); flex-wrap: wrap; }
.ui-seg-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 11px; font: 600 14.5px/1 var(--font-display); color: var(--ink-2); background: transparent; transition: background .15s, color .15s; }
.ui-seg-btn.is-on { background: linear-gradient(180deg, #8f75ff, #6a4cf0); color: #fff; box-shadow: 0 3px 8px rgba(80, 50, 220, .45); }

.ui-tabs { display: flex; gap: 6px; padding: 5px; margin-block: 6px 12px; border-radius: 18px; background: var(--ui-well); border: 1px solid var(--ui-line); }
.ui-tab { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 0; border-radius: 13px; cursor: pointer; background: transparent; color: var(--ink-2); font: 600 15.5px/1 var(--font-display); transition: background .15s, color .15s; }
.ui-tab .ui-ico { --ico-2: #2b1e74; }
.ui-tab.is-on { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.1)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.ui-tab .ui-badge { inset-block-start: -4px; inset-inline-end: 2px; }

.ui-chiprow { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px; margin-inline: -2px; scrollbar-width: none; touch-action: pan-x; }
.ui-chiprow::-webkit-scrollbar { display: none; }
.ui-pill { flex: none; border: 1px solid var(--ui-line); background: rgba(255,255,255,.07); color: var(--ink-2); border-radius: 99px; padding: 9px 15px; font: 600 15px/1 var(--font-display); cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.ui-pill:active { transform: scale(.96); }
.ui-pill.is-on { background: linear-gradient(180deg, #ff7ab4, #ff3d8b); border-color: transparent; color: #fff; box-shadow: 0 4px 10px rgba(255, 61, 139, .35); }
.ui-pill-sm { padding: 7px 12px; font-size: 13.5px; }
.ui-chiprow-sm { padding-block-end: 6px; }

.ui-code { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.ui-code span { display: grid; place-items: center; inline-size: 38px; block-size: 48px; border-radius: 11px; background: var(--ui-well); border: 1px solid var(--ui-line-2); font: 700 24px/1 var(--font-display); color: #fff; }
.ui-code-sm { justify-content: flex-start; gap: 4px; margin: 4px 0 0; }
.ui-code-sm span { inline-size: 27px; block-size: 34px; font-size: 18px; border-radius: 8px; }

/* --------------------------------------------------------------------------------- toasts */
.ui-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; inline-size: min(440px, calc(100vw - 24px)); padding-block: 11px; padding-inline: 12px 14px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(58, 42, 143, .95), rgba(33, 23, 92, .96)); border: 1px solid var(--ui-line-2); box-shadow: 0 14px 34px rgba(6, 2, 30, .5);
  transform: translateY(-120%) scale(.95); opacity: 0; transition: transform .38s var(--ui-ease), opacity .25s; cursor: pointer; }
.ui-toast.is-in { transform: none; opacity: 1; }
.ui-toast.is-out { transform: translateY(-40%) scale(.96); opacity: 0; }
.ui-toast-ico { inline-size: 40px; block-size: 40px; padding: 8px; border-radius: 13px; background: rgba(255,255,255,.12); color: var(--sky); }
.ui-toast-txt { flex: 1; display: grid; gap: 4px; min-inline-size: 0; }
.ui-toast-txt b { font: 600 16px/1.25 var(--font-display); }
.ui-toast-txt > span { font: 400 14px/1.3 var(--font-text); color: var(--ink-2); }
.ui-toast-acts { display: flex; gap: 6px; }
.ui-toast-challenge { border-color: rgba(255, 201, 60, .55); background: linear-gradient(180deg, rgba(92, 58, 160, .97), rgba(52, 30, 112, .97)); }
.ui-toast-challenge .ui-toast-ico { background: linear-gradient(160deg, #ffe07a, #ffb21f); color: #7a4300; --ico-2: #fff; box-shadow: 0 0 18px rgba(255, 201, 60, .5); }
.ui-toast-reward .ui-toast-ico { background: linear-gradient(160deg, #ffe07a, #ffb21f); color: #7a4300; }
.ui-toast-success .ui-toast-ico { color: var(--mint); }
.ui-toast-error { border-color: rgba(255, 120, 140, .5); }
.ui-toast-error .ui-toast-ico { color: #ff8da1; }
.ui-toast-invite { border-color: rgba(62, 230, 181, .5); }
.ui-toast-invite .ui-toast-ico { background: linear-gradient(160deg, #6ff3cc, #22c99a); color: #053a2c; }
@media (max-width: 480px) { .ui-toast { flex-wrap: wrap; } .ui-toast-acts { inline-size: 100%; justify-content: flex-end; } }

.ui-fly { position: fixed; z-index: 90; inline-size: 30px; block-size: 30px; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.ui-fly .ui-ico { inline-size: 100%; block-size: 100%; }
.ui-fly-stars { color: var(--gold); }
.ui-fly-gems { color: #5be0ff; }

/* --------------------------------------------------------------------------------- profile */
.ui-profile-hero { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 22px; background: linear-gradient(135deg, rgba(255, 95, 162, .18), rgba(123, 92, 255, .14)); border: 1px solid var(--ui-line); }
.ui-profile-id { display: grid; gap: 8px; min-inline-size: 0; flex: 1; justify-items: start; }
.ui-profile-id h3 { margin: 0; font: 700 26px/1.1 var(--font-display); overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.ui-level { display: flex; align-items: center; gap: 10px; inline-size: 100%; }
.ui-level-badge { display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 16px; flex: none; background: linear-gradient(160deg, #ffe07a, #ffb21f); color: #5a3300; font: 700 22px/1 var(--font-display); box-shadow: 0 4px 0 #c07800; }
.ui-level-badge small { font: 700 9px/1 var(--font-display); letter-spacing: .6px; text-transform: uppercase; opacity: .75; }
.ui-xp { flex: 1; display: grid; gap: 4px; }
.ui-xp-bar, .ui-prog, .ui-bigday-bar { position: relative; block-size: 12px; border-radius: 99px; background: rgba(10, 6, 36, .45); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.ui-xp-bar i, .ui-prog i, .ui-bigday-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--sky)); transition: inline-size .6s var(--ui-ease); }
.ui-xp-txt { font: 500 12.5px/1 var(--font-text); color: var(--muted); }
.ui-wallet { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-kidpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-kidpick-btn { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; cursor: pointer; border: 2px solid var(--ui-line); background: rgba(255,255,255,.05); color: #fff; font: 600 19px/1 var(--font-display); transition: border-color .15s, background .15s, transform .12s; }
.ui-kidpick-btn:active { transform: scale(.97); }
.ui-kidpick-btn.is-on { border-color: var(--kid); background: color-mix(in srgb, var(--kid) 22%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kid) 25%, transparent); }
.ui-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; }
.ui-frame { position: relative; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.05); box-shadow: 0 0 0 2px var(--rar); transition: transform .12s; }
.ui-frame:active { transform: scale(.94); }
.ui-frame-ring { position: absolute; inset: 7px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
.ui-frame.is-locked .ui-frame-ring { filter: saturate(.55) brightness(.6); }
.ui-frame-lock { position: absolute; inset: 0; margin: auto; inline-size: 20px; block-size: 20px; color: rgba(255,255,255,.7); }
.ui-frame.is-on { box-shadow: 0 0 0 3px #fff, 0 0 16px rgba(255,255,255,.4); }
.ui-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ui-stat { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--ui-line); }
.ui-stat b { font: 600 15px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-stat span { display: flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-text); color: var(--ink-2); }
.ui-stat span .ui-ico { color: var(--muted); }

/* --------------------------------------------------------------------------------- settings */
.ui-set-group { display: grid; gap: 2px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid var(--ui-line); padding: 4px 6px; }
.ui-set-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; min-block-size: 58px; flex-wrap: wrap; }
.ui-set-row + .ui-set-row { border-block-start: 1px solid rgba(255,255,255,.07); }
.ui-set-ico { inline-size: 38px; block-size: 38px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--sky); }
.ui-set-txt { flex: 1; display: grid; gap: 3px; min-inline-size: 110px; }
.ui-set-txt b { font: 600 16.5px/1.2 var(--font-display); }
.ui-set-txt small { font: 400 13px/1.3 var(--font-text); color: var(--muted); }
.ui-set-pw.is-open, .ui-set-link:not(:empty) { display: grid; gap: 12px; padding: 4px 8px 14px; }
@media (max-width: 480px) { .ui-set-row .ui-seg { inline-size: 100%; justify-content: stretch; } .ui-set-row .ui-seg-btn { flex: 1; justify-content: center; } }

/* --------------------------------------------------------------------------------- friends */
.ui-mycode { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(62, 230, 181, .15), rgba(76, 195, 255, .12)); border: 1px solid var(--ui-line); }
.ui-mycode small { font: 600 13px/1 var(--font-display); color: #a9f3dc; letter-spacing: .3px; }
.ui-addrow { display: flex; align-items: flex-end; gap: 8px; margin-block: 14px 4px; }
.ui-addrow .ui-field { flex: 1; }
.ui-addrow .ui-btn { min-block-size: 52px; }
.ui-flist { display: grid; gap: 8px; }
.ui-frow { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--ui-line); }
.ui-frow.is-online { background: rgba(62, 230, 181, .07); }
.ui-frow-txt { flex: 1; display: grid; gap: 3px; min-inline-size: 0; }
.ui-frow-name { font: 600 17px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-frow-txt small { font: 400 13px/1.2 var(--font-text); color: var(--muted); }
.ui-frow.is-online .ui-frow-txt small { color: #9ff5da; }
.ui-gamepick { display: grid; gap: 10px; }

/* --------------------------------------------------------------------------------- leaderboards */
.ui-lb-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-block: 4px 6px; }
.ui-lb-rows { display: grid; gap: 6px; }
.ui-lb-row { display: grid; grid-template-columns: 48px auto 1fr auto; align-items: center; gap: 12px; padding-block: 7px; padding-inline: 8px 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid transparent; }
.ui-lb-row.is-me { background: rgba(255, 95, 162, .16); border-color: rgba(255, 95, 162, .5); }
.ui-lb-rank { position: relative; display: grid; place-items: center; font: 700 17px/1 var(--font-display); color: var(--ink-2); block-size: 40px; }
.ui-lb-rank .ui-ico { position: absolute; inset: 0; margin: auto; inline-size: 40px; block-size: 40px; color: var(--medal); --ico-2: transparent; }
.ui-lb-row.is-top .ui-lb-rank bdi { position: relative; color: #3a2400; font-size: 14px; margin-block-start: 8px; }
.is-top1 { --medal: #ffc93c; } .is-top2 { --medal: #cfd9ea; } .is-top3 { --medal: #e49a5a; }
.ui-lb-name { font: 600 16.5px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-lb-val { font: 700 18px/1 var(--font-display); color: var(--gold); }
.ui-lb-gap { block-size: 14px; background: radial-gradient(circle, rgba(255,255,255,.35) 2px, transparent 3px) center / 14px 14px repeat-x; opacity: .6; }

/* --------------------------------------------------------------------------------- daily */
.ui-daily-head { display: flex; align-items: center; gap: 14px; margin-block-end: 12px; }
.ui-streak { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; padding: 8px 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 140, 60, .25), rgba(255, 61, 139, .2)); border: 1px solid rgba(255, 160, 90, .35); }
.ui-streak .ui-ico { grid-row: span 2; inline-size: 36px; block-size: 36px; color: #ff8a3d; --ico-2: #ffe07a; }
.ui-streak b { font: 700 26px/1 var(--font-display); }
.ui-streak span { font: 500 12px/1 var(--font-text); color: #ffd7b5; }
.ui-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.ui-cal-day { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 9px; border-radius: 16px; background: rgba(255,255,255,.06); border: 2px solid transparent; transition: transform .2s var(--ui-ease); }
.ui-cal-day small { font: 600 11.5px/1 var(--font-display); color: var(--muted); }
.ui-cal-ico { inline-size: 34px; block-size: 34px; display: grid; place-items: center; }
.ui-cal-ico .ui-ico { inline-size: 100%; block-size: 100%; color: var(--gold); --ico-2: #fff7c9; }
.ui-cal-day:has(.ui-ico) b { font: 700 14px/1 var(--font-display); text-align: center; }
.ui-cal-day[class*="ui-tier-"] .ui-cal-ico .ui-ico { color: var(--tier); --ico-2: #fff; }
.ui-cal-day.is-claimed { opacity: .55; }
.ui-cal-check { position: absolute; inset-block-start: -7px; inset-inline-end: -7px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--mint); color: #053a2c; display: grid; place-items: center; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.ui-cal-day.is-today { border-color: var(--gold); background: rgba(255, 201, 60, .14); }
.ui-cal-day.is-ready { animation: ui-glow 1.6s ease-in-out infinite; transform: translateY(-3px); }
@keyframes ui-glow { 50% { box-shadow: 0 0 22px rgba(255, 201, 60, .55); } }
@media (max-width: 520px) { .ui-cal { grid-template-columns: repeat(4, 1fr); } .ui-cal-day:last-child { grid-column: span 1; } }
.ui-bigday { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "txt chest" "bar chest"; gap: 8px 14px; align-items: center; margin-block: 16px 6px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(196, 139, 255, .22), rgba(255, 95, 162, .14)); border: 1px solid rgba(196, 139, 255, .35); }
.ui-bigday-txt { grid-area: txt; display: grid; gap: 3px; }
.ui-bigday-txt b { font: 600 17px/1.2 var(--font-display); }
.ui-bigday-txt small { font: 400 13.5px/1.3 var(--font-text); color: var(--ink-2); }
.ui-bigday-bar { grid-area: bar; }
.ui-bigday-bar i { background: linear-gradient(90deg, #c48bff, #ff5fa2); }
.ui-bigday-chest { grid-area: chest; inline-size: 58px; block-size: 58px; color: var(--tier); filter: drop-shadow(0 0 12px rgba(196, 139, 255, .6)); }
.ui-bigday-chest .ui-ico { inline-size: 100%; block-size: 100%; }
.ui-daily .ui-sheet-foot { justify-content: center; }
.ui-daily .ui-sheet-foot .ui-btn { min-inline-size: 60%; }

/* --------------------------------------------------------------------------------- chests */
.ui-chestgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ui-chest { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 10px; border-radius: 20px; text-align: center;
  background: radial-gradient(100% 70% at 50% 30%, color-mix(in srgb, var(--tier, #fff) 22%, transparent), rgba(255,255,255,.04)); border: 1px solid color-mix(in srgb, var(--tier, #fff) 40%, transparent); }
.ui-chest-img { inline-size: 104px; block-size: 104px; display: grid; place-items: center; }
.ui-chest-img img { inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.ui-chest > b { font: 600 16px/1.1 var(--font-display); color: var(--tier); }
.ui-chest-state { display: inline-flex; align-items: center; gap: 5px; font: 500 13.5px/1 var(--font-text); color: var(--ink-2); }
.ui-chest-acts { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ui-chest-pay .ui-ico { color: #8eeaff; }
.ui-chest.is-ready { animation: ui-glow 1.6s ease-in-out infinite; }
.ui-chest.is-ready .ui-chest-img img { animation: ui-wobble 1.4s ease-in-out infinite; }
@keyframes ui-wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-5deg) scale(1.04); } 80% { transform: rotate(5deg) scale(1.04); } 90% { transform: rotate(-3deg); } }
.ui-chest.is-empty { min-block-size: 190px; align-content: center; border-style: dashed; border-color: rgba(255,255,255,.15); background: none; color: rgba(255,255,255,.22); }
.ui-chest.is-empty .ui-ico { inline-size: 46px; block-size: 46px; }
.ui-chest.is-empty small { color: var(--muted); font: 500 12.5px/1.3 var(--font-text); }

/* the opening show (full screen over the 3D stage); toasts wait until it is over */
html.fs-show #toasts { visibility: hidden; }
.ui-show { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); opacity: 0; transition: opacity .3s; }
.ui-show.is-in { opacity: 1; }
.ui-show.is-out { opacity: 0; }
.ui-show-title { margin: 0; font: 700 clamp(30px, 6vw, 48px)/1 var(--font-display); color: var(--tier); text-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 30px color-mix(in srgb, var(--tier) 60%, transparent); }
.ui-show-hint { margin: 10px 0; font: 600 18px/1 var(--font-display); color: #fff; opacity: .9; animation: ui-pulse 1.3s ease-in-out infinite; transition: opacity .3s; }
.ui-show-hint.is-out { opacity: 0; animation: none; }
@keyframes ui-pulse { 50% { transform: scale(1.06); } }
.ui-show-cards { align-self: end; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-inline-size: 760px; margin-block-end: 18px; }
.ui-show-card { display: grid; justify-items: center; gap: 5px; min-inline-size: 118px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(58, 42, 143, .92), rgba(28, 19, 80, .95)); border: 2px solid var(--rar, rgba(255,255,255,.25)); box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(30px) scale(.8); transition: opacity .3s, transform .45s var(--ui-ease); }
.ui-show-card.is-in { opacity: 1; transform: none; }
.ui-show-card .ui-ico { inline-size: 40px; block-size: 40px; }
.ui-show-card b { font: 700 24px/1 var(--font-display); }
.ui-show-card small { font: 500 12.5px/1.2 var(--font-text); color: var(--ink-2); text-align: center; }
.ui-show-stars .ui-ico { color: var(--gold); } .ui-show-gems .ui-ico { color: #5be0ff; }
.ui-show-item .ui-ico { color: var(--rar); }
.ui-show-item b { font-size: 17px; text-align: center; }
.ui-show-collect { opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity .3s, transform .3s var(--ui-ease); }
.ui-show.can-collect .ui-show-collect { opacity: 1; pointer-events: auto; transform: none; }

/* the 2D show during a game: a dark veil, the chest thumbnail bounces, wobbles and pops */
.ui-show-flat { background: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--tier) 30%, #1b1048), rgba(8, 4, 26, .94)); }
.ui-show-stage { align-self: center; display: grid; place-items: center; }
.ui-show-chest { inline-size: min(260px, 60vw); filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)) drop-shadow(0 0 30px color-mix(in srgb, var(--tier) 50%, transparent)); animation: ui-chest-in .6s var(--ui-ease) both, ui-wobble 1.4s ease-in-out .6s infinite; }
.ui-show-flat.is-open .ui-show-chest { animation: ui-chest-pop .5s var(--ui-ease) both; }
@keyframes ui-chest-in { from { transform: translateY(-60px) scale(.6); opacity: 0; } }
@keyframes ui-chest-pop { 40% { transform: scale(1.18); } to { transform: scale(1.05); filter: drop-shadow(0 0 50px var(--tier)) brightness(1.2); } }

/* --------------------------------------------------------------------------------- challenges */
.ui-chlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ui-chcard { display: grid; gap: 9px; padding: 13px 14px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid var(--ui-line); }
.ui-chcard.is-ready { border-color: rgba(255, 201, 60, .7); background: linear-gradient(160deg, rgba(255, 201, 60, .16), rgba(255,255,255,.05)); animation: ui-glow 1.8s ease-in-out infinite; }
.ui-chcard.is-claimed { opacity: .55; }
.ui-chcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ui-tag-game { background: rgba(123, 92, 255, .25); color: #d7ccff; }
.ui-tier { font: 600 12px/1 var(--font-display); color: var(--muted); }
.ui-chcard-title { font: 600 16.5px/1.3 var(--font-display); }
.ui-prog { block-size: 20px; }
.ui-prog span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px/1 var(--font-display); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ui-chcard.is-ready .ui-prog i { background: linear-gradient(90deg, #ffe07a, #ffb21f); }
.ui-chcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ui-chcard-foot .ui-chip { font-size: 13.5px; padding-block: 4px; padding-inline: 6px 8px; }
.ui-claimed { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1 var(--font-display); color: var(--mint); }

/* while a game is on screen a toast (challenge done…) still shows and fades, but a tap on it reaches the game under
   it, not the challenges sheet: on a phone a toast covers part of the board / highway */
body:has(.game-root) #toasts .ui-toast { pointer-events: none; }