/* Pokéverse v2, "Route 1" (2026-11-12). David: "give him the best v2 inspired by ken sugimori, and pokemon art itself,
   revamp lazy fonts, lazy graphics on bg", then "make sure it looks like a real pokemon game" and "the binder needs to
   fit, dont just slap it on there, everything unified".

   The whole site is one game screen. The ground is a route drawn in the GBA-era games' language (v2-frame-01/route_map.py,
   our own tiles). The binder is a game object on it: its pages are game windows, its pockets are storage-box slots, its
   rings, tabs and red board are pixel art (v2-frame-01/pixelkit.py). Every word is set in one pixel face the way the
   games set text: dark grey with a pale drop, in windows with a dark rim and a pale inner line; menus mark the choice
   with ▶. Real card photos stay photos, framed by the slots. No game tiles, no logo, no Pokémon drawn.

   Pixel art is scaled by whole numbers (--px: 3 css px per art pixel on a laptop spread, 2 on phones). */
@font-face{font-family:"Pixelify";src:url(/fonts/pixelify.ttf) format("truetype");font-weight:400 700;font-display:swap}
:root{
  --route:#76cda6;--txt:#38384a;--txt-soft:#68708a;--drop:#cfd3c8;--win:#fbfaf3;--rim:#38384a;--inner:#a9bdd6;
  --pix:"Pixelify",ui-monospace,monospace;
  --px:calc(3*var(--u));
  --type-body:var(--pix);--type-marker:var(--pix);--type-pencil:var(--pix);
  --hits:#ffcf4a;--dex:#f79400;--chart:#8ca5f7;--buy:#84e7b5;--pfp:#9bbc0f;
}
@media (max-aspect-ratio:23/20),(max-height:520px){ :root{--px:calc(2*var(--u))} }

/* ---- the window: every panel on the site is one ---- */
.v2win,.hero-copy,.hero .links,.hero .strip .wrap,.page,.tok,.stat,.poster,.note,.link-chip,.turn-btn,.tape>span,.tape>button,
.hero .btn,.hero .mark,.ca-pill,.buy-link,.address-card,.gate-dialog,.lift .index,.lift-close,.foot .wrap{
  border:calc(5*var(--px)) solid transparent;border-image:url(/img/v2/window9.png) 5 fill / calc(5*var(--px)) stretch;
  background:none;box-shadow:none;border-radius:0;image-rendering:pixelated;color:var(--txt);font-family:var(--pix)}
.hero-copy,.hero .links,.hero .strip .wrap,.hero .btn,.hero .mark,.ca-pill,.gate-dialog,.foot .wrap{--px:3px}
img,iframe,svg,canvas{image-rendering:auto}

/* ---- ground: the route, pixel-sharp, under everything ---- */
html,body{background:var(--route)}
/* the pixel face joins f+i into one glyph that reads as "A" ("Arst", "afAliated", "Ancial" in the footer): no ligatures */
html{font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0}
.hero{background:var(--route)}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:url(/img/v2/route-desktop.png) center top/1440px auto repeat-y;image-rendering:pixelated}
.hero-grid::after,.hero .stage::after,.cover::after,.grain{display:none}
.cover{background:var(--route) url(/img/v2/route-desktop.png) center -1100px/1440px auto repeat-y;image-rendering:pixelated}
.foot{background:var(--route) url(/img/v2/route-desktop.png) center -2400px/1440px auto repeat-y;image-rendering:pixelated}
@media (max-width:640px){
  .hero::before,.cover,.foot{background-image:url(/img/v2/route-phone.png);background-size:416px auto}
  .hero-copy,.hero .links,.hero .strip .wrap,.hero .btn,.hero .mark,.ca-pill,.gate-dialog,.foot .wrap{--px:2px}
}

/* ---- type, everywhere: the game's grey on white with a pale drop ---- */
.hero,.binder,.foot,.gate,dialog.lift{font-family:var(--pix)}
h1,h2,h3,b,strong,.stat b,.tok h3,.sticker,.tab,.dymo{font-stretch:normal!important}

