@font-face {
  font-family: 'Kinder';
  src: url('assets/KinderChildKawaiiBubble-WpnAz.otf') format('opentype');
  font-display: swap;
}

:root {
  --cream: #fdf3d7;
  --cream-2: #fbe9b8;
  --yellow: #ffd23f;
  --yellow-deep: #fbb330;
  --orange: #ff9e2c;
  --orange-ink: #e9690f;
  --ink: #4a3526;          /* тёмно-коричневый текст/обводка */
  --ink-soft: #7a6450;
  --card-dark: #3a2c28;    /* тёмные игровые карточки */
  --white: #fffaf0;
  --green: #8fd14f;
  --green-deep: #5fae2e;
  --blue: #7ec8e3;
  --pink: #ff9ec4;
  --purple: #7b86ff;
  --purple-deep: #5b63d6;
  --red: #ff5a5f;
  --red-deep: #d83b40;
  --shadow: rgba(74,53,38,.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Baloo 2", 'Kinder', 'Fredoka', -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .35s ease;
}
/* пастельный фон под текущий экран */
body { background: var(--yellow); }
body[data-screen="slots"]  { background: linear-gradient(180deg, #c9ec9b, #aadd7e); }
body[data-screen="coin"]   { background: linear-gradient(180deg, #b9e6f7, #94d3ee); }
body[data-screen="mines"]  { background: linear-gradient(180deg, #ffc6dd, #ff9ec4); }
body[data-screen="wheel"]  { background: linear-gradient(180deg, #d6c7ff, #b6a4ff); }
body[data-screen="wallet"] { background: linear-gradient(180deg, #bfe7f7, #9ed7ef); }
body[data-screen="admin"]  { background: linear-gradient(180deg, #ffe08a, #ffd23f); }

/* облака внизу */
.clouds {
  position: fixed; left: 0; right: 0; bottom: 0; height: 220px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60px 60px at 12% 100%, rgba(255,255,255,.95) 60%, transparent 62%),
    radial-gradient(80px 80px at 30% 105%, rgba(255,255,255,.9) 60%, transparent 62%),
    radial-gradient(70px 70px at 52% 100%, rgba(255,255,255,.95) 60%, transparent 62%),
    radial-gradient(90px 90px at 74% 106%, rgba(255,255,255,.9) 60%, transparent 62%),
    radial-gradient(64px 64px at 92% 100%, rgba(255,255,255,.95) 60%, transparent 62%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.85) 86%);
  opacity: .85;
}

#app { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 0 16px 110px; }

/* ---- Topbar (cream + zigzag низ) ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--cream); margin: 0 -16px; padding: 12px 16px 16px;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
  background:
    linear-gradient(-45deg, transparent 50%, var(--cream) 50%) 0 0 / 16px 16px repeat-x,
    linear-gradient(45deg, transparent 50%, var(--cream) 50%) 0 0 / 16px 16px repeat-x;
}
.avatar { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 0 var(--shadow); object-fit: cover; background: var(--cream-2); }
.brand { font-family: 'Kinder', 'Fredoka', sans-serif; font-weight: 700; font-size: 24px; line-height: .9; text-align: center; display: flex; flex-direction: column; }
.brand .b1 { color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke; text-shadow: 0 3px 0 var(--ink); }
.brand .b2 { color: var(--orange); -webkit-text-stroke: 3px var(--ink); paint-order: stroke; text-shadow: 0 3px 0 var(--ink); margin-top: -2px; }
.lvl-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lvl-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 15px; color: #fff; background: var(--orange);
  border: 3px solid #fff; box-shadow: 0 3px 0 var(--shadow); }
.lvl-bar { width: 40px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.6); overflow: hidden; }
.lvl-bar i { display: block; height: 100%; width: 0%; background: var(--green-deep); transition: width .5s ease; }

/* ---- Balance row ---- */
.balance-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 8px; }
.round-btn {
  width: 50px; height: 50px; border-radius: 16px; flex: none; font-size: 26px; font-weight: 800; color: var(--ink);
  background: var(--white); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--shadow);
}
.round-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--shadow); }
.balance {
  font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 24px; color: var(--ink);
  background: var(--white); padding: 9px 20px; border-radius: 16px;
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--shadow);
  display: flex; align-items: center; gap: 8px;
}
.coin { display: inline-grid; place-items: center; }

/* ---- Screens ---- */
.screen { animation: fade .25s ease; }
.hidden { display: none !important; }
@keyframes fade { from { opacity: 0; transform: translateY(10px);} to {opacity:1; transform:none;} }
.game-title { font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 26px; text-align: center; margin: 8px 0 14px;
  color: var(--orange); -webkit-text-stroke: 4px var(--ink); paint-order: stroke; text-shadow: 0 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 10px; }

/* ---- Slot machine ---- */
.machine {
  position: relative; margin: 6px auto 4px; max-width: 340px;
  background: linear-gradient(180deg, #9ad8f2, #6bbde9);
  border: 4px solid var(--ink); border-radius: 28px; padding: 26px 16px 18px;
  box-shadow: 0 8px 0 var(--shadow);
}
.machine-eyes { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 70px; }
.machine-eyes i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); position: relative; }
.machine-eyes i::after { content:''; position:absolute; top:6px; left:-6px; width:10px; height:5px; border-radius:50%; background: #ff8aa0; opacity:.7; }
.machine-lever { position: absolute; right: -14px; top: 40px; width: 14px; height: 56px; background: var(--ink); border-radius: 8px; }
.machine-lever::after { content:''; position:absolute; top:-12px; left:-6px; width:26px; height:26px; border-radius:50%; background: var(--pink); border:3px solid var(--ink); }
.reels { display: flex; gap: 8px; justify-content: center; }
.reel {
  flex: 1; max-width: 80px; height: 96px; border-radius: 14px; background: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 48px;
  border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(74,53,38,.12);
}
.reel img { width: 80%; height: 80%; object-fit: contain; }
.reel.spin { animation: shake .4s linear infinite; }
@keyframes shake { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.reel.win { background: #fff3b0; }

/* ---- Dice ---- */
.dice-face {
  width: 130px; height: 130px; margin: 8px auto; border-radius: 26px; background: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: 'Kinder', 'Fredoka'; font-size: 50px; font-weight: 700; color: var(--orange-ink);
  border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--shadow);
}
.dice-choice { display: flex; gap: 10px; margin-top: 4px; }
.choice-btn {
  flex: 1; padding: 13px; border-radius: 16px; border: 3px solid var(--ink); background: var(--white);
  color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 4px 0 var(--shadow); font-family: "Baloo 2";
}
.choice-btn small { display: block; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.choice-btn.active { background: var(--yellow); }

/* ---- Coinflip ---- */
.coin-stage { perspective: 800px; display: grid; place-items: center; height: 156px; margin: 6px 0 2px; }
.coin3d { position: relative; width: 132px; height: 132px; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.9,.3,1); }
.coin-side { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: 60px; color: var(--ink);
  border: 5px solid var(--ink); backface-visibility: hidden; box-shadow: 0 6px 0 var(--shadow), inset 0 -6px 0 rgba(74,53,38,.18); }
.coin-side.heads { background: radial-gradient(circle at 38% 30%, #ffe9a8, var(--yellow-deep)); }
.coin-side.tails { background: radial-gradient(circle at 38% 30%, #d8e6ff, #9fb6e8); transform: rotateY(180deg); }
.coin-side img { width: 78%; height: 78%; object-fit: contain; }

/* coin choice cards (Frame 154/155) */
.coin-choice { flex: 1; padding: 6px; border-radius: 18px; border: 3px solid var(--ink); background: var(--white); box-shadow: 0 4px 0 var(--shadow); }
.coin-choice img { width: 100%; height: 84px; object-fit: contain; display: block; }
.coin-choice.active { background: var(--yellow); }
.coin-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }

/* win/lose image inside result bubble */
.pop-img { width: 110px; height: 110px; object-fit: contain; display: none; margin: 0 auto 6px; }
.resultpop.has-img .pop-img { display: block; }
.resultpop.has-img .bubble-face { display: none; }

/* ---- Mines ---- */
.mines-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 6px auto 12px; max-width: 360px; }
.cell {
  aspect-ratio: 1; border-radius: 14px; font-size: 26px; background: var(--white);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--shadow);
  display: flex; align-items: center; justify-content: center; transition: transform .1s, background .15s;
}
.cell:active { transform: translateY(3px); }
.cell img { width: 86%; height: 86%; object-fit: contain; }
.cell.safe { background: #c7f0a0; }
.cell.bomb { background: #ffb3b8; }
.cell.bomb-reveal { background: #ffd9db; opacity: .85; }
.cell.disabled { pointer-events: none; }
.mines-bar { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
.mines-bar select { font-family: "Baloo 2"; background: var(--white); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 12px; padding: 8px 12px; font-size: 15px; font-weight: 800; box-shadow: 0 4px 0 var(--shadow); }
.mult-badge { font-family: 'Kinder', 'Fredoka'; font-size: 18px; color: #fff; background: var(--green-deep);
  -webkit-text-stroke: 0; border: 3px solid var(--ink); padding: 2px 12px; border-radius: 16px; text-shadow: none; box-shadow: 0 3px 0 var(--shadow); }

/* ---- Wheel ---- */
.wheel-wrap { position: relative; width: 270px; margin: 6px auto; }
.wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 22px solid var(--orange);
  filter: drop-shadow(0 2px 0 var(--ink)); }
#wheel-svg { transition: transform 4.4s cubic-bezier(.16,.84,.16,1); display: block; margin: 0 auto; border-radius: 50%; border: 5px solid var(--ink); box-shadow: 0 8px 0 var(--shadow); }
.wheel-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: var(--white); border: 4px solid var(--ink); }

/* ---- Slots paytable ---- */
.paytable { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.paytable .pay { background: var(--white); border: 3px solid var(--ink); border-radius: 14px; padding: 8px 4px;
  text-align: center; box-shadow: 0 4px 0 var(--shadow); }
.paytable .pay .sym { font-size: 24px; line-height: 1; height: 30px; }
.paytable .pay .sym img { height: 30px; width: 30px; object-fit: contain; vertical-align: middle; }
.self-tag { font-size: 11px; font-weight: 800; color: var(--ink-soft); padding: 6px 8px; }
.paytable .pay .mult { display: block; font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 14px; color: var(--orange-ink); margin-top: 3px; }

/* ---- Betbar ---- */
.bid-label { text-align: center; font-family: 'Kinder', 'Fredoka'; font-weight: 600; color: var(--ink); opacity: .8; margin: 14px 0 8px; letter-spacing: .5px; }
.betbar { display: flex; gap: 10px; align-items: center; justify-content: center; }
.chip { width: 52px; height: 56px; border-radius: 16px; font-size: 28px; font-weight: 800; flex: none; color: var(--ink);
  background: var(--white); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--shadow); }
.chip:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--shadow); }
.bet-pill { flex: 1; max-width: 220px; display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--white); border: 3px solid var(--ink); border-radius: 16px; padding: 0 14px; height: 56px; box-shadow: 0 5px 0 var(--shadow); }
.bet-input { width: 100%; min-width: 0; text-align: center; font-family: 'Kinder', 'Fredoka'; font-size: 22px; font-weight: 700;
  background: transparent; color: var(--ink); border: none; }
.play-btn {
  display: block; width: 100%; margin-top: 16px; padding: 18px; border-radius: 20px; border: 4px solid var(--ink);
  font-family: 'Kinder', 'Fredoka'; font-size: 22px; font-weight: 700; letter-spacing: 1px; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.18); box-shadow: 0 7px 0 var(--shadow);
}
.play-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--shadow); }
.play-btn:disabled { opacity: .65; }
.play-btn.red { background: linear-gradient(180deg, #ff6b70, var(--red-deep)); }
.play-btn.green { background: linear-gradient(180deg, #9ad85a, var(--green-deep)); }
.play-btn.purple { background: linear-gradient(180deg, #8b95ff, var(--purple-deep)); }
.play-btn.cashout { background: linear-gradient(180deg, #ffd54a, var(--yellow-deep)); color: var(--ink); text-shadow: none; }
.play-btn.wide { margin-top: 4px; }

/* ---- Wallet / profile ---- */
.profile-top { text-align: center; margin-top: 8px; }
.profile-avatar { width: 96px; height: 96px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 5px 0 var(--shadow); object-fit: cover; background: var(--cream-2); }
.level-ring { width: 40px; height: 40px; margin: -22px auto 0; margin-left: calc(50% + 28px); border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(closest-side, var(--white) 64%, transparent 65%), conic-gradient(var(--green-deep) var(--p,0%), #fff 0); border: 3px solid var(--ink); }
.level-ring span { font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 14px; color: var(--ink); }
.profile-name { font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 22px; margin-top: 8px; color: var(--ink); }
.level-sub { color: var(--ink-soft); font-weight: 700; font-size: 13px; margin: 4px 0 8px; }
.xp-bar { height: 12px; max-width: 240px; margin: 0 auto; border-radius: 8px; background: rgba(255,255,255,.7); overflow: hidden; border: 3px solid var(--ink); }
.xp-bar i { display: block; height: 100%; width: 0%; background: var(--green-deep); transition: width .6s ease; }
.level-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
.level-stats div { background: var(--white); border: 3px solid var(--ink); border-radius: 16px; padding: 12px 6px; text-align: center; box-shadow: 0 4px 0 var(--shadow); }
.level-stats b { display: block; font-family: 'Kinder', 'Fredoka'; font-size: 18px; color: var(--orange-ink); }
.level-stats small { color: var(--ink-soft); font-size: 11px; font-weight: 700; }

.card-title, .section-title { font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 18px; color: var(--ink); }
.section-title { margin: 22px 4px 12px; }
.topup-card { margin-top: 16px; background: var(--white); border: 4px solid var(--ink); border-radius: 24px; padding: 18px; box-shadow: 0 7px 0 var(--shadow); }
.topup-card .card-title { margin-bottom: 12px; text-align: center; }
.topup-input { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--cream); border: 3px solid var(--ink);
  border-radius: 16px; padding: 12px; margin-bottom: 12px; }
.topup-input span { font-size: 24px; }
.topup-input input { width: 60%; text-align: center; font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 28px; color: var(--orange-ink); background: transparent; border: none; }
.topup-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.qbtn { padding: 11px 4px; border-radius: 13px; border: 3px solid var(--ink); background: var(--cream); color: var(--ink); font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--shadow); }
.qbtn.active { background: var(--yellow); }
.topup-note { color: var(--ink-soft); font-size: 11px; text-align: center; margin-top: 12px; font-weight: 700; line-height: 1.5; }

/* ---- Withdrawals ---- */
.wd-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wd-row { display: flex; align-items: center; justify-content: space-between; background: var(--cream);
  border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; font-weight: 800; font-size: 14px; }
.wd-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; border: 2px solid var(--ink); }
.wd-badge.pending { background: #ffe08a; }
.wd-badge.sent { background: var(--green); color: #14310a; }
.wd-badge.rejected { background: #ffb3b8; }
.wd-empty { color: var(--ink-soft); font-weight: 700; text-align: center; padding: 10px; }
.admin-wd { display: flex; flex-direction: column; gap: 10px; }
.wd-card.sent { border-color: var(--green-deep); }
.wd-card.rejected { opacity: .65; }

/* ---- Achievements ---- */
.ach-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.ach { display: flex; align-items: center; gap: 10px; background: var(--white); border: 3px solid var(--ink); border-radius: 16px; padding: 11px 12px; box-shadow: 0 4px 0 var(--shadow); }
.ach.locked { opacity: .5; }
.ach-ico { font-size: 24px; flex: none; }
.ach-name { font-size: 12px; font-weight: 800; line-height: 1.2; }

/* ---- Tabbar ---- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; display: flex; justify-content: space-around;
  background: var(--cream); border-top: 4px solid var(--ink); padding: 8px 4px 12px; z-index: 30;
}
.tab { background: none; border: none; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; font: inherit; }
.tab i { font-size: 22px; font-style: normal; line-height: 1; }
.tab span { font-size: 10px; font-weight: 800; }
.tab.active { color: var(--orange-ink); }
.tab.active i { transform: scale(1.18); }

/* ---- Admin ---- */
.admin-global { background: var(--white); padding: 16px; border-radius: 18px; margin: 8px 0 14px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--shadow); }
.admin-global label { display: block; margin-bottom: 10px; font-weight: 800; }
.admin-global input[type=range] { width: 100%; accent-color: var(--orange); }
.admin-users { display: flex; flex-direction: column; gap: 10px; }
.user-card { background: var(--white); border-radius: 16px; padding: 12px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--shadow); }
.user-card.blocked { opacity: .6; }
.user-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.user-name { font-weight: 800; }
.user-name small { color: var(--ink-soft); display: block; font-weight: 600; }
.user-bal { color: var(--orange-ink); font-weight: 800; }
.user-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.user-row input { width: 72px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 9px; padding: 8px; text-align: center; }
.mini-btn { padding: 8px 12px; border-radius: 11px; border: 2px solid var(--ink); font-weight: 800; font-size: 12px; background: var(--cream); color: var(--ink); }
.mini-btn.danger { background: #ffb3b8; }
.mini-btn.ok { background: var(--green); }
.user-row label { font-size: 12px; color: var(--ink-soft); font-weight: 700; }

/* ---- Toast ---- */
.toast { position: fixed; top: 78px; left: 50%; transform: translateX(-50%) translateY(-20px); z-index: 50;
  background: var(--white); color: var(--ink); padding: 12px 20px; border-radius: 16px; font-weight: 800;
  opacity: 0; pointer-events: none; transition: .3s; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.win { background: #d6f5b0; }
.toast.lose { background: #ffd2d4; }

/* ---- Win/Lose speech bubble ---- */
.resultpop { position: fixed; inset: 0; z-index: 58; display: none; place-items: center; pointer-events: none; }
.resultpop.show { display: grid; }
.resultpop .bubble {
  position: relative; min-width: 240px; padding: 22px 30px; border-radius: 26px; text-align: center;
  background: var(--yellow); border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--shadow);
  transform: rotate(-3deg); animation: pop .35s cubic-bezier(.2,1.3,.5,1);
}
.resultpop.lose .bubble { background: #ff9ea3; }
@keyframes pop { from { transform: scale(.5) rotate(-3deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
.bubble-title { font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 30px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke; text-shadow: 0 3px 0 var(--ink); }
.bubble-amt { font-family: 'Kinder', 'Fredoka'; font-weight: 700; font-size: 24px; color: var(--ink); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bubble-face { position: absolute; right: 14px; bottom: 8px; font-size: 20px; font-weight: 800; color: var(--ink); }

/* ---- Level-up overlay ---- */
.levelup { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(74,53,38,.45); }
.levelup.show { display: grid; animation: fade .25s ease; }
.levelup-card { text-align: center; padding: 30px 40px; border-radius: 26px; background: var(--white); border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--shadow); animation: pop2 .4s cubic-bezier(.2,1.3,.5,1); }
@keyframes pop2 { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.levelup-burst { font-size: 54px; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.levelup-title { color: var(--ink-soft); font-weight: 800; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.levelup-lvl { font-family: 'Kinder', 'Fredoka'; font-size: 60px; font-weight: 700; color: var(--orange); -webkit-text-stroke: 4px var(--ink); paint-order: stroke; line-height: 1; }

/* ---- Confetti ---- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 10px; height: 15px; border-radius: 2px; opacity: 0; animation: drop var(--d,2.2s) ease-in forwards; }
@keyframes drop { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 1; } }