/* 标题画面与体内世界地图。颜色只取 tokens.css 的变量及其 rgba 透明度变体。 */
#title, #map { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; z-index: 40; overflow: hidden; font-family: var(--font-ui); color: var(--ink); user-select: none; -webkit-user-select: none; animation: scr-fade 0.3s ease-out both; }
#title button, #map button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; outline: none; text-align: left; }
@keyframes scr-fade { from { opacity: 0; } }
@keyframes scr-in { from { opacity: 0; transform: translateY(14px); } }
.scr-in { animation: scr-in 0.36s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* 切角：::before 是边（镂空环），::after 是底；--edge / --fill / --bw 控制，底可以半透明 */
#title .scr-cut, #map .scr-cut { position: relative; isolation: isolate; --cut: 12px; --bw: 1px; --edge: var(--line-2); --fill: linear-gradient(180deg, var(--panel), var(--panel-2)); }
.scr-cut::before, .scr-cut::after { content: ''; position: absolute; inset: 0; transition: background-color 0.15s; }
.scr-cut::before { z-index: -1; background: var(--edge); clip-path: polygon(evenodd, var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut), var(--cut) 0,
  calc(var(--cut) + var(--bw) * 0.414) var(--bw), calc(100% - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(100% - var(--cut) - var(--bw) * 0.414), calc(100% - var(--cut) - var(--bw) * 0.414) calc(100% - var(--bw)), var(--bw) calc(100% - var(--bw)), var(--bw) calc(var(--cut) + var(--bw) * 0.414), calc(var(--cut) + var(--bw) * 0.414) var(--bw)); }
.scr-cut::after { z-index: -2; background: var(--fill); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }

/* ———— 标题画面：半透明，背后的演示要看得见 ———— */
#title .shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 640px 300px at 50% 47%, rgba(5,8,15,0.86) 0%, rgba(5,8,15,0.62) 50%, rgba(5,8,15,0) 100%),
  radial-gradient(ellipse 100% 100% at 50% 50%, rgba(5,8,15,0) 45%, rgba(5,8,15,0.88) 100%),
  linear-gradient(rgba(5,8,15,0.22), rgba(5,8,15,0.22)); }
#title .frame i { position: absolute; width: 40px; height: 40px; border: 0 solid var(--line-2); }
#title .frame .tl { left: 20px; top: 20px; border-width: 1px 0 0 1px; }
#title .frame .tr { right: 20px; top: 20px; border-width: 1px 1px 0 0; }
#title .frame .bl { left: 20px; bottom: 20px; border-width: 0 0 1px 1px; }
#title .frame .br { right: 20px; bottom: 20px; border-width: 0 1px 1px 0; }
#title .core { position: absolute; left: 0; right: 0; top: 236px; display: flex; flex-direction: column; align-items: center; }
#title .en { display: flex; align-items: center; gap: 18px; font-family: var(--font-num); font-weight: 600; font-size: 15px; letter-spacing: 10px; color: var(--teal); }
#title .en span { padding-left: 10px; }
#title .en i { width: 76px; height: 1px; background: linear-gradient(90deg, rgba(46,230,166,0), var(--teal)); }
#title .en i:last-child { background: linear-gradient(270deg, rgba(46,230,166,0), var(--teal)); }
#title .logo { position: relative; z-index: 0; margin: 12px 0 0; padding-left: 22px; font-family: var(--font-display); font-weight: 400; font-size: 150px; line-height: 1.04; letter-spacing: 22px; color: var(--ink); white-space: nowrap; text-shadow: 0 4px 0 rgba(5,8,15,0.9); animation-delay: 0.05s; }
#title .logo::before { content: attr(data-text); position: absolute; left: 0; top: 0; padding-left: 22px; z-index: -1; color: transparent; text-shadow: 0 0 26px rgba(46,230,166,0.85), 0 0 70px rgba(53,208,255,0.5); animation: scr-breathe 3.6s ease-in-out infinite alternate; }
@keyframes scr-breathe { from { opacity: 0.3; } to { opacity: 1; } }
#title .flow { width: 460px; height: 2px; margin-top: 20px; background: linear-gradient(90deg, rgba(53,208,255,0), var(--cyan) 22%, var(--mag) 50%, var(--teal) 78%, rgba(46,230,166,0)); animation-delay: 0.1s; }
#title .sub { margin-top: 22px; padding-left: 12px; font-size: 22px; letter-spacing: 12px; color: var(--ink); opacity: 0.84; animation-delay: 0.12s; }
#title .start { margin-top: 64px; width: 300px; height: 66px; display: flex; align-items: center; justify-content: center; --cut: 14px; --edge: var(--teal); --fill: linear-gradient(180deg, var(--teal), rgba(46,230,166,0.8)); color: var(--bg); filter: drop-shadow(0 0 16px rgba(46,230,166,0.4)); transition: filter 0.15s; animation-delay: 0.18s; }
#title .start .w { font-size: 26px; font-weight: 700; letter-spacing: 14px; padding-left: 14px; }
#title .start kbd { position: absolute; right: 20px; top: 50%; margin-top: -9px; height: 18px; line-height: 16px; padding: 0 5px; box-sizing: border-box; border: 1px solid rgba(5,8,15,0.4); border-radius: 3px; font-family: var(--font-num); font-size: 10px; font-weight: 600; letter-spacing: 1px; color: rgba(5,8,15,0.6); }
#title .start:hover { --edge: var(--ink); --bw: 2px; filter: drop-shadow(0 0 26px rgba(46,230,166,0.75)); }
#title .snd { position: absolute; right: 76px; top: 48px; height: 38px; padding: 0 16px 0 13px; display: flex; align-items: center; gap: 8px; --cut: 8px; --fill: rgba(10,15,23,0.78); color: var(--dim); font-size: 13px; letter-spacing: 2px; }
#title .snd .ic, #title .snd svg { width: 20px; height: 20px; display: block; }
#title .snd b { font-weight: 700; color: var(--teal); letter-spacing: 0; }
#title .snd.off b { color: var(--dim); }
#title .snd:hover { --edge: var(--teal); color: var(--ink); }

