/* The preview owns every effect. Nothing outside this section shakes. */
#playground {
  --pg-coral: #f87171;
  --pg-ink: #10101c;
  --pg-muted: #aaaabd;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 76px;
  scroll-margin-top: 90px;
  color: #eee;
}
#playground [hidden] { display: none !important; }
#playground *, #playground *::before, #playground *::after { box-sizing: border-box; }
#playground button, #playground select { font: inherit; }
#playground button { cursor: pointer; }
#playground button, #playground a, #playground select { -webkit-tap-highlight-color: transparent; }
#playground :is(button, a, select, canvas):focus-visible { outline: 3px solid #fbbf24; outline-offset: 4px; }
#playground .pg-intro { max-width: 680px; margin: 0 auto 28px; text-align: center; }
#playground .pg-eyebrow { margin-bottom: 10px; color: var(--pg-coral); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
#playground h2 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.1; }
#playground .pg-intro > p:last-child { color: #b4b4c6; font-size: 15px; line-height: 1.6; }
#playground .pg-panel { padding: 22px; border: 1px solid #343448; border-radius: 20px; background: #191927; box-shadow: 0 22px 70px #0004; }
#playground .pg-settings, #playground .pg-options, #playground .pg-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#playground .pg-settings { justify-content: space-between; gap: 18px; margin-bottom: 18px; }
#playground .pg-modes { display: inline-flex; max-width: 100%; padding: 4px; border: 1px solid #3e3e52; border-radius: 11px; background: #10101b; }
#playground .pg-mode { min-height: 44px; padding: 8px 15px; border: 0; border-radius: 7px; background: transparent; color: #b8b8cb; font-size: 13px; font-weight: 700; }
#playground .pg-mode[aria-pressed="true"] { background: #f87171; color: #19121a; }
#playground .pg-mode span { margin-left: 4px; font-size: 10px; font-weight: 800; opacity: .8; }
#playground .pg-pack-label { display: flex; align-items: center; gap: 8px; color: var(--pg-muted); font-size: 12px; }
#playground .pg-pack-label select { min-height: 44px; max-width: 130px; padding: 8px 24px 8px 9px; border: 1px solid #48485f; border-radius: 8px; background: #171724; color: #eee; font-size: 13px; color-scheme: dark; }
#playground .pg-option { min-height: 44px; padding: 8px 12px; border: 1px solid #48485f; border-radius: 8px; background: #171724; color: #c7c7d7; font-size: 12px; font-weight: 600; }
#playground .pg-option[aria-pressed="true"] { border-color: #b55b67; background: #f8717114; color: #fda4a4; }
#playground [aria-disabled="true"] { opacity: .5; cursor: default; }
#playground .pg-browser { overflow: hidden; border: 1px solid #484154; border-radius: 12px; background: #10101b; }
#playground .pg-browser-chrome { height: 38px; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: #252535; border-bottom: 1px solid #393949; }
#playground .pg-dots { display: flex; gap: 5px; }
#playground .pg-dots i { width: 7px; height: 7px; border-radius: 50%; background: #747488; }
#playground .pg-dots i:first-child { background: #f87171; }
#playground .pg-dots i:nth-child(2) { background: #d6b264; }
#playground .pg-dots i:nth-child(3) { background: #79aa91; }
#playground .pg-address { flex: 1; color: #b2b2c5; font-size: 10px; text-align: center; letter-spacing: .3px; }
#playground .pg-browser-hand { font-size: 18px; }
#playground .pg-game-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 13px; padding: 16px 21px; border-bottom: 1px solid #383142; background: #181625; }
#playground .pg-game-bar > p { margin: 0; color: #c7c7d7; font-size: 13px; line-height: 1.5; }
#playground .pg-metrics { display: flex; flex-shrink: 0; align-items: center; gap: 20px; color: #aaa4ba; font-size: 10px; font-variant-numeric: tabular-nums; }
#playground .pg-metrics strong { margin-right: 3px; color: #fafafa; font-size: 21px; font-weight: 800; }
#playground #pg-clock { color: #ffcf89; }
#playground .pg-browser:not(.pg-mode-ninja) .pg-score-metric { display: none; }
#playground .pg-stage { position: relative; isolation: isolate; overflow: hidden; contain: layout paint; background: #15111e; }
#playground .pg-surface { position: relative; }
#playground .pg-ninja { position: relative; height: 480px; overflow: hidden; background: #15111e url('ninja-background.svg') center bottom / cover no-repeat; }
#playground #pg-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
#playground #pg-canvas:focus-visible { outline-offset: -5px; }
#playground .pg-ninja-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 25px; background: linear-gradient(0deg, #110d1bb0, #110d1b18 70%); text-align: center; }
#playground .pg-cover-brand { position: relative; display: flex; gap: 11px; align-items: center; margin: 0 0 3px; padding-right: 13px; font-size: clamp(34px, 5.4vw, 68px); font-weight: 900; font-style: italic; letter-spacing: -3px; line-height: 1.1; text-shadow: 0 4px 0 #160d20, 0 0 28px #f871712e; transform: rotate(-4deg); }
#playground .pg-cover-brand > span:first-child { color: #ffaaa0; }
#playground .pg-cover-brand > span:nth-child(2) { color: #fff0d9; }
#playground .pg-cover-brand b { position: absolute; right: -35px; top: -29px; color: #fff; font-size: 42px; font-style: normal; transform: rotate(20deg); }
#playground .pg-ninja-cover h3 { margin: 0; color: #ffeadb; font-size: 23px; font-weight: 800; letter-spacing: -.6px; }
#playground .pg-ninja-cover > p { max-width: 400px; margin: 0; color: #d3c2cc; font-size: 13px; line-height: 1.8; }
#playground .pg-play-button { display: inline-flex; align-items: center; justify-content: center; gap: 23px; min-height: 55px; margin-top: 7px; padding: 14px 28px; border: 1px solid #ffb2a7; border-radius: 10px; background: #f87171; color: #231321; box-shadow: 0 5px 0 #7e3a4e, 0 13px 35px #0004; font-size: 17px; font-weight: 900; }
#playground .pg-play-button:hover { background: #ff9a8d; }
#playground .pg-play-button:active { transform: translateY(2px); box-shadow: 0 3px 0 #7e3a4e; }
#playground .pg-ninja-cover > .pg-cover-tip { margin-top: 7px; color: #bfa9ba; font-size: 11px; }
#playground .pg-actions { min-height: 65px; display: flex; align-items: center; padding: 11px 20px; border-top: 1px solid #373043; background: #191623; }
#playground .pg-action { min-height: 44px; padding: 10px 15px; border: 1px solid #c36470; border-radius: 8px; background: #f8717124; color: #fecaca; font-size: 12px; font-weight: 700; }
#playground .pg-action span { margin-left: 5px; }
#playground .pg-action:hover:not([aria-disabled="true"]) { background: #f8717138; }
#playground .pg-action-secondary { border-color: #505067; background: transparent; color: #c5c5d5; }
#playground .pg-key-hint { color: #aaa0b8; font-size: 11px; line-height: 1.5; }
#playground .pg-status { min-height: 22px; margin: 15px 0 5px; color: #fca5a5; font-size: 13px; line-height: 1.65; text-align: center; }
#playground .pg-access-note { max-width: 710px; margin: 0 auto; color: #9999ae; font-size: 11px; line-height: 1.7; text-align: center; }
#playground .pg-conversion { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 22px; padding-top: 22px; border-top: 1px solid #373748; }
#playground .pg-conversion h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.5px; }
#playground .pg-conversion p { max-width: 630px; margin: 0; color: #aaaabd; font-size: 12px; line-height: 1.8; }
#playground .pg-conversion p a { color: #fca5a5; text-underline-offset: 3px; }
#playground .pg-store-cta { display: inline-flex; justify-content: center; align-items: center; gap: 14px; flex-shrink: 0; min-height: 49px; padding: 13px 21px; border-radius: 10px; background: #f87171; color: #20131c; text-decoration: none; font-size: 14px; font-weight: 800; box-shadow: 0 4px 20px #f8717126; }
#playground .pg-store-cta:hover { background: #ff9a8d; }
#playground .pg-footnote { margin: 14px 0 0; color: #9993a7; font-size: 11px; line-height: 1.7; }
#playground .pg-more-games { margin: 14px 0 0; font-size: 12px; }
#playground .pg-more-games a { color: #fca5a5; text-underline-offset: 4px; }
#playground .pg-noscript { margin-top: 14px; color: #c6c6d6; font-size: 13px; line-height: 1.6; }

/* A very small, very pointless website for the normal extension preview. */
#playground .pg-normal { background: #f5edde; color: #3d3340; }
#playground .pg-site-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 25px; border-bottom: 1px solid #d9cdbb; }
#playground .pg-site-logo { display: flex; align-items: center; gap: 10px; }
#playground .pg-site-logo > b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #df766a; color: #fff4de; font-size: 29px; font-weight: 900; }
#playground .pg-site-logo > span { font-size: 19px; font-weight: 800; letter-spacing: -.6px; }
#playground .pg-site-logo small { display: block; margin-top: 4px; color: #86736b; font-size: 9px; font-weight: 400; letter-spacing: 0; }
#playground .pg-site-header nav { display: flex; gap: 20px; }
#playground .pg-target { font: inherit; }
#playground .pg-site-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: #8f394c; text-align: left; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
#playground .pg-site-link:hover { color: #c24257; }
#playground .pg-site-link:focus-visible { outline-color: #b92f4e; }
#playground .pg-target-tag { font-size: 12px; text-decoration: none; }
#playground .pg-site-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 35px; padding: 29px 27px; }
#playground .pg-site-kicker { margin: 0 0 13px; color: #a67a71; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
#playground .pg-site-story h3 { max-width: 600px; margin: 0 0 14px; color: #3d3137; font: 700 clamp(21px, 2.6vw, 33px)/1.2 Georgia, serif; letter-spacing: -.5px; }
#playground .pg-site-story > p:not(.pg-site-kicker) { margin: 0 0 9px; color: #87736d; font-size: 12px; line-height: 1.8; }
#playground .pg-story-link { font-size: 13px; }
#playground .pg-site-subscribe { display: flex; flex-direction: column; align-items: flex-start; margin-top: 21px; padding-top: 16px; border-top: 1px dashed #d6c5b5; }
#playground .pg-site-subscribe > span { color: #8a766a; font-size: 10px; }
#playground .pg-site-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border: 1px dashed #bba891; border-radius: 6px; background: #e9dcba; text-align: center; }
#playground .pg-ad-label { color: #8a7962; font-size: 8px; font-weight: 800; letter-spacing: 1.6px; }
#playground .pg-ad-emoji { display: block; margin: 13px 0 9px; font-size: 48px; }
#playground .pg-site-ad h4 { margin: 0 0 8px; color: #5c4b40; font-size: 15px; font-weight: 800; }
#playground .pg-site-ad p { margin: 0 0 12px; color: #8a7962; font-size: 11px; }
#playground .pg-site-ad button { text-align: center; font-size: 10px; }
#playground .pg-site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 25px; padding: 7px 0; border-top: 1px solid #d9cdbb; color: #9c887a; font-size: 10px; }
#playground .pg-site-footer button { font-size: 10px; }
#playground .pg-stage-note { margin: 0; padding: 10px 20px 15px; color: #a08a7d; font-size: 9px; text-align: center; }

