/* Stuffer Shack dice tray (Shadowrun 6th Edition).
   A small tray docked at the bottom right of every page; it collapses to one bar.
   Every class, id, variable and animation starts with "sst-", so the WordPress theme
   (or any other page) can't clash with it. Hits are filled and glowing, 1s have a solid
   red border, so color is never the only signal. */
.sst-tray {
  --sst-panel: #1f0f0c;
  --sst-field: rgba(10, 6, 12, .6);
  --sst-ink: #f8f4fb;
  --sst-ink-dim: #d6cde0;
  --sst-ink-faint: #bdb1bf;
  --sst-blue: #3b52f0;
  --sst-blue-bright: #7d92ff;
  --sst-blue-line: rgba(120, 140, 255, .45);
  --sst-pop: rgba(125, 146, 255, .85);
  --sst-violet: #a88bff;
  --sst-ember: #ff9a3c;
  --sst-roww: calc(8 * 36px + 7 * 7px + 1px);   /* eight dice across: the roller's "right border" for dice, Extended/Threshold and the boosts */
  --sst-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sst-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(392px, calc(100vw - 32px));
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  box-sizing: border-box;
  background: var(--sst-panel);
  border: 1px solid var(--sst-blue-line);
  color: var(--sst-ink);
  font: 16px/1.55 var(--sst-sans);
  text-align: left;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.sst-tray *, .sst-tray *::before, .sst-tray *::after { box-sizing: border-box; }
.sst-tray::before, .sst-tray::after {
  content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; z-index: 3;
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), var(--sst-blue-bright) calc(50% - 1px), var(--sst-blue-bright) calc(50% + 1px), transparent calc(50% + 1px));
}
.sst-tray::before { top: 0; right: 0; }
.sst-tray::after { bottom: 0; left: 0; }
@media (max-width: 430px) { .sst-tray { left: max(16px, env(safe-area-inset-left, 0px)); width: auto; } }
.sst-tray [hidden] { display: none !important; }

/* inside a page's tools area (#sst-mount): a plain block, no docking, no title bar */
.sst-tray.sst-inline { position: static; width: 100%; max-height: none; clip-path: none; border: 0; background: transparent; }
.sst-tray.sst-inline::before, .sst-tray.sst-inline::after { display: none; }
.sst-inline .sst-tray-head { display: none; }
.sst-inline .sst-tray-body { overflow: visible; padding: 0; }

/* title bar */
.sst-tray-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: rgba(59,82,240,.16); border-bottom: 1px solid rgba(120,140,255,.25); flex: none; }
.sst-collapsed .sst-tray-head { border-bottom: 0; }
.sst-tray-title { margin-right: auto; font: 500 12px/1 var(--sst-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sst-ink); flex: none; }
.sst-tray-title::before { content: "// "; color: var(--sst-violet); }
.sst-tray-toggle { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: transparent; color: var(--sst-blue-bright); border: 1px solid var(--sst-pop); border-radius: 0; cursor: pointer; padding: 0; margin: 0; }
.sst-tray-toggle:hover { background: rgba(59,82,240,.28); color: var(--sst-ink); }
.sst-tray-toggle svg { transition: transform .15s; }
.sst-collapsed .sst-tray-toggle svg { transform: rotate(180deg); }
.sst-collapsed .sst-tray-body { display: none; }
.sst-tray-body { overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(125,146,255,.4) transparent; padding: 0 12px 14px; min-height: 0; overscroll-behavior: contain; }

.sst-tray button, .sst-tray input { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }   /* quick double taps on - and + must not zoom the phone */
.sst-tray button:focus-visible, .sst-tray input:focus-visible { outline: 2px solid var(--sst-blue-bright); outline-offset: 2px; }

/* controls */
.sst-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 0 0 10px; }
.sst-controls.sst-actions { margin: 14px 0 16px; align-items: center; gap: 8px 10px; }
.sst-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sst-f > label { font: 500 11px/1.2 var(--sst-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sst-ink-faint); }
.sst-stepper { display: flex; align-items: stretch; }
.sst-stepper input { width: 48px; height: 46px; margin: 0; text-align: center; background: var(--sst-field); border: 1px solid var(--sst-blue-line); border-left: 0; border-right: 0; font: 500 16px var(--sst-mono); color: var(--sst-ink); border-radius: 0; -moz-appearance: textfield; appearance: textfield; padding: 0; box-shadow: none; }
.sst-stepper input::-webkit-outer-spin-button, .sst-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sst-st-btn { width: 46px; height: 46px; margin: 0; background: var(--sst-field); border: 1px solid var(--sst-blue-line); border-radius: 0; color: var(--sst-blue-bright); font: 500 24px/1 var(--sst-mono); cursor: pointer; padding: 0; }
.sst-st-btn:hover { background: rgba(59,82,240,.3); color: var(--sst-ink); }
.sst-st-btn:disabled { opacity: .35; cursor: not-allowed; }
.sst-chk { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: 14px; color: var(--sst-ink-dim); cursor: pointer; }
.sst-chk input { width: 24px; height: 24px; accent-color: var(--sst-blue-bright); margin: 0; flex: none; }
.sst-controls.sst-actions .sst-chk { min-height: 40px; flex: 0 0 auto; gap: 8px; font-size: 13px; }
.sst-btn { min-height: 38px; margin: 0; padding: 0 16px; background: transparent; color: var(--sst-blue-bright); border: 1px solid var(--sst-pop); border-radius: 0; cursor: pointer; font: 500 12px/1 var(--sst-mono); letter-spacing: .1em; text-transform: uppercase; }
.sst-btn:hover:not(:disabled) { background: rgba(59,82,240,.3); color: var(--sst-ink); }
.sst-btn:disabled { opacity: .4; cursor: not-allowed; }
.sst-btn.sst-small { min-height: 32px; padding: 0 10px; font-size: 11px; }
.sst-controls .sst-btn { border-radius: 999px; min-height: 26px; padding: 0 13px; box-shadow: 3px 3px 6px rgba(0,0,0,.75); }
.sst-controls .sst-btn:active:not(:disabled) { box-shadow: 1px 1px 3px rgba(0,0,0,.75); transform: translate(1px,1px); }
/* the control cluster: Exploding 6s over the die, Extended test to its right with Threshold under it, Clear centered under the die */
.sst-cluster { display: grid; grid-template-columns: max-content max-content; column-gap: 20px; row-gap: 4px; justify-content: space-between; align-items: center; width: 100%; max-width: var(--sst-roww); margin: 8px 0 12px; }
.sst-c-expl { grid-area: 1 / 1; justify-self: center; }
.sst-c-die { grid-area: 2 / 1; justify-self: center; margin: 0; }
.sst-c-clear { grid-area: 3 / 1; justify-self: center; margin: 4px 0 0; }
.sst-c-ext { grid-area: 1 / 2; justify-self: end; }
.sst-c-thr { grid-area: 2 / 2; justify-self: end; align-self: end; margin-bottom: 4px; }
.sst-c-thr .sst-f > label { text-align: center; }
.sst-c-clear .sst-btn { min-height: 38px; padding: 0 20px; }
.sst-cluster .sst-chk { min-height: 40px; gap: 8px; font-size: 13px; line-height: 1.25; }
.sst-f.sst-thr.sst-soft { opacity: .4; }
.sst-f.sst-thr.sst-soft > label { color: var(--sst-ink-faint); }
.sst-f.sst-thr .sst-stepper input:disabled { color: var(--sst-ink-faint); }
@media (max-width: 520px) { .sst-cluster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; justify-content: normal; } }

/* dice: the pool selector and the results share one die look */
.sst-dice { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 10px; max-width: var(--sst-roww); }
.sst-die, .sst-stepper.sst-die-sel input.sst-die-face {
  background: linear-gradient(150deg, #36244d 0%, #1a0e25 100%);
  border: 1.5px solid rgba(200,210,255,.5);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 4px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.55);
  color: var(--sst-ink);
}
.sst-die { width: 36px; height: 38px; margin: 0; display: grid; place-items: center; font: 700 16px/1 var(--sst-mono); padding: 0; }
.sst-die.sst-hit { background-image: linear-gradient(150deg, #3149c4 0%, #18207a 100%); border: 2px solid #9fb0ff; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.4), 0 0 10px 2px rgba(80,120,255,.85); }
.sst-die.sst-one { border: 2px solid #ff6a6a; color: #ffb4ac; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -3px 4px rgba(0,0,0,.45), 0 0 10px 2px rgba(255,60,60,.8); }
.sst-die.sst-extra { text-decoration: underline dotted; text-underline-offset: 4px; }
.sst-die.sst-rolling { color: var(--sst-ink-faint); }
button.sst-die { cursor: pointer; }
button.sst-die:hover { outline: 2px solid var(--sst-blue-bright); outline-offset: 2px; }
/* the pool selector: a die between a bare minus and plus; tap the die to roll */
.sst-stepper.sst-die-sel { align-items: center; gap: 4px; }
.sst-stepper.sst-die-sel .sst-st-btn { width: 48px; height: 56px; background: none; border: 0; font-size: 34px; color: var(--sst-blue-bright); }
.sst-stepper.sst-die-sel .sst-st-btn:hover { background: none; color: #fff; text-shadow: 0 0 10px var(--sst-blue-bright); }
.sst-stepper.sst-die-sel input.sst-die-face { width: 54px; height: 54px; border: 2px solid var(--sst-violet); border-radius: 12px; font: 700 24px/1 var(--sst-mono); cursor: pointer; caret-color: transparent; -webkit-tap-highlight-color: transparent; }
.sst-stepper.sst-die-sel input.sst-die-face:focus:not(:focus-visible) { outline: none; }
.sst-stepper.sst-die-sel input.sst-die-face.sst-locked { opacity: .5; cursor: not-allowed; }
.sst-f.sst-roll > label { width: 54px; margin-left: 52px; text-align: center; font-size: 13px; font-weight: 700; color: var(--sst-blue-bright); cursor: pointer; }
.sst-f.sst-roll > label:hover { color: #fff; }
.sst-hits-txt { align-self: center; margin-left: 4px; font: 700 13px/1 var(--sst-mono); letter-spacing: .04em; color: var(--sst-blue-bright); text-shadow: 0 0 8px rgba(80,120,255,.7); white-space: nowrap; }
.sst-zn { min-height: 24px; }

/* glitch banners */
.sst-glitchbar { position: relative; margin: 2px 0 10px; padding: 10px 12px; text-align: center; font: 700 20px/1.1 var(--sst-mono); letter-spacing: .2em; text-transform: uppercase; border: 2px solid; overflow: hidden;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
.sst-glitchbar.sst-glitch { color: var(--sst-ember); border-color: var(--sst-ember); background-color: rgba(255,154,60,.12); text-shadow: 2px 0 rgba(255,60,60,.85), -2px 0 rgba(80,210,255,.85); box-shadow: 0 0 14px rgba(255,154,60,.5), inset 0 0 12px rgba(255,154,60,.25); }
.sst-glitchbar.sst-critical { color: #ff5a5a; border-color: #ff3b3b; background-color: rgba(255,40,40,.18); font-size: 18px; letter-spacing: .12em; text-shadow: 3px 0 rgba(255,255,255,.7), -3px 0 rgba(80,210,255,.85); box-shadow: 0 0 22px rgba(255,50,50,.75), inset 0 0 16px rgba(255,50,50,.35); }
.sst-glitchbar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: translateX(-120%); pointer-events: none; }

/* extended test */
.sst-progress { margin: 0 0 8px; font: 500 13px/1.3 var(--sst-mono); color: var(--sst-ink-dim); }
.sst-progress b { font-size: 20px; color: var(--sst-ink); margin-right: 6px; }
.sst-verdict { margin: 0 0 10px; padding: 9px 12px; border-radius: 9px; font: 700 13px/1.3 var(--sst-mono); letter-spacing: .04em; color: #fff; }
.sst-verdict.sst-pass { background: linear-gradient(150deg, #3149c4 0%, #18207a 100%); border: 2px solid #9fb0ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.4), 0 0 12px 2px rgba(80,120,255,.85); }
.sst-verdict.sst-pass::before { content: "PASS  "; }
.sst-verdict.sst-fail { background: linear-gradient(150deg, #5a1f2a 0%, #2b0c14 100%); border: 2px solid #ff6a6a; color: #ffd2cc; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -3px 4px rgba(0,0,0,.45), 0 0 12px 2px rgba(255,60,60,.8); }
.sst-verdict.sst-fail::before { content: "FAIL  "; }
.sst-verdict span { font-weight: 500; letter-spacing: 0; }
.sst-note { margin: 6px 0 0; font: 12px/1.4 var(--sst-sans); color: var(--sst-ink-faint); }

/* Edge boosts */
.sst-boosts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 6px; max-width: var(--sst-roww); }
.sst-boosts .sst-btn { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; padding: 0 10px; line-height: 1.2; font-size: 11px; }
.sst-boosts .sst-btn.sst-on { background: rgba(59,82,240,.4); color: var(--sst-ink); }
.sst-cost { color: var(--sst-violet); flex: none; white-space: nowrap; padding-left: 6px; border-left: 1px solid rgba(168,139,255,.5); }

/* log strip */
.sst-logwrap { margin-top: 8px; padding-top: 4px; border-top: 1px dashed rgba(120,140,255,.3); }
.sst-logbar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 0; padding: 0; background: none; border: 0; color: var(--sst-ink-dim); font: 500 12px/1.3 var(--sst-mono); text-align: left; cursor: pointer; }
.sst-logbar:hover { color: var(--sst-ink); }
.sst-arrow { flex: none; display: inline-block; width: 16px; color: var(--sst-blue-bright); transition: transform .15s; }
.sst-logbar[aria-expanded="true"] .sst-arrow { transform: rotate(90deg); }
.sst-lname { flex: none; color: var(--sst-violet); text-transform: uppercase; letter-spacing: .08em; }
.sst-last { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sst-logbody { height: 120px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(125,146,255,.4) transparent; }
.sst-log { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 500 12px/1.35 var(--sst-mono); color: var(--sst-ink-dim); }
.sst-log li { margin: 0; padding: 6px 8px; border-left: 2px solid var(--sst-blue); background: var(--sst-field); }
.sst-log b { color: var(--sst-violet); font-weight: 500; margin-right: 6px; text-transform: uppercase; letter-spacing: .06em; }
.sst-lg { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sst-lg.sst-glitch { color: var(--sst-ember); border-color: var(--sst-ember); }
.sst-lg.sst-critical { color: #ff5a5a; border-color: #ff5a5a; background: rgba(255,60,60,.15); }

/* keep the page's last lines clear of the collapsed tray */
body.sst-has-tray { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: no-preference) {
  .sst-out > * { animation: sst-pop .18s ease-out; }
  .sst-die.sst-rolling { animation: sst-tumble .45s ease-out both; }
  .sst-stepper.sst-die-sel input.sst-die-face.sst-pulse { animation: sst-dpulse .333s ease-in-out 1; }
  .sst-glitchbar.sst-glitch { animation: sst-gjit 1.6s infinite; }
  .sst-glitchbar.sst-critical { animation: sst-gjit .9s infinite, sst-gpulse .9s infinite; }
  .sst-glitchbar::after { animation: sst-gsweep 1.6s infinite; }
}
@keyframes sst-tumble { 0% { transform: translate(var(--sst-x0), var(--sst-y0)) rotate(var(--sst-r0)); } 30% { transform: translate(var(--sst-x1), var(--sst-y1)) rotate(var(--sst-r1)); } 60% { transform: translate(var(--sst-x2), var(--sst-y2)) rotate(var(--sst-r2)); } 85% { transform: translate(var(--sst-x3), var(--sst-y3)) rotate(var(--sst-r3)); } 100% { transform: none; } }
@keyframes sst-dpulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 4px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.55); border-color: #a88bff; }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.35), 0 0 26px 8px rgba(168,139,255,.95); border-color: #e1d6ff; }
}
@keyframes sst-gjit { 0%, 70%, 100% { transform: none; } 72% { transform: translate(-3px,1px) skewX(-6deg); } 76% { transform: translate(3px,-1px) skewX(5deg); } 80% { transform: translate(-2px,0); } 84% { transform: none; } }
@keyframes sst-gpulse { 0%, 100% { box-shadow: 0 0 14px rgba(255,50,50,.5), inset 0 0 10px rgba(255,50,50,.25); } 50% { box-shadow: 0 0 30px rgba(255,50,50,.95), inset 0 0 20px rgba(255,50,50,.5); } }
@keyframes sst-gsweep { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes sst-pop { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }