@font-face{font-family:'Jersey 10';src:url(fonts/jersey10.woff2) format('woff2');font-display:block}
:root{
  --bg:#090b10; --panel:#10131a; --panel2:#151924; --line:#1e2330; --line2:#2a3142;
  --tx:#e7e9ef; --mut:#8a91a3; --dim:#5d6476;
  --buy:#2fd27a; --sell:#ff4d5e; --gold:#f5c451; --ally:#4ea1ff; --enemy:#9b8cff;
  --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --disp:'Jersey 10',var(--sans);
  --cur: url(assets/ui/cursor_01.png) 6 4, default;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:13px;overflow:hidden;cursor:var(--cur)}
button{font-family:var(--sans);cursor:url(assets/ui/cursor_02.png) 10 4, pointer}
.mono{font-family:var(--mono)}
.hidden{display:none !important}
.gold{color:var(--gold)} .g{color:var(--buy)} .rd{color:var(--sell)}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pop{0%{transform:scale(1.12);color:#fff}100%{transform:scale(1)}}
@keyframes rowin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.float{animation:float 3.6s ease-in-out infinite}
.pop{animation:pop .35s ease-out}

/* ---------- header ---------- */
#top{height:64px;display:flex;align-items:center;gap:18px;padding:0 16px;border-bottom:1px solid var(--line);background:linear-gradient(#0d1016,#0a0c11)}
.brand .ribbon{display:inline-flex;align-items:center;border-style:solid;border-width:0 34px;border-image:url(assets/ui/ribbon_blue.png) 0 97 0 98 fill stretch;height:46px;padding:0 4px;
  font-family:var(--disp);font-size:30px;letter-spacing:2px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);animation:bob 4s ease-in-out infinite}
.brand .ribbon span{transform:translateY(-4px)}
.roundbox{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:84px}
.roundbox .lbl{font-size:10px;letter-spacing:.12em;color:var(--mut)} .roundbox .lbl b{color:var(--tx)}
#timer{font-size:20px;font-weight:600}
.castles{flex:1;display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto}
.cb{flex:1}
.cbh{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--mut);margin-bottom:4px}
.cb.ally .cbh span:first-child{color:var(--ally)} .cb.enemy .cbh span:last-child{color:var(--enemy)}
.bar{height:8px;border-radius:4px;background:#1a1f2b;overflow:hidden}
.bar i{display:block;height:100%;width:100%;transition:width .4s}
.ally .bar i{background:linear-gradient(90deg,#2b6fd6,#4ea1ff)}
.enemy .bar i{background:linear-gradient(90deg,#7a6be0,#b4a8ff);margin-left:auto}
.cb .sub{display:flex;gap:4px;margin-top:4px} .enemy .sub{justify-content:flex-end}
.sub i{display:block;width:28px;height:3px;border-radius:2px;background:#232938;position:relative;overflow:hidden}
.sub i::after{content:'';position:absolute;inset:0;width:var(--w,100%);background:var(--c,#4ea1ff)}
.vs{font-family:var(--disp);font-size:22px;color:var(--dim)}
.tools{display:flex;align-items:center;gap:8px}
.tag{font-family:var(--mono);font-size:10px;padding:3px 7px;border-radius:5px;border:1px solid var(--line2);color:var(--mut)}
.tag.live{color:var(--buy);border-color:rgba(47,210,122,.4)}
.ib{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);color:var(--tx);display:grid;place-items:center;padding:0}
.ib img{width:22px;height:22px}
.ib.off{opacity:.4}
.ib:hover{border-color:#3a4358}

/* ---------- layout ---------- */
#layout{display:grid;grid-template-columns:300px 1fr 300px;gap:12px;padding:12px;height:calc(100% - 64px)}
aside{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;scrollbar-width:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;min-height:0}
.panel.grow{flex:1}
.ph{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ph img{width:22px;height:22px}
.ph h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#cfd3dd}
.ph .dot{width:7px;height:7px;border-radius:50%;background:var(--buy);margin-left:auto;animation:pulse 1.6s infinite}
.ph .opt{margin-left:auto;font-size:10px;color:var(--dim)}
.hint{font-size:11px;color:var(--dim);line-height:1.45;margin-top:8px}

/* trades */
.thead{display:grid;grid-template-columns:1.2fr .7fr .8fr 1fr;gap:6px;font-size:10px;color:var(--dim);padding:0 6px 6px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.06em}
.r{text-align:right}
#trades{overflow:hidden;flex:1}
.tr{display:grid;grid-template-columns:1.2fr .7fr .8fr 1fr;gap:6px;align-items:center;padding:6px;border-bottom:1px solid rgba(30,35,48,.6);font-family:var(--mono);font-size:11.5px;animation:rowin .25s ease-out}
.tr .w{color:#c9cdd8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr .w a{color:inherit;text-decoration:none}
.tr .s{font-weight:600;font-size:10.5px;letter-spacing:.05em}
.tr.buy .s,.tr.buy .a{color:var(--buy)} .tr.sell .s,.tr.sell .a{color:var(--sell)}
.tr .a{text-align:right;font-weight:600}
.tr .sp{text-align:right;color:var(--mut);font-size:10.5px}
.tr.big{background:linear-gradient(90deg,rgba(245,196,81,.08),transparent)}
#log{display:flex;flex-direction:column;gap:5px;max-height:180px;overflow:hidden}
.lg{font-size:11.5px;color:var(--mut);animation:rowin .25s ease-out;line-height:1.35}
.lg b{color:var(--tx);font-weight:600} .lg .a{color:var(--ally)} .lg .e{color:var(--enemy)} .lg .gold{color:var(--gold)}

/* center */
#center{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
#stage{position:relative;flex:1;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#3d9c9a;box-shadow:0 0 0 4px rgba(255,255,255,.02),0 20px 60px rgba(0,0,0,.5)}
#stage:fullscreen{border-radius:0;border:0}
#game{position:absolute;inset:0}
#game canvas{display:block;cursor:var(--cur)}
#stage.hov #game canvas{cursor:url(assets/ui/cursor_02.png) 10 4, pointer}
#legend{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:10.5px;color:var(--dim)}
#legend b{font-weight:600} #legend .sep{color:#2b3140}
#camBtns{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.chip{border:1px solid rgba(255,255,255,.15);background:rgba(9,11,16,.7);backdrop-filter:blur(6px);color:var(--mut);font-size:11px;padding:5px 10px;border-radius:999px}
.chip.on{color:var(--tx);border-color:rgba(78,161,255,.6)}
#ctrlHint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(9,11,16,.7);backdrop-filter:blur(6px);padding:5px 12px;border-radius:999px;font-size:11px;color:var(--mut)}
#dead{position:absolute;inset:0;display:grid;place-items:center;background:rgba(120,0,10,.18);pointer-events:none;font-size:18px}

/* event notices: a small parchment scroll that unrolls onto the screen, with the pack's gold icon */
#banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:5;
  box-sizing:border-box;min-width:300px;max-width:min(560px,80%);border-style:solid;border-width:20px 25px 33px 30px;
  border-image:url(assets/ui/scroll9.png) 68 84 111 100 fill stretch;image-rendering:pixelated;
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:0 6px;
  transform-origin:50% 50%;animation:scrollUnroll .55s cubic-bezier(.2,1.25,.4,1) both}
@keyframes scrollUnroll{0%{opacity:0;transform:translate(-50%,-18px) scaleX(.08)}35%{opacity:1;transform:translate(-50%,0) scaleX(.12)}100%{transform:translate(-50%,0) scaleX(1)}}
#banner .bn-ic{grid-row:span 2;width:40px;height:40px;image-rendering:pixelated;animation:bnCoin 1.6s ease-in-out infinite}
@keyframes bnCoin{50%{transform:translateY(-3px) rotate(-6deg)}}
.bn-t{font-family:var(--disp);font-size:34px;line-height:.95;letter-spacing:1px;color:#2a1d14;text-align:left}
.bn-s{font-family:var(--disp);font-size:18px;line-height:1.05;color:#7a5b3a;text-align:left;margin-top:2px}
.bn-gold .bn-t{color:#8a5a00;text-shadow:0 1px 0 rgba(255,230,150,.6)}

/* hover card */
#card{position:absolute;pointer-events:none;width:210px;background:rgba(12,14,20,.88);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;z-index:5;animation:rowin .12s}
#card .n{font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center}
#card .tm{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;letter-spacing:.05em}
#card .tm.a{background:rgba(78,161,255,.15);color:var(--ally)} #card .tm.e{background:rgba(155,140,255,.15);color:var(--enemy)}
#card .c{color:var(--mut);font-size:11px;margin:2px 0 8px}
#card .hp{height:5px;border-radius:3px;background:#1d2230;overflow:hidden;margin-bottom:8px}
#card .hp i{display:block;height:100%;background:var(--buy)}
#card .g{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:11px;color:var(--mut)}
#card .g b{font-family:var(--mono);color:var(--tx);font-weight:600;float:right}

/* round end */
#roundEnd{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,7,10,.55);backdrop-filter:blur(3px)}
.re-card{width:min(460px,90%);background:rgba(14,17,24,.95);border:1px solid var(--line2);border-radius:16px;padding:22px 24px;text-align:center;animation:bannerIn2 .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes bannerIn2{from{opacity:0;transform:scale(.9)}}
.re-k{font-size:11px;letter-spacing:.14em;color:var(--mut)}
.re-t{font-family:var(--disp);font-size:46px;line-height:1.05;margin:4px 0 8px}
.re-bb{font-size:13px;color:var(--mut);margin-bottom:14px}
.re-bb .big{display:block;font-family:var(--mono);font-size:30px;font-weight:600;color:var(--gold);margin-bottom:2px}
.re-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.re-grid div{background:var(--panel2);border-radius:8px;padding:8px;font-size:11px;color:var(--mut)}
.re-grid b{display:block;font-family:var(--mono);color:var(--tx);font-size:14px}
.re-next{font-size:11px;color:var(--dim)}

/* right */
.bbmain{text-align:center;padding:6px 0 10px;border-bottom:1px solid var(--line)}
.bbmain .k{font-size:10px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.bbmain .v{font-size:30px;font-weight:600;line-height:1.2;display:inline-block}
.bbmain .unit{font-size:10px;color:var(--dim)}
.stats{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.stats div{display:flex;justify-content:space-between;color:var(--mut)} .stats b{color:var(--tx);font-weight:600;display:inline-block}
#bbLog{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.bbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mut);padding:5px 8px;border-radius:6px;background:var(--panel2)}
.bbl b{color:var(--gold)} .bbl a{color:var(--ally)}
#armies{display:grid;grid-template-columns:auto 1fr 1fr;gap:5px 10px;font-size:11.5px;align-items:center}
#armies .h{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
#armies .h.a{color:var(--ally)} #armies .h.e{color:var(--enemy)}
#armies .cl{color:var(--mut);display:flex;align-items:center;gap:6px}
#armies .cl i{width:20px;height:20px;background-size:auto 20px;background-repeat:no-repeat;display:inline-block}
#armies b{font-family:var(--mono);font-weight:600}
.heroes{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:8px}
.hero{border:1px solid var(--line2);background:var(--panel2);border-radius:8px;padding:2px 0 4px;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--mut);font-size:9.5px}
.hero .pv{width:48px;height:48px;background-repeat:no-repeat;animation:sprite var(--dur) steps(var(--n)) infinite}
@keyframes sprite{from{background-position:0 0}to{background-position:calc(var(--w) * -1) 0}}
.hero.sel{border-color:var(--ally);color:var(--tx);background:rgba(78,161,255,.08)}
.row{display:flex;gap:6px}
input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--tx);padding:8px 10px;font-family:var(--sans);outline:none}
input:focus{border-color:#3a4358}
.btn{border:0;border-radius:8px;padding:8px 14px;background:var(--ally);color:#06101f;font-weight:600}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--mut);margin-top:6px;width:100%}
.tt{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:4px}
.tt button{border:1px solid var(--line2);background:var(--panel2);color:var(--buy);font-family:var(--mono);font-size:10.5px;padding:6px 0;border-radius:6px}
.tt button[data-s=sell]{color:var(--sell)}
.tt button:hover{border-color:#3a4358}

@media (max-width:1180px){ #layout{grid-template-columns:250px 1fr 250px} }
@media (max-width:900px){ #layout{grid-template-columns:1fr;grid-template-rows:60vh auto auto;overflow:auto;height:auto} #center{order:-1} html,body{overflow:auto} }

.prog{margin-top:10px}
.pl{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--mut);margin-bottom:5px}
.pl b{color:var(--tx);font-size:12px} .pl-s{margin-left:auto;color:var(--dim);font-size:10px}
.pb{height:6px;border-radius:3px;background:#1a1f2b;overflow:hidden;flex:1}
.pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1f9d5c,var(--buy));transition:width .35s}
.pb i.ga{background:linear-gradient(90deg,#c9971f,var(--gold))} .pb i.ge{background:linear-gradient(90deg,#6a5cc4,#b4a8ff)}
.eco{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:6px}
.eco span{width:56px} .eco .a{color:var(--ally)} .eco .e{color:var(--enemy)}
.eco b{font-size:11px;color:var(--tx);width:28px;text-align:right}
.bbl{gap:8px} .bbl span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans)} .bbl b{color:var(--buy)} .bbl i{color:var(--dim);font-style:normal}
#bbPending.g{color:var(--buy)}
.heroes{grid-template-columns:repeat(4,1fr)}

/* ---------- main menu ---------- */
#menu{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(9,11,16,.55),rgba(9,11,16,.92));backdrop-filter:blur(6px);transition:opacity .5s}
#menu.out{opacity:0;pointer-events:none}
.menu-card{width:min(520px,92vw);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.ribbon.big{display:inline-flex;align-items:center;border-style:solid;border-width:0 70px;border-image:url(assets/ui/ribbon_blue.png) 0 97 0 98 fill stretch;height:104px;padding:0 6px;
  font-family:var(--disp);font-size:78px;letter-spacing:4px;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.35);animation:bob 4s ease-in-out infinite}
.ribbon.big span{transform:translateY(-8px)}
.tag1{margin:0;color:#cfd4df;font-size:15px;line-height:1.5}
.how3{display:flex;flex-direction:column;gap:6px;width:100%;margin:4px 0}
.how3 div{display:flex;gap:12px;align-items:center;background:rgba(16,19,26,.8);border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-align:left;font-size:12.5px;color:var(--mut)}
.how3 b{font-family:var(--mono);font-size:11px;width:38px}
.mbtn{width:100%;border:0;border-radius:10px;padding:13px 0;font-size:15px;font-weight:700;background:var(--ally);color:#06101f;box-shadow:0 8px 30px rgba(78,161,255,.25);transition:transform .1s}
.mbtn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.mbtn.ghost{background:rgba(16,19,26,.9);color:var(--tx);border:1px solid var(--line2);box-shadow:none;font-weight:600;font-size:13px;padding:10px 0}
.mrow{display:flex;gap:8px;width:100%}
.mfoot{font-size:10.5px;color:var(--dim);letter-spacing:.08em}

.links{display:flex;align-items:center;gap:10px}
.links .ib{color:var(--tx);text-decoration:none}
.mcap{display:flex;flex-direction:column;line-height:1.15;padding:0 6px;min-width:120px}
.mcap .lbl{font-size:9.5px;letter-spacing:.12em;color:var(--mut)}
.mcap b{font-size:18px;font-weight:600;display:inline-block}
.mcap .chg{font-size:11px;margin-left:6px;color:var(--mut)} .mcap .chg.up{color:var(--buy)} .mcap .chg.dn{color:var(--sell)}
.chartbox{display:flex;flex-direction:column;align-items:stretch;gap:3px}
.ca{display:flex;align-items:center;gap:5px;justify-content:center;background:transparent;border:0;color:var(--mut);font-size:10px;padding:0}
.ca:hover{color:var(--tx)} .ca.ok{color:var(--buy)}
.chartbtn{background:var(--buy);color:#04210f;font-weight:700;font-size:12px;border-radius:7px;padding:6px 14px;text-decoration:none;text-align:center}
.chartbtn:hover{filter:brightness(1.08)}
#roundChip{position:absolute;left:10px;top:10px;background:rgba(9,11,16,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);padding:4px 10px;border-radius:999px;font-size:11px;color:var(--mut);z-index:3}
#roundChip b,#roundChip span{color:var(--tx)}

aside .panel{flex-shrink:0}
aside .panel.grow{flex-shrink:1;min-height:220px}

.ph.center{justify-content:center}
.hint.top{margin:-4px 0 10px}

.vsbox{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:120px}
.vsbox .vs{line-height:.9}
.mom{position:relative;width:110px;height:5px;border-radius:3px;background:#1a1f2b;overflow:hidden}
.mom b{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:#3a4358}
.mom i{position:absolute;top:0;bottom:0;left:50%;width:0;transition:all .6s}
.mom i.up{background:var(--buy)} .mom i.dn{background:var(--sell)}
.momtxt{font-size:9.5px;color:var(--mut);white-space:nowrap}

/* hover: everything interactive or framed lights up */
.panel,.ib,.btn,.mbtn,.hero,.tt button,.chip,.chartbtn,.ca,input,.how3 div,.bbl,.tr,#card,.re-card,.mcap{transition:border-color .15s, box-shadow .15s, background-color .15s}
.panel:hover{border-color:#2f3a52;box-shadow:0 0 0 1px rgba(78,161,255,.18),0 0 24px rgba(78,161,255,.08)}
.ib:hover,.btn.ghost:hover,.mbtn.ghost:hover,.hero:hover,.tt button:hover,.chip:hover,input:hover,.how3 div:hover{border-color:rgba(120,180,255,.75);box-shadow:0 0 0 1px rgba(120,180,255,.35),0 0 14px rgba(78,161,255,.25)}
.btn:not(.ghost):hover,.mbtn:not(.ghost):hover,.chartbtn:hover{box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 20px rgba(78,161,255,.35)}
.chartbtn:hover{box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 20px rgba(47,210,122,.4)}
.tr:hover{background:rgba(78,161,255,.06);box-shadow:inset 0 0 0 1px rgba(120,180,255,.35);border-radius:6px}
.bbl:hover{box-shadow:inset 0 0 0 1px rgba(47,210,122,.45)}
.mcap{border:1px solid transparent;border-radius:8px;padding:2px 8px}
.mcap:hover{border-color:rgba(120,180,255,.5);box-shadow:0 0 12px rgba(78,161,255,.2)}

/* ---------- the pack's sword as a stretchable title bar (hilt | blade | tip) ---------- */
.sword{display:inline-flex;align-items:center;justify-content:center;box-sizing:content-box;border-style:solid;border-image:url(assets/ui/sword0.png) 0 92 0 105 fill stretch;
  image-rendering:pixelated;overflow:hidden;white-space:nowrap;color:#2a2633;font-family:var(--disp);letter-spacing:2px;transition:width .55s cubic-bezier(.2,1.35,.35,1)}
.sword span{display:block;transform:translateY(-3%);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.sword.small{height:44px;border-width:0 32px 0 36px;font-size:30px}
.sword.big{height:104px;border-width:0 75px 0 85px;font-size:74px}
.sword.huge{height:120px;border-width:0 86px 0 98px;font-size:70px}
.sword.flash{animation:swflash .5s ease-out}
#bigbb .sword.flash{animation:none}
@keyframes swflash{0%{filter:brightness(4) saturate(0)}35%{filter:brightness(2.2)}100%{filter:none}}
.brand .sword{animation:bob 4s ease-in-out infinite}
.menu-card .sword{animation:bob 4.5s ease-in-out infinite}
.mlink{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.mbtn.chartlike{background:var(--buy);color:#04210f;box-shadow:0 8px 30px rgba(47,210,122,.25);font-size:13px;padding:10px 0}
/* big buyback moment */
#bigbb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:6}
#bigbb .bb-flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,255,240,.55),rgba(255,255,240,0) 60%);opacity:0}
#bigbb.go .bb-flash{animation:bbflash 1s ease-out}
@keyframes bbflash{0%{opacity:1}100%{opacity:0}}
#bigbb .sword{}
#bigbb.go .sword{animation:bbin .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes bbin{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
#bigbb.out{transition:opacity .5s, transform .5s;opacity:0;transform:scale(1.06)}
.bb-sub{margin-top:10px;font-size:15px;color:#e9fff2;background:rgba(9,11,16,.7);border:1px solid rgba(47,210,122,.4);padding:5px 14px;border-radius:999px;box-shadow:0 0 22px rgba(47,210,122,.35)}

.how3 b.or{color:#ff9f43;width:auto;min-width:38px;white-space:nowrap}
.how3 b{flex-shrink:0}
.swordwrap{position:relative;display:inline-block}
.glint{position:absolute;right:2%;top:30%;width:34px;height:34px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,rgba(255,255,255,.85) 13% 18%,rgba(255,255,240,0) 60%),
             linear-gradient(90deg,transparent 46%,#fff 48% 52%,transparent 54%),linear-gradient(0deg,transparent 46%,#fff 48% 52%,transparent 54%);
  filter:drop-shadow(0 0 6px #fff)}
.glint.sm{width:20px;height:20px;top:22%} .glint.lg{width:48px;height:48px;top:28%}
.glint.on{animation:glint .9s ease-out}
@keyframes glint{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(120deg)}}
#bbSwordTxt{display:flex;flex-direction:column;align-items:center;line-height:1}
#bbTitle{font-style:normal;font-family:var(--disp);font-size:46px;line-height:.9;letter-spacing:2px;color:#2a1d14}
#bbAmt{font-family:var(--disp);font-size:32px;line-height:.9;color:#14a85c;letter-spacing:1px;margin-top:2px;text-shadow:0 2px 0 #0b3d22,0 0 10px rgba(47,210,122,.55)}
.tt.dev button{color:#ff9f43;font-size:9.5px}

/* intro: only the sheathed sword + "click to continue", then the rest fades in */
#menu.intro{cursor:pointer}
.clickhint{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#cfd4df;animation:hintpulse 1.8s ease-in-out infinite;margin-top:6px}
@keyframes hintpulse{0%,100%{opacity:.25}50%{opacity:.9}}
#menu:not(.intro) .clickhint{display:none}
.menu-card > *:not(.swordwrap):not(.clickhint){opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease;pointer-events:none}
#menu.open .menu-card > *{opacity:1;transform:none;pointer-events:auto}
#menu.open .menu-card > .tag1{transition-delay:.55s} #menu.open .menu-card > .how3{transition-delay:.75s}
#menu.open .menu-card > #mPlay{transition-delay:.95s} #menu.open .menu-card > .mrow{transition-delay:1.1s} #menu.open .menu-card > .mfoot{transition-delay:1.25s}
#menu.intro .menu-card .sword{animation:none}

/* castle plundered: the pack's scroll unrolls */
#scrollbb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:7}
#scrollbb .bb-flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,240,200,.6),rgba(255,240,200,0) 60%);opacity:0}
#scrollbb.go .bb-flash{animation:bbflash 1.1s ease-out}
.scroll9{box-sizing:border-box;width:min(560px,86%);border-style:solid;border-width:40px 50px 66px 60px;border-image:url(assets/ui/scroll9.png) 68 84 111 100 fill stretch;image-rendering:pixelated;
  overflow:hidden;height:106px;transition:height .9s cubic-bezier(.2,1.1,.3,1);transform-origin:top center}
#scrollbb.go .scroll9{animation:scrollin .35s ease-out}
@keyframes scrollin{from{transform:translateY(-30px) scale(.9);opacity:0}}
.scroll9.open{height:300px}
.sc-in{text-align:center;color:#3b2a1e;padding-top:4px}
.sc-k{font-family:var(--mono);font-size:12px;letter-spacing:.25em;color:#7a5b3a}
.sc-t{font-family:var(--disp);font-size:52px;line-height:1;margin:6px 0 12px;color:#2a1d14}
.sc-amt{font-family:var(--disp);font-size:38px;color:#14a85c;letter-spacing:1px;text-shadow:0 2px 0 #0b3d22,0 0 12px rgba(47,210,122,.5)}
#scrollbb.out{transition:opacity .5s;opacity:0}

/* Join the fight: the call to arms, big and glowing */
#heroPanel{padding:16px 14px 14px;border-color:rgba(160,200,255,.28);box-shadow:0 0 0 1px rgba(120,170,255,.08),0 0 28px rgba(78,161,255,.12)}
#heroPanel .ph h3{font-family:var(--disp);font-size:30px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.75),0 0 22px rgba(140,190,255,.6);animation:callGlow 2.6s ease-in-out infinite}
@keyframes callGlow{50%{text-shadow:0 0 12px rgba(255,255,255,.95),0 0 32px rgba(140,190,255,.85)}}
#heroPanel .ph img{width:26px;height:26px}
#heroPanel .hint.top{font-size:12.5px;color:#c9d2e3;line-height:1.45}
#heroPanel .heroes{grid-template-columns:repeat(4,1fr);gap:6px}
#heroPanel .hero{font-size:11px;padding:6px 0 7px}
#heroPanel #join{font-size:14px;font-weight:700;padding:10px 16px}

#trades .sp .ea{display:block;font-style:normal;font-size:9.5px;color:#7fd8a5;opacity:.85}
/* the buyback sword settles onto the screen */
#bigbb.go .swordwrap{animation:swLand .5s cubic-bezier(.2,1.25,.4,1) both}
@keyframes swLand{0%{opacity:0;transform:translateY(-22px) scale(.97)}60%{opacity:1;transform:translateY(3px) scale(1.005)}100%{transform:none}}

#speedBtn{margin-top:6px;width:100%}

/* economy panel */
#armies{display:block !important}
#armies .ec{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
#armies .ec img{width:30px;height:30px;image-rendering:pixelated}
#armies .ec-t{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tx);font-weight:600}
#armies .ec-t b{color:var(--gold)}
#armies .pb{height:6px;margin:5px 0 4px;background:var(--line);border-radius:4px;overflow:hidden}
#armies .pb i{display:block;height:100%;background:linear-gradient(90deg,#c9932b,#f5c451);transition:width .4s}
#armies .ec-s{font-size:10.5px;color:var(--mut);line-height:1.3}
#armies .ec-f{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mut);padding-top:8px}
#armies .ec-f b{color:var(--tx)}
#armies .ec-last{font-size:11px;color:#9be3b8;padding-top:5px}

#fakeWallet{margin-top:6px;width:100%}
#selbox{position:absolute;border:1px solid #7cf7ff;background:rgba(124,247,255,.12);pointer-events:none;z-index:4}
#selChip{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(9,11,16,.78);border:1px solid rgba(124,247,255,.4);color:#cfefff;font-size:12px;padding:6px 12px;border-radius:999px;pointer-events:none;z-index:4}
#selChip b{color:#7cf7ff}
#wstatus .stars{color:var(--gold);letter-spacing:1px}

/* control keycaps shown for a moment when you take the field */
#keycaps{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:5;opacity:.55;transition:opacity .6s}
#keycaps.out{opacity:0}
#keycaps .kc-row{display:flex;align-items:center;gap:8px}
#keycaps .kc{min-width:44px;height:44px;padding:0 10px;box-sizing:border-box;display:grid;place-items:center;font-family:var(--disp);font-size:24px;color:#fff;background:linear-gradient(#2b3242,#171b25);border:1px solid rgba(255,255,255,.35);border-bottom-width:4px;border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
#keycaps .kc.shift{min-width:84px;font-size:20px}
#keycaps .kc.mouse{width:34px;min-width:34px;height:48px;border-radius:17px 17px 15px 15px;position:relative;padding:0}
#keycaps .kc.mouse::before{content:'';position:absolute;top:0;width:50%;height:46%;background:rgba(124,247,255,.65);border-radius:16px 0 0 0;left:0}
#keycaps .kc.mouse.r::before{left:auto;right:0;border-radius:0 16px 0 0}
#keycaps em{font-style:normal;font-family:var(--disp);font-size:22px;color:#fff;margin:0 10px 0 2px;text-shadow:0 2px 6px rgba(0,0,0,.6)}

#fakeSupply{margin-top:6px;width:100%}
#fakeSupply:disabled{opacity:.4}

#volSlider{width:86px;accent-color:#f5c451;cursor:pointer;margin:0 4px}
/* economy title centred */
#armies{}
.panel:has(#armies) .ph{justify-content:center}
.panel:has(#armies) .ph img.float{display:none}
/* locked hero */
.hero.locked{position:relative;opacity:.55;cursor:not-allowed}
.hero.locked .pv{filter:grayscale(1) brightness(.7)}
.hero .lock{position:absolute;top:4px;right:6px;font-style:normal;font-size:13px}
.hero .tip{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:200px;padding:8px 10px;background:#0b0e14;border:1px solid rgba(245,196,81,.45);border-radius:8px;color:#e9e2c8;font-size:11px;line-height:1.35;z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.5);white-space:normal}
.hero.locked:hover{opacity:.8}
.hero.locked:hover .tip{display:block}
.hero.locked .tip{left:auto;right:-4px;transform:none}
aside#right{overflow-x:hidden}
.hero.locked .tip{width:180px}
#heroPanel .heroes{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:5px}
#heroPanel .hero{min-width:0}
#heroPanel .hero span{font-size:10px;white-space:nowrap}

/* Command the fight (under Join the fight) */
#heroPanel .cmdsec{margin-top:14px;padding-top:14px;border-top:1px solid rgba(160,200,255,.18)}
#heroPanel .ph.cmd h3{font-family:var(--disp);font-size:26px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.7),0 0 20px rgba(245,196,81,.55)}
#heroPanel .ph.cmd img{width:24px;height:24px;image-rendering:pixelated}
#heroPanel .cmdsec b{color:#f5c451;font-weight:600}
#heroPanel #wallet{margin-top:8px}
/* compact economy */
#armies .ec{padding:4px 0;gap:8px;grid-template-columns:22px 1fr}
#armies .ec img{width:22px;height:22px}
#armies .ec-t{font-size:11.5px}
#armies .pb{height:4px;margin:3px 0 2px}
#armies .ec-s{font-size:9.5px}
#armies .ec-f{padding-top:5px;font-size:9.5px}
.panel:has(#armies){padding:8px 12px}
.panel:has(#armies) .ph{margin-bottom:2px}

#heroPanel .rankbox{display:flex;align-items:center;gap:10px;margin-top:8px;padding:6px 10px;border:1px solid rgba(245,196,81,.25);border-radius:8px;background:rgba(245,196,81,.05)}
#rankStars span{font-size:20px;color:rgba(245,196,81,.45);margin-right:2px}
#rankStars span.on{color:#f5c451;text-shadow:0 0 8px rgba(245,196,81,.7)}
#rankName{font-size:11px;color:#d9cfae}

/* ===================== phone ===================== */
#tpad{position:absolute;inset:auto 0 0 0;height:190px;pointer-events:none;z-index:6}
#joy{position:absolute;left:18px;bottom:22px;width:132px;height:132px;border-radius:50%;background:rgba(10,12,18,.35);border:2px solid rgba(255,255,255,.18);pointer-events:auto;touch-action:none}
#joyK{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.45)}
#tbtns{position:absolute;right:16px;bottom:20px;width:170px;height:150px;pointer-events:none}
#tbtns button{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(10,12,18,.45);color:#fff;font-size:24px;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}
#tbtns button.on{background:rgba(245,196,81,.55);border-color:#f5c451}
#tAtk{right:0;bottom:0;width:84px;height:84px}
#tBlk{right:96px;bottom:0;width:62px;height:62px;font-size:20px}
#tDash{right:8px;bottom:96px;width:58px;height:58px;font-size:18px}
body.touch #keycaps, body.touch #ctrlHint{display:none !important}
@media (max-width:760px){
  html,body{overflow:auto;height:auto}
  #top{height:auto;flex-wrap:wrap;gap:6px 10px;padding:8px 10px}
  .brand .swordwrap{zoom:.8}
  .links{gap:6px} .links .mcap .lbl{display:none} .chartbox .ca{display:none}
  .tools{margin-left:auto} #volSlider{display:none} #modeTag{display:none}
  .castles{order:5;flex:1 1 100%;max-width:none;gap:8px}
  .castles .sub{display:none}
  #layout{display:flex;flex-direction:column;height:auto;padding:8px;gap:8px}
  #center{order:-2}
  #stage{flex:none;height:62svh;min-height:330px;border-radius:10px}
  #legend{font-size:9.5px}
  #right{order:-1;display:flex;flex-direction:column;gap:8px}
  #left{order:0}
  #left .panel.grow{max-height:46svh}
  .panel{padding:10px}
  #heroPanel .heroes{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  #roundChip{font-size:11px;padding:4px 8px}
  #card{zoom:.85;left:8px !important;top:52px !important;right:auto !important;bottom:auto !important}
  .menu-card{gap:10px} .menu-card .tag1{font-size:13px} .how3{font-size:12px}
  #bigbb .swordwrap{zoom:.55} #scrollbb .scroll9{zoom:.6}
  #banner{zoom:.8;min-width:0;max-width:94%}
}
#stage:has(#tpad:not(.hidden)) #camBtns{display:none}
/* hero picker: hovering a hero blows him up inside his box so you can see him properly */
.hero{position:relative}
.hero .pv{transition:transform .18s ease-out;image-rendering:pixelated;transform-origin:50% 60%}
.hero:not(.locked):hover .pv{transform:scale(1.75)}
.hero:not(.locked):hover{background:rgba(78,161,255,.12)}


/* economy bars glide as resources come in, with a moving sheen; a full bar flashes when it pays out */
#armies .pb i{transition:width .9s cubic-bezier(.22,.9,.3,1);position:relative;overflow:hidden}
#armies .pb i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:ecSheen 2.2s ease-in-out infinite}
@keyframes ecSheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
#armies .ec.ec-pop img{animation:ecPop .6s ease-out}
#armies .ec.ec-pop .pb{animation:ecFlash .7s ease-out}
@keyframes ecPop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes ecFlash{0%{box-shadow:0 0 0 0 rgba(245,196,81,.9)}100%{box-shadow:0 0 0 8px rgba(245,196,81,0)}}

/* game name: P (Kingdom blue) V (gold, the clash) E (green) */
.sword .pve{letter-spacing:.06em}
.sword .pve b{font-weight:inherit;-webkit-text-stroke:1px rgba(20,22,30,.55);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.sword .pve .p{color:#2f7de1} .sword .pve .v{color:#d9a21b} .sword .pve .e{color:#1fae5b}

/* troops in reserve, beside each side's bar */
.castles .res{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;white-space:nowrap;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);opacity:.45;transition:opacity .3s,border-color .3s}
.castles .res b{font-size:15px;line-height:1.1} .castles .res span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.castles .res.ally b{color:var(--ally)} .castles .res.enemy b{color:var(--enemy)}
.castles .res.on{opacity:1} .castles .res.ally.on{border-color:rgba(78,161,255,.5)} .castles .res.enemy.on{border-color:rgba(180,168,255,.5)}
@media (max-width:760px){ .castles .res{min-width:40px;padding:2px 5px} .castles .res span{display:none} }

/* follow a live coin (admin) */
#admKey,#fwMint{width:100%;box-sizing:border-box;margin:6px 0;background:#0d1016;border:1px solid var(--line2);color:var(--tx);border-radius:8px;padding:7px 8px;font:12px var(--mono)}
#admin .fw{display:flex;gap:6px;margin-bottom:4px} #admin .fw .btn{flex:1;min-width:0}