*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#05060c;color:#f4ecd6;font-family:"PingFang SC","Microsoft YaHei",sans-serif;overflow:hidden}
#wrap{position:relative;width:100vw;height:100vh}
canvas{display:block;width:100%;height:100%}
.panel{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:radial-gradient(ellipse at 50% 30%,rgba(60,40,10,.92),rgba(5,6,14,.96) 70%);overflow:auto;padding:24px;text-align:center}
.panel.show{display:flex}
h1{font-size:46px;letter-spacing:8px;background:linear-gradient(#fff6c8,#e0a92a 55%,#8a5a10);-webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,200,80,.5))}
h1 small{display:block;font-size:18px;letter-spacing:12px;color:#e8d6a0;-webkit-text-fill-color:#e8d6a0;margin-top:4px}
h2{font-size:30px;color:#ffd977;text-shadow:0 0 14px #c80}
h2 small{display:block;font-size:15px;color:#ddd}
h3{color:#e8c66a;font-size:16px;letter-spacing:4px;margin-top:6px}
.tag{color:#b9a676;font-size:13px}
input{background:#141826;border:1px solid #8a6a2a;color:#fff;padding:6px 10px;border-radius:6px;font-size:15px}
.cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:1100px}
.card{width:180px;padding:10px;border-radius:12px;cursor:pointer;background:linear-gradient(160deg,#1c2236,#0d1020);
  border:2px solid #3a3f58;transition:.15s;text-align:left;font-size:12px;color:#cfd3e6}
.card:hover{transform:translateY(-3px);border-color:#e8b84a;box-shadow:0 0 18px rgba(232,184,74,.4)}
.card.sel{border-color:#ffd977;box-shadow:0 0 24px rgba(255,217,119,.7)}
.card canvas{width:100%;height:150px;display:block;border-radius:8px;background:radial-gradient(#2a3150,#0b0d18)}
.card b{display:block;font-size:17px;color:#fff;margin:6px 0 2px}
.card i{color:#e8c66a;font-style:normal}
.card .lore{color:#8f97b8;margin-top:6px;font-style:italic}
#choices .card{width:240px;font-size:14px}
#choices .card .ic{font-size:34px;text-align:center;display:block}
#choices .card.evo{border-color:#ff9a3a;background:linear-gradient(160deg,#3a2210,#140b06)}
.chaps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:1000px}
.chap{padding:8px 14px;border-radius:8px;border:1px solid #5a4a2a;background:#151422;cursor:pointer;font-size:13px}
.chap.sel{background:#5a3f10;border-color:#ffd977}
.chap.lock{opacity:.35;cursor:not-allowed}
button{background:#22263a;color:#f4ecd6;border:1px solid #8a6a2a;padding:8px 18px;border-radius:8px;cursor:pointer;font-size:15px}
button.big{font-size:22px;padding:12px 46px;letter-spacing:8px;background:linear-gradient(#ffdf7a,#c8861a);color:#2a1600;border:none;
  box-shadow:0 0 20px rgba(255,190,60,.6);font-weight:bold}
button:hover{filter:brightness(1.15)}
.help{font-size:12px;color:#9aa0bb}
#board{font-size:12px;color:#aab;min-height:20px}
#board table{margin:auto;border-collapse:collapse}
#board td{padding:2px 10px;border-bottom:1px solid #222}
#storyText{max-width:620px;line-height:1.9;font-size:16px;color:#e9e0c6}
/* ===== v2：精修立绘 / 图标等级框 ===== */
#menuArt{position:fixed;right:-4vw;bottom:0;width:62vw;height:92vh;background:no-repeat right bottom/contain;opacity:.32;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 45%,transparent);mask-image:linear-gradient(to left,#000 45%,transparent);transition:background-image .3s;z-index:0}
#menu>*:not(#menuArt){position:relative;z-index:1}
#chars .card{width:190px}
.card .pt{position:relative;height:170px;border-radius:8px;background:#0b0d18 no-repeat 30% 20%/cover;overflow:hidden}
.card .pt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(5,6,14,.85))}
.card .pt .sp{position:absolute;right:4px;bottom:2px;height:92px;z-index:1;filter:drop-shadow(0 2px 4px #000)}
.card .role{display:inline-block;margin:4px 0;padding:1px 8px;border-radius:10px;background:#3a2a10;color:#ffd977;font-size:11px}
.ico{position:relative;width:88px;height:88px;margin:2px auto 6px;border-radius:14px;padding:5px}
.ico img,.ico .emo{width:100%;height:100%;border-radius:9px;display:block}
.ico .emo{display:flex;align-items:center;justify-content:center;font-size:40px;background:#0d1020}
.ico.t1{background:linear-gradient(145deg,#f0b07a,#7a3e14);box-shadow:0 0 8px rgba(200,120,50,.5)}
.ico.t2{background:linear-gradient(145deg,#ffffff,#8d97ab);box-shadow:0 0 14px rgba(170,220,255,.85)}
.ico.t3{background:linear-gradient(145deg,#fff2a8,#c88a10);box-shadow:0 0 22px rgba(255,200,60,.95);animation:goldglow 1.4s ease-in-out infinite}
@keyframes goldglow{50%{box-shadow:0 0 34px rgba(255,220,100,1)}}
.ico .lvb{position:absolute;right:-8px;top:-8px;padding:1px 6px;border-radius:7px;background:rgba(0,0,0,.85);font:bold 12px sans-serif}
.ico.t1 .lvb{color:#f0b07a;border:1px solid #f0b07a}.ico.t2 .lvb{color:#e8f2ff;border:1px solid #e8f2ff}.ico.t3 .lvb{color:#ffe36a;border:1px solid #ffe36a}
#choices .card{text-align:center}
#choices .card.t2{border-color:#c9d6ea}#choices .card.t3{border-color:#ffd45a;background:linear-gradient(160deg,#3a2c08,#120d04)}
.pips{display:flex;gap:4px;justify-content:center;margin:4px 0}
.pips i{width:12px;height:12px;transform:rotate(45deg);background:#2a2e44;border:1px solid #555}
.pips i.on{background:#e8c66a;border-color:#fff3b0}.pips i.new{background:#fff;border-color:#fff;box-shadow:0 0 8px #fff;animation:pip .8s infinite alternate}
@keyframes pip{to{opacity:.4}}
.upg{margin:6px 0;font-size:13px;color:#cfd3e6}.upg s{color:#7a8098}.upg b{color:#9fffb0;font-size:14px}
.mile{margin:4px 0;padding:4px 6px;border-radius:6px;font-size:12px;font-weight:bold}
.mile.m2{background:rgba(200,220,255,.12);color:#e8f2ff;border:1px solid #9fb3d9}.mile.m3{background:rgba(255,200,60,.15);color:#ffe36a;border:1px solid #ffd45a}
/* ===== v3：成就 / 提示 / 手机按钮 ===== */
#achBtn{margin-top:4px}
#achList{display:none;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;max-width:900px;width:100%}
#achList.open{display:grid}
.ach{padding:6px 8px;border-radius:8px;background:#141826;border:1px solid #333a55;text-align:left;font-size:12px;color:#7a8098}
.ach b{display:block;font-size:13px;color:#8a90a8}.ach.got{border-color:#e8b84a;background:linear-gradient(160deg,#3a2c08,#141008);color:#e8d6a0}.ach.got b{color:#ffe36a}
#toast{position:absolute;left:50%;top:14%;transform:translate(-50%,-30px);opacity:0;pointer-events:none;transition:.35s;z-index:20;
  padding:10px 22px;border-radius:12px;background:linear-gradient(160deg,#3a2c08,#120d04);border:2px solid #ffd45a;box-shadow:0 0 24px rgba(255,200,60,.6);text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast b{display:block;color:#ffe36a;font-size:16px}#toast span{font-size:12px;color:#e8d6a0}
#pad{position:absolute;right:18px;bottom:26px;display:none;gap:12px;z-index:5}
#pad button{width:72px;height:72px;border-radius:50%;font-size:16px;font-weight:bold;border:2px solid #ffd45a;background:rgba(40,30,8,.65);color:#ffe9a8}
#pad #btnAwake{border-color:#ff8ad0;color:#ffd0ee;background:rgba(60,10,40,.6)}
@media (hover:none){#pad.on{display:flex}}
/* ===== v4 ===== */
.card .pt .sp.l{right:auto;left:4px}
#levelup.dim{opacity:0;pointer-events:none;transition:opacity .2s}
#choices .card.up.t3{border-color:#ffd45a;animation:goldglow 1.4s ease-in-out infinite;position:relative;overflow:hidden}
#choices .card.up.t3::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;transform:rotate(25deg);
  background:linear-gradient(90deg,transparent,rgba(255,250,220,.35),transparent);animation:sweep 2.2s linear infinite;pointer-events:none}
@keyframes goldglow{0%,100%{box-shadow:0 0 14px rgba(255,200,60,.5)}50%{box-shadow:0 0 34px rgba(255,220,100,.95)}}
@keyframes sweep{from{left:-60%}to{left:130%}}
#pad #btnDash{border-color:#9fd0ff;color:#dff0ff;background:rgba(10,30,60,.6)}
.unlock{color:#9fe8ff}
/* v6 标题 */
#title{position:absolute;inset:0;z-index:20;display:none;overflow:hidden;cursor:pointer;background:radial-gradient(ellipse at 50% 40%,#2a1c4a,#07081a 70%)}
#title.show{display:block}
#title.out{animation:tOut .6s forwards}
@keyframes tOut{to{opacity:0;transform:scale(1.08);filter:brightness(2)}}
.tstars{position:absolute;inset:-50%;background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 120px 80px,#ffe9a8,transparent),radial-gradient(1px 1px at 200px 160px,#bfe6ff,transparent),radial-gradient(2px 2px at 60px 190px,#fff,transparent);background-size:240px 220px;animation:tDrift 60s linear infinite;opacity:.8}
@keyframes tDrift{to{transform:translate(240px,220px)}}
.tring{position:absolute;left:50%;top:40%;width:min(70vw,70vh,620px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,212,90,.5);box-shadow:0 0 60px rgba(255,200,80,.35),inset 0 0 60px rgba(255,200,80,.25);animation:tSpin 30s linear infinite}
.tring::before,.tring::after{content:"";position:absolute;inset:8%;border-radius:50%;border:1px dashed rgba(255,230,160,.45)}
.tring::after{inset:20%;border-style:dotted;animation:tSpin 12s linear infinite reverse}
@keyframes tSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.tathena{position:absolute;left:50%;top:3%;height:46%;max-width:92vw;object-fit:contain;transform:translateX(-50%);opacity:0;filter:drop-shadow(0 0 30px rgba(255,220,140,.6));animation:tAth 2s .3s forwards;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)}
@keyframes tAth{from{opacity:0;transform:translate(-50%,30px)}to{opacity:.9;transform:translate(-50%,0)}}
.tlogo{position:absolute;left:0;right:0;top:46%;text-align:center;animation:tLogo 1.4s 1s both;padding:0 12px}
.tlogo small{letter-spacing:.5em;color:#e8c66a;font-size:12px}
.tlogo h1{margin:4px 0 0;font:900 clamp(40px,8vw,84px) serif;letter-spacing:.12em;background:linear-gradient(180deg,#fff6d0,#ffd45a 45%,#a8701a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #3a2208) drop-shadow(0 0 24px rgba(255,200,80,.6))}
.tlogo h2{margin:0;font:700 clamp(18px,3vw,28px) serif;letter-spacing:.6em;color:#cfe4ff;text-shadow:0 0 12px #3a7bff}
@keyframes tLogo{from{opacity:0;transform:scale(1.6);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.theroes{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100vw,1100px);height:26%;display:grid;grid-template-columns:repeat(5,1fr)}
.theroes div{height:100%;background-repeat:no-repeat;background-size:cover;opacity:0;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%);animation:tHero .7s both;border-left:1px solid rgba(232,198,106,.25)}
.theroes div:nth-child(1){animation-delay:1.8s}.theroes div:nth-child(2){animation-delay:1.95s}.theroes div:nth-child(3){animation-delay:2.1s}.theroes div:nth-child(4){animation-delay:2.25s}.theroes div:nth-child(5){animation-delay:2.4s}
@keyframes tHero{from{opacity:0;transform:translateY(40px)}to{opacity:.95;transform:none}}
.tgo{position:absolute;left:0;right:0;bottom:28%;text-align:center;color:#fff;letter-spacing:.3em;font-size:14px;animation:tBlink 1.6s 2.8s infinite both}
@keyframes tBlink{0%,100%{opacity:.25}50%{opacity:1}}
/* v6 暂停 */
#pause{z-index:12;background:rgba(5,6,14,.82)}
.pbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.keys{border-collapse:collapse;font-size:13px;color:#ddd;margin-top:8px}
.keys td{padding:4px 12px;border-bottom:1px solid rgba(232,198,106,.2);text-align:left}
.keys td:first-child{color:#ffd977;font-weight:bold}
.tip{color:#9fe8ff;font-size:13px;max-width:420px}
/* v6 评级 */
#rank{display:flex;flex-direction:column;align-items:center}
#rank b{font:900 96px/1 serif;animation:rkIn .7s cubic-bezier(.2,1.6,.4,1) both}
#rank small{color:#ccc;font-size:12px}
#rank.rS b{background:linear-gradient(#fff6d0,#ffd45a,#c07a10);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(255,210,90,.8))}
#rank.rA b{color:#d8e4ff;text-shadow:0 0 16px #7aa8ff}
#rank.rB b{color:#d9a070;text-shadow:0 0 10px #8a4a1a}
@keyframes rkIn{from{opacity:0;transform:scale(3) rotate(-12deg)}to{opacity:1;transform:none}}
.crk{font-weight:900;margin-left:6px}.crk.rS{color:#ffd45a}.crk.rA{color:#bcd0ff}.crk.rB{color:#d9a070}
button:disabled{opacity:.6;cursor:wait}

.tcredit,.credit{font-size:10px;color:rgba(255,255,255,.45)}
.tcredit{position:absolute;right:10px;top:8px;max-width:46vw;text-align:right;margin:0}
@media (max-aspect-ratio:3/4){.tathena{height:36%;top:6%}.tlogo{top:42%}.theroes{height:22%}.tgo{bottom:24%}}

/* v12 */
#route .card{width:230px;text-align:center;font-size:14px}
#route .card .ic{font-size:34px;display:block;margin-bottom:6px}
#route .card:hover{border-color:#ffd977;transform:translateY(-3px)}
.mnote{min-height:1em;margin:4px 0 0;font-size:13px;color:#e8dcb8}
.chap.gold{display:flex;flex-direction:column;align-items:center;min-width:92px;border-color:#a8822a}
.chap.gold small{font-size:11px;opacity:.75}
.btabs{display:flex;gap:6px;justify-content:center;margin:4px 0 8px}
.btab{padding:3px 10px;border:1px solid #5a4a2a;border-radius:6px;cursor:pointer;font-size:12px}
.btab.on{background:#5a3f10;border-color:#ffd977}
.bempty{font-size:12px;opacity:.7}
#pad #btnGold{border-color:#ffd977;color:#fff2c0;background:rgba(60,45,10,.6)}

/* ===== v13：界面整理 / 手机适配 ===== */
#wrap{height:100vh;height:100dvh}
html,body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
input{-webkit-user-select:text;user-select:text}
.panel{justify-content:flex-start;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));touch-action:pan-y;-webkit-overflow-scrolling:touch}
.panel::before,.panel::after{content:"";margin:auto}          /* 内容放得下时居中，放不下时从顶部开始滚动，不再被裁掉 */
.panel>*{flex-shrink:0}
#menu{gap:10px}
#menu h3{margin-top:10px}
.card,.chap,button{transition:transform .15s,border-color .15s,box-shadow .15s,filter .15s}
.chap{min-height:36px;display:inline-flex;align-items:center;justify-content:center}
button.big:active,.card:active,.chap:active{transform:scale(.97)}
#board{width:100%;max-width:560px}
#board table{width:100%}
#board td{white-space:nowrap}
/* 手机按钮：右下角扇形排布，只显示当前可用的，就绪时发光 */
#pad{right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:196px;height:196px;display:none;gap:0;pointer-events:none}
#pad button{position:absolute;width:60px;height:60px;padding:0;font-size:14px;pointer-events:auto;touch-action:none;backdrop-filter:blur(2px)}
#pad #btnUlt{right:0;bottom:0;width:84px;height:84px;font-size:18px}
#pad #btnAwake{right:94px;bottom:6px}
#pad #btnDash{right:12px;bottom:94px}
#pad #btnGold{right:84px;bottom:82px}
#pad button.off{display:none}
#pad button.ready{animation:padGlow 1s ease-in-out infinite}
#pad #btnUlt:not(.ready),#pad #btnAwake:not(.ready),#pad #btnDash:not(.ready){opacity:.5}
@keyframes padGlow{50%{box-shadow:0 0 22px rgba(255,220,120,.95);transform:scale(1.06)}}
#pad button:active{transform:scale(.92)}

/* 窄屏（手机竖屏） */
@media (max-width:640px){
  h1{font-size:34px;letter-spacing:4px}
  h1 small{font-size:14px;letter-spacing:8px}
  h2{font-size:24px}
  #menuArt{width:100vw;right:-20vw;opacity:.18}
  #chars{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}
  #chars .card{width:auto;padding:6px;font-size:11px}
  #chars .card .pt{height:104px}
  #chars .card .pt .sp{height:64px}
  #chars .card b{font-size:15px;margin:4px 0 0}
  #chars .card .lore{display:none}
  #chars .card>div:not(.pt){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .chap{padding:6px 10px;font-size:12px}
  .help{display:none}
  button.big{font-size:20px;padding:12px 36px;letter-spacing:6px}
  #choices,#routeCh{flex-direction:column;flex-wrap:nowrap;width:100%;max-width:440px;gap:8px}
  #choices .card,#route .card{width:100%;display:grid;grid-template-columns:64px 1fr;column-gap:10px;align-items:center;text-align:left;padding:8px 10px;font-size:12px}
  #choices .card>*,#route .card>*{grid-column:2}
  #choices .card .ico{grid-column:1;grid-row:1/span 6;width:60px;height:60px;margin:0;padding:4px}
  #choices .card .ico .lvb{font-size:10px;right:-6px;top:-6px}
  #choices .card .ic,#route .card .ic{grid-column:1;grid-row:1/span 3;font-size:32px;margin:0;text-align:center}
  #choices .card b,#route .card b{margin:0;font-size:15px}
  #choices .card .pips{justify-content:flex-start;margin:2px 0}
  #choices .card .lore{display:none}
  #choices .card .upg{margin:2px 0}
  #storyText{font-size:14px;line-height:1.8}
  .keys{font-size:12px}.keys td{padding:3px 8px}
  .tcredit{font-size:8px;max-width:58vw;opacity:.7}
}
/* 矮屏（手机横屏） */
@media (max-height:500px){
  .panel{gap:8px}
  h1{font-size:30px}h2{font-size:22px}h2 small{font-size:12px}
  #choices,#routeCh{flex-wrap:nowrap;gap:8px;max-width:100%}
  #choices .card,#route .card{width:31vw;max-width:250px;padding:6px 8px;font-size:11px}
  #choices .card .ico{width:56px;height:56px;padding:4px;margin:0 auto 2px}
  #choices .card .lore,#route .card .ic{display:none}
  #choices .card b,#route .card b{font-size:14px;margin:2px 0}
  #chars{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;padding-bottom:4px}
  #chars .card{width:150px;flex:0 0 150px}
  #chars .card .pt{height:96px}#chars .card .pt .sp{height:60px}
  #chars .card .lore{display:none}
  .help{display:none}
  .keys{display:none}
  #pad{width:180px;height:180px}
  #pad #btnUlt{width:74px;height:74px}
  #pad button{width:54px;height:54px;font-size:13px}
  #pad #btnAwake{right:84px}#pad #btnDash{bottom:84px}#pad #btnGold{right:74px;bottom:72px}
  .tcredit{font-size:8px}
}

/* v13b 设置面板 / 暂停按钮 */
#settings{z-index:14;background:rgba(5,6,14,.97)}
.sets{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px}
.sets label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:10px;background:#141826;border:1px solid #333a55;font-size:15px}
.sets input[type=range]{flex:1;max-width:220px;accent-color:#ffd45a;padding:0;background:none;border:none}
.seg{display:inline-flex;border:1px solid #8a6a2a;border-radius:8px;overflow:hidden}
.seg b{padding:6px 12px;font-size:13px;cursor:pointer;color:#cfc4a4;font-weight:normal;min-width:44px;text-align:center}
.seg b.on{background:linear-gradient(#ffdf7a,#c8861a);color:#2a1600;font-weight:bold}
#btnPause{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:44px;height:44px;padding:0;border-radius:50%;font-size:18px;display:none;z-index:6;background:rgba(10,14,30,.55);border:1px solid rgba(255,212,90,.6);color:#ffe9a8}
#btnPause.on{display:block}