/* SkyClaws · Casino — shared tokens + base layout.
 *
 * SOURCE OF TRUTH for the design tokens: ../index.html lines 12-57.
 * If a token (--bone, --accent, --crimson, --amber, --display, etc.)
 * changes there, mirror it here. The casino pages reference this file
 * directly rather than re-inlining the block per-page so a token bump
 * is one edit, not six. (Phase 3 brief accepted inline duplication;
 * shared file is the noted "future polish" path — taken here because
 * brand drift between bot-related casino pages and the skin studio
 * would be visually obvious.)
 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-0:#000000;
  --bg-1:#0a0908;
  --bone:#e8e3d8;
  --bone-80:rgba(232,227,216,0.80);
  --bone-62:rgba(232,227,216,0.62);
  --bone-34:rgba(232,227,216,0.34);
  --bone-18:rgba(232,227,216,0.18);
  --bone-08:rgba(232,227,216,0.08);

  --accent:#7dd3ff;
  --accent-glow:rgba(125,211,255,0.55);
  --crimson:#c8232c;
  --crimson-glow:rgba(200,35,44,0.55);

  --glass:rgba(255,255,255,0.06);
  --glass-2:rgba(255,255,255,0.04);
  --glass-border:rgba(232,227,216,0.18);
  --glass-border-lit:rgba(125,211,255,0.50);

  --ok:#7dd3ff;
  --err:#c8232c;
  --warn:#d4a14a;
  --amber:#d4a14a;
  --amber-hot:#e8b558;
  --amber-glow:rgba(212,161,74,0.45);

  --display:'Bebas Neue', 'Oswald', system-ui, sans-serif;
  --ui:'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing:border-box; }
html, body {
  margin:0; min-height:100%;
  background:radial-gradient(ellipse at 50% 0%, var(--bg-1) 0%, var(--bg-0) 65%);
  color:var(--bone-80); font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* topbar (parity with index.html .topbar / .brand) */
.topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px; gap:16px;
}
.brand {
  display:flex; align-items:center; gap:14px;
  padding:10px 18px;
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  border:1px solid var(--glass-border);
  border-radius:12px;
}
.brand-mark {
  width:48px; height:48px; border-radius:8px;
  background:#000 url('/assets/brand/skyclaws.jpg') center/contain no-repeat;
  flex:0 0 auto; mix-blend-mode:screen;
  box-shadow:0 0 22px rgba(125,211,255,0.16), inset 0 0 0 1px rgba(232,227,216,0.10);
}
.brand-text .name {
  font-family:var(--display); font-size:22px; letter-spacing:0.18em; color:var(--bone);
}
.brand-text .sub {
  font-size:10px; color:var(--bone-62);
  letter-spacing:0.22em; text-transform:uppercase; margin-top:2px;
}

.nav {
  display:flex; gap:8px; align-items:center;
  padding:8px 12px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:10px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav a {
  padding:6px 12px; border-radius:6px;
  color:var(--bone-62);
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
}
.nav a:hover { color:var(--bone); background:rgba(125,211,255,0.06); text-decoration:none; }
.nav a.active {
  color:var(--bone);
  border:1px solid var(--accent);
  background:rgba(125,211,255,0.08);
  box-shadow:inset 0 0 12px rgba(125,211,255,0.10);
}
.nav .future { opacity:0.5; pointer-events:none; }

.balance-pill {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:12px;
  font-family:var(--mono); font-size:12px;
  color:var(--bone-80);
}
.balance-pill .claw { color:var(--amber); }
.balance-pill .point-amt { color:var(--accent); }
.balance-pill .sep { color:var(--bone-34); }

main {
  max-width:1100px; margin:0 auto;
  padding:32px 24px 96px;
}

h1.title {
  font-family:var(--display); font-size:48px;
  letter-spacing:0.18em; color:var(--bone);
  margin:8px 0 4px;
}
.subtitle {
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--bone-62); margin-bottom:32px;
}

/* glass buttons (parity with index.html button rules) */
button, .btn {
  font:inherit; font-size:13px;
  padding:10px 16px; border-radius:8px;
  background:var(--glass-2); color:var(--bone);
  border:1px solid var(--glass-border);
  cursor:pointer;
  transition:border-color 0.18s var(--ease), background 0.18s var(--ease),
             transform 0.12s ease, box-shadow 0.18s var(--ease);
  letter-spacing:0.02em;
}
button:hover, .btn:hover { border-color:var(--glass-border-lit); background:rgba(125,211,255,0.06); }
button:active { transform:scale(0.97); }
button:disabled { opacity:0.4; cursor:not-allowed; }

button.primary {
  background:linear-gradient(180deg, rgba(125,211,255,0.20) 0%, rgba(125,211,255,0.08) 100%);
  border:1px solid var(--accent);
  color:var(--bone);
  font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  box-shadow:0 8px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.06);
  padding:14px 24px;
}
button.primary:hover {
  background:linear-gradient(180deg, rgba(125,211,255,0.30) 0%, rgba(125,211,255,0.14) 100%);
}

