/* ═══════════════════════════════════════════════════════════════════
   Rumble Brawl Shop — Telegram Mini App

   Monochrome: black chrome (header + tab bar + buttons) on a white page,
   colour only where the goods themselves are. The gem artwork ships as
   cut-out PNGs with a real alpha channel, so it sits directly on white —
   no blend modes, no dark tiles.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:    #0B0B0C;   /* text + all black chrome */
  --bg:     #FFFFFF;
  --card:   #FFFFFF;
  --line:   #E4E6EA;
  --line-2: #EFF1F3;
  --muted:  #6B7280;
  --accent: #22C55E;   /* active tab + confirmations only */
  --danger: #DC2626;

  --r-lg: 18px;
  --r-md: 13px;

  --tabbar: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

button{ font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img{ max-width: 100%; display: block; }

/* ═══════════════════ HEADER ═══════════════════ */

.topbar{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(11px + env(safe-area-inset-top)) 16px 11px;
  background: var(--ink);
}

.brand{ display: flex; align-items: center; gap: 9px; min-width: 0; }
.mark{ width: 27px; height: 27px; flex: none; }

/* Plain white type, no italic and no background-clip: the clipped descender on
   the last letter came from clipping a gradient to slanted glyphs. */
.word{
  color: #fff; font-weight: 900; font-size: 19px;
  letter-spacing: .2px; white-space: nowrap;
}
.word em{ font-style: normal; margin-left: 6px; }

.langs{
  display: flex; margin-left: auto; flex: none; gap: 6px;
}
.lang{
  padding: 5px 13px; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.45);
  font-size: 12.5px; font-weight: 800; letter-spacing: .5px; color: #fff;
  transition: background .15s, color .15s, border-color .15s;
}
.lang.is-on{ background: #fff; color: var(--ink); border-color: #fff; }

/* ═══════════════════ LAYOUT ═══════════════════ */

#main{
  padding: 16px 16px calc(var(--tabbar) + 26px + env(safe-area-inset-bottom));
  max-width: 620px; margin: 0 auto;
}

.view{ display: none; animation: rise .24s ease both; }
.view.is-on{ display: block; }
@keyframes rise{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }

.section{
  margin: 22px 0 12px; font-size: 32px; font-weight: 900;
  letter-spacing: -1.1px; line-height: 1.08;
}
.section:first-of-type{ margin-top: 4px; }

.lead{ margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }

.fineprint{
  margin: 22px 2px 0; color: #9AA1AB; font-size: 11.5px; line-height: 1.5; text-align: center;
}

/* ═══════════════════ PREMIUM CARD ═══════════════════ */

.premium{
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11,11,12,.05);
}
.premium .chip{
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 7px;
  background: var(--ink); color: #fff;
  font-size: 11.5px; font-weight: 800;
}
.premium h3{
  margin: 11px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.7px;
}
.premium p{ margin: 0 0 14px; color: var(--muted); font-size: 14px; }

/* ═══════════════════ GEM GRID ═══════════════════ */

.grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Very narrow phones (and Telegram's compact sheet) cannot fit two cards without the
   title and the price colliding - one column below 360px. */
@media (max-width: 359px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  position: relative; display: flex; flex-direction: column;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(11,11,12,.05);
  transition: transform .12s ease;
}
.card:active{ transform: scale(.985); }

/* Artwork box.
   WAS: a hard `height: 92px` with only `max-height` on the image - no max-width, no
   object-fit, no overflow guard. On narrow phones the image kept its intrinsic width,
   grew past the 92px box and rendered over the title underneath it (the "text sits in
   the picture" report). On a desktop-width viewport the card was wide enough that it
   never showed.
   NOW: the box scales with the viewport, the image is contained in BOTH axes, and
   overflow can never reach the title. */
/* Height is now a MINIMUM, not a cap: the two Brawl Pass images are square (420x420)
   while the gem art is wide, and a hard height cropped the square ones. The box grows
   with its content instead, so nothing is cut off on any card. */
.art{
  min-height: clamp(72px, 24vw, 104px);
  margin: 2px 0 8px;
  display: grid; place-items: center;
}
.art img{
  max-height: 100%; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

/* z-index/position: the title always paints above the artwork box, whatever a future
   image does. */
.amount{
  position: relative; z-index: 1;
  font-size: clamp(17px, 5vw, 22px); font-weight: 800;
  letter-spacing: -.6px; line-height: 1.15;
  overflow-wrap: anywhere;
}
.incl{ margin: 5px 0 10px; color: var(--muted); font-size: 12.5px; flex: 1 0 auto; }

.badge{
  position: absolute; top: 11px; right: 11px; z-index: 2;
  padding: 3px 8px; border-radius: 6px;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 800;
}

.price{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.eur{ font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.str{ font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ═══════════════════ BUTTONS ═══════════════════ */

.btn{
  width: 100%; padding: 12px 14px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, opacity .15s;
}
.btn:active{ transform: scale(.97); }
.btn[disabled]{ opacity: .35; pointer-events: none; }

.btn-buy, .btn-gold{ background: var(--ink); color: #fff; }
.btn-ghost{ background: #fff; border: 1px solid var(--line); color: var(--ink); }

/* ═══════════════════ TAB BAR ═══════════════════ */

.tabbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--ink);
}
.tab{
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 4px;
  color: rgba(255,255,255,.72); font-size: 11px; font-weight: 600;
  transition: color .16s ease;
}
.tab svg{
  width: 22px; height: 22px; fill: none;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab.is-on{ color: var(--accent); font-weight: 700; }
.tab .dot{
  position: absolute; top: 3px; right: 50%; margin-right: -18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--ink);
}

/* ═══════════════════ SHEET ═══════════════════ */

.scrim{
  position: fixed; inset: 0; z-index: 50;
  background: rgba(11,11,12,.42);
  animation: fade .2s ease both;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }

.sheet{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: 92dvh; display: flex; flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px -14px rgba(11,11,12,.35);
  animation: slide .28s cubic-bezier(.22,1,.36,1) both;
}
/* display:flex above outweighs the UA rule for [hidden], so the sheet needs its
   own hide rule — without it the purchase sheet is permanently on screen. */
.sheet[hidden]{ display: none; }
@keyframes slide{ from{ transform: translateY(100%);} to{ transform:none; } }

.sheet-grip{
  width: 38px; height: 4px; border-radius: 99px; background: #D7DBE0;
  margin: 9px auto 2px; flex: none;
}

.sheet-head{ display: flex; align-items: center; gap: 8px; padding: 6px 14px 2px; flex: none; }
.sheet-title{ flex: 1; font-size: 17px; font-weight: 800; letter-spacing: -.3px; text-align: center; }
.sheet-back, .sheet-close{
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: #F2F4F6;
}
.sheet-back[hidden]{ display: none; }
.sheet-back svg, .sheet-close svg{
  width: 17px; height: 17px; fill: none; stroke: var(--ink);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.steps{ display: flex; gap: 5px; justify-content: center; padding: 10px 0 4px; flex: none; }
.step{ width: 26px; height: 3px; border-radius: 99px; background: #E4E6EA; transition: background .2s; }
.step.is-on{ background: var(--ink); }

.sheet-body{
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  min-height: 0;   /* a flex item defaults to min-height:auto and would refuse to shrink */
}

/* ---- sheet content pieces ---- */

.sb-summary{
  display: flex; align-items: center; gap: 11px;
  padding: 10px; margin-bottom: 16px;
  background: #F7F8F9; border-radius: var(--r-md);
}
.sb-summary .thumb{
  width: 48px; height: 48px; flex: none; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden; font-size: 20px;
}
.sb-summary .thumb img{ max-height: 100%; width: auto; }
.sb-summary b{ display: block; font-size: 14.5px; font-weight: 800; }
.sb-summary span{ font-size: 12px; color: var(--muted); }
.sb-summary .tally{ margin-left: auto; text-align: right; flex: none; }
.sb-summary .tally b{ font-size: 15px; }

.sb-label{ font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.sb-help{ margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.field{
  width: 100%; padding: 13px 14px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  font-size: 16px; font-weight: 700; letter-spacing: .5px; outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.field::placeholder{ color: #AEB4BC; font-weight: 500; letter-spacing: 0; }
.field:focus{ border-color: var(--ink); }
.field.bad{ border-color: var(--danger); }

.note{ margin: 8px 0 0; font-size: 12.5px; min-height: 18px; }
.note.ok{ color: var(--accent); }
.note.bad{ color: var(--danger); }
.note.busy{ color: var(--muted); }

.found{
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 11px 12px; border-radius: 10px;
  background: #F1FAF3; border: 1px solid #C6EBD1;
}
.found .tick{
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.found b{ font-size: 14px; }
.found span{ display: block; font-size: 11.5px; color: var(--muted); }

.pay{
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; margin-bottom: 9px; border-radius: var(--r-md);
  background: #fff; border: 1.5px solid var(--line);
  transition: border-color .16s, transform .12s;
}
.pay:active{ transform: scale(.985); }
.pay .ico{ font-size: 21px; width: 26px; text-align: center; flex: none; }
/* Real brand artwork instead of an emoji. Same 26px column as .ico so the label column
   below it does not shift between the two kinds of row. */
.pay .ico-img{ width: 26px; height: 26px; flex: none; border-radius: 6px; object-fit: cover; }
.pay b{ display: block; font-size: 14.5px; font-weight: 800; }
.pay span{ font-size: 11.5px; color: var(--muted); }
.pay .go{ margin-left: auto; color: #C2C7CE; font-size: 19px; flex: none; }
.pay.is-on{ border-color: var(--ink); }

/* Recommended payment method. PayPal is listed first and marked up so it reads as the
   default choice; the Stars row states its 20% surcharge next to the price, so the
   nudge is an honest one rather than a hidden default. */
.pay-best{
  border-color: #17A34A;
  box-shadow: 0 0 0 3px rgba(23,163,74,.10);
}
.pay-tag{
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  padding: 2px 6px; border-radius: 5px;
  background: #17A34A; color: #fff;
  font-size: 9.5px; font-weight: 800; font-style: normal; letter-spacing: .3px;
}

.steps-list{ margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
.steps-list li{
  position: relative; padding: 0 0 14px 30px; counter-increment: s;
  font-size: 13.5px; line-height: 1.5;
}
.steps-list li::before{
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.steps-list li:not(:last-child)::after{
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 4px; width: 1px;
  background: var(--line);
}

.copy{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; margin: 6px 0 2px; border-radius: 10px;
  background: #F7F8F9; border: 1px dashed #CBD0D6; text-align: left;
}
.copy code{
  flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--ink); word-break: break-all; line-height: 1.4;
}
.copy .cp{ flex: none; font-size: 11px; font-weight: 800; color: var(--muted); }

.result-ico{
  width: 60px; height: 60px; margin: 6px auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px; background: #F1FAF3;
}
.result-ico.wait{ background: #FFF7E6; }
.result-h{ text-align: center; font-size: 21px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 8px; }
.result-p{ text-align: center; color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }

/* ═══════════════════ RECEIPTS ═══════════════════ */

.receipt{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.receipt .thumb{
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; overflow: hidden; font-size: 18px;
}
.receipt .thumb img{ max-height: 100%; width: auto; }
.receipt .txt{ min-width: 0; flex: 1; }
.receipt b{ display: block; font-size: 14px; font-weight: 800; }
.receipt span{ font-size: 11.5px; color: var(--muted); }
.receipt .rside{ margin-left: auto; text-align: right; flex: none; }

.pill{
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
}
.pill.done{ background: #E8F7ED; color: #15803D; }
.pill.wait{ background: #FFF4E0; color: #B45309; }
.pill.no  { background: #FDECEC; color: var(--danger); }

.empty{
  padding: 40px 20px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.empty .big{ font-size: 32px; margin-bottom: 8px; }

/* ═══════════════════ MISC ═══════════════════ */

.toast{
  position: fixed; left: 50%; bottom: calc(var(--tabbar) + 22px); z-index: 90;
  transform: translateX(-50%);
  padding: 9px 16px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  animation: pop .2s ease both;
}
@keyframes pop{ from{ opacity:0; transform: translate(-50%, 8px);} to{ opacity:1; transform: translate(-50%,0);} }

.skeleton{
  height: 170px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, #F2F4F6 30%, #E9ECEF 50%, #F2F4F6 70%);
  background-size: 220% 100%;
  animation: shine 1.3s linear infinite;
}
@keyframes shine{ to{ background-position: -120% 0; } }

.gate{ padding: 60px 26px; text-align: center; }
.gate .big{ font-size: 40px; margin-bottom: 12px; }
.gate h1{ font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.gate p{ color: var(--muted); font-size: 14px; margin: 0; }

@media (min-width: 480px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
  .section{ font-size: 36px; }
}