@font-face { font-family: Nunito; src: url(nunito.ttf); font-weight: 800; font-display: swap; }

:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --bg2: var(--tg-theme-secondary-bg-color, #eef1f6);
  --fg: var(--tg-theme-text-color, #1b1f2a);
  --hint: var(--tg-theme-hint-color, #8a93a5);
  --btn: var(--tg-theme-button-color, #3d8bff);
  --btn-fg: var(--tg-theme-button-text-color, #fff);
  --ink: #1b1f2a;
  --yes: #2fbf5b;
  --no: #f2545b;
  --gold: #ffc531;
  --line: 2.5px solid var(--ink);
  --pop: 0 3px 0 var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg2); color: var(--fg); }
body { font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: 76px; }
h2, h3, b, .num, button, .pill, .tile, .price { font-family: Nunito, system-ui, sans-serif; font-weight: 800; }
h2 { font-size: 19px; margin: 4px 0 10px; }
h3 { font-size: 16px; margin: 14px 0 8px; }
button { font-size: 15px; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; color: var(--fg); background: var(--bg);
  border: var(--line); border-radius: 12px; outline: none;
}
textarea { resize: vertical; min-height: 64px; }
[hidden] { display: none !important; }

/* header */
header { position: sticky; top: 0; z-index: 5; background: var(--bg2); padding: 8px 10px 6px; }
.bar { display: flex; gap: 6px; align-items: center; }
.title { flex: 1; min-width: 0; text-align: left; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px;
  background: var(--bg); border: var(--line); box-shadow: var(--pop); white-space: nowrap; font-size: 14px;
}
.pill:active, .btn:active, .tile:active, .chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pill.icon { padding: 5px 8px; }
.bal { background: var(--gold); color: var(--ink); }
.sos { background: var(--no); color: #fff; }
.ready { background: var(--yes); color: #fff; }
.banner { margin-top: 8px; padding: 6px 10px; border-radius: 12px; background: #ffe58a; color: var(--ink); border: var(--line); font-size: 13px; font-weight: 600; }

/* atlas icons with emoji fallback (body.atlas is set once atlas.png loads) */
.ico { display: inline-block; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center; font-style: normal; vertical-align: middle; flex: none; }
.atlas .ico[data-i] {
  background: url(atlas.png) no-repeat; background-size: 600% 400%;
  background-position: calc(var(--c) * 20%) calc(var(--r) * 33.333%); text-indent: -99em; overflow: hidden;
}
.ico[data-i=die5] { --c: 4; --r: 0; }
.ico[data-i=agi] { --c: 0; --r: 1; }
.ico[data-i=board] { --c: 1; --r: 2; }
.ico[data-i=bball] { --c: 2; --r: 2; }
.ico[data-i=fball] { --c: 4; --r: 2; }
.ico[data-i=pin] { --c: 1; --r: 3; }
.ico[data-i=coin] { --c: 2; --r: 3; }
.ico[data-i=chest] { --c: 3; --r: 3; }
.ico[data-i=swords] { --c: 4; --r: 3; }
.ico[data-i=orb] { --c: 5; --r: 3; }

/* layout */
main { padding: 4px 10px 10px; }
.card { background: var(--bg); border: var(--line); border-radius: 18px; box-shadow: var(--pop); padding: 12px; margin-bottom: 12px; }
.hint, .empty { color: var(--hint); font-size: 13px; }
.empty { text-align: center; padding: 24px 0; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.btn {
  display: block; width: 100%; padding: 12px; border-radius: 14px; background: var(--btn); color: var(--btn-fg);
  border: var(--line); box-shadow: var(--pop); font-size: 16px;
}
.btn.big { font-size: 20px; padding: 14px; }
.btn.yes { background: var(--yes); color: #fff; }
.btn.no { background: var(--no); color: #fff; }
.btn.ghost { background: var(--bg); color: var(--fg); }
.btn.sm { display: inline-block; width: auto; padding: 6px 12px; font-size: 14px; }

/* tabs */
nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; background: var(--bg); border-top: var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
nav button { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 20px; padding: 4px 0; border-radius: 12px; }
nav button span { font-size: 11px; color: var(--hint); }
nav button.on { background: var(--bg2); }
nav button.on span { color: var(--fg); }

/* games */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px;
  background: var(--bg); border: var(--line); border-radius: 18px; box-shadow: var(--pop); font-size: 16px;
}
.tile .ico { font-size: 44px; }
.tile .fire { position: absolute; top: -8px; right: -6px; font-size: 22px; transform: rotate(12deg); }
.stage { margin: 0 -2px 10px; border: var(--line); border-radius: 18px; overflow: hidden; background: linear-gradient(#bfe6ff, #e9f7ff); box-shadow: var(--pop); aspect-ratio: 360 / 260; }
.stage canvas { display: block; width: 100% !important; height: 100% !important; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { flex: 1 0 auto; padding: 7px 8px; border-radius: 12px; background: var(--bg); border: var(--line); box-shadow: var(--pop); font-family: Nunito, sans-serif; font-weight: 800; }
.chip.on { background: var(--btn); color: var(--btn-fg); }
.chip small { display: block; font-size: 11px; opacity: .75; }
.bet .row button { flex: 0 0 48px; }
.bet .row input { text-align: center; font-family: Nunito, sans-serif; font-weight: 800; }
.pays { font-size: 13px; color: var(--hint); margin: 8px 0; }
.pays s { opacity: .7; }
.pays b { color: var(--fg); }
.result { min-height: 26px; text-align: center; font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; margin: 6px 0; }
.result.win { color: var(--yes); }
.result.lose { color: var(--no); }
.result small { display: block; font-size: 12px; color: var(--hint); }

/* lists */
.list { display: flex; flex-direction: column; gap: 6px; }
.item { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--bg); border: var(--line); border-radius: 14px; text-align: left; width: 100%; }
.item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item.me { background: #fff5c7; color: var(--ink); }
.item small { color: var(--hint); font-size: 12px; }
.feed .item { font-size: 14px; padding: 8px 10px; }
.feed .t { color: var(--hint); font-size: 11px; flex: none; }
.feed .plus { color: var(--yes); }
.price { flex: none; padding: 4px 9px; border-radius: 99px; border: var(--line); background: var(--no); color: #fff; font-size: 14px; }
.price.up { background: var(--yes); }

/* markets */
.seg { display: flex; gap: 6px; margin: 8px 0; }
.seg .chip { flex: 1; }
.pbar { display: flex; height: 30px; border: var(--line); border-radius: 12px; overflow: hidden; font-family: Nunito, sans-serif; font-weight: 800; color: #fff; font-size: 13px; }
.pbar div { display: flex; align-items: center; padding: 0 8px; white-space: nowrap; transition: width .4s; min-width: 0; overflow: hidden; }
.pbar .y { background: var(--yes); }
.pbar .n { background: var(--no); justify-content: flex-end; flex: 1; }
.chart { display: block; width: 100%; height: 120px; margin: 10px 0 4px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; font-size: 12px; color: var(--hint); }
.stats b { display: block; font-size: 16px; color: var(--fg); }
.preview { font-size: 13px; color: var(--hint); margin: 8px 0; min-height: 18px; }

#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 9;
  max-width: 90vw; padding: 10px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 600; transition: .25s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }