/* Pity calculator — gauge, cumulative chart, target table. Scoped to the tool root; per-game flavour via .theme-<game>. */
.tool-root[data-tool="pity-calculator"] {
  --pc-g1: var(--accent-2);
  --pc-g2: var(--accent);
  --pc-track: rgba(255, 255, 255, .08);
  --pc-good: var(--success, #4fd69c);
  --pc-warn: #ffb347;
  --pc-bad: var(--danger, #ff5d73);
  font-variant-numeric: tabular-nums;
}
.tool-root[data-tool="pity-calculator"] .pc { display: grid; gap: 1rem; }
.tool-root[data-tool="pity-calculator"] .pc-muted { color: var(--text-3); font-size: .8rem; }

/* ---------- top bar ---------- */
.tool-root[data-tool="pity-calculator"] .pc-top { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.tool-root[data-tool="pity-calculator"] .pc-modes { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.tool-root[data-tool="pity-calculator"] .pc-mode { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--text-2); transition: background .25s, color .25s, box-shadow .25s; }
.tool-root[data-tool="pity-calculator"] .pc-mode .i { width: 17px; height: 17px; }
.tool-root[data-tool="pity-calculator"] .pc-mode:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.tool-root[data-tool="pity-calculator"] .pc-mode.is-active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px -10px var(--glow); }
.tool-root[data-tool="pity-calculator"] .pc-banner-name { margin: 0; flex: 1 1 200px; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); text-transform: var(--display-transform); color: var(--text-2); font-size: .95rem; }
.tool-root[data-tool="pity-calculator"] .pc-actions { display: flex; gap: .3rem; margin-left: auto; }

/* ---------- layout ---------- */
.tool-root[data-tool="pity-calculator"] .pc-layout { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tool-root[data-tool="pity-calculator"] .pc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.tool-root[data-tool="pity-calculator"] .pc-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.tool-root[data-tool="pity-calculator"] .pc-card { margin: 0; min-width: 0; display: grid; gap: 1rem; }
.tool-root[data-tool="pity-calculator"] .pc-card[hidden] { display: none; }
.tool-root[data-tool="pity-calculator"] .pc-legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); text-transform: var(--display-transform); font-size: 1.02rem; }
.tool-root[data-tool="pity-calculator"] .pc-legend .i { color: var(--accent); width: 20px; height: 20px; }
.tool-root[data-tool="pity-calculator"] .pc-legend + * { clear: both; }
.tool-root[data-tool="pity-calculator"] .pc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tool-root[data-tool="pity-calculator"] .pc-row2 .field label { font-size: .86rem; overflow-wrap: anywhere; }
.tool-root[data-tool="pity-calculator"] .pc-num { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; }
.tool-root[data-tool="pity-calculator"] .pc-num-sm { width: 5.4rem !important; padding: .45rem .6rem !important; text-align: center; }
.tool-root[data-tool="pity-calculator"] .field-label .i, .tool-root[data-tool="pity-calculator"] .field label .i { width: 16px; height: 16px; color: var(--accent); display: inline-block; vertical-align: -3px; }

.tool-root[data-tool="pity-calculator"] .pc-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; padding: .8rem 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tool-root[data-tool="pity-calculator"] .pc-total span { color: var(--text-2); font-size: .85rem; font-weight: 600; }
.tool-root[data-tool="pity-calculator"] .pc-total b { font-family: var(--font-display); font-size: 1.35rem; color: var(--accent); letter-spacing: var(--display-spacing); }
.tool-root[data-tool="pity-calculator"] .pc-total small { flex-basis: 100%; color: var(--text-3); font-size: .78rem; }

/* pity slider */
.tool-root[data-tool="pity-calculator"] .pc-pity-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tool-root[data-tool="pity-calculator"] .pc-range { --fill: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.tool-root[data-tool="pity-calculator"] .pc-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--pc-g1), var(--pc-g2)) 0 0 / var(--fill) 100% no-repeat, var(--pc-track); }
.tool-root[data-tool="pity-calculator"] .pc-range::-moz-range-track { height: 8px; border-radius: 99px; background: var(--pc-track); }
.tool-root[data-tool="pity-calculator"] .pc-range::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--pc-g1), var(--pc-g2)); }
.tool-root[data-tool="pity-calculator"] .pc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: var(--text); border: 4px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 4px 12px rgba(0, 0, 0, .5); transition: transform .15s; }
.tool-root[data-tool="pity-calculator"] .pc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 4px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.tool-root[data-tool="pity-calculator"] .pc-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.tool-root[data-tool="pity-calculator"] .pc-range:focus-visible { outline: none; }
.tool-root[data-tool="pity-calculator"] .pc-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }

/* switch */
.tool-root[data-tool="pity-calculator"] .pc-switch { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; cursor: pointer; }
.tool-root[data-tool="pity-calculator"] .pc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-root[data-tool="pity-calculator"] .pc-switch-ui { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--pc-track); border: 1px solid var(--border-strong); transition: background .2s, border-color .2s; margin-top: 1px; }
.tool-root[data-tool="pity-calculator"] .pc-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform .25s var(--ease-spring), background .2s; }
.tool-root[data-tool="pity-calculator"] .pc-switch input:checked + .pc-switch-ui { background: var(--accent); border-color: transparent; }
.tool-root[data-tool="pity-calculator"] .pc-switch input:checked + .pc-switch-ui::after { transform: translateX(18px); background: var(--accent-ink); }
.tool-root[data-tool="pity-calculator"] .pc-switch input:focus-visible + .pc-switch-ui { outline: 2px solid var(--accent); outline-offset: 3px; }
.tool-root[data-tool="pity-calculator"] .pc-switch-text { font-weight: 600; font-size: .92rem; display: grid; gap: .15rem; }
.tool-root[data-tool="pity-calculator"] .pc-switch-text small { font-weight: 400; color: var(--text-3); font-size: .8rem; }
.tool-root[data-tool="pity-calculator"] .pc-switch.is-muted { opacity: .45; cursor: not-allowed; }
.tool-root[data-tool="pity-calculator"] .pc-radiance { display: grid; gap: .8rem; padding: .8rem; border-radius: var(--radius); background: rgba(255, 255, 255, .03); border: 1px dashed var(--border-strong); }
.tool-root[data-tool="pity-calculator"] .pc-radiance [hidden] { display: none; }

/* segmented target picker */
.tool-root[data-tool="pity-calculator"] .pc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; }
.tool-root[data-tool="pity-calculator"] .pc-seg-item { position: relative; min-width: 0; }
.tool-root[data-tool="pity-calculator"] .pc-seg-item input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tool-root[data-tool="pity-calculator"] .pc-seg-item span { display: grid; place-items: center; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); font-family: var(--font-display); font-weight: var(--display-weight); font-size: .95rem; color: var(--text-2); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.tool-root[data-tool="pity-calculator"] .pc-seg-item:hover span { color: var(--text); border-color: var(--accent); }
.tool-root[data-tool="pity-calculator"] .pc-seg-item input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 18px -8px var(--glow); }
.tool-root[data-tool="pity-calculator"] .pc-seg-item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- hero (gauge + stats) ---------- */
.tool-root[data-tool="pity-calculator"] .pc-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.4rem; align-items: center; overflow: hidden; }
.tool-root[data-tool="pity-calculator"] .pc-hero::after { content: ""; position: absolute; inset: -40% auto auto -20%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%); pointer-events: none; z-index: 0; }
.tool-root[data-tool="pity-calculator"] .pc-hero > * { position: relative; z-index: 1; }
.tool-root[data-tool="pity-calculator"] .pc-gauge { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1; margin-inline: auto; --vc: var(--accent); }
.tool-root[data-tool="pity-calculator"] .pc-gauge[data-verdict="0"] { --vc: var(--pc-bad); }
.tool-root[data-tool="pity-calculator"] .pc-gauge[data-verdict="1"] { --vc: #ff8a5c; }
.tool-root[data-tool="pity-calculator"] .pc-gauge[data-verdict="2"] { --vc: var(--pc-warn); }
.tool-root[data-tool="pity-calculator"] .pc-gauge[data-verdict="3"] { --vc: #b8e05a; }
.tool-root[data-tool="pity-calculator"] .pc-gauge[data-verdict="4"], .tool-root[data-tool="pity-calculator"] .pc-gauge[data-verdict="5"] { --vc: var(--pc-good); }
.tool-root[data-tool="pity-calculator"] .pc-gauge svg { width: 100%; height: 100%; overflow: visible; }
.tool-root[data-tool="pity-calculator"] .pc-s1 { stop-color: var(--pc-g1); }
.tool-root[data-tool="pity-calculator"] .pc-s2 { stop-color: var(--pc-g2); }
.tool-root[data-tool="pity-calculator"] .pc-gauge-track { fill: none; stroke: var(--pc-track); stroke-width: 14; stroke-linecap: round; }
.tool-root[data-tool="pity-calculator"] .pc-gauge-fill { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dasharray .8s var(--ease); filter: drop-shadow(0 0 10px var(--glow)); }
.tool-root[data-tool="pity-calculator"] .pc-gauge-ticks line { stroke: var(--text-3); stroke-width: 1.2; opacity: .5; }
.tool-root[data-tool="pity-calculator"] .pc-gauge-ticks line.is-big { stroke: var(--text-2); stroke-width: 2; opacity: .8; }
.tool-root[data-tool="pity-calculator"] .pc-gauge-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; grid-template-columns: minmax(0, 1fr); text-align: center; gap: .15rem; padding-top: .4rem; }
.tool-root[data-tool="pity-calculator"] .pc-gauge-label { max-width: 62%; margin-inline: auto; font-size: .66rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; }
.tool-root[data-tool="pity-calculator"] .pc-gauge-value { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.05; letter-spacing: var(--display-spacing); color: var(--text); text-shadow: 0 0 30px var(--glow); }
.tool-root[data-tool="pity-calculator"] .pc-gauge-verdict { margin-top: .25rem; padding: .2rem .65rem; border-radius: 99px; font-size: .75rem; font-weight: 800; letter-spacing: .03em; color: var(--vc); background: color-mix(in srgb, var(--vc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--vc) 45%, transparent); transition: color .3s, background .3s, border-color .3s; }
.tool-root[data-tool="pity-calculator"] .pc-hero-side { display: grid; gap: .7rem; min-width: 0; }
.tool-root[data-tool="pity-calculator"] .pc-goal { margin: 0; color: var(--text-2); font-weight: 600; }
.tool-root[data-tool="pity-calculator"] .pc-goal b { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); letter-spacing: var(--display-spacing); margin-left: .3rem; }
.tool-root[data-tool="pity-calculator"] .pc-with { margin: -.4rem 0 0; color: var(--text-3); font-size: .9rem; }
.tool-root[data-tool="pity-calculator"] .pc-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.tool-root[data-tool="pity-calculator"] .pc-stat { padding: .7rem .75rem; border-radius: var(--radius); background: rgba(255, 255, 255, .035); border: 1px solid var(--border); display: grid; gap: .1rem; min-width: 0; }
.tool-root[data-tool="pity-calculator"] .pc-stat dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; }
.tool-root[data-tool="pity-calculator"] .pc-stat dd { margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--text); overflow-wrap: anywhere; }
.tool-root[data-tool="pity-calculator"] .pc-stat small { color: var(--text-3); font-size: .74rem; overflow-wrap: anywhere; }
.tool-root[data-tool="pity-calculator"] .pc-advice { margin: 0; font-size: .88rem; color: var(--text-2); }
.tool-root[data-tool="pity-calculator"] .pc-advice:empty { display: none; }
.tool-root[data-tool="pity-calculator"] .pc-advice[data-tone="warn"] { padding-left: .7rem; border-left: 3px solid var(--pc-warn); }
.tool-root[data-tool="pity-calculator"] .pc-advice[data-tone="good"] { padding-left: .7rem; border-left: 3px solid var(--pc-good); color: var(--text); }

