:root {
  --bg: #07060f;
  --panel: rgba(12, 10, 28, 0.78);
  --line: rgba(140, 120, 255, 0.28);
  --cyan: #2af0ff;
  --pink: #ff2e9a;
  --yellow: #ffd400;
  --text: #ecebff;
  --dim: #9a96c8;
  --font: 'Rajdhani', 'Segoe UI', sans-serif;
  --display: 'Russo One', 'Impact', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); user-select: none; }
#view, #view canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- screens ---------- */
.screen, .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; }
.screen { background: radial-gradient(ellipse at center, rgba(7, 6, 15, 0.25), rgba(7, 6, 15, 0.82)); backdrop-filter: blur(2px); }
.overlay { background: rgba(5, 4, 12, 0.72); backdrop-filter: blur(6px); flex-direction: column; z-index: 40; animation: fadein 0.25s; }
@keyframes fadein { from { opacity: 0; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px 30px; box-shadow: 0 0 60px rgba(120, 80, 255, 0.18), inset 0 0 40px rgba(120, 80, 255, 0.06); }
h2 { font-family: var(--display); letter-spacing: 2px; margin: 0 0 14px; font-weight: 400; }
h3 { font-family: var(--display); font-weight: 400; letter-spacing: 1.5px; font-size: 15px; color: var(--cyan); margin: 16px 0 8px; }
.lbl { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin: 8px 0 4px; display: block; }
.hint { color: var(--dim); font-size: 14px; margin-top: 6px; }

/* ---------- logo ---------- */
.menu-wrap { display: flex; flex-direction: column; align-items: center; }
.logo { font-family: var(--display); font-size: clamp(54px, 9vw, 128px); letter-spacing: 4px; line-height: 1; color: #fff; position: relative;
  text-shadow: 0 0 12px var(--cyan), 0 0 40px rgba(42, 240, 255, 0.6), 4px 4px 0 var(--pink); animation: logoPulse 3s infinite; }
.logo span { color: var(--pink); text-shadow: 0 0 12px var(--pink), 0 0 40px rgba(255, 46, 154, 0.7), 4px 4px 0 var(--cyan); }
.logo::before, .logo::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; color: var(--cyan); pointer-events: none; }
.logo::before { animation: glitch 4s infinite; clip-path: inset(10% 0 60% 0); }
.logo::after { animation: glitch 4s infinite 0.15s; clip-path: inset(55% 0 15% 0); color: var(--pink); }
@keyframes glitch { 0%, 92%, 100% { opacity: 0; transform: none; } 93% { opacity: 0.8; transform: translate(-6px, 2px); } 95% { opacity: 0.8; transform: translate(5px, -2px); } 97% { opacity: 0; } }
@keyframes logoPulse { 50% { filter: brightness(1.25); } }
.tagline { letter-spacing: 6px; text-transform: uppercase; color: var(--dim); margin: 6px 0 26px; font-size: 16px; }

.menu-col { display: flex; flex-direction: column; gap: 10px; width: min(380px, 90vw); }
.row2 { display: flex; gap: 10px; justify-content: center; }
.row2 > * { flex: 1; }
.joinrow { display: flex; gap: 10px; }
.joinrow input { flex: 1; text-align: center; font-family: var(--display); font-size: 26px; letter-spacing: 10px; text-transform: uppercase; }
#menuMsg { min-height: 22px; text-align: center; color: var(--yellow); }
.padstatus { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--dim); font-size: 15px; letter-spacing: 1px; }

input { background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 14px; font-family: var(--font); font-size: 18px; font-weight: 600; outline: none; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 14px rgba(42, 240, 255, 0.35); }
input[type='range'] { padding: 0; accent-color: var(--cyan); }

