/* ---- the menus: a 1440 x 900 board scaled to fit, or on a phone a board 390 tall and as wide as the screen ---- */
:root {
  --dim: rgba(236, 235, 228, .32);
  --olive: #c9d48a;
  --plate: rgba(28, 30, 28, .78);
  --line: rgba(236, 235, 228, .14);
}
body.mono #app canvas { filter: grayscale(.92) contrast(1.12) brightness(.95); }
#app canvas { transition: filter 1.2s ease; }

#menu { position: fixed; inset: 0; z-index: 10; overflow: hidden; }
#menu.hidden { display: none; }
#menu .fx { position: absolute; inset: 0; pointer-events: none; }
#grain { position: absolute; inset: -50%; width: 200%; height: 200%; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .6s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -3%) } 60% { transform: translate(-2%, -1%) } 80% { transform: translate(3%, 3%) } 100% { transform: translate(0, 0) } }
#vig { background: radial-gradient(ellipse 85% 75% at 58% 45%, transparent 40%, rgba(0, 0, 0, .78) 100%), linear-gradient(to right, rgba(0, 0, 0, .55), transparent 38%); transition: opacity .8s; }
#menu #floor { top: auto; height: 22%; background: linear-gradient(to top, rgba(4, 5, 4, .96), transparent); }
#menu.ingame #vig, #menu.ingame #floor { opacity: 0; }

#board { position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px; transform: translate(-50%, -50%) scale(var(--k, 1)); transform-origin: 50% 50%; font-family: var(--cond); color: var(--ink); --bl: 0px; --bt: 0px; --sl: 0px; --sr: 0px; --sb: 0px; }
#board.small { left: 0; top: 0; transform: scale(var(--k, 1)); transform-origin: 0 0; }
:where(#board) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; padding: 0; }
.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.screen.on { opacity: 1; pointer-events: auto; }
.screen.on.snap { transition: none; }
/* controller focus: an amber ring around whatever A would press */
#board .focus { outline: 2px solid var(--amber) !important; outline-offset: 2px; }

/* ---- main menu ---- */
#logo { position: absolute; left: 930px; top: 64px; }
#logo h1 { margin: 0; font-size: 104px; line-height: 1; padding-top: 6px; letter-spacing: .02em; font-weight: 700;
  background: linear-gradient(180deg, #fbfaf4 0%, #cfd0c8 46%, #8b8d86 54%, #e3e3dc 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(0, 0, 0, .55)); }
#logo .sub { margin-top: -6px; font-size: 18px; letter-spacing: .5em; color: var(--olive); text-shadow: 0 0 14px rgba(201, 212, 138, .35); padding-left: 4px; }
#logo .rule { margin-top: 12px; width: 380px; height: 1px; background: linear-gradient(to right, rgba(201, 212, 138, .7), transparent); }
.mainShade { position: absolute; left: calc(-1 * var(--bl)); top: calc(-1 * var(--bt)); width: calc(900px + var(--bl)); bottom: calc(-1 * var(--bt)); pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, .55), transparent); }
#mainList, #pauseList { position: absolute; left: 0; top: 210px; width: 470px; }
#pauseList { top: 260px; }
.mi { position: relative; display: block; width: 100%; height: 40px; margin-bottom: 5px; text-align: right !important; padding-right: 26px !important; font-size: 25px; letter-spacing: .03em; color: rgba(236, 235, 228, .78);
  background: linear-gradient(to left, rgba(46, 48, 45, .86) 0%, rgba(38, 40, 37, .55) 45%, rgba(30, 32, 30, 0) 100%) !important; transition: color .12s, padding .18s; line-height: 44px; }
.mi::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); transform: scaleY(0); transition: transform .14s; }
.mi.sel { color: #fff; padding-right: 34px !important; background: linear-gradient(to left, rgba(86, 84, 70, .9) 0%, rgba(62, 60, 50, .6) 45%, rgba(40, 40, 34, 0) 100%) !important; }
.mi.sel::after { transform: scaleY(1); }
.mi.off { color: rgba(236, 235, 228, .3); }
.mi .hint { position: absolute; left: calc(100% + 14px); top: 0; white-space: nowrap; text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--amber); opacity: 0; transition: opacity .15s; line-height: 44px; }
.mi.sel .hint { opacity: .85; }
.gap { height: 18px; }
#ticker { position: absolute; left: 160px; right: 0; bottom: 70px; height: 18px; overflow: hidden; font-family: var(--mono); font-size: 11px; letter-spacing: .28em; color: rgba(236, 235, 228, .34); white-space: nowrap; }
#ticker span { display: inline-block; animation: tick 60s linear infinite; }
@keyframes tick { from { transform: translateX(0) } to { transform: translateX(-50%) } }
#buildTag { position: absolute; left: 40px; bottom: 34px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--dim); }
#profileBox { position: absolute; left: 40px; top: 40px; display: flex; gap: 14px; align-items: center; }
.emblem { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(236, 235, 228, .3); display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a3c36, #141513); box-shadow: 0 0 0 4px rgba(0, 0, 0, .35); }
.emblem svg { width: 58%; height: 58%; }
#profileBox b { display: block; font-size: 22px; letter-spacing: .08em; line-height: 1; }
#profileBox span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--mute); margin-top: 6px; }
#profileBox .xp { width: 150px; height: 3px; background: rgba(255, 255, 255, .12); margin-top: 7px; }
#profileBox .xp i { display: block; height: 100%; width: 0; background: var(--olive); }
.foot { position: absolute; right: 40px; bottom: 30px; display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--mute); align-items: center; }
.foot kbd, .foot .gl { display: inline-block; min-width: 22px; padding: 3px 6px; margin-right: 7px; border: 1px solid rgba(236, 235, 228, .3); border-radius: 3px; text-align: center; color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 400; }
.foot .gl.face, .gl.face { border-radius: 50%; min-width: 0; width: 20px; height: 20px; padding: 0; line-height: 19px; border: 0; background: var(--gc); color: #101010; font-weight: 700; }

/* ---- shared sub-screen chrome ---- */
.rail { position: absolute; left: calc(-1 * var(--bl)); top: calc(-1 * var(--bt)); bottom: calc(-1 * var(--bt)); width: calc(76px + var(--bl)); padding-left: var(--bl); background: linear-gradient(to right, rgba(12, 13, 12, .92), rgba(16, 17, 16, .82)); border-right: 1px solid var(--line); z-index: 3; }
.rail .in { position: absolute; left: var(--bl); top: var(--bt); bottom: var(--bt); width: 76px; display: flex; flex-direction: column; align-items: center; padding-top: 30px; gap: 8px; }
.rail .lvl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mute); text-align: center; margin-bottom: 18px; }
.rail .lvl b { display: block; font-family: var(--cond); font-size: 22px; color: var(--ink); letter-spacing: .02em; }
.rail button { width: 52px; height: 52px; display: grid !important; place-items: center; opacity: .5; border-radius: 4px; transition: opacity .12s, background .12s; position: relative; }
.rail button:hover { opacity: .85; }
.rail button.on { opacity: 1; background: rgba(236, 235, 228, .08) !important; }
.rail button.on::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; background: var(--amber); }
.rail svg { width: 26px; height: 26px; }
.rail .spacer { flex: 1; }
.rail .back { margin-bottom: 26px; }
.head { position: absolute; left: 116px; top: 38px; font-size: 40px; letter-spacing: .06em; }
.head small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--mute); margin-top: 4px; }
.shade { position: absolute; left: calc(-1 * var(--bl)); top: calc(-1 * var(--bt)); bottom: calc(-1 * var(--bt)); width: calc(900px + var(--bl)); pointer-events: none; background: linear-gradient(to right, rgba(6, 7, 6, .9) 0%, rgba(6, 7, 6, .7) 55%, transparent 100%); }
.shade.full { width: auto; right: calc(-1 * var(--bl)); background: linear-gradient(to right, rgba(6, 7, 6, .9) 0%, rgba(6, 7, 6, .72) 70%, rgba(6, 7, 6, .5) 100%); }
.shade.full.dark { background: linear-gradient(to right, rgba(6, 7, 6, .92) 0%, rgba(6, 7, 6, .8) 60%, rgba(6, 7, 6, .6) 100%); }
.col-title { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: var(--mute); margin-bottom: 12px; }

/* ---- play ---- */
#modes { position: absolute; left: 116px; top: 128px; width: 330px; }
.mode { position: relative; display: block !important; width: 100%; text-align: left; padding: 16px 18px 15px 64px !important; margin-bottom: 8px; background: rgba(24, 26, 24, .72) !important; border: 1px solid var(--line) !important; transition: background .12s, border-color .12s; }
.mode em { position: absolute; left: 18px; top: 15px; font-style: normal; font-family: var(--mono); font-size: 14px; color: var(--dim); }
.mode b { display: block; font-size: 25px; letter-spacing: .05em; line-height: 1; font-weight: 400; }
.mode span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--mute); margin-top: 8px; line-height: 1.5; }
.mode.on { background: rgba(60, 58, 46, .78) !important; border-color: rgba(242, 179, 61, .6) !important; }
.mode.on em { color: var(--amber); }
#maps { position: absolute; left: 476px; top: 128px; width: 470px; }
.map { position: relative; display: block !important; width: 100%; height: 132px; margin-bottom: 10px; text-align: left; overflow: hidden; border: 1px solid var(--line) !important; background-color: #1a1b19; background-position: center; background-size: cover; background-repeat: no-repeat; }
.map::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(8, 9, 8, .86) 10%, rgba(8, 9, 8, .15) 75%); }
.map b { position: absolute; left: 20px; top: 22px; font-size: 32px; letter-spacing: .06em; font-weight: 400; }
.map span { position: absolute; left: 20px; top: 62px; width: 270px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--mute); line-height: 1.55; }
.map i { position: absolute; right: 14px; top: 12px; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--dim); }
.map.on { border-color: rgba(242, 179, 61, .7) !important; box-shadow: inset 0 0 0 1px rgba(242, 179, 61, .4); }
.map.on b { color: #fff; }
.map.on i { color: var(--amber); }
.map.off { opacity: .35; cursor: default !important; }
#match { position: absolute; left: 976px; top: 128px; width: 420px; }
.row { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(20, 21, 20, .55); }
.row > span { font-size: 19px; letter-spacing: .05em; color: rgba(236, 235, 228, .86); }
.row.hov { background: rgba(60, 58, 46, .55); }
.row.lock > span, .row.lock .pick b { color: var(--dim); }
.row.lock .pick button { visibility: hidden; }
.pick { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; }
.pick button { width: 22px; height: 22px; color: var(--mute) !important; font-size: 14px !important; text-align: center !important; }
.pick button:hover { color: var(--amber) !important; }
.pick b { min-width: 120px; text-align: center; font-weight: 500; color: var(--ink); }
#blurb { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; line-height: 1.7; color: var(--mute); }
#deploy { position: absolute; left: 976px; top: 690px; width: 420px; height: 74px; background: var(--amber) !important; color: #15130c !important; font-size: 38px; letter-spacing: .14em; text-align: left !important; padding-left: 26px !important; clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%); transition: filter .12s; }
#deploy:hover { filter: brightness(1.1); }
#deploy small { position: absolute; right: 30px; top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; }
#deploy.focus { outline-offset: 4px; }

/* ---- create a class ---- */
#classes { position: absolute; left: 116px; top: 128px; width: 300px; }
.cls { position: relative; display: flex !important; align-items: center; gap: 16px; width: 100%; height: 52px; padding-left: 16px !important; text-align: left; font-size: 22px; letter-spacing: .05em; color: rgba(236, 235, 228, .7) !important; }
.cls em { font-style: normal; font-family: var(--mono); font-size: 15px; color: var(--dim); width: 22px; }
.cls.on { color: var(--olive) !important; background: linear-gradient(to right, rgba(201, 212, 138, .16), rgba(201, 212, 138, 0)) !important; }
.cls.on em { color: var(--olive); }
.cls.on::after { content: "›"; position: absolute; right: 12px; font-size: 26px; color: var(--olive); }
.cls .star { color: var(--olive); font-size: 14px; }
.cls input { width: 220px; height: 34px; background: rgba(0, 0, 0, .45); border: 1px solid var(--amber); color: var(--ink); font-family: var(--cond); font-size: 20px; letter-spacing: .05em; padding: 2px 8px 0; outline: none; text-transform: uppercase; }
.clsTools { display: flex; gap: 6px; margin-top: 16px; padding-left: 16px; }
.clsTools button { height: 30px; padding: 0 12px !important; border: 1px solid var(--line) !important; background: rgba(20, 21, 20, .7) !important; font-family: var(--mono) !important; font-size: 10px; letter-spacing: .14em; color: var(--mute) !important; }
.clsTools button:hover { color: var(--ink) !important; }
.clsTools button.on { color: var(--olive) !important; border-color: rgba(201, 212, 138, .5) !important; }
.cls-hint { display: flex; gap: 16px; margin-top: 14px; padding-left: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--dim); line-height: 1.8; }
.cls-hint kbd, .cls-hint .gl { display: inline-block; min-width: 18px; padding: 1px 5px; margin-right: 6px; border: 1px solid rgba(236, 235, 228, .25); border-radius: 3px; text-align: center; color: var(--mute); font-family: var(--mono); font-size: 9px; }
#loadout { position: absolute; left: 436px; top: 128px; width: 380px; }
.card { position: relative; display: flex !important; flex-direction: column; justify-content: flex-start; width: 100%; text-align: left; background: rgba(30, 32, 30, .8) !important; border: 1px solid var(--line) !important; margin-bottom: 6px; padding: 12px 14px !important; transition: background .12s, border-color .12s; }
.card:hover, .card.hov { background: rgba(58, 58, 48, .86) !important; border-color: rgba(201, 212, 138, .45) !important; }
.card .k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--mute); }
.card .n { font-size: 21px; letter-spacing: .04em; margin-top: 2px; }
.card .c { font-family: var(--cond); font-size: 15px; color: var(--olive); letter-spacing: .04em; }
.card.gun { height: 150px; }
.card.gun img { position: absolute; right: 16px; top: 18px; width: 210px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.card.gun .c { position: absolute; left: 14px; bottom: 34px; }
.card.gun .n { position: absolute; left: 14px; bottom: 10px; }
.card.gun .att { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 3px; }
.card.gun .att i { width: 9px; height: 9px; border: 1px solid rgba(242, 179, 61, .8); }
.card.gun .att i.f { background: var(--amber); }
.card.op { height: 62px; }
.card.op .face { position: absolute; right: 10px; top: 6px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #50524a, #151614); border: 1px solid rgba(236, 235, 228, .25); overflow: hidden; display: grid; place-items: end center; }
.card.op .face svg { width: 40px; height: 40px; }
.split { display: grid; grid-template-columns: 1fr 104px; gap: 6px; }
.split .card { margin-bottom: 0; }
.equip { display: grid; gap: 6px; }
.card.eq { height: 52px; }
.card.eq .ic { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; opacity: .85; }
.card.eq .ic svg, .perk svg, .streak svg { width: 100%; height: 100%; }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; }
.perk { display: grid; place-items: center; height: 60px; border-left: 1px solid var(--line); }
.perk:first-child { border-left: 0; }
.perk div { width: 34px; height: 34px; }
.streaks { height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 8px 0; }
.streaks .k { text-align: center; }
.streak { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.streak div { width: 30px; height: 30px; }
#opHint { position: absolute; right: 40px; top: 46px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--mute); text-align: right; line-height: 1.8; }
#opHint b { display: block; font-family: var(--cond); font-size: 34px; letter-spacing: .06em; color: var(--ink); font-weight: 400; }
#dragHint { position: absolute; right: 40px; bottom: 70px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--dim); }
#picker { position: absolute; left: 116px; top: 128px; width: 300px; bottom: 90px; display: none; overflow-y: auto; scrollbar-width: none; padding-right: 2px; }
#picker::-webkit-scrollbar { display: none; }
#picker.on { display: block; }
#picker .ttl { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--amber); margin: 4px 0 12px; }
.opt { position: relative; display: block !important; width: 100%; text-align: left; padding: 10px 14px !important; margin-bottom: 4px; background: rgba(24, 26, 24, .8) !important; border: 1px solid var(--line) !important; }
.opt b { display: block; font-size: 21px; letter-spacing: .04em; line-height: 1.05; font-weight: 400; }
.opt span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--mute); margin-top: 3px; }
.opt.on { border-color: rgba(201, 212, 138, .65) !important; background: rgba(52, 56, 40, .85) !important; }
.opt.on b { color: var(--olive); }
.opt.hov { background: rgba(58, 58, 48, .86) !important; }
.opt .eqd { position: absolute; right: 12px; top: 12px; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--olive); }
#detail { position: absolute; left: 436px; top: 128px; width: 380px; display: none; background: rgba(18, 19, 18, .86); border: 1px solid var(--line); padding: 18px; }
#detail.on { display: block; }
#detail h3 { margin: 0; font-size: 34px; letter-spacing: .05em; font-weight: 400; line-height: 1; }
#detail .cl { font-size: 16px; color: var(--olive); letter-spacing: .05em; margin-top: 4px; }
#detail p { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); line-height: 1.6; margin: 12px 0 0; }
#detail img { display: block; width: 100%; height: 130px; object-fit: contain; margin-top: 10px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
#detail .big { display: grid; place-items: center; height: 130px; margin-top: 10px; }
#detail .big div { width: 90px; height: 90px; }
#detail .big svg { width: 100%; height: 100%; }
.stat { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; margin-top: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mute); }
.stat .bar { height: 5px; background: rgba(255, 255, 255, .1); position: relative; }
.stat .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.stat .bar u { position: absolute; top: 0; bottom: 0; text-decoration: none; }
.stat .bar u.up { background: var(--olive); }
.stat .bar u.dn { background: #d9573f; }
.stat em { font-style: normal; text-align: right; color: var(--ink); }
.camos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.camos .lbl { width: 100%; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--mute); }
.camo { width: 38px; height: 38px; border: 1px solid rgba(236, 235, 228, .2) !important; }
#detail .camos .camo { width: 37px; height: 37px; }
.camo.on { outline: 2px solid var(--olive); outline-offset: 1px; }