/* ———— 体内世界地图 ———— */
#map { background: var(--bg); }
#map svg.bg, #map svg.live, #map svg.fx { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; pointer-events: none; }
#map svg.bg, #map svg.live { will-change: transform; }
#map .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 50% 46%, rgba(5,8,15,0) 60%, rgba(5,8,15,0.7) 100%), linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(5,8,15,0) 20%, rgba(5,8,15,0) 72%, rgba(5,8,15,0.9) 100%); }

#map .c-cyan { --c: var(--cyan); } #map .c-mag { --c: var(--mag); } #map .c-teal { --c: var(--teal); } #map .c-violet { --c: var(--violet); } #map .c-lime { --c: var(--lime); }
#map .acc-cyan, #map.acc-cyan { --acc: var(--cyan); --acc-a: rgba(53,208,255,0.16); --acc-g: rgba(53,208,255,0.42); }
#map .acc-mag, #map.acc-mag { --acc: var(--mag); --acc-a: rgba(255,61,138,0.16); --acc-g: rgba(255,61,138,0.42); }
#map .acc-amber, #map.acc-amber { --acc: var(--amber); --acc-a: rgba(255,179,71,0.16); --acc-g: rgba(255,179,71,0.42); }
#map .acc-violet, #map.acc-violet { --acc: var(--violet); --acc-a: rgba(180,140,255,0.16); --acc-g: rgba(180,140,255,0.42); }

#map .base { fill: var(--bg); }
#map .rim { fill: none; stroke: var(--line); stroke-width: 16; opacity: 0.45; }
#map .membrane { fill: url(#scr-bodyf); stroke: var(--line-2); stroke-width: 1.5; }
#map #scr-dots circle { fill: var(--dim-2); opacity: 0.45; }
#map .topo { fill: none; stroke: var(--line-2); stroke-width: 1; opacity: 0.3; }
#map .topo.lit { stroke: var(--c); opacity: 0.12; }
#map .inner-m { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 7; opacity: 0.8; }
#map .track { fill: none; stroke: var(--line-2); stroke-width: 12; stroke-linecap: round; opacity: 0.75; }
#map .track2 { fill: none; stroke: var(--bg); stroke-width: 4; stroke-linecap: round; opacity: 0.7; }
#map .lit { fill: none; stroke-width: 3.5; stroke-linecap: round; }
#map .next { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; opacity: 0.6; }
#map .branch { fill: none; stroke: var(--dim-2); stroke-width: 1.3; stroke-dasharray: 2 6; stroke-linecap: round; }
#map .flow { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.1 22; opacity: 0.6; animation: scr-flow 1.4s linear infinite; }
@keyframes scr-flow { to { stroke-dashoffset: -22.1; } }

