/* =========================================================
   LuckyFlip — Turn the Cards
   Mobile-first H5. Reference design width: 750px.
   1 design px = var(--s)
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --s: calc(100vw / 750);
  --gold-line: #f6cf7a;
  --cream: #fff7e6;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 561px) {
  :root { --s: min(0.64px, calc((100vh - 18px) / 1623)); }
}

@media (min-width: 561px) {
  body { background: radial-gradient(120% 70% at 50% 0%, #12552f 0%, #0a3520 46%, #04180d 100%); }
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #06210f;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Noto Sans", "Hiragino Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #fff;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

button, input { font-family: inherit; }

button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; }

/* ---------- shell ---------- */

.app {
  position: relative;
  width: calc(750 * var(--s));
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}

.bg-layer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: calc(750 * var(--s));
  max-width: 100%;
  margin: 0 auto;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(26, 112, 66, .92) 0%, rgba(9, 48, 29, .96) 52%, #04180d 100%),
    url("../assets/img/bg.webp") center top / 100% auto no-repeat,
    #06210f;
  pointer-events: none;
}

.bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 34% at 50% 16%, rgba(255, 214, 130, .18), transparent 70%),
    radial-gradient(70% 40% at 50% 100%, rgba(255, 90, 60, .10), transparent 70%);
}

/* ---------- top bar ---------- */

.top-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-top) + 20 * var(--s)) calc(30 * var(--s)) 0;
  height: calc(var(--safe-top) + 108 * var(--s));
}

.app[data-route="rules"] .page-close,
.app[data-route="wallet"] .page-close { display: none; }

.app[data-route="rules"] .rule-entry,
.app[data-route="wallet"] .rule-entry { display: none; }

.top-right { margin-left: auto; }

.app[data-route="rules"] .toast-container,
.app[data-route="wallet"] .toast-container {
  bottom: calc(46 * var(--s) + var(--safe-bottom));
}

.page-close {
  width: calc(78 * var(--s));
  height: calc(78 * var(--s));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffe6b8;
  background: linear-gradient(180deg, rgba(255, 96, 70, .96), rgba(150, 16, 8, .96));
  border: calc(4 * var(--s)) solid rgba(255, 214, 140, .78);
  box-shadow:
    0 calc(5 * var(--s)) calc(12 * var(--s)) rgba(0, 0, 0, .45),
    inset 0 calc(4 * var(--s)) calc(8 * var(--s)) rgba(255, 255, 255, .3);
  transition: transform .12s ease;
}

.page-close:active { transform: scale(.92); }

.page-close svg { width: 52%; height: 52%; }

.top-right {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--s));
}

.rule-entry {
  font-size: calc(26 * var(--s));
  font-weight: 600;
  color: rgba(255, 246, 222, .86);
  padding: calc(10 * var(--s)) calc(20 * var(--s));
  border-radius: calc(30 * var(--s));
  border: calc(2 * var(--s)) solid rgba(255, 214, 140, .4);
  background: rgba(0, 0, 0, .24);
  transition: transform .12s ease;
}

.rule-entry:active { transform: scale(.95); }

.lang-entry {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  height: calc(56 * var(--s));
  padding: 0 calc(18 * var(--s));
  border-radius: calc(28 * var(--s));
  border: calc(2 * var(--s)) solid rgba(255, 214, 140, .4);
  background: rgba(0, 0, 0, .24);
  color: rgba(255, 246, 222, .92);
  font-size: calc(23 * var(--s));
  font-weight: 800;
  letter-spacing: .04em;
  transition: transform .12s ease;
}

.lang-entry:active { transform: scale(.95); }

.ico-globe { width: calc(28 * var(--s)); height: calc(28 * var(--s)); }

/* ---------- view ---------- */

.view { position: relative; z-index: 1; }

/* ---------- home ---------- */

.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - var(--safe-top) - 108 * var(--s));
  padding: 0 0 calc(12 * var(--s) + var(--safe-bottom));
  position: relative;
}

.title-wrap {
  text-align: center;
  padding: 0 calc(30 * var(--s));
  position: relative;
  z-index: 4;
}

.title-badge {
  display: inline-block;
  font-size: calc(19 * var(--s));
  font-weight: 800;
  letter-spacing: .2em;
  color: #ffe9b6;
  padding: calc(7 * var(--s)) calc(20 * var(--s));
  border-radius: calc(30 * var(--s));
  border: calc(2 * var(--s)) solid rgba(255, 214, 140, .5);
  background: linear-gradient(180deg, rgba(255, 160, 60, .28), rgba(120, 30, 0, .3));
  box-shadow: 0 0 calc(26 * var(--s)) rgba(255, 180, 80, .28);
  margin-bottom: calc(8 * var(--s));
}

.title-text {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: var(--title-size, calc(84 * var(--s)));
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.015em;
  white-space: nowrap;
  max-width: none;
}

.title-stroke,
.title-fill {
  display: block;
  white-space: nowrap;
}

.title-stroke {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  color: transparent;
  -webkit-text-stroke: calc(10 * var(--s)) #6d2400;
  text-shadow:
    0 calc(11 * var(--s)) 0 #a83a05,
    0 calc(20 * var(--s)) calc(26 * var(--s)) rgba(0, 0, 0, .6);
  z-index: 0;
}

