/* Scoped to .dc-app; all classes prefixed dc- to avoid Bootstrap collisions.
   Colour tokens (--pp-*) come from the site stylesheet. */
.dc-app { --dc-r:14px; max-width:620px; margin:0 auto; }
.dc-app *{ box-sizing:border-box; }

.dc-head{ margin:4px 2px 18px; }
.dc-head h1{ margin:0 0 6px; font-size:26px; letter-spacing:-.01em; }
.dc-head h1 .tag{ font-size:12px; color:var(--pp-text-faint); font-weight:500; letter-spacing:.12em; text-transform:uppercase; vertical-align:middle; }
.dc-head p{ margin:0; color:var(--pp-text-muted); font-size:14px; }
.dc-prov{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; color:var(--pp-text-faint); }
.dc-prov .dot{ width:6px; height:6px; border-radius:50%; background:var(--pp-green); box-shadow:0 0 8px var(--pp-green); }

.dc-sheet{ display:flex; flex-direction:column; gap:12px; }
.dc-col{ display:contents; }
.dc-sheet [data-sec="character"]{ order:1; } .dc-sheet [data-sec="equip"]{ order:2; } .dc-sheet [data-sec="skills"]{ order:3; }
.dc-sheet [data-sec="buffs"]{ order:4; }

/* ---- collapsible section ---- */
.dc-section{ background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:var(--dc-r); overflow:hidden; }
.dc-section.req{ border-color:var(--pp-gold-dim); box-shadow:0 0 0 1px var(--pp-gold-glow); }
.dc-shead{ width:100%; display:flex; align-items:center; gap:12px; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:15px 16px; transition:background .15s; }
.dc-shead:hover{ background:var(--pp-bg-hover); }
.dc-shead:focus-visible{ outline:2px solid var(--pp-gold); outline-offset:-2px; }
.dc-sic{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; background:var(--pp-bg-raised); font-size:15px; filter:saturate(.6) opacity(.9); }
.dc-stitle{ font-size:15px; font-weight:600; flex:0 0 auto; }
.dc-badge{ margin-left:auto; font-size:12px; padding:4px 10px; border-radius:999px; white-space:nowrap; max-width:52%; overflow:hidden; text-overflow:ellipsis;
  background:var(--pp-bg-raised); border:1px solid var(--pp-border); color:var(--pp-text-muted); }
.dc-badge.set{ color:var(--pp-text); border-color:var(--pp-border-light); }
.dc-badge.req{ color:var(--pp-gold); border-color:var(--pp-gold-dim); background:var(--pp-gold-glow); }
.dc-badge.none{ color:var(--pp-text-faint); }
.dc-scaret{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--pp-gold-dim); background:var(--pp-bg-raised); border:1px solid var(--pp-border); transition:transform .2s, background .15s, color .15s, border-color .15s; }
.dc-shead:hover .dc-scaret{ color:var(--pp-gold); background:var(--pp-bg-hover); border-color:var(--pp-gold-dim); }
.dc-section.open .dc-scaret{ transform:rotate(90deg); color:var(--pp-gold); border-color:var(--pp-gold-dim); }
.dc-sbody{ display:none; border-top:1px solid var(--pp-border); }
.dc-section.open .dc-sbody{ display:block; }
/* closed section: what is on in it, read-only; the whole strip opens the section */
.dc-ssum{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--pp-border);
  color:inherit; font:inherit; cursor:pointer; padding:10px 16px 12px; transition:background .15s; }
.dc-ssum:hover{ background:var(--pp-bg-hover); }
.dc-ssum:focus-visible{ outline:2px solid var(--pp-gold); outline-offset:-2px; }
.dc-chip{ font-size:12px; line-height:1.3; padding:3px 9px; border-radius:999px; background:var(--pp-bg-raised); border:1px solid var(--pp-border); color:var(--pp-text-muted); white-space:nowrap; }
.dc-chip b{ color:var(--pp-gold); font-weight:600; }
.dc-chip.more{ color:var(--pp-text-faint); border-style:dashed; }
.dc-ssum-edit{ margin-left:auto; font-size:12px; font-weight:600; color:var(--pp-gold); padding:3px 2px 3px 8px; }
.dc-ssum:hover .dc-ssum-edit{ text-decoration:underline; }
.dc-section.open .dc-ssum{ display:none; }

/* rows inside a section */
.dc-srow{ width:100%; display:flex; align-items:center; gap:12px; background:none; border:0; border-top:1px solid var(--pp-border); color:inherit; font:inherit; text-align:left; cursor:pointer; padding:14px 18px; transition:background .15s; }
.dc-sbody .dc-srow:first-child{ border-top:0; }
.dc-srow:hover{ background:var(--pp-bg-hover); }
.dc-srow:focus-visible{ outline:2px solid var(--pp-gold); outline-offset:-2px; }
.dc-srl{ font-size:14px; color:var(--pp-text); }
.dc-srl .hint{ display:block; font-size:11.5px; color:var(--pp-text-faint); margin-top:1px; }
.dc-srv{ margin-left:auto; font-size:14px; font-weight:600; color:var(--pp-gold); text-align:right; }
.dc-srv.empty{ color:var(--pp-text-faint); font-weight:500; }
.dc-chev{ flex:0 0 auto; color:var(--pp-text-faint); display:flex; }

/* rich rows (class / weapon / target featured) */
.dc-frow{ width:100%; display:flex; align-items:center; gap:14px; background:none; border:0; border-top:1px solid var(--pp-border); color:inherit; font:inherit; text-align:left; cursor:pointer; padding:15px 18px; transition:background .15s; }
.dc-sbody .dc-frow:first-child{ border-top:0; }
.dc-frow:hover{ background:var(--pp-bg-hover); }
.dc-mono{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:16px; color:#20190b; background:linear-gradient(150deg,var(--pp-gold),var(--pp-gold-dim)); flex:0 0 auto; }
.dc-mono.pink{ background:linear-gradient(150deg,var(--pp-pink),var(--pp-pink-dim)); color:#241016; }
.dc-mono.ghost{ background:var(--pp-bg-raised); color:var(--pp-text-faint); border:1px dashed var(--pp-border-light); }
.dc-mono.jobchip{ position:relative; overflow:hidden; }
.dc-mono.jobchip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.dc-mono.jobchip.hasimg{ background:var(--pp-bg-raised); }
.dc-mono.jobchip.hasimg .mg{ display:none; }
.dc-jobsprite{ height:60px; width:auto; max-width:80px; object-fit:contain; object-position:bottom; image-rendering:pixelated; align-self:flex-end; margin-right:4px; flex:0 0 auto; opacity:0; transition:opacity .2s; }
.dc-jobsprite.on{ opacity:1; }
.dc-fbody{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dc-k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--pp-text-faint); margin-bottom:3px; }
.dc-v{ font-size:16px; font-weight:600; color:var(--pp-text); }
.dc-v.empty{ color:var(--pp-text-muted); font-weight:500; }
.dc-sub{ font-size:12.5px; color:var(--pp-text-muted); margin-top:2px; }

.dc-slabel{ display:flex; align-items:baseline; gap:10px; padding:13px 18px 4px; border-top:1px solid var(--pp-border); }
.dc-slabel .hint{ font-size:11px; color:var(--pp-text-faint); }
.dc-statlist{ display:flex; flex-direction:column; }
.dc-statrow{ display:flex; align-items:center; gap:8px; width:100%; padding:0 10px 0 0; transition:background .12s; }
.dc-statmain{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-align:left; background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:11px 0 11px 18px; }
.dc-statrow + .dc-statrow{ border-top:1px solid var(--pp-border); }
.dc-statrow:hover{ background:var(--pp-bg-hover); }
.dc-statmain:focus-visible{ outline:2px solid var(--pp-gold); outline-offset:-2px; }
.dc-statk{ font-size:13px; font-weight:700; letter-spacing:.06em; width:38px; flex:0 0 auto; }
.dc-statd{ flex:1; font-size:12.5px; color:var(--pp-text-faint); }
.dc-statv{ font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--pp-text); white-space:nowrap; }
.dc-statv .jb{ color:var(--pp-green); font-weight:600; }
.dc-statv .tot{ color:var(--pp-text-faint); font-weight:500; margin-left:6px; }
/* mouse: the base value is an input beside the stat's name button */
.dc-statrow.typed .dc-statmain{ flex:0 0 auto; padding-right:6px; }
.dc-statrow.typed .dc-statd{ display:none; }   /* no room beside the input; the name's tooltip has it */
.dc-statrow.typed .dc-statk{ width:38px; }   /* same width every row, so the inputs line up */
.dc-statrow.typed .dc-statv{ display:flex; align-items:center; gap:2px; flex:0 1 auto; min-width:0; }
.dc-statrow.typed .dc-inl{ margin-left:auto; }
/* the three-column desktop gives a stat ~200px: fixed-width input, small text, the - / +
   stacked into one narrow spinner beside it */
.dc-statrow.typed{ gap:4px; padding-right:6px; }
.dc-statrow.typed .dc-statmain{ padding-left:12px; padding-right:2px; }
.dc-statrow.typed .dc-statk{ width:34px; }
.dc-statrow.typed .dc-statin{ flex:0 0 40px; width:40px; }
.dc-statrow.typed .dc-statv .jb, .dc-statrow.typed .dc-statv .tot{ font-size:13px; white-space:nowrap; }
.dc-statrow.typed .dc-statv .jb{ margin-left:3px; }
.dc-statrow.typed .dc-statv .tot{ margin-left:4px; }
.dc-statrow.typed .dc-inl{ flex-direction:column; gap:2px; }
.dc-statrow.typed .dc-inl button{ width:18px; height:13px; border-radius:4px; font-size:11px; line-height:1; padding:0; }
.dc-statin{ width:46px; text-align:center; font:inherit; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--pp-gold);
  background:var(--pp-bg-raised); border:1px solid var(--pp-border); border-radius:8px; padding:3px 2px; outline:none; -moz-appearance:textfield; }
.dc-statin::-webkit-inner-spin-button, .dc-statin::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.dc-statin:hover{ border-color:var(--pp-border-light); }
.dc-statin:focus{ border-color:var(--pp-gold); box-shadow:0 0 0 1px var(--pp-gold-glow) inset; }
.dc-drow{ width:100%; display:flex; align-items:baseline; gap:10px; background:none; border:0; border-top:1px solid var(--pp-border); color:var(--pp-text-muted); font:inherit; text-align:left; cursor:pointer; padding:13px 18px; }
.dc-drow:hover{ background:var(--pp-bg-hover); color:var(--pp-text); }
.dc-drow .hint{ font-size:11px; color:var(--pp-text-faint); }
.dc-drow .dc-scaret{ margin-left:auto; align-self:center; }
.dc-drow:hover .dc-scaret{ color:var(--pp-gold); background:var(--pp-bg-hover); border-color:var(--pp-gold-dim); }
.dc-drow.open .dc-scaret{ transform:rotate(90deg); color:var(--pp-gold); border-color:var(--pp-gold-dim); }
.dc-derived{ display:none; grid-template-columns:1fr 1fr; gap:1px; background:var(--pp-border); border-top:1px solid var(--pp-border); }
.dc-derived.open{ display:grid; }
.dc-dcell{ background:var(--pp-bg-surface); padding:10px 14px; display:flex; align-items:center; gap:8px; }
.dc-dcell .dl{ font-size:12px; color:var(--pp-text-muted); flex:1; min-width:0; }
.dc-dcell .dv{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--pp-text); }
.dc-dcell .dfrom{ font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--pp-text-faint); border:1px solid var(--pp-border); border-radius:4px; padding:1px 4px; flex:0 0 auto; }

/* ---- result ---- */
.dc-result{ background:radial-gradient(500px 200px at 100% -60px, var(--pp-gold-glow), transparent 70%), var(--pp-bg-surface); border:1px solid var(--pp-border-light); border-radius:var(--dc-r); overflow:hidden; display:none; }
.dc-result.show{ display:block; animation:dcfade .4s ease; }
@keyframes dcfade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.dc-rhead{ padding:18px 20px 6px; display:flex; align-items:center; gap:10px; }
.dc-eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--pp-gold-dim); }
.dc-factors{ margin-left:auto; font-size:11.5px; color:var(--pp-text-faint); }
.dc-dmgline{ display:flex; align-items:flex-end; gap:14px; padding:2px 20px 14px; flex-wrap:wrap; }
.dc-big{ font-size:52px; font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.dc-big .unit{ font-size:15px; font-weight:600; color:var(--pp-text-muted); margin-left:6px; }
.dc-rng{ color:var(--pp-text-muted); font-size:13px; padding-bottom:6px; font-variant-numeric:tabular-nums; }
.dc-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 16px; }
.dc-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; padding:6px 11px; border-radius:999px; background:var(--pp-bg-raised); border:1px solid var(--pp-border); }
.dc-chip b{ font-weight:700; font-variant-numeric:tabular-nums; }
.dc-chip .cd{ width:7px; height:7px; border-radius:50%; }
.dc-chip.crit .cd{ background:var(--pp-pink); } .dc-chip.hit .cd{ background:var(--pp-green); } .dc-chip.dps .cd{ background:var(--pp-gold); }
.dc-math{ border-top:1px solid var(--pp-border); }
.dc-math > button{ width:100%; display:flex; align-items:center; gap:10px; background:none; border:0; color:var(--pp-text-muted); font:inherit; font-size:13px; cursor:pointer; padding:14px 20px; }
.dc-math > button:hover{ color:var(--pp-text); }
.dc-math > button .caret{ transition:transform .2s; display:flex; }
.dc-math.open > button .caret{ transform:rotate(90deg); }
.dc-ledger{ display:none; padding:2px 12px 14px; }
.dc-math.open .dc-ledger{ display:block; }
.dc-step{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:9px 10px; border-radius:8px; }
.dc-step:hover{ background:var(--pp-bg-raised); }
.dc-step .nm{ font-size:13.5px; } .dc-step .val{ font-size:13.5px; font-weight:600; align-self:center; font-variant-numeric:tabular-nums; }
.dc-step .src{ grid-column:1 / -1; font-size:11.5px; color:var(--pp-text-faint); margin-top:1px; }
.dc-step .src code{ color:var(--pp-gold-dim); font-family:ui-monospace,Menlo,monospace; font-size:11px; }
.dc-step.final{ border-top:1px dashed var(--pp-border-light); margin-top:4px; padding-top:12px; }
.dc-step.final .nm{ font-weight:700; } .dc-step.final .val{ color:var(--pp-gold); font-size:16px; }
.dc-hint{ text-align:center; color:var(--pp-text-faint); font-size:13px; padding:22px 12px 4px; }
.dc-hint b{ color:var(--pp-text-muted); font-weight:600; }