#map .node .plate { fill: var(--panel-2); stroke: var(--c); stroke-width: 2; }
#map .node .inner { fill: none; stroke: var(--c); stroke-width: 1; opacity: 0.4; }
#map .node .core { fill: var(--c); }
#map .node .ring2 { fill: none; stroke: var(--c); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: 0.7; }
#map .node .nm { font-family: var(--font-display); font-size: 24px; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; letter-spacing: 4px; }
#map .node .st { font-family: var(--font-ui); font-size: 11px; font-weight: 700; fill: var(--c); text-anchor: middle; dominant-baseline: middle; letter-spacing: 2px; }
#map .node .q { font-family: var(--font-num); font-size: 22px; font-weight: 600; fill: var(--dim); text-anchor: middle; dominant-baseline: middle; }
#map .node.known .plate { stroke-width: 1.5; stroke-opacity: 0.65; }
#map .node.known .dot { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: 0.7; }
#map .node.known .nm { opacity: 0.78; }
#map .node.unknown .plate { stroke: var(--dim-2); stroke-width: 1.2; stroke-dasharray: 4 5; }
#map .node.unknown .nm { fill: var(--dim); opacity: 0.7; }
#map .node.unknown .st { fill: var(--dim-2); }
#map .node.myst .plate { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; }
#map .node.myst .q { font-size: 16px; fill: var(--dim-2); }
#map .node.myst .nm { font-family: var(--font-ui); font-size: 12px; fill: var(--dim-2); letter-spacing: 3px; }
#map .node.myst .lkb { fill: var(--bg); stroke: var(--line-2); stroke-width: 1; }
#map .node.myst .lk { color: var(--dim); }
#map .pulse { fill: none; stroke: var(--c); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: scr-pulse 1.8s ease-out infinite; }
@keyframes scr-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }

/* 左上：返回、面包屑、选中餐的大标题 */
#map .back { position: absolute; left: 44px; top: 32px; width: 40px; height: 40px; --cut: 8px; color: var(--dim); }
#map .back svg { width: 20px; height: 20px; display: block; margin: 10px; }
#map .back:hover { --edge: var(--teal); color: var(--ink); }
#map .crumb { position: absolute; left: 100px; top: 44px; line-height: 16px; font-family: var(--font-num); font-size: 12px; font-weight: 600; letter-spacing: 4px; color: var(--dim); white-space: nowrap; }
#map .head { position: absolute; left: 44px; top: 98px; white-space: nowrap; }
#map .head.swap { animation: scr-swap 0.18s ease-out both; }
@keyframes scr-swap { from { opacity: 0; transform: translateX(-8px); } }
#map .kick { display: flex; align-items: center; gap: 10px; font-family: var(--font-num); font-size: 13px; font-weight: 600; letter-spacing: 3px; color: var(--acc); transition: color 0.18s; }
#map .kick i { width: 22px; height: 3px; background: var(--acc); box-shadow: 0 0 8px var(--acc-g); }
#map .ttl { margin-top: 8px; font-family: var(--font-display); font-size: 64px; line-height: 1; letter-spacing: 8px; color: var(--ink); text-shadow: 0 0 24px var(--acc-g); }

