html,body{margin:0;height:100%;background:#1b1b1f;color:#ddd;font:14px system-ui,"Noto Sans CJK SC",sans-serif}
header{display:flex;gap:14px;align-items:center;padding:6px 10px;background:#26262c;border-bottom:1px solid #333;flex-wrap:wrap;height:30px}
#info{margin-left:auto;color:#9cf;min-width:220px}
#wrap{position:absolute;top:43px;left:0;right:0;bottom:0;overflow:auto}
body.has-panel #wrap{right:260px}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#panel{position:absolute;top:43px;right:0;bottom:0;width:244px;padding:8px;background:#222228;border-left:1px solid #333;overflow:auto;font-size:13px;white-space:pre-wrap}
#panel h3{margin:0 0 6px;font-size:15px;color:#fc6}
#panel .cnt span{display:inline-block;margin-right:8px}
#tip{position:fixed;z-index:10;pointer-events:none;display:flex;gap:8px;background:rgba(20,20,26,.94);border:1px solid #666;border-radius:4px;padding:6px 8px;font-size:13px;line-height:1.45;max-width:340px}
#tip[hidden]{display:none}
#tip img{width:64px;height:80px;image-rendering:pixelated;border:1px solid #444;background:#000}
#tip .nm{font-size:15px;font-weight:bold}
#tip .player{color:#6af}#tip .ally{color:#fd4}#tip .enemy{color:#f66}
#tip .dim{color:#999}
/* ---- play mode ---- */
body.playing .viewer{display:none}
#hud{display:flex;gap:10px;align-items:center}
#hud[hidden]{display:none}
#hudTurn{color:#fc6;font-weight:bold}
#hudPhase.player{color:#6af}#hudPhase.ally{color:#fd4}#hudPhase.enemy{color:#f66}
button{font:inherit;background:#3a3a46;color:#eee;border:1px solid #666;border-radius:3px;padding:3px 10px;cursor:pointer}
button:disabled{opacity:.4;cursor:default}
button:not(:disabled):hover{background:#4a4a5a}
#menu{position:fixed;z-index:20;display:flex;flex-direction:column;gap:2px;background:rgba(30,24,16,.95);border:2px solid #b89a5a;border-radius:4px;padding:4px}
#menu[hidden]{display:none}
#menu button{min-width:84px;padding:7px 12px;font-size:15px;background:#4a3a24;border-color:#8a7040;text-align:left}
#menu button:not(:disabled):hover{background:#6a5230}
#banner{position:fixed;z-index:25;left:50%;top:40%;transform:translate(-50%,-50%);padding:14px 48px;font-size:26px;font-weight:bold;letter-spacing:4px;background:rgba(0,0,0,.72);border-top:2px solid;border-bottom:2px solid;pointer-events:none}
#banner[hidden]{display:none}
#banner.player{color:#8bf}#banner.ally{color:#fd5}#banner.enemy{color:#f77}
#dlg{position:fixed;z-index:30;left:50%;bottom:16px;transform:translateX(-50%);width:min(680px,94vw);display:flex;gap:12px;background:rgba(16,22,48,.95);border:2px solid #9ab;border-radius:6px;padding:10px 14px;cursor:pointer;min-height:90px}
#dlg[hidden]{display:none}
#dlg img{width:64px;height:80px;image-rendering:pixelated;border:1px solid #556;background:#000;flex:none}
#dlg img[hidden]{display:none}
#dlgName{color:#fc6;font-weight:bold;margin-bottom:4px}
#dlgText{white-space:pre-wrap;font-size:16px;line-height:1.5}
#dlgOpts{display:flex;flex-direction:column;gap:6px;margin-top:6px}
#dlgOpts button{font-size:16px;padding:6px 14px;text-align:left}
#result{position:fixed;z-index:40;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(0,0,0,.6)}
#result[hidden]{display:none}
#resultTitle{font-size:64px;font-weight:bold;letter-spacing:12px;text-shadow:0 0 18px #000}
#result.win #resultTitle{color:#ffd84a}#result.lose #resultTitle{color:#d33}
#resultText{font-size:18px}
#result button{font-size:18px;padding:8px 24px}
.toast{position:fixed;z-index:35;left:50%;top:70px;transform:translateX(-50%);background:rgba(0,0,0,.8);border:1px solid #b89a5a;padding:6px 16px;border-radius:4px;color:#fd8}
#panel .card{display:flex;gap:8px;margin:8px 0;padding:6px;background:#2c2c34;border-radius:4px;white-space:normal;line-height:1.45}
#panel .card img{width:48px;height:60px;image-rendering:pixelated;background:#000}
#panel .player{color:#6af}#panel .ally{color:#fd4}#panel .enemy{color:#f66}
#panel .dim{color:#999}
#panel .vic{margin:8px 0;color:#bbb;font-size:12px}
#log{margin-top:8px;padding-top:6px;border-top:1px solid #444;color:#aaa;font-size:12px}
#forecast{background:#3a2a1a;border:1px solid #b89a5a;border-radius:4px;padding:6px;margin-bottom:6px;white-space:normal}
@media (max-width:700px){body.has-panel #wrap{right:0;bottom:150px}#panel{top:auto;height:134px;width:auto;left:0;border-left:0;border-top:1px solid #333}header{height:auto}}
#toStory{font-size:20px;padding:8px 26px;background:#7a2b1b;color:#fff;border:1px solid #c9b27a;text-decoration:none}
/* ---- P4 CczHelper list / title debug (shared by title.html and campaign.html) ---- */
#layer[hidden]{display:none}
.ccz-save,.ccz-debug{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#d4d0c8;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:3px 3px 8px rgba(0,0,0,.55);font:12px/1.25 "SimSun","Noto Sans CJK SC",sans-serif;color:#000;min-width:620px}
.ccz-save-title{background:linear-gradient(90deg,#0a246a,#a6caf0);color:#fff;font-weight:bold;padding:2px 5px;display:flex;justify-content:space-between;align-items:center;height:18px}
.ccz-save-x{width:17px;height:15px;padding:0;font:11px/12px "SimSun",sans-serif;color:#000;background:#d4d0c8;border:1px solid;border-color:#fff #404040 #404040 #fff}
.ccz-save-list{height:400px;overflow:auto;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;margin:6px}
.ccz-save-list table{border-collapse:collapse;width:100%;table-layout:fixed}
.ccz-save-list td{padding:0 4px;height:15px;white-space:nowrap;overflow:hidden;border-right:1px solid #b8b8b8;border-bottom:1px solid #e0e0e0;font:12px/15px "SimSun","Noto Sans CJK SC",sans-serif}
.ccz-save-list td.no{width:52px}
.ccz-save-list td.date{width:118px;border-right:0;color:#333}
.ccz-save-list tr.sel td{background:#0a246a;color:#fff}
.ccz-save-list tr:hover td{outline:1px dotted #0a246a}
.ccz-save-foot{display:flex;gap:4px;align-items:center;margin:0 6px 6px;flex-wrap:wrap}
.ccz-save-foot button,.ccz-debug button{min-width:58px;height:22px;font:12px "SimSun","Noto Sans CJK SC",sans-serif;color:#000;background:#d4d0c8;border:2px solid;border-color:#fff #404040 #404040 #fff;padding:0 6px}
.ccz-save-foot button:disabled{color:#888;text-shadow:1px 1px 0 #fff}
.ccz-save-foot button:active:not(:disabled),.ccz-debug button:active:not(:disabled){border-color:#404040 #fff #fff #404040}
.ccz-save-page{min-width:96px;color:#000}
.ccz-save-pagecount{min-width:48px;text-align:center}
.dbg-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:12px}
.dbg-body input{width:70px;margin-left:8px}
.dbg-preview{color:#003c9d}
.dbg-quick{display:flex;gap:4px}
.dbg-foot{padding:0 12px 10px;text-align:right}
.dbg-foot button{min-width:70px}
/* ---- P4 battle options ---- */
#minimap{position:fixed;right:266px;top:50px;z-index:6;background:rgba(8,8,12,.82);border:1px solid #b89a5a;border-radius:3px;padding:3px;display:flex;flex-direction:column;gap:1px}
#minimap[hidden]{display:none}
#minimap canvas{display:block;width:160px;height:auto;image-rendering:pixelated}
#minimap span{font-size:10px;color:#c9b27a;text-align:center}
body.auto-max header{display:none}
body.auto-max #wrap{top:0}
body.auto-max #panel{top:0}
body.auto-max #minimap{top:6px;right:266px}
#toTitle{font-size:18px;padding:8px 24px;background:#3a3a46;color:#fff;border:1px solid #888;text-decoration:none;border-radius:3px}
#skipBattle{font-size:18px;padding:8px 24px}
@media (max-width:700px){#minimap{right:6px;top:6px}#minimap canvas{width:110px}}

/* ---- P5d scripted single combat ---- */
#duel{position:fixed;z-index:28;inset:0;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;gap:min(16vw,180px);padding:0 0 116px;background-color:#160f08;background-size:cover;background-position:center 40%;background-repeat:no-repeat}
#duel::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.6) 100%);z-index:-1}
#duel[hidden]{display:none}
.duel-fighter{width:120px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#ffe9b0;text-shadow:0 2px 4px #000}
.duel-fighter.left{transform:translateY(-6px)}
.duel-fighter.right{transform:translateY(-6px)}
.duel-name{font-size:17px;font-weight:bold;letter-spacing:1px;white-space:nowrap}
.duel-sprite{width:96px;height:96px;image-rendering:pixelated;background-repeat:no-repeat;background-size:96px auto;filter:drop-shadow(0 4px 6px #000)}
.duel-fighter.right .duel-sprite{transform:scaleX(-1)}
.duel-sprite.attack{animation:duel-lunge .22s ease-out}
.duel-sprite.hurt{animation:duel-hurt .22s ease-out}
@keyframes duel-lunge{0%{margin-left:0}45%{margin-left:26px}100%{margin-left:0}}
.duel-fighter.right .duel-sprite.attack{animation-name:duel-lunge-r}
@keyframes duel-lunge-r{0%{margin-right:0}45%{margin-right:26px}100%{margin-right:0}}
@keyframes duel-hurt{0%{filter:drop-shadow(0 0 0 #f00) brightness(1)}45%{filter:drop-shadow(0 0 10px #f33) brightness(1.6)}100%{filter:drop-shadow(0 4px 6px #000) brightness(1)}}
.duel-hp{width:104px;height:9px;background:#1a1008;border:1px solid #9a7a40;padding:1px}
.duel-hp i{display:block;height:100%;width:100%;background:linear-gradient(#ffe06a,#c88a18);transition:width .25s}
.duel-sp{width:104px;height:5px;background:#140c06;border:1px solid #6f5a32;margin-top:2px}
.duel-sp i{display:block;height:100%;width:0;background:linear-gradient(#9fe8ff,#3183c8);transition:width .2s}
.duel-vs{color:#e8c46a;font-size:18px;letter-spacing:6px;writing-mode:vertical-rl;text-shadow:0 0 12px #000;align-self:center;opacity:.85}
#fxflash{position:fixed;z-index:27;inset:0;pointer-events:none;background:#fff;opacity:.0}
#fxflash[hidden]{display:none}
#fxflash.on{animation:fx-flash .35s ease-out}
@keyframes fx-flash{0%{opacity:.55}100%{opacity:0}}
body.dueling #duel{display:flex}