:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --ink:#0d1220;
  --muted:#5b6476;
  --line: rgba(13,18,32,.10);
  --shadow: 0 18px 60px rgba(10,18,32,.12);
  --shadow2: 0 8px 24px rgba(10,18,32,.12);
  --accent:#2563eb;
  --accent2:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --good:#16a34a;
  --r:18px;
  --r2:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--ink);
  overflow:hidden;
}

canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  background:
    radial-gradient(1200px 900px at 25% 20%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(1200px 900px at 75% 80%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(900px 700px at 70% 20%, rgba(245,158,11,.08), transparent 55%),
    linear-gradient(#ffffff, #f7f8fb);
}

.overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  padding: 18px;
}

.hidden{display:none !important}

/* Start overlay: more "game site" vibe */
#start{
  background: rgba(255,255,255,.45);
}
#start::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 700px at 20% 20%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 700px at 80% 70%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(700px 600px at 65% 30%, rgba(245,158,11,.10), transparent 60%);
  animation: bgShift 18s ease-in-out infinite alternate;
  pointer-events:none;
}
#start::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(600px 520px at 35% 65%, rgba(124,58,237,.10), transparent 62%);
  filter: blur(18px);
  opacity: .9;
  animation: bgShift2 22s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes bgShift{
  0%{transform: translate3d(0,0,0) scale(1)}
  100%{transform: translate3d(18px,-12px,0) scale(1.03)}
}
@keyframes bgShift2{
  0%{transform: translate3d(0,0,0) scale(1)}
  100%{transform: translate3d(-16px,14px,0) scale(1.04)}
}
.bgfx{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.bgfx span{
  position:absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--sz);
  height: var(--sz);
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, var(--a), var(--b));
  opacity: var(--o);
  filter: blur(1px);
  animation: floaty var(--t) ease-in-out infinite alternate;
}
@keyframes floaty{
  0%{ transform: translate(-50%,-50%) scale(1); }
  100%{ transform: translate(calc(-50% + 34px), calc(-50% - 26px)) scale(1.06); }
}

.start-card{
  width: min(560px, calc(100vw - 32px));
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  z-index: 2;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 14px;
}
.logo{
  width:46px; height:46px;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.title{font-weight: 950; font-size: 18px; letter-spacing:.2px}
.subtitle{color:var(--muted); font-size: 13px; margin-top: 2px}

.row{margin-top: 10px}
.label{display:block; font-size: 12px; color: var(--muted); font-weight: 900; margin-bottom: 6px}
.name-row{display:flex; gap:10px}
input{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  outline:none;
  font-weight: 900;
  color: var(--ink);
}
input:focus{border-color: rgba(37,99,235,.35); box-shadow: 0 0 0 4px rgba(37,99,235,.10)}

.actions{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 10px;
}

.btn{
  cursor:pointer;
  user-select:none;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 12px;
  font-weight: 950;
  color: var(--ink);
  box-shadow: var(--shadow2);
  transition: transform .08s ease, filter .12s ease;
}
.btn:hover{filter: brightness(1.02)}
.btn:active{transform: translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.primary{
  border-color: rgba(37,99,235,.30);
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.06));
}
.btn.ghost{box-shadow:none; background: rgba(255,255,255,.65)}
.btn.sm{padding: 10px 10px; border-radius: 12px}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}
.chip{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.65);
}

.fineprint{
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.fineprint.subtle{opacity:.9}

.modal-card{
  width: min(520px, calc(100vw - 32px));
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
  z-index: 2;
}
.modal-card.wide{
  width: min(920px, calc(100vw - 32px));
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.modal-title{font-weight: 1000; font-size: 16px}
.modal-sub{margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35}
.right{display:flex; gap:10px; align-items:center}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.summary{
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfbfd;
  padding: 12px;
  white-space: pre-wrap;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fbfbfd;
  overflow:hidden;
  margin-top: 12px;
}
.bar-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(37,99,235,.60), rgba(34,197,94,.60));
}

.hud{
  position:fixed;
  left: 14px;
  right: 14px;
  top: 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.hud-left,.hud-right{display:flex; gap:10px; align-items:center; pointer-events:auto}
.pill{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
}
.pill .k{font-size: 11px; color: var(--muted); font-weight: 900}
.pill .v{font-size: 12px; font-weight: 1000}
.pill.coin{
  border-color: rgba(245,158,11,.22);
  background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(255,255,255,.75));
}

.leader{
  position:fixed;
  right: 14px;
  top: 72px;
  width: 240px;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.leader-head{
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid var(--line);
}
.leader-title{font-weight:1000}
.leader-sub{margin-top:4px; font-size: 11px; color: var(--muted)}
.leader-rows{padding:10px 12px 12px 12px}
.lrow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size: 12px;
  margin: 6px 0;
}
.lname{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 170px}
.lmass{color: var(--muted); font-weight: 900}

.store-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 920px){
  .store-grid{grid-template-columns: repeat(2, 1fr)}
}
.scard{
  border:1px solid var(--line);
  border-radius: 18px;
  background: #fbfbfd;
  padding: 12px;
}
.spreview{
  width:100%;
  height:72px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: radial-gradient(circle at 30% 25%, rgba(37,99,235,.18), rgba(34,197,94,.10));
}
.sname{margin-top:10px; font-weight:1000}
.sdesc{margin-top:4px; color: var(--muted); font-size: 12px; line-height: 1.35; min-height: 34px}
.smeta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.price{font-weight:1000; color: var(--ink)}
.badge{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
  color: var(--muted);
  font-weight: 900;
}

.locker-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 920px){
  .locker-grid{grid-template-columns: 1fr}
}
.box{
  border:1px solid var(--line);
  border-radius: 18px;
  background: #fbfbfd;
  padding: 12px;
}
.box-title{font-weight: 1000}
.kv{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  color: var(--muted);
  font-size: 12px;
}
.k{color: var(--muted)}
.v{font-weight: 1000; color: var(--ink)}
.equip{display:flex; gap:12px; margin-top: 10px}
.skin-preview{
  width:92px; height:92px;
  border-radius: 22px;
  border:1px solid var(--line);
  background: radial-gradient(circle at 30% 25%, rgba(37,99,235,.18), rgba(34,197,94,.10));
  box-shadow: var(--shadow2);
}
.equip-name{font-weight:1000}
.equip-sub{margin-top:6px; color: var(--muted); font-size: 12px; line-height: 1.35}
.equip-actions{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}