:root{
  --bg:#0b0e16; --panel:#10162a; --card:#0e1323; --glass:rgba(255,255,255,.06);
  --accent:#66d1ff; --accent2:#b38bff; --good:#41d07a; --bad:#ff5b7d; --warn:#ffd166;
  --text:#e9f0ff; --muted:#a8b7d6; --line:#232c46; --anim:.45s;
  --laneH:72px; --laneGap:10px; --cols:2; --nameSize:1rem; --barLeft:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(1400px 900px at 15% -10%, #1b2240 0%, #0b0e16 55%) fixed,
    radial-gradient(800px 500px at 100% 120%, #151a2a 0%, transparent 60%) fixed;
}
.wrap{max-width:1560px; margin:0 auto; padding:14px}

/* Top bar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, var(--panel), #0b1120); box-shadow:0 10px 30px rgba(0,0,0,.35); margin-bottom:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px}
.brand .logo{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#0a1a33; border:1px solid #21335a; box-shadow:inset 0 0 18px rgba(102,209,255,.25)}
.toprow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tag{border-radius:999px; padding:6px 10px; font-size:.92rem; border:1px solid #2b3452; background:#0f162b; color:#cfe0ff}

/* Main grid */
.app{display:grid; grid-template-columns:320px 1fr 280px; gap:14px}
.card{background:linear-gradient(180deg, var(--panel), #0b1120); border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.left,.center,.right{padding:16px}
.card h3{margin:0 0 10px 0; font-weight:900}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* keep Add inline */
.left .row:first-of-type{flex-wrap:nowrap}
.left .row:first-of-type input[type="text"]{flex:1; min-width:0}
.left .row:first-of-type .btn{white-space:nowrap}

/* Controls */
.btn{appearance:none; border:1px solid #2a3150; background:linear-gradient(180deg,#1b2240,#0f1529); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:900; transition:.15s transform,.15s filter}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#2a77ff,#1e4ed8); border-color:#2857d1}
.btn.green{background:linear-gradient(180deg,#33c86f,#159a4c); border-color:#1e7f46}
.btn.yellow{background:linear-gradient(180deg,#f6c84c,#e7a72e); border-color:#d5911d; color:#0a0f19}
.btn.pink{background:linear-gradient(180deg,#ff79c6,#ff3fa2); border-color:#b42872}
input[type="text"],input[type="number"],select{background:#0f1426; border:1px solid #263053; border-radius:12px; color:#fff; padding:10px}
.muted{color:var(--muted); font-size:.9rem}

/* Players */
#players{display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:56vh; overflow:auto; scrollbar-width:thin}
.p{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px 10px}
.p .name{font-weight:800; line-height:1.15; white-space:normal}
.p .mini{display:flex; gap:6px}
.mini .btn{padding:6px 8px; font-size:.88rem; border-radius:10px}

/* Track header */
.trackTop{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.turnRibbon{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid #21335a; background:linear-gradient(180deg,#0f1832,#0b1120); box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.03); font-weight:900}
.turnBadge{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:#0a1a33; border:1px solid #21335a; box-shadow:inset 0 0 16px rgba(102,209,255,.25)}

/* start lights in header (no overlay) */
.lightsHeader{display:flex; gap:6px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid #21335a; background:linear-gradient(180deg,#0f1832,#0b1120); box-shadow:inset 0 0 0 2px rgba(255,255,255,.03)}
.lightsHeader .light{width:12px; height:12px; border-radius:50%; background:#1b2543; border:1px solid #2a365a; box-shadow:inset 0 0 8px rgba(255,255,255,.08)}
.lightsHeader .light.on{background:#ff4444; box-shadow:0 0 14px #ff444466, inset 0 0 8px #ff9999aa}

/* Track area */
.trackWrap{position:relative; border:1px solid var(--line); border-radius:18px; padding:12px; height:min(70vh, 760px); background:radial-gradient(900px 160px at 50% 0%, rgba(102,209,255,.10), transparent 65%), #080d17; overflow:hidden}
.finish{position:absolute; right:12px; top:10px; bottom:10px; width:6px; background:repeating-linear-gradient(180deg,#eee 0 12px,#111 12px 24px); filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}

/* grid lanes */
#lanes{position:absolute; inset:10px 26px 10px 10px; display:grid; gap:var(--laneGap); grid-template-columns:repeat(var(--cols),1fr); grid-auto-rows:var(--laneH); align-content:start}
.lane{position:relative; border-radius:14px; border:1px solid var(--line); background:linear-gradient(180deg,#121a31,#0f1527); overflow:hidden}
.lane.leader::after{content:""; position:absolute; inset:0; border-radius:14px; box-shadow:0 0 0 2px rgba(102,209,255,.25) inset, 0 0 24px rgba(102,209,255,.15) inset; animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* rank top-right (no overlap with name) */
.place{
  position:absolute; right:10px; top:8px; z-index:3;
  font-weight:900; color:#cfe0ff; opacity:.92; padding:2px 8px; border-radius:999px;
  background:rgba(10,20,40,.45); border:1px solid rgba(60,80,130,.35); backdrop-filter:blur(2px);
  font-size:.9rem
}

/* name label reserves space for rank */
.lane .label{
  position:absolute; left:var(--barLeft); top:10px; right:62px;
  font-weight:900; font-size:var(--nameSize); line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; z-index:2; text-shadow:0 1px 2px rgba(0,0,0,.6);
}

.progressBar{position:absolute; left:var(--barLeft); right:14px; bottom:12px; height:10px; background:linear-gradient(90deg, rgba(124,252,255,.22), rgba(179,139,255,.14)); border:1px solid #24304a; border-radius:999px}
.car{position:absolute; bottom:7px; transform:translate(-50%,0); width:44px; height:26px; border-radius:9px; border:1px solid rgba(255,255,255,.25); box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 22px rgba(124,252,255,.25) inset; display:grid; place-items:center; font-weight:900; transition:left var(--anim) cubic-bezier(.2,.8,0,1), filter .15s, transform .15s}
.car.bump{filter:brightness(1.25); transform:translate(-50%,-5%) scale(1.05)}

/* right */
.right .row{justify-content:flex-start}
.big{font-size:1.05rem; font-weight:900}

/* announcer ribbon */
#announce{position:absolute; left:50%; top:10px; transform:translateX(-50%); background:linear-gradient(180deg,#0f1a33,#0b1222); border:1px solid #2a3656; color:#dbe7ff; padding:8px 14px; border-radius:999px; font-weight:900; opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:3; white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.35)}
#announce.show{opacity:1}

/* modals */
#modal,#settings,#drinkModal{position:fixed; inset:0; background:rgba(6,8,13,.66); display:none; align-items:center; justify-content:center; z-index:60}
.modalInner{width:min(860px,94vw); border-radius:22px; border:1px solid #2a3143; padding:24px; background:radial-gradient(520px 220px at 100% -10%, rgba(102,209,255,.16), transparent 70%), linear-gradient(180deg, #0f1422, #0b0f19); box-shadow:0 40px 90px rgba(0,0,0,.7); transform:perspective(1200px) rotateX(6deg) scale(.98); animation:pop .18s ease-out forwards}
@keyframes pop{to{transform:perspective(1200px) rotateX(0) scale(1)}}
.modalHead{display:flex; justify-content:space-between; align-items:center; gap:10px}
.modalTitle{display:flex; align-items:center; gap:16px; font-size:2rem; font-weight:900}
.modalBadge{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:#0a1a33; border:1px solid #21335a; box-shadow:inset 0 0 18px rgba(102,209,255,.25)}
.desc{color:var(--text); margin:12px 0 14px; font-size:1.22rem; line-height:1.45}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
.chip{border:1px solid #2a3354; background:#0f162b; color:#d6e4ff; padding:8px 12px; border-radius:999px; font-weight:800; font-size:1rem}
.ribbonTurn{margin-top:6px; font-size:1.05rem; color:#cfe0ff}

/* drink modal */
.drinkList{display:flex; flex-direction:column; gap:10px; margin:12px 0}
.drinkItem{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg,#151b2e,#0f1424); border:1px solid #2a3150; border-radius:12px; padding:12px
}
.drinkItem .who{font-weight:900; flex:1; min-width:0; word-break:break-word}
.drinkItem .why{color:#cfe0ff; white-space:nowrap}
.timerBar{height:8px; background:#1a2136; border:1px solid #2a3150; border-radius:999px; overflow:hidden}
.timerFill{height:100%; width:0%; background:linear-gradient(90deg,#66d1ff,#b38bff)}

/* floating dock & fx */
#dock{position:fixed; right:16px; bottom:16px; display:flex; gap:10px; z-index:61}
#fx{position:fixed; inset:0; pointer-events:none; z-index:59}

@media (max-width:1100px){
  .app{grid-template-columns:1fr 1fr; grid-template-areas:"left right" "center center"; gap:12px}
  .left{grid-area:left} .right{grid-area:right} .center{grid-area:center}
}
@media (max-width:800px){
  .app{grid-template-columns:1fr}
  #dock .btn{padding:12px 16px; font-size:1rem; border-radius:14px}
}
/* --- Turn highlight (gold glow) --- */
:root{
  --gold:#ffd166;
  --gold-dim:#7a5a12;
}
.p.turn{
  border-color: rgba(255, 209, 102, .65);
  box-shadow:
    0 0 0 1px rgba(255, 209, 102, .28) inset,
    0 8px 22px rgba(255, 209, 102, .12),
    0 0 24px rgba(255, 209, 102, .18);
  position: relative;
}
.p.turn::after{
  content: "YOUR TURN";
  position: absolute;
  right: 10px; top: 8px;
  font-size: .72rem; font-weight: 900; letter-spacing: .2px;
  color: #0a0f19;
  background: linear-gradient(180deg, var(--gold), #e7a72e);
  border: 1px solid #d5911d;
  padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* make the name+rank look crisp */
.p .name .rank{
  color: var(--muted);
  font-weight: 900;
  margin-left: 4px;
}