.btn { font-family: var(--display); font-size: 16px; letter-spacing: 1px; color: var(--text); background: linear-gradient(180deg, rgba(60, 50, 120, 0.55), rgba(25, 20, 60, 0.75));
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; cursor: pointer; transition: transform 0.08s, box-shadow 0.15s, border-color 0.15s; white-space: nowrap; }
.btn:hover, .btn.focus { border-color: var(--cyan); box-shadow: 0 0 18px rgba(42, 240, 255, 0.45); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn.big { font-size: 21px; padding: 15px 18px; }
.btn.small { font-size: 13px; padding: 8px 11px; }
.btn.primary { background: linear-gradient(180deg, #ff3fa8, #b0127a); border-color: #ff7cc6; box-shadow: 0 0 22px rgba(255, 46, 154, 0.45); }
.btn.primary:hover, .btn.primary.focus { box-shadow: 0 0 32px rgba(255, 46, 154, 0.8); border-color: #fff; }
.btn.danger { background: linear-gradient(180deg, rgba(140, 20, 40, 0.7), rgba(70, 10, 20, 0.8)); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.focus { outline: 2px solid var(--yellow) !important; outline-offset: 3px; }

/* ---------- lobby ---------- */
.lobby { width: min(1100px, 94vw); max-height: 92vh; overflow: auto; }
.lobby-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.lobby-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.code { font-family: var(--display); font-size: 64px; letter-spacing: 16px; color: var(--yellow); text-shadow: 0 0 22px rgba(255, 212, 0, 0.6); line-height: 1; }
.code.offline { font-size: 34px; letter-spacing: 6px; color: var(--dim); text-shadow: none; }
.lobby-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); margin-bottom: 6px; font-size: 18px; font-weight: 700; }
.prow .sw { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); flex: none; }
.prow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-family: var(--display); font-size: 10px; letter-spacing: 1px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: var(--dim); }
.tag.host { background: rgba(255, 212, 0, 0.18); color: var(--yellow); }
.tag.you { background: rgba(42, 240, 255, 0.18); color: var(--cyan); }
.tag.couch { background: rgba(124, 255, 79, 0.16); color: #9cff6a; }
.prow .x { cursor: pointer; color: var(--dim); padding: 0 4px; }
.seatrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px dashed var(--line); margin-bottom: 6px; font-weight: 700; }
.seatrow .dev { color: var(--dim); font-weight: 600; flex: 1; }
#mapGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.maptile { position: relative; aspect-ratio: 3/2; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background-size: cover; background-position: center; filter: saturate(0.8) brightness(0.75); transition: 0.15s; }
.maptile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-family: var(--display); font-size: 11px; letter-spacing: 1px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.maptile.sel { border-color: var(--yellow); filter: none; box-shadow: 0 0 16px rgba(255, 212, 0, 0.5); }
.maptile:hover, .maptile.focus { filter: none; }
.maptile.random { background: linear-gradient(135deg, #2a1050, #0a2a50); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.settings-row { display: flex; gap: 22px; margin: 10px 0; flex-wrap: wrap; }
.seg { display: flex; gap: 4px; }
.seg .btn { padding: 7px 12px; font-size: 13px; }
.seg .btn.sel { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 12px rgba(255, 212, 0, 0.35); }
.chatbox { margin: 10px 0; }
#lobbyChat { height: 110px; overflow-y: auto; background: rgba(0, 0, 0, 0.3); border-radius: 10px 10px 0 0; padding: 8px 10px; font-size: 15px; font-weight: 600; }
#lobbyChat .sys { color: var(--dim); font-style: italic; }
.chatbox input { width: 100%; border-radius: 0 0 10px 10px; font-size: 15px; }
.waiting { text-align: center; color: var(--dim); font-size: 18px; padding: 14px; }
body:not(.is-host) .hostonly { display: none !important; }
body.is-host .guestonly { display: none !important; }

/* ---------- customize ---------- */
.cust { display: grid; grid-template-columns: 380px 1fr; gap: 24px; width: min(1000px, 94vw); }
.cust-preview { position: relative; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(120, 80, 255, 0.25), rgba(0, 0, 0, 0.4)); min-height: 440px; }
#previewHolder, #previewHolder canvas { width: 100%; height: 100%; display: block; }
.cust-for { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-family: var(--display); letter-spacing: 2px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { padding: 7px 11px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); cursor: pointer; font-weight: 700; font-size: 15px; text-transform: capitalize; }
.opt.sel { border-color: var(--yellow); color: var(--yellow); }
.opt.swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.opt.swatch.sel { outline: 3px solid #fff; outline-offset: 2px; }
.opt:hover, .opt.focus { border-color: var(--cyan); }
input[type='color'].opt { padding: 0; width: 34px; height: 34px; border-radius: 50%; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#scorebar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
.sb { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 10px; background: rgba(5, 4, 15, 0.6); border-bottom: 3px solid var(--c); min-width: 74px; }
.sb .n { font-weight: 700; font-size: 14px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb .pips { display: flex; gap: 3px; margin-top: 3px; }
.sb .pip { width: 9px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); transform: rotate(45deg); }
.sb .pip.on { background: var(--c); box-shadow: 0 0 8px var(--c); }
.sb.dead { opacity: 0.35; }
.roundlbl { font-family: var(--display); color: var(--dim); font-size: 13px; letter-spacing: 2px; margin-right: 6px; }
#killfeed { position: absolute; top: 14px; right: 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.kf { background: rgba(5, 4, 15, 0.7); padding: 5px 10px; border-radius: 8px; font-weight: 700; font-size: 15px; animation: kfin 0.25s; }
.kf .how { color: var(--dim); font-size: 12px; margin: 0 6px; text-transform: uppercase; letter-spacing: 1px; }
@keyframes kfin { from { transform: translateX(40px); opacity: 0; } }
#seatHud { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; gap: 14px; justify-content: space-between; }
.seathud { width: 300px; background: rgba(5, 4, 15, 0.66); border-radius: 12px; padding: 10px 14px; border-left: 4px solid var(--c); }
.seathud .top { display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; }
.seathud .p { font-family: var(--display); color: var(--c); margin-right: 6px; }
.hpbar { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: 6px 0; position: relative; }
.hpbar i { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, var(--c), #fff); box-shadow: 0 0 12px var(--c); transition: width 0.15s; }
.hpbar b { position: absolute; right: 6px; top: -2px; font-size: 13px; color: #fff; text-shadow: 0 0 4px #000; }
.seathud .wpn { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; color: var(--dim); }
.seathud .wpn .ammo { color: var(--yellow); font-family: var(--display); }
.cds { display: flex; gap: 8px; margin-top: 6px; font-size: 12px; letter-spacing: 1px; color: var(--dim); }
.cd { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.cd i { position: absolute; inset: 0; background: var(--cyan); }
.cd.block i { background: #b88cff; }
.mycards { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; font-size: 15px; }
#banner { position: absolute; top: 38%; left: 0; right: 0; text-align: center; font-family: var(--display); font-size: 120px; color: #fff; pointer-events: none;
  text-shadow: 0 0 20px var(--cyan), 0 0 60px var(--pink); opacity: 0; }
#banner.show { animation: bannerPop 1s forwards; }
#banner.fight { color: var(--yellow); text-shadow: 0 0 20px var(--yellow), 0 0 70px var(--pink); }
#banner.win { font-size: 72px; }
#banner .sub { display: block; font-size: 26px; letter-spacing: 6px; color: var(--dim); text-shadow: none; }
@keyframes bannerPop { 0% { opacity: 0; transform: scale(2.4); } 15% { opacity: 1; transform: scale(0.95); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
#banner.hold { animation: bannerHold 2.4s forwards; }
@keyframes bannerHold { 0% { opacity: 0; transform: scale(2); } 10% { opacity: 1; transform: scale(0.96); } 18% { transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; } }
#spectating { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); padding: 8px 16px; border-radius: 10px; letter-spacing: 2px; font-weight: 700; color: var(--dim); }
#chatlog { position: absolute; left: 16px; bottom: 150px; width: 380px; font-weight: 700; font-size: 15px; text-shadow: 0 1px 3px #000; }
#chatlog div { animation: chatfade 9s forwards; }
@keyframes chatfade { 85% { opacity: 1; } 100% { opacity: 0; } }
#gameChat { position: fixed; left: 16px; bottom: 120px; width: 380px; z-index: 30; }

#labels, #fxText { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
body.mode-menu #labels, body.mode-menu #fxText { display: none; }
.nameplate { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; }
.np-name { font-weight: 700; font-size: 14px; color: #fff; text-shadow: 0 0 6px var(--c), 0 1px 2px #000; }
.np-name .seat { font-family: var(--display); color: var(--c); margin-right: 4px; font-size: 12px; }
.np-hp { width: 54px; height: 5px; margin: 2px auto 0; background: rgba(0, 0, 0, 0.55); border-radius: 3px; overflow: hidden; }
.np-hp i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 6px var(--c); transition: width 0.15s; }
.np-w { font-size: 11px; color: var(--dim); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cratelabel { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 12px; letter-spacing: 1px; text-shadow: 0 0 8px currentColor, 0 1px 2px #000; white-space: nowrap; }
.fxnum { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 20px; text-shadow: 0 0 8px currentColor, 0 2px 3px #000; }
.fxnum.big { font-size: 30px; }

/* ---------- cards ---------- */
.cards-title { font-family: var(--display); font-size: 46px; letter-spacing: 3px; text-shadow: 0 0 20px var(--c, var(--pink)); color: #fff; }
.cards-title .who { color: var(--c); }
.cards-sub { color: var(--dim); letter-spacing: 3px; margin: 4px 0 28px; text-transform: uppercase; }
.cards-row { display: flex; gap: 30px; perspective: 1100px; }
.card { width: 230px; height: 330px; border-radius: 18px; padding: 20px 18px; cursor: pointer; position: relative; text-align: center;
  background: linear-gradient(160deg, rgba(40, 30, 80, 0.95), rgba(10, 8, 24, 0.97)); border: 2px solid var(--rc);
  box-shadow: 0 0 28px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 40px color-mix(in srgb, var(--rc) 18%, transparent);
  transform-style: preserve-3d; transition: transform 0.12s, box-shadow 0.2s; animation: cardIn 0.55s backwards; }
.card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 3s infinite; pointer-events: none; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes cardIn { from { transform: rotateY(180deg) translateY(80px) scale(0.6); opacity: 0; } }
.card:hover, .card.focus { box-shadow: 0 0 50px var(--rc), inset 0 0 40px color-mix(in srgb, var(--rc) 30%, transparent); }
.card.focus { outline: none !important; transform: translateY(-14px) scale(1.04); }
.card .c-icon { font-size: 66px; margin: 16px 0 8px; filter: drop-shadow(0 0 14px var(--rc)); transform: translateZ(40px); }
.card .c-name { font-family: var(--display); font-size: 23px; letter-spacing: 1px; transform: translateZ(30px); }
.card .c-rar { font-size: 12px; letter-spacing: 4px; color: var(--rc); margin: 4px 0 14px; font-weight: 700; }
.card ul { list-style: none; padding: 0; margin: 0; font-size: 17px; font-weight: 700; }
.card li { padding: 3px 0; }
.card li.good { color: #8dff9a; }
.card li.bad { color: #ff7a8a; }
.card.picked { animation: cardPick 0.6s forwards; }
.card.discard { animation: cardOut 0.4s forwards; }
@keyframes cardPick { 50% { transform: scale(1.18) translateY(-30px); box-shadow: 0 0 90px var(--rc); } 100% { transform: scale(0.2) translateY(400px); opacity: 0; } }
@keyframes cardOut { to { transform: translateY(80px) scale(0.8); opacity: 0; } }
.cards-status { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.cstat { padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border-bottom: 3px solid var(--c); font-weight: 700; }
.cstat.done::after { content: ' ✔'; color: #8dff9a; }
.cstat.win::after { content: ' 👑'; }
.cards-timer { width: 420px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; margin-top: 18px; overflow: hidden; }
.cards-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--yellow)); }

/* ---------- match end ---------- */
.me-crown { font-size: 80px; animation: bob 1.4s infinite; }
@keyframes bob { 50% { transform: translateY(-12px); } }
.me-winner { font-family: var(--display); font-size: 80px; color: var(--c); text-shadow: 0 0 30px var(--c); }
.me-sub { letter-spacing: 10px; color: var(--dim); margin-bottom: 20px; }
.me-table { border-collapse: collapse; margin-bottom: 22px; min-width: 520px; font-size: 18px; font-weight: 700; }
.me-table td, .me-table th { padding: 7px 14px; text-align: left; }
.me-table th { color: var(--dim); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.me-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); }
.me-table .cardlist { font-size: 16px; }

#pause h2 { font-size: 48px; }
.howto { width: min(820px, 94vw); max-height: 90vh; overflow: auto; font-size: 17px; font-weight: 600; }
.ctl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ctl-grid td { padding: 3px 10px 3px 0; }
.ctl-grid td:first-child { color: var(--yellow); font-family: var(--display); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }

#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(120px); background: rgba(10, 8, 25, 0.92); border: 1px solid var(--cyan); padding: 12px 20px; border-radius: 12px; font-weight: 700; z-index: 100; transition: transform 0.25s; }
#toast.show { transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .lobby-body, .cust, .ctl-grid { grid-template-columns: 1fr; }
  .cards-row { gap: 12px; }
  .card { width: 30vw; height: 300px; }
}

/* ---------- generated art (transparent PNG/WebP) ---------- */
.logo-img { width: min(760px, 84vw); filter: drop-shadow(0 0 24px rgba(255, 46, 154, 0.35)) drop-shadow(0 0 40px rgba(42, 240, 255, 0.25)); opacity: 0.88; margin-bottom: 4px; }
.btn .ico { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; margin: -8px 8px -6px -4px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25)); }
.btn.big .ico { width: 38px; height: 38px; margin-top: -10px; margin-bottom: -8px; }
.btn.small .ico { width: 22px; height: 22px; }
.card { height: 380px; }
.card .c-art { width: 170px; height: 170px; margin: 2px auto 8px; background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: translateZ(40px); filter: drop-shadow(0 0 16px var(--rc)) saturate(1.1); animation: artFloat 3s ease-in-out infinite; }
@keyframes artFloat { 50% { transform: translateZ(40px) translateY(-6px); } }
.card .c-name { margin-top: -4px; }
.kf .wico { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; margin: 0 6px; }
.seathud .wpn .wico { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin: -8px 4px -6px 0; }
.cratelabel img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-right: 3px; }
.mycards img, .cstat img, .cardlist img { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)); }

/* ---------- palette: match the logo (electric cyan + hot pink) ---------- */
:root { --line: rgba(42, 220, 255, 0.3); --panel: rgba(6, 12, 30, 0.82); }
.panel { box-shadow: 0 0 60px rgba(42, 220, 255, 0.12), 0 0 90px rgba(255, 46, 154, 0.08), inset 0 0 40px rgba(42, 220, 255, 0.05); }
.btn { background: linear-gradient(180deg, rgba(18, 78, 130, 0.7), rgba(8, 24, 58, 0.88)); border-color: rgba(42, 220, 255, 0.38); }
.btn:hover, .btn.focus { border-color: #7ff6ff; box-shadow: 0 0 20px rgba(42, 240, 255, 0.55); }
.btn.primary { background: linear-gradient(180deg, #ff3fa8, #b0127a); border-color: #ff8ccd; }
.btn.danger { background: linear-gradient(180deg, rgba(150, 20, 60, 0.75), rgba(70, 8, 30, 0.85)); border-color: rgba(255, 80, 140, 0.4); }
input { border-color: rgba(42, 220, 255, 0.3); background: rgba(2, 8, 22, 0.6); }
.focus { outline-color: #7ff6ff !important; }
.code { color: var(--cyan); text-shadow: 0 0 22px rgba(42, 240, 255, 0.65), 3px 3px 0 rgba(255, 46, 154, 0.6); }
.maptile.sel { border-color: var(--pink); box-shadow: 0 0 16px rgba(255, 46, 154, 0.6); }
.seg .btn.sel { border-color: var(--pink); color: #fff; background: linear-gradient(180deg, rgba(255, 63, 168, 0.55), rgba(120, 10, 80, 0.75)); box-shadow: 0 0 12px rgba(255, 46, 154, 0.45); }
.tag.host { background: rgba(255, 46, 154, 0.2); color: #ff8ccd; }
#lobbyChat { background: rgba(2, 8, 22, 0.5); }

/* join row: keep inside the column */
.joinrow input { min-width: 0; width: 0; }
.joinrow .btn { flex: none; }

/* ---------- customizer ---------- */
.cust { display: grid; grid-template-columns: 400px 1fr; gap: 26px; width: min(1080px, 95vw); max-height: 92vh; }
.cust-left { display: flex; flex-direction: column; gap: 12px; }
.cust-preview { flex: 1; min-height: 460px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 62%, rgba(42, 220, 255, 0.18), rgba(255, 46, 154, 0.08) 45%, rgba(0, 0, 0, 0.5) 75%); }
.cust-for { color: var(--cyan); text-shadow: 0 0 10px rgba(42, 240, 255, 0.6); }
.cust-opts { display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab { font-family: var(--display); font-size: 15px; letter-spacing: 1px; color: var(--dim); background: none; border: none; border-bottom: 3px solid transparent; padding: 10px 16px; cursor: pointer; }
.tab:hover, .tab.focus { color: #fff; }
.tab.sel { color: #fff; border-bottom-color: var(--pink); text-shadow: 0 0 10px rgba(255, 46, 154, 0.7); }
#custBody { overflow-y: auto; padding-right: 6px; }
.cust-row { margin-bottom: 16px; }
.cust-row .opts { gap: 8px; }
.cust .opt { padding: 9px 14px; border-radius: 10px; background: rgba(18, 60, 110, 0.35); border: 1px solid var(--line); font-size: 16px; display: inline-flex; align-items: center; gap: 8px; transition: 0.12s; }
.cust .opt:hover { border-color: #7ff6ff; box-shadow: 0 0 12px rgba(42, 240, 255, 0.35); }
.cust .opt.sel { border-color: var(--pink); color: #fff; background: rgba(255, 46, 154, 0.22); box-shadow: 0 0 14px rgba(255, 46, 154, 0.45); }
.cust .opt.swatch { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); border: 2px solid rgba(255, 255, 255, 0.15); }
.cust .opt.swatch.sel { outline: 3px solid #fff; outline-offset: 2px; border-color: transparent; }
.cust .opt.swatch.custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.cust .opt.swatch.custom::after { content: '+'; position: absolute; inset: 7px; border-radius: 50%; background: var(--c, #222); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; text-shadow: 0 0 4px #000; pointer-events: none; }
.cust .opt.swatch.custom input { position: absolute; inset: -6px; width: 60px; height: 60px; opacity: 0; cursor: pointer; border: none; padding: 0; }
.pchip, .ochip { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex: none; }
.p-solid { background: var(--c1); }
.p-twotone { background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%); }
.p-stripes, .p-flow { background: repeating-linear-gradient(0deg, var(--c1) 0 4px, var(--c2) 4px 7px); }
.p-hologram { background: var(--c1); opacity: 0.5; box-shadow: 0 0 8px var(--c1); }
.p-shadow { background: #07070c; box-shadow: 0 0 0 2px var(--c1); }
.p-rainbow { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.p-chrome { background: linear-gradient(160deg, #fff, #2af0ff 40%, #10102a 52%, #ff2e9a 64%, #1a0a20); }
.ochip { background: #888; box-shadow: inset 0 0 0 4px #888; }
.o-none { background: #444; box-shadow: none; }
.o-neon { background: #222; box-shadow: 0 0 0 3px var(--c2), 0 0 8px var(--c2); }
.o-ink { background: #888; box-shadow: 0 0 0 3px #000; }
.o-white { background: #444; box-shadow: 0 0 0 3px #fff; }
.o-gold { background: #444; box-shadow: 0 0 0 3px #ffc830; }

/* color rows: uniform wrapping grid of circles; custom picker matches */
.cust-opts { min-width: 0; }
.cust-row .opts:has(.swatch) { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 10px; }
.cust .opt.swatch { width: 34px; height: 34px; border-radius: 50% !important; padding: 0; box-shadow: 0 0 8px var(--c); }
.cust .opt.swatch.custom { background: conic-gradient(#ff3b3b, #ffd400, #7cff4f, #00e5ff, #3b7bff, #ff2e88, #ff3b3b); box-shadow: 0 0 8px rgba(255, 255, 255, 0.25); border: none; }
.cust .opt.swatch.custom::after { content: '+'; inset: 4px; border-radius: 50%; background: var(--c, #1a1a2a); font-size: 18px; line-height: 1; }
.cust .opt.swatch.custom.sel::after { content: ''; }
.cust .opt.swatch.custom input { inset: 0; width: 100%; height: 100%; border-radius: 50%; }

/* =====================================================================
   ARCADE UI — flat slanted plates, hard lips, no gradients/hairlines.
   (Overrides the earlier soft styles above.)
   ===================================================================== */
:root {
  --plate: #121b33;
  --plate-lip: #070c1a;
  --plate-text: #dff6ff;
  --pink-lip: #9c0f57;
  --cyan-lip: #0f8796;
  --slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --cut: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

/* buttons */
.btn, .btn.primary, .btn.danger, .seg .btn {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 15px;
  color: var(--plate-text); background: var(--plate); border: none; border-radius: 0;
  border-bottom: 5px solid var(--plate-lip); clip-path: var(--slant);
  padding: 12px 22px 10px; box-shadow: none; transform: none; transition: background 0.08s, color 0.08s, transform 0.06s, border-width 0.06s;
}
.btn.big { font-size: 19px; padding: 15px 24px 13px; }
.btn.small { font-size: 12px; padding: 8px 14px 6px; border-bottom-width: 4px; }
.btn.primary { background: var(--pink); color: #fff; border-bottom-color: var(--pink-lip); }
.btn.danger { background: #3a0d1f; color: #ff7aa0; border-bottom-color: #1c0510; }
.btn:hover, .btn.focus, .btn.primary:hover, .btn.primary.focus, .btn.danger:hover, .seg .btn:hover {
  background: var(--cyan); color: #04121c; border-bottom-color: var(--cyan-lip); box-shadow: none; transform: translateY(-1px);
}
.btn.primary:hover, .btn.primary.focus { background: #ff5aa8; color: #fff; border-bottom-color: var(--pink-lip); }
.btn:active, .btn.primary:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn .ico, .btn.big .ico, .btn.small .ico { filter: none; }
.focus { outline: none !important; }
.seg { gap: 6px; }
.seg .btn { padding: 8px 14px 6px; font-size: 13px; border-bottom-width: 4px; }
.seg .btn.sel { background: var(--pink); color: #fff; border-bottom-color: var(--pink-lip); box-shadow: none; }

/* text inputs */
input:not([type='range']):not([type='color']) {
  background: #070b18; color: #fff; border: none; border-radius: 0; border-bottom: 4px solid #1d3354;
  clip-path: var(--slant); padding: 12px 18px 9px; font-family: var(--display); font-weight: 400; letter-spacing: 1px; box-shadow: none;
}
input:not([type='range']):not([type='color']):focus { border-bottom-color: var(--cyan); box-shadow: none; background: #0a1124; }
input::placeholder { color: #3c5378; }
.joinrow input { font-size: 24px; letter-spacing: 12px; }
.chatbox input { border-radius: 0; }
#lobbyChat { border-radius: 0; background: #070b18; }
.lbl { color: #6f86b3; letter-spacing: 3px; }

/* panels */
.panel { background: rgba(6, 10, 24, 0.94); border: none; border-radius: 0; box-shadow: none; clip-path: var(--cut); position: relative; }
.panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cyan) 50%, var(--pink) 50%); }
.cust-preview { border: none; border-radius: 0; background: #050914; clip-path: var(--cut); }
h2 { text-transform: uppercase; letter-spacing: 3px; }

/* option chips & tabs */
.cust .opt, .opt {
  background: var(--plate); border: none; border-radius: 0; border-bottom: 4px solid var(--plate-lip); clip-path: var(--slant);
  padding: 9px 16px 7px; font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; box-shadow: none;
}
.cust .opt:hover { background: #1c2a4d; box-shadow: none; border-color: var(--plate-lip); }
.cust .opt.sel, .opt.sel { background: var(--pink); color: #fff; border-bottom-color: var(--pink-lip); box-shadow: none; }
.cust .opt.swatch, .cust .opt.swatch.custom { clip-path: none; border-bottom: none; }
/* a selected swatch keeps its own colour (the generic .opt.sel pink fill must not apply) */
.cust .opt.swatch.sel, .cust .opt.swatch:hover { background: var(--c); border-bottom: none; }
.cust .opt.swatch.custom.sel, .cust .opt.swatch.custom:hover { background: conic-gradient(#ff3b3b, #ffd400, #7cff4f, #00e5ff, #3b7bff, #ff2e88, #ff3b3b); }
.tab { text-transform: uppercase; letter-spacing: 2px; border-bottom-width: 4px; }
.tab.sel { border-bottom-color: var(--pink); text-shadow: none; }

/* lobby bits */
.prow { border-radius: 0; background: #0b1226; clip-path: var(--slant); padding: 8px 16px; }
.seatrow { border-radius: 0; border: none; border-left: 5px solid; background: #0b1226; }
.maptile { border-radius: 0; border: 3px solid transparent; clip-path: var(--slant); }
.maptile.sel { border-color: var(--pink); box-shadow: none; }
.tag { border-radius: 0; }
#toast { border-radius: 0; border: none; border-bottom: 4px solid var(--cyan); clip-path: var(--slant); }
.seathud { border-radius: 0; clip-path: var(--slant); background: rgba(6, 10, 24, 0.85); }
.hpbar, .hpbar i { border-radius: 0; }
.hpbar i { background: var(--c); box-shadow: none; }
.sb, .kf, .cstat { border-radius: 0; }

/* match-end vote */
.vote-title { font-family: var(--display); text-transform: uppercase; letter-spacing: 4px; color: #6f86b3; margin: 4px 0 10px; }
.vote-row { gap: 14px; }
.vote-row .vc { display: inline-block; min-width: 28px; margin-left: 10px; padding: 2px 6px; background: rgba(0, 0, 0, 0.35); }
.btn.voted { outline: none; background: var(--cyan) !important; color: #04121c !important; border-bottom-color: var(--cyan-lip) !important; }
.vote-status { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 16px 0 6px; }
#matchend .cards-timer { margin-top: 10px; }

/* ---------- holographic foils (Foilforge port) ---------- */
.card { overflow: hidden; }
.card::before { display: none; }
.card .foil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; border-radius: 18px; z-index: 3; }
.card > :not(.foil) { position: relative; z-index: 2; }
.card .c-rar { display: flex; align-items: center; justify-content: center; gap: 8px; }
.card .c-rar i { width: 7px; height: 7px; background: var(--rc); transform: rotate(45deg); box-shadow: 0 0 8px var(--rc); }
.card.r-common .c-rar i:first-child, .card.r-common .c-rar i:last-child { opacity: 0.5; }
.card.r-epic { border-color: #ffb050; }
.card.r-legendary { border-color: transparent; background: linear-gradient(160deg, rgba(60, 40, 90, 0.97), rgba(14, 8, 28, 0.98)); }
.card.r-legendary .c-rar { background: linear-gradient(90deg, #ff5cc8, #ffb35c, #fff36b, #5cffb0, #5cd8ff, #b58cff, #ff5cc8); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: holoText 3s linear infinite; font-size: 13px; }
.card.r-legendary .c-rar i { background: #fff36b; }
@keyframes holoText { to { background-position: 300% 0; } }
.card.r-legendary .c-name { text-shadow: 0 0 14px rgba(255, 243, 107, 0.6); }

/* ---------- touch controls (phones / tablets) ---------- */
/* Right-hand cluster: FIRE stick with five actions on an arc around it (radius ~140px). */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#touch { --sr: env(safe-area-inset-right, 0px); display: none; position: fixed; inset: 0; z-index: 15; touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.touch:not(.mode-menu) #touch { display: block; }
#touch .tz[data-zone="move"] { position: absolute; left: 0; top: 16%; bottom: 0; width: 50%; }
#touch .tstick { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; pointer-events: none; display: none;
  border: 4px solid rgba(42, 240, 255, 0.55); background: rgba(6, 10, 24, 0.35); }
#touch .tstick.show { display: block; }
#touch .tstick .knob { position: absolute; left: 30px; top: 30px; width: 52px; height: 52px; border-radius: 50%; background: var(--cyan); border-bottom: 5px solid var(--cyan-lip); }
#touch .tz::after { content: 'MOVE · FLICK UP TO JUMP'; position: absolute; top: 46%; left: 28px; font-family: var(--display); font-size: 11px; letter-spacing: 2px; color: rgba(223, 246, 255, 0.3); }
#touch.used .tz::after { display: none; }
#touch .tfire { position: absolute; right: calc(var(--sr) + 54px); bottom: 34px; width: 128px; height: 128px; border-radius: 50%;
  border: 4px solid rgba(255, 46, 154, 0.6); background: rgba(6, 10, 24, 0.4); }
#touch .tfire .knob { position: absolute; left: 22px; top: 22px; width: 76px; height: 76px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 46, 154, 0.85); border-bottom: 6px solid var(--pink-lip); color: #fff; font-family: var(--display); font-size: 14px; letter-spacing: 1px; line-height: 72px; text-align: center; }
#touch .tfire.on .knob { background: var(--pink); }
#touch .tfire.manual { border-color: #fff; }
#touch .tfire::after { content: 'TAP: AUTO-AIM · DRAG: AIM'; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--display); font-size: 9px; letter-spacing: 1px; color: rgba(223, 246, 255, 0.35); }
#touch.used .tfire::after { display: none; }
#touch .tbtn { position: absolute; width: 72px; height: 42px; font-family: var(--display); font-size: 11px; letter-spacing: 1px; color: var(--plate-text); text-align: center; line-height: 38px;
  background: rgba(18, 27, 51, 0.82); border-bottom: 4px solid var(--plate-lip); clip-path: var(--slant); }
#touch .tbtn.on { background: var(--cyan); color: #04121c; border-bottom-width: 1px; line-height: 41px; }
#touch .t-jump { right: calc(var(--sr) + 208px); bottom: 36px; width: 90px; height: 52px; line-height: 48px; font-size: 14px; background: rgba(42, 240, 255, 0.85); color: #04121c; border-bottom-color: var(--cyan-lip); }
#touch .t-jump.on { background: #fff; }
#touch .t-dash { right: calc(var(--sr) + 214px); bottom: 125px; }
#touch .t-block { right: calc(var(--sr) + 166px); bottom: 189px; }
#touch .t-melee { right: calc(var(--sr) + 92px); bottom: 217px; }
#touch .t-throw { right: calc(var(--sr) + 14px); bottom: 199px; }
#touch .t-pause { left: max(12px, env(safe-area-inset-left)); top: 10px; width: 46px; height: 40px; line-height: 36px; font-size: 14px; }
/* HUD: own strip top-left (your HP also floats over your fighter), scoreboard nudged right */
body.touch #seatHud { top: 8px; bottom: auto; left: calc(max(12px, env(safe-area-inset-left)) + 54px); right: auto; justify-content: flex-start; transform: scale(0.48); transform-origin: top left; }
body.touch #chatlog, body.touch #gameChat { display: none; }
body.touch #scorebar { left: 56%; transform: translateX(-50%) scale(0.6); transform-origin: top center; }
body.touch #killfeed { transform: scale(0.6); transform-origin: top right; top: 40px; }
body.touch #banner { font-size: 56px; }
body.touch #banner.win { font-size: 40px; }
body.touch #banner .sub { font-size: 16px; }
body.touch #joinReqs { top: 44px; zoom: 0.8; }

/* phones held upright */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 200; background: var(--bg); flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    font-family: var(--display); letter-spacing: 2px; color: var(--plate-text); text-align: center; padding: 30px; }
  #rotate .ph { width: 54px; height: 92px; border: 5px solid var(--cyan); border-bottom-width: 12px; animation: rotph 2s ease-in-out infinite; }
}
@keyframes rotph { 40%, 70% { transform: rotate(-90deg); border-color: var(--pink); } }

/* short landscape screens (phones): keep the desktop layout and scale it down.
   vw/vh ignore zoom, so sizes based on them are divided by --z to cancel it. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --z: 0.62; }
  .screen, .overlay { overflow-y: auto; align-items: safe center; }
  .screen > *, .overlay > * { zoom: var(--z); }
  .lobby, .cust, .howto, .browse { max-height: none; }
  /* the lobby list is read, not glanced at: keep it larger than the other panels */
  .screen > #installBar { zoom: 0.8; }
  .overlay > .browse { zoom: 0.72; width: min(760px, calc(94vw / 0.72)); }
  .lobby { width: min(1100px, calc(94vw / var(--z))); }
  .cust { width: min(1080px, calc(95vw / var(--z))); }
  .lobby-body { grid-template-columns: 1fr 1.25fr; }
  .cust { grid-template-columns: 400px 1fr; }
  .ctl-grid { grid-template-columns: 1fr 1fr; }
  .cards-row { gap: 30px; }
  .card { width: 230px; height: 380px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  :root { --z: 0.5; }
}

/* ---------- lobby browser + join requests ---------- */
body:not(.lobby-online) .onlineonly { display: none; }
.browse { width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; gap: 12px; }
.browse-head { display: flex; align-items: center; gap: 10px; }
.browse-head h2 { margin: 0; flex: 1; }
#lobbyList { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
#lobbyList .empty { text-align: center; color: var(--dim); font-weight: 700; padding: 26px 0; line-height: 2.4; }
.lrow { display: flex; align-items: center; gap: 14px; background: #0b1226; clip-path: var(--slant); padding: 10px 18px; }
.lrow .lmain { flex: 1; min-width: 0; }
.lrow .lname { font-family: var(--display); font-size: 16px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lsub { color: var(--dim); font-weight: 600; font-size: 14px; }
.lrow .lcount { font-family: var(--display); font-size: 22px; color: var(--cyan); }
.lrow .lcount span { font-size: 13px; color: var(--dim); }
.lrow .btn[disabled] { opacity: 0.45; }
.tag { font-family: var(--display); font-size: 10px; letter-spacing: 1px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.tag.open { background: var(--cyan); color: #04121c; }
.tag.lock { background: var(--yellow); color: #1a1400; }
#menuMsg .btn { margin-left: 8px; }
#joinReqs { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; gap: 8px; }
.jreq { display: flex; align-items: center; gap: 10px; background: rgba(6, 10, 24, 0.95); clip-path: var(--slant); border-bottom: 4px solid var(--yellow); padding: 10px 18px; font-weight: 700; white-space: nowrap; animation: fadein 0.2s; }

/* ---------- install banner (main menu, phones) ---------- */
#installBar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: rgba(6, 10, 24, 0.94); clip-path: var(--slant); border-bottom: 4px solid var(--cyan); padding: 8px 12px 6px 22px; font-weight: 600; font-size: 15px; }
#installBar .ib-text .btn { margin-left: 8px; }
#installBar .ib-share { width: 16px; height: 19px; color: var(--cyan); vertical-align: -3px; }
#installBar .btn { padding: 6px 12px 4px; }
body:not(.touch) .touchonly { display: none; }