/* 曦曦的美食系统 v16 · 魔幻界面（assets/v16/magic.css）
   美术方向：月下星界厨房——深靛夜空、极光边缘、金箔细线、浮动的符文与光点。
   字体：站酷小薇（标题）、马善政（毛笔点题）、Cinzel Decorative（西文），均为 SIL OFL；天空为 Poly Haven（CC0）。 */
@font-face{font-family:"MG16 Xiaowei";src:url("fonts/zcool-xiaowei.woff2?v=16.0.0") format("woff2");font-display:swap}
@font-face{font-family:"MG16 Brush";src:url("fonts/mashanzheng.woff2?v=16.0.0") format("woff2");font-display:swap}
@font-face{font-family:"MG16 Cinzel";src:url("fonts/cinzel-deco.woff2?v=16.0.0") format("woff2");font-display:swap}
:root{--mg-ink:#0d0a1f;--mg-night:#161034;--mg-gold:#f4cf7a;--mg-gold2:#b98a3a;--mg-aur1:#7ef0d8;--mg-aur2:#b48cff;--mg-rose:#ff9ec4;
  --mg-head:"MG16 Cinzel","MG16 Xiaowei",XSerif,serif;--mg-cn:"MG16 Xiaowei",XSerif,serif}

/* ---------- 页面背景：按味域换的真实天空 + 读字用的夜色压暗 ---------- */
html.mg16 #view{background:linear-gradient(180deg,rgba(13,10,31,.35) 0%,rgba(13,10,31,.78) 34%,rgba(11,8,26,.93) 70%),var(--mg16sky,none) center top/cover no-repeat,#120c26!important}
html.mg16 #view::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 40% at 50% 0%,rgba(126,240,216,.10),transparent 60%),radial-gradient(90% 30% at 80% 8%,rgba(180,140,255,.12),transparent 60%)}
html.mg16 #view>*{position:relative;z-index:1}

/* ---------- 标题与文字 ---------- */
html.mg16 #viewTitle,html.mg16 .sheet h3,html.mg16 #view h2,html.mg16 #view h3{font-family:var(--mg-cn);font-weight:400;letter-spacing:.06em;color:#fff3d6;
  text-shadow:0 0 12px rgba(244,207,122,.45),0 1px 0 rgba(0,0,0,.6)}
html.mg16 #hubTitle h1{font-family:"MG16 Brush",var(--mg-cn);font-weight:400;letter-spacing:.08em;text-shadow:0 0 18px rgba(244,207,122,.6),0 2px 0 #2a1a08}
html.mg16 .slogan{font-family:var(--mg-cn)}

