@font-face {
  font-family: "Pants UI";
  src: url("./assets/ui-v1.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #140f1c;
  --panel: #251a32;
  --line: #594368;
  --ink: #1e1426;
  --cream: #fff2da;
  --muted: #d5c2dd;
  --amber: #ffcc72;
  --pink: #f1a7d9;
  --violet: #d5baff;
  --display: "Pants UI", "Noto Sans JP", Meiryo, sans-serif;
  font: 700 16px/1.45 var(--display);
  color: var(--cream);
  background: #140f1c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 28% 0%, #53365e66, transparent 58%),
    radial-gradient(ellipse at 84% 86%, #3f255733, transparent 56%),
    repeating-linear-gradient(118deg, transparent 0 31px, #caa1fa0a 31px 32px),
    var(--bg);
}
p, h1 { margin: 0; }
[hidden] { display: none !important; }
button, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; touch-action: manipulation; user-select: none; }
button:disabled { cursor: default; }
button:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

.game { display: flex; flex-direction: column; width: min(100%, 500px); height: min(100svh, 940px); margin-inline: auto; padding: max(12px, env(safe-area-inset-top)) 14px max(15px, env(safe-area-inset-bottom)); }
.masthead { flex: none; display: flex; justify-content: space-between; gap: 8px; align-items: end; padding: 0 0 9px; border-bottom: 1px solid #755d8066; margin-bottom: 10px; }
.eyebrow { display: flex; gap: 7px; align-items: center; margin-bottom: 3px; color: var(--pink); font: 800 10px/1.4 var(--display); letter-spacing: .22em; }
.eyebrow span { width: 7px; height: 7px; background: var(--pink); rotate: 45deg; box-shadow: 0 0 12px #fb9de7a0; }
h1 { font: 900 clamp(30px, 8vw, 48px)/1.14 var(--display); letter-spacing: -.078em; white-space: nowrap; text-shadow: 0 4px 0 #694781; }
h1 span { color: var(--amber); margin-left: .06em; }
.scores { display: flex; gap: 7px; }
.scores p { min-width: 62px; display: grid; justify-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: #24182ee8; padding: 5px 7px; }
.scores span { white-space: nowrap; color: var(--muted); font-size: 10px; }
.scores b { font: 900 22px/1 var(--display); color: var(--amber); font-variant-numeric: tabular-nums; }
.scores p:last-child b { color: var(--violet); }

.show { flex: 1; min-height: 0; display: grid; grid-template: minmax(190px, 1fr) auto / minmax(0, 1fr); gap: 10px; }
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #332238;
  border: 1px solid #a87d87;
  border-radius: 17px;
  box-shadow: 0 5px 0 #0c0810, 0 17px 50px #0c070e7a, inset 0 0 0 4px #2d1c3477;
}
:root[data-mode="ura"] .stage {
  container-type: size;
  /* Portrait assets share a 620×770 frame. Align tall stages at the counter. */
  --portrait-height: calc(min(91cqh, 118cqw) * var(--portrait-zoom, 1));
  --portrait-top: max(calc(4cqh - var(--portrait-height) * var(--portrait-hair, 0)), calc(93cqh - var(--portrait-height)));
  --portrait-chin-bottom: calc(var(--portrait-top) + var(--portrait-height) * var(--portrait-chin, .44));
}
.stage-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #18101de6 0%, #31203600 27%, #29172d00 70%, #1b1124a0 100%),
    url("./assets/props/backdrop.webp") center 57%/cover no-repeat,
    radial-gradient(ellipse at 50% 35%, #d19371, #4c2c48 66%, #25172d 100%);
}
.scene-lights { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 28%, #ffe2a927, transparent 54%), linear-gradient(90deg, #160d2340, transparent 19% 81%, #160d2340); }
.character { position: absolute; height: 91%; width: 94%; left: 3%; bottom: 7%; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 11px 14px #160a2580); transform-origin: 50% 100%; }
:root[data-mode="ura"] .character {
  top: var(--portrait-top);
  bottom: auto;
  left: 50%;
  width: auto;
  height: var(--portrait-height);
  aspect-ratio: 620 / 770;
  translate: -50% 0;
  clip-path: inset(0 0 max(0px, calc(var(--portrait-top) + var(--portrait-height) - 93cqh)) 0);
}
.stage-counter { position: absolute; bottom: 0; width: 100%; height: 12%; border-top: 2px solid #f3c08a94; background: linear-gradient(#a86247f5 0 14%, #703d42f5 14% 22%, #4a283cea 22%, #26172bef); box-shadow: 0 -6px 20px #1b0f2862; }
.scene-prop {
  position: absolute;
  bottom: 11%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(66px, 24%, 116px);
  height: clamp(66px, 17%, 104px);
  padding: 5px;
  border: 1px solid #ffce8890;
  border-radius: 12px;
  background: linear-gradient(155deg, #3b233bdb, #1e152cda);
  box-shadow: 0 4px 10px #110b16aa, inset 0 1px 0 #ffffff22;
  transform: rotate(-5deg);
}
.scene-prop--bread { left: 5%; }
.scene-prop--pants { right: 5%; border-color: #f2b6ea92; transform: rotate(5deg); }
.scene-prop img, .scene-prop svg { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.stage-status { position: absolute; z-index: 4; top: 14px; left: 16px; display: flex; gap: 6px; align-items: center; border: 1px solid #e3bce74d; border-radius: 999px; padding: 6px 9px; color: #f6e2f5; background: #271831ec; font: 850 9px/1 var(--display); letter-spacing: .13em; }
.stage-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.game[data-phase="reveal"] .stage-status i { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
.frame-corners {
  position: absolute;
  inset: 8px;
  z-index: 3;
  pointer-events: none;
  opacity: .68;
  background:
    linear-gradient(var(--amber),var(--amber)) right top/15px 1px,
    linear-gradient(var(--amber),var(--amber)) right top/1px 15px,
    linear-gradient(var(--amber),var(--amber)) left bottom/15px 1px,
    linear-gradient(var(--amber),var(--amber)) left bottom/1px 15px;
  background-repeat: no-repeat;
}
.shutter { position: absolute; z-index: 2; inset: -6px 0 0; border: 2px solid #211627; border-bottom: 5px solid #100b16; background: linear-gradient(90deg,#0e081577,transparent 17% 83%,#0e081577), repeating-linear-gradient(0deg,#2c1c3c 0 3px,#5a4569 3px 5px,#453354 5px 21px,#372845 21px 23px); box-shadow: inset 0 -2px 0 #c292c75e,0 7px 22px #180b28b8; transform: translateY(-104%); transition: transform 160ms cubic-bezier(.36,.02,.42,1); }
.shutter span { position: absolute; bottom: 13px; left: 50%; width: 54px; height: 10px; border: 2px solid #160f23; border-radius: 999px; background: #a58ab8; transform: translateX(-50%); }
.game:is([data-phase="closing"],[data-phase="listening"]) .shutter { transform: translateY(0); }
.game[data-phase="reveal"] .shutter, .game[data-phase="over"] .shutter { transition-duration: 100ms; }
.game[data-phase="listening"]:is([data-beat="4"],[data-beat="5"]) .shutter { animation: rattle .22s ease-out; }
.game[data-phase="reveal"] .character { animation: pop-character .25s ease-out; }
.stage-lettering { z-index: 5; position: absolute; left: 50%; top: 41%; width: max-content; max-width: 94%; color: var(--cream); transform: translate(-50%,-50%) rotate(-6deg); font: 900 clamp(24px, 6vw, 71px)/1.2 var(--display); letter-spacing: -.055em; text-shadow: 0 5px 0 #201027, 2px 2px #201027, -2px -2px #201027, 2px -2px #201027,-2px 2px #201027; pointer-events: none; }
.stamp-glyph { font: inherit; }
.stage-lettering[data-stamp] {
  isolation: isolate;
  color: var(--stamp-ink, #fff2cd);
  -webkit-text-stroke: .065em #201127;
  paint-order: stroke fill;
  text-shadow: .05em .10em #311544, .075em .14em #100915;
  font-size: clamp(42px, 8vw, 90px);
  letter-spacing: -.085em;
  animation: stamp .25s cubic-bezier(.15,.75,.3,1.30) both;
}
.stage-lettering[data-stamp]::before {
  content: "";
  position: absolute;
  inset: -19% -20%;
  z-index: -1;
  background: var(--stamp-flash, #ffb4ef);
  clip-path: polygon(0 28%, 13% 30%, 7% 4%, 31% 18%, 40% 0, 47% 19%, 63% 6%, 66% 22%, 91% 4%, 86% 31%, 100% 34%, 90% 53%, 98% 67%, 80% 66%, 87% 94%, 67% 79%, 56% 100%, 49% 83%, 34% 93%, 35% 77%, 12% 91%, 17% 67%, 0 68%, 9% 52%);
  opacity: .86;
  transform: rotate(-4deg);
}
.stage-lettering[data-stamp]::after {
  content: "";
  position: absolute;
  inset: -21% -22%;
  z-index: -1;
  pointer-events: none;
  transform: skewX(-22deg);
  background:
    linear-gradient(90deg,transparent,#ffe7ab) 0 12%/13% 3px,
    linear-gradient(90deg,transparent,#ffe7ab) 1% 79%/15% 2px,
    linear-gradient(90deg,#ffe7ab,transparent) 100% 28%/15% 3px,
    linear-gradient(90deg,#ffe7ab,transparent) 99% 86%/17% 2px;
  background-repeat: no-repeat;
  animation: speed-lines .29s ease-out both;
}
.stage-lettering[data-stamp="ask"] { top: 43%; --stamp-ink: #fff4dd; --stamp-flash: #b269da; font-size: clamp(37px, 6.1vw, 72px); animation-name: cue-stamp; }
.stage-lettering[data-stamp="bread"] { --stamp-ink: #ffe398; --stamp-flash: #f5a443; }
.stage-lettering[data-stamp="pants"] { --stamp-ink: #ffd1f0; --stamp-flash: #ef70b8; }
.game:is([data-phase="reveal"],[data-phase="over"]) .stage-lettering { top: 71%; animation: stamp .23s cubic-bezier(.15,.75,.3,1.35) both; }
.game[data-phase="reveal"] .stage-lettering { animation: hit-stamp .25s cubic-bezier(.15,.75,.3,1.35) both, hit-chroma .085s linear both; }
.game[data-phase="over"] .stage-lettering { font-size: clamp(20px, 4vw, 43px); color: var(--pink); }
:root[data-mode="ura"] .game:is([data-phase="reveal"],[data-phase="over"]) .stage-lettering {
  /* The bottom-aligned portrait sits lower when the stage is tall and narrow. */
  top: clamp(54%, max(calc(93% - 53cqw), calc(var(--portrait-chin-bottom) + 8cqh)), 70%);
  font-size: clamp(19px, min(10cqh, 10.5cqw), 58px);
  line-height: 1.05;
  isolation: isolate;
  letter-spacing: -.05em;
  -webkit-text-stroke: 0;
  text-shadow: none;
  transform: translate(-50%,-50%) rotate(-3deg);
  animation: centered-stamp .22s ease-out both;
}
:root[data-mode="ura"] .game[data-phase="over"] .stage-lettering {
  font-size: clamp(18px, min(9cqh, 7.6cqw), 43px);
}
:root[data-mode="ura"] .game:is([data-phase="reveal"],[data-phase="over"]) .stamp-glyph {
  position: relative;
  display: block;
  white-space: nowrap;
  color: var(--verdict-fill, #ffd9ef);
  -webkit-text-stroke: .16em #22132b;
  paint-order: stroke fill;
  filter: drop-shadow(0 .024em 0 var(--verdict-rim, #ffb3dd)) drop-shadow(0 .07em 0 #190c23);
}
:root[data-mode="ura"] .game:is([data-phase="reveal"],[data-phase="over"]) .stamp-glyph::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(#fffbe9 12%, var(--verdict-fill, #ffd9ef) 48%, var(--verdict-low, #f793c8) 49%, var(--verdict-fill, #ffd9ef) 91%);
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
}
:root[data-mode="ura"] .stage-lettering[data-stamp="bread"] {
  --verdict-fill: #ffe193;
  --verdict-low: #f7aa42;
  --verdict-rim: #ffd67e;
}
:root[data-mode="ura"] .game[data-phase="reveal"] .stage-lettering::before {
  inset: 0 -13%;
  background: linear-gradient(105deg, transparent 2%, var(--stamp-flash) 22%, #fff0d4 51%, var(--stamp-flash) 78%, transparent 98%);
  clip-path: polygon(0 65%, 12% 42%, 8% 28%, 38% 31%, 45% 9%, 57% 22%, 100% 10%, 91% 42%, 100% 54%, 64% 62%, 57% 89%, 46% 74%, 0 92%, 8% 73%);
  opacity: .78;
  transform: none;
}
:root[data-mode="ura"] .game[data-phase="reveal"] .stage-lettering::after { inset: -10% -17%; }
.counts { position: absolute; z-index: 5; inset: auto 12px 10px; display: flex; justify-content: space-between; pointer-events: none; }
.counts span { padding: 3px 8px; color: var(--cream); background: #211429ed; border: 1px solid #aa865f; border-radius: 6px; font-size: 11px; }
.counts span:last-child { border-color: #a97aad; }
.counts b { color: var(--amber); font-variant-numeric: tabular-nums; margin-left: 3px; }
.counts span:last-child b { color: var(--pink); }
.stock { position: absolute; z-index: 3; inset: auto 8% 8%; display: flex; justify-content: space-between; pointer-events: none; }
.stock-lane { display: flex; max-width: 40%; justify-content: end; align-items: end; }
.stock-lane:last-child { flex-direction: row-reverse; }
.stock-item { width: 29px; height: 21px; margin-inline: -6px; display: grid; place-items: center; rotate: -13deg; animation: item-in .25s both; }
.stock-item:nth-child(even) { rotate: 13deg; }
.stock-item img,.stock-item svg { width: 100%; height: 100%; object-fit: contain; min-height: 0; }

.controls { min-width: 0; position: relative; isolation: isolate; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,#32213f,#21162d 75%); box-shadow: inset 0 1px 0 #d1adeb25, 0 5px 0 #0f0a16, 0 16px 36px #0c08135c; }
.console-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 5px; border-bottom: 1px solid #8b6d9862; color: var(--pink); font: 800 10px/1.4 var(--display); letter-spacing: .16em; }
.controls:has(.beats:not([hidden])) .console-head { display: none; }
.meters { display: inline-flex; gap: 3px; height: 11px; align-items: center; }
.meters i { display: block; width: 3px; height: 6px; background: #e1a7e0; border-radius: 99px; opacity: .72; }
.meters i:nth-child(even) { height: 11px; }
.game[data-beat="7"] .meters i, .game[data-beat="8"] .meters i { background: var(--amber); opacity: 1; }
.prompt { display: grid; align-items: center; min-height: 2em; padding: 1px 0 4px; text-align: center; color: var(--cream); font-size: clamp(14px, 2vw, 17px); font-weight: 900; }
.game[data-phase="reveal"] .prompt { color: #ffe29d; }
.game[data-phase="over"] .prompt { color: #ffc3e4; margin-bottom: 7px; }
.beats { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: clamp(3px, .65vw, 7px); list-style: none; padding: 0; margin: 0 0 9px; }
.beats li { display: grid; place-items: center; height: 40px; color: #e1cee5; border: 1px solid #6c547c; border-radius: 7px; background: #171120; font: 850 15px/1 var(--display); }
.beats li:nth-child(5) { margin-left: 2px; }
.beats li:is(.beat-listen,.beat-answer) { align-content: center; gap: 2px; }
.beats li small { font: 850 10px/1.15 var(--display); white-space: nowrap; }
.beats li.beat-listen { color: #b1fae7; background: #163b3a; border-color: #6de5cb; }
.beats li.beat-listen span { font-size: 1.4em; }
.beats li.beat-answer { color: var(--amber); border-color: #b68e58; }
.beats li[data-active] { background: var(--violet); color: var(--ink); border-color: #efe1ff; box-shadow: 0 0 15px #ba83ee7a; }
.beats li.beat-listen[data-active] { background: #80f4d7; color: #103631; border-color: #ddfff5; box-shadow: 0 0 0 2px #80f4d7, 0 0 16px #80f4d799; }
.beats li.beat-answer[data-active] { background: var(--amber); border-color: #fff1bb; box-shadow: 0 0 18px #ffc96e9e; }
.track-picker { min-width: 0; margin: 0 0 9px; padding: 0; border: 0; }
.track-picker legend { padding: 0 0 6px; color: var(--muted); font-size: 11px; }
.tracks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.track { position: relative; display: grid; min-width: 0; }
.track input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.track span { display: flex; flex-direction: column; justify-content: center; min-height: 43px; padding: 5px 8px; background: #1e152a; border: 1px solid #735d87; border-radius: 7px; color: #f7e8fd; line-height: 1.17; font-size: clamp(10px,1.65vw,14px); overflow-wrap: anywhere; }
.track small { display: block; margin-top: 4px; color: #dfc8e9; font: 780 11px/1 var(--display); }
.track input:checked + span { color: #221533; background: #ddc1ff; border-color: #f6dcff; box-shadow: inset 0 -2px 0 #8e66b6; }
.track input:checked + span small { color: #53316e; }
.track input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.start-actions,.answer-actions,.result-actions { display: grid; gap: 10px; }
.title-links { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 14px; }
.title-links .replay { min-height: 34px; padding: 4px 12px; }
.credits-link { color: var(--muted); font-size: 11px; line-height: 1.4; }
.answer-actions,.result-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
.button,.replay { min-height: 54px; border: 1px solid #ffeeaf; border-radius: 9px; color: var(--ink); transition: transform .11s, box-shadow .11s; }
.button { background: linear-gradient(#ffe7a3,#ffca71); box-shadow: 0 4px 0 #a86140,0 6px 10px #08061166; font: 900 clamp(17px,2.5vw,25px)/1.1 var(--display); padding: 8px 9px; white-space: nowrap; }
.button:not(:disabled):hover { filter: brightness(1.06); }
.button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #a86140; }
.button:disabled { opacity: .75; }
.button span[aria-hidden] { font: 900 .72em/1 var(--display); margin-left: 4px; }
.answer { position: relative; display: grid; place-items: center; min-width: 0; font-size: clamp(15px,2.1vw,22px); }
.answer:not(:disabled):active { transform: none; }
.answer.pants { background: linear-gradient(#ffcee6,#ee9ed2); border-color: #ffe2f2; box-shadow: 0 4px 0 #8f4a7a,0 6px 10px #08061166; }
.answer kbd { position: absolute; right: 9px; top: 50%; translate: 0 -50%; min-width: 19px; padding: 2px; color: #45273c; font: 850 11px/1.2 var(--display); border: 1px solid #623c5366; border-radius: 4px; }
.game[data-beat="8"][data-window="open"] .answer { outline: 2px solid #fff6cc; outline-offset: 2px; }
.game[data-picked="bread"] .answer.bread, .game[data-picked="pants"] .answer.pants { outline: 2px solid #fff6cc; outline-offset: 2px; box-shadow: 0 2px 0 #987294; }
.replay { border-color: #9a7fb0; background: #39294d; color: var(--cream); font-size: 14px; }
.replay:hover { background: #4e3969; }
@keyframes rattle { 35% { transform: translate(2px,2px); } 65% { transform: translate(-1px,0); } }
@keyframes pop-character { 40% { transform: translateY(-5px) scale(1.026); } }
@keyframes hit-chroma {
  from { text-shadow: -.075em 0 #78edff, .075em .02em #fa419f, 0 .11em #100915; }
  to { text-shadow: .05em .10em #311544, .075em .14em #100915; }
}
@keyframes stamp { from { opacity: .25; transform: translate(-50%,-50%) rotate(-12deg) scale(1.4); } to { transform: translate(-50%,-50%) rotate(-6deg) scale(1); } }
@keyframes cue-stamp { from { opacity: .65; transform: translate(-50%,-50%) rotate(-10deg) scale(1.19); } to { opacity: 1; transform: translate(-50%,-50%) rotate(-6deg) scale(1); } }
@keyframes hit-stamp {
  from { opacity: .65; transform: translate(-50%,-50%) rotate(-13deg) scale(.78); }
  47% { opacity: 1; transform: translate(-50%,-50%) rotate(-4deg) scale(1.12); }
  to { transform: translate(-50%,-50%) rotate(-6deg) scale(1); }
}
@keyframes centered-stamp {
  from { opacity: .55; transform: translate(-50%,-50%) rotate(-3deg) scale(.85); }
  48% { opacity: 1; transform: translate(-50%,-50%) rotate(-3deg) scale(1.06); }
  to { transform: translate(-50%,-50%) rotate(-3deg) scale(1); }
}
@keyframes speed-lines { from { opacity: 1; transform: skewX(-22deg) scaleX(.88); } to { opacity: .25; transform: skewX(-22deg) scaleX(1.08); } }
@keyframes item-in { from { opacity: 0; transform: translateY(-12px) scale(1.25); } }
@media (max-width: 720px) {
  .game { padding: max(9px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
  .masthead { align-items: end; gap: 4px; padding-bottom: 8px; margin-bottom: 9px; }
  .eyebrow { font-size: 8px; letter-spacing: .15em; }
  h1 { font-size: clamp(24px,8vw,39px); }
  .scores { gap: 4px; }
  .scores p { min-width: 49px; gap: 1px; padding: 4px; border-radius: 6px; }
  .scores span { font-size: 8px; }
  .scores b { font-size: 17px; }
  .stage { border-radius: 12px; }
  .stage-status { top: 10px; left: 11px; }
  .character { width: 96%; height: 90%; left: 2%; }
  .controls { padding: 8px 10px 11px; border-radius: 11px; }
  .console-head { padding-bottom: 5px; font-size: 9px; }
  .prompt { min-height: 2em; }
  .beats { margin-bottom: 8px; }
  .beats li { height: 36px; font-size: 13px; border-radius: 5px; }
  .track-picker { margin-bottom: 9px; }
  .track-picker legend { padding-bottom: 3px; }
  .track span { min-height: 38px; }
  .button,.replay { min-height: 48px; }
  .answer kbd { display: none; }
  .counts { inset: auto 8px 6px; }
  .counts span { font-size: 10px; padding: 2px 5px; }
  .stage-lettering[data-stamp] { font-size: clamp(36px, 13vw, 59px); }
  .stage-lettering[data-stamp="ask"] { font-size: clamp(34px, 11vw, 52px); }
}
.impact-fx { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; --impact: #ffe39e; }
.impact-fx[data-color="pants"] { --impact: #ff9ad7; }
.impact-ring,.impact-spark { position: absolute; top: 70%; left: 50%; background: var(--impact); }
.impact-ring { width: 125px; aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--impact); background: transparent; box-shadow: 0 0 15px var(--impact); animation: impact-ring .29s ease-out both; }
.impact-spark { width: 17px; height: 4px; clip-path: polygon(0 42%,100% 0,88% 100%,0 62%); animation: impact-spark .27s ease-out both; }
@keyframes impact-ring {
  from { opacity: .92; transform: translate(-50%,-50%) scale(.58); }
  to { opacity: 0; transform: translate(-50%,-50%) scale(2.65); }
}
@keyframes impact-spark {
  from { opacity: .98; transform: rotate(var(--rotation)) scale(.45); }
  to { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--rotation)) scale(1.18,.46); }
}
.result-share { margin-top: 12px; padding-top: 10px; border-top: 1px solid #835d8c88; text-align: center; }
.share-main { width: 100%; min-height: 42px; border: 1px solid #cf9cdf; border-radius: 8px; padding: 5px 10px; color: #281735; background: linear-gradient(#ead3ff,#d6adf4); font-size: 14px; font-weight: 900; box-shadow: 0 3px 0 #764e91; }
.share-main:disabled { opacity: .65; }
.share-hint,.share-status { margin-top: 6px; color: #ead2ee; font-size: 11px; line-height: 1.35; }
.share-status:empty { display: none; }
.share-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px 12px; margin-top: 4px; }
.share-links button,.share-links a { display: inline-grid; place-items: center; min-height: 29px; color: #f9d7f2; background: transparent; border: 0; text-decoration: underline; font: 700 11px/1.2 var(--display); }
.share-links button:disabled { opacity: .55; }
.share-dialog { position: fixed; width: min(92vw, 490px); max-height: 94dvh; padding: 10px; border: 1px solid #b58cba; border-radius: 12px; background: #21152d; }
.share-dialog::backdrop { background: #0a070ddc; }
.share-dialog img { display: block; width: 100%; max-height: 80dvh; object-fit: contain; margin-bottom: 8px; }
.share-dialog .replay { width: 100%; min-height: 38px; }
#rank-result, .mg-dialog {
  --mg-paper: #fff1d6; --mg-ink: #31213c; --mg-line: #765477; --mg-muted: #61445f;
  --mg-accent: #65368e; --mg-body: var(--display); --mg-display: var(--display); --mg-numbers: var(--display);
}
#rank-result { margin-top: 9px; }
#rank-result .mg-standing { min-height: 32px; height: auto; padding-block: 4px; }
#rank-result .mg-ranking-link { min-height: 36px; color: var(--cream); }
#rank-result .mg-action-error, #rank-notice { color: #ffd0dc; font-size: 12px; }
#rank-notice { margin-top: 8px; text-align: center; }
:root[data-mode="omote"] #rank-result :is(.mg-ranking-link,.mg-action-error), :root[data-mode="omote"] #rank-notice { color: #603181; }
@media (max-height: 610px) {
  .result-share { margin-top: 8px; padding-top: 7px; }
  .share-hint { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
}