/* lightning flash (parity with index.html @keyframes lightningFlash:179) */
@keyframes lightningFlash {
  0%   { box-shadow:inset 0 0 0 1px var(--glass-border); }
  18%  { box-shadow:inset 0 0 28px 4px rgba(125,211,255,0.75), 0 0 60px var(--accent-glow); }
  55%  { box-shadow:inset 0 0 14px 2px rgba(200,35,44,0.42); }
  100% { box-shadow:inset 0 0 0 1px var(--glass-border); }
}
.lightning-pulse { animation:lightningFlash 600ms var(--ease) both; }

/* card grid (landing) */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}
.card {
  position:relative;
  display:flex; flex-direction:column; gap:8px;
  padding:24px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:14px;
  backdrop-filter:blur(10px) saturate(110%);
  -webkit-backdrop-filter:blur(10px) saturate(110%);
  text-decoration:none; color:inherit;
  transition:border-color 0.2s var(--ease), transform 0.2s var(--ease);
  min-height:160px;
}
.card:hover {
  border-color:var(--glass-border-lit);
  transform:translateY(-2px);
  text-decoration:none;
}
.card .name {
  font-family:var(--display); font-size:24px; letter-spacing:0.18em; color:var(--bone);
}
.card .meta {
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--bone-62);
}
.card .blurb { font-size:13px; color:var(--bone-80); line-height:1.5; margin-top:4px; }
.card.coming::after {
  content:'COMING SOON';
  position:absolute; top:14px; right:14px;
  font-size:10px; letter-spacing:0.18em;
  color:var(--amber); border:1px solid var(--amber);
  padding:3px 8px; border-radius:4px;
  background:rgba(212,161,74,0.08);
}

/* play page common layout */
.play {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:24px;
}
@media (max-width: 900px) { .play { grid-template-columns:1fr; } }

.stage {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:32px;
  min-height:300px;
  backdrop-filter:blur(10px) saturate(110%);
  -webkit-backdrop-filter:blur(10px) saturate(110%);
}

.rail {
  display:flex; flex-direction:column; gap:16px;
}
.row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:var(--glass-2);
  border:1px solid var(--glass-border);
  border-radius:10px;
}
.row .label {
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--bone-62);
}
.row .val { font-family:var(--mono); font-size:14px; color:var(--bone); }

.outcome {
  padding:24px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background:var(--glass-2);
  min-height:80px;
}
.outcome .head {
  font-family:var(--display); font-size:24px; letter-spacing:0.16em;
  color:var(--bone); margin-bottom:8px;
}
.outcome .body { font-size:14px; color:var(--bone-80); line-height:1.5; }
.outcome .delta {
  display:inline-block; margin-top:12px;
  font-family:var(--mono); font-size:18px;
  padding:6px 12px; border-radius:6px;
}
.outcome .delta.win  { color:var(--accent); background:rgba(125,211,255,0.10); border:1px solid rgba(125,211,255,0.30); }
.outcome .delta.loss { color:var(--crimson); background:rgba(200,35,44,0.10); border:1px solid rgba(200,35,44,0.30); }

/* small inputs */
input[type="number"], input[type="text"] {
  font:inherit; font-family:var(--mono); font-size:14px;
  padding:10px 12px; border-radius:8px;
  background:var(--bg-1); color:var(--bone);
  border:1px solid var(--glass-border);
  width:100%;
}
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(125,211,255,0.18); }

.toggle {
  display:flex; gap:8px;
}
.toggle button {
  flex:1; padding:12px 0; letter-spacing:0.16em; text-transform:uppercase;
}
.toggle button.on {
  border-color:var(--accent); background:rgba(125,211,255,0.10); color:var(--bone);
  box-shadow:inset 0 0 12px rgba(125,211,255,0.10);
}

.tier-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.tier-grid .tier {
  padding:14px 10px; text-align:center;
  border-radius:10px; cursor:pointer;
  background:var(--glass-2); border:1px solid var(--glass-border);
  font-size:12px; letter-spacing:0.10em; text-transform:uppercase; color:var(--bone-62);
}
.tier-grid .tier.on {
  border-color:var(--accent); color:var(--bone);
  background:rgba(125,211,255,0.10);
}
.tier-grid .tier .pct { font-family:var(--mono); font-size:11px; color:var(--bone-62); margin-top:4px; }
.tier-grid .tier.on .pct { color:var(--bone-80); }

.notice {
  padding:12px 16px; border-radius:8px;
  border:1px solid var(--crimson); color:var(--crimson);
  background:rgba(200,35,44,0.06);
  font-size:13px;
}
.notice.warn { border-color:var(--warn); color:var(--warn); background:rgba(212,161,74,0.06); }
.notice.ok   { border-color:var(--accent); color:var(--accent); background:rgba(125,211,255,0.06); }

.recent {
  margin-top:16px;
  font-family:var(--mono); font-size:12px;
  color:var(--bone-62);
}
.recent .item { padding:6px 0; border-top:1px solid var(--bone-08); }
.recent .item:first-child { border-top:none; }