:root{
  --bg:#0b0f1a;
  --panel:#121a2b;
  --panel2:#0f1626;
  --text:#e7ecff;
  --muted:#a9b4d0;
  --accent:#7c5cff;
  --accent2:#20c997;
  --danger:#ff4d6d;
  --gold:#f7c948;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 600px at 80% 0%, rgba(32,201,151,.18), transparent 55%),
              var(--bg);
  color:var(--text);
}
button,input,select,textarea{font:inherit}

#app{min-height:100%; display:flex;}

.screen{width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px;}

.card{
  width:min(980px, 100%);
  background: linear-gradient(180deg, rgba(18,26,43,.92), rgba(15,22,38,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.cardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:100px; height:100px; object-fit:contain;}
.brandTitle{display:flex; flex-direction:column; line-height:1.1}
.brandTitle .title{font-weight:800; letter-spacing:.2px}
.brandTitle .subtitle{font-size:12px; color:var(--muted)}

.cardBody{padding:18px;}

.row{display:flex; gap:14px; flex-wrap:wrap;}

.field{display:flex; flex-direction:column; gap:6px; min-width:220px; flex:1;}
.field label{font-size:12px; color:var(--muted)}
.field input,.field select,.field textarea{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}
.field textarea{min-height:90px; resize:vertical;}

.btn{
  background: rgba(124,92,255,.18);
  border: 1px solid rgba(124,92,255,.35);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{background: rgba(124,92,255,.26); border-color: rgba(124,92,255,.55)}
.btn:active{transform: scale(.98)}
.btnPrimary{background: linear-gradient(180deg, rgba(124,92,255,.95), rgba(124,92,255,.55)); border-color: rgba(124,92,255,.9)}
.btnDanger{background: rgba(255,77,109,.16); border-color: rgba(255,77,109,.35)}
.btnGhost{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12)}

.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px;}
@media (max-width: 860px){
  .split{grid-template-columns:1fr;}
}

.splash{
  width:100%;
  height:100vh;
  background: #000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.splash img{width:100%; height:100%; object-fit:cover;}

.topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.userBox{display:flex; align-items:center; gap:10px;}
.userBox img{width:80px; height:80px; border-radius: 18px; object-fit:cover; border:1px solid rgba(255,255,255,.12)}
.userMeta{display:flex; flex-direction:column; line-height:1.1}
.userMeta .name{font-weight:700}
.userMeta .coins{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px}
.userMeta .coins img{width:16px; height:16px; border-radius:0; border:none}

.gameLayout{display:grid; grid-template-columns: 1fr 360px; gap:16px; padding:16px;}
@media (max-width: 980px){
  .gameLayout{grid-template-columns:1fr;}
}

.sceneCard{background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: 16px; overflow:hidden;}
.sceneMedia{width:100%; aspect-ratio: 1/1; background: rgba(255,255,255,.03);}
.sceneMedia img{width:100%; height:100%; object-fit:cover;}
.sceneBody{padding:14px; display:flex; flex-direction:column; gap:12px;}
.sceneTitle{font-weight:800; font-size:18px}
.sceneText{color: var(--text); opacity:.95; white-space:pre-wrap;}

.optionGrid{display:grid; gap:10px;}

.sidePanel{background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding:14px; display:flex; flex-direction:column; gap:12px;}
.smallTitle{font-weight:800; font-size:13px; color: var(--muted); letter-spacing:.3px; text-transform:uppercase;}

.carousel{display:flex; align-items:center; gap:10px;}
.carouselBtn{width:44px; height:44px; display:flex; align-items:center; justify-content:center;}
.avatarPreview{display:flex; gap:12px; align-items:center; flex:1;}
.avatarPreview img{width:92px; height:92px; border-radius: 18px; object-fit:cover; border:1px solid rgba(255,255,255,.12)}
.avatarInfo{display:flex; flex-direction:column; gap:6px;}
.avatarInfo .name{font-weight:900}
.avatarInfo .desc{font-size:12px; color:var(--muted)}

.skillGrid{display:grid; grid-template-columns: 1fr 1fr; gap:8px;}
.skill{display:flex; justify-content:space-between; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 10px;}
.skill span{font-size:12px; color:var(--muted)}
.skill b{font-size:12px}

.toast{margin-top:10px; padding:10px 12px; border-radius:12px; background: rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.25); color: var(--text);}

.loaderOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 80;
}
.loaderCard{
  width:min(320px, 92vw);
  background: rgba(18,26,43,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  box-shadow: var(--shadow);
}
.loaderLogo{
  width:192px;
  height:192px;
  object-fit:contain;
  animation: floaty 1.7s ease-in-out infinite;
}
@keyframes floaty{
  0%{transform: translateY(0) scale(1)}
  50%{transform: translateY(-8px) scale(1.03)}
  100%{transform: translateY(0) scale(1)}
}
.loaderText{color: var(--muted); font-size:13px; text-align:center}

.modalOverlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.62); z-index:60; padding:16px;}
.modal{width:min(520px, 96vw); background: rgba(18,26,43,.96); border:1px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: var(--shadow); overflow:hidden;}
.modalHeader{padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:10px;}
.modalBody{padding:16px; display:flex; flex-direction:column; gap:12px;}
.diceBox{display:flex; flex-direction:column; align-items:center; gap:10px;}
.diceImg{width:min(320px, 90%); height:auto; object-fit:contain;}
.diceRolling{animation: wobble .18s linear infinite;}
@keyframes wobble{0%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.02)}100%{transform:rotate(-4deg) scale(1)}}
.diceResult{font-size:48px; font-weight:900; color: var(--gold)}

.navRow{display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap;}

.badge{padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size:12px; color: var(--muted)}