/* Story (client/panels-story.js): chapter map, stage sheet, battle replay and Supply Sort. Scrap-metal cards on a
   wasteland road; every chapter tints the screen with its own colour (--cc). */
.sy-root { --cc: #7f8f3c; }
.sy-stars { display: inline-flex; gap: 1px; font-size: 13px; line-height: 1; }
.sy-stars i { font-style: normal; color: #3b443e; } .sy-stars i.on { color: #ffd23a; text-shadow: 0 0 5px rgba(255,210,58,.6); }
.sy-btn { min-height: 42px; padding: 6px 14px; border-radius: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: #fff;
  background: linear-gradient(#34463a, #223028); border: 1px solid #4a6352; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.45); transition: transform .08s; }
.sy-btn:active:not([disabled]) { transform: translateY(1px) scale(.98); }
.sy-btn[disabled] { filter: grayscale(1) brightness(.75); opacity: .8; }
.sy-btn.gold { background: linear-gradient(#ffd97a, #e3a12f 55%, #b8761a); border-color: #ffe7a6; color: #2a1a03; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.sy-btn.red { background: linear-gradient(#ff7a62, #d0412f 55%, #8f2318); border-color: #ffab9c; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.sy-btn.sm { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.sy-btn.wide { width: 100%; min-height: 48px; font-size: 16px; margin-top: 10px; }
.sy-btn small { font-weight: 700; opacity: .85; }
.sy-c { text-align: center; }

/* ---------- map ---------- */
.sy-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.sy-strip > div { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; padding: 5px 8px; border-radius: 10px; background: linear-gradient(#1f2a22, #141c17); border: 1px solid var(--line); }
.sy-strip span { grid-row: 1 / 3; font-size: 19px; } .sy-strip b { font: 900 15px/1.1 system-ui; } .sy-strip small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-chs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
.sy-ch { position: relative; padding: 5px 0 4px; display: grid; justify-items: center; gap: 1px; border-radius: 12px; color: #fff;
  background: linear-gradient(color-mix(in srgb, var(--cc) 34%, #1a211c), #141a16); border: 2px solid color-mix(in srgb, var(--cc) 45%, #2a332d); }
.sy-ch span { font-size: 20px; line-height: 1.15; } .sy-ch b { font: 900 11px/1 system-ui; color: #d8dfd9; }
.sy-ch.on { border-color: var(--pn-gold); box-shadow: 0 0 10px color-mix(in srgb, var(--cc) 80%, transparent), inset 0 0 0 1px rgba(255,230,160,.35); background: linear-gradient(color-mix(in srgb, var(--cc) 70%, #1a211c), #1a211c); }
.sy-ch.locked { filter: grayscale(.8) brightness(.75); }
.sy-ch.done b::after { content: ' ✓'; color: var(--good); }
.sy-ch .dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #e33; box-shadow: 0 0 0 2px #fff; }
.sy-banner { display: grid; grid-template-columns: 54px 1fr; gap: 6px 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 62%, #000), color-mix(in srgb, var(--cc) 20%, #111) 75%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 75%, #fff), 0 6px 16px rgba(0,0,0,.45); }
.sy-banner .ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 29px; background: rgba(0,0,0,.38); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.sy-banner .tx { min-width: 0; } .sy-banner .tx small { font: 800 10px/1.2 system-ui; letter-spacing: .08em; color: rgba(255,255,255,.78); text-transform: uppercase; }
.sy-banner .tx > b { display: block; font: 900 21px/1.15 system-ui; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.sy-banner .pr { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: center; margin-top: 4px; font: 800 11px/1 system-ui; color: #fff; }
.sy-banner .pr .pn-bar { margin: 0; height: 7px; } .sy-banner .pr .st { color: #ffd23a; font-size: 13px; }
.sy-banner p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; line-height: 1.38; color: rgba(255,255,255,.92); }
.sy-banner p.lock { color: var(--c-amber-hi); font-weight: 700; }
.sy-map { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #3a3a2c;
  background: radial-gradient(60% 18% at 20% 12%, color-mix(in srgb, var(--cc) 30%, transparent), transparent), radial-gradient(70% 20% at 85% 55%, color-mix(in srgb, var(--cc) 22%, transparent), transparent),
    radial-gradient(60% 16% at 25% 90%, rgba(0,0,0,.35), transparent), repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 3px, transparent 3px 11px), linear-gradient(#2a2a20, #1b1d17); }
.sy-map.locked { filter: grayscale(.7) brightness(.8); }
.sy-road { position: relative; } .sy-road svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sy-road path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sy-road .bed { stroke: #11130f; stroke-width: 20; opacity: .85; } .sy-road .dash { stroke: #6a6650; stroke-width: 2; stroke-dasharray: 7 9; }
.sy-road .done { stroke: var(--pn-gold); stroke-width: 4; opacity: .85; filter: drop-shadow(0 0 4px rgba(240,180,60,.6)); }
.sy-node { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; }
.sy-node .disc { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font: 900 21px/1 system-ui;
  background: radial-gradient(circle at 50% 30%, #4a5446, #1c211c); border: 3px solid #6b7468; box-shadow: 0 4px 0 #0c0f0c, 0 6px 12px rgba(0,0,0,.5); text-shadow: 0 2px 0 #000; }
.sy-node.cleared .disc { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cc) 85%, #fff), color-mix(in srgb, var(--cc) 55%, #000)); border-color: var(--pn-gold); }
.sy-node.next .disc { background: radial-gradient(circle at 50% 30%, var(--c-amber-pale), #e0932a); border-color: #fff3c8; color: #3a2304; text-shadow: none; }
.sy-node.locked .disc { font-size: 17px; filter: grayscale(1) brightness(.8); }
.sy-node.boss { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.sy-node.boss .disc { font-size: 32px; border-color: #d0503a; background: radial-gradient(circle at 50% 30%, #6a2a20, #1c0f0c); box-shadow: 0 4px 0 #0c0f0c, 0 0 16px rgba(208,80,58,.55); }
.sy-node.boss.cleared .disc { border-color: var(--pn-gold); box-shadow: 0 4px 0 #0c0f0c, 0 0 14px rgba(240,180,60,.45); }
.sy-node .ring { position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--c-amber-hi); animation: syRing 1.6s ease-out infinite; pointer-events: none; }
.sy-node.boss .ring { border-color: #ff8a6a; }
@keyframes syRing { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.sy-node .lb { position: absolute; top: 50%; transform: translateY(-50%); width: 132px; display: grid; gap: 3px; text-align: left; }
.sy-node .lb.r { left: calc(100% + 9px); } .sy-node .lb.l { right: calc(100% + 9px); text-align: right; justify-items: end; }
.sy-node .lb b { font: 800 12.5px/1.15 system-ui; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.sy-node .lb em { font: 900 11px/1 system-ui; font-style: normal; color: var(--c-amber-hi); text-shadow: 0 1px 2px #000; }
.sy-node .lb small { font-size: 11px; color: #aab4a8; text-shadow: 0 1px 2px #000; }
.sy-node.locked .lb b { color: #a9b1a8; font-weight: 700; }
.sy-chests { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sy-chest { display: grid; grid-template-columns: 40px 1fr; gap: 0 8px; align-items: center; padding: 8px 10px; border-radius: 12px; text-align: left; color: #fff;
  background: linear-gradient(#3a434b, #262c32); border: 0; box-shadow: 0 0 0 2px #59636d, 0 4px 0 #15191c; }
.sy-chest span { grid-row: 1 / 3; font-size: 30px; } .sy-chest b { font: 800 13px/1.15 system-ui; } .sy-chest small { font: 800 11px/1.2 system-ui; color: #aab4bd; }
.sy-chest.locked span { filter: grayscale(.9) brightness(.7); }
.sy-chest.ready { background: linear-gradient(var(--c-amber-hi), #e3a03a); color: #2a1a04; box-shadow: 0 0 0 2px #fff3c8, 0 4px 0 #8a5a10, 0 0 16px rgba(255,215,106,.6); animation: syPulse 1.4s ease-in-out infinite; }
.sy-chest.ready small { color: #2a1a04; } .sy-chest.claimed { opacity: .6; } .sy-chest.claimed small { color: var(--good); }
@keyframes syPulse { 50% { transform: translateY(-2px); filter: brightness(1.08); } }
.sy-foot { margin-top: 10px; text-align: center; }

/* ---------- stage sheet ---------- */
.sy-brief { position: relative; padding: 12px 12px 10px; margin-bottom: 10px; border-radius: 14px; border-left: 4px solid var(--cc);
  background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 26%, #151a16), #151a16 70%); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.sy-brief .tag { font: 900 10px/1 system-ui; letter-spacing: .1em; color: color-mix(in srgb, var(--cc) 60%, #fff); }
.sy-brief p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.45; color: #e9efe6; }
.sy-brief.boss { border-left-color: #d0503a; background: linear-gradient(120deg, #4a1c16, #1a1412 70%); } .sy-brief.boss .tag { color: #ff9a82; }
.sy-card { padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(#1f2a22, #16201a); border: 1px solid var(--line); }
.sy-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sy-hd h3 { flex: 1; margin: 0; font-size: 13px; color: var(--pn-gold); text-transform: uppercase; letter-spacing: .05em; }
.sy-diff { padding: 3px 9px; border-radius: 999px; font: 800 11.5px/1.2 system-ui; background: #2a3036; color: #cfd6cf; white-space: nowrap; }
.sy-diff.cake, .sy-diff.good { background: #1f3a1c; color: var(--c-good-hi); } .sy-diff.even { background: #3a3414; color: var(--c-amber-hi); } .sy-diff.risky { background: #3d2814; color: #ffa45a; } .sy-diff.deadly { background: #3a1f1a; color: #ff7a66; }
.sy-rowlb { margin: 6px 0 4px; font: 800 10.5px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: #c9d1c9; text-align: center; }
.sy-rowlb small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 11px; }
.sy-foes { display: flex; justify-content: center; gap: 8px; padding-top: 3px; }
.sy-foe { position: relative; width: 78px; padding: 6px 2px 5px; display: grid; justify-items: center; gap: 2px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid #3a2f2a; color: #fff; }
.sy-foe.none { border-style: dashed; border-color: #2c352f; background: none; color: #3c463f; align-content: center; min-height: 86px; font-size: 22px; }
.sy-foe b { font: 800 11px/1.1 system-ui; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sy-foe small { font-size: 10.5px; color: #c9b8b0; }
.sy-foe .fac, .sy-slot .fac, .sy-rh .fac, .sy-u .fac { position: absolute; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-style: normal; box-shadow: 0 0 0 1.5px #0b0f0c; }
.sy-foe .fac { top: 4px; right: 8px; }
.sy-zed { position: relative; flex: none; border-radius: 50%; display: grid; place-items: center; line-height: 1;
  background: radial-gradient(circle at 50% 30%, #4c5a3c, #1a2014 75%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 75%, #000), 0 0 0 4px #0b0f0c, inset 0 -6px 10px rgba(0,0,0,.5); }
.sy-zed.boss { background: radial-gradient(circle at 50% 30%, #7a2a20, #24100c 75%); box-shadow: 0 0 0 2px var(--c-amber-hi), 0 0 0 4px #0b0f0c, 0 0 12px rgba(255,90,60,.6), inset 0 -6px 10px rgba(0,0,0,.5); }
.sy-zed > i { position: absolute; top: -24%; left: 50%; transform: translateX(-50%); font-size: .42em; font-style: normal; filter: drop-shadow(0 1px 1px #000); }
.sy-tri { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.sy-tri .bonus { color: var(--c-good-hi); font-weight: 800; }
.sy-rws { display: flex; flex-wrap: wrap; gap: 5px; } .sy-rws.big { justify-content: center; gap: 6px; }
.sy-rw { padding: 3px 9px; border-radius: 999px; background: var(--c-ink); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.sy-rw.ruby { border-color: #7a3a6a; } .sy-rws.big .sy-rw { padding: 5px 11px; font-size: 14.5px; border-color: var(--pn-gold2); }
.sy-rules { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; color: #c6cec6; }
.sy-rules li { display: flex; gap: 6px; align-items: baseline; } .sy-rules i { font-style: normal; color: #59635b; } .sy-rules li.ok i { color: #ffd23a; }
.sy-syn { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px dashed #36423a; }
.sy-syn.on { border: 1px solid var(--c-good-hi); background: #1c3319; box-shadow: 0 0 10px rgba(143,227,90,.25); }
.sy-syn .tx { flex: 1; text-align: right; font: 700 11.5px/1.2 system-ui; color: var(--muted); } .sy-syn.on .tx { color: #b6f08f; }
.sy-fc { padding: 2px 7px; border-radius: 999px; font-size: 12px; background: #10160f; border: 1px solid color-mix(in srgb, var(--fc) 55%, #222); white-space: nowrap; }
.sy-fc.on { background: color-mix(in srgb, var(--fc) 45%, #111); border-color: #fff; }
.sy-slots { display: flex; justify-content: center; gap: 8px; }
.sy-slot { --rc: #59635b; position: relative; flex: 0 0 calc((100% - 16px) / 3); min-width: 0; padding: 8px 2px 6px; display: grid; justify-items: center; gap: 2px; border-radius: 14px; color: #fff;
  background: linear-gradient(#2a2410, #151b14); border: 2px solid var(--pn-gold2); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.sy-slot.back { background: linear-gradient(#1c2634, #151b14); border-color: #4a6a8a; }
.sy-slot.empty { border-style: dashed; border-color: #4a554c; background: rgba(0,0,0,.25); box-shadow: none; }
.sy-slot.sel { border-color: var(--good); border-style: solid; box-shadow: 0 0 0 2px rgba(94,196,107,.35), 0 0 14px rgba(94,196,107,.55); }
.sy-slot .no { position: absolute; top: 4px; left: 7px; font: 900 11px/1 system-ui; font-style: normal; color: var(--pn-gold); }
.sy-slot .fac { top: 6px; right: 12px; }
.sy-slot .plus { width: 60px; height: 60px; border-radius: 12px; display: grid; place-items: center; font-size: 30px; color: #6f7b70; background: rgba(0,0,0,.3); border: 2px dashed #4a554c; }
.sy-slot b { font: 800 12px/1.1 system-ui; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-slot small { font-size: 10.5px; color: #c9d1c9; white-space: nowrap; }
img.sy-pic, .sy-pic.pn-portrait-fallback { border-radius: 12px; border: 2px solid var(--rc, var(--pn-gold2)); background: var(--c-ink); object-position: top; display: block; }
.sy-roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.sy-rh { --rc: #59635b; position: relative; min-width: 0; padding: 5px 1px 4px; display: grid; justify-items: center; gap: 1px; border-radius: 11px; background: var(--panel2); border: 1.5px solid var(--line); color: #fff; }
.sy-rh b { font: 800 10.5px/1.1 system-ui; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sy-rh small { font-size: 9.5px; color: #c9d1c9; white-space: nowrap; }
.sy-rh .fac { top: 3px; left: 3px; width: 16px; height: 16px; font-size: 9px; }
.sy-rh .in { position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 900 10px/1 system-ui; font-style: normal; background: var(--good); color: #062; box-shadow: 0 0 0 1.5px #0b0f0c; }
.sy-rh.used { border-color: var(--good); background: #1c3020; } .sy-rh.used img { filter: brightness(.7); }
.sy-sortcard { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(120deg, #2a2418, #171b16); border: 1px dashed #8a6a2a; }
.sy-sortcard.on { border: 1px solid var(--c-good-hi); background: linear-gradient(120deg, #1c3319, #171b16); }
.sy-sortcard .ic { font-size: 30px; text-align: center; } .sy-sortcard .tx { min-width: 0; display: grid; gap: 2px; }
.sy-sortcard b { font-size: 14px; color: var(--c-amber-hi); } .sy-sortcard.on b { color: #b6f08f; } .sy-sortcard small { font-size: 12px; line-height: 1.3; color: var(--muted); } .sy-sortcard small.warn { color: #ffa45a; }
.sy-bottom .sy-go { display: flex; gap: 8px; align-items: stretch; }
.sy-btn.big { flex: 1; min-height: 54px; display: grid; justify-items: center; align-content: center; gap: 1px; font-size: 18px; }
.sy-btn.big small { font-size: 11.5px; }
.sy-pop { display: grid; gap: 8px; } .sy-pop p { margin: 0; font-size: 14px; line-height: 1.4; }
.sy-kv { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .sy-kv b { color: var(--pn-gold); }
.sy-skill { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(135deg, #2a2236, #161a1f); border: 1px solid #5a3f7a; }
.sy-skill b { color: #e8d6ff; font-size: 14px; } .sy-skill span { font-size: 12.5px; color: #c2c9c4; } .sy-skill.burst { background: linear-gradient(135deg, #3a2414, #1a1612); border-color: #9a5a2a; } .sy-skill.burst b { color: #ffc48a; }
.sy-sweeps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sy-sweeps .sy-btn { padding: 6px 2px; display: grid; }

/* ---------- overlay (battle replay, Supply Sort) ---------- */
.sy-ov { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; overflow-y: auto; padding: calc(8px + var(--safe-top)) 10px calc(10px + var(--safe-bottom)); color: var(--text);
  background: radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--cc) 38%, #0b0f0c), transparent), linear-gradient(#141a15, #0a0d0b); animation: syIn .22s ease-out; }
@keyframes syIn { from { opacity: 0; transform: scale(1.03); } }
.sy-bhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--pn-wood); border: 1px solid var(--pn-gold2); }
.sy-bhead .tt { min-width: 0; display: grid; } .sy-bhead small { font: 800 10px/1.2 system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sy-bhead .tt b { font: 900 16px/1.2 system-ui; color: var(--pn-gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-bhead .rd { text-align: right; flex: none; } .sy-bhead .rd b { display: block; font: 900 17px/1.1 system-ui; color: #fff; }
.sy-btags { display: flex; justify-content: center; gap: 6px; min-height: 24px; margin-top: 6px; }
.sy-btags span { padding: 3px 10px; border-radius: 999px; font: 800 11.5px/1.3 system-ui; background: #1c3319; border: 1px solid var(--c-good-hi); color: #b6f08f; }
.sy-bf { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 500px; }
.sy-brow { display: flex; justify-content: center; gap: 8px; }
.sy-u { --fc: #888; position: relative; width: min(108px, calc((100% - 16px) / 3)); padding: 7px 5px 6px; display: grid; justify-items: center; gap: 3px; border-radius: 12px; border: 1.5px solid #3a4a3e; background: linear-gradient(#1f2a22, #131915); transition: opacity .3s, filter .3s; }
.sy-u.none { visibility: hidden; }
.sy-u.s1 { border-color: #5a3a32; background: linear-gradient(#2c1c18, #171110); } .sy-u.s0 { border-color: #3a5a78; background: linear-gradient(#1a2836, #111820); }
.sy-u.boss { border-color: var(--c-amber-hi); box-shadow: 0 0 14px rgba(255,90,60,.45); }
.sy-u .pic { position: relative; width: 70px; height: 70px; } .sy-u .pic .sy-pic { --rc: var(--fc); }
.sy-u .pic > .sy-pic, .sy-u .pic > .sy-zed { width: 100% !important; height: 100% !important; }
.sy-u .fac { right: -7px; bottom: -3px; background: var(--fc); }
.sy-u .hp { position: relative; width: 100%; height: 13px; border-radius: 7px; background: #0b0f0c; box-shadow: inset 0 0 0 1px #2c352f; overflow: hidden; }
.sy-u .hp i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; transition: width .28s ease-out; background: linear-gradient(var(--c-good-hi), #3f9a2f); }
.sy-u.s1 .hp i { background: linear-gradient(#ff8a6a, #c0392b); }
.sy-u .hp small { position: absolute; inset: 0; text-align: center; font: 800 10px/13px system-ui; color: #fff; text-shadow: 0 1px 1px #000; }
.sy-u > b { font: 800 11px/1.1 system-ui; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-u.dead { filter: grayscale(1) brightness(.5); opacity: .7; }
.sy-u.dead::after { content: '✖'; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 40px; line-height: 1; color: #ff5a4a; text-shadow: 0 2px 0 #000; }
.sy-u.act.s0 { animation: syActUp .32s ease-out; } .sy-u.act.s1 { animation: syActDown .32s ease-out; }
@keyframes syActUp { 40% { transform: translateY(-14px) scale(1.07); box-shadow: 0 0 16px #6fb0f0; } } @keyframes syActDown { 40% { transform: translateY(14px) scale(1.07); box-shadow: 0 0 16px #f08a6a; } }
.sy-u.hit { animation: syHit .32s linear; } @keyframes syHit { 20% { transform: translateX(-5px); filter: brightness(2.2); } 55% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
.sy-u.boom { animation: syBoom .5s ease-out; } @keyframes syBoom { 30% { transform: scale(1.35); filter: grayscale(0) brightness(2.4) saturate(2); opacity: 1; box-shadow: 0 0 30px #ff9a2a; } }
.sy-dmg { position: absolute; left: 50%; top: 8px; z-index: 3; transform: translateX(-50%); font: 900 17px/1 system-ui; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000; pointer-events: none; animation: syDmg .9s ease-out forwards; white-space: nowrap; }
.sy-dmg.edge { color: #9ff06a; } .sy-dmg.skill { font-size: 23px; color: #ffd23a; } .sy-dmg.burst { color: #ffa45a; }
@keyframes syDmg { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -8px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
.sy-mid { position: relative; height: 44px; display: grid; place-items: center; }
.sy-mid .vs { font: italic 900 26px/1 system-ui; color: rgba(255,255,255,.14); letter-spacing: .1em; }
.sy-call { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.7); opacity: 0; max-width: 96%; padding: 7px 16px; border-radius: 999px; font: 900 15px/1.2 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-shadow: 0 1px 0 #000; pointer-events: none; transition: opacity .12s, transform .12s; }
.sy-call.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sy-call.s0 { background: linear-gradient(90deg, #1f5a9a, #3f8fd8, #1f5a9a); box-shadow: 0 0 0 2px var(--c-amber-hi), 0 0 18px rgba(63,143,216,.7); }
.sy-call.s1 { background: linear-gradient(90deg, #8a2a1a, #d0503a, #8a2a1a); box-shadow: 0 0 0 2px #ffb39a, 0 0 18px rgba(208,80,58,.7); }
.sy-bfoot { display: flex; justify-content: center; gap: 10px; padding-top: 6px; } .sy-bfoot .sy-btn { min-width: 112px; }
.sy-battle.over .sy-bfoot { visibility: hidden; }
.sy-result { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(4,6,5,.78); animation: syIn .25s ease-out; }
.sy-result.hidden { display: none; }
.sy-rcard { width: min(340px, 100%); display: grid; justify-items: center; gap: 8px; padding: 18px 14px 14px; border-radius: 20px; text-align: center; background: linear-gradient(#2a2a1c, #151a14); border: 2px solid var(--pn-gold); box-shadow: 0 0 40px rgba(240,180,60,.35); }
.sy-result.lose .sy-rcard { background: linear-gradient(#2c1c18, #151211); border-color: #d0503a; box-shadow: 0 0 40px rgba(208,80,58,.3); }
.sy-rcard h2 { margin: 0; font: 900 34px/1 system-ui; letter-spacing: .06em; color: #ffd84a; text-shadow: 0 3px 0 var(--c-amber-deep), 0 0 22px rgba(255,216,74,.6); }
.sy-result.lose h2 { color: #ff6a5a; text-shadow: 0 3px 0 #5a1a10, 0 0 22px rgba(255,106,90,.45); }
.sy-bigstars { display: flex; gap: 6px; } .sy-bigstars i { font: normal 50px/1 system-ui; color: #39413c; }
.sy-bigstars i.on { color: #ffd23a; text-shadow: 0 0 14px rgba(255,210,58,.8), 0 3px 0 #9a6a10; animation: syStar .45s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes syStar { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.sy-objs { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; justify-items: start; font-size: 13.5px; color: #aab4a8; }
.sy-objs li { display: flex; gap: 7px; } .sy-objs i { font-style: normal; font-weight: 900; color: #ff7a66; } .sy-objs li.ok { color: #fff; } .sy-objs li.ok i { color: var(--c-good-hi); }
.sy-got { display: grid; gap: 6px; justify-items: center; width: 100%; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.3); } .sy-got small { font: 900 10.5px/1 system-ui; letter-spacing: .1em; color: var(--pn-gold); }
.sy-tip { margin: 0; font-size: 13.5px; line-height: 1.4; color: #e0d0c8; } .sy-chdone { font: 800 13.5px/1.3 system-ui; color: var(--c-amber-hi); }
.sy-rbtns { display: flex; gap: 8px; width: 100%; margin-top: 4px; } .sy-rbtns .sy-btn { flex: 1; min-height: 46px; padding: 6px 4px; }

/* Supply Sort */
.sy-mgbody { flex: 1; display: flex; flex-direction: column; gap: 8px; max-width: 460px; width: 100%; margin: 0 auto; }
.sy-mghead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--pn-wood); border: 1px solid var(--pn-gold2); }
.sy-mghead .tt { display: grid; min-width: 0; } .sy-mghead b { font: 900 17px/1.2 system-ui; color: var(--pn-gold); } .sy-mghead small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-x { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid #5a3f20; color: var(--pn-gold); font-size: 18px; }
.sy-mgrule { margin: 0; font-size: 12.5px; line-height: 1.35; color: #c6cec6; text-align: center; }
.sy-meter .bar { position: relative; height: 14px; margin: 0 6px; border-radius: 7px; background: #0e1114; box-shadow: inset 0 0 0 1px #3a434b; }
.sy-meter .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(90deg, var(--c-amber-lo), var(--c-amber-hi)); transition: width .25s; }
.sy-meter .bar i.ghost { background: rgba(143,227,90,.45); }
.sy-meter .mk { position: absolute; top: -3px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: #59636d; } .sy-meter .mk.ok { background: #fff; box-shadow: 0 0 6px var(--c-amber-hi); }
.sy-meter .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; }
.sy-meter .tier { display: flex; justify-content: center; align-items: baseline; gap: 5px; padding: 3px 4px; border-radius: 9px; background: #1c2126; border: 1px solid #343c43; }
.sy-meter .tier b { font: 900 14px/1.2 system-ui; color: #aab4bd; } .sy-meter .tier small { font-size: 10.5px; color: var(--muted); }
.sy-meter .tier.ok { background: #1c3319; border-color: var(--c-good-hi); } .sy-meter .tier.ok b { color: #b6f08f; }
.sy-mgstat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.sy-mgstat small { display: block; font: 800 9.5px/1.2 system-ui; letter-spacing: .08em; color: var(--muted); } .sy-mgstat b { font: 900 22px/1.1 system-ui; color: #fff; } .sy-mgstat b.ok { color: var(--c-good-hi); }
.sy-mgstat .loads span { display: flex; gap: 1px; justify-content: center; } .sy-mgstat .loads i { font-style: normal; font-size: 17px; filter: grayscale(1) brightness(.45); } .sy-mgstat .loads i.on { filter: none; }
.sy-board { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; aspect-ratio: 6 / 7; width: min(100%, calc((100dvh - 400px) * 6 / 7)); min-width: 220px; margin: 0 auto; padding: 6px; border-radius: 14px;
  background: linear-gradient(#20241c, #12150f); border: 2px solid #4a4632; box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.sy-col { display: flex; flex-direction: column-reverse; gap: 4px; min-height: 0; min-width: 0; }
.sy-crate { flex: 0 0 calc((100% - 24px) / 7); min-height: 0; padding: 0; border-radius: 8px; display: grid; place-items: center; font-size: clamp(16px, 5.4vw, 26px); line-height: 1; border: 0; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.22), inset 0 -4px 0 rgba(0,0,0,.28); transition: transform .12s, filter .12s; }
.sy-crate.t0 { background: linear-gradient(135deg, #7fae48, #4f7a2a); } .sy-crate.t1 { background: linear-gradient(135deg, #b98447, #7a5226); }
.sy-crate.t2 { background: linear-gradient(135deg, #97a1b3, #5c6676); } .sy-crate.t3 { background: linear-gradient(135deg, #45a9c4, #236a82); }
.sy-crate.sel { transform: scale(1.06); filter: brightness(1.3); box-shadow: 0 0 0 3px #fff, 0 0 12px var(--c-amber-hi); z-index: 1; }
.sy-crate.pop { animation: syPop .19s ease-in forwards; } @keyframes syPop { to { transform: scale(.1) rotate(25deg); opacity: 0; } }
.sy-board.busy { pointer-events: none; }
.sy-mghint { min-height: 36px; display: grid; align-content: center; text-align: center; font: 700 13px/1.3 system-ui; color: var(--muted); } .sy-mghint.go { color: #b6f08f; } .sy-mghint.warn { color: #ffa45a; }
.sy-mgres { margin: auto 0; display: grid; justify-items: center; gap: 8px; padding: 22px 14px 14px; border-radius: 20px; text-align: center; background: linear-gradient(#2c1c18, #151211); border: 2px solid #6a5a4a; }
.sy-mgres.ok { background: linear-gradient(#2a2a1c, #151a14); border-color: var(--pn-gold); box-shadow: 0 0 40px rgba(240,180,60,.3); }
.sy-mgres .big { font-size: 60px; line-height: 1; } .sy-mgres h2 { margin: 0; font: 900 26px/1.1 system-ui; color: #ffd84a; } .sy-mgres:not(.ok) h2 { color: #e0d0c8; }
.sy-mgres .sc { font-size: 14px; color: #c6cec6; } .sy-mgres .buff { font: 900 30px/1 system-ui; color: var(--c-good-hi); text-shadow: 0 0 14px rgba(143,227,90,.5); } .sy-mgres:not(.ok) .buff { color: #8a948a; text-shadow: none; }
.sy-mgres p { margin: 0; font-size: 13.5px; line-height: 1.4; color: #c6cec6; }

/* short screens (phone landscape): heroes on the left, zombies on the right; the board beside its meters */
@media (max-height: 560px) {
  .sy-ov { padding-top: calc(4px + var(--safe-top)); padding-bottom: calc(4px + var(--safe-bottom)); }
  .sy-bhead { padding: 3px 10px; } .sy-btags { min-height: 0; margin-top: 3px; }
  .sy-bf { flex-direction: row; justify-content: center; align-items: center; gap: 8px; min-height: 0; }
  .sy-brow { flex-direction: column; gap: 4px; }
  .sy-brow.h.back { order: 1; } .sy-brow.h.front { order: 2; } .sy-mid { order: 3; width: 150px; } .sy-brow.e.front { order: 4; } .sy-brow.e.back { order: 5; }
  .sy-u { width: 118px; grid-template-columns: 40px 1fr; gap: 2px 5px; padding: 4px 5px; justify-items: stretch; align-items: center; }
  .sy-u .pic { grid-row: 1 / 3; width: 40px; height: 40px; } .sy-u .pic .sy-zed { font-size: 22px !important; } .sy-u > b { text-align: left; }
  .sy-u .fac { width: 14px; height: 14px; font-size: 8px; right: -4px; } .sy-u.dead::after { top: 4px; left: 25px; font-size: 30px; }
  .sy-u.act.s0 { animation-name: syActRight; } .sy-u.act.s1 { animation-name: syActLeft; }
  .sy-bfoot { padding-top: 2px; } .sy-bfoot .sy-btn { min-height: 34px; }
  .sy-result { padding: 6px; } .sy-rcard { width: min(560px, 100%); max-height: 100%; overflow-y: auto; gap: 4px; padding: 8px 12px; }
  .sy-rcard h2 { font-size: 24px; } .sy-bigstars i { font-size: 30px; } .sy-objs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 12.5px; }
  .sy-mgbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: min-content; align-content: center; gap: 5px 14px; max-width: 760px; }
  .sy-mgbody > * { grid-column: 1; } .sy-mgrule { font-size: 11.5px; }
  .sy-board { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: calc((100dvh - 30px) * 6 / 7); min-width: 0; }
  .sy-crate { font-size: clamp(13px, 5.2vh, 24px); }
  .sy-mgres { grid-column: 1 / -1; padding: 10px 14px; gap: 4px; } .sy-mgres .big { font-size: 36px; }
}
@keyframes syActRight { 40% { transform: translateX(14px) scale(1.07); box-shadow: 0 0 16px #6fb0f0; } } @keyframes syActLeft { 40% { transform: translateX(-14px) scale(1.07); box-shadow: 0 0 16px #f08a6a; } }