:root {
  --bg: #101216;
  --bg-2: #181b21;
  --line: #2a2e37;
  --ink: #f5f2ea;
  --soft: #9ba1ad;
  --c0: #e5483a;
  --c1: #2f6fe4;
  --c2: #e8a317;
  --c3: #1f9d6b;
  --ok: #22b573;
  --no: #e5483a;
  --gold: #f2c14e;
  --silver: #c9ced6;
  --bronze: #d08a52;
  --radius: 14px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font: inherit; }
[hidden] { display: none !important; }

/* ---------- shared bits ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--ink); color: var(--bg);
  font-weight: 800; letter-spacing: -.01em;
  padding: .8em 1.5em; border-radius: 999px;
  transition: transform .12s ease, opacity .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }

.tile {
  position: relative;
  display: flex; align-items: center; gap: .7em;
  border-radius: var(--radius);
  color: #fff; font-weight: 700; text-align: left;
  padding: .9em 1em;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.22);
  transition: opacity .3s, transform .15s, filter .3s;
  overflow: hidden;
}
.tile .mark {
  flex: none; display: grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 9px;
  background: rgba(255,255,255,.22); font-weight: 800;
}
.tile .txt { flex: 1; line-height: 1.15; position: relative; z-index: 1; }
.tile.o0 { background: var(--c0); }
.tile.o1 { background: var(--c1); }
.tile.o2 { background: var(--c2); color: #1b1606; }
.tile.o2 .mark { background: rgba(0,0,0,.14); }
.tile.o3 { background: var(--c3); }

.pill {
  display: inline-block; padding: .3em .8em; border-radius: 999px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600; color: var(--soft);
}

.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #2b2f38; color: var(--ink); padding: .6em 1.1em; border-radius: 10px;
  font-weight: 600; font-size: 15px; z-index: 50; max-width: calc(100% - 32px); text-align: center;
}

@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }