/* Buchra Fidelity — PWA Mobile UI (thème vitrine Café Buchra) */
:root {
  --copper:      #c2761f;
  --copper-lt:   #e0a24e;
  --copper-dk:   #8a530f;
  --copper-pale: #f6e4c8;

  --espresso:    #2a1810;
  --espresso-2:  #1f130c;
  --espresso-3:  #3a2317;

  --cream:      #fbf6ec;
  --cream-2:    #f3e8d6;
  --surface:    #ffffff;
  --border:     rgba(58,35,23,.12);
  --border-dk:  rgba(58,35,23,.22);

  --text:       #2a1810;
  --text-muted: rgba(42,24,16,.68);
  --text-soft:  rgba(42,24,16,.5);

  --success: #059669;
  --danger:  #dc2626;

  --radius:    14px;
  --radius-lg: 24px;
  --nav-h:     64px;

  --shadow-sm: 0 1px 3px rgba(42,24,16,.1), 0 1px 2px rgba(42,24,16,.06);
  --shadow:    0 4px 16px rgba(42,24,16,.1), 0 2px 6px rgba(42,24,16,.06);
  --shadow-lg: 0 16px 44px -12px rgba(42,24,16,.28);
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
[hidden] { display: none !important; }
body {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--text);
}
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.15; }

#app { display: flex; flex-direction: column; height: 100%; }

/* ── Header ── */
.game-header {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem; height: 58px;
  background: rgba(251,246,236,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.game-logo { display: flex; align-items: center; }
.game-logo-img { height: 28px; width: auto; display: block; }

.player-info { display: flex; align-items: center; gap: .5rem; }
.points-badge {
  display: inline-flex; align-items: center; background: var(--copper); color: #fff;
  padding: .3rem .85rem; border-radius: 999px;
  font-family: 'Jost', sans-serif; font-weight: 700; font-size: .85rem;
  box-shadow: 0 2px 8px rgba(194,118,31,.35);
}

/* ── Icône topbar (menu ⋮) ── */
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--cream-2); border: none;
  color: var(--espresso); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--copper-pale); color: var(--copper-dk); }

.player-menu-wrap { position: relative; }

/* ── Menu profil (déclenché depuis l'icône ⋮) ── */
.player-menu {
  position: absolute; top: calc(100% + .6rem); right: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--shadow-lg); z-index: 20;
  animation: panelIn .18s var(--transition);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.player-menu-profile {
  display: block; width: 100%; background: none; border: none; border-radius: 10px;
  padding: .4rem; cursor: pointer; transition: background var(--transition);
}
.player-menu-profile:hover { background: var(--cream-2); }
.player-menu-avatar {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto .6rem;
  background: linear-gradient(135deg, var(--copper-dk), var(--copper)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.15rem;
}
.player-menu-name { text-align: center; font-weight: 700; color: var(--espresso); font-size: .95rem; }
.player-menu-phone { text-align: center; color: var(--text-muted); font-size: .8rem; margin-top: .15rem; }
.player-menu-divider { height: 1px; background: var(--border); margin: .7rem 0; }
.player-menu-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: none; border-radius: 8px;
  padding: .6rem .4rem; font-family: 'Jost', sans-serif; font-size: .88rem; font-weight: 600;
  color: var(--espresso); cursor: pointer; transition: background var(--transition);
}
.player-menu-item:hover { background: var(--cream-2); }
.player-menu-item.player-menu-logout { color: var(--danger); }
.player-menu-item.player-menu-logout:hover { background: rgba(220,38,38,.06); }

/* ── Screens ── */
#screen-container { flex: 1; overflow-y: auto; }
.screen { display: none; }
.screen.active { display: block; animation: screenIn .32s var(--transition); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.screen-inner { padding: 1.25rem; padding-bottom: calc(var(--nav-h) + 1rem); max-width: 480px; margin: 0 auto; }

/* ── Auth hero (écran de connexion / accueil sans compte) ── */
.auth-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 2.75rem 1.5rem 3.5rem;
  background: linear-gradient(135deg, var(--espresso) 0%, var(--espresso-3) 100%);
  color: var(--cream);
}
.auth-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 70% 30%, rgba(194,118,31,.35) 0%, transparent 70%);
}
.auth-hero-icon { position: relative; width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1.1rem; box-shadow: var(--shadow-lg); display: block; }
.auth-hero h1 { position: relative; font-size: 2rem; color: var(--cream); margin-bottom: .4rem; }
.auth-hero h1 em { font-style: italic; color: var(--copper-lt); }
.auth-hero p { position: relative; color: rgba(251,246,236,.72); font-size: .95rem; }
.auth-hero + .screen-inner { margin-top: -1.75rem; }

/* ── Hero réduit (écran de présentation sans compte) ── */
.auth-hero--sm { padding: 1.75rem 1.5rem 2.25rem; }
.auth-hero--sm .auth-hero-icon { width: 48px; height: 48px; margin-bottom: .75rem; }
.auth-hero--sm h1 { font-size: 1.5rem; }
.auth-hero--sm p { font-size: .85rem; }

/* ── Features grid (écran de présentation) ── */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1.5rem 0; }
.feature {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--copper);
  border-radius: var(--radius); padding: 1.1rem 1rem; text-align: center; box-shadow: var(--shadow);
  cursor: pointer; font-family: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}
.feature:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.feature .f-icon { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.feature h3 { font-size: .92rem; margin-bottom: .25rem; font-family: 'Jost', sans-serif; font-weight: 700; color: var(--espresso); }
.feature p { color: var(--text-muted); font-size: .78rem; }

/* ── Avatar / icon badge (écrans PIN) ── */
.avatar-circle {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .9rem;
  background: linear-gradient(135deg, var(--copper-dk), var(--copper));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.5rem;
  box-shadow: var(--shadow-lg);
}
.icon-badge {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .9rem;
  background: var(--copper-pale); font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
}
.icon-badge--sm { width: 48px; height: 48px; font-size: 1.4rem; margin: 0 auto .75rem; }

/* ── Filter tabs (écran Jeux : Quiz / Boîte mystère) ── */
.filter-tabs { display: flex; gap: .5rem; margin: 1rem 0 1.25rem; background: var(--cream-2); padding: .3rem; border-radius: 999px; }
.filter-tabs .tab {
  flex: 1; background: none; border: none; padding: .55rem .5rem; border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.filter-tabs .tab.active { background: var(--surface); color: var(--copper-dk); box-shadow: var(--shadow-sm); }
.games-subpanel {}

/* ── Popup détail bénéfice (bottom sheet) ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(42,24,16,.55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet {
  position: relative; width: 100%; max-width: 480px; background: var(--surface);
  border-radius: 24px 24px 0 0; padding: 2rem 1.5rem 2.5rem; text-align: center;
  box-shadow: var(--shadow-lg); animation: sheetUp .28s var(--transition);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-sheet-close {
  position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream-2); border: none; font-size: 1rem; color: var(--text-muted); cursor: pointer;
}
.modal-sheet-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.modal-sheet h2 { margin-bottom: .9rem; color: var(--espresso); }
.modal-sheet p { color: var(--text-muted); font-size: .92rem; line-height: 1.7; text-align: left; }

/* ── Profil : infos en haut + accordéons ── */
.profile-hero { text-align: center; margin-bottom: 1.5rem; }
.profile-hero .avatar-circle { margin-bottom: .6rem; }
.profile-hero-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.2rem; color: var(--espresso); }
.profile-hero-phone { color: var(--text-muted); font-size: .85rem; margin-top: .1rem; }

.profile-accordions { display: flex; flex-direction: column; gap: .6rem; text-align: left; }
.profile-details { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.profile-summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1rem; font-family: 'Jost', sans-serif; font-size: .88rem; font-weight: 600;
  color: var(--espresso); cursor: pointer; list-style: none; user-select: none;
  transition: background var(--transition);
}
.profile-summary::-webkit-details-marker { display: none; }
.profile-summary:hover { background: var(--cream-2); }
.profile-chevron { color: var(--text-muted); flex-shrink: 0; transition: transform var(--transition); }
.profile-details[open] > .profile-summary .profile-chevron { transform: rotate(180deg); }
.profile-details[open] > .profile-summary { border-bottom: 1px solid var(--border); }
.profile-details-body { padding: 1.1rem; }

/* ── Cards ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card h2 { font-size: 1.3rem; margin-bottom: .25rem; color: var(--espresso); }
.card-sub { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.25rem; }

/* ── Form ── */
.form-group { margin-bottom: 1rem; }
.form-group input {
  width: 100%; padding: .875rem 1rem; background: var(--cream); border: 1.5px solid var(--border-dk);
  border-radius: var(--radius); color: var(--text); font-family: 'Jost', sans-serif; font-size: 1rem;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(194,118,31,.14); }

/* ── Buttons ── */
.btn-game {
  display: inline-flex; align-items: center; justify-content: center; padding: .875rem 1.5rem;
  background: var(--copper); color: #fff; border: none; border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 14px rgba(194,118,31,.35);
  transition: opacity var(--transition), transform var(--transition);
}
.btn-game:hover:not(:disabled) { opacity: .9; transform: translateY(-2px); }
.btn-game:active:not(:disabled) { transform: translateY(0); }
.btn-game:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-full { width: 100%; }
.btn-back {
  background: none; border: none; color: var(--text-muted); font-size: .9rem; padding: 0;
  cursor: pointer; margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem;
  font-family: 'Jost', sans-serif; transition: color var(--transition);
}
.btn-back:hover { color: var(--copper-dk); }

/* ── Accueil : salutation ── */
.home-greeting { font-size: 1.05rem; color: var(--text-muted); padding: .5rem 0 1.1rem; }
.home-greeting strong { color: var(--espresso); font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700; }

/* ── Accueil : carte de points (pièce maîtresse) ── */
.points-card {
  position: relative; overflow: hidden; display: block; width: 100%; text-align: left;
  background: linear-gradient(145deg, var(--espresso) 0%, var(--espresso-3) 55%, var(--copper-dk) 130%);
  border: none; border-radius: var(--radius-lg); padding: 1.5rem 1.6rem 1.4rem;
  cursor: pointer; box-shadow: var(--shadow-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.points-card:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -14px rgba(42,24,16,.4); }
.points-card-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 85% -10%, rgba(224,162,78,.35) 0%, transparent 65%);
}
.points-card-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.points-card-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(251,246,236,.62); }
.points-card-mark { font-size: 1.15rem; opacity: .85; }
.points-card-value { position: relative; font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--cream); line-height: 1; margin-bottom: 1.1rem; }
.points-card-value span { font-size: 2.9rem; }
.points-card-value small { font-size: 1.1rem; opacity: .7; margin-left: .35rem; }
.points-card-progress { position: relative; }
.progress-track { height: 6px; border-radius: 999px; background: rgba(251,246,236,.16); overflow: hidden; margin-bottom: .55rem; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--copper-lt), var(--cream)); transition: width .5s var(--transition); }
.progress-caption { font-size: .78rem; color: rgba(251,246,236,.75); }

/* ── Accueil : bonus de série quotidien ── */
.streak-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin-top: 1rem; box-shadow: var(--shadow-sm);
}
.streak-main { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.streak-flame { font-size: 1.7rem; flex-shrink: 0; }
.streak-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.streak-text strong { font-size: .95rem; color: var(--espresso); }
.streak-text span { font-size: .76rem; color: var(--text-muted); }
.streak-card.is-claimed { background: var(--cream-2); }

/* ── Parrainage ── */
.referral-code-box {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--cream); border: 1.5px dashed var(--copper); border-radius: var(--radius);
  padding: .9rem 1rem; margin-top: 1.25rem;
}
.referral-code { font-family: 'Jost', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: .05em; color: var(--copper-dk); }
.referral-copy { background: none; border: none; font-size: 1.15rem; cursor: pointer; padding: .2rem; }
.referral-stats { text-align: center; margin-top: 1.5rem; }
.referral-count { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 2.4rem; color: var(--espresso); line-height: 1; }
.referral-count-label { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ── Foire (tombola) ── */
.foire-ticket-card { margin-bottom: 1rem; }
.foire-draw { font-size: .92rem; color: var(--text); margin-bottom: .4rem; }
.foire-participants { font-size: .88rem; color: var(--text-muted); }
.foire-prizes-title { font-size: 1.05rem; color: var(--espresso); margin-bottom: .75rem; }
.foire-prizes { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.foire-prizes li { font-size: .92rem; color: var(--text); padding: .55rem .75rem; background: var(--cream); border-radius: 10px; }

/* ── Accueil : activités du jour ── */
.home-section-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 1.75rem 0 .75rem; }
.today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.today-tile {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition);
}
.today-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.today-tile-icon { font-size: 1.5rem; }
.today-tile-label { font-weight: 700; font-size: .88rem; color: var(--espresso); }
.today-tile-status {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .55rem; border-radius: 999px; background: var(--copper-pale); color: var(--copper-dk);
}
.today-tile-status.is-done { background: rgba(5,150,105,.12); color: var(--success); }

/* ── Accueil : bannière (teaser tombola de la foire) ── */
.upcoming-banner {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  background: var(--copper-pale); border: 1.5px dashed var(--copper); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: 1.5rem 0 .25rem; cursor: pointer;
  transition: background var(--transition);
}
.upcoming-banner:hover { background: #f0dcb8; }
.upcoming-icon { font-size: 1.6rem; flex-shrink: 0; }
.upcoming-text { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.upcoming-text strong { font-size: .88rem; color: var(--copper-dk); font-family: 'Jost', sans-serif; }
.upcoming-text span { font-size: .76rem; color: var(--text-muted); }
.upcoming-arrow { color: var(--copper-dk); font-size: 1.1rem; flex-shrink: 0; }

/* ── Accueil : récentes récompenses ── */
.home-section-header { display: flex; align-items: baseline; justify-content: space-between; margin: 1.75rem 0 .75rem; }
.home-section-header .home-section-title { margin: 0; }
.home-section-link {
  background: none; border: none; color: var(--copper-dk); font-family: 'Jost', sans-serif;
  font-size: .78rem; font-weight: 600; cursor: pointer;
}
.home-section-link:hover { text-decoration: underline; }

/* ── PIN dots ── */
.pin-header { text-align: center; margin-bottom: 2rem; }
.pin-greeting { font-size: 1.25rem; font-weight: 600; margin-bottom: .25rem; color: var(--espresso); font-family: 'Cormorant Garamond', serif; }
.pin-dots { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.pin-dots span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-dk); background: transparent; transition: background var(--transition), border-color var(--transition); }
.pin-dots span.filled { background: var(--copper); border-color: var(--copper); }
.pin-dots-sm span { width: 16px; height: 16px; }
.pin-error { color: var(--danger); text-align: center; font-size: .9rem; margin-bottom: .75rem; }

/* ── Numpad ── */
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 280px; margin: 0 auto; }
.key {
  background: var(--surface); border: 1.5px solid var(--border-dk); border-radius: 12px;
  font-family: 'Jost', sans-serif; font-size: 1.4rem; font-weight: 600; padding: 1rem; cursor: pointer;
  color: var(--text); transition: background var(--transition), transform .1s, border-color var(--transition);
}
.key:hover { border-color: var(--copper); }
.key:active { background: var(--copper-pale); transform: scale(.95); }
.key-empty { background: transparent; border-color: transparent; cursor: default; }

