:root {
  --kado-teal: #5ab0af;
  --kado-deep: #047871;
  --kado-black: #303030;
  --kado-yellow: #f8dc4b;
  --kado-darkest: #023635;

  --bg: var(--kado-darkest);
  --card:#0e1a1a;
  --muted:#8fb8b6;
  --text:#e6fbf9;
  --accent: var(--kado-teal);
  --btn:#0f2a29;
  --warn:#ef4444;
  --blue-rare:#3b82f6;
}
.light { --bg:#f6fffe; --card:#ffffff; --muted:#50716f; --text:#023635; --accent: var(--kado-deep); --btn:#e8f7f5; }

* { box-sizing: border-box; }
html { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }

/* Header */
header { padding:10px 16px; display:flex; justify-content:space-between; background:rgba(2,54,53,.7); backdrop-filter: blur(6px); position:sticky; top:0; border-bottom:1px solid rgba(255,255,255,.06); }
header .row { display:flex; gap:10px; align-items:center; }
.logo { height:28px; border-radius:6px; }
.pill { display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--muted); font-size:12px; }

/* Layout */
.wrap { display:grid; grid-template-columns:1fr 380px; gap:16px; padding:16px; max-width:1200px; margin:0 auto; }
.card { background: var(--card); border-radius:16px; padding:16px; border:1px solid rgba(255,255,255,.06); }
.footer { text-align:center; padding:10px; color:var(--muted); font-size:12px; }

/* Buttons */
.btn { padding:6px 10px; border-radius:8px; background:var(--btn); color:var(--text); cursor:pointer; font-weight:700; border:1px solid rgba(255,255,255,.08); font-size:12px; }
.btn:hover { filter: brightness(1.05); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--kado-deep)); color:#062724; border-color: transparent; }
.btn.warn { background:#3a0f12; border-color:#5b1d23; color:#ffd3d3; }
.btn.sm { font-size:11px; padding:6px 8px; border-radius:8px; }
.btn.full { width:100%; }

/* --- UNIFORM ACTION SIZES (shop, market, secrets) TALLER --- */
:root { --btn-w: 100px; --btn-h: 40px; --btn-fs-top:14px; --btn-fs-sub:11px; }

.shop-item .right .btn,
.market-item button.btn,
#secretPanel .market-item .pill,
#secretPanel .market-item .btn {
  min-width: var(--btn-w);
  min-height: var(--btn-h);
  height: var(--btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height:1.2;
}

/* Shop two-line layout */
.shop-btn { min-width: var(--btn-w); min-height: var(--btn-h); padding:4px 6px; flex-direction:column; }
.shop-btn .top { font-size: var(--btn-fs-top); font-weight:800; line-height:1; }
.shop-btn .sub { font-size: var(--btn-fs-sub); opacity:.85; line-height:1.2; }

#secretPanel .market-item .pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border-radius:8px;
  font-weight:700;
  font-size:11px;
}

/* Stats tiles (2-col style) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 12px;
}
.stat { display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background: rgba(255,255,255,.02); }
.muted { color: var(--muted); font-weight:500; }
.sm { font-size: 12px; }
.big { font-size:34px; font-weight:800; line-height:1.15; font-variant-numeric: tabular-nums; word-break: break-word; }
.num { min-height: 38px; }

/* CTA + Auto ring */
.cta-row { display:flex; gap:12px; align-items:center; margin-top:18px; }
.cta { flex:1 1 auto; font-size:18px; padding:14px 16px; border-radius:14px; }
.auto-ring { width:54px; height:54px; display:grid; place-items:center; }
.ring { width:54px; height:54px; display:block; }
.ring .bg { fill:none; stroke:rgba(255,255,255,.12); stroke-width:4; }
.ring .fg { fill:none; stroke: var(--accent); stroke-width:4; stroke-linecap:round; transform: rotate(-90deg); transform-origin: 50% 50%; }

/* Pity */
.pity-wrap { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.pity-top { display:flex; justify-content:space-between; align-items:center; }
.pity-bar { width:100%; height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.pity-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--kado-deep)); width:0%; transition:width .2s ease; }

/* Recent pulls */
.pull-log { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag { padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.08); }
.tag.common { background:#1f2937; color:#cbd5e1; }
.tag.uncommon { background:#0b3a2b; color:#a7f3d0; }
.tag.rare { background:rgba(59,130,246,.18); color:#93c5fd; border-color: rgba(59,130,246,.35); }
.tag.foil { background:rgba(255,255,255,.04); border-color: rgba(255,255,255,.25); color:transparent; -webkit-text-fill-color: transparent; background: linear-gradient(125deg, #ffffff 0%, #8ac6ff 25%, #c5a3ff 50%, #ffe9a3 75%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; background-size:200% 200%; animation: shimmer 4s ease infinite; }
@keyframes shimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Session + Odds panels */
.grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }

/* Shop containers */
.shop-item { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; margin-bottom:10px; }
.shop-item .left { display:flex; flex-direction:column; gap:4px; }
.shop-item .right { display:grid; grid-auto-flow: column; gap:6px; align-items:center; justify-items:end; width:100%; }

/* Market */
.market-list { display:grid; gap:10px; margin-top:10px; }
.market-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border:1px dashed rgba(255,255,255,.12); border-radius:10px; }
.market-item .info { font-size:12px; color:var(--muted); }
.market-item .title { font-weight:700; color:#c9fffb; }

/* Tooltip */
.tooltip { position:absolute; z-index:20; background:#0b1d1c; color:#d0f1ef; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; font-size:12px; padding:8px 10px; pointer-events:none; opacity:0; transform:translateY(-6px);
  transition: opacity .12s ease, transform .12s ease; max-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.tooltip.show { opacity:1; transform:translateY(0); }
.tooltip .title { font-weight:700; margin-bottom:4px; color:#8fe1db; }
.tooltip .row { display:flex; justify-content:space-between; gap:10px; }

/* Modal (burger menu) */
.modal .modal-card { min-width: 380px; }
@media (max-width: 420px){
  .modal .modal-card { min-width: 90vw; }
}

/* Locked/preview look for secrets + warning pill */
.market-item.locked { opacity: .55; filter: saturate(.6); }
.pill-warn { background:#3a1b1b; border-color:#5b2a2a; color:#ffd6d6; }

/* Mobile */
@media(max-width:900px){
  .wrap{grid-template-columns:1fr;gap:12px;padding:12px;}
  .shop-item .right { grid-auto-flow: row; justify-items: stretch; }
  .shop-btn { min-width: var(--btn-w); }
}
@media(max-width:600px){
  .big{font-size:30px;}
  body{font-size:16px;}
}