:root {
  --font: "Lilita One", "Arial Black", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --ink: #0b0c1a;
  --blue: #2a78ff; --blue-l: #6fb0ff; --blue-d: #0f45c9;
  --yellow: #ffcc1a; --yellow-l: #fff27a; --yellow-d: #e08a00;
  --red: #ff3b3b; --red-l: #ff8a7a; --red-d: #b8121b;
  --green: #2fd35a; --green-l: #8dff9e; --green-d: #13852f;
  --purple: #9c4dff; --purple-l: #d2a8ff; --purple-d: #5a1fb0;
  --grey: #8a94a8; --grey-l: #c3cad8; --grey-d: #4b5366;
  --muted: #cfe0ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0d2a78; color: #fff;
  font-family: var(--font); letter-spacing: 0.02em;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
}
input { user-select: text; -webkit-user-select: text; touch-action: auto; }
img { -webkit-user-drag: none; }

#world, #game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
#world { background: #1a55d8; }
#game { background: transparent; pointer-events: auto; }

.screen { position: fixed; inset: 0; display: none; z-index: 5; }
.screen.active { display: flex; }
.overlay { background: rgba(4, 10, 40, 0.62); align-items: center; justify-content: center; z-index: 20; backdrop-filter: blur(4px); }
.muted { color: var(--muted); font-family: var(--body); font-weight: 800; font-size: 15px; letter-spacing: 0; }
.err { color: #ffb3b3; min-height: 1.2em; margin: 4px 0; font-size: 15px; font-family: var(--body); font-weight: 800; }

/* Chunky outlined game text */
.btn, .tile span, h1, h2, .dialog-title, .bp-name, .mode-card b, .vs-mode, .result h1, .pc-name, .code {
  paint-order: stroke fill;
  -webkit-text-stroke: 5px var(--ink);
  text-shadow: 0 3px 0 var(--ink);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --c: var(--blue); --cl: var(--blue-l); --cd: var(--blue-d);
  position: relative; font-family: var(--font); font-size: 22px; color: #fff; cursor: pointer; outline: none;
  padding: 10px 26px 14px; border: 3px solid var(--ink); border-radius: 14px;
  background: linear-gradient(var(--cl) 0%, var(--c) 48%, var(--cd) 100%);
  box-shadow: 0 5px 0 var(--ink), inset 0 -6px 0 rgba(0,0,0,0.18), inset 0 3px 0 rgba(255,255,255,0.55);
  transition: transform 0.07s, box-shadow 0.07s, filter 0.1s;
  overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; left: 6px; right: 6px; top: 4px; height: 38%;
  border-radius: 10px 10px 30px 30px; background: linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.05)); pointer-events: none;
}
.btn > span { position: relative; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 -3px 0 rgba(0,0,0,0.18), inset 0 3px 0 rgba(255,255,255,0.5); }
.btn.yellow { --c: var(--yellow); --cl: var(--yellow-l); --cd: var(--yellow-d); }
.btn.red { --c: var(--red); --cl: var(--red-l); --cd: var(--red-d); }
.btn.green { --c: var(--green); --cl: var(--green-l); --cd: var(--green-d); }
.btn.purple { --c: var(--purple); --cl: var(--purple-l); --cd: var(--purple-d); }
.btn.grey { --c: var(--grey); --cl: var(--grey-l); --cd: var(--grey-d); }
.btn.small { font-size: 15px; padding: 6px 14px 9px; border-radius: 11px; }
.btn.back { font-size: 20px; padding: 6px 16px 9px; -webkit-text-stroke: 3px var(--ink); }
.btn[disabled] { filter: grayscale(0.9) brightness(0.8); pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(5,12,45,0.55); border: 3px solid var(--ink);
  color: #fff; border-radius: 12px; padding: 6px 12px; font-family: var(--font); font-size: 16px;
}
.chip.status i { width: 11px; height: 11px; border-radius: 50%; background: #ffb400; display: inline-block; box-shadow: 0 0 8px currentColor; }
.chip.status.on i { background: #3dff6a; }
.chip.status.off i { background: #ff4040; }

.icon-btn {
  width: 58px; height: 58px; border-radius: 14px; border: 3px solid var(--ink); cursor: pointer; padding: 5px;
  background: linear-gradient(#5d9bff, #1f5fe0); box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.45);
}
.icon-btn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)); }
.icon-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

/* ---------------------------------------------------------------- loading */
#loading { flex-direction: column; align-items: center; justify-content: space-between; background: #0b2a80; overflow: hidden; }
.load-art { position: absolute; inset: 0; background: url('/assets/keyart.jpg') center / cover no-repeat; animation: kenburns 14s ease-out forwards; }
.load-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(5,12,50,0.1), rgba(5,12,50,0) 40%, rgba(5,12,50,0.75)); }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1.0); } }
.load-logo { position: relative; width: min(560px, 70vw); margin-top: 4vh; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5)); animation: logoIn 0.9s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes logoIn { from { transform: scale(0.3) rotate(-8deg); opacity: 0; } }
.load-bottom { position: relative; width: min(520px, 84vw); margin-bottom: 6vh; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.bar { width: 100%; height: 26px; border: 3px solid var(--ink); border-radius: 14px; background: rgba(5,12,45,0.75); overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
#loadbar { height: 100%; width: 0%; background: linear-gradient(var(--yellow-l), var(--yellow) 55%, var(--yellow-d)); transition: width 0.25s; border-radius: 10px; }
.load-text { font-size: 18px; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }

/* ---------------------------------------------------------------- home */
#home { flex-direction: column; background: transparent; }
#stage-drag { position: absolute; left: 22%; right: 22%; top: 14%; bottom: 18%; cursor: grab; z-index: 0; }
.topbar { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.topbar .spacer { flex: 1; }
.profile-card {
  display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; cursor: pointer; color: #fff; font-family: var(--font);
  background: linear-gradient(rgba(10,25,90,0.85), rgba(5,12,50,0.85)); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink);
}
.pc-avatar { width: 58px; height: 58px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(#ffe36b, #ff9f1a); overflow: hidden; display: block; }
.pc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc-name { font-size: 20px; -webkit-text-stroke: 4px var(--ink); }
.pc-trophy { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.pc-trophy img { width: 26px; height: 26px; }
.pc-trophy b { font-weight: normal; color: #ffe066; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); }
.pc-bar { width: 110px; height: 12px; border-radius: 8px; border: 2px solid var(--ink); background: rgba(0,0,0,0.5); overflow: hidden; display: block; }
.pc-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(#fff27a, #ffb31a); }

.side-left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: 50%; transform: translateY(-42%); display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.tile {
  --c: var(--blue); --cl: var(--blue-l); --cd: var(--blue-d);
  width: 112px; height: 104px; border: 3px solid var(--ink); border-radius: 16px; cursor: pointer; position: relative;
  background: linear-gradient(var(--cl), var(--c) 55%, var(--cd)); box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 0 7px; overflow: visible;
  transition: transform 0.07s;
}
.tile img { position: absolute; top: -10px; width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35)); transition: transform 0.15s; }
.tile:hover img { transform: scale(1.08) rotate(-4deg); }
.tile span { font-family: var(--font); font-size: 16px; color: #fff; -webkit-text-stroke: 4px var(--ink); }
.tile:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.tile.t-green { --c: var(--green); --cl: var(--green-l); --cd: var(--green-d); }
.tile.t-red { --c: #ff6a3b; --cl: #ffb07a; --cd: #c43d12; }

.brawler-plate { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; pointer-events: none; }
.bp-rarity { font-size: 13px; padding: 2px 12px 3px; border-radius: 8px; border: 2px solid var(--ink); background: linear-gradient(#fff27a, #ffb31a); color: #5a3000; margin-bottom: -4px; z-index: 1; }
.bp-name { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; -webkit-text-stroke: 7px var(--ink); }
.bp-trophies { display: flex; align-items: center; gap: 6px; background: rgba(5,12,45,0.7); border: 3px solid var(--ink); border-radius: 12px; padding: 2px 12px 2px 6px; font-size: 20px; color: #ffe066; }
.bp-trophies img { width: 30px; height: 30px; }

.play-area { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 14px; align-items: flex-end; z-index: 2; }
.mode-card {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 10px 16px 10px 10px; border: 3px solid var(--ink); border-radius: 16px;
  background: linear-gradient(135deg, #c77bff, #6a2bd6); color: #fff; font-family: var(--font); cursor: pointer; text-align: left;
  box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.4);
}
.mode-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.mode-ico img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.35)); display: block; }
.mode-txt small { display: block; font-size: 12px; opacity: 0.9; letter-spacing: 0.08em; }
.mode-txt b { display: block; font-size: 24px; font-weight: normal; line-height: 1.05; -webkit-text-stroke: 5px var(--ink); }
.mode-txt em { display: block; font-style: normal; font-family: var(--body); font-weight: 800; font-size: 12px; max-width: 170px; letter-spacing: 0; opacity: 0.95; }
.mode-change { position: absolute; top: -12px; right: 10px; font-size: 12px; background: var(--yellow); color: #5a3000; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 8px; }
.btn.play { font-size: 46px; padding: 14px 50px 20px; border-radius: 18px; -webkit-text-stroke: 8px var(--ink); animation: playPulse 2.2s ease-in-out infinite; }
@keyframes playPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.btn.play:active { animation: none; }

/* ---------------------------------------------------------------- panel screens */
.panel-screen {
  flex-direction: column; z-index: 10;
  background:
    repeating-conic-gradient(from 0deg at 50% 40%, rgba(255,255,255,0.045) 0deg 9deg, transparent 9deg 18deg),
    radial-gradient(circle at 50% 35%, #3f8cff, #0b3aa6 70%);
}
.screen-head { display: flex; align-items: center; gap: 14px; padding: max(14px, env(safe-area-inset-top)) 20px 8px; }
.screen-head h1 { margin: 0; font-size: 34px; font-weight: normal; flex: 1; -webkit-text-stroke: 6px var(--ink); }
.code { color: var(--yellow); letter-spacing: 0.12em; }

.brawler-list { flex: 1; display: flex; gap: 26px; justify-content: center; align-items: flex-start; padding: 12px 20px 24px; overflow: auto; flex-wrap: wrap; }
.bcard {
  width: min(470px, 92vw); border: 3px solid var(--ink); border-radius: 20px; padding: 14px; cursor: pointer; position: relative;
  background: linear-gradient(160deg, #2a62e8, #12308f); box-shadow: 0 7px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.3);
  display: grid; grid-template-columns: 160px 1fr; gap: 14px; transition: transform 0.12s;
}
.bcard:hover { transform: translateY(-3px); }
.bcard.selected { box-shadow: 0 7px 0 var(--ink), 0 0 0 5px var(--yellow), 0 0 30px 6px rgba(255,210,30,0.45); }
.bcard .art { position: relative; border: 3px solid var(--ink); border-radius: 14px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; min-height: 220px;
  background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,255,255,0.18) 0deg 12deg, transparent 12deg 24deg), radial-gradient(circle at 50% 55%, #ffe36b, #ff8a1a); }
.bcard.floss .art { background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,255,255,0.2) 0deg 12deg, transparent 12deg 24deg), radial-gradient(circle at 50% 55%, #c6f6ff, #1a8fe0); }
.bcard .art img { height: 205px; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0,0,0,0.35)); }
.bcard .rar { position: absolute; top: 8px; left: 8px; font-size: 12px; background: linear-gradient(#fff27a, #ffb31a); color: #5a3000; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 7px; }
.bcard h3 { margin: 0; font-size: 30px; font-weight: normal; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); }
.bcard .sub { color: #ffe066; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.bcard .sub img { width: 22px; height: 22px; }
.bcard .stats { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.bcard .stats span { background: rgba(0,0,0,0.35); border: 2px solid rgba(0,0,0,0.5); border-radius: 9px; padding: 3px 9px; font-size: 14px; }
.bcard .ab { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 6px 0; line-height: 1.25; font-family: var(--body); font-weight: 800; color: #e6eeff; letter-spacing: 0; }
.bcard .ab img { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)); }
.bcard .ab b { font-family: var(--font); font-weight: normal; font-size: 15px; letter-spacing: 0.02em; display: block; }
.bcard .ab.super b { color: var(--yellow); }
.bcard .ab.gadget b { color: #6aff95; }
.bcard .ab.star b { color: #ffe066; }
.bcard .ab.hyper b { color: #e0a3ff; }
.bcard .ab.attack b { color: #ff9f9f; }
.bcard .pick { grid-column: 1 / -1; }

.mode-list { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 14px 24px 24px; overflow: auto; align-content: start; max-width: 1140px; width: 100%; margin: 0 auto; }
.mcard { position: relative; border: 3px solid var(--ink); border-radius: 18px; padding: 16px 16px 14px; cursor: pointer; box-shadow: 0 7px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.35); min-height: 200px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font); color: #fff; text-align: left; overflow: hidden; transition: transform 0.12s; }
.mcard:hover { transform: translateY(-3px); }
.mcard::after { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 80% 30%, rgba(255,255,255,0.08) 0deg 10deg, transparent 10deg 20deg); pointer-events: none; }
.mcard img { width: 92px; height: 92px; object-fit: contain; align-self: flex-end; margin: -6px -4px 0 0; filter: drop-shadow(0 5px 0 rgba(0,0,0,0.35)); position: relative; z-index: 1; }
.mcard b { font-size: 28px; font-weight: normal; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); position: relative; z-index: 1; }
.mcard small { font-size: 14px; font-family: var(--body); font-weight: 800; letter-spacing: 0; position: relative; z-index: 1; }
.mcard .tag { position: absolute; top: 12px; left: 12px; font-size: 12px; background: rgba(0,0,0,0.4); border-radius: 8px; padding: 2px 8px; z-index: 1; }
.mcard.selected { box-shadow: 0 7px 0 var(--ink), 0 0 0 5px var(--yellow), 0 0 30px 6px rgba(255,210,30,0.45); }

/* ---------------------------------------------------------------- dialogs */
.dialog {
  position: relative; background: linear-gradient(#2f6cf0, #133a9e); border: 3px solid var(--ink); border-radius: 20px; padding: 34px 26px 22px; width: min(430px, 92vw);
  display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; box-shadow: 0 8px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.35);
  max-height: 92vh; overflow: visible; animation: popIn 0.25s cubic-bezier(.2,1.5,.4,1);
}
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } }
.dialog.wide { width: min(480px, 94vw); }
.dialog-title {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 26px; padding: 4px 22px 7px;
  background: linear-gradient(#ffe36b, #ffb31a); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); -webkit-text-stroke: 5px var(--ink);
}
.dialog h2 { margin: 0 0 4px; font-weight: normal; font-size: 28px; -webkit-text-stroke: 5px var(--ink); }
.dialog-hero { width: 96px; height: 96px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35)); }
.dialog label { text-align: left; font-size: 16px; }
.dialog input:not([type=checkbox]), .join-row input { font-family: var(--font); font-size: 22px; padding: 9px 12px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); width: 100%; box-shadow: inset 0 3px 0 rgba(0,0,0,0.12); }
.join-row { display: flex; gap: 10px; }
.join-row input { text-transform: uppercase; letter-spacing: 0.25em; text-align: center; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--body); font-weight: 800; letter-spacing: 0; }
.check input { width: 24px; height: 24px; accent-color: var(--yellow); }
.row { display: flex; gap: 12px; justify-content: center; }
.row .btn { flex: 1; }
.controls-help { text-align: left; background: rgba(0,0,0,0.25); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-family: var(--body); font-weight: 800; letter-spacing: 0; }
.controls-help b { font-family: var(--font); font-weight: normal; }
.controls-help p { margin: 6px 0; }
.search-ring { width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; border: 6px solid rgba(255,255,255,0.2); border-top-color: var(--yellow); animation: spin 1s linear infinite; display: flex; align-items: center; justify-content: center; }
.search-ring img { width: 70px; height: 70px; animation: spin 1s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.card { background: rgba(0,0,0,0.22); border: 3px solid rgba(0,0,0,0.35); border-radius: 16px; padding: 14px; }

/* ---------------------------------------------------------------- room */
.room-body { flex: 1; display: flex; gap: 22px; padding: 8px 22px; overflow: auto; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.room-settings { display: flex; flex-direction: column; gap: 8px; width: min(380px, 92vw); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { font-family: var(--font); font-size: 15px; color: #fff; background: rgba(0,0,0,0.35); border: 3px solid var(--ink); border-radius: 11px; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.seg button img { width: 26px; height: 26px; }
.seg button.on { background: linear-gradient(#fff27a, #ffc21a); color: #402200; }
.seg button[disabled] { opacity: 0.55; cursor: default; }
.room-teams { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.team-col { width: 230px; border: 3px solid var(--ink); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 5px 0 var(--ink); }
.team-col.blue { background: linear-gradient(#3a86ff, #1646b8); }
.team-col.red { background: linear-gradient(#ff6a6a, #b8202a); }
.team-col.ffa { width: 320px; background: linear-gradient(#58d64a, #237a1c); }
.team-col h3 { margin: 0; font-weight: normal; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.slot { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.3); border-radius: 11px; padding: 5px 8px; min-height: 48px; border: 2px solid rgba(0,0,0,0.4); }
.slot img { width: 38px; height: 38px; border-radius: 9px; border: 2px solid var(--ink); }
.slot.empty { color: rgba(255,255,255,0.7); justify-content: center; }
.slot .host { color: var(--yellow); font-size: 12px; margin-left: auto; }
.room-foot { padding: 10px 22px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- VS */
.vs { flex-direction: column; background:
  linear-gradient(100deg, rgba(20,90,255,0.95) 0 48%, rgba(10,15,50,0.95) 48% 52%, rgba(255,40,50,0.95) 52% 100%); }
.vs-mode { display: flex; align-items: center; gap: 12px; font-size: clamp(30px, 5vw, 54px); -webkit-text-stroke: 8px var(--ink); }
.vs-mode img { width: 1.4em; height: 1.4em; object-fit: contain; }
.vs-map { font-size: 18px; margin-bottom: 14px; font-family: var(--body); font-weight: 900; opacity: 0.9; }
.vs-teams { display: flex; align-items: center; gap: 4vw; }
.vs-team { display: flex; flex-direction: column; gap: 10px; }
.vs-team.blue { animation: slideL 0.45s cubic-bezier(.2,1.3,.4,1); }
.vs-team.red { animation: slideR 0.45s cubic-bezier(.2,1.3,.4,1); }
.vs-x { font-size: clamp(56px, 10vw, 110px); color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: 10px var(--ink); animation: pop 0.6s cubic-bezier(.2,1.8,.4,1); }
.vs-p { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.35); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 14px 6px 6px; min-width: 220px; box-shadow: 0 4px 0 var(--ink); }
.vs-p img { width: 58px; height: 58px; border-radius: 11px; border: 3px solid var(--ink); background: linear-gradient(#ffe36b, #ff9f1a); }
.vs-p.me { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px #4dff5e; }
.vs-p .nm { font-size: 21px; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.vs-p .bn { font-size: 13px; color: #ffe066; }
.vs-team.ffa { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 92vw; }
@keyframes slideL { from { transform: translateX(-60vw); } }
@keyframes slideR { from { transform: translateX(60vw); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } }

/* ---------------------------------------------------------------- results (3D brawler shows behind) */
.result { flex-direction: column; justify-content: space-between; background: transparent; backdrop-filter: none; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.result-top, .result-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.result h1 { font-size: clamp(54px, 9vw, 100px); margin: 0; font-weight: normal; color: var(--yellow); -webkit-text-stroke: 10px var(--ink); animation: pop 0.6s cubic-bezier(.2,1.8,.4,1); }
.result.lose h1 { color: #ff6767; }
.result.draw h1 { color: #e6e9f5; }
.result-sub { font-size: 24px; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); }
.result-trophies { display: flex; align-items: center; gap: 8px; font-size: 34px; background: rgba(5,12,45,0.72); border: 3px solid var(--ink); border-radius: 16px; padding: 4px 20px 4px 10px; box-shadow: 0 5px 0 var(--ink); }
.result-trophies img { width: 44px; height: 44px; }
.result-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.result-stats span { background: rgba(5,12,45,0.65); border: 2px solid var(--ink); border-radius: 11px; padding: 4px 12px; font-size: 17px; }
.result-star { font-size: 18px; color: #ffe066; min-height: 1em; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); display: flex; align-items: center; gap: 6px; }
.result-star img { width: 28px; height: 28px; }
.result-buttons { display: flex; gap: 16px; margin-top: 6px; }

#rotate-hint { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); padding: 8px 14px; border-radius: 10px; z-index: 30; display: none; font-size: 15px; pointer-events: none; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: rgba(5,12,45,0.9); border: 3px solid var(--ink); padding: 10px 18px; border-radius: 14px; z-index: 40; opacity: 0; transition: opacity 0.25s; pointer-events: none; font-size: 17px; }
#toast.show { opacity: 1; }

/* ---------------------------------------------------------------- phones */
@media (max-height: 520px) {
  .tile { width: 88px; height: 78px; border-radius: 13px; }
  .tile img { width: 58px; height: 58px; top: -8px; }
  .tile span { font-size: 13px; -webkit-text-stroke: 3px var(--ink); }
  .side-left { gap: 10px; }
  .btn.play { font-size: 32px; padding: 10px 32px 14px; -webkit-text-stroke: 6px var(--ink); }
  .mode-card { min-width: 190px; padding: 6px 10px 6px 6px; }
  .mode-ico img { width: 44px; height: 44px; }
  .mode-txt b { font-size: 18px; }
  .mode-txt em { display: none; }
  .profile-card { padding: 3px 12px 3px 3px; }
  .pc-avatar { width: 44px; height: 44px; }
  .pc-name { font-size: 16px; }
  .pc-bar { width: 80px; }
  .icon-btn { width: 46px; height: 46px; }
  .bp-name { font-size: 28px; }
  .bcard { grid-template-columns: 120px 1fr; }
  .bcard .art img { height: 160px; }
  .bcard .art { min-height: 170px; }
  .result h1 { font-size: 54px; }
  .vs-p { min-width: 160px; padding: 3px 10px 3px 3px; }
  .vs-p img { width: 40px; height: 40px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .side-left { top: auto; bottom: 150px; left: 50%; transform: translateX(-50%); flex-direction: row; }
  .play-area { left: 12px; right: 12px; justify-content: center; }
  .mode-card { min-width: 0; flex: 1; }
  .mode-txt em { display: none; }
  .btn.play { font-size: 30px; padding: 10px 26px 14px; }
  .brawler-plate { bottom: 250px; }
  .chip.status span { display: none; }
}