/* Generated PNG illustrations, displayed as five cells of a 3 x 3 atlas. */
.food-art{display:block;width:100%;height:100%;background-image:url('assets/dim-sum-atlas.png');background-size:300% 300%;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 3px 2px #6d361329)}
.food-0{background-position:0 0}.food-1{background-position:50% 0}.food-2{background-position:100% 0}.food-3{background-position:0 50%}.food-4{background-position:50% 50%}
.food-art.food-0{background-image:url('assets/phoenix-claws.png');background-size:contain;background-position:center}
body{background:#503321 url('assets/teahouse.png') center center / cover fixed no-repeat}
body:before{content:'';position:fixed;inset:0;background:linear-gradient(#2a170e35,#2a170e66);pointer-events:none;z-index:-1}
header{background:#faf7eef2;border-color:#ffffff30;box-shadow:0 5px 30px #28170920}
.intro{padding:8px 0 15px;text-shadow:0 2px 14px #201208b0}
.intro .eyebrow{color:#ffe0a8}.intro h1{color:#fffaf0}.intro h1 em{color:#ffdc9c}.intro p{color:#fff4df;text-shadow:0 2px 8px #251709}
.game-layout{grid-template-columns:250px minmax(320px,530px) 240px;gap:22px}
.sidebar,.menu{background:#faf7eef5;padding:24px 20px;border:1px solid #fff7dd7a;border-radius:16px;box-shadow:0 12px 32px #28170925}
.board-wrap{background:linear-gradient(135deg,#efd9ad,#cba16d);border:1px solid #eccc99;box-shadow:0 15px 45px #28170960}
.board{background:#92653e;gap:5px;box-shadow:inset 0 2px 7px #583d32}
.tile{background:linear-gradient(145deg,#fff8e6,#f0dfbf);padding:1px;box-shadow:0 3px 0 #67452f66}
.tile:hover{background:#fff9ed}.tile.frost{background:linear-gradient(145deg,#eafcfc,#afd6df)}
.board-heading,.board-footer{color:#624a30}.menu-item .food-art{width:49px;height:49px;flex-shrink:0}
.journey{background:#faf7eef5;border:1px solid #fff7dd7a;border-radius:16px;padding:22px 24px;box-shadow:0 12px 32px #28170925;margin-top:26px}
footer{color:#fff3db;border-top-color:#fff3db40;text-shadow:0 1px 5px #251709}
@media(max-width:1100px){.game-layout{grid-template-columns:230px minmax(300px,490px)}}
@media(max-width:650px){body{background-position:58% center}.sidebar{padding:16px}.board-wrap{padding:10px}.journey{padding:18px 12px}.intro{padding-top:0}.intro h1{font-size:34px}.intro p{max-width:320px}.menu-item .food-art{width:44px;height:44px}}

/* Warm woven tablecloth beneath the serving tray. */
.board-wrap{
  background-color:#f3e5c9;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 2px,#7655360b 2px 3px),
    repeating-linear-gradient(90deg,transparent 0 2px,#fffaf04d 2px 3px),
    repeating-linear-gradient(0deg,transparent 0 39px,#a64b3430 39px 43px,transparent 43px 47px,#a64b341c 47px 49px,transparent 49px 88px),
    repeating-linear-gradient(90deg,transparent 0 39px,#a64b3430 39px 43px,transparent 43px 47px,#a64b341c 47px 49px,transparent 49px 88px),
    linear-gradient(135deg,#fff4de80,#cda97135);
  border:1px solid #e7cda2;
  box-shadow:0 18px 40px #28170960,inset 0 1px 0 #fff8e5;
  padding:20px;
}
.board-wrap::before{
  content:'';position:absolute;inset:6px;border:1px dashed #9f634b66;
  border-radius:15px;pointer-events:none;
}
.board-heading,.board-footer{color:#65412f;font-weight:600}
.board-heading span,.board-footer span{background:#f7ecd9d9;border-radius:4px;padding:3px 5px}
.board{border:2px solid #c2955e;box-shadow:0 5px 12px #65412f38,inset 0 2px 7px #583d32}
@media(max-width:650px){.board-wrap{padding:14px}.board-wrap::before{inset:4px}}


/* A circular linen-covered restaurant table beneath the square serving tray. */
.board-wrap{isolation:isolate;background:none;border:0;box-shadow:none;padding:8%;border-radius:0;margin:22px 0 34px}
.board-wrap::before{inset:auto;left:-8%;top:50%;width:116%;height:auto;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;border:9px solid #dfc19a;outline:1px solid #9b7150;z-index:-1;
 background-color:#f3e5c9;
 background-image:repeating-linear-gradient(0deg,transparent 0 2px,#7655360b 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,#fffaf04d 2px 3px),repeating-linear-gradient(0deg,transparent 0 39px,#a64b3430 39px 43px,transparent 43px 47px,#a64b341c 47px 49px,transparent 49px 88px),repeating-linear-gradient(90deg,transparent 0 39px,#a64b3430 39px 43px,transparent 43px 47px,#a64b341c 47px 49px,transparent 49px 88px),radial-gradient(ellipse at 35% 20%,#fff8e7a0,transparent 55%,#87603b40);
 box-shadow:0 20px 40px #28170970,inset 0 0 0 2px #fff2d5,inset 0 0 0 5px #b78a6366,inset 0 -15px 25px #805b3730}
.board-wrap::after{content:'';position:absolute;left:-6%;top:50%;width:112%;aspect-ratio:1;transform:translateY(-50%);border:1px dashed #9f634b66;border-radius:50%;pointer-events:none;z-index:-1}
.sidebar,.menu{position:relative;z-index:1}
.board-heading,.board-footer{position:relative;z-index:0;gap:6px;font-size:9px}
.board-heading span,.board-footer span{padding:3px 4px}
.board{position:relative;z-index:0}
@media(max-width:650px){.board-wrap{width:100%;padding:8%;margin:20px 0 30px}.board-wrap::before{left:-2%;width:104%;border-width:7px}.board-wrap::after{left:0;width:100%}.board-heading,.board-footer{font-size:8px;letter-spacing:0}}
.board-wrap::before,.board-wrap::after{box-sizing:border-box}

.food-art.food-5{background-image:url('assets/look-fun.png');background-size:contain;background-position:center}
.board .tile.gap{background:transparent;box-shadow:none;pointer-events:none;border:0}
.map-info,.high-score{font-size:12px;line-height:1.5;color:#624a30}
#levels{display:block;width:100%}.journey{display:block}
#levels .level-group{margin:12px 0}#levels summary{cursor:pointer;font-weight:700;padding:10px 0}
#levels .level-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:7px}
#levels button{width:100%;height:52px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#levels button small{font-size:9px;opacity:.8}