* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0a12; overflow: hidden; }
body { font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; color: #f0e8d8; user-select: none; }
#wrap { position: absolute; left: 0; top: 0; width: 1152px; height: 648px; transform-origin: 0 0; overflow: hidden; background: #000; }
#game { display: block; width: 1152px; height: 648px; image-rendering: pixelated; cursor: pointer; }
.hidden { display: none !important; }

.panel { position: absolute; background: rgba(18, 20, 44, .92); border: 3px solid #c9a24a; box-shadow: 0 0 0 2px #1a1420, 4px 4px 0 rgba(0,0,0,.5); padding: 10px 14px; font-size: 16px; line-height: 1.5; }
#info { left: 14px; bottom: 14px; width: 270px; }
#info .nm { font-size: 20px; font-weight: bold; }
#info .nm small { font-size: 14px; font-weight: normal; color: #c8c0d8; margin-left: 8px; }
#info .ally { color: #7cc0ff; } #info .enemy { color: #ff8a7a; }
.bar { height: 10px; background: #1a1420; border: 1px solid #000; margin: 2px 0 4px; }
.bar > i { display: block; height: 100%; }
.bar.hp > i { background: #5fd35a; } .bar.mp > i { background: #5a9af0; }
#info .st { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 14px; color: #d8d0c0; }

#forecast { right: 14px; bottom: 60px; width: 270px; }
#forecast h4 { margin: 0 0 4px; font-size: 16px; color: #ffe08a; }
#forecast .row { display: flex; justify-content: space-between; font-size: 15px; }

#menu { position: absolute; right: 24px; top: 190px; width: 200px; display: flex; flex-direction: column; gap: 8px; }
button { font-family: inherit; font-size: 18px; font-weight: bold; color: #f0e8d8; background: #23285a; border: 3px solid #c9a24a; box-shadow: 0 0 0 2px #1a1420, 3px 3px 0 rgba(0,0,0,.5); padding: 9px 12px; cursor: pointer; text-align: left; }
button:hover:not(:disabled) { background: #3a43a0; color: #fff; }
button:disabled { opacity: .4; cursor: default; }
button small { float: right; font-weight: normal; font-size: 13px; color: #a8c4ff; margin-top: 4px; }

#deploy { right: 16px; top: 98px; width: 250px; display: flex; flex-direction: column; gap: 7px; }
#deploy h4 { margin: 0 0 2px; font-size: 18px; color: #ffe08a; }
#deploy button { font-size: 17px; padding: 7px 10px; }
#deploy button.off { background: #2a2a34; border-color: #77705c; color: #b8b0a0; }
#deploy button.go { margin-top: 6px; text-align: center; font-size: 20px; background: #7a2a1e; }
#deploy button.go:hover { background: #b03a28; }
#deploy button.camp { text-align: center; background: #1e4a3a; }
#deploy button.camp:hover { background: #2a6a52; }
#mute { position: absolute; right: 16px; bottom: 44px; font-size: 14px; padding: 4px 10px; opacity: .8; z-index: 5; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .35s; pointer-events: none; }
#fade.on { opacity: 1; }
#skip { position: absolute; left: 16px; top: 14px; font-size: 15px; padding: 6px 12px; opacity: .85; }
#stagename small.wx { color: #a8d8ff; }
#stagename { background: rgba(10, 10, 30, .6); padding: 5px 10px; border-radius: 4px; }

#choice { position: absolute; left: 0; right: 0; bottom: 214px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#choice button { width: 640px; text-align: center; font-size: 20px; padding: 12px; }
#quiz { background: rgba(8, 8, 20, .9); }
.qbox { width: 760px; background: rgba(18, 20, 44, .96); border: 4px solid #c9a24a; box-shadow: 0 0 0 3px #1a1420, 6px 6px 0 rgba(0,0,0,.5); padding: 28px 34px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.qn { font-size: 15px; color: #c8c0d8; }
.qq { font-size: 26px; line-height: 1.5; font-weight: bold; }
.qt { color: #ffd84a; font-size: 32px; }
.qa { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 6px; }
#quiz .qa button { width: 560px; text-align: center; font-size: 20px; padding: 12px; }
#quiz .qa button.go { width: 240px; background: #7a2a1e; }
.qg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; font-size: 20px; color: #d8d0c0; padding: 6px 60px; }
.qg b { color: #8ae07a; }
#camp { background: rgba(8, 8, 20, .88); text-align: left; }
.campbox { display: flex; gap: 16px; width: 1090px; height: 600px; }
.clist { width: 210px; display: flex; flex-direction: column; gap: 8px; }
.clist h4, .cmain h4 { margin: 0; font-size: 17px; color: #ffe08a; }
.cmain h4 small { font-size: 13px; font-weight: normal; color: #c8c0d8; }
#camp .clist button, #camp .ccls button { width: auto; min-width: 0; text-align: left; font-size: 17px; padding: 8px 10px; }
#camp .clist button.go { text-align: center; font-size: 20px; }
.cmain { min-width: 0; }
.clist button.on, .ccls button.on { background: #3a43a0; box-shadow: 0 0 0 2px #ffe08a; }
.clist button.go { margin-top: auto; text-align: center; font-size: 20px; background: #7a2a1e; }
.cmain { flex: 1; background: rgba(18, 20, 44, .95); border: 3px solid #c9a24a; box-shadow: 0 0 0 2px #1a1420; padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; }
.cmain h3 { margin: 0; font-size: 26px; }
.cmain h3 small { font-size: 15px; font-weight: normal; color: #c8c0d8; margin-left: 12px; }
.cstats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px 10px; font-size: 16px; color: #d8d0c0; }
.cstats b { color: #fff; font-size: 18px; }
.ccls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ccls button.advcls { border-color: #ffd84a; background: #3a2a5a; }
.ccls small.adv { float: none; display: block; font-size: 11px; color: #ffd84a; margin: 0; }
.ccls em.jl { font-style: normal; font-weight: normal; font-size: 12px; color: #a8e0ff; margin-left: 6px; }
.ccls em.jl.max { color: #ffd84a; font-weight: bold; }
.ccls button { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; }
.ccls .rk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 4px; font-size: 12px; font-weight: normal; }
.ccls .rk i { font-style: normal; white-space: nowrap; }
.rS { color: #ffd84a; font-weight: bold; } .rA { color: #ff9a5a; } .rB { color: #8ae07a; } .rC { color: #d8d0c0; } .rD { color: #9a94a8; } .rE { color: #6a6478; }
.cskill { font-size: 14px; color: #c8e0ff; }
.cequip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.cequip label { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cequip .ico { width: 40px; height: 40px; flex: none; object-fit: contain; background: #1a1d40; border: 2px solid #4a4f80; }
.cequip label span { width: 44px; color: #ffe08a; font-weight: bold; }
.cequip select { flex: 1; font-family: inherit; font-size: 15px; padding: 6px; background: #23285a; color: #f0e8d8; border: 2px solid #c9a24a; }
#turnbar { position: absolute; left: 14px; top: 12px; display: flex; gap: 6px; align-items: flex-end; }
#turnbar .t { width: 44px; height: 50px; border: 0 solid #666; border-bottom-width: 4px; background: transparent; position: relative; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); }
#turnbar .t canvas { position: absolute; left: 1px; bottom: 0; image-rendering: pixelated; }
#turnbar .t.ally { border-color: #4aa8ff; } #turnbar .t.enemy { border-color: #ff5a4a; }
#turnbar .t.now { width: 56px; height: 62px; }
#stagename { position: absolute; right: 16px; top: 12px; text-align: right; font-size: 18px; font-weight: bold; text-shadow: 2px 2px 0 #000; }
#stagename small { display: block; font-size: 14px; font-weight: normal; color: #ffe08a; }
#hint { position: absolute; right: 16px; bottom: 16px; font-size: 15px; color: #e8e0d0; text-shadow: 2px 2px 0 #000; }

#banner { position: absolute; left: 0; right: 0; top: 240px; padding: 22px 0; text-align: center; font-size: 40px; font-weight: bold; letter-spacing: 6px; background: linear-gradient(90deg, transparent, rgba(10,10,30,.92) 20%, rgba(10,10,30,.92) 80%, transparent); border-top: 3px solid #c9a24a; border-bottom: 3px solid #c9a24a; text-shadow: 3px 3px 0 #000; pointer-events: none; }

#dialog { position: absolute; left: 60px; right: 60px; bottom: 24px; height: 170px; display: flex; gap: 18px; background: rgba(18, 20, 44, .95); border: 4px solid #c9a24a; box-shadow: 0 0 0 3px #1a1420, 6px 6px 0 rgba(0,0,0,.5); padding: 16px; cursor: pointer; }
#portrait { width: 130px; height: 130px; flex: none; border: 3px solid #c9a24a; background: #2a2f5c; overflow: hidden; }
#portrait img, #portrait canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
#portrait img { image-rendering: auto; }
#dtext { flex: 1; position: relative; }
#dname { font-size: 20px; font-weight: bold; color: #ffe08a; margin-bottom: 6px; }
#dline { font-size: 21px; line-height: 1.6; }
#dnext { position: absolute; right: 0; bottom: 0; font-size: 14px; color: #c8c0d8; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 35%, #2c2a5a 0%, #12101f 70%); background-size: cover; background-position: center; text-align: center; }
.overlay h1 { font-size: 72px; margin: 0; letter-spacing: 10px; color: #ffe08a; text-shadow: 4px 4px 0 #6a2a1a, 8px 8px 0 #000; }
.overlay h2 { font-size: 56px; margin: 0; letter-spacing: 8px; color: #ffe08a; text-shadow: 4px 4px 0 #000; }
.overlay .sub { font-size: 20px; letter-spacing: 8px; color: #c8c0d8; margin-bottom: 26px; text-shadow: 2px 2px 0 #000; }
.overlay button { width: 240px; text-align: center; font-size: 22px; }
.overlay p { font-size: 20px; text-shadow: 2px 2px 0 #000; }
.overlay .help { margin-top: 26px; font-size: 15px; line-height: 1.9; color: #d8d0c0; text-shadow: 2px 2px 0 #000; }
#result { background: rgba(8, 8, 20, .82); }