:root{
  --bg:#07131f;
  --bg-deep:#030a12;
  --ink:#f2ede3;
  --ink-soft:#9ca9bb;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.18);
  --panel:rgba(10,20,33,.78);
  --panel-strong:rgba(15,27,42,.94);
  --navy:#0d1b2a;
  --navy-2:#17324a;
  --gold:#d8b36a;
  --gold-soft:#efd7a2;
  --gold-pale:#f7ecd0;
  --teal:#61b5ba;
  --danger:#ef7070;
  --radius-lg:32px;
  --radius-md:22px;
  --radius-sm:16px;
  --shadow:0 32px 80px rgba(0,0,0,.32);
  --shadow-soft:0 18px 42px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;
  color:var(--ink);
  font:400 16px/1.6 "Manrope",system-ui,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(216,179,106,.2), transparent 22%),
    radial-gradient(circle at 82% 8%, rgba(97,181,186,.12), transparent 18%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg,#09111c 0%, #07131f 45%, #040a11 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 120px);
  opacity:.72;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}

.site-shell{
  width:min(1200px,calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 56px;
  position:relative;
  z-index:1;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
  border:1px solid rgba(216,179,106,.16);
  border-radius:24px;
  background:
    radial-gradient(circle at top left, rgba(216,179,106,.08), transparent 32%),
    linear-gradient(180deg,rgba(12,20,31,.96),rgba(7,13,21,.92));
  backdrop-filter:blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}

.site-header-app{position:sticky;top:14px;z-index:20}

.brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  position:relative;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 35%),
    linear-gradient(160deg,#13253a 0%, #08111c 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(216,179,106,.14), 0 16px 34px rgba(0,0,0,.28);
  overflow:hidden;
}

.brand-mark-core{
  width:16px;
  height:28px;
  border-radius:999px;
  background:linear-gradient(180deg,#f7e3b6 0%, var(--gold) 45%, #7f5a1f 100%);
  box-shadow:0 0 18px rgba(216,179,106,.32);
}

.brand-mark-pulse{
  position:absolute;
  border:1px solid rgba(216,179,106,.34);
  border-radius:999px;
}

.brand-mark-pulse-a{
  width:34px;
  height:34px;
}

.brand-mark-pulse-b{
  width:46px;
  height:46px;
  border-color:rgba(97,181,186,.2);
}

.brand-copy{
  display:grid;
  gap:4px;
}

.brand-copy strong{
  font:700 24px/1 "Fraunces",serif;
  letter-spacing:.02em;
  color:#f5efe5;
}

.brand-copy span{
  color:var(--ink-soft);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.top-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.top-link,
.button,
.table-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.top-link{
  background:rgba(255,255,255,.05);
  border-color:var(--line);
  box-shadow:var(--shadow-soft);
}

.top-link-ghost,
.button-ghost{
  background:transparent;
  border-color:var(--line-strong);
}

.top-link:hover,
.button:hover,
.table-button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(14,31,49,.12);
}

.site-footer{
  margin-top:28px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(10,20,33,.92), rgba(8,15,25,.94));
  box-shadow:var(--shadow-soft);
}

.site-footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr);
  gap:24px;
}

.site-footer-brand p{
  margin:14px 0 0;
  max-width:520px;
  color:var(--ink-soft);
}

.site-footer-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.site-footer-links div{
  display:grid;
  gap:10px;
}

.site-footer-links span{
  color:#f5efe5;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

.site-footer-links a{
  color:var(--ink-soft);
}

.admin-action-stack{
  display:grid;
  gap:8px;
}

.admin-action-stack form{
  margin:0;
}

.admin-action-stack-inline{
  margin-top:10px;
}

.admin-inline-meta{
  margin-top:8px;
  color:var(--ink-soft);
  font-size:12px;
}

.user-pill{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#dfe7f1;
  font-size:14px;
}

.page-wrap{
  display:grid;
  gap:24px;
  margin-top:26px;
}

.page-wrap-app{margin-top:22px}

.hero-block,
.portal-hero,
.feature-card,
.auth-card,
.billing-card,
.pricing-card,
.order-card,
.admin-card{
  border:1px solid rgba(216,179,106,.12);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(216,179,106,.10), transparent 28%),
    linear-gradient(180deg,rgba(13,20,31,.98),rgba(8,14,23,.94));
  backdrop-filter:blur(20px);
  box-shadow:0 28px 70px rgba(0,0,0,.30);
}

