.ph{--win:#f2c27a;--win-deep:#b9822f;--loss:#e46a5e;--loss-deep:#8f2f28;--left:#9aa7a0;--left-deep:#4d5953;--frame:#efb76a3d;max-width:1200px;margin-inline:auto}.ph-head{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;display:flex}.ph-head .eyebrow{margin-bottom:10px}.ph-head h1{text-shadow:0 2px 24px #efb76a2a;font-size:clamp(40px,5vw,60px)}.ph-head p:last-child{color:var(--muted);margin-top:10px;font-size:14px}.ph-refresh{border:1px solid var(--frame);color:var(--gold);letter-spacing:.04em;background:linear-gradient(#223028,#16201a);border-radius:999px;flex:none;align-items:center;gap:10px;padding:11px 18px;font-size:13px;font-weight:700;transition:border-color .15s,transform .15s;display:inline-flex;box-shadow:inset 0 1px #ffffff14,0 4px 14px #0006}.ph-refresh span{font-size:17px;line-height:1}.ph-refresh:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}.ph-refresh:disabled{opacity:.6;cursor:default}.spin{animation:.9s linear infinite ph-spin;display:inline-block}@keyframes ph-spin{to{transform:rotate(360deg)}}.ph-banner{border:1px solid var(--frame);background:linear-gradient(90deg,#101613f5 0%,#101613d9 45%,#101613b3 100%),url(/art/lantern-amber.jpg) 50% 40%/cover;border-radius:14px;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:32px;margin-bottom:40px;padding:30px 34px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 4px #10161388,inset 0 0 0 5px #efb76a1f,0 18px 40px #0008}.ph-banner:before,.ph-banner:after{content:"✧";color:var(--gold);opacity:.55;font-size:14px;position:absolute;top:10px}.ph-banner:before{left:14px}.ph-banner:after{right:14px}.ph-banner-id{align-items:center;gap:20px;min-width:0;display:flex}.ph-banner-id .eyebrow{margin-bottom:6px}.ph-banner-id h2{font-size:32px}.ph-crest{isolation:isolate;width:74px;height:84px;color:var(--gold);text-shadow:0 0 18px #efb76a99;flex:none;place-items:center;font-size:34px;display:grid;position:relative}.ph-crest:before,.ph-crest:after{content:"";clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);z-index:-1;position:absolute}.ph-crest:before{background:linear-gradient(160deg,#ffd59a,#9c6a25);inset:0}.ph-crest:after{background:radial-gradient(circle at 50% 35%,#2d3d33,#111914 72%);inset:3px}.ph-form{gap:6px;margin:12px 0 0;padding:0;list-style:none;display:flex}.ph-pip{background:var(--left-deep);border-radius:2px;width:12px;height:12px;transform:rotate(45deg)}.ph-pip.win{background:linear-gradient(135deg, #ffe0a8, var(--win-deep));box-shadow:0 0 8px #efb76a66}.ph-pip.loss{background:linear-gradient(135deg, #ff9d91, var(--loss-deep))}.ph-banner-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;display:grid}.ph-banner-stats>div{border-left:1px solid #efb76a26;min-width:0;padding:4px 18px}.ph-banner-stats dt{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:700}.ph-banner-stats dd{background:linear-gradient(180deg, #fff1d6, var(--gold) 60%, #c48a3c);color:#0000;white-space:nowrap;-webkit-background-clip:text;background-clip:text;margin:4px 0 2px;font-family:Georgia,serif;font-size:38px;line-height:1.1}.ph-banner-stats dd small{margin-left:2px;font-size:.55em}.ph-banner-stats span{color:var(--muted);font-size:11px}.ph-day+.ph-day{margin-top:30px}.ph-day h2{letter-spacing:.16em;text-transform:uppercase;color:var(--gold);align-items:center;gap:12px;margin-bottom:14px;font-family:Arial,sans-serif;font-size:12px;font-weight:700;display:flex}.ph-day h2:after{content:"";background:linear-gradient(90deg,#efb76a44,#0000);flex:1;height:1px}.ph-day h2 span{min-width:22px;color:var(--muted);letter-spacing:.04em;text-align:center;background:#efb76a1a;border-radius:999px;order:2;padding:1px 8px;font-size:10px}.ph-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.ph-card{--tone:var(--left);--tone-deep:var(--left-deep);background:linear-gradient(90deg, color-mix(in srgb, var(--tone) 13%, transparent), transparent 42%), linear-gradient(180deg, #1c2721, #151e19);border:1px solid #ffffff14;border-radius:12px;grid-template-columns:138px minmax(0,1fr) auto 28px;align-items:center;gap:22px;min-height:84px;padding-right:18px;transition:transform .15s,border-color .15s,box-shadow .15s;display:grid;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,0 6px 18px #0005}.ph-card.win{--tone:var(--win);--tone-deep:var(--win-deep)}.ph-card.loss{--tone:var(--loss);--tone-deep:var(--loss-deep)}a.ph-card:hover,a.ph-card:focus-visible{border-color:color-mix(in srgb, var(--tone) 55%, transparent);box-shadow:inset 0 1px 0 #ffffff14, 0 10px 26px #0008, 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent);transform:translateY(-2px)}a.ph-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.ph-ribbon{clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%);background:linear-gradient(180deg, var(--tone), var(--tone-deep));color:#1a120a;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px #ffffff40;align-self:stretch;align-items:center;padding:0 26px 0 18px;font-size:12px;font-weight:800;display:flex}.ph-card.loss .ph-ribbon{color:#fff3ef;text-shadow:0 1px 2px #0007}.ph-card.left .ph-ribbon{color:#f2f4f1;text-shadow:0 1px 2px #0007}.ph-card-main{flex-direction:column;gap:2px;min-width:0;display:flex}.ph-card-main strong{text-overflow:ellipsis;white-space:nowrap;font-family:Georgia,serif;font-size:20px;font-weight:400;line-height:1.25;overflow:hidden}.ph-card-main>span{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.ph-tag{letter-spacing:.1em;text-transform:uppercase;color:#e4a35e;border:1px solid #e4a35e66;border-radius:4px;padding:1px 7px;font-size:9px;font-style:normal;font-weight:700}.ph-card-stats{align-items:center;gap:22px;display:flex}.ph-stat,.ph-level{flex-direction:column;align-items:center;line-height:1.15;display:flex}.ph-stat b{font-variant-numeric:tabular-nums;font-size:19px}.ph-stat small,.ph-level small{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:9px;font-weight:700}.ph-level{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);color:#22170b;background:linear-gradient(160deg,#ffdca6,#a8732c);justify-content:center;width:46px;height:52px}.ph-level b{font-size:18px}.ph-level small{color:#3b2a14;font-size:8px}.ph-go{color:var(--muted);font-size:30px;line-height:1;transition:transform .15s,color .15s}a.ph-card:hover .ph-go{color:var(--gold);transform:translate(3px)}.ph-pager{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;gap:18px;margin-top:34px;font-size:12px;display:flex}.ph-pager button{border:1px solid var(--frame);color:var(--text);background:linear-gradient(#202c25,#151e19);border-radius:999px;padding:10px 18px;font-size:12px;font-weight:700}.ph-pager button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}.ph-pager button:disabled{opacity:.35;cursor:default}.ph-state{border:1px dashed var(--frame);text-align:center;background:radial-gradient(at 50% 0,#efb76a12,#0000 70%);border-radius:14px;flex-direction:column;align-items:center;gap:16px;padding:64px 24px;display:flex}.ph-state-glyph{border:1px solid var(--frame);width:72px;height:72px;color:var(--gold);border-radius:50%;place-items:center;font-size:32px;display:grid;box-shadow:0 0 40px #efb76a26}.ph-state[role=alert] .ph-state-glyph{color:var(--loss);border-color:#e46a5e55;box-shadow:0 0 40px #e46a5e22}.ph-state h2{font-size:28px}.ph-state p{max-width:440px;color:var(--muted);font-size:14px}.ph-state>div{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.ph-state .button{border-radius:999px}.ph-skeleton{box-shadow:none;background:#18211c;border-color:#ffffff0d;position:relative;overflow:hidden}.ph-banner.ph-skeleton{min-height:146px}.ph-skeleton:after{content:"";background:linear-gradient(100deg,#0000 20%,#ffffff0a 50%,#0000 80%);animation:1.4s ease-in-out infinite ph-shimmer;position:absolute;inset:0;transform:translate(-100%)}.ph-banner.ph-skeleton:before{content:none}@keyframes ph-shimmer{to{transform:translate(100%)}}.player-shell>.text-link{max-width:1200px;margin:0 auto 18px;display:flex}.match-hero{--tone:var(--left);--tone-deep:var(--left-deep);border:1px solid var(--frame);background:linear-gradient(90deg, color-mix(in srgb, var(--tone) 16%, transparent), transparent 45%), linear-gradient(90deg, #101613f2, #101613b3), url(/art/lantern-amber.jpg) center 40% / cover;border-radius:16px;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;gap:28px;margin-bottom:8px;padding-right:30px;display:grid;overflow:hidden;box-shadow:inset 0 0 0 4px #10161388,inset 0 0 0 5px #efb76a1f,0 18px 40px #0008}.match-hero.win{--tone:var(--win);--tone-deep:var(--win-deep)}.match-hero.loss{--tone:var(--loss);--tone-deep:var(--loss-deep)}.match-hero .ph-ribbon{clip-path:polygon(0 0,100% 0,calc(100% - 22px) 50%,100% 100%,0 100%);min-width:190px;padding:0 44px 0 28px;font-size:17px}.match-hero.loss .ph-ribbon,.match-hero.left .ph-ribbon{color:#fff3ef;text-shadow:0 1px 2px #0007}.match-hero-body{align-self:center;min-width:0;padding-block:30px}.match-hero-body .eyebrow{margin-bottom:8px}.match-hero-body h1{font-size:clamp(32px,4vw,48px)}.match-hero-body>p:last-child{color:var(--muted);margin-top:8px;font-size:13px}.match-hero-stats{align-self:center;margin:0;display:flex}.match-hero-stats>div{text-align:center;border-left:1px solid #efb76a26;padding:0 22px}.match-hero-stats dt{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-size:10px;font-weight:800}.match-hero-stats dd{background:linear-gradient(180deg, #fff1d6, var(--gold) 60%, #c48a3c);color:#0000;-webkit-background-clip:text;background-clip:text;margin:4px 0 0;font-family:Georgia,serif;font-size:36px;line-height:1.1}.feedback-form{flex-wrap:wrap;align-items:flex-end;gap:24px 32px;margin-top:20px;display:flex}.choice-group{border:0;min-width:0;margin:0;padding:0}.choice-group legend{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0;font-size:11px;font-weight:800}.choice-group>div{flex-wrap:wrap;gap:8px;display:flex}.choice-group small{color:var(--muted);margin-top:8px;font-size:11px;display:block}.choice{cursor:pointer;position:relative}.choice input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.choice span{border:1px solid var(--frame);background:linear-gradient(#223028,#151e19);border-radius:12px;place-items:center;min-width:48px;height:48px;padding:0 14px;font-size:16px;font-weight:800;transition:transform .1s,border-color .15s,background .15s;display:grid;box-shadow:inset 0 1px #ffffff12,0 3px #0a0f0c}.choice.wide span{font-size:13px}.choice:hover span{border-color:var(--gold)}.choice input:checked+span{background:linear-gradient(180deg, #ffe2ad, var(--gold) 45%, #d0913f);color:#26190a;border-color:#ffe7bd;box-shadow:inset 0 1px #fffa,0 3px #6e4718,0 8px 20px #efb76a33}.choice input:active+span{transform:translateY(2px)}.choice input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}.feedback-form+[role=status]:not(:empty){color:var(--gold);margin-top:14px;font-size:13px;font-weight:700}@media (max-width:860px){.match-hero{grid-template-columns:1fr;gap:0;padding:0 0 22px}.match-hero .ph-ribbon{clip-path:none;padding:8px 22px;font-size:13px}.match-hero-body{padding:20px 22px 16px}.match-hero-stats{padding-inline:22px}.match-hero-stats>div:first-child{border-left:0;padding-left:0}.match-hero-stats dd{font-size:28px}.ph-banner{grid-template-columns:1fr;gap:24px;padding:24px}.ph-banner-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}.ph-banner-stats>div:nth-child(odd){border-left:0;padding-left:0}}@media (max-width:640px){.ph-head{flex-direction:column;align-items:flex-start}.ph-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ribbon ribbon""main go""stats stats";gap:10px 12px;padding:0 0 14px}.ph-card .ph-ribbon{clip-path:none;grid-area:ribbon;padding:6px 16px;font-size:11px}.ph-card-main{grid-area:main;padding-left:16px}.ph-card-main strong{font-size:18px}.ph-card-stats{grid-area:stats;gap:18px;padding-inline:16px}.ph-go{grid-area:go;padding-right:14px}.ph-banner-stats dd{font-size:30px}.ph-crest{width:58px;height:66px;font-size:26px}.ph-banner-id h2{font-size:26px}}@media (prefers-reduced-motion:reduce){.ph-card,.ph-refresh,.ph-go{transition:none}a.ph-card:hover,a.ph-card:focus-visible{transform:none}.spin,.ph-skeleton:after{animation:none}}