/* PUZRU Core20 — Quiet, deliberate, touch-first. One accent, one hierarchy. */
:root{--pz20-line:rgba(199,218,246,.11);--pz20-ink:#f0f4fa;--pz20-muted:#a8b6c8;--pz20-accent:#baf3dc}
html{font-synthesis:none;-webkit-text-size-adjust:100%}
body{overflow-x:clip}
.shell,.screen,.pz-arena,#screen{min-width:0}
:is(button,a):focus-visible{outline:2px solid #baf3dc;outline-offset:3px}
.pz-header-ranking[hidden]{display:none!important}
.pz-header-ranking{box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:39px;height:39px;max-width:110px;padding:0 12px;border:1px solid #baf3dc3c;border-radius:11px;color:#d8f9e9!important;background:linear-gradient(145deg,#293c3d,#1a2730);font-size:11px;font-weight:800;letter-spacing:.015em;text-decoration:none;white-space:nowrap;transition:border-color .16s,background .16s}
.pz-header-ranking:hover{border-color:#baf3dc95;background:#2d4544}
.pz-header-ranking::before{content:'◈';font-size:18px;line-height:1;opacity:.9}
.pz-account-button{width:39px;height:39px;flex:0 0 39px;border-radius:11px;border-color:#ffffff30;background:#222e3e;box-shadow:none}
.nav .nav-right{gap:7px;min-width:0}
.nav .nav-right>*{flex-shrink:0}
/* Trim extra paths and visual weight without touching animation/game controls. */
.pz-hub-arena,.pz-arena-link{display:none!important}
.pz-ranked-entry.pz-sprint-primary{margin-top:13px;min-height:59px;border:1px solid #b8edd355;border-radius:15px;background:#1d3433;box-shadow:none;padding:13px 17px;gap:10px;flex-wrap:nowrap;display:flex}
.pz-sprint-primary>span:first-child{font-size:15px;letter-spacing:-.02em;font-weight:850;color:#ddfff0}
.pz-sprint-primary>small{font-size:11px;line-height:1.4;font-weight:450;color:#bdd1c8;white-space:normal;min-width:0;text-align:right;order:0}
.pz-sprint-primary>span:last-child{font-size:19px;order:0}
.pz-sprint-primary.pz-race-locked{background:#182b2b;border-color:#8bcab73a}
.pz-sprint-primary.pz-race-locked small{color:#a3b9b4}
@media(max-width:410px){.pz-sprint-primary>small{font-size:10px}.pz-sprint-primary>span:first-child{font-size:13px}}
@media(max-width:360px){.pz-header-ranking{height:34px;min-width:33px;padding:0 6px}.pz-header-ranking::before{font-size:16px}.pz-account-button{width:34px;height:34px;flex-basis:34px}.nav .nav-right{gap:4px}.pz-sprint-primary>small{max-width:115px}}
/* Profile: no nested glass cards; clean sequence and hairline rhythm. */
.pz-account-overlay{background:#02040acb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px}
.pz-account-panel{width:min(465px,100%);max-height:calc(100dvh - 24px);overflow-x:hidden;overflow-y:auto;border-radius:22px;border:1px solid #a4bad52e;background:linear-gradient(165deg,#192431 0%,#111924 45%,#101721 100%);padding:24px;box-shadow:0 30px 90px #000b;scrollbar-width:thin}
.pz-sheet-top{margin-bottom:22px}
.pz-sheet-kicker{font-size:11px;letter-spacing:.13em;color:#e6ecf5}.pz-sheet-kicker b{color:#aebdd0}
.pz-sheet-kicker i{display:none}
.pz-account-close{width:37px;height:37px;border-radius:50%;font-size:14px!important;background:transparent;border:1px solid #ffffff25!important}
.pz-profile-hero{gap:13px;margin-bottom:20px}
.pz-avatar{width:57px;height:57px;flex:0 0 57px;padding:1px;border-radius:17px;box-shadow:none;background:#baf3dc42}
.pz-avatar span{border-radius:16px;background:#233b41;color:#effff6;font-size:25px;font-weight:800}
.pz-avatar i{display:none}
.pz-identity .pz-caption{font-size:9px;letter-spacing:.12em;color:#a1b7b8}
.pz-identity h2{margin:3px 0 3px;font-size:clamp(21px,5.4vw,27px);letter-spacing:-.035em;font-weight:800;line-height:1.18}
.pz-identity p{color:#afbdc8;font-size:11px;line-height:1.5}
.pz-profile-stats{display:grid;grid-template-columns:1fr 1fr;padding:17px 0;border-top:1px solid var(--pz20-line);border-bottom:1px solid var(--pz20-line);gap:16px}
.pz-profile-stats>div+div{border-left:1px solid var(--pz20-line);padding-left:17px}
.pz-profile-stats strong{display:block;font-size:32px;line-height:1.04;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:#f0f7f7}
.pz-profile-stats strong small{color:#8fa8ae;font-size:15px;font-weight:500}
.pz-profile-stats span{display:block;font-size:11px;margin-top:8px;color:#aebec8}
.pz-profile-status{min-height:21px;margin:13px 0 18px;color:#99b3bd;font-size:11px;line-height:1.5}
.pz-profile-status button{border:0!important;background:transparent;color:#b5f3d9;padding:4px 6px;text-decoration:underline}
.pz-guest-simple{font-size:12px;line-height:1.6;color:#b4c4d0;margin:0 0 12px!important}
.pz-section-heading{margin:12px 0 7px;align-items:end;gap:8px}
.pz-section-heading h3{font-size:19px;letter-spacing:-.035em;margin-top:5px;font-weight:780}
.pz-profile-date{color:#97aabd;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pz-world-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.pz-world{padding:13px 0 12px;min-width:0;background:transparent;border:none;border-bottom:1px solid var(--pz20-line);border-radius:0;box-shadow:none}
.pz-world-name{margin-bottom:10px;gap:10px}
.pz-world-icon{height:32px;width:32px;flex:0 0 32px;background:transparent;border:1px solid #ffffff22;border-radius:10px;font-size:21px}
.pz-world-name strong{font-size:15px;letter-spacing:-.025em}
.pz-world-name small{font-size:9px;color:#91a1b5;letter-spacing:.08em;margin-top:2px}
.pz-world-name>a{min-height:33px;padding:6px 11px;border-radius:9px;border:1px solid #ffffff27;color:#d8e8f6;font-size:11px;font-weight:700}
.pz-difficulties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-left:42px}
.pz-difficulty{min-width:0;padding:0;background:transparent;border:0;border-radius:0}
.pz-diff-top{margin-bottom:6px;gap:8px}.pz-diff-top b{font-size:10px;color:#a8b9c9;letter-spacing:.04em}.pz-diff-top strong{font-size:12px;color:#d8e7f1}
.pz-segments{gap:3px;height:4px}.pz-segments i{background:#3d4b5a}.pz-segments i.on{box-shadow:none;background:var(--pz-accent)}
.pz-difficulty>small{margin-top:7px;min-height:0;font-size:10px;line-height:1.3;color:#8aa4b4;overflow-wrap:anywhere}
.pz-account-footer{margin-top:21px;display:flex;align-items:center;gap:9px}
.pz-account-footer button{height:45px;min-height:45px;border-radius:11px;padding:11px 16px;font-size:12px;font-weight:800;box-shadow:none;flex:1}
.pz-account-secondary{background:transparent;border:1px solid #ffffff28!important;color:#d8e2ef}
.pz-account-action{background:#baf3dc;color:#122625}
@media(max-width:520px){.pz-account-overlay{align-items:flex-end;padding:0}.pz-account-panel{width:100%;max-height:calc(100dvh - 8px);border-bottom:0;border-radius:23px 23px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom,0px))}}
@media(max-width:350px){.pz-account-panel{padding-inline:15px}.pz-difficulties{gap:10px;margin-left:0}.pz-profile-stats strong{font-size:28px}}
@media(max-height:480px) and (orientation:landscape){.pz-account-overlay{align-items:center;padding:5px}.pz-account-panel{width:min(620px,98vw);height:auto;max-height:calc(100dvh - 10px);border-radius:17px;padding:14px 18px}.pz-world-grid{grid-template-columns:1fr 1fr;column-gap:14px}}
/* Arena: editorial rather than nested cards. One board, one filter, one CTA. */
.pz-arena{max-width:840px;padding-bottom:45px}
.arena-back{font-size:12px;border-bottom:1px solid var(--pz20-line);padding-bottom:12px}
.arena-back button{font:inherit;display:inline-flex;align-items:center;gap:8px;padding:9px 8px 9px 0;border:0;background:transparent;color:#d4dfec;cursor:pointer;min-height:41px}
.arena-back button:hover{color:#fff}
.arena-hero{padding:25px 0 24px}
.arena-hero h1{font-size:clamp(30px,6.8vw,51px);line-height:1.09;letter-spacing:-.045em;margin:10px 0 12px}
.arena-hero p{font-size:13px;line-height:1.5;margin:0}
.arena-trophy{width:82px;height:82px}.trophy-star{font-size:57px}.trophy-ring{inset:0}
.arena-controls{background:transparent;box-shadow:none;border:0;border-bottom:1px solid var(--pz20-line);border-radius:0;padding:0 0 12px;margin:0 0 9px}
.arena-game{padding:13px 4px;font-size:12px;border-radius:10px;min-width:0}
.arena-game.active{background:#c0f5de13;box-shadow:none;border-color:#b7e9d132;color:#e3fff4}
.arena-secondary{margin:3px 0 0;padding:11px 0 0}
.arena-difficulty{background:#0f1923}.arena-difficulty button.active{background:#314d4b}
.arena-board{background:transparent;border:none;box-shadow:none;border-radius:0;min-height:240px}
.board-heading{padding:21px 0 15px}.board-heading h2{font-size:22px}
.arena-personal{margin:12px 0 4px;border:1px solid #b9eddc36;border-radius:12px;background:#baf4da0e;padding:13px 14px}
.arena-rank{padding:14px 3px;min-height:61px}
.rank-avatar{height:33px;width:33px;border-radius:50%;background:#25363d;border-color:#ffffff1a}
.arena-start{margin:14px 0;border:1px solid var(--pz20-line);background:#17252c;padding:18px;border-radius:15px;box-shadow:none;gap:14px}
.arena-start h2{font-size:19px}.arena-start p{font-size:12px;line-height:1.45}
.arena-cta{min-height:46px;padding:11px 15px;border-radius:11px;background:#baf3dc;box-shadow:none;font-size:12px}
.arena-footer{font-size:10px;color:#8b9dab}
@media(max-width:650px){.pz-arena{padding:13px 18px 40px}.arena-hero{padding:22px 0 18px}.arena-hero h1{font-size:clamp(30px,8.8vw,43px)}.arena-trophy{width:53px;height:53px}.trophy-star{font-size:39px}.arena-games{gap:2px}.arena-game{padding:9px 0;flex-direction:column;font-size:10px;gap:3px}.arena-game span{font-size:20px}.arena-start{padding:16px;gap:14px}.board-heading{padding:18px 2px 13px}.arena-rank{padding:11px 1px;gap:9px}.arena-personal{margin:9px 0;padding:11px}.rank-score{font-size:15px}}
@media(max-width:340px){.arena-trophy{display:none}.arena-game{font-size:9px}.arena-secondary{gap:5px}.arena-difficulty button{padding:8px 13px}}
/* Spectrum: counting stays top-right, even for the split-field challenge. */
.count-indicator,.spectrum-hard-count{top:12px!important;right:12px!important;bottom:auto!important;left:auto!important;z-index:7}
@media(max-height:545px){.count-indicator,.spectrum-hard-count{top:7px!important;right:7px!important}}
@media(prefers-reduced-motion:reduce){.pz-header-ranking,.pz-sprint-primary{transition:none!important}}
/* Header budget: four essential controls must never push the profile off canvas. */
@media(max-width:470px){.nav{padding-left:10px;padding-right:10px;gap:6px}.nav .switcher{flex:1 1 auto;min-width:0;max-width:none;gap:6px;padding:4px 1px}.nav .switcher .mark{width:33px;height:33px;flex-basis:33px}.nav .switcher .brand-name{min-width:0;overflow:hidden}.nav .switcher .brand-name strong{font-size:15px;overflow:hidden;text-overflow:ellipsis}.nav .switcher .brand-name small{font-size:7px;letter-spacing:1px;white-space:nowrap}.nav .switcher .caret-box{width:18px;height:22px;flex:0 0 18px;margin:0}.nav .nav-right{flex:0 0 auto;gap:5px}.nav .tiny-button{width:35px;min-width:35px;height:35px;padding:0;border-radius:10px}.nav .pz-header-ranking,.nav .pz-account-button{height:35px;min-width:35px;width:35px;flex-basis:35px;padding:0;border-radius:10px}}
@media(max-width:360px){.nav{padding-left:7px;padding-right:7px;gap:4px}.nav .switcher{gap:4px}.nav .switcher .mark{width:30px;height:30px;flex-basis:30px}.nav .switcher .brand-name strong{font-size:13px}.nav .switcher .caret-box{display:none}.nav .nav-right{gap:4px}.nav .tiny-button,.nav .pz-header-ranking,.nav .pz-account-button{width:32px;min-width:32px;height:34px;flex-basis:32px}.nav .brand-name small .switch-kicker{display:none}}
@media(max-width:410px){.app-header{padding-left:8px;padding-right:8px;gap:4px}.app-header .brand-trigger{min-width:0;flex:1 1 auto;gap:5px;padding:4px}.app-header .brand-mark-v4{width:31px;flex-basis:31px;height:31px}.app-header .brand-lockup strong{font-size:14px}.app-header .brand-micro{font-size:7px;letter-spacing:.04em}.app-header .brand-switch{width:22px;flex-basis:22px;height:22px;margin-left:0}.app-header .header-actions{flex:0 0 auto;gap:3px}.app-header .header-actions .icon-button,.app-header .header-actions .pz-account-button,.app-header .header-actions .pz-header-ranking{width:33px;min-width:33px;flex:0 0 33px;height:34px;border-radius:10px;padding:0}.app-header .header-actions .pz-header-ranking::before{font-size:16px}}
@media(max-width:340px){.app-header .brand-micro{display:none}.app-header .brand-mark-v4{width:28px;flex-basis:28px}.app-header .brand-switch{display:none}}