.title-fill {
  position: relative;
  z-index: 1;
  background: linear-gradient(178deg, #fffdf0 4%, #ffe98a 30%, #ffc03f 56%, #ff9d21 74%, #ffe6a0 97%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(4 * var(--s)) 0 rgba(255, 255, 255, .4));
}

.title-sub {
  margin: calc(10 * var(--s)) auto 0;
  font-size: calc(23 * var(--s));
  line-height: 1.42;
  color: rgba(255, 244, 218, .74);
  max-width: calc(600 * var(--s));
}

/* ---------- withdraw + amounts ---------- */

.withdraw-ctx {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: calc(16 * var(--s)) auto 0;
}

.withdraw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18 * var(--s));
  width: calc(664 * var(--s));
  margin: 0 auto;
}

.withdraw-btn {
  position: relative;
  width: calc(180 * var(--s));
  height: calc(64 * var(--s));
  border-radius: calc(32 * var(--s));
  font-size: calc(26 * var(--s));
  font-weight: 800;
  color: #fffbe9;
  background: linear-gradient(180deg, #7ad06a 0%, #3fa63a 46%, #1f7a24 100%);
  border: calc(3 * var(--s)) solid #cdeeb0;
  box-shadow:
    0 calc(5 * var(--s)) calc(13 * var(--s)) rgba(0, 0, 0, .42),
    inset 0 calc(5 * var(--s)) calc(9 * var(--s)) rgba(255, 255, 255, .35);
  transition: transform .12s ease;
}

.withdraw-btn:active { transform: scale(.94); }

.amount-ctx {
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--s));
  margin: calc(9 * var(--s)) auto 0;
}

.amount-item {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
  width: calc(212 * var(--s));
  height: calc(62 * var(--s));
  padding-left: calc(15 * var(--s));
  border-radius: calc(16 * var(--s));
  border: calc(2.6 * var(--s)) solid rgba(246, 207, 122, .82);
  background: linear-gradient(180deg, rgba(20, 70, 42, .94), rgba(6, 30, 17, .95));
  box-shadow:
    inset 0 calc(3 * var(--s)) calc(10 * var(--s)) rgba(255, 220, 150, .14),
    0 calc(4 * var(--s)) calc(10 * var(--s)) rgba(0, 0, 0, .35);
}

.amount-item-icon {
  flex: 0 0 auto;
  width: calc(36 * var(--s));
  height: calc(36 * var(--s));
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3a1c02;
  background: linear-gradient(180deg, #ffe89b, #f2b23f);
  box-shadow: 0 0 calc(12 * var(--s)) rgba(255, 190, 80, .55);
}

.amount-item-icon svg { width: 62%; height: 62%; }

.amount-item-icon.pending { background: linear-gradient(180deg, #ffe0a8, #e79a2e); }
.amount-item-icon.withdrawn { background: linear-gradient(180deg, #d9f0c0, #7fbb62); }

.amount-item-text {
  font-size: calc(23 * var(--s));
  font-weight: 800;
  color: #fffdf4;
  white-space: nowrap;
  text-shadow: 0 calc(2 * var(--s)) calc(6 * var(--s)) rgba(0, 0, 0, .6);
}

/* ---------- board ---------- */

.title-mascot {
  position: relative;
  z-index: 3;
  width: calc(262 * var(--s));
  margin: calc(4 * var(--s)) auto calc(-44 * var(--s));
  filter: drop-shadow(0 calc(10 * var(--s)) calc(22 * var(--s)) rgba(0, 0, 0, .55));
  animation: mascotFloat 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-12 * var(--s))); }
}

.board {
  position: relative;
  width: 100%;
  margin-top: calc(6 * var(--s));
  z-index: 3;
}

.game-box {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, calc(166 * var(--s)));
  grid-template-rows: repeat(3, calc(228 * var(--s)));
  column-gap: calc(54 * var(--s));
  row-gap: calc(26 * var(--s));
  justify-content: center;
  margin: 0 auto;
  padding-top: calc(4 * var(--s));
}

.card {
  position: relative;
  width: calc(166 * var(--s));
  height: calc(228 * var(--s));
  perspective: calc(900 * var(--s));
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.34, 1.3, .5, 1);
}

.card.is-flipped .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  border-radius: calc(20 * var(--s));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 calc(6 * var(--s)) calc(15 * var(--s)) rgba(0, 0, 0, .5),
    0 0 0 calc(2.4 * var(--s)) rgba(255, 214, 140, .55);
}

.card-front {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: #0d3a22;
  transition: transform .14s ease, filter .14s ease;
}

.card:not(.is-flipped):active .card-front {
  transform: scale(.94);
  filter: brightness(.86);
}

.card-front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 44%, rgba(0, 0, 0, .22));
  pointer-events: none;
}

.card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 25.5%;
  display: grid;
  place-items: center;
  font-size: calc(24 * var(--s));
  font-weight: 900;
  letter-spacing: .01em;
  color: #ffeeb4;
  background: linear-gradient(180deg, #d2180c, #8d0602);
  border-top: calc(2.6 * var(--s)) solid rgba(255, 214, 140, .85);
  text-shadow: 0 calc(2.6 * var(--s)) 0 #5b0200;
}

.card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--s));
  padding: calc(10 * var(--s));
  text-align: center;
  background:
    radial-gradient(90% 62% at 50% 24%, #fffdf0 0%, #ffeab4 46%, #f6cf7a 100%);
  border: calc(3 * var(--s)) solid #e0a63c;
  box-shadow:
    inset 0 0 0 calc(5 * var(--s)) rgba(180, 108, 20, .18),
    inset 0 calc(-8 * var(--s)) calc(18 * var(--s)) rgba(200, 130, 30, .28),
    0 calc(8 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .4);
}

.card-back::before {
  content: "";
  position: absolute;
  inset: calc(11 * var(--s));
  border-radius: calc(11 * var(--s));
  border: calc(1.6 * var(--s)) dashed rgba(196, 126, 26, .45);
  pointer-events: none;
}

.card-back-kicker {
  position: relative;
  z-index: 1;
  font-size: calc(13 * var(--s));
  font-weight: 700;
  letter-spacing: .02em;
  color: #8a4a10;
  line-height: 1.15;
  text-shadow: 0 calc(1.5 * var(--s)) 0 rgba(255, 255, 255, .8);
}

.card-back-amount {
  position: relative;
  z-index: 1;
  font-size: calc(29 * var(--s));
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #fffbe0, #ffc94a 58%, #ff9c1f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(3 * var(--s)) 0 rgba(120, 40, 0, .8));
  word-break: break-all;
}

.card.is-flipped { cursor: default; }

/* ---------- notice bar ---------- */

.notice-ctx {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  width: calc(560 * var(--s));
  height: calc(40 * var(--s));
  margin: calc(18 * var(--s)) auto 0;
  padding: 0 calc(18 * var(--s));
  border-radius: calc(22 * var(--s));
  background: rgba(0, 0, 0, .44);
  border: calc(1.6 * var(--s)) solid rgba(255, 214, 140, .22);
  overflow: hidden;
}

.notice-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(32 * var(--s));
  height: calc(32 * var(--s));
  color: #ffe6a8;
  margin-right: calc(9 * var(--s));
}

.notice-icon svg { width: 100%; height: 100%; }

.notice-wrap {
  flex: 1;
  height: calc(32 * var(--s));
  overflow: hidden;
  position: relative;
}

.notice-track { transition: transform .45s ease; will-change: transform; }
.notice-track.no-anim { transition: none; }

.notice-item {
  height: calc(32 * var(--s));
  line-height: calc(32 * var(--s));
  font-size: calc(22 * var(--s));
  color: #feffbc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- prize pool ---------- */

.prize-pool {
  position: relative;
  z-index: 3;
  width: calc(750 * var(--s));
  max-width: 100%;
  height: calc(184 * var(--s));
  margin-top: calc(10 * var(--s));
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(6, 40, 22, .18), rgba(3, 22, 12, .9));
  border-top: calc(2 * var(--s)) solid rgba(246, 207, 122, .32);
}

.prize-pool-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 calc(20 * var(--s));
  gap: calc(18 * var(--s));
}

