/* 文字の決まり (docs/SPEC.md 13): the chunky face is Dela Gothic One for kana, digits, Latin
   and signs, and Zen Maru Gothic Black for kanji, whose strokes close up in Dela Gothic One.
   The second face below takes over for the kanji range, so every use of the family name
   (CSS, SVG, canvas) follows the rule by itself. The weight range stops browsers from
   thickening either face further when a bold weight is inherited. */
@font-face { font-family: "Dela Gothic One"; src: url("fonts/dela-gothic-one.woff2") format("woff2"); font-weight: 400 900; font-display: block; }
@font-face { font-family: "Dela Gothic One"; src: url("fonts/zen-maru-gothic-black.woff2") format("woff2"); font-weight: 400 900; font-display: block; unicode-range: U+3005, U+4E00-9FFF, U+FF0B; }
@font-face { font-family: "Zen Maru Gothic"; src: url("fonts/zen-maru-gothic-bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Zen Maru Gothic"; src: url("fonts/zen-maru-gothic-black.woff2") format("woff2"); font-weight: 900; font-display: block; }

:root {
  --ink: #1b1d4d;
  --paper: #fff8ec;
  --blue: #3b6bff;
  --pink: #ff7ab6;
  --pink-soft: #ffd0e4;
  --blue-soft: #d9e4ff;
  --yellow: #ffd23f;
  --mint: #3fdcb0;
  --violet: #a77bff;
  --red: #ff4f6d;
  --E: 0;
  --kick: 0;
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --chunky: "Dela Gothic One", "Zen Maru Gothic", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--round);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }

#paper {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 122, 182, .16) 0 120px, transparent 121px),
    radial-gradient(circle at 88% 78%, rgba(59, 107, 255, .12) 0 160px, transparent 161px),
    linear-gradient(rgba(59, 107, 255, .11) 1.5px, transparent 1.5px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(59, 107, 255, .11) 1.5px, transparent 1.5px) 0 0 / 26px 26px,
    var(--paper);
}
#rays-fallback {
  display: none; position: fixed; inset: -50vmax; z-index: 1; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #3b6bff 0 9deg, #ff7ab6 9deg 18deg);
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#fx-back { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
#actors { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
#cutins { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
#flash { position: fixed; inset: 0; z-index: 7; pointer-events: none; background: #fff; opacity: 0; }
.dk-digit { font-family: var(--round); font-weight: 900; fill: var(--ink); stroke: #fff; stroke-width: 6px; paint-order: stroke; }

#app {
  position: relative; z-index: 2;
  width: min(100vw, 460px); height: 100dvh; max-height: 980px;
  margin: 0 auto;
}
@media (min-height: 980px) { #app { top: calc((100dvh - 980px) / 2); } }
.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: flex; }

/* ------------------------------------------------------------ title */
#screen-title { flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: calc(28px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
#screen-title > * { flex: none; }
/* Logo: layered paper cut-outs. A spinning burst sits behind "ドパ",
   "素数" rides on a folded ribbon, operator scraps float around. */
.logo { position: relative; margin: calc(var(--fs) * 0.62) 0 calc(var(--fs) * 0.2); display: grid; justify-items: center; font-family: var(--chunky); font-weight: 400; line-height: 1; --fs: clamp(64px, 21vw, 96px); }
.logo-burst { position: absolute; left: 50%; top: calc(var(--fs) * 0.52); width: calc(var(--fs) * 2.7); height: calc(var(--fs) * 2.7); transform: translate(-50%, -50%) rotate(calc(var(--spin, 0) * 1deg)); z-index: -1; filter: drop-shadow(0 6px 0 rgba(27, 29, 77, .9)); }
.logo-top { display: flex; gap: .02em; font-size: var(--fs); letter-spacing: -.04em; }
.logo i { font-style: normal; display: inline-block; position: relative; }
.logo-top i {
  color: #fff;
  /* white paper edge, ink outline, then an offset second sheet */
  text-shadow:
    0 0 0 #fff,
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2.5px 2.5px 0 var(--ink), -2.5px 2.5px 0 var(--ink), 2.5px -2.5px 0 var(--ink), -2.5px -2.5px 0 var(--ink),
    6px 7px 0 var(--pink), 8px 9px 0 var(--ink), 4px 10px 0 var(--ink);
  transform: rotate(var(--r, -6deg)) translateY(var(--dy, 0));
  animation: logo-hop 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite;
}
.logo-top i:nth-child(1) { --r: -9deg; color: #fff; }
.logo-top i:nth-child(2) { --r: 7deg; --dy: -6px; animation-delay: -.8s; }
.logo-top i::after { content: attr(data-c); position: absolute; inset: 0; color: var(--blue); clip-path: polygon(0 62%, 100% 50%, 100% 100%, 0 100%); text-shadow: none; }
.logo-top i:nth-child(2)::after { color: var(--pink); }
.logo-ribbon { position: relative; display: flex; justify-content: center; gap: .1em; margin-top: calc(var(--fs) * 0.04); padding: .12em .9em .2em; font-size: calc(var(--fs) * 0.52); color: #fff; transform: rotate(-3deg); }
.ribbon-bg { position: absolute; inset: -6% -14% -10%; width: 128%; height: 116%; z-index: -1; filter: drop-shadow(0 5px 0 var(--ink)); }
/* 素数 looks like the big 素数！ of the game: yellow letters; the ink outline (a ring of
   shadows 3.2px out) and the depth (the ring again, 1 to 5px down and a little right) are
   on a copy of the letter behind it (::before), so the gaps inside the letters stay open. */
.logo-ribbon i { color: var(--yellow); isolation: isolate; animation: logo-wave 1.6s ease-in-out infinite; }
.logo-ribbon i::before { content: attr(data-c); position: absolute; left: 0; top: 0; z-index: -1; color: var(--ink);
  text-shadow: 3.2px 0.0px 0 var(--ink), 3.0px 1.2px 0 var(--ink), 2.3px 2.3px 0 var(--ink), 1.2px 3.0px 0 var(--ink), 0.0px 3.2px 0 var(--ink), -1.2px 3.0px 0 var(--ink), -2.3px 2.3px 0 var(--ink), -3.0px 1.2px 0 var(--ink), -3.2px 0.0px 0 var(--ink), -3.0px -1.2px 0 var(--ink), -2.3px -2.3px 0 var(--ink), -1.2px -3.0px 0 var(--ink), -0.0px -3.2px 0 var(--ink), 1.2px -3.0px 0 var(--ink), 2.3px -2.3px 0 var(--ink), 3.0px -1.2px 0 var(--ink), 3.8px 1.0px 0 var(--ink), 2.9px 3.3px 0 var(--ink), 0.6px 4.2px 0 var(--ink), -1.7px 3.3px 0 var(--ink), -2.6px 1.0px 0 var(--ink), -1.7px -1.3px 0 var(--ink), 0.6px -2.2px 0 var(--ink), 2.9px -1.3px 0 var(--ink), 4.4px 2.0px 0 var(--ink), 3.5px 4.3px 0 var(--ink), 1.2px 5.2px 0 var(--ink), -1.1px 4.3px 0 var(--ink), -2.0px 2.0px 0 var(--ink), -1.1px -0.3px 0 var(--ink), 1.2px -1.2px 0 var(--ink), 3.5px -0.3px 0 var(--ink), 5.0px 3.0px 0 var(--ink), 4.1px 5.3px 0 var(--ink), 1.8px 6.2px 0 var(--ink), -0.5px 5.3px 0 var(--ink), -1.4px 3.0px 0 var(--ink), -0.5px 0.7px 0 var(--ink), 1.8px -0.2px 0 var(--ink), 4.1px 0.7px 0 var(--ink), 5.6px 4.0px 0 var(--ink), 4.7px 6.3px 0 var(--ink), 2.4px 7.2px 0 var(--ink), 0.1px 6.3px 0 var(--ink), -0.8px 4.0px 0 var(--ink), 0.1px 1.7px 0 var(--ink), 2.4px 0.8px 0 var(--ink), 4.7px 1.7px 0 var(--ink), 6.2px 5.0px 0 var(--ink), 5.3px 7.3px 0 var(--ink), 3.0px 8.2px 0 var(--ink), 0.7px 7.3px 0 var(--ink), -0.2px 5.0px 0 var(--ink), 0.7px 2.7px 0 var(--ink), 3.0px 1.8px 0 var(--ink), 5.3px 2.7px 0 var(--ink); }
/* Every few seconds a light runs slowly over the letters (it never blinks). */
.logo-ribbon i::after { content: attr(data-c); position: absolute; left: 0; top: 0; color: transparent;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) no-repeat; background-size: 300% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text; animation: logo-shine 5.5s ease-in-out infinite; }
.logo-ribbon i:nth-of-type(2)::after { animation-delay: .12s; }
@keyframes logo-shine { 0%, 78% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
/* The prime balls 2, 3, 5 and 7 go round 素数 like electrons (main.js places them; the colours are primeColor's). */
.logo-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.logo-orbit b { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%;
  font-family: var(--round); font-weight: 900; font-size: 14px; line-height: 1; box-shadow: 0 0 0 2px #fff; }
/* Pressing the logo: a small 素数！ slams in (main.js logoSlam). */
.logo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.logo-slam { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.logo-slam .prime-word { top: 0; left: 0; }
.logo-slam .ring { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink); opacity: 0; }
.logo-ribbon i:nth-child(3) { animation-delay: -.25s; }
.logo-ribbon i:nth-child(4) { animation-delay: -.5s; }
.logo-bits { position: absolute; inset: 0; pointer-events: none; }
/* English: DOPA / PRIME (main.js englishLogo). Four letters are wider than ドパ: a little
   smaller and closer, the burst behind them larger, the ribbon's letters smaller. */
.logo.en .logo-top { font-size: calc(var(--fs) * 0.8); letter-spacing: -.02em; gap: 0; }
.logo.en .logo-top i:nth-child(3) { --r: -5deg; --dy: -3px; }
.logo.en .logo-top i:nth-child(4) { --r: 6deg; --dy: 2px; }
.logo.en .logo-top i:nth-child(3)::after { color: var(--blue); }
.logo.en .logo-top i:nth-child(4)::after { color: var(--pink); }
.logo.en .logo-ribbon { font-size: calc(var(--fs) * 0.38); }
.logo.en .logo-burst { width: calc(var(--fs) * 3); height: calc(var(--fs) * 3); }
/* (the letters are lower than ドパ: more room above and below, so that Dopakichi stands where he does in Japanese) */
.logo.en { margin-top: calc(var(--fs) * 0.8); margin-bottom: calc(var(--fs) * 0.42); }
.logo-bits b { position: absolute; left: calc(50% + var(--x)); top: var(--y); font-size: calc(var(--fs) * 0.4); color: var(--c); transform: translate(-50%, -50%) rotate(var(--r)); text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 3px 4px 0 var(--ink); animation: logo-float 2.4s ease-in-out infinite; }
.logo-bits b:nth-child(2) { animation-delay: -.6s; }
.logo-bits b:nth-child(3) { animation-delay: -1.2s; }
.logo-bits b:nth-child(4) { animation-delay: -1.8s; }
@keyframes logo-hop { 0%, 100% { transform: rotate(var(--r)) translateY(var(--dy, 0)) scale(1); } 12% { transform: rotate(var(--r)) translateY(calc(var(--dy, 0px) + 4px)) scale(1.08, .9); } 30% { transform: rotate(calc(var(--r) * -0.4)) translateY(calc(var(--dy, 0px) - 10px)) scale(.96, 1.06); } 55% { transform: rotate(var(--r)) translateY(var(--dy, 0)) scale(1); } }
@keyframes logo-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes logo-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
body.reduced .logo *, body.reduced .logo-burst { animation: none !important; }
/* 動きの強さ 0: the light does not run either (the balls are stopped by main.js) */
body.reduced .logo-ribbon i::after { animation: none !important; background-position: 150% 0; }
.settings-btn { display: grid; place-items: center; position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; padding: 4px; background: #fff; box-shadow: 0 4px 0 var(--ink); z-index: 3; }
.settings-btn svg { display: block; width: 100%; height: 100%; transition: transform .4s; }
#open-settings:active svg { transform: rotate(90deg); }
.modes { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ------------------------------------------------------------ settings */
.modal { position: fixed; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(27, 29, 77, .45); }
.modal[hidden] { display: none; }
.modal-card { width: min(100%, 420px); max-height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 18px 20px; border: 3.5px solid var(--ink); border-radius: 26px; background: var(--paper); box-shadow: 0 8px 0 var(--ink); }
.modal-card .chip { align-self: center; margin: 0; font-size: 18px; }
.modal-card .big-btn { align-self: center; min-width: 200px; height: 58px; font-size: 24px; }
.set-row { display: flex; flex-direction: column; gap: 8px; }
.set-label { font-weight: 900; font-size: 16px; }
.set-label b { font-family: var(--chunky); font-weight: 400; color: var(--blue); margin-left: 6px; }
.set-inline { display: flex; align-items: center; gap: 12px; }
.set-inline .slider { flex: 1; }
.set-note { margin: 0; font-size: 12px; opacity: .7; }
.reset-btn { align-self: center; min-width: 230px; font-weight: 900; }
.modal .pick { justify-content: center; }
.modal .pick button { width: 30%; max-width: 96px; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; margin: 0; --v: 1; }
.slider::-webkit-slider-runnable-track { height: 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, var(--pink) 0 calc(var(--v) * 100%), #fff calc(var(--v) * 100%)); }
.slider::-moz-range-track { height: 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, var(--pink) 0 calc(var(--v) * 100%), #fff calc(var(--v) * 100%)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.slider::-moz-range-thumb { width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.slider.motion::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--blue-soft), var(--pink) 50%, var(--yellow)) 0 0 / calc(var(--v) * 100%) 100% no-repeat, #fff; }
.slider.motion::-moz-range-track { background: linear-gradient(90deg, var(--blue-soft), var(--pink) 50%, var(--yellow)) 0 0 / calc(var(--v) * 100%) 100% no-repeat, #fff; }
.title-stage { width: 100%; height: min(19vh, 160px); }
.pick { display: flex; gap: 10px; }
.pick button {
  width: 84px; height: 56px; border: 3px solid var(--ink); border-radius: 16px; background: #fff;
  font-family: var(--chunky); font-size: 26px; box-shadow: 0 5px 0 var(--ink); transition: transform .08s;
}
.show-pick { display: flex; justify-content: center; gap: 8px; }
.show-pick button { flex: 1 1 0; max-width: 120px; min-height: 48px; padding: 0 6px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--ink); font-family: var(--round); font-weight: 900; font-size: 15px; cursor: pointer; }
.show-pick button[aria-checked="true"] { background: var(--yellow); }
/* げきかる: the only thing the 素数！ show leaves, a small word by the cell for a moment */
.prime-lite { position: fixed; z-index: 40; transform: translate(-50%, -50%); padding: 3px 12px 5px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink);
  font-family: var(--chunky); font-weight: 400; font-size: 22px; white-space: nowrap; pointer-events: none; box-shadow: 0 3px 0 var(--ink); }
.prime-lite b { margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--pink); color: #fff; font-weight: 400; font-size: 15px; }
.pick button small { font-family: var(--round); font-size: 14px; margin-left: 2px; }
.pick button[aria-checked="true"] { background: var(--yellow); transform: translateY(-3px) rotate(-2deg); }
.big-btn {
  min-width: 240px; height: 68px; padding: 0 28px; border: 3.5px solid var(--ink); border-radius: 22px;
  background: var(--blue); color: #fff; font-family: var(--chunky); font-size: 28px; letter-spacing: .06em;
  box-shadow: 0 7px 0 var(--ink); text-shadow: 0 3px 0 rgba(27, 29, 77, .55);
}
.big-btn small { font-family: var(--round); font-size: 16px; }
.big-btn:active, .sub-btn:active, .pick button:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.sub-btn { min-width: 160px; height: 52px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; font-size: 18px; box-shadow: 0 5px 0 var(--ink); }
.toggles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.toggle { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 14px; }
.toggle i { font-style: normal; font-size: 16px; }
.toggle b { font-weight: 900; color: var(--blue); }
.toggle[aria-pressed="true"][data-toggle="motion"] b { color: var(--pink); }
.hint { margin: 0; font-size: 12px; opacity: .6; }

/* ------------------------------------------------------------ play */
#screen-play { flex-direction: column; padding: calc(8px + env(safe-area-inset-top)) 0 calc(10px + env(safe-area-inset-bottom)); }
.hud { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; }
.pips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; }
.pip { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; }
.pips.many .pip { width: 11px; height: 11px; border-width: 2px; }
.pip.now { background: var(--yellow); animation: pip 0.8s ease-in-out infinite; }
.pip.done { background: var(--c, var(--blue)); }
.pip.rainbow { background: conic-gradient(#ff7ab6, #ffd23f, #3fdcb0, #3b6bff, #a77bff, #ff7ab6); }
@keyframes pip { 50% { transform: scale(1.3); } }
.clock { display: flex; align-items: baseline; gap: 8px; padding: 4px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; white-space: nowrap; }
.clock b { font-family: var(--chunky); font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; }
.clock.over #clock-label { color: var(--red); }
.clock.extra { background: var(--ink); color: #fff; }
.clock.extra b { color: var(--yellow); font-size: 20px; }
.clock.hurry b { color: var(--red); animation: hurry .5s steps(2) infinite; }
@keyframes hurry { 50% { color: #fff; } }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; font-size: 18px; flex: none; }
.icon-btn[aria-pressed="true"] { background: var(--ink); color: #fff; text-decoration: line-through; }

.hud2 { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 14px; }
.tally { display: flex; gap: 6px; font-size: 13px; }
.tally span { padding: 3px 10px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); }
.tally b { font-family: var(--chunky); font-weight: 400; font-size: 16px; }
.tally small { font-size: 11px; opacity: .6; }
.tally .ng b { color: var(--violet); }
.dopa {
  display: flex; align-items: baseline; gap: 6px; max-width: 62%;
  padding: 3px 12px 4px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--yellow);
  box-shadow: 0 3px 0 var(--ink); transform-origin: right center; white-space: nowrap; overflow: hidden;
}
.dopa small { font-size: 11px; }
.dopa b { font-family: var(--chunky); font-weight: 400; font-size: 20px; letter-spacing: .01em; }
body.lv6 .dopa { background: linear-gradient(90deg, #ffd23f, #ff9ccc, #9fd0ff, #ffd23f); background-size: 300% 100%; animation: dopa-sheen 2s linear infinite; }
@keyframes dopa-sheen { to { background-position: 300% 0; } }
/* Combo (id032): floats under the tally, over the stage's top-left corner. */
.combo {
  position: absolute; left: 14px; top: calc(100% + 2px); display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px;
  padding: 2px 10px 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--ink);
  transform-origin: left center; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; pointer-events: none;
}
.combo.on { opacity: 1; visibility: visible; }
.combo b { font-family: var(--chunky); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--pink); }
.combo small { font-size: 11px; font-weight: 900; }
.combo-mult { grid-column: 1 / -1; font-size: 11px; font-weight: 900; opacity: .7; }
.combo-track { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 4px; border-radius: 2px; background: #e6e4f0; overflow: hidden; }
.combo-track i { position: absolute; inset: 0; background: var(--blue); transform-origin: left center; }
.combo.hot { background: #fff4c4; }
.combo.hot b { color: var(--red); }
.combo.hot .combo-mult { opacity: 1; color: var(--red); }
.combo.hurry .combo-track i { background: var(--red); }

.stage { position: relative; flex: 1 1 auto; min-height: 118px; margin: 0 14px; }
.ground { position: absolute; left: 6%; right: 6%; bottom: 6px; width: 88%; height: 14px; }
.bunting { position: absolute; left: -2%; right: -2%; top: 0; width: 104%; height: 34px; opacity: 0; transform: translateY(-20px); transition: opacity .5s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
body.lv3 .bunting { opacity: 1; transform: none; }
.spot { position: absolute; top: -30px; width: 140px; height: 190px; opacity: 0; transition: opacity .6s; mix-blend-mode: screen; filter: blur(2px);
  background: linear-gradient(to bottom, rgba(255, 246, 200, .95), rgba(255, 246, 200, 0)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.spot-l { left: 0; transform-origin: 50% 0; animation: spot-l 3s ease-in-out infinite; }
.spot-r { right: 0; transform-origin: 50% 0; animation: spot-r 3.4s ease-in-out infinite; }
body.lv5 .spot { opacity: .7; }
@keyframes spot-l { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(10deg); } }
@keyframes spot-r { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-12deg); } }

.card {
  position: relative; margin: 0 14px 12px; padding: 10px 12px 10px;
  background: #fff; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 7px 0 var(--ink);
  transform-origin: 50% 100%;
}
.card-top { display: flex; justify-content: space-between; align-items: center; }
.chip { display: inline-block; margin: 0; padding: 3px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 13px; letter-spacing: .08em; }
.qno { flex: none; font-family: var(--round); font-weight: 900; font-size: 15px; white-space: nowrap; }
.card-top { gap: 8px; }
/* Narrow phones: the long title of すだれ算 and 第1問 stay on one line each. */
@media (max-width: 374px) { #qtitle { padding-inline: 9px; font-size: 11.5px; letter-spacing: .02em; } .qno { font-size: 13px; } }
@media (max-width: 339px) { #qtitle { padding-inline: 8px; font-size: 10px; letter-spacing: 0; } .qno { font-size: 12px; } }
.sheet-wrap { position: relative; display: flex; justify-content: center; align-items: center; min-height: 208px; padding: 4px 0 2px; }
.sheet { position: relative; display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); grid-template-rows: repeat(var(--rows), var(--ch)); --cw: 54px; --ch: 52px; font-family: var(--round); font-weight: 900; }
.cell { position: relative; display: grid; place-items: center; font-size: calc(var(--ch) * .82); line-height: 1; font-variant-numeric: tabular-nums; }
.sheet.div .cell { font-size: calc(var(--ch) * .88); }
.cell.op { color: var(--blue); font-size: calc(var(--ch) * .7); }
.cell.small { align-self: end; font-size: clamp(12px, calc(var(--ch) * .38), 19px); color: var(--pink); height: calc(var(--ch) * .46); }
.cell.mark { color: var(--blue); font-size: clamp(11px, calc(var(--ch) * .34), 17px); letter-spacing: -.04em; }
.cell.struck::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 3.5px; background: var(--blue); border-radius: 2px; transform: rotate(-32deg); }
.cell.hidden { visibility: hidden; }
.cell.input { margin: 3px; border-radius: 12px; }
.cell.input.active { background: var(--blue-soft); outline: 3px dashed var(--blue); outline-offset: -3px; animation: active-cell 1s ease-in-out infinite; }
.cell.input.active::before { content: "?"; color: rgba(59, 107, 255, .35); }
.cell.input.active.has::before { content: none; }
/* すだれ算's last step, widened in place after the first digit of p: "4?" */
.cell.input.grow { grid-auto-flow: column; justify-content: center; }
.cell.input.active.grow::before { content: none; }
.cell.input.active.grow::after { content: "?"; color: rgba(59, 107, 255, .35); }
.cell.input.active.grow.has::after { content: none; }
.cell.input.ok { color: var(--ink); }
.cell.input.word-ans { font-size: max(9px, calc(var(--ch) * .6)); font-weight: 900; letter-spacing: 0; white-space: nowrap; }
.cell.input.bad { color: #7a4bff; background: #efe8ff; outline: 3px dashed #a77bff; outline-offset: -3px; animation: none; }
.cell.hint-glow { border-radius: 8px; background: #fff3b8; box-shadow: 0 0 0 3px var(--yellow); animation: hint-glow .9s ease-in-out infinite; }
@keyframes hint-glow { 50% { box-shadow: 0 0 0 6px rgba(255, 210, 63, .5); } }
body.reduced .cell.hint-glow { animation: none; }
.help-text { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 900; }
.cell.input.pending { color: transparent; }
@keyframes active-cell { 50% { background: #c4d5ff; } }
.cell.auto { color: #5a5f93; }
.hline { position: relative; align-self: end; height: 3.5px; background: var(--ink); border-radius: 2px; margin-bottom: -2px; transform-origin: left center; }
.hline.hidden { visibility: hidden; }
.bracket { position: relative; border-top: 3.5px solid var(--ink); margin-left: 4px; }
.bracket::before { content: ""; position: absolute; left: -14px; top: -3.5px; width: 14px; height: calc(100% + 4px); border-right: 3.5px solid var(--ink); border-radius: 0 70% 70% 0 / 0 50% 50% 0; }
.step-label { margin: 2px 0 0; text-align: center; font-size: 14px; min-height: 20px; }
.step-label b { color: var(--blue); }

.stamp {
  position: absolute; right: 14px; top: 34px; width: 110px; height: 110px; border-radius: 50%; border: 9px solid var(--red); opacity: 0;
  box-shadow: inset 0 0 0 3px rgba(255, 79, 109, .3); pointer-events: none;
}
.reach-tag {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%) scale(0); z-index: 3; padding: 4px 16px; border-radius: 999px;
  background: var(--ink); color: var(--yellow); font-family: var(--chunky); font-size: 18px; letter-spacing: .1em; white-space: nowrap; border: 3px solid var(--yellow);
}
body.reach .reach-tag { animation: reach-blink .3s steps(2) infinite; }
@keyframes reach-blink { 50% { color: #fff; border-color: var(--pink); } }
body.reach .cell.input.active { outline: 4px solid var(--yellow); background: #fff3b8; animation: reach-cell .25s steps(2) infinite; box-shadow: 0 0 0 6px var(--pink), 0 0 24px 8px rgba(255, 210, 63, .9); z-index: 2; }
@keyframes reach-cell { 50% { box-shadow: 0 0 0 6px var(--blue), 0 0 30px 12px rgba(255, 122, 182, .9); } }
body.reach .card { z-index: 3; }

.marquee { position: absolute; inset: -9px; border-radius: 30px; pointer-events: none; opacity: 0; transition: opacity .6s; padding: 5px;
  background: radial-gradient(circle, #fff 0 2.5px, var(--yellow) 3px 4.5px, transparent 5px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: marquee .5s linear infinite; }
body.lv6 .marquee { opacity: 1; }
body.lv8 .marquee { background: radial-gradient(circle, #fff 0 2.5px, var(--pink) 3px 4.5px, transparent 5px) 0 0 / 16px 16px, radial-gradient(circle, #fff 0 2.5px, var(--yellow) 3px 4.5px, transparent 5px) 8px 8px / 16px 16px; }
@keyframes marquee { to { background-position: 16px 0, 24px 8px; } }
body.lv9 .card { box-shadow: 0 7px 0 var(--ink), 0 0 0 5px var(--pink), 0 0 40px 10px rgba(255, 210, 63, calc(.4 + var(--kick) * .6)); }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 14px; }
.pad button {
  position: relative; height: clamp(50px, 7.4dvh, 62px); border: 3px solid var(--ink); border-radius: 18px; background: #fff;
  font-family: var(--round); font-weight: 900; font-size: 30px; box-shadow: 0 5px 0 var(--ink);
  transform: translateY(calc(var(--kick) * -2px * var(--bounce, 0)));
}
.pad button.zero { grid-column: span 2; }
.pad button.del { background: var(--pink-soft); font-size: 24px; }
/* 素数！ takes the ⌫ slot on prime-skill problems only. */
.pad button.prime { display: none; background: var(--yellow); font-size: 21px; letter-spacing: .04em; white-space: nowrap; }
/* 素数！: 素数 in the round face (Dela Gothic One closes up on these kanji), ！ chunky */
.sosu-k { font-family: var(--round); font-weight: 900; }
.sosu-x { font-family: var(--chunky); font-weight: 400; }
.pad.prime-mode button.prime { display: block; }
.pad.prime-mode button.del { display: none; }
.pad button.press { transform: translateY(4px) scale(.97); box-shadow: 0 1px 0 var(--ink); }
body.lv4 .pad button { --bounce: 1; }
body.lv4 .pad button[data-key="7"], body.lv4 .pad button[data-key="3"] { background: #ffe3ef; }
body.lv4 .pad button[data-key="8"], body.lv4 .pad button[data-key="4"] { background: #fff4c7; }
body.lv4 .pad button[data-key="9"], body.lv4 .pad button[data-key="5"], body.lv4 .pad button[data-key="1"] { background: #e3ebff; }
body.lv4 .pad button[data-key="6"], body.lv4 .pad button[data-key="2"], body.lv4 .pad button[data-key="0"] { background: #dcfaef; }
body.lv8 .pad button { box-shadow: 0 5px 0 var(--ink), 0 0 calc(var(--kick) * 18px) rgba(255, 210, 63, .9); }
.pad button:disabled { opacity: .5; }

/* ------------------------------------------------------------ results */
#screen-result, #screen-final { align-items: safe center; justify-content: center; padding: 20px 16px; overflow-y: auto; }
#screen-result .result-card, #screen-final .result-card { margin: auto 0; flex: none; }
.actions .review-btn { font-size: 16px; white-space: nowrap; padding: 0 16px; }
.result-card {
  width: 100%; padding: 22px 20px 20px; text-align: center; background: #fff; border: 3.5px solid var(--ink); border-radius: 28px; box-shadow: 0 9px 0 var(--ink);
}
.score { margin: 8px 0 0; font-family: var(--chunky); line-height: 1; }
.score b { font-weight: 400; font-size: 92px; color: var(--pink); text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 8px 0 var(--ink); }
.score span { font-size: 28px; margin-left: 4px; font-family: var(--round); font-weight: 900; }
.stats dd small { font-family: var(--round); font-weight: 900; font-size: 14px; margin-left: 2px; }
.breakdown { margin: 8px 0 0; font-size: 15px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 10px; }
.stats div { padding: 8px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.stats dt { font-size: 12px; opacity: .7; }
.stats dd { margin: 2px 0 0; font-family: var(--chunky); font-size: 22px; }
.dopa-final { margin: 6px 0 0; }
.dopa-final small { font-size: 12px; margin-right: 6px; }
.dopa-final b { font-family: var(--chunky); font-weight: 400; font-size: 24px; color: var(--blue); }
.unlock { min-height: 20px; font-size: 14px; margin: 10px 0 12px; }
.unlock.yes { color: var(--pink); }
.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }

/* ------------------------------------------------------------ cut-ins */
.cutin-band { position: absolute; left: -20%; width: 140%; display: flex; align-items: center; justify-content: center; transform-origin: center; }
.cutin-band .band-bg { position: absolute; inset: 0; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--c1) 0 22px, var(--c2) 22px 44px); }
.cutin-band .band-text { position: relative; font-family: var(--chunky); color: #fff; font-size: 44px; letter-spacing: .08em; white-space: nowrap;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 7px 0 var(--ink); }
.unit-slam { position: absolute; font-family: var(--chunky); color: var(--yellow); white-space: nowrap; transform-origin: center;
  text-shadow: 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 10px 0 var(--pink); }
.big-stamp { position: absolute; font-family: var(--chunky); color: var(--red); white-space: nowrap; transform-origin: center; }

body.reduced .logo span, body.reduced .spot, body.reduced .marquee, body.reduced .pip.now, body.reduced .cell.input.active { animation: none !important; }
@media (max-height: 840px) {
  /* Include toolbar-reduced phone heights and leave room for the bottom safe area. */
  .sheet-wrap { min-height: clamp(96px, calc(100dvh - 490px - env(safe-area-inset-bottom)), 176px); }
  #screen-play .card { padding-block: 8px; margin-bottom: 10px; }
  .pad { gap: 6px; }
  .pad button { height: 48px; }
  .stage { min-height: 80px; }
}
@media (max-height: 600px) {
  .stage { min-height: 48px; }
  .step-label { font-size: 12px; }
  /* Short phones (320×568): lower keys, and the room they free goes to the sheet, so its digits stay readable. */
  .pad { gap: 5px; }
  .pad button { height: 42px; }
  .sheet-wrap { min-height: clamp(96px, calc(100dvh - 432px - env(safe-area-inset-bottom)), 176px); }
}
/* Ranking (じこベスト): the dialog, and the line on the result screens. */
.rank-card { gap: 10px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.rank-lead { margin: -4px 0 0; text-align: center; }
.rank-pick { display: flex; justify-content: center; gap: 8px; }
.rank-pick button { flex: 1 1 0; max-width: 150px; min-height: 44px; padding: 0 8px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--ink); font-family: var(--chunky); font-weight: 400; font-size: 17px; white-space: nowrap; }
.rank-pick button small { margin-left: 2px; font-family: var(--round); font-weight: 900; font-size: 13px; }
.rank-pick button[aria-checked="true"] { background: var(--yellow); }
.rank-lists { display: grid; gap: 8px; }
.rank-list { padding: 8px 10px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.rank-list h3 { margin: 0 0 4px; font-family: var(--chunky); font-weight: 400; font-size: 16px; color: var(--blue); }
.rank-list ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rank-list li { display: grid; grid-template-columns: 3.2em 1fr auto; align-items: baseline; gap: 6px; padding: 1px 6px; border-radius: 8px; font-family: var(--round); font-weight: 900; font-size: 15px; }
.rank-list li i { font-style: normal; color: var(--ink); opacity: .7; font-size: 13px; }
.rank-list li b { min-width: 0; font-family: var(--chunky); font-weight: 400; font-size: clamp(14px, 4.6vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-list li small { font-size: 12px; opacity: .7; }
.rank-list li:first-child b { color: var(--pink); }
.rank-list li.today { background: #fff3c4; }
.rank-none { margin: 10px 0; text-align: center; font-family: var(--round); font-weight: 900; font-size: 15px; }
.rank-tabs { display: flex; justify-content: center; gap: 6px; margin-top: -2px; }
.rank-tabs button { flex: 1 1 0; max-width: 160px; min-height: 44px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--chunky); font-weight: 400; font-size: 16px; cursor: pointer; }
.rank-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.rank-pick[hidden], .rank-join[hidden], .rank-mine[hidden], .rank-msg[hidden] { display: none; }
#rank-metric button, #rank-period button { font-family: var(--round); font-weight: 900; font-size: 15px; }
.rank-join { display: grid; gap: 8px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font-family: var(--round); font-weight: 900; }
.rank-join-q { margin: 0; text-align: center; font-size: 16px; color: var(--blue); }
.rank-join ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.rank-join .big-btn { justify-self: center; }
.rank-msg { margin: 0; text-align: center; font-family: var(--round); font-weight: 900; font-size: 14px; }
.rank-list li.me { background: #fff3c4; }
.rank-list li.gap { display: block; text-align: center; opacity: .6; padding: 0; }
.rank-list li .nick { min-width: 0; font-family: var(--round); font-weight: 900; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.rank-list li .nick small { margin-left: 3px; font-size: 10px; opacity: .6; white-space: nowrap; }
.rank-list.net li { align-items: center; }
.rank-list.net li { grid-template-columns: 3.2em 1fr auto; }
.rank-mine { display: grid; gap: 6px; justify-items: center; font-family: var(--round); font-weight: 900; font-size: 14px; }
.rank-mine p { margin: 0; text-align: center; }
.rank-name { display: grid; gap: 6px; justify-items: center; width: 100%; }
.rank-name[hidden] { display: none; }
/* 16px or more: Safari on iPhone does not zoom in when the field is touched */
.rank-name input { width: min(100%, 260px); min-height: 44px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font-family: var(--round); font-weight: 900; font-size: 18px; text-align: center; }
.rank-name input:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.rank-name .rank-msg { font-size: 12px; opacity: .8; }
.rank-name .rank-msg.bad { color: var(--pink); opacity: 1; }
.rank-mine-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rank-news { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 0; }
.rank-news[hidden] { display: none; }
.rank-news span { padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--round); font-weight: 900; font-size: 13px; white-space: nowrap; }
.rank-news span.best { background: var(--yellow); }
/* Sharing: the button, and the dialog shown where the device cannot share a picture itself. */
.share-icon { width: 1em; height: 1em; margin-right: .35em; vertical-align: -.12em; }
.zk-share { margin-top: 10px; min-width: 220px; }
/* シェアする？ on the result screens: only after a play with something to show off. */
.brag-btn { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 2px; flex: 1 1 100%; min-height: 48px; padding: 4px 18px; background: var(--yellow); font-weight: 900; }
.brag-btn[hidden] { display: none; }
.brag-btn small { grid-column: 1 / -1; font-family: var(--round); font-weight: 900; font-size: 12px; white-space: nowrap; }
/* The chooser: a row of small pictures, each with its name; the chosen one has a yellow frame and a tick. */
.share-ask { flex: 0 0 auto; margin: 0; text-align: center; font-family: var(--chunky); font-weight: 400; font-size: 18px; color: var(--ink); }
.share-ask[hidden] { display: none; }
.share-ask small { margin-left: 4px; font-family: var(--round); font-weight: 900; font-size: 13px; }
.share-picks { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 6px 8px; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x proximity; }
.share-picks[hidden] { display: none; }
.share-picks button { position: relative; flex: 0 0 auto; width: 78px; padding: 4px 4px 3px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); scroll-snap-align: start; }
.share-picks button img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1350; border-radius: 6px; pointer-events: none; }
.share-picks button span { display: block; margin-top: 3px; font-family: var(--round); font-weight: 900; font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-picks button[aria-checked="true"] { background: var(--yellow); transform: translateY(-2px); }
.share-picks button[aria-checked="true"]::after { content: ""; position: absolute; right: -7px; top: -9px; width: 24px; height: 24px; border: 3px solid var(--ink); border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.share-note { margin: 0; text-align: center; }
.share-note[hidden] { display: none; }
.share-hold-card { gap: 12px; }
#share-hold-img { display: block; width: min(100%, 340px); height: auto; aspect-ratio: 1080 / 1350; align-self: center; border: 3px solid var(--ink); border-radius: 16px; -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
.share-go { flex: 1 1 100%; min-height: 52px; }
.share-go[hidden], .share-actions [hidden] { display: none; }
.share-card { gap: 10px; max-height: calc(100dvh - 40px); overflow-y: auto; }
#share-img { flex: 0 0 auto; display: block; width: min(100%, 230px); height: auto; aspect-ratio: 1080 / 1350; -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; align-self: center; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); }
.share-text { margin: 0; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font-family: var(--round); font-weight: 700; font-size: 12px; line-height: 1.5; word-break: break-all; user-select: text; -webkit-user-select: text; }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.share-actions .sub-btn { flex: 1 1 auto; min-height: 44px; }
/* Icons drawn as pictures (the round face has no ⌫ and no ▶). */
.key-icon { width: 1.25em; height: .9em; vertical-align: -.08em; }
.play-icon { width: .7em; height: .82em; vertical-align: -.06em; }
/* A phone lying on its side is too low for the keypad: a note to turn it upright covers the game
   (perf.js LOW_SCREEN; the clocks wait meanwhile). Other screens scroll and stay usable. */
#rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #screen-play.is-active #rotate-note { position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; background: var(--paper); color: var(--ink); text-align: center; }
  #rotate-note svg { width: 64px; height: 64px; }
  #rotate-note b { font-family: var(--chunky); font-weight: 400; font-size: 22px; }
  #rotate-note small { font-family: var(--round); font-weight: 700; font-size: 13px; }
}

/* ------------------------------------------------------------ calendar */
.cal-card { width: 100%; max-width: 420px; padding: 12px 12px 14px; border: 3px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head h2 { margin: 0; font-family: var(--chunky); font-weight: 400; font-size: 20px; }
.cal-nav { width: 40px; height: 40px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 24px; line-height: 1; font-weight: 900; }
.cal-nav:disabled { opacity: .3; }
.cal-streak { margin: 4px 0 6px; min-height: 1.2em; text-align: center; font-size: 14px; font-weight: 900; color: var(--pink); }
.cal-streak b { font-family: var(--chunky); font-weight: 400; font-size: 20px; margin: 0 2px; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-week span { text-align: center; font-size: 11px; font-weight: 900; opacity: .6; }
.cal-week span:first-child { color: var(--red); }
.cal-week span:last-child { color: var(--blue); }
.cal-day { position: relative; aspect-ratio: 1 / 1.08; min-height: 40px; padding: 0; border: 0; border-radius: 10px; background: var(--paper); font-size: 11px; font-weight: 900; color: var(--ink); }
.cal-day .n { position: absolute; left: 4px; top: 2px; opacity: .55; }
.cal-day.blank { background: transparent; }
.cal-day.today { box-shadow: inset 0 0 0 2.5px var(--blue); }
.cal-day.played { background: #fff0f6; cursor: pointer; }
.cal-day.played svg { position: absolute; inset: 8% 6% 2%; width: 88%; height: 90%; }
.cal-day .sc { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-family: var(--chunky); font-weight: 400; font-size: 12px; color: var(--red); letter-spacing: -.03em; text-shadow: 1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff; }
.cal-day .sc.big { font-size: 10px; }
.cal-day.pop { animation: cal-pop .7s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes cal-pop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
.day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.day-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 12px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; font-size: 13px; }
.day-list .t { font-weight: 900; opacity: .6; }
.day-list .m { font-weight: 900; }
.day-list .s { font-family: var(--chunky); font-weight: 400; font-size: 20px; color: var(--red); grid-row: span 2; }
.day-list .d { grid-column: 1 / 3; font-size: 12px; opacity: .75; }

/* ------------------------------------------------------------ expression layouts */
.cell.word { font-size: calc(var(--ch) * .46); white-space: nowrap; color: #4a4f86; }
.sheet.h .cell.op { font-size: calc(var(--ch) * .62); }
.cell.dot { justify-self: end; align-self: end; width: 0; overflow: visible; font-size: calc(var(--ch) * .82); line-height: .9; color: var(--ink); pointer-events: none; z-index: 1; display: flex; justify-content: center; }
.cell.dot.hidden { visibility: hidden; }
.cell.frac-n { align-self: end; }
.cell.frac-d { align-self: start; }
.cell.input.frac-n, .cell.input.frac-d { margin: 2px 3px; }
.hline.fbar { margin: 0 4px -2px; }

/* ------------------------------------------------------------ modes */
.level-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 78px; gap: 2px; background: var(--pink); }
.level-btn small { font-size: 13px; letter-spacing: 0; }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 340px); }
.grades button { height: 52px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font-family: var(--chunky); font-size: 24px; box-shadow: 0 4px 0 var(--ink); }
.grades button small { font-family: var(--round); font-weight: 900; font-size: 12px; margin-left: 2px; }
.grades button:nth-child(6n+1) { background: #ffe3ef; } .grades button:nth-child(6n+2) { background: #e3ebff; } .grades button:nth-child(6n+3) { background: #fff4c4; }
.grades button:nth-child(6n+4) { background: #d9fbef; } .grades button:nth-child(6n+5) { background: #efe6ff; } .grades button:nth-child(6n+6) { background: #ffe6dc; }
.grades button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.mode-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mode-row .sub-btn { min-width: 150px; font-weight: 900; }
.mode-row .sub-btn b, .review-btn b { font-family: var(--chunky); font-weight: 400; color: var(--pink); margin-left: 4px; }
.review-btn { background: #fff4c4; }

/* ------------------------------------------------------------ skill tree */
#screen-tree { flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 0 0; }
.tree-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 6px; }
.tree-head h2 { margin: 0; flex: 1; font-family: var(--chunky); font-weight: 400; font-size: 22px; }
.tree-head .icon-btn { font-size: 26px; font-weight: 900; line-height: 1; }
.tree-count { font-family: var(--chunky); font-size: 16px; padding: 4px 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; }
.tree-lanes { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 3px 4px; background: var(--paper); box-sizing: border-box; }
.tree-lanes span { text-align: center; font-size: 11px; font-weight: 900; padding: 3px 0; border-radius: 999px; background: var(--ink); color: #fff; }
.tree-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 6px calc(40px + env(safe-area-inset-bottom)); }
.tree { position: relative; }
.tree-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tree-links path { fill: none; stroke: #c9cbe8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tree-links path.on { stroke: var(--ink); }
.tree-links path.grow { stroke: var(--pink); stroke-width: 5; }
.node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 3px 3px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ink); font-size: 10.5px; font-weight: 900; line-height: 1.15; text-align: center; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.node .g { font-size: 9px; opacity: .6; }
.node .ring { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--pink) calc(var(--p) * 100%), #eee calc(var(--p) * 100%)); }
.node.locked { background: #eceaf3; color: #8a8cb0; border-color: #a9abc9; box-shadow: 0 3px 0 #a9abc9; }
.node.locked::before { content: ""; position: absolute; top: -8px; right: -6px; width: 16px; height: 13px; border-radius: 3px; background: #a9abc9; box-shadow: inset 0 0 0 2px #8a8cb0; }
.node.locked::after { content: ""; position: absolute; top: -15px; right: -2px; width: 8px; height: 9px; border: 2.5px solid #8a8cb0; border-bottom: 0; border-radius: 6px 6px 0 0; }
.node.new { background: #fff4c4; animation: node-new 1.1s ease-in-out infinite; }
.node.new::after { content: "NEW"; position: absolute; top: -10px; right: -8px; padding: 1px 5px; border-radius: 999px; background: var(--pink); color: #fff; font-family: var(--chunky); font-weight: 400; font-size: 10px; border: 2px solid var(--ink); }
.node.learning { background: #e3ebff; }
.node.mastered { background: linear-gradient(160deg, #fff6c8, #ffd23f); }
.node.mastered::after { content: "★"; position: absolute; top: -12px; right: -6px; font-size: 20px; color: #ffb000; -webkit-text-stroke: 1.5px var(--ink); }
.node.just { animation: node-pop .8s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes node-new { 50% { transform: translateY(-3px); } }
@keyframes node-pop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: scale(1); } }
body.reduced .node { animation: none !important; }
/* Long press to erase (id031): a pink fill rises while held. */
.node { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; overflow: visible; }
.node .hold { position: absolute; inset: 0; border-radius: 11px; background: rgba(255, 79, 109, .35); transform-origin: bottom; transform: scaleY(0); pointer-events: none; }
.node.holding .hold { transform: scaleY(1); transition: transform var(--hold-ms, 600ms) linear; }
.node.holding { transform: scale(.94); transition: transform .12s; }
.node.erased { animation: node-erase .6s ease-out both; }
@keyframes node-erase { 0% { transform: scale(1.12) rotate(4deg); filter: brightness(1.4); } 40% { transform: scale(.9) rotate(-3deg); } 100% { transform: none; } }
.tree-note { margin: 0 0 4px; text-align: center; font-size: 11px; font-weight: 900; opacity: .6; }
.confirm-msg { margin: 0; word-break: keep-all; overflow-wrap: anywhere; font-size: 15px; font-weight: 900; line-height: 1.6; text-align: center; }
.confirm-msg b { color: var(--red); }
.confirm-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.confirm-list li { padding: 3px 9px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 900; }
.confirm-list li.more { border-style: dashed; background: transparent; }
/* a notice (one button): the heading keeps to the left, clear of Dopakichi at the top right */
.confirm-card.notice .chip { align-self: flex-start; }
.confirm-actions { display: flex; justify-content: center; gap: 12px; }
.confirm-actions .sub-btn { min-width: 120px; font-weight: 900; }
.sub-btn.danger { background: var(--red); color: #fff; text-shadow: 0 2px 0 rgba(27, 29, 77, .45); }
.toast { position: absolute; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); margin: 0; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 5px 0 var(--ink); font-weight: 900; font-size: 14px; text-align: center; z-index: 3; pointer-events: none; }
.skill-news { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.skill-news:empty { display: none; }
.skill-news p { margin: 0; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff4c4; font-size: 13px; font-weight: 900; text-align: center; }
.skill-news p.mastered { background: linear-gradient(160deg, #fff6c8, #ffd23f); }

/* ------------------------------------------------------------ demo play */
.demo-btn { align-self: center; min-width: 230px; font-weight: 900; background: #e3ebff; }
.demo-tag { display: none; padding: 3px 10px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--chunky); font-size: 13px; letter-spacing: .08em; border: 2.5px solid var(--ink); animation: demo-blink 1.2s steps(2) infinite; }
body.demo .demo-tag { display: inline-block; }
@keyframes demo-blink { 50% { opacity: .45; } }
body.reduced .demo-tag { animation: none; }

/* ------------------------------------------------------------ streak & login bonus */
.cal-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; min-height: 30px; }
.cal-badge { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 900; }
.cal-badge b { font-family: var(--chunky); font-weight: 400; font-size: 20px; color: var(--pink); }
.cal-badge.hot { background: linear-gradient(90deg, #ffd23f, #ff9a3c); }
.cal-badge.hot b { color: var(--ink); }
.cal-badge.best b { color: var(--blue); }
.cal-badge.stk b { color: #ffb000; }
.cal-day .stk { position: absolute; top: 1px; right: 1px; width: 44%; height: 44%; pointer-events: none; }
.cal-day .stk svg { position: static; width: 100%; height: 100%; inset: auto; }
.bonus-card { align-items: center; text-align: center; }
.bonus-run { margin: 0; font-weight: 900; font-size: 15px; }
.bonus-run b { font-family: var(--chunky); font-weight: 400; font-size: 30px; color: var(--pink); margin: 0 4px; }
.bonus-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.bonus-slot { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border: 2.5px dashed #b9bbd8; border-radius: 16px; background: #fff; font-family: var(--chunky); font-size: 18px; color: #c4c6de; }
.bonus-slot.got { border-style: solid; border-color: var(--ink); background: #fff4c4; }
.bonus-slot.today { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 122, 182, .35); }
.bonus-slot.big { background: linear-gradient(160deg, #fff6c8, #ffd23f); color: var(--ink); border-style: solid; border-color: #ffb000; }
.bonus-slot .d { position: absolute; left: 6px; top: 3px; font-size: 11px; color: #8a8cb0; font-family: var(--round); font-weight: 900; }
.bonus-slot svg { display: block; width: 72%; height: 72%; }
.bonus-slot.big svg { width: 86%; height: 86%; }
.bonus-slot.stamping svg { animation: stamp-in .6s cubic-bezier(.3, 1.8, .5, 1) both .35s; }
@keyframes stamp-in { 0% { transform: scale(2.6) rotate(-25deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); } }
body.reduced .bonus-slot.stamping svg { animation: none; }
.bonus-note { margin: 0; font-size: 13px; font-weight: 900; opacity: .75; }

/* ------------------------------------------------------------ no-count hammer (id034) */
.hammer-card { align-items: center; text-align: center; }
.hammer-art { width: 110px; height: 110px; transform: rotate(-24deg); filter: drop-shadow(0 5px 0 rgba(27, 29, 77, .85)); }
.hammer-art svg { width: 100%; height: 100%; }
.hammer-msg { margin: 0; font-size: 16px; font-weight: 900; line-height: 1.7; word-break: keep-all; }
.hammer-msg b { font-family: var(--chunky); font-weight: 400; color: var(--pink); font-size: 1.25em; margin: 0 2px; }
.hammer-have { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 900; }
.hammer-have i { display: inline-block; width: 30px; height: 30px; opacity: .22; filter: grayscale(1); }
.hammer-have i.on { opacity: 1; filter: none; }
.hammer-have svg, .cal-badge.hmr svg { width: 100%; height: 100%; display: block; }
.sub-btn.hammer-yes { background: var(--pink); color: #fff; text-shadow: 0 2px 0 rgba(27, 29, 77, .45); }
.cal-badge.hmr { align-items: center; }
.cal-badge.hmr i { width: 22px; height: 22px; margin-right: 2px; transform: rotate(-20deg); }
.cal-badge.hmr b { color: var(--blue); }
.cal-day.nocount { background: #efe8ff; }
.cal-day .nc { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-14deg); padding: 1px 3px; border: 2px solid #7a4bff; border-radius: 5px; color: #7a4bff; font-size: 9px; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; background: rgba(255, 255, 255, .7); }
.cal-day.stamped .nc { animation: nc-stamp .5s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes nc-stamp { 0% { transform: translate(-50%, -50%) rotate(-30deg) scale(2.6); opacity: 0; } 100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; } }
.hammer-fx { position: absolute; width: 100px; height: 100px; transform-origin: 50px 94px; filter: drop-shadow(0 4px 0 rgba(27, 29, 77, .8)); }
.hammer-fx svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ daily quests (id035) */
.quest-card { width: 100%; max-width: 420px; padding: 10px 12px 12px; border: 3px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.quest-card.complete { background: linear-gradient(160deg, #fffbe6, #fff2b8); }
.quest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.quest-head h2 { margin: 0; font-family: var(--chunky); font-weight: 400; font-size: 18px; }
.quest-reward, .qm-head span { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.qham { display: inline-block; width: 22px; height: 22px; transform: rotate(-20deg); vertical-align: middle; }
.qham svg { width: 100%; height: 100%; display: block; }
.qdone { color: var(--pink); font-family: var(--chunky); font-weight: 400; font-size: 15px; }
.quest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.quest-list li { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px 9px 6px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); font-size: 14px; font-weight: 900; overflow: hidden; }
.quest-list li.done { background: #dff8ec; }
.quest-list li.go { cursor: pointer; background: #fff4c4; box-shadow: 0 3px 0 var(--ink); }
.quest-list li.go::after { content: "▶"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: .55; }
.quest-list li.go .qp { margin-right: 12px; }
.qchk { width: 24px; height: 24px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; color: #fff; display: grid; place-items: center; }
.qchk svg { width: 17px; height: 17px; }
li.done .qchk { background: var(--mint); }
.qt { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.3; }
.qp { font-family: var(--chunky); font-weight: 400; font-size: 14px; color: var(--blue); }
li.done .qp { color: #1f9e76; }
.qbar { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--pink) calc(var(--p) * 100%), rgba(27, 29, 77, .12) calc(var(--p) * 100%)); }
li.done .qbar { background: var(--mint); }
.quest-mini { width: 100%; margin: 4px 0 10px; text-align: left; }
.quest-mini:empty { display: none; }
.qm-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 5px; font-size: 13px; font-weight: 900; }
.quest-mini .quest-list li { font-size: 12.5px; padding: 4px 8px 7px 5px; grid-template-columns: 22px 1fr auto; }
.quest-mini .qchk { width: 20px; height: 20px; }
.qm-got { margin: 8px 0 0; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: linear-gradient(160deg, #fff6c8, #ffd23f); font-size: 13px; font-weight: 900; text-align: center; }
.quest-pop { position: absolute; left: 50%; display: flex; flex-direction: column; align-items: center; padding: 6px 16px 7px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 5px 0 var(--ink); font-size: 13px; font-weight: 900; white-space: nowrap; transform: translate(-50%, 0); opacity: 0; }
.quest-pop b { font-family: var(--chunky); font-weight: 400; font-size: 16px; color: var(--pink); }
.quest-pop.all { background: linear-gradient(160deg, #fff6c8, #ffd23f); }
.quest-pop.all b { color: var(--ink); font-size: 20px; }
.cal-day .qd { position: absolute; left: 2px; bottom: 1px; width: 15px; height: 15px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); color: #fff; font-size: 9px; line-height: 12px; text-align: center; -webkit-text-stroke: .6px var(--ink); }

/* ------------------------------------------------------------ trophies (id036) */
.trophy-card { align-items: center; text-align: center; }
.tg-sub { margin: 0; font-size: 15px; font-weight: 900; }
.tg-sub:empty { display: none; }
.tg-sub b { font-family: var(--chunky); font-weight: 400; font-size: 24px; color: var(--pink); margin: 0 2px; }
.tg-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 7px; }
.tg-list li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; text-align: left; transition: opacity .15s; }
.tg-list li i { width: 44px; height: 44px; }
.tg-list li svg, .tr-icon svg, .tr-series li i svg { width: 100%; height: 100%; display: block; }
.tg-list li b { display: block; font-size: 15px; font-weight: 900; }
.tg-list li small { display: block; font-size: 11.5px; opacity: .72; line-height: 1.35; }
.tg-list li.r-gold { background: #fff6cf; } .tg-list li.r-rainbow { background: linear-gradient(120deg, #ffe3ef, #fff4c4, #dcfaef, #e3ebff); } .tg-list li.r-secret { background: #efe6ff; }
.tg-list li.more { display: block; text-align: center; border-style: dashed; font-size: 13px; font-weight: 900; }
#screen-trophy { flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 0 0; }
.tr-filter { display: flex; justify-content: center; gap: 8px; padding: 0 14px 8px; }
.tr-filter button { height: 34px; padding: 0 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 900; }
.tr-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tr-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 14px calc(40px + env(safe-area-inset-bottom)); }
.tr-cat { margin: 14px 0 6px; font-family: var(--chunky); font-weight: 400; font-size: 16px; }
.tr-cat:first-child { margin-top: 2px; }
.tr-series { margin-bottom: 8px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--ink); overflow: hidden; }
.tr-series summary { list-style: none; display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 7px 12px 8px 7px; cursor: pointer; }
.tr-series summary::-webkit-details-marker { display: none; }
.tr-icon { grid-row: span 2; width: 40px; height: 40px; }
.tr-t { display: flex; flex-direction: column; min-width: 0; }
.tr-t b { font-size: 14px; font-weight: 900; }
.tr-next { font-size: 11.5px; opacity: .75; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.35; }
.tr-next.done { color: var(--pink); opacity: 1; font-weight: 900; }
.tr-n { font-family: var(--chunky); font-size: 15px; color: var(--blue); }
.tr-dots { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.tr-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #b9bbd8; background: #fff; }
.tr-dots i.on { border-color: var(--ink); background: #eea36b; }
.tr-dots i.on.r-silver { background: #dde3ee; } .tr-dots i.on.r-gold { background: var(--yellow); } .tr-dots i.on.r-rainbow { background: conic-gradient(#ff7ab6, #ffd23f, #3fdcb0, #3b6bff, #ff7ab6); } .tr-dots i.on.r-secret { background: var(--violet); }
.tr-series[open] summary { border-bottom: 2px dashed #c9cbe8; }
.tr-series ul { list-style: none; margin: 0; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.tr-series li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 10px; font-size: 12px; }
.tr-series li i { width: 30px; height: 30px; }
.tr-series li b { display: block; font-weight: 900; }
.tr-series li small { display: block; font-size: 11.5px; opacity: .7; }
.tr-series li:not(.got) { opacity: .6; }
.tr-series li.got { background: #fffbe6; }
.tr-series li em { font-style: normal; font-size: 11px; font-weight: 900; color: var(--blue); }
.tr-empty { text-align: center; font-weight: 900; opacity: .6; }

/* ------------------------------------------------------------ skill stars (id037) */
.star-row path { fill: #fff; stroke: #b9bbd8; stroke-width: 1.8; stroke-linejoin: round; }
.star-row path.on { fill: var(--yellow); stroke: var(--ink); }
.node.mastered::after { content: none; }
.node .stars { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: block; width: 50px; height: 11px; padding: 1px 3px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; line-height: 0; box-sizing: content-box; }
.node .stars .star-row { width: 100%; height: 100%; }
.node .stars.s5 { background: linear-gradient(90deg, #ffe3ef, #fff4c4, #dcfaef, #e3ebff); }
.node.star-up .stars { animation: star-pop .8s cubic-bezier(.3, 1.8, .5, 1) both .3s; }
@keyframes star-pop { 0% { transform: translateX(-50%) scale(.2); } 100% { transform: translateX(-50%) scale(1); } }
.tree { padding-top: 6px; }
.tree-stars { display: flex; align-items: center; justify-content: center; gap: 4px; margin: -2px 0 2px; font-size: 12px; font-weight: 900; }
.tree-stars .star-row { width: 16px; height: 16px; }
.tree-stars b { font-family: var(--chunky); font-weight: 400; font-size: 16px; color: #d99400; }
.skill-news p.star-up { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(90deg, #fff6c8, #ffe3ef); }
.skill-news p.star-up .star-row { width: 70px; height: 14px; flex: none; }
.si-card { align-items: center; text-align: center; gap: 10px; }
.si-grade { margin: 0; font-size: 12px; font-weight: 900; opacity: .65; }
.si-title { margin: 0; font-family: var(--chunky); font-weight: 400; font-size: 24px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.si-stars { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; font-weight: 900; font-size: 13px; }
.si-stars .star-row { width: 190px; height: 38px; }
.si-next { width: 100%; padding: 10px 12px; border: 2.5px dashed var(--ink); border-radius: 16px; background: #fff; }
.si-next p { margin: 0; }
.si-label { font-family: var(--chunky); font-size: 15px; color: #d99400; }
.si-text { font-size: 15px; font-weight: 900; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.si-text.done { color: var(--pink); }
.si-now { margin-top: 4px !important; font-size: 13px; font-weight: 900; color: var(--blue); }
.si-note { margin: 0; font-size: 12px; font-weight: 900; opacity: .7; }
.sub-btn.si-go { background: var(--blue); color: #fff; text-shadow: 0 2px 0 rgba(27, 29, 77, .45); }

/* ------------------------------------------------------------ compared with before (id038) */
.growth-box { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 8px 10px 10px; border: 2.5px solid var(--ink); border-radius: 16px; background: linear-gradient(160deg, #e3ebff, #dcfaef); }
.growth-box:empty { display: none; }
.gb-head { margin: 0; font-family: var(--chunky); font-weight: 400; font-size: 18px; color: var(--blue); }
.gb-line { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 6px; border-radius: 12px; background: #fff; }
.gb-line > b { font-size: 13px; font-weight: 900; }
.gb-row { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.gb-what { font-size: 11px; font-weight: 900; opacity: .7; padding-bottom: 3px; }
.gb-old, .gb-new { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.gb-old small, .gb-new small { font-size: 10px; font-weight: 900; opacity: .6; }
.gb-old { font-size: 14px; font-weight: 900; color: #8a8cb0; }
.gb-arrow { font-weight: 900; color: var(--pink); padding-bottom: 2px; }
.gb-new em { font-style: normal; font-family: var(--chunky); font-size: 22px; color: var(--pink); display: inline-block; }
/* The result screens grew (growth, quests): keep the next actions on screen (id038). */
.result-card .actions { position: sticky; bottom: -20px; z-index: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px -20px -20px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 2.5px dashed #c9cbe8; border-radius: 0 0 25px 25px; background: #fff; }
.result-card .actions .big-btn { flex: 1 0 100%; max-width: 360px; height: 62px; }
.result-card .actions .sub-btn { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 12px; font-size: 15px; }
.result-card .actions .sub-btn[hidden] { display: none; }

/* ------------------------------------------------------------ time capsule (id039) */
.card.capsule { background: #fffaf0; box-shadow: 0 7px 0 var(--ink), 0 0 0 5px #ffb86b; }
.capsule-intro { position: absolute; width: 0; height: 0; }
.ci-env { position: absolute; left: 0; top: 0; width: 230px; transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 6px 0 rgba(27, 29, 77, .85)); }
.ci-env svg { width: 100%; display: block; overflow: visible; }
.env-flap { transform-origin: 110px 40px; transform-box: view-box; }
.ci-letter { position: absolute; left: 50%; top: 50%; width: 190px; padding: 10px 8px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; text-align: center; transform: translate(-50%, -50%) scale(.8); opacity: 0; z-index: 1; }
.ci-letter small { display: block; font-size: 11px; font-weight: 900; color: #e08a2a; letter-spacing: .1em; }
.ci-letter b { display: block; font-family: var(--chunky); font-weight: 400; font-size: 20px; }
.ci-letter span { display: block; font-size: 11px; font-weight: 900; opacity: .7; }
.capsule-result { position: absolute; display: flex; flex-direction: column; align-items: center; padding: 8px 16px 10px; border: 3px solid var(--ink); border-radius: 18px; background: #fffaf0; box-shadow: 0 5px 0 var(--ink), 0 0 0 4px #ffb86b; transform: translate(-50%, 0); opacity: 0; white-space: nowrap; }
.capsule-result small { font-size: 11px; font-weight: 900; color: #e08a2a; letter-spacing: .1em; }
.capsule-result b { font-family: var(--chunky); font-weight: 400; font-size: 20px; }
.capsule-result > span { font-size: 13px; font-weight: 900; }
.cr-row { display: flex; align-items: flex-end; gap: 10px; }
.cr-old, .cr-new { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cr-old i, .cr-new i { font-style: normal; font-size: 10px; font-weight: 900; opacity: .6; }
.cr-old { font-size: 16px; font-weight: 900; color: #8a8cb0; }
.cr-new { font-family: var(--chunky); font-size: 26px; color: var(--pink); }
.cr-arrow { font-weight: 900; color: #e08a2a; padding-bottom: 4px; }
.skill-news p.capsule-news { background: #fffaf0; box-shadow: inset 0 0 0 2px #ffb86b; }
.skill-news p.capsule-news b { margin-right: 8px; color: #e08a2a; }
.cr-new i, .gb-new small { font-family: var(--round); line-height: 1.3; margin-bottom: 1px; }
.cr-new, .gb-new em { line-height: 1; }
/* id050: review sits right under じぶんレベル. */
.modes > .review-main { min-width: 240px; font-weight: 900; }
.modes > .review-main[hidden] { display: none; }

/* ------------------------------------------------------------ rust (id040) */
.node.rusty { background: linear-gradient(160deg, #fff1cc, #e7c88a); }
.node.rusty::before { content: ""; position: absolute; inset: 3px; border-radius: 11px; pointer-events: none;
  background: radial-gradient(circle at 18% 26%, rgba(168, 98, 40, .45) 0 3px, transparent 3.5px), radial-gradient(circle at 78% 72%, rgba(168, 98, 40, .4) 0 4px, transparent 4.5px), radial-gradient(circle at 64% 20%, rgba(168, 98, 40, .35) 0 2px, transparent 2.5px), radial-gradient(circle at 30% 80%, rgba(168, 98, 40, .3) 0 2.5px, transparent 3px); }
.node .rust { position: absolute; top: -9px; left: -6px; padding: 0 4px; border: 1.5px solid var(--ink); border-radius: 6px; background: #c9772f; color: #fff; font-style: normal; font-size: 9px; line-height: 14px; transform: rotate(-10deg); }
.skill-news p.polish-news { background: linear-gradient(90deg, #fff, #fff6c8, #fff); }

/* ------------------------------------------------------------ collection (id041) */
#screen-collect { flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 0 0; }
.co-preview { position: relative; flex: none; height: min(28vh, 220px); margin: 0 14px 8px; border: 3px solid var(--ink); border-radius: 22px; background: rgba(255, 255, 255, .35); box-shadow: 0 5px 0 var(--ink); overflow: hidden; }
.co-preview .co-mark { left: 50%; top: 50%; right: auto !important; transform-origin: center; translate: -50% -58%; }
.co-now { position: absolute; left: 10px; top: 8px; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 900; }
.co-tabs { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 2px 14px 8px; scrollbar-width: none; }
.co-tabs::-webkit-scrollbar { display: none; }
.co-tabs button { flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 12px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; font-size: 12px; font-weight: 900; line-height: 1.2; }
.co-tabs button small { font-size: 10px; opacity: .6; }
.co-tabs button[aria-pressed="true"] { background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.co-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 14px calc(40px + env(safe-area-inset-bottom)); }
.co-note { margin: 0 0 8px; font-size: 12px; font-weight: 900; opacity: .7; text-align: center; }
.co-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.co-item { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 8px 4px 8px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
.co-item.on { background: #fff4c4; box-shadow: 0 0 0 4px var(--pink), 0 3px 0 var(--ink); }
.co-item.locked { background: #eceaf3; color: #8a8cb0; border-color: #a9abc9; box-shadow: 0 3px 0 #a9abc9; }
.co-item.locked .co-th { filter: grayscale(1) brightness(.6) contrast(.6); opacity: .45; }
.co-th { display: grid; place-items: center; width: 64px; height: 64px; }
.co-th > svg, .co-th .th-crowd svg { width: 100%; height: 100%; display: block; }
.co-th b { font-family: var(--chunky); font-weight: 400; font-size: 34px; color: var(--pink); }
.co-item.auto .co-th { border: 2.5px dashed var(--ink); border-radius: 50%; width: 56px; height: 56px; margin: 4px; }
.th-bg { display: block; width: 58px; height: 58px; border: 2.5px solid var(--ink); border-radius: 14px; }
.th-music { display: grid; place-items: center; width: 58px; height: 58px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; }
.th-music svg { width: 40px; height: 40px; }
.th-crowd { display: flex; width: 70px; height: 64px; align-items: flex-end; }
.th-crowd svg { width: 34% !important; height: auto !important; margin: 0 -2%; }
.co-name { font-size: 12.5px; font-weight: 900; word-break: keep-all; overflow-wrap: anywhere; text-align: center; line-height: 1.25; }
.co-item small { font-size: 10.5px; opacity: .75; text-align: center; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.tg-list li.reward { background: linear-gradient(120deg, #fff4c4, #ffe3ef); border-style: dashed; }
.tg-list li.reward i { display: grid; place-items: center; overflow: hidden; }
.tg-list li.reward i > * { max-width: 44px; max-height: 44px; }
.tg-list li.reward .th-bg, .tg-list li.reward .th-music { width: 40px; height: 40px; }
.tr-series li small.rw { color: #d97a00; opacity: 1; }
.finale-rocket { position: absolute; left: 0; top: 0; width: 180px; height: 120px; transform-origin: 90px 60px; filter: drop-shadow(0 6px 0 rgba(27, 29, 77, .8)); }
.finale-rocket svg { width: 100%; height: 100%; }
.finale-banner { position: absolute; left: 0; top: 0; width: 180px; padding: 8px 0; border: 4px solid var(--ink); border-radius: 12px; background: #fff; color: var(--pink); font-family: var(--chunky); font-size: 30px; text-align: center; box-shadow: 0 6px 0 var(--ink); }
/* id045: "もうすぐ" — the closest next steps. */
.tr-soon { display: grid; grid-template-columns: 40px 1fr 56px; align-items: center; gap: 10px; margin-bottom: 8px; padding: 7px 10px 7px 7px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
.tr-pct { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p) * 360deg), #eceaf3 0); }
.tr-pct b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-family: var(--chunky); font-weight: 400; font-size: 12px; }
.tr-filter { flex-wrap: wrap; }

/* ------------------------------------------------------------ title guide (id052) */
.help-btn { top: calc(72px + env(safe-area-inset-top)); }
#guide { position: fixed; inset: 0; z-index: 10; touch-action: none; }
#guide[hidden] { display: none; }
.guide-shade, #guide-actor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#guide-actor { overflow: visible; }
#guide-skip { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; min-width: 90px; min-height: 44px; background: var(--paper); }
#guide-card { position: absolute; left: 50%; transform: translateX(-50%); width: min(360px, calc(100% - 32px)); padding: 16px; border: 3px solid var(--ink); border-radius: 22px 18px 24px 16px; box-shadow: 0 6px 0 var(--ink); background: var(--paper); text-align: center; }
#guide-heading { margin: 0 0 8px; font-size: 20px; line-height: 1.4; }
#guide-text { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.7; }
/* Credit to the original game, on the last page of the ？ help only. */
#guide-credit { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; line-height: 1.4; color: #6b6f9c; word-break: keep-all; }
#guide-dots { display: flex; justify-content: center; gap: 9px; margin: 14px 0; }
#guide-dots i { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
#guide-dots .current { background: var(--pink); transform: scale(1.25); }
.guide-actions { display: flex; gap: 12px; }
.guide-actions button { flex: 1; min-width: 0; height: 48px; font-size: 18px; padding: 0 8px; }
#guide-back:disabled { opacity: .4; cursor: default; }
#guide-recommend { position: absolute; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 6px; background: var(--yellow); font-size: 13px; font-weight: 900; transform: rotate(-4deg); }
body.guide-open .logo *, body.guide-open .logo-burst { animation: none !important; }
@media (max-height: 680px) {
  #guide-card { padding: 12px; }
  #guide-heading { font-size: 18px; }
  #guide-text { font-size: 14px; }
  #guide-dots { margin: 12px 0; }
}
/* Keep the real help button clear of Skip when both targets fit. */
#guide.guide-last #guide-skip { left: 16px; right: auto; }
#guide-help-ring { animation: guide-help-pulse 1.4s ease-in-out infinite; }
.guide-help-icon { position: relative; display: inline-grid; place-items: center; vertical-align: middle; width: 32px; height: 32px; padding: 3px; margin: 4px 3px; background: #fff; box-shadow: 0 3px 0 var(--ink); cursor: default; }
.guide-help-icon svg { display: block; width: 100%; height: 100%; }
.guide-help-fallback::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--yellow); border-radius: 14px; animation: guide-help-pulse 1.4s ease-in-out infinite; }
@keyframes guide-help-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
body.reduced #guide-help-ring, body.reduced .guide-help-fallback::after { animation: none; }

/* ---------------------------------------------------------------- 素数！ (すだれ算) */
.sheet.sudare { isolation: isolate; }
/* three digits: a window of five rows, with room at the right for the molecule (main.js MOL_ROOM) */
.sheet.sudare.windowed { margin-right: 60px; }
.prime-word { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--chunky); color: #fff; line-height: 1; white-space: nowrap; text-align: center; letter-spacing: .03em; }
/* The letters twice: the copy behind carries the outline and the shadows, so
   they neither cover the letters in front nor fill the gaps inside them. */
.prime-word .pw { position: relative; display: inline-block; color: var(--yellow); }
.prime-word .pw-front { position: relative; z-index: 1; display: inline-block; }
/* The outline is a ring of shadows 6px out (not -webkit-text-stroke, which some browsers
   at times left unpainted on this layer while the word was scaled in), then the same ring's
   lower half 8px down for the drop shadow, then the glow. */
.prime-word .pw-back { position: absolute; left: 0; top: 0; z-index: 0; color: var(--ink);
  text-shadow: 6.0px 0.0px 0 var(--ink), 5.8px 1.6px 0 var(--ink), 5.2px 3.0px 0 var(--ink), 4.2px 4.2px 0 var(--ink), 3.0px 5.2px 0 var(--ink), 1.6px 5.8px 0 var(--ink), 0.0px 6.0px 0 var(--ink), -1.6px 5.8px 0 var(--ink), -3.0px 5.2px 0 var(--ink), -4.2px 4.2px 0 var(--ink), -5.2px 3.0px 0 var(--ink), -5.8px 1.6px 0 var(--ink), -6.0px 0.0px 0 var(--ink), -5.8px -1.6px 0 var(--ink), -5.2px -3.0px 0 var(--ink), -4.2px -4.2px 0 var(--ink), -3.0px -5.2px 0 var(--ink), -1.6px -5.8px 0 var(--ink), -0.0px -6.0px 0 var(--ink), 1.6px -5.8px 0 var(--ink), 3.0px -5.2px 0 var(--ink), 4.2px -4.2px 0 var(--ink), 5.2px -3.0px 0 var(--ink), 5.8px -1.6px 0 var(--ink),
    6.0px 8.0px 0 var(--ink), 5.8px 9.6px 0 var(--ink), 5.2px 11.0px 0 var(--ink), 4.2px 12.2px 0 var(--ink), 3.0px 13.2px 0 var(--ink), 1.6px 13.8px 0 var(--ink), 0.0px 14.0px 0 var(--ink), -1.6px 13.8px 0 var(--ink), -3.0px 13.2px 0 var(--ink), -4.2px 12.2px 0 var(--ink), -5.2px 11.0px 0 var(--ink), -5.8px 9.6px 0 var(--ink), -6.0px 8.0px 0 var(--ink),
    0 0 30px rgba(255, 210, 63, .9); }
.prime-word small { display: block; font-size: .42em; margin-bottom: .05em; }
.prime-word .pw-front small { color: #fff; }
/* seen through: a hanko on the big word */
.prime-word .word-mark { position: absolute; z-index: 2; right: 0; bottom: -12%; margin: 0; padding: 4px 10px; border-width: 4px; border-radius: 12px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #e0302f;
  font-family: var(--round); font-style: normal; font-size: 30px; letter-spacing: 0; -webkit-text-stroke: 0; text-shadow: none; background: rgba(255, 255, 255, .9); transform: rotate(-14deg); vertical-align: baseline; }
/* 「バーン！」: ！ hops by itself, so it is a box of its own */
.prime-word .sosu-x { display: inline-block; transform-origin: 50% 80%; }
/* the hold before the hit: the screen a little darker (never black: the white flash follows) */
/* Smoothness: what moves in the show is drawn once and then moved, scaled and faded as a
   picture (its many shadows are not drawn again every frame). */
.prime-word, .prime-word .sosu-x, .prime-num, .prime-knock, .prime-shock, .prime-lines, .prime-card, .prime-new, .prime-stop-ring { will-change: transform, opacity; }
/* The stop (sosu.js PRIME_STOP): one sheet turns everything behind it black and white;
   one ring spreads from the number that is left. */
.prime-stop { position: absolute; inset: 0; -webkit-backdrop-filter: grayscale(1) brightness(.88) contrast(1.08); backdrop-filter: grayscale(1) brightness(.88) contrast(1.08); }
.prime-stop-ring { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 7px solid #fff; box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink); opacity: 0; }
/* ?fps: the frame counter (only with ?fps in the address) */
#fps-meter { position: fixed; left: 4px; bottom: 4px; z-index: 20; padding: 2px 6px; border-radius: 6px; background: rgba(27, 29, 77, .78); color: #fff; font: 700 11px/1.3 ui-monospace, Menlo, monospace; pointer-events: none; white-space: pre; }
.prime-dim { position: absolute; inset: 0; background: #1b1d4d; opacity: 0; }
/* on the hit: a shock ring and speed lines, behind the word */
.prime-shock { position: absolute; left: 50%; top: 42%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 4px var(--ink); opacity: 0; }
.prime-lines { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 3deg, rgba(27, 29, 77, .85) 0 1.6deg, transparent 1.6deg 9deg, rgba(27, 29, 77, .6) 9deg 9.8deg, transparent 9.8deg 17deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 24%, #000 46%); mask-image: radial-gradient(circle, transparent 0 24%, #000 46%); }
/* The number as the star: the big p that flies out of the sheet. Its digits are in the
   prime's colour (primeColor); the ink outline (a ring of shadows 6px out) and the drop
   are on the copy behind, so they stay outside the digits. */
.prime-num { position: absolute; left: 0; top: 0; font-family: var(--chunky); font-weight: 400; line-height: 1; white-space: nowrap; letter-spacing: .02em; }
.prime-num .pn-back { position: absolute; left: 0; top: 0; color: var(--ink);
  text-shadow: 6.0px 0.0px 0 var(--ink), 5.7px 1.9px 0 var(--ink), 4.9px 3.5px 0 var(--ink), 3.5px 4.9px 0 var(--ink), 1.9px 5.7px 0 var(--ink), 0.0px 6.0px 0 var(--ink), -1.9px 5.7px 0 var(--ink), -3.5px 4.9px 0 var(--ink), -4.9px 3.5px 0 var(--ink), -5.7px 1.9px 0 var(--ink), -6.0px 0.0px 0 var(--ink), -5.7px -1.9px 0 var(--ink), -4.9px -3.5px 0 var(--ink), -3.5px -4.9px 0 var(--ink), -1.9px -5.7px 0 var(--ink), -0.0px -6.0px 0 var(--ink), 1.9px -5.7px 0 var(--ink), 3.5px -4.9px 0 var(--ink), 4.9px -3.5px 0 var(--ink), 5.7px -1.9px 0 var(--ink),
    6.0px 8.0px 0 var(--ink), 5.6px 10.1px 0 var(--ink), 4.6px 11.9px 0 var(--ink), 3.0px 13.2px 0 var(--ink), 1.0px 13.9px 0 var(--ink), -1.0px 13.9px 0 var(--ink), -3.0px 13.2px 0 var(--ink), -4.6px 11.9px 0 var(--ink), -5.6px 10.1px 0 var(--ink), -6.0px 8.0px 0 var(--ink); }
.prime-num .pn-front { position: relative; }
/* Three digits: a gold outline (gold 5px out, a thin ink line outside it so it reads on any
   backdrop) and small sparkles around the number. At 動きの強さ 0 (.still) they do not twinkle. */
.prime-num.gold .pn-back { color: #ffc928;
  text-shadow: 5.0px 0.0px 0 #ffc928, 4.8px 1.5px 0 #ffc928, 4.0px 2.9px 0 #ffc928, 2.9px 4.0px 0 #ffc928, 1.5px 4.8px 0 #ffc928, 0.0px 5.0px 0 #ffc928, -1.5px 4.8px 0 #ffc928, -2.9px 4.0px 0 #ffc928, -4.0px 2.9px 0 #ffc928, -4.8px 1.5px 0 #ffc928, -5.0px 0.0px 0 #ffc928, -4.8px -1.5px 0 #ffc928, -4.0px -2.9px 0 #ffc928, -2.9px -4.0px 0 #ffc928, -1.5px -4.8px 0 #ffc928, -0.0px -5.0px 0 #ffc928, 1.5px -4.8px 0 #ffc928, 2.9px -4.0px 0 #ffc928, 4.0px -2.9px 0 #ffc928, 4.8px -1.5px 0 #ffc928,
    8.5px 0.0px 0 var(--ink), 8.2px 2.2px 0 var(--ink), 7.4px 4.2px 0 var(--ink), 6.0px 6.0px 0 var(--ink), 4.3px 7.4px 0 var(--ink), 2.2px 8.2px 0 var(--ink), 0.0px 8.5px 0 var(--ink), -2.2px 8.2px 0 var(--ink), -4.2px 7.4px 0 var(--ink), -6.0px 6.0px 0 var(--ink), -7.4px 4.2px 0 var(--ink), -8.2px 2.2px 0 var(--ink), -8.5px 0.0px 0 var(--ink), -8.2px -2.2px 0 var(--ink), -7.4px -4.2px 0 var(--ink), -6.0px -6.0px 0 var(--ink), -4.3px -7.4px 0 var(--ink), -2.2px -8.2px 0 var(--ink), -0.0px -8.5px 0 var(--ink), 2.2px -8.2px 0 var(--ink), 4.3px -7.4px 0 var(--ink), 6.0px -6.0px 0 var(--ink), 7.4px -4.3px 0 var(--ink), 8.2px -2.2px 0 var(--ink),
    9.0px 8.0px 0 var(--ink), 8.5px 11.1px 0 var(--ink), 6.9px 13.8px 0 var(--ink), 4.5px 15.8px 0 var(--ink), 1.6px 16.9px 0 var(--ink), -1.6px 16.9px 0 var(--ink), -4.5px 15.8px 0 var(--ink), -6.9px 13.8px 0 var(--ink), -8.5px 11.1px 0 var(--ink), -9.0px 8.0px 0 var(--ink); }
.pn-spark { position: absolute; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; filter: drop-shadow(0 0 1.5px var(--ink)) drop-shadow(0 0 1.5px var(--ink)); animation: pn-twinkle .42s ease-in-out infinite alternate both; }
.pn-spark b { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #fff 30%, #ffd84a); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@keyframes pn-twinkle { from { transform: scale(.35) rotate(0deg); opacity: .5; } to { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.prime-num.still .pn-spark { animation: none; }
.prime-num.crystal { filter: drop-shadow(0 0 12px rgba(127, 231, 255, .95)); }
.prime-num.crystal .pn-front { color: transparent !important; background: linear-gradient(135deg, #7fe7ff, #fff 35%, #8fb6ff 55%, #e2a8ff 80%, #fff); -webkit-background-clip: text; background-clip: text; }
/* combo 10+: burning, rainbow letters */
.prime-word.hot .pw { filter: drop-shadow(0 -6px 6px rgba(255, 120, 0, .9)) drop-shadow(0 -14px 14px rgba(255, 60, 0, .6)); }
/* the rainbow is on 素数 and on ！ each, so that ！ keeps it while it hops */
.prime-word.hot .pw-front b { background: linear-gradient(90deg, #ff3b3b, #ffb000, #ffe14d, #3fdcb0, #3b6bff, #a77bff, #ff3b3b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: prime-rainbow .5s linear infinite; }
@keyframes prime-rainbow { to { background-position: 200% 0; } }
.prime-knock { position: absolute; left: 0; top: 0; width: 54px; height: 54px; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%; background: #fff; font-family: var(--chunky); font-size: 28px; color: var(--blue); box-shadow: 0 4px 0 var(--ink); }
.prime-rays { position: absolute; z-index: -1; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 210, 63, .75) 0 9deg, rgba(255, 255, 255, 0) 9deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: prime-spin 1.6s linear infinite; }
@keyframes prime-spin { to { transform: rotate(360deg); } }
.cell.crystal { color: transparent; background: linear-gradient(135deg, #7fe7ff, #fff 35%, #8fb6ff 55%, #e2a8ff 80%, #fff); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 2px var(--ink)) drop-shadow(0 0 10px rgba(127, 231, 255, .95)); animation: crystal-pop .3s ease-out; }
@keyframes crystal-pop { from { transform: scale(1.8) rotate(-12deg); } }
/* under the word and the atomic number, so that all three show */
.prime-flip { position: absolute; left: 50%; top: calc(42% + 132px); width: 124px; height: 150px; display: grid; place-items: center; border: 5px solid var(--ink); border-radius: 20px;
  background: linear-gradient(160deg, #fff3b8, #fff 50%, #e3ebff); box-shadow: 0 8px 0 var(--ink); font-family: var(--chunky); font-size: 46px; color: var(--blue); backface-visibility: hidden; }
.prime-new { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) rotate(-6deg); padding: 6px 16px; border: 4px solid var(--ink); border-radius: 999px; background: var(--pink); color: #fff;
  font-family: var(--chunky); font-size: 26px; white-space: nowrap; box-shadow: 0 5px 0 var(--ink); animation: prime-new-slam .26s linear; }
@keyframes prime-new-in { from { transform: translateX(-50%) rotate(-6deg) scale(2.2); opacity: 0; } }
/* NEW 素数！ comes in the same way: from large, a little past its size, and back */
@keyframes prime-new-slam { 0% { transform: translateX(-50%) rotate(-6deg) scale(4); opacity: 0; } 45% { transform: translateX(-50%) rotate(-6deg) scale(.88); opacity: 1; } 70% { transform: translateX(-50%) rotate(-6deg) scale(1.07); } 100% { transform: translateX(-50%) rotate(-6deg) scale(1); } }
.prime-card { position: absolute; left: 0; top: 0; width: 64px; height: 84px; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 12px; background: #fff;
  box-shadow: 0 4px 0 var(--ink); font-family: var(--chunky); font-size: 28px; color: var(--blue); }
.prime-rank { position: absolute; left: 50%; top: calc(42% + 90px); transform: translateX(-50%); padding: 4px 14px; border: 3px solid var(--ink); border-radius: 999px; background: #fff;
  font-family: var(--round); font-weight: 900; font-size: 18px; color: var(--ink); white-space: nowrap; animation: prime-new-in .2s ease-out; }
/* 見抜き印: a small red hanko */
/* Small, it is a plain red frame (no inner ring, which left no room for the letters), never under 11px. */
.minuki { display: inline-block; margin-left: 4px; padding: 1px 4px; border: 2px solid #e0302f; border-radius: 6px;
  color: #e0302f; font-size: max(.62em, 11px); font-weight: 900; line-height: 1.1; letter-spacing: 0; vertical-align: super; transform: rotate(-12deg); background: rgba(255, 255, 255, .7); }
.cell.crystal-tint { color: #3fa9d6; }
body.reduced .prime-word, body.reduced .prime-new, body.reduced .prime-rank { animation: none; }

/* ---------------------------------------------------------------- 割れる (すだれ算) */
.cell.crack { animation: crack-shake var(--crack-ms, 350ms) ease-out; }
.cell.crack::after { content: ""; position: absolute; left: 46%; top: 8%; bottom: 8%; width: 3px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 40% 30%, 100% 55%, 30% 80%, 100% 100%, 0 100%, 60% 70%, 0 45%, 70% 25%);
  animation: crack-line var(--crack-ms, 350ms) ease-out forwards; }
@keyframes crack-shake { 0% { transform: translateX(0); } 15% { transform: translateX(-3px) rotate(-3deg); } 30% { transform: translateX(3px) rotate(2deg); } 50% { transform: none; } }
@keyframes crack-line { 0% { opacity: 1; transform: scaleY(.2); } 25% { transform: scaleY(1); } 100% { opacity: 0; } }
.cell.crack-tint { color: var(--pink); }
.split-piece { position: absolute; left: 0; top: 0; font-family: var(--round); font-weight: 900; line-height: 1; color: var(--ink); white-space: nowrap; pointer-events: none; }
.split-piece.atom { color: var(--blue); text-shadow: 0 0 6px #fff, 0 0 14px rgba(59, 107, 255, .85); }

/* ---------------------------------------------------------------- 分子模型 (すだれ算) */
.molecule { position: absolute; pointer-events: none; }
.molecule svg { display: block; overflow: visible; }
.molecule line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.molecule line.halo { stroke: #fff; stroke-width: 9; }
.molecule circle { stroke: var(--ink); stroke-width: 2.5; }
.molecule circle.halo { fill: #fff; stroke: #fff; stroke-width: 7; }
.molecule text { font-family: var(--round); font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.molecule .ball { transform-box: fill-box; transform-origin: center; animation: mol-pop var(--mol-ms, 220ms) cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(var(--i) * var(--mol-ms, 220ms) / 5); }
.molecule .bonds, .molecule .mol-mark { animation: mol-fade var(--mol-ms, 220ms) ease-out backwards; }
.molecule .mol-mark rect { fill: #fff; stroke: #e0302f; stroke-width: 2; }
.molecule .mol-mark text { fill: #e0302f; font-size: 10px; }
/* many of the same prime: one ball and ×k beside it, like a chemical formula */
.molecule .mol-count rect { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.molecule .mol-count text { fill: var(--ink); }
@keyframes mol-pop { from { transform: scale(0); } }
@keyframes mol-fade { from { opacity: 0; } }
.molecule.still .ball, .molecule.still .bonds, .molecule.still .mol-mark { animation: none; }

/* ---------------------------------------------------------------- 素数図鑑 */
#screen-zukan { flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 0 0; }
.zk-summary { margin: 0 14px 6px; padding: 4px 12px; align-self: center; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--round); font-weight: 900; font-size: 14px; white-space: nowrap; }
/* ten tabs (100未満, 100番台 … 900番台): one row that scrolls sideways */
.zk-tabs { display: flex; gap: 6px; justify-content: flex-start; padding: 0 14px 6px; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none; }
.zk-tabs::-webkit-scrollbar { display: none; }
.zk-tabs[hidden] { display: none; }
.zk-tabs button { flex: none; display: grid; justify-items: center; padding: 3px 10px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; font-weight: 900; font-size: 13px; line-height: 1.15; white-space: nowrap; }
.zk-tabs button small { font-size: 10px; font-weight: 700; opacity: .75; }
.zk-tabs button[aria-pressed="true"] { background: var(--yellow); }
.zk-scroll { flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; }
/* Like a periodic table: columns are the ones digit, rows the tens digit. */
.zk-table { position: relative; width: 100%; max-width: 420px; display: grid; grid-template-columns: 24px repeat(6, minmax(0, 1fr)); gap: 5px; padding-right: 12px; }
/* Row labels keep to the left of their column, leaving room for a twin link's stub. */
.zk-head.zk-row { justify-content: start; justify-items: start; padding-right: 8px; }
.zk-head { display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #7a7ea8; }
.zk-cell { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; font-family: var(--chunky); font-weight: 400; line-height: 1; color: var(--ink); }
.zk-cell b { font-weight: 400; font-size: clamp(15px, 5.2vw, 22px); }
/* composites and 1: only a pale number */
.zk-cell.composite, .zk-cell.one { border: 1.5px dashed #cfd1e4; background: transparent; color: #b4b7d2; font-family: var(--round); }
.zk-cell.composite b, .zk-cell.one b { font-weight: 900; font-size: clamp(12px, 3.8vw, 16px); }
.zk-cell.one { border-style: dotted; color: #9b9fc2; }
/* a prime not met yet: a grey silhouette */
.zk-cell.unmet { border-color: #a3a6c4; background: #dcdeeb; color: #9a9dbd; }
/* met: its own colour, the number and the atomic number */
.zk-cell.met, .zk-cell.seen { box-shadow: 0 3px 0 var(--ink); animation: zk-pop .3s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(var(--i, 0) * 18ms); }
/* the number sits a little lower, clear of the atomic number in the corner */
.zk-cell.met b, .zk-cell.seen b { position: relative; top: 3px; }
.zk-no { position: absolute; left: 4px; top: 2px; font-family: var(--round); font-weight: 900; font-size: 10px; opacity: .85; }
/* seen through at least once: a gold frame and a small hanko */
.zk-cell.seen { border-color: #ffc400; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px var(--ink); }
.zk-stamp { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid #e0302f; border-radius: 5px; background: #fff; color: #e0302f; font-family: var(--round); font-style: normal; font-weight: 900; font-size: 11px; transform: rotate(-12deg); }
/* Mersenne primes */
.zk-m { position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--round); font-style: normal; font-weight: 900; font-size: 9px; }
@keyframes zk-pop { from { transform: scale(.4); opacity: 0; } }
/* twin primes: glowing links */
.zk-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.zk-links path, .zk-links line { fill: none; stroke: #ffd23f; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px #ffb000); animation: zk-glow 1.6s ease-in-out infinite; }
.zk-links .core { stroke: #fff; stroke-width: 1.6; filter: none; animation: none; }
.zk-links circle { fill: #ffd23f; stroke: var(--ink); stroke-width: 1.5; }
@keyframes zk-glow { 50% { opacity: .55; } }
body.reduced .zk-cell.met, body.reduced .zk-cell.seen, body.reduced .zk-links path, body.reduced .zk-links line { animation: none; }
.zk-play { margin-top: 16px; min-width: 220px; background: var(--yellow); font-weight: 900; }
/* from 100 up: four columns (1, 3, 7, 9) of wide cells, so three digits and the atomic number fit */
.zk-table.wide { grid-template-columns: 30px repeat(4, minmax(0, 1fr)); }
.zk-table.wide .zk-cell { aspect-ratio: auto; height: clamp(40px, 12.6vw, 52px); }
.zk-foot { margin: 8px 0 0; }
.zk-foot[hidden] { display: none; }
/* a twin in the next tab (599 and 601) */
.zk-links .zk-cross { font-family: var(--round); font-weight: 900; font-size: 10px; fill: var(--ink); stroke: #fff; stroke-width: 3px; paint-order: stroke; }

/* ---------------------------------------------------------------- 100まで／1000まで */
.sp-list { display: grid; gap: 12px; }
.sp-btn { display: grid; justify-items: center; gap: 2px; padding: 10px 12px 12px; border: 3.5px solid var(--ink); border-radius: 20px; background: var(--yellow); color: var(--ink); box-shadow: 0 6px 0 var(--ink); }
.sp-btn b { display: flex; align-items: center; gap: 6px; font-family: var(--chunky); font-weight: 400; font-size: 26px; line-height: 1.2; }
.sp-btn small { font-size: 13px; font-weight: 900; opacity: .8; }
.sp-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.sp-btn.locked { background: #e6e7f2; color: #5c6090; box-shadow: 0 6px 0 #8f93b8; border-color: #8f93b8; }
.sp-btn.locked small { opacity: 1; color: var(--ink); }
.sp-lock { width: 24px; height: 24px; flex: none; }
/* detail card */
.pi-ball { width: 84px; height: 84px; display: grid; place-items: center; border: 3.5px solid var(--ink); border-radius: 50%; background: #fff; font-family: var(--chunky); font-size: 34px; line-height: 1; box-shadow: 0 4px 0 var(--ink); }
.pi-ball.composite, .pi-ball.one { border-style: dashed; border-color: #b4b7d2; color: #9b9fc2; box-shadow: none; }
.pi-ball.unmet { border-color: #a3a6c4; background: #dcdeeb; color: #9a9dbd; }
.pi-ball.seen { border-color: #ffc400; box-shadow: 0 0 0 2.5px var(--ink), 0 5px 0 2.5px var(--ink); }
.pi-lines { display: flex; flex-direction: column; gap: 6px; }
.pi-lines p { margin: 0; font-size: 15px; font-weight: 900; line-height: 1.5; }
.pi-lines p span { display: inline-block; }
/* NEW 素数！: the card flies into the book */
.prime-book { position: absolute; right: 12px; top: 52px; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; background: var(--yellow); box-shadow: 0 4px 0 var(--ink); animation: prime-new-in .2s ease-out; }
.prime-book svg { width: 30px; height: 30px; }
body.reduced .prime-book { animation: none; }

/* ---------------------------------------------------------------- ドパ素数のタイトル */
/* すだれ算 first; the pairs below share a row on a phone. */
.sosu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 78px; min-width: min(300px, 100%); background: var(--yellow); color: var(--ink); text-shadow: none; }
.sosu-btn small { font-size: 13px; letter-spacing: 0; color: var(--ink); opacity: .75; }
.mode-row.pair { width: 100%; max-width: 420px; flex-wrap: nowrap; }
.mode-row.pair .sub-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: clamp(14px, 4.2vw, 18px); white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; overflow: hidden; }
/* The count sits under the label: 16/222 or 1000/1000 never runs out of the button. */
.mode-row.pair .sub-btn b { margin-left: 0; font-size: .86em; max-width: 100%; }
.mode-row.pair .sub-btn:only-child { flex: 0 1 60%; }
/* 設定 and ？ as a small row under the buttons (no longer pinned to the corner) */
.title-icons { display: flex; gap: 14px; justify-content: center; }
.title-icons .settings-btn { position: static; width: 44px; height: 44px; }
/* the elementary drill, when shown */
.kids-modes { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 0 4px; border-top: 3px dashed rgba(27, 29, 77, .25); }
.kids-modes[hidden] { display: none; }
.kids-head { margin: 0; font-size: 13px; font-weight: 900; opacity: .7; }

/* ---------------------------------------------------------------- ガイドの小さな図 */
#guide-figure { margin: 0 0 8px; display: flex; justify-content: center; }
#guide-figure[hidden] { display: none; }
.guide-fig { font-family: var(--round); font-weight: 900; line-height: 1; color: var(--ink); }
/* すだれ算: divisor, ")", number; a line under each number that is divided */
.gf-sudare { display: grid; grid-template-columns: 18px 10px 30px; row-gap: 3px; align-items: center; font-size: 15px; }
.gf-sudare span { color: var(--blue); text-align: center; }
.gf-sudare b { color: var(--blue); font-weight: 900; }
.gf-sudare u { text-decoration: none; text-align: right; border-bottom: 2.5px solid var(--ink); padding: 0 2px 1px; }
.gf-sudare i { font-style: normal; text-align: right; padding: 0 2px; color: #0072b2; }
.gf-key, .gf-seen { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.guide-fig em { font-style: normal; font-family: var(--chunky); font-weight: 400; font-size: 15px; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.gf-key i, .gf-seen i { font-style: normal; font-size: 22px; }
.gf-key > span, .gf-key > small { font-size: 13px; opacity: .75; }
.gf-key > b { display: grid; place-items: center; width: 30px; height: 32px; border: 2.5px solid var(--ink); border-radius: 9px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
.gf-seen .minuki { font-size: 13px; vertical-align: baseline; }