/* Generated by game-rules.mjs. Edit game-rules-themes.mjs. */

:root{
  --bg:#13281e; /* games/four/four-teahouse.css .four-setup input,.four-setup select: #13281e */
  --ink:#f8e8c7; /* games/four/four-teahouse.css :root --four-cream: #f8e8c7 */
  --muted:#e3ceaa; /* games/four/four-teahouse.css .four-note: #e3ceaa */
  --accent:#efb362; /* games/four/four-teahouse.css .four-main button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect): #efb362 */
  --line:#d5a86d; /* games/four/four-teahouse.css .four-setup: #d5a86d */
  --panel:#1e382b; /* games/four/four-teahouse.css .four-setup: #1e382b */
  --display:Georgia,'Times New Roman',serif; /* games/four/four-teahouse.css :root --four-serif: Georgia,'Times New Roman',serif */
  --reading:Georgia,'Times New Roman',serif; /* games/four/four-teahouse.css :root --four-serif: Georgia,'Times New Roman',serif */
  --label:ui-monospace,SFMono-Regular,Consolas,monospace; /* games/four/four-teahouse.css :root --four-mono: ui-monospace,SFMono-Regular,Consolas,monospace */
  --sheet:#13281e; /* games/four/four-teahouse.css .four-setup input,.four-setup select: #13281e */
  --titleInk:#fff0ce; /* games/four/four-teahouse.css .four-intro h1: #fff0ce */
  --dot:#efb362; /* games/four/four-teahouse.css .four-main button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect): #efb362 */
  --weight:500; /* games/four/four-teahouse.css .four-intro h1: 500 */
  --tracking:-.04em; /* games/four/four-teahouse.css .four-intro h1: -.04em */
  --casing:none; /* games/four/four-teahouse.css .four-main button: none */
  --italic:italic; /* games/four/four-teahouse.css .four-intro h1: italic */
  --buttonBg:#efb362; /* games/four/four-teahouse.css .four-main button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect): #efb362 */
  --buttonInk:#36251a; /* games/four/four-teahouse.css .four-main button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect): #36251a */
  --buttonBorder:#efb362; /* games/four/four-teahouse.css .four-main button:not(.secondary):not(.four-drop):not(.four-pop):not(.results-reopen):not(.results-inspect): #efb362 */
  --buttonRadius:2px; /* games/four/four-teahouse.css header: 2px */
  --buttonShadow:none; /* games/four/four-teahouse.css .four-main button: none */
  --panelInk:#f8e8c7; /* games/four/four-teahouse.css :root --four-cream: #f8e8c7 */
  --panelMuted:#e3ceaa; /* games/four/four-teahouse.css .four-note: #e3ceaa */
  --panelBorder:#d5a86d; /* games/four/four-teahouse.css .four-setup: #d5a86d */
  --panelRadius:3px; /* games/four/four-teahouse.css .four-intro .four-kicker: 3px */
  --panelShadow:none; /* games/four/four-teahouse.css .four-main button: none */
  --cover-position:50% 65%;
  --motif:"♨";
}
:root{--reading-inset:25px}.rulebook,.glance{border:1px solid #d5a86d;box-shadow:0 15px 45px #100d09a6,inset 0 0 0 3px #f1c78321;background:#1e382b}.rulebook{padding:24px}

[data-toy=pop-basket],[data-toy=steamer-rack]{position:relative;aspect-ratio:7/6;padding-bottom:166px;box-sizing:content-box;margin:24px 0 32px;width:min(100%,540px);margin-inline:auto}
.sum-stage{position:absolute;inset:0;display:flex;flex-direction:column;min-width:0}
.sum-top{height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.sum-rack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;border:6px double #d9a65c;border-radius:12px;background:#142d1d;padding:5px;aspect-ratio:7/6;box-shadow:0 4px #683e1f;box-sizing:border-box}
.sum-hole{position:relative;min-width:0;aspect-ratio:1;border:0;padding:0;background:url(assets/basket.webp) 50%/contain no-repeat;cursor:pointer}
.sum-piece{display:block;width:90%;height:90%;object-fit:contain;margin:auto;pointer-events:none}
.sum-columns{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:44px;flex-shrink:0;padding:0 11px}
.sum-drop{min-width:0;border:0;border-bottom:1px solid #d9a65c88;background:transparent;color:var(--ink);font:14px Georgia;cursor:pointer}
.sum-drop:focus-visible:not(:disabled){background:url(assets/piece-hargow.webp) 50%/contain no-repeat;color:transparent}
.sum-drop:hover:not(:disabled){background:url(assets/piece-hargow.webp) 50%/contain no-repeat;color:transparent}
.sum-drop:disabled{opacity:.3}
.sum-plate{min-height:40px;padding:8px 0;text-align:center;font:15px Georgia;color:var(--ink)}
.sum-hole.sum-win{box-shadow:inset 0 0 0 2px #ffe2a3;border-radius:50%}
.sum-celebrate .sum-piece{animation:sum-hop .5s ease-out 1}
.sum-celebrate::after,.sum-cloud{content:"";position:absolute;inset:-40% 15% 15%;background:url(assets/steam.webp) 50%/contain no-repeat;opacity:0;pointer-events:none}
.sum-celebrate::after{animation:sum-steam .8s ease-out 1}
.sum-fall{animation:sum-fall .44s ease-in 1}
.sum-settle{animation:sum-settle .25s ease-out var(--delay,0s) 1 backwards}
.sum-eaten{position:absolute;inset:0}
.sum-bite{animation:sum-bite .3s ease-in 1 forwards}



/* Temporary painted-object stand-ins; exact replacement slots listed in art-wanted.md. */.sum-pot{position:relative;width:80px;height:62px;border:2px solid #e3ceaa;border-radius:45% 50% 35% 40%;background:#326044 url(assets/rules-teapot.webp) 50%/contain no-repeat;cursor:pointer;transform-origin:75% 70%}
.sum-pot::before{content:"";position:absolute;right:-8px;top:9px;width:20px;height:14px;border-top:6px solid #e3ceaa;transform:rotate(-35deg)}
.sum-pot::after{content:"";position:absolute;left:20px;top:18px;width:25px;height:25px;border:3px dotted #e3ceaa;border-radius:50%}
.sum-lid{position:relative;width:60%;height:48px;border:4px double #d9a65c;border-radius:50%;background:repeating-linear-gradient(8deg,#74522d 0 3px,#aa7f44 4px 6px);background-image:url(assets/rules-steamer-lid.webp),repeating-linear-gradient(8deg,#74522d 0 3px,#aa7f44 4px 6px);background-size:contain;cursor:pointer;transition:transform .5s}
.sum-lid::before{content:"";position:absolute;left:43%;top:-7px;width:14%;height:14px;border:3px solid #d9a65c;border-radius:50%}
.sum-lid[data-lifted=true]{transform:translateY(-8px) rotate(-5deg)}
.sum-lift .sum-cloud{animation:sum-steam 1s ease-out 1}
.sum-pour{animation:sum-pour .7s ease-in-out 1}
.sum-pour .sum-cloud{animation:sum-steam .8s ease-out 1}
[data-toy=header-teapot]{position:absolute;left:5%;top:14%;width:30%;height:45%;z-index:1}
.sum-header-pot{position:relative;width:100%;height:100%;border:0;background:transparent;cursor:pointer}
.cover-copy{position:relative;pointer-events:none}
.cover-copy a{pointer-events:auto}
[data-toy=last-dumpling]{height:88px;margin:16px 0}
.sum-last{width:80px;height:80px;border:0;background:transparent;cursor:pointer}
.sum-last[data-eaten=true] img{opacity:0;transition:opacity .3s}
.sum-last[data-eaten=true]{animation-fill-mode:backwards}
[data-toy] button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@keyframes sum-fall{0%{transform:translateY(var(--fall))}
80%{transform:translateY(3px) scale(1.05,.95)}}
@keyframes sum-settle{0%{transform:translateY(-100%)}}
@keyframes sum-bite{to{transform:scale(0);opacity:0}}
@keyframes sum-hop{45%{transform:translateY(-8px)}}
@keyframes sum-steam{0%{opacity:0;transform:translateY(15px) scale(.7)}
35%{opacity:.8}
to{opacity:0;transform:translateY(-25px) scale(1.2)}}
@keyframes sum-pour{45%{transform:rotate(12deg)}}
[data-toy]{overflow:clip;min-width:0;max-width:100%;overflow-wrap:anywhere;transition:height .26s ease}
[data-toy] [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){[data-toy],[data-toy] *{animation:none!important;transition:none!important}}