/* ---- settings ---- */
#tabs { position: absolute; left: 116px; top: 112px; display: flex; gap: 6px; }
.tab { height: 40px; padding: 0 20px !important; font-size: 20px; letter-spacing: .08em; color: var(--mute) !important; border-bottom: 2px solid transparent !important; }
.tab.on { color: var(--ink) !important; border-bottom-color: var(--amber) !important; background: linear-gradient(to top, rgba(242, 179, 61, .12), transparent) !important; }
#tabs .q, #tabs .e { font-family: var(--mono); font-size: 10px; color: var(--dim); align-self: center; padding: 0 6px; }
#setList { position: absolute; left: 116px; top: 170px; width: 760px; height: 640px; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; }
#setList::-webkit-scrollbar { width: 4px; }
#setList::-webkit-scrollbar-thumb { background: rgba(236, 235, 228, .2); }
.sec { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; color: var(--amber); margin: 20px 0 8px 14px; }
.sec:first-child { margin-top: 4px; }
.srow { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; background: rgba(20, 21, 20, .6); border-bottom: 1px solid rgba(236, 235, 228, .06); }
.srow > span { font-size: 19px; letter-spacing: .04em; color: rgba(236, 235, 228, .86); }
.srow.hov { background: rgba(60, 58, 46, .6); }
.srow.hov > span { color: #fff; }
.slider { display: flex; align-items: center; gap: 14px; }
.slider .tr { width: 220px; height: 22px; position: relative; cursor: pointer; touch-action: none; }
.slider .tr::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; background: rgba(255, 255, 255, .14); }
.slider .tr i { position: absolute; left: 0; top: 9px; height: 4px; background: var(--amber); }
.slider .tr b { position: absolute; top: 3px; width: 4px; height: 16px; background: #fff; margin-left: -2px; }
.slider em { font-style: normal; font-family: var(--mono); font-size: 12px; width: 48px; text-align: right; }
.tog { width: 46px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .16) !important; position: relative; transition: background .15s; }
.tog::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d9d8d0; transition: left .15s; }
.tog.on { background: var(--amber) !important; }
.tog.on::after { left: 27px; background: #15130c; }
.kb { min-width: 90px; height: 28px; padding: 0 12px !important; border: 1px solid rgba(236, 235, 228, .3) !important; font-family: var(--mono) !important; font-size: 12px; letter-spacing: .1em; text-align: center !important; }
.kb.wait { border-color: var(--amber) !important; color: var(--amber) !important; animation: blink .8s infinite; }
.kb.warn { border-color: rgba(217, 87, 63, .8) !important; color: #e2735f !important; }
@keyframes blink { 50% { opacity: .4 } }
.txt { width: 220px; height: 30px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(236, 235, 228, .25); color: var(--ink); font-family: var(--cond); font-size: 19px; letter-spacing: .08em; padding: 2px 10px 0; outline: none; text-transform: uppercase; }
.txt:focus { border-color: var(--amber); }
.swatches { display: flex; gap: 6px; }
.sw { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, .25) !important; }
.sw.on { outline: 2px solid #fff; outline-offset: 1px; }
.sw.em { width: 34px; height: 34px; display: grid !important; place-items: center; background: #1b1c1a !important; }
.sw.em svg { width: 24px; height: 24px; }
#setInfo { position: absolute; left: 910px; top: 170px; width: 420px; background: rgba(16, 17, 16, .82); border: 1px solid var(--line); padding: 22px; }
#setInfo h3 { margin: 0; font-size: 30px; letter-spacing: .05em; font-weight: 400; line-height: 1; }
#setInfo p { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); line-height: 1.7; margin: 12px 0 0; }
#setInfo .prev { margin-top: 18px; height: 200px; border: 1px solid var(--line); background: url(../img/map-oldtown.jpg) 50% 40% / 180% no-repeat; display: none; place-items: center; position: relative; overflow: hidden; }
#setInfo .prev.on { display: grid; }
#setInfo .prev canvas { width: 160px; height: 160px; }
#setInfo .perf { margin-top: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mute); }
#setInfo .perf b { display: inline-block; padding: 2px 6px; margin-left: 6px; color: #15130c; background: var(--olive); font-weight: 500; }
#setInfo .perf b.med { background: var(--amber); }
#setInfo .perf b.hi { background: #d9573f; color: #fff; }
#setInfo .padmap { margin-top: 14px; display: grid; grid-template-columns: 80px 1fr; row-gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--mute); }
#setInfo .padmap b { color: var(--ink); font-weight: 500; }
#setInfo .note { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--amber); }

/* ---- pause, end of match, credits ---- */
.dim-all { position: absolute; inset: calc(-1 * var(--bt)) calc(-1 * var(--bl)); background: rgba(5, 6, 5, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pauseHead { position: absolute; left: 116px; top: 150px; }
.pauseHead b { display: block; font-size: 64px; letter-spacing: .06em; line-height: 1; font-weight: 400; }
.pauseHead span { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--amber); }
.pauseStats { position: absolute; left: 600px; top: 260px; width: 520px; }
.endTop { position: absolute; left: 116px; top: 96px; }
.endTop .res { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; color: var(--olive); }
.endTop b { display: block; font-size: 88px; letter-spacing: .05em; line-height: .95; margin-top: 8px; font-weight: 400; }
.endTop span { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--mute); }
.scorebar { position: absolute; left: 116px; top: 290px; width: 760px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { background: rgba(24, 26, 24, .82); border: 1px solid var(--line); padding: 16px 18px; }
.tile .k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--mute); }
.tile b { display: block; font-size: 54px; line-height: 1; margin-top: 8px; font-weight: 400; }
.tile.hl { border-color: rgba(242, 179, 61, .6); }
.tile.hl b { color: var(--amber); }
.details { position: absolute; left: 116px; top: 440px; width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.details div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 10px 2px; font-size: 19px; letter-spacing: .04em; }
.details div em { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--ink); }
.xpbox { position: absolute; left: 116px; top: 676px; width: 760px; }
.xpbox .lv { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--mute); }
.xpbox .lv .gain { color: var(--amber); }
.xpbox .tr { height: 6px; background: rgba(255, 255, 255, .1); margin-top: 8px; position: relative; }
.xpbox .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--olive); }
.xpbox .tr u { position: absolute; top: 0; bottom: 0; background: var(--amber); text-decoration: none; }
.xpbox .promo { margin-top: 8px; font-size: 22px; letter-spacing: .14em; color: var(--amber); }
.endBtns { position: absolute; left: 116px; top: 748px; display: flex; gap: 10px; }
.btn { height: 58px; padding: 0 30px !important; font-size: 26px; letter-spacing: .12em; border: 1px solid rgba(236, 235, 228, .35) !important; background: rgba(20, 21, 20, .7) !important; }
.btn.pri { background: var(--amber) !important; color: #15130c !important; border-color: var(--amber) !important; }
.btn:hover { filter: brightness(1.12); }
#credList { position: absolute; left: 116px; top: 128px; width: 1200px; bottom: 90px; overflow-y: auto; scrollbar-width: thin; }
.cred { margin-bottom: 18px; }
.cred .k { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: var(--amber); }
.cred div { font-size: 20px; letter-spacing: .03em; margin-top: 4px; line-height: 1.35; }
.cred a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(236, 235, 228, .35); text-underline-offset: 3px; }
.cred a:hover { color: var(--amber); }
.cred small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--mute); margin-top: 4px; line-height: 1.6; }

/* ===================================================================
   phone: Play, Create a Class and Settings get their own board (390 tall); the big screens keep 1440 x 900 with bigger rows
   =================================================================== */
#board.phone .mi { height: 66px; font-size: 40px; line-height: 70px; margin-bottom: 8px; }
#board.phone .mi .hint { font-size: 17px; line-height: 70px; }
#board.phone #mainList { top: 128px; width: 560px; }
#board.phone #pauseList { top: 250px; width: 560px; }
#board.phone .gap { height: 14px; }
#board.phone .foot { display: none; }
#board.phone #ticker { display: none; }
#board.phone .rail .in { padding-top: 30px; }
#board.phone .pauseHead { top: 96px; }
#board.phone .pauseHead b { font-size: 92px; }
#board.phone .pauseHead span { font-size: 21px; letter-spacing: .16em; }
#board.phone .pauseStats { left: 620px; top: 250px; width: 720px; }
#board.phone .pauseStats .scorebar, #board.phone .pauseStats .details { width: 100% !important; }
#board.phone .pauseStats .tile { padding: 18px 22px; }
#board.phone .pauseStats .tile .k { font-size: 20px; }
#board.phone .pauseStats .tile b { font-size: 84px; }
#board.phone .pauseStats .details div { font-size: 32px; padding: 14px 2px; }
#board.phone .pauseStats .details div em { font-size: 22px; }
/* phone end screen: results and buttons on the left, the match details in a column on the right */
#board.phone .endTop { top: 56px; }
#board.phone .endTop .res { font-size: 21px; letter-spacing: .2em; }
#board.phone .endTop b { font-size: 110px; }
#board.phone .endTop span { font-size: 20px; letter-spacing: .12em; }
#board.phone #sEnd .scorebar { top: 270px; width: 700px; }
#board.phone #sEnd .tile { padding: 16px 20px; }
#board.phone #sEnd .tile .k { font-size: 19px; }
#board.phone #sEnd .tile b { font-size: 70px; }
#board.phone #sEnd .details { left: 860px; top: 270px; width: 560px; grid-template-columns: 1fr; gap: 0; }
#board.phone #sEnd .details div { font-size: 30px; padding: 12px 2px; }
#board.phone #sEnd .details div em { font-size: 22px; }
#board.phone .xpbox { top: 440px; width: 700px; }
#board.phone .xpbox .lv { font-size: 19px; letter-spacing: .12em; }
#board.phone .xpbox .tr { height: 10px; }
#board.phone .xpbox .promo { font-size: 30px; }
#board.phone .endBtns { top: 556px; gap: 12px; }
#board.phone .endBtns .btn { height: 92px; font-size: 34px; padding: 0 30px !important; }