/* ---- modal / bottom-sheet ---- */
.dc-scrim{ position:fixed; inset:0; background:rgba(10,8,6,.6); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .22s; z-index:1090; }
.dc-scrim.show{ opacity:1; pointer-events:auto; touch-action:none; }
.dc-modal{ position:fixed; z-index:1100; left:0; right:0; bottom:0; background:var(--pp-bg-body); border:1px solid var(--pp-border); border-radius:20px 20px 0 0; max-height:86vh; max-height:86dvh; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .28s cubic-bezier(.22,.61,.36,1); box-shadow:0 -20px 60px rgba(0,0,0,.5); pointer-events:none; }
.dc-modal.show{ transform:none; pointer-events:auto; }
.dc-grip{ width:38px; height:4px; border-radius:2px; background:var(--pp-border-light); margin:10px auto 4px; flex:0 0 auto; }
.dc-mhead{ padding:6px 20px 12px; display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.dc-mhead h3{ margin:0; font-size:18px; }
.dc-x{ margin-left:auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--pp-border); background:var(--pp-bg-surface); color:var(--pp-text-muted); cursor:pointer; }
.dc-x:hover{ color:var(--pp-text); background:var(--pp-bg-hover); }
.dc-mbody{ overflow-y:auto; padding:4px 16px 26px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.dc-mnote{ color:var(--pp-text-faint); font-size:12px; margin:0 4px 12px; }
.dc-mnote a{ color:var(--pp-gold); font-weight:600; }
.dc-list + .dc-mnote{ margin-top:8px; }

.dc-search{ display:flex; align-items:center; gap:9px; margin:0 4px 12px; padding:11px 13px; background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:11px; }
.dc-search input{ flex:1; background:none; border:0; color:var(--pp-text); font:inherit; font-size:15px; outline:none; }
.dc-search svg{ color:var(--pp-text-faint); flex:0 0 auto; }

.dc-pickgrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0 4px; }
.dc-pick{ display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:12px; padding:12px 13px; color:inherit; font:inherit; }
.dc-pick:hover{ border-color:var(--pp-border-light); background:var(--pp-bg-hover); }
.dc-pick.sel{ border-color:var(--pp-gold); box-shadow:0 0 0 1px var(--pp-gold-glow) inset; }
.dc-pick .nm{ font-size:14px; font-weight:600; }

.dc-list{ display:flex; flex-direction:column; gap:7px; padding:0 4px; }
.dc-lrow{ display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer; background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:12px; padding:12px 14px; color:inherit; font:inherit; }
.dc-lrow:hover{ border-color:var(--pp-border-light); background:var(--pp-bg-hover); }
.dc-li{ width:38px; height:38px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; background:var(--pp-bg-raised); font-weight:700; }
.dc-lt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dc-lt .nm{ font-size:15px; font-weight:600; }
.dc-lt .meta{ font-size:12px; color:var(--pp-text-muted); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; }
.dc-tag{ font-size:10.5px; padding:2px 7px; border-radius:5px; background:var(--pp-bg-raised); color:var(--pp-text-muted); border:1px solid var(--pp-border); }
.dc-tag.boss{ color:var(--pp-pink); border-color:var(--pp-pink-dim); } .dc-tag.unob{ color:var(--pp-gold); border-color:var(--pp-gold-dim); border-style:dashed; }
/* Pickers: how many unobtainable items / inactive monsters are left out, and the switch. */
.dc-availbar{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:7px 10px 7px 12px; border:1px dashed var(--pp-border-light); border-radius:10px; font-size:12.5px; color:var(--pp-text-muted); }
.dc-availbar.on{ border-color:var(--pp-gold-dim); color:var(--pp-text); }
.dc-availbar button{ margin-left:auto; padding:4px 12px; border-radius:999px; border:1px solid var(--pp-gold-dim); background:transparent; color:var(--pp-gold); font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.dc-availbar button:hover{ background:var(--pp-gold-glow); } .dc-tag.ele{ color:var(--pp-green); border-color:var(--pp-green-dim); }

/* toggle rows (buffs / songs / consumables / debuffs / cards) */
.dc-toggle{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:12px; padding:12px 14px; color:inherit; font:inherit; }
.dc-toggle:hover{ border-color:var(--pp-border-light); }
.dc-toggle.on{ border-color:var(--pp-gold-dim); background:var(--pp-gold-glow); }
.dc-tk{ flex:1; font-size:14.5px; cursor:pointer; }
.dc-tk small{ display:block; color:var(--pp-text-faint); font-size:11.5px; }
.dc-lvctl{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.dc-lvctl button{ width:26px; height:26px; border-radius:7px; border:1px solid var(--pp-border); background:var(--pp-bg-raised); color:var(--pp-gold); font-size:16px; font-weight:700; cursor:pointer; line-height:1; }
.dc-lvctl button:active{ transform:scale(.94); }
.dc-lvn{ font-size:12px; color:var(--pp-gold); font-variant-numeric:tabular-nums; min-width:36px; text-align:center; }
.dc-toggle .dc-check{ cursor:pointer; }
.dc-tlv{ font-size:11.5px; color:var(--pp-gold); font-variant-numeric:tabular-nums; }
.dc-check{ width:22px; height:22px; border-radius:6px; border:1px solid var(--pp-border-light); display:grid; place-items:center; color:#20190b; font-size:14px; flex:0 0 auto; }
.dc-toggle.on .dc-check{ background:var(--pp-gold); border-color:var(--pp-gold); }

.dc-steplist{ display:flex; flex-direction:column; gap:8px; padding:0 4px; }
.dc-strow{ display:flex; align-items:center; gap:14px; background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:12px; padding:11px 14px; }
.dc-strow .lab{ flex:1; } .dc-strow .lab b{ font-size:15px; } .dc-strow .lab span{ display:block; font-size:11.5px; color:var(--pp-text-faint); }
.dc-num{ width:80px; text-align:center; font:inherit; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--pp-gold); background:var(--pp-bg-raised); border:1px solid var(--pp-border); border-radius:10px; padding:9px 8px; outline:none; }
.dc-num:focus{ border-color:var(--pp-gold); box-shadow:0 0 0 1px var(--pp-gold-glow) inset; }
.dc-numsm{ width:62px; }
.dc-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.dc-pill{ padding:8px 14px; border-radius:10px; border:1px solid var(--pp-border); background:var(--pp-bg-raised); color:var(--pp-text-muted); cursor:pointer; font:inherit; font-size:14px; }
.dc-pill.on{ border-color:var(--pp-gold); color:var(--pp-gold); background:var(--pp-gold-glow); }
/* Load build: class filter */
.dc-clsfilter{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 14px; }
.dc-clsf{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; font-size:13px; }
.dc-clsf img.cls{ width:18px; height:18px; object-fit:contain; }
.dc-clsf .n{ font-size:11.5px; color:var(--pp-text-faint); font-variant-numeric:tabular-nums; }
.dc-clsf.on .n{ color:var(--pp-gold-dim); }

.dc-mfoot{ padding:12px 20px 16px; flex:0 0 auto; border-top:1px solid var(--pp-border); background:var(--pp-bg-body); }
.dc-btn{ width:100%; padding:14px; border-radius:12px; border:0; cursor:pointer; font:inherit; font-size:15px; font-weight:700; color:#20190b; background:linear-gradient(150deg,var(--pp-gold),var(--pp-gold-dim)); }
.dc-btn:active{ transform:translateY(1px); }

@media (min-width:620px){
  .dc-modal{ left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-46%) scale(.98); width:520px; border-radius:18px; max-height:82vh; opacity:0; }
  .dc-modal.show{ transform:translate(-50%,-50%); opacity:1; }
  .dc-grip{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .dc-result,.dc-modal,.dc-scrim,.caret,.dc-scaret{ transition:none; animation:none; } }

/* ---- Open PS Calc page additions ---- */
.dc-prov a{ color:var(--pp-text-muted); text-decoration:underline dotted; }
.dc-prov a:hover{ color:var(--pp-gold); }
.dc-li, .dc-mono.thumb{ overflow:hidden; }
.dc-li img, .dc-mono.thumb img{ max-width:100%; max-height:100%; object-fit:contain; image-rendering:pixelated; }
.dc-mono.thumb{ background:var(--pp-bg-raised); border:1px solid var(--pp-border); }
.dc-srow.disabled{ cursor:default; opacity:.55; }
.dc-srow.disabled:hover{ background:none; }
.dc-srv.cov{ color:var(--pp-text-faint); font-weight:500; font-style:italic; }
.dc-cardpips{ display:inline-flex; gap:3px; margin-left:8px; vertical-align:middle; }
.dc-cardpips i{ width:7px; height:7px; border-radius:2px; border:1px solid var(--pp-pink-dim); }
.dc-cardpips i.on{ background:var(--pp-pink); border-color:var(--pp-pink); }

.dc-group{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--pp-text-faint); margin:14px 6px 8px; }
.dc-group:first-child{ margin-top:2px; }
.dc-empty{ text-align:center; color:var(--pp-text-faint); font-size:13px; padding:26px 10px; }
.dc-err{ margin:10px 20px 16px; padding:10px 13px; border-radius:10px; font-size:13px; color:var(--pp-pink); background:var(--pp-pink-glow); border:1px solid var(--pp-pink-dim); }
.dc-row2{ display:flex; gap:9px; padding:0 4px; margin-bottom:12px; }
.dc-row2 .dc-pill{ flex:1; text-align:center; }
.dc-ghostbtn{ width:100%; margin-top:10px; padding:12px; border-radius:12px; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--pp-text-muted); background:var(--pp-bg-surface); border:1px solid var(--pp-border); }
.dc-ghostbtn:hover{ color:var(--pp-text); border-color:var(--pp-border-light); }
.dc-ghostbtn.danger:hover{ color:var(--pp-pink); border-color:var(--pp-pink-dim); }
.dc-refgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px; padding:0 4px; }
.dc-refgrid .dc-pill{ padding:9px 0; text-align:center; font-variant-numeric:tabular-nums; }
.dc-cur{ display:flex; align-items:center; gap:13px; width:calc(100% - 8px); margin:0 4px 16px; padding:13px 14px; border-radius:12px; background:var(--pp-bg-surface); border:1px solid var(--pp-border-light); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.dc-cur:hover{ background:var(--pp-bg-hover); border-color:var(--pp-gold); }
.dc-cur .dc-lt{ flex:1; min-width:0; }
.dc-cur-act{ display:flex; align-items:center; gap:4px; flex-shrink:0; color:var(--pp-text-muted); font-size:13px; }
.dc-cur:hover .dc-cur-act{ color:var(--pp-gold); }
/* the slot view's Change: a gold pill, so it reads as a button without hovering */
.dc-cur .dc-cur-act{ padding:7px 10px 7px 13px; border-radius:999px; border:1px solid var(--pp-gold-dim); background:var(--pp-gold-glow); color:var(--pp-gold); font-weight:600; }
.dc-cur:hover .dc-cur-act{ border-color:var(--pp-gold); background:var(--pp-gold); color:var(--pp-bg-body); }
.dc-cur:hover{ border-color:var(--pp-gold-dim); }
.dc-cur .dc-lt .nm{ color:var(--pp-gold); }
.dc-desc{ margin:0 4px 16px; font-size:12.5px; line-height:1.5; color:var(--pp-text-muted); white-space:pre-line; max-height:150px; overflow:auto; }
.dc-ptsleft{ display:flex; align-items:center; gap:10px; padding:11px 18px; border-top:1px solid var(--pp-border); font-size:12.5px; color:var(--pp-text-muted); }
.dc-ptsleft b{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--pp-green); }
.dc-ptsleft b.neg{ color:var(--pp-pink); }
.dc-statedit{ display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 4px 10px; }
.dc-statedit button{ width:46px; height:46px; border-radius:12px; border:1px solid var(--pp-border); background:var(--pp-bg-raised); color:var(--pp-gold); font-size:22px; font-weight:700; cursor:pointer; }
.dc-statedit .dc-num{ width:96px; font-size:26px; }
.dc-statmeta{ text-align:center; font-size:12.5px; color:var(--pp-text-faint); margin-bottom:14px; }
.dc-quick{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }

.dc-tabs{ display:flex; gap:6px; padding:16px 20px 0; }
.dc-tab{ padding:7px 13px; border-radius:999px; font:inherit; font-size:12.5px; cursor:pointer; color:var(--pp-text-muted); background:var(--pp-bg-raised); border:1px solid var(--pp-border); }
.dc-tab.on{ color:var(--pp-gold); border-color:var(--pp-gold-dim); background:var(--pp-gold-glow); }
.dc-result.busy .dc-big{ opacity:.45; transition:opacity .15s; }
.dc-sublines{ padding:0 20px 14px; display:flex; flex-direction:column; gap:6px; }
.dc-subline{ display:flex; align-items:baseline; gap:10px; font-size:13px; color:var(--pp-text-muted); }
.dc-subline b{ margin-left:auto; color:var(--pp-text); font-variant-numeric:tabular-nums; }
/* Bio Cannibalize: one card per plant */
.dc-plant{ margin:0 14px 10px; border:1px solid var(--pp-border); border-radius:12px; background:var(--pp-bg-raised); }
.dc-plant-h{ display:flex; align-items:center; gap:10px; padding:10px 14px 6px; }
.dc-plant .dc-sublines{ padding:0 14px 12px; gap:4px; }
.dc-step.info .nm{ color:var(--pp-text-muted); }
.dc-step .mult{ font-size:11px; color:var(--pp-gold-dim); margin-left:6px; }
.dc-warn{ margin:0 20px 14px; font-size:12px; color:var(--pp-text-faint); }

