/* panels.css: the KCC pop-up panels (panels.js). One cream noticeboard card, two jobs:
     ABOUT  (about.html)   who made this, what it is, the fan-made fine print
     RULES  (rules.html)   the contest rules: SHORT VERSION or LAWYER VERSION (the official text, paged two rules at a time)
   Each panel lives in its own page as plain HTML (so /rules and /about work, and the official text reads without JS);
   on the parade (index.html) panels.js lifts the same card out of that page into a modal over the world.
   Cut from the cardboard kit in style.css (cb-*) and the enrollment card (enroll.css): cream board, corrugated rim,
   brass brads, the black KCC ribbon strip for a header. Light, as everywhere: the low sun behind-right, so shadows
   fall down-left. Sizes are in em off --u, so the card scales with the window and fits 1280x720 without scrolling. */

/* ---------------- the card ---------------- */
.pn-card{--u:clamp(13px,min(1.95vh,1.12vw),18px);font-size:var(--u);
  position:relative;box-sizing:border-box;width:min(62em,calc(100vw - 32px));display:flex;flex-direction:column;gap:.75em;
  padding:.9em 1.25em 1em;color:#22160b;text-align:left;rotate:-.3deg;
  background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,radial-gradient(130% 90% at 30% 10%,#f8ebcf,#ecd3a8) padding-box,var(--cb-flutes) border-box;
  border:6px solid transparent;border-radius:6px;box-shadow:-16px 22px 26px rgba(4,8,4,.55),-3px 4px 0 rgba(30,20,10,.35),inset -2px 0 0 rgba(255,214,150,.5)}
.pn-card *{box-sizing:border-box}
.pn-brad{position:absolute;top:.55em;z-index:3;width:1.15em;height:1.15em;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,#fff2c0 0 8%,#d9a441 30%,#6b4a16 62%,#3a2408 72%,transparent 76%);filter:drop-shadow(-1.5px 2px 1px rgba(40,16,4,.5))}
.pn-brad.l{left:.55em}.pn-brad.r{right:.55em}
.pn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pn-card :focus-visible{outline:2.5px solid #1d140b;outline-offset:2px}
.pn-card .cb-btn:focus-visible{outline:2.5px solid #1d140b;outline-offset:-5px}
.pn-card [hidden]{display:none!important}

/* the header: a strip cut from the KICK COMMUNITY COLLEGE ribbon's black board (cream pinstripe, kraft rim) */
.pn-head{display:flex;align-items:center;gap:.5em .9em;margin:.15em .9em 0;padding:.5em .7em .45em .9em;border-radius:2px;rotate:-.4deg;min-width:0;
  background:var(--cb-fiber),linear-gradient(170deg,rgba(255,255,255,.07),transparent 45%,rgba(0,0,0,.25)),#0f1115;
  box-shadow:inset 0 0 0 3px #0f1115,inset 0 0 0 4.5px #e9dfc4,inset 0 0 0 6px rgba(15,17,21,.6),0 0 0 2px #d8b47c,0 0 0 4px #b98a52,-1px 1px 0 4.5px #6b4a22,-5px 8px 7px 2px rgba(35,14,3,.4)}
.pn-crest{flex:none;width:3.1em;height:3.1em;margin:-.55em 0 -.55em -.25em;object-fit:contain;filter:drop-shadow(-2px 3px 2px rgba(0,0,0,.6));rotate:-4deg}
/* on its own page the crest is the way back to the parade (panels.js unwraps it in the modal) */
.pn-home{flex:none;display:block;line-height:0;margin:-.55em 0 -.55em -.25em;border-radius:50%;transition:rotate .2s,translate .2s}
.pn-home .pn-crest{margin:0}
.pn-home:hover{rotate:-6deg;translate:0 -1px}
.pn-home:focus-visible{outline:2px solid var(--cb-kick)!important;outline-offset:3px}
.pn-title{margin:0;flex:none;font:400 1.5em/1 'KCC Cardboard','Homecoming Parade',Rockwell,Georgia,serif;letter-spacing:.06em;color:#f4eee0;padding-top:.06em;white-space:nowrap;
  text-shadow:0 -.5px 0 #fff,-1px 1px 0 #9a917c,-2px 2px 0 #5d5546,-2px 3px 0 #2c2820,-3px 5px 5px rgba(0,0,0,.55)}
.pn-card h1.pn-title{font-size:1.5em;white-space:nowrap}   /* beats style.css's h1 / .cb-portrait h1 on the parade */
.pn-t-k{color:var(--cb-kick);text-shadow:-1px 1px 0 #1d6b06,-2px 2px 0 #0b3302,-2px 3px 4px rgba(0,0,0,.6)}
.pn-form{flex:1;min-width:0;font:700 .78em/1 'Barlow Condensed',sans-serif;letter-spacing:.16em;color:#d8c39a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-chip{flex:none;font:700 .8em/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#2a1806;padding:.4em .6em .34em;border-radius:2px;rotate:3deg;white-space:nowrap;
  background:var(--cb-fiber),var(--cb-light),var(--cb-mustard);box-shadow:0 2px 0 var(--cb-mustard-dk)}
/* CLOSE: a little cream die-cut board on the end of the strip (modal only; panels.js adds it) */
/* CLOSE: a big round patch of brick-red felt sewn over the end of the strip, gold satin rim, a cream running stitch,
   and a fat X of two crossed cream felt strips (modal only; panels.js adds it). 46-54px, easy to hit. */
.pn-x{flex:none;position:relative;width:clamp(48px,3.5em,56px);height:clamp(48px,3.5em,56px);margin:-.75em -.45em -.75em .35em;padding:0;cursor:pointer;
  border:3px solid transparent;border-radius:50%;rotate:-7deg;
  background:var(--dp-felt,none) padding-box,radial-gradient(circle at 64% 32%,#de4a2e,#b02a15 52%,#7a1a0b) padding-box,
    repeating-linear-gradient(58deg,#fff0b8 0 .7px,#d9a441 .7px 1.7px,#6e4a14 1.7px 2.4px) border-box;
  box-shadow:-4px 6px 7px rgba(26,10,2,.5),-1px 2px 1px rgba(26,10,2,.3),inset 3px -4px 6px rgba(0,0,0,.32),inset -1.5px 1px 0 rgba(255,222,160,.35);
  transition:scale .16s cubic-bezier(.3,1.5,.5,1),rotate .2s}
.pn-x::before,.pn-x::after{content:'';position:absolute;left:50%;top:50%;width:66%;height:21%;border-radius:2px;translate:-50% -50%;
  background:var(--dp-felt,none),linear-gradient(100deg,rgba(0,0,0,.12),transparent 50%,rgba(255,255,255,.2)),#f3e6c4;
  outline:1px dashed rgba(122,40,16,.55);outline-offset:-3px;box-shadow:-1.5px 2px 0 rgba(40,8,2,.45)}
.pn-x::before{rotate:45deg}.pn-x::after{rotate:-45deg}
.pn-x-st{position:absolute;inset:3px;border:1.4px dashed rgba(246,226,190,.85);border-radius:50%;pointer-events:none;
  filter:drop-shadow(-.5px .8px 0 rgba(0,0,0,.45))}
.pn-x:hover{scale:1.07;rotate:0deg}
.pn-x:active{scale:.93}
.pn-card .pn-x:focus-visible{outline:3px solid #f6e8c8;outline-offset:2px}

/* the no-purchase lead: a dashed brick-red box, on every view */
.pn-lead{margin:0 .2em;font:700 .92em/1.35 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.05em;color:#8f2614;text-transform:uppercase;
  border:2px dashed rgba(143,38,20,.45);border-radius:3px;padding:.5em .85em .45em}

/* ---------------- views (rules) ---------------- */
.pn-js .pn-view:not(.on){display:none}
html:not(.pn-js) .pn-view[data-view=choice],html:not(.pn-js) .pn-back,html:not(.pn-js) .pn-tabs,html:not(.pn-js) .pn-pgs,html:not(.pn-js) .pn-gotolaw{display:none}
html:not(.pn-js) .pn-view+.pn-view{margin-top:1em}
.pn-view{display:flex;flex-direction:column;gap:.7em;min-width:0}
.pn-view.pn-in,.pn-sheet.pn-in{animation:pn-step .35s cubic-bezier(.2,.8,.3,1) both}
@keyframes pn-step{0%{opacity:0;transform:translateX(16px)}100%{opacity:1;transform:none}}
.pn-kicker{align-self:flex-start;margin:.2em 0 0 .3em;font:.8em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.12em;--rot:-2deg}
.pn-q{margin:.05em 0 0 .1em;font:400 2.35em/1.02 'Homecoming Reference','Alfa Slab One',Georgia,serif;letter-spacing:.02em}
.pn-q .cb-l-face{--cb-lface:#2b7a3f}
.pn-q .cb-l-face .cb-alt{--cb-lface:var(--cb-red)}
.pn-hint{margin:-.2em 0 .1em .2em;font:italic 500 1.05em/1.3 'Zilla Slab',Georgia,serif;color:#4a3420;mix-blend-mode:multiply}

/* the choice: two boards in a tray, SHORT (cream) and LAWYER (brass) */
.pn-tray{display:grid;gap:.9em;padding:.9em .9em 1.05em;border-radius:8px;background:var(--cb-fiber),rgba(120,70,25,.13);
  box-shadow:inset -3px 4px 6px rgba(60,28,6,.38),inset 2px -2px 0 rgba(255,244,220,.55),0 0 0 1px rgba(110,64,24,.22),0 1px 0 1px rgba(255,244,220,.45)}
.pn-picks{grid-template-columns:1fr 1fr}
.pn-pick{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.45em;min-width:0;text-align:left;padding:1.05em 1.3em 1.1em;cursor:pointer}
.pn-pick:first-child{--rot:-.6deg}.pn-pick:last-child{--rot:.5deg}
.pn-pick-t{font:1.85em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.05em;padding-top:.06em;white-space:nowrap}
.pn-pick-s{font:italic 500 1.12em/1.25 'Zilla Slab',Georgia,serif;color:#3a2614;text-shadow:none}
.pn-pick-m{margin-top:.25em;font:700 .8em/1 'Barlow Condensed',sans-serif;letter-spacing:.12em;color:#4a3420;padding:.38em .55em .32em;border-radius:2px;background:rgba(60,30,6,.1);box-shadow:inset 0 1px 2px rgba(60,30,6,.28)}
.pn-pick.cb-brass .pn-pick-m{background:rgba(60,30,6,.13)}
/* the key to press, printed small in the corner (same as enrollment) */
.pn-n{position:absolute;top:.5em;right:.6em;min-width:1.4em;padding:.2em .25em .14em;border-radius:3px;text-align:center;
  font:700 .74em/1 'Barlow Condensed',sans-serif;color:rgba(70,40,15,.7);box-shadow:inset 0 0 0 1px rgba(110,70,30,.45)}
/* a little stamp on the lawyer board */
.pn-pick-stamp{position:absolute;right:1.1em;bottom:.9em;font:.78em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;color:#8f2614;
  border:.16em solid currentColor;border-radius:.3em;padding:.35em .5em .25em;mix-blend-mode:multiply;-webkit-mask:var(--cb-wear-lt);mask:var(--cb-wear-lt);rotate:-9deg;pointer-events:none}

/* the short version: the key facts, two columns of printed lines */
.pn-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6em;margin:0;padding:.2em .5em .1em}
.pn-fact{display:grid;grid-template-columns:6.4em minmax(0,1fr);align-items:baseline;gap:.7em;padding:.52em .1em .48em;border-bottom:1.5px dashed rgba(110,70,30,.3)}
.pn-fact dt{font:.86em/1.1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;color:#b02a15}
.pn-fact dd{margin:0;font:500 1.08em/1.3 'Zilla Slab',Georgia,serif;color:#2a1d10}
.pn-fact dd b{font-weight:700;color:#1b130b;white-space:nowrap}
.pn-note{margin:.1em .5em 0;font:italic 500 .98em/1.3 'Zilla Slab',Georgia,serif;color:#5a4128}

/* the lawyer version: page tabs in a tray, the sheet, prev / next */
.pn-tabs{display:flex;flex-wrap:wrap;gap:.6em .55em;padding:.6em .7em .8em;margin:0}
.pn-tab{display:inline-flex;align-items:baseline;gap:.45em;font:.86em/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.08em;padding:.6em .85em .5em;--e:3px;white-space:nowrap}
.pn-tab i{font:700 .95em/1 'Barlow Condensed',sans-serif;font-style:normal;letter-spacing:.04em;opacity:.75}
.pn-tab[aria-selected="true"]{--rot:-1.2deg;--cb-face:var(--cb-laurel);--cb-edge-c:var(--cb-laurel-dk);--cb-text:#f4eee0;color:#f4eee0;opacity:1;filter:none;text-shadow:-1px 1px 0 rgba(0,0,0,.35)}
.pn-tab[aria-selected="true"] i{opacity:1;color:var(--cb-kick)}
.pn-sheet{position:relative;padding:.1em .4em 0}
.rp-rules{list-style:none;margin:0;padding:0}
.rp-rules li{position:relative;padding:0 0 .85em 2.5em;font:500 1.08em/1.5 'Zilla Slab',Georgia,serif;color:#2c2014}
.rp-rules li:last-child{padding-bottom:0}
.rp-rules li::before{content:attr(data-n);position:absolute;left:0;top:.1em;width:1.75em;height:1.75em;display:grid;place-items:center;
  font:700 .88em/1 'Barlow Condensed',sans-serif;color:#f4eee0;background:var(--cb-laurel);border-radius:2px;box-shadow:-2px 2px 0 var(--cb-laurel-dk)}
.rp-rules b{color:#1b130b}
.rp-rules a{color:var(--cb-laurel)}
.pn-foot.pn-pager{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6em 1em}
.pn-pager .pn-pgs{justify-self:center}
.pn-pager .pn-back{justify-self:start}
.pn-pgs{display:flex;align-items:center;gap:.8em}
.pn-pg{font:.9em/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.08em;padding:.6em 1em .5em;--e:3px;white-space:nowrap}
.pn-pg:disabled{opacity:.42;filter:saturate(.6);cursor:default}
.pn-pgn{font:700 .92em/1 'Barlow Condensed',sans-serif;letter-spacing:.16em;color:#5a3d22}

/* the foot of every view: back to the choice + the brands label */
.pn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6em 1em;margin-top:.1em;padding:0 .3em}
.pn-back{border:0;background:none;padding:.15em 0;cursor:pointer;font:italic 500 .98em/1.2 'Zilla Slab',Georgia,serif;color:#6b4a2a;text-decoration:underline dashed;text-underline-offset:2px}
.pn-back:hover{color:#b02a15}
.pn-gotolaw{font:.95em/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.08em;padding:.62em 1.1em .52em;--e:4px;--rot:-.8deg;white-space:nowrap}
.pn-brands{margin-left:auto;white-space:nowrap;text-decoration:none;font:700 .9em/1.1 'Barlow Condensed',sans-serif;letter-spacing:.05em;--rot:-1.2deg;transition:translate .14s}
.pn-brands span{font:.82em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;margin-right:.25em}
.pn-brands b{font-weight:700;color:#14243f}
.pn-brands:hover{translate:0 -2px}

/* ---------------- ABOUT ---------------- */
.pn-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4em 1.4em;padding:.15em .4em 0}
.pn-mind{margin:0;font:400 2.2em/1.05 'Homecoming Reference','Alfa Slab One',Georgia,serif;letter-spacing:.02em}
.pn-mind .cb-l-face{--cb-lface:#2b7a3f}
.pn-mind .cb-l-face .cb-alt{--cb-lface:var(--cb-red)}
.pn-by{grid-column:1;margin:0;font:500 1.12em/1.4 'Zilla Slab',Georgia,serif;color:#2a1d10;max-width:40em}
.pn-me{font-weight:700;color:#1f5a2f;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.pn-me:hover{color:#b02a15}
/* the AI study group: four little oatmeal felt patches, each with its tool's own logo (LobeHub, unaltered; img/ai/CREDITS.md) */
.pn-crew{grid-column:1;list-style:none;margin:-.15em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55em .65em}
.pn-ai{position:relative;display:inline-flex;align-items:center;gap:.45em;padding:.36em .8em .32em .5em;border:2px solid transparent;border-radius:6px;text-decoration:none;
  font:700 1em/1 'Barlow Condensed',sans-serif;letter-spacing:.05em;color:#22160b;
  background:var(--dp-felt,none) padding-box,linear-gradient(100deg,rgba(0,0,0,.1),transparent 40%,rgba(255,240,210,.35)) padding-box,linear-gradient(#efe2c4,#efe2c4) padding-box,
    repeating-linear-gradient(58deg,#fff0b8 0 .7px,#d9a441 .7px 1.7px,#6e4a14 1.7px 2.4px) border-box;
  box-shadow:-2.5px 3.5px 3px rgba(30,12,2,.32),inset 1.5px -2px 3px rgba(0,0,0,.12);transition:translate .14s}
.pn-ai::after{content:'';position:absolute;inset:2px;border:1.2px dashed rgba(110,70,30,.5);border-radius:4px;pointer-events:none}
.pn-ai img{display:block;width:1.3em;height:1.3em;flex:none}
.pn-crew li:nth-child(odd) .pn-ai{rotate:-1.2deg}.pn-crew li:nth-child(even) .pn-ai{rotate:1deg}
.pn-ai:hover{translate:0 -2px}
.pn-ai:focus-visible{outline:2px solid #1d140b;outline-offset:2px}
.pn-by b{font-weight:700}
.pn-ranks{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.6em .9em .55em;border-radius:3px;rotate:2deg;
  background:var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-mustard);box-shadow:0 3px 0 var(--cb-mustard-dk),-5px 7px 7px rgba(45,18,4,.32),inset -1.5px 0 0 rgba(255,230,160,.5)}
.pn-ranks-k{font:700 .7em/1 'Barlow Condensed',sans-serif;letter-spacing:.2em;color:#5a3d12}
.pn-ranks b{font:400 1.75em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.04em;color:#1f5a2f}
.pn-ranks i{font:italic 500 .86em/1.15 'Zilla Slab',Georgia,serif;color:#3a2410;text-align:center}
.pn-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9em}
.pn-col{position:relative;padding:.85em .95em .9em;border-radius:4px;background:var(--cb-fiber),rgba(255,248,232,.55);
  box-shadow:0 0 0 1px rgba(110,64,24,.2),-3px 4px 0 rgba(110,64,24,.12),inset 0 0 0 1px rgba(255,255,255,.35)}
.pn-col:nth-child(1){rotate:-.5deg}.pn-col:nth-child(2){rotate:.4deg}.pn-col:nth-child(3){rotate:-.3deg}
.pn-col h3{margin:0 0 .45em;font:.86em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.12em;color:#b02a15}
.pn-col p{margin:0 0 .5em;font:500 1em/1.38 'Zilla Slab',Georgia,serif;color:#2a1d10}
.pn-col p:last-child{margin-bottom:0}
.pn-col b{font-weight:700;color:#1b130b}
.pn-fine{margin:0 .4em;font:500 .86em/1.4 'Zilla Slab',Georgia,serif;color:#5a4128;border-top:1.5px dashed rgba(110,70,30,.3);padding-top:.6em}
.pn-links{display:flex;flex-wrap:wrap;align-items:center;gap:.7em .8em;padding:0 .3em}
.pn-link{text-decoration:none;font:.82em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;transition:translate .14s;cursor:pointer;border:0}
.pn-link:nth-child(2n){--rot:1.5deg}.pn-link:nth-child(2n+1){--rot:-1.5deg}
.pn-link:hover{translate:0 -2px}
.pn-links .pn-brands{margin-left:auto}

/* ---------------- the modal (on the parade) ---------------- */
.pn-scrim{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;overflow:auto;
  background:radial-gradient(120% 90% at 50% 42%,rgba(14,9,5,.6),rgba(8,5,2,.88))}
.pn-scrim[hidden]{display:none}
.pn-scrim .pn-card{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin;scrollbar-color:#a77a45 transparent}
.pn-scrim .pn-card.pn-pin{animation:pn-pin .6s cubic-bezier(.25,1.35,.45,1) both}
.pn-scrim.pn-out{animation:pn-fade .28s ease-in both}
.pn-scrim.pn-out .pn-card{animation:pn-unpin .3s cubic-bezier(.5,0,.75,.3) both}
@keyframes pn-pin{0%{opacity:0;transform:translateY(-40px) rotate(-3deg)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pn-unpin{0%{transform:none}100%{opacity:0;transform:translateY(34px) rotate(2deg)}}
@keyframes pn-fade{0%{opacity:1}100%{opacity:0}}
.pn-scrim.pn-in{animation:pn-fadein .25s ease-out both}
@keyframes pn-fadein{0%{opacity:0}100%{opacity:1}}

/* ---------------- the standalone pages (rules.html, about.html) ---------------- */
html.pn-page,html.pn-page body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
.pn-wrap{--u:clamp(13px,min(1.95vh,1.12vw),18px);position:relative;z-index:1;min-height:100vh;min-height:100dvh;max-width:1180px;margin:0 auto;padding:14px 24px 14px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.pn-main{display:grid;place-items:center;width:100%}
/* the felt footer strip (board-page.css) runs the width of the card under it */
.pn-wrap .bp-foot{font-size:var(--u);width:min(62em,calc(100vw - 32px));margin:20px 0 0}
@media (min-width:1700px) and (min-height:960px){.pn-wrap{zoom:1.16;min-height:calc(100vh / 1.16)}}

/* ---------------- short laptop screens (1280x720 and the like): a tighter page header, a tighter card ---------------- */
@media (max-height:800px) and (min-width:861px){
  .pn-wrap{padding-top:8px;padding-bottom:8px}
  .pn-wrap .bp-foot{margin-top:14px}
  .pn-card{gap:.62em;padding-top:.75em;padding-bottom:.85em}
  .pn-cols{gap:.75em}
  .pn-col{padding:.7em .85em .75em}
}

/* ---------------- narrower ---------------- */
@media (max-width:860px){
  .pn-card{--u:14px;padding:.8em .85em .9em;rotate:0deg}
  .pn-cols{grid-template-columns:1fr}
  .pn-hero{grid-template-columns:1fr}
  .pn-ranks{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.25em .6em;rotate:-1deg}
  .pn-ranks b{font-size:1.3em}
  .pn-picks{grid-template-columns:1fr}
  .pn-facts{grid-template-columns:1fr}
  .pn-wrap .bp-foot{width:calc(100vw - 32px)}
  .pn-foot.pn-pager{display:flex}
  .pn-pgs{order:-1;flex-basis:100%;justify-content:space-between}
}
@media (max-width:560px){
  .pn-card{--u:13.5px;border-width:5px;width:calc(100vw - 20px)}
  .pn-scrim{padding:10px}
  .pn-scrim .pn-card{max-height:calc(100dvh - 20px)}
  .pn-head{margin:.1em .2em 0;padding:.5em .55em .45em .65em;gap:.4em .6em;flex-wrap:wrap}
  .pn-title,.pn-card h1.pn-title{font-size:1.3em}
  .pn-form{order:3;flex-basis:100%;font-size:.7em}
  .pn-chip{margin-left:auto}
  .pn-crest{width:2.5em;height:2.5em}
  .pn-x{width:48px;height:48px;margin:-.5em -.3em -.5em auto}
  .pn-q{font-size:1.9em}
  .pn-mind{font-size:1.75em}
  .pn-pick-t{font-size:1.55em;white-space:normal}
  .pn-fact{grid-template-columns:5.6em minmax(0,1fr)}
  .rp-rules li{padding-left:2.2em;font-size:1.05em}
  .pn-tab{font-size:.8em;padding:.55em .7em .45em}
  .pn-pg{padding:.6em .75em .5em}
  .pn-brands{margin-left:0}
  .pn-wrap{padding:10px 10px 12px;justify-content:flex-start}
  .pn-wrap .bp-foot{width:calc(100vw - 20px);margin-top:16px}
  .pn-home{margin:-.4em 0 -.4em -.15em}
}

@media (prefers-reduced-motion:reduce){
  .pn-view.pn-in,.pn-sheet.pn-in,.pn-scrim .pn-card.pn-pin,.pn-scrim.pn-in{animation:pn-fadein .2s ease-out both}
  .pn-scrim.pn-out,.pn-scrim.pn-out .pn-card{animation:pn-fade .2s ease-in both}
  .pn-brands,.pn-link{transition:none}
}