/* 左下：已遭遇与脂肪酸储备 */
#map .enc { position: absolute; left: 44px; top: 752px; width: 384px; height: 104px; display: flex; --cut: 10px; animation-delay: 0.04s; }
#map .enc .h { display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--dim); white-space: nowrap; }
#map .enc .h b { font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
#map .enc .l { flex: 1; padding: 14px 0 0 18px; }
#map .enc .fs { display: flex; flex-wrap: wrap; row-gap: 7px; margin-top: 10px; }
#map .enc .f { width: 78px; display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 16px; color: var(--ink); white-space: nowrap; }
#map .enc .f i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fc); box-shadow: 0 0 7px var(--fc); }
#map .enc .f.u { color: var(--dim-2); font-family: var(--font-num); font-weight: 600; }
#map .enc .f.u i { width: 6px; height: 6px; background: none; box-shadow: none; border: 1px dashed var(--dim-2); }
#map .enc .r { width: 112px; padding: 14px 0 0 16px; border-left: 1px solid var(--line); margin: 12px 0; padding-top: 2px; }
#map .enc .v { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--amber); }
#map .enc .v svg { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 0 5px rgba(255,179,71,0.6)); }
#map .enc .v b { font-family: var(--font-num); font-size: 34px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 底部：四张餐卡 */
#map .cards { position: absolute; left: 452px; top: 752px; display: flex; gap: 12px; animation-delay: 0.08s; }
#map .card { width: 146px; height: 104px; --cut: 10px; --edge: var(--line); transition: transform 0.18s ease-out, filter 0.18s; }
#map .card .bar { position: absolute; left: 50%; top: 0; width: 44px; height: 3px; margin-left: -22px; background: var(--acc); box-shadow: 0 0 10px var(--acc-g); opacity: 0; transition: opacity 0.18s; }
#map .card .top { position: absolute; left: 14px; right: 12px; top: 11px; display: flex; justify-content: space-between; font-family: var(--font-num); font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--dim); }
#map .card .best { color: var(--ink); opacity: 0.75; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#map .card .nm { position: absolute; left: 0; right: 0; top: 32px; padding-left: 4px; text-align: center; font-family: var(--font-display); font-size: 30px; line-height: 34px; letter-spacing: 4px; color: var(--ink); transition: color 0.18s; }
#map .card .ft { position: absolute; left: 0; right: 0; bottom: 12px; height: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--dim); }
#map .card .ft svg { width: 13px; height: 13px; }
#map .card .stars { font-size: 16px; letter-spacing: 4px; padding-left: 4px; }
#map .card .stars b { font-weight: 400; color: var(--gold); text-shadow: 0 0 8px rgba(224,178,58,0.55); }
#map .card .stars i { font-style: normal; color: var(--dim-2); }
#map .card .bw { font-size: 12px; color: var(--dim); letter-spacing: 1px; }
#map .card .bw b { color: var(--ink); font-weight: 700; }
#map .card:hover:not(:disabled) { --edge: rgba(220,230,240,0.5); }
#map .card.sel { --edge: var(--acc); --fill: linear-gradient(180deg, var(--acc-a), rgba(10,15,23,0) 80%), linear-gradient(180deg, var(--panel), var(--panel-2)); transform: translateY(-8px); filter: drop-shadow(0 0 14px var(--acc-g)); }
#map .card.sel .bar { opacity: 1; }
#map .card.sel .top > span:first-child { color: var(--acc); }
#map .card.locked { cursor: default; --edge: var(--line); --fill: repeating-linear-gradient(135deg, rgba(31,44,61,0.3) 0 6px, rgba(31,44,61,0) 6px 13px), var(--panel-2); }
#map .card.locked .nm { color: var(--dim-2); }
#map .card.locked .top, #map .card.locked .ft { color: var(--dim-2); }

/* 右下：进入 */
#map .go { position: absolute; left: 1096px; top: 752px; width: 300px; height: 104px; --cut: 16px; --edge: var(--acc); --fill: var(--acc); color: var(--bg); filter: drop-shadow(0 0 18px var(--acc-g)); transition: filter 0.18s; animation-delay: 0.12s; }
#map .go .t { position: absolute; left: 28px; top: 26px; font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
#map .go .d { position: absolute; left: 28px; right: 22px; top: 66px; font-size: 12px; line-height: 16px; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#map .go .ar { position: absolute; right: 20px; top: 26px; width: 30px; height: 30px; }
#map .go .ar svg { width: 30px; height: 30px; display: block; }
#map .go:hover { --edge: var(--ink); --bw: 2px; filter: drop-shadow(0 0 28px var(--acc-g)); }
#map .go:disabled { cursor: default; --edge: var(--line); --fill: var(--panel); color: var(--dim-2); filter: none; }

/* 加餐挑战：三星后才出现的开关 */
#map .hard { position: absolute; left: 1096px; top: 700px; width: 300px; height: 40px; --cut: 8px; color: var(--dim); display: none; align-items: center; gap: 10px; padding: 0 0 0 16px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: 2px; cursor: pointer; }
#map .hard.show { display: flex; }
#map .hard .box { width: 16px; height: 16px; border: 2px solid var(--dim); border-radius: 3px; box-sizing: border-box; }
#map .hard:hover { --edge: var(--mag); color: var(--ink); }
#map .hard.on { --edge: var(--mag); color: var(--ink); }
#map .hard.on .box { background: var(--mag); border-color: var(--mag); box-shadow: 0 0 8px var(--mag); }
#map.hardon .go { --fill: var(--mag); --edge: var(--mag); filter: drop-shadow(0 0 18px rgba(255,61,138,0.42)); }
#map .card .hstars { margin-left: 6px; font-size: 11px; letter-spacing: 2px; color: var(--mag); text-shadow: 0 0 6px rgba(255,61,138,0.5); }
#map .card .hstars i { font-style: normal; color: var(--dim-2); text-shadow: none; }