/* ---------- chart ---------- */
.tool-root[data-tool="pity-calculator"] .pc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tool-root[data-tool="pity-calculator"] .pc-card-head .panel-title { margin: 0; }
.tool-root[data-tool="pity-calculator"] .pc-chart { position: relative; width: 100%; touch-action: pan-y; border-radius: var(--radius); outline-offset: 4px; }
.tool-root[data-tool="pity-calculator"] .pc-chart svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.tool-root[data-tool="pity-calculator"] .pc-grid { stroke: var(--border); stroke-width: 1; }
.tool-root[data-tool="pity-calculator"] .pc-grid-v { stroke-dasharray: 2 4; opacity: .7; }
.tool-root[data-tool="pity-calculator"] .pc-grid.is-key { stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-dasharray: 5 5; }
.tool-root[data-tool="pity-calculator"] .pc-axis { fill: var(--text-3); font-size: 11px; font-family: var(--font-mono); }
.tool-root[data-tool="pity-calculator"] .pc-axis-key { fill: var(--accent); font-weight: 700; }
.tool-root[data-tool="pity-calculator"] .pc-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 2px 8px var(--glow)); }
.tool-root[data-tool="pity-calculator"] .pc-curve-faint { fill: none; stroke: var(--text-3); stroke-width: 1.3; opacity: .38; }
.tool-root[data-tool="pity-calculator"] .pc-a1 { stop-color: var(--accent); stop-opacity: .3; }
.tool-root[data-tool="pity-calculator"] .pc-a2 { stop-color: var(--accent); stop-opacity: 0; }
.tool-root[data-tool="pity-calculator"] .pc-budget line { stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 4 4; }
.tool-root[data-tool="pity-calculator"] .pc-budget circle { fill: var(--accent-2); stroke: var(--bg); stroke-width: 3; }
.tool-root[data-tool="pity-calculator"] .pc-budget text { fill: var(--accent-2); font-size: 12px; font-weight: 800; }
.tool-root[data-tool="pity-calculator"] .pc-cursor line { stroke: var(--text); stroke-width: 1; opacity: .55; }
.tool-root[data-tool="pity-calculator"] .pc-cursor circle { fill: var(--text); stroke: var(--accent); stroke-width: 3; }
.tool-root[data-tool="pity-calculator"] .pc-tip { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; display: grid; gap: .05rem; padding: .5rem .7rem; border-radius: 10px; background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: .8rem; white-space: nowrap; }
.tool-root[data-tool="pity-calculator"] .pc-tip b { font-size: 1.05rem; color: var(--accent); }
.tool-root[data-tool="pity-calculator"] .pc-tip small { color: var(--text-3); }
.tool-root[data-tool="pity-calculator"] .pc-chart-hint { display: block; margin-top: .4rem; }

/* ---------- table ---------- */
.tool-root[data-tool="pity-calculator"] .pc-table-wrap { overflow-x: auto; margin: 0 calc(-1 * clamp(.2rem, 1vw, .4rem)); }
.tool-root[data-tool="pity-calculator"] .pc-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .9rem; }
.tool-root[data-tool="pity-calculator"] .pc-table th, .tool-root[data-tool="pity-calculator"] .pc-table td { padding: .5rem .6rem; text-align: right; white-space: nowrap; }
.tool-root[data-tool="pity-calculator"] .pc-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; }
.tool-root[data-tool="pity-calculator"] .pc-table th:first-child, .tool-root[data-tool="pity-calculator"] .pc-table td:first-child { text-align: left; }
.tool-root[data-tool="pity-calculator"] .pc-table tbody tr { background: rgba(255, 255, 255, .03); transition: background .2s; }
.tool-root[data-tool="pity-calculator"] .pc-table tbody tr:hover { background: rgba(255, 255, 255, .06); }
.tool-root[data-tool="pity-calculator"] .pc-table tbody tr > :first-child { border-radius: 10px 0 0 10px; }
.tool-root[data-tool="pity-calculator"] .pc-table tbody tr > :last-child { border-radius: 0 10px 10px 0; }
.tool-root[data-tool="pity-calculator"] .pc-table tbody tr.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.tool-root[data-tool="pity-calculator"] .pc-goal-btn { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1rem; color: var(--text); padding: .15rem .45rem; margin-left: -.45rem; border-radius: 6px; letter-spacing: var(--display-spacing); }
.tool-root[data-tool="pity-calculator"] .pc-goal-btn:hover { color: var(--accent); }
.tool-root[data-tool="pity-calculator"] tr.is-on .pc-goal-btn { color: var(--accent); }
.tool-root[data-tool="pity-calculator"] .pc-td-chance { position: relative; min-width: 8.5rem; }
.tool-root[data-tool="pity-calculator"] .pc-td-chance b { position: relative; }
.tool-root[data-tool="pity-calculator"] .pc-bar { position: absolute; left: .6rem; right: .6rem; bottom: .3rem; height: 3px; border-radius: 3px; background: var(--pc-track); overflow: hidden; }
.tool-root[data-tool="pity-calculator"] .pc-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--pc-g1), var(--pc-g2)); border-radius: inherit; transition: width .6s var(--ease); }

