:root {
  --font: "Syncopate", "Arial Black", "Segoe UI Black", Impact, sans-serif;
  --ink: #000;
  --paper: #fff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: #0d0d0d; /* shows at the edges while the screen shakes */
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
}

/* full-screen stage, no frame */
.frame {
  position: fixed;
  inset: 0;
  background: #cfd3da;
  overflow: clip; /* clip, not hidden: focus() can't scroll the off-screen slide-in panels into view */
}
.frame.shake { animation: shake 0.5s linear; }
@keyframes shake {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  10% { translate: -1.8vmin 1vmin; rotate: -0.4deg; }
  22% { translate: 1.6vmin -1.2vmin; rotate: 0.35deg; }
  34% { translate: -1.2vmin -0.7vmin; rotate: -0.2deg; }
  46% { translate: 1vmin 0.9vmin; rotate: 0.2deg; }
  60% { translate: -0.6vmin 0.5vmin; }
  78% { translate: 0.3vmin -0.3vmin; }
}

/* the jumping-squares scene lives under the black panel */
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* the black slanted panel on the left */
.slash {
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 17% 0, 39% 100%, 0 100%);
}

/* TITLE: white with a black outline, tilted */
.title {
  position: absolute;
  left: 5%;
  top: 11%;
  margin: 0;
  transform: rotate(-3deg);
  transform-origin: left top;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: min(6.8vmin, 5.3vw);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--paper);
  /* rounded black outline built from a ring of shadows */
  text-shadow:
    0.130em 0.000em 0 var(--ink),
    0.126em 0.034em 0 var(--ink),
    0.113em 0.065em 0 var(--ink),
    0.092em 0.092em 0 var(--ink),
    0.065em 0.113em 0 var(--ink),
    0.034em 0.126em 0 var(--ink),
    0.000em 0.130em 0 var(--ink),
    -0.034em 0.126em 0 var(--ink),
    -0.065em 0.113em 0 var(--ink),
    -0.092em 0.092em 0 var(--ink),
    -0.113em 0.065em 0 var(--ink),
    -0.126em 0.034em 0 var(--ink),
    -0.130em 0.000em 0 var(--ink),
    -0.126em -0.034em 0 var(--ink),
    -0.113em -0.065em 0 var(--ink),
    -0.092em -0.092em 0 var(--ink),
    -0.065em -0.113em 0 var(--ink),
    -0.034em -0.126em 0 var(--ink),
    0.000em -0.130em 0 var(--ink),
    0.034em -0.126em 0 var(--ink),
    0.065em -0.113em 0 var(--ink),
    0.092em -0.092em 0 var(--ink),
    0.113em -0.065em 0 var(--ink),
    0.126em -0.034em 0 var(--ink);
  user-select: none;
}
.title span { display: block; white-space: nowrap; }

/* BUTTONS: white, black outline, black text. Only buttons marked .slide move sideways on hover. */
.menu {
  position: absolute;
  left: 7%;
  top: 46%;
  display: flex;
  flex-direction: column;
  gap: 2.6vmin;
  transform: rotate(-3deg);
  transform-origin: left top;
}

.btn {
  width: min(40vmin, 30vw);
  padding: 1.9vmin 3vmin;
  font: inherit;
  font-size: min(3.1vmin, 2.4vw);
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  background-clip: padding-box; /* keeps the white fill from bleeding past the black border */
  border: 0.55vmin solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: 0.55vmin solid var(--paper);
  outline-offset: -1.4vmin;
}
.btn:active { transform: scale(0.98); }
.btn.slide:hover, .btn.slide:focus-visible { transform: translateX(2.4vmin); }
.btn.slide:active { transform: translateX(1.4vmin) scale(0.98); }

/* ---------- sliding card (play / join / settings / help) ---------- */
.card {
  position: absolute;
  right: 7%;
  top: 50%;
  width: max(270px, min(54vmin, 40vw));
  padding: 3.2vmin 3.4vmin 3vmin;
  background: var(--paper);
  border: 0.55vmin solid var(--ink);
  box-shadow: 1.4vmin 1.4vmin 0 var(--ink);
  rotate: -3deg;
  translate: 150% -50%;
  visibility: hidden;
  transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
  z-index: 5;
}
.card.open {
  translate: 0 -50%;
  visibility: visible;
  transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

h2 {
  margin: 0 0 2.2vmin;
  font-size: min(3.2vmin, 2.5vw);
  letter-spacing: 0.06em;
}

.view { display: none; }
.view.on { display: block; animation: viewIn 0.3s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateX(2.4vmin); } to { opacity: 1; transform: none; } }

.opt {
  display: block;
  width: 100%;
  margin: 0 0 1.8vmin;
  padding: 1.9vmin 2.4vmin;
  font: inherit;
  font-size: min(2.7vmin, 2.1vw);
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--paper);
  background: var(--ink);
  border: 0.45vmin solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.opt:hover:not(:disabled), .opt:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.opt:active:not(:disabled) { transform: scale(0.98); }
.opt.slide:hover:not(:disabled), .opt.slide:focus-visible { transform: translateX(1.4vmin); }
.opt:disabled { opacity: 0.45; cursor: default; }
.opt.ghost { color: var(--ink); background: var(--paper); }
.opt.ghost:hover:not(:disabled), .opt.ghost:focus-visible { background: var(--ink); color: var(--paper); }

label {
  display: block;
  margin: 0 0 1vmin;
  font-size: min(2vmin, 1.6vw);
  letter-spacing: 0.08em;
}

.field {
  display: block;
  width: 100%;
  margin: 0 0 1.8vmin;
  padding: 1.7vmin 2vmin;
  font: inherit;
  font-size: min(2.7vmin, 2.1vw);
  text-transform: uppercase;
  color: var(--ink);
  background: #eceef2;
  border: 0.45vmin solid var(--ink);
  border-radius: 0;
}
.field.plain { text-transform: none; }
.field:focus { outline: 0.45vmin solid var(--ink); outline-offset: 0.4vmin; background: var(--paper); }
.field.code { letter-spacing: 0.4em; text-align: center; }

.note {
  margin: 0 0 1.8vmin;
  font-size: min(1.9vmin, 1.5vw);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.note.small { margin: 1vmin 0 0; font-size: min(1.5vmin, 1.2vw); opacity: 0.65; }
.status {
  min-height: 1.4em;
  margin: 0.4vmin 0 0;
  font-size: min(1.8vmin, 1.4vw);
  letter-spacing: 0.06em;
  color: #b3121d;
}
.status.ok { color: #12703a; }

/* ---------- log in / create account ---------- */
.modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 40;
}
.modal.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.modal-box {
  width: max(290px, min(60vmin, 44vw));
  max-height: 96%;
  overflow: auto;
  padding: 3.4vmin;
  background: var(--paper);
  border: 0.55vmin solid var(--ink);
  box-shadow: 1.4vmin 1.4vmin 0 var(--ink);
  rotate: -2deg;
  scale: 0.92;
  transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal.open .modal-box { scale: 1; }

.tabs { display: flex; margin: 0 0 2.4vmin; border: 0.45vmin solid var(--ink); }
.tab {
  flex: 1;
  padding: 1.5vmin 1vmin;
  font: inherit;
  font-size: min(1.8vmin, 1.4vw);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  cursor: pointer;
}
.tab + .tab { border-left: 0.45vmin solid var(--ink); }
.tab.on { color: var(--paper); background: var(--ink); }
.tab:not(.on):hover { background: #e4e6eb; }

/* ---------- lobby ---------- */
.lobby, .gamescreen {
  position: absolute;
  inset: 0;
  background-color: #cfd3da;
  background-image:
    linear-gradient(#bcc1ca 1px, transparent 1px),
    linear-gradient(90deg, #bcc1ca 1px, transparent 1px);
  background-size: 6vmin 6vmin;
  translate: 100% 0;
  visibility: hidden;
  transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
  z-index: 10;
}
.gamescreen { z-index: 16; }
.lobby.open, .gamescreen.open {
  translate: 0 0;
  visibility: visible;
  transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.l-slash { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 0, 27% 0, 37% 100%, 0 100%); }

.l-players {
  position: absolute;
  left: 4%;
  top: 7%;
  width: 23%;
  rotate: -3deg;
  transform-origin: left top;
  color: var(--paper);
}
.l-players h2 { color: var(--paper); }
.l-players h2 span { opacity: 0.6; }
#pList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.4vmin; }
#pList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vmin;
  padding: 1.5vmin 1.8vmin;
  font-size: min(2.2vmin, 1.7vw);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper);
  border: 0.45vmin solid var(--ink);
  background-clip: padding-box;
  animation: rowIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#pList li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pList li .tags { flex: none; display: flex; gap: 0.6vmin; }
#pList li .tag { padding: 0.4vmin 0.8vmin; font-size: 0.7em; color: var(--paper); background: var(--ink); }
#pList li .tag.ready { background: #12703a; }
#pList li.me { translate: 1.4vmin 0; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-3vmin); } to { opacity: 1; transform: none; } }

.l-mid {
  position: absolute;
  left: 41%;
  right: 4%;
  top: 7%;
  bottom: 22%;
  display: flex;
  flex-direction: column;
  gap: 2.4vmin;
}
.l-code {
  display: flex;
  align-items: center;
  gap: 2vmin;
  align-self: flex-start;
  padding: 1.6vmin 2.2vmin;
  font-size: min(2vmin, 1.6vw);
  letter-spacing: 0.08em;
  background: var(--paper);
  border: 0.55vmin solid var(--ink);
  box-shadow: 1vmin 1vmin 0 var(--ink);
}
.l-code b { font-size: 1.9em; letter-spacing: 0.3em; }
.chip {
  padding: 0.9vmin 1.4vmin;
  font: inherit;
  font-size: 0.85em;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  cursor: pointer;
}
.chip:hover { background: #333; }

.l-stats {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 2.6vmin 3vmin;
  background: var(--paper);
  border: 0.55vmin solid var(--ink);
  box-shadow: 1.2vmin 1.2vmin 0 var(--ink);
}
.l-stats table { width: 100%; border-collapse: collapse; font-size: min(2vmin, 1.5vw); letter-spacing: 0.05em; }
.l-stats th { padding: 0 0 1.4vmin; font-size: 0.8em; text-align: right; opacity: 0.6; }
.l-stats td { padding: 1.3vmin 0; text-align: right; border-top: 0.3vmin solid var(--ink); }
.l-stats th:first-child, .l-stats td:first-child { text-align: left; max-width: 18vmin; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-stats tr.me td:first-child { text-decoration: underline; text-underline-offset: 0.5vmin; }

.l-leave { position: absolute; left: 4%; bottom: 6%; width: min(30vmin, 20vw); }
.l-start { position: absolute; right: 4%; bottom: 6%; width: max(260px, min(50vmin, 34vw)); }
.l-start p { min-height: 1.4em; margin: 0 0 1.2vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.06em; text-align: right; }
.l-start .opt { margin: 0; text-align: center; }
.l-start .opt:disabled { opacity: 0.5; }

/* once someone presses START the button shakes until the other player does too */
.opt.shaking { animation: btnShake 0.28s linear infinite; }
@keyframes btnShake {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  20% { translate: -0.6vmin 0.2vmin; rotate: -0.7deg; }
  40% { translate: 0.6vmin -0.3vmin; rotate: 0.7deg; }
  60% { translate: -0.5vmin -0.2vmin; rotate: -0.5deg; }
  80% { translate: 0.5vmin 0.3vmin; rotate: 0.5deg; }
}

/* ---------- fighter select (falls onto the lobby) ---------- */
.select {
  position: absolute;
  inset: 0;
  color: var(--paper);
  background-color: #0d0d0d;
  background-image:
    linear-gradient(#1d1d1d 1px, transparent 1px),
    linear-gradient(90deg, #1d1d1d 1px, transparent 1px);
  background-size: 6vmin 6vmin;
  translate: 0 -105%;
  visibility: hidden;
  z-index: 15;
}
.select.drop { translate: 0 0; visibility: visible; animation: fall 0.95s backwards; }
@keyframes fall {
  0% { translate: 0 -105%; animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
  66% { translate: 0 0; animation-timing-function: ease-out; }
  77% { translate: 0 -3.2%; animation-timing-function: ease-in; }
  87% { translate: 0 0; animation-timing-function: ease-out; }
  93% { translate: 0 -0.8%; animation-timing-function: ease-in; }
  100% { translate: 0 0; }
}

.s-head {
  position: absolute;
  left: 5%;
  top: 6%;
  rotate: -3deg;
  transform-origin: left top;
}
.s-head h2 { margin: 0 0 1.2vmin; font-size: min(5vmin, 3.8vw); color: var(--paper); }
.s-sub { margin: 0; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; color: #9aa0ab; }
.select.drop .s-head { animation: headIn 0.7s 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
@keyframes headIn { from { translate: 0 -40vh; opacity: 0; } to { translate: 0 0; opacity: 1; } }

.s-body { position: absolute; left: 4%; right: 4%; top: 25%; bottom: 14%; display: flex; }
.s-cards { flex: 1; display: flex; gap: 2vmin; }

.ccard {
  --c: #fff;
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  font: inherit;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border: 0.55vmin solid var(--paper);
  box-shadow: 1vmin 1vmin 0 #4a4a4a;
  rotate: -3deg;
  cursor: pointer;
  transition: translate 0.15s ease, box-shadow 0.15s ease;
}
.ccard:hover, .ccard:focus-visible { translate: 0 -1.4vmin; box-shadow: 1.2vmin 2.4vmin 0 #4a4a4a; outline: none; }
.ccard .art { position: relative; flex: 1; min-height: 0; background: color-mix(in srgb, var(--c) 20%, #eceef2); border-bottom: 0.45vmin solid var(--ink); }
.ccard .art svg { position: absolute; inset: 1.4vmin; width: calc(100% - 2.8vmin); height: calc(100% - 2.8vmin); }
.ccard .nm { padding: 1.4vmin 0.6vmin 0.5vmin; font-size: min(2.3vmin, 1.7vw); letter-spacing: 0.05em; }
.ccard .rl { padding: 0 0.6vmin 1.4vmin; font-size: min(1.2vmin, 0.95vw); letter-spacing: 0.05em; opacity: 0.65; }
.ccard .badge {
  position: absolute;
  top: -1.4vmin;
  right: -1.4vmin;
  padding: 0.7vmin 1.1vmin;
  font-size: min(1.3vmin, 1vw);
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  border: 0.3vmin solid var(--paper);
}
.ccard .badge.pick { background: #12703a; }
.ccard.picked { border-color: #3ddc84; box-shadow: 1vmin 1vmin 0 #3ddc84; }
.select.drop .ccard { animation: cardIn 0.9s calc(0.85s + var(--i) * 0.12s) cubic-bezier(0.25, 0.8, 0.3, 1) backwards; }
@keyframes cardIn {
  0% { translate: 5vw -120vh; opacity: 0; }
  12% { opacity: 1; }
  68% { translate: 0 1.6vmin; }
  84% { translate: 0 -0.8vmin; }
  100% { translate: 0 0; opacity: 1; }
}

.s-leave { position: absolute; left: 4%; bottom: 4%; width: min(26vmin, 18vw); }

/* detail overlay */
.s-info {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr); /* gives .i-box a definite height so only its content scrolls */
  place-items: center;
  padding: 3vmin;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  z-index: 3;
}
.s-info.open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
.i-box {
  --c: #fff;
  width: min(96vw, 1000px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--paper);
  border: 0.55vmin solid var(--ink);
  box-shadow: 1.4vmin 1.4vmin 0 #555;
  translate: 0 -8vh;
  opacity: 0;
  transition: translate 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.25s ease;
}
.s-info.open .i-box { translate: 0 0; opacity: 1; }
.i-cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 3vmin; padding: 3vmin; overflow: auto; min-height: 0; }
.i-art { position: relative; height: min(26vmin, 22vw); background: color-mix(in srgb, var(--c) 20%, #eceef2); border: 0.45vmin solid var(--ink); }
.i-art svg { position: absolute; inset: 1vmin; width: calc(100% - 2vmin); height: calc(100% - 2vmin); }
.i-box h3 { margin: 2vmin 0 0.4vmin; font-size: min(3.4vmin, 2.6vw); letter-spacing: 0.05em; }
.i-box h4 { margin: 2.2vmin 0 1vmin; font-size: min(1.7vmin, 1.3vw); letter-spacing: 0.1em; opacity: 0.6; }
.i-role { font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.06em; }
.i-diff { margin-top: 1vmin; font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.08em; }
.i-desc, .i-text { margin: 0; font-size: min(1.7vmin, 1.3vw); line-height: 1.7; letter-spacing: 0.03em; text-transform: none; }
.i-passive b { display: block; margin-bottom: 0.4vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; }

.bars { display: grid; gap: 0.9vmin; }
.bar { display: grid; grid-template-columns: min(10vmin, 8vw) 1fr; align-items: center; gap: 1vmin; font-size: min(1.4vmin, 1.05vw); letter-spacing: 0.06em; }
.pips { display: flex; gap: 0.5vmin; }
.pip { flex: 1; height: 1.5vmin; background: #e3e5ea; border: 0.25vmin solid var(--ink); }
.pip.on { background: var(--c); }

.mt { display: block; padding: 0.7vmin 0; font-size: min(1.2vmin, 0.9vw); letter-spacing: 0.05em; text-align: center; color: var(--paper); }
.mt.STRIKE { background: #d6313a; }
.mt.GRAB { background: #c98a10; }
.mt.BLOCK { background: #2f66e0; }
.mt.MOVE { background: #17917f; }
.mt.SPECIAL { background: #6a4cff; }
.mt.RETURN { background: #ffb02e; color: #111; }
.mt.SUPER { background: #111; color: #ffd24a; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 2vmin; }
.two ul { margin: 0; padding-left: 2vmin; font-size: min(1.45vmin, 1.1vw); line-height: 1.7; text-transform: none; letter-spacing: 0.02em; }

.i-foot { display: flex; gap: 2vmin; padding: 2vmin 3vmin; border-top: 0.4vmin solid var(--ink); }
.i-foot .opt { flex: 1; margin: 0; text-align: center; }

/* ---------- placeholder match screen ---------- */
.gamescreen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vmin; text-align: center; }
.gamescreen .btn { width: min(30vmin, 24vw); text-align: center; }
.vs { display: flex; align-items: center; justify-content: center; gap: 5vmin; }
.vs .side { width: min(30vmin, 22vw); }
.vs .side svg { width: 100%; height: auto; }
.vs .side b { display: block; margin-top: 1vmin; font-size: min(2.6vmin, 2vw); letter-spacing: 0.06em; }
.vs .side small { display: block; margin-top: 0.6vmin; font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.08em; opacity: 0.65; }
.vs .v { font-size: min(8vmin, 6vw); letter-spacing: 0.06em; }
.vs .dummy { display: grid; place-items: center; height: min(34vmin, 26vw); font-size: min(8vmin, 6vw); background: #bcc1ca; border: 0.45vmin solid var(--ink); }

@media (max-aspect-ratio: 1/1) {
  .l-mid { left: 8%; top: 38%; bottom: 25%; }
  .l-slash { clip-path: polygon(0 0, 100% 0, 100% 33%, 0 38%); }
  .l-players { width: 60%; top: 5%; }
  .l-start { left: 8%; right: 8%; width: auto; }
  .l-leave { bottom: 14%; }

  .s-body { top: 22%; bottom: 14%; }
  .s-cards { gap: 1vmin; }
  .ccard .nm { font-size: 1.9vw; }
  .i-cols { grid-template-columns: 1fr; }
  .i-art { height: 34vw; }
}

/* ---------- ability strip (side-scrolling icons, grouped into sections) ---------- */
.i-abil { flex: none; padding: 0 3vmin 2vmin; border-top: 0.4vmin solid var(--ink); }
.i-abil h4 small { margin-left: 1.2vmin; font-size: 0.85em; opacity: 0.7; letter-spacing: 0.06em; }
.strip { display: flex; gap: 0; overflow-x: auto; padding: 0.4vmin 0 1.6vmin; scrollbar-width: thin; scrollbar-color: #000 #e3e5ea; }
.sec { flex: none; padding: 0 2.2vmin; border-left: 0.35vmin solid var(--ink); }
.sec:first-child { padding-left: 0; border-left: 0; }
.sec-h { margin-bottom: 1vmin; font-size: min(1.3vmin, 1vw); letter-spacing: 0.1em; white-space: nowrap; }
.sec-h i { margin-left: 0.8vmin; padding: 0.2vmin 0.7vmin; font-style: normal; color: var(--paper); background: var(--ink); }
.icons { display: flex; gap: 0.9vmin; }

.tile {
  --t: #555;
  flex: none;
  display: grid;
  place-items: center;
  width: max(34px, 5.6vmin);
  height: max(34px, 5.6vmin);
  padding: 1vmin; /* not a % - that would be relative to the wide strip */
  color: var(--paper);
  background: var(--t);
  border: 0.35vmin solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: translate 0.12s ease, box-shadow 0.12s ease;
}
.tile svg { width: 100%; height: 100%; }
.tile:hover, .tile.on { translate: 0 -0.5vmin; box-shadow: 0 0.5vmin 0 var(--ink); }
.tile.on { outline: 0.4vmin solid var(--ink); outline-offset: 0.3vmin; }
.tile.STRIKE { --t: #d6313a; }
.tile.GRAB { --t: #c98a10; }
.tile.BLOCK { --t: #2f66e0; }
.tile.MOVE { --t: #17917f; }
.tile.SPECIAL { --t: #6a4cff; }
.tile.RETURN { --t: #ffb02e; }
.tile.SUPER { --t: #111; color: #ffd24a; }
.tile.big { width: max(44px, 8vmin); height: max(44px, 8vmin); cursor: default; }
.tile.big:hover { translate: 0 0; box-shadow: none; }

.detail { display: flex; align-items: center; gap: 2vmin; min-height: max(48px, 8.4vmin); }
.detail b { display: inline-block; margin-right: 1.2vmin; font-size: min(1.9vmin, 1.45vw); letter-spacing: 0.06em; }
.detail .mt { display: inline-block; padding: 0.5vmin 1.1vmin; }
.detail .t { display: block; margin-top: 0.8vmin; font-size: min(1.6vmin, 1.2vw); line-height: 1.55; text-transform: none; letter-spacing: 0.02em; }
/* ---------- VS screen lifts up to reveal the arena ---------- */
.gamescreen.open.lift { translate: 0 -105%; transition: translate 0.75s cubic-bezier(0.7, 0, 0.25, 1); }
.gamescreen.quiet { transition: none !important; }

/* ---------- arena ---------- */
.arena {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  background: #cfd3da;
  visibility: hidden;
}
.arena.on { visibility: visible; }

.a-hud { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2vmin; padding: 2.4vmin 3vmin 0; align-items: start; position: relative; z-index: 2; }
.hud {
  --c: #fff;
  padding: 1.3vmin 1.8vmin 1.2vmin;
  background: var(--paper);
  border: 0.45vmin solid var(--ink);
  box-shadow: 0.9vmin 0.9vmin 0 var(--ink);
  rotate: -2deg;
}
.h-name { display: flex; justify-content: space-between; align-items: center; gap: 1vmin; font-size: min(1.8vmin, 1.35vw); letter-spacing: 0.05em; }
.h-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-name span { flex: none; padding: 0.3vmin 0.9vmin; background: var(--c); border: 0.25vmin solid var(--ink); font-size: 0.85em; }
.hbar { position: relative; height: 2.4vmin; margin-top: 1vmin; background: #d8dbe1; border: 0.3vmin solid var(--ink); overflow: hidden; }
.hbar i { display: block; height: 100%; width: 100%; background: #3ddc84; transition: width 0.2s linear; }
.hbar.hp i.low { background: #ff4a52; }
.hbar.hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: min(1.25vmin, 0.95vw); letter-spacing: 0.06em; }
.hbar.ess { height: 1.3vmin; margin-top: 0.8vmin; }
.hbar.ess i { width: 0; background: #f2b134; }
.hbar.ess.full i { background: linear-gradient(90deg, #ffd24a, #ff9d00); animation: essPulse 0.5s ease-in-out infinite alternate; }
@keyframes essPulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.h-line { display: flex; justify-content: space-between; gap: 1vmin; margin-top: 0.8vmin; font-size: min(1.15vmin, 0.9vw); letter-spacing: 0.05em; }
.h-status { min-height: 1.3em; margin-top: 0.4vmin; font-size: min(1.15vmin, 0.9vw); letter-spacing: 0.05em; color: #b3121d; }
.a-turn { align-self: start; white-space: nowrap; padding: 1vmin 2.2vmin; font-size: min(2vmin, 1.5vw); letter-spacing: 0.12em; color: var(--paper); background: var(--ink); rotate: -2deg; }

.a-stage { position: relative; flex: 1; min-height: 18vh; margin-top: -4vmin; }
.a-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.a-panel {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.62fr) minmax(0, 1.25fr);
  grid-template-areas: "moves lock opp";
  gap: 3vmin;
  max-height: 44vh;
  overflow: auto;
  padding: 1.8vmin 3vmin 2vmin;
  background: var(--paper);
  border-top: 0.55vmin solid var(--ink);
  position: relative;
  z-index: 2;
}
.p-moves { grid-area: moves; min-width: 0; }
.p-lock { grid-area: lock; min-width: 0; }
.p-opp { grid-area: opp; min-width: 0; padding-left: 3vmin; border-left: 0.4vmin solid var(--ink); }
.a-panel h4 { margin: 0 0 1vmin; font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.1em; }
.a-panel h4 small { margin-left: 1vmin; font-size: 0.8em; opacity: 0.6; letter-spacing: 0.05em; }
.a-panel .tile { width: max(30px, 4.6vmin); height: max(30px, 4.6vmin); padding: 0.8vmin; }
.a-panel .tile.dis { opacity: 0.28; cursor: not-allowed; }
.a-panel .tile.sel { outline: 0.4vmin solid var(--ink); outline-offset: 0.3vmin; translate: 0 -0.5vmin; box-shadow: 0 0.5vmin 0 var(--ink); }
.a-panel .tile.big { width: max(40px, 6.4vmin); height: max(40px, 6.4vmin); padding: 1vmin; }
.a-panel .strip { padding-bottom: 1vmin; }
.a-panel .sec-h { font-size: min(1.1vmin, 0.85vw); }
.a-panel .detail { min-height: max(44px, 6.6vmin); gap: 1.6vmin; align-items: flex-start; }
.a-panel .detail b { font-size: min(1.6vmin, 1.2vw); }
.a-panel .detail .t { font-size: min(1.35vmin, 1.02vw); margin-top: 0.5vmin; }
.detail .t.st { opacity: 0.6; letter-spacing: 0.06em; }
.detail .t.note-r { color: #b3121d; }
.simres { margin-top: 1vmin; font-size: min(1.3vmin, 1vw); line-height: 1.7; letter-spacing: 0.04em; }
.simres b { display: inline-block; margin-right: 0.8vmin; padding: 0.2vmin 0.8vmin; color: var(--paper); background: var(--ink); }

.p-lock .opt { padding: 2.4vmin 1vmin; font-size: min(2.8vmin, 2.1vw); text-align: center; }
.p-lock .opt:disabled { opacity: 1; background: #3a3f48; border-color: #3a3f48; color: #9aa0ab; }
.dirbox label { margin: 0 0 0.8vmin; text-align: center; font-size: min(1.3vmin, 1vw); }
.dir { display: flex; border: 0.45vmin solid var(--ink); }
.dir button { flex: 1; padding: 1.3vmin 0.4vmin; font: inherit; font-size: min(1.6vmin, 1.2vw); letter-spacing: 0.05em; color: var(--ink); background: var(--paper); border: 0; cursor: pointer; }
.dir button + button { border-left: 0.45vmin solid var(--ink); }
.dir button.on { color: var(--paper); background: var(--ink); }
.dir button:disabled { cursor: default; opacity: 0.55; }
.dir button::before { content: ""; display: inline-block; margin-right: 0.8vmin; border: 0.7vmin solid transparent; vertical-align: middle; }
#dirL::before { border-right: 1vmin solid currentColor; border-left: 0; }
#dirR { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; }
#dirR::before { border-left: 1vmin solid currentColor; border-right: 0; margin: 0 0 0 0.8vmin; }
#dirL { display: flex; justify-content: center; align-items: center; }
.lockmsg { min-height: 3.6em; margin: 1.2vmin 0 0; font-size: min(1.25vmin, 0.95vw); line-height: 1.6; letter-spacing: 0.04em; }

.result {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 5;
}
.result.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.res-box { width: max(280px, min(60vmin, 40vw)); padding: 3.6vmin; background: var(--paper); border: 0.55vmin solid var(--ink); box-shadow: 1.4vmin 1.4vmin 0 var(--ink); rotate: -2deg; text-align: center; }
.res-box h2 { margin: 0 0 1vmin; font-size: min(6vmin, 4.6vw); }
.res-box p { margin: 0 0 3vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; opacity: 0.7; }
.res-box .opt { text-align: center; }

@media (max-aspect-ratio: 1/1) {
  .a-panel { grid-template-columns: 1fr; grid-template-areas: "lock" "moves" "opp"; max-height: 52vh; }
  .p-lock { display: grid; grid-template-columns: 1fr 1fr; gap: 2vmin; align-items: end; }
  .p-lock .lockmsg { grid-column: 1 / -1; min-height: 2.4em; margin: 0; }
  .p-lock .opt { margin: 0; }
  .p-opp { padding-left: 0; border-left: 0; padding-top: 1.6vmin; border-top: 0.4vmin solid var(--ink); }
  .a-panel .tile { width: max(34px, 5.6vmin); height: max(34px, 5.6vmin); }
  .hud { padding: 1vmin 1.2vmin; }
  .h-name { font-size: 1.9vw; }
  .a-turn { font-size: 2vw; padding: 0.8vmin 1.2vmin; }
}
.a-mid { display: grid; justify-items: center; gap: 1.2vmin; }
.a-mid .chip { font-size: min(1.3vmin, 1vw); padding: 0.9vmin 1.4vmin; letter-spacing: 0.06em; }
/* ---------- camera controls, holo HP, replay bar ---------- */
.a-stage canvas { cursor: grab; }
.a-stage canvas.grab { cursor: grabbing; }
.a-cam { position: absolute; right: 2.4vmin; bottom: 1.6vmin; display: flex; align-items: center; gap: 0.8vmin; z-index: 3; }
.a-cam .chip { min-width: 4vmin; padding: 0.9vmin 1.3vmin; font-size: min(1.5vmin, 1.15vw); text-align: center; }
.a-hint { margin-left: 1vmin; padding: 0.6vmin 1vmin; font-size: min(1.1vmin, 0.85vw); letter-spacing: 0.06em; color: var(--paper); background: rgba(0, 0, 0, 0.55); }

.hbar .holo, .hbar.hp .holo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(143, 247, 255, 0.95) 0 0.5vmin, rgba(0, 160, 220, 0.7) 0.5vmin 1vmin);
  border-left: 0.25vmin solid #00b4ff;
  transition: left 0.18s ease, width 0.18s ease;
  animation: holoPulse 0.7s ease-in-out infinite alternate;
}
@keyframes holoPulse { from { filter: brightness(0.85); } to { filter: brightness(1.3); } }
.hbar.hp span { z-index: 2; }

.a-replay {
  display: none;
  flex: none;
  align-items: center;
  gap: 2vmin;
  padding: 2vmin 3vmin;
  background: var(--paper);
  border-top: 0.55vmin solid var(--ink);
  position: relative;
  z-index: 2;
  font-size: min(1.9vmin, 1.45vw);
  letter-spacing: 0.08em;
}
.a-replay b { padding: 0.8vmin 1.6vmin; color: var(--paper); background: #d6313a; }
.a-replay span { flex: 1; }
.a-replay .chip { padding: 1.2vmin 2vmin; font-size: 0.85em; }
.arena.replaying .a-panel { display: none; }
.arena.replaying .a-replay { display: flex; }
/* ---------- adjustable moves (distance / jump height + distance) ---------- */
.moveopts { margin-top: 1.4vmin; display: grid; gap: 1vmin; padding: 1.2vmin 1.2vmin 1.4vmin; border: 0.4vmin solid var(--ink); background: #f3f4f7; }
.mo label { display: flex; justify-content: space-between; margin: 0 0 0.5vmin; font-size: min(1.25vmin, 0.95vw); letter-spacing: 0.08em; }
.mo label b { padding: 0 0.8vmin; color: var(--paper); background: var(--ink); }
.mo input[type=range] { width: 100%; height: 2.4vmin; margin: 0; background: transparent; accent-color: #000; cursor: pointer; }
.mo input[type=range]:disabled { opacity: 0.4; cursor: default; }
.a-dist { padding: 0.5vmin 1.2vmin; font-size: min(1.2vmin, 0.95vw); letter-spacing: 0.1em; color: var(--ink); background: rgba(255, 255, 255, 0.85); border: 0.25vmin solid var(--ink); }
.a-cam .chip.on { background: #12703a; }
/* ---------- click-to-aim ---------- */
.a-stage canvas.aiming { cursor: crosshair; }
.moveopts { margin-top: 1.4vmin; padding: 1.2vmin 1.4vmin; border: 0.4vmin solid var(--ink); background: #fff8d6; display: grid; gap: 0.6vmin; }
.moveopts b { width: fit-content; padding: 0.3vmin 1vmin; font-size: min(1.2vmin, 0.95vw); letter-spacing: 0.1em; color: var(--paper); background: var(--ink); }
.moveopts #aimTxt { font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.06em; }
.moveopts small { font-size: min(1.05vmin, 0.8vw); line-height: 1.5; letter-spacing: 0.04em; opacity: 0.75; }
/* ---------- account badge (title screen) ---------- */
.acct { position: absolute; top: 2.4vmin; right: 2.4vmin; z-index: 4; display: flex; align-items: center; gap: 1.4vmin; padding: 1vmin 1.6vmin; font-size: min(1.4vmin, 1.1vw); letter-spacing: 0.08em; background: var(--paper); border: 0.4vmin solid var(--ink); box-shadow: 0.7vmin 0.7vmin 0 var(--ink); rotate: -2deg; }
.acct b { margin-left: 0.4vmin; }
.acct .chip { padding: 0.8vmin 1.2vmin; font-size: 0.9em; }
#resSave { margin-top: 0; }

/* ---- phones: keep text readable (the sizes above are proportional to the screen and get tiny) ---- */
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .title { font-size: max(11px, min(6.8vmin, 5.3vw)); }
  .btn { font-size: max(11px, min(3.1vmin, 2.4vw)); }
  h2 { font-size: max(11px, min(3.2vmin, 2.5vw)); }
  .opt { font-size: max(11px, min(2.7vmin, 2.1vw)); }
  label { font-size: max(11px, min(2vmin, 1.6vw)); }
  .field { font-size: max(11px, min(2.7vmin, 2.1vw)); }
  .note { font-size: max(11px, min(1.9vmin, 1.5vw)); }
  .note.small { font-size: max(11px, min(1.5vmin, 1.2vw)); }
  .status { font-size: max(11px, min(1.8vmin, 1.4vw)); }
  .tab { font-size: max(11px, min(1.8vmin, 1.4vw)); }
  #pList li { font-size: max(11px, min(2.2vmin, 1.7vw)); }
  .l-code { font-size: max(11px, min(2vmin, 1.6vw)); }
  .l-stats table { font-size: max(11px, min(2vmin, 1.5vw)); }
  .l-start p { font-size: max(11px, min(1.8vmin, 1.4vw)); }
  .s-head h2 { font-size: max(11px, min(5vmin, 3.8vw)); }
  .s-sub { font-size: max(11px, min(1.8vmin, 1.4vw)); }
  .ccard .nm { font-size: max(11px, min(2.3vmin, 1.7vw)); }
  .ccard .rl { font-size: max(11px, min(1.2vmin, 0.95vw)); }
  .ccard .badge { font-size: max(11px, min(1.3vmin, 1vw)); }
  .i-box h3 { font-size: max(11px, min(3.4vmin, 2.6vw)); }
  .i-box h4 { font-size: max(11px, min(1.7vmin, 1.3vw)); }
  .i-role { font-size: max(11px, min(1.8vmin, 1.4vw)); }
  .i-diff { font-size: max(11px, min(1.5vmin, 1.15vw)); }
  .i-desc, .i-text { font-size: max(11px, min(1.7vmin, 1.3vw)); }
  .i-passive b { font-size: max(11px, min(1.8vmin, 1.4vw)); }
  .bar { font-size: max(11px, min(1.4vmin, 1.05vw)); }
  .mt { font-size: max(11px, min(1.2vmin, 0.9vw)); }
  .two ul { font-size: max(11px, min(1.45vmin, 1.1vw)); }
  .vs .side b { font-size: max(11px, min(2.6vmin, 2vw)); }
  .vs .side small { font-size: max(11px, min(1.5vmin, 1.15vw)); }
  .vs .v { font-size: max(11px, min(8vmin, 6vw)); }
  .vs .dummy { font-size: max(11px, min(8vmin, 6vw)); }
  .ccard .nm { font-size: max(11px, 1.9vw); }
  .sec-h { font-size: max(11px, min(1.3vmin, 1vw)); }
  .detail b { font-size: max(11px, min(1.9vmin, 1.45vw)); }
  .detail .t { font-size: max(11px, min(1.6vmin, 1.2vw)); }
  .h-name { font-size: max(11px, min(1.8vmin, 1.35vw)); }
  .hbar.hp span { font-size: max(11px, min(1.25vmin, 0.95vw)); }
  .h-line { font-size: max(11px, min(1.15vmin, 0.9vw)); }
  .h-status { font-size: max(11px, min(1.15vmin, 0.9vw)); }
  .a-turn { font-size: max(11px, min(2vmin, 1.5vw)); }
  .a-panel h4 { font-size: max(11px, min(1.5vmin, 1.15vw)); }
  .a-panel .sec-h { font-size: max(11px, min(1.1vmin, 0.85vw)); }
  .a-panel .detail b { font-size: max(11px, min(1.6vmin, 1.2vw)); }
  .a-panel .detail .t { font-size: max(11px, min(1.35vmin, 1.02vw)); }
  .simres { font-size: max(11px, min(1.3vmin, 1vw)); }
  .p-lock .opt { font-size: max(11px, min(2.8vmin, 2.1vw)); }
  .dirbox label { font-size: max(11px, min(1.3vmin, 1vw)); }
  .dir button { font-size: max(11px, min(1.6vmin, 1.2vw)); }
  .lockmsg { font-size: max(11px, min(1.25vmin, 0.95vw)); }
  .res-box h2 { font-size: max(11px, min(6vmin, 4.6vw)); }
  .res-box p { font-size: max(11px, min(1.8vmin, 1.4vw)); }
  .h-name { font-size: max(11px, 1.9vw); }
  .a-turn { font-size: max(11px, 2vw); }
  .a-mid .chip { font-size: max(11px, min(1.3vmin, 1vw)); }
  .a-cam .chip { font-size: max(11px, min(1.5vmin, 1.15vw)); }
  .a-hint { font-size: max(11px, min(1.1vmin, 0.85vw)); }
  .a-replay { font-size: max(11px, min(1.9vmin, 1.45vw)); }
  .mo label { font-size: max(11px, min(1.25vmin, 0.95vw)); }
  .a-dist { font-size: max(11px, min(1.2vmin, 0.95vw)); }
  .moveopts b { font-size: max(11px, min(1.2vmin, 0.95vw)); }
  .moveopts #aimTxt { font-size: max(11px, min(1.5vmin, 1.15vw)); }
  .moveopts small { font-size: max(11px, min(1.05vmin, 0.8vw)); }
  .acct { font-size: max(11px, min(1.4vmin, 1.1vw)); }
  .a-panel .tile { width: 44px; height: 44px; }
  button, .opt, .chip { min-height: 40px; }
  .a-mid .chip { padding: 8px 10px; }
}

@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .a-hud { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; padding: 6px 6px 0; }
  .hud { min-width: 0; padding: 5px 6px; }
  .h-name { font-size: 11px; }
  .h-line, .h-status { font-size: 9px; letter-spacing: 0; flex-wrap: wrap; gap: 2px 6px; }
  .a-turn { font-size: 11px; padding: 4px 6px; }
  .a-mid .chip { font-size: 9px; padding: 5px 6px; min-height: 0; }
}
/* ================= multiplayer menus ================= */
.mppick {
  position: absolute; inset: 0; z-index: 45;
  display: grid; place-items: start center;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: background 0.4s ease, visibility 0s linear 0.9s;
}
.mppick.open { background: rgba(0, 0, 0, 0.72); visibility: visible; transition: background 0.4s ease, visibility 0s; }
.mp-drop { width: min(92vw, max(300px, 52vmin)); padding-top: 9vh; display: grid; gap: 2.2vmin; }
.mp-drop h2 { color: var(--paper); text-align: center; margin: 0 0 1vmin; translate: 0 -40vh; transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.mppick.open .mp-drop h2 { translate: 0 0; }
.mp-btn {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 2.6vmin 3vmin; color: var(--ink); background: var(--paper);
  border: 0.55vmin solid var(--ink); box-shadow: 1.2vmin 1.2vmin 0 var(--ink);
  translate: 0 -90vh; rotate: -2deg;
  transition: translate 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) var(--d, 0s), background 0.15s, color 0.15s;
}
.mppick.open .mp-btn { translate: 0 0; }
.mp-btn:nth-child(odd) { rotate: 1.5deg; }
.mp-btn b { display: block; font-size: min(4vmin, 3.2vw); letter-spacing: 0.08em; }
.mp-btn small { display: block; margin-top: 0.8vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.06em; opacity: 0.65; }
.mp-btn:hover, .mp-btn:focus-visible { background: var(--ink); color: var(--paper); outline: 0; }
.mp-btn.ghost { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: none; }
.mp-btn.ghost:hover { background: var(--paper); color: var(--ink); }

.browser, .locallobby {
  position: absolute; inset: 0; z-index: 12; padding: 4vmin 5vmin;
  background-color: #cfd3da;
  background-image: linear-gradient(#bcc1ca 1px, transparent 1px), linear-gradient(90deg, #bcc1ca 1px, transparent 1px);
  background-size: 6vmin 6vmin;
  display: flex; flex-direction: column; gap: 2vmin;
  translate: 100% 0; visibility: hidden;
  transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
}
.browser.open, .locallobby.open { translate: 0 0; visibility: visible; transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.b-head { display: flex; align-items: center; gap: 2.4vmin; }
.b-head h2 { margin: 0; flex: none; }
.b-head .b-count { flex: 1; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; opacity: 0.6; }
.b-back { width: auto !important; padding: 1.4vmin 2.6vmin !important; font-size: min(2vmin, 1.6vw) !important; position: static !important; }
.b-list { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 1.6vmin; align-content: start; padding: 0.6vmin 1.4vmin 1.4vmin 0.6vmin; }
.b-row-item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2.4vmin;
  padding: 2vmin 2.6vmin; background: var(--paper); color: var(--ink);
  border: 0.45vmin solid var(--ink); box-shadow: 0.9vmin 0.9vmin 0 var(--ink);
}
.b-row-item .rn { font-size: min(2.6vmin, 2vw); letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-row-item .rn small { display: block; margin-top: 0.5vmin; font-size: min(1.5vmin, 1.15vw); opacity: 0.6; letter-spacing: 0.08em; }
.b-row-item .rc { font-size: min(2.2vmin, 1.7vw); letter-spacing: 0.08em; }
.b-row-item .opt { margin: 0; width: auto; padding: 1.2vmin 2.4vmin; text-align: center; }
.b-row-item.closed { opacity: 0.55; }
.b-msg { margin: 0; min-height: 1.4em; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; text-align: center; }
.b-msg.bad { color: #b3121d; }
.b-foot { display: grid; gap: 1.6vmin; }
.b-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vmin; }
.b-tabs .opt { margin: 0; text-align: center; }
.b-tabs .opt.on { background: var(--paper); color: var(--ink); }
.b-row { display: grid; grid-template-columns: 1fr auto; gap: 2vmin; align-items: stretch; }
.b-row .field { margin: 0; }
.b-row .opt { margin: 0; width: auto; text-align: center; }

.locallobby { align-items: stretch; }
.locallobby h2 { margin: 0; text-align: center; }
.locallobby .b-back { align-self: flex-start; }
.ll-cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3vmin; min-height: 0; }
.ll-col { display: flex; flex-direction: column; justify-content: center; gap: 2.4vmin; padding: 3vmin; border: 0.55vmin solid var(--ink); box-shadow: 1.2vmin 1.2vmin 0 var(--ink); background: var(--paper); }
.ll-col h3 { margin: 0; font-size: min(3vmin, 2.4vw); letter-spacing: 0.08em; }
.ll-col.p1 h3 { color: var(--ink); } .ll-col.p2 h3 { color: #d6313a; }
.ll-name { font-size: min(3.4vmin, 2.6vw); letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; }
.ll-col .field { margin: 0; }
.ll-col .opt { margin: 0; text-align: center; }
.ll-col.ready { background: #e8ffe8; }
.ll-col.ready .opt { background: #1f9d55; border-color: #0d5a30; }
.ll-msg { margin: 0; text-align: center; font-size: min(2vmin, 1.6vw); letter-spacing: 0.1em; }

/* ================= local split-screen picker ================= */
.localbar { display: none; flex: none; grid-template-columns: 1fr 1fr; border-top: 0.5vmin solid var(--ink); border-bottom: 0.5vmin solid var(--ink); background: var(--ink); }
.arena.local .localbar { display: grid; }
.lb-half { position: relative; padding: 1vmin 2vmin; display: flex; justify-content: space-between; align-items: center; gap: 1vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; color: var(--ink); background: var(--paper); transition: background 0.25s, color 0.25s; }
.lb-half + .lb-half { border-left: 0.5vmin solid var(--ink); }
.lb-half b { font-weight: 700; }
.lb-half.live { background: #ffe66b; }
.lb-half.dark { background: #000; color: #8a8a8a; }
.passcover { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: none; place-items: center; background: #000; color: var(--paper); }
.passcover.on { display: grid; }
.pc-box { text-align: center; padding: 2vmin; width: min(90%, 60vmin); }
.pc-box h3 { margin: 0 0 1.4vmin; font-size: min(3.4vmin, 2.8vw); letter-spacing: 0.08em; }
.pc-box p { margin: 0 0 2.4vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; opacity: 0.75; }
.pc-box .opt { text-align: center; background: var(--paper); color: var(--ink); border-color: var(--paper); margin: 0 auto; }

@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .mp-btn b { font-size: 22px; } .mp-btn small { font-size: 11px; }
  .b-row-item .rn { font-size: 15px; } .b-row-item .rn small { font-size: 11px; } .b-row-item .rc { font-size: 14px; }
  .b-head .b-count, .b-msg, .ll-msg { font-size: 11px; }
  .b-tabs { grid-template-columns: 1fr; gap: 8px; }
  .b-tabs .opt, .b-row .opt { font-size: 14px; padding: 12px; }
  .b-back { font-size: 13px !important; padding: 10px 14px !important; }
  .ll-cols { grid-template-columns: 1fr; gap: 12px; }
  .ll-col h3 { font-size: 15px; } .ll-name { font-size: 18px; }
  .lb-half { font-size: 10px; padding: 6px 8px; }
  .pc-box h3 { font-size: 20px; } .pc-box p { font-size: 12px; }
}
/* ================= combo meter + time penalty ================= */
.hud { position: relative; }
.combo {
  position: absolute; top: 100%; left: 0.8vmin; margin-top: 0.4vmin; z-index: 6;
  display: flex; align-items: baseline; gap: 0.8vmin; pointer-events: none;
  --c1: #fff3a0; --c2: #ffb02e; --c3: #e8381a; --sz: 1; --g: 0.5;
  font-size: calc(min(3.2vmin, 2.5vw) * var(--sz));
  transition: font-size 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.hud.right .combo { left: auto; right: 0.8vmin; flex-direction: row-reverse; }
.combo[hidden] { display: none; }
.combo.t2 { --c1: #e8f7ff; --c2: #5ab8ff; --c3: #1d4fe0; --sz: 1.22; }
.combo.t3 { --c1: #f7e3ff; --c2: #b55bff; --c3: #6a1fc4; --sz: 1.5; }
.cb-n {
  position: relative; z-index: 2; font-size: 1.7em; line-height: 1; letter-spacing: 0.02em;
  background: linear-gradient(to bottom, var(--c1), var(--c2) 58%, var(--c3)); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0.055em #111; filter: drop-shadow(0 0 0.25em var(--c2)) drop-shadow(0 0 0.6em var(--c3));
}
.cb-l { position: relative; z-index: 2; font-size: 0.5em; letter-spacing: 0.16em; color: #111; background: var(--c1); padding: 0.2em 0.5em; border: 0.14em solid #111; transform: skewX(-10deg); }
.cb-fire { position: absolute; left: 0; right: 0; bottom: 38%; height: 0; z-index: 1; }
.cb-fire i {
  position: absolute; bottom: 0; left: var(--x); width: 0.8em; margin-left: -0.4em;
  height: calc(var(--g) * 2.6em * var(--h));
  background: linear-gradient(to top, var(--c3), var(--c2) 52%, var(--c1));
  clip-path: polygon(50% 0, 74% 34%, 100% 70%, 84% 100%, 16% 100%, 0 70%, 26% 34%);
  transform-origin: 50% 100%; opacity: 0.92;
  animation: flick 0.45s ease-in-out infinite alternate var(--dl);
}
@keyframes flick { from { transform: scaleY(0.8) scaleX(1.08) skewX(-6deg); } to { transform: scaleY(1.14) scaleX(0.86) skewX(6deg) translateY(-6%); } }
.combo.pop .cb-n { animation: cbpop 0.32s cubic-bezier(0.2, 1.7, 0.4, 1); }
@keyframes cbpop { from { transform: scale(1.7) rotate(-6deg); } to { transform: none; } }

.penbox { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.6vmin; margin: 0 0 1.4vmin; padding: 1vmin 1.6vmin; background: var(--paper); border: 0.4vmin solid var(--ink); }
.penbox b { font-size: min(5vmin, 4vw); line-height: 1; min-width: 1.2em; text-align: center; }
.penbox span { font-size: min(1.4vmin, 1.1vw); letter-spacing: 0.08em; line-height: 1.35; }
.penbox.good { background: #e4ffe4; border-color: #0d5a30; }
.penbox.bad { background: #ffe4e4; border-color: #b3121d; }
.penbox:not(.good):not(.bad) { opacity: 0.55; }
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .penbox { grid-column: 1 / -1; padding: 6px 10px; }
  .penbox b { font-size: 24px; } .penbox span { font-size: 10px; }
  .combo { font-size: calc(14px * var(--sz)); }
}
.p-lock .penbox { grid-column: 1 / -1; }

.penbox.hot { background: #fff3c4; border-color: #a86a00; opacity: 1; }
.penbox.hot b { color: #a86a00; }
.tile.cont { outline: 0.5vmin dashed #d6a000; outline-offset: 0.3vmin; }

.opt.warn, #lockBtn.warn { background: #b3121d; border-color: #6e0a11; animation: warnPulse 0.5s ease-in-out infinite alternate; }
@keyframes warnPulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }

.mt.ART { background: #e8a317; color: #111; }
.tile.ART { --t: #e8a317; }
.sec.air .sec-h { color: #1f7a8c; }

/* ================= SERVERS menu (redesigned) ================= */
.browser { display: block; padding: 0; overflow: hidden; }
.b-slash { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 0, 35% 0, 45% 100%, 0 100%); }
.b-side { position: absolute; left: 3.4%; top: 4vmin; bottom: 4vmin; width: 31%; display: flex; flex-direction: column; gap: 1.8vmin; color: var(--paper); }
.b-side .b-back { align-self: flex-start; }
.b-title { margin: 1.6vmin 0 0; font-size: min(8vmin, 6vw); letter-spacing: 0.06em; color: var(--paper); rotate: -3deg; transform-origin: left center; text-shadow: 0.5vmin 0.5vmin 0 #5c5c5c; }
.b-sub { margin: 0; display: flex; align-items: center; gap: 1.2vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.1em; opacity: 0.9; }
.b-dot { width: 1.4vmin; height: 1.4vmin; min-width: 9px; min-height: 9px; border-radius: 50%; background: #8a8a8a; box-shadow: 0 0 0 0.35vmin rgba(255,255,255,0.18); }
.b-dot.ok { background: #38d97a; animation: dotPulse 1.8s ease-in-out infinite; }
.b-dot.warn { background: #ffc93a; animation: dotPulse 0.7s ease-in-out infinite; }
.b-dot.bad { background: #ff4a52; }
@keyframes dotPulse { 50% { box-shadow: 0 0 0 0.8vmin rgba(255,255,255,0); } }

.b-actions { display: grid; gap: 1.6vmin; rotate: -3deg; transform-origin: left top; margin-top: 1vmin; }
.b-act { display: block; width: 92%; text-align: left; font: inherit; cursor: pointer; padding: 1.7vmin 2.2vmin; color: var(--ink); background: var(--paper); border: 0.45vmin solid var(--ink); box-shadow: 0.9vmin 0.9vmin 0 #6a6a6a; transition: translate 0.18s ease, background 0.15s, box-shadow 0.18s; }
.b-act b { display: block; font-size: min(2.5vmin, 1.95vw); letter-spacing: 0.08em; }
.b-act small { display: block; margin-top: 0.5vmin; font-size: min(1.25vmin, 1vw); letter-spacing: 0.08em; opacity: 0.6; }
.b-act:hover, .b-act:focus-visible { translate: 0 -0.9vmin; outline: 0; box-shadow: 0.9vmin 1.8vmin 0 #6a6a6a; }
.b-act.on { background: var(--ink); color: var(--paper); border-color: var(--paper); translate: 0 -0.9vmin; box-shadow: 0.9vmin 1.8vmin 0 #6a6a6a; }
.b-row { display: grid; grid-template-columns: 1fr auto; gap: 1.2vmin; align-items: stretch; margin-top: 0.6vmin; animation: viewIn 0.25s ease both; }
.b-row[hidden] { display: none; }
.b-row .field { margin: 0; min-width: 0; }
.b-go { font: inherit; font-size: min(2vmin, 1.6vw); letter-spacing: 0.08em; padding: 0 2.2vmin; color: var(--ink); background: var(--paper); border: 0.4vmin solid var(--ink); cursor: pointer; transition: translate 0.15s ease; }
.b-go:hover, .b-go:focus-visible { translate: 0 -0.6vmin; outline: 0; }
.b-tools { margin-top: auto; display: flex; flex-wrap: wrap; gap: 1.2vmin; }
.b-tools .chip { background: transparent; color: var(--paper); border-color: var(--paper); }
.b-tools .chip:hover { background: var(--paper); color: var(--ink); }
.chip.spin { animation: chipSpin 0.9s linear infinite; opacity: 0.7; }
@keyframes chipSpin { 50% { opacity: 0.35; } }

.b-main { position: absolute; left: 41%; right: 4%; top: 4vmin; bottom: 4vmin; display: flex; flex-direction: column; gap: 1.6vmin; }
.b-mh { display: flex; align-items: center; gap: 1.6vmin; font-size: min(2vmin, 1.6vw); letter-spacing: 0.14em; }
.b-mh i { flex: 1; height: 0.4vmin; background: var(--ink); }
.b-list { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 2.2vmin; align-content: start; padding: 0.8vmin 1.6vmin 1.6vmin 0.8vmin; scrollbar-width: thin; }
.srv { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.4vmin; padding: 2vmin 2.4vmin; background: var(--paper); color: var(--ink); border: 0.45vmin solid var(--ink); box-shadow: 1vmin 1vmin 0 var(--ink); transition: translate 0.15s ease, box-shadow 0.15s ease; }
.srv:nth-child(odd) { rotate: -0.5deg; } .srv:nth-child(even) { rotate: 0.5deg; }
.srv.fresh { animation: srvIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 0.07s); }
@keyframes srvIn { from { opacity: 0; translate: 8vmin 0; } to { opacity: 1; translate: 0 0; } }
.srv:hover { translate: -0.5vmin -0.5vmin; box-shadow: 1.5vmin 1.5vmin 0 var(--ink); }
.srv-pips { display: flex; gap: 0.6vmin; }
.srv-pips i { width: 2.4vmin; height: 2.4vmin; min-width: 14px; min-height: 14px; border: 0.35vmin solid var(--ink); background: transparent; }
.srv-pips i.on { background: var(--ink); }
.srv-info { min-width: 0; display: grid; gap: 0.7vmin; }
.srv-name { font-size: min(3.2vmin, 2.5vw); letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-meta { font-size: min(1.45vmin, 1.15vw); letter-spacing: 0.08em; opacity: 0.75; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5vmin 1vmin; }
.srv-meta em { font-style: normal; }
.srv-meta code { font: inherit; padding: 0.2vmin 0.8vmin; background: var(--ink); color: var(--paper); letter-spacing: 0.18em; }
.srv-go { font: inherit; font-size: min(2.2vmin, 1.7vw); letter-spacing: 0.1em; padding: 1.4vmin 3vmin; color: var(--paper); background: var(--ink); border: 0.4vmin solid var(--ink); cursor: pointer; transition: translate 0.15s, background 0.15s, color 0.15s; }
.srv-go:hover:not(:disabled), .srv-go:focus-visible { background: var(--paper); color: var(--ink); translate: 0 -0.7vmin; box-shadow: 0 0.7vmin 0 var(--ink); outline: 0; }
.srv-go:disabled { background: #b9bec8; border-color: #8c929e; cursor: not-allowed; }
.srv.closed { opacity: 0.7; }
.srv-stamp { position: absolute; right: 22%; top: 50%; translate: 0 -50%; rotate: -8deg; padding: 0.3vmin 1.4vmin; font-size: min(2.6vmin, 2vw); letter-spacing: 0.14em; color: #d6313a; border: 0.5vmin solid #d6313a; opacity: 0.85; pointer-events: none; }
.srv.skel { gap: 2vmin; }
.srv.skel i, .srv.skel b, .srv.skel u { display: block; height: 2.4vmin; background: linear-gradient(90deg, #dfe2e8 25%, #f4f5f8 50%, #dfe2e8 75%); background-size: 200% 100%; animation: skel 1.1s linear infinite; animation-delay: calc(var(--i, 0) * 0.12s); }
.srv.skel i { width: 6vmin; } .srv.skel b { height: 3vmin; } .srv.skel u { width: 12vmin; height: 4.6vmin; }
@keyframes skel { to { background-position: -200% 0; } }
.srv-empty { display: grid; justify-items: center; gap: 1.6vmin; padding: 6vmin 3vmin; text-align: center; border: 0.5vmin dashed var(--ink); background: rgba(255,255,255,0.55); }
.srv-empty b { font-size: min(3.6vmin, 2.8vw); letter-spacing: 0.1em; }
.srv-empty span { font-size: min(1.7vmin, 1.3vw); letter-spacing: 0.08em; opacity: 0.7; }
.srv-empty .srv-go { margin-top: 1vmin; }
.browser .b-msg { margin: 0; padding: 1.2vmin 2vmin; font-size: min(1.6vmin, 1.25vw); letter-spacing: 0.08em; line-height: 1.4; text-align: left; color: var(--paper); background: var(--ink); border-left: 1vmin solid #ffc93a; }
.browser .b-msg[hidden] { display: none; }
.browser .b-msg.bad { color: var(--paper); background: #8f1019; border-left-color: #ff4a52; }

@media (max-aspect-ratio: 1/1) {
  .b-slash { clip-path: polygon(0 0, 100% 0, 100% 41%, 0 48%); }
  .b-side { left: 5%; right: 5%; top: 3vh; bottom: auto; width: auto; gap: 1.2vh; }
  .b-title { font-size: 7.5vw; margin: 0.4vh 0 0; }
  .b-actions { grid-template-columns: repeat(3, 1fr); gap: 1.6vw; rotate: -2deg; }
  .b-act { width: auto; padding: 1.2vh 1.6vw; box-shadow: 0.7vw 0.7vw 0 #6a6a6a; }
  .b-act small { display: none; }
  .b-act b { font-size: 3.3vw; }
  .b-tools { margin-top: 0; }
  .b-main { left: 5%; right: 5%; top: 53vh; bottom: 2vh; }
  .b-list { gap: 2vh; }
  .srv { grid-template-columns: auto 1fr auto; gap: 3vw; padding: 1.6vh 3vw; }
  .srv-name { font-size: 4.2vw; } .srv-meta { font-size: 2.4vw; } .srv-go { font-size: 3.4vw; padding: 1.4vh 4vw; }
  .srv-stamp { right: 28%; font-size: 3.6vw; }
}
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .b-title { font-size: 30px; }
  .b-sub { font-size: 11px; }
  .b-act b { font-size: 12px; }
  .b-mh { font-size: 12px; }
  .srv-name { font-size: 17px; } .srv-meta { font-size: 10px; } .srv-go { font-size: 14px; padding: 10px 16px; }
  .srv-stamp { font-size: 13px; }
  .srv-empty b { font-size: 18px; } .srv-empty span { font-size: 11px; }
  .browser .b-msg { font-size: 11px; }
  .b-go { font-size: 14px; padding: 0 14px; }
}
/* ================= SETTINGS screen + CHANGELOG ================= */
.setpanel {
  position: absolute; inset: 0; z-index: 12; overflow: hidden;
  background-color: #cfd3da;
  background-image: linear-gradient(#bcc1ca 1px, transparent 1px), linear-gradient(90deg, #bcc1ca 1px, transparent 1px);
  background-size: 6vmin 6vmin;
  translate: 100% 0; visibility: hidden;
  transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
}
.setpanel.open { translate: 0 0; visibility: visible; transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.setpanel .b-actions { gap: 1.3vmin; }
.setpanel .b-act { padding: 1.3vmin 2.2vmin; }
.setpanel .b-main { gap: 1.6vmin; }
.newdot { font-style: normal; margin-left: 0.7em; padding: 0.15em 0.55em; font-size: 0.85em; color: #fff; background: #d6313a; letter-spacing: 0.08em; }
.newdot[hidden] { display: none; }
.set-list { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 2vmin; align-content: start; padding: 0.8vmin 1.6vmin 1.6vmin 0.8vmin; scrollbar-width: thin; }
.set-row { display: grid; grid-template-columns: 1fr auto; gap: 2.4vmin; align-items: center; padding: 1.7vmin 2.4vmin; background: var(--paper); color: var(--ink); border: 0.45vmin solid var(--ink); box-shadow: 0.9vmin 0.9vmin 0 var(--ink); animation: srvIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 0.05s); }
.set-txt b { display: block; font-size: min(2.3vmin, 1.8vw); letter-spacing: 0.07em; }
.set-txt span { display: block; margin-top: 0.6vmin; font-size: min(1.3vmin, 1vw); letter-spacing: 0.06em; line-height: 1.45; opacity: 0.65; }
.set-ctl { display: flex; gap: 0.8vmin; }
.tg, .seg { font: inherit; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; padding: 1.1vmin 2vmin; color: var(--ink); background: var(--paper); border: 0.4vmin solid var(--ink); cursor: pointer; transition: translate 0.15s ease, box-shadow 0.15s ease; }
.tg { min-width: 9vmin; }
.tg.on, .seg.on { color: var(--paper); background: var(--ink); }
.tg:hover, .seg:hover, .tg:focus-visible, .seg:focus-visible { translate: 0 -0.5vmin; box-shadow: 0 0.5vmin 0 var(--ink); outline: 0; }
.set-acct { flex: 1; padding: 3vmin; background: var(--paper); color: var(--ink); border: 0.45vmin solid var(--ink); box-shadow: 0.9vmin 0.9vmin 0 var(--ink); align-self: flex-start; width: min(100%, 70vmin); }
.set-acct[hidden], .set-list[hidden] { display: none; }
.set-acct .note { margin: 0 0 2vmin; }
.set-acct label { display: block; margin: 0 0 0.8vmin; font-size: min(1.6vmin, 1.25vw); letter-spacing: 0.08em; }
.set-btns { display: flex; gap: 1.6vmin; margin-top: 1.6vmin; flex-wrap: wrap; }
.srv-go.ghost { background: var(--paper); color: var(--ink); }

.logmodal .modal-box.log-box { rotate: 0deg; width: min(94vw, 100vmin); max-height: 90%; display: flex; flex-direction: column; gap: 1.6vmin; padding: 3vmin; }
.log-head { display: flex; align-items: center; gap: 1.6vmin; flex-wrap: wrap; }
.log-head h2 { margin: 0; }
.log-head #logVer { flex: 1; font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.1em; opacity: 0.6; }
.log-upd { margin: 0; padding: 1.2vmin 1.8vmin; font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.08em; color: var(--paper); background: #8f1019; display: flex; align-items: center; gap: 1.6vmin; flex-wrap: wrap; }
.log-upd[hidden] { display: none; }
.log-upd .chip { background: var(--paper); color: var(--ink); }
.log-list { overflow: auto; min-height: 0; display: grid; gap: 2vmin; padding-right: 1vmin; scrollbar-width: thin; }
.log-entry { padding: 1.6vmin 2vmin; border: 0.4vmin solid var(--ink); background: #f4f5f8; }
.log-entry.cur { background: var(--paper); box-shadow: 0.8vmin 0.8vmin 0 var(--ink); }
.log-eh { display: flex; align-items: baseline; gap: 1.4vmin; flex-wrap: wrap; margin-bottom: 1vmin; }
.log-eh b { font-size: min(2.4vmin, 1.9vw); letter-spacing: 0.06em; }
.log-eh span { flex: 1; font-size: min(1.7vmin, 1.3vw); letter-spacing: 0.08em; }
.log-eh i { font-style: normal; font-size: min(1.3vmin, 1vw); opacity: 0.55; letter-spacing: 0.08em; }
.log-eh em { font-style: normal; font-size: min(1.2vmin, 0.95vw); padding: 0.3vmin 1vmin; color: var(--paper); background: var(--ink); letter-spacing: 0.1em; }
.log-entry ul { margin: 0; padding-left: 2.4vmin; display: grid; gap: 0.6vmin; }
.log-entry li { font-size: min(1.45vmin, 1.1vw); letter-spacing: 0.04em; line-height: 1.5; }
.vtag { position: absolute; right: 2.4vmin; bottom: 1.8vmin; z-index: 3; font-size: min(1.6vmin, 1.25vw); letter-spacing: 0.16em; color: var(--ink); opacity: 0.55; pointer-events: none; }

body.reduced *, body.reduced *::before, body.reduced *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; }

@media (max-aspect-ratio: 1/1) {
  .setpanel .b-slash { clip-path: polygon(0 0, 100% 0, 100% 49%, 0 56%); }
  .setpanel .b-actions { grid-template-columns: repeat(3, 1fr); }
  .setpanel .b-main { top: 62vh; }
  .set-row { gap: 2.4vw; padding: 1.3vh 3vw; }
  .set-txt b { font-size: 2.6vw; } .set-txt span { font-size: 1.7vw; }
  .tg, .seg { font-size: 2.3vw; padding: 1vh 2.2vw; }
}
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .set-txt b { font-size: 14px; } .set-txt span { font-size: 10px; }
  .tg, .seg { font-size: 12px; padding: 8px 12px; min-height: 36px; }
  .log-eh b { font-size: 16px; } .log-eh span { font-size: 12px; } .log-entry li { font-size: 11px; }
  .vtag { font-size: 10px; }
}
/* account pane: same animated, full-width rows as the other settings */
.set-acct { width: auto; padding: 0.8vmin 1.6vmin 1.6vmin 0.8vmin; background: transparent; border: 0; box-shadow: none; align-self: stretch; display: grid; }
.set-acct[hidden] { display: none; }
.set-acct .set-row[hidden] { display: none; }
.set-acct .set-ctl { align-items: stretch; flex-wrap: wrap; justify-content: flex-end; }
.set-acct .field { margin: 0; width: min(28vmin, 24vw); min-width: 150px; }
.set-acct .srv-go { padding: 1.1vmin 2.4vmin; font-size: min(1.8vmin, 1.4vw); }
.set-status { margin: 0; min-height: 1.4em; font-size: min(1.6vmin, 1.25vw); letter-spacing: 0.08em; }
@media (max-width: 700px) and (max-aspect-ratio: 1/1) { .set-acct .srv-go { font-size: 12px; padding: 8px 12px; } .set-acct .field { min-width: 110px; } }

/* ================= splash text + opposite tilt for the right-hand player card ================= */
.title { overflow: visible; }
.splash {
  position: absolute; left: 60%; top: calc(100% + 2.2vmin); display: block;
  font-style: normal; font-size: min(5.6vmin, 4.4vw); line-height: 1; letter-spacing: 0.04em; white-space: nowrap;
  color: #ffd800;
  text-shadow: -0.35vmin -0.35vmin 0 #000, 0.35vmin -0.35vmin 0 #000, -0.35vmin 0.35vmin 0 #000, 0.35vmin 0.35vmin 0 #000, 0 0.5vmin 0 #000, 0.55vmin 0.55vmin 0 #000;
  rotate: -9deg; transform-origin: left center;
  animation: splashPulse 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes splashPulse { 0%, 100% { scale: 1; } 50% { scale: 1.14; } }
.hud.right { rotate: 2deg; }

/* ================= HELP guide ================= */
.helppanel .b-actions { grid-template-columns: 1fr 1fr; gap: 1.1vmin 1.4vmin; width: 100%; }
.helppanel .b-act { width: auto; padding: 1.05vmin 1.4vmin; box-shadow: 0.6vmin 0.6vmin 0 #6a6a6a; }
.helppanel .b-act b { font-size: min(1.75vmin, 1.35vw); }
.helppanel .b-act:hover, .helppanel .b-act:focus-visible, .helppanel .b-act.on { translate: 0 -0.6vmin; box-shadow: 0.6vmin 1.2vmin 0 #6a6a6a; }
.help-list { gap: 2.2vmin; }
.help-card { padding: 2vmin 2.6vmin; background: var(--paper); color: var(--ink); border: 0.45vmin solid var(--ink); box-shadow: 0.9vmin 0.9vmin 0 var(--ink); animation: srvIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 0.06s); }
.help-card:nth-child(odd) { rotate: -0.25deg; } .help-card:nth-child(even) { rotate: 0.25deg; }
.help-card h3 { margin: 0 0 1.2vmin; font-size: min(2.3vmin, 1.8vw); letter-spacing: 0.08em; }
.help-card ul { margin: 0; padding-left: 2.6vmin; display: grid; gap: 0.9vmin; }
.help-card li { font-size: min(1.45vmin, 1.12vw); letter-spacing: 0.04em; line-height: 1.55; }
@media (max-aspect-ratio: 1/1) {
  .helppanel .b-actions { grid-template-columns: repeat(3, 1fr); }
  .helppanel .b-slash { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 47%); }
  .helppanel .b-main { top: 52vh; }
  .help-card li { font-size: 2.1vw; } .help-card h3 { font-size: 3vw; }
  .splash { left: 55%; font-size: 6.4vw; }
}
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .helppanel .b-act b { font-size: 10px; padding: 0; }
  .help-card li { font-size: 11px; } .help-card h3 { font-size: 14px; }
  .splash { font-size: 24px; }
}

.set-list, .help-list { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }

.tile.fs { --t: #2bb8a4; }
.sec.fs .sec-h { color: #1f8f7e; }

/* ================= CHAT (lobby panel + match overlay) ================= */
.chat { display: flex; flex-direction: column; gap: 1vmin; min-height: 0; }
.chat-head { font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.14em; opacity: 0.7; }
.chat-log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.6vmin; scrollbar-width: thin; }
.chat-line { font-size: min(1.65vmin, 1.28vw); letter-spacing: 0.04em; line-height: 1.45; overflow-wrap: anywhere; animation: viewIn 0.2s ease both; }
.chat-line .cn { letter-spacing: 0.06em; }
.chat-line.me .cn { text-decoration: underline; text-underline-offset: 0.4vmin; }
.chat-line.sys { opacity: 0.55; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 1vmin; }
.chat-form .field { margin: 0; min-width: 0; }
.chat-send { font: inherit; font-size: min(1.7vmin, 1.3vw); letter-spacing: 0.08em; padding: 0 2vmin; color: var(--paper); background: var(--ink); border: 0.4vmin solid var(--ink); cursor: pointer; }
.chat-send:hover { background: #333; }
#lobbyChat { flex: 1.3 1 0; padding: 2vmin 2.4vmin; background: var(--paper); border: 0.55vmin solid var(--ink); box-shadow: 1.2vmin 1.2vmin 0 var(--ink); }
.l-stats { flex: 1 1 0; }

.gchat { position: absolute; left: 1.6vmin; bottom: 1.6vmin; z-index: 5; width: min(54vmin, 44vw); display: none; flex-direction: column; justify-content: flex-end; gap: 0.8vmin; pointer-events: none; }
.arena.online .gchat { display: flex; }
.gchat .chat-log { flex: 0 1 auto; max-height: 22vmin; overflow: hidden; justify-content: flex-end; }
.gchat .chat-line { width: fit-content; max-width: 100%; padding: 0.5vmin 1.3vmin; color: #fff; background: rgba(0, 0, 0, 0.74); transition: opacity 0.6s ease; }
.gchat .chat-line.gone { opacity: 0; }
.gchat.open .chat-line.gone { opacity: 1; }
.gchat.open .chat-log { overflow: auto; pointer-events: auto; max-height: 30vmin; }
.gchat .chat-form { display: none; pointer-events: auto; }
.gchat.open .chat-form { display: grid; }
.gchat .gc-toggle { pointer-events: auto; align-self: flex-start; font-size: min(1.5vmin, 1.15vw); }
.gchat .gc-toggle.unread { background: #d6313a; animation: dotPulse 0.9s ease-in-out infinite; }
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .chat-line { font-size: 11px; } .chat-head { font-size: 11px; } .chat-send { font-size: 12px; padding: 0 12px; }
  .gchat { width: 62vw; } .gchat .chat-line { font-size: 10px; }
}

/* the lobby chat needs room to show its messages, even on a tall narrow screen */
.l-stats { min-height: 11vmin; }
#lobbyChat { min-height: 19vmin; }
.chat-log { min-height: 7vmin; }
@media (max-aspect-ratio: 1/1) {
  .l-mid { top: 34%; bottom: 23%; gap: 1.4vmin; }
  .l-stats { padding: 1.4vmin 2vmin; } .l-stats h2 { margin-bottom: 0.8vmin; }
  #lobbyChat { padding: 1.4vmin 2vmin; }
}

/* ================= spectating ================= */
.specbar { position: absolute; left: 50%; bottom: 1.6vmin; translate: -50% 0; z-index: 5; display: none; padding: 0.8vmin 2vmin; font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.14em; color: var(--paper); background: var(--ink); border: 0.3vmin solid var(--paper); pointer-events: none; white-space: nowrap; }
.arena.spectating .specbar { display: block; }
.arena.spectating .a-panel { display: none; }
.arena.spectating #resAgain, .arena.spectating .a-mid .chip + .chip { display: none; }
.srv-go.spec { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.srv-go.spec:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.srv-watch { font-size: min(1.25vmin, 0.98vw); letter-spacing: 0.1em; opacity: 0.6; }
#pList li .tag.rk { background: #555; }
#pList li .tag.rk { font-size: 0.6em; }
.res-rank { margin: -0.6vmin 0 1.6vmin; font-size: min(1.8vmin, 1.4vw); letter-spacing: 0.08em; min-height: 0; }
.res-rank:empty { display: none; }
#acctBadge .rk { margin-left: 0.4em; padding: 0.15em 0.5em; font-size: 0.8em; color: #fff; background: #333; letter-spacing: 0.1em; }

/* ================= PROFILE ================= */
.profilepanel .b-actions { grid-template-columns: 1fr 1fr; gap: 1.1vmin 1.4vmin; width: 100%; }
.profilepanel .b-act { width: auto; padding: 1.05vmin 1.4vmin; box-shadow: 0.6vmin 0.6vmin 0 #6a6a6a; }
.profilepanel .b-act b { font-size: min(1.75vmin, 1.35vw); }
.profilepanel .b-act:hover, .profilepanel .b-act:focus-visible, .profilepanel .b-act.on { translate: 0 -0.6vmin; box-shadow: 0.6vmin 1.2vmin 0 #6a6a6a; }
.pf-badge { display: grid; gap: 0.7vmin; padding: 1.8vmin 2.2vmin; color: var(--ink); background: var(--paper); border: 0.45vmin solid var(--ink); box-shadow: 0.9vmin 0.9vmin 0 #6a6a6a; rotate: -2deg; width: 84%; }
.pf-badge small { font-size: min(1.25vmin, 0.98vw); letter-spacing: 0.12em; opacity: 0.65; }
.pf-badge b { font-size: min(4.2vmin, 3.2vw); letter-spacing: 0.06em; line-height: 1.05; }
.pf-badge span { font-size: min(1.7vmin, 1.3vw); letter-spacing: 0.1em; }
.pf-bar { height: 1.6vmin; min-height: 9px; background: #d8dbe1; border: 0.3vmin solid var(--ink); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--ink); transition: width 0.5s ease; }
.pf-note { margin: 1vmin 0 0; font-size: min(1.4vmin, 1.08vw); letter-spacing: 0.06em; line-height: 1.55; opacity: 0.8; }
.pf-rank { display: flex; align-items: baseline; gap: 2vmin; flex-wrap: wrap; margin-bottom: 1.2vmin; }
.pf-rank b { font-size: min(5.4vmin, 4.2vw); letter-spacing: 0.06em; }
.pf-rank span { font-size: min(1.7vmin, 1.3vw); letter-spacing: 0.1em; opacity: 0.7; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14vmin, 1fr)); gap: 1.4vmin; }
.pf-stat { display: grid; gap: 0.5vmin; padding: 1.4vmin 1.6vmin; border: 0.35vmin solid var(--ink); background: #f4f5f8; }
.pf-stat b { font-size: min(3.4vmin, 2.6vw); letter-spacing: 0.04em; }
.pf-stat span { font-size: min(1.2vmin, 0.95vw); letter-spacing: 0.1em; opacity: 0.65; }
.pf-fighter { display: grid; gap: 0.6vmin; padding: 1.2vmin 0 1.2vmin 1.6vmin; border-left: 1vmin solid var(--c, var(--ink)); margin-top: 1.2vmin; }
.pf-fighter b { font-size: min(2vmin, 1.55vw); letter-spacing: 0.08em; }
.pf-fighter span { font-size: min(1.3vmin, 1vw); letter-spacing: 0.08em; opacity: 0.7; }
.pf-rung { display: grid; grid-template-columns: 1fr auto auto; gap: 2vmin; align-items: center; padding: 1.2vmin 1.6vmin; margin-top: 1vmin; border: 0.35vmin solid var(--ink); background: #f4f5f8; opacity: 0.7; }
.pf-rung b { font-size: min(1.9vmin, 1.45vw); letter-spacing: 0.08em; }
.pf-rung span, .pf-rung em { font-size: min(1.3vmin, 1vw); letter-spacing: 0.1em; font-style: normal; }
.pf-rung.done { opacity: 1; background: #e9ebf0; }
.pf-rung.cur { opacity: 1; color: var(--paper); background: var(--ink); box-shadow: 0.7vmin 0.7vmin 0 #6a6a6a; }
@media (max-aspect-ratio: 1/1) {
  .profilepanel .b-actions { grid-template-columns: repeat(4, 1fr); }
  .profilepanel .b-slash { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 51%); }
  .profilepanel .b-main { top: 56vh; }
  .pf-badge { width: 60%; padding: 1.2vh 3vw; }
  .pf-badge b { font-size: 6vw; } .pf-badge span, .pf-badge small { font-size: 2.4vw; }
}
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .profilepanel .b-act b { font-size: 10px; padding: 0; }
  .pf-stat b { font-size: 18px; } .pf-stat span, .pf-note, .pf-fighter span { font-size: 10px; } .pf-rank b { font-size: 26px; }
  .pf-badge b { font-size: 22px; } .pf-badge span, .pf-badge small { font-size: 10px; }
  .pf-rung b { font-size: 14px; } .pf-rung span, .pf-rung em { font-size: 10px; } .pf-fighter b { font-size: 14px; }
}

/* clickable names in the lobby + the player card */
#pList li.clk, .l-stats tr.clk { cursor: pointer; }
#pList li.clk:hover { translate: 0.8vmin -0.3vmin; box-shadow: 0.5vmin 0.5vmin 0 #6a6a6a; }
.l-stats tr.clk:hover td { background: #eceef2; }
.log-head #pcRank { flex: 1; font-size: min(1.5vmin, 1.15vw); letter-spacing: 0.1em; opacity: 0.6; }
.pc-card { padding: 1.8vmin 2.2vmin; border: 0.4vmin solid var(--ink); background: #f4f5f8; }
.pc-card h3 { margin: 0 0 1.2vmin; font-size: min(2vmin, 1.55vw); letter-spacing: 0.08em; }
.pc-card .pf-stat { background: var(--paper); }
@media (max-width: 700px) and (max-aspect-ratio: 1/1) { .pc-card h3 { font-size: 13px; } }

/* ================= MAGE REWORK (v1.0.11) ================= */
.subtitle {
  position: absolute; left: 1%; bottom: calc(100% + 1.6vmin); display: block;
  font-style: normal; font-size: min(2.5vmin, 2vw); line-height: 1; letter-spacing: 0.22em; white-space: nowrap;
  color: #07200a; background: #5ccf2e; padding: 0.9vmin 1.8vmin 0.9vmin 2.2vmin;
  rotate: 0deg; transform-origin: left center; box-shadow: 0.7vmin 0.7vmin 0 #000;
  pointer-events: none;
}
@media (max-aspect-ratio: 1/1) { .subtitle { font-size: 3.4vw; left: 0; } }
@media (max-width: 700px) and (max-aspect-ratio: 1/1) { .subtitle { font-size: 13px; } }
.tile.tint-mint { --t: #8fb9a4; color: #10261c; }
.sec .tile.tint-mint.dis { filter: grayscale(0.4); }
.hbar.cancel { height: 1.3vmin; margin-top: 0.6vmin; background: #cfd6d2; }
.hbar.cancel i { width: 0; background: #8fb9a4; transition: width 0.25s linear; }
.hbar.cancel span { position: absolute; inset: 0; display: grid; place-items: center; font-size: min(0.95vmin, 0.75vw); letter-spacing: 0.1em; color: #0e1f17; z-index: 2; }
.hbar.cancel.full i { background: linear-gradient(90deg, #a9d1bd, #7fb39a); animation: essPulse 0.5s ease-in-out infinite alternate; }
.hbar.cancel.live i { width: 100% !important; background: #8fb9a4; animation: essPulse 0.9s ease-in-out infinite alternate; }
.hbar.cancel[hidden] { display: none; }
.log-entry.hl-blue { background: #dcebff; border-color: #1f4fd6; box-shadow: 0.8vmin 0.8vmin 0 #1f4fd6; }
.log-entry.hl-blue.cur { background: #dcebff; }
.log-entry.hl-blue .log-eh b, .log-entry.hl-blue .log-eh span { color: #123a9e; }

/* playstyle tag under each fighter's role */
.ccard .sty { margin: -0.8vmin auto 1.4vmin; padding: 0.3vmin 1vmin; font-size: min(1.1vmin, 0.85vw); letter-spacing: 0.1em; color: var(--paper); background: var(--ink); }
.i-style { display: inline-block; margin-top: 0.6vmin; padding: 0.3vmin 1.1vmin; font-size: min(1.4vmin, 1.05vw); letter-spacing: 0.1em; color: var(--paper); background: var(--ink); }
@media (max-width: 700px) { .ccard .sty { font-size: 9px; padding: 2px 6px; } .i-style { font-size: 10px; } }

.bot-box { rotate: 0deg; width: min(92vw, 70vmin); display: grid; gap: 1.6vmin; }
.bot-h { margin: 0 0 0.6vmin; font-size: min(2.6vmin, 2vw); letter-spacing: 0.08em; }
.bot-box .opt { text-align: left; }
.bot-s { display: block; margin-top: 0.7vmin; font-size: min(1.25vmin, 0.95vw); letter-spacing: 0.04em; line-height: 1.45; opacity: 0.75; }
@media (max-width: 700px) { .bot-s { font-size: 10px; } }

.srv { transition: opacity 0.25s ease, translate 0.25s ease; }
.srv.leaving { opacity: 0; translate: 3vmin 0; pointer-events: none; }