/* Original dim sum obstacles, introduced across fifty tables. */
#levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;min-width:0}
.level-group h3{margin:0 0 12px;font-size:13px;color:var(--green)}
.level-group h3 small{color:var(--muted);font-weight:400;margin-left:6px}
.level-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#levels button{width:100%;max-width:40px;height:auto;aspect-ratio:1;justify-self:center}
.journey{align-items:flex-start}.journey>div:first-child{min-width:195px}
.tile.crate{background:repeating-linear-gradient(90deg,#ac7444 0 8px,#e2b676 8px 11px);box-shadow:inset 0 0 0 4px #80502c,0 3px 0 #67452f66}
.tile.crate::after{content:'';position:absolute;inset:22% 8%;border-top:4px solid #f7cd88;border-bottom:4px solid #f7cd88;transform:rotate(-12deg)}
.tile.frost{box-shadow:inset 0 0 0 3px #a6d1db,0 3px 0 #67452f66}
.tile.frost::before{content:'';position:absolute;inset:3px;background:linear-gradient(130deg,#ffffff80,transparent 48%,#ffffff55);border-radius:6px;pointer-events:none;z-index:1}
.layer-count{position:absolute;top:2px;right:2px;z-index:3;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fffaf0;color:#654826;font-size:10px;font-weight:700;box-shadow:0 1px 4px #0003}
.tile.sealed{box-shadow:inset 0 0 0 3px #c67055}
.seal-mark{position:absolute;bottom:2px;left:2px;color:#fff8dc;background:#a84335;border:1px solid #edba83;border-radius:50%;font-size:18px;line-height:1;width:22px;height:22px;z-index:2}
.tile.honey{background:radial-gradient(ellipse at 35% 25%,#ffe9a3,#eeb333 50%,#c98414);box-shadow:inset 0 0 0 3px #d49729,0 3px 0 #67452f66}
.tile.honey::after{content:'≋';position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#fff0b9;text-shadow:0 2px #ac731e}
.tile:disabled{cursor:default;opacity:1}.tile:disabled:hover{transform:none}.tile:focus-visible{outline:3px solid #467855;outline-offset:1px}
.obstacle-info ul{padding-left:16px;font-size:11px;line-height:1.7;color:var(--muted)}
.mobile-obstacles{display:none}
@media(max-width:1100px){.mobile-obstacles{display:block;margin-top:20px;background:#faf7eef5;padding:16px 20px;border-radius:12px;font-size:12px;line-height:1.8}.mobile-obstacles summary{cursor:pointer;font-weight:700;color:var(--green)}}
@media(max-width:650px){#levels{grid-template-columns:1fr;gap:18px}.level-buttons{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}#levels button{font-size:10px}.journey>div:first-child{min-width:0}.layer-count{width:14px;height:14px;font-size:9px}.seal-mark{font-size:14px;width:17px;height:17px}.tile.honey::after{font-size:24px}}

.audio-controls{display:flex;align-items:center;gap:8px}.music-volume{display:flex;flex-direction:column;gap:3px;font-size:9px;color:var(--muted)}.music-volume input{width:85px;accent-color:var(--green)}header button[aria-pressed="true"]{background:#e0e8d5;border-color:#83986e}@media(max-width:850px){header .edition{display:none}}@media(max-width:650px){header{height:auto;min-height:68px;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}.audio-controls{margin-left:auto}.audio-controls button{font-size:11px;padding:8px 10px}.music-volume input{width:65px}}

.tile.special::after{content:'✦';z-index:3;pointer-events:none}
.tile.special-row::after{content:'↔';color:#287496;background:#fff9;border-radius:4px}
.tile.special-column::after{content:'↕';color:#287496;background:#fff9;border-radius:4px}
.tile.special-blast::after{content:'✹';color:#b83a31;background:#fff9;border-radius:4px}
.tile.special-color{background:conic-gradient(#ffd8dc,#fff2af,#bcf0d7,#bfd8ff,#ecd2ff,#ffd8dc)}
.tile.special-color::after{content:'🌈';font-size:18px}
.tile.special-feast::after{content:'♛';color:#8b4399;background:#fff9;border-radius:4px}
.combo-guide{margin-top:20px;padding:18px 24px;background:#faf7eef5;border-radius:14px;font-size:12px;line-height:1.9}
.combo-guide summary{cursor:pointer;font-weight:700;color:var(--green)}
.combo-guide>div{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}.combo-guide>div>p:last-child{grid-column:1/-1}
@media(max-width:650px){.combo-guide>div{display:block}}

#servingAnimations{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
.serving-basket,.serving-steam{position:absolute;pointer-events:none;will-change:transform,opacity}
.basket-base,.basket-rim{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}
.basket-base{z-index:0;filter:drop-shadow(0 6px 4px #4e2b1840)}
.basket-contents{position:absolute;inset:0;z-index:1}.basket-food{position:absolute}
.basket-rim{z-index:2;clip-path:inset(64% 0 0 0)}
.tile.square-collected>.food-art{opacity:0}
.serving-steam{z-index:3;object-fit:contain}

/* Steam belongs to the food sprite, leaving special and obstacle markers visible. */
.tile>.food-art::after{content:'';position:absolute;left:8%;top:-32%;width:84%;height:100%;background:url('assets/steam-puff.png') center/contain no-repeat;opacity:0;pointer-events:none;transform:translateY(8px) scale(.65);filter:drop-shadow(0 1px 2px #be844a25)}
@keyframes tile-steam{0%{opacity:0;transform:translateY(8px) scale(.65)}25%{opacity:.6}70%{opacity:.3}100%{opacity:0;transform:translateY(-30px) scale(1.12)}}
@media(hover:hover) and (pointer:fine){.tile:not(:disabled):not(.clearing):not(.square-collected):hover{z-index:4}.tile:not(:disabled):not(.clearing):not(.square-collected):hover>.food-art::after{animation:tile-steam 1.65s ease-out infinite}}
.tile:not(:disabled):not(.clearing):not(.square-collected):focus-visible>.food-art::after{animation:tile-steam 1.65s ease-out infinite}
@media(prefers-reduced-motion:reduce){.tile:not(:disabled):not(.clearing):not(.square-collected):hover>.food-art::after,.tile:not(:disabled):not(.clearing):not(.square-collected):focus-visible>.food-art::after{animation:none;opacity:.2;transform:translateY(-4px) scale(.8)}}

.special-art{display:block;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 2px 2px #76512b30)}
.special-art.art-column{transform:rotate(90deg)}
.special-food-badge{position:absolute;left:0;bottom:0;width:34%;height:34%;background:#fff8dc;border:1px solid #dfbb75;border-radius:50%;pointer-events:none;z-index:3}
.tile.special-row::after,.tile.special-column::after,.tile.special-blast::after,.tile.special-color::after,.tile.special-feast::after{content:none}
.tile.special-color{background:radial-gradient(ellipse,#fff7e4,#e3d9f1)}
.tile.special-blast .special-food-badge{left:34%;bottom:35%;width:30%;height:30%;background:none;border:none}
.special-effects{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.golden-sweep{position:absolute;border-radius:15px;background:linear-gradient(90deg,transparent,#ffd36aaa,#fff5c5,transparent);box-shadow:0 0 14px #ffcd70;opacity:0}
.golden-sweep.horizontal{animation:golden-row .65s ease-out forwards;transform-origin:left center}
.golden-sweep.vertical{background:linear-gradient(0deg,transparent,#ffd36aaa,#fff5c5,transparent);animation:golden-column .65s ease-out forwards;transform-origin:center top}
@keyframes golden-row{0%{opacity:0;transform:scaleX(0)}30%{opacity:.85}70%{opacity:.6;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes golden-column{0%{opacity:0;transform:scaleY(0)}30%{opacity:.85}70%{opacity:.6;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
.rainbow-ribbons{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rainbow-ribbons path{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px #fff4d7);animation:tea-ribbon .4s ease-out forwards}
@keyframes tea-ribbon{0%{stroke-dashoffset:1;opacity:0}35%{opacity:.9}80%{stroke-dashoffset:0;opacity:.8}100%{stroke-dashoffset:0;opacity:0}}
.steamer-burst,.feast-wave{position:absolute;animation:steam-blast .7s ease-out forwards}.steamer-burst img{width:100%;height:100%;object-fit:contain}
@keyframes steam-blast{0%{transform:scale(.2);opacity:0}35%{opacity:.75}100%{transform:scale(1.15);opacity:0}}
.feast-wave{border:6px solid #ffd46d;border-radius:50%;box-shadow:0 0 24px #ffe0a9,inset 0 0 22px #ffd16b}
.feast-petal{position:absolute;left:48%;top:48%;width:12px;height:20px;border-radius:80% 20% 70% 30%;background:#ffd8bb;transform:rotate(var(--angle)) translateY(-70px)}

.language-control{margin-left:12px}.language-control select{font:inherit;font-size:12px;color:var(--ink);border:1px solid #d9dccd;border-radius:18px;padding:9px 12px;background:#faf7ee;max-width:135px}
.language-control select:focus-visible{outline:2px solid var(--green);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.combo-guide>.illustrated-guide{display:block}.guide-intro{font-size:14px;color:var(--green)}
.special-guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.special-guide-card,.pair-guide-card{padding:16px;border:1px solid #ddd4c0;border-radius:12px;background:#fffcf4;min-width:0}
.guide-art img{width:90px;height:90px;object-fit:contain}.special-guide-card h3{margin:6px 0;color:var(--green);font-size:16px}
.special-guide-card b{display:block;font-size:11px;color:#886849}.special-guide-card p,.pair-guide-card p{font-size:12px;line-height:1.8;margin:8px 0 0}
.match-diagram{display:grid;grid-template-columns:repeat(var(--columns),24px);grid-auto-rows:24px;gap:2px;min-height:30px;margin:8px 0}
.pair-guide-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pair-art{display:flex;align-items:center;gap:5px}.pair-art img,.pair-art>.food-art{width:55px;height:55px;object-fit:contain;flex:none}.pair-guide-card h4{font-size:13px;margin:8px 0;color:var(--green)}
.guide-note{padding:14px;background:#edf0e2;border-radius:10px}.combo-guide summary{font-size:14px}
html[lang^="zh"] body{font-family:system-ui,'Microsoft YaHei','PingFang SC','Microsoft JhengHei',sans-serif}html[lang^="zh"] .intro h1{line-height:1.3}html[lang^="zh"] .eyebrow,html[lang^="zh"] .level-label{letter-spacing:1px}
@media(max-width:1100px){header .edition{display:none}.pair-guide-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){header{position:relative;padding-top:52px}.language-control{position:absolute;right:5%;top:10px;margin:0}.special-guide-cards{grid-template-columns:1fr}.pair-guide-cards{grid-template-columns:1fr}.combo-guide{padding:16px}.guide-art{float:right;margin-left:8px}.guide-art img{width:75px;height:75px}.match-diagram{grid-template-columns:repeat(var(--columns),22px);grid-auto-rows:22px}}


/* Painted obstacles share the tile set's warm highlights and soft shadows. */
.tile.crate{background:linear-gradient(145deg,#e6c392,#b68852)}
.tile.crate::after{inset:1%;border:0;transform:none;background:url('assets/bamboo-crate.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #55351d45)}
.tile.honey{background:linear-gradient(145deg,#f9e6b1,#deb66c);box-shadow:0 3px 0 #67452f66}
.tile.honey::after{content:'';inset:1%;background:url('assets/soy-sauce-bottle.png') center/contain no-repeat}
.tile.frost{background:#f3f4e8;box-shadow:0 3px 0 #67452f66}
.tile.frost::before{inset:0;background:url('assets/spice-sauce.png') center/100% 100% no-repeat;z-index:1}
.seal-mark{font-size:0;width:38%;height:38%;border:0;background:url('assets/tea-seal.png') center/contain no-repeat;box-shadow:none}
.tile{transition:transform .18s ease,background .18s ease,opacity .18s ease;transform-origin:center}
.tile.clearing{transform:scale(.25) rotate(10deg);opacity:0}
.tile.selected{box-shadow:0 0 0 3px #fff0b8,0 0 15px #ffd77880}
.overlay:not([hidden])>div{animation:delivery-result .35s ease-out both}
@keyframes delivery-result{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tile{transition:none}.tile.hinted,.overlay:not([hidden])>div{animation:none}.tile.clearing{transform:none}}

.obstacle-info li{cursor:help;border-radius:4px}.obstacle-info li:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.obstacle-tooltip{position:fixed;z-index:80;width:280px;max-width:calc(100vw - 16px);padding:14px;background:#fff9edf5;border:1px solid #d6ba8b;border-radius:14px;box-shadow:0 8px 28px #28170955;color:#65412f;font-size:12px;line-height:1.7;pointer-events:none}
.obstacle-tooltip[hidden]{display:none}.obstacle-tip-card{display:flex;align-items:center;gap:12px}.obstacle-tip-card+.obstacle-tip-card{margin-top:12px;padding-top:12px;border-top:1px solid #dfcfb3}.obstacle-tip-card img{width:70px;height:70px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 2px #65412f33)}
.obstacle-art-list{list-style:none;padding:0;margin:12px 0 0}.obstacle-art-list li{min-height:58px;margin:10px 0;line-height:1.7}.obstacle-art-list img{width:54px;height:54px;object-fit:contain;float:left;margin-right:12px}

/* Restaurant condiments: chili sauce rims and bottled soy sauce. */
.tile.frost{background:linear-gradient(145deg,#fff4e1,#f4ceb2)}
.tile.honey{background:linear-gradient(145deg,#f2dfbf,#cda57b)}
.tile.honey::after{inset:0;background-size:contain}