:root{
  --bg1:#1a0f2e; --bg2:#220b3a;
  --glass1:rgba(255,255,255,.14); --glass2:rgba(255,255,255,.06);
  --ink:#f9faff; --sub:#b8c3dc; --border:rgba(255,255,255,.15);
  --cyan:#4ef4ff; --vio:#d58fff; --pink:#ff4ed9;
  --good:#34d399; --warn:#ef4444;
  --shadow:0 12px 40px rgba(0,0,0,.35); --radius:16px;
  --t-fast:.18s cubic-bezier(.22,.9,.24,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1000px 700px at 10% -10%, rgba(255,78,217,.20), transparent 60%),
    radial-gradient(900px 700px at 90% 0%, rgba(78,244,255,.18), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px;
  background:linear-gradient(180deg, rgba(26,15,46,.8), rgba(26,15,46,.4));
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; gap:6px; align-items:baseline; font-weight:800 }
.brand-main{
  text-decoration:none; color:var(--ink); font-size:22px; line-height:1;
  transition:transform .18s ease;
}
.brand-main:hover{ transform:scale(1.08) }
.brand-sub{
  text-decoration:none; font-size:20px; line-height:1;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--vio));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.summary{
  display:flex; gap:28px; align-items:center;
  font-size:17px; font-weight:600;
}
.summary strong{ font-size:19px; color:#fff }

.wallet{ display:flex; align-items:center; gap:10px }
.wallet-info{ display:flex; gap:8px; align-items:center }
.wallet-info.hidden{ display:none }
.sep{ opacity:.5 }
.dot{ width:8px; height:8px; border-radius:50%; background:#6b7280 }
.dot.ok{ background:var(--good) } .dot.bad{ background:var(--warn) }

.app{
  display:grid;
  grid-template-columns: 1fr 360px;
  grid-template-areas:
    "board side"
    "rules rules";
  gap:24px; padding:24px; max-width:1200px; margin:0 auto;
}
.board-wrap{ grid-area:board; position:relative; }
.side{ grid-area:side; display:flex; flex-direction:column; gap:16px; }
.rules-card{ grid-area:rules; }

.card{
  background:linear-gradient(180deg,var(--glass1),var(--glass2));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; position:relative;
}
.card h3{ margin:0 0 10px; font-size:15px; color:#e9eaff }

.board-wrap{ padding:22px; overflow:hidden; }
.board-wrap::after{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(500px 250px at 20% 10%, rgba(255,78,217,.12), transparent 60%);
  pointer-events:none;
}

.card-slot{
  width:240px; height:340px; margin:24px auto; border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  display:grid; place-items:center; position:relative;
  box-shadow:0 0 20px rgba(255,78,217,.08), 0 0 30px rgba(78,244,255,.08);
}
.card-img{max-width:88%;max-height:88%;display:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.card-back{color:var(--sub);font-size:18px}

.screen-block{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(4px); border-radius:var(--radius); z-index:6;
}
.screen-block.hidden{ display:none }
.spin{ width:28px;height:28px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--cyan);border-radius:50%;animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.block-msg{ margin-top:10px; color:var(--sub); font-size:14px; text-align:center }

.side-section{ display:flex; flex-direction:column; gap:12px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center }
.status{ padding:4px 10px; border-radius:999px; font-size:12px; width:max-content; }
.status.idle{ background:rgba(78,244,255,.15); color:var(--cyan) }
.status.live{ background:rgba(255,78,217,.15); color:var(--pink) }
.status.dead{ background:rgba(239,68,68,.15); color:var(--warn) }
.status.won{ background:rgba(52,211,153,.15); color:var(--good) }

.actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap }

.btn{
  appearance:none; border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; font-weight:700; cursor:pointer; color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter:blur(6px);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.25); }

.btn.primary{
  border-color: rgba(255,78,217,.38);
  background:linear-gradient(180deg, rgba(255,78,217,.22), rgba(78,244,255,.14));
}
.btn.success{
  border-color: rgba(52,211,153,.38);
  background:linear-gradient(180deg, rgba(52,211,153,.22), rgba(34,197,94,.14));
}
.btn.ghost{ background:transparent; }
.btn:disabled{ opacity:.55; cursor:not-allowed }

.hint{ color:var(--sub); font-size:12px }
.balance .label{ color:var(--sub); font-size:13px }
.balance .value{ font-size:16px; font-weight:800 }
.divider{ border:none; border-top:1px solid var(--border); margin:8px 0 }

.rules{ margin:6px 0 0 18px; padding:0 }
.rules li{ margin:6px 0; color:var(--ink) }
.rules strong{ color:#fff }

.foot{ padding:16px 24px; color:var(--sub); font-size:13px; border-top:1px solid var(--border) }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:1200px; margin:0 auto }
.addr-link{
  font-weight:800; font-size:14px; color:#e6d7ff; text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.28);
}
.addr-link:hover{ opacity:.9 }

@media (max-width:980px){
  .app{ grid-template-columns:1fr; grid-template-areas:"board" "side" "rules" }
  .summary{ gap:16px; font-size:16px }
  .summary strong{ font-size:18px }
}

.hidden{display:none!important}