#app:has(.pw) {display:flex;flex-direction:column;width:min(950px,100%);max-width:none;padding:clamp(10px,2.8vw,32px)}
.pw {display:flex;flex-direction:column;flex:1}
.pw {--navy:#152838;--cream:#f3f0df;--red:#b84b40;--blue:#276895;--muted:#afbfca;color:#edf0e8;font-family:system-ui,sans-serif}
.pw [hidden] {display:none!important}
.pw-header,.pw-squad,.pw-action {display:flex;align-items:center;justify-content:space-between}
.pw-header {margin:0 0 16px}
.pw-kicker,.pw-id,.pw-squad,.pw-left {font:700 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.13em}
.pw-kicker {color:#b7cccf}
.pw-header h1,.pw h2 {margin:0;color:#f5f1e6;font-weight:780;letter-spacing:-.045em;line-height:1.1}
.pw-header h1 {font-size:clamp(27px,4.4vw,46px)}
.pw-header a,.pw-link {color:#cbdadf;font-size:14px}
.pw-layout {display:grid;grid-template-columns:minmax(0,1.22fr) minmax(250px,1fr);align-items:start;gap:clamp(16px,3.5vw,42px);border:1px solid #354b57;border-radius:18px;padding:clamp(12px,2.5vw,28px);background:linear-gradient(135deg,#223b48,#13232f 73%);box-shadow:0 16px 40px #0004}
.pw-sheet {color:var(--navy);background-color:var(--cream);border-radius:4px 9px 7px 3px;box-shadow:3px 4px 0 #b8bead,5px 8px 18px #05111b66;overflow:hidden}
.pw-squad {padding:8px 13px;background:#eeecdd;border-bottom:1px solid #899da6}
.pw-squad.red {border:0;border-top:1px solid #899da6}
.pw .blue {color:var(--blue)}
.pw .red {color:var(--red)}
.pw-board {display:grid;grid-template-columns:repeat(3,1fr);padding:6px 6%;background-image:linear-gradient(90deg,transparent 4%,#d4908788 4%,#d4908788 calc(4% + 1px),transparent calc(4% + 1px)),linear-gradient(#95afbb55 1px,transparent 1px),linear-gradient(90deg,#95afbb55 1px,transparent 1px);background-size:100% 100%,14px 14px,14px 14px}
.pw-lane {position:relative;display:flex;align-items:center;flex-direction:column;width:100%;background:transparent;color:var(--navy);border:2px solid transparent;border-radius:9px;padding:2px 0;line-height:1}
.pw-lane:disabled {opacity:1}
.pw-lane:enabled {cursor:pointer;background:#fff8;border-color:var(--active-ink,var(--red))}
.pw-lane:hover:enabled,.pw-lane:focus-visible {background:#fff}
.pw-id,.pw-left {font-size:10px;color:#435466}
.pw-jet {width:clamp(35px,7vw,55px);height:auto;overflow:visible;z-index:1}
.pw-jet.blue {transform:rotate(180deg)}
.pw-track {position:relative;height:clamp(132px,26dvh,240px);width:34px;border-block:1px solid #7b929b;background:repeating-linear-gradient(to top,#8199a5 0 1px,transparent 1px calc(100% / 12)),linear-gradient(90deg,transparent 48%,#8199a5 48% 51%,transparent 51%);border-inline:1px solid #94a6ad}
.pw-ink {position:absolute;width:7px;height:0;border-radius:5px;background:currentColor;transition:height .38s ease-out}
.pw-ink.blue {top:0;left:4px}
.pw-ink.red {bottom:0;right:4px}
.pw-lane[data-winner="0"] .pw-jet.blue,.pw-lane[data-winner="1"] .pw-jet.red {opacity:.27;filter:grayscale(1)}
.pw-lane[data-winner="0"]::after,.pw-lane[data-winner="1"]::after {content:"×";position:absolute;font:bold 44px/1 system-ui;color:#9f392a;top:12px;z-index:2;transform:rotate(-9deg)}
.pw-lane[data-winner="1"]::after {top:auto;bottom:12px}
.pw h2 {font-size:clamp(24px,3vw,34px);margin:6px 0 12px}
.pw-console {align-self:stretch;display:flex;flex-direction:column;min-width:0}
.pw-console p {color:#d1dce0;line-height:1.5;margin:8px 0 14px;font-size:15px}
.pw-action {width:100%;gap:8px;min-height:46px;padding:10px 16px;border:1px solid #dfd5b4;background:#f2e5ba;color:#233340;border-radius:8px;font-weight:700;text-align:left;margin:8px 0}
.pw-action.secondary {background:#243a47;color:#edf1e7;border-color:#637781}
.pw-name {display:grid;gap:3px;margin-bottom:9px;color:#dae2e4;font-size:13px}
.pw-name input {min-width:0;width:100%;padding:7px 10px;color:#f4f6f3;border:1px solid #637781;border-radius:6px;background:#172a36;font-size:16px}
.pw-squad b,.pw-console h2,.pw-console #mode {overflow-wrap:anywhere}
.pw-squad > span {white-space:nowrap;margin-left:8px}
.pw-action:disabled {opacity:.65}
.pw-action.pw-waiting {visibility:hidden}
.pw button:focus-visible,.pw summary:focus-visible {outline:3px solid #efaa3a;outline-offset:2px}
.pw-footer {margin-top:auto;padding-top:16px}
.pw-footer-actions {display:flex;align-items:center;flex-wrap:wrap;gap:0 8px}
.pw-footer-actions span {color:#81959f}
.pw-footer-actions [hidden] + span {display:none}
.pw-footer p {margin:4px 0 0}
.pw-orders {display:flex;align-items:center;gap:12px;min-height:54px}
.pw-orders p {margin:0}
.pw-dice-tray {--size:32px;position:relative;display:grid;place-items:center;flex:none;width:60px;height:54px;perspective:220px}
.pw-dice-tray::before {content:"";position:absolute;bottom:4px;width:34px;height:7px;border-radius:50%;background:#06101777}
.pw-die-hop,#die {display:block;width:var(--size);height:var(--size);transform-style:preserve-3d}
#die {--tilt:rotateX(12deg) rotateY(-13deg);--rx:0deg;--ry:0deg;position:relative;transform:var(--tilt) rotateX(var(--rx)) rotateY(var(--ry))}
.pw-face {position:absolute;inset:0;width:100%;height:100%;border:1px solid #a29b84;border-radius:5px;background:linear-gradient(145deg,#fffdf0,#e8dfc6);fill:#243847;backface-visibility:hidden;transform:rotateX(var(--fx,0deg)) rotateY(var(--fy,0deg)) translateZ(calc(var(--size) / 2))}
.face-1 {fill:#ac3d32}
.face-2 {--fy:90deg}
.face-3 {--fx:90deg}
.face-4 {--fx:-90deg}
.face-5 {--fy:-90deg}
.face-6 {--fy:180deg}
#die[data-face="2"] {--ry:-90deg}
#die[data-face="3"] {--rx:-90deg}
#die[data-face="4"] {--rx:90deg}
#die[data-face="5"] {--ry:90deg}
#die[data-face="6"] {--ry:180deg}
.pw-tossing .pw-die-hop {animation:pw-hop var(--toss-duration) linear}
.pw-tossing #die {animation:pw-tumble var(--toss-duration) cubic-bezier(.21,.55,.32,1)}
@keyframes pw-hop {
    0%,100% {transform:translate(0,0)}
    25% {transform:translate(-9px,-15px)}
    58% {transform:translate(3px,1px)}
    73% {transform:translate(2px,-5px)}
    90% {transform:translate(0,1px)}
}
@keyframes pw-tumble {
    from {transform:var(--tilt) rotateX(var(--from-x)) rotateY(var(--from-y))}
    to {transform:var(--tilt) rotateX(calc(var(--rx) + 360deg)) rotateY(calc(var(--ry) + 360deg))}
}
.pw-link {border:0;background:none;text-decoration:none;padding:7px 0}
.pw-link:hover {color:#fff}
.pw-console #last,.pw-console #saved,.pw-console #network {font-size:13px;color:#c1cec9}
.pw p:empty {display:none}
@media(max-width:650px){
    .pw-action.pw-waiting {display:none}
    .pw-layout {grid-template-columns:1fr;gap:15px;padding:12px}
    .pw-header {margin-bottom:8px}
    .pw-track {height:clamp(108px,20dvh,158px)}
    .pw-jet {width:34px}
    .pw-console h2 {margin:2px 0 6px}
    .pw-orders {min-height:38px}
    .pw-dice-tray {--size:28px;height:45px;width:49px}
    .pw-squad {padding:4px 10px}
}
@media(prefers-reduced-motion:reduce){.pw-ink {transition:none}}
@media(prefers-reduced-motion:reduce){.pw-tossing .pw-die-hop,.pw-tossing #die {animation:none}}