

.dpage, .mdpage {
  --fx-border: #FC4328;
  --fx-head:   #FC927F;
  --fx-body:   #333333;
  --fx-hair:   #A2A9B1;
  --fx-link:   #0073E6;
  padding: 4px 14px 40px;
  color: var(--fx-body);
}

.clnk { color: #333; text-decoration: none; cursor: pointer; }
a.clnk:hover { color: #000; text-decoration: underline; }
span.lnk.nolink, span.lnk.nolink:hover,
span.clnk.nolink, span.clnk.nolink:hover {
  color: #333; cursor: default; text-decoration: none;
}

.fxsec { margin-top: 22px; scroll-margin-top: 52px; }
.dbody > .fxsec:first-child { margin-top: 0; }
.fxsec > h2 {
  font-size: 22px; font-weight: 700; color: var(--fx-body);
  margin: 0 0 10px; padding: 0 0 4px 8px; border-bottom: 1px solid var(--fx-hair);
}

.frm {
  border: 3px solid var(--fx-border); background: var(--fx-head);
  border-radius: 11px; padding: 3px; display: inline-block; vertical-align: top;
}
.frm > .h {
  color: #333; font-weight: 700; text-align: center;
  font-size: 15px; padding: 5px 8px; line-height: 1;
}
.frm > .b {
  background: #fff; border-radius: 8px; padding: 5px 9px;
  font-size: 15px; line-height: 1.85;
}

.introrow { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.introtext { font-size: 15px; line-height: 1.95; padding-right: 8px; white-space: pre-wrap; }

.introleft { min-width: 0; }

.introleft > .introtext:not(:only-child) { min-height: 216px; }
.introleft > .fxsec { margin-top: 40px; }
.mddesc { display: flex; flex-direction: column; gap: 10px; }   
.mddesc .dp { margin: 0; font-size: 15px; line-height: 1.95; }
.mddesc .dp b { font-weight: 700; color: #222; }

table.fxt.mdt { width: 100%; table-layout: fixed; font-size: 14px; }
table.fxt.mdt th { padding: 8px 10px; height: auto; line-height: 1.5; }
table.fxt.mdt td { padding: 9px 10px; height: auto; line-height: 1.6; word-break: break-word; }

.fxside { display: flex; flex-direction: column; gap: 5px;
  background: var(--fx-border); border-radius: 10px; padding: 2px; }
.fxrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: stretch; }
.cell { background: var(--fx-head); border-radius: 10px; padding: 2px;
  display: flex; flex-direction: column; }
.cell > .ct { font-weight: 700; font-size: 14px; color: #333; padding: 4px; line-height: 1; text-align: center; }
.cell > .cv { background: #fff; border-radius: 9px; padding: 3px 5px; font-size: 14px;
  width: 100%; box-sizing: border-box; flex: 1; text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  align-content: center; gap: 4px; }

.cell .clnk, .cell .csep, .cell .abtx { white-space: nowrap; }
.cell .csep, .cell .abtx { color: #333; }

.cell .sm { font-size: 12px; }
.gcell { background: #F5F5F5; border-radius: 10px; padding: 5px 6px; text-align: center; }
.namebox .cn { font-size: 22px; font-weight: 700; line-height: 1.25; }

.namebox .en { font-size: 15px; font-weight: 700; color: #444;
  overflow-wrap: anywhere; word-break: break-word; }
.dexbox { display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; }
.artbox { background: #F5F5F5; border-radius: 10px; padding: 5px; position: relative; }

.m3dsw { position: absolute; top: 6px; right: 6px; z-index: 2;
  border: 1px solid var(--fx-border); background: rgba(255,255,255,.9); color: #333;
  border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 700;
  line-height: 18px; cursor: pointer; }
.m3dsw:hover { background: #fff; border-color: var(--fx-link); }
.m3dsw.on { background: var(--fx-border); color: #fff; }

.m3dbox { flex: 1; height: 210px; min-width: 0; border-radius: 6px; background: transparent;
  overflow: hidden; position: relative; touch-action: none; }
.m3dbox canvas { display: block; }
.m3dtip { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; color: var(--ink-3); text-align: center; }
.m3dtip.err { color: var(--danger); }
.m3dtip span { font-size: 11px; color: var(--ink-3); word-break: break-all; padding: 0 10px; }

.m3dzoom { position: absolute; right: 5px; bottom: 5px; z-index: 2;
  border: 1px solid var(--fx-border); background: rgba(255,255,255,.88); color: #333;
  border-radius: 6px; width: 26px; height: 26px; line-height: 1; font-size: 15px;
  cursor: pointer; padding: 0; }
.m3dzoom:hover { background: #fff; border-color: var(--fx-link); }

.m3dov { position: fixed; inset: 0; z-index: 200; background: rgba(24, 28, 36, .62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(2px); }
.m3dovin { background: var(--surface); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35); display: flex; flex-direction: column;
  width: min(880px, 100%); max-height: 100%; }
.m3dovhd { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--fx-hair); }
.m3dovhd b { font-size: 17px; color: var(--ink); }
.m3dovpal { font-size: 13px; color: var(--ink-3); }
.m3dovhd .sp1 { flex: 1; }
.m3dovx { border: 1px solid var(--line-ctl); background: #fff; color: #444;
  border-radius: 7px; width: 30px; height: 30px; font-size: 15px; cursor: pointer; padding: 0; }
.m3dovx:hover { background: var(--sel); }

.m3dovbox { flex: 1 1 auto; height: min(62vh, 560px); min-height: 150px;
  position: relative; background: var(--bg); touch-action: none; }
.m3dovft { flex: 0 0 auto; max-height: 45vh; overflow-y: auto;
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--fx-hair); }

.m3dovft .m3danim { flex: 1 1 100%; }
.m3dhint { font-size: 12px; color: var(--ink-3); margin-left: auto; }

body.m3dlock { overflow: hidden; }

.m3danim { display: flex; flex-direction: column; gap: 5px; align-items: center; margin-top: 5px; }
.m3drow { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.m3danim button { font: inherit; font-size: 12px; padding: 2px 10px; cursor: pointer;
  border: 1px solid var(--fx-border); background: #fff; color: #333; border-radius: 6px; }
.m3danim button.on { background: var(--fx-border); color: #fff; font-weight: 700; }

.m3danim button.wait { opacity: .55; cursor: progress; }

.m3dover { border-top: 1px dashed var(--fx-border); padding-top: 5px; width: 100%; }
.m3dover button { border-style: dashed; }

.m3dover button.more { border-style: solid; opacity: .75; }

.m3dmoretip { flex-basis: 100%; text-align: center; font-size: 11px;
  color: #999; margin: 3px 0 1px; }
.m3danim.big { margin-top: 0; align-items: flex-start; }
.m3danim.big .m3drow { justify-content: flex-start; }
.m3danim.big button { font-size: 13.5px; padding: 5px 14px; }
.artrow { display: flex; align-items: center; gap: 6px; }
.artrow .arw { color: #666; font-size: 20px; cursor: pointer; user-select: none; }
.artrow .arw.off { opacity: .2; cursor: default; }
.artbox .sp { flex: 1; height: 118px; border-radius: 6px; background: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 34px; color: #C9C4B8; }
.artbox .sp img { width: 104px; height: 104px; object-fit: contain; image-rendering: pixelated; }
.artcap { text-align: center; font-size: 13px; margin-top: 4px; }

.ratio { height: 10px; border-radius: 20px; overflow: hidden; display: flex;
  margin: 3px 0 4px; width: 100%; flex: none; }
.ratio i { display: block; height: 100%; }
.ratiotxt { font-size: 14px; width: 100%; flex: none; display: block; text-align: center; }
.evbox, .volbox { width: 100%; display: grid; gap: 3px; }
.evbox { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.volbox { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.evcell { border-radius: 10px; padding: 3px 2px; text-align: center; line-height: 1.35; min-width: 0; }
.evcell b { display: block; font-size: 13px; font-weight: 700; color: #222; }
.evcell i { display: block; font-size: 15px; font-weight: 400; font-style: normal; color: #222; }

.dtb { display: inline-flex; align-items: center; gap: 3px; font-size: 15px;
  color: #fff; border-radius: 10px; padding: 2px 8px 2px 2px; line-height: 1.5; }
.dtb::before { content: ""; width: 26px; height: 26px; flex: none;
  background-image: var(--ti); background-size: contain;
  background-repeat: no-repeat; background-position: center; }

.statgrid { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.statgrid .sbox.light { flex: 0 0 auto; width: 33.33%; min-width: 300px; }
.statgrid .sbox.deep  { flex: 0 0 auto; width: 40%;    min-width: 420px; }
.sbox { background: var(--fx-border); border-radius: 10px; padding: 2px; display: flex; flex-direction: column; }
.sbox > .in { flex: 1; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; }

.sbox .sh, .sbox .hrow, .sbox .crow, .sbox .stotal { flex: 0 0 auto; }
.sbox .srow:not(.stotal) { flex: 1 1 auto; }
.sbox .sh { background: var(--fx-head); color: #333; font-weight: 700; text-align: center;
  font-size: 16px; min-height: 34px; line-height: 1; display: flex;
  align-items: center; justify-content: center; }
.srow { display: flex; align-items: stretch; min-height: 30px; }
.srow .lb { width: 96px; flex: none; display: flex; justify-content: space-between;
  align-items: center; padding: 0 6px; font-size: 15px; font-weight: 700; color: #222; }
.srow .tk { flex: 1; padding-left: 3px; display: flex; align-items: center; }
.srow .tk i { display: block; height: 22px; box-sizing: border-box; }

.stotal { background: var(--fx-head); color: #333; }
.sbox.light .srow { border-top: 1px solid var(--fx-head); }
.sbox.light .srow .lb { border-right: 1px solid var(--fx-head); }
.sbox.light .stotal { border-top: 1px solid var(--fx-head); }
.sbox.deep .hrow { display: flex; background: var(--fx-head); min-height: 34px; }
.sbox.deep .srow { border-top: 1px solid var(--fx-border); }
.sbox.deep .cc { flex: 1; min-width: 0; display: flex; align-items: center;
  justify-content: center; border-right: 1px solid var(--fx-border);
  font-size: 15px; font-weight: 700; color: #222; padding: 0 4px; white-space: nowrap; }
.sbox.deep .cc:last-child { border-right: none; }
.sbox.deep .hrow .cc { font-size: 16px; }

.sbox.deep input.ivev { width: 46px; border: 1px solid #B8B8B8; border-radius: 3px;
  padding: 1px 2px; font: inherit; font-size: 13px; text-align: left; }

.sbox.deep .crow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--fx-head); border-top: 1px solid var(--fx-border); }
.sbox.deep .crow b { font-weight: 700; font-size: 15px; color: #222; }
.sbox.deep .lvwrap, .sbox.deep .natwrap { display: flex; align-items: center; gap: 8px; }

.sbox.deep .lvval { display: inline-block; min-width: 34px; text-align: right; font-weight: 700; font-size: 15px; color: #222; }
.sbox.deep .lvsl { width: 132px; accent-color: var(--fx-border); cursor: pointer; }
.sbox.deep .lvreset { font: inherit; font-size: 13px; padding: 2px 9px; border: 1px solid var(--fx-border);
  background: #fff; border-radius: 5px; cursor: pointer; }
.sbox.deep .lvreset:hover { background: #fff6f4; }
.sbox.deep .natsel { font: inherit; font-size: 14px; padding: 3px 8px; border: 1px solid var(--fx-border);
  border-radius: 6px; background: #fff; cursor: pointer; max-width: 210px; }

.resist { display: inline-block; border: 3px solid var(--fx-border);
  border-radius: 11px; overflow: hidden; background: #fff; }
.resrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rescell { border-right: 1px solid #000; border-bottom: 1px solid #000; min-width: 86px; }
.rescell:last-child { border-right: none; }
.resrow:last-child .rescell { border-bottom: none; }
.restype { font-size: 15px; color: #fff; text-align: center; padding: 3px 8px;
  display: flex; align-items: center; justify-content: center; gap: 3px; }
.restype::before { content: ""; width: 24px; height: 24px; flex: none;
  background-image: var(--ti); background-size: contain;
  background-repeat: no-repeat; background-position: center; }

.resval { text-align: center; font-size: 20px; font-weight: 400; padding: 6px 6px; background: #fff; }

.tcpick { display: flex; align-items: center; gap: 48px; margin: 4px 0 16px; flex-wrap: wrap; }
.tcsel { font: inherit; font-size: 18px; font-weight: 700; color: #000; background: #f7f7f7;
  padding: 5px 10px; border: 1px solid #495467; border-radius: 5px; cursor: pointer;
  min-width: 240px; }
.tcsel:hover { border-color: #4A90E2; }

.natintro { margin-bottom: 18px; }

table.fxt.nat { width: 100%; table-layout: fixed; max-width: 980px; margin: 0 auto; }
table.fxt.nat th { padding: 4px 10px; height: 38px; line-height: 1.3; white-space: normal; }
table.fxt.nat td { height: 38px; }

.introtext.cen { text-align: center; }

table.fxt.sta { width: 100%; table-layout: fixed; max-width: 1080px; margin: 0 auto; }
table.fxt.sta th { padding: 4px 10px; height: 38px; }
table.fxt.sta td { height: auto; padding: 7px 12px; }

table.fxt.sta td.staname .stawrap { display: flex; align-items: center; gap: 8px;
  justify-content: center; text-align: left; }
table.fxt.sta td.staname img { width: 44px; height: 44px; flex: none; image-rendering: pixelated; }
table.fxt.sta td.staname b { display: block; font-weight: 700; }
table.fxt.sta td.staname em { display: block; font-style: normal; font-size: 13px; color: #777; }

table.fxt.sta.omt td.staname img { width: 34px; height: 34px; object-fit: contain; }

table.fxt.sta.repl td.staname img { width: 38px; height: 38px; object-fit: contain; }

table.fxt.sta.repl td.stadesc { text-align: center; }
table.fxt.sta.repl td.stadesc .dp { line-height: 2; text-align: center; }

table.fxt.sta td.staname .oneline { text-align: center; }
table.fxt.sta td.staname .oneline b,
table.fxt.sta td.staname .oneline em { display: inline; }

table.fxt.sta td.stadesc .dp { margin: 0 0 6px; font-size: 15px; line-height: 1.7; }
table.fxt.sta td.stadesc .dp:last-child { margin-bottom: 0; }

.bcbar { position: sticky; top: 0; z-index: 20; margin: -4px -14px 0; }
.bcbody { padding: 16px 0 0; }
.bcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 8px; }
.bcgrid .empty { grid-column: 1 / -1; }
.bccard { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 9px;
  text-decoration: none; color: inherit; line-height: 1.35;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.bccard:hover { transform: translateY(-2px); border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(27,34,44,.10); }
.bcn { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bcn b { font-weight: 700; font-size: 15px; color: var(--ink); }
.bcn em { font-style: normal; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }

.bcm i.n { font-style: normal; font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }

.rbpage .rbback { max-width: 820px; margin: 0 auto 10px; display: flex;
  align-items: baseline; justify-content: flex-end; }
.rbpage .rbback .rbn { font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

table.fxt.bct { width: 100%; max-width: 820px; margin: 0 auto; table-layout: fixed; }
table.fxt.bct th { height: 38px; }
table.fxt.bct th.w-mod, table.fxt.bct td:last-child { width: 15em; }
table.fxt.bct td { height: 40px; padding: 5px 10px; }

.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px; padding-top: 8px; }
.nent { display: flex; align-items: center; gap: 8px; padding: 7px 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 9px;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.nent:hover { transform: translateY(-2px); border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(27,34,44,.10); }
.nent img { width: 40px; height: 40px; flex: none; object-fit: contain; image-rendering: pixelated; }
.nent span { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

.npcart { display: flex; align-items: center; justify-content: center; padding: 8px; }
.npcart img { width: 100%; max-width: 190px; height: auto; object-fit: contain;
  image-rendering: pixelated; }

.nwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px; align-items: start; padding-top: 8px; }
.ncard { min-width: 0; background: var(--th); border: 2px solid var(--tb); border-radius: 10px;
  padding: 5px; display: flex; flex-direction: column; gap: 5px; }

.nchead { background: #fff; border-radius: 8px; padding: 4px 8px;
  text-align: center; font-size: 16px; font-weight: 700; }

.nchead a { display: inline-flex; align-items: center; gap: 5px;
  color: #0073E6; text-decoration: none; }
.nchead a:hover { text-decoration: underline; color: #005BB5; }
.nchead img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.ncbody { background: #fff; border-radius: 8px; padding: 5px 8px; display: flex;
  flex-direction: column; gap: 2px; min-width: 0; }
.ntr { display: flex; gap: 6px; font-size: 13px; line-height: 1.6; min-width: 0; }
.ntr > .k { flex: 0 0 auto; width: 4.2em; color: var(--ink-3); font-weight: 700; }
.ntr > .v { flex: 1 1 auto; min-width: 0; color: #222; overflow-wrap: anywhere; }
.ntr > .v .itico { width: 20px; height: 20px; object-fit: contain; vertical-align: middle;
  margin-right: 3px; image-rendering: pixelated; }
.nst { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.nst i { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }

table.fxt.fisht { width: 100%; table-layout: fixed; max-width: 1080px; margin: 8px auto 0; }
table.fxt.fisht th { height: 38px; padding: 4px 6px; }
table.fxt.fisht td { height: 42px; padding: 3px 6px; font-variant-numeric: tabular-nums; }
table.fxt.fisht td.no { color: #aaa; }
table.fxt.fisht td.fishpal { display: flex; align-items: center; gap: 7px; height: 42px;
  box-sizing: border-box; }
table.fxt.fisht td.fishpal img { width: 34px; height: 34px; flex: none; object-fit: contain;
  image-rendering: pixelated; }

.skgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.skgrid .empty { grid-column: 1 / -1; }
.skcard2 { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 9px;
  text-decoration: none; color: inherit; line-height: 1.35;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.skcard2:hover { transform: translateY(-2px); border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(27,34,44,.10); }
.skico { width: 56px; height: 56px; flex: none; display: flex; align-items: center;
  justify-content: center; background: #F5F5F3; border-radius: 7px; overflow: hidden; }
.skico img { max-width: 100%; max-height: 100%; object-fit: contain; }
.skn { display: flex; flex-direction: column; min-width: 0; }
.skn b { font-weight: 700; font-size: 15px; color: var(--ink); }
.skn em { font-style: normal; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.skn i { font-style: normal; font-size: 12px; color: var(--ink-2); margin-top: 1px; }

.skwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px 12px; align-items: start; padding-top: 6px; }
.skcard { min-width: 0; background: var(--fx-head); border: 2px solid var(--fx-border);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.skimg { background: #fff; border-radius: 7px; overflow: hidden; display: flex;
  align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
.skimg img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.skf { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.skf > .k { flex: 0 0 auto; width: 5.2em; background: #fff; border-radius: 7px; padding: 3px 5px;
  font-size: 13px; font-weight: 700; color: #333; display: flex; align-items: center;
  justify-content: center; text-align: center; white-space: nowrap; }

.skf > .v { flex: 1 1 auto; min-width: 0; background: #fff; border-radius: 7px; padding: 3px 7px;
  font-size: 13px; color: #222; display: block; }
.skf > .v .dp { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

.skf > .v .iplain { color: inherit; }

.abbar { position: sticky; top: 0; z-index: 20; }
.abpage { padding: 16px 14px 40px; }
.abgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.abgrid .empty { grid-column: 1 / -1; }
.abcard { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 9px;
  text-decoration: none; color: inherit; line-height: 1.35;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.abcard:hover { transform: translateY(-2px); border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(27,34,44,.10); }
.abn { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.abn b { font-weight: 700; font-size: 15px; color: var(--ink); }
.abn em { font-style: normal; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }

.abi { font-size: 12px; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.7em; }

.abeff .adp { padding: 0; margin-bottom: 12px; }
.abeff .adp:last-child { margin-bottom: 0; }
.abside .cell > .cv { text-align: center; line-height: 1.6; padding: 6px 8px; }

.hpintro { margin-bottom: 14px; }

.hpwrap { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: flex-start; }

.hpcard { background: var(--tb); padding: 2px; border-radius: 12px; width: 432px; max-width: 100%; }
.hpin { border-radius: 10px; overflow: hidden; background: #fff; }
.hphead { background: var(--th); display: flex; align-items: center; justify-content: center;
  gap: 5px; font-size: 15px; font-weight: 700; color: #333; padding: 5px 8px; }
.hphead .hplbl { font-weight: 700; }
.hphead .tcirc { width: 24px; height: 24px; background-size: 20px 20px; margin-right: 4px; }
.hprow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--tb); }
.hprow > div { text-align: center; font-size: 14px; padding: 4px 2px; min-width: 0;
  border-right: 1px solid var(--tb); }
.hprow > div:last-child { border-right: none; }
.hprow.hphd > div { font-weight: 700; color: #333; font-size: 14px; }

.hprow > div.odd { color: red; }
.hprow > div.even { color: blue; }

.hprow.hpin2 > div { padding: 3px 4px; }
.hpiv { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 15px;
  text-align: center; padding: 2px 4px; border: 1px solid #b9b9b9; border-radius: 3px;
  background: #fff; color: #222; }
.hpiv:focus { outline: none; border-color: #4A90E2; }

.evowrap { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.evocard { border: 3px solid var(--fx-border); border-radius: 11px; background: var(--fx-head);
  padding: 9px 14px; display: flex; align-items: flex-start; gap: 14px; max-width: 680px; }
.evon { display: flex; flex-direction: column; align-items: center; width: 104px; flex: none;
  text-decoration: none; color: inherit; cursor: pointer; }

.evon:hover > span:last-child { text-decoration: underline; color: #000; }
.evon .sp { width: 84px; height: 84px; border-radius: 8px; background: #fff;
  border: 1px solid #E4D9D3; display: flex; align-items: center; justify-content: center; }
.evon .sp img { width: 74px; height: 74px; object-fit: contain; image-rendering: pixelated; }

.evon > span:last-child { width: 100%; font-size: 15px; margin-top: 4px; color: #333;
  font-weight: 700; text-align: center; line-height: 1.25; overflow-wrap: break-word; }
.evpal { font-size: 11px; font-weight: 400; color: #777; font-style: normal; }
.evocond { flex: 1; min-width: 150px; font-size: 16px; text-align: center; line-height: 1.65; color: #333;
  align-self: center; }
.evocond .lnk { color: #0073E6; text-decoration: none; }
.evocond a.lnk:hover { text-decoration: underline; color: #005BB5; }
.evitem { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.evocond .evbio { cursor: pointer; }

.tippop { position: absolute; z-index: 60; min-width: 260px; max-width: min(420px, 90vw);
  background: #fff; border: 1px solid #495467; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27, 34, 44, .18); overflow: hidden; }
.tippop .tiph { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #F5F5F5; border-bottom: 1px solid #D8DCE2; padding: 6px 8px 6px 10px; }
.tippop .tiph b { font-size: 14px; color: #000; }
.tippop .tipx { cursor: pointer; color: #666; line-height: 1; padding: 2px 5px; border-radius: 4px; }
.tippop .tipx:hover { background: #E23B3B; color: #fff; }
.tippop .tipb { padding: 7px 10px 9px; max-height: min(360px, 60vh); overflow-y: auto;
  font-size: 14px; line-height: 1.7; color: #333; text-align: left; }
.tippop .tipb > div { overflow-wrap: anywhere; }
.evitem .itico { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }

table.fxt { border-collapse: separate; border-spacing: 0; background: #fff; font-size: 15px;
  border: 3px solid var(--fx-border); border-radius: 11px; overflow: hidden; }
table.fxt th { background: var(--fx-head); color: #333; font-weight: 700;
  padding: 0 12px; height: 34px; line-height: 1; vertical-align: middle; text-align: center;
  border-right: 1px solid #000; border-bottom: 1px solid #000; }
table.fxt th:last-child { border-right: none; }
table.fxt td { padding: 4px 11px; height: 30px; line-height: 1.45; vertical-align: middle;
  border-top: 1px solid #000; border-right: 1px solid #000; text-align: center; }
table.fxt tr:first-child td { border-top: none; }

table.fxt.sectbl { margin: 14px 0 22px; }

table.fxt tr:has(th) + tr td { border-top: none; }
table.fxt td:last-child { border-right: none; }
table.fxt td.l { text-align: left; }

table.fxt.drop { width: auto; max-width: 80%; min-width: 340px; margin-bottom: 14px; }

table.fxt.drop th:nth-child(n+2), table.fxt.drop td:nth-child(n+2) { width: 7em; }
table.fxt.drop td.dropname, table.fxt.breed td.dropname { text-align: left; }

table.fxt.breed { width: auto; max-width: 60%; min-width: 300px; }
.dropname .itico { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated;
  vertical-align: middle; margin-right: 6px; }

.dropname .lnk, .dropname .clnk { vertical-align: middle; }
.dropname .lnk { color: #0073E6; cursor: pointer; }
.dropname a.lnk:hover { text-decoration: underline; }

table.fxt.abil { width: 68.8%; min-width: 480px; max-width: 100%; }
table.fxt.abil td.abname { font-weight: 400; vertical-align: middle; }
table.fxt.abil .abhid { font-size: 12px; font-weight: 400; color: #888; margin-top: 3px; }
table.fxt.abil td.abdesc { line-height: 1.7; padding: 7px 11px; }
table.fxt.abil .abdesc .adp { padding: 1px 0; }
table.fxt.abil .abdesc .adnone { color: #999; }

.mtabs2 { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }

.mpsearch { margin-left: auto; border: 2px solid var(--fx-border); background: #fff;
  border-radius: 7px; padding: 3px 11px; font-size: 14px; line-height: 1.5; color: #333;
  width: 220px; outline: none; box-sizing: content-box; }
.mpsearch:focus { border-color: #0073E6; }
.mtab2 { border: 2px solid var(--fx-border); background: #fff; border-radius: 7px;
  padding: 3px 11px; font-size: 14px; line-height: 1.5; color: #333; cursor: pointer; user-select: none; }
.mtab2.on { background: var(--fx-head); font-weight: 700; }

.mpwrap { display: flex; flex-direction: column; align-items: center; }
table.fxt.movepool { width: auto; max-width: 100%; margin: 0 auto; }

table.fxt.movepool.norow th { border-bottom: none; }

.mpnone { width: 100%; text-align: center; font-size: 14px; color: #999; padding: 14px 0 2px; }

table.fxt.movepool th, table.fxt.movepool td { padding-left: 14px; padding-right: 14px; }
.movepool .w-lv { min-width: 62px; }
.movepool .w-parent { min-width: 86px; }
.movepool .w-name { min-width: 132px; }
.movepool .w-type, .movepool .w-cat { min-width: 80px; }
.movepool .w-num { min-width: 64px; }
.movepool .w-pp { min-width: 58px; }
.movepool .w-gen { min-width: 96px; }

table.fxt.movepool td.mvcol { text-align: center; white-space: nowrap; }

.movepool a.mvname { color: #333; text-decoration: none; font-size: 16px; }
.movepool a.mvname:hover { text-decoration: underline; color: #000; }
.movepool a.mvname.stab { font-weight: 700; }
.movepool td.stab { font-weight: 700; }

.movepool td.mtc, .movepool td.mcc { padding: 0 6px; font-size: 15px; font-weight: 400; white-space: nowrap; }
.movepool td.mtc { color: #fff; }

.movepool .w-crystal { min-width: 108px; }
.movepool td.crystal .itico { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated;
  vertical-align: middle; margin-right: 6px; }
.movepool td.crystal .clnk { vertical-align: middle; }

.movepool td.gens { font-size: 14px; letter-spacing: .3px; text-align: left; }

.movepool .viewbtn { border: 1px solid var(--fx-border); background: #fff; border-radius: 6px;
  padding: 2px 12px; font-size: 14px; color: #333; cursor: pointer; white-space: nowrap; }
.movepool .viewbtn:hover { background: var(--fx-head); }

.movepool .viewbtn.on { background: var(--fx-head); font-weight: 700; }
.movepool tr.parentrow > td { background: #FAFAFA; padding: 9px 12px; }
.movepool .parents { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.movepool .pchip { display: inline-flex; align-items: center; gap: 3px; text-decoration: none;
  color: #0073E6; font-size: 14px; }
.movepool .pchip:hover span { text-decoration: underline; }
.movepool .pchip img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }

.mvside .cell > .cv { display: flex; align-items: center; justify-content: center;
  min-height: 26px; font-size: 15px; }

.mvside .cell > .cv.rangebox { flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; align-content: stretch; gap: 0; padding: 1px; }
.rgrid { display: grid; grid-template-columns: repeat(3, 20%); justify-content: center;
  column-gap: 12.5%; width: 100%; }
.rgrid.r1 { padding: 10px 0 23px; }
.rgrid.r2 { padding: 0 0 7px; }
.rgc { border: 1px solid #000; border-radius: 10px; padding: 2px 0;
  text-align: center; font-size: 14px; color: #222; }

.rsum { margin: 0 8px; text-align: center; font-size: 14px; padding-top: 3px;
  border-top: 1px solid #A2A9B1; }

.mvside .cell > .cv.fxlist { flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; align-content: stretch; gap: 3px; padding: 2px; background: #8FD8FA; }
.mvside .cell > .cv.fxlist.mx { background: #C87DBF; }
.fxgrp { display: flex; flex-direction: column; gap: 1px; }
.fxgrp + .fxgrp { border-top: 2px solid #A2A9B1; padding-top: 3px; }
.fxr { display: flex; align-items: stretch; }
.fxr > .k { flex: 0 0 auto; min-width: 28.5%; background: var(--fx-head);
  border-radius: 9px 0 0 9px; padding: 3px 5px; font-size: 13px; font-weight: 700; color: #333;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.fxr > .v { flex: 1 1 auto; min-width: 0; background: #fff; border-radius: 0 9px 9px 0;
  padding: 3px 7px; font-size: 14px; color: #222; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.fxr > .v .ln { display: inline-flex; align-items: center; gap: 5px; }
.fxr > .v .itico { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.fxr > .v .pkico { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }

.ibig { background: #F5F5F5; border-radius: 10px; padding: 10px;
  display: flex; align-items: center; justify-content: center; min-height: 150px; }
.ibig img { width: 108px; height: 108px; object-fit: contain; image-rendering: pixelated; }

.introtext .dp { margin: 0 0 6px; font-size: 15px; line-height: 1.95; }
.introtext .dp:last-child { margin-bottom: 0; }
.introtext .dp b { font-weight: 700; color: #222; }

.mdpage .introtext { padding-right: 0; }

.eggwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(408px, 1fr));
  gap: 16px 20px; align-items: start; padding: 14px 0 8px; }
table.fxt.egg { width: 100%; table-layout: fixed; font-size: 15px; }
table.fxt.egg th { padding: 4px 12px; height: 38px; }

.tcirc { display: inline-block; width: 26px; height: 26px; border-radius: 50%; flex: none;
  vertical-align: middle;
  background-color: var(--tc); background-image: var(--ti);
  background-size: 22px 22px; background-repeat: no-repeat; background-position: center; }

.tcirc.selfico { background-color: transparent; background-size: 100% 100%; }
table.fxt.egg th .tcirc { margin-right: 6px; }
table.fxt.egg th.w-amt { width: 4.5em; }
table.fxt.egg td { height: 42px; padding: 4px 12px; }
table.fxt.egg td.dropname { word-break: break-word; }
table.fxt.egg td.dropname .itico { width: 30px; height: 30px; }
.ilnk { color: var(--fx-link, #0073E6); text-decoration: none; }
.ilnk:hover { text-decoration: underline; }

.ilnk.withico { white-space: nowrap; }
.ilnk .pkico, .ilnk .itico { vertical-align: middle; margin-right: 2px;
  object-fit: contain; image-rendering: pixelated; }
.ilnk .pkico { width: 34px; height: 34px; }
.ilnk .itico { width: 27px; height: 27px; }
.iplain { color: #555; }

.reccard { max-width: none; }
.mcpanel { background: #C6C6C6; border: 3px solid; border-color: #fff #555 #555 #fff;
  padding: 12px 14px 10px; display: flex; align-items: center; gap: 12px; }
.mcgrid { display: grid; grid-template-columns: repeat(3, auto); }
.mcrow { display: flex; align-items: center; }
.mccol { display: flex; flex-direction: column; gap: 2px; }
.mcgap { width: 18px; }

.mcplus { width: 20px; flex: none; text-align: center; color: #6B6B6B;
  font-size: 19px; line-height: 1; font-weight: 700; }
.mcslot { position: relative; width: 44px; height: 44px; flex: none; background: #8B8B8B;
  border: 2px solid; border-color: #373737 #fff #fff #373737;
  display: flex; align-items: center; justify-content: center; }
.mcslot img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.mcslot a { display: flex; }
.mcslot a:hover img { filter: brightness(1.25); }
.mcslot > i { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 13px;
  color: #fff; text-shadow: 1px 1px 0 #3F3F3F; line-height: 1; }
.mcarrow { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; }

.mcpot, .mcbrew { display: flex; flex-direction: column; align-items: center; }
.mcline { width: 44px; height: 30px; object-fit: contain; image-rendering: pixelated; flex: none; }

.mdpage .spawncard { max-width: 460px; }
.getln { display: block; }
.pkline { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  color: #333; vertical-align: middle; }

.pkline:hover span { text-decoration: underline; color: #000; }
.pkline img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }

.spawncard .bb .npcrow { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.spawncard .bb .npcrow .pkline img { width: 22px; height: 22px; }

.spawncard .bb .npcrow { --npclb: 3.6em; --npcgap: 4px; column-gap: var(--npcgap); }
.spawncard .bb .npclb { flex: none; width: var(--npclb); font-weight: 400; }
.spawncard .bb .npcrow.cont { padding-left: calc(var(--npclb) + var(--npcgap)); }

.spawncard .bb .npcrow i { font-style: normal; }

.spawncard .bb .npcrow a.pkline:hover span { text-decoration: underline; }

.learnbox { min-height: 60px; }
.lnote { font-size: 15px; line-height: 1.9; font-weight: 700; color: #333; }
.lflow { display: flex; flex-wrap: wrap; gap: 5px 10px; }

.lcard { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  color: #333; border: 2px solid var(--fx-border); border-radius: 8px;
  padding: 3px 8px 3px 3px; background: transparent; line-height: 1.25; }
.lcard:hover { background: var(--fx-head); }
.lcard img, .lcard i { width: 40px; height: 40px; flex: none; object-fit: contain;
  image-rendering: pixelated; }
.lcard span { display: flex; flex-direction: column; font-size: 14px; white-space: nowrap; }
.lcard b { font-weight: 400; color: #666; font-size: 13px; }

.cmdwrap { background: var(--fx-border); border-radius: 11px; padding: 3px;
  display: flex; flex-direction: column; gap: 5px; }

.cmdbox { border-radius: 9px; background: var(--fx-head); }
.cmdh { font-weight: 700; font-size: 16px; color: #323232; padding: 5px 12px;
  border-radius: 9px 9px 0 0; }
.cmdb { background: #fff; padding: 9px 12px; border-radius: 0 0 9px 9px; }
.cmdname { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 8px; }

.cmdgrid { display: grid; gap: 6px 22px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.cmdrow { display: flex; align-items: center; gap: 7px; font-size: 14px; min-height: 26px; }
.cmdrow > b { font-weight: 700; color: #222; white-space: nowrap; }
.cmdrow2 { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 9px; }

.cmdcombo { position: relative; display: inline-block; box-sizing: border-box;
  width: 160px; max-width: 100%; height: 26px;
  border: 1px solid var(--fx-hair); border-radius: 6px; background: #fff; }
.cmdcombo.on, .cmdcombo:focus-within { border-color: var(--fx-link); }
.cmdcinp { width: 100%; height: 100%; box-sizing: border-box;
  border: 0; outline: none; background: transparent; color: #333;
  font-size: 14px; font-family: inherit; padding: 0 22px 0 6px; border-radius: 6px; }

.cmdcombo.ro .cmdcinp { cursor: default; caret-color: transparent; user-select: none; }
.cmdcombo.ro .cmdcinp::selection { background: transparent; }

.cmdcarrow { position: absolute; right: 7px; top: 50%; margin-top: -2px;
  width: 0; height: 0; pointer-events: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid #666; }

.cmdpop { display: none; position: absolute; z-index: 60; top: calc(100% + 2px); left: 0;
  min-width: 100%; width: max-content; max-width: 320px; max-height: 264px; overflow-y: auto;
  background: #fff; border: 1px solid #767676; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18); padding: 2px 0; }
.cmdcombo.on .cmdpop { display: block; }
.cmdcombo.up .cmdpop { top: auto; bottom: calc(100% + 2px); }
.cmdopt { padding: 3px 10px; font-size: 14px; color: #222; white-space: nowrap; cursor: default; }
.cmdopt:hover, .cmdopt.act { background: #0078D7; color: #fff; }
.cmdtext { border: 1px solid var(--fx-hair); border-radius: 6px; padding: 2px 8px;
  font-size: 14px; width: 130px; }
.cmdtext:focus { outline: none; border-color: var(--fx-link); }
.cmdsl { width: 108px; accent-color: var(--fx-border); cursor: pointer; }
.cmdval { display: inline-block; min-width: 38px; font-variant-numeric: tabular-nums; }
.cmdchk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.cmdchk input { accent-color: var(--fx-border); cursor: pointer; }

.cmdnums { display: grid; grid-template-columns: auto 82px 82px; gap: 4px 10px;
  align-items: center; width: fit-content; margin: 10px 0; }
.cmdnh { font-weight: 700; font-size: 14px; color: #222; text-align: center; }
.cmdnl { font-size: 14px; color: #222; }
.cmdnum { border: 1px solid var(--fx-hair); border-radius: 6px; padding: 2px 6px;
  font-size: 14px; width: 100%; box-sizing: border-box; }
.cmdnum:focus { outline: none; border-color: var(--fx-link); }
.cmdmoves { display: grid; gap: 6px 22px;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }

.cmdout { margin-top: 9px; background: #1E1E1E; color: #F2F2F2; border-radius: 7px;
  padding: 8px 11px; font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 14px; line-height: 1.6; word-break: break-all; cursor: pointer;
  position: relative; transition: background .15s; }
.cmdout:hover { background: #2C2C2C; }
.cmdout.copied::after { content: '已复制'; position: absolute; top: 6px; right: 8px;
  background: var(--ok, #289018); color: #fff; font-size: 12px; border-radius: 5px;
  padding: 1px 8px; font-family: var(--font); }

.catchrow { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.catchctl { border: 3px solid var(--fx-border); background: var(--fx-head);
  border-radius: 11px; padding: 6px 12px;
  width: fit-content; min-width: 300px; max-width: 100%;
  
  position: sticky; top: 78px; }
.catchctl .cchead { font-weight: 700; font-size: 15px; color: #323232; padding: 2px 0; }
.catchctl .ccrow { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 15px; }
.catchctl .ccrow b { font-weight: 700; color: #222; white-space: nowrap; }
.catchctl .hpsl { width: 168px; accent-color: var(--fx-border); cursor: pointer; }
.catchctl .hpval { display: inline-block; min-width: 46px; font-weight: 700; }
.catchctl .stbtns { display: flex; gap: 5px; flex-wrap: wrap; }

.catchctl .stbtn { border: 2px solid var(--sc); background: #fff; color: #333;
  border-radius: 7px; padding: 1px 9px; font-size: 14px; cursor: pointer; }
.catchctl .stbtn:hover { background: color-mix(in srgb, var(--sc) 22%, #fff); }
.catchctl .stbtn.on { background: var(--sc); color: #fff; font-weight: 700; }

.catchwrap { display: flex; flex: none; }
table.fxt.catchtbl { width: auto; max-width: 100%; }
.catchtbl .w-ball { min-width: 210px; }

.catchtbl .w-rate { width: 180px; min-width: 180px; }
.catchtbl td.ratecell { white-space: nowrap; }
.catchtbl td.ballcell { text-align: left; padding: 5px 11px; }
.catchtbl .ballcell .itico { width: 26px; height: 26px; object-fit: contain;
  image-rendering: pixelated; vertical-align: middle; margin-right: 6px; }
.catchtbl .ballcell .clnk { vertical-align: middle; }

.catchtbl .ballsign { font-size: 13px; color: #333; padding-left: 32px; }
.catchtbl .ballsign.good { color: #289018; }
.catchtbl .ballsign.bad  { color: #DC253E; }

.catchtbl .ballsign a.lnk { color: #0073E6; text-decoration: none; cursor: pointer; }
.catchtbl .ballsign a.lnk:hover { text-decoration: underline; color: #005BB5; }
.catchtbl td.ratecell { font-variant-numeric: tabular-nums; }
.catchtbl .ratebtn { border: 1px solid var(--fx-border); background: #fff; border-radius: 6px;
  padding: 2px 10px; font-size: 14px; color: #333; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.catchtbl .ratebtn:hover { background: var(--fx-head); }
.catchtbl .ratebtn.on { background: var(--fx-head); font-weight: 700; }

.catchtbl tr.detrow > td { background: #FBFBFB; height: 26px; padding: 2px 11px;
  font-size: 14px; text-align: center; }

.catchtbl tr.dethead > td { background: var(--fx-head); color: #333; font-weight: 700;
  font-size: 15px; height: 34px; padding: 0 12px; text-align: center; }
.catchtbl td.detv { font-variant-numeric: tabular-nums; }

.spawnwrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.spawncard { border: 3px solid var(--fx-border); background: var(--fx-head);
  border-radius: 11px; padding: 3px; min-width: 180px; max-width: 360px; }
.spawncard .bh { color: #323232; font-weight: 700; text-align: center;
  padding: 5px 8px; font-size: 15px; line-height: 1; }

.spawncard .bh .lytag { display: block; width: fit-content; max-width: 100%;
  margin: 4px auto 0; padding: 2px 8px; border-radius: 16px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spawncard .bb { background: #fff; border-radius: 8px; padding: 5px 9px;
  font-size: 14px; line-height: 1.5; }

.spawncard .bb .dp { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.spawncard .bb .dp:last-child { margin-bottom: 0; }

.spawncard .raentry + .raentry { border-top: 1px solid #A2A9B1; margin-top: 6px; padding-top: 6px; }

.spawncard .spseg { margin: 0; }
.spawncard .spseg + .spseg { margin-top: 10px; }
.spawncard .rstars { display: block; }
.spawncard .sfield { display: flex; align-items: flex-start; line-height: inherit; }
.spawncard .sfield > .k { flex: none; white-space: nowrap; }
.spawncard .sfield > .v { display: flex; flex-direction: column; min-width: 0; }
.spawncard .sfield > .v > span:not(.sfield) { display: block; }   
.spawncard .bb .lnk { color: #0073E6; cursor: pointer; text-decoration: none; }
.spawncard .bb a.lnk:hover { text-decoration: underline; }

.spawncard .bb .evitem .itico { width: 20px; height: 20px; vertical-align: middle;
  object-fit: contain; image-rendering: pixelated; margin-right: 3px; }
.spawncard .bb .evitem .lnk, .spawncard .bb .evitem .clnk { vertical-align: middle; }

.spawncard .bb .upborder { border-top: 1px solid #A2A9B1; margin-top: 6px; padding-top: 5px; }

.spawncard .bb .helditem { line-height: 1.7; }
.spawncard .bb .helditem .itico { width: 20px; height: 20px; vertical-align: middle;
  object-fit: contain; image-rendering: pixelated; margin-right: 3px; }
.spawncard .bb .helditem .lnk { white-space: nowrap; }

.spawncard .bb .clnk { white-space: nowrap; }

table.fxt.cbt { width: 100%; table-layout: fixed; max-width: 1120px; margin: 4px auto 0; }

table.fxt.cbt .ilnk.withico, table.fxt.cbt .iplain.withico {
  white-space: normal; overflow-wrap: anywhere; }
}
table.fxt.cbt th { height: 38px; padding: 4px 8px; line-height: 1.35; white-space: normal; }

table.fxt.cbt td.top { vertical-align: top; }
table.fxt.cbt th.tinted { color: #23272B; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
table.fxt.cbt td { height: auto; padding: 7px 10px; line-height: 1.95; word-break: break-word; }

table.fxt.cbt .ilnk { color: #333; }
table.fxt.cbt .ilnk:hover { color: #000; text-decoration: underline; }
table.fxt.cbt .ilnk .itico,
table.fxt.cbt .iplain.withico .itico { width: 24px; height: 24px; }

@media (max-width: 720px) {
  table.fxt.cbt th, table.fxt.cbt td { width: auto !important; }
  table.fxt.cbt th { height: auto; min-height: 0; padding: 5px 3px;
    font-size: 11.5px; line-height: 1.35; }
  table.fxt.cbt td { padding: 5px 4px; font-size: 12.5px; line-height: 1.7; }
  table.fxt.cbt .ilnk .itico, table.fxt.cbt .iplain.withico .itico {
    width: 17px; height: 17px; margin-right: 1px; }
  
  table.fxt.cbt .ilnk, table.fxt.cbt .iplain { overflow-wrap: anywhere; }
}

.ridecalc { max-width: 1120px; margin: 6px auto 0; padding: 3px;
  background: var(--fx-border, #BBBBAB); border-radius: 12px; }
.ridecalc > * { background: var(--fx-head, #E7E7D8); }
.ridecalc .rcin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  padding: 14px 16px 15px; border-radius: 9px 9px 0 0; }
.ridecalc .rcslot { display: flex; flex-direction: column; gap: 6px; }
.ridecalc .rcslot > label { font-weight: 700; color: #333; font-size: 14px; }
.ridecalc .rcslot > label em { font-style: normal; font-weight: 400; color: #777; font-size: 13px; }
.ridecalc .rcslots { display: flex; flex-wrap: wrap; gap: 8px; }
.ridecalc .rcpick { display: flex; align-items: center; gap: 5px; background: #fff;
  border: 1px solid #9a9a8c; border-radius: 6px; padding: 3px 6px 3px 5px; }
.ridecalc .rcpick img { width: 22px; height: 22px; object-fit: contain;
  image-rendering: pixelated; flex: none; }
.ridecalc .rcpick select { font-size: 15px; color: #333; border: none; background: none;
  outline: none; min-width: 8.5em; cursor: pointer; }
.ridecalc .rcreset { font-size: 15px; padding: 6px 16px; border: 1px solid #9a9a8c;
  border-radius: 6px; background: #fff; color: #333; cursor: pointer; margin-left: auto; }
.ridecalc .rcreset:hover { background: #f2f2ea; }
.ridecalc .rcout { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 4px 16px 16px; border-radius: 0 0 9px 9px; }
.ridecalc .rcpanel { min-width: 210px; }
.ridecalc .rcpanel h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #666;
  letter-spacing: .05em; }
.ridecalc .rcarrow { color: #8b8b7c; font-size: 22px; align-self: center; padding-top: 14px; }
.ridecalc .rccol { display: flex; flex-direction: column; gap: 4px; }
.ridecalc .rccol > div { display: flex; align-items: center; gap: 10px;
  background: var(--fc, #fff); border: 1px solid #000;
  border-left: 5px solid var(--fh, #000); border-radius: 5px;
  padding: 5px 10px; font-size: 15px; color: #333; }
.ridecalc .rccol b { font-weight: 700; flex: none; min-width: 2.6em; }
.ridecalc .rccol em { font-style: normal; font-size: 13px; color: #6b6b5e;
  font-variant-numeric: tabular-nums; }
.ridecalc .rccol .num { margin-left: auto; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.ridecalc .rccol .num.up { color: #2E7D32; }
.ridecalc .rccol .num.down { color: #C62828; }
.ridecalc .rccol .rcq { background: #fff; border-left-color: #8b8b7c; }
@media (max-width: 720px) {
  .ridecalc .rcarrow { display: none; }
  .ridecalc .rcpanel { flex: 1 1 100%; }
  .ridecalc .rcreset { margin-left: 0; }
}

.cbtafter { margin-top: 14px; }

.dimg { display: block; margin: 8px 0; max-width: 100%; object-fit: contain;
  image-rendering: pixelated; }

.dimg.cen { margin-left: auto; margin-right: auto; }

.iplain.withico .itico { width: 20px; height: 20px; object-fit: contain;
  image-rendering: pixelated; vertical-align: middle; margin-right: 3px; }
.iplain.withico { color: inherit; }
table.fxt.curryb, table.fxt.curryi, table.fxt.curryr, table.fxt.currys {
  width: 100%; table-layout: fixed; margin: 10px auto 4px; }
table.fxt.curryb { max-width: 820px; }
table.fxt.curryb th.w-fl { width: 11%; }
table.fxt.curryi { max-width: 760px; }
table.fxt.curryi th.w-sc { width: 7em; }
table.fxt.curryr { max-width: 900px; }
table.fxt.curryr th.w-lv { width: 22%; }
table.fxt.curryr th.w-sr { width: 26%; }
table.fxt.currys { max-width: 620px; }
table.fxt.curryb td, table.fxt.curryi td, table.fxt.curryr td, table.fxt.currys td {
  height: 40px; padding: 5px 10px; }
table.fxt.curryb td.dropname, table.fxt.curryi td.dropname { word-break: break-word; }

.crlv .crwrap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.crlv img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; flex: none; }
.crlv .crwrap > span { font-size: 16px; font-weight: 700; }

.ccalc { background: var(--fx-head); border: 3px solid var(--fx-border); border-radius: 11px;
  padding: 14px; margin: 12px auto 0; max-width: 900px;
  display: flex; flex-direction: column; gap: 12px; }
.ccin { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.ccblk { background: #fff; border-radius: 9px; padding: 10px 12px; }
.cbberry { flex: 1 1 440px; }
.cbing { flex: 0 1 230px; display: flex; flex-direction: column; gap: 8px; }
.cch { font-weight: 700; font-size: 15px; color: #323232; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px; }
.cch em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--ink-3); }

.cch .cbtn { margin: 0 0 0 auto; padding: 3px 10px; font-size: 13px; font-weight: 400; }

.cbgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 10px; }
.cbslot { display: flex; align-items: center; gap: 6px; }
.cbslot > i { font-style: normal; font-size: 12px; color: var(--ink-3); width: 1.4em;
  text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.csel { font-size: 14px; padding: 4px 6px; border: 1px solid var(--line-ctl); border-radius: 6px;
  background: #fff; min-width: 0; flex: 1 1 auto; }
.csel.wide { width: 100%; }

.csel.cbhidden { display: none; }

.cbslot .cmdcombo { flex: 1 1 auto; width: auto; min-width: 0; height: 28px; }
.cbing .cmdcombo { width: 100%; height: 28px; flex: none; }
.ccalc .cmdpop { max-width: 260px; }

.cbdish { font-size: 14px; line-height: 1.9; color: var(--ink-2); min-height: 28px; }
.cbdish .itico { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated;
  vertical-align: middle; margin-right: 4px; }

.cbdish .clnk { font-weight: 700; }
.cbtn { margin-top: auto; font-size: 14px; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--line-ctl); border-radius: 6px; background: #fff; }
.cbtn:hover { background: #F0F0EE; }

.ccout { background: #fff; border-radius: 9px; padding: 12px 14px;
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.cflav { flex: 1 1 380px; display: flex; flex-direction: column; gap: 5px; }
.cfrow { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cfrow .fn { width: 2.2em; text-align: center; border-radius: 4px; padding: 1px 0;
  font-weight: 700; color: #333; flex: none; }

.cfrow .cfb { flex: 1 1 auto; height: 12px; background: #F0F0EE; border-radius: 6px;
  overflow: hidden; }
.cfrow .cfb > i { display: block; height: 100%; width: 0; background: var(--fc);
  border-radius: 6px; transition: width .18s ease; }
.cfrow > b { width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.cchips { display: flex; gap: 10px; flex: 0 1 auto; }
.cchip { background: var(--fx-head); border-radius: 8px; padding: 7px 14px; text-align: center;
  min-width: 96px; }
.cchip span { display: block; font-size: 12px; color: var(--ink-2); }
.cchip b { display: block; font-size: 17px; color: #222; margin-top: 2px; white-space: nowrap; }
.cchip .itico { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated;
  vertical-align: middle; margin-right: 4px; }

.jcalc { max-width: 720px; }
.jcalc .cbgrid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cchips.wide { flex: 1 1 auto; }
.cchips.wide .cchip { flex: 1 1 0; min-width: 0; }

.cchips.wide .cchip b { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }

.rsgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px;
  padding: 10px 0 4px; }
.rscard2 { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 9px;
  text-decoration: none; color: inherit; line-height: 1.35; min-height: 56px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.rscard2:hover { transform: translateY(-2px); border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(27, 34, 44, .10); }
.rsico { width: 44px; height: 44px; flex: none; display: flex; align-items: center;
  justify-content: center; }
.rsico img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.rsn { font-size: 15px; font-weight: 700; color: var(--ink); min-width: 0;
  overflow-wrap: anywhere; }

.rscard { max-width: 520px; }
.rscard .bb .sfield { margin-bottom: 4px; }
.rscard .bb .sfield:last-child { margin-bottom: 0; }

.rscard .bb .sfield { align-items: baseline; }
.rscard .bb .sfield > .k { line-height: 1.7; }
.rline { display: block; line-height: 1.7; }
.rline + .rline { margin-top: 2px; }

.rline .pkico, .rline .itico { vertical-align: middle; }

table.fxt.rst { width: 100%; table-layout: fixed; max-width: 900px; margin: 10px auto 4px; }
table.fxt.rst th { padding: 5px 12px; height: 38px; }
table.fxt.rst th.w-rw { width: 34%; }
table.fxt.rst td { height: auto; padding: 8px 12px; line-height: 1.6; }

table.fxt.bigt { width: 100%; table-layout: fixed; margin: 0 auto; }
table.fxt.bigt th { padding: 5px 10px; height: 38px; }
table.fxt.bigt td { height: auto; padding: 8px 11px; vertical-align: middle; line-height: 1.6;
  word-break: break-word; }
table.fxt.bigt td .dp { margin: 0; line-height: 1.7; }
table.fxt.bigt td .dp + .dp { margin-top: 4px; }

table.fxt.bigt code { font-family: Consolas, 'Courier New', monospace; font-size: 13.5px;
  color: #333; word-break: break-all; white-space: pre-wrap; }

table.fxt.cmdt td:last-child code { display: block; }
table.fxt.cmdt td:last-child code + code { margin-top: .9em; }
table.fxt.ribt th.w-nm { width: 17%; }
table.fxt.ribt th.w-tt { width: 17%; }
table.fxt.ribt th.w-ds { width: 22%; }

.rbn img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated;
  vertical-align: middle; margin-right: 8px; }
.rbn > span { display: inline-block; vertical-align: middle; min-width: 0;
  max-width: calc(100% - 42px); }
.rbn b, .rbn em { display: block; }
.rbn em { font-style: normal; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }

table.fxt.qut th.w-nm { width: 15%; }
table.fxt.qut th.w-nd { width: 30%; }
table.fxt.qut th.w-aw { width: 20%; }
table.fxt.qut th.w-rp { width: 8.5%; }
.qname { position: relative; text-align: center; padding: 10px 8px !important; }
.qname .qtri { position: absolute; left: 0; top: 0; width: 0; height: 0;
  border-top: 20px solid var(--qc); border-right: 20px solid transparent; }
.qname b { display: block; font-weight: 400; }
.qname em { display: block; font-style: normal; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

tr.qhit > td { background: #FFF6D8; }
table.fxt.advt th.w-nm { width: 22%; }
table.fxt.advt td:first-child { text-align: center; }
table.fxt.cmdt th.w-cm { width: 27%; }
table.fxt.cmdt th.w-pm { width: 22%; }

table.fxt.cfgt th.w-ck { width: 29.6%; }
table.fxt.cfgt th.w-cd { width: 17%; }

table.fxt.juicek, table.fxt.juiceg { width: 100%; table-layout: fixed; margin: 10px auto 4px; }
table.fxt.juicek { max-width: 1120px; }

table.fxt.juicek th.w-ev { width: 16%; }
table.fxt.juicek th.w-ju { width: 13%; }
table.fxt.juicek td { height: auto; padding: 7px 10px; vertical-align: middle; }

table.fxt.juicek td.jc .dp { margin: 0; line-height: 2; }
table.fxt.juiceg { max-width: 560px; }
table.fxt.juiceg td { height: 40px; }
table.fxt.juiceg td.jh { background: var(--fx-head); font-weight: 700; }

.vagrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vacard .skico { width: 34px; height: 34px; background: transparent; }
.vacard .skico img { image-rendering: pixelated; }
.vacard { padding: 7px 10px; }

.introrow .introleft:empty { min-height: 0; }

.lootgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ltcard .skico { width: 48px; height: 48px; }

.ltcard .lsq { width: 40px; height: 40px; border-radius: 4px; background: var(--lc);
  border: 1px solid rgba(0, 0, 0, .18); }

.ltcard .lstars { display: flex; flex-wrap: wrap; justify-content: center;
  align-content: center; gap: 1px; max-width: 48px; }
.ltcard .lstars img { width: 15px; height: 15px; object-fit: contain; image-rendering: pixelated; }

table.fxt.loott { width: 100%; table-layout: fixed; max-width: 1000px; margin: 0 auto 4px; }
table.fxt.loott th { padding: 4px 12px; height: 38px; }
table.fxt.loott th.w-n, table.fxt.loott th.w-p { width: 22.2%; }
table.fxt.loott td { height: 42px; padding: 4px 12px; }
table.fxt.loott td.dropname { word-break: break-word; }
table.fxt.loott td.dropname .itico { width: 30px; height: 30px; }

.raidwrap { display: flex; flex-direction: column; gap: 18px; }
table.fxt.loott.raidt { margin: 0 auto; }

table.fxt.loott th .tcirc { margin-right: 6px; }

.lootempty { text-align: center; color: var(--ink-2); font-size: 15px; padding: 40px 0; }

.lspawnh { display: inline-flex; align-items: center; gap: 5px; }
.lspawnh .itico { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }

.lspawnh .clnk { line-height: 1; }

.dbody { max-width: none; }

@media (max-width: 900px) {
  .introrow { grid-template-columns: 1fr; }

  .dpage > .dbody > .fxsec:first-child,
  .mdpage > .fxsec:has(.mvside),
  .mdpage > .fxsec:has(.abside),
  .mdpage > .fxsec:has(.ibig):has(.introtext),
  .mdpage > .fxsec:has(.npcart) { display: flex; flex-direction: column; }

  .dpage > .dbody > .fxsec:first-child > h2,
  .mdpage > .fxsec:has(.mvside) > h2,
  .mdpage > .fxsec:has(.abside) > h2,
  .mdpage > .fxsec:has(.ibig):has(.introtext) > h2,
  .mdpage > .fxsec:has(.npcart) > h2 { order: 2; }

  .dpage > .dbody > .fxsec:first-child > .introrow,
  .mdpage > .fxsec:has(.mvside) > .introrow,
  .mdpage > .fxsec:has(.abside) > .introrow,
  .mdpage > .fxsec:has(.ibig):has(.introtext) > .introrow,
  .mdpage > .fxsec:has(.npcart) > .introrow { display: contents; }

  .dpage > .dbody > .fxsec:first-child > .introrow > .fxside,
  .mdpage > .fxsec:has(.mvside) > .introrow > .fxside,
  .mdpage > .fxsec:has(.abside) > .introrow > .fxside,
  .mdpage > .fxsec:has(.ibig):has(.introtext) > .introrow > .fxside,
  .mdpage > .fxsec:has(.npcart) > .introrow > .fxside {
    order: 1; width: 100%; max-width: 420px; margin: 0 auto 18px; }

  .dpage > .dbody > .fxsec:first-child > .introrow > .introtext,
  .mdpage > .fxsec:has(.mvside) > .introrow > .introleft,
  .mdpage > .fxsec:has(.abside) > .introrow > .introtext,
  .mdpage > .fxsec:has(.ibig):has(.introtext) > .introrow > .introleft,
  .mdpage > .fxsec:has(.npcart) > .introrow > .introtext {
    order: 3; padding-right: 0; }

  .mdpage .introleft > .introtext { padding-right: 0; }
  
  .mdpage .introleft > .introtext:not(:only-child) { min-height: 0; }
}

@media (max-width: 720px) {
  .dpage, .mdpage { padding: 4px 10px 32px; }
  
  .fxsec { margin-top: 16px; scroll-margin-top: calc(var(--tbh, 44px) + 8px); }
  .fxsec > h2 { font-size: 18px; }

  .fxsec { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  
  .fxsec:has(.cmdcombo), .fxsec:has(.ccalc) { overflow-x: visible; }
  
  .fxsec:has(.catchrow) { overflow-x: visible; }

  .resist { display: block; width: 100%; }
  .rescell { min-width: 0; }
  .restype { gap: 2px; padding: 3px 1px; font-size: 13px; line-height: 1.25; white-space: nowrap; }
  .restype::before { width: 18px; height: 18px; }
  .resval { font-size: 15px; padding: 4px 2px; }

  .fxside, .mvside { width: 100%; max-width: 420px; margin: 0 auto; }

  .m3dzoom { width: 34px; height: 34px; font-size: 17px; right: 6px; bottom: 6px; }
  .m3dovx { width: 36px; height: 36px; }
  .m3danim.big button { padding: 7px 15px; font-size: 14px; }
  
  .m3dov { padding: 0; }
  .m3dovin { width: 100%; height: 100%; max-height: none; border-radius: 0;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .m3dovbox { flex: 1; height: auto; min-height: 0; }

  .evowrap { align-items: stretch; gap: 8px; }
  .evocard { flex-direction: row; align-items: center; gap: 8px; padding: 8px; max-width: none; }
  .evon { width: 84px; }
  .evon .sp { width: 76px; height: 76px; }
  .evon .sp img { width: 66px; height: 66px; }
  .evon > span:last-child { font-size: 13px; }
  .evocond { flex: 1 1 0; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }

  .spawnwrap { flex-direction: column; }
  .spawnwrap > * { width: 100%; max-width: 100%; }
  .mdpage .spawncard { max-width: 100%; }

  .spawncard .bb .npcrow { min-height: 40px; }
  .spawncard .bb .npcrow + .npcrow { border-top: 1px solid #E6E8EA; }
  .spawncard .bb .npcrow .pkline { flex: 1 1 auto; min-width: 0; align-self: stretch; }
  .spawncard .bb .npcrow i { margin-left: auto; }

  .statgrid { flex-direction: column; }
  .statgrid .sbox.light, .statgrid .sbox.deep { width: 100%; min-width: 0; }

  .mcpanel { padding: 8px; gap: 6px; flex-wrap: wrap; justify-content: center; }
  
  .mcslot { width: 34px; height: 34px; }
  .mcslot img { width: 28px; height: 28px; }
  .mcslot > i { font-size: 11px; }
  
  .mcline { width: 34px; height: 24px; }
  .mcarrow { width: 26px; height: 26px; }

  .ivev, .cmdnum, .cmdtext { min-height: 40px; }

  .cmdcinp, .cmdnum, .cmdtext,
  .sbox.deep input.ivev, .sbox.deep .natsel { font-size: 16px; }
  
  .cmdcombo, .cbslot .cmdcombo, .cbing .cmdcombo { height: 40px; }
  .ccalc { padding: 10px; }
  .cbing { flex: 1 1 100%; }

  .dropname, .getln, .cell .cv, .introtext { overflow-wrap: anywhere; }
  
  .spawncard .bb .helditem .lnk { white-space: normal; overflow-wrap: anywhere; }

  .bcbar { margin-left: -10px; margin-right: -10px; }

  .mtab2, .mpsearch { box-sizing: border-box; min-height: 40px; font-size: 16px;
    display: inline-flex; align-items: center; }
  .mpsearch { max-width: 100%; }

  
  table.fxt.sta th:first-child { width: 28.6% !important; }
  table.fxt.sta th:last-child { width: 71.4% !important; }
  table.fxt.sta td.staname { padding: 6px 4px; }
  
  table.fxt.sta td.staname .stawrap { flex-direction: column; gap: 2px; text-align: center; }
  table.fxt.sta td.staname img { width: 34px; height: 34px; }
  table.fxt.sta td.staname b { font-size: 14px; }
  table.fxt.sta td.staname em { font-size: 11px; }
  table.fxt.sta td.staname .stawrap,
  table.fxt.sta td.staname .oneline { overflow-wrap: anywhere; }
  table.fxt.sta td.stadesc { padding: 7px 8px; }
  table.fxt.sta td.stadesc .dp { font-size: 14px; }

  .eggwrap { grid-template-columns: 1fr; overflow-x: visible; }
  table.fxt.egg { min-width: 0; font-size: 14px; }
  table.fxt.egg th, table.fxt.egg td { padding-left: 6px; padding-right: 6px; }
  table.fxt.egg th:first-child, table.fxt.egg td:first-child { width: 75%; }
  table.fxt.egg th.w-amt, table.fxt.egg td:last-child { width: 25%; }
  table.fxt.egg td.dropname { overflow-wrap: anywhere; }

  table.fxt.juicek th.w-ev, table.fxt.juicek td:first-child { width: 25%; }
  table.fxt.juicek th:nth-child(n+3) { width: 17.67%; }
  
  table.fxt.juicek th.w-ju { width: 22%; }
  table.fxt.juicek th, table.fxt.juicek td { padding: 6px 4px; font-size: 13px; }
  
  table.fxt.juicek td.jc { overflow-wrap: anywhere; font-size: 12px; line-height: 1.8; }
  table.fxt.juicek td.jc .dp { line-height: 1.8; }
  table.fxt.juicek td.jc img, table.fxt.juicek td.jc .itico { width: 18px; height: 18px; }

  table.fxt.fisht { min-width: 560px; }
  table.fxt.fisht th, table.fxt.fisht td { padding-left: 3px; padding-right: 3px; font-size: 13px; }
  table.fxt.fisht td.fishpal img { width: 26px; height: 26px; }

  table.fxt.ribt th.w-nm, table.fxt.ribt th.w-tt { width: 21.4%; }
  table.fxt.ribt th.w-ds { width: 28.6%; }
  table.fxt.bigt th, table.fxt.bigt td { padding-left: 6px; padding-right: 6px; }
  table.fxt.bigt td { overflow-wrap: anywhere; }

  .tcpick { gap: 8px; flex-wrap: nowrap; }
  .tcsel { min-width: 0; flex: 1 1 0; font-size: 16px; padding: 8px 8px; }

  .rsgrid { grid-template-columns: 1fr; gap: 8px; }

  table.fxt.bct td { overflow-wrap: anywhere; }
  table.fxt.bct th.w-mod, table.fxt.bct td:last-child { width: 8.5em; }

  .dpage table.fxt { width: 100%; min-width: 0; max-width: none; table-layout: fixed; }
  .dpage table.fxt th, .dpage table.fxt td {
    padding-left: 4px; padding-right: 4px; overflow-wrap: anywhere; }

  .dpage table.fxt.drop th, .dpage table.fxt.drop td { font-size: 13px; }
  .dpage table.fxt.drop th:nth-child(1), .dpage table.fxt.drop td:nth-child(1) { width: 42.9%; }
  .dpage table.fxt.drop th:nth-child(2), .dpage table.fxt.drop td:nth-child(2),
  .dpage table.fxt.drop th:nth-child(3), .dpage table.fxt.drop td:nth-child(3) { width: 21.4%; }
  .dpage table.fxt.drop th:nth-child(4), .dpage table.fxt.drop td:nth-child(4) { width: 14.3%; }

  .dpage table.fxt.abil th:first-child { width: 33.3% !important; }
  .dpage table.fxt.abil th:last-child { width: 66.7% !important; }
  .dpage table.fxt.abil td.abdesc { padding: 6px 7px; line-height: 1.6; }
  .dpage table.fxt.breed th:first-child { width: 75% !important; }
  .dpage table.fxt.breed th:last-child { width: 25% !important; }

  .dpage table.fxt.catchtbl .w-ball { width: 60%; }
  .dpage table.fxt.catchtbl .w-rate { width: 40%; min-width: 0; }
  .dpage .catchwrap { display: block; width: 100%; }
  
  .dpage .catchrow { flex-direction: column; gap: 10px; }
  .dpage .catchctl { order: -1; min-width: 0; width: 100%;
    top: calc(var(--tbh, 44px) + 4px); z-index: 5; }
  .dpage .catchtbl td.ballcell { padding: 5px 6px; }
  .dpage .catchtbl .ballcell .itico { margin-right: 4px; }
  .dpage .catchtbl .ballsign { padding-left: 0; font-size: 12px; }

  .dpage table.fxt.movepool { width: 100% !important; --tot: 13; }
  .dpage table.fxt.movepool:has(.w-lv),
  .dpage table.fxt.movepool:has(.w-parent) { --tot: 15; }
  .dpage table.fxt.movepool:has(.w-gen),
  .dpage table.fxt.movepool:has(.w-crystal) { --tot: 16; }
  .dpage .movepool .w-lv, .dpage .movepool .w-parent, .dpage .movepool .w-type,
  .dpage .movepool .w-cat, .dpage .movepool .w-num, .dpage .movepool .w-pp {
    width: calc(200% / var(--tot)); min-width: 0; }
  .dpage .movepool .w-name, .dpage .movepool .w-gen, .dpage .movepool .w-crystal {
    width: calc(300% / var(--tot)); min-width: 0; }
  .dpage .movepool th, .dpage .movepool td {
    padding-left: 2px; padding-right: 2px; font-size: 13px; }
  .dpage .movepool a.mvname { font-size: 13px; }
  .dpage .movepool td.mtc, .dpage .movepool td.mcc { font-size: 12px; padding: 2px; }
  .dpage .movepool .viewbtn { padding: 2px 5px; font-size: 12px; }
  .dpage .movepool td.gens { font-size: 12px; text-align: center; letter-spacing: 0; }
  .dpage .movepool td.crystal .itico { width: 22px; height: 22px; }
  .dpage .movepool .pchip img { width: 26px; height: 26px; }
}

@media (max-width: 400px) {
  .dpage, .mdpage { padding: 4px 8px 28px; }
  .bcbar { margin-left: -8px; margin-right: -8px; }
  
  .restype { font-size: 12px; gap: 1px; padding: 3px 0; }
  .restype::before { width: 15px; height: 15px; }
  .resval { font-size: 14px; }
}

.abthero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  margin-top: 6px; padding: 34px 24px 30px; border-radius: 18px;
  border: 1px solid #DCE2EA;
  background: linear-gradient(135deg, #F4F6FA 0%, #E9EEF5 52%, #DFE6F0 100%);
}

.abthero::after {
  content: ''; position: absolute; left: 50%; top: -180px; transform: translateX(-50%);
  z-index: 0;
  width: 520px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.abthico { position: relative; z-index: 1;
  flex: none; width: 92px; height: 92px; border-radius: 22px;
  background: #fff; border: 1px solid #E3E7EC;
  box-shadow: 0 4px 14px rgba(27, 34, 44, .10);
  display: flex; align-items: center; justify-content: center; }

.abthico img { width: 64px; height: 64px; image-rendering: pixelated; }
.abthnm { position: relative; z-index: 1; margin: 0; font-size: 28px; font-weight: 700;
  letter-spacing: .5px; color: #232A34; line-height: 1.3; }

.abtgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px; }
.abtcard { display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit; background: #fff;
  border: 1px solid #E3E7EC; border-radius: 14px; padding: 20px 12px 15px;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.abtcard:hover { border-color: var(--c); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(27, 34, 44, .12); }

.abtico { width: 64px; height: 64px; margin-bottom: 11px;
  display: flex; align-items: center; justify-content: center; }
.abtico img { max-width: 100%; max-height: 100%; object-fit: contain;
  transition: transform .15s; }
.abtcard:hover .abtico img { transform: scale(1.07); }
.abtnm { font-size: 14.5px; font-weight: 700; color: #1B222C;
  text-align: center; line-height: 1.4; }
.abthost { font-style: normal; font-family: var(--mono); font-size: 11.5px;
  color: #97A1B0; margin-top: 3px; }

.abtlegal { background: #fff; border: 1px solid #E3E7EC; border-radius: 14px;
  padding: 18px 20px; }
.abtlegal p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.85; color: #4A5568; }
.abtlegal p:last-child { margin-bottom: 0; }
.abtlegal strong { color: #1B222C; font-weight: 700; }
.abtlegal a { color: var(--link, #2B6CB0); text-decoration: none; }
.abtlegal a:hover { text-decoration: underline; }

@media (min-width: 1400px) {
  .abthero { padding: 40px 24px 34px; }
  .abthico { width: 124px; height: 124px; border-radius: 28px; }
  .abthico img { width: 96px; height: 96px; }
  .abthnm { font-size: 32px; }
  .abtcard { padding: 26px 14px 19px; }
  .abtico { width: 78px; height: 78px; margin-bottom: 13px; }
  .abtnm { font-size: 15.5px; }
}

@media (max-width: 720px) {
  .abthero { gap: 12px; padding: 24px 16px 22px; border-radius: 15px; }
  .abthico { width: 80px; height: 80px; border-radius: 19px; }
  .abthnm { font-size: 20px; }
  
  .abtgrid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
  .abtcard { padding: 14px 7px 11px; border-radius: 12px; }
  .abtico { width: 46px; height: 46px; margin-bottom: 8px; }
  .abtnm { font-size: 13px; }
  .abthost { font-size: 10.5px; }
}

@media (max-width: 400px) {
  .abthost { display: none; }
}

table.fxt.breedenv { width: 100%; max-width: 620px; min-width: 0; margin-bottom: 16px; }
table.fxt.breedenv td:first-child { border-right: 1px solid #000; }
table.fxt.breedenv th:first-child { width: 78%; }
table.fxt.breedenv td.dropname .itico { width: 26px; height: 26px; }

table.fxt.eggenv td:first-child { border-right: 1px solid #000; }

.ridebox { width: 520px; max-width: 100%; margin-bottom: 12px; }
.ridebox .sh em { font-style: normal; font-weight: 400; color: #555; margin-left: 10px;
  font-size: 13px; }

.ridebox .srow .lb { width: 124px; }
.ridebox .srow .tk { padding-right: 6px; }

.cfgt .w-cs { width: 78px; }
.cfgt .cfgzh { display: block; margin-top: 2px; color: #6B7A63; font-size: 12.5px; }
.cfgt .cfgside { display: inline-block; padding: 1px 7px; border-radius: 9px;
  font-size: 12px; white-space: nowrap; }
.cfgt .cfgside.s { background: #E3EDE0; color: #3D5A3A; }
.cfgt .cfgside.c { background: #E6EAF3; color: #3C4A6B; }
@media (max-width: 720px) {
  .cfgt .w-cs { width: auto; }
  .cfgt .cfgzh { font-size: 11.5px; }
}