/* ---------- 面板：夜色玻璃 + 金箔描边 + 四角花饰 ---------- */
html.mg16 .sheetIn{background:linear-gradient(160deg,rgba(32,22,66,.96),rgba(16,11,36,.97))!important;border:1px solid rgba(244,207,122,.55)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 30px -6px rgba(180,140,255,.45),inset 0 0 0 1px rgba(126,240,216,.08)!important;position:relative}
html.mg16 .sheetIn::before,html.mg16 .sheetIn::after{content:"";position:absolute;width:42px;height:42px;pointer-events:none;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath d='M2 40V14C2 7 7 2 14 2h26' fill='none' stroke='%23f4cf7a' stroke-width='1.6'/%3E%3Cpath d='M7 40V17c0-6 4-10 10-10h23' fill='none' stroke='%23f4cf7a' stroke-width='.8' opacity='.6'/%3E%3Ccircle cx='14' cy='14' r='2.4' fill='%23f4cf7a'/%3E%3Cpath d='M14 6l1.4 3.6L19 11l-3.6 1.4L14 16l-1.4-3.6L9 11l3.6-1.4z' fill='%237ef0d8' opacity='.85'/%3E%3C/svg%3E") no-repeat}
html.mg16 .sheetIn::before{top:4px;left:4px}
html.mg16 .sheetIn::after{bottom:4px;right:4px;transform:rotate(180deg)}

/* ---------- 按钮 ---------- */
html.mg16 .btn.pri{background:linear-gradient(180deg,#ffe7a6,#f0bf5c 48%,#c98d2c)!important;color:#2a1606!important;border:1px solid #7a5216!important;
  box-shadow:0 0 0 1px rgba(255,240,200,.35) inset,0 4px 16px -4px rgba(244,207,122,.65)!important;font-family:var(--mg-cn);letter-spacing:.08em;position:relative;overflow:hidden}
html.mg16 .btn.pri::after{content:"";position:absolute;inset:-40% -30%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-70%);pointer-events:none}
html.mg16 .btn.pri:active::after{animation:mgShine .5s ease-out}
@keyframes mgShine{to{transform:translateX(70%)}}
html.mg16 .btn.ghost{border-color:rgba(180,140,255,.55)!important;color:#e9dcff!important;background:rgba(40,28,80,.35)!important}

/* ---------- 主菜单牌：极光描边 ---------- */
html.mg16 .mtile{border:1px solid rgba(244,207,122,.35)!important;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 6px 18px -8px rgba(126,240,216,.35)!important;
  background:linear-gradient(160deg,rgba(40,28,86,.72),rgba(18,12,40,.86))!important;transition:transform .15s ease,box-shadow .2s ease}
html.mg16 .mtile:active{transform:scale(.96);box-shadow:0 0 0 1px rgba(244,207,122,.6),0 0 22px -4px rgba(180,140,255,.7)!important}
html.mg16 .mtile b{font-family:var(--mg-cn);font-weight:400;letter-spacing:.1em}
.p16tile img.p16ti{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,220,140,.55));display:block;margin:2px auto 0}
.p16tile{border-color:rgba(126,240,216,.55)!important}
.p16tile::after{content:"新";position:absolute;top:4px;right:6px;font:12px var(--mg-cn);color:#1a0e04;background:var(--mg-aur1);border-radius:8px;padding:0 5px}

/* ---------- 吐司提示 ---------- */
html.mg16 .toast{background:linear-gradient(160deg,rgba(36,24,74,.95),rgba(18,12,40,.96))!important;border:1px solid rgba(244,207,122,.5)!important;box-shadow:0 0 18px -4px rgba(180,140,255,.6)!important}

/* ---------- 魔法光点层 ---------- */
#mg16fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60;contain:strict}

/* ---------- 3D 互动玩法浮层 ---------- */
.p16{position:fixed;inset:0;z-index:80;background:#0b0820;display:grid;grid-template-rows:auto 1fr auto;animation:p16in .3s ease-out both;touch-action:none;user-select:none;-webkit-user-select:none}
.p16.out{animation:p16out .26s ease-in forwards}
@keyframes p16in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@keyframes p16out{to{opacity:0}}
.p16Cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.p16Hud{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px;background:linear-gradient(180deg,rgba(10,6,24,.75),transparent)}
.p16X{width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,207,122,.6);background:rgba(20,12,40,.7);color:#fff3d6;font-size:22px;line-height:1}
.p16T b{display:block;font:22px "MG16 Brush",var(--mg-cn);color:#fff3d6;text-shadow:0 0 12px rgba(244,207,122,.6)}
.p16T small{color:#cfc2ea;font-size:12px}
.p16Stat{margin-left:auto;display:flex;gap:8px;align-items:center;font:600 14px var(--mg-cn);color:#fff3d6}
.p16Stat span{background:rgba(20,12,40,.65);border:1px solid rgba(180,140,255,.45);border-radius:14px;padding:3px 9px;white-space:nowrap}
.p16Stat .hot{border-color:var(--mg-gold);box-shadow:0 0 12px rgba(244,207,122,.6)}
.p16Stat .p16Hint{border-color:var(--mg-aur1);font-weight:400}
.p16Gauge{position:relative;width:110px;height:12px;padding:0!important;overflow:hidden}
.p16Gauge i{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#f4cf7a,#ffe7a6)}
.p16Gauge b{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 8px #fff}
.p16Mid{position:relative;z-index:2;display:grid;place-items:center;padding:12px;pointer-events:none}
.p16Card{pointer-events:auto;max-width:360px;width:100%;max-height:70vh;overflow:auto;padding:18px 18px 16px;border-radius:16px;color:#f2ead8;
  background:linear-gradient(160deg,rgba(32,22,66,.94),rgba(16,11,36,.96));border:1px solid rgba(244,207,122,.55);box-shadow:0 0 30px -6px rgba(180,140,255,.5)}
.p16Card h3{margin:0 0 8px;font:26px "MG16 Brush",var(--mg-cn);color:#fff3d6;text-shadow:0 0 12px rgba(244,207,122,.55)}
.p16Card p{margin:6px 0;line-height:1.75;font-size:14.5px}
.p16Card .dim{color:#b9aed6;font-size:13px}
.p16Card .row{display:flex;gap:10px;margin-top:12px}
.p16Card .btn{margin-top:10px}
.p16Gain{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.p16Gain span{display:inline-flex;align-items:center;gap:4px;background:rgba(244,207,122,.12);border:1px solid rgba(244,207,122,.4);border-radius:12px;padding:3px 8px;font-size:13px}
.p16Gain img{width:22px;height:22px;object-fit:contain}
.p16Pick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0;max-height:42vh;overflow:auto}
.p16Pick button{display:grid;justify-items:center;gap:2px;padding:6px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#f2ead8}
.p16Pick button.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 14px -2px var(--c);background:rgba(255,255,255,.1)}
.p16Pick img{width:34px;height:34px;object-fit:contain}
.p16Pick b{font-size:12.5px;font-weight:600}
.p16Pick small{font-size:10.5px;color:#cfc2ea}
.p16Bot{position:relative;z-index:2;display:grid;place-items:center;min-height:60px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.p16Pop{font:22px "MG16 Brush",var(--mg-cn);color:#fff3d6;text-shadow:0 0 14px rgba(244,207,122,.8);animation:p16pop .9s ease-out forwards}
@keyframes p16pop{from{opacity:0;transform:translateY(10px) scale(.8)}25%{opacity:1;transform:none}to{opacity:0;transform:translateY(-24px)}}
@media (prefers-reduced-motion:reduce){.p16,.p16Pop,html.mg16 .btn.pri:active::after{animation:none!important}}

/* ---------- 百味连连看 ---------- */
.p16.l16{grid-template-rows:auto auto 1fr auto;background:radial-gradient(120% 70% at 50% 0%,#2a1c58,#120c26 60%,#0b0820);touch-action:manipulation}
.p16.l16::before{content:"";position:absolute;inset:0;background:var(--mg16sky,none) center/cover;opacity:.28;pointer-events:none}
.l16Bar{position:relative;z-index:2;height:8px;margin:0 14px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(244,207,122,.35)}
.l16Bar i{display:block;height:100%;transform-origin:0 50%;background:linear-gradient(90deg,#7ef0d8,#f4cf7a);transition:transform .2s linear}
.l16Bar i.low{background:linear-gradient(90deg,#ff5a36,#ffb469);animation:l16pulse .6s ease-in-out infinite alternate}
@keyframes l16pulse{to{filter:brightness(1.5)}}
.l16Wrap{position:relative;z-index:2;display:grid;place-items:center;min-height:0;padding:4px}
.l16Cv{display:block;touch-action:none}
.l16Ban{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.l16Pop{grid-area:1/1;font:24px "MG16 Brush",var(--mg-cn);color:#fff3d6;text-shadow:0 0 14px rgba(244,207,122,.85),0 2px 0 #2a1408;animation:p16pop 1.1s ease-out forwards;white-space:nowrap}
.l16Pop.big{font-size:40px}.l16Pop.hot{color:#ffd0b0;text-shadow:0 0 18px #ff6a3a,0 2px 0 #3a0a00}.l16Pop.reso{color:#e9fff9;text-shadow:0 0 18px #7ef0d8,0 2px 0 #062a24}
.l16Tools{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;padding:6px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.l16B{min-width:84px;padding:9px 12px;border-radius:12px;border:1px solid rgba(244,207,122,.5);background:linear-gradient(160deg,rgba(40,28,86,.85),rgba(18,12,40,.9));color:#fff3d6;font:15px var(--mg-cn)}
.l16B b{color:#f4cf7a;margin-left:2px}
.l16B:active{transform:scale(.95)}
.l16 .p16Mid{position:absolute;inset:0;z-index:5}
.l16Lv{display:grid;gap:6px;margin:10px 0}
.l16Lv button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;text-align:left;padding:9px 12px;border-radius:12px;border:1px solid rgba(244,207,122,.4);background:rgba(255,255,255,.04);color:#f2ead8}
.l16Lv button b{font:16px var(--mg-cn)}.l16Lv button small{grid-row:2;color:#b9aed6;font-size:12px}.l16Lv button span{grid-row:1/3;grid-column:2;align-self:center;color:#f4cf7a;letter-spacing:2px}
.l16Lv button:disabled{opacity:.45}
.l16Help{margin-top:6px;font-size:13px;color:#d8cdee}.l16Help summary{cursor:pointer;color:#f4cf7a}.l16Help p{margin:4px 0}
.l16New{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;margin:6px 0 10px}
.l16New span{display:grid;justify-items:center;font-size:10.5px;color:#e9dfc8}.l16New img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* ---------- 第二轮美化：面板、卡片、标签、进度条、选项 ---------- */
html.mg16 .pnl{background:linear-gradient(160deg,rgba(34,24,70,.82),rgba(16,11,36,.88))!important;border:1px solid rgba(244,207,122,.32)!important;box-shadow:0 8px 24px -14px rgba(126,240,216,.35),inset 0 1px 0 rgba(255,255,255,.05)!important;border-radius:14px}
html.mg16 .grid .item{background:linear-gradient(170deg,rgba(44,32,88,.7),rgba(20,14,44,.86))!important;border:1px solid rgba(244,207,122,.22)!important;border-radius:14px;transition:transform .15s ease,box-shadow .2s ease}
html.mg16 .grid .item:active{transform:scale(.97)}
html.mg16 .grid .item img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
html.mg16 .grid .item.r3{box-shadow:0 0 0 1px rgba(244,207,122,.35),0 6px 18px -10px rgba(244,207,122,.6)!important}
html.mg16 .grid .item.lock{opacity:.72;filter:saturate(.6)}
html.mg16 .tabs button{border-radius:999px!important;border:1px solid rgba(244,207,122,.28)!important;background:rgba(255,255,255,.04)!important;color:#e8dcff!important;font-family:var(--mg-cn)}
html.mg16 .tabs button.sel{background:linear-gradient(180deg,#ffe7a6,#e9b552)!important;color:#2a1606!important;border-color:#7a5216!important;box-shadow:0 0 14px -3px rgba(244,207,122,.7)}
html.mg16 .bar{background:rgba(255,255,255,.07)!important;border:1px solid rgba(244,207,122,.25);border-radius:999px;overflow:hidden}
html.mg16 .bar>i{background:linear-gradient(90deg,#7ef0d8,#b48cff 55%,#f4cf7a)!important;box-shadow:0 0 10px rgba(180,140,255,.6)}
html.mg16 .choices .choice{background:linear-gradient(160deg,rgba(40,28,86,.78),rgba(18,12,40,.9))!important;border:1px solid rgba(244,207,122,.35)!important;border-radius:14px!important}
html.mg16 .choices .choice:active{transform:scale(.98);box-shadow:0 0 0 1px rgba(244,207,122,.7),0 0 18px -4px rgba(180,140,255,.7)!important}
html.mg16 ::-webkit-scrollbar{width:6px;height:6px}html.mg16 ::-webkit-scrollbar-thumb{background:rgba(244,207,122,.35);border-radius:6px}