.fixed-prize,
.pool-img {
  display: grid;
  place-items: center;
  width: calc(110 * var(--s));
  height: calc(110 * var(--s));
  border-radius: calc(18 * var(--s));
  background: linear-gradient(0deg, #fff 1%, #ffe9ad);
  box-shadow: 0 calc(4 * var(--s)) calc(6 * var(--s)) rgba(255, 150, 87, .65);
  flex: 0 0 auto;
}

.fixed-prize img,
.pool-img img {
  width: calc(95 * var(--s));
  height: calc(95 * var(--s));
  object-fit: contain;
}

.pool-swiper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.pool-track {
  display: flex;
  width: 100%;
  transition: transform .34s ease;
  will-change: transform;
}

.pool-track.no-anim { transition: none; }

.pool-slide {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- turn chip ---------- */

.turn-chip {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: calc(9 * var(--s));
  padding: calc(9 * var(--s)) calc(18 * var(--s));
  border-radius: calc(30 * var(--s));
  border: calc(2.4 * var(--s)) solid rgba(255, 214, 140, .88);
  background: linear-gradient(180deg, #ff5c46, #c01208);
  box-shadow:
    0 calc(6 * var(--s)) calc(15 * var(--s)) rgba(0, 0, 0, .5),
    0 0 calc(22 * var(--s)) rgba(255, 120, 60, .45);
  animation: chipPulse 2.8s ease-in-out infinite;
}

@keyframes chipPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.turn-chip-label {
  font-size: calc(18 * var(--s));
  color: rgba(255, 240, 210, .84);
  font-weight: 600;
}

.turn-chip-count {
  min-width: calc(34 * var(--s));
  height: calc(34 * var(--s));
  padding: 0 calc(8 * var(--s));
  display: grid;
  place-items: center;
  border-radius: calc(18 * var(--s));
  background: #fff3cf;
  color: #b3120a;
  font-size: calc(22 * var(--s));
  font-weight: 900;
}

.turn-chip.empty { filter: grayscale(.5); opacity: .85; }

/* ---------- prize modal ---------- */

.tip-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tip-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(calc(5 * var(--s)));
  animation: fadeIn .25s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.tip-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(820 * var(--s));
  height: calc(820 * var(--s));
  margin: calc(-410 * var(--s)) 0 0 calc(-410 * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 150, .5) 0%, rgba(255, 180, 70, .2) 34%, transparent 68%);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

.light.burst {
  opacity: 1;
  transform: scale(1);
  animation: lightSpin 9s linear infinite;
}

.light.burst::before {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 226, 150, .3) 0 5deg, transparent 5deg 25deg,
    rgba(255, 226, 150, .3) 25deg 30deg, transparent 30deg 55deg,
    rgba(255, 226, 150, .3) 55deg 60deg, transparent 60deg 90deg,
    rgba(255, 226, 150, .3) 90deg 95deg, transparent 95deg 130deg,
    rgba(255, 226, 150, .3) 130deg 135deg, transparent 135deg 175deg,
    rgba(255, 226, 150, .3) 175deg 180deg, transparent 180deg 215deg,
    rgba(255, 226, 150, .3) 215deg 220deg, transparent 220deg 260deg,
    rgba(255, 226, 150, .3) 260deg 265deg, transparent 265deg 300deg,
    rgba(255, 226, 150, .3) 300deg 305deg, transparent 305deg 340deg,
    rgba(255, 226, 150, .3) 340deg 345deg, transparent 345deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  animation: lightSpin 14s linear infinite reverse;
}

@keyframes lightSpin { to { transform: rotate(360deg); } }

.card-box {
  position: relative;
  width: calc(554 * var(--s));
  height: calc(434 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: popIn .55s cubic-bezier(.34, 1.4, .6, 1) both;
}

@keyframes popIn {
  0% { opacity: 0; transform: translateY(calc(-260 * var(--s))) scale(.84); }
  60% { opacity: 1; transform: translateY(calc(14 * var(--s))) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

.card-box.closed .packet { animation: shakeBag .55s ease-in-out .25s 2; }
.card-box.closed .packet-card,
.card-box.closed .tip-title,
.card-box.closed .tip-amount,
.card-box.closed .packet-btn,
.card-box.closed .tip-text { opacity: 0; }
.card-box.closed .packet-top { transform: translateY(calc(40 * var(--s))); }

@keyframes shakeBag {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(3.2deg); }
  40% { transform: rotate(-3.2deg); }
  60% { transform: rotate(2deg); }
  80% { transform: rotate(-2deg); }
}

.tip-icon {
  position: absolute;
  left: 50%;
  top: calc(-232 * var(--s));
  width: calc(286 * var(--s));
  transform: translateX(-50%) translateY(calc(120 * var(--s))) scale(.6);
  opacity: 0;
  z-index: 5;
  filter: drop-shadow(0 calc(12 * var(--s)) calc(20 * var(--s)) rgba(0, 0, 0, .5));
  transition: all .6s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}

.card-box.opened .tip-icon {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: .06s;
}

.packet {
  position: relative;
  width: 100%;
  height: 100%;
}

/* red envelope lid */
.packet-top {
  position: absolute;
  left: calc(9 * var(--s));
  top: calc(106 * var(--s));
  width: calc(536 * var(--s));
  height: calc(288 * var(--s));
  z-index: 1;
  border-radius: calc(42 * var(--s)) calc(42 * var(--s)) 46% 46% / calc(42 * var(--s)) calc(42 * var(--s)) 32% 32%;
  background: linear-gradient(180deg, #ff6a52 0%, #ef2a17 34%, #cf1206 72%, #a30a03 100%);
  border: calc(5 * var(--s)) solid #f3c96e;
  box-shadow:
    inset 0 calc(9 * var(--s)) calc(18 * var(--s)) rgba(255, 255, 255, .32),
    inset 0 calc(-15 * var(--s)) calc(30 * var(--s)) rgba(0, 0, 0, .22),
    0 calc(8 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .35);
  transition: transform .55s cubic-bezier(.34, 1.3, .5, 1);
}

.packet-top::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: calc(26 * var(--s));
  height: calc(8 * var(--s));
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 190, .55), transparent);
}

/* red envelope body */
.packet-body {
  position: absolute;
  left: 0;
  top: calc(260 * var(--s));
  width: calc(554 * var(--s));
  height: calc(372 * var(--s));
  z-index: 3;
  border-radius: calc(38 * var(--s)) calc(38 * var(--s)) calc(52 * var(--s)) calc(52 * var(--s));
  background: linear-gradient(180deg, #ff5744 0%, #e01f12 30%, #c2130a 66%, #8f0803 100%);
  border: calc(5 * var(--s)) solid #f3c96e;
  box-shadow:
    inset 0 calc(12 * var(--s)) calc(22 * var(--s)) rgba(255, 255, 255, .24),
    inset 0 calc(-22 * var(--s)) calc(45 * var(--s)) rgba(0, 0, 0, .28),
    0 calc(12 * var(--s)) calc(30 * var(--s)) rgba(0, 0, 0, .45);
}

.packet-body::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(16 * var(--s));
  height: calc(9 * var(--s));
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 190, .5), transparent);
}

