/* These pages use anchors where the app uses buttons, and a blanket colour:inherit on links
   was overriding what .btn sets - so the call to action came out amber with white text on it.
   A link inherits colour only where it has not been given one. */
.dlink{text-decoration:none}
/* what drops it: two across on a desktop, one on a phone */
.dctasub{display:block;max-width:260px;margin-top:8px;font-size:var(--t-text);color:var(--tx3);
  line-height:1.45}
/* what to bring is the app's own component (.binv); under it, what the wiki's strategy guide names
   that is not already in the bag */
.binvx{display:grid;gap:8px;margin-top:18px}
.dropgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(376px,1fr));gap:8px}
.dropr{display:grid;grid-template-columns:44px minmax(0,1fr) 46px 132px;gap:14px;
  align-items:center;padding:10px 14px;border-radius:var(--rs);background:var(--s1);
  color:inherit;text-decoration:none}
a.dropr:hover{background:var(--s2)}
.dropr .art{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.dropr .art img{max-width:44px;max-height:44px;object-fit:contain}
.dropr .t{display:grid;gap:2px;min-width:0}
.dropr .t b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dropr .t em{font-style:normal;font-family:var(--mono);font-size:var(--t-meta);color:var(--tx3)}
.dropr .qq{font-family:var(--mono);font-size:var(--f1);color:var(--tx3);text-align:right}
.dropr .rt{display:grid;gap:5px;justify-items:end}
.dropr .rt b{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--acc)}
.dropr .rbar{display:block;width:100%;height:3px;border-radius:2px;background:var(--s3)}
.dropr .rbar i{display:block;height:100%;border-radius:2px;background:var(--acc)}
@media(max-width:700px){.dropr{grid-template-columns:40px minmax(0,1fr) 108px}
  .dropr .qq{display:none}}
.chips .stat-chip{text-decoration:none}
.chips .coin,.chips .bskt{width:19px;height:19px;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.chips .coin{background-image:var(--ic-coin)}
/* the same coin stack, for a price beside its label */
.sicon.ic-coin{background-image:var(--ic-coin)}
.chips .bskt{background-image:var(--ic-ge)}
.logo.dlink,.stat-chip.dlink{color:inherit}
a.btn{display:inline-flex;align-items:center;color:var(--ctaTx)}
a.btn:hover{color:var(--ctaTx)}
.dnav{display:flex;gap:5px;padding:5px;background:var(--s1);border-radius:12px;margin-top:18px;
  overflow-x:auto;scrollbar-width:none}
.dnav::-webkit-scrollbar{display:none}
.dnav .vtab{text-decoration:none}
.dcrumb{font-size:var(--f0);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);
  margin:18px 0 0}
.dcrumb a{color:var(--tx3);text-decoration:none}
.dcrumb a:hover{color:var(--acc)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:9px}
.dtile{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:10px 12px;border-radius:var(--rs);background:var(--s1);text-decoration:none;color:inherit}
.dtile:hover{background:var(--s2)}
.dtile img{width:38px;height:38px;object-fit:contain}
.dtile b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dtile em{font-style:normal;font-size:var(--t-meta);color:var(--tx3)}
.dtile .n{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--accTx)}
/* a quest's rewards say what each one unlocks - a sentence, so it is set as one */
.dfr .dtile em{font-size:var(--t-text);line-height:1.45}
.dtbl{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:var(--f2)}
.dtbl td{background:var(--s1);padding:9px 12px}
.dtbl td:first-child{border-radius:var(--rs) 0 0 var(--rs)}
.dtbl td:last-child{border-radius:0 var(--rs) var(--rs) 0;text-align:right;font-family:var(--mono);
  font-weight:700}
.dcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:14px;align-items:start}
.dchips{display:flex;gap:6px;flex-wrap:wrap}
.dchip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:99px;
  background:var(--s2);font-size:var(--f1);font-weight:600;color:var(--tx2)}
.dchip img,.dchip .sicon{width:22px;height:22px;object-fit:contain;flex:none}
.dprose{font-size:var(--t-body);line-height:1.75;color:var(--tx2);max-width:78ch;margin:0}
.dsrc{font-size:var(--t-text);color:var(--tx3);margin:10px 0 0}
.dsrc a{color:var(--tx3)}
/* An item sprite is 36px in a 150px frame and has to be scaled up to be seen; a boss portrait
   is already big and scaling it only crops the boss. Only the item page asks for it. */