/* ---- full-version additions ---- */
.dc-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.dc-toolbar .dc-pill{ font-size:13px; padding:7px 12px; }
.dc-seg{ display:flex; gap:6px; padding:12px 18px 0; }
.dc-seg .dc-pill{ flex:1; text-align:center; font-size:13px; padding:7px 0; }
.dc-ctl{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:12px; padding:11px 14px; color:inherit; font:inherit; }
.dc-ctl.on{ border-color:var(--pp-gold-dim); background:var(--pp-gold-glow); }
.dc-ctl.off{ opacity:.5; }
.dc-ctl.tog{ cursor:pointer; }
.dc-ctl.stack{ flex-direction:column; align-items:stretch; gap:9px; }
.dc-ctl .lab{ flex:1; min-width:0; font-size:14px; }
.dc-ctl .lab small{ display:block; color:var(--pp-text-faint); font-size:11.5px; margin-top:1px; }
.dc-ctl .dc-pills .dc-pill{ padding:6px 11px; font-size:12.5px; }
.dc-ctl .dc-pill:disabled{ opacity:.35; cursor:not-allowed; }
.dc-pill img{ width:18px; height:18px; vertical-align:-4px; margin-right:5px; image-rendering:pixelated; }
.dc-ctl input.dc-num{ width:76px; font-size:16px; padding:7px 6px; }
.dc-ctl input.dc-num.wide{ width:128px; }
.dc-ctls{ display:flex; flex-direction:column; gap:7px; padding:0 4px; }
.dc-sbinline{ padding:4px 12px 12px; display:flex; flex-direction:column; gap:7px; }
.dc-note{ margin:10px 18px; padding:9px 12px; border-radius:10px; font-size:12.5px; color:var(--pp-text-muted); background:var(--pp-bg-raised); border:1px solid var(--pp-border); }
.dc-note.warn{ color:var(--pp-gold); border-color:var(--pp-gold-dim); background:var(--pp-gold-glow); }
/* Auto attack: normal and critical hit side by side under the blended average. */
.dc-hitsplit{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 20px 14px; }
.dc-hitcell{ padding:10px 12px; border:1px solid var(--pp-border); border-radius:12px; min-width:0; }
.dc-hitcell .ml{ font-size:11.5px; color:var(--pp-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.dc-hitcell .mv{ font-size:18px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.dc-hitcell .ms{ font-size:12px; color:var(--pp-text-muted); margin-top:2px; }
.dc-hitcell .ml .both{ text-transform:none; letter-spacing:0; opacity:.8; }
.dc-hitcell.crit{ border-color:var(--pp-gold-dim); }
.dc-hitcell.crit .mv{ color:var(--pp-gold); }
.dc-hitcell.off{ opacity:.55; border-color:var(--pp-border); }
.dc-hitcell.off .mv{ color:inherit; }
.dc-ledgerpick{ margin:4px 8px 10px; }
.dc-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--pp-border); border-top:1px solid var(--pp-border); border-bottom:1px solid var(--pp-border); margin-bottom:12px; }
.dc-metric{ background:var(--pp-bg-surface); padding:10px 14px; }
.dc-metric .ml{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pp-text-faint); }
.dc-metric .mv{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
.dc-metric .ms{ font-size:11px; color:var(--pp-text-faint); }
@media (max-width:480px){ .dc-metrics{ grid-template-columns:repeat(2,1fr); } }
.dc-tabs{ flex-wrap:wrap; }
.dc-panel{ background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:var(--dc-r); overflow:hidden; }
.dc-panel > .dc-shead .dc-stitle{ flex:1; }
.dc-pbody{ display:none; border-top:1px solid var(--pp-border); padding:12px 16px 16px; }
.dc-panel.open .dc-pbody{ display:block; }
.dc-panel.open > .dc-shead .dc-scaret{ transform:rotate(90deg); color:var(--pp-gold); border-color:var(--pp-gold-dim); }
.dc-inc{ padding:11px 0; border-top:1px solid var(--pp-border); }
.dc-inc:first-of-type{ border-top:0; }
.dc-inc .top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dc-inc .top b{ font-size:14px; }
.dc-inc .top .dmg{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.dc-inc .chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.dc-inc .chips span{ font-size:11.5px; padding:3px 8px; border-radius:999px; background:var(--pp-bg-raised); border:1px solid var(--pp-border); color:var(--pp-text-muted); }
.dc-kit{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.dc-kit button{ font:inherit; font-size:12px; padding:5px 10px; border-radius:999px; cursor:pointer; background:var(--pp-bg-raised); border:1px solid var(--pp-border); color:var(--pp-text-muted); }
.dc-kit button.on{ color:var(--pp-gold); border-color:var(--pp-gold-dim); }
.dc-bp{ padding:9px 0; border-top:1px solid var(--pp-border); font-size:13px; color:var(--pp-text-muted); }
.dc-bp:first-child{ border-top:0; }
.dc-bp > b{ color:var(--pp-text); display:block; margin-bottom:3px; }
.dc-bp em{ font-style:normal; color:var(--pp-gold); font-weight:600; }
.dc-cmp{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.dc-cmp th, .dc-cmp td{ padding:7px 8px; border-bottom:1px solid var(--pp-border); text-align:right; white-space:nowrap; }
.dc-cmp th:first-child, .dc-cmp td:first-child{ text-align:left; color:var(--pp-text-muted); }
.dc-cmp th{ font-weight:600; color:var(--pp-text); }
.dc-cmp td.best{ color:var(--pp-green); font-weight:700; }
.dc-cmp .x{ background:none; border:0; color:var(--pp-text-faint); cursor:pointer; font:inherit; }
.dc-cmpwrap{ overflow-x:auto; }
.dc-procs{ padding:0 20px 12px; display:flex; flex-direction:column; gap:6px; }
.dc-actions{ display:flex; gap:8px; flex-wrap:wrap; padding:0 20px 18px; }
.dc-actions .dc-ghostbtn{ flex:1; margin-top:0; min-width:120px; }
.dc-textin{ width:100%; font:inherit; font-size:14px; color:var(--pp-text); background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:11px; padding:11px 13px; outline:none; }
.dc-textin:focus{ border-color:var(--pp-gold); }
.dc-tubtns{ display:flex; gap:6px; margin-top:6px; }
.dc-tubtns button{ font:inherit; font-size:12px; padding:5px 10px; border-radius:8px; cursor:pointer; background:var(--pp-bg-raised); border:1px solid var(--pp-border); color:var(--pp-text-muted); }
.dc-ctl.on .dc-check{ background:var(--pp-gold); border-color:var(--pp-gold); }

/* ---- in-game icons (item/skill art is 24px, class icons 40px, mob sprites vary) ---- */
.dc-sic{ filter:none; overflow:hidden; }
.dc-sic img{ max-width:26px; max-height:26px; object-fit:contain; image-rendering:pixelated; }
.dc-sic img.cls{ max-width:30px; max-height:30px; image-rendering:auto; }
.dc-mono.thumb img.cls{ max-width:40px; max-height:40px; image-rendering:pixelated; }
.dc-mono.cls{ background:none; border:0; }
.dc-mono.ghost img{ opacity:.45; filter:grayscale(.6); }
.dc-li.cls{ width:40px; height:40px; background:none; }
.dc-li.cls img{ max-width:40px; max-height:40px; }
.dc-li.dim img{ opacity:.3; filter:grayscale(1); }
.dc-pick .dc-li.cls{ flex:0 0 40px; }

/* ---- stats in two columns: STR AGI VIT | INT DEX LUK ---- */
.dc-statlist{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,auto); grid-auto-flow:column; }
.dc-statlist .dc-statrow{ gap:6px; min-width:0; }
.dc-statlist .dc-statmain{ padding:11px 0 11px 14px; gap:10px; }
.dc-statlist .dc-statrow:nth-child(4){ border-top:0; }
.dc-statlist .dc-statrow:nth-child(n+4){ border-left:1px solid var(--pp-border); }
.dc-statlist .dc-statd{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:520px){
  .dc-statlist .dc-statd{ display:none; }
  .dc-statlist .dc-statmain{ padding:11px 0 11px 12px; justify-content:space-between; }
  .dc-statlist .dc-statk{ width:auto; }
}

/* ---- page layout: inputs left, target and result right (desktop); the page scrolls as one ---- */
.dc-app{ max-width:620px; }
.dc-layout{ display:flex; flex-direction:column; gap:12px; }
.dc-side{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:1080px){
  .dc-app{ max-width:1180px; }
  .dc-head{ max-width:640px; }
  .dc-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:20px; align-items:start; }
  .dc-side .dc-hint{ padding:28px 16px; background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:var(--dc-r); }
}

/* result card sections (Damage / Survivability / Breakpoints / Compare) */
.dc-rtabs{ display:flex; gap:4px; padding:10px; border-bottom:1px solid var(--pp-border); background:var(--pp-bg-raised); }
.dc-rtab{ flex:1; padding:8px 6px; border-radius:9px; border:1px solid transparent; background:none; color:var(--pp-text-muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.dc-rtab:hover{ color:var(--pp-text); }
.dc-rtab.on{ background:var(--pp-bg-surface); color:var(--pp-gold); border-color:var(--pp-gold-dim); }
.dc-tabbody{ padding:14px 18px 18px; }
.dc-tabbody .dc-empty{ padding:18px 6px; }

/* ---- equipment grid (equip-window style) ---- */
.dc-eqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:12px; }
.dc-eqtile{ display:flex; align-items:center; gap:10px; min-width:0; text-align:left; cursor:pointer; padding:9px 10px; border-radius:11px; background:var(--pp-bg-raised); border:1px solid var(--pp-border); color:inherit; font:inherit; }
.dc-eqtile:hover{ border-color:var(--pp-border-light); background:var(--pp-bg-hover); }
.dc-eqtile.set{ background:var(--pp-bg-surface); border-color:var(--pp-border-light); }
.dc-eqtile.bad{ border-color:var(--pp-pink-dim); }
.dc-eqtile.off{ cursor:default; opacity:.55; }
.dc-eqtile.off:hover{ border-color:var(--pp-border); background:var(--pp-bg-raised); }
.dc-eqtile.wide{ grid-column:1 / -1; }
.dc-eqic{ flex:0 0 32px; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--pp-bg-body); border:1px solid var(--pp-border); overflow:hidden; }
.dc-eqic img{ max-width:24px; max-height:24px; image-rendering:pixelated; }
.dc-eqtile:not(.set) .dc-eqic img{ opacity:.28; filter:grayscale(1); }
.dc-eqt{ display:flex; flex-direction:column; min-width:0; }
.dc-eqt .k{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pp-text-faint); }
.dc-eqt .v{ font-size:13px; font-weight:600; color:var(--pp-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-eqtile:not(.set) .dc-eqt .v{ color:var(--pp-text-faint); font-weight:500; }
.dc-eqtile.bad .dc-eqt .v{ color:var(--pp-pink); }
.dc-eqnote{ padding:0 16px 12px; font-size:12px; color:var(--pp-text-muted); }

/* ---- phone result bar ---- */
.dc-pbar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:1050; display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:14px; cursor:pointer;
  background:var(--pp-bg-raised); border:1px solid var(--pp-gold-dim); color:var(--pp-text); font:inherit; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .2s, opacity .2s; }
.dc-pbar[hidden]{ display:none; }
.dc-pbar.away{ transform:translateY(140%); opacity:0; pointer-events:none; }
.dc-pbar .lbl{ font-size:12px; color:var(--pp-text-muted); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.dc-pbar b{ font-size:18px; color:var(--pp-gold); font-variant-numeric:tabular-nums; }
.dc-pbar small{ font-size:12px; color:var(--pp-text-muted); }
@media (min-width:1080px){ .dc-pbar{ display:none !important; } }
@media (max-width:1079px){ .dc-app{ padding-bottom:72px; } }
/* the last metric stretches across any gap left in its row */
.dc-metric:last-child:nth-child(3n+1){ grid-column:span 3; }
.dc-metric:last-child:nth-child(3n+2){ grid-column:span 2; }
@media (max-width:480px){
  .dc-metric:last-child:nth-child(3n+1), .dc-metric:last-child:nth-child(3n+2){ grid-column:auto; }
  .dc-metric:last-child:nth-child(odd){ grid-column:span 2; }
}
.dc-statedit button:disabled{ opacity:.35; cursor:not-allowed; }
.dc-quick .dc-pill:disabled{ opacity:.35; cursor:not-allowed; }

/* ---- derived stats card (always visible, heads the right column) ---- */
.dc-dstats{ background:var(--pp-bg-surface); border:1px solid var(--pp-border); border-radius:var(--dc-r); overflow:hidden; }
.dc-dshead{ display:flex; align-items:baseline; gap:10px; padding:11px 16px 9px; }
.dc-dshead .hint{ font-size:11px; color:var(--pp-text-faint); }
.dc-dgrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--pp-border); border-top:1px solid var(--pp-border); }
.dc-dgrid .dc-dcell{ flex-direction:column; align-items:flex-start; gap:1px; padding:8px 12px; }
.dc-dgrid .dc-dcell .dl{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--pp-text-faint); }
.dc-dgrid .dc-dcell .dv{ font-size:14px; }
.dc-dgrid.dc-chard{ margin-top:8px; }
.dc-dgrid.dc-chard.short{ grid-template-columns:repeat(4, minmax(0,1fr)); }   /* the four key stats on one row at any width */
/* "All stats" / "Show all monster stats": a quiet text button at the end of a line */
.dc-morebtn{ background:none; border:0; padding:2px 0; margin-left:auto; font:inherit; font-size:12px; font-weight:600; color:var(--pp-gold); cursor:pointer; white-space:nowrap; }
.dc-morebtn:hover{ text-decoration:underline; }
.dc-morebtn:focus-visible{ outline:2px solid var(--pp-gold); outline-offset:2px; border-radius:4px; }
.dc-slabel .dc-morebtn{ align-self:center; }
.dc-mnote2 .dc-morebtn{ margin-left:10px; }
@media (min-width:1080px){ .dc-dgrid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---- wildcard mix: one compact line per card slot ---- */
.dc-presetbtn{ width:100%; margin:0 0 8px; border-color:var(--pp-gold-dim); }
.dc-presetbtn .nm{ color:var(--pp-gold); }
.dc-btn.ghost{ background:var(--pp-bg-surface); color:var(--pp-text-muted); border:1px solid var(--pp-border); font-weight:600; }
.dc-btn.ghost:hover{ color:var(--pp-text); border-color:var(--pp-border-light); }

/* ---- item descriptions in the pickers: an ⓘ per row expands the in-game text ---- */
/* The ⓘ is centred on its row (.dc-prow), so opening the description under it never moves it. */
.dc-prow{ position:relative; }
.dc-prow > .dc-lrow{ width:100%; padding-right:48px; }
.dc-info{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; cursor:pointer;
  font:600 13px/1 Georgia, serif; font-style:italic; background:var(--pp-bg-raised); border:1px solid var(--pp-border-light); color:var(--pp-text-muted); }
.dc-info:hover, .dc-info.on{ color:var(--pp-gold); border-color:var(--pp-gold-dim); background:var(--pp-gold-glow); }
.dc-info:focus-visible{ outline:2px solid var(--pp-gold); outline-offset:1px; }
/* In a skill row (Class skills & buffs) it sits in the row's flex line. */
.dc-info.inl{ position:static; transform:none; flex:0 0 auto; }
.dc-ctls > .dc-pdesc, .dc-list > .dc-pdesc{ margin:-3px 0 2px; }
.dc-pdesc{ margin:4px 2px 2px; padding:10px 12px; border-radius:10px; font-size:12.5px; line-height:1.5; white-space:pre-line;
  color:var(--pp-text-muted); background:var(--pp-bg-body); border:1px solid var(--pp-border); }

/* ---- hover tip on equipped items ---- */
.dc-eqtip{ position:fixed; z-index:1080; pointer-events:none; max-width:340px; padding:10px 12px; border-radius:10px; opacity:0; transition:opacity .1s;
  background:var(--pp-bg-body); border:1px solid var(--pp-border-light); box-shadow:0 10px 30px rgba(0,0,0,.5); font-size:12.5px; line-height:1.5; color:var(--pp-text-muted); }
.dc-eqtip.show{ opacity:1; }
.dc-eqtip .h{ font-weight:700; color:var(--pp-gold); margin-bottom:4px; }
.dc-eqtip .d{ white-space:pre-line; }
.dc-eqtip .c{ margin-top:6px; padding-top:6px; border-top:1px solid var(--pp-border); }
.dc-eqtip .c b{ color:var(--pp-pink); font-weight:600; }

/* ---- class picker: one tree per first class (tree styles live in style.css) ---- */
@media (min-width:620px){ .dc-modal.wide{ width:min(900px, calc(100vw - 48px)); } }

/* ---- levelled buffs: the stepper sits inside the toggle row while the buff is on ---- */
.dc-ctl.tog .dc-lvctl{ margin-right:10px; }
.dc-lvctl button:disabled{ opacity:.35; cursor:default; transform:none; }

/* Levels & stats sheet: every stat in one place; the focused row shows its quick-set values */
.dc-sheethead{ display:flex; justify-content:space-between; align-items:baseline; margin:0 4px 12px; padding:10px 14px; border-radius:12px; background:var(--pp-bg-raised); border:1px solid var(--pp-border); font-size:13px; color:var(--pp-text-muted); }
.dc-sheethead b{ font-size:18px; color:var(--pp-green); font-variant-numeric:tabular-nums; }
.dc-sheethead b.neg{ color:var(--pp-pink); }
.dc-lvpair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 4px 14px; }
.dc-lvbox{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:12px; background:var(--pp-bg-surface); border:1px solid var(--pp-border); font-size:13px; color:var(--pp-text-muted); }
.dc-lvbox .dc-num{ width:68px; font-size:17px; padding:6px; }
.dc-lvpair.inline{ margin:10px 14px 4px; }
.dc-stedit{ display:flex; flex-direction:column; gap:6px; padding:0 4px; }
.dc-strow2{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:8px 10px 8px 14px; border-radius:12px; background:var(--pp-bg-surface); border:1px solid var(--pp-border); }
.dc-strow2.on{ border-color:var(--pp-gold); }
.dc-strow2 .lab{ display:flex; flex-direction:column; align-items:flex-start; background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; min-width:0; }
.dc-strow2 .lab b{ font-size:14px; letter-spacing:.06em; }
.dc-strow2 .lab span{ font-size:11.5px; color:var(--pp-text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.dc-strow2 .tot{ font-size:12.5px; color:var(--pp-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dc-strow2 .tot .jb{ color:var(--pp-green); margin-right:4px; }
.dc-step{ display:flex; align-items:center; gap:6px; }
.dc-step button{ width:34px; height:34px; border-radius:10px; border:1px solid var(--pp-border); background:var(--pp-bg-raised); color:var(--pp-gold); font-size:18px; font-weight:700; cursor:pointer; }
.dc-step button:disabled{ opacity:.35; cursor:default; }
.dc-step .dc-num{ width:58px; font-size:17px; padding:6px; }
.dc-strow2 .dc-quick{ grid-column:1 / -1; justify-content:flex-start; margin-top:4px; }
@media (max-width:480px){ .dc-strow2 .tot{ display:none; } }

/* Slot sheet: step through the slots without closing */
.dc-slotnav{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 4px 12px; }
.dc-slotnav button{ background:none; border:1px solid var(--pp-border); border-radius:999px; padding:6px 12px; color:var(--pp-text-muted); font:inherit; font-size:12.5px; cursor:pointer; }
.dc-slotnav button:hover{ color:var(--pp-gold); border-color:var(--pp-gold); }
.dc-slotnav span{ font-size:11.5px; color:var(--pp-text-faint); font-variant-numeric:tabular-nums; }
.dc-cur.empty .dc-lt .nm{ color:var(--pp-text-muted); }
.dc-cur.empty .dc-li img{ opacity:.3; filter:grayscale(1); }

/* Cards on the equipment tile, so nothing hides behind a hover */
.dc-eqt .c{ font-size:11.5px; color:var(--pp-pink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-eqt .c.dim{ color:var(--pp-text-faint); }
.dc-eqt .c .dc-cardpips{ margin-left:6px; }

/* Inline - / + on the main stat rows: quiet until the row is hovered or focused (always
   shown where there is no hover); the full Levels & stats sheet is a tap on the stat. */
.dc-inl{ display:flex; gap:4px; flex:0 0 auto; }
.dc-inl button{ width:26px; height:26px; border-radius:8px; border:1px solid var(--pp-border); background:var(--pp-bg-raised); color:var(--pp-gold); font-size:15px; font-weight:700; line-height:1; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.dc-inl button:hover{ border-color:var(--pp-gold); }
.dc-inl button:disabled{ opacity:.3; cursor:default; }
@media (hover:hover){
  .dc-inl{ opacity:0; transition:opacity .12s; }
  .dc-statrow:hover .dc-inl, .dc-statrow:focus-within .dc-inl{ opacity:1; }
}

/* Wide desktops: everything on one screen. Three columns - build | equipment + target |
   result - with tighter rows, so nothing needs a page scroll. Phones and narrow windows keep
   the stacked layout above. */
@media (min-width:1280px){
  .dc-app{ max-width:1480px; padding:0 8px; }
  .dc-head{ max-width:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin:0 2px 12px; }
  .dc-head h1{ margin:0; font-size:22px; }
  .dc-head p{ display:none; }
  .dc-head .dc-prov{ margin:0; order:3; }
  .dc-head .dc-toolbar{ margin:0 0 0 auto; order:4; }
  .dc-layout{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:14px; }
  .dc-sheet{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
  .dc-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
  .dc-statlist .dc-statd{ display:none; }
  .dc-statlist .dc-statmain{ justify-content:space-between; padding-right:4px; }
  /* the class row already shows the levels, and the stats sheet edits them */
  .dc-srow[onclick="PC.openLevels()"]{ display:none; }
  /* keep every card its full height in the column */
  .dc-side > *{ flex-shrink:0; }

  /* tighter rows */
  .dc-shead{ padding:10px 14px; }
  .dc-frow{ padding:9px 14px; gap:12px; }
  .dc-srow{ padding:9px 14px; }
  .dc-slabel{ padding:9px 14px 2px; }
  .dc-statlist .dc-statmain{ padding:7px 0 7px 14px; }
  .dc-ptsleft{ padding:8px 14px; }
  .dc-eqgrid{ padding:10px; gap:6px; }
  .dc-eqtile{ padding:6px 9px; }
  .dc-eqnote{ padding-top:0; }
  .dc-dcell{ padding:7px 12px; }
  .dc-big{ font-size:44px; }
}

/* Result panel: the attacking skill, picked where its damage is shown */
.dc-atk{ display:flex; align-items:center; gap:10px; margin:12px 14px 10px; padding:8px 10px 8px 8px; border-radius:12px; background:var(--pp-bg-raised); border:1px solid var(--pp-border-light); }
.dc-atkpick{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.dc-atkpick .dc-lt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.dc-atkpick .k{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pp-text-faint); }
.dc-atkpick .nm{ font-size:15px; font-weight:700; color:var(--pp-gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-atk:hover{ border-color:var(--pp-gold-dim); }
.dc-atklv .lv{ min-width:46px; text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }

/* Target: the picked monster's stats; cells the user edited are gold */
.dc-mstats{ border-top:1px solid var(--pp-border); }
.dc-mstats .dc-dgrid{ border-top:0; }
.dc-mstats .dc-dcell.ed .dv{ color:var(--pp-gold); }
.dc-mstats .dc-dcell.ed .dl::after{ content:' · edited'; color:var(--pp-gold-dim); text-transform:none; letter-spacing:0; }
.dc-mnote2{ padding:8px 14px; font-size:12px; color:var(--pp-text-muted); border-top:1px solid var(--pp-border); }
@media (min-width:1080px){ .dc-mstats .dc-dgrid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ---- Result panel fits one screen beside the inputs: the same blocks, tighter ---- */
@media (min-width:1080px){
  .dc-dshead{ padding:8px 14px 6px; }
  .dc-dgrid .dc-dcell{ padding:5px 12px; }
  .dc-dgrid .dc-dcell .dl{ font-size:10px; }
  .dc-rtabs{ padding:6px; }
  .dc-rtab{ padding:6px; }
  .dc-atk{ margin:8px 12px 4px; padding:5px 8px 5px 6px; }
  .dc-atk .dc-li{ width:32px; height:32px; }
  .dc-tabs{ padding:8px 16px 0; }
  .dc-tab{ padding:5px 11px; }
  .dc-rhead{ padding:10px 16px 2px; }
  .dc-dmgline{ padding:0 16px 8px; }
  .dc-big{ font-size:40px; }
  .dc-metrics{ grid-template-columns:repeat(4, minmax(0,1fr)); margin-bottom:6px; }
  .dc-metric{ padding:6px 12px; }
  .dc-metric .ml{ font-size:9.5px; letter-spacing:.08em; }
  .dc-metric .mv{ font-size:15px; margin-top:1px; }
  .dc-metric .ms{ font-size:10.5px; }
  .dc-metric:last-child:nth-child(n){ grid-column:auto; }
  .dc-metric:last-child:nth-child(4n+1){ grid-column:span 4; }
  .dc-metric:last-child:nth-child(4n+2){ grid-column:span 3; }
  .dc-metric:last-child:nth-child(4n+3){ grid-column:span 2; }
  .dc-sublines{ padding:0 16px 8px; gap:3px; }
  .dc-math > button{ padding:9px 16px; }
  .dc-actions{ padding:0 16px 12px; }
  .dc-actions .dc-ghostbtn{ padding:8px; font-size:13px; }
  .dc-side{ gap:10px; }
}

/* ---- Item and card pickers: a wide grid of one-line rows, so a list fits on one screen.
   The effect line is cut to one line; hover shows it whole and the ⓘ opens the tooltip. ---- */
@media (min-width:620px){ .dc-modal.pick{ width:min(1280px, calc(100vw - 48px)); max-height:90vh; } }
.dc-pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:5px; }
.dc-pgrid > .dc-empty, .dc-pgrid > .dc-err{ grid-column:1 / -1; }
/* Monster browse list: a sticky A-Z strip and a heading per letter. */
.dc-pgrid .dc-lt .meta > span + span{ margin-left:7px; }
/* The search box stays put while the list scrolls under it (pickers). */
.dc-modal.pick .dc-search{ position:sticky; top:-4px; z-index:3; margin-bottom:0; box-shadow:0 0 0 6px var(--pp-bg-body), 0 6px 0 6px var(--pp-bg-body); }
.dc-modal.pick .dc-search + .dc-list{ margin-top:12px; }
.dc-azbar{ grid-column:1 / -1; position:sticky; top:50px; z-index:2; display:flex; flex-wrap:wrap; gap:3px; padding:6px 0; background:var(--pp-bg-body); }
.dc-azbar button{ min-width:26px; height:26px; padding:0 4px; border-radius:7px; border:1px solid var(--pp-border); background:var(--pp-bg-surface); color:var(--pp-text-muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.dc-azbar button:hover{ color:var(--pp-gold); border-color:var(--pp-gold-dim); }
.dc-azhead{ grid-column:1 / -1; padding:8px 4px 2px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--pp-text-faint); }
.dc-pgrid .dc-lrow{ padding:5px 10px; gap:9px; border-radius:9px; }
.dc-pgrid .dc-prow > .dc-lrow{ padding-right:38px; }
.dc-pgrid .dc-li{ width:28px; height:28px; border-radius:7px; }
.dc-pgrid .dc-lt .nm{ font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-pgrid .dc-lt .meta{ display:block; font-size:11.5px; line-height:1.3; margin-top:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-pgrid .dc-info{ right:8px; width:22px; height:22px; font-size:12px; }
.dc-pgrid .dc-pdesc{ font-size:12px; padding:8px 10px; }
@media (max-width:619px){
  /* phones: one column, so the effect gets two lines */
  .dc-pgrid .dc-lt .meta{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}
/* short laptop screens (768px tall): drop the extra labels so the panel still fits */
@media (min-width:1080px) and (max-height:820px){
  .dc-dshead{ display:none; }
  .dc-dgrid{ border-top:0; }
  .dc-dgrid .dc-dcell{ padding:3px 10px; gap:0; }
  .dc-dgrid .dc-dcell .dl, .dc-metric .ml{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .dc-dgrid .dc-dcell .dl{ font-size:9.5px; }
  .dc-dgrid .dc-dcell .dv{ font-size:13px; }
  .dc-metric{ padding:4px 10px; }
  .dc-actions{ padding-bottom:8px; }
  .dc-actions .dc-ghostbtn{ padding:6px; }
  .dc-tabs{ padding-top:6px; }
  .dc-rtabs{ padding:4px; }
  .dc-atkpick .k{ display:none; }
  .dc-atk{ margin-top:6px; }
  .dc-metric .ms{ display:none; }
  .dc-big{ font-size:34px; }
  .dc-rhead{ padding-top:6px; }
  .dc-math > button{ padding:7px 16px; }
}

/* Phones: iOS Safari zooms the page when a text field under 16px takes focus, and stays
   zoomed, which leaves the sheet wider than the screen. Fields stay at 16px or more there,
   and the sheet never grows past the screen or scrolls sideways. */
@media (max-width:619px){
  .dc-search input, .dc-textin, .dc-modal input:not(.dc-num), .dc-modal select, .dc-modal textarea{ font-size:16px; }
  .dc-modal{ box-sizing:border-box; max-width:100vw; }
  .dc-mbody{ overflow-x:hidden; }
}

/* Slot view on a wide screen: item and description on the left, refine / forge / cards on
   the right, so the whole slot fits without scrolling. Phones keep the single column. */
@media (min-width:900px){
  .dc-modal.split{ width:min(1000px, calc(100vw - 48px)); max-height:90vh; }
  .dc-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 22px; align-items:start; }
  .dc-split .dc-desc{ max-height:none; }
  .dc-split .dc-refgrid{ grid-template-columns:repeat(11,1fr); gap:5px; }
  .dc-split .dc-refgrid .dc-pill{ padding:8px 0; font-size:12.5px; }
  .dc-split .dc-scol > .dc-group:first-child{ margin-top:0; }
  .dc-split .dc-list{ gap:5px; }
  .dc-split .dc-ctls{ gap:5px; }
  .dc-split .dc-ctl{ padding:8px 12px; }
  .dc-split .dc-desc{ margin-bottom:10px; }
  .dc-split .dc-group{ margin-top:10px; }
  .dc-split .dc-lrow{ padding:8px 12px; }
  .dc-split .dc-lrow .dc-li{ width:32px; height:32px; }
  .dc-split .dc-lt .meta{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
.dc-lvctl button, .dc-step button{ user-select:none; -webkit-user-select:none; }

/* Advanced: delay per skill use */
.dc-advlink{ display:flex; align-items:center; gap:8px; width:calc(100% - 28px); margin:0 14px 10px; padding:6px 10px; border:1px dashed var(--pp-border); border-radius:8px; background:none; color:var(--pp-text-muted); font:inherit; font-size:12px; cursor:pointer; text-align:left; }
.dc-advlink b{ margin-left:auto; color:var(--pp-text); font-variant-numeric:tabular-nums; }
.dc-advlink.on{ border-style:solid; border-color:var(--pp-gold); }
.dc-advtag{ display:inline-block; padding:1px 6px; border-radius:6px; border:1px solid var(--pp-border); font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }