*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#17120E;--panel:#241C15;--panel2:#2B221A;--line:#3D3123;--line2:#574530;--ink:#F3E9D9;--muted:#B4A289;--dim:#8B7A63;--red:#D8442E;--red-d:#A93220;--gold:#D9A441;--jade:#5FAE7C;--disp:'Ma Shan Zheng',cursive;--serif:'Noto Serif SC',serif;--sans:'Noto Sans SC',sans-serif}
body{font-family:var(--sans);color:var(--ink);min-height:100vh;background:radial-gradient(1000px 520px at 88% -8%,rgba(216,68,46,.14),transparent 62%),radial-gradient(800px 560px at -8% 108%,rgba(217,164,65,.10),transparent 60%),var(--bg)}
header{max-width:1200px;margin:0 auto;padding:36px 28px 20px;display:flex;align-items:flex-end;gap:22px}
.brand{display:flex;align-items:center;gap:18px}
.seal{width:58px;height:58px;background:linear-gradient(150deg,#E2543C,var(--red-d));color:#fff;font-family:var(--disp);display:grid;place-items:center;font-size:32px;border-radius:9px;transform:rotate(-6deg);box-shadow:0 6px 18px rgba(216,68,46,.4)}
h1{font-family:var(--disp);font-size:54px;line-height:1;letter-spacing:8px;font-weight:400}
.tagline{color:var(--muted);font-size:13px;letter-spacing:4px;margin-top:9px}
.stats{display:flex;gap:26px;margin-top:14px}
.stat b{font-family:var(--serif);font-size:22px;color:var(--gold)}
.stat span{display:block;font-size:11px;color:var(--dim);letter-spacing:3px;margin-top:2px}
.vtext{margin-left:auto;writing-mode:vertical-rl;font-family:var(--serif);color:var(--dim);letter-spacing:10px;font-size:15px;border-left:1px solid var(--line);padding-left:16px;height:150px}
main{max-width:1200px;margin:0 auto;padding:0 28px}
.view{display:none;animation:fadeUp .45s ease both}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.home-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;margin-top:28px}
.panel{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:32px;position:relative;overflow:hidden}
.p-label{font-size:12px;letter-spacing:4px;color:var(--dim);border:1px solid var(--line);display:inline-block;padding:4px 10px;border-radius:4px}
.p-title{font-family:var(--serif);font-size:26px;letter-spacing:3px;margin-top:16px}
.big-words{font-family:var(--disp);font-size:66px;color:var(--gold);letter-spacing:12px;margin:16px 0 8px}
.p-desc{color:var(--muted);font-size:14px;line-height:1.9;margin:10px 0 22px}
.btn-draw{font-size:19px;font-weight:700;letter-spacing:6px;color:#fff;background:linear-gradient(150deg,#E2543C,var(--red-d));border:none;border-radius:10px;padding:16px 46px;cursor:pointer;box-shadow:0 8px 24px rgba(216,68,46,.35);transition:.25s}
.btn-draw:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(216,68,46,.5)}
.btn-ghost{margin-top:14px;width:100%;background:transparent;border:1px solid var(--line2);color:var(--gold);padding:12px;border-radius:9px;font-size:15px;letter-spacing:3px;cursor:pointer;transition:.2s}
.btn-ghost:hover{border-color:var(--gold);background:rgba(217,164,65,.08)}
.view-head{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.vh-title{font-family:var(--serif);font-size:26px;letter-spacing:4px}
.btn-back,.btn-again{background:transparent;border:1px solid var(--line2);color:var(--muted);padding:9px 16px;border-radius:8px;cursor:pointer;letter-spacing:2px;font-size:14px;transition:.2s}
.btn-back:hover,.btn-again:hover{color:var(--ink);border-color:var(--muted)}
.btn-again{margin-left:auto;background:rgba(216,68,46,.12);border:1px solid rgba(216,68,46,.5);color:#E8705B}
.btn-again:hover{background:var(--red);color:#fff}
.hint{text-align:center;color:var(--dim);font-size:13px;letter-spacing:2px;margin-top:20px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.slot{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:30px 18px 24px;text-align:center;cursor:pointer;transition:.25s;position:relative}
.slot:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 16px 34px rgba(0,0,0,.4)}
.role{position:absolute;top:13px;left:15px;font-size:12px;letter-spacing:3px;color:var(--dim);border:1px solid var(--line);padding:3px 9px;border-radius:4px}
.plate{width:120px;height:120px;margin:12px auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 30%,#3A2F24,#241C15 72%);border:5px solid var(--pc,#D9A441);box-shadow:0 10px 26px rgba(0,0,0,.45);position:relative}
.plate img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.plate .pe{font-size:54px;line-height:1}
.s-name{font-family:var(--disp);font-size:30px;letter-spacing:3px;margin-top:14px}
.chip{display:inline-block;font-size:12px;padding:3px 9px;border-radius:4px;letter-spacing:1px;margin:3px 2px 0;border:1px solid}
.crumbs{display:flex;gap:6px;align-items:center;margin:20px 0 4px;flex-wrap:wrap}
.crumb{color:var(--muted);cursor:pointer;font-size:14px;letter-spacing:1px;padding:5px 11px;border-radius:6px;transition:.2s;border:1px solid transparent}
.crumb:hover{color:var(--gold);background:rgba(217,164,65,.08)}
.crumb.now{color:var(--ink);cursor:default;border-color:var(--line)}
.csep{color:var(--dim)}
.l1,.l2,.l3{display:grid;gap:16px;margin-top:16px}
.l1{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.l2{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.l3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile,.cui-card,.dish-card{background:linear-gradient(165deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:22px 18px;cursor:pointer;transition:.22s}
.tile:hover,.dish-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.cui-card{border-left:4px solid}
.cui-card:hover{transform:translateX(6px)}
.t-emoji{font-size:38px}
.t-name,.cc-name{font-family:var(--serif);font-size:19px;font-weight:700;margin-top:10px;letter-spacing:3px}
.dc-name{font-family:var(--disp);font-size:25px;letter-spacing:2px;margin-top:12px;text-align:center}
#detailOverlay{position:fixed;inset:0;background:rgba(10,7,5,.85);display:none;overflow-y:auto;z-index:50;padding:34px 16px}
#detailOverlay.open{display:block;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.detail{max-width:880px;margin:0 auto;background:linear-gradient(170deg,#2A211A,#211A14);border:1px solid var(--line2);border-radius:16px;padding:40px 44px 48px;position:relative;animation:fadeUp .4s both}
.d-close{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:17px;cursor:pointer;transition:.25s}
.d-close:hover{color:#fff;background:var(--red);border-color:var(--red);transform:rotate(90deg)}
.d-name{font-family:var(--disp);font-size:48px;letter-spacing:5px;font-weight:400;margin:8px 0 10px}
.ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.ing{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.ing h4{font-family:var(--serif);font-size:15px;letter-spacing:3px;color:var(--gold);margin-bottom:10px}
.ing ul{list-style:none}
.ing li{font-size:13.5px;padding:6px 0;border-bottom:1px dashed rgba(87,69,48,.4);line-height:1.6}
.step{display:flex;gap:16px;padding:13px 0;border-bottom:1px dashed rgba(87,69,48,.4)}
.step-no{flex:0 0 34px;height:34px;border-radius:50%;background:linear-gradient(150deg,#E2543C,var(--red-d));color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.step p{font-size:14.5px;line-height:1.9;padding-top:5px}
.tip{margin-top:20px;padding:15px;background:rgba(217,164,65,.06);border-left:4px solid var(--gold);border-radius:8px;font-size:14px;line-height:1.85;color:var(--muted)}
footer{max-width:1200px;margin:44px auto 0;padding:22px 28px 36px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;display:flex;justify-content:space-between}
@media(max-width:920px){.home-grid,.slots,.ing-grid{grid-template-columns:1fr}.vtext{display:none}h1{font-size:42px}.big-words{font-size:52px}}