/* Ink and paper teahouse print. Layout lives in style.css. */
:root{color-scheme:light;--four-steam:url('./assets/steam.svg');--four-ink:#111;--four-paper:#fff;--four-stock:#f4efe3;--four-roe:#d0301c;background:var(--four-stock);color:var(--four-ink)}
body{color:var(--four-ink);font-family:var(--four-serif);background:var(--four-stock) url('./assets/steamer-print.svg') center 46px / min(1200px,130vw) auto no-repeat}
header{background:var(--four-ink);border-bottom:3px solid var(--four-ink);color:var(--four-paper)}
header a,header span{color:var(--four-paper)}
.four-main{background:var(--four-paper);border-right:2px solid var(--four-ink);border-bottom:2px solid var(--four-ink);border-left:2px solid var(--four-ink)}
.four-main p{color:inherit}
.four-intro{padding-bottom:12px;border-bottom:2px solid var(--four-ink)}
.four-intro .four-kicker,.four-intro h1,.four-intro>p:last-child{color:var(--four-ink);text-shadow:none}
.four-setup{background:var(--four-paper);border:3px double var(--four-ink);border-radius:0;box-shadow:none}
.four-setup label,.four-variant p,.four-note{color:var(--four-ink)}
.four-setup input,.four-setup select,.player-name__input{background:var(--four-paper);color:var(--four-ink);border:2px solid var(--four-ink);border-radius:0;box-shadow:none}
.four-setup input::placeholder{color:var(--four-ink)}
.player-name__label,.player-name__hint{color:var(--four-ink);font-family:var(--four-serif)}
.player-name__input{font-family:var(--four-serif)}
.player-name__input:focus-visible,.four-setup input:focus-visible,.four-setup select:focus-visible{outline:3px solid var(--four-ink);outline-offset:2px}
.four-variant{background:var(--four-stock);border:1px solid var(--four-ink)}
.four-skin-choice{background:var(--four-paper);border:1px solid var(--four-ink)}
.four-main button,.four-main button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect){background:var(--four-ink);color:var(--four-paper);border:2px solid var(--four-ink);box-shadow:none}
.four-main .secondary,.four-main .results-inspect{background:var(--four-paper);color:var(--four-ink);border:2px solid var(--four-ink)}
.four-main button:not(:disabled):hover,.four-main .secondary:not(:disabled):hover{background:var(--four-paper);color:var(--four-ink);filter:none}
.four-main .secondary:not(:disabled):hover{background:var(--four-ink);color:var(--four-paper)}
.four-main button:focus-visible{outline:3px solid var(--four-ink);outline-offset:3px}
.four-main button:disabled{opacity:1;background:var(--four-stock);color:var(--four-ink);border-style:dashed;cursor:not-allowed}
.four-error{background:var(--four-paper);color:var(--four-ink);border:3px solid var(--four-ink)}
.four-main .results-reopen,.four-main .results-dialog button{background:var(--four-ink);color:var(--four-paper);border:2px solid var(--four-ink);border-radius:0;box-shadow:none;font-family:var(--four-serif)}
.four-main .results-dialog,.four-rules{background:var(--four-paper);color:var(--four-ink);border:3px double var(--four-ink);border-radius:0;box-shadow:none;color-scheme:light}
.four-main .results-dialog::backdrop,.four-rules::backdrop{background:var(--four-ink);backdrop-filter:none}
.four-main .results-dialog h2,.four-main .results-dialog .results-summary,.four-main .results-dialog th,.four-main .results-dialog td:last-child{color:var(--four-ink)}
.four-main .results-dialog th,.four-main .results-dialog td{border-bottom:1px solid var(--four-ink)}
.four-main .results-dialog button:not(:disabled):hover{background:var(--four-paper);color:var(--four-ink);filter:none}
.four-main .results-dialog :focus-visible{outline:3px solid var(--four-ink)}
.four-rack{background:var(--four-ink);border-color:var(--four-ink);box-shadow:inset 0 0 0 2px var(--four-paper)}
.four-rack::before{display:none}
.four-cell{background:var(--four-ink);border:1px solid var(--four-paper);border-radius:50%;box-shadow:none;overflow:visible}
.four-cell::after,.four-cell .disc-piece::before{display:none!important}
.four-cell:not(:has(.disc-piece))::before{content:'·  ·  ·';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;color:var(--four-paper);font:700 clamp(9px,1.7vw,15px)/1 Georgia,serif;letter-spacing:0;opacity:1;pointer-events:none}
.four-cell:has(.disc-piece){border-color:var(--four-ink)}
.four-cell .disc-piece,.four-eaten{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;font-size:0;text-shadow:none;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;filter:none}
.four-cell .disc-piece::after{content:none}
.four-cell .disc-piece.har-gow,.four-eaten.har-gow{background-image:url('./assets/hargow.svg')}
.four-cell .disc-piece.siu-mai,.four-eaten.siu-mai{background-image:url('./assets/siumai.svg')}
.four-cell.preview:not(:has(.disc-piece)){border-color:var(--four-paper);box-shadow:0 0 0 2px var(--four-paper)}
.four-cell.pop-preview{box-shadow:0 0 0 2px var(--four-paper)}
.four-cell.win{border-color:var(--four-roe);box-shadow:0 0 0 3px var(--four-roe)}
.four-cell.win .disc-piece{box-shadow:none;animation:four-ink-bob 1.1s ease-in-out infinite alternate;overflow:visible}
.four-cell.win .disc-piece::after{content:'';display:block;position:absolute;left:38%;top:-22%;width:24%;height:27%;background:url('./assets/steam.svg') center/contain no-repeat;animation:four-ink-steam 1.1s ease-in-out infinite alternate;pointer-events:none}
.four-rack.resolved{box-shadow:inset 0 0 0 2px var(--four-paper)}
.four-rack.resolved::after{background:var(--four-paper);color:var(--four-ink);border:2px solid var(--four-paper);box-shadow:none;animation:four-ink-seal 1.8s .35s both}
.four-rack.popped:not(.resolved)::after{background:var(--four-paper);color:var(--four-ink);border:2px solid var(--four-paper);box-shadow:none;animation:four-ink-nom .9s .3s ease-out both}
/* In play: the printed steamer behind, an ink bar on top, the two seats as printed place cards. */
body.four-in-match{background:var(--four-stock) url('./assets/steamer-print.svg') center 55% / min(150vh,150vw) auto no-repeat}
.four-in-match .four-main{background:none;border:0}
.four-bar{background:var(--four-ink);color:var(--four-paper)}
.four-bar-home,.four-bar-room,.four-variant-badge{color:var(--four-paper)}
.four-variant-badge{border:1px solid var(--four-paper)}
.four-look{color:var(--four-paper)}
.four-look select{background:var(--four-ink);color:var(--four-paper);border:2px solid var(--four-paper)}
.four-look select:focus-visible{outline:3px solid var(--four-paper);outline-offset:2px}
.four-main .four-bar button,.four-main .four-bar button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect){background:var(--four-ink);color:var(--four-paper);border:2px solid var(--four-paper)}
.four-main .four-bar button:not(.secondary):not(:disabled),.four-main .four-bar button:not(:disabled):hover,.four-main .four-bar button[aria-pressed=true]{background:var(--four-paper);color:var(--four-ink)}
.four-main .four-bar button:focus-visible{outline-color:var(--four-paper)}
.four-main .four-bar button:disabled{background:var(--four-ink);color:#999;border:2px dashed #999}
.four-main .room-status,.four-status{color:var(--four-ink)}
.four-main .room-status{background:var(--four-paper);border-bottom:2px solid var(--four-ink)}
.four-status{text-shadow:0 0 6px var(--four-stock),0 0 6px var(--four-stock)}
.four-seat{background:var(--four-paper);color:var(--four-ink);border:2px solid var(--four-ink)}
.four-seat.siu-mai{background:var(--four-ink);color:var(--four-paper);border-color:var(--four-ink);box-shadow:inset 0 0 0 2px var(--four-ink),inset 0 0 0 3px var(--four-paper)}
.four-seat.current{outline:3px double var(--four-ink);outline-offset:3px}
.four-seat.won{outline:3px solid var(--four-roe);outline-offset:3px}
.four-seat.empty,.four-seat.away{border-style:dashed}
.four-seat.empty .four-face{opacity:.25}
.four-face{background:var(--four-ink) url('./assets/hargow.svg') center / 86% no-repeat;border-radius:50%}
.four-seat.siu-mai .four-face{background-image:url('./assets/siumai.svg')}
.four-face::after{background:var(--four-steam) center / contain no-repeat;filter:invert(1)}
.four-seat.siu-mai .four-face::after{filter:none}
.four-seat h3,.four-dish{color:inherit}
.four-seat-status{border:1px solid currentColor}
.four-seat.current .four-seat-status,.four-seat.won .four-seat-status{background:var(--four-ink);color:var(--four-paper)}
.four-seat.siu-mai.current .four-seat-status,.four-seat.siu-mai.won .four-seat-status{background:var(--four-paper);color:var(--four-ink)}
.four-rules{border:3px double var(--four-ink);border-radius:0;box-shadow:none;color:var(--four-ink);color-scheme:light}
.four-rules .four-kicker,.four-rules h2,.four-main .four-rules .instructions,.four-rules-aside{color:var(--four-ink)}
.four-puff{background:var(--four-steam) center / contain no-repeat}
.four-eaten{inset:0}
.four-main .four-drop,.four-main .four-pop{background:var(--four-ink);color:var(--four-paper);border:1px solid var(--four-ink);box-shadow:none}
.four-main .four-pop{text-transform:uppercase}
.four-main .four-drop:is(:hover,.hovered):not(:disabled),.four-main .four-pop:is(:hover,.hovered):not(:disabled){background:var(--four-paper);color:var(--four-ink);border:1px solid var(--four-ink)}
.four-main .four-drop:disabled,.four-main .four-pop:disabled{background:var(--four-stock);color:#8a8478;border:1px dashed #8a8478}
@keyframes four-ink-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes four-ink-steam{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes four-ink-seal{0%{visibility:hidden;transform:translate(-50%,-50%) rotate(-10deg) scale(1.2)}1%,70%{visibility:visible;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}100%{visibility:hidden;transform:translate(-50%,-50%) rotate(-6deg) scale(.95)}}
@keyframes four-ink-nom{0%{visibility:hidden;transform:translate(-50%,15px) rotate(-16deg) scale(.7)}1%,60%{visibility:visible;transform:translate(-50%,-12px) rotate(-8deg) scale(1)}100%{visibility:hidden;transform:translate(-50%,-22px) rotate(-3deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){
 .four-cell.win .disc-piece,.four-cell.win .disc-piece::after,.four-rack.resolved::after,.four-rack.popped:not(.resolved)::after{animation:none!important}
 .four-cell.win .disc-piece::after{display:none}
 .four-rack.resolved::after{display:none}
 .four-rack.popped:not(.resolved)::after{display:none}
}
.four-status{align-self:center;padding:1px 10px;background:var(--four-stock);text-shadow:none}
.four-cell.pop-preview .disc-piece.har-gow,.four-eaten.har-gow{background-image:url('./assets/hargow-oh.svg')}
.four-cell.pop-preview .disc-piece.siu-mai,.four-eaten.siu-mai{background-image:url('./assets/siumai-oh.svg')}
@media(max-width:760px){.four-main .four-bar button,.four-main .four-bar button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect){padding:4px 5px;border-width:1px}}