:root {
  --bg: #11151c; --panel: #1b212c; --panel2: #232b38; --line: #313b4b;
  --text: #e8edf4; --muted: #8d99ab; --accent: #f2c14e; --good: #4cc38a; --warn: #f0a83a; --bad: #e5564e;
  --up: #4cc38a; --down: #ef6a62; --sig: #c77dff;
  /* stat stages, by size: +1/+2/+3 deepening greens, -1/-2/-3 orange to deep red (chips and log lines) */
  --up1: #7fd99c; --up2: #3fbf73; --up3: #1f9a52;
  --down1: #f29a5e; --down2: #ec6a5c; --down3: #d23c3c;
  /* battle log line types */
  --lt-heal: #6fe0b4; --lt-psn: #c77ddb; --lt-brn: #f28a3c; --lt-par: #e8c93a; --lt-slp: #93a6c4;
  --lt-frz: #6fd3ea; --lt-cnf: #f290c4; --lt-weather: #8ec3ff; --lt-se: #ff9b5e; --lt-nve: #a3abb8;
  --lt-immune: #7d8594; --lt-crit: #ffd25e; --lt-faint: #ff7b72; --lt-switch: #9fb6d6; --lt-mega: #d59cff;
  --radius: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header h1 { font-size: 17px; margin: 0; letter-spacing: .3px; }
header .pill { color: var(--muted); font-size: 13px; }
header .grow { flex: 1; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.hidden { display: none !important; }
button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
         border-radius: 8px; padding: 9px 14px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }
button.small { padding: 4px 10px; font-size: 13px; }
a.newsbtn { position: relative; color: var(--text); text-decoration: none; background: var(--panel2); border: 1px solid var(--line);
            border-radius: 8px; padding: 4px 10px; font-size: 13px; display: inline-block; }
a.newsbtn:hover { border-color: var(--accent); }
a.newsbtn .dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
                 background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
        border-radius: 8px; padding: 8px 10px; }
label { display: block; color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.err { color: var(--bad); min-height: 20px; margin-top: 8px; }
.spacer { flex: 1; }
/* server notices (restart countdown, host messages) */
.srvbar { position: sticky; top: 0; z-index: 50; display: flex; gap: 10px; align-items: center; justify-content: center;
          padding: 9px 16px; font-weight: 600; text-align: center;
          background: color-mix(in srgb, var(--warn) 22%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); }
.srvbar.down { background: color-mix(in srgb, var(--bad) 22%, var(--panel)); border-bottom-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--panel2); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px;
         display: flex; gap: 10px; align-items: start; box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: toastIn .25s ease; }
.toast .from { color: var(--accent); font-size: 12px; font-weight: 600; }
.toast button { padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
/* team builder */
.builder h3 { margin: 0 0 8px; font-size: 15px; }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; }
@media (max-width: 820px) { .bgrid { grid-template-columns: 1fr; } }
.teamslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.boxgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tile { min-width: 0; position: relative; background: var(--panel2); border: 2px solid transparent; border-radius: 8px; padding: 4px;
        min-height: 76px; text-align: center; font-size: 11.5px; cursor: pointer; color: var(--text); }
.tile:hover { border-color: var(--line); }
.tile.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.tile.empty { color: var(--muted); display: flex; align-items: center; justify-content: center; }
.tile.inteam { opacity: .35; }
.tile img { width: 48px; height: 48px; image-rendering: pixelated; display: block; margin: 0 auto; }
.boxgrid .tile { min-height: 58px; padding: 3px 2px; } .boxgrid .tile img { width: 40px; height: 40px; max-width: 100%; }
.tile .it { position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.tile .it.stone { background: var(--sig); }
.tile .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boxnav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.boxnav .bn { flex: 1; text-align: center; font-weight: 600; }
.selpanel { margin-top: 12px; padding: 10px 12px; background: var(--panel2); border-radius: 8px; display: flex; gap: 8px;
            flex-wrap: wrap; align-items: center; font-size: 13px; }
.selpanel select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 220px; }
.hiddenteam { display: flex; gap: 6px; align-items: center; color: var(--muted); }
/* profile */
.profcard { width: min(620px, 100%); max-height: 92vh; overflow-y: auto; }
.profcard h3 { margin: 16px 0 6px; font-size: 15px; }
.profcard .form { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.profcard .form input { width: 100%; }
.plist { display: flex; flex-direction: column; gap: 6px; }
.plist .it { display: flex; gap: 8px; align-items: center; background: var(--panel2); border-radius: 8px; padding: 6px 10px; font-size: 13px; flex-wrap: wrap; }
.plist .it .grow { flex: 1; min-width: 120px; }
.rrow { flex-wrap: nowrap !important; align-items: flex-start !important; }
.rrow .rnone, .rrow button { flex: none; width: 34px; }
.rres { font-weight: 700; width: 44px; flex: none; padding-top: 6px; }
.rrow .grow { min-width: 0 !important; padding-top: 2px; overflow-wrap: anywhere; }
.rsub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rec { display: flex; gap: 14px; font-size: 14px; flex-wrap: wrap; }
.rec b { font-size: 20px; }
.res-won { color: var(--good); } .res-lost { color: var(--bad); } .res-draw { color: var(--warn); }
.qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--panel2); border-radius: 10px; padding: 12px; }
.qr img { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; border-radius: 8px; }
.qr .code { font: 700 28px/1 ui-monospace, Consolas, monospace; letter-spacing: 4px; }
.joinprof { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; padding: 12px;
            background: var(--panel2); border-radius: 10px; }
