/* Layout and motion for both looks. Colour lives in four-teahouse.css and four-ink.css. */
:root{
 --four-serif:Georgia,'Times New Roman',serif;
 --four-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
 --four-column:720px;
}
body{min-height:100vh}
header{padding:12px clamp(18px,4vw,52px)}
header a{font:italic 22px/1 var(--four-serif)}
header span{font:700 10px/1 var(--four-mono);letter-spacing:.2em}

/* Setup: the title, the form, three ways in. */
.four-main{max-width:800px;padding:24px 18px 54px;text-align:center}
.four-intro{margin:0 auto 18px}
.four-kicker{margin:0 0 3px;font:700 9px/1.4 var(--four-mono);letter-spacing:.28em}
.four-intro h1{margin:0;font:italic 500 clamp(35px,5vw,55px)/1.03 var(--four-serif);letter-spacing:-.04em}
.four-intro>p:last-child{max-width:600px;margin:5px auto 0;font:13px/1.4 var(--four-serif)}
.four-setup{max-width:var(--four-column);margin:24px auto;padding:23px;text-align:center}
.four-setup-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:13px;text-align:left}
.four-setup label{font:700 10px/1.5 var(--four-mono);letter-spacing:.04em}
.four-setup input,.four-setup select{border-radius:0;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;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;font:11px/1.45 var(--four-serif)}
.four-skin-choice{display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:12px;margin:8px 0 0;padding:9px 13px;text-align:left}
.four-skin-choice label{margin:0}
.four-skin-choice select{min-height:38px;padding:7px 9px;font:700 12px/1.2 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:0;box-shadow:none;font-family:var(--four-serif)}
.four-note{margin:14px 0 0;font:11px/1.5 var(--four-serif)}
.four-error{max-width:var(--four-column);margin:12px auto;padding:12px 16px;font:12px/1.5 var(--four-serif)}