/* ---- the nav: the start menu ---- */
.hero .nav .wrap{height:auto;padding-top:18px;padding-bottom:6px;align-items:flex-start}
.hero .brand{gap:12px;align-items:center}
.hero .brand .pokeball{display:none}
.hero .brand::before{content:"";width:40px;height:48px;background:url(/img/v2/binder.png) center/100% 100%;image-rendering:pixelated;flex:none}
.hero .mark{font-size:22px;font-weight:700;padding:2px 10px;transform:none;clip-path:none;filter:none;color:var(--txt)}
.hero .links{gap:0;padding:2px 6px;flex-direction:row;align-items:center;margin-left:auto;font-weight:700;letter-spacing:.04em;font-size:17px}
.hero .links a{color:var(--txt);padding:4px 12px 4px 26px;position:relative}
.hero .links a::before{content:"▶";position:absolute;left:9px;font-size:12px;top:50%;transform:translateY(-50%);opacity:0}
.hero .links a:hover::before{opacity:1}
.hero .links a:hover{color:var(--txt)}
/* the address pill is a window too (hero.css sets its own border and font at higher weight, so restate them here) */
.hero .ca-pill{height:auto;padding:4px 12px;font-family:var(--pix);font-size:14px;letter-spacing:.06em;color:var(--txt);text-shadow:none;align-self:flex-start;
  border:15px solid transparent;border-image:url(/img/v2/window9.png) 5 fill / 15px stretch;border-radius:0;box-shadow:none;image-rendering:pixelated}
