:root{
 --four-basket:url('./assets/basket.webp');
 --four-steam:url('./assets/steam.webp');
 --four-cream:#f8e8c7;
 --four-gold:#e5a442;
 --four-serif:Georgia,'Times New Roman',serif;
 --four-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}

body{
 min-height:100vh;
 color:var(--four-cream);
 background:linear-gradient(180deg,#1a281dd1 0,#203128b8 42%,#16241cc7 100%),url('./assets/dim-sum-steamer.jpg') center top / cover fixed;
}
header{padding:12px clamp(18px,4vw,52px);background:#1e3025df;border-bottom-color:#d6a66d8c}
header a{color:#f8e8c7;font:italic 22px/1 var(--four-serif)}
header span{color:#f3a66d;font-size:10px;letter-spacing:.2em}

.four-main{max-width:950px;padding:24px 18px 70px;text-align:center}
.four-intro{margin:0 auto 18px}
.four-intro .four-kicker{margin:0 0 3px;color:#f5b16f;font:700 9px/1.4 var(--four-mono);letter-spacing:.28em}
.four-intro h1{margin:0;color:#fff0ce;font:italic 500 clamp(35px,5vw,55px)/1.03 var(--four-serif);letter-spacing:-.04em;text-shadow:2px 3px #44271566}
.four-intro>p:last-child{max-width:600px;margin:5px auto 0;color:#f6dcb4;font:13px/1.4 var(--four-serif)}

.four-setup{max-width:670px;margin:24px auto;padding:23px;background:#1e382bdc;border:1px solid #d5a86d;border-radius:3px;box-shadow:0 15px 45px #100d09a6,inset 0 0 0 3px #f1c78321}
.four-setup-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:13px;text-align:left}
.four-setup label{color:#f9ddb0;font:700 10px/1.5 var(--four-mono);letter-spacing:.04em}
.four-setup input,.four-setup select{background:#13281e;border-color:#b28c5e;color:#ffedcc;border-radius:2px;font-family:var(--four-serif)}
.four-variant{display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:7px 12px;margin:16px 0 0;padding:12px 13px;background:#f5dba617;border:1px dashed #deb87a8c;text-align:left}
.four-variant label{margin:0}
.four-variant select{width:100%;min-height:38px;padding:7px 9px;font:700 12px/1.2 var(--four-serif)}
.four-variant p{grid-column:1/-1;margin:0;color:#d7c7a7;font:11px/1.45 var(--four-serif)}
.four-setup-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin-top:14px}
.four-main button{border-radius:2px;box-shadow:none;font-family:var(--four-serif)}
.four-main button:not(:disabled):hover{filter:brightness(1.1)}
.four-main button:focus-visible{outline:2px solid #f6d995;outline-offset:3px}
.four-main button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect){background:#efb362;color:#36251a;border-color:#f9cf8d}
.four-main .secondary{background:#244638;color:#fce8c5;border-color:#c89a65}
.four-note{margin:14px 0 0;color:#e3ceaa;font:11px/1.5 var(--four-serif)}
.four-error{max-width:720px;margin:12px auto;padding:12px 16px;background:#592a27;color:#ffdcce;border:1px solid #be7768;border-radius:2px;font-size:12px}

/* In play: the painted steamer is the table, and it shows. */
body.four-in-match{background:radial-gradient(ellipse at 50% 54%,#14261b66 0,#122018b8 62%,#0c1711e6 100%),url('./assets/dim-sum-steamer.jpg') center / cover}
.four-bar{background:#16271df0;border-bottom:1px solid #d6a66d8c}
.four-bar-home{color:#fff0ce}
.four-bar-room{color:#d9c7a2}
.four-variant-badge{color:#f5b16f;border:1px solid #dfb67c85}
.four-look{color:#d9c7a2}
.four-look select{background:#244638;color:#fce8c5;border:1px solid #c89a65}
.four-main .room-status{background:#16271dcc;color:#c8d7bb}
.four-status{color:#fff0ce;text-shadow:0 2px 6px #0b140fd9}

.four-seat{background:#182b20d9;border:1px solid #d2a97180;border-radius:10px;box-shadow:0 10px 26px #0a120dab,inset 0 0 0 3px #f1c78314;color:#ffedcd;transition:background-color .2s ease,border-color .2s ease}
.four-seat.current{background:#27432fe8;border-color:#f6d995;box-shadow:0 10px 26px #0a120dab,0 0 0 2px #f6d99538,inset 0 0 0 3px #f1c78324}
.four-seat.won{border-color:#ffe2a3;box-shadow:0 0 30px #f4d68e66,inset 0 0 0 3px #f1c78333}
.four-seat.empty,.four-seat.away{opacity:.62}
.four-face{background:var(--four-basket) center / contain no-repeat;border-radius:50%}
.four-face::before{content:'';position:absolute;inset:11%;background:center / contain no-repeat;filter:drop-shadow(0 3px 2px #0a120d99)}
.four-seat.har-gow .four-face::before{background-image:url('./assets/piece-hargow.webp')}
.four-seat.siu-mai .four-face::before{background-image:url('./assets/piece-siumai.webp')}
.four-seat.empty .four-face::before{opacity:0}
.four-face::after{background:var(--four-steam) center / contain no-repeat}
.four-dish{color:#e1c499}
.four-seat-status{color:#d9c7a2;border:1px solid #d2a97155;border-radius:2px}
.four-seat.current .four-seat-status,.four-seat.won .four-seat-status{background:#efb362;color:#36251a;border-color:#f9cf8d}

/* A leaf-lined bamboo tray of forty-two little baskets. */
.four-rack{background:linear-gradient(#16301fd9,#12281ae6);border-color:#d9a65c;border-radius:14px;box-shadow:inset 0 0 0 2px #6b4320,inset 0 0 0 4px #f6d89e59,0 4px 0 #683e1f,0 14px 30px #0a0f0bcc}
.four-cell{background:var(--four-basket) center / contain no-repeat;border-radius:50%}
.four-cell .disc-piece,.four-eaten{background:center / contain no-repeat transparent;filter:drop-shadow(0 3px 2px #0a120d99)}
.four-cell .disc-piece{width:80%;height:80%;border:0;border-radius:0;box-shadow:none}
.four-cell .disc-piece.har-gow,.four-eaten.har-gow{background-image:url('./assets/piece-hargow.webp')}
.four-cell .disc-piece.siu-mai,.four-eaten.siu-mai{background-image:url('./assets/piece-siumai.webp')}
/* Being eaten is a surprise, even when you can see it coming. */
.four-cell.pop-preview .disc-piece.har-gow,.four-eaten.har-gow{background-image:url('./assets/piece-hargow-oh.webp')}
.four-cell.pop-preview .disc-piece.siu-mai,.four-eaten.siu-mai{background-image:url('./assets/piece-siumai-oh.webp')}
.four-eaten{inset:10%}
.four-cell.actionable:hover{box-shadow:0 0 0 2px #fff0ba80}
.four-cell.preview:not(:has(.disc-piece)){box-shadow:0 0 0 2px #ffe5a1,0 0 16px #ffe2a180}
.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/piece-hargow.webp')}
.four-board-inner[data-me="1"] .four-cell.preview::before{background-image:url('./assets/piece-siumai.webp')}
.four-cell.pop-preview{box-shadow:0 0 0 3px #fc8769,0 0 14px #ffae75}
.four-cell.just-placed .disc-piece{filter:drop-shadow(0 3px 2px #0a120d99) brightness(1.08)}
.four-puff{background:var(--four-steam) center / contain no-repeat}
.four-cell.win{box-shadow:0 0 0 3px #fff1bd,0 0 24px #f4d68e}
.four-cell.win .disc-piece{animation:four-win-pulse .8s ease-out both}
.four-cell.win::after{content:'';position:absolute;left:34%;top:-30%;z-index:3;width:32%;height:48%;background:var(--four-steam) center / contain no-repeat;pointer-events:none;animation:four-steam 1.2s ease-in-out infinite alternate}

/* The row you drop from shows your dumpling over the column you are pointing at. */
.four-main .four-drop{background:center / auto 92% no-repeat transparent;color:#f1d7aa;border:0;border-bottom:2px solid #d9a65c66;text-shadow:0 1px 3px #0b140f}
.four-main .four-drop:disabled{opacity:.3}
.four-main .four-drop:hover:not(:disabled),.four-main .four-drop.hovered:not(:disabled){color:transparent;text-shadow:none;border-bottom-color:#ffe5a1;filter:none}
.four-board-inner[data-me="0"] .four-drop:is(:hover,.hovered):not(:disabled){background-image:url('./assets/piece-hargow.webp')}
.four-board-inner[data-me="1"] .four-drop:is(:hover,.hovered):not(:disabled){background-image:url('./assets/piece-siumai.webp')}
.four-main .four-pop{background:#16271dcc;color:#d9c7a2;border:1px dashed #d2a97166;border-radius:999px;text-transform:uppercase}
.four-main .four-pop:disabled{opacity:.22}
.four-main .four-pop:not(:disabled){background:#b9482fe6;color:#fff0ce;border:1px solid #ffb48a}
.four-main .four-pop:hover:not(:disabled),.four-main .four-pop.hovered:not(:disabled){background:#d85a3c;border-color:#ffe0c2}

.four-rack.resolved::after{background:#2d4a37ef;color:#fff0ce;border:1px solid #f7ce8b;box-shadow:0 4px 24px #06120dcc;animation:four-seal-out 1.8s .35s both}
.four-rack.popped:not(.resolved)::after{background:#f7dfad;color:#744321;border:2px solid #b75d3a;box-shadow:2px 3px #2a2517a3;animation:four-nom 1s .3s ease-out both}
.four-main .results-reopen{background:#31513c;color:#ffdfab;border:1px solid #e2ad69}
.four-main .results-dialog,.four-rules{background:#254131;color:#fff0cf;border:1px solid #e9b878}
.four-main .results-summary{color:#c0b7a3}
.four-rules{border-radius:4px;box-shadow:0 20px 60px #060c08d9,inset 0 0 0 3px #f1c78321}
.four-rules::backdrop{background:#0b140fb3}
.four-rules .four-kicker{color:#f5b16f}
.four-main .four-rules .instructions{color:#f6dcb4}
.four-rules-aside{color:#d7c7a7}

@keyframes four-seal-out{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(1.25)}25%,70%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(.95)}}
@keyframes four-nom{0%{opacity:0;transform:translate(-50%,15px) rotate(-16deg) scale(.7)}25%,65%{opacity:1;transform:translate(-50%,-12px) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-22px) rotate(-3deg) scale(1.1)}}

@media(max-width:760px){
 body{background-position:center top}
 .four-setup-grid,.four-variant{grid-template-columns:1fr}
 .four-seat{border-radius:8px}
 .four-rack{border-radius:10px}
}
@media(prefers-contrast:more){.four-cell .disc-piece{color:#111;font:900 clamp(10px,1.4vw,15px)/1 var(--four-serif);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-seat{transition:none}
}
.four-skin-choice{background:#f5dba617;border:1px dashed #deb87a8c}
body{background-attachment:scroll}