/* In play the steamer is the whole table: one slim bar, then the board with a seat at each edge. Nothing scrolls. */
body.four-in-match{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.four-in-match>header,.four-in-match .four-intro{display:none}
.four-in-match .four-main{display:flex;flex-direction:column;max-width:none;height:100vh;height:100dvh;margin:0;padding:0}
.four-in-match .four-error{flex:none;margin:6px auto}
.four-match{display:flex;flex:1;flex-direction:column;min-height:0}
.four-match[hidden]{display:none}

.four-bar{display:flex;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:6px clamp(8px,2vw,20px)}
.four-bar-title{display:flex;align-items:center;gap:12px;min-width:0}
.four-bar-home{font:italic 500 20px/1 var(--four-serif);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.four-bar-room{overflow:hidden;font:700 10px/1.4 var(--four-mono);letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}
.four-variant-badge{flex:none;padding:3px 6px;font:700 9px/1.4 var(--four-mono);letter-spacing:.12em;white-space:nowrap}
.four-bar-actions{display:flex;flex:none;gap:6px;justify-content:flex-end}
.four-main .four-bar button{flex:none;min-height:32px;padding:5px 10px;font:700 11px/1.2 var(--four-serif);white-space:nowrap}
.four-bar button[hidden]{display:none}
.four-look{display:flex;flex:none;align-items:center;gap:5px;margin:0;font:700 9px/1 var(--four-mono);letter-spacing:.12em;text-transform:uppercase}
.four-look select{width:auto;min-height:32px;margin:0;padding:4px 6px;border-radius:0;font:700 11px/1.2 var(--four-serif)}
.four-main .room-status{flex:none;min-height:0;margin:0;padding:3px 10px;font:10px/1.35 var(--four-mono);text-align:center}
.four-main .room-status:empty{display:none}

.four-arena{--seat:clamp(132px,15vw,188px);display:grid;flex:1;grid-template-columns:var(--seat) minmax(0,1fr) var(--seat);align-items:center;gap:clamp(8px,1.6vw,22px);min-height:0;padding:6px clamp(8px,1.6vw,22px) 14px}
.four-table{display:flex;flex-direction:column;align-self:stretch;min-width:0;min-height:0}
.four-status{flex:none;min-height:26px;margin:2px 0 6px;font:italic 20px/1.25 var(--four-serif)}
#results{flex:none}
#results:empty{display:none}
.four-main .results-reopen{min-height:32px;margin:0 0 6px;padding:6px 12px;font:700 11px var(--four-serif)}
.four-main .results-dialog h2{font:italic 34px/1.1 var(--four-serif)}

/* The board is as large as the room left over allows: one cell size, worked out from the width and the height. */
.four-board{container-type:size;display:flex;flex:1;align-items:center;justify-content:center;min-width:0;min-height:0}
.four-board-inner{
 --gap:6px;--pad:11px;--edge:7px;--ctl:38px;--ctl-gap:6px;
 --rows:calc(var(--ctl) + var(--ctl-gap));
 --cell:min(104px,calc((100cqw - 2*var(--pad) - 2*var(--edge) - 6*var(--gap))/7),calc((100cqh - var(--rows) - 2*var(--pad) - 2*var(--edge) - 5*var(--gap))/6));
 display:grid;gap:var(--ctl-gap);width:max-content;
}
.four-board-inner.has-pop{--rows:calc(2*(var(--ctl) + var(--ctl-gap)))}
/* Whole pixels, so every basket is drawn the same. */
@supports (width:round(down,1px,1px)){.four-board-inner{--fit:min(104px,calc((100cqw - 2*var(--pad) - 2*var(--edge) - 6*var(--gap))/7),calc((100cqh - var(--rows) - 2*var(--pad) - 2*var(--edge) - 5*var(--gap))/6));--cell:round(down,var(--fit),1px)}}
.four-columns,.four-pop-columns{display:grid;grid-template-columns:repeat(7,var(--cell));gap:var(--gap);padding:0 calc(var(--pad) + var(--edge))}
.four-pop-columns[hidden]{display:none}
.four-main .four-drop,.four-main .four-pop{min-width:0;min-height:0;height:var(--ctl);padding:0;border-radius:0;box-shadow:none;font:700 11px/1 var(--four-mono);letter-spacing:.04em;transition:background-color .15s ease,color .15s ease,opacity .15s ease}
.four-rack{position:relative;display:grid;grid-template-columns:repeat(7,var(--cell));grid-auto-rows:var(--cell);gap:var(--gap);box-sizing:border-box;padding:var(--pad);border-width:var(--edge);border-style:solid;isolation:isolate}
.four-cell{display:flex;align-items:center;justify-content:center;position:relative;min-width:0;transition:box-shadow .15s ease}
.four-cell.actionable{cursor:pointer}
.four-cell .disc-piece{position:relative;z-index:1;min-width:0;min-height:0;padding:0;font-size:0;text-shadow:none;transform-origin:50% 92%}
.four-cell.win{z-index:2}
.four-eaten{position:absolute;inset:7%;z-index:2;pointer-events:none}
.four-puff{position:absolute;left:30%;top:-34%;z-index:3;width:40%;height:62%;pointer-events:none;animation:four-puff .8s ease-out both}
.four-rack.resolved::after{content:'ORDER UP! · FOUR IN A ROW';position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%) rotate(-6deg);padding:7px 11px;font:700 clamp(10px,2.4vw,20px)/1.1 var(--four-mono);letter-spacing:.18em;white-space:nowrap;pointer-events:none}
.four-rack.popped:not(.resolved)::after{content:'NOM!';position:absolute;left:var(--pop-left);bottom:3%;z-index:4;transform:translate(-50%,0) rotate(-8deg);padding:5px 7px;font:900 clamp(11px,2vw,17px)/1 var(--four-mono);letter-spacing:.08em;pointer-events:none}

/* A seat: the dumpling you are playing, your name, and whose move it is. */
.four-seat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:14px 10px 12px;text-align:center}
.four-seat.har-gow{justify-self:end}
.four-seat.siu-mai{justify-self:start}
.four-seat{width:100%}
.four-face{position:relative;flex:none;width:min(112px,78%);aspect-ratio:1}
.four-face::after{content:'';position:absolute;left:36%;top:-30%;width:28%;height:44%;opacity:0;pointer-events:none}
.four-seat.current .four-face::after{opacity:1;animation:four-steam 1.5s ease-in-out infinite alternate}
.four-seat.chomping .four-face{animation:four-chomp .7s ease-out}
.four-seat-words{min-width:0;max-width:100%}
.four-seat h3{margin:0;overflow:hidden;font:500 16px/1.2 var(--four-serif);text-overflow:ellipsis;overflow-wrap:anywhere}
.four-dish{display:block;margin-top:4px;font:700 8px/1 var(--four-mono);letter-spacing:.18em}
.four-seat-status{padding:4px 7px;font:700 8px/1.3 var(--four-mono);letter-spacing:.1em}

.four-rules{box-sizing:border-box;width:min(470px,calc(100vw - 28px));max-height:88dvh;padding:22px 24px;overflow:auto;text-align:left}
.four-rules h2{margin:2px 0 10px;font:italic 500 28px/1.1 var(--four-serif)}
.four-main .four-rules .instructions{margin:0;padding:0;font:14px/1.6 var(--four-serif)}
.four-rules-aside{margin:10px 0 16px;font:italic 12px/1.5 var(--four-serif)}
.four-rules form{margin:0;text-align:right}

@keyframes four-puff{0%{opacity:0;transform:translateY(34%) scale(.6)}25%{opacity:.95}100%{opacity:0;transform:translateY(-42%) scale(1.12)}}
@keyframes four-steam{from{transform:translateY(8%) scaleX(.92)}to{transform:translateY(-10%) scaleX(1.06)}}
@keyframes four-chomp{0%,100%{transform:scale(1)}18%{transform:scale(1.14,.82)}36%{transform:scale(.96,1.07)}54%{transform:scale(1.1,.86)}74%{transform:scale(.98,1.03)}}
@keyframes four-win-pulse{0%{transform:scale(1)}45%{transform:scale(1.13)}100%{transform:scale(1)}}

/* Narrow screens: the far seat above the board, your own below it. */
@media(max-width:760px){
 .four-main{padding:15px 10px 42px}
 .four-intro{margin-bottom:12px}
 .four-intro h1{font-size:35px}
 .four-intro>p:last-child{font-size:11px}
 .four-setup{padding:16px}
 .four-setup-grid,.four-variant,.four-skin-choice{grid-template-columns:1fr}
 .four-variant p{font-size:10px}
 .four-bar{gap:6px;padding:5px 6px}
 .four-bar-title{gap:5px}
 .four-bar-home{font-size:14px}
 .four-bar-room{display:none}
 .four-variant-badge{padding:2px 4px;font-size:8px;letter-spacing:.06em}
 .four-bar-actions{flex:0 1 auto;gap:4px;justify-content:flex-start;min-width:0;overflow-x:auto;scrollbar-width:none}
 .four-main .four-bar button{min-height:32px;padding:4px 5px;font-size:10px}
 .four-look span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .four-look select{max-width:80px;padding:4px 0 4px 2px;font-size:10px}
 .four-arena{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px;max-height:calc(86vw + 240px);margin-block:auto;padding:6px 6px 10px}
 .four-seat[data-edge=far]{grid-row:1}
 .four-table{grid-row:2}
 .four-seat[data-edge=near]{grid-row:3}
 .four-seat,.four-seat.har-gow,.four-seat.siu-mai{flex-direction:row;justify-self:stretch;gap:10px;padding:7px 10px;text-align:left}
 .four-face{width:54px}
 .four-seat-words{flex:1}
 .four-status{min-height:23px;margin:2px 0 4px;font-size:17px}
 .four-arena:has(.has-pop){max-height:calc(86vw + 279px)}
 .four-board-inner{--gap:4px;--pad:6px;--edge:5px;--ctl:34px;--ctl-gap:5px}
}
@media(max-height:520px){
 .four-arena{--seat:120px;padding-bottom:8px}
 .four-seat{padding:8px 6px}
 .four-face{width:56px}
 .four-status{min-height:20px;margin:0 0 3px;font-size:15px}
 .four-board-inner{--gap:4px;--pad:6px;--edge:5px;--ctl:26px;--ctl-gap:4px}
}
@media(prefers-reduced-motion:reduce){
 .four-main .four-drop,.four-main .four-pop,.four-cell{transition:none}
 .four-puff{display:none}
 .four-seat.current .four-face::after,.four-seat.chomping .four-face{animation:none}
 .four-rack.popped:not(.resolved)::after{display:none}
}