.hero-block{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.95fr);
  gap:24px;
  padding:36px;
}

.hero-main h1,
.portal-hero h1,
.auth-head h2,
.billing-card h2,
.pricing-card h2,
.feature-card h2{
  margin:0;
  font:700 clamp(2rem,4vw,4rem)/1 "Fraunces",serif;
  letter-spacing:-.02em;
  color:#f7f0e5;
}

.hero-copy,
.feature-card p,
.auth-head p,
.billing-card p,
.pricing-card p,
.stack-card p{
  color:var(--ink-soft);
}

.hero-copy{
  max-width:58ch;
  font-size:18px;
}

.eyebrow,
.feature-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--teal);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hero-actions,
.button-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.hero-panel,
.portal-metrics,
.metric-grid,
.feature-grid,
.billing-grid,
.pricing-grid,
.admin-grid{
  display:grid;
  gap:16px;
}

.metric-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.metric-card,
.stack-card,
.signal-card,
.story-card{
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(216,179,106,.10);
  background:linear-gradient(180deg,rgba(17,26,39,.98),rgba(10,16,25,.95));
}

.metric-card span,
.stack-card span,
.signal-card span,
.story-card span{
  display:block;
  margin-bottom:10px;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.metric-card strong,
.stack-card strong,
.signal-card strong,
.story-card strong{
  display:block;
  font:700 28px/1.1 "Fraunces",serif;
}

.signal-card p,
.story-card p{
  margin:12px 0 0;
  color:var(--ink-soft);
}

.metric-card em{
  display:block;
  margin-top:10px;
  color:var(--ink-soft);
  font-style:normal;
}

.metric-card-highlight{
  background:
    radial-gradient(circle at top right, rgba(234,200,143,.22), transparent 32%),
    linear-gradient(160deg,rgba(19,37,58,.98),rgba(10,22,36,.96));
  color:#f8f2e8;
  border-color:rgba(255,255,255,.08);
}

.metric-card-highlight span,
.metric-card-highlight em{color:rgba(248,242,232,.74)}

.feature-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.feature-grid-tight{
  margin-top:4px;
}

.feature-card,
.auth-card,
.billing-card,
.pricing-card,
.order-card,
.admin-card{
  padding:28px;
}

.button-primary{
  background:linear-gradient(135deg,#dcbc79,#b6883a);
  color:#1a1309;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 16px 30px rgba(126,88,28,.24);
}

.button-primary:hover{
  box-shadow:0 18px 36px rgba(126,88,28,.32);
}

.button-secondary{
  background:linear-gradient(135deg,#17324a,#234766);
  color:#fffaf2;
  border-color:rgba(255,255,255,.08);
}

.button-ghost{
  color:var(--ink);
}

.button-block{width:100%}

.auth-layout{display:grid;place-items:start center}

.auth-card{
  width:min(560px,100%);
  background:linear-gradient(180deg,rgba(14,25,40,.98),rgba(8,15,25,.94));
}

.auth-head{margin-bottom:18px}

.field{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.field span{
  color:var(--ink-soft);
  font-size:13px;
  font-weight:700;
}

.field input{
  width:100%;
  min-height:54px;
  padding:0 16px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  color:var(--ink);
}

.field input:focus{
  outline:none;
  border-color:rgba(47,111,116,.42);
  box-shadow:0 0 0 4px rgba(47,111,116,.12);
}

.auth-foot{
  margin:16px 0 0;
  color:var(--ink-soft);
  text-align:center;
}

.auth-foot a{color:var(--teal);font-weight:700}

.notice{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  color:var(--ink-soft);
  border:1px solid rgba(255,255,255,.08);
}

.notice-error{
  background:rgba(182,65,65,.08);
  color:var(--danger);
  border:1px solid rgba(182,65,65,.16);
}

.billing-grid,
.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.pricing-card-featured{
  background:
    radial-gradient(circle at top right, rgba(246,234,211,.16), transparent 28%),
    linear-gradient(180deg,rgba(31,45,62,.98),rgba(16,26,39,.96));
  color:#f8f2e8;
  border-color:rgba(216,179,106,.16);
}

.pricing-card-featured p,
.pricing-card-featured .feature-kicker{color:rgba(248,242,232,.72)}

.billing-card-soft{
  background:linear-gradient(180deg,rgba(16,28,44,.98),rgba(9,18,30,.96));
}

.offer-meta{
  margin:14px 0 18px;
  color:var(--gold-soft);
  font-size:14px;
  font-weight:700;
}

.order-form{display:grid;gap:6px}

.portal-hero{
  padding:32px;
  display:grid;
  gap:24px;
}

.portal-hero-main p{
  max-width:720px;
  color:var(--ink-soft);
}

.signal-card-grid,
.story-grid{
  display:grid;
  gap:16px;
}

.mines-layout{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:16px;
}

.keno-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:16px;
}

.mines-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.mine-tile{
  min-height:72px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at top left, rgba(216,179,106,.16), transparent 40%),
    linear-gradient(180deg, rgba(24,49,74,.98), rgba(10,20,33,.96));
  color:#f8f2e8;
  font-weight:800;
  box-shadow:var(--shadow-soft);
}

.mine-tile.is-mine{
  background:linear-gradient(180deg, rgba(108,26,34,.98), rgba(52,10,16,.98));
}

.mine-tile.is-safe{
  background:linear-gradient(180deg, rgba(16,95,81,.98), rgba(10,44,38,.98));
}

.mine-tile.is-neutral{
  color:rgba(248,242,232,.55);
}

.mine-tile:hover{
  transform:translateY(-1px);
}

.keno-grid{
  display:grid;
  grid-template-columns:repeat(8,minmax(56px,1fr));
  gap:10px;
  margin-top:22px;
  align-items:stretch;
}

.keno-ball{
  min-height:58px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(33,44,58,.98), rgba(22,31,43,.98));
  color:#f8f2e8;
  font-weight:800;
  font-size:15px;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.keno-ball.is-selected{
  background:linear-gradient(180deg, rgba(26,124,92,.98), rgba(18,89,67,.98));
  border-color:rgba(66,227,164,.3);
}

.keno-ball.is-hot{
  background:linear-gradient(180deg, rgba(78,90,106,.98), rgba(44,54,66,.98));
  border-color:rgba(255,255,255,.12);
  color:#ffffff;
}

.keno-ball.is-selected.is-hot{
  background:linear-gradient(180deg, rgba(26,124,92,.98), rgba(18,89,67,.98));
  box-shadow:0 0 0 2px rgba(66,227,164,.22), 0 10px 18px rgba(0,0,0,.18);
}

.keno-draw-summary{
  display:grid;
  gap:8px;
  margin-top:18px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(9,18,30,.94), rgba(14,28,43,.94));
}

.keno-draw-summary span{
  color:var(--ink-soft);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.keno-draw-summary strong{
  font:700 28px/1.05 "Fraunces",serif;
  color:#f8f2e8;
}

.keno-draw-summary p{
  margin:0;
  color:var(--ink-soft);
}

.game-kpi-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}

.game-kpi-row.slim-top{
  margin-top:16px;
}

.game-kpi{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(10,20,33,.92), rgba(16,29,45,.92));
}

.game-kpi span{
  display:block;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.game-kpi strong{
  display:block;
  margin-top:6px;
  font-size:24px;
  line-height:1.05;
}

.compact-gap{
  gap:12px;
}

.readonly-field input[disabled]{
  opacity:1;
  color:var(--ink);
}

.mines-console-card,
.keno-console-card{
  overflow:hidden;
}

@media (max-width: 720px){
  .game-kpi-row,
  .stack-mobile{
    grid-template-columns:1fr;
  }

  .keno-grid{
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:6px;
  }

  .keno-ball{
    min-height:44px;
    border-radius:10px;
    font-size:13px;
    padding:0;
  }
}

.launch-modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:20px;
}

.launch-modal[hidden]{
  display:none;
}

.launch-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,7,12,.78);
  backdrop-filter:blur(18px);
}

.launch-modal-card{
  position:relative;
  width:min(780px,100%);
  padding:32px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at top right, rgba(216,179,106,.14), transparent 30%),
    radial-gradient(circle at left bottom, rgba(97,181,186,.1), transparent 28%),
    linear-gradient(180deg, rgba(13,24,38,.97), rgba(5,11,19,.96));
  box-shadow:0 40px 100px rgba(0,0,0,.45);
  overflow:hidden;
}

.launch-close{
  position:absolute;
  top:18px;
  right:18px;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  color:var(--ink);
}

.launch-stage h2{
  margin:0;
  font:700 clamp(1.9rem,3vw,3.3rem)/1 "Fraunces",serif;
  color:#f7f0e5;
}

.launch-stage p{
  color:var(--ink-soft);
}

.launch-form{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.seed-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
}

.launch-inline-button{
  min-width:112px;
}

.launch-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:8px 0 10px;
}

.launch-meta-card{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(13,27,42,.95),rgba(7,15,25,.92));
}

.launch-meta-card span{
  display:block;
  margin-bottom:8px;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.launch-meta-card strong{
  display:block;
  font:700 24px/1.1 "Fraunces",serif;
}

.launch-meta-card p{
  margin:10px 0 0;
}

.launch-progress-shell{
  display:grid;
  gap:14px;
  margin-top:22px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(11,25,38,.96),rgba(6,14,22,.94));
}

.launch-progress-bar{
  position:relative;
  width:100%;
  height:14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.launch-progress-bar span{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#dcbc79 0%, #efd7a2 46%, #61b5ba 100%);
  box-shadow:0 0 20px rgba(216,179,106,.38);
  transition:width .18s ease;
}

.launch-progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.launch-progress-meta strong{
  font:700 30px/1 "Fraunces",serif;
}

.launch-progress-meta span{
  color:var(--ink-soft);
  text-align:right;
}

.launch-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.launch-chip{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:var(--gold-pale);
  font-size:13px;
  letter-spacing:.03em;
}

.signal-card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.story-grid{
  grid-template-columns:1.2fr .8fr;
}

.signal-card-featured,
.story-card-contrast{
  background:
    radial-gradient(circle at top right, rgba(216,179,106,.18), transparent 36%),
    linear-gradient(160deg,rgba(26,33,44,.98),rgba(11,17,26,.95));
  border-color:rgba(216,179,106,.16);
}

.portal-metrics{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.admin-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.admin-summary{
  display:grid;
  gap:16px;
}

.admin-card-full{grid-column:1 / -1}

.table-wrap{overflow:auto}

table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

th,td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

th{
  color:var(--ink-soft);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.table-button{
  min-height:38px;
  padding:0 14px;
  background:rgba(255,255,255,.92);
  border-color:var(--line-strong);
}

button:disabled{
  cursor:not-allowed;
  opacity:.58;
  transform:none;
  box-shadow:none;
}

@media (max-width: 980px){
  .hero-block,
  .feature-grid,
  .pricing-grid,
  .signal-card-grid,
  .story-grid,
  .mines-layout,
  .keno-layout,
  .launch-meta-grid,
  .portal-metrics,
  .admin-grid,
  .billing-grid{
    grid-template-columns:1fr;
  }

  .site-header,
  .site-header-app{
    position:static;
  }
}

@media (max-width: 720px){
  .site-shell{width:min(100% - 20px,1200px);padding-top:14px}
  .site-header{padding:14px 16px}
  .brand-copy strong{font-size:20px}
  .hero-block,
  .portal-hero,
  .feature-card,
  .auth-card,
  .billing-card,
  .pricing-card,
  .order-card,
  .admin-card{padding:20px}
  .hero-actions,
  .button-row,
  .top-nav{flex-direction:column;align-items:stretch}
  .site-footer-main,
  .site-footer-links{grid-template-columns:1fr}
  .top-link,
  .button,
  .table-button{width:100%}
  .seed-input-row{grid-template-columns:1fr}
  .launch-progress-meta{flex-direction:column;align-items:flex-start}
  .keno-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width: 721px) and (max-width: 980px){
  .keno-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}