:root{
  --bg:#071428; --card:#08172a; --glass:rgba(255,255,255,0.04);
  --accent1:#ff6b6b; --red:#ff3b3b; --green:#39d98a; --yellow:#ffd24a; --blue:#4ec8ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial;background:linear-gradient(180deg,#04101b,#071428);color:#fff}
.app{min-height:100vh;display:block;overflow:hidden}
.page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transform:scale(.995);transition:all .28s ease}
.page.active{opacity:1;pointer-events:auto;transform:scale(1)}
.splash-card{width:760px;max-width:96vw;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:28px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:center}
.logo-big{width:120px;height:120px;margin:0 auto 12px;border-radius:18px;background:conic-gradient(from 210deg,var(--red) 0 25%, var(--yellow) 0 50%, var(--blue) 0 75%, var(--green) 0 100%);box-shadow:0 18px 60px rgba(0,0,0,.6)}
.splash-card h1{margin:6px 0;font-size:28px}
.lead{opacity:.9;margin-bottom:18px}
.splash-actions{display:flex;gap:12px;justify-content:center}

/* lobby */
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:14px;border-radius:12px;min-width:320px}
.lobby-panel{width:760px;max-width:96vw;padding:18px;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.row{display:flex;gap:12px;align-items:center}
.players-config{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:8px}
.player-config{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,0.02);padding:10px;border-radius:10px}
.avatar-grid{display:flex;gap:8px;flex-wrap:wrap}
.avatar{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;border:2px solid transparent;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.avatar.selected{transform:translateY(-6px);border-color:rgba(255,255,255,.08)}

/* game UI */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:18px;margin:0}
.logo{width:46px;height:46px;border-radius:10px;background:conic-gradient(from 210deg,var(--red) 0 25%, var(--yellow) 0 50%, var(--blue) 0 75%, var(--green) 0 100%);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.controls{display:flex;gap:8px;align-items:center}
.btn{appearance:none;border:0;padding:8px 12px;border-radius:10px;background:linear-gradient(180deg,#0f2633,#061423);color:#fff;cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--accent1),#e52e71);box-shadow:0 10px 30px rgba(229,46,113,.12)}
.main{display:grid;grid-template-columns:1fr 320px;gap:16px;padding:18px}
.board-wrap{position:relative;background:transparent;display:flex;align-items:center;justify-content:center;padding:8px}
.board{width:760px;height:760px;border-radius:18px;background:radial-gradient(circle at 20% 10%, rgba(255,255,255,.02), transparent 10%), linear-gradient(180deg,#081428,#031020);padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.6);position:relative;overflow:hidden}
.overlay-ui{position:absolute;inset:18px;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.dice{pointer-events:auto;min-width:88px;height:88px;border-radius:12px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:28px;backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.actions{pointer-events:auto;display:flex;gap:8px;margin-top:8px}
.btn.large{padding:12px 18px;font-size:16px}
.sidebar{display:flex;flex-direction:column;gap:12px}
.players{display:flex;flex-direction:column;gap:8px}
.player-row{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:8px;background:rgba(0,0,0,.12)}
.player-left{display:flex;align-items:center;gap:8px}
.player-dot{width:14px;height:14px;border-radius:50%}
.log{height:220px;overflow:auto;padding:8px;background:rgba(0,0,0,.2);border-radius:8px;font-size:13px}
.small{font-size:13px;color:#cbd5e1}
.spacer{height:8px}

/* dice cube */
.dice-cube-wrap{position:absolute;right:36px;top:36px;z-index:40;pointer-events:auto}
.dice-cube{width:84px;height:84px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(20deg);transition:transform .9s cubic-bezier(.2,.9,.3,1);cursor:pointer}
.dice-cube .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#ddd);color:#061428;border-radius:8px;font-weight:900;font-size:24px;box-shadow:0 8px 16px rgba(0,0,0,.4)}
.dice-cube .f1{transform:translateZ(42px)} .dice-cube .f2{transform:rotateY(90deg) translateZ(42px)} .dice-cube .f3{transform:rotateY(180deg) translateZ(42px)} .dice-cube .f4{transform:rotateY(-90deg) translateZ(42px)} .dice-cube .f5{transform:rotateX(90deg) translateZ(42px)} .dice-cube .f6{transform:rotateX(-90deg) translateZ(42px)}

/* token styles */
.token-shadow{filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.token{transition:transform .24s ease, opacity .18s}
.token circle{stroke:#fff;stroke-width:2}

/* responsive */
@media (max-width:980px){
  .main{grid-template-columns:1fr; padding:12px}
  .board{width:calc(100vw - 32px);height:calc(100vw - 32px)}
  .logo-big{width:96px;height:96px}
  .lobby-panel{width:calc(100vw - 32px)}
  .dice-cube-wrap{right:12px;top:12px}
}