:root {
  --panel: rgba(16, 14, 36, 0.86);
  --panel-solid: #15122e;
  --border: #ff8fd0;
  --text: #ffffff;
  --muted: #b9b3e0;
  --gold: #ffd25a;
  --orange: #ffa53c;
  --purple: #8c6cff;
  --pink: #ff6fb9;
  --bg: #0b1424;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; -webkit-user-select: none; user-select: none; touch-action: none; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
.panel { background: var(--panel); border: 2.5px solid var(--border); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }

/* name tags over leaders */
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 15px; font-weight: 700; text-shadow: 0 2px 3px rgba(0,0,0,.8), 0 0 2px #000; text-align: center; }
.tag .crown { display: block; font-size: 22px; line-height: 1; }
.tag.vip .nm { color: var(--gold); }
.tag.me .nm { color: #fff; }
#fxLayer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.fxp { position: absolute; font-size: 26px; will-change: transform, opacity; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
#feed { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; gap: 6px; max-width: 46vw; }
#feed div { background: rgba(10, 10, 25, 0.55); padding: 3px 10px; border-radius: 8px; font-size: 15px; animation: feedIn .25s ease-out; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-12px); } }
#board { position: absolute; right: 12px; top: 12px; width: 230px; padding: 8px 12px 10px; }
#board .title { color: var(--gold); font-size: 18px; text-align: center; margin-bottom: 4px; }
#boardRows .r { display: flex; justify-content: space-between; font-size: 14.5px; line-height: 1.55; }
#boardRows .r.me { color: #7ff0ff; }
#boardRows .r .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
#minimap { position: absolute; left: 12px; bottom: 12px; width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--border); background: rgba(8, 22, 34, 0.8); }
#lengthBox { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 40px 4px; text-align: center; }
#lengthText { font-size: 26px; font-weight: 700; }
#rankText { color: var(--gold); font-size: 14px; margin-top: -2px; }
#powerBox { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); background: var(--panel); border-radius: 12px; padding: 6px 14px; display: flex; align-items: center; gap: 8px; border: 2px solid #6fd0ff; }
#powerBox .bar { width: 110px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
#powerBox .bar i { display: block; height: 100%; background: #6fd0ff; }
#announce { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); text-align: center; font-family: 'Titan One', 'Fredoka', sans-serif; font-size: 30px; text-shadow: 0 3px 0 rgba(0,0,0,.5); pointer-events: none; transition: opacity .4s; opacity: 0; white-space: nowrap; }
#announce.on { opacity: 1; }
#hudTopRight { position: absolute; right: 252px; top: 12px; display: flex; gap: 8px; }
.iconBtn { background: var(--panel); border: 2px solid var(--border); color: #fff; border-radius: 10px; width: 42px; height: 42px; font-size: 20px; }
#boostBtn { position: absolute; right: 22px; bottom: 26px; width: 96px; height: 96px; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle at 40% 35%, #ff9ad6, #ff4fa8); color: #fff; font-family: 'Titan One', sans-serif; font-size: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
#boostBtn.on { transform: scale(0.94); filter: brightness(1.2); }

/* menu */
#menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(10, 16, 40, 0.35), rgba(5, 8, 20, 0.75)); overflow-y: auto; }
#menuCard { width: min(560px, 100%); padding: 18px 20px 14px; text-align: center; max-height: calc(100vh - 32px); overflow-y: auto; }
.logo { font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; font-size: 64px; margin: 0; letter-spacing: 2px; background: linear-gradient(180deg, #fff 0%, #ffd0ec 45%, #ff6fb9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6b2f8f) drop-shadow(0 0 18px rgba(255, 111, 185, 0.5)); }
.sub { color: var(--muted); margin: 2px 0 12px; font-size: 16px; }
#nameInput { width: 100%; font: inherit; font-size: 22px; text-align: center; padding: 10px; border-radius: 12px; border: 2.5px solid #5d4fa8; background: #0f0c25; color: #fff; outline: none; }
#nameInput:focus { border-color: var(--border); }
#walletRow { display: flex; gap: 8px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.chip { background: #221c47; border-radius: 20px; padding: 4px 12px; font-size: 14px; color: var(--muted); }
.chip b { color: #fff; }
.chip.gold b { color: var(--gold); }
.tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.tab { flex: 1; padding: 8px 4px; border-radius: 10px; border: 2px solid #3b3270; background: #1c1740; color: var(--muted); font-size: 16px; }
.tab.on { background: var(--purple); border-color: #b9a6ff; color: #fff; }
#tabBody { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px; margin-bottom: 12px; }
.card { position: relative; background: #1d1844; border: 2.5px solid #342c6b; border-radius: 12px; padding: 6px 4px 6px; cursor: pointer; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.card:hover { border-color: #7d6cd8; }
.card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 210, 90, 0.35); }
.card.locked { opacity: 0.7; }
.card img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; }
.card .nm { font-size: 14px; color: #fff; }
.card .cost { font-size: 12px; color: var(--muted); }
.card .cost.gold { color: var(--gold); }
.card .big { font-size: 40px; line-height: 72px; height: 72px; }
.card .lock { position: absolute; top: 4px; right: 6px; font-size: 14px; }
.swatch { display: flex; gap: 2px; height: 72px; align-items: center; }
.swatch i { width: 11px; height: 44px; border-radius: 6px; display: block; }
.bar2 { width: 86%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.bar2 i { display: block; height: 100%; background: var(--pink); }
.bigBtn { width: 100%; padding: 12px; border: none; border-radius: 14px; font-family: 'Titan One', sans-serif; font-size: 30px; color: #fff; background: linear-gradient(180deg, #ff8fd0, #ff4fa8); box-shadow: 0 5px 0 #a8226a; letter-spacing: 1px; }
.bigBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8226a; }
.bigBtn:disabled { filter: grayscale(0.7); opacity: 0.6; }
.smallBtn { padding: 10px 18px; border-radius: 12px; border: 2px solid #5d4fa8; background: #1c1740; color: #fff; font-size: 18px; }
.help { color: var(--muted); font-size: 13px; margin-top: 8px; }
#status { color: var(--muted); font-size: 13px; margin-top: 4px; min-height: 16px; }

#outScreen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 8, 20, 0.45); }
.outCard { width: min(380px, 100%); padding: 20px; text-align: center; }
.outTitle { font-family: 'Titan One', sans-serif; font-size: 40px; color: var(--pink); }
#outWhy { color: var(--muted); margin: 4px 0 12px; }
.outStats { display: flex; gap: 10px; margin-bottom: 14px; }
.outStats div { flex: 1; background: #1d1844; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; }
.outStats span { color: var(--muted); font-size: 13px; }
.outStats b { font-size: 28px; }
.outBtns { display: flex; gap: 8px; }
.outBtns .bigBtn { font-size: 22px; }

#sideBtns { position: absolute; left: 12px; bottom: 176px; display: flex; flex-direction: column; gap: 8px; width: 150px; }
.wallet { background: var(--panel); border: 2px solid var(--border); border-radius: 10px; padding: 4px 8px; display: flex; justify-content: space-between; font-size: 14px; }
.wallet b { color: var(--gold); }
.sideBtn { pointer-events: auto; border: none; border-radius: 10px; padding: 9px 6px; color: #fff; font-family: 'Titan One', sans-serif; font-size: 15px; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.sideBtn.purple { background: linear-gradient(180deg, #a48bff, #7656f0); box-shadow: 0 4px 0 #4b2fb0; }
.sideBtn.orange { background: linear-gradient(180deg, #ffc35a, #ff9a2e); box-shadow: 0 4px 0 #b8611a; }
.sideBtn:active { transform: translateY(2px); }
#menuCard { position: relative; }
#closeMenu { position: absolute; right: 10px; top: 10px; display: none; width: 36px; height: 36px; font-size: 16px; }
#menu.ingame { background: rgba(5, 8, 20, 0.35); }
#menu.ingame #closeMenu { display: block; }
#menu.ingame .logo, #menu.ingame .sub, #menu.ingame .row, #menu.ingame #playBtn, #menu.ingame .help, #menu.ingame #status { display: none; }
#menu.ingame #walletRow { margin-top: 4px; }
@media (max-width: 700px) { #sideBtns { width: 104px; bottom: 126px; } .sideBtn { font-size: 12px; padding: 7px 4px; } .wallet { font-size: 12px; flex-direction: column; } }
#loading { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 50; }
#loadText { color: var(--muted); }
#toast { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); background: var(--panel-solid); border: 2px solid var(--gold); border-radius: 12px; padding: 8px 16px; z-index: 60; }

@media (max-width: 700px) {
  #board { width: 160px; padding: 6px 8px; }
  #board .title { font-size: 14px; }
  #boardRows .r { font-size: 12px; line-height: 1.45; }
  #boardRows .r .n { max-width: 100px; }
  #hudTopRight { right: 180px; }
  #minimap { width: 104px; height: 104px; }
  #lengthBox { padding: 4px 18px 3px; bottom: 10px; }
  #lengthText { font-size: 19px; }
  #feed { max-width: 40vw; }
  #feed div { font-size: 12px; }
  .logo { font-size: 48px; }
  #announce { font-size: 20px; }
}

/* v4: more tabs, quests, boards, showcase */
.tabs { flex-wrap: wrap; }
.tab { flex: 1 1 auto; min-width: 84px; font-size: 14px; padding: 6px 4px; }
#tabBody.list { display: flex; flex-direction: column; gap: 8px; }
.wide { grid-column: 1 / -1; }
.note { color: var(--muted); font-size: 13px; text-align: left; padding: 2px 4px; }
.note b { color: #fff; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 7px 4px; border-radius: 10px; border: 2px solid #3b3270; background: #1c1740; color: var(--muted); font-size: 14px; }
.seg button.on { background: #ff6fb9; border-color: #ffb3dd; color: #fff; }
.qhead { display: flex; justify-content: space-between; color: var(--gold); font-size: 14px; padding: 0 4px; }
.quest { display: flex; align-items: center; gap: 10px; background: #1d1844; border: 2px solid #342c6b; border-radius: 12px; padding: 8px 10px; text-align: left; }
.quest.done { border-color: #5fd38a; }
.qslot { font-family: 'Titan One', sans-serif; font-size: 11px; padding: 4px 6px; border-radius: 8px; width: 64px; text-align: center; }
.qslot.easy { background: #2f9e5b; } .qslot.medium { background: #d38a1f; } .qslot.hard { background: #c73b6c; }
.qmain { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.qmain .bar2 { width: 100%; }
.qtext { font-size: 15px; }
.qprog { font-size: 12px; color: var(--muted); }
.qreward { color: var(--gold); font-size: 14px; white-space: nowrap; }
.boxBtn { font-size: 18px; padding: 10px; }
.brow { display: flex; justify-content: space-between; align-items: center; background: #1d1844; border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.brow.me { outline: 2px solid #7ff0ff; }
.brow small { color: var(--muted); font-size: 11px; margin-left: 4px; }
.pickBtn { margin-left: 8px; border: none; border-radius: 8px; padding: 3px 10px; background: var(--purple); color: #fff; font-size: 12px; }
.sideBtn.pink { background: linear-gradient(180deg, #ff9ad6, #ff5fae); box-shadow: 0 4px 0 #a8226a; }
.sideBtn.blue { background: linear-gradient(180deg, #7fd0ff, #3f9cf0); box-shadow: 0 4px 0 #1f5fa8; }
.sideBtn .dot { background: rgba(0,0,0,.3); border-radius: 8px; padding: 0 6px; font-family: 'Fredoka', sans-serif; font-size: 12px; }
.tag .ttl { display: block; font-size: 12px; color: #ffd25a; }
.showLink { display: inline-block; margin-top: 6px; color: #9ad8ff; font-size: 14px; }
#showBar { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); background: var(--panel); border: 2px solid var(--border); border-radius: 12px; padding: 8px 14px; font-size: 14px; z-index: 20; white-space: nowrap; }
#showBar a { color: #9ad8ff; }
#showBar select { font: inherit; background: #1c1740; color: #fff; border: 1px solid #5d4fa8; border-radius: 6px; }
#sideBtns { bottom: 176px; }
@media (max-width: 700px) { .tab { min-width: 64px; font-size: 12px; } #showBar { font-size: 11px; white-space: normal; width: 92vw; } }

/* name tags like Roblox: Montserrat Heavy, parade-colour gradient, ink outline + drop shadow, VIP gold shimmer */
.tag { text-shadow: none; }
.tag .nm { display: block; font-family: 'Montserrat', 'Fredoka', sans-serif; font-weight: 900; font-size: 23px; line-height: 1.1;
  background: linear-gradient(180deg, var(--c1, #fff), var(--c2, #ddd)); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 5px #1c1434; paint-order: stroke fill; filter: drop-shadow(0 3px 0 rgba(28, 20, 52, 0.55)); }
.tag .ttl { color: #ffe178; font-size: 15px; font-weight: 700; -webkit-text-stroke: 3px #1c1434; paint-order: stroke fill; }
.tag.vipgold .nm { background: linear-gradient(110deg, #ffc428 0%, #fffac8 45%, #fffac8 55%, #ffaa1e 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; animation: vipShine 2.5s linear infinite; }
@keyframes vipShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (max-width: 700px) { .tag .nm { font-size: 17px; -webkit-text-stroke: 4px #1c1434; } }

.setrow { display: flex; justify-content: space-between; align-items: center; background: #1d1844; border-radius: 12px; padding: 10px 14px; font-size: 16px; }
.setrow input[type=range] { width: 50%; accent-color: #ff6fb9; }
.toggle { min-width: 84px; padding: 6px 12px; border-radius: 10px; border: 2px solid #5d4fa8; background: #2a2350; color: var(--muted); font-family: 'Titan One', sans-serif; }
.toggle.on { background: #3fc77a; border-color: #9cf0bf; color: #fff; }