/* ---------- assumptions ---------- */
.tool-root[data-tool="pity-calculator"] .pc-assume summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); text-transform: var(--display-transform); font-size: 1.02rem; }
.tool-root[data-tool="pity-calculator"] .pc-assume summary::-webkit-details-marker { display: none; }
.tool-root[data-tool="pity-calculator"] .pc-assume summary > .i:first-child { color: var(--accent); width: 20px; height: 20px; }
.tool-root[data-tool="pity-calculator"] .pc-assume .pc-chev { margin-left: auto; color: var(--text-3); transition: transform .3s var(--ease); }
.tool-root[data-tool="pity-calculator"] .pc-assume[open] .pc-chev { transform: rotate(180deg); }
.tool-root[data-tool="pity-calculator"] .pc-assume-body { margin-top: 1rem; color: var(--text-2); font-size: .9rem; display: grid; gap: .7rem; }
.tool-root[data-tool="pity-calculator"] .pc-assume-body p { margin: 0; }
.tool-root[data-tool="pity-calculator"] .pc-assume-body h4 { font-size: .95rem; color: var(--text); margin-top: .4rem; }
.tool-root[data-tool="pity-calculator"] .pc-assume-body ul { padding-left: 1.1rem; display: grid; gap: .35rem; }
.tool-root[data-tool="pity-calculator"] .pc-spark { width: 100%; max-width: 420px; height: 56px; }
.tool-root[data-tool="pity-calculator"] .pc-spark rect { fill: var(--text-3); opacity: .55; }
.tool-root[data-tool="pity-calculator"] .pc-spark rect.is-soft { fill: var(--accent); opacity: 1; }

/* ---------- mobile floating result ---------- */
.tool-root[data-tool="pity-calculator"] .pc-float { display: none; }