/* white card inside */
.packet-card {
  position: absolute;
  left: 50%;
  top: calc(160 * var(--s));
  transform: translateX(-50%);
  width: calc(478 * var(--s));
  height: calc(434 * var(--s));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: calc(34 * var(--s));
  background: radial-gradient(120% 80% at 50% 0%, #fffdf2 0%, #fdf3d9 46%, #f6e3bd 100%);
  border: calc(4 * var(--s)) solid #f0d9a6;
  box-shadow:
    inset 0 calc(-15 * var(--s)) calc(30 * var(--s)) rgba(200, 150, 90, .22),
    0 calc(8 * var(--s)) calc(15 * var(--s)) rgba(0, 0, 0, .2);
  opacity: 0;
  transition: all .55s cubic-bezier(.3, 1.25, .5, 1);
}

.card-box.opened .packet-card { opacity: 1; top: 0; }

.card-box.claimed { animation: boxOut .34s ease .1s forwards; }

@keyframes boxOut {
  to { opacity: 0; transform: scale(.9) translateY(calc(-14 * var(--s))); }
}

.tip-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(368 * var(--s));
  min-height: calc(64 * var(--s));
  margin-top: calc(26 * var(--s));
  padding: calc(6 * var(--s)) calc(14 * var(--s));
  font-size: calc(22 * var(--s));
  font-weight: 800;
  color: #b74e32;
  text-align: center;
  line-height: 1.15;
  border-radius: calc(12 * var(--s));
  background: linear-gradient(180deg, #ffe6a8, #f7c463);
  box-shadow: inset 0 calc(3 * var(--s)) calc(9 * var(--s)) rgba(255, 255, 255, .7);
  opacity: 0;
  transition: opacity .34s ease .16s;
  z-index: 1;
}

.tip-amount {
  margin-top: calc(18 * var(--s));
  font-size: calc(86 * var(--s));
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(0deg, #e6231f 0%, #fb4d26 62%, #ff7a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(4 * var(--s)) 0 rgba(255, 210, 150, .9));
  opacity: 0;
  transition: opacity .34s ease .16s;
}

.card-box.opened .tip-title,
.card-box.opened .tip-amount { opacity: 1; }

.tip-amount.fly { animation: amountFly .7s ease forwards; }

@keyframes amountFly {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(.5) translateY(calc(-160 * var(--s))); opacity: 0; }
}

/* round open button */
.packet-btn {
  position: absolute;
  left: 50%;
  top: calc(316 * var(--s));
  transform: translateX(-50%) scale(0);
  width: calc(156 * var(--s));
  height: calc(158 * var(--s));
  z-index: 4;
  opacity: 0;
  transition: all .42s cubic-bezier(.175, .885, .32, 1.275);
}

.card-box.opened .packet-btn {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition-delay: .18s;
}

.tip-btn {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(34 * var(--s));
  font-weight: 900;
  color: #fffbe8;
  letter-spacing: .01em;
  background: radial-gradient(circle at 34% 26%, #ff9a7a 0%, #ff4a30 26%, #e01c0e 58%, #a80c04 100%);
  border: calc(6 * var(--s)) solid #ffd97e;
  box-shadow:
    inset 0 calc(8 * var(--s)) calc(18 * var(--s)) rgba(255, 255, 255, .45),
    inset 0 calc(-15 * var(--s)) calc(22 * var(--s)) rgba(120, 0, 0, .45),
    0 0 calc(30 * var(--s)) rgba(255, 140, 60, .7),
    0 calc(9 * var(--s)) calc(20 * var(--s)) rgba(0, 0, 0, .45);
  text-shadow: 0 calc(3 * var(--s)) calc(6 * var(--s)) rgba(90, 0, 0, .8);
  transition: transform .12s ease;
}

.tip-btn::after {
  content: "";
  position: absolute;
  inset: calc(-4 * var(--s));
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 170, 70, .65);
  animation: btnGlow 1.7s ease-out infinite;
}

@keyframes btnGlow {
  0% { box-shadow: 0 0 0 0 rgba(255, 170, 70, .6); }
  70% { box-shadow: 0 0 0 calc(26 * var(--s)) rgba(255, 170, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 170, 70, 0); }
}

.tip-btn:active { transform: scale(.92); }

.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(156 * var(--s));
  height: calc(156 * var(--s));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: calc(4 * var(--s)) solid rgba(255, 220, 150, .8);
  opacity: 0;
  z-index: 1;
  animation: rippleOut 1.8s linear infinite;
}

.ripple.r2 { animation-delay: .6s; }

@keyframes rippleOut {
  0% { width: calc(156 * var(--s)); height: calc(156 * var(--s)); opacity: .9; }
  100% { width: calc(345 * var(--s)); height: calc(345 * var(--s)); opacity: 0; }
}

.hand {
  position: absolute;
  right: calc(-68 * var(--s));
  top: calc(82 * var(--s));
  width: calc(112 * var(--s));
  z-index: 5;
  filter: drop-shadow(0 calc(6 * var(--s)) calc(12 * var(--s)) rgba(0, 0, 0, .4));
  animation: handTap 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes handTap {
  0%, 100% { transform: rotate(-22deg) translate(0, 0) scale(1); }
  50% { transform: rotate(-15deg) translate(calc(-8 * var(--s)), calc(-8 * var(--s))) scale(1.07); }
}

.tip-text {
  position: absolute;
  left: 50%;
  top: calc(522 * var(--s));
  transform: translateX(-50%);
  width: calc(380 * var(--s));
  z-index: 4;
  text-align: center;
  font-size: calc(23 * var(--s));
  line-height: 1.35;
  color: #fff6e4;
  text-shadow: 0 calc(3 * var(--s)) calc(8 * var(--s)) rgba(80, 0, 0, .6);
  opacity: 0;
  transition: opacity .34s ease .2s;
}

.card-box.opened .tip-text { opacity: 1; }

.card-box.claimed .packet-btn { animation: claimPop .5s ease forwards; }

@keyframes claimPop {
  to { transform: translateX(-50%) scale(.6); opacity: 0; }
}

/* ---------- notice modal ---------- */

.tip-modal.small { z-index: 1001; }

.notice-modal {
  position: relative;
  z-index: 2;
  width: calc(600 * var(--s));
  padding: calc(200 * var(--s)) calc(40 * var(--s)) calc(36 * var(--s));
  border-radius: calc(48 * var(--s));
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 220, 140, .22), transparent 60%),
    linear-gradient(180deg, #12502f, #082c1a);
  border: calc(4 * var(--s)) solid rgba(246, 207, 122, .8);
  box-shadow: 0 calc(14 * var(--s)) calc(40 * var(--s)) rgba(0, 0, 0, .55);
  animation: popIn .45s cubic-bezier(.34, 1.4, .6, 1) both;
}

