/* BetRepublic mini · 14-en - one slim phone-width column, app-style menu rows, sticky bottom join dock */
:root {
  --bg: #070e1b;
  --col: #0f1a2e;
  --row: #15233d;
  --row-hover: #1b2d4d;
  --hair: #24375a;
  --amber: #ffd02e;
  --amber-lo: #e2ac06;
  --peri: #8aaee8;
  --muted: #94a5c4;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(500px 300px at 50% 0, #142546, transparent 70%), var(--bg);
  color: #e5ebf6; font: 400 15px/1.5 "Nunito Sans", system-ui, sans-serif;
}
.phone {
  position: relative; width: 100%; max-width: 390px; min-height: 100vh; margin: 0 auto;
  background: var(--col); border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
}

.appbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(15, 26, 46, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--hair); }
.appbar-logo { font: 900 22px/1 Urbanist, sans-serif; letter-spacing: -.02em; color: #fff; text-decoration: none; }
.appbar-logo .y { color: var(--amber); }
.appbar-login { padding: 8px 14px; border-radius: 20px; text-decoration: none; text-transform: uppercase; font: 800 12px/1 Urbanist, sans-serif; letter-spacing: .06em; color: #0c1830; background: var(--peri); }

.mode { display: flex; margin: 12px 14px 0; padding: 3px; background: #0a1324; border: 1px solid var(--hair); border-radius: 10px; }
.mode span { flex: 1; text-align: center; padding: 7px 0; border-radius: 7px; font: 800 12.5px/1 Urbanist, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.mode .mode-on { background: var(--row-hover); color: #fff; box-shadow: inset 0 0 0 1px #33507e; }

.tile { position: relative; margin: 12px 14px 0; height: 170px; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); }
.tile-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-copy { position: relative; z-index: 1; height: 100%; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, rgba(10, 18, 34, .85), rgba(10, 18, 34, .1) 75%); }
.tile-kick { margin: 0; font: 700 12px/1 Urbanist, sans-serif; color: var(--amber); text-transform: uppercase; letter-spacing: .1em; }
.tile h1 { margin: 6px 0 0; font: 800 24px/1.12 Urbanist, sans-serif; color: #fff; }
.tile h1 b { color: var(--amber); font-weight: 900; }
.tile-sub { margin: 5px 0 0; font-size: 12px; color: #c0cbe0; }

.intro { margin: 12px 16px 0; font-size: 13.5px; color: #bac6dc; }
.intro a { color: var(--amber); font-weight: 700; }

.menu { list-style: none; margin: 12px 14px 0; padding: 0; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.menu li + li { border-top: 1px solid var(--hair); }
.menu a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--row); color: #e5ebf6; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.menu a::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); flex: none; }
.menu a:hover { background: var(--row-hover); }
.menu svg { width: 20px; height: 20px; fill: none; stroke: var(--peri); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.menu em { margin: 0 10px 0 auto; padding: 3px 7px; border-radius: 4px; font: 800 11px/1 Urbanist, sans-serif; font-style: normal; color: #0f1a2e; background: var(--amber); }

.cashier { margin: 14px 14px 0; padding: 12px 14px; background: #0b1527; border: 1px solid var(--hair); border-radius: 12px; }
.cashier h2 { margin: 0 0 6px; font: 800 13px/1 Urbanist, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--peri); }
.cashier dl { margin: 0; }
.cashier div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.cashier div + div { border-top: 1px dashed var(--hair); }
.cashier dt { color: var(--muted); }
.cashier dd { margin: 0; font-weight: 700; color: #fff; white-space: nowrap; }

.small { padding: 16px 16px 22px; text-align: center; font-size: 11.5px; line-height: 1.65; color: #75869f; }
.small a { color: #a9badb; }

.dock {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(15, 26, 46, .9), #0c1628); backdrop-filter: blur(6px);
  border-top: 1px solid #33507e; box-shadow: 0 -10px 24px rgba(0, 0, 0, .4);
}
.dock-offer { display: flex; flex-direction: column; min-width: 0; }
.dock-offer b { font: 900 17px/1.1 Urbanist, sans-serif; color: var(--amber); white-space: nowrap; }
.dock-offer span { font-size: 12px; color: var(--muted); }
.dock-btn {
  margin-left: auto; padding: 13px 22px; border-radius: 10px; flex: none;
  text-decoration: none; text-transform: uppercase; font: 900 15px/1 Urbanist, sans-serif; letter-spacing: .05em; color: #171100;
  background: linear-gradient(180deg, #ffe167, var(--amber) 55%, var(--amber-lo));
  box-shadow: 0 0 0 2px #0f1a2e, 0 0 0 3.5px #4a6595;
}
.dock-btn:hover { filter: brightness(1.06); }

@media (max-width: 360px) {
  .dock-offer b { font-size: 15px; }
  .dock-btn { padding: 12px 16px; }
}
.menu a:has(em)::after { margin-left: 0; }