/* ── Form labels ── */
.form-group label { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .05em; }
.form-group input[readonly] { opacity: .6; cursor: not-allowed; }

/* ── Quiz & divers ── */
.loading-msg, .empty-msg { color: var(--text-muted); text-align: center; padding: 2rem; }
.quiz-reward { color: var(--copper-dk); font-size: .85rem; font-weight: 600; margin-bottom: .75rem; }
.quiz-question { font-size: 1.15rem; margin-bottom: 1.25rem; line-height: 1.4; color: var(--espresso); }
.quiz-options { display: flex; flex-direction: column; gap: .6rem; }
.quiz-option {
  background: var(--cream); border: 1.5px solid var(--border-dk); border-radius: var(--radius);
  padding: .85rem 1rem; text-align: left; color: var(--text); font-family: 'Jost', sans-serif;
  font-size: .95rem; cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.quiz-option:hover { border-color: var(--copper); background: var(--copper-pale); }
.result-card { text-align: center; padding: 2rem; }
.result-card p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.box-emoji { font-size: 3rem; margin-bottom: .5rem; }
.gift-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.gift-desc { color: var(--text-muted); font-size: .85rem; margin: .25rem 0; }
.gift-cost { color: var(--copper-dk); font-weight: 700; font-size: .9rem; }
.gift-out { display: inline-block; margin-left: .5rem; font-size: .72rem; font-weight: 700; color: var(--danger); }
.btn-sm { padding: .6rem 1rem; font-size: .85rem; }

/* ── Cadeaux : note + sections accessible/verrouillé ── */
.gifts-note { font-size: .82rem; color: var(--text-muted); background: var(--copper-pale); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.25rem; line-height: 1.5; }
.gifts-section-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 1.25rem 0 .6rem; }
.gift-card.gift-locked { opacity: .62; }
.gift-ok-badge { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(5,150,105,.12); color: var(--success); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.gift-lock-badge { flex-shrink: 0; font-size: .78rem; font-weight: 700; color: var(--text-soft); white-space: nowrap; }

/* ── Modal demande d'échange (confirmation client) ── */
.gift-req-box { background: var(--cream); border: 1.5px dashed var(--copper); border-radius: var(--radius); padding: 1.1rem; margin: 1.25rem 0; text-align: center; }
.gift-req-box strong { display: block; font-size: 1.15rem; color: var(--espresso); }
.gift-req-cost { display: inline-block; margin-top: .3rem; font-weight: 700; color: var(--copper-dk); }
.gift-req-desc { font-size: .84rem; color: var(--text-muted); margin-top: .4rem; }
.gift-req-actions { display: flex; gap: .75rem; }
.gift-req-actions .btn-game { flex: 1; }
.btn-ghost { background: var(--cream-2); color: var(--espresso); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--border); opacity: 1; }
.history-list { display: flex; flex-direction: column; gap: .6rem; }
.history-item { display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; }
.history-type { font-size: 1.2rem; }
.history-details { flex: 1; }
.history-label { display: block; font-size: .9rem; color: var(--text); }
.history-date  { display: block; font-size: .75rem; color: var(--text-muted); }
.history-pts { font-weight: 700; font-size: .9rem; }
.history-pts.earn  { color: var(--success); }
.history-pts.spend { color: var(--danger); }

/* ── Bottom nav ── */
.bottom-nav { display: flex; height: var(--nav-h); background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0; box-shadow: 0 -2px 12px rgba(42,24,16,.06); }
.bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  background: none; border: none; color: var(--text-soft); font-family: 'Jost', sans-serif;
  font-size: .62rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; transition: color var(--transition); padding: .5rem 0;
}
.bottom-nav .nav-icon { width: 26px; height: 26px; transition: transform var(--transition); }
.bottom-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav button.active { color: var(--copper-dk); }
.bottom-nav button.active .nav-icon { transform: translateY(-2px); }