.notice-modal-glow {
  position: absolute;
  left: 50%;
  top: calc(-40 * var(--s));
  width: calc(420 * var(--s));
  height: calc(420 * var(--s));
  margin-left: calc(-210 * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 150, .38), transparent 66%);
  pointer-events: none;
}

.notice-modal-icon {
  position: absolute;
  left: 50%;
  top: calc(-130 * var(--s));
  width: calc(340 * var(--s));
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(10 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .5));
}

.notice-modal h3 {
  position: relative;
  margin: 0 0 calc(14 * var(--s));
  font-size: calc(40 * var(--s));
  font-weight: 900;
  color: #ffe9b6;
}

.notice-modal p {
  position: relative;
  margin: 0 auto calc(34 * var(--s));
  max-width: calc(460 * var(--s));
  font-size: calc(24 * var(--s));
  line-height: 1.52;
  color: rgba(255, 246, 226, .8);
}

.primary-btn {
  position: relative;
  display: block;
  width: 100%;
  height: calc(88 * var(--s));
  border-radius: calc(44 * var(--s));
  font-size: calc(28 * var(--s));
  font-weight: 800;
  color: #fff8e6;
  background: linear-gradient(180deg, #ff7a3f, #e0291a 62%, #a80d04);
  border: calc(4 * var(--s)) solid rgba(255, 214, 140, .85);
  box-shadow:
    0 calc(8 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .4),
    inset 0 calc(5 * var(--s)) calc(11 * var(--s)) rgba(255, 255, 255, .3);
  transition: transform .12s ease, filter .2s ease;
}

.primary-btn:active { transform: scale(.97); }
.primary-btn.is-dim { filter: saturate(.55) brightness(.85); }

.ghost-btn {
  display: block;
  width: 100%;
  margin-top: calc(16 * var(--s));
  height: calc(70 * var(--s));
  border-radius: calc(35 * var(--s));
  font-size: calc(24 * var(--s));
  font-weight: 700;
  color: rgba(255, 246, 226, .72);
  border: calc(2.4 * var(--s)) solid rgba(255, 214, 140, .35);
}

/* ---------- toast ---------- */

.toast-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(200 * var(--s) + var(--safe-bottom));
  z-index: 1200;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 calc(40 * var(--s));
}

.toast {
  max-width: 100%;
  padding: calc(18 * var(--s)) calc(30 * var(--s));
  border-radius: calc(30 * var(--s));
  font-size: calc(23 * var(--s));
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #fff8e6;
  background: rgba(8, 30, 18, .94);
  border: calc(1.8 * var(--s)) solid rgba(246, 207, 122, .55);
  box-shadow: 0 calc(8 * var(--s)) calc(22 * var(--s)) rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(calc(14 * var(--s))) scale(.96);
  transition: opacity .22s ease, transform .22s ease;
}

.toast.in { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- language sheet ---------- */

.sheet-root {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-root[hidden] { display: none; }

.sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  transition: opacity .24s ease;
}

.sheet {
  position: relative;
  width: calc(750 * var(--s));
  max-width: 100%;
  padding: calc(22 * var(--s)) calc(30 * var(--s)) calc(40 * var(--s) + var(--safe-bottom));
  border-radius: calc(50 * var(--s)) calc(50 * var(--s)) 0 0;
  background: linear-gradient(180deg, #0f4a2c, #06210f);
  border-top: calc(3 * var(--s)) solid rgba(246, 207, 122, .55);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.3, 1, .5, 1);
}

.sheet-root.open .sheet-mask { opacity: 1; }
.sheet-root.open .sheet { transform: translateY(0); }

.sheet-grab {
  width: calc(120 * var(--s));
  height: calc(6 * var(--s));
  border-radius: 99px;
  background: rgba(255, 240, 210, .3);
  margin: 0 auto calc(22 * var(--s));
}

.sheet h3 {
  margin: 0 0 calc(20 * var(--s));
  font-size: calc(28 * var(--s));
  font-weight: 800;
  color: #ffe9b6;
  text-align: center;
}

.lang-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 * var(--s));
}

.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(76 * var(--s));
  padding: 0 calc(24 * var(--s));
  border-radius: calc(22 * var(--s));
  font-size: calc(25 * var(--s));
  font-weight: 700;
  color: rgba(255, 246, 226, .88);
  background: rgba(255, 255, 255, .06);
  border: calc(1.8 * var(--s)) solid rgba(246, 207, 122, .28);
}

.lang-item.is-on {
  color: #2b1206;
  background: linear-gradient(180deg, #ffe6a8, #f2b23f);
  border-color: #fff0c0;
}

.lang-code { font-size: calc(18 * var(--s)); opacity: .7; letter-spacing: .08em; }

/* ---------- win banner + coins ---------- */

.win-banner {
  position: fixed;
  left: 50%;
  top: 38%;
  z-index: 1400;
  transform: translate(-50%, -50%) scale(.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--s));
  padding: calc(30 * var(--s)) calc(76 * var(--s));
  border-radius: calc(36 * var(--s));
  background: linear-gradient(180deg, rgba(30, 96, 58, .98), rgba(8, 38, 22, .99));
  border: calc(3 * var(--s)) solid rgba(255, 214, 140, .85);
  box-shadow: 0 0 calc(60 * var(--s)) rgba(255, 170, 60, .5);
  animation: winPop .42s cubic-bezier(.34, 1.5, .6, 1) forwards;
  pointer-events: none;
  opacity: 0;
}

.win-banner.out { animation: winOut .5s ease forwards; }

@keyframes winPop { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes winOut { to { transform: translate(-50%, -50%) scale(1.08); opacity: 0; } }

.win-kicker {
  font-size: calc(21 * var(--s));
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 246, 226, .86);
}

.win-amount {
  font-size: calc(68 * var(--s));
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, #fffbe0, #ffc94a 55%, #ff9c1f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(4 * var(--s)) 0 rgba(120, 40, 0, .9));
}

.flying-coin {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(60 * var(--s));
  height: calc(60 * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff6c8, #ffc83d 45%, #d98a12 100%);
  box-shadow: 0 0 calc(15 * var(--s)) rgba(255, 200, 80, .8);
  z-index: 1350;
  pointer-events: none;
  opacity: 0;
  animation: coinFly 1.1s cubic-bezier(.25, .46, .45, .94) forwards;
}

@keyframes coinFly {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.4); }
  12% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1.15); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(.5); }
}

/* ---------- sub pages ---------- */

.subpage {
  padding: 0 calc(38 * var(--s)) calc(70 * var(--s) + var(--safe-bottom));
  animation: pageIn .3s ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(calc(20 * var(--s))); }
  to { opacity: 1; transform: none; }
}

.subpage-head {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--s));
  padding: calc(14 * var(--s)) 0 calc(28 * var(--s));
}

.back-btn {
  flex: 0 0 auto;
  width: calc(76 * var(--s));
  height: calc(76 * var(--s));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffe9b6;
  background: rgba(255, 255, 255, .08);
  border: calc(2.2 * var(--s)) solid rgba(246, 207, 122, .45);
}

.back-btn svg { width: 56%; height: 56%; }

.subpage-head h2 {
  margin: 0;
  font-size: calc(38 * var(--s));
  font-weight: 900;
  color: #ffe9b6;
  letter-spacing: .01em;
}

.subpage-head p {
  margin: calc(5 * var(--s)) 0 0;
  font-size: calc(21 * var(--s));
  color: rgba(255, 246, 226, .62);
  line-height: 1.35;
}

.rule-list { display: flex; flex-direction: column; gap: calc(20 * var(--s)); }

.rule-card {
  padding: calc(28 * var(--s)) calc(30 * var(--s));
  border-radius: calc(28 * var(--s));
  background: linear-gradient(180deg, rgba(18, 70, 42, .82), rgba(6, 30, 17, .88));
  border: calc(1.8 * var(--s)) solid rgba(246, 207, 122, .3);
  box-shadow: 0 calc(5 * var(--s)) calc(12 * var(--s)) rgba(0, 0, 0, .28);
}

.rule-card h3 {
  margin: 0 0 calc(11 * var(--s));
  font-size: calc(27 * var(--s));
  font-weight: 800;
  color: #ffe9b6;
}

.rule-card p {
  margin: 0;
  font-size: calc(23 * var(--s));
  line-height: 1.62;
  color: rgba(255, 246, 226, .78);
}

.subpage-foot {
  margin: calc(44 * var(--s)) 0 0;
  text-align: center;
  font-size: calc(19 * var(--s));
  line-height: 1.5;
  color: rgba(255, 246, 226, .42);
}

/* wallet */

.balance-card {
  position: relative;
  overflow: hidden;
  padding: calc(34 * var(--s)) calc(38 * var(--s));
  border-radius: calc(34 * var(--s));
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 220, 140, .22), transparent 60%),
    linear-gradient(180deg, #145636, #082c1a);
  border: calc(3 * var(--s)) solid rgba(246, 207, 122, .55);
  box-shadow: 0 calc(9 * var(--s)) calc(22 * var(--s)) rgba(0, 0, 0, .4);
}

.balance-label {
  display: block;
  font-size: calc(22 * var(--s));
  color: rgba(255, 246, 226, .66);
  margin-bottom: calc(9 * var(--s));
}

.balance-value {
  display: block;
  font-size: calc(72 * var(--s));
  font-weight: 900;
  line-height: 1.06;
  background: linear-gradient(180deg, #fffbe0, #ffc94a 58%, #ff9c1f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(4 * var(--s)) 0 rgba(120, 40, 0, .8));
  margin-bottom: calc(26 * var(--s));
}

.balance-split {
  display: flex;
  gap: calc(60 * var(--s));
  padding-top: calc(22 * var(--s));
  border-top: calc(1.6 * var(--s)) solid rgba(246, 207, 122, .25);
}

.balance-split small {
  display: block;
  font-size: calc(19 * var(--s));
  color: rgba(255, 246, 226, .58);
  margin-bottom: calc(5 * var(--s));
}

.balance-split b {
  font-size: calc(28 * var(--s));
  font-weight: 800;
  color: #fff6de;
}

.panel {
  margin-top: calc(30 * var(--s));
  padding: calc(30 * var(--s));
  border-radius: calc(30 * var(--s));
  background: rgba(10, 42, 25, .8);
  border: calc(1.8 * var(--s)) solid rgba(246, 207, 122, .28);
}

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(22 * var(--s));
  color: rgba(255, 246, 226, .72);
  padding-bottom: calc(22 * var(--s));
  border-bottom: calc(1.6 * var(--s)) solid rgba(255, 255, 255, .08);
}

.panel-row b { color: #ffe9b6; font-weight: 800; }

.field-label {
  display: block;
  margin: calc(24 * var(--s)) 0 calc(12 * var(--s));
  font-size: calc(21 * var(--s));
  font-weight: 700;
  color: rgba(255, 246, 226, .68);
}

.methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(13 * var(--s));
}

.method {
  min-height: calc(70 * var(--s));
  border-radius: calc(20 * var(--s));
  font-size: calc(20 * var(--s));
  font-weight: 700;
  line-height: 1.25;
  padding: calc(8 * var(--s)) calc(10 * var(--s));
  color: rgba(255, 246, 226, .78);
  background: rgba(255, 255, 255, .06);
  border: calc(1.8 * var(--s)) solid rgba(255, 255, 255, .12);
}

.method.is-on {
  color: #2b1206;
  background: linear-gradient(180deg, #ffe6a8, #f2b23f);
  border-color: #fff0c0;
  box-shadow: 0 calc(4 * var(--s)) calc(11 * var(--s)) rgba(255, 180, 70, .4);
}

.field {
  width: 100%;
  height: calc(82 * var(--s));
  padding: 0 calc(26 * var(--s));
  border-radius: calc(22 * var(--s));
  font-size: calc(24 * var(--s));
  color: #fff8e6;
  background: rgba(0, 0, 0, .34);
  border: calc(2.2 * var(--s)) solid rgba(246, 207, 122, .38);
  outline: none;
}

.field::placeholder { color: rgba(255, 246, 226, .32); }
.field:focus { border-color: rgba(255, 214, 140, .9); box-shadow: 0 0 calc(18 * var(--s)) rgba(255, 190, 80, .35); }

.panel .primary-btn { margin-top: calc(30 * var(--s)); }

.hint {
  margin: calc(14 * var(--s)) 0 0;
  font-size: calc(19 * var(--s));
  line-height: 1.5;
  color: rgba(255, 246, 226, .5);
  text-align: center;
}

.rec-title {
  margin: calc(44 * var(--s)) 0 calc(18 * var(--s));
  font-size: calc(28 * var(--s));
  font-weight: 800;
  color: #ffe9b6;
}

.rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--s));
}

.rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14 * var(--s));
  padding: calc(20 * var(--s)) calc(24 * var(--s));
  border-radius: calc(22 * var(--s));
  background: rgba(255, 255, 255, .05);
  border: calc(1.6 * var(--s)) solid rgba(255, 255, 255, .07);
}

.rec-left { display: flex; align-items: center; gap: calc(16 * var(--s)); min-width: 0; }

.rec-dot {
  width: calc(14 * var(--s));
  height: calc(14 * var(--s));
  border-radius: 50%;
  flex: 0 0 auto;
}

.rec-dot.win { background: #7ddc7a; box-shadow: 0 0 calc(12 * var(--s)) rgba(125, 220, 122, .8); }
.rec-dot.out { background: #ffb14a; box-shadow: 0 0 calc(12 * var(--s)) rgba(255, 177, 74, .8); }

.rec-left b { display: block; font-size: calc(23 * var(--s)); font-weight: 700; color: #fff6de; }
.rec-left small { display: block; font-size: calc(17 * var(--s)); color: rgba(255, 246, 226, .45); margin-top: calc(3 * var(--s)); }

.rec-right { text-align: right; flex: 0 0 auto; }
.rec-right b { font-size: calc(26 * var(--s)); font-weight: 900; }
.rec-right b.plus { color: #8ce38a; }
.rec-right b.minus { color: #ffc16b; }

.rec-status {
  display: inline-block;
  margin-top: calc(5 * var(--s));
  font-size: calc(17 * var(--s));
  padding: calc(2 * var(--s)) calc(9 * var(--s));
  border-radius: calc(12 * var(--s));
}

.rec-status.pending { color: #ffd88a; background: rgba(255, 190, 80, .16); }
.rec-status.paid { color: #9ce59a; background: rgba(120, 220, 120, .16); }

.rec-empty {
  padding: calc(46 * var(--s)) 0;
  text-align: center;
  font-size: calc(22 * var(--s));
  color: rgba(255, 246, 226, .42);
}

/* ---------- boot error ---------- */

.boot-error {
  padding: calc(220 * var(--s)) calc(60 * var(--s));
  text-align: center;
}

.boot-error h2 { font-size: calc(46 * var(--s)); color: #ffe9b6; }
.boot-error p { font-size: calc(24 * var(--s)); color: rgba(255, 246, 226, .7); line-height: 1.6; }

/* ---------- wide screens ---------- */

@media (min-width: 561px) {
  body {
    background:
      radial-gradient(80% 60% at 50% 0%, #0e3d26, #041a0e 70%),
      #041a0e;
  }

  .app {
    box-shadow: 0 0 80px rgba(0, 0, 0, .6);
    min-height: 100vh;
  }

  .bg-layer { box-shadow: 0 0 60px rgba(0, 0, 0, .5); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}