.teamtools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.teamtools select { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
/* summary page */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sumcard { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; }
#tournamentCard { width: min(1100px, 100%); }
.sumhead { display: flex; gap: 14px; align-items: center; }
.sumhead img { width: 96px; height: 96px; image-rendering: pixelated; background: var(--panel2); border-radius: 10px; }
.tabs { display: flex; gap: 0; margin: 12px 0; }
.tabs button { flex: 1; border-radius: 0; } .tabs button:first-child { border-radius: 8px 0 0 8px; } .tabs button:last-child { border-radius: 0 8px 8px 0; }
.tabs button.on { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14px; }
.kv .k { color: var(--muted); }
.stat { display: grid; grid-template-columns: 70px minmax(52px, auto) 1fr 70px; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 6px; }
.stat .bar { height: 8px; background: var(--panel2); border-radius: 99px; overflow: hidden; } .stat .bar > div { height: 100%; background: var(--good); }
.stat .up { color: #ff8a80; } .stat .down { color: #82b1ff; }
.smove { padding: 8px 10px; border-left: 6px solid var(--type, var(--line)); background: var(--panel2); border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
.smove b { font-size: 14px; }
.roomgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.room { display: flex; flex-direction: column; gap: 8px; }
.room h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.room .who { font-size: 14px; }
.room .meta { color: var(--muted); font-size: 12px; }
.room .actions { margin-top: 2px; }
.empty { color: var(--muted); padding: 24px; text-align: center; }
.tag.battle { background: color-mix(in srgb, var(--bad) 25%, transparent); color: #ff9a92; }
.tag.open { background: color-mix(in srgb, var(--good) 25%, transparent); color: var(--good); }
.ver { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.footer { color: var(--muted); font-size: 12px; margin: 14px 0 0; }
.settings-wrap { position: relative; }
.settings { position: absolute; right: 0; top: 40px; z-index: 20; width: 300px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  max-height: calc(100vh - 80px); overflow-y: auto; }
.set { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.seg { display: flex; gap: 0; }
.seg button { flex: 1; border-radius: 0; padding: 6px 8px; font-size: 13px; }
.seg button:first-child { border-radius: 8px 0 0 8px; } .seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.on { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }
.hint { color: var(--muted); font-size: 12px; margin: 0; }
.rules { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); align-items: center; }
.rules .seg button { padding: 4px 10px; }
.rules .seg.ro button { cursor: default; }
.modehead { flex-basis: 100%; color: var(--text); font-weight: 600; margin-top: 4px; }
.modefield { display: flex; gap: 6px; align-items: center; }
.modetoggles { flex-wrap: wrap; }
@media (max-width: 600px) { .modefield { flex: 1 1 140px; justify-content: space-between; } .modefield select { min-width: 0; max-width: 55%; } .modetoggles { flex: 1 1 100%; } }
.clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
        image-rendering: pixelated; z-index: 5; display: none; }   /* full game screen, letterboxed */
.log .chg { font-size: 12px; font-weight: 700; margin-left: 6px; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.log .chg.hurt { color: #ffb3ad; background: #4a2626; } .log .chg.heal { color: #8ff0b0; background: #1f4030; }

/* lobby */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.slot h3 { margin: 0 0 8px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--panel2); color: var(--muted); }
.tag.ready { background: color-mix(in srgb, var(--good) 25%, transparent); color: var(--good); }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mon { background: var(--panel2); border-radius: 8px; padding: 4px 6px; text-align: center; font-size: 12px; }
.mon img { width: 56px; height: 56px; image-rendering: pixelated; display: block; margin: 0 auto; }

/* battle */
.battle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 820px) { .battle { grid-template-columns: 1fr; } }
.fieldbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; min-height: 26px; font-size: 12.5px; }
.fchip { padding: 3px 9px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); white-space: nowrap; }
.fchip.turn { color: var(--muted); }
.fchip.weather { border-color: #c9a227; color: #f2d36b; }
.fchip.fieldfx { border-color: #8d6bd6; color: #c7b2ff; }
.fchip.mine { border-color: #2f7d58; color: #8ff0b0; }
.fchip.foe { border-color: #7d2f2f; color: #ffb3ad; }
.knownpop { position: fixed; z-index: 40; width: 280px; padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.knownpop h4 { margin: 0 0 6px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.knownpop .kmoves { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.knownpop .kmove { padding: 1px 7px; border-radius: 4px; border-left: 4px solid var(--type, var(--line)); background: var(--panel2); }
.knownpop .muted { color: var(--muted); }
.box.foe, #foeBalls .ball { cursor: pointer; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.keys kbd { background: var(--panel2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; font-family: inherit; }
.field { position: relative; height: 330px; border-radius: var(--radius); overflow: hidden;
         background: linear-gradient(#b9e3f5 0%, #d8f0d0 55%, #a9d48c 100%); border: 1px solid var(--line); }
/* real battle backdrop (view.background, from the ROM): over the gradient, which stays the fallback; its own platforms replace the pads */
.field.hasbg { background-size: 100% 100%, auto; background-repeat: no-repeat; image-rendering: pixelated; }
.field.hasbg .pad { display: none; }
.fieldintro { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 6%;
              background: rgba(10,14,24,.62); cursor: pointer; animation: introfade .35s ease; }
.fieldintro.out { opacity: 0; transition: opacity .3s; pointer-events: none; }
.fieldintro .tr { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; max-width: 38%; color: #fff; font-weight: 700; text-align: center; text-shadow: 0 2px 0 #000; }
.fieldintro .tr.a { animation: introL .6s cubic-bezier(.2,.8,.2,1) both; }
.fieldintro .tr.b { animation: introR .6s cubic-bezier(.2,.8,.2,1) both; }
.fieldintro .av { width: 64px; height: 128px; background-size: auto 100%; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.fieldintro .nm { font-size: 18px; overflow-wrap: anywhere; }
.fieldintro .vs { font-size: 34px; font-weight: 900; color: #ffd84a; text-shadow: 0 3px 0 #000; animation: introvs .5s .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes introL { from { transform: translateX(-140%); } to { transform: none; } }
@keyframes introR { from { transform: translateX(140%); } to { transform: none; } }
@keyframes introvs { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes introfade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .fieldintro .av { width: 48px; height: 96px; } .fieldintro .nm { font-size: 15px; } .fieldintro .vs { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .fieldintro, .fieldintro .tr, .fieldintro .vs { animation: none; } }
.pad { position: absolute; border-radius: 50%; background: #8cc06a; box-shadow: inset 0 -6px 0 #79ad59; }
.pad.foe { width: 190px; height: 46px; right: 40px; top: 128px; }
.pad.me { width: 230px; height: 56px; left: 20px; bottom: 26px; }
.sprite { position: absolute; image-rendering: pixelated; transition: opacity .4s; }
.sprite.foe { width: 160px; height: 160px; right: 55px; top: 10px; }
.sprite.me { width: 200px; height: 200px; left: 35px; bottom: 22px; }
.sprite.fainted { opacity: 0; }
.box { position: absolute; background: rgba(250,250,240,.95); color: #1d2128; border-radius: 10px;
       padding: 8px 12px; min-width: 230px; max-width: 260px; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.box.foe { left: 16px; top: 18px; }
.box.me { right: 16px; bottom: 34px; }
.box .name { font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
.box .sub { font-size: 12px; color: #55606f; display: flex; gap: 6px; align-items: center; min-height: 18px; }
.hpbar { height: 8px; background: #3d4552; border-radius: 99px; overflow: hidden; margin: 5px 0 2px; }
.hpbar > div { height: 100%; background: var(--good); transition: width .8s ease, background-color .8s; }
.hpnum { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.status { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; color: white; }
.status.PSN, .status.TOX { background: #a040a0; } .status.BRN { background: #e0572b; }
.status.PAR { background: #c9a400; } .status.SLP { background: #7a7f88; } .status.FRZ { background: #3fa6d4; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.chip { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; color: white; }
.chip.up { background: var(--up); } .chip.down { background: var(--down); }
.chip.mod { background: #3f6fb5; }
.boosts { margin: 6px 0; font-size: 12px; } .boosts .chips { margin-top: 2px; } .boostline { margin-top: 4px; font-size: 12px; } .boostline .boosts { display: inline; margin: 0; } .boostline .chips { display: inline-flex; }
.chip.up.s1 { background: var(--up1); color: #10301c; } .chip.up.s2 { background: var(--up2); } .chip.up.s3 { background: var(--up3); }
.chip.down.s1 { background: var(--down1); color: #3a1a08; } .chip.down.s2 { background: var(--down2); } .chip.down.s3 { background: var(--down3); }
.balls { position: absolute; display: flex; gap: 4px; }
.balls.foe { left: 20px; top: 104px; } .balls.me { right: 20px; bottom: 12px; }
/* doubles: two sprites + two compact healthboxes per side (battlers 2/3 use the .slot2 elements) */
.field.double .pad.foe { width: 290px; right: 10px; }
.field.double .pad.me { width: 340px; left: 4px; }
.field.double .sprite.foe { width: 128px; height: 128px; right: 18px; top: 26px; }
.field.double .sprite.foe.slot2 { right: 150px; top: 14px; }
.field.double .sprite.me { width: 168px; height: 168px; left: 4px; bottom: 22px; }
.field.double .sprite.me.slot2 { left: 150px; bottom: 14px; }
.field.double .box { min-width: 186px; max-width: 214px; padding: 4px 10px; font-size: 13px; }
.field.double .box .hpbar { margin: 3px 0 1px; }
.field.double .box .sub { min-height: 15px; font-size: 11px; }
.field.double .box .chips { margin-top: 2px; }
.field.double .box.foe { top: 8px; }
.field.double .box.foe.slot2 { top: 76px; left: 28px; }
.field.double .box.me { bottom: 92px; right: 28px; }
.field.double .box.me.slot2 { bottom: 24px; right: 12px; }
.field.double .box.down { opacity: .45; }
.field.double .balls.foe { top: 146px; }
.field.double .balls.me { bottom: 6px; right: 230px; }
@media (max-width: 600px) {
  .field.double .sprite.foe { width: 96px; height: 96px; } .field.double .sprite.foe.slot2 { right: 108px; }
  .field.double .sprite.me { width: 124px; height: 124px; } .field.double .sprite.me.slot2 { left: 108px; }
  .field.double .box { min-width: 150px; max-width: 172px; }
  .field.double .balls.me { right: auto; left: 12px; }
}
.effs { display: inline-flex; gap: 3px; }
.eff.mini { padding: 0 4px; }
.targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.tgt { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 10px; }
.tgt img { width: 64px; height: 64px; image-rendering: pixelated; }
.tgt.foe { border-left: 5px solid #c94c43; } .tgt.ally { border-left: 5px solid #2f7d58; }
.tgt .muted { color: var(--muted); font-size: 12px; }
.ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 22%, #333 23% 34%, transparent 35%), linear-gradient(#e5564e 50%, #f4f4f4 50%); border: 1px solid #333; }
.ball.out { filter: grayscale(1) brightness(.6); }
.ball.sick { background: radial-gradient(circle at 50% 50%, #f1dede 22%, #4a2a2a 23% 34%, transparent 35%), linear-gradient(#a85a5a 50%, #e3c4c4 50%); border-color: #5a2f2f; }

/* effects */
.fx { position: absolute; inset: 0; pointer-events: none; }
.dmg { position: absolute; font-weight: 800; font-size: 22px; color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,.55);
       text-shadow: 0 2px 0 rgba(0,0,0,.35); animation: dmg 1.3s ease-out forwards; transform: translate(-50%, -50%); }
.dmg.hurt { color: #ff5a4e; } .dmg.heal { color: #59e08f; }
@keyframes dmg { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -36px; } }
.orb { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; }
.glow { position: absolute; border-radius: 50%; animation: glow 1.1s ease-out forwards; }
@keyframes glow { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
.hit { animation: hit .7s ease; }
@keyframes hit { 0%, 100% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-8px); filter: brightness(2.2); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); filter: brightness(1.8); } 80% { transform: translateX(4px); } }

.log { height: 330px; overflow-y: auto; padding: 12px 14px; font-size: 14px; }
.log p { margin: 0 0 6px; }
.log p.new { animation: fade .35s ease; }
.log p.up { color: var(--up); } .log p.down { color: var(--down); }
.log p.big { font-weight: 600; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

.controls { margin-top: 16px; }
.prompt { margin: 0 0 10px; color: var(--muted); }
.moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.move { text-align: left; padding: 10px 12px; border-left: 6px solid var(--type, var(--line)); position: relative; }
.move .pv { display: none; font-size: 12px; margin-top: 4px; opacity: .9; }
.move.showpv .pv { display: block; }
.pvnote { font-size: 11px; opacity: .65; margin: 6px 0 0; }
.move .mn { font-weight: 600; display: flex; gap: 6px; align-items: center; }
.mus { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; display: grid; gap: 4px; }
.mu { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.mu .muted { width: 64px; }
.box .ind { height: 18px; image-rendering: pixelated; margin: 0 auto 0 -4px; align-self: center; }   /* right after the name */
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.extras h3 { margin: 0 0 8px; font-size: 15px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.rlist .it .grow { flex: 1; min-width: 0; }
.rlist .it button { margin-left: auto; flex-shrink: 0; }
.rtag { display: inline-block; font-size: 11px; padding: 0 6px; margin-right: 4px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); }
.rlist .it, .board .it { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.board .it.me { color: var(--accent); }
.board .rank { width: 22px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.stats table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stats th, .stats td { text-align: right; padding: 3px 4px; border-top: 1px solid var(--line); }
.stats th:first-child, .stats td:first-child { text-align: left; }
.stats .mvp { color: var(--accent); font-weight: 700; }
.mon.pickable { cursor: pointer; border-radius: 8px; }
.mon.pickable:hover { background: var(--panel2); }
.mon.picked { outline: 2px solid var(--accent); border-radius: 8px; position: relative; }
.pickno { position: absolute; top: 2px; left: 4px; background: var(--accent); color: #000; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.shiny { color: var(--accent); margin-right: 3px; }
.fieldcol { min-width: 0; }
.caption { height: 46px; margin: 0 0 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }   /* reserved: the field never moves */
.caption .cap { max-width: 100%; box-sizing: border-box; padding: 6px 16px; border-radius: 99px; background: #141a24; color: var(--accent);
                border: 2px solid var(--accent); font-size: 18px; font-weight: 800; line-height: 1.2; text-align: center;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 14px rgba(0,0,0,.4);
                animation: capin .28s ease-out both; }
.caption .cap.out { animation: capout .25s ease-in both; }
@keyframes capin { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes capout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
@media (min-width: 821px) { .fieldcol ~ .log { margin-top: 54px; height: 330px; } }
@media (max-width: 520px) { .caption .cap { font-size: 15px; padding: 5px 12px; } }
#log p.cmt { color: var(--accent); font-style: italic; font-size: 13px; margin-top: -2px; }
/* battle log line types: a colour and a small icon each (legend in Settings) */
.lt.up1 { --lc: var(--up1); --li: "▲"; } .lt.up2 { --lc: var(--up2); --li: "▲▲"; } .lt.up3 { --lc: var(--up3); --li: "▲▲▲"; }
.lt.down1 { --lc: var(--down1); --li: "▼"; } .lt.down2 { --lc: var(--down2); --li: "▼▼"; } .lt.down3 { --lc: var(--down3); --li: "▼▼▼"; }
.lt.heal { --lc: var(--lt-heal); --li: "✚"; }
.lt.st-psn { --lc: var(--lt-psn); --li: "☠"; } .lt.st-brn { --lc: var(--lt-brn); --li: "🔥"; } .lt.st-par { --lc: var(--lt-par); --li: "⚡"; }
.lt.st-slp { --lc: var(--lt-slp); --li: "💤"; } .lt.st-frz { --lc: var(--lt-frz); --li: "❄"; } .lt.st-cnf { --lc: var(--lt-cnf); --li: "❓"; }
.lt.weather { --lc: var(--lt-weather); --li: "☁"; }
.lt.se { --lc: var(--lt-se); --li: "✸"; } .lt.nve { --lc: var(--lt-nve); --li: "◌"; } .lt.immune { --lc: var(--lt-immune); --li: "⊘"; }
.lt.crit { --lc: var(--lt-crit); --li: "✦"; } .lt.faint { --lc: var(--lt-faint); --li: "✖"; }
.lt.switch { --lc: var(--lt-switch); --li: "⇄"; } .lt.mega { --lc: var(--lt-mega); --li: "◆"; }
.lt.cmt { --lc: var(--accent); }   /* commentary lines carry their own 🎙 */
.log p.lt, .loglegend .lt { color: var(--lc); }
.log p.lt::before, .loglegend .lt::before { content: var(--li); display: inline-block; min-width: 1.3em; margin-right: 4px; font-size: 11px; font-style: normal; opacity: .9; }
.log p.lt.crit, .log p.lt.se { font-weight: 600; }
.loglegend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12px; }
.loglegend .lt.cmt { font-style: italic; } .loglegend .lt.cmt::before { display: none; }
/* replay player */
.rpbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.rpbar .rpbtn { min-width: 38px; padding: 6px 8px; font-size: 15px; line-height: 1; }
.rpbar input[type=range] { flex: 1 1 160px; min-width: 120px; accent-color: var(--accent); }
.rpbar .rppos { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; min-width: 72px; text-align: center; }
.rpbar .seg button { padding: 4px 7px; font-size: 12px; }
.bwrap { overflow-x: auto; padding: 4px 0 8px; }
.bdiag { position: relative; }
.bdiag svg { position: absolute; inset: 0; pointer-events: none; fill: none; stroke: var(--muted); stroke-width: 2; }
.bsec { position: absolute; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bnum { position: absolute; width: 20px; text-align: center; font-size: 11px; color: var(--muted); background: var(--panel); z-index: 1; }   /* sits on its line, like a bracket sheet */
.bx { position: absolute; width: 200px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); cursor: pointer; overflow: hidden; }
.bx:hover { border-color: var(--muted); }
.bx .r { display: flex; height: 22px; align-items: center; font-size: 12px; }
.bx .r + .r { border-top: 1px solid var(--line); }
.bx .sd { width: 22px; height: 100%; display: grid; place-items: center; font-size: 11px; color: var(--muted);
  background: color-mix(in srgb, var(--line) 70%, transparent); }
.bx .nm { flex: 1; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bx .nm.ph { font-style: italic; color: var(--muted); }
.bx .sc { width: 22px; text-align: center; font-weight: 700; }
.bx .r.win { color: var(--good); font-weight: 700; }
.bx.mine { border-color: var(--accent); }
.bx.sel { box-shadow: 0 0 0 2px var(--text); }
.bx.active, .bx.assigned { border-color: var(--good); }
.bx.disputed, .bx.void { border-color: var(--bad); }
.bx.bye, .bx.ghost { opacity: .5; cursor: default; }
.mpanel { margin-top: 10px; }
.move .locked { font-size: 12px; color: var(--bad, #e57373); margin-top: 4px; }
.move .md { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.move .sig { font-size: 11px; font-weight: 700; color: var(--sig); }
.cat { font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 4px; color: #fff; text-transform: uppercase; letter-spacing: .3px; }
.cat.Physical { background: #d4622a; } .cat.Special { background: #3f6fd1; } .cat.Status { background: #6b7280; }
.eff { font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 4px; }
.eff.x0 { background: #3b3f47; color: #c9ced6; } .eff.xlow { background: #5a3a3a; color: #ffb3ad; }
.eff.x1 { background: transparent; color: var(--muted); font-weight: 600; } .eff.xhigh { background: #2f5a3d; color: #8ff0b0; }
.move .sigtext { font-size: 11.5px; color: color-mix(in srgb, var(--sig) 70%, var(--text)); margin-top: 3px; line-height: 1.3; }
.move .desc { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.move.signature { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig) 60%, transparent); }
.actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.mega { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; margin: 0; color: var(--text); font-size: 15px; }
.mega.on { border-color: var(--sig); background: color-mix(in srgb, var(--sig) 25%, var(--panel2)); }
.partygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.pm { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; }
.pm img { width: 48px; height: 48px; image-rendering: pixelated; }
.pm .hpbar { width: 90px; }
.pm.ally { opacity: .45; filter: grayscale(.6); cursor: default; }      /* 2v2: the ally's Pokémon */
.banner { text-align: center; padding: 18px; font-size: 22px; font-weight: 700; }
.banner.won { color: var(--good); } .banner.lost { color: var(--bad); } .banner.draw, .banner.spec { color: var(--warn); }

/* ---- app shell: nav bar, tabs of the room list, battle header ---- */
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav button { padding: 5px 12px; font-size: 13.5px; background: none; border-color: transparent; color: var(--muted); }
.nav button:hover:not(:disabled) { color: var(--text); border-color: var(--line); }
.nav button.on { color: var(--text); background: var(--panel2); border-color: var(--accent); }
.tabhide { display: none !important; }
#roomlist > [data-tab] > .card + .card { margin-top: 16px; }
#roomlist > .extras { margin-top: 16px; }          /* under the rooms on Play, at the top on Replays */
.lobbyworld:not(.hidden) + .lobbyintro { display: none; }
.battlehead { margin: 0 0 10px; align-items: center; }
/* summary: descriptions and the base stats view */
.muted { color: var(--muted); }
.kv .desc, .eform .desc { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.basestats { display: grid; grid-template-columns: 70px 92px 1fr 52px 52px; gap: 6px 8px; align-items: center; font-size: 14px; }
.basestats .hd { color: var(--muted); font-size: 11px; text-align: right; }
.basestats .bar { height: 10px; background: var(--panel2); border-radius: 99px; overflow: hidden; } .basestats .bar > div { height: 100%; }
.basestats .rng { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.basestats .up { color: var(--up); font-weight: 400; } .basestats .down { color: var(--down); font-weight: 400; }
/* Pokemon editor */
.editcard { width: min(680px, 100%); }
.editcard h3 { margin: 12px 0 6px; font-size: 15px; }
.emoves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.emove { background: var(--panel2); border: 2px solid transparent; border-left: 5px solid var(--type); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.emove.on { border-color: var(--accent); border-left-color: var(--type); }
.epick { margin-top: 8px; }
.epick input { width: 100%; }
.elist { max-height: 260px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.erow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--panel2); border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.erow:hover { outline: 1px solid var(--accent); } .erow.taken { opacity: .4; cursor: default; }
.erow .how { color: var(--muted); font-size: 11px; } .erow .grow { flex: 1; }
.eform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 12px; font-size: 13px; }
.eform label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.eform select { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
@media (max-width: 600px) { .emoves, .eform { grid-template-columns: 1fr; } }
.tile .ed { position: absolute; left: 4px; top: 2px; font-size: 11px; color: var(--accent); }
/* tournament roster picker */
.rostergrid { margin: 10px 0; }
.rtile { cursor: pointer; min-height: 70px; }
.rtile.role-main { border-color: var(--good); } .rtile.role-sub { border-color: var(--sig); }
.rtile .rrole { position: absolute; right: 3px; top: 2px; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 6px; background: var(--good); color: #1a1a1a; }
.rtile.role-sub .rrole { background: var(--sig); }
@media (max-width: 600px) {
  header { padding: 10px 16px; gap: 8px; }
  .nav { order: 1; width: 100%; }
  .nav button { flex: 1; padding: 6px 4px; }
}
/* ---- tournaments: list cards and the event page (#tournament/<id>) ---- */
button.big { padding: 10px 18px; font-size: 15px; font-weight: 700; }
.tpill { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; white-space: nowrap;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.tpill.checkin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tpill.in_progress { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 16%, transparent); }
.tpill.paused { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.tpill.completed { color: var(--sig); border-color: color-mix(in srgb, var(--sig) 45%, transparent); background: color-mix(in srgb, var(--sig) 12%, transparent); }
.tcard { cursor: pointer; border: 1px solid var(--line); transition: border-color .15s; }
.tcard:hover { border-color: var(--muted); }
.tcard.in_progress, .tcard.checkin { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tcard h3 .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcount { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 13px; }
.tcount b { font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }
.tchamp { color: var(--accent); font-weight: 700; font-size: 13px; }
.tchamp.big { font-size: 17px; margin-top: 10px; }
.tpage { display: flex; flex-direction: column; gap: 16px; }
.tpage > .card { margin: 0; }
.tpage h3 { margin: 0 0 8px; font-size: 16px; }
.tback { align-items: center; }
.thead h2 { margin: 0; font-size: 24px; }
.thead .row { align-items: center; gap: 10px; flex-wrap: wrap; }
.tfmt { margin: 8px 0 4px; font-size: 14px; }
.tyou { border-left: 4px solid var(--line); }
.tyou.live { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.tyou p { margin: 4px 0; font-size: 14px; }
.tmatch { margin-top: 4px; }
.tvs { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.tvs .tme { color: var(--accent); } .tvs .muted { font-size: 14px; font-weight: 400; }
.tmatch .hint + .actions { margin-top: 8px; }
.tmatch > .hint:last-child { margin-top: 10px; }
.tpool { margin-top: 10px; font-size: 13px; } .tpool summary { cursor: pointer; color: var(--muted); }
.tbracket .row { align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tbracket .bwrap { margin: 0 -4px; padding: 4px 4px 10px; }
.tentrants { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.tent { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; font-size: 13px; min-width: 0; }
.tent .sd { width: 22px; text-align: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tent .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tent .wl { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.tent .tag { font-size: 11px; padding: 1px 6px; }
.tent.me { border-color: var(--accent); } .tent.champ .nm { color: var(--accent); }
.taudit { white-space: pre-wrap; font-size: 12px; max-height: 320px; overflow-y: auto; }
.tformcard { max-width: 560px; }
@media (max-width: 600px) { .thead h2 { font-size: 20px; } .tvs { font-size: 17px; } .tentrants { grid-template-columns: 1fr 1fr; } }
.tformcard .form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.tformcard .form input, .tformcard .form select { width: 100%; }

/* usage stats, trainer cards (a trainer sheet's first frame is 16x32) */
.usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.usage { gap: 18px; }
.usub { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.utable { display: flex; flex-direction: column; min-width: 0; }
.urow { display: grid; align-items: center; gap: 4px 10px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 14px; }
.urow.umon { grid-template-columns: 36px minmax(0, 1fr) 42px 104px 36px; }
.urow.umove { grid-template-columns: 62px minmax(0, 1fr) 42px; }
.uhead { border-top: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.unm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.uhead .unm { font-weight: 400; }
.un { text-align: right; font-variant-numeric: tabular-nums; }
.usp { width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; }
.usp img { max-width: 36px; max-height: 32px; image-rendering: pixelated; }
.uwin { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.uwin .un { width: 36px; flex: none; }
.ubar { flex: 1; height: 6px; border-radius: 4px; background: var(--panel2); overflow: hidden; min-width: 30px; }
.ubar i { display: block; height: 100%; background: var(--accent); }
.utype { background: var(--type); color: #1a1a1a; border-radius: 6px; font-size: 11px; font-weight: 700; text-align: center; padding: 2px 0; min-height: 16px; }
@media (max-width: 600px) { .urow.umon { grid-template-columns: 30px minmax(0, 1fr) 34px 88px 28px; gap: 4px 6px; font-size: 13px; }
  .usp, .usp img { width: 30px; max-width: 30px; } .urow.umove { grid-template-columns: 58px minmax(0, 1fr) 36px; } }
.tcard { display: flex; gap: 10px; align-items: center; }
.tcard.big { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; }
.tavatar { display: inline-block; width: 16px; height: 32px; overflow: hidden; position: relative; flex: none; vertical-align: middle; }
.tavatar img { position: absolute; left: 0; top: 0; height: 32px; width: auto; max-width: none; image-rendering: pixelated; }
.cardtip { position: fixed; z-index: 60; display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; pointer-events: none; width: 250px; }

/* battle the CPU / Battle Tower (v2.13.0) */
.cpubar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.tag.tower { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.tag.tower.bronze { background: #8a5a2b; color: #fff; }
.tag.tower.silver { background: #8d97a3; color: #111; }
.tag.tower.gold { background: #d4a72c; color: #111; }

/* ---- phones (v2.12.0): everything below only applies at <= 600 px; desktop is unchanged ---- */
.logtoggle, .dpad, .mtabs, .sheetback { display: none; }
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  body { font-size: 14.5px; }
  main { padding: 12px 10px 28px; }
  header h1 { font-size: 15px; } .ver { display: none; }
  header { padding: 8px 10px; gap: 6px; }
  header .grow { display: none; }
  .settings { position: fixed; left: 8px; right: 8px; top: 52px; width: auto; max-height: calc(100vh - 64px); }
  .settings-wrap { position: static; }
  .toasts { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  button, input, select { min-height: 40px; }
  button.small { min-height: 34px; }
  .card { padding: 12px; }
  .row { gap: 8px; }
  .row > * { max-width: 100%; }
  input[type=file] { max-width: 100%; }
  .modal { padding: 8px; align-items: flex-end; }
  .sumcard, .profcard, .editcard { max-height: 94vh; }
  .sumhead img { width: 72px; height: 72px; }
  .kv { grid-template-columns: 96px 1fr; }
  .basestats { grid-template-columns: 52px 66px 1fr 40px 40px; gap: 5px 6px; font-size: 13px; }
  .stat { grid-template-columns: 52px minmax(40px, auto) 1fr 52px; font-size: 13px; }
  .qr img { width: 150px; height: 150px; }
  .roomgrid, .stats, .usage { grid-template-columns: 1fr; }
  .extras { grid-template-columns: 1fr; }
  .slots { grid-template-columns: 1fr; }
  .tpage, #tournamentCard { width: 100%; min-width: 0; }
  .bwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .stats table { font-size: 11px; display: block; overflow-x: auto; }
  .rpbar input[type=range] { flex-basis: 100%; }

  /* battle: field on top, log folded under it, controls last */
  .battlehead { margin-bottom: 6px; }
  .fieldbar { margin-bottom: 6px; }
  .field { height: 290px; }
  .pad.foe { width: 130px; height: 32px; right: 22px; top: 112px; }
  .pad.me { width: 170px; height: 40px; left: 8px; bottom: 22px; }
  .sprite.foe { width: 112px; height: 112px; right: 30px; top: 40px; }
  .sprite.me { width: 140px; height: 140px; left: 20px; bottom: 26px; }
  .box { min-width: 0; max-width: none; width: 168px; padding: 5px 8px; font-size: 13px; }
  .box.foe { left: 6px; top: 6px; }
  .box.me { right: 6px; bottom: 28px; }
  .balls.foe { left: 10px; top: 80px; } .balls.me { right: 10px; bottom: 10px; }
  .field.double .box { width: 150px; }
  .field.double .box.foe.slot2 { left: 6px; top: 62px; }
  .field.double .box.me { right: 6px; bottom: 82px; } .field.double .box.me.slot2 { right: 6px; bottom: 20px; }
  .caption { height: 38px; margin-bottom: 6px; }
  .battle { gap: 8px; }
  .logtoggle { display: block; width: 100%; min-height: 34px; }
  .battle .log { display: none; height: 200px; margin-top: 0; }
  #battle.logopen .log { display: block; }
  .controls { margin-top: 10px; padding: 10px; }
  .moves { gap: 8px; }
  .move { min-height: 76px; padding: 8px 10px; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .move .md { flex-wrap: wrap; gap: 2px 6px; font-size: 11.5px; }
  .move .desc, .move .sigtext { display: none; }
  .move.showpv .desc, .move.showpv .sigtext { display: block; }
  .move.showpv { position: relative; z-index: 3; box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(0,0,0,.5); }
  .actions .mega, .actions button { min-height: 42px; }
  .targets { grid-template-columns: 1fr 1fr; }

  /* switch / Team views: a bottom sheet over the page */
  .sheetback { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.5); }
  .sheetback.hidden { display: none !important; }
  #controls.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; max-height: 72vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px rgba(0,0,0,.55); }
  #controls.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -4px auto 10px; }
  .partygrid { grid-template-columns: 1fr 1fr; }
  .pm .hpbar { width: 70px; }

  /* team builder: Team / Boxes / Items tabs */
  .mtabs { display: flex; margin: 8px 0; }
  .mtabs button { flex: 1; border-radius: 0; }
  .mtabs button:first-child { border-radius: 8px 0 0 8px; } .mtabs button:last-child { border-radius: 0 8px 8px 0; }
  .mtabs button.on { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }
  .builder[data-mtab] .bgrid { display: block; }
  .builder[data-mtab] .bgrid > div:last-child { display: none; }
  .builder[data-mtab=boxes] .bgrid > div:first-child { display: none; }
  .builder[data-mtab=boxes] .bgrid > div:last-child { display: block; }
  .builder[data-mtab=items] .teamslots,
  .builder[data-mtab=items] .teamtools, .builder[data-mtab=items] h3 { display: none; }
  .builder[data-mtab=items] .selpanel { margin-top: 0; }
  .teamslots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .boxgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .selpanel select { max-width: 100%; }
  .selpanel { flex-wrap: wrap; } .selpanel button.small { min-height: 40px; }
  /* editor on phones: roomy touch targets, a taller move list */
  .emove { padding: 10px 12px; } .erow { padding: 10px 10px; font-size: 13px; }
  .elist { max-height: 50vh; -webkit-overflow-scrolling: touch; }
  .eform select { min-height: 44px; font-size: 16px; }
  .editcard .actions { position: sticky; bottom: 0; background: var(--panel); padding: 8px 0 4px; margin-top: 12px; border-top: 1px solid var(--line); }

  /* lobby world */
  #lobbyCanvas { max-height: 50vh; touch-action: manipulation; }
  .dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-areas: ". u ." "l . r" ". d ."; gap: 6px; justify-content: center; margin: 10px 0; }
  .dpad button { width: 56px; height: 56px; padding: 0; font-size: 20px; touch-action: none; }
  .dpad [data-k=arrowup] { grid-area: u; } .dpad [data-k=arrowleft] { grid-area: l; }
  .dpad [data-k=arrowright] { grid-area: r; } .dpad [data-k=arrowdown] { grid-area: d; }
}

/* v3.0.0: Swiss / round-robin standings and rounds, weekly events */
.tstand { width: 100%; border-collapse: collapse; font-size: 14px; }
.tstand th, .tstand td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--line, #2a3342); }
.tstand th:nth-child(2), .tstand td:nth-child(2) { text-align: left; }
.tstand tr.me td { color: var(--accent, #7fd1ff); font-weight: 600; }
.tstand tr.champ td:nth-child(2)::before { content: "🏆 "; }
.troundlist { display: flex; gap: 14px; overflow-x: auto; padding-top: 8px; }
.tround { min-width: 210px; }
.tround.cur h4 { color: var(--accent, #7fd1ff); }
.tsched { padding: 2px 0; }
.tschedform .form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* phones: every popup is a full-screen sheet with its own scroll and a sticky header */
body.modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .modal { padding: 0; align-items: stretch; justify-content: stretch; background: var(--bg, #111); }
  .modal > .card { width: 100% !important; max-width: none; height: 100dvh; max-height: none !important; border: 0; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 max(12px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .modal > .card > :first-child { position: sticky; top: 0; z-index: 5; background: var(--panel); margin: 0 -12px 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 8px;
    border-bottom: 1px solid var(--line); }
}
.uhead .un { white-space: nowrap; }

.banner.cancelled { color: var(--muted); }

.lobbyerr:not(:empty) { background: color-mix(in srgb, var(--bad) 14%, transparent); border: 1px solid var(--bad); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; font-weight: 600; }
.lobbyerr:empty { display: none; }
.mon.illegal, .tile.illegal { outline: 2px solid var(--bad); border-radius: 8px; background: color-mix(in srgb, var(--bad) 14%, var(--panel2)); }
.illegalnote { color: var(--bad); font-size: 12px; margin: 6px 0 0; }