@media (max-width: 1080px) {
  .tool-root[data-tool="pity-calculator"] .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tool-root[data-tool="pity-calculator"] .pc-layout { grid-template-columns: minmax(0, 1fr); }
  .tool-root[data-tool="pity-calculator"] .pc-float {
    position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; translate: -50% 150%;
    display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem .55rem .6rem; border-radius: 999px;
    background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
    font-weight: 700; font-size: .88rem; color: var(--text); transition: translate .35s var(--ease); opacity: 0; pointer-events: none;
  }
  .tool-root[data-tool="pity-calculator"] .pc-float.is-on { translate: -50% 0; opacity: 1; pointer-events: auto; }
  .tool-root[data-tool="pity-calculator"] .pc-float b { padding: .25rem .6rem; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); }
  .tool-root[data-tool="pity-calculator"] .pc-float .i { width: 16px; height: 16px; color: var(--text-3); }
  .tool-root[data-tool="pity-calculator"] .pc-float-ring { display: none; }
}
@media (max-width: 640px) {
  .tool-root[data-tool="pity-calculator"] .pc-top { gap: .6rem; }
  .tool-root[data-tool="pity-calculator"] .pc-modes { width: 100%; }
  .tool-root[data-tool="pity-calculator"] .pc-mode { flex: 1 1 0; min-width: 0; justify-content: center; padding: .5rem .45rem; font-size: .8rem; white-space: nowrap; }
  .tool-root[data-tool="pity-calculator"] .pc-mode span { overflow: hidden; text-overflow: ellipsis; }
  .tool-root[data-tool="pity-calculator"] .pc-mode .i { display: none; }
  .theme-zzz .tool-root[data-tool="pity-calculator"] .pc-mode { font-size: .9rem; }
  .tool-root[data-tool="pity-calculator"] .pc-gauge { margin-bottom: -10%; }
  .tool-root[data-tool="pity-calculator"] .pc-actions { margin-left: 0; }
  .tool-root[data-tool="pity-calculator"] .pc-hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .tool-root[data-tool="pity-calculator"] .pc-gauge { max-width: 220px; }
  .tool-root[data-tool="pity-calculator"] .pc-hero-side { text-align: center; }
  .tool-root[data-tool="pity-calculator"] .pc-stat { text-align: left; }
  .tool-root[data-tool="pity-calculator"] .pc-advice[data-tone] { text-align: left; }
  .tool-root[data-tool="pity-calculator"] .pc-table { font-size: .84rem; }
  .tool-root[data-tool="pity-calculator"] .pc-table th, .tool-root[data-tool="pity-calculator"] .pc-table td { padding: .45rem .4rem; }
  /* the average is already in the hero: keep the table within the screen */
  .tool-root[data-tool="pity-calculator"] .pc-table tr > :nth-child(3) { display: none; }
}
@media (max-width: 380px) {
  .tool-root[data-tool="pity-calculator"] .pc-row2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-root[data-tool="pity-calculator"] .pc-gauge-fill, .tool-root[data-tool="pity-calculator"] .pc-bar::after, .tool-root[data-tool="pity-calculator"] .pc-float { transition: none; }
}

/* ---------- per-game flavour ---------- */
/* Genshin — celestial gold, star-chart gauge with an ornamental outer ring */
.theme-genshin .tool-root[data-tool="pity-calculator"] { --pc-g1: #8fc3ff; --pc-g2: #f3d68f; --pc-track: rgba(211, 188, 142, .14); }
.theme-genshin .tool-root[data-tool="pity-calculator"] .pc-gauge::before { content: ""; position: absolute; inset: 1%; border-radius: 50%; border: 1px solid rgba(227, 199, 142, .28); box-shadow: inset 0 0 0 6px rgba(13, 18, 34, .35), inset 0 0 0 7px rgba(227, 199, 142, .15); pointer-events: none; }
.theme-genshin .tool-root[data-tool="pity-calculator"] .pc-gauge-value { background: linear-gradient(180deg, #fffaf0 30%, #e3c78e); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 18px rgba(227, 199, 142, .35)); }
.theme-genshin .tool-root[data-tool="pity-calculator"] .pc-gauge-ticks line.is-big { stroke: #e3c78e; }
.theme-genshin .tool-root[data-tool="pity-calculator"] .pc-mode.is-active, .theme-genshin .tool-root[data-tool="pity-calculator"] .pc-seg-item input:checked + span { background: linear-gradient(180deg, #f3ecdf, #e2d6bf); color: #3b4254; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 2px rgba(227, 199, 142, .55); }
.theme-genshin .tool-root[data-tool="pity-calculator"] .pc-seg-item span { border-radius: 999px; }
.theme-genshin .tool-root[data-tool="pity-calculator"] .pc-goal b, .theme-genshin .tool-root[data-tool="pity-calculator"] .pc-total b { color: #f3d68f; }

/* Honkai: Star Rail — chamfered glass, segmented gauge like a Warp meter */
.theme-hsr .tool-root[data-tool="pity-calculator"] { --pc-g1: #b7a8ff; --pc-g2: #f3d18a; }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-gauge-track { stroke-dasharray: 1.6 .6; stroke-linecap: butt; }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-gauge-fill { stroke-linecap: butt; }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-mode, .theme-hsr .tool-root[data-tool="pity-calculator"] .pc-modes { border-radius: 3px; }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-mode { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-mode.is-active { background: linear-gradient(100deg, #f3d18a, #e9b96a); color: #16110a; }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-seg-item span, .theme-hsr .tool-root[data-tool="pity-calculator"] .pc-stat, .theme-hsr .tool-root[data-tool="pity-calculator"] .pc-total, .theme-hsr .tool-root[data-tool="pity-calculator"] .pc-radiance { border-radius: 3px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-seg-item input:checked + span { background: linear-gradient(100deg, #f3d18a, #e9b96a); color: #16110a; }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-gauge-value { font-size: clamp(2.3rem, 5.5vw, 3rem); }
.theme-hsr .tool-root[data-tool="pity-calculator"] .pc-table tbody tr > :first-child, .theme-hsr .tool-root[data-tool="pity-calculator"] .pc-table tbody tr > :last-child { border-radius: 0; }

/* Zenless Zone Zero — street brutalism: halftone disc, hard shadows, acid lime */
.theme-zzz .tool-root[data-tool="pity-calculator"] { --pc-g1: #ff7a1a; --pc-g2: #d4ff3d; --pc-track: #262626; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-gauge::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(rgba(212, 255, 61, .16) 1.2px, transparent 1.6px) 0 0 / 7px 7px; pointer-events: none; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-gauge-track, .theme-zzz .tool-root[data-tool="pity-calculator"] .pc-gauge-fill { stroke-width: 18; stroke-linecap: butt; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-gauge-fill { filter: drop-shadow(4px 4px 0 #000); }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-gauge-value { font-style: italic; font-size: clamp(2.4rem, 6vw, 3.2rem); color: #d4ff3d; text-shadow: 3px 3px 0 #000; transform: skewX(-6deg); }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-gauge-verdict { border-radius: 4px; font-family: var(--font-mono); text-transform: uppercase; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-modes, .theme-zzz .tool-root[data-tool="pity-calculator"] .pc-mode { border-radius: 8px; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-mode { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-mode.is-active { box-shadow: 3px 3px 0 #000; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-seg-item span { border-radius: 6px; border-width: 2px; border-color: #333; font-style: italic; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-seg-item input:checked + span { box-shadow: 3px 3px 0 #000; transform: translate(-1px, -1px); }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-stat { border: 2px solid #2a2a2a; border-radius: 8px; background: #121212; box-shadow: 3px 3px 0 #000; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-total { border-radius: 8px; border-width: 2px; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-table thead th { color: #0c0c0c; background: #d4ff3d; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-table thead th:first-child { border-radius: 4px 0 0 4px; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-table thead th:last-child { border-radius: 0 4px 4px 0; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-curve { filter: none; stroke-width: 3.5; }
.theme-zzz .tool-root[data-tool="pity-calculator"] .pc-switch-ui, .theme-zzz .tool-root[data-tool="pity-calculator"] .pc-switch-ui::after { border-radius: 4px; }

/* Honkai Impact 3rd — crimson energy + holo cyan, hex-cut chips, neon glow */
.theme-hi3 .tool-root[data-tool="pity-calculator"] { --pc-g1: #6fe7ff; --pc-g2: #ff4f8b; --pc-track: rgba(255, 110, 160, .12); }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-gauge::before { content: ""; position: absolute; inset: 20%; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: radial-gradient(circle, rgba(255, 79, 139, .16), transparent 70%); border: 0; pointer-events: none; }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-gauge-fill { filter: drop-shadow(0 0 12px rgba(255, 79, 139, .6)); }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-gauge-value { font-size: clamp(1.7rem, 4.4vw, 2.2rem); text-shadow: 0 0 24px rgba(255, 79, 139, .55); }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-modes, .theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-mode { border-radius: 4px; }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-mode { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-mode.is-active, .theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-seg-item input:checked + span { background: linear-gradient(100deg, #ff4f8b, #ff7a59); color: #fff; }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-seg-item span { border-radius: 3px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-stat { border-radius: 4px; border-top: 2px solid rgba(111, 231, 255, .45); }
.theme-hi3 .tool-root[data-tool="pity-calculator"] .pc-goal b { font-size: 1.2rem; }