#playground .pg-effects { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
#playground .pg-hand, #playground .pg-burst, #playground .pg-combo-pop { position: absolute; left: var(--pg-x); top: var(--pg-y); pointer-events: none; }
#playground .pg-hand { font-size: 48px; line-height: 1; transform: translate(-50%, -50%); animation: pg-hand-pop .34s ease-out both; }
#playground .pg-hand.pg-mega-hand { font-size: 84px; }
#playground .pg-burst { width: 34px; height: 34px; border: 2px solid #fca5a5; border-radius: 50%; animation: pg-burst-out .35s ease-out both; }
#playground .pg-combo-pop { min-width: 110px; color: #a2254d; text-align: center; font-size: 18px; font-weight: 900; font-style: italic; text-shadow: 0 1px 0 #fff8; animation: pg-combo-up .6s ease-out both; }
#playground .pg-mode-ninja .pg-combo-pop { color: #ffcf89; text-shadow: 0 2px 4px #000; }
#playground .pg-hit { animation: pg-target-hit .24s ease-out; }
#playground .pg-shaking { animation: pg-box-shake .26s ease-out; }
#playground .pg-shaking-mega { animation: pg-box-mega .4s ease-out; }
#playground.pg-reduced .pg-hand, #playground.pg-reduced .pg-combo-pop { animation: none; transform: translate(-50%, -50%); }
#playground.pg-reduced .pg-burst { display: none; }
#playground.pg-reduced .pg-surface, #playground.pg-reduced .pg-target { animation: none !important; }
@keyframes pg-hand-pop { 0% { transform: translate(-50%, -50%) rotate(-20deg) scale(1.5); opacity: 1; } 100% { transform: translate(-50%, -45%) rotate(7deg) scale(.65); opacity: 0; } }
@keyframes pg-burst-out { from { transform: translate(-50%, -50%) scale(.4); opacity: .9; } to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }
@keyframes pg-combo-up { 0% { transform: translate(-50%, -80%) scale(.8); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1.1); opacity: 0; } }
@keyframes pg-target-hit { 30% { background: #f871713d; } }
@keyframes pg-box-shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-4px, -2px); } 40% { transform: translate(4px, 2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, -1px); } }
@keyframes pg-box-mega { 0%, 100% { transform: translate(0); } 15% { transform: translate(-7px, -4px) rotate(-.4deg); } 35% { transform: translate(7px, 3px) rotate(.4deg); } 55% { transform: translate(-4px, 2px); } 80% { transform: translate(2px, -1px); } }
@media (max-width: 800px) {
  #playground .pg-settings { justify-content: center; }
  #playground .pg-options { justify-content: center; }
  #playground .pg-game-bar { gap: 10px; }
  #playground .pg-site-body { gap: 22px; grid-template-columns: minmax(0, 1fr) 195px; }
  #playground .pg-conversion { align-items: flex-start; }
}
@media (max-width: 540px) {
  #playground { padding: 32px 16px 54px; }
  #playground .pg-panel { padding: 12px; border-radius: 15px; }
  #playground .pg-options { gap: 7px; }
  #playground .pg-pack-label { gap: 0; }
  #playground .pg-pack-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #playground .pg-pack-label select { max-width: 100px; font-size: 11px; padding-left: 6px; padding-right: 18px; }
  #playground .pg-option { padding: 8px; font-size: 11px; }
  #playground .pg-mode { padding: 8px 12px; font-size: 12px; }
  #playground .pg-mode span { font-size: 9px; }
  #playground .pg-browser-chrome { gap: 8px; padding: 0 10px; }
  #playground .pg-address { font-size: 8px; }
  #playground .pg-game-bar { padding: 12px; gap: 9px; }
  #playground .pg-game-bar > p { font-size: 11px; }
  #playground .pg-metrics { width: 100%; justify-content: space-between; gap: 8px; font-size: 9px; }
  #playground .pg-metrics strong { font-size: 18px; }
  #playground .pg-ninja { height: 420px; }
  #playground .pg-cover-brand { gap: 8px; padding: 0; margin-bottom: 8px; font-size: 36px; letter-spacing: -2px; }
  #playground .pg-cover-brand b { right: -10px; top: -30px; font-size: 30px; }
  #playground .pg-ninja-cover { padding: 20px; gap: 14px; }
  #playground .pg-ninja-cover h3 { font-size: 22px; }
  #playground .pg-ninja-cover > p { font-size: 12px; }
  #playground .pg-play-button { padding: 14px 20px; font-size: 15px; }
  #playground .pg-actions { padding: 10px 12px; }
  #playground .pg-key-hint { max-width: 175px; font-size: 10px; }
  #playground .pg-conversion { flex-direction: column; gap: 15px; }
  #playground .pg-store-cta { width: 100%; }
  #playground .pg-status { font-size: 12px; }
  #playground .pg-footnote, #playground .pg-access-note { font-size: 10px; }
  #playground .pg-site-header { padding: 17px 16px; }
  #playground .pg-site-header nav { width: 100%; justify-content: space-between; gap: 8px; }
  #playground .pg-site-body { grid-template-columns: 1fr; gap: 20px; padding: 22px 17px; }
  #playground .pg-site-story h3 { font-size: 25px; }
  #playground .pg-site-ad { padding: 15px; }
  #playground .pg-ad-emoji { margin: 5px 0; font-size: 34px; }
  #playground .pg-site-footer { margin: 0 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #playground *, #playground *::before, #playground *::after { animation: none !important; transition: none !important; }
  #playground .pg-burst { display: none; }
  #playground .pg-hand, #playground .pg-combo-pop { transform: translate(-50%, -50%); }
}
#playground .pg-result-landing{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:5px;padding:13px 23px;border-radius:9px;background:#f87171;color:#21131d;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 4px 0 #7e3a4e}
#playground .pg-round-complete .pg-play-button{min-height:42px;margin-top:1px;padding:9px 18px;border:1px solid #9c7d91;background:#221a2b;color:#eadce4;font-size:12px;box-shadow:none}
#playground .pg-round-complete .pg-ninja-cover{gap:10px}
#playground .pg-round-complete .pg-cover-brand{margin:0;font-size:32px}
#playground .pg-round-complete .pg-cover-tip{display:none}
#playground .pg-result-landing:hover{background:#ff9a8d}