/* Magic Jev Ball's page: the old retro panel, redrawn in the wizard's family (wizard.css tokens, pixel edges).
   The ball is three.js on a canvas; the answer window is HTML on top of it, so the text stays crisp. */
.jb { margin: 2.2rem 0 0; padding: 26px 20px 24px; background: var(--card); border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--line); font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; }

.jb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.jb-head { text-align: center; margin-bottom: 22px; }
.jb h1 { margin: 0; font-size: clamp(1.7rem, 7vw, 2.3rem); letter-spacing: .04em; }
.jb-sub { margin: 8px 0 0; color: var(--muted); font-size: 1rem; }

.jb-stage { position: relative; width: min(300px, 80vw); aspect-ratio: 1; margin: 0 auto 24px; cursor: pointer; border-radius: 50%;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
.jb-stage:active { transform: scale(.97); }
.jb-stage:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.jb-tap { margin: -14px 0 20px; text-align: center; font: 500 .8rem/1.4 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#jb-canvas { display: block; width: 100%; height: 100%; }
/* No WebGL: the stage paints the ball itself and nothing else changes. */
.jb-stage.flat { background: radial-gradient(circle at 36% 30%, #3a3a3a 0%, #111 55%, #000 100%); }

/* Matches the 3D disc, whose radius is derived to project to 37% of the canvas (ball.js). Text only: the paper
   circle and its rim are geometry, so they turn with the ball instead of floating in front of it. */
.jb-window { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 37%; aspect-ratio: 1; color: #16150f;
  display: grid; place-items: center; padding: 4%; text-align: center; transition: opacity .22s ease; pointer-events: none; }
/* No WebGL: the overlay paints its own disc, since there is no geometry to sit on. */
.jb-stage.flat .jb-window { background: #f2efe6; border: 2px solid #0b0b0b; border-radius: 50%; }
.jb-window.hidden { opacity: 0; }
.jb-face { font: 600 12px/1.15 var(--pixel); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: break-word; hyphens: none; }
.jb-face.jb-idle { font-size: clamp(1rem, 4.4vw, 1.25rem); letter-spacing: .1em; }

.jb-ask { display: flex; gap: 8px; margin-bottom: 10px; }
/* 16px or mobile Safari zooms the viewport on focus. */
#jb-q { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font: 16px/1.3 Caslon, Georgia, serif; color: var(--ink); background: var(--bg);
  border: 2px solid var(--ink); border-radius: 0; appearance: none; }
#jb-q::placeholder { color: var(--muted); }
#jb-go { padding: 10px 16px; font: 600 .95rem/1 var(--pixel); letter-spacing: .06em; color: var(--bg); background: var(--ink);
  border: 2px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--gold); cursor: pointer; }
#jb-go:hover:not(:disabled) { background: var(--accent); }
#jb-go:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gold); }
#jb-go:disabled { opacity: .45; cursor: default; }

.jb-status { min-height: 1.4em; margin: 6px 0 14px; font-size: .95rem; color: #a3402a; text-align: center; }

.jb-detail { border-top: 2px solid var(--ink); padding-top: 10px; }
.jb-toggle { width: 100%; text-align: left; background: none; color: var(--ink); border: 0; padding: 6px 0; cursor: pointer;
  font: 500 .9rem/1.4 var(--pixel); letter-spacing: .03em; }
.jb-chev { display: inline-block; transition: transform .2s ease; color: var(--accent); }
.jb-toggle[aria-expanded="true"] .jb-chev { transform: rotate(90deg); }

.jb-panel { padding-top: 10px; }
.jb-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 9px 0;
  border-bottom: 1px dashed var(--line); font-size: .95rem; }
/* display: flex outranks the UA's [hidden] { display: none }, so a hidden row would stay visible. */
.jb-row[hidden] { display: none; }
.jb-k { font: 500 .85rem/1.4 var(--pixel); color: var(--muted); }
.jb-muted { color: var(--muted); font-size: .88rem; }
.jb-muted[hidden] { display: none; }

.jb-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 12px 0 8px; }
.jb-cell { position: relative; height: 40px; border: 2px solid var(--ink); background: var(--bg); overflow: hidden; }
.jb-cell i { position: absolute; left: 0; right: 0; bottom: 0; display: block; background: var(--ink); }
.jb-cell.at i { background: var(--accent); }

.jb-legend { list-style: none; margin: 0 0 6px; padding: 0; font-size: .9rem; color: var(--muted); }
.jb-legend li { padding: 2px 0; }
.jb-legend li.at { color: var(--accent); font-weight: 700; }
.jb-hot { color: var(--accent); }

.jb-foot { margin: 14px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.65; }
.jb-credit { margin: 2rem 0 0; font-size: .95rem; color: var(--muted); }
.jb-credit strong { color: var(--ink); }
.jb ~ .back { margin-top: 1.6rem !important; }

@media (max-width: 480px) {
  .jb { margin-top: 1.6rem; padding: 22px 14px 20px; }
  #jb-go { padding: 10px 12px; }
}