/* Pixel look: a handheld from the nineties that only ever had one cartridge, and it was dim sum. Layout lives in style.css. */
:root{
 --four-serif:ui-monospace,SFMono-Regular,Consolas,'Courier New',monospace;
 --px-night:#0c1714;--px-panel:#12251e;--px-deep:#0a110f;--px-line:#3f6b52;--px-bamboo:#d9a55a;--px-wood:#8a5a2b;
 --px-cream:#f3e6c4;--px-dim:#a9b89f;--px-gold:#f0b93a;--px-roe:#d4483b;--px-mint:#8fd694;
 --four-basket:url('./assets/px-basket.png');
 --four-steam:url('./assets/px-steam.png');
 background:var(--px-night);
}
body{color:var(--px-cream);background:linear-gradient(#0c1714d9,#0c1714d9),var(--px-night) url('./assets/px-backdrop.png') center / cover no-repeat;image-rendering:pixelated}
header{background:var(--px-deep);border-bottom:2px solid var(--px-line)}
header a{color:var(--px-cream);font:700 16px/1 var(--four-mono)}
header span{color:var(--px-mint)}
.four-kicker{color:var(--px-mint)}
.four-intro h1{color:var(--px-cream);font:700 clamp(28px,4.4vw,46px)/1.1 var(--four-mono);letter-spacing:-.02em;text-shadow:3px 3px 0 var(--px-wood)}
.four-intro>p:last-child{color:var(--px-dim)}
.four-setup{background:var(--px-panel);border:2px solid var(--px-line);box-shadow:4px 4px 0 var(--px-deep)}
.four-setup label,.player-name__label{color:var(--px-mint)}
.four-setup input,.four-setup select,.player-name__input{background:var(--px-deep);color:var(--px-cream);border:2px solid var(--px-line);border-radius:0;font-family:var(--four-mono)}
.four-variant,.four-skin-choice{background:var(--px-deep);border:2px dashed var(--px-line)}
.four-variant p,.four-note,.player-name__hint{color:var(--px-dim)}
.four-main button{background:var(--px-gold);color:#2a1b08;border:2px solid var(--px-cream);border-radius:0;box-shadow:3px 3px 0 var(--px-deep);font-family:var(--four-mono)}
.four-main .secondary{background:var(--px-panel);color:var(--px-cream);border-color:var(--px-line)}
.four-main button:not(:disabled):hover{filter:brightness(1.12)}
.four-main button:focus-visible,.four-main select:focus-visible,.four-main input:focus-visible{outline:2px solid var(--px-mint);outline-offset:2px}
.four-error{background:#3a1512;color:#ffd9d2;border:2px solid var(--px-roe)}

body.four-in-match{background:linear-gradient(#0c171480,#0c1714b3),var(--px-night) url('./assets/px-backdrop.png') center / cover no-repeat}
.four-bar{background:var(--px-deep);border-bottom:2px solid var(--px-line)}
.four-bar-home{color:var(--px-cream);font:700 16px/1 var(--four-mono);letter-spacing:0}
.four-bar-home::before{content:'> ';color:var(--px-mint)}
.four-bar-room{color:var(--px-dim)}
.four-variant-badge{color:var(--px-gold);border:2px solid var(--px-wood)}
.four-main .four-bar button{box-shadow:none}
.four-main .four-bar button[aria-pressed=true]{color:var(--px-mint);border-color:var(--px-mint)}
.four-look{color:var(--px-dim)}
.four-look select{background:var(--px-panel);color:var(--px-cream);border:2px solid var(--px-line)}
.four-main .room-status{background:var(--px-deep);color:var(--px-mint)}
.four-status{color:var(--px-cream);font-style:normal;font-weight:700;font-size:17px;text-shadow:2px 2px 0 var(--px-deep)}
.four-status::before{content:'> ';color:var(--px-mint)}

.four-seat{background:var(--px-panel);border:2px solid var(--px-line);box-shadow:4px 4px 0 var(--px-deep);color:var(--px-cream)}
.four-seat.current{border-color:var(--px-gold)}
.four-seat.won{border-color:var(--px-mint);box-shadow:4px 4px 0 var(--px-deep),0 0 0 2px var(--px-mint)}
.four-seat.empty,.four-seat.away{opacity:.6}
.four-face{background:var(--four-basket) center / contain no-repeat}
.four-face::before{content:'';position:absolute;inset:10%;background:center / contain no-repeat}
.four-seat.har-gow .four-face::before{background-image:url('./assets/px-hargow.png')}
.four-seat.siu-mai .four-face::before{background-image:url('./assets/px-siumai.png')}
.four-seat.empty .four-face::before{opacity:0}
.four-face::after{background:var(--four-steam) center / contain no-repeat}
.four-seat h3{font-weight:700;font-size:14px}
.four-dish{color:var(--px-dim)}
.four-seat-status{color:var(--px-dim);border:2px solid var(--px-line)}
.four-seat.current .four-seat-status{background:var(--px-gold);color:#2a1b08;border-color:var(--px-gold)}
.four-seat.won .four-seat-status{background:var(--px-mint);color:#0c1714;border-color:var(--px-mint)}

.four-rack{background:var(--px-deep);border-color:var(--px-bamboo);box-shadow:inset 0 0 0 2px var(--px-wood),4px 4px 0 var(--px-deep)}
.four-cell{background:var(--four-basket) center / contain no-repeat}
.four-cell .disc-piece,.four-eaten{background:center / contain no-repeat transparent}
.four-cell .disc-piece{width:80%;height:80%;border:0;border-radius:0;box-shadow:none}
.four-eaten{inset:10%}
.four-cell .disc-piece.har-gow,.four-eaten.har-gow{background-image:url('./assets/px-hargow.png')}
.four-cell .disc-piece.siu-mai,.four-eaten.siu-mai{background-image:url('./assets/px-siumai.png')}
.four-cell.pop-preview .disc-piece.har-gow,.four-eaten.har-gow{background-image:url('./assets/px-hargow-oh.png')}
.four-cell.pop-preview .disc-piece.siu-mai,.four-eaten.siu-mai{background-image:url('./assets/px-siumai-oh.png')}
.four-cell.actionable:hover,.four-cell.preview:not(:has(.disc-piece)){outline:2px solid var(--px-cream);outline-offset:-1px}
.four-cell.preview:not(:has(.disc-piece))::before{content:'';position:absolute;inset:10%;background:center / contain no-repeat;opacity:.5;pointer-events:none}
.four-board-inner[data-me="0"] .four-cell.preview::before{background-image:url('./assets/px-hargow.png')}
.four-board-inner[data-me="1"] .four-cell.preview::before{background-image:url('./assets/px-siumai.png')}
.four-cell.pop-preview{outline:2px solid var(--px-roe);outline-offset:-1px}
.four-puff{background:var(--four-steam) center / contain no-repeat;animation-timing-function:steps(5)}
.four-cell.win{outline:3px solid var(--px-mint);outline-offset:-1px}
.four-cell.win .disc-piece{animation:four-px-hop .5s steps(2) infinite alternate}
.four-cell.win::after{content:'';position:absolute;left:36%;top:-34%;z-index:3;width:28%;height:52%;background:var(--four-steam) center / contain no-repeat;pointer-events:none;animation:four-steam 1s steps(3) infinite alternate}

.four-main .four-drop{background:center / auto 92% no-repeat transparent;color:var(--px-dim);border:0;border-bottom:2px solid var(--px-line);box-shadow:none}
.four-main .four-drop:disabled{opacity:.3}
.four-main .four-drop:is(:hover,.hovered):not(:disabled){color:transparent;border-bottom-color:var(--px-gold);filter:none}
.four-board-inner[data-me="0"] .four-drop:is(:hover,.hovered):not(:disabled){background-image:url('./assets/px-hargow.png')}
.four-board-inner[data-me="1"] .four-drop:is(:hover,.hovered):not(:disabled){background-image:url('./assets/px-siumai.png')}
.four-main .four-pop{background:var(--px-panel);color:var(--px-dim);border:2px dashed var(--px-line);box-shadow:none;text-transform:uppercase}
.four-main .four-pop:disabled{opacity:.25}
.four-main .four-pop:not(:disabled){background:var(--px-roe);color:var(--px-cream);border:2px solid var(--px-cream)}

.four-rack.resolved::after{background:var(--px-deep);color:var(--px-mint);border:2px solid var(--px-mint);box-shadow:4px 4px 0 #000a;animation:four-px-seal 1.8s .35s steps(1) both}
.four-rack.popped:not(.resolved)::after{background:var(--px-cream);color:#2a1b08;border:2px solid var(--px-roe);box-shadow:3px 3px 0 #000a;animation:four-px-nom 1s .3s steps(1) both}
.four-main .results-reopen{background:var(--px-panel);color:var(--px-gold);border:2px solid var(--px-gold)}
.four-main .results-dialog,.four-rules{background:var(--px-panel);color:var(--px-cream);border:2px solid var(--px-line);border-radius:0;box-shadow:6px 6px 0 #000a}
.four-main .results-dialog h2,.four-rules h2{font:700 24px/1.2 var(--four-mono)}
.four-main .results-summary,.four-rules-aside{color:var(--px-dim)}
.four-rules::backdrop{background:#060b0acc}
.four-main .four-rules .instructions{color:var(--px-cream);font-size:13px}

@keyframes four-px-hop{from{transform:translateY(0)}to{transform:translateY(-8%)}}
@keyframes four-px-seal{0%{visibility:hidden}8%,75%{visibility:visible}100%{visibility:hidden}}
@keyframes four-px-nom{0%{visibility:hidden}8%,70%{visibility:visible}100%{visibility:hidden}}
@media(prefers-contrast:more){.four-cell .disc-piece{color:#111;font:900 clamp(10px,1.4vw,15px)/1 var(--four-mono);text-shadow:0 0 3px #fff,0 0 3px #fff}}
@media(prefers-reduced-motion:reduce){
 .four-cell.win .disc-piece,.four-cell.win::after,.four-rack.resolved::after,.four-rack.popped:not(.resolved)::after{animation:none}
 .four-rack.resolved::after{display:none}
}
.four-main .results-dialog{image-rendering:auto}
@media(max-width:760px){
 .four-bar-home{font-size:12px;letter-spacing:-.04em}
 .four-bar-home::before{content:none}
 .four-main .four-bar button{letter-spacing:-.03em}
 .four-status{font-size:14px}
}