/* BRAWLFIE — UI skin. Landscape-first; the whole #app is rotated by JS when a phone is held upright. */
@font-face { font-family: "Lilita One"; src: url("../assets/fonts/lilita-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../assets/fonts/rubik-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
:root {
  --ink: #15112b; --bg: #0e0a22; --panel: #1d1740; --panel2: #2a2258; --line: #3c3378; --txt: #f4f2ff; --dim: #a9a3d6;
  --gold: #ffc531; --gold2: #ff9d1f; --red: #ff4057; --blue: #2e86ff; --cyan: #1fd6e0; --pink: #ff3dbb; --green: #2ed573;
  --disp: "Lilita One", "Arial Black", system-ui, sans-serif; --ui: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: var(--ui); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#root { position: fixed; inset: 0; overflow: hidden; }
#app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; overflow: hidden; font-size: clamp(11px, 2.05vh + 0.35vw, 17px); }
#app.rot { font-size: clamp(11px, 2.05vw + 0.35vh, 17px); }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#probe { position: absolute; visibility: hidden; padding: 0 var(--sr) 0 var(--sl); }
#shade { position: absolute; inset: 0; background: radial-gradient(120% 120% at 30% 40%, rgba(14,10,34,.55), rgba(14,10,34,.9)); pointer-events: none; transition: opacity .3s; }
#shade.off { opacity: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }

.scr { position: absolute; inset: 0; display: flex; padding: max(.9em, var(--st)) max(1.2em, var(--sr)) max(.8em, var(--sb)) max(1.2em, var(--sl)); animation: in .22s ease-out both; }
@keyframes in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.scr.dim { background: rgba(10,6,24,.72); backdrop-filter: blur(3px); align-items: center; justify-content: center; }
.col { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: .6em; } .grow { flex: 1; min-width: 0; min-height: 0; } .wrap { flex-wrap: wrap; }
.center { align-items: center; justify-content: center; text-align: center; }

/* ── buttons ── */
.btn { position: relative; font-family: var(--disp); font-size: 1.25em; letter-spacing: .03em; color: var(--ink); background: linear-gradient(#ffe27a, var(--gold) 45%, var(--gold2)); padding: .5em 1.1em .56em; border-radius: .7em;
  box-shadow: 0 .26em 0 #b86a00, 0 .26em 0 .14em var(--ink), inset 0 .12em 0 rgba(255,255,255,.6); border: .14em solid var(--ink); transition: transform .06s, box-shadow .06s; text-align: center; line-height: 1.05; white-space: nowrap; }
.btn:active, .btn.down { transform: translateY(.2em); box-shadow: 0 .06em 0 #b86a00, 0 .06em 0 .14em var(--ink), inset 0 .12em 0 rgba(255,255,255,.6); }
.btn small { display: block; font-family: var(--ui); font-weight: 600; font-size: .5em; letter-spacing: .02em; opacity: .75; margin-top: .15em; }
.btn.alt { color: #fff; background: linear-gradient(#5a4bd6, #4334b8 50%, #3526a0); box-shadow: 0 .26em 0 #221670, 0 .26em 0 .14em var(--ink), inset 0 .12em 0 rgba(255,255,255,.25); }
.btn.alt:active { box-shadow: 0 .06em 0 #221670, 0 .06em 0 .14em var(--ink), inset 0 .12em 0 rgba(255,255,255,.25); }
.btn.red { color: #fff; background: linear-gradient(#ff7a8a, var(--red) 50%, #d81f3a); box-shadow: 0 .26em 0 #8f0f22, 0 .26em 0 .14em var(--ink), inset 0 .12em 0 rgba(255,255,255,.35); }
.btn.blue { color: #fff; background: linear-gradient(#6fb0ff, var(--blue) 50%, #1a5fd0); box-shadow: 0 .26em 0 #0e3a8a, 0 .26em 0 .14em var(--ink), inset 0 .12em 0 rgba(255,255,255,.35); }
.btn.big { font-size: 1.7em; padding: .45em 1.6em .52em; }
.btn.sm { font-size: .95em; padding: .4em .8em .46em; }
.btn[disabled] { filter: grayscale(.8) brightness(.7); pointer-events: none; }
.chip { font-weight: 700; font-size: .82em; letter-spacing: .04em; text-transform: uppercase; color: var(--txt); background: rgba(29,23,64,.85); border: .14em solid var(--line); padding: .5em .9em; border-radius: 99em; white-space: nowrap; }
.chip:active { background: var(--panel2); } .chip.on { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.x { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--panel2); border: .14em solid var(--line); font-family: var(--disp); font-size: 1.05em; flex: none; }

/* ── home ── */
#home { gap: 1.2em; align-items: stretch; }
.h-left { flex: 1.05; justify-content: space-between; min-width: 0; }
.logo { font-family: var(--disp); font-size: 4.4em; line-height: .9; letter-spacing: .01em; transform: skew(-7deg) rotate(-3deg); transform-origin: 0 50%; margin: .1em 0 0 .08em;
  background: linear-gradient(#fff6c2 10%, var(--gold) 45%, #ff7a1f 85%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill;
  filter: drop-shadow(.045em .06em 0 var(--ink)) drop-shadow(.03em .05em 0 var(--pink)); position: relative; width: max-content; }
.logo i { font-style: normal; position: relative; }
.tag { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .86em; color: #fff; margin: .9em 0 0 .5em; text-shadow: 0 2px 0 var(--ink); }
.tag b { color: var(--gold); }
.me { align-items: center; gap: .8em; background: linear-gradient(100deg, rgba(42,34,88,.92), rgba(29,23,64,.6)); border: .14em solid var(--line); border-radius: 1em; padding: .5em .9em .5em .5em; width: max-content; max-width: 100%; }
.me img { height: 4.6em; width: auto; filter: drop-shadow(0 .2em 0 rgba(0,0,0,.35)); }
.me .nm { font-family: var(--disp); font-size: 1.35em; line-height: 1; }
.me .rk { font-size: .72em; font-weight: 700; color: var(--gold); letter-spacing: .08em; margin-top: .25em; }
.bar { height: .42em; width: 9em; background: var(--ink); border-radius: 9em; overflow: hidden; margin-top: .35em; } .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--pink)); }
.h-right { flex: 1; justify-content: center; gap: .55em; max-width: 31em; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: .62em .6em; }
.mode { text-align: left; display: flex; align-items: center; gap: .6em; padding: .55em .75em .6em; border-radius: .85em; border: .14em solid var(--ink); color: #fff; font-family: var(--disp); font-size: 1.22em; line-height: 1;
  box-shadow: 0 .22em 0 rgba(0,0,0,.45), inset 0 .1em 0 rgba(255,255,255,.28); transition: transform .06s; min-width: 0; }
.mode:active { transform: translateY(.16em) scale(.99); }
.mode small { display: block; font-family: var(--ui); font-weight: 600; font-size: .5em; opacity: .85; margin-top: .3em; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode svg { width: 1.7em; height: 1.7em; flex: none; filter: drop-shadow(0 .08em 0 rgba(0,0,0,.4)); }
.mode.wide { grid-column: span 2; font-size: 1.5em; background: linear-gradient(100deg, #ffd23f, #ff8a1f); color: var(--ink); }
.m1 { background: linear-gradient(100deg, #ff5d73, #d81f5a); } .m2 { background: linear-gradient(100deg, #3f9bff, #2a55e0); } .m3 { background: linear-gradient(100deg, #9b6bff, #5a2fd0); }
.m4 { background: linear-gradient(100deg, #19c8b9, #0d8f9a); } .m5 { background: linear-gradient(100deg, #6b7399, #3d4470); }
.foot { gap: .5em; justify-content: flex-end; flex-wrap: wrap; }

/* ── sheets ── */
.sheet { flex-direction: column; background: linear-gradient(180deg, rgba(20,15,48,.97), rgba(14,10,34,.985)); gap: .7em; }
.head { gap: .7em; flex: none; } .head h2 { font-family: var(--disp); font-size: 1.7em; letter-spacing: .02em; line-height: 1; } .head .sub { color: var(--dim); font-size: .8em; font-weight: 600; }
.scroll { overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll::-webkit-scrollbar { display: none; }
.lbl { font-size: .7em; font-weight: 800; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.seg { display: inline-flex; background: var(--ink); border-radius: .7em; padding: .18em; gap: .15em; border: .12em solid var(--line); }
.seg button { font-weight: 800; font-size: .8em; padding: .42em .8em; border-radius: .52em; color: var(--dim); letter-spacing: .03em; white-space: nowrap; }
.seg button.on { background: var(--gold); color: var(--ink); }

/* setup */
.teams { gap: .7em; align-items: stretch; flex: none; }
.team { flex: 1; border-radius: 1em; padding: .5em; gap: .45em; border: .14em solid; min-width: 0; }
.team.t0 { background: linear-gradient(160deg, rgba(46,134,255,.28), rgba(46,134,255,.07)); border-color: rgba(46,134,255,.7); } .team.t1 { background: linear-gradient(200deg, rgba(255,64,87,.28), rgba(255,64,87,.07)); border-color: rgba(255,64,87,.7); }
.team h3 { font-family: var(--disp); font-size: .95em; letter-spacing: .08em; } .t0 h3 { color: #8fc0ff; } .t1 h3 { color: #ff9aa8; text-align: right; }
.slot { align-items: center; gap: .55em; background: rgba(14,10,34,.6); border-radius: .8em; padding: .3em .5em .3em .3em; min-width: 0; } .t1 .slot { flex-direction: row-reverse; padding: .3em .3em .3em .5em; text-align: right; }
.slot .hd { height: 3.5em; width: 3.5em; object-fit: contain; flex: none; filter: drop-shadow(0 .14em 0 rgba(0,0,0,.4)); }
.slot .nm { font-family: var(--disp); font-size: 1.05em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .ctl { margin-top: .35em; font-size: .7em; padding: .35em .7em; }
.vs { font-family: var(--disp); font-size: 2em; color: var(--gold); align-self: center; text-shadow: 0 .08em 0 var(--ink); flex: none; transform: skew(-8deg); }
.arenas { gap: .55em; flex: none; padding: .1em .1em .3em; }
.arena { flex: none; width: 9.6em; border-radius: .7em; overflow: hidden; border: .16em solid var(--line); background: var(--ink); position: relative; text-align: left; }
.arena img, .arena .rnd { display: block; width: 100%; height: 4.7em; object-fit: cover; }
.arena .rnd { background: repeating-linear-gradient(45deg, #2a2258 0 12px, #1d1740 12px 24px); display: grid; place-items: center; font-family: var(--disp); font-size: 1.6em; color: var(--gold); height: 2.94em; }
.arena span { display: block; font-family: var(--disp); font-size: .78em; padding: .3em .5em .34em; letter-spacing: .03em; white-space: nowrap; }
.arena.on { border-color: var(--gold); box-shadow: 0 0 0 .14em var(--ink), 0 0 1.2em rgba(255,197,49,.5); } .arena.on span { background: var(--gold); color: var(--ink); }
.opts { gap: .5em 1.1em; flex-wrap: wrap; align-items: center; flex: none; } .opt { display: flex; align-items: center; gap: .5em; }
.note { color: var(--dim); font-size: .74em; font-weight: 600; }

/* roster */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6em, 1fr)); gap: .6em; padding: .15em; align-content: start; }
.card { position: relative; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: .14em solid var(--line); border-radius: .9em; padding: .5em .3em .4em; display: flex; flex-direction: column; align-items: center; gap: .2em; min-width: 0; }
.card img { height: 4.6em; max-width: 100%; object-fit: contain; filter: drop-shadow(0 .16em 0 rgba(0,0,0,.4)); } .card b { font-family: var(--disp); font-weight: 400; font-size: .86em; letter-spacing: .03em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.on { border-color: var(--gold); background: linear-gradient(180deg, #4a3d10, #2a2258); } .card:active { transform: scale(.97); }
.card.add { border-style: dashed; border-color: var(--gold); color: var(--gold); justify-content: center; min-height: 6.6em; font-family: var(--disp); font-size: 1em; text-align: center; line-height: 1.1; }
.card.add svg { width: 2.2em; height: 2.2em; }
.card .ed { position: absolute; top: .25em; right: .25em; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--ink); border: .1em solid var(--line); font-size: .8em; display: grid; place-items: center; }
.dot { width: .7em; height: .7em; border-radius: 50%; display: inline-block; border: .12em solid var(--ink); }

/* editor */
.ed-wrap { gap: 1em; min-height: 0; align-items: stretch; } .ed-stage { position: relative; flex: 1.2; min-width: 0; border-radius: 1em; overflow: hidden; border: .14em solid var(--line); background: #0a0718 conic-gradient(#191338 25%, #120d2b 0 50%, #191338 0 75%, #120d2b 0) 0 0 / 24px 24px; touch-action: none; }
.ed-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,6,24,.82); text-align: center; padding: 1em; font-weight: 700; } .ed-busy b { font-family: var(--disp); font-weight: 400; font-size: 1.4em; color: var(--gold); display: block; margin-bottom: .3em; }
.spin { width: 2.6em; height: 2.6em; border-radius: 50%; border: .34em solid var(--line); border-top-color: var(--gold); animation: sp 0.8s linear infinite; margin: 0 auto .7em; } @keyframes sp { to { transform: rotate(360deg); } }
.ed-side { flex: 1; gap: .6em; min-width: 0; max-width: 24em; } .ed-prev { height: 6.4em; align-self: center; filter: drop-shadow(0 .2em 0 rgba(0,0,0,.4)); }
.swatches { gap: .4em; flex-wrap: wrap; } .sw { width: 1.9em; height: 1.9em; border-radius: 50%; border: .16em solid var(--ink); box-shadow: 0 0 0 .1em var(--line); } .sw.on { box-shadow: 0 0 0 .18em #fff; }
input[type=text] { font: 800 1em var(--ui); color: var(--txt); background: var(--ink); border: .14em solid var(--line); border-radius: .6em; padding: .5em .7em; width: 100%; text-transform: uppercase; letter-spacing: .05em; outline: none; user-select: text; -webkit-user-select: text; }
input[type=text]:focus { border-color: var(--gold); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: .5em; border-radius: 9em; background: var(--ink); border: .1em solid var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--gold); border: .16em solid var(--ink); }
input[type=range]::-moz-range-thumb { width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--gold); border: .16em solid var(--ink); }

/* how-to */
.moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); gap: .4em .9em; font-size: .86em; font-weight: 500; }
.moves div { background: rgba(42,34,88,.6); border-radius: .6em; padding: .45em .7em; line-height: 1.3; } .moves b { font-family: var(--disp); font-weight: 400; letter-spacing: .04em; color: var(--gold); margin-right: .35em; } .moves b.k { color: #8fc0ff; } .moves b.g { color: #7fffd4; } .moves mark { background: none; color: var(--pink); font-weight: 800; }
.rps { gap: .5em; flex-wrap: wrap; } .rps span { background: var(--ink); border: .12em solid var(--line); border-radius: 9em; padding: .35em .8em; font-size: .78em; font-weight: 700; }

/* pause / result */
.box { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: .16em solid var(--ink); box-shadow: 0 0 0 .14em var(--line), 0 1em 3em rgba(0,0,0,.5); border-radius: 1.2em; padding: 1em 1.3em 1.1em; gap: .7em; max-width: 44em; width: max-content; max-height: 100%; }
.box h2 { font-family: var(--disp); font-size: 2.3em; line-height: 1; text-align: center; letter-spacing: .02em; text-shadow: 0 .07em 0 var(--ink); }
.winrow { justify-content: center; gap: .3em; } .winrow img { height: 5.2em; filter: drop-shadow(0 .2em 0 rgba(0,0,0,.4)); animation: bob 1s ease-in-out infinite alternate; } .winrow img:nth-child(2) { animation-delay: .3s; } @keyframes bob { to { transform: translateY(-.35em) rotate(3deg); } }
.score { font-family: var(--disp); font-size: 1.5em; text-align: center; color: var(--gold); }
table.st { border-collapse: collapse; font-size: .8em; font-weight: 600; margin: 0 auto; } .st td, .st th { padding: .22em .7em; text-align: center; } .st th { color: var(--dim); font-size: .82em; letter-spacing: .08em; text-transform: uppercase; } .st td:first-child { text-align: left; font-family: var(--disp); font-weight: 400; letter-spacing: .03em; }
.xp { text-align: center; font-weight: 800; font-size: .82em; color: var(--gold); letter-spacing: .06em; }

/* lobby */
.code { font-family: var(--disp); font-size: 3.2em; letter-spacing: .18em; color: var(--gold); text-shadow: 0 .06em 0 var(--ink); text-align: center; line-height: 1; }
.pad { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35em; max-width: 21em; margin: 0 auto; } .pad button { font-family: var(--disp); font-size: 1.3em; background: var(--panel2); border: .12em solid var(--line); border-radius: .5em; padding: .3em 0; } .pad button:active { background: var(--gold); color: var(--ink); }
.players { gap: .5em; justify-content: center; flex-wrap: wrap; } .pl { background: rgba(42,34,88,.7); border: .14em solid var(--line); border-radius: .8em; padding: .4em .7em; align-items: center; gap: .5em; min-width: 9em; } .pl img { height: 2.8em; } .pl b { font-family: var(--disp); font-weight: 400; } .pl small { display: block; color: var(--dim); font-weight: 700; font-size: .68em; letter-spacing: .08em; }
.pl.t0 { border-color: rgba(46,134,255,.8); } .pl.t1 { border-color: rgba(255,64,87,.8); } .pl.empty { opacity: .55; border-style: dashed; }
.qrbox { width: 13em; height: 13em; background: #fff; border-radius: .8em; padding: .5em; flex: none; position: relative; overflow: hidden; } .qrbox canvas, .qrbox video { width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; border-radius: .4em; }
.msg { color: var(--dim); font-weight: 600; font-size: .86em; text-align: center; min-height: 1.3em; } .msg.err { color: #ff9aa8; }

#toast { position: absolute; left: 50%; bottom: 1.2em; transform: translateX(-50%); background: var(--ink); border: .14em solid var(--gold); color: #fff; font-weight: 700; font-size: .85em; padding: .6em 1.1em; border-radius: 9em; pointer-events: none; opacity: 0; transition: opacity .25s; white-space: nowrap; z-index: 9; }
#toast.on { opacity: 1; }
#rotate { position: absolute; inset: 0; display: none; }
@media (max-height: 380px) { .logo { font-size: 3.4em; } .me img { height: 3.6em; } }