#board.small .rail { left: 0; top: 0; bottom: 0; width: calc(var(--sl) + 56px); padding: 0; background: linear-gradient(to right, rgba(10, 11, 10, .95), rgba(16, 17, 16, .88)); }
#board.small .rail .in { left: var(--sl); top: 0; bottom: 0; width: 56px; padding-top: 12px; gap: 0; }
#board.small .rail .emblem { width: 40px !important; height: 40px !important; margin-bottom: 4px !important; box-shadow: none; }
#board.small .rail .lvl { margin-bottom: 4px; font-size: 8px; }
#board.small .rail .lvl b { font-size: 15px; }
#board.small .rail button { width: 56px; height: 50px; }
#board.small .rail button.on::before { left: -2px; top: 14px; bottom: 14px; }
#board.small .rail svg { width: 25px; height: 25px; }
#board.small .rail .back { margin-bottom: calc(var(--sb) + 4px); }
#board.small .head { left: calc(var(--sl) + 70px); top: 11px; font-size: 26px; letter-spacing: .07em; line-height: 30px; }
#board.small .head small { display: none; }
#board.small .shade, #board.small .shade.full { left: 0; top: 0; bottom: 0; right: 0; width: auto; }
#board.small .foot { display: none; }
#board.small .col-title { display: none; }
/* play */
#board.small #modes { left: calc(var(--sl) + 198px); right: var(--sr); top: 10px; width: auto; height: 38px; display: flex; gap: 6px; }
#board.small .mode { flex: 1; height: 38px; margin: 0; padding: 0 !important; text-align: center !important; }
#board.small .mode em, #board.small .mode span { display: none; }
#board.small .mode b { font-size: 16px; letter-spacing: .07em; line-height: 40px; white-space: nowrap; }
#board.small .mode.on { box-shadow: inset 0 -2px 0 var(--amber); }
#board.small #maps { left: calc(var(--sl) + 70px); top: 60px; width: 352px; }
#board.small .map { height: 74px; margin-bottom: 8px; }
#board.small .map b { left: 14px; top: 13px; font-size: 24px; letter-spacing: .07em; }
#board.small .map span { left: 14px; top: 44px; right: 90px; width: auto; font-size: 9.5px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#board.small .map i { right: 10px; top: 9px; font-size: 8.5px; }
#board.small #match { left: calc(var(--sl) + 434px); right: var(--sr); top: 60px; width: auto; }
#board.small .row { height: 46px; padding: 0 0 0 12px; background: rgba(16, 17, 16, .66); }
#board.small .row > span { font-size: 17px; }
#board.small .pick { gap: 0; }
#board.small .pick button { width: 38px; height: 46px; font-size: 22px !important; }
#board.small .pick b { min-width: 100px; font-size: 11px; letter-spacing: .1em; }
#board.small #blurb { position: absolute; left: calc(var(--sl) + 70px - (var(--sl) + 434px)); width: 330px; top: 254px; margin: 0; font-size: 9.5px; line-height: 1.55; }
#board.small #deploy { left: auto; right: var(--sr); width: 240px; top: 306px; height: 56px; font-size: 32px; letter-spacing: .16em; padding-left: 20px !important; line-height: 60px; clip-path: polygon(0 0, 100% 0, 100% 64%, 92% 100%, 0 100%); }
#board.small #deploy small { display: none; }
/* create a class */
#board.small #classes { left: calc(var(--sl) + 70px); top: 54px; width: 150px; }
#board.small .cls { height: 40px; gap: 10px; padding-left: 10px !important; font-size: 17px; white-space: nowrap; }
#board.small .cls em { font-size: 11px; width: 16px; }
#board.small .cls.on::after { right: 8px; font-size: 20px; }
#board.small .cls input { width: 120px; height: 30px; font-size: 16px; }
#board.small .clsTools { padding-left: 0; margin-top: 10px; flex-wrap: wrap; }
#board.small .clsTools button { flex: 1; height: 32px; font-size: 9px; padding: 0 6px !important; }
#board.small .cls-hint { display: none; }
#board.small #loadout { left: calc(var(--sl) + 232px); top: 54px; width: 284px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#board.small #loadout .card { margin: 0; padding: 8px 10px !important; }
#board.small #loadout .card.op { display: none !important; }
#board.small .card .k { font-size: 8.5px; letter-spacing: .18em; }
#board.small .card .n { font-size: 16px; white-space: nowrap; }
#board.small .card .c { font-size: 12.5px; }
#board.small .card.gun { grid-column: span 2; height: 84px; }
#board.small .card.gun.side { height: 64px; }
#board.small .card.gun img { right: 8px; top: 8px; width: 150px; height: 58px; }
#board.small .card.gun.side img { width: 110px; height: 46px; top: 9px; }
#board.small .card.gun .c { left: 10px; bottom: 26px; }
#board.small .card.gun .n { left: 10px; bottom: 6px; }
#board.small .card.gun .att { right: 10px; bottom: 9px; }
#board.small .card.gun .att i { width: 7px; height: 7px; }
#board.small .split { display: contents; }
#board.small .equip { display: contents; }
#board.small .card.eq { height: 50px; }
#board.small .card.eq .ic { right: 8px; top: 12px; width: 24px; height: 24px; }
#board.small .card.eq .n { font-size: 15px; margin-top: 3px; }
#board.small .card.pk, #board.small .card.ks { height: 66px; padding: 6px 8px !important; }
#board.small .perks { margin-top: 6px; }
#board.small .perk { height: 34px; border: 0; }
#board.small .perk div { width: 26px; height: 26px; }
#board.small .streaks { flex-direction: row; justify-content: space-around; align-items: flex-end; flex-wrap: wrap; padding: 0; height: auto; }
#board.small .streaks .k { width: 100%; text-align: left; }
#board.small .streak { font-size: 8.5px; margin-top: 4px; }
#board.small .streak div { width: 22px; height: 22px; }
#board.small #opHint { right: var(--sr); top: 10px; font-size: 8.5px; line-height: 1.5; cursor: pointer; pointer-events: auto; }
#board.small #opHint b { font-size: 24px; line-height: 26px; }
#board.small #opHint span::after { content: "  ›"; color: var(--amber); }
#board.small #dragHint { right: var(--sr); bottom: calc(var(--sb) + 4px); font-size: 8.5px; }
#board.small #picker { left: calc(var(--sl) + 70px); top: 54px; width: 222px; bottom: 0; padding-bottom: 24px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
#board.small #picker .ttl { font-size: 9px; margin: 4px 0 6px; }
#board.small .opt { min-height: 46px; padding: 7px 12px !important; }
#board.small .opt b { font-size: 18px; line-height: 20px; }
#board.small .opt span { font-size: 8.5px; letter-spacing: .1em; }
#board.small .opt .eqd { right: 10px; top: 8px; font-size: 8px; }
#board.small #detail { left: calc(var(--sl) + 302px); top: 54px; width: 254px; bottom: 12px; padding: 10px 12px; overflow-y: auto; scrollbar-width: none; }
#board.small #detail h3 { font-size: 24px; line-height: 26px; }
#board.small #detail .cl { font-size: 13px; }
#board.small #detail img { width: 228px; height: 70px; margin: 2px 0; }
#board.small #detail p { font-size: 9px; line-height: 1.5; margin: 3px 0 6px; }
#board.small #detail .big { height: 92px; margin: 0; }
#board.small #detail .big div { width: 72px; height: 72px; }
#board.small .stat { grid-template-columns: 62px 1fr 24px; gap: 6px; margin-top: 3px; font-size: 8.5px; letter-spacing: .08em; }
#board.small .stat .bar { height: 4px; }
#board.small .camos { gap: 3px; margin-top: 6px; }
#board.small .camos .lbl { font-size: 8.5px; }
#board.small .camo { width: 27px; height: 27px; }
/* settings */
#board.small #tabs { left: calc(var(--sl) + 70px); right: var(--sr); top: 46px; height: 38px; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); touch-action: pan-x; }
#board.small #tabs::-webkit-scrollbar { display: none; }
#board.small #tabs .q, #board.small #tabs .e { display: none; }
#board.small .tab { flex: none; height: 38px; padding: 0 13px !important; font-size: 16px; letter-spacing: .07em; white-space: nowrap; border-bottom: 0 !important; }
#board.small .tab.on { box-shadow: inset 0 -2px 0 var(--amber); }
#board.small #setList { left: calc(var(--sl) + 70px); width: 412px; top: 90px; height: auto; bottom: 0; padding: 0 0 calc(var(--sb) + 8px); scrollbar-width: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#board.small #setList::-webkit-scrollbar { display: none; }
#board.small .sec { font-size: 8.5px; letter-spacing: .24em; margin: 0; padding: 12px 10px 6px; }
#board.small .srow { height: 46px; padding: 0 0 0 10px; background: rgba(14, 15, 14, .66); }
#board.small .srow > span { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
#board.small .slider { gap: 8px; padding-right: 10px; }
#board.small .slider .tr { width: 132px; height: 46px; }
#board.small .slider .tr::before, #board.small .slider .tr i { top: 21px; }
#board.small .slider .tr b { top: 12px; width: 10px; height: 22px; margin-left: -5px; border-radius: 2px; box-shadow: 0 0 0 3px rgba(0, 0, 0, .3); }
#board.small .slider em { width: 40px; font-size: 11px; }
#board.small .tog { width: 48px; height: 26px; border-radius: 13px; margin-right: 10px; }
#board.small .tog::after { width: 20px; height: 20px; border-radius: 10px; }
#board.small .tog.on::after { left: 25px; }
#board.small .srow .pick b { min-width: 96px; }
#board.small .txt { width: 150px; margin-right: 10px; font-size: 17px; }
#board.small .kb { margin-right: 10px; }
#board.small .swatches { gap: 5px; padding-right: 10px; }
#board.small .sw { width: 24px; height: 24px; }
#board.small .sw.em { width: 30px; height: 30px; }
#board.small #setInfo { left: calc(var(--sl) + 494px); right: var(--sr); top: 98px; bottom: calc(var(--sb) + 6px); width: auto; padding: 12px 14px; overflow: hidden; }
#board.small #setInfo h3 { font-size: 21px; line-height: 23px; }
#board.small #setInfo p { font-size: 9.5px; line-height: 1.6; margin-top: 6px; }
#board.small #setInfo .perf { margin-top: 10px; font-size: 8.5px; }
#board.small #setInfo .prev { margin-top: 10px; height: 92px; }
#board.small #setInfo .prev canvas { width: 80px; height: 80px; }
#board.small #setInfo .padmap { grid-template-columns: 54px 1fr; font-size: 8.5px; row-gap: 2px; margin-top: 8px; }
/* credits */
#board.small #credList { left: calc(var(--sl) + 70px); right: var(--sr); top: 54px; bottom: 0; width: auto; padding: 0 12px calc(var(--sb) + 14px) 0; scrollbar-width: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#board.small #credList::-webkit-scrollbar { display: none; }
#board.small .cred { margin-bottom: 11px; }
#board.small .cred .k { font-size: 8.5px; letter-spacing: .2em; }
#board.small .cred div { font-size: 15px; margin-top: 2px; line-height: 1.3; }
#board.small .cred small { font-size: 9px; margin-top: 2px; line-height: 1.5; }