.hero .por{overflow:hidden}
.hero .por img{max-width:138px;max-height:138px;width:auto}
.hero .por.item img{image-rendering:pixelated;transform:scale(2.2);transform-origin:center}
/* a real render needs no scaling and no pixel snapping - it needs room */
.hero .por.item.big{width:200px;height:200px;display:grid;place-items:center}
.hero .por.item.big img{max-width:200px;max-height:200px;width:auto;height:auto;
  image-rendering:auto;transform:none}
.dex{font-size:var(--t-lede);line-height:1.6;color:var(--tx2);margin:9px 0 0;max-width:70ch;
  font-style:italic}
.pchart{padding:var(--pad);border-radius:var(--r);background:var(--s1);display:grid;gap:13px}
.pch{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pcnow{display:flex;align-items:baseline;gap:10px;flex:1}
.pcnow b{font-family:var(--mono);font-size:var(--f6);font-weight:700;letter-spacing:-.03em}
.pcnow .up{color:var(--good);font-size:var(--f2);font-weight:700}
.pcnow .down{color:var(--stM);font-size:var(--f2);font-weight:700}
.pcrange{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--s2)}
.pcrange button{padding:5px 12px;border-radius:7px;font-size:var(--f1);font-weight:700;
  color:var(--tx3);font-family:var(--mono)}
.pcrange button:hover{color:var(--tx)}
.pcrange button.on{background:var(--s3);color:var(--tx)}
.pcwrap{position:relative;height:260px;color:var(--tx)}
.pcsvg{width:100%;height:100%;display:block;overflow:visible}
.pcgrid{position:absolute;inset:0;pointer-events:none}
.pcgrid span{position:absolute;right:2px;transform:translateY(-50%);font-family:var(--mono);
  font-size:var(--t-meta);color:var(--tx3);background:color-mix(in srgb,var(--s1) 86%,transparent);
  padding:0 4px;border-radius:4px}
.pcline{position:absolute;top:0;bottom:0;width:1px;background:var(--acc);opacity:.45;
  pointer-events:none}
.pctip{position:absolute;z-index:3;display:grid;gap:1px;padding:7px 11px;border-radius:9px;
  background:var(--s3);box-shadow:var(--sh2);pointer-events:none;white-space:nowrap}
.pctip b{font-family:var(--mono);font-size:var(--f2);font-weight:700}
.pctip span{font-size:var(--t-meta);color:var(--tx3)}
.pcx{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--t-meta);
  color:var(--tx3)}
.dsrctbl td:last-child{text-align:right}
.dsrctbl td.lv,.dsrctbl td.q{font-family:var(--mono);text-align:right;color:var(--tx3);
  border-radius:0}
/* prose on the left at a readable measure, the adjustments beside it rather than after it */
/* three panels of icon / name / number, which is how the game shows these */
/* four panels of different lengths top-aligned are four different heights */
.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:10px}
.dstat{padding:14px 15px 15px;border-radius:var(--r);background:var(--s1);display:grid;gap:7px;
  align-content:start}
.dsrow{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center}
.dsrow .sicon{width:18px;height:18px}
.dsrow .nm{font-size:var(--f2);color:var(--tx2)}
.dsrow .v{font-family:var(--mono);font-size:var(--f2);font-weight:700}
.dsrow .v.up{color:var(--good)}
.dsrow .v.down{color:var(--stM)}
.dfight{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.85fr);gap:18px;
  align-items:start}
@media(max-width:900px){.dfight{grid-template-columns:1fr}}
.dfp{padding:var(--pad) calc(var(--pad) + 4px);border-radius:var(--r);background:var(--s1);
  display:grid;gap:12px}
.dlede{font-size:var(--t-lede);line-height:1.65;color:var(--tx);margin:0;max-width:56ch;
  letter-spacing:-.005em}
.dfp .dprose{font-size:var(--t-body);line-height:1.85;color:var(--tx2);margin:0;max-width:62ch}
.dfp .dsty b{color:var(--accTx)}
.dfp .dwarn{color:var(--warn)}
.dfr{display:grid;gap:8px;align-content:start}
.dfr .mlbl{margin-bottom:1px}
.drules{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:9px}
.drule{padding:13px 15px;border-radius:var(--rs);background:var(--s1);display:grid;gap:4px}
.drule b{font-size:var(--f2);font-weight:700;color:var(--accTx)}
.drule span{font-size:var(--t-text);line-height:1.6;color:var(--tx3)}
/* an equipment grid and an inventory are 480px of content; a 1400px page holds
   two of them side by side and was holding one */
