/* FFT Arena team builder — a Showdown-style shell (own implementation, no code copied). */
:root {
  --font: Verdana, Helvetica, Arial, sans-serif;
  --topbar-h: 50px;
  --menu-w: 325px;
  --blue-panel: #dae5f0;      /* set chart box */
  --blue-panel-dark: #cbd6e1;
  --text: #000; --muted: #555; --faint: #999; --link: #224488;
  --input-border: #004488; --input-focus: #2266aa;
  --green-a: #bed09f; --green-b: #8faf5a; --green-border: #6e8943;
  --btn-a: #f6f6f6; --btn-b: #d3d3d3; --btn-border: #aaa;
  --bad: #b02020; --ok: #2d7d3a; --warn: #a06a00;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font: 14.6667px/1.35 var(--font); color: #fff;
  background: #1c4f8a linear-gradient(160deg, #6fb4e8 0%, #2f7fc2 35%, #1f5c9a 70%, #123c6b 100%) fixed;
  overflow: hidden;
}
a { color: var(--link); }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
#header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 5;
  background: linear-gradient(#5a7fb0, #2b4e80 60%, #223f6a); border-bottom: 1px solid #16294a;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  display: flex; align-items: flex-end; gap: 18px; padding: 0 10px;
}
#header .logo { align-self: center; flex: 0 0 auto; font-weight: 700; font-size: 18px; letter-spacing: .3px; text-shadow: 0 1px 1px #0008; white-space: nowrap; }
.roomtabs { flex: 0 0 auto; display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.roomtabs li button {
  border: 1px solid #5f7ea8; border-bottom: none; border-radius: 5px 5px 0 0; background: rgba(255,255,255,.18); color: #fff;
  padding: 7px 14px 8px; font-size: 12px; cursor: pointer; height: 37px;
}
.roomtabs li button.cur { background: #f8f8f8; color: #444; border-color: #f8f8f8; }
.roomtabs li button .x { margin-left: 8px; opacity: .6; }
/* the "N PLAYERS ONLINE" counter written straight onto the header, no box around it */
.onlinebox {
  flex: 0 0 auto; align-self: center; margin-left: 10px;
  /* same type size as .logo so the two line boxes are identical - that is what puts the
     letters on exactly the same level, a nudge in px cannot do it */
  color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .3px;
  text-shadow: 0 1px 1px #0008; white-space: nowrap;
}
.onlinebox .n { color: #6ee06e; }
.userbar { margin-left: auto; align-self: center; display: flex; gap: 6px; align-items: center; font-size: 12px; }
.userbar .username { font-weight: 700; }

/* ---------- generic buttons / inputs ---------- */
.button {
  display: inline-block; cursor: pointer; color: #222; font-size: 12px; padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--btn-border); background: linear-gradient(var(--btn-a), var(--btn-b));
  box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 #fff; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.button:hover { background: linear-gradient(#fff, #e0e0e0); }
.button:active { background: linear-gradient(#d3d3d3, #f6f6f6); }
.button.big { font-size: 16px; padding: 5px 10px; }
.button.disabled, .button:disabled { opacity: .55; cursor: default; }
.button.danger { color: #a02020; }
.button.mainmenu {
  display: block; width: 230px; margin: 0 auto 10px; text-align: center; font-size: 18.67px; font-weight: 700; color: #fff; padding: 10px 0; height: 50px;
  background: linear-gradient(var(--green-a), var(--green-b)); border: 1px solid var(--green-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.8); text-shadow: 0 1px 1px #0004;
}
.button.mainmenu:hover { filter: brightness(1.06); }
/* hue-shifted variants, Showdown style: same gradient, different hue */
.button.mainmenu.mm2 { background: linear-gradient(hsl(30 40% 72%), hsl(30 40% 52%)); border-color: hsl(30 40% 40%); }
.button.mainmenu.mm3 { background: linear-gradient(hsl(60 40% 62%), hsl(60 40% 42%)); border-color: hsl(60 40% 32%); }
.button.mainmenu.mm4 { background: linear-gradient(hsl(130 40% 72%), hsl(130 40% 52%)); border-color: hsl(130 40% 40%); }
.button.mainmenu.mm5 { background: linear-gradient(hsl(210 40% 72%), hsl(210 40% 52%)); border-color: hsl(210 40% 40%); }
.button.mainmenu small { display: block; font-size: 11px; font-weight: 400; margin-top: 1px; }
.button.mainmenu.disabled { filter: grayscale(.6); }
.textbox {
  background: #fff; color: #000; font-size: 12px; padding: 2px 4px; border-radius: 3px; border: 1px solid var(--input-border);
  box-shadow: inset 0 1px 2px #d2d2d2; height: 24px;
}
.textbox:focus { outline: none; border-color: var(--input-focus); box-shadow: inset 0 1px 2px #d2d2d2, 0 0 0 2px #2266aa33; }
select.textbox { padding: 1px 2px; }
.select {
  display: inline-block; cursor: pointer; color: #222; font-size: 12px; padding: 3px 24px 3px 8px; border-radius: 5px; position: relative; text-align: left;
  border: 1px solid var(--btn-border); background: linear-gradient(var(--btn-a), var(--btn-b)); box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 #fff;
}
.select::after { content: ''; position: absolute; right: 8px; top: 9px; border: 5px solid transparent; border-top-color: #444; border-bottom: 0; }

/* ---------- rooms ---------- */
#rooms { position: absolute; top: var(--topbar-h); left: 0; right: 0; bottom: 0; }
.ps-room { position: absolute; inset: 0; overflow: auto; }
.ps-room-light { background: #f8f8f8; color: #000; border-left: 1px solid #aaa; }
.scrollable { overflow-y: auto; }

/* ---------- main menu (home) ---------- */
.mainmenu { width: var(--menu-w); padding: 20px 0 0 27px; }
.menugroup { background: rgba(0,0,0,.2); border-radius: 20px; width: 270px; padding: 12px 0 2px; margin-bottom: 15px; color: #fff; }
/* placeholder ad slot where the Teambuilder/Ladder/Watch buttons used to sit */
.adbox {
  background: #fff; border: 1px solid rgba(0,0,0,.25); border-radius: 8px;
  width: 270px; min-height: 300px; margin-bottom: 15px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  color: #555; font-size: 13px; text-align: center; line-height: 1.5;
}
.menugroup p { margin: 0 0 8px; text-align: center; font-size: 12px; }
.menugroup .label { display: inline-block; width: 55px; text-align: right; margin-right: 6px; font-size: 12px; }
.menugroup .select, .menugroup .textbox { width: 155px; }
.menugroup .row { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.menugroup h3 { margin: 0 0 8px; text-align: center; font-size: 13px; }
.menugroup form label { display: block; text-align: center; margin-bottom: 6px; font-size: 12px; }
.menugroup form .textbox { width: 200px; color: #000; }
.menugroup .error { color: #ffd0d0; font-size: 12px; text-align: center; padding: 0 10px; }
.teampreview { padding: 0 10px 6px; }
.tpslots { display: flex; gap: 3px; justify-content: center; }
.tpslot {
  width: 38px; height: 50px; display: inline-grid; place-items: center; overflow: hidden;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.tpslot.empty { border-style: dashed; border-color: rgba(255,255,255,.22); }
.tpslot.empty i { font-style: normal; font-size: 11px; color: rgba(255,255,255,.35); }
.tpslot b { font-size: 11px; color: #fff; text-shadow: 0 1px 1px #0008; }
.homeright { position: absolute; left: var(--menu-w); top: 0; right: 0; bottom: 0; }
.homeright .ps-room-light { padding: 0; }

/* ---------- home: the arena / netcode pane ---------- */
.arena { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 10px; }
.arenahead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.arenahead b { font-size: 15px; }
.netstate { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid #ccc; color: var(--muted); }
.netstate.off { color: #999; }
.netstate.idle { color: #3f7d3f; border-color: #9ec79e; }
.netstate.busy { color: #9a6b1f; border-color: #d9bd82; }
.netstate.live { color: #fff; background: #3f7d3f; border-color: #3f7d3f; }
.vslabel { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid #bbb; color: var(--muted); }
.vslabel.pvp { color: #1d4f8a; border-color: #7ea6d4; background: #eaf2fb; font-weight: 700; }
.vslabel.ai { color: #7a5a1f; border-color: #d9bd82; background: #fbf5e8; }
.netbtn { font-size: 11px; position: relative; }
.netbtn.cur { background: linear-gradient(#e8eef7, #cfdcee); border-color: #6b7f9c; }
.netbtn .dot { margin-left: 5px; background: var(--bad); color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; }

/* the battle gets the whole pane; the log opens beside it when asked for */
.arenabody { flex: 1; min-height: 0; display: flex; gap: 6px; }
.arenastage {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  background: #14161a linear-gradient(#1c2027, #101215); border: 1px solid #3a3f48; border-radius: 4px;
}
.arenastage .emumount { position: absolute; inset: 0; }
.arenastage .emumount > div { width: 100%; height: 100%; }
.arenastage .stageover { position: absolute; inset: 0; display: grid; place-items: center; background: #14161a; }
.arenastage .stagemsg { color: #8d949e; font-size: 13px; text-align: center; line-height: 1.7; }
.loadbox { width: min(420px, 70%); text-align: center; color: #cdd3da; }
.loadmap { font-size: 13px; margin-bottom: 8px; }
.loadbar { height: 10px; background: #0c0e11; border: 1px solid #3a3f48; border-radius: 5px; overflow: hidden; }
.loadbar span { display: block; height: 100%; width: 0; background: linear-gradient(#8fd08f, #4a8f4a); transition: width .25s ease-out; }
.loadlabel { margin-top: 6px; font-size: 11px; color: #8d949e; }
.arenastage .stagemsg small { display: block; color: #6b727c; font-size: 11px; }
.arenastage .stagemsg b { color: #cdd3da; }
/* the idle prompt is the only thing on an empty battlefield, so it gets to shout */
.arenastage .stagemsg.idle {
  color: #cdd3da; font-weight: 700; letter-spacing: 1.5px; line-height: 1.35;
  font-size: clamp(20px, 3.4vw, 38px); padding: 0 24px; max-width: min(15em, 100%);
}
.arenastage .stagemsg.idle b { color: #8fd08f; }

.netpanel { width: 270px; flex: none; display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 4px; background: #f6f6f6; }
.netpanel[hidden] { display: none; }
.nethead { display: flex; align-items: center; padding: 4px 6px; border-bottom: 1px solid #e3e3e3; }
.nethead .muted { flex: 1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.linkish { background: none; border: 0; cursor: pointer; color: var(--faint); font-size: 12px; padding: 0 2px; }
.arenalog { flex: 1; overflow: auto; padding: 4px 6px; font-size: 11px; line-height: 1.6; }
.arenalog .ll em { color: var(--faint); font-style: normal; margin-right: 6px; }
.arenalog .ll.ok { color: #2f6f2f; }
.arenalog .ll.bad { color: var(--bad); }

@media (max-width: 1100px) {
  .netpanel { width: 200px; }
}

/* ---------- teambuilder: list ---------- */
.folderpane { position: absolute; left: 0; top: 0; bottom: 0; width: 159px; border-right: 1px solid #ccc; background: #f0f0f0; padding-top: 10px; }
.folder { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; font-size: 12px; color: #444; cursor: pointer; height: 30px; }
.folder.cur { background: #f8f8f8; font-weight: 700; color: #000; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.folder .count { color: var(--faint); float: right; }
.teampane { position: absolute; left: 159px; top: 0; right: 0; bottom: 0; padding: 5px 0 5px 8px; overflow: auto; }
.teampane h2 { font-size: 15px; margin: 8px 0 6px; }
.teampane h2 small { color: var(--faint); font-weight: 400; }
.teampane p { margin: 6px 0; }
.teamlist { list-style: none; margin: 0; padding: 0; }
.teamlist li { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.team {
  display: flex; align-items: center; gap: 8px; width: 350px; height: 49px; padding: 0 5px; cursor: pointer; font-size: 12px; text-align: left;
  background: linear-gradient(#edf2f8, #d7e3ef); border: 1px solid #888; border-radius: 4px; color: #000;
}
.team:hover { background: linear-gradient(#fff, #e6eef7); border-color: #446; }
.team .teamname { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team .teamname span { color: var(--faint); font-weight: 400; margin-left: 4px; }
.team .teamicons { display: flex; gap: 2px; }
.picon { width: 24px; height: 24px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px #0008; box-shadow: inset 0 1px 0 #fff6, 0 1px 1px #0005; }
.picon.empty { background: #cfd6de; color: #8a94a0; box-shadow: none; }
.swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #0006; display: inline-block; vertical-align: -2px; }

/* ---------- teambuilder: the 18 teams every account starts with ---------- */
.presetlist li .team { background: linear-gradient(#f2eee4, #e4dcc8); border-color: #9a8e74; }
.presetlist li .team:hover { background: linear-gradient(#fffdf7, #efe7d6); border-color: #6b5f45; }
.teamlist .team .teamname span { display: block; margin: 0; font-size: 10.67px; }
#tb-restore { vertical-align: middle; }
.presetbadge { display: inline-block; margin: 0 4px; padding: 2px 7px; border-radius: 3px; background: #efe7d6; border: 1px solid #9a8e74; color: #5b5039; font-size: 11px; }

/* ---------- teambuilder: team ---------- */
.teamwrapper { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pad { padding: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #e3e3e3; background: #f8f8f8; }
.pad .teamnameedit { width: 220px; font-size: 14px; font-weight: 700; height: 26px; }
.pad .status { font-size: 11px; color: var(--muted); margin-left: 6px; }
.pad .spacer { flex: 1; }
.teamchartbox { flex: 1; overflow: auto; }
.teamchart { list-style: none; margin: 0; padding: 0 10px 10px 7px; }
.teamchart > li { position: relative; padding: 20px 0 0; }
.setmenu { position: absolute; top: 0; left: 122px; height: 20px; display: flex; gap: 2px; }
.setmenu button { border: 1px solid transparent; background: none; border-radius: 4px; font-size: 12px; padding: 2px 5px; color: var(--link); cursor: pointer; }
.setmenu button:hover { border-color: #aab; background: #fff; }
.setchart-nickname { position: absolute; left: 3px; top: 0; width: 112px; height: 39px; background: var(--blue-panel-dark); border: 1px solid #999; border-radius: 5px 5px 0 0; padding: 1px 0 0; }
.setchart-nickname label, .setcell label { display: block; font-size: 10.67px; font-weight: 700; color: var(--muted); padding-left: 2px; line-height: 13px; }
.setchart-nickname label { font-size: 9.33px; line-height: 11px; }
.setchart-nickname input { width: 108px; margin-left: 1px; background: #f8fbfd; border-color: #aaa; }
.setchart {
  display: flex; margin-top: 19px; background: var(--blue-panel); border: 1px solid #999; border-radius: 5px; padding: 2px 0 0 3px; min-height: 131px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6); width: fit-content; max-width: 100%;
}
.setchart.slot-active { outline: 2px solid #2266aa; }
.setcol { padding: 0 0 4px; }
.setcol-icon { width: 112px; }
.setcell-sprite { width: 112px; height: 84px; padding: 1px; display: grid; place-items: center; }
.sprite { width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 1px 2px #0009; box-shadow: inset 0 2px 0 #fff5, 0 2px 4px #0005; position: relative; }
.sprite small { position: absolute; bottom: 4px; right: 6px; font-size: 9px; font-weight: 700; opacity: .9; }
.setcol-details { width: 234px; }
.setcol-equip { width: 137px; }
.setcol-stats { width: 142px; }
.setcol-abil { width: 150px; }
.setrow { display: flex; }
.setcell { width: 112px; height: 39px; }
.setcell.w { width: 234px; }
.setcell.half { width: 117px; }
.setcell input.textbox, .setcell button.textbox { width: calc(100% - 4px); margin-left: 1px; }
.setcell button.textbox { text-align: left; cursor: pointer; background: #f8fbfd; border-color: #aaa; }
.chartinput.cur { border-color: var(--input-focus); box-shadow: inset 0 1px 2px #d2d2d2, 0 0 0 2px #2266aa44; }
.setdetails { display: flex; height: 34px; padding: 0; overflow: hidden; }
.detailcell { flex: 1; padding: 2px 4px; font-size: 12px; text-align: center; border-right: 1px solid #ddd; }
.detailcell:last-child { border-right: 0; }
.detailcell label { font-size: 9.33px; font-weight: 400; color: var(--muted); padding: 0; line-height: 11px; }
.setstats { display: block; height: 114px; padding: 2px 3px; }
.statrow { display: flex; align-items: center; height: 13px; font-size: 9.33px; }
.statrow label { width: 22px; font-size: 9.33px; font-weight: 400; padding: 0; color: var(--muted); line-height: 1; }
.statrow .statgraph { flex: 1; height: 6px; background: #fff8; margin: 0 4px 0 3px; border-radius: 2px; overflow: hidden; }
.statrow .statgraph span { display: block; height: 100%; background: #a7d9a6; }
.statrow .statgraph span.jp { background: #8fb7e8; }
.statrow .statgraph span.jp.over { background: #e08080; }
.statrow em { width: 30px; font-style: normal; color: var(--muted); text-align: right; }
.setabil { display: block; height: 114px; padding: 3px 4px; font-size: 10.67px; line-height: 1.3; overflow: hidden; }
.setabil .n { font-weight: 700; font-size: 12px; }
.setabil .list { color: #333; }
.setchart .warn { color: var(--bad); font-size: 10px; padding: 2px 4px; }
.addunit { margin: 16px 0 0 7px; }
.setchart-empty { margin-top: 19px; }

/* ---------- validation box ---------- */
.validation { margin: 8px 10px 0 7px; font-size: 12px; }
.validation .msg { padding: 5px 8px; border-radius: 4px; margin-bottom: 3px; }
.validation .msg.bad { background: #fde3e3; color: #7a1010; border: 1px solid #f2b6b6; }
.validation .msg.ok { background: #e3f5e6; color: #14521e; border: 1px solid #b6e0bd; }
.validation .msg.warn { background: #fff2d6; color: #5c3f00; border: 1px solid #f0d090; }

/* ---------- search results (utilichart) ---------- */
.teambuilder-results { position: relative; border-top: 1px solid #888; background: #e9e9e9; min-height: 120px; max-height: 45vh; overflow: auto; flex: 0 0 auto; box-shadow: 0 -2px 6px rgba(0,0,0,.15); }
.utilichart label.result { cursor: pointer; }
.muted { color: #777; font-size: 12px; }
.teambuilder-results.hidden { display: none; }
.searchbar { position: sticky; top: 0; background: #f2f4f7; border-bottom: 1px solid #ccc; padding: 5px 10px; display: flex; gap: 8px; align-items: center; font-size: 12px; z-index: 1; }
.searchbar .textbox { width: 260px; }
.searchbar .hint { color: var(--faint); }
.utilichart { list-style: none; margin: 0; padding: 0 4px 6px; }
.utilichart li { padding: 1px 0 0; }
.utilichart h3 { font-size: 12px; color: var(--muted); margin: 8px 6px 2px; font-weight: 700; }
.utilichart .result { display: flex; align-items: stretch; width: 100%; border: 1px solid transparent; border-radius: 4px; padding: 0 0 0 4px; background: none; color: var(--link); text-align: left; cursor: pointer; height: 32px; font-size: 13.33px; }
.utilichart .result:hover, .utilichart .result.cur { background: #e8effa; border-color: #99b; }
.utilichart .result.picked { background: #eef7ee; }
.utilichart .col { padding: 8px 5px 0 0; font-size: 10.67px; color: var(--faint); white-space: nowrap; overflow: hidden; }
.utilichart .iconcol { width: 34px; padding: 4px 6px 0 0; }
.utilichart .iconcol .picon { width: 24px; height: 24px; }
.utilichart .namecol { width: 150px; padding-top: 6px; font-size: 13.33px; color: #000; text-overflow: ellipsis; }
.utilichart .numcol { width: 44px; color: var(--faint); }
.utilichart .typecol { width: 90px; font-size: 11px; color: #444; }
.utilichart .abilitycol { width: 160px; font-size: 10.67px; color: #444; }
.utilichart .statcol { width: 40px; padding: 1px 0 0; color: #444; font-size: 10.67px; text-align: center; }
.utilichart .statcol em { display: block; font-style: normal; color: var(--faint); font-size: 9px; }
.utilichart .statcol + .abilitycol { margin-left: 16px; padding-left: 16px; border-left: 1px solid #e2e2e2; }
.utilichart .jpcol { width: 56px; text-align: right; color: #444; }
.utilichart .checkcol { width: 24px; padding: 8px 0 0 2px; }
.utilichart .checkcol input { margin: 0; }
.detailsform { padding: 10px 14px; font-size: 12px; display: flex; gap: 22px; flex-wrap: wrap; }
.detailsform label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.detailsform .textbox { width: 130px; }
.detailsform .note { color: var(--faint); align-self: end; }
.statsform { padding: 10px 14px; font-size: 12px; }
.statsform table { border-collapse: collapse; }
.statsform td, .statsform th { padding: 2px 10px 2px 0; text-align: left; font-weight: 400; color: var(--muted); }
.statsform td b { color: #000; }

/* ---------- matchmaking: search, draft, ready ---------- */
.searchpopup { text-align: center; width: 320px; }
.searchpopup .waited { font-size: 20px; font-weight: 700; margin: 4px 0; }
.searchdots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.searchdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--input-focus); animation: sd 1s infinite ease-in-out; }
.searchdots i:nth-child(2) { animation-delay: .15s; }
.searchdots i:nth-child(3) { animation-delay: .3s; }
@keyframes sd { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

.popup.draftpopup, .popup.readypopup { width: min(600px, 94vw); }
.drafthead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.drafthead b { font-size: 18px; letter-spacing: .02em; }
.clock { font-size: 30px; font-weight: 800; line-height: 1; color: var(--bad); min-width: 46px; text-align: right; }
.clock.low { animation: clockpulse .6s ease-in-out infinite; }
@keyframes clockpulse { 50% { opacity: .45; } }
.draftbody { display: flex; gap: 10px; }
.draftside { flex: 1; min-width: 0; }
.dhead { font-size: 14px; font-weight: 700; color: #000; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcards { display: flex; flex-direction: column; gap: 4px; }
.dcard {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 52px; box-sizing: border-box;
  text-align: left; padding: 3px 8px; position: relative;
  background: linear-gradient(#f6f3ec, #e7e1d3); border: 1px solid #b5ab93; border-radius: 4px; color: #000;
}
button.dcard { cursor: pointer; }
button.dcard:hover:not(:disabled) { border-color: #4a6ea8; background: linear-gradient(#fffdf7, #eef2f8); }
.dcard.picked { border-color: #3f7d3f; background: linear-gradient(#eaf7e6, #cfe8c6); box-shadow: 0 0 0 1px #3f7d3f inset; }
.dcard.dim { opacity: .45; }
.dcard.illegal { opacity: .6; }
.dcard.empty { justify-content: center; color: #aaa; font-size: 11px; background: #f3f3f3; border-style: dashed; }
.dface { width: 30px; height: 42px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 3px; background: #cfd6de; }
.dface b { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 10px; }
.dinfo { flex: 1; min-width: 0; display: block; overflow: hidden; }
.dinfo .djob { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dinfo .dname { display: block; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtick { color: #2f6f2f; font-weight: 800; font-size: 16px; }
.dbad { position: absolute; right: 6px; top: 3px; color: var(--bad); font-size: 10px; }
.draftfoot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.draftfoot .button { min-width: 150px; height: 34px; padding: 0 12px; font-size: 13px; }
.dstatus { font-size: 12px; }
.dstatus .ok { color: var(--ok); }
.dstatus .wait { color: var(--faint); }

.rhead { font-size: 15px; margin-bottom: 8px; }
.rmap { text-align: center; margin-bottom: 8px; }
.rmap img { max-height: 190px; image-rendering: pixelated; }
.rmapname { font-size: 12px; margin-top: 4px; }
.rsides { display: flex; gap: 10px; align-items: flex-start; }
.rsides .rside { flex: 1; min-width: 0; }
.rvs { align-self: center; font-weight: 800; color: var(--faint); }

@media (max-width: 760px) {
  .draftbody, .rsides { flex-direction: column; }
}

/* ---------- toast / popup ---------- */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #fff; color: #000; border: 1px solid #888; padding: 8px 14px; border-radius: 6px; box-shadow: 0 6px 24px #0006; z-index: 10; font-size: 13px; }
.toast.bad { border-color: var(--bad); color: var(--bad); }
.toast.ok { border-color: var(--ok); color: var(--ok); }
.popup-bg { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 8; display: grid; place-items: center; }
.popup { background: #f8f8f8; color: #000; border: 1px solid #888; border-radius: 6px; padding: 14px 18px; width: 340px; box-shadow: 0 8px 30px #0008; font-size: 13px; }
.popup h3 { margin: 0 0 10px; font-size: 15px; }
.popup label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.popup .textbox { width: 100%; margin-top: 3px; }
.popup .buttons { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.popup .error { color: var(--bad); font-size: 12px; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid #ccc; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; cursor: pointer; color: var(--muted); font-size: 13px; }
.tabs button.cur { color: #000; border-bottom-color: var(--input-focus); font-weight: 700; }

@media (max-width: 900px) {
  .mainmenu { width: 100%; padding-left: 12px; }
  /* the arena holds the live battle now, so a narrow window stacks it under the
     menu instead of hiding it */
  .homeright { position: static; height: 70vh; min-height: 320px; margin: 0 12px 12px; }
  .arena { padding: 6px 0; }
  .folderpane { position: absolute; left: 0; right: 0; bottom: auto; width: auto; height: 31px; display: flex; padding-top: 0; border-right: 0; border-bottom: 1px solid #ccc; }
  .folder { width: auto; flex: 1; text-align: center; }
  .folder.cur { border-top: 0; border-bottom: 0; }
  .folder .count { float: none; margin-left: 4px; }
  .teampane { left: 0; top: 31px; }
  .teamlist .team { width: auto; flex: 1; }
  .setchart { flex-wrap: wrap; }
}

/* ---------- FFT status-screen style unit card ---------- */
.fftcard { width: 700px; max-width: 100%; margin-top: 2px; font-family: "Trebuchet MS", Verdana, sans-serif; color: #3a2a14; }
.fftcard.slot-active .fft-box { box-shadow: 0 0 0 2px #2266aa, inset 0 0 0 1px #fff8; }
.fft-box { background: linear-gradient(#e5dcc4, #c9bd9d); border: 2px solid #2b241a; border-radius: 4px; box-shadow: inset 0 0 0 1px #fff8, 0 2px 3px #0005; }
.fft-top { display: flex; gap: 6px; margin-bottom: 6px; }
.fft-portrait { flex: 0 0 300px; display: flex; gap: 8px; padding: 6px 8px; }
.fft-face { width: 64px; height: 64px; border-radius: 6px; border: 2px solid #2b241a; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 1px 2px #000a; box-shadow: inset 0 2px 0 #fff5; flex: 0 0 auto; }
.fft-vitals { flex: 1; font-size: 12px; }
.fft-lv { font-weight: 700; font-size: 13px; margin-bottom: 3px; letter-spacing: .5px; }
.fft-lv .dim { color: #7a6a4a; }
.fft-bar { display: flex; align-items: center; gap: 5px; height: 16px; font-weight: 700; }
.fft-bar .k { width: 22px; font-size: 12px; }
.fft-bar .g { flex: 1; height: 7px; background: #4a3f2c; border: 1px solid #2b241a; border-radius: 2px; overflow: hidden; }
.fft-bar .g span { display: block; height: 100%; }
.fft-bar .g .hp { background: linear-gradient(#f0d060, #b98a10); }
.fft-bar .g .mp { background: linear-gradient(#8ad07a, #3f8f2f); }
.fft-bar .g .jp { background: linear-gradient(#9cc8ff, #3f7fcf); }
.fft-bar .g .jp.over { background: linear-gradient(#ff9c9c, #c03030); }
.fft-bar .v { width: 78px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.fft-bar .v i { font-style: normal; color: #7a6a4a; }
.fft-namebox { flex: 1; padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fft-name { background: transparent; border: 0; border-bottom: 1px dashed #8a7a5a; font: 700 17px/1.2 inherit; color: #3a2a14; padding: 2px 4px; width: 100%; }
.fft-name:focus { outline: none; border-bottom-color: #2266aa; background: #fff6; }
.fft-job, .fft-details { background: none; border: 1px solid transparent; border-radius: 3px; text-align: left; padding: 2px 4px; font: 700 15px/1.2 inherit; color: #3a2a14; cursor: pointer; }
.fft-details { font-size: 13px; }
.fft-details .zod { display: inline-block; width: 22px; font-size: 16px; color: #6a5a3a; }
.fft-job:hover, .fft-details:hover, .fft-row:hover, .fft-stats:hover { background: #fff5; border-color: #8a7a5a; }
.fft-job.cur, .fft-details.cur, .fft-row.cur, .fft-stats.cur { background: #fff9; border-color: #2266aa; box-shadow: 0 0 0 1px #2266aa inset; }
.fft-stats { display: flex; width: 100%; padding: 6px 12px; margin-bottom: 6px; gap: 18px; font: 700 12px/1.6 inherit; color: #3a2a14; text-align: left; cursor: pointer; border-width: 2px; }
.fft-stats .c1 { width: 130px; }
.fft-stats .c2 { width: 170px; }
.fft-stats .h { color: #6a5a3a; }
.fft-stats .c3 { flex: 1; }
.fft-stats .c3 div { display: grid; grid-template-columns: 22px 34px 52px 52px 52px; }
.fft-stats .c3 .h span:first-child { grid-column: 2; }
.fft-stats .c3 .ic { font-size: 12px; color: #8a6a2a; }
.fft-bottom { display: flex; gap: 6px; }
/* Column header is a caption line inside the box, so it can never cover a row
   or the box border the way a floating tab did. */
.fft-col { flex: 1; padding: 0 4px 6px; min-width: 0; }
.fft-h {
  font: 700 10px/1 inherit; color: #6f5f3f; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 7px 4px 5px; margin: 0 2px 4px; border-bottom: 1px solid rgba(43, 36, 26, .25);
}
.fft-col .fft-row + .fft-row { margin-top: 1px; }
.fft-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 6px 0 4px; background: none; border: 1px solid transparent; border-radius: 3px; text-align: left; font: 700 14px/1 inherit; color: #3a2a14; cursor: pointer; }
.fft-row .ic { width: 28px; height: 26px; display: grid; place-items: center; background: #6a5a3a; color: #f0e6c8; border-radius: 4px; font-size: 14px; flex: 0 0 auto; box-shadow: inset 0 1px 0 #fff4; }
.fft-row .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fft-row .val i { color: #9a8a6a; font-style: normal; }
.fft-row .val small { display: block; font-weight: 400; font-size: 10px; color: #7a6a4a; line-height: 1; margin-top: 2px; }
.teamchart > li > .warn { color: var(--bad); font-size: 11px; padding: 3px 4px; }
@media (max-width: 760px) { .fft-top { flex-wrap: wrap; } .fft-portrait { flex-basis: 100%; } .fft-stats { flex-wrap: wrap; gap: 8px; } }

/* ---------- art extracted from the game files by tools/extract-gfx.mjs ---------- */
.iicon, .jspr { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; flex: 0 0 auto; vertical-align: middle; }
.iicon { width: 16px; height: 16px; background-image: url('/app/gfx/items.png'); }
/* standing frames are 32 wide by 40 tall on a 512x800 sheet */
.jspr { width: 32px; height: 40px; background-image: url('/app/gfx/jobs.png'); }
/* scaled variants: the whole sheet is zoomed, so positions scale with it */
.jspr.x2 { width: 64px; height: 80px; background-size: 1024px 1600px; }
.jspr.sm { width: 24px; height: 30px; background-size: 384px 600px; }
.iicon.x2 { width: 32px; height: 32px; background-size: 512px 416px; }

/* item icons sit on white so the game's own pixel art reads cleanly */
.fft-row .ic.hasicon { background: #fff; border: 1px solid #8a7a5a; box-shadow: none; }
/* NEVER pad a sprite-sheet element: padding grows the background box and the
   neighbouring cells of the sheet bleed in. Spacing goes on the column instead. */
.utilichart .iconcol { padding: 4px 8px 0 2px; }
.utilichart .iconcol .iicon { background-color: #fff; border: 1px solid #b3b3b3; border-radius: 3px; }
/* an empty equipment slot gets a plain chip rather than a stand-in pictogram */
.fft-row .ic.empty { background: #cbbfa3; color: #8a7a5a; box-shadow: inset 0 1px 0 #fff5; }
/* the portrait box shows the job sprite instead of coloured initials */
/* the sprite sits straight on the parchment: no box, no dark plate behind it */
.fft-face.hasspr { width: 68px; height: 82px; background: none !important; border: 0; border-radius: 0; box-shadow: none; display: grid; place-items: center; }
/* team card roster chips */
.picon.hasspr { width: 24px; height: 30px; background: #cfd6de none; overflow: hidden; display: inline-grid; place-items: center; }

/* ---------- ability descriptions ---------- */
.utilichart .result.tall { height: auto; min-height: 32px; align-items: flex-start; padding: 5px 0 6px 4px; }
.utilichart .result.tall .checkcol { padding-top: 3px; }
.utilichart .descol { flex: 1; min-width: 0; padding: 0 8px 0 0; white-space: normal; color: #000; font-size: 13px; line-height: 1.35; }
.utilichart .descol b { font-weight: 700; }
.utilichart .result.tall .jpcol { padding-top: 2px; }

/* A description is a headline sentence plus one label + value per line, so a player
   reads what the thing does before meeting any of the guide's shorthand. */
.utilichart .descol .lead { display: block; font-size: 12px; color: #333; margin: 1px 0 3px; }
.utilichart .descol .plainfacts { display: grid; grid-template-columns: max-content 1fr; gap: 1px 10px; font-size: 11px; }
.utilichart .descol .plainfacts em { font-style: normal; color: #999; white-space: nowrap; }
.utilichart .descol .plainfacts i { font-style: normal; color: #555; min-width: 0; }
/* the JP price rides beside the name instead of in a column of its own */
.utilichart .descol .jpbracket { font-weight: 400; color: #888; font-size: 11.5px; }
/* a job's innate list is the last thing on its row, so it takes the rest of the width */
.utilichart .abilitycol.wide { flex: 1 1 auto; width: auto; min-width: 160px; text-overflow: ellipsis; }
/* terms the glossary can define: dotted underline, definition on hover */
.utilichart .gterm { border-bottom: 1px dotted #2a4a7a; color: #2a4a7a; cursor: help; }
#gtip { position: fixed; z-index: 40; max-width: 330px; background: #fffdf6; color: #222; border: 1px solid #8a7a4a;
  border-radius: 4px; padding: 7px 9px; font-size: 11.5px; line-height: 1.45; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
#gtip b { display: block; margin-bottom: 2px; }
#gtip code { display: block; margin-top: 3px; font-family: Consolas, monospace; color: #2a4a7a; }
#gtip small { display: block; margin-top: 3px; color: #777; }

/* equipment slot pictograms from the game's status window (shown on empty slots) */
.sicon { display: inline-block; width: 16px; height: 16px; background-image: url('/app/gfx/slots.png'); background-repeat: no-repeat; image-rendering: pixelated; }
.fft-row .ic.empty { background: #cbbfa3; display: grid; place-items: center; }

/* both Eqp. and Ability chips sit on white (owner's request) */
.fft-row .ic { background: #fff; color: #6a5a3a; border: 1px solid #8a7a5a; box-shadow: none; }
.fft-row .ic.empty { background: #fff; color: #8a7a5a; }
.fft-row .ic.hasicon { background: #fff; }

/* formation-screen portraits: 32x48 cells on a 64x960 sheet, two columns (M, F) */
.jface { display: inline-block; width: 32px; height: 48px; background-image: url('/app/gfx/faces.png'); background-repeat: no-repeat; image-rendering: pixelated; flex: 0 0 auto; vertical-align: middle; }
.jface.x2 { width: 64px; height: 96px; background-size: 128px 1920px; }
.jface.sm { width: 24px; height: 36px; background-size: 48px 720px; }
.fft-face.hasspr { width: 68px; height: 98px; }
.picon.hasspr { width: 24px; height: 36px; }
.utilichart .iconcol .jface.sm { border-radius: 3px; }

/* ---------- the result popup ---------- */
/* The game draws no victory screen for us - entering the map by writing the map
   id leaves it nowhere to return to, so the picture simply goes black. This is
   the ending the player sees, so it has to carry the verdict AND what it cost. */
.popup.resultpopup { width: 360px; text-align: center; }
.resultpopup .verdict { font-size: 26px; letter-spacing: 2px; margin: 2px 0 4px; }
.resultpopup.win  .verdict { color: #2d7d3a; text-shadow: 0 1px 0 #fff, 0 2px 6px #2d7d3a33; }
.resultpopup.loss .verdict { color: #b02020; text-shadow: 0 1px 0 #fff, 0 2px 6px #b0202033; }
.resultpopup.draw .verdict { color: #6b6b6b; }
.resultpopup .vsline { margin: 0; font-weight: 700; font-size: 13px; }
.resultpopup .why { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.resultpopup .buttons { justify-content: center; }
.ratingmove {
  border: 1px solid #d8d8d8; border-radius: 6px; background: #fff; padding: 8px 10px; margin: 0 0 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ratingmove b { font-size: 22px; line-height: 1; }
.ratingmove small { color: var(--muted); font-size: 11px; }
.ratingmove .delta { font-size: 15px; font-weight: 700; }
.ratingmove.up   .delta { color: var(--ok); }
.ratingmove.down .delta { color: var(--bad); }
.ratingmove.flat { background: #f1f1f1; }

/* ---------- the rating chip in the top bar ---------- */
.ratingchip {
  cursor: pointer; font: inherit; font-weight: 700; font-size: 12px; color: #fff;
  background: rgba(255,255,255,.18); border: 1px solid #5f7ea8; border-radius: 10px; padding: 2px 9px;
}
.ratingchip:hover { background: rgba(255,255,255,.3); }
.ratingchip.prov { opacity: .75; font-style: italic; }

/* ---------- the ladder room ---------- */
.ladderroom { padding: 18px 22px 40px; color: #000; max-width: 900px; }
.ladderroom h2 { margin: 0 0 4px; font-size: 20px; }
.ladderroom h3 { margin: 22px 0 6px; font-size: 14px; }
.ladderroom .muted { color: var(--muted); }
.ladderhelp { font-size: 11.5px; margin: 0 0 14px; max-width: 640px; line-height: 1.5; }
.mystanding { margin-bottom: 16px; }
.mycard {
  display: inline-flex; flex-direction: column; gap: 1px; padding: 10px 16px;
  border: 1px solid #c7d3e0; border-radius: 6px; background: var(--blue-panel);
}
.mycard .mylabel { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.mycard .myscore { font-size: 28px; line-height: 1; }
.mycard small { font-size: 11px; color: var(--muted); }
.laddertable { border-collapse: collapse; width: 100%; font-size: 12px; background: #fff; border: 1px solid #ccc; }
.laddertable th {
  text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 8px; border-bottom: 1px solid #ccc; background: #f1f4f8; white-space: nowrap;
}
.laddertable td { padding: 5px 8px; border-bottom: 1px solid #eee; }
.laddertable tr:last-child td { border-bottom: none; }
.laddertable tr.me { background: #fff6d8; }
.laddertable .rank { color: var(--muted); width: 34px; }
.laddertable .who { font-weight: 700; }
.laddertable .score b { font-size: 14px; }
.laddertable .raw, .laddertable .seen, .laddertable .len { color: var(--muted); white-space: nowrap; }
.laddertable .streak { font-size: 10px; padding: 1px 5px; border-radius: 8px; margin-left: 5px; font-weight: 700; }
.laddertable .streak.up { background: #dff0d8; color: var(--ok); }
.laddertable .streak.down { background: #f7e0e0; color: var(--bad); }
.laddertable .tag { background: #e7e7e7; color: var(--muted); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.history .res { font-weight: 700; width: 22px; text-align: center; }
.history tr.res-win .res { color: var(--ok); }
.history tr.res-loss .res { color: var(--bad); }
.history tr.res-draw .res { color: var(--muted); }
.history .delta.up { color: var(--ok); font-weight: 700; }
.history .delta.down { color: var(--bad); font-weight: 700; }