/* ===================================================================
   online: make or join a lobby, then the lobby itself
   =================================================================== */
#onl .ocol { position: absolute; left: 116px; top: 150px; width: 520px; }
#onl .ocol.oright { left: 700px; width: 640px; }
.otitle { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: var(--mute); margin: 26px 0 10px; }
.ocol > .otitle:first-child { margin-top: 0; }
.oname { font-size: 44px; letter-spacing: .06em; line-height: 1; }
.onote { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--mute); margin-top: 6px; }
.ocard { display: block !important; width: 100%; margin-top: 26px; text-align: left !important; padding: 20px 22px !important; background: var(--amber) !important; color: #15130c !important; clip-path: polygon(0 0, 100% 0, 100% 72%, 95% 100%, 0 100%); }
.ocard b { display: block; font-size: 34px; letter-spacing: .12em; font-weight: 400; line-height: 1.05; }
.ocard span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; margin-top: 6px; opacity: .8; }
.ocard:hover { filter: brightness(1.1); }
.ocard:disabled, .obig:disabled, #onl .btn:disabled { opacity: .4; filter: none; cursor: default; }
.ojoin { display: flex; gap: 10px; }
.ojoin input { width: 260px; height: 58px; padding: 0 18px; background: rgba(20, 21, 20, .8); border: 1px solid rgba(236, 235, 228, .35); color: var(--ink); font-family: var(--cond); font-size: 34px; letter-spacing: .3em; text-transform: uppercase; outline: none; }
.ojoin input:focus, .ojoin input.focus { border-color: var(--amber); }
.ojoin input::placeholder { color: rgba(236, 235, 228, .3); }
.oerr { min-height: 20px; margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--red, #ff4b3e); line-height: 1.5; }
.omute { color: var(--mute); }
.oinfo { background: rgba(20, 21, 20, .72); border: 1px solid var(--line); padding: 6px 22px; }
.oinfo p { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--mute); margin: 14px 0; }
.oinfo b { font-family: var(--cond); font-size: 20px; letter-spacing: .06em; font-weight: 400; color: var(--ink); margin-right: 6px; }
.ocode { display: flex; align-items: center; gap: 18px; }
.ocode b { font-size: 76px; letter-spacing: .2em; font-weight: 400; line-height: 1; }
.oprow { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 18px; margin-bottom: 6px; background: rgba(20, 21, 20, .72); border: 1px solid var(--line); }
.oprow b { font-size: 26px; letter-spacing: .06em; font-weight: 400; }
.oprow i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--amber); }
.oprow span { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.oprow.owait { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--mute); border-style: dashed; }
#oLeave { margin-top: 16px; }
.omaps .map { height: 110px; }
.omaps .map.ro { cursor: default; }
.orules { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--mute); margin-top: 4px; }
.obig { display: block !important; width: 100%; height: 74px; margin-top: 18px; background: var(--amber) !important; color: #15130c !important; font-size: 38px; letter-spacing: .14em; text-align: left !important; padding-left: 26px !important; clip-path: polygon(0 0, 100% 0, 100% 70%, 96% 100%, 0 100%); }
.obig:hover:not(:disabled) { filter: brightness(1.1); }
.owaithost { margin-top: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--mute); }
/* phone board */
#board.small #onl .ocol { left: calc(var(--sl) + 70px); top: 50px; width: 300px; }
#board.small #onl .ocol.oright { left: calc(var(--sl) + 390px); right: var(--sr); width: auto; }
#board.small .otitle { font-size: 8.5px; margin: 12px 0 6px; }
#board.small .oname { font-size: 26px; }
#board.small .onote { font-size: 8.5px; }
#board.small .ocard { margin-top: 12px; padding: 10px 14px !important; }
#board.small .ocard b { font-size: 22px; }
#board.small .ocard span { font-size: 8.5px; }
#board.small .ojoin input { width: 170px; height: 42px; font-size: 24px; padding: 0 12px; }
#board.small #onl .btn { height: 42px; font-size: 18px; padding: 0 16px !important; }
#board.small .oerr { font-size: 9px; margin-top: 6px; }
#board.small .oinfo { padding: 2px 12px; }
#board.small .oinfo p { font-size: 9px; margin: 8px 0; line-height: 1.55; }
#board.small .oinfo b { font-size: 15px; }
#board.small .ocode b { font-size: 44px; }
#board.small .oprow { height: 40px; padding: 0 12px; margin-bottom: 4px; }
#board.small .oprow b { font-size: 18px; }
#board.small .oprow i, #board.small .oprow span, #board.small .oprow.owait { font-size: 8.5px; }
#board.small #oLeave { margin-top: 8px; }
#board.small .omaps .map { height: 62px; margin-bottom: 6px; }
#board.small .orules { font-size: 8.5px; }
#board.small .obig { height: 52px; margin-top: 10px; font-size: 28px; padding-left: 18px !important; }
#board.small .owaithost { margin-top: 12px; font-size: 8.5px; }
/* the lobby with teams and rules */
.oplayers { max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.oplayers.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oteam .otname { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--mute); padding: 0 4px 6px; border-bottom: 2px solid rgba(236, 235, 228, .2); margin-bottom: 6px; }
.oteam.t0 .otname { border-color: #5cc2ff; color: #b9e3ff; }
.oteam.t1 .otname { border-color: #e2685d; color: #ffc2bc; }
.oteam .otname em { font-style: normal; }
.oplayers .oprow { height: 44px; padding: 0 12px; }
.oplayers .oprow b { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.oprow.me { border-color: rgba(242, 179, 61, .5); }
.obtns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
#oLeave { margin-top: 0; }
#oRules .row { height: 42px; }
#oRules .row > span { font-size: 18px; }
#onl .orules { margin-top: 10px; letter-spacing: .06em; line-height: 1.5; }
/* phone board */
#board.small .oplayers { max-height: 150px; }
#board.small .oplayers.split { gap: 6px; }
#board.small .oteam .otname { font-size: 8px; padding-bottom: 3px; margin-bottom: 3px; }
#board.small .oplayers .oprow { height: 30px; padding: 0 8px; }
#board.small .oplayers .oprow b { font-size: 14px; }
#board.small .obtns { margin-top: 6px; gap: 6px; }
#board.small #oRules { max-height: 232px; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
#board.small #oRules::-webkit-scrollbar { display: none; }
#board.small #oRules .row { height: 34px; padding: 0 0 0 10px; }
#board.small #oRules .row > span { font-size: 14px; }
#board.small #oRules .pick button { width: 30px; height: 34px; font-size: 18px !important; }
#board.small #oRules .pick b { min-width: 96px; font-size: 9.5px; }
#board.small #onl .orules { margin-top: 4px; font-size: 8px; }

/* the bot check (js/human.js): laid out but invisible until Cloudflare shows its box to tick */
#human { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8, 9, 8, .72); visibility: hidden; opacity: 0; transition: opacity .15s; }
#human.show { visibility: visible; opacity: 1; }
#human .hpanel { min-width: 340px; padding: 22px 24px 20px; background: rgba(16, 17, 16, .96); border: 1px solid var(--line); text-align: left; }
#human .htitle { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: var(--amber); }
#human .htext { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--mute); margin: 8px 0 16px; }
#human .hslot { min-height: 0; }
#human .hcancel { margin-top: 16px; height: 40px; padding: 0 20px; font-family: var(--cond); font-size: 20px; letter-spacing: .12em; color: var(--ink); border: 1px solid rgba(236, 235, 228, .35); background: rgba(20, 21, 20, .7); }
#human .hcancel:hover { filter: brightness(1.12); }