/* A quest page's rank rows carry one more column than a boss page's: what the fight is worth
   best in slot, and then what it is worth to the reader, which only the app can fill in. On the
   static file that last cell says which of the two the number above it is.
   Written .drow.dqrow rather than .dqrow because .drow sets the same property one block below
   this one, and one class does not beat one class - it beats it on source order, which put the
   last two cells of every row onto a line of their own. */
.drow.dqrow{grid-template-columns:26px 34px minmax(0,1fr) auto auto auto}
.dqrow .sicon{width:26px;height:26px}
.dqrow .dp{font-family:var(--mono);font-size:var(--t-text);font-weight:700;color:var(--accTx)}
.dqrow .mine{font-family:var(--mono);font-size:var(--t-meta);color:var(--tx3);white-space:nowrap;
  text-align:right;min-width:13ch}
.dqrow .mine.yours{color:var(--good)}
/* the two right-hand cells are the first thing to go on a phone, and they are named as direct
   children so the duplicate-selector check can tell this block from the one above it */
@media(max-width:720px){.drow.dqrow{grid-template-columns:26px 34px minmax(0,1fr) auto}
  .dqrow>.pr,.dqrow>.mine{display:none}}
.drank{display:grid;gap:5px}
.drow{display:grid;grid-template-columns:26px 30px minmax(0,1fr) auto auto;gap:12px;
  align-items:center;padding:9px 13px;border-radius:var(--rs);background:var(--s1);
  text-decoration:none;color:inherit}
.drow:hover{background:var(--s2)}
.drow.me{background:var(--s3)}
.drow.me .nm{color:var(--accTx)}
.drow .rk{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx3);
  text-align:right}
.drow img{width:30px;height:30px;object-fit:contain}
.drow .nm{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.drow .pr{font-family:var(--mono);font-size:var(--t-meta);color:var(--tx3)}
.drow .dp{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--accTx);
  min-width:52px;text-align:right}
/* the pick, then what you would put there instead */
.dopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.dopt{padding:13px 14px;border-radius:var(--r);background:var(--s1);display:grid;gap:9px}
.doh .sl{font-size:var(--f0);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3)}
.doh .pick{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;
  margin-top:6px;text-decoration:none;color:inherit}
.doh .pick img{width:34px;height:34px;object-fit:contain}
.doh .pick b{font-size:var(--f2);font-weight:700;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.doh .pick em{font-style:normal;font-family:var(--mono);font-size:var(--t-meta);color:var(--tx3)}
.doh .pick .dp{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--accTx)}
.doh .pick:hover b{color:var(--accTx)}
.dalts{display:grid;gap:3px}
.alt{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:9px;align-items:center;
  padding:6px 8px;border-radius:8px;background:var(--s2);text-decoration:none;color:inherit}
.alt:hover{background:var(--s3)}
.alt img{width:24px;height:24px;object-fit:contain}
.alt .nm{font-size:var(--t-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.alt .pr{font-family:var(--mono);font-size:var(--t-meta);color:var(--tx3)}
.alt .ls{font-family:var(--mono);font-size:var(--t-meta);font-weight:700;color:var(--warn);
  min-width:6ch;text-align:right}
.dsetups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));gap:12px}
.dsetups.slim{grid-template-columns:repeat(auto-fill,minmax(224px,1fr));margin-top:12px}
.dsetups.slim .dsh h3{font-size:var(--f2)}
.dsetup{padding:var(--pad);border-radius:var(--r);background:var(--s1);display:grid;gap:12px}
.dsh h3{font-size:var(--f3);letter-spacing:-.01em}
.dscols{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.dscols>div{display:grid;gap:7px;justify-items:center}
/* the game's inventory: four across, seven down, twenty-eight slots */
.inv{display:grid;grid-template-columns:repeat(4,44px);gap:4px;padding:10px;
  background:var(--slotDeep);border-radius:var(--rs)}
.inv i{position:relative;width:44px;height:44px;border-radius:7px;background:var(--slot);display:grid;
  place-items:center;overflow:hidden}
.inv i em{position:absolute;top:2px;left:4px;font-style:normal;font-family:var(--mono);font-size:var(--f0);
  font-weight:700;line-height:1;color:var(--accTx)}
.inv i img{max-width:34px;max-height:34px;object-fit:contain}
.inv i b{display:none}
.badge img{width:15px;height:15px;object-fit:contain}