:root{--sun:#FFCB2E;--sun-deep:#E5A100;--sun-soft:#FFE48A;--court:#1E4FD8;--court-deep:#0F2F8F;--glass:#CFF1F4;--tomato:#FF5A4E;--tomato-deep:#D63A2F;--ink:#10204A;--ink-soft:#3B4A72;--paper:#F5F8FF;
  --display:'Grandstander','Arial Rounded MT Bold',ui-rounded,'Trebuchet MS',system-ui,sans-serif;--body:'Figtree',ui-rounded,'Segoe UI',system-ui,sans-serif;--gutter:clamp(16px,5vw,72px);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;-webkit-text-size-adjust:100%}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--gutter)}
header.top{background:var(--sun);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px)}
header.top .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font:800 1.15rem/1 var(--display);text-decoration:none;margin-right:auto;white-space:nowrap}
.brand svg{width:38px;height:38px;flex:none}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.tabs a{flex:none;font:700 .95rem var(--body);text-decoration:none;border:3px solid var(--ink);border-radius:999px;padding:8px 14px;background:#fff}
.tabs a[aria-current=page]{background:var(--ink);color:#fff}
.play{display:inline-flex;align-items:center;justify-content:center;min-height:50px;font:800 1.05rem var(--body);color:#fff;background:var(--court);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:0 20px;text-decoration:none}
.play:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
h1{font:800 clamp(2.2rem,8vw,3.6rem)/.95 var(--display);margin:18px 0 8px}
.lede{font-size:1.05rem;color:var(--ink-soft);margin:0 0 18px;max-width:40em}
main{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
footer{padding:24px 0 40px;color:var(--ink-soft);font-size:.9rem}
/* Standalone pages: shared desktop shell, scoped away from the game. */
:where(.player-page,.boards-page,.world-page) [hidden]{display:none!important}
:where(.player-page,.boards-page,.world-page) :focus-visible{outline:3px solid var(--court);outline-offset:4px}
:where(.player-page,.boards-page,.world-page) .brand{min-width:0}
.level-badge{display:inline-block;margin-top:8px;padding:6px 10px;background:var(--glass);border:2px solid var(--ink);border-radius:999px;font-weight:800;font-size:.82rem}
.pips-balance{background:var(--sun);border:3px solid var(--ink);border-radius:14px;padding:12px;font-weight:700;margin-bottom:0}
.pips-balance b{font:800 1.5rem var(--display)}
.level-chart{display:block;width:100%;height:auto;margin-top:16px}
.chart-range{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.85rem;font-weight:700}
.chart-range b{font:800 1.6rem var(--display);color:var(--court)}
.extra-boards{display:none}
@media(hover:hover){
 :where(.player-page,.boards-page,.world-page) .tabs a:hover{background:var(--glass)}
 :where(.player-page,.boards-page,.world-page) .tabs a[aria-current=page]:hover{background:var(--court)}
 :where(.player-page,.boards-page,.world-page) :is(.btn,.play,.ppsi-chip):hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
 .player-page .what:hover{color:var(--court)}
 .world-page #map .ppm-chip:hover{background:var(--sun)}
}
@media(min-width:1024px){
 :where(.player-page,.boards-page,.world-page){--gutter:40px}
 :where(.player-page,.boards-page,.world-page) .wrap{max-width:1680px}
 :where(.player-page,.boards-page,.world-page) header.top .wrap{min-height:80px}
 :where(.player-page,.boards-page,.world-page) .brand{font-size:1.4rem}
 :where(.player-page,.boards-page,.world-page) .tabs{padding:24px 0 20px;gap:12px}
 .profile-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:24px;align-items:start}
 .profile-layout>div{min-width:0}
 .profile-layout .card{margin:0 0 24px;padding:24px}
 .profile-summary{position:sticky;top:104px;grid-row:1/3}
 .player-page .who{align-items:flex-start;flex-wrap:wrap}
 .player-page .who svg{width:88px;height:88px}
 .player-page .who h1{font-size:2.3rem}
 .player-page .identity-card{background:var(--sun)}
 .player-page .identity-card .level-badge{background:#fff}
 .player-page .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .player-page .acts .btn{width:100%}
 .player-page .stamps{gap:16px;padding:12px 0}
 .player-page .stamp{width:104px;height:104px}
 .player-page .level-card{background:#fff}
 .page-hero{display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--glass);border:3px solid var(--ink);border-radius:28px;box-shadow:0 5px 0 var(--ink);padding:36px;margin:0 0 32px}
 .page-hero h1{font-size:clamp(3.6rem,5vw,5.4rem);margin:0 0 16px}
 .page-hero .lede{margin:0;max-width:55ch;line-height:1.5}
 .page-hero>p{flex:none}
 .boards-page #hub .pph-pair,.boards-page #hub.pph-anon .pph-pair{grid-template-columns:minmax(0,1fr) minmax(280px,.65fr);grid-template-areas:'boards pass' 'riv riv'}
 .boards-page .pph-card,.boards-page .pph-rcard{box-shadow:0 5px 0 var(--ink)}
 .extra-boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:32px 0}
 .extra-boards .pph-pair{display:block}
 .extra-boards .pph-boards{height:100%}
 .extra-boards>.pph{display:block}
 .boards-page .pph-tabs .l{font-size:.85rem}
 .world-page h1{font-size:clamp(3rem,4vw,4.5rem);max-width:20ch;margin-top:8px}
 .world-page .lede{max-width:65ch;line-height:1.5}
 .world-page #map{height:740px;min-height:0;border:3px solid var(--ink);border-radius:28px;box-shadow:0 5px 0 var(--ink);display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:minmax(0,1fr)}
 .world-page #map .ppm-stage{grid-column:1;grid-row:1}
 .world-page #map .ppm-chips{grid-column:2;grid-row:1;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:18px;gap:12px;border-left:3px solid var(--ink)}
 .world-page #map .ppm-chip{width:100%;max-width:none;min-width:0;min-height:84px}
 .world-page #map .ppm-top{right:260px;left:16px;max-width:calc(100% - 280px)}
 .world-page #map .ppm-sheet{left:auto;right:260px;top:100px;bottom:20px;width:350px;max-height:none;border:3px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);transform:translateY(120%)}
 .world-page #map .ppm-sheet.open{transform:none}
 .world-page #map .ppm-ctrls{left:16px;right:auto}
}
@media(min-width:1280px){
 .profile-layout{grid-template-columns:minmax(270px,.8fr) minmax(0,1fr) minmax(0,1.15fr);gap:28px}
 .profile-summary{grid-row:auto}
 .player-page .row{gap:8px}
 .player-page .row .what{min-width:0;overflow-wrap:anywhere}
 .player-page .row .what small{line-height:1.5;margin-top:4px}
 .world-page #map{grid-template-columns:minmax(0,1fr) 280px;height:800px}
 .world-page #map .ppm-top{right:300px}
 .world-page #map .ppm-sheet{right:300px;width:380px}
}
@media(min-width:1440px){
 :where(.player-page,.boards-page,.world-page){--gutter:56px}
 .profile-layout{gap:32px}
 .profile-layout .card{padding:28px}
 .player-page .who h1{font-size:2.6rem}
 .world-page #map{height:840px}
}
@media(prefers-reduced-motion:reduce){:where(.player-page,.boards-page,.world-page) *{scroll-behavior:auto;animation:none!important;transition:none!important}}
@media(min-width:1024px){
 .boards-page #hub .pph-pair,.boards-page #hub.pph-anon .pph-pair{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'boards extra' 'pass pass' 'riv riv'}
 .boards-page .extra-boards{grid-area:extra;display:block;margin:0;min-width:0}
 .boards-page #hub .pph-pass{background:var(--glass)}
 .boards-page #hub .pph-claim{display:flex;align-items:center;gap:24px}
 .boards-page #hub .pph-claim-art{float:none;flex:none;order:2;margin-left:auto}
 .boards-page #hub .pph-claim p{max-width:55ch}
 .boards-page #hub .pph-pass .pph-head{margin-bottom:0}
}
@media(min-width:1024px){
 .boards-page #hub .pph-claim{display:block}
 .boards-page #hub .pph-claim-art{float:right;margin:0 0 12px 24px;width:90px}
 .boards-page #hub .pph-claim .pph-head{margin-bottom:12px}
 .boards-page #hub .pph-badges-mini{display:flex}
}