/* Launch splash, toggle switches, badges/dots, and the bottom tab bar. */


.app-splash {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: linear-gradient(165deg, #351d10 0%, #180c08 62%, #0c0504 100%);
  transition: opacity .42s ease-out, visibility .42s;
}
.app-splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-mark { text-align: center; color: #f6df83; }
.splash-emblem {
  width: 140px; height: 140px; margin: 0 auto 20px; display: grid; place-items: center;
  border-radius: 34px; background: linear-gradient(160deg, #f7f0dc, #ecdfc0);
  box-shadow: 0 18px 38px var(--shadow-strong);
}
.splash-emblem-svg { width: 84%; height: 84%; }
.splash-title { font-family: 'Cinzel', serif; font-size: 2.15rem; letter-spacing: 8px; margin-left: 8px; }
.splash-subtitle { margin-top: 8px; color: #c9b99a; font-size: .9rem; letter-spacing: 1px; }
.splash-cowries { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }
.splash-cowries i { width: 13px; height: 22px; border-radius: 50%; background: #e8d8ad; border: 1px solid #865b32; animation: splashShell 1.1s ease-in-out infinite alternate; }
.splash-cowries i:nth-child(2) { animation-delay: .12s; } .splash-cowries i:nth-child(3) { animation-delay: .24s; } .splash-cowries i:nth-child(4) { animation-delay: .36s; } .splash-cowries i:nth-child(5) { animation-delay: .48s; }
@keyframes splashShell { to { transform: translateY(-8px) rotateY(180deg); background: #9b754e; } }

.settings-list { display: grid; gap: 9px; margin: 14px 0 20px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; background: linear-gradient(160deg, var(--surface-1), var(--surface-2)); border: 1px solid var(--border-gold-soft); border-radius: 14px; text-align: left; }
.setting-copy { display: flex; align-items: center; gap: 12px; }
.setting-icon { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.05rem; background: var(--shadow-soft); border: 1px solid var(--border-gold-soft); }
.setting-copy-text strong { display: block; color: var(--text-strong); font-size: .9rem; }
.setting-copy-text span { display: block; color: var(--text-faint); font-size: .7rem; margin-top: 2px; }
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 18px; background: #4b3529; transition: background .2s; }
.switch span::after { content: ''; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background: #f4ecd6; transition: transform .2s; box-shadow: 0 2px 5px var(--shadow); }
.switch input:checked + span { background: #a77e26; }
.switch input:checked + span::after { transform: translateX(20px); }
.name-edit { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.name-edit input {
  width: 108px; min-width: 0; background: var(--surface-deep); border: 1px solid var(--border-gold);
  border-radius: 8px; color: var(--text-primary); padding: 8px 10px; font-size: .82rem;
}
.name-edit input:focus { outline: none; border-color: var(--gold-accent); }
.setting-select {
  background: var(--surface-deep); border: 1px solid var(--border-gold); border-radius: 8px;
  color: var(--text-primary); padding: 8px 10px; font-size: .82rem; flex-shrink: 0;
}
.setting-select:focus { outline: none; border-color: var(--gold-accent); }
.name-shuffle-btn {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; font-size: .95rem; cursor: pointer;
  border: 1px solid var(--border-gold); background: var(--surface-deep); color: var(--gold-accent);
}
.name-shuffle-btn:active { transform: scale(.92); }

/* Account card — sign-in / signed-in state, top of Settings */
.account-card { padding: 14px; background: linear-gradient(160deg, var(--surface-1), var(--surface-2)); border: 1px solid var(--border-gold-soft); border-radius: 14px; margin-bottom: 14px; }
.account-signed-in { display: flex; align-items: center; gap: 12px; }
.account-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--surface-deep); border: 1px solid var(--border-gold); }
.account-avatar-fallback { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-deep); border: 1px solid var(--border-gold); font-size: 1.1rem; }
.account-info { flex: 1; min-width: 0; }
.account-info strong { display: block; color: var(--text-strong); font-size: .9rem; }
.account-info span { display: block; color: var(--text-faint); font-size: .7rem; margin-top: 2px; }
.account-providers { display: grid; gap: 8px; }
.account-provider-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-gold); background: var(--surface-deep);
  color: var(--text-primary); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.account-provider-btn:active { transform: scale(.98); }
.account-phone-form { display: none; gap: 8px; margin-top: 8px; }
.account-phone-form.active { display: grid; }
.account-phone-form input {
  background: var(--surface-deep); border: 1px solid var(--border-gold); border-radius: 8px;
  color: var(--text-primary); padding: 10px 12px; font-size: .85rem;
}
.account-phone-form input:focus { outline: none; border-color: var(--gold-accent); }
.account-status { color: var(--text-faint); font-size: .72rem; margin-top: 8px; min-height: 1em; }
.account-xp-block { margin-top: 10px; }
.account-xp-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; margin-bottom: 5px; }
.account-xp-row span:first-child { font-weight: 800; color: var(--text-strong); }
.account-xp-row span:last-child { color: var(--text-faint); }
.account-xp-bar { height: 8px; border-radius: 5px; background: var(--shadow-soft); border: 1px solid var(--border-gold-soft); overflow: hidden; }
.account-xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-accent), #f0d878); border-radius: 5px; transition: width .3s ease; }
.app-version { color: var(--text-faint); font-size: .68rem; margin-top: 14px; text-align: center; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

/* Persistent bottom nav — a single docked instance, flush to the bottom
   edge on every screen, not a floating inset pill. */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
  height: calc(var(--navbar-h) + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  background: var(--surface-solid); border-top: 1px solid var(--border-gold);
  box-shadow: 0 -4px 14px var(--shadow);
  width: 100%;
}
/* Carries the bar's colour past the bottom edge, so a strip below the
   layout viewport (seen in iOS home-screen launches) matches the bar
   instead of showing through. */
.app-tabbar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 120px;
  background: var(--surface-solid); pointer-events: none;
}
.app-tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 2px; width: 100%; max-width: var(--shell-max-width); }
.app-tabbar button, .app-tabbar a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); font-weight: 800; font-size: .58rem;
  cursor: pointer; font-family: inherit; text-decoration: none; transition: transform .1s ease;
}
.app-tabbar button:active, .app-tabbar a:active { transform: scale(.94); }
.app-tabbar button .tab-icon, .app-tabbar a .tab-icon { font-size: 1.05rem; line-height: 1; }
.app-tabbar button.active, .app-tabbar a.active { background: linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,.1)); color: var(--gold-accent); }

/* Small unread/eligible dot, e.g. on the Daily Reward tab when a claim is waiting. */
.tab-dot {
  position: absolute; top: 3px; right: 22%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--surface-solid);
}

/* Home sits in the middle, raised out of the bar like Solitaire Cash's
   Lobby button -- the circle pokes above the tabbar's top edge, so the
   bar itself needs no overflow clipping (it has none). */
.app-tabbar a.tab-home { background: transparent; min-height: 50px; gap: 3px; }
.tab-home-circle {
  width: 50px; height: 50px; margin-top: -24px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #ffe9a8, var(--gold-accent) 62%, #8a6a1c);
  border: 3px solid var(--surface-solid);
  box-shadow: 0 4px 10px var(--shadow-strong), inset 0 -3px 6px rgba(0,0,0,.3);
}
.tab-home-circle .tab-icon { font-size: 1.3rem; color: var(--dark-wood); }
.app-tabbar a.tab-home.active .tab-home-circle { box-shadow: 0 4px 14px rgba(0,0,0,.6), 0 0 0 2px var(--gold-accent); }