.hero .ca-pill,.hero .ca-pill:hover{background:none}
.hero .ca-pill.done{color:#2f8f4f}

/* ---- the hero: a title window and the open binder lying on the route ---- */
@media (min-width:901px){ .hero .hero-grid{padding-top:24px} }
.hero-copy{padding:26px 30px 30px;max-width:640px}
.hero .eyebrow{background:none;border:0;box-shadow:none;transform:none;padding:0;font-size:16px;font-weight:600;letter-spacing:.08em;color:var(--txt-soft)}
.hero .eyebrow .dot{display:none}
.hero h1{font-weight:700;font-size:92px;line-height:.95;letter-spacing:.01em;margin-top:12px;transform:none;-webkit-text-stroke:0;color:var(--txt);text-shadow:5px 5px 0 var(--drop)}
.hero h1 em{color:var(--txt)}
.hero .fact{font-size:20px;line-height:1.5;color:var(--txt);margin-top:16px}
.hero .fact b{color:#c8323f;font-weight:700}
.hero .fact::after{content:"▼";display:inline-block;margin-left:8px;color:#c8323f;font-size:14px;animation:v2blink 1s steps(2) infinite}
@keyframes v2blink{50%{opacity:0}}
.hero .cta{gap:12px;margin-top:20px}
.hero .btn{height:auto;padding:8px 18px 8px 34px;font-weight:700;font-size:20px;letter-spacing:.03em;color:var(--txt);position:relative;transform:none;transition:none}
.hero .btn::before{content:"▶";position:absolute;left:12px;top:50%;transform:translateY(-55%);font-size:13px;opacity:0}
.hero .btn.primary::before,.hero .btn:hover::before{opacity:1}
.hero .btn:hover,.hero .btn:active{transform:none;box-shadow:none;background:none}
.hero .btn.primary{color:#c8323f}
/* the open binder: the red board, the page as a window of slots, upright like a sprite */
.tome.in-hero{transform:none;aspect-ratio:auto;height:auto;width:min(100%,460px);margin-top:40px}
.tome.in-hero:hover{transform:none}
.tome.in-hero .tome-lid{display:none}
.tome.in-hero .tome-inside{position:relative;inset:auto;border:calc(8*var(--px)) solid transparent;border-image:url(/img/v2/board9.png) 8 fill / calc(8*var(--px)) stretch;
  background:none;box-shadow:none;border-radius:0;padding:4px;image-rendering:pixelated;--px:3px}
.tome.in-hero .tome-page{height:auto;gap:6px;grid-template-rows:none;aspect-ratio:auto}
.tome.in-hero .pocket{aspect-ratio:186/256}
/* the row: one window of numbers */
.hero .strip{background:none;padding:12px 0 20px}
.hero .strip::before{display:none}
.hero .strip .wrap{padding:8px 18px;max-width:calc(1440px - 2*var(--h-pad))}
.hero .strip .lead{font-family:var(--pix);font-weight:700;background:none;clip-path:none;transform:none;color:#c8323f;padding:0;font-size:18px}
.hero .stat-chip{font-stretch:normal;color:var(--txt-soft);font-size:14px}
.hero .stat-chip b{font-family:var(--pix);background:none;color:var(--txt);box-shadow:none;transform:none;padding:0;font-size:19px}
.hero .stat-chip b.ink-up{background:none;color:#2f8f4f}.hero .stat-chip b.ink-down{background:none;color:#c8323f}

/* ---- the binder on the route: its red board, the pages as windows, the rings, the tabs ---- */
.binder::before{content:"";position:absolute;left:calc(14*var(--u));top:calc(4*var(--u));width:calc(1350*var(--u));height:calc(892*var(--u));
  border:calc(8*var(--px)) solid transparent;border-image:url(/img/v2/board9.png) 8 fill / calc(8*var(--px)) stretch;image-rendering:pixelated;z-index:0}
.binder::after{content:"";position:absolute;left:calc(26*var(--u));top:calc(888*var(--u));width:calc(1340*var(--u));height:calc(12*var(--u));background:rgba(40,70,60,.28);z-index:-1}
.slot{z-index:1}
.page{padding:calc(56*var(--u)) calc(12*var(--u)) calc(8*var(--u));overflow:visible}
.rings{background:repeating-linear-gradient(180deg,#38384a 0 var(--px),#52566c var(--px) calc(2*var(--px)));left:calc(648*var(--u));border-left:var(--px) solid #24242e;border-right:var(--px) solid #24242e;image-rendering:pixelated}
.ring{background:url(/img/v2/ring.png) center/100% 100%;image-rendering:pixelated;box-shadow:none;border-radius:0;height:calc(10*var(--px));width:calc(34*var(--px));left:calc(-17*var(--px) + 45*var(--u))}
.tabs{gap:calc(2*var(--px))}
.tab{border:calc(4*var(--px)) solid transparent;border-left:0;border-image:url(/img/v2/tab9.png) 4 4 4 0 / calc(4*var(--px)) calc(4*var(--px)) calc(4*var(--px)) 0 stretch;
  background-clip:padding-box;border-radius:0;box-shadow:none;image-rendering:pixelated;font-family:var(--pix);font-weight:700;letter-spacing:.08em;color:var(--txt)}
.tab[data-section=front]{background-color:var(--win)}
.tab[data-section=hits]{background-color:var(--hits)}
.tab[data-section=pairs]{background-color:var(--dex)}
.tab[data-section=chart]{background-color:var(--chart)}
.tab[data-section=buy]{background-color:var(--buy)}
.tab[data-section=pfp]{background-color:var(--pfp)}
.tab[aria-current=page]{box-shadow:none}
/* the rim is drawn on three sides only, so the label is set back by the same width to sit centred */
.tab{padding-left:calc(4*var(--px))}
/* "POKÉVERSE" (Victor, 2026-11-13) runs longer than the old labels: the side tabs grow so it keeps a margin */
@media (min-aspect-ratio:231/200) and (min-height:521px){ .tab:not([data-section=front]){height:calc(132*var(--u))} }
/* page titles: the window's name plate */
.tape{transform:none!important;filter:none;left:calc(10*var(--u));top:calc(8*var(--u))}
.tape>span,.tape>button{--px:calc(2*var(--u));padding:calc(2*var(--u)) calc(10*var(--u));font-size:calc(24*var(--u));font-weight:700;letter-spacing:.03em;clip-path:none;color:var(--txt)}
.page-sub{color:var(--txt-soft);font-family:var(--pix);font-weight:600}
.turners{color:var(--txt);font-family:var(--pix)}
.turn-btn{--px:calc(2*var(--u));width:auto;height:auto;padding:0 calc(6*var(--u));color:var(--txt);font-family:var(--pix);font-size:calc(18*var(--u))}
/* sleeves: storage-box slots; the card photo sits square in it */
.pocket{border:calc(3*var(--px)) solid transparent;border-image:url(/img/v2/slot9.png) 3 fill / calc(3*var(--px)) stretch;background:none;box-shadow:none;border-radius:0;image-rendering:pixelated}
.pocket::before,.pocket::after{display:none}
.card{border-radius:0;box-shadow:0 0 0 var(--px) var(--rim)}
.card:hover,.card:focus-visible{box-shadow:0 0 0 var(--px) var(--rim),calc(2*var(--px)) calc(2*var(--px)) 0 rgba(30,40,40,.35)}
/* the price: the game's money window */
.sticker{--px:calc(1.4*var(--c));padding:calc(2*var(--c)) calc(5*var(--c));right:calc(2*var(--c));bottom:calc(3*var(--c));transform:none;font-family:var(--pix);font-weight:700;font-size:calc(19*var(--c));color:var(--txt)}
.sticker.top{color:#c8323f;font-size:calc(23*var(--c))}
.sticker.long{font-size:calc(16*var(--c))}
.sticker.top.long{font-size:calc(20*var(--c))}
.when{font-family:var(--pix);border-radius:0;background:var(--rim)}
/* a coin's card: a PokéDex entry window */
.tok{--px:calc(1.6*var(--c));border-radius:0;padding:calc(4*var(--c))}
.tok.coin{border-image-source:url(/img/v2/window9.png);background:none}
.tok .art{border-radius:0;box-shadow:0 0 0 var(--px) var(--rim)}
/* the pixel face runs wider than the old condensed one: names a size down so "$Pokémon" fits a phone pocket whole */
.tok h3{font-family:var(--pix);font-weight:700;color:var(--txt);font-size:calc(18*var(--c));letter-spacing:0}
.tok .chg{font-size:calc(12*var(--c))}
.tok small,.tok dl{font-family:var(--pix);color:var(--txt-soft)}
.tok dd{color:var(--txt)}
.tok .dex-no{border-radius:0;background:var(--rim);font-family:var(--pix);font-weight:700}
button.tok:hover,button.tok:focus-visible{transform:none;box-shadow:none}
.tok.coin .chg.ink-up{color:#2f8f4f}
/* empty pockets: an entry not yet seen */
.open{transform:none;font-family:var(--pix);color:var(--txt-soft);font-size:calc(15*var(--c))}
.open b{font-weight:700;color:var(--txt);font-size:calc(14*var(--c))}
/* the note: a dialog window */
.note{--px:calc(1.6*var(--c));transform:none;background-image:none;font-family:var(--pix);color:var(--txt);border-radius:0}
.note::after{content:"▼";display:block;text-align:right;color:#c8323f;animation:v2blink 1s steps(2) infinite}
.ruled{background-image:none!important}
.copy{color:var(--txt);font-family:var(--pix)}
.dymo{border-radius:0;background:var(--rim);font-family:var(--pix)}
/* chart and stats */
.poster{--px:calc(2*var(--u));padding:calc(4*var(--u))}
.poster h2{font-family:var(--pix);font-weight:700;color:var(--txt)}
.poster .art{border-radius:0;box-shadow:0 0 0 var(--px) var(--rim)}
.stat{--px:calc(2*var(--u))}
.stat span{font-family:var(--pix);color:var(--txt-soft)}
.stat b{font-family:var(--pix);font-weight:700;color:var(--txt)}
.link-chip{--px:calc(2*var(--u));padding:calc(2*var(--u)) calc(8*var(--u));font-family:var(--pix);color:var(--txt)}
.big-pocket,.frame-pocket{border-radius:0}
.big-pocket::after{display:none}
.buy-link{--px:calc(2*var(--u));min-height:calc(132*var(--u));padding:calc(10*var(--u)) calc(12*var(--u))}
.buy-grid{gap:calc(8*var(--u));grid-template-columns:repeat(2,minmax(0,1fr))}
/* a window's rim is drawn inside its box, so the address card and tiles never outgrow the page */
.address-card,.buy-link{box-sizing:border-box;min-width:0;width:auto}
.buy-link b{font-family:var(--pix);color:var(--txt)}
.buy-link.main{border-image-source:url(/img/v2/window9.png)}
.buy-link.main b{color:#c8323f}

/* the swap: a big slot on the left page, its note in the window's grey */
.swap-pocket{border:calc(3*var(--px)) solid transparent;border-image:url(/img/v2/slot9.png) 3 fill / calc(3*var(--px)) stretch;background:none;box-shadow:none;border-radius:0;image-rendering:pixelated}
/* Jupiter's form takes its colours as RGB triples. Some of its text is fixed white, so it can't sit on a light window: it
   reads as a screen set into the slot, in the window ink's navy with the Hits tab's yellow on the main button. */
.swap-target{background:rgb(30,34,50);
  --jupiter-plugin-background:30,34,50;--jupiter-plugin-module:46,52,74;--jupiter-plugin-interactive:66,74,104;
  --jupiter-plugin-primary:255,207,74;--jupiter-plugin-primary-text:251,250,243}
.swap-note,.buy-steps p{font-family:var(--pix);font-weight:600;color:var(--txt-soft)}

/* ---- the way in: the closed binder lying on the route, and the game's own question ---- */
.gate{background:var(--route)}
.gate::before{width:100%;height:100%;aspect-ratio:auto;left:0;top:0;transform:none;background:url(/img/v2/route-desktop.png) center -400px/1440px auto repeat-y;image-rendering:pixelated}
.gate::after{display:none}
.gate .tome{transform:none;aspect-ratio:40/48;width:min(46vw,calc(min(56svh,560px)*.833))}
.gate .tome:hover{transform:translateY(-6px)}
.gate .lid-front{background:url(/img/v2/binder.png) center/100% 100%;border:0;border-radius:0;image-rendering:pixelated}
.gate .lid-front::before,.gate .lid-front::after,.gate .tome-zip,.gate .tome-gloss,.gate .tome-ball,.gate .tome-tag{display:none}
.gate .lid-back{border:0;border-radius:0;background:#a0282c}
.gate .tome-inside{border:calc(6*var(--px)) solid transparent;border-image:url(/img/v2/board9.png) 8 fill / calc(6*var(--px)) stretch;background:none;box-shadow:none;border-radius:0;padding:6% 6%;image-rendering:pixelated;--px:3px}
.gate .tome-page i{border:6px solid transparent;border-image:url(/img/v2/slot9.png) 3 fill / 6px stretch;background:none;box-shadow:none;border-radius:0;image-rendering:pixelated}
.gate .tome-hint{display:none}
.gate-dialog{position:absolute;left:50%;bottom:max(24px,4svh);transform:translateX(-50%);width:min(760px,calc(100vw - 32px));padding:14px 22px 16px;font-size:24px;line-height:1.45;color:var(--txt);z-index:1}
.gate-dialog b{color:#c8323f}
.gate-dialog .choice{display:block;margin-top:4px;color:var(--txt)}
.gate-dialog .choice::before{content:"▶ "}
.gate.is-ready .gate-dialog .choice::after{content:"▼";margin-left:10px;color:#c8323f;animation:v2blink 1s steps(2) infinite}
.gate.is-opening .gate-dialog{opacity:0;transition:opacity .2s}
.gate-load{border-radius:0;border-width:3px;box-shadow:3px 3px 0 var(--rim)}
.gate-skip{border:calc(5*3px) solid transparent;border-image:url(/img/v2/window9.png) 5 fill / 15px stretch;background:none;box-shadow:none;border-radius:0;image-rendering:pixelated;
  font-family:var(--pix);height:auto;padding:0 6px;font-size:16px;color:var(--txt)}
@media (max-width:640px){
  .gate-dialog{font-size:18px;padding:10px 14px 12px}
  .gate .tome{width:min(70vw,calc(min(52svh,520px)*.833))}
}

/* ---- the pulled-out card ---- */
dialog.lift::backdrop{background:rgba(40,60,52,.72)}
.lift .index{--px:3px}
.lift .index h2,.lift .index .price{font-family:var(--pix);font-weight:700;color:var(--txt)}
.lift .index .price{background:none;color:#c8323f}
.lift .index .link-chip{background:none;color:var(--txt)}
.lift-photo{border-radius:0;box-shadow:0 0 0 3px var(--rim),9px 9px 0 rgba(20,30,30,.4)}
.lift-close{--px:2px;border-radius:0;width:auto;height:auto;padding:0 8px;font-family:var(--pix);color:var(--txt)}

/* ---- the footer: one more window on the route ---- */
.foot{padding:30px 0 40px}
.foot .wrap{padding:18px 26px;max-width:min(1328px,calc(100vw - 32px))}
.foot .mark{font-family:var(--pix);font-weight:700;background:none;clip-path:none;transform:none;color:var(--txt);padding:0}
.foot nav{font-family:var(--pix)}
.foot nav a{color:var(--txt)}
.foot nav a.x{border-radius:0;border-width:3px;box-shadow:3px 3px 0 var(--rim)}
.foot small{color:var(--txt-soft);font-family:var(--pix)}
/* one page at a time: the board wraps the stacked pages instead of a laptop spread */
@media (max-aspect-ratio:23/20),(max-height:520px){
  .binder{padding:calc(8*var(--px)) 0 calc(4*var(--px))}
  .binder::before{left:0;top:0;width:100%;height:100%;box-sizing:border-box;border-width:calc(6*var(--px));border-image-width:calc(6*var(--px))}
  .binder::after{display:none}
  .slot{margin:calc(8*var(--u)) calc(14*var(--u)) 0}
  .tape>span,.tape>button{font-size:calc(17*var(--u))}
  .buy-link b{font-size:calc(17*var(--u))}
  .buy-link span{font-size:calc(11.5*var(--u))}
  .tab{padding-left:0;border:calc(3*var(--px)) solid transparent;border-bottom:0;border-image:url(/img/v2/window9.png) 5 5 0 5 / calc(3*var(--px)) calc(3*var(--px)) 0 calc(3*var(--px)) stretch;background-clip:padding-box}
}
@media (max-width:640px){
  .hero .links{display:none}
  .hero h1{font-size:56px;text-shadow:3px 3px 0 var(--drop)}
  .hero .fact{font-size:16px}
  .hero .btn{font-size:17px}
  .hero-copy{padding:16px 16px 18px}
  .hero .brand::before{width:30px;height:36px}
}
@media (max-width:640px){ .hero .ca-pill{border-width:10px;border-image-width:10px} }
@media (max-width:400px){
  .hero .ca-pill{font-size:12px;padding:2px 6px;letter-spacing:.02em}
  .hero .mark{font-size:18px;padding:2px 6px}
}

/* ---- PFP: the profile-picture maker (Victor, 2026-11-13). Left page: the picture, round as X shows it, and at reply
   size. Right page: the three styles as a game menu, the battle box's name, Save. ---- */
.pfp-wrap,.pfp-side{position:absolute;left:calc(18*var(--u));right:calc(18*var(--u));top:calc(62*var(--u));bottom:calc(14*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u))}
.pfp-wrap{align-items:center}
.pfp-stage{position:relative;flex:none;width:calc(540*var(--u));max-width:100%;aspect-ratio:1;padding:calc(18*var(--u));cursor:pointer;
  border:calc(3*var(--px)) solid transparent;border-image:url(/img/v2/slot9.png) 3 fill / calc(3*var(--px)) stretch;background:none;image-rendering:pixelated}
.pfp-out{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 var(--px) var(--rim)}
.pfp-stage.over .pfp-out{box-shadow:0 0 0 calc(2*var(--px)) #c8323f}
.pfp-prompt{position:absolute;left:8%;right:8%;bottom:9%;display:flex;flex-direction:column;gap:calc(4*var(--u));padding:calc(10*var(--u)) calc(16*var(--u));text-align:left;
  border:calc(5*var(--px)) solid transparent;border-image:url(/img/v2/window9.png) 5 fill / calc(5*var(--px)) stretch;font-family:var(--pix);color:var(--txt);image-rendering:pixelated}
.pfp-prompt b{font-size:calc(24*var(--u));font-weight:500}
.pfp-prompt small{font-size:calc(16*var(--u));font-weight:500;color:var(--txt-soft)}
.pfp-prompt::after{content:"▼";position:absolute;right:calc(10*var(--u));bottom:calc(4*var(--u));font-size:calc(14*var(--u));color:#c8323f;animation:pfp-blink 1s steps(1) infinite}
@keyframes pfp-blink{50%{opacity:0}}
.pfp-stage.has-pic .pfp-prompt{display:none}
.pfp-under{display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--u));width:calc(540*var(--u));max-width:100%}
.pfp-reply{display:flex;align-items:center;gap:calc(10*var(--u));font-family:var(--pix);font-weight:500;font-size:calc(15*var(--u));color:var(--txt-soft)}
.pfp-reply-pic{width:48px;height:48px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(56,56,74,.35)}
.pfp-change{--px:calc(2*var(--u));padding:calc(4*var(--u)) calc(12*var(--u));font-family:var(--pix);font-weight:500;font-size:calc(15*var(--u));color:var(--txt);
  border:calc(5*var(--px)) solid transparent;border-image:url(/img/v2/window9.png) 5 fill / calc(5*var(--px)) stretch;background:none;image-rendering:pixelated;cursor:pointer}
.pfp-change[hidden]{display:none}
.pfp-note{width:calc(540*var(--u));max-width:100%;font-family:var(--pix);font-weight:500;font-size:calc(15*var(--u));line-height:1.35;color:var(--txt-soft)}
.pfp-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pfp-styles{display:grid;gap:calc(8*var(--u))}
.pfp-style{--px:calc(2*var(--u));display:grid;grid-template-columns:calc(132*var(--u)) minmax(0,1fr);align-items:center;gap:calc(16*var(--u));padding:calc(8*var(--u));text-align:left;cursor:pointer;
  border:calc(5*var(--px)) solid transparent;border-image:url(/img/v2/window9.png) 5 fill / calc(5*var(--px)) stretch;background:none;image-rendering:pixelated;font-family:var(--pix);color:var(--txt)}
.pfp-thumb{display:block;width:100%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 var(--px) var(--rim)}
.pfp-style-text{display:flex;flex-direction:column;gap:calc(6*var(--u));min-width:0}
.pfp-style-text b{font-size:calc(24*var(--u));font-weight:500;letter-spacing:.03em}
.pfp-style-text span{font-size:calc(15*var(--u));font-weight:500;line-height:1.3;color:var(--txt-soft)}
/* the game's menu cursor marks the style in use */
.pfp-style-text b::before{content:"▶";display:inline-block;width:1.1em;color:transparent}
.pfp-style[aria-pressed=true] b::before{color:#c8323f}
.pfp-style[aria-pressed=true]{outline:var(--px) solid #c8323f;outline-offset:calc(-1*var(--px))}
.pfp-name[hidden]{display:none}
.pfp-name{display:flex;flex-direction:column;gap:calc(6*var(--u));font-family:var(--pix);font-weight:500;font-size:calc(15*var(--u));color:var(--txt-soft)}
.pfp-name-input{--px:calc(2*var(--u));box-sizing:border-box;width:100%;padding:calc(6*var(--u)) calc(12*var(--u));font-family:var(--pix);font-weight:500;font-size:calc(24*var(--u));text-transform:uppercase;color:var(--txt);
  border:calc(5*var(--px)) solid transparent;border-image:url(/img/v2/window9.png) 5 fill / calc(5*var(--px)) stretch;background:none;image-rendering:pixelated;border-radius:0;outline:none}
.pfp-name-input:focus-visible{outline:var(--px) solid #c8323f;outline-offset:calc(-1*var(--px))}
.pfp-name-input::placeholder{color:#9aa0a8}
.pfp-save{--px:calc(2*var(--u));padding:calc(12*var(--u));font-family:var(--pix);font-weight:500;font-size:calc(28*var(--u));letter-spacing:.04em;color:#c8323f;cursor:pointer;
  border:calc(5*var(--px)) solid transparent;border-image:url(/img/v2/window9.png) 5 fill / calc(5*var(--px)) stretch;background:none;image-rendering:pixelated}
.pfp-save:disabled{color:#9aa0a8;cursor:default}
.pfp-status{min-height:1.3em;font-family:var(--pix);font-weight:500;font-size:calc(15*var(--u));line-height:1.3;color:var(--txt-soft)}
@media (prefers-reduced-motion:reduce){ .pfp-prompt::after{animation:none} }
@media (max-aspect-ratio:23/20),(max-height:520px){
  .pfp-wrap,.pfp-side{position:relative;left:auto;right:auto;top:auto;bottom:auto;gap:calc(10*var(--u))}
  .pfp-stage,.pfp-under,.pfp-note{width:100%}
  .pfp-stage{box-sizing:border-box;padding:calc(12*var(--u))}
  .pfp-prompt b{font-size:calc(17*var(--u))}
  .pfp-prompt small{display:none}
  .pfp-styles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pfp-style{grid-template-columns:1fr;gap:calc(6*var(--u));padding:calc(6*var(--u));text-align:center}
  .pfp-style-text b{font-size:calc(13*var(--u));letter-spacing:0}
  .pfp-style-text b::before{display:none}
  .pfp-style-text span{display:none}
  .pfp-reply,.pfp-change,.pfp-note,.pfp-name,.pfp-status{font-size:calc(12.5*var(--u))}
  .pfp-name-input{font-size:calc(18*var(--u))}
  .pfp-save{font-size:calc(20*var(--u))}
}