:root{
    --bg:#0d1020; --panel:#182040; --panel2:#111733; --line:#c9a24a; --line2:#7a6230;
    --text:#ece3c8; --dim:#9a9a8a; --hp:#d24c3c; --exp:#3f9bd4; --sel:#f2d16b; --rare:#f2b234;
    --tile:52px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Galmuri11","DungGeunMo","Neo둥근모","NeoDunggeunmo","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.5}
  body{background:
    radial-gradient(ellipse at 50% 0%,#1b2244 0%,var(--bg) 60%);min-height:100vh;padding:10px}
  img.spr{image-rendering:pixelated;image-rendering:crisp-edges;vertical-align:bottom}
  #app{max-width:1000px;margin:0 auto}
  .top{display:flex;justify-content:space-between;align-items:center;border:3px double var(--line);background:var(--panel);padding:6px 12px;margin-bottom:8px}
  .top .ttl{font-weight:700;letter-spacing:.15em;color:var(--line)} .top .sub{margin-left:12px;color:var(--dim);font-size:13px}
  .top .tr span{margin-left:12px;color:var(--rare)}
  .body{display:grid;grid-template-columns:1fr 300px;gap:8px;align-items:start}
  @media (max-width:820px){ .body{grid-template-columns:1fr} .side{display:none;position:fixed;inset:60px 10px 10px;z-index:20;overflow:auto} .side.open{display:block} :root{--tile:34px} }
  .main{border:3px double var(--line);background:var(--panel);min-height:420px;position:relative}
  .side{border:3px double var(--line);background:var(--panel);padding:10px;font-size:13px}
  button{font:inherit;cursor:pointer}
  .btn{display:block;width:100%;margin-top:10px;padding:10px;background:var(--line);color:#1a1200;border:0;font-weight:700;letter-spacing:.05em}
  .btn:hover{background:#e6c46a}
  .mini{background:var(--panel2);color:var(--text);border:1px solid var(--line2);padding:2px 8px;font-size:12px}
  .mini:hover:not(:disabled){border-color:var(--line);color:var(--sel)} .mini:disabled{opacity:.4;cursor:default} .mini.on{background:var(--line);color:#1a1200}
  .dim{color:var(--dim)} .rare{color:var(--rare)} .sec{margin:10px 0 4px;color:var(--line);border-bottom:1px solid var(--line2);font-size:12px;letter-spacing:.1em}

  /* 상태창 */
  .closeS{display:none;float:right} @media (max-width:820px){ .closeS{display:inline-block} }
  .panel .ph{display:flex;gap:10px;align-items:center;margin-bottom:6px}
  .bar{position:relative;height:16px;background:#0a0d1a;border:1px solid var(--line2);margin:4px 0}
  .bar i{display:block;height:100%;background:var(--hp)} .bar.exp i{background:var(--exp)}
  .bar b{position:absolute;inset:0;text-align:center;font-size:11px;line-height:14px;color:#fff;text-shadow:0 0 2px #000}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;margin-top:6px}
  .stats div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dotted var(--line2)} .stats div span{color:var(--dim)} .stats div b{font-size:16px;color:var(--sel)} .stats div i{font-style:normal;color:var(--dim);font-size:11px}
  .slot{display:grid;grid-template-columns:34px 1fr auto;gap:6px;align-items:center;padding:3px 0;border-bottom:1px dotted var(--line2)} .slot .sl{color:var(--dim);font-size:11px}
  .inv{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:3px 0;border-bottom:1px dotted var(--line2)} .inv .is{color:var(--dim);font-size:11px}
  .mem{display:flex;gap:8px;align-items:center;padding:3px 0;border-bottom:1px dotted var(--line2)} .mem i{font-style:normal}

  /* 이야기 장면 */
  .scene{position:relative;min-height:460px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden}
  .scene .chap{position:absolute;top:10px;left:14px;font-weight:700;color:var(--line);text-shadow:0 1px 0 #000} .scene .chap small{display:block;font-weight:400;color:var(--dim);font-size:12px}
  .scene .stage{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:24px;padding:60px 20px 12px}
  .bg0{background:linear-gradient(180deg,#22305a 0%,#3b4f80 55%,#2b5a33 56%,#1f4327 100%)}
  .bg1{background:linear-gradient(180deg,#0f1530 0%,#243a70 55%,#4a3d2a 56%,#2e2418 100%)}
  .bg2{background:linear-gradient(180deg,#3a1f2a 0%,#8a4b3e 55%,#5b4a2a 56%,#3a2f1a 100%)}
  .bg3{background:linear-gradient(180deg,#1b1a35 0%,#6b5a8a 55%,#8a7a52 56%,#5a4d33 100%)}
  .bgdead{background:linear-gradient(180deg,#000 0%,#2a0a0a 55%,#1a0505 56%,#000 100%)}
  .dbox{margin:0 10px 10px;background:rgba(8,10,24,.92);border:3px double var(--line);padding:12px 16px 26px;position:relative;min-height:110px}
  .dbox .name{position:absolute;top:-12px;left:12px;background:var(--line);color:#1a1200;padding:0 10px;font-weight:700;font-size:13px} .dbox .name.narr{background:var(--dim)}
  .dbox .dtext{font-size:15px;line-height:1.7}
  .dbox .next{position:absolute;right:12px;bottom:6px;color:var(--line);animation:bl 1s infinite} @keyframes bl{50%{opacity:.2}}
  .opts{display:flex;flex-direction:column;gap:6px;margin-top:10px} .opts.row{flex-direction:row;flex-wrap:wrap}
  .opt{text-align:left;background:var(--panel2);color:var(--text);border:1px solid var(--line2);padding:8px 12px} .opt:hover,.opt.on{border-color:var(--line);color:var(--sel)}

  /* 내정 */
  .mg{padding:12px}
  .mgh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .ap{color:var(--sel);letter-spacing:.1em}
  .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  @media (max-width:520px){ .mgrid{grid-template-columns:repeat(2,1fr)} }
  .card{background:var(--panel2);border:1px solid var(--line2);color:var(--text);padding:8px 10px;text-align:left} .card b{display:block;color:var(--sel)} .card span{font-size:12px;color:var(--dim)} .card:hover:not(:disabled){border-color:var(--line)} .card:disabled{opacity:.4}
  .mg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px} @media (max-width:640px){ .mg2{grid-template-columns:1fr} }
  .mlog{font-size:13px;color:var(--dim);margin-top:10px;min-height:20px}

  /* 전투 */
  .bt{padding:8px}
  .bth{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-bottom:6px} .bth span:first-child{color:var(--line)}
  .gridwrap{overflow-x:auto;max-width:100%} .grid{display:inline-block;border:2px solid var(--line2);background:#000;line-height:0}
  .row{display:flex}
  .tile{width:var(--tile);height:var(--tile);position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
  .t-plain{background:#5a7d3a} .t-road{background:#8f7a4e} .t-forest{background:#2f5a2a;background-image:radial-gradient(circle at 30% 40%,#3e7a34 20%,transparent 22%),radial-gradient(circle at 70% 65%,#3e7a34 22%,transparent 24%)}
  .t-mount{background:#6b625a;background-image:linear-gradient(135deg,transparent 45%,#8a8078 46%,#8a8078 54%,transparent 55%)} .t-water{background:#2c5f9e;background-image:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.12) 6px 8px)}
  .t-wall{background:#8a8a90;background-image:repeating-linear-gradient(90deg,#9a9aa2 0 10px,#6f6f78 10px 12px),repeating-linear-gradient(0deg,transparent 0 10px,#6f6f78 10px 12px)}
  .tile.reach::after{content:"";position:absolute;inset:0;background:rgba(80,160,255,.45)} .tile.target::after{content:"";position:absolute;inset:0;background:rgba(255,60,60,.5)} .tile.selected{outline:2px solid var(--sel);outline-offset:-2px;z-index:2}
  .unit{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .unit img{width:calc(var(--tile) - 4px);height:calc(var(--tile) - 4px)} .unit.acted img{filter:grayscale(.8) brightness(.7)}
  .unit.s1 img{transform:scaleX(-1)} .unit.boss::before{content:"";position:absolute;inset:2px;border:2px solid var(--rare);pointer-events:none}
  .uhp{position:absolute;left:3px;right:3px;bottom:2px;height:3px;background:#000} .uhp i{display:block;height:100%;background:#4cd24c} .s1 .uhp i{background:#e04a3c}
  .pop{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;animation:pop .9s forwards;z-index:5;font-size:14px} .pop.crit{color:#ffd84a;font-size:17px} .pop.counter{color:#9ad4ff}
  @keyframes pop{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
  .bctl{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap} .binfo{flex:1;min-width:200px;font-size:13px} .bbtn{display:flex;gap:6px}
  .ucard{display:flex;gap:8px;align-items:center}
  .blog{font-size:12px;color:var(--dim);margin-top:8px;border-top:1px solid var(--line2);padding-top:6px;min-height:60px} .blog .hl{color:var(--sel)}

  /* 타이틀 */
  .titleS{padding:44px 22px 30px;text-align:center}
  .tbig{font-size:72px;line-height:1;color:var(--line);letter-spacing:.2em;text-shadow:3px 3px 0 #000}
  .tko{margin:6px 0 16px;color:var(--dim)} .trow{display:flex;justify-content:center;gap:12px;margin:10px 0 16px}
  .titleS p{text-align:left;max-width:560px;margin:0 auto 12px}
  .rules{text-align:left;max-width:560px;margin:0 auto 12px;border:1px solid var(--line2);padding:10px 12px;font-size:13px;color:var(--dim)} .rules div{margin:2px 0}
  .toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-10px);background:var(--line);color:#1a1200;padding:6px 14px;font-weight:700;opacity:0;transition:.25s;z-index:50;pointer-events:none} .toast.on{opacity:1;transform:translate(-50%,0)}

  .btn.ghost{background:transparent;color:var(--line);border:1px solid var(--line)}
  .mini.warn{border-color:#a04a3a} .mini.sk{border-color:#3f9bd4;color:#bfe0ff} .mini.sk.on{background:#3f9bd4;color:#fff}
  .small{font-size:11px} .up{color:#7fe07f} .down{color:#ff8a7a} .aff{color:#9ad4ff}
  .bar.small{height:5px;margin:2px 0} .bar.small b{display:none}
  .objective{background:rgba(63,155,212,.12);border:1px solid #3f9bd4;padding:6px 10px;font-size:13px;margin-bottom:8px}
  .tree{display:flex;align-items:center;gap:4px;margin:3px 0} .tree .tk{width:18px;color:var(--line);font-weight:700}
  .node{flex:1;font:inherit;font-size:11px;padding:3px 2px;background:var(--panel2);border:1px solid var(--line2);color:var(--dim)} .node.has{border-color:var(--line);color:var(--sel);background:#2a2a14} .node.can{border-color:#3f9bd4;color:#bfe0ff;cursor:pointer;animation:glow 1.2s infinite} .node:disabled{cursor:default} @keyframes glow{50%{box-shadow:0 0 6px #3f9bd4}}
  .diffrow{display:flex;gap:6px;max-width:560px;margin:0 auto 6px} .diffrow .opt{flex:1;text-align:center} .diffrow .opt b{display:block;color:var(--sel)} .diffrow .opt span{font-size:11px;color:var(--dim)}
  .achs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:12px auto 6px;max-width:560px} .achi{font-size:11px;border:1px solid var(--line2);padding:1px 6px;color:#555;cursor:help} .achi.got{border-color:var(--rare);color:var(--rare)}
  .bth .obj{color:#bfe0ff}
  .t-gate{background:#7a5a30;background-image:repeating-linear-gradient(0deg,#8a6a3a 0 4px,#5a3a18 4px 6px)} .t-hill{background:#7f9a4a;background-image:radial-gradient(ellipse at 50% 70%,#96b05a 40%,transparent 42%)} .t-ford{background:#5f93c8;background-image:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.25) 5px 7px)} .t-exit{background:#c9b56a;background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.15) 6px 8px)}
  .tile.ethreat::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,70,50,.35) 0 4px,transparent 4px 8px)}
  .tile.ereach::after{content:"";position:absolute;inset:0;background:rgba(255,150,40,.5)}
  .tile.allthreat{box-shadow:inset 0 0 0 2px rgba(255,80,60,.55)}
  .tile.eselected{outline:2px solid #ff9a3c;outline-offset:-2px;z-index:2}
  .lg{display:inline-block;width:12px;height:12px;vertical-align:middle;margin:0 2px 0 6px} .lg-reach{background:rgba(255,150,40,.7)} .lg-threat{background:repeating-linear-gradient(45deg,rgba(255,70,50,.6) 0 3px,transparent 3px 6px)}
  .tile.skilltile::after{content:"";position:absolute;inset:0;background:rgba(160,80,255,.45)}
  .unit.npc::before{content:"";position:absolute;inset:2px;border:2px dashed #ffe58a;pointer-events:none} .unit.wall img{transform:none}
  .ubf{position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%} .ubf.up{background:#7fe07f} .ubf.down{background:#ff8a7a}
  .unit.hit img{filter:brightness(3)} .unit.dead{animation:die .5s forwards} @keyframes die{to{opacity:0;transform:scale(.4) rotate(40deg)}}
  .main.shake{animation:shake .3s} @keyframes shake{0%,100%{transform:none}25%{transform:translate(4px,-3px)}50%{transform:translate(-4px,3px)}75%{transform:translate(3px,2px)}}
  .banner{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:28px;font-weight:700;color:var(--line);background:rgba(0,0,0,.75);padding:10px;letter-spacing:.2em;opacity:0;transform:scaleX(.6);transition:.2s;pointer-events:none;z-index:10} .banner.on{opacity:1;transform:none}
  .pv b{color:var(--sel)} .exp{color:#7fc6ff} .pop.exp{color:#7fc6ff;font-size:12px;top:auto;bottom:-4px} .pop.exp.small{font-size:10px}
  .plan{margin-top:6px;border-top:1px dotted var(--line2);padding-top:4px} .prow{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;font-size:12px;padding:1px 0;border-bottom:1px dotted #2a3050} .prow.off{opacity:.5} .prow .up{font-weight:700}
  .toast.ach{background:var(--rare);top:110px}
  .bbtn{flex-wrap:wrap;justify-content:flex-end}

  .trow2{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:14px}
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:60;display:flex;align-items:center;justify-content:center;padding:12px}
  .mbox{background:var(--panel);border:3px double var(--line);max-width:720px;width:100%;max-height:88vh;display:flex;flex-direction:column}
  .mh{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line2);color:var(--line)}
  .mb{padding:10px 14px;overflow:auto;font-size:13px;line-height:1.6} .mb p{margin:6px 0}
  .tabs{display:flex;gap:4px;margin-bottom:8px}
  .tcols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media (max-width:640px){ .tcols{grid-template-columns:1fr} }
  .trow3{display:grid;grid-template-columns:16px 40px 1fr auto;gap:6px;align-items:center;font-size:12px;padding:2px 0;border-bottom:1px dotted var(--line2)}
  .tsw{display:inline-block;width:14px;height:14px;border:1px solid #000;vertical-align:middle}
  .tri div{padding:3px 0;font-size:14px}
  .skrow{display:grid;grid-template-columns:130px 1fr;gap:8px;font-size:12px;padding:3px 0;border-bottom:1px dotted var(--line2)} .skrow b{color:var(--sel)}
  .achlist{display:grid;grid-template-columns:1fr 1fr;gap:6px} .achlist .achi{display:flex;flex-direction:column;padding:6px 8px;font-size:12px} .achlist .achi span{color:var(--dim);font-size:11px}
  .tile.blocked::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.35) 0 3px,transparent 3px 8px);pointer-events:none}
  .tile .cost{position:absolute;left:2px;top:1px;font-size:10px;color:#fff;text-shadow:0 0 2px #000;z-index:3;pointer-events:none}
  .tile .adv{position:absolute;right:2px;top:0;font-size:12px;font-weight:700;text-shadow:0 0 2px #000;z-index:3;pointer-events:none}
  .cb{position:absolute;left:1px;bottom:5px;font-size:9px;line-height:11px;padding:0 2px;color:#fff;border:1px solid rgba(0,0,0,.6);text-shadow:0 0 2px #000;pointer-events:none}
  .c-inf{background:#3a7a3a} .c-cav{background:#a05a20} .c-arc{background:#2f5db3} .c-gen{background:#8a2a2a} .c-npc{background:#7a6a20} .c-wall{background:#555}
  .legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;margin:6px 0 2px;align-items:center} .legend .lg{display:inline-flex;align-items:center;gap:4px;color:var(--dim)} .legend .lg b{color:var(--text);font-weight:400} .legend .tsw{width:11px;height:11px}
  .bth .obj{font-weight:700}

  /* v3 */
  .body{align-items:stretch}
  .main{display:flex;flex-direction:column;min-height:560px}
  .main>.scene,.main>.mg,.main>.bt,.main>.titleS{flex:1}
  .side{box-sizing:border-box}
  .tipbox{position:fixed;z-index:200;display:none;max-width:300px;background:#0b0e1c;color:var(--text);border:2px solid var(--line);padding:8px 10px;font-size:12px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.6);pointer-events:none}
  .tipbox .trow{display:grid;grid-template-columns:40px 1fr auto;gap:6px;border-top:1px dotted var(--line2);padding:1px 0} .tipbox .trow i{font-style:normal;font-weight:700}
  .tiphead{display:flex;gap:8px;align-items:center;margin-bottom:4px}
  .scene{background-size:cover;background-position:center bottom;image-rendering:pixelated}
  .stage{display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:54px 12px 8px;flex-wrap:wrap}
  .actor{display:flex;flex-direction:column;align-items:center;transition:transform .2s,opacity .2s,filter .2s}
  .actor .alabel{font-size:11px;background:rgba(0,0,0,.55);padding:0 6px;margin-top:2px;color:var(--dim)}
  .actor.speak{transform:translateY(-8px) scale(1.06)} .actor.speak .alabel{color:var(--sel)}
  .actor.dim2{opacity:.55;filter:brightness(.7)}
  .actor .spr.talk{animation:bob .6s infinite} @keyframes bob{50%{transform:translateY(-3px)}}
  .dprog{position:absolute;left:14px;bottom:6px}
  .si{display:inline-flex;align-items:center;width:28px} .empty{display:inline-block;width:24px;height:24px;border:1px dashed var(--line2)}
  .slot{grid-template-columns:34px 28px 1fr auto}
  .inv{grid-template-columns:28px 1fr auto auto}
  .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
  .citem{text-align:center;font-size:12px;border:1px solid var(--line2);padding:6px 4px;background:var(--panel2);cursor:help} .citem.rare{border-color:var(--rare)} .citem.unk{opacity:.45;filter:grayscale(1)}
  .relrow{border:1px solid var(--line2);padding:8px 10px;margin-bottom:8px;background:var(--panel2)} .relhead{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center} .relv{text-align:center} .relv b{font-size:20px}
  .reltrack{position:relative;height:10px;background:linear-gradient(90deg,#7d1f24 0,#3a3a48 33%,#2f60b5 100%);margin:8px 0 4px;border:1px solid var(--line2)} .reltrack i{position:absolute;top:-4px;width:8px;height:18px;background:var(--sel);transform:translateX(-50%);border:1px solid #000} .reltrack .mark{position:absolute;top:-3px;width:6px;height:16px;background:#555;transform:translateX(-50%);cursor:help} .reltrack .mark.hit{background:var(--rare)}
  .rellog{margin-top:6px;font-size:12px;border-top:1px dotted var(--line2);padding-top:4px;max-height:110px;overflow:auto}
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;display:flex;align-items:center;justify-content:center;padding:12px} .mbox{background:var(--panel);border:3px double var(--line);max-width:760px;width:100%;max-height:90vh;overflow:auto;padding:12px 14px} .mh{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line2);padding-bottom:6px;margin-bottom:8px}
  .enh{text-align:center} .etrack{position:relative;height:34px;background:#0a0d1a;border:2px solid var(--line2);margin:14px 0} .ezone{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,rgba(228,183,70,.4),var(--rare),rgba(228,183,70,.4))} .eneedle{position:absolute;top:-4px;bottom:-4px;width:4px;background:#fff;transform:translateX(-50%);box-shadow:0 0 6px #fff} .eneedle.hitz{background:var(--rare)} .eres{font-size:18px;font-weight:700;margin-top:8px}
  .brief{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start} @media (max-width:640px){ .brief{grid-template-columns:1fr} } .brief ul{margin:0;padding-left:18px;font-size:13px} .brief li{margin:2px 0}
  .bmap{display:inline-block;border:2px solid var(--line2);background:#000;line-height:0} .mrow{display:flex} .mrow i{display:block;width:12px;height:12px;position:relative} .mrow i.mp::after,.mrow i.me::after,.mrow i.mb::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#7fe07f} .mrow i.me::after{background:#ff6a5a} .mrow i.mb::after{background:var(--rare);inset:1px;border:1px solid #000} .mrow i.mgoal{box-shadow:inset 0 0 0 2px #ffe56a;animation:blink 1s infinite}
  @keyframes blink{50%{box-shadow:inset 0 0 0 2px transparent}}
  .tile.goal{box-shadow:inset 0 0 0 3px rgba(255,229,106,.9)} .tile.goal.pulse{animation:blink2 .7s infinite} @keyframes blink2{50%{box-shadow:inset 0 0 0 3px rgba(255,229,106,.1)}}
  .unit.ai::before{content:"";position:absolute;inset:2px;border:2px dotted #7fc6ff;pointer-events:none} .unit.ai .cb{background:#3f9bd4}
  .unit.flee::before{content:"";position:absolute;inset:2px;border:2px dashed #ffe56a;pointer-events:none}
  .uhp{position:absolute;left:2px;right:2px;bottom:1px;height:5px;background:#000;border:1px solid #000} .uhp i{display:block;height:100%;background:#4cd24c} .uhp.foe i{background:#e04a3c} .uhp em{position:absolute;top:0;bottom:0} .uhp .pmin{background:#ffd84a} .uhp .pmax{background:repeating-linear-gradient(45deg,#ffd84a 0 2px,transparent 2px 4px)} .uhp.pv{height:7px;bottom:0}
  .hpbig{position:relative;height:14px;background:#0a0d1a;border:1px solid var(--line2);margin:3px 0;overflow:hidden} .hpbig i{display:block;height:100%;background:#4cd24c} .hpbig.foe i{background:#e04a3c} .hpbig em{position:absolute;top:0;bottom:0} .hpbig .pmin{background:#ffd84a} .hpbig .pmax{background:repeating-linear-gradient(45deg,#ffd84a 0 3px,transparent 3px 6px)} .hpbig b{position:absolute;inset:0;font-size:11px;line-height:12px;text-align:center;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000} .hpbig.mini{height:9px} .hpbig.mini b{display:none} .pvtxt{color:#ffd84a}
  .hpmini{position:relative;height:9px;width:110px;background:#0a0d1a;border:1px solid var(--line2);display:inline-block;vertical-align:middle} .hpmini i{display:block;height:100%;background:#e04a3c} .hpmini em{position:absolute;top:0;bottom:0} .hpmini .pmin{background:#ffd84a} .hpmini .pmax{background:repeating-linear-gradient(45deg,#ffd84a 0 2px,transparent 2px 4px)}
  .prow{grid-template-columns:auto 116px auto 1fr}
  .ucb{flex:1;min-width:0}
  .legend{display:none}

  .scene .chap{background:rgba(6,8,20,.7);padding:6px 10px;border:1px solid var(--line2);text-shadow:0 1px 0 #000,0 0 6px #000}
  .actor .alabel{text-shadow:0 0 3px #000}
  .dbox{background:rgba(6,8,20,.94)} .dbox .dtext{text-shadow:0 0 2px #000}
  .dprog{color:#c9c2a8}
  .titleS{background-size:cover;background-position:center bottom} .titleS .tbig,.titleS .tko{text-shadow:2px 2px 0 #000,0 0 10px #000} .titleS p,.titleS .rules,.titleS .achs,.titleS .dim{background:rgba(6,8,20,.75);padding:8px 12px;border:1px solid var(--line2)}
  .kmark{font-size:14px} .kmark.sure{color:#ff5a4a} .kmark.likely{color:#ffb14a} .kmark.maybe{color:#ffe56a} .kmark.no{color:#666}
  .sk2{font-style:normal;color:#bfe0ff;margin-right:3px}
  .prow{grid-template-columns:auto 116px 22px 1fr;align-items:center} .prow .spr{vertical-align:middle}
  .unit.ally::before{content:"";position:absolute;inset:2px;border:2px dotted #9ad4ff;pointer-events:none} .unit.ally img{filter:saturate(.8)}

  /* 삼국지풍 장식 */
  .top,.main,.side,.dbox,.mbox{position:relative}
  .top::before,.top::after,.main::before,.main::after,.side::before,.side::after{content:"";position:absolute;width:10px;height:10px;border:2px solid var(--line);pointer-events:none}
  .top::before,.main::before,.side::before{left:-1px;top:-1px;border-right:0;border-bottom:0} .top::after,.main::after,.side::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
  .sec{background:linear-gradient(90deg,rgba(201,162,74,.18),transparent);padding:2px 6px;border-left:3px solid var(--line);border-bottom:0;margin:10px 0 4px}
  .dbox .name{display:flex;align-items:center;gap:8px;padding:0 12px 0 6px;top:-30px;height:34px;left:16px} .dbox .name .face{width:44px;height:44px;image-rendering:pixelated;border:2px solid #1a1200;background:#0b0e1c;margin-left:-4px;position:relative;top:0}
  .dbox{padding-top:20px} .stage{padding-bottom:30px}
  .unit::after{content:"";position:absolute;left:18%;right:18%;bottom:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.4);z-index:-1}
  .unit{z-index:1} .unit img{position:relative;z-index:1}
  .unit.s0.faceL img{transform:scaleX(-1)} .unit.s1.faceR img{transform:none} .unit.s1.faceL img{transform:scaleX(-1)}
  .fx{position:absolute;inset:8%;width:84%;height:84%;pointer-events:none;z-index:6;animation:fxpop .4s forwards} .fx.critfx{animation:fxpop .45s forwards,fxshake .2s 2} @keyframes fxpop{0%{opacity:0;transform:scale(.4) rotate(-20deg)}30%{opacity:1;transform:scale(1.1) rotate(0)}100%{opacity:0;transform:scale(1.3) rotate(10deg)}} @keyframes fxshake{50%{transform:translate(2px,-2px)}}
  .roster{display:flex;align-items:flex-end;gap:4px;flex-wrap:wrap;margin-bottom:6px;padding:4px 6px;background:rgba(0,0,0,.25);border:1px solid var(--line2)} .rs{width:34px;cursor:pointer;position:relative;opacity:.95} .rs .spr{width:32px;height:32px;display:block} .rs.acted{opacity:.45;filter:grayscale(.7)} .rs.dead{opacity:.25;filter:grayscale(1)} .rs.on{outline:2px solid var(--sel);outline-offset:-1px} .rs.ally{outline:1px dotted #9ad4ff} .rs.foe{margin-left:2px} .rhp{height:4px;background:#000;margin-top:1px} .rhp i{display:block;height:100%;background:#4cd24c} .rhp.foe i{background:#e04a3c} .rsep{flex:0 0 10px} .rctl{margin-left:auto;align-self:center}
  .pop{font-size:16px} .pop.crit{font-size:20px}
  .tile{image-rendering:pixelated;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
  .t-plain,.t-road,.t-forest,.t-hill,.t-mount,.t-water,.t-ford,.t-wall,.t-gate,.t-exit{background-image:none}

  .portrait{image-rendering:auto;border:2px solid #1a1200;box-shadow:0 0 0 1px var(--line),0 6px 14px rgba(0,0,0,.6);background:#0b0e1c}
  .portrait.small{height:auto;border-width:1px}
  .stage{align-items:flex-end;gap:14px;padding:44px 12px 30px}
  .actor{transition:transform .25s,opacity .25s,filter .25s} .actor .portrait{display:block}
  .actor.speak{transform:translateY(-4px)} .actor.speak .portrait{box-shadow:0 0 0 2px var(--sel),0 8px 18px rgba(0,0,0,.7)}
  .actor.dim2{opacity:.65;filter:brightness(.65) saturate(.75)} .actor.dim2 .portrait{width:132px;height:auto}
  .actor .spr.talk{animation:none}
  .actor .alabel{font-size:12px;background:rgba(0,0,0,.7);border:1px solid var(--line2);padding:1px 8px;margin-top:4px;color:var(--text)}
  .dbox .name .face{width:auto;height:46px;image-rendering:auto;border:2px solid #1a1200;background:#0b0e1c}
  .ucard .portrait.small{width:56px}
  .relhead{grid-template-columns:70px 1fr auto}
  @media (max-width:640px){ .actor .portrait{width:132px;height:auto} .actor.dim2 .portrait{width:88px} }

  /* 조조전식 장면 */
  .smapwrap{margin-top:auto;display:flex;justify-content:center;padding:6px 0 10px}
  .smap{position:relative;width:616px;height:308px;border:3px double var(--line);box-shadow:0 10px 30px rgba(0,0,0,.6);background:#000;overflow:hidden}
  .srow{display:flex} .stile{display:block;width:44px;height:44px;image-rendering:pixelated;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
  .stile.t-plain.v0,.stile.t-plain.v1,.stile.t-plain.v2{background-size:100% 100%}
  .sactor{position:absolute;transform:translate(-50%,-100%);transition:left .5s ease,top .5s ease,transform .4s ease,opacity .4s;text-align:center;z-index:2}
  .sactor.enter{transform:translate(-50%,-100%) translateX(-260px);opacity:0}
  .sactor .sspr{display:block;position:relative} .sactor .sspr img{width:66px;height:66px;display:block;image-rendering:pixelated;filter:drop-shadow(0 6px 4px rgba(0,0,0,.45))}
  .sactor .sspr.faceL img{transform:scaleX(-1)}
  .sactor .sname{display:inline-block;font-size:11px;background:rgba(0,0,0,.6);border:1px solid var(--line2);padding:0 6px;color:var(--dim);margin-top:-2px}
  .sactor.speak{z-index:3} .sactor.speak .sspr img{animation:hop .5s ease-in-out infinite} .sactor.speak .sname{color:var(--sel);border-color:var(--line)}
  @keyframes hop{50%{transform:translateY(-6px)}} .sactor.speak .sspr.faceL img{animation:hopL .5s ease-in-out infinite} @keyframes hopL{50%{transform:scaleX(-1) translateY(-6px)}}
  .sbub{position:absolute;left:50%;top:-26px;transform:translateX(-50%);background:#fff;color:#000;border:2px solid #000;border-radius:10px;padding:0 6px;font-size:12px;line-height:16px;font-weight:700;animation:bl 1s infinite} .sbub::after{content:"";position:absolute;left:50%;bottom:-6px;border:5px solid transparent;border-top-color:#000;transform:translateX(-50%)}
  .talk{position:relative;display:flex;gap:12px;align-items:flex-start;margin:52px 14px 10px;padding:12px 14px;background:linear-gradient(180deg,#efe6c8,#e2d6b2);color:#1a1200;border:3px solid #5a4a2a;box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 0 0 1px #fff8;min-height:118px}
  .talk .portrait.tb{width:96px;height:auto;border:2px solid #5a4a2a;box-shadow:none;flex:none}
  .talk .tbody{flex:1;min-width:0} .talk .tname{font-weight:700;color:#7a1f24;font-size:15px;letter-spacing:.06em;border-bottom:1px solid #a89a70;margin-bottom:6px;padding-bottom:2px}
  .talk .ttext{font-size:16px;line-height:1.6;text-shadow:none} .talk .dprog{position:absolute;right:12px;bottom:6px;left:auto;color:#7a6a40;font-size:12px}
  .talk.narr{background:linear-gradient(180deg,#d9dbe6,#c6c9d6)} .talk.narr .tname{color:#3a3a5a}
  .talk .ttail{position:absolute;left:60px;bottom:-14px;border:8px solid transparent;border-top:8px solid #5a4a2a} .talk .ttail::after{content:"";position:absolute;left:-6px;top:-11px;border:6px solid transparent;border-top:6px solid #e2d6b2}
  .talk .opts{margin-top:8px} .talk .opt{background:#fff9e8;color:#1a1200;border-color:#8a7a50} .talk .opt:hover,.talk .opt.on{background:#fff;border-color:#7a1f24;color:#7a1f24}
  .scene .chap{z-index:4}
  @media (max-width:680px){ .smapwrap{height:180px;overflow:hidden;align-items:flex-start} .smap{transform:scale(.55);transform-origin:top center;flex:none} }
  @media (prefers-reduced-motion:reduce){ .pop,.dbox .next,.toast,.node.can,.unit.dead,.main.shake{animation:none;transition:none} }
/* The officer chronicle */
:root{--bg:#101a18;--panel:#192724;--panel2:#111d1b;--line:#c5aa70;--line2:#736647;--text:#eee6d2;--dim:#b2b4a3;--sel:#f4d48a;--hp:#54a68c;--rare:#f4d48a;--tile:52px;--paper:#eee2c4;--ink:#2d3027;--red:#a84536;--blue:#67bbe6}
html,body{margin:0;background:#101a18;color:var(--text);font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:16px;line-height:1.6}body{padding:0;background:radial-gradient(ellipse at 50% 10%,#334137 0,#101a18 75%);min-height:100vh}button{font:inherit;touch-action:manipulation}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #9adaee;outline-offset:3px}button:disabled{cursor:default;opacity:.4}button{transition:filter .15s,background .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.15)}button:active:not(:disabled){transform:translateY(1px)}#app{max-width:1600px;margin:auto;padding:14px 22px 22px}button,div{-webkit-tap-highlight-color:transparent}.top{min-height:59px;border:0;border-bottom:1px solid #aa945767;background:transparent;padding:5px 0 12px;margin:0 0 14px;gap:14px;flex-wrap:wrap}.top::before,.top::after,.main::before,.main::after,.side::before,.side::after{display:none}.top .ttl{font-family:'Songti SC','Noto Serif CJK KR',Batang,serif;letter-spacing:.24em;font-size:24px;color:#e6cf94}.top .sub{font-size:14px;letter-spacing:.02em;margin-left:16px}.top .tr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.top .tr span{margin-left:0;margin-right:8px;font-size:14px}.body{grid-template-columns:minmax(0,1fr) 316px;gap:16px;align-items:start}.body.wide{display:block}.body.wide>.side{display:none}.main{border:1px solid #80724b;box-shadow:0 12px 42px #0005;background:#192724;min-height:0;overflow:hidden}.side{border:1px solid #80724b;background:linear-gradient(#23342d,#15231f);padding:18px;font-size:14px;max-height:calc(100vh - 106px);overflow:auto;position:sticky;top:12px}.mini{font-size:13px;padding:7px 12px;min-height:36px;background:#172520;border-color:#8b7950;line-height:1.4}.mini.on{background:#c4a762;color:#15231b}.btn{padding:13px 20px;min-height:52px;font-size:19px;border:1px solid #ddc285;background:linear-gradient(#d8bb77,#b69a59);color:#17211b;letter-spacing:.08em;margin-top:12px;box-shadow:inset 0 0 0 2px #23302425}.btn.ghost{color:#e3cb92;border:1px solid #a9925b;background:#15241ac9}.btn.red{background:#8f382e;color:#fff0dd;border-color:#c56d51}.dim{color:var(--dim)}.small{font-size:12px}.sec{font-size:13px;letter-spacing:.1em;color:#dfca94;background:linear-gradient(90deg,#c3a16a24,transparent);border-left:2px solid #c3a16a;padding:5px 9px;margin:16px 0 8px}.portrait{background-color:#242b21;border:1px solid #b09861;box-shadow:0 0 0 3px #121c15,0 9px 20px #0005;vertical-align:middle;flex-shrink:0;object-fit:cover;image-rendering:auto}.pface{display:inline-block;background-size:400% 300%;background-repeat:no-repeat;aspect-ratio:3/4;width:var(--pw,72px);height:auto;overflow:hidden}.portrait.small{height:auto}.artSprite{display:inline-block;width:var(--sw,64px);height:var(--sw,64px);background-size:600% 400%;background-repeat:no-repeat;image-rendering:auto;vertical-align:bottom;flex:none;filter:drop-shadow(0 3px 1px #0006)}
/* Title */
.titleHero{position:relative;min-height:min(800px,calc(100vh - 100px));background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:center;padding:65px 6%;isolation:isolate}.titleHero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#101a18ea 0%,#162019bf 30%,#10201820 65%),linear-gradient(0deg,#101a18b0,transparent 45%)}.titleContent{width:min(470px,48%);padding:20px 0}.overline{font-size:13px;letter-spacing:.22em;color:#e4c888;margin-bottom:22px}.titleMark{font-family:'Songti SC','Noto Serif CJK KR',Batang,serif;font-size:clamp(72px,8.5vw,132px);font-weight:700;line-height:1.05;letter-spacing:.12em;color:#ead198;text-shadow:0 3px 1px #000b,0 0 30px #111}.titleKorean{font-family:Batang,serif;font-size:29px;letter-spacing:.35em;color:#f0dfb4;margin:17px 0 30px}.titleLead{font-size:19px;line-height:1.9;color:#e4e1c9;max-width:400px}.titleActions{margin-top:24px;max-width:360px}.titleActions .btn{font-size:20px}.titleFine{position:absolute;bottom:22px;left:6%;font-size:12px;letter-spacing:.04em;color:#c1c3af;max-width:65%;line-height:1.5}.diffrow{margin:16px 0 8px;max-width:360px;gap:7px}.diffrow .opt{background:#182920d9;border-color:#8c784b;padding:9px 4px;font-size:14px}.diffrow .opt.on{background:#ad9354;color:#13251e}.diffrow .opt span{font-size:12px}.diffrow .opt.on b,.diffrow .opt.on span{color:#13251e}.titleFooter{display:flex;gap:15px;margin-top:15px;justify-content:center}.titleFooter button{background:none;border:none;color:#d3c9a5;padding:5px;font-size:13px;border-bottom:1px solid #b8a16880}
/* Stage and dialogue */
.storyScene{position:relative;min-height:calc(100vh - 117px);display:flex;flex-direction:column;background:#121b1a;overflow:hidden}.vista{height:clamp(300px,49vh,560px);position:relative;overflow:hidden;background-color:#394236;isolation:isolate}.vistaBg{position:absolute;inset:0;background-size:200% 200%;background-repeat:no-repeat;filter:saturate(.85);z-index:-2}.vista::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#13201fc9,transparent 38%,#101a1860);z-index:-1;pointer-events:none}.sceneHeading{position:absolute;left:30px;top:23px;text-shadow:0 2px 5px #000;z-index:2}.sceneHeading .overline{margin:0 0 5px;color:#efe0b8;font-size:13px}.sceneHeading h1{font-family:Batang,serif;font-weight:700;letter-spacing:.08em;font-size:30px;line-height:1.4;margin:0;color:#ffefcb}.sceneHeading p{margin:6px 0;color:#ded9c6;font-size:14px}.chapterStamp{position:absolute;right:26px;top:23px;width:54px;height:68px;border:2px solid #bb6a50;color:#eb9e80;writing-mode:vertical-rl;letter-spacing:.2em;padding:6px;text-align:center;font-family:Batang,serif;font-size:17px;background:#59291c55}.stageActors{position:absolute;inset:45% 7% 13px}.stageOfficer{position:absolute;bottom:0;left:var(--ax);transform:translateX(-50%);text-align:center;transition:left .4s,filter .4s;filter:brightness(.72);opacity:.85}.stageOfficer.speaking{filter:brightness(1.14);opacity:1;z-index:4}.stageOfficer .artSprite{width:clamp(78px,9vw,132px);height:clamp(78px,9vw,132px);filter:drop-shadow(0 5px 2px #000a)}.stageOfficer .nameTag{display:block;background:#101e18e8;color:#c9c2ab;padding:1px 13px;border:1px solid #716649;max-width:150px;white-space:nowrap;font-size:13px}.stageOfficer.speaking .nameTag{color:#fff0ba;border-color:#e4c87c}.stageOfficer.speaking::before{content:'···';position:absolute;left:50%;top:-18px;transform:translateX(-50%);background:#ede0bd;color:#2d3027;font-weight:800;line-height:1.2;padding:0 8px;border:1px solid #80673e;border-radius:4px}.dialogue{display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px;padding:28px 34px 24px;background:linear-gradient(110deg,#efe3c7,#e2d2ab);color:var(--ink);position:relative;border-top:3px double #aa8950;min-height:254px;box-shadow:inset 0 0 40px #725a2212;flex:1}.dialogue::before{content:'';position:absolute;inset:10px;border:1px solid #a68b554d;pointer-events:none}.dialogue>.portrait{margin-top:-46px;width:180px;position:relative;align-self:start}.dialogue.narration{grid-template-columns:74px minmax(0,1fr)}.narrationSeal{font-family:Batang,serif;writing-mode:vertical-rl;color:#956945;font-size:26px;letter-spacing:.3em;border:1px solid #ac8d5a;padding:12px 7px;align-self:start;text-align:center}.speaker{display:flex;align-items:center;gap:14px;border-bottom:1px solid #ae966754;padding-bottom:7px;margin-bottom:12px;font-size:22px;color:#873f2f;font-weight:700;letter-spacing:.05em}.speaker small{font-size:12px;letter-spacing:.06em;color:#837252;font-weight:400}.dialogText{font-size:clamp(19px,1.7vw,24px);line-height:1.9;word-break:keep-all;white-space:pre-wrap}.dialogControls{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px;color:#8a7957;font-size:13px}.dialogControls .nextLine{border:1px solid #9d7f43;background:#274132;color:#f4e6c1;padding:8px 25px;min-width:136px;font-size:17px}.dialogControls .dialogLog{border:0;background:transparent;border-bottom:1px solid #95815c;font-size:13px;color:#6d674b;padding:4px 0}.storyChoices{display:flex;flex-direction:column;gap:10px;margin-top:18px}.storyChoice{display:flex;text-align:left;align-items:center;gap:14px;padding:13px 18px;border:1px solid #ad9564;background:#fcf3dcbb;color:#30382b;min-height:65px}.storyChoice .choiceNo{font-family:Batang,serif;font-size:25px;color:#937044;padding-right:12px;border-right:1px solid #ac8f5d60}.storyChoice .choiceBody{flex:1;font-size:19px;line-height:1.5}.storyChoice small{display:block;color:#82724c;font-size:13px;margin-top:4px}.storyChoice:hover{background:#fff9e9;border-color:#674e2d}.storyHistory p{font-size:17px;margin:0 0 18px}.storyHistory b{color:#e3bd75;font-size:14px;display:block}
/* Camp */
.campBanner{position:relative;height:190px;padding:22px 28px;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:26px}.campBanner>.vistaBg{filter:brightness(.45) saturate(.7)}.campBanner h1{font-family:Batang,serif;font-size:30px;color:#eacf91;margin:5px 0;letter-spacing:.1em}.campBanner p{margin:5px 0;font-size:16px;color:#d7d9c4}.campBanner .portrait{width:96px}.campBody{padding:22px 26px}.campNav{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.ap{font-size:17px;letter-spacing:.05em}.ap .used{opacity:.25}.campGoals{padding:14px 18px;background:#32453685;border:1px solid #a18c54;color:#e2dbc3;font-size:16px;margin-bottom:20px}.campGoals b{color:#f1d890}.mgrid{grid-template-columns:repeat(3,1fr);gap:10px}.card{padding:15px 17px;background:#21362c;border-color:#607457;min-height:91px}.card b{font-size:19px;letter-spacing:.02em}.card span{display:block;font-size:13px;line-height:1.7;margin-top:4px}.card .trainGlyph{float:right;font-size:29px;font-family:Batang,serif;opacity:.35}.mg2{gap:20px;margin-top:18px}.inv{grid-template-columns:28px minmax(0,1fr) auto auto;font-size:13px;gap:7px;padding:8px 0}.inv .is{font-size:11px;max-width:110px}.inv .mini{font-size:12px;padding:5px 8px}.mlog{font-size:14px;line-height:1.9;color:#d1cab1;background:#111e1870;padding:12px 16px;margin-top:18px}.slot{font-size:12px;padding:9px 0;grid-template-columns:27px 24px minmax(0,1fr) auto;gap:5px}.slot .sv i{display:block;font-size:11px}.slot .mini{font-size:11px;padding:4px}.ph b{font-size:21px}.stats div b{font-size:22px}.stats div{padding:5px 0}.bar{height:15px}.bar i{background:#629d7a}.bar.exp i{background:#7396a2}.bar b{font-size:11px}.mem{padding:9px 0}.mem .artSprite{width:40px;height:40px}.node{font-size:12px;padding:6px 3px}.tree{gap:4px}.panel>.inv .is{display:none}.panel>.inv{grid-template-columns:24px 1fr auto}.panel>.inv .mini{padding:4px;font-size:11px}.panel>.inv .mini:last-child{margin-left:4px}.campFoot{display:flex;gap:10px;margin-top:18px;align-items:center}.campFoot .btn{flex:1;margin:0}.campFoot .mini{padding:13px}
/* Battlefield */
.bt{padding:17px;background:#1b2d25}.warHeader{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px;gap:12px}.warHeader h1{margin:0;font-size:24px;font-family:Batang,serif;color:#edd99d;letter-spacing:.06em}.warHeader .objectiveLine{font-size:15px;color:#d9decb;margin-top:3px}.turnBadge{border:1px solid #a18c54;min-width:86px;text-align:center;padding:5px 12px;background:#243c2d;line-height:1.3}.turnBadge strong{font-family:Georgia,serif;font-size:30px;font-weight:400;color:#f0d79a}.turnBadge small{display:block;font-size:12px;color:#cfdbc9;margin-top:2px}.turnBadge.enemy{background:#5b3029}.warGuide{padding:8px 12px;font-size:15px;line-height:1.5;background:#111f1a;border:1px solid #62705b;display:flex;gap:9px;align-items:center;margin-bottom:12px;min-height:43px}.guideNumber{display:inline-grid;place-items:center;background:#c8af6c;color:#15291e;border-radius:50%;width:23px;height:23px;font-size:13px;flex:none}.gridwrap{position:relative;max-width:100%;overflow:auto;background:#172019;border:3px solid #897545;box-shadow:0 0 0 1px #e2c27470,inset 0 0 0 2px #0d1a12;text-align:center}.grid{display:inline-block;vertical-align:top;border:0;background:#536a3a;position:relative;line-height:0;text-align:left;isolation:isolate}.tile{width:var(--tile);height:var(--tile);position:relative;cursor:pointer;box-shadow:inset -1px -1px 0 #0c170f36;background-size:400% 300%!important;background-repeat:no-repeat;image-rendering:auto;transition:box-shadow .1s}.tile.reach::after{content:'';inset:0;background:#58b1cf38;box-shadow:inset 0 0 0 1px #92e3e78c;z-index:2;pointer-events:none}.tile.target::after{content:'';inset:1px;background:#e9634047;box-shadow:inset 0 0 0 2px #eaa36c;z-index:2;pointer-events:none}.tile.skilltile::after{background:#b389e355;box-shadow:inset 0 0 0 2px #d2a3f4}.tile.allthreat{box-shadow:inset 0 0 0 2px #f07264bc}.tile.ethreat::after{background:repeating-linear-gradient(45deg,#e8676744 0 3px,transparent 3px 8px);pointer-events:none}.tile.ereach::after{background:#d882364d;pointer-events:none}.tile.selected{outline:0;z-index:4;box-shadow:inset 0 0 0 3px #fff0a3}.tile.selected::before{content:'';position:absolute;inset:1px;border:2px solid #ffe69b;z-index:7;pointer-events:none}.tile.aim{outline:3px solid #ffe5ac;outline-offset:-3px;z-index:5}.tile.goal{box-shadow:inset 0 0 0 2px #eed28c}.tile.goal::before{content:'目的';position:absolute;top:1px;left:1px;font:9px Batang,serif;color:#ffedac;background:#292516bd;padding:2px;z-index:5}.tile.blocked::before{background:repeating-linear-gradient(45deg,#03130820 0 3px,transparent 3px 8px);z-index:0}.tile .cost{color:#edfffe;font-size:10px;z-index:7;top:2px;left:3px;background:#183b3970;padding:1px 2px;line-height:1}.unit{z-index:3;overflow:visible;justify-content:flex-end;padding-bottom:7px;pointer-events:none}.unit::after{display:none}.unit .artSprite{width:calc(var(--tile) * 1.22);height:calc(var(--tile) * 1.22);margin-bottom:1px;position:relative;z-index:1;background-repeat:no-repeat;flex:none}.unit .spr{width:calc(var(--tile) * .92);height:calc(var(--tile) * .92)}.unit.s1 .artSprite{transform:scaleX(-1)}.unit.acted .artSprite{filter:grayscale(.85) brightness(.65) drop-shadow(0 2px 2px #000)}.unit.boss::before,.unit.npc::before,.unit.ai::before,.unit.ally::before,.unit.flee::before{display:none}.unitBase{position:absolute;left:13%;right:13%;height:11px;bottom:7px;background:#42a4d070;border:1px solid #9bdddf;border-radius:50%;box-shadow:0 0 4px #102b2a}.s1 .unitBase{background:#db735578;border-color:#ffc189}.unitName{position:absolute;bottom:8px;z-index:4;font-size:9px;line-height:12px;background:#12251feb;color:#fff4d1;padding:0 3px;max-width:calc(var(--tile) + 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:2px}.s1 .unitName{background:#572a20e8}.uhp{bottom:2px;left:4px;right:4px;height:5px;border:1px solid #102019;z-index:5}.uhp i{background:#73c3a6}.uhp.foe i{background:#e88a68}.unit .cb{top:0;bottom:auto;left:0;font-size:9px;line-height:10px;min-width:12px;text-align:center;border:1px solid #dfd5b350;z-index:5}.unit.hit{animation:unitHit .25s}.unit.hit .artSprite{filter:brightness(2.5)}@keyframes unitHit{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}.pathMark{position:absolute;inset:0;display:grid;place-items:center;z-index:8;font-size:23px;color:#fff2b8;line-height:1;text-shadow:0 1px 3px #051d16;pointer-events:none}.pathMark.last{box-shadow:inset 0 0 0 3px #ffe6a0;background:#fae19435}.supplyFlag{position:absolute;right:0;top:2px;background:#e5ca89e8;color:#303825;padding:2px 3px;line-height:1;font-size:9px;z-index:5}.supplyFlag.owned{background:#80cab7;color:#173f31}.battleLegend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#c0c9b2;margin:9px 0}.battleLegend i{display:inline-block;width:10px;height:10px;vertical-align:middle;border:1px solid #add7df;margin-right:4px;background:#35798c}.battleLegend .enemyI{background:#ad5e43;border-color:#ffd091}.battleLegend .goalI{background:#cfb572;border-color:#f4d993}.battleRoster{display:flex;gap:7px;flex-wrap:wrap;padding:10px 0 12px}.rosterUnit{display:flex;align-items:center;gap:6px;flex:1;min-width:90px;max-width:170px;padding:5px 7px;background:#203c2d;color:#e7e8d1;border:1px solid #677b59;text-align:left;position:relative}.rosterUnit .portrait{width:32px;box-shadow:none;flex:none}.rosterUnit b{font-size:12px;display:block;line-height:1.25}.rosterUnit small{font-size:10px;line-height:1.5;display:block;color:#b6cbb4}.rosterUnit.active{border-color:#efce88;background:#3c5133}.rosterUnit.spent{opacity:.43}.rosterUnit.dead{opacity:.25}.warTools{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #7d735650;padding-top:11px}.warTools .mini{font-size:13px;min-height:38px}.warTools .endTurn{margin-left:auto;background:#804733;border-color:#be8458;color:#ffe2be}.blog{font-size:12px;line-height:1.7;margin-top:9px;min-height:42px;color:#afbaa6;max-height:72px;overflow:auto;border-color:#5e6a4f}.blog .hl{color:#eed792}.side.battleSide{padding:0;background:#e8dcba;color:#263626;border-color:#b79a5d;max-height:none;position:sticky}.commandHeader{padding:12px 18px;background:#243d2e;color:#e9d698;border-bottom:2px solid #a5884e;font-family:Batang,serif;font-size:21px;letter-spacing:.16em}.commandBody{padding:17px}.battleSide .dim{color:#727353}.battleSide .sec{color:#625b37;border-color:#987f42;background:#c4b07535}.officerCard{display:flex;gap:15px;align-items:center;margin-bottom:15px}.officerCard .portrait{width:81px}.officerCard h2{font-size:23px;line-height:1.3;letter-spacing:.01em;margin:0 0 7px;color:#3d3f28}.officerCard small{display:block;font-size:12px;color:#756c4b}.officerStats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:11px 0;border-bottom:1px solid #ad996d70;font-size:11px;color:#7c7154}.officerStats b{display:block;font-size:23px;font-family:Georgia,serif;color:#3a472f;line-height:1.3}.commandBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.commandBtns button{padding:9px 5px;background:#334e39;border:1px solid #52683d;color:#f2e6c4;font-size:15px;min-height:44px}.commandBtns .attackConfirm{grid-column:1/-1;background:#91462f;border-color:#753d28;font-size:18px;min-height:51px}.commandBtns .cancel{background:#dbceaa;color:#4c4c31}.commandBtns .skillBtn{background:#646044;color:#f5e8c9;font-size:14px}.commandBtns .skillBtn.on{background:#776183}.commandBtns .small{font-size:10px}.forecast{padding:14px;margin-top:15px;border:1px solid #af8e57;background:#faf0d7}.forecast .targetName{display:flex;align-items:center;gap:10px;font-size:18px;color:#743929;margin-bottom:10px}.forecast .targetName .portrait{width:43px;box-shadow:none}.damageNumber{font-size:34px;line-height:1.25;color:#9e422b;font-weight:700;font-family:Georgia,serif;letter-spacing:-.03em}.forecastDetail{font-size:13px;line-height:1.8;color:#686042;margin-top:7px}.forecastDetail .good{color:#39704b}.forecastDetail .danger{color:#a2382c}.forecast .hpbig{border-color:#88734d;background:#bca888;height:12px}.forecast .hpbig b{line-height:10px;font-size:9px}.destination{margin-top:15px;background:#f7edd3;border-left:3px solid #9d874d;padding:12px;font-size:14px;line-height:1.9}.destination strong{font-size:18px;display:block;color:#465f36}.destination .risk{color:#a74c30}.battleSide .hpbig{border-color:#7d8254}.battleSide .hpbig i{background:#568963}.idleCommand{padding:20px 18px;font-size:17px;line-height:1.8}.idleCommand .portrait{width:108px;display:block;margin:7px auto 20px}.nextUnit{width:100%;margin-top:15px;background:#304d36;color:#f5e8c9;border:1px solid #728158;padding:12px;font-size:17px}.sideFoot{padding:10px 17px;font-size:11px;color:#756c4b;border-top:1px solid #a28f625e;line-height:1.8}
/* Briefing, clash, result */
.modal{background:#08140de0;backdrop-filter:blur(5px);z-index:150}.mbox{max-width:880px;background:#1c2e25;border:1px solid #b3975d;padding:20px 24px;box-shadow:0 25px 90px #000a}.mh{color:#e2c88c;font-size:21px;padding:0 0 12px;margin:0 0 16px}.mb{padding:0;font-size:16px;line-height:1.7}.briefLayout{display:grid;grid-template-columns:200px 1fr;gap:25px}.briefLayout .portrait{width:168px;margin:auto;display:block}.briefLayout h2{font-family:Batang,serif;font-size:27px;color:#ecd49a;margin:0 0 8px}.briefGoal{font-size:21px;margin:10px 0;color:#f6e5b1}.briefHint{font-size:15px;line-height:1.8;color:#bfcbb3}.formationList{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.formation{border:1px solid #737b54;background:#203a2b;color:#f0dfb5;padding:13px;text-align:left}.formation b{display:block;font-family:Batang,serif;font-size:22px;letter-spacing:.1em;margin-bottom:8px}.formation span{font-size:13px;line-height:1.8;color:#c7cbb2;display:block}.formation.on{background:#50643c;border-color:#f4d190;box-shadow:inset 0 0 0 1px #dec384}.briefTags{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.briefTags span{font-size:12px;border:1px solid #758057;padding:4px 8px;color:#d5dbc1}.clash{position:fixed;inset:0;background:#071410bb;z-index:100;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:clashFade .7s both}.clashInner{width:min(820px,90vw);display:flex;gap:35px;align-items:center;justify-content:center;background:linear-gradient(90deg,#142d23f7,#5b462bf7,#341c17f7);border-top:3px double #d6b976;border-bottom:3px double #d6b976;padding:25px;box-shadow:0 20px 100px #000;position:relative;overflow:hidden}.clashInner .portrait{width:140px}.clashFace{text-align:center;font-size:23px;color:#f2d79c;line-height:1.4}.clashFace .portrait{display:block;margin-bottom:10px}.clashCenter{text-align:center}.clashCenter b{font-size:46px;display:block;font-family:Batang,serif;color:#ffe1a2;letter-spacing:.1em}.clashCenter small{font-size:19px;color:#ead7ac}.clashInner::after{content:'';position:absolute;inset:-30%;background:linear-gradient(145deg,transparent 48%,#fff5c688 50%,transparent 52%);animation:slash .4s both}@keyframes slash{from{transform:translateX(-80%)}to{transform:translateX(90%)}}@keyframes clashFade{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}.resultSheet{background:#e8dcba;color:#34402b;margin:0;padding:30px;display:grid;grid-template-columns:190px 1fr;gap:28px}.resultSheet .portrait{width:170px}.resultSheet h1{font-family:Batang,serif;font-size:38px;margin:0 0 10px;letter-spacing:.2em;color:#765227}.resultSheet p{font-size:19px;line-height:1.9;margin:12px 0}.rewardRow{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid #9f885f5e;border-bottom:1px solid #9f885f5e;padding:14px 0;margin:14px 0;font-size:16px;color:#655d3d}.resultStars{font-size:29px;color:#a8813b;letter-spacing:.1em}.resultSheet .btn{width:auto;display:inline-block;min-width:190px}.resultSheet .btn.ghost{color:#645438;border-color:#a68c51;background:#dccca3}.resultActions{display:flex;gap:10px;flex-wrap:wrap}.toast{background:#dbc28b;color:#192d22;box-shadow:0 6px 30px #0007;border:1px solid #f6e3af;padding:10px 20px;font-size:16px;top:90px;max-width:90vw;text-align:center}.tipbox{font-size:13px;background:#17271f;max-width:340px;border:1px solid #b59c61;box-shadow:0 8px 22px #0008;z-index:210}.banner{z-index:25;font-family:Batang,serif;background:#152b21e8;border-top:1px solid #c7ab69;border-bottom:1px solid #c7ab69;padding:18px;font-size:29px;color:#f1d797;top:35%}.codexFaces{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.codexFace{text-align:center;font-size:13px}.codexFace .portrait{width:100%;display:block;margin-bottom:7px}.practiceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.practiceBattle{padding:18px 15px;background:#263e2d;border:1px solid #928353;color:#dfc997;text-align:left}.practiceBattle b{display:block;font-size:21px;font-family:Batang,serif;margin-bottom:6px}.practiceBattle small{display:block;color:#bcc6ae;font-size:13px}.saveStatus{font-size:11px;color:#9eae95}.a11y-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.loadNotice{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);background:#1b322a;color:#ddcc9e;border:1px solid #a38c5e;z-index:300;font-size:12px;padding:5px 14px}.pface,.artSprite,.vistaBg{background-color:transparent}.imageFail{background-color:#314b32}
@media(min-width:1700px){.dialogText{font-size:25px}.vista{height:560px}}
@media(max-width:1100px){#app{padding:10px}.body{grid-template-columns:minmax(0,1fr) 280px;gap:10px}.side{padding:14px}.dialogue{grid-template-columns:145px 1fr;padding:25px;gap:20px}.dialogue>.portrait{width:145px}.side.battleSide{padding:0}.officerCard .portrait{width:67px}.commandBody{padding:14px}.officerCard h2{font-size:21px}.commandBtns button{font-size:13px}.tile .unitName{font-size:8px}.campBody{padding:16px}.campBanner{height:160px}.inv .is{display:none}.inv{grid-template-columns:25px 1fr auto}}
@media(max-width:820px){.body{grid-template-columns:1fr}.body>.side{display:none}.body>.side.open{display:block;position:fixed;inset:80px 12px 12px;z-index:100;max-height:none}.body:has(.battleSide){grid-template-columns:minmax(0,1fr)}.body>.battleSide{display:block;position:static;max-height:none}.commandBody{display:grid;grid-template-columns:1fr 1fr;gap:15px}.commandBody .commandBtns{align-self:start;margin:0}.commandBody .forecast,.commandBody .destination{margin:0}.sideFoot{display:none}.commandHeader{padding:7px 14px;font-size:17px}.officerCard{margin:0;grid-column:1}.officerStats{grid-column:1}.titleContent{width:60%;}.titleHero{min-height:720px;padding:40px 6%}.titleFine{max-width:85%;font-size:11px}.sceneHeading h1{font-size:26px}.dialogText{font-size:21px}.vista{height:350px}.stageOfficer .artSprite{width:94px;height:94px}.dialogue{min-height:280px}.campBody .mg2{grid-template-columns:1fr 1fr}.battleRoster{gap:5px}.rosterUnit{max-width:none;min-width:80px}.warHeader h1{font-size:21px}.top .sub{font-size:12px}.top .tr span{font-size:12px}.top .mini{font-size:11px;padding:5px 7px}.codexFaces{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){#app{padding:7px}.top{padding:5px 0 9px;margin-bottom:8px;gap:7px}.top .ttl{font-size:20px}.top .sub{margin-left:10px;font-size:10px}.top .tr{gap:5px}.top .tr span{display:none}.titleHero{background-position:63% center;min-height:780px;justify-content:flex-end;padding:28px 23px 105px}.titleHero::before{background:linear-gradient(0deg,#102019ff 0,#102019e3 45%,#10201910 85%)}.titleContent{width:100%;padding:0}.titleMark{font-size:86px}.titleKorean{font-size:23px;margin:10px 0 15px}.titleLead{font-size:16px;max-width:280px}.titleActions{max-width:100%;margin-top:20px}.titleActions .btn{font-size:18px}.titleFine{left:23px;bottom:20px;right:23px}.overline{margin-bottom:12px;font-size:11px}.diffrow{max-width:100%}.vista{height:280px}.sceneHeading{left:16px;top:15px}.sceneHeading h1{font-size:22px}.sceneHeading p{font-size:11px}.chapterStamp{right:14px;top:16px;width:36px;height:55px;font-size:13px;padding:5px}.stageActors{inset:50% 4% 12px}.stageOfficer .artSprite{width:72px;height:72px}.stageOfficer .nameTag{font-size:10px;padding:0 5px}.dialogue{display:block;padding:18px;min-height:315px}.dialogue>.portrait{float:left;width:87px;margin:-35px 17px 12px 0}.speaker{font-size:21px;padding-bottom:6px;min-height:50px;display:block;margin-left:103px}.speaker small{display:block;margin-top:3px}.dialogText{font-size:20px;line-height:1.8;clear:both;padding-top:8px}.dialogue.narration{display:block}.narrationSeal{float:left;font-size:20px;writing-mode:initial;padding:4px 10px;margin-right:12px}.narration .speaker{margin-left:0;min-height:30px}.dialogControls{margin-top:18px;font-size:11px}.dialogControls .nextLine{font-size:15px;padding:7px 13px;min-width:100px}.storyChoice{padding:11px 10px;gap:10px}.storyChoice .choiceBody{font-size:17px}.storyChoice small{font-size:11px}.storyScene{min-height:calc(100vh - 120px)}.campBanner{padding:15px;height:145px;gap:16px}.campBanner h1{font-size:25px}.campBanner p{font-size:12px}.campBanner .portrait{width:73px}.campBody{padding:14px}.mgrid{grid-template-columns:repeat(2,1fr);gap:7px}.card{min-height:83px;padding:12px}.card b{font-size:17px}.card span{font-size:12px}.campBody .mg2{grid-template-columns:1fr;gap:10px}.campGoals{font-size:14px;padding:10px}.campNav{display:block}.campNav .ap{font-size:15px;margin-top:7px}.campFoot{flex-wrap:wrap}.campFoot .btn{font-size:16px;min-width:100%}.bt{padding:10px}.warGuide{font-size:13px;min-height:44px}.warHeader{padding-bottom:9px}.warHeader h1{font-size:19px}.warHeader .objectiveLine{font-size:11px;max-width:235px}.turnBadge{min-width:65px;padding:3px 8px}.turnBadge strong{font-size:24px}.gridwrap{border-width:2px}.warTools{gap:5px}.warTools .mini{font-size:11px;padding:5px 7px;min-height:33px}.battleRoster{display:grid;grid-template-columns:repeat(4,1fr)}.rosterUnit{min-width:0;padding:5px;gap:4px}.rosterUnit .portrait{width:25px}.rosterUnit b{font-size:10px}.rosterUnit small{font-size:9px}.battleLegend{font-size:10px;gap:10px}.commandBody{gap:12px;padding:14px}.officerCard{gap:10px}.officerCard .portrait{width:53px}.officerCard h2{font-size:19px}.officerCard small{font-size:10px}.officerStats b{font-size:21px}.officerStats{font-size:10px;gap:5px}.commandBtns{gap:6px}.commandBtns button{min-height:37px;font-size:12px;padding:7px 3px}.commandBtns .attackConfirm{min-height:43px;font-size:16px}.commandBody .forecast,.commandBody .destination{grid-column:1/-1}.forecast{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.forecast .targetName{margin:0;font-size:17px}.damageNumber{font-size:29px}.forecastDetail{margin:0}.forecast .hpbig{grid-column:1/-1}.briefLayout{grid-template-columns:85px 1fr;gap:17px}.briefLayout .portrait{width:85px}.briefLayout h2{font-size:21px}.briefGoal{font-size:17px}.briefHint{font-size:12px}.mbox{padding:16px}.mh{font-size:18px}.formationList{gap:6px;margin:15px 0}.formation{padding:10px 8px}.formation b{font-size:19px}.formation span{font-size:11px}.resultSheet{display:block;padding:21px}.resultSheet>.portrait{float:left;width:80px;margin:0 18px 12px 0}.resultSheet h1{font-size:30px}.resultSheet p{clear:both;font-size:17px}.resultActions .btn{width:100%;font-size:17px}.clashInner{padding:16px;gap:15px}.clashInner .portrait{width:80px}.clashFace{font-size:17px}.clashCenter b{font-size:28px}.clashCenter small{font-size:12px}.practiceGrid{grid-template-columns:1fr 1fr}.practiceBattle b{font-size:18px}.practiceBattle small{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

#artLoadNotice{position:fixed;bottom:12px;right:16px;z-index:400;background:#243b30;color:#eee2bd;border:1px solid #927c44;font-size:13px;padding:9px 15px;box-shadow:0 3px 12px #0006;max-width:calc(100vw - 32px)}#artLoadNotice.error{background:#503629}#artLoadNotice button{background:transparent;color:#ffe7a0;border:0;text-decoration:underline;padding:2px 4px}.titleFooter{flex-wrap:wrap}

.storyScene:has(.storyChoices) .vista{height:clamp(180px,30vh,330px)}@media(max-height:820px) and (min-width:821px){.storyScene:has(.storyChoices) .vista{height:175px}.titleHero{padding-top:30px;padding-bottom:65px}.titleLead{margin-top:15px;margin-bottom:12px}.titleActions{margin-top:16px}.dialogue{padding-top:23px;padding-bottom:18px}.dialogText{font-size:21px;line-height:1.8}.dialogControls{margin-top:14px}}


.officerStats{grid-template-columns:repeat(4,minmax(0,1fr))}.unitPennant{min-width:15px}.unitPennant:empty{display:none}