/* Perimeter Patrol — a meadow, wooden fences, sheep and a busy sheepdog. */
.pp-svg { display: block; width: 100%; height: auto; margin-inline: auto; border-radius: 18px; }
.pp-meadow { fill: url(#pp-grass); }
.pp-inside rect { fill: #D4EDA6; }
.pp-pasture .pp-inside rect { fill: #D7F0A8; }
.pp-ingrid line { stroke: rgba(46, 58, 36, .38); stroke-width: 1.6; stroke-dasharray: 5 5; }
.pp-gridlines line { stroke: rgba(46, 58, 36, .14); stroke-width: 1.4; }
.pp-postholes circle { fill: rgba(46, 58, 36, .3); }
.pp-rail { stroke: #7E4F22; stroke-width: 7; stroke-linecap: round; }
.pp-rail2 { stroke: #C8925A; stroke-width: 2.4; stroke-linecap: round; }
.pp-post { fill: #5E3B1A; stroke: #2E1C0B; stroke-width: 1.6; }
.pp-label rect { fill: #fff; stroke: #2E3A24; stroke-width: 2; }
.pp-label text { font: 800 17px var(--f-math); fill: #2E3A24; text-anchor: middle; }
.pp-label.unknown rect { fill: #EFE9FC; stroke: #6A44C9; stroke-width: 2.5; }
.pp-label.unknown text { fill: #4B2FA0; }
.pp-label.hinted rect, .pp-label.solved rect { fill: #FFF3CF; stroke: #B7860B; }
.pp-label { transition: opacity .35s ease; }
.counting .pp-label { opacity: 0; }
.counted.has-labels .pp-n:not(.hint) { opacity: 0; transition: opacity .5s ease; }
.pp-barn .wall { fill: #B4472F; }
.pp-barn .planks line { stroke: #8E3222; stroke-width: 2; }
.pp-barn .trim { fill: #F4E3C1; }
.pp-barn text { font: 800 15px var(--f-ui); letter-spacing: .3em; fill: #F4E3C1; text-anchor: middle; opacity: .85; }

/* the count: lit panels, numbers, sheep, dog */
.pp-lit { stroke: #FFD24A; stroke-width: 10; stroke-linecap: round; opacity: .9; }
.pp-n circle { fill: #2E3A24; stroke: #fff; stroke-width: 2; }
/* circles never exceed NUM_R (13.5), the spacing panelSpots keeps between numbers */
.pp-n text { fill: #fff; font: 800 14px var(--f-math); text-anchor: middle; }
.pp-n { animation: ppPop .32s var(--spring) both; }
.pp-n.hint circle { fill: #6A44C9; }
@keyframes ppPop { from { transform: scale(.2); opacity: 0; } }
/* the number pops in place: its position lives on the parent group, so the animation only scales it */
.pp-n { transform-box: fill-box; transform-origin: center; }
.pp-sh { transform-box: fill-box; transform-origin: 50% 100%; animation: ppDrop .38s var(--spring) both; }
@keyframes ppDrop { from { transform: translateY(-16px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.pp-ghost { opacity: .5; }
.pp-dog .bob { animation: ppBob .2s ease-in-out infinite alternate; }
.pp-dog.sit .bob { animation: none; }
@keyframes ppBob { to { transform: translateY(-3px); } }
.pp-band { fill: rgba(255, 255, 255, .45); }
.pp-cellnum { font: 800 13px var(--f-math); fill: #4B2FA0; text-anchor: middle; }
.pp-part { fill: none; stroke: #6A44C9; stroke-width: 3; stroke-dasharray: 9 6; }
.pp-parttxt { font: 800 15px var(--f-math); fill: #4B2FA0; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.pp-ghostpen rect { fill: rgba(106, 68, 201, .12); }
.pp-ghostpen line { stroke: #6A44C9; stroke-width: 3.5; stroke-dasharray: 8 6; stroke-linecap: round; }
.glow-fence .pp-rail { animation: ppGlow 1.1s ease-in-out 3; }
@keyframes ppGlow { 50% { stroke: #E9A23B; stroke-width: 11; } }
.glow-inside .pp-inside rect { animation: ppFill 1.1s ease-in-out 3; }
@keyframes ppFill { 50% { fill: #FFF3B0; } }
.pp-cursor { fill: none; stroke: #6A44C9; stroke-width: 3.5; stroke-dasharray: 6 4; pointer-events: none; }
[data-motion="reduced"] .pp-n, [data-motion="reduced"] .pp-sh, [data-motion="reduced"] .pp-dog .bob, [data-motion="reduced"] .pp-predict { animation: none; }
@media (prefers-reduced-motion: reduce) { .pp-n, .pp-sh, .pp-dog .bob, .pp-predict, .glow-fence .pp-rail, .glow-inside .pp-inside rect { animation: none; } .glow-fence .pp-rail { stroke: #E9A23B; } .glow-inside .pp-inside rect { fill: #FFF3B0; } }

/* tally chips under the field */
.pp-tally { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pp-chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 14px 5px 8px; border-radius: 999px; background: #F1EEE6; color: #2E3A24; font: 700 .95rem var(--f-ui); }
.pp-chip b { font: 800 1.2rem var(--f-math); }
.pp-chip svg { width: 26px; height: 26px; flex: none; }
.pp-chip.asked { background: #FFF3CF; box-shadow: inset 0 0 0 2px #F2C14E; }

/* measuring rounds */
.pp-measure { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: center; }
/* sized by the screen's height too, so Check sits on screen at the start of a round on laptops */
.pp-pen { max-height: min(58vh, 480px, calc(100vh - 400px)); }
.pp-answer { display: grid; gap: 10px; }
/* wide screens: in book rounds the pen book gets its own column beside the order, so the board is no
   taller than the pasture and Check stays on screen */
@media (min-width: 1000px) {
  .pp-build.is-every { grid-template-columns: minmax(0, 1fr) 230px 220px; grid-template-areas: "field ticket extra" "field tools extra"; grid-template-rows: auto 1fr; gap: 14px 18px; }
  .pp-build.is-every .pp-slot { min-height: 50px; }
}
@media (max-width: 760px) {
  .pp-measure { grid-template-columns: 1fr; gap: 12px; }
  .pp-pen { max-height: 44vh; }
  .pp-answer { max-width: 360px; width: 100%; margin-inline: auto; }
}
/* phones: a smaller pen and a calculator-style pad (four keys across, three rows),
   so the pen, the display and every key sit above the sticky buttons */
@media (max-width: 640px) {
  .pp-measure { gap: 10px; }
  .pp-pen { max-height: 29vh; }
  .pp-measure .pp-tally { margin-top: 6px; }
  .pp-measure .pp-chip { padding: 3px 12px 3px 6px; font-size: .88rem; }
  .pp-measure .pp-chip svg { width: 22px; height: 22px; }
  .pp-answer .np { gap: 8px; width: min(100%, 320px); margin-inline: auto; }
  .pp-answer .np-display { min-height: 48px; font-size: 1.65rem; }
  .pp-answer .np-keys { gap: 5px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "k7 k8 k9 kb" "k4 k5 k6 kb" "k1 k2 k3 k0"; }
  .pp-answer .np-keys > span { display: none; }
  .pp-answer .np-k { min-height: 44px; font-size: 1.25rem; }
  .pp-answer .np-k[data-k="7"] { grid-area: k7; } .pp-answer .np-k[data-k="8"] { grid-area: k8; } .pp-answer .np-k[data-k="9"] { grid-area: k9; }
  .pp-answer .np-k[data-k="4"] { grid-area: k4; } .pp-answer .np-k[data-k="5"] { grid-area: k5; } .pp-answer .np-k[data-k="6"] { grid-area: k6; }
  .pp-answer .np-k[data-k="1"] { grid-area: k1; } .pp-answer .np-k[data-k="2"] { grid-area: k2; } .pp-answer .np-k[data-k="3"] { grid-area: k3; }
  .pp-answer .np-k[data-k="0"] { grid-area: k0; } .pp-answer .np-k[data-k="back"] { grid-area: kb; }
}

/* building rounds */
/* the right column: the order, then the tools (tally, tip, Clear field), then the pen book or the guess pad */
.pp-build { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: "field ticket" "field tools" "field extra"; grid-template-rows: auto auto 1fr; gap: 14px 22px; align-items: start; }
.pp-predict { grid-area: extra; display: grid; gap: 10px; justify-items: center; padding: 12px; border-radius: 14px; background: #F6F1E4; border: 1.5px solid rgba(46, 58, 36, .2); color: #2E3A24; animation: ppFade .3s ease both; }
/* a fade, not a scale: the page is fitted to the pad's real size the moment it appears */
@keyframes ppFade { from { opacity: 0; } }
.pp-predict h2 { display: flex; gap: 8px; align-items: center; margin: 0; font: 800 .78rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; justify-self: start; }
.pp-predict h2 svg { width: 22px; height: 22px; }
.pp-predict .pp-pad { width: 100%; display: grid; justify-items: center; }
.pp-fieldwrap { grid-area: field; min-width: 0; }
/* the pasture lets a vertical swipe scroll the page; painting starts on a sideways move or a short press (see game.js) */
.pp-pasture { touch-action: pan-y; cursor: crosshair; max-width: max(320px * var(--ratio), (100vh - 470px) * var(--ratio)); }
.pp-tools { grid-area: tools; }
.pp-tools .pp-tally { margin: 0; justify-content: flex-start; }
.pp-tools .pp-tally:not([hidden]) + .pp-tip { display: none; }
.pp-pasture:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.pp-tools { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.pp-tip { font-size: .88rem; color: #5E6472; flex: 1 1 180px; }
.pp-tools [hidden] { display: none !important; }
.pp-btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(28, 31, 38, .2); background: #fff; color: #1C1F26; font-weight: 700; box-shadow: 0 2px 0 rgba(28, 31, 38, .14); }
.pp-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* the farmer's order ticket: each line gets a tick or a cross once the sheepdog has counted */
.pp-ticket { grid-area: ticket; position: relative; background: #FFF8E6; border: 2px solid #2E3A24; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 0 #2E3A24; color: #2E3A24; transform: rotate(-1.2deg); }
.pp-ticket::before { content: ''; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #B4472F; border: 2px solid #2E3A24; }
.pp-ticket h2 { margin: 0 0 8px; font: 800 .74rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #9A3A25; }
.pp-ticket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pp-ticket li { display: flex; gap: 10px; align-items: center; font: 700 1rem/1.25 var(--f-ui); border-radius: 10px; }
.pp-ticket li > svg { width: 30px; height: 30px; flex: none; }
.pp-ticket b { font: 800 1.15rem var(--f-math); }
.pp-tl { flex: 1; min-width: 0; }
.pp-tl .short { display: none; }
.pp-mark { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.pp-mark svg { width: 17px; height: 17px; }
.pp-ticket li.ok .pp-mark { background: #1E8A57; color: #fff; }
.pp-ticket li.no .pp-mark { background: #C2402F; color: #fff; }
.pp-ticket li.no .pp-tl { text-decoration: underline wavy #C2402F 1.5px; text-underline-offset: 4px; }

.pp-book { grid-area: extra; background: #F6F1E4; border-radius: 14px; padding: 12px; border: 1.5px dashed rgba(46, 58, 36, .35); color: #2E3A24; }
.pp-book h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font: 800 .78rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.pp-book h2 svg { width: 22px; height: 22px; }
.pp-book ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-slot { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; min-height: 54px; padding: 6px 10px 6px 6px; border-radius: 10px; background: #fff; border: 1.5px solid rgba(46, 58, 36, .16); animation: ppPop .35s var(--spring) both; }
.pp-slot.empty { background: transparent; border-style: dashed; color: #5E6472; font: 800 1.1rem var(--f-math); animation: none; }
.pp-mini { width: 64px; height: 40px; }
.pp-mini rect { fill: #D7F0A8; stroke: #7E4F22; stroke-width: 2.5; }
.pp-slot b { font: 800 1.05rem var(--f-math); }
.pp-slot small { display: block; color: #5E6472; font-size: .85rem; }
.pp-bar { display: block; height: 8px; margin-top: 4px; border-radius: 4px; background: #F2C14E; width: calc(var(--f) * 100%); }
.pp-slot.best { box-shadow: inset 0 0 0 2.5px #E0A82E; background: #FFF8E6; }

@media (max-width: 760px) {
  /* one column: the order, then the tools just above the pasture (Clear field and the count stay clear of the dock), then the pasture */
  .pp-build, .pp-build:not(.is-every), .pp-build.is-predict { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ticket" "tools" "field" "extra"; grid-template-rows: auto; gap: 8px; }
  .pp-tools { flex-wrap: nowrap; gap: 8px; min-height: 44px; }
  .pp-tools .pp-tally { flex-wrap: nowrap; gap: 6px; }
  .pp-tools .pp-chip { padding: 3px 10px 3px 6px; font-size: .86rem; }
  .pp-tools .pp-chip svg { width: 22px; height: 22px; }
  .pp-tools .pp-btn { flex: none; padding: 0 12px; }
  .pp-predict { padding: 10px; }
  .pp-predict .np { gap: 8px; width: min(100%, 320px); }
  .pp-predict .np-display { min-height: 48px; font-size: 1.65rem; }
  .pp-predict .np-keys { gap: 5px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "k7 k8 k9 kb" "k4 k5 k6 kb" "k1 k2 k3 k0"; }
  .pp-predict .np-keys > span { display: none; }
  .pp-predict .np-k { min-height: 44px; font-size: 1.25rem; }
  .pp-predict .np-k[data-k="7"] { grid-area: k7; } .pp-predict .np-k[data-k="8"] { grid-area: k8; } .pp-predict .np-k[data-k="9"] { grid-area: k9; }
  .pp-predict .np-k[data-k="4"] { grid-area: k4; } .pp-predict .np-k[data-k="5"] { grid-area: k5; } .pp-predict .np-k[data-k="6"] { grid-area: k6; }
  .pp-predict .np-k[data-k="1"] { grid-area: k1; } .pp-predict .np-k[data-k="2"] { grid-area: k2; } .pp-predict .np-k[data-k="3"] { grid-area: k3; }
  .pp-predict .np-k[data-k="0"] { grid-area: k0; } .pp-predict .np-k[data-k="back"] { grid-area: kb; }
  .pp-ticket { transform: none; padding: 7px 12px 9px; box-shadow: 0 3px 0 #2E3A24; }
  .pp-ticket::before { display: none; }
  .pp-ticket h2 { margin-bottom: 5px; font-size: .66rem; }
  .pp-ticket ul { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px 10px; }
  /* on a phone the tick or cross sits on the line's icon, like a sticker */
  .pp-ticket li { position: relative; gap: 6px; font-size: .92rem; line-height: 1.15; padding-top: 4px; }
  .pp-ticket li > svg { width: 26px; height: 26px; }
  .pp-ticket b { font-size: 1rem; }
  .pp-tl .long { display: none; }
  .pp-tl .short { display: inline; }
  .pp-mark { position: absolute; left: 14px; top: -3px; width: 19px; height: 19px; border: 2px solid #FFF8E6; }
  .pp-ticket li:not(.ok):not(.no) .pp-mark { display: none; }
  .pp-mark svg { width: 11px; height: 11px; }
  .pp-pasture { max-width: 100%; }
  .pp-tip { font-size: .8rem; }
  .pp-book ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .pp-ticket li { font-size: .86rem; }
  .pp-ticket li > svg { width: 22px; height: 22px; }
  .pp-mark { left: 10px; }
}

/* ---------- farm book: home panel and results ---------- */
.pp-farm h2, .pp-rfarm h2 { display: flex; align-items: center; gap: 8px; }
.pp-farm h2 svg, .pp-rfarm h2 svg { width: 26px; height: 26px; flex: none; }
.pp-farm h3 { margin: 16px 0 8px; font: 800 .76rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pp-pens { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pp-penitem { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: .8rem; line-height: 1.25; color: var(--ink-2); }
.pp-penitem b { color: var(--ink); font-family: var(--f-math); }
.pp-thumb { width: 52px; height: 39px; flex: none; display: block; }
.pp-thumb .g { fill: #A9D27B; }
.pp-thumb .i { fill: #E4F5C4; }
.pp-thumb .f { fill: none; stroke: #7E4F22; stroke-width: 2.2; stroke-linecap: round; }
.pp-thumb .b { fill: #B4472F; }
.pp-shapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-shapes li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1.5px dashed var(--line); color: var(--ink-3); font-size: .84rem; font-weight: 600; }
.pp-shapes li.got { border-style: solid; border-color: color-mix(in srgb, var(--good) 55%, transparent); background: var(--good-bg); color: var(--ink); }
.pp-shapes li svg { width: 14px; height: 14px; color: var(--good); }
.pp-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-skill { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; font-size: .9rem; color: var(--ink); }
.pp-skname { font-weight: 600; }
.pp-dots { display: inline-flex; gap: 3px; }
.d { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--good); vertical-align: -1px; }
.d.full { background: var(--good); }
.d.half { background: linear-gradient(90deg, var(--good) 50%, transparent 50%); }
.d.none { border-color: var(--ink-3); }
.pp-st { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.pp-st svg { width: 13px; height: 13px; color: #E8A317; }
/* mixed toward the ink colour so the small bold text clears 4.5:1 on its pale green in Day and Night */
.pp-skill.mastered .pp-st { background: var(--good-bg); color: color-mix(in srgb, var(--good) 68%, var(--ink)); }
.pp-legend { font-size: .78rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pp-legend .d { margin-left: 4px; }
.pp-parent { font-size: .92rem; }
.pp-rfarm { width: min(100%, 600px); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); color: var(--ink); }
.pp-rfarm h2 { font-size: 1.25rem; }
.pp-rfarm p { margin: 8px 0 0; color: var(--ink-2); }
.pp-rfarm .pp-skills { margin-top: 12px; }
.pp-rfarm .pp-parent { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 420px) { .pp-skill { grid-template-columns: minmax(0, 1fr) auto; } .pp-dots { grid-column: 1; } }

/* a hint's ghost pen steps aside while the sheepdog counts the child's own pen, then comes back */
.pp-ghostpen { transition: opacity .25s ease; }
.pp-pasture.counting .pp-ghostpen { opacity: 0; }

/* narrow phones: the two-column pen book gets smaller pictures so names and counts fit */
.pp-slot, .pp-slot > span { min-width: 0; }
@media (max-width: 420px) {
  .pp-book { padding: 10px 8px; }
  .pp-slot { grid-template-columns: 44px minmax(0, 1fr); gap: 6px; padding: 5px 6px 5px 4px; min-height: 48px; }
  .pp-slot .pp-mini { width: 44px; height: 28px; }
  .pp-slot b { font-size: .95rem; }
  .pp-slot small { font-size: .78rem; line-height: 1.2; }
}

/* results: the grown-ups summary as a short left-aligned list under the farm book */
.pp-gu { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-gu h3 { margin: 0 0 6px; font: 800 .76rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pp-gu ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--ink-2); font-size: .93rem; }
.pp-gu b { color: var(--ink); }
.pp-gu p { margin: 8px 0 0; font-size: .85rem; }

/* narrow phones (320–380 px): every pixel above the sticky dock counts. A slimmer instruction box
   (smaller face and speaker, tighter padding), a one-line tip, a slimmer order ticket and slightly
   shorter pad keys, so the pen and the pad, or the pasture, start above the dock */
@media (max-width: 380px) {
  .ar-board .ar-coach { gap: 6px; padding: 5px 6px 5px 5px; min-height: 0; border-radius: 14px; }
  .ar-board .ar-coach-mark { width: 30px; height: 30px; margin: 0; align-self: flex-start; }
  .ar-board .ar-speak { width: 44px; height: 44px; }
  .pp-tip { font-size: .74rem; line-height: 1.25; }
  .pp-tip .long { display: none; }
  .pp-ticket { padding: 6px 10px 7px; }
  /* the instruction already names the farmer: the ticket's heading stays for screen readers only */
  .pp-ticket h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pp-build, .pp-build:not(.is-every), .pp-build.is-predict { gap: 6px; }
  .pp-answer .np-k, .pp-predict .np-k { min-height: 44px; }
  .pp-answer .np-display, .pp-predict .np-display { min-height: 44px; }
  .pp-pen { max-height: 26vh; }
}

/* narrow phones: the tools row must fit one line even while the tally shows */
@media (max-width: 420px) {
  .pp-tools .pp-long { display: none; }
  .pp-tools .pp-chip { padding: 2px 9px 2px 5px; font-size: .84rem; gap: 4px; }
  .pp-tools .pp-chip b { font-size: 1.05rem; }
  .pp-tools .pp-chip svg { width: 20px; height: 20px; }
  .pp-tools .pp-btn { padding: 0 14px; }
}
@media (max-width: 340px) {
  /* the smallest phones: icon and number only on screen; the words stay for screen readers */
  .pp-tools .pp-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Skip the count: at the pasture's top corner while Biscuit counts */
:has(> .pp-skip) { position: relative; }
.pp-skip { position: absolute; right: 8px; top: 8px; z-index: 3; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(28, 31, 38, .25); background: rgba(255, 255, 255, .92); color: #1C1F26; font-weight: 800; font-size: .92rem; box-shadow: 0 2px 8px rgba(28, 31, 38, .15); }