/* 曦曦的美食系统 v18 · 界面（assets/v18/v18.css）
   素材：Kenney UI Pack（CC0）的光泽按钮、Kenney Fantasy UI Borders（CC0，素材扩展包已带）的金边九宫格、
   Microsoft Fluent Emoji 3D（MIT）的 Q 版图标、Poly Haven（CC0）的全景天空。动画只动 transform 与 opacity。 */
:root{--v18-gold:url("../pack17/ui/fantasy/border-003-gold.webp");--v18-btn:url("ui/btn_yellow.webp")}

/* ===================== 登录 / 注册 ===================== */
#a18,#a18Acc{position:fixed;inset:0;z-index:2147483200;display:grid;place-items:center;padding:20px;
  background:linear-gradient(180deg,rgba(10,8,30,.25),rgba(10,8,30,.82) 70%),url("../pack17/sky/kloofendal_48d_partly_cloudy_m.webp") center/cover,#120c26;animation:a18in .45s ease-out both}
#a18::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(2px 2px at 20% 30%,#fff8,transparent),radial-gradient(2px 2px at 70% 20%,#fff8,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff6,transparent),radial-gradient(2px 2px at 85% 60%,#ffe7a6aa,transparent);animation:a18tw 6s ease-in-out infinite alternate}
#a18.out{animation:a18out .3s ease-in forwards}
@keyframes a18in{from{opacity:0}to{opacity:1}}@keyframes a18out{to{opacity:0;transform:scale(1.03)}}@keyframes a18tw{to{opacity:.4}}
.a18Card{position:relative;width:min(360px,100%);padding:22px 20px 18px;color:#f6ecd8;background:linear-gradient(165deg,rgba(40,28,82,.94),rgba(18,12,40,.96));
  border:16px solid transparent;border-image:var(--v18-gold) 16 fill round;border-image-outset:4px;box-shadow:0 20px 60px -20px rgba(0,0,0,.8),0 0 40px -10px rgba(180,140,255,.5);animation:a18pop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes a18pop{from{transform:translateY(20px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.a18Logo{display:grid;justify-items:center;gap:4px;text-align:center;margin-bottom:14px}
.a18Logo img{width:54px;height:54px;animation:a18float 3s ease-in-out infinite}@keyframes a18float{50%{transform:translateY(-5px) rotate(6deg)}}
.a18Logo b{font:30px "MG16 Brush","MG16 Xiaowei",serif;letter-spacing:.06em;color:#fff3d6;text-shadow:0 0 16px rgba(244,207,122,.65),0 2px 0 #2a1408}
.a18Logo small{color:#cfc2ea;font-size:13px}
.a18Tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;padding:4px;border-radius:12px;background:rgba(0,0,0,.25)}
.a18Tabs button{padding:8px;border:0;border-radius:9px;background:transparent;color:#cfc2ea;font:16px "MG16 Xiaowei",serif;transition:background .2s,color .2s}
.a18Tabs button.on{background:linear-gradient(180deg,#ffe7a6,#e9b552);color:#2a1606;box-shadow:0 2px 10px -2px rgba(244,207,122,.7)}
.a18Form{display:grid;gap:10px}
.a18Form label{position:relative;display:grid;gap:4px}
.a18Form label span{font-size:12.5px;color:#d8cdee;letter-spacing:.1em}
.a18Form input{width:100%;box-sizing:border-box;padding:12px 40px 12px 12px;border-radius:12px;border:1px solid rgba(244,207,122,.4);background:rgba(10,6,24,.6);color:#fff;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.a18Form input:focus{border-color:#f4cf7a;box-shadow:0 0 0 3px rgba(244,207,122,.25)}
.a18Eye{position:absolute;right:8px;bottom:9px;width:30px;height:30px;border:0;background:transparent;font-size:16px;opacity:.75}
.a18Err{min-height:18px;margin:0;color:#ffb0a0;font-size:13px}
.a18Go{display:block;width:100%;margin-top:6px;padding:13px;border:12px solid transparent;border-image:var(--v18-btn) 14 22 18 22 fill stretch;background:none;color:#4a2a02;font:18px "MG16 Xiaowei",serif;letter-spacing:.12em;text-shadow:0 1px 0 rgba(255,255,255,.6);transition:transform .1s}
.a18Go:active{transform:translateY(2px) scale(.98)}.a18Go:disabled{filter:grayscale(.6) brightness(.8)}
.a18Go.ghost{border-image-source:url("ui/btn_grey.webp");color:#2a2a3a}
.a18Guest{display:grid;width:100%;margin-top:12px;padding:8px;border:1px dashed rgba(207,194,234,.45);border-radius:12px;background:transparent;color:#e8dcff;font:15px "MG16 Xiaowei",serif}
.a18Guest small{color:#a99cc8;font-size:11.5px}
.a18Warn{color:#ffd9a0;font-size:13px;line-height:1.6;background:rgba(255,180,80,.1);border:1px solid rgba(255,180,80,.35);border-radius:10px;padding:8px 10px}
.a18Pick{display:grid;gap:8px}.a18Pick button{display:grid;padding:12px;border-radius:12px;border:1px solid rgba(244,207,122,.5);background:rgba(255,255,255,.05);color:#fff3d6;font:16px "MG16 Xiaowei",serif}.a18Pick small{color:#cfc2ea;font-size:12px}
#a18Badge{position:absolute;left:12px;top:calc(52px + env(safe-area-inset-top,0px));z-index:5;display:grid;grid-template-columns:auto auto;column-gap:6px;align-items:center;padding:5px 12px 5px 8px;border-radius:14px;border:1px solid rgba(244,207,122,.5);background:rgba(16,10,36,.72);color:#fff3d6;text-align:left}
#a18Badge i{grid-row:1/3;font-style:normal;font-size:18px}#a18Badge b{font:14px "MG16 Xiaowei",serif}#a18Badge small{font-size:10.5px;color:#9fe8c8}#a18Badge.bad small{color:#ffb0a0}

/* ===================== 百味消消乐（Q 版） ===================== */
.p16.m18{grid-template-rows:auto auto 1fr auto;background:linear-gradient(180deg,rgba(255,200,220,.18),rgba(40,24,80,.2) 40%),var(--mg16sky,none) center/cover,#2a1c48;touch-action:none}
.m18 .p16Hud{background:linear-gradient(180deg,rgba(60,20,60,.55),transparent)}
.m18Moves{margin-left:auto;display:grid;justify-items:center;min-width:58px;padding:4px 8px;border:10px solid transparent;border-image:url("ui/round_red.webp") 24 fill stretch;color:#fff;text-shadow:0 2px 0 #7a1010}
.m18Moves b{font:26px "MG16 Xiaowei",sans-serif;line-height:1}.m18Moves small{font-size:11px;margin-top:-2px}
.m18Goals{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;padding:4px 10px}
.m18Goals span{display:flex;align-items:center;gap:4px;padding:4px 10px 4px 6px;border-radius:999px;background:rgba(255,255,255,.88);color:#5a2a10;box-shadow:0 3px 0 rgba(120,60,20,.35);font:600 14px sans-serif}
.m18Goals span.ok{background:#b8f5a0;color:#1e5a10}.m18Goals span.ok::after{content:"✓";margin-left:2px}
.m18Goals img{width:26px;height:26px}.m18Goals em{font-style:normal;font-size:18px}.m18Goals em.ice{color:#4aa8e0}
.m18Wrap{position:relative;z-index:2;display:grid;place-items:center;min-height:0;padding:6px}
.m18Cv{display:block;touch-action:none;border-radius:20px;background:linear-gradient(160deg,rgba(255,240,250,.35),rgba(255,220,235,.2));box-shadow:0 0 0 5px rgba(255,255,255,.55),0 0 0 9px rgba(255,170,200,.45),0 18px 40px -16px rgba(0,0,0,.6)}
.m18Ban{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.m18Pop{grid-area:1/1;font:30px "MG16 Brush","MG16 Xiaowei",sans-serif;color:#fff;-webkit-text-stroke:1.5px #c0396b;text-shadow:0 4px 0 #c0396b,0 0 18px rgba(255,150,200,.8);animation:m18pop 1s cubic-bezier(.2,1.4,.4,1) forwards;white-space:nowrap}
.m18Pop.big{font-size:44px}.m18Pop.hot{color:#fff7c0;-webkit-text-stroke-color:#d0541a;text-shadow:0 4px 0 #d0541a,0 0 22px rgba(255,180,60,.9)}
@keyframes m18pop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}25%{opacity:1;transform:scale(1.15) rotate(3deg)}45%{transform:scale(1)}100%{opacity:0;transform:translateY(-30px) scale(1)}}
.m18Score{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:6px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.m18Score span{color:#fff3d6;font:600 16px sans-serif;white-space:nowrap}.m18Score span b{font-size:20px}
.m18Score i{position:relative;flex:1;height:12px;border-radius:999px;background:rgba(0,0,0,.3);overflow:visible;box-shadow:inset 0 2px 3px rgba(0,0,0,.4)}
.m18Score i s{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#ff8fb3,#ffd35a);transition:width .3s}
.m18Score i u{position:absolute;top:-4px;width:3px;height:20px;background:#fff;border-radius:2px;opacity:.7}
.m18Card h3{font:30px "MG16 Brush","MG16 Xiaowei",serif}
.m18Lv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.m18Lv button{position:relative;display:grid;justify-items:center;padding:8px 2px 6px;border:10px solid transparent;border-image:url("ui/btn_blue.webp") 14 22 18 22 fill stretch;color:#fff;text-shadow:0 1px 0 #1a3a7a}
.m18Lv button img{width:30px;height:30px}.m18Lv button b{font:18px sans-serif}.m18Lv button span{font-size:10px;color:#ffe08a;letter-spacing:1px}
.m18Lv button:disabled{border-image-source:url("ui/btn_grey.webp");opacity:.7}
.m18Stars{font-size:34px;letter-spacing:6px;color:#ffd35a;text-shadow:0 3px 0 #b8741a;margin:4px 0;animation:a18pop .6s cubic-bezier(.2,1.6,.4,1) both}
.m18tile img.p16ti{animation:a18float 2.6s ease-in-out infinite}
.l17tile{display:none!important}

/* ===================== 七味远征：布置地图进度 ===================== */
.e18Load{display:grid;gap:8px;justify-items:center;padding:24px 6px;color:#f6ecd8}
.e18Load b{font:22px "MG16 Brush","MG16 Xiaowei",serif}
.e18Load i{display:block;width:220px;height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.e18Load s{display:block;height:100%;background:linear-gradient(90deg,#7ef0d8,#f4cf7a);transition:width .15s}
.e18Load small{color:#cfc2ea;font-size:12px}

/* ===================== 全局：第三轮 UI 大修 ===================== */
/* 弹窗与面板：金边九宫格框 */
html.mg16 .sheetIn,html.mg16 .p16Card,html.mg16 .e17 .panel{border:14px solid transparent!important;border-image:var(--v18-gold) 16 fill round!important;border-image-outset:2px!important;background-clip:padding-box!important}
html.mg16 .sheetIn::before,html.mg16 .sheetIn::after{display:none}
/* 主按钮：Kenney 光泽金按钮 */
html.mg16 .btn.pri{border:10px solid transparent!important;border-image:var(--v18-btn) 14 22 18 22 fill stretch!important;background:none!important;box-shadow:none!important;color:#4a2a02!important;text-shadow:0 1px 0 rgba(255,255,255,.6);padding-top:4px!important;padding-bottom:6px!important}
html.mg16 .btn.pri:active{transform:translateY(2px)}
html.mg16 .btn.ember{border:10px solid transparent!important;border-image:url("ui/btn_red.webp") 14 22 18 22 fill stretch!important;background:none!important;color:#fff!important;text-shadow:0 1px 0 #7a1010}
/* 页面内容依次浮现 */
html.mg16 #view.on #viewBody>*{animation:v18up .42s cubic-bezier(.2,.8,.2,1) both}
html.mg16 #view.on #viewBody>*:nth-child(2){animation-delay:.05s}html.mg16 #view.on #viewBody>*:nth-child(3){animation-delay:.1s}html.mg16 #view.on #viewBody>*:nth-child(4){animation-delay:.15s}html.mg16 #view.on #viewBody>*:nth-child(n+5){animation-delay:.2s}
@keyframes v18up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 主菜单牌：图标轻浮动、按下回弹 */
html.mg16 .mtile img{transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
html.mg16 .mtile:active img{transform:scale(1.12) rotate(-4deg)}
html.mg16 .mtile.pic::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);background-size:250% 100%;animation:v18sheen 5s ease-in-out infinite}
@keyframes v18sheen{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
/* 标签页：选中项下面一道流光 */
html.mg16 .tabs button.sel{position:relative;overflow:hidden}
html.mg16 .tabs button.sel::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-100%);animation:v18tab .8s ease-out .1s forwards}
@keyframes v18tab{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){#a18,#a18::before,.a18Card,.a18Logo img,.m18Pop,.m18Stars,.m18tile img.p16ti,html.mg16 #view.on #viewBody>*,html.mg16 .mtile.pic::before,html.mg16 .tabs button.sel::after{animation:none!important}}

/* v21 消消乐细节：飘动的云、Q 版小猫、步数紧张 */
.m18Sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.m18Sky img{position:absolute;opacity:.85;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.m18Sky img:nth-child(1){width:110px;top:16%;left:-30px;animation:m18cloud 26s linear infinite}
.m18Sky img:nth-child(2){width:80px;top:70%;left:-30px;animation:m18cloud 34s linear -12s infinite}
.m18Sky img:nth-child(3){width:70px;top:9%;right:14px;animation:m18sun 8s ease-in-out infinite}
@keyframes m18cloud{to{transform:translateX(calc(100vw + 140px))}}@keyframes m18sun{50%{transform:rotate(12deg) scale(1.06)}}
.m18Mascot{position:absolute;z-index:4;left:10px;top:calc(118px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:6px;pointer-events:none}
.m18Mascot img{width:52px;height:52px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.m18Mascot span{opacity:0;transform:scale(.6);transform-origin:0 50%;padding:5px 10px;border-radius:14px 14px 14px 4px;background:#fff;color:#7a2a40;font:600 13px "MG16 Xiaowei",sans-serif;box-shadow:0 3px 0 rgba(160,60,90,.35);transition:all .25s cubic-bezier(.2,1.6,.4,1);white-space:nowrap}
.m18Mascot.talk span{opacity:1;transform:none}
.m18Mascot.hop img{animation:m18hop .5s cubic-bezier(.2,1.6,.4,1)}@keyframes m18hop{30%{transform:translateY(-12px) rotate(-8deg) scale(1.08)}60%{transform:translateY(0) rotate(4deg) scale(.96)}}
.m18Moves.low{animation:m18beat .8s ease-in-out infinite}@keyframes m18beat{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
.m18Wrap,.m18Goals,.m18Score{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.m18Sky img,.m18Mascot img,.m18Moves.low{animation:none!important}}

/* v23 消消乐：收集飞向目标、目标牌弹一下、连锁狂热的金光 */
.m18Fly{position:fixed;z-index:6;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;transition:transform .5s cubic-bezier(.5,-.3,.6,1),opacity .5s;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.m18Goals span.bump{animation:m18bump .35s cubic-bezier(.2,1.6,.4,1)}@keyframes m18bump{40%{transform:scale(1.18)}}
.p16.m18.fever .m18Cv{box-shadow:0 0 0 5px rgba(255,255,255,.55),0 0 0 9px #ffd35a,0 0 40px 10px rgba(255,190,60,.75)!important;animation:m18fev .5s ease-in-out infinite alternate}
@keyframes m18fev{to{filter:brightness(1.12) saturate(1.15)}}
@media (prefers-reduced-motion:reduce){.m18Fly{transition:none}.p16.m18.fever .m18Cv,.m18Goals span.bump{animation:none!important}}

/* v24 消消乐：道具栏、关卡地图小路 */
.m18Boost{position:relative;z-index:3;display:flex;gap:8px;justify-content:center;padding:2px 10px 4px}
.m18Boost button{position:relative;display:grid;justify-items:center;width:66px;padding:5px 0 4px;border-radius:16px;border:2px solid rgba(255,255,255,.75);background:linear-gradient(180deg,#fff6fb,#ffd6e6);color:#7a2a40;font:600 11.5px "MG16 Xiaowei",sans-serif;box-shadow:0 4px 0 rgba(160,60,90,.35);transition:transform .12s}
.m18Boost button img{width:30px;height:30px}.m18Boost button em{position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ff5a7a;color:#fff;font:700 11px sans-serif;font-style:normal;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.m18Boost button.on{background:linear-gradient(180deg,#fff3a0,#ffc861);transform:translateY(-4px);box-shadow:0 0 0 3px #fff,0 0 16px rgba(255,200,90,.9)}
.m18Boost button:disabled{filter:grayscale(1);opacity:.5}.m18Boost button:active{transform:scale(.92)}
.m18Mascot{pointer-events:auto!important;cursor:pointer}
.m18Lv{position:relative;grid-template-columns:repeat(3,1fr)!important;row-gap:14px!important}
.m18Lv button:nth-child(6n+4),.m18Lv button:nth-child(6n+5),.m18Lv button:nth-child(6n+6){direction:ltr;transform:translateX(0)}
.m18Lv button:nth-child(3n+2){transform:translateY(8px)}.m18Lv button:nth-child(3n){transform:translateY(16px)}
.m18Lv::before{content:"";position:absolute;inset:18px 12%;border-left:3px dashed rgba(255,200,230,.45);border-right:3px dashed rgba(255,200,230,.45);border-radius:40px;pointer-events:none}