:root{
  --bg:#090b0d;--panel:rgba(18,21,25,.76);--panel2:rgba(26,30,35,.72);--line:rgba(255,255,255,.12);
  --text:#f2f2f0;--muted:#9ba2ab;--red:#ff4968;--black:#e7e7e5;--gold:#d2b36d;--danger:#8b2837;
  --card-w:64px;--card-h:90px;--battle-card-w:96px;--battle-card-h:135px;--card-gap:7px;--radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
html{background:#07090b}
body{min-height:100vh;overflow-x:hidden;background:
  linear-gradient(rgba(5,7,9,.56),rgba(5,7,9,.56)),
  url("assets/ui/background-texture.jpg") center/cover fixed no-repeat;
}
button,select{font:inherit}.app{width:min(100%,1500px);margin:0 auto;padding:10px 14px 14px}
.premium-panel,.panel{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 35px rgba(0,0,0,.18)}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(10,12,15,.55)}
.brandlockup{display:flex;align-items:center;gap:10px;min-width:0}.brandlogo{width:54px;height:54px;border-radius:8px;object-fit:cover;object-position:center;border:1px solid rgba(255,255,255,.14);box-shadow:0 3px 14px #0009}.title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:.13em;line-height:.95}.subtitle{color:#b7a07b;font-family:Georgia,'Times New Roman',serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}.scoreboard{display:flex;align-items:center;gap:8px;font-weight:900;font-size:clamp(17px,1.9vw,22px);white-space:nowrap}.scorepill{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(7,9,11,.62)}.scorepill.red{color:#ff8ea2}.scorepill.black{color:#f3f3f0}.battlewins{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:.58em;font-weight:800;letter-spacing:.08em;color:#d8c89b;text-transform:uppercase}.sep{color:#707780}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px;margin-bottom:8px;min-width:0}.topbar{display:grid;grid-template-columns:minmax(460px,.9fr) minmax(420px,1.1fr);gap:10px;align-items:stretch}.topbar-left{display:flex;flex-direction:column;gap:7px}.compact-controls{margin:0}.statusgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.stat{background:rgba(12,15,18,.48);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 8px;min-width:0}.stat b{display:block;font-size:9px;color:var(--muted);font-weight:700;margin-bottom:1px;letter-spacing:.08em}.stat span{display:block;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis}.instruction{margin:0;padding:9px 11px;border:1px solid rgba(210,179,109,.28);border-left:3px solid var(--gold);background:rgba(11,13,16,.48);border-radius:8px;min-height:100%;display:flex;align-items:center;line-height:1.28;font-size:13px}
.handhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:5px}.handname{font-size:12px;font-weight:900;letter-spacing:.12em;color:#e5e2db}.small{font-size:11px;color:var(--muted)}.cards{display:flex;flex-wrap:wrap;gap:var(--card-gap)}
.hand-and-wild{display:flex;gap:12px;align-items:flex-start}.handcards{flex:1;min-width:0}.wild-dock{width:190px;flex:0 0 190px;border-left:1px solid rgba(255,255,255,.09);padding-left:10px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"label label" "cards button";gap:5px 7px;align-items:center}.wildlabel{grid-area:label;font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:800}.wildcards{grid-area:cards;flex-wrap:nowrap}.compact-wild-btn{grid-area:button;font-size:10px;padding:6px 7px;min-height:32px}
.card{width:var(--card-w);height:var(--card-h);flex:0 0 var(--card-w);border-radius:9px;background:#f3efe5;color:#15171a;border:2px solid #c5c0b7;box-shadow:0 4px 13px #0008;position:relative;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;cursor:pointer;user-select:none;transition:.12s transform,.12s outline,.12s opacity,.12s box-shadow}.card.red{color:#a41f29}.card:hover{transform:translateY(-2px)}.card.selected{outline:4px solid var(--gold);transform:translateY(-5px);box-shadow:0 0 0 2px #111,0 0 18px #d2b36d77}.card.keyboard-selected{animation:selectionPulse 1.25s ease-in-out infinite alternate}.card.dim{opacity:.42}.corner{position:absolute;top:4px;left:5px;font-size:12px;line-height:1}.sk{position:absolute;right:4px;bottom:4px;font-size:9px;color:#666}
@keyframes selectionPulse{from{box-shadow:0 0 0 2px #111,0 0 10px #d2b36d55}to{box-shadow:0 0 0 2px #111,0 0 20px #d2b36daa}}
.battle{overflow:hidden;padding:7px 8px 6px;background-color:rgba(12,15,18,.66);background-position:center;background-size:cover;background-repeat:no-repeat;border-color:rgba(234,225,198,.18);transition:background-image .2s ease}.linewrap{width:100%;min-width:0}.lineLabel{font-size:9px;color:#f1e2bb;font-weight:900;letter-spacing:.14em;margin:0 0 3px;text-shadow:0 1px 2px rgba(0,0,0,.8)}.battleline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-height:calc(var(--battle-card-h) + 12px);background:rgba(14,12,9,.34);border:1px solid rgba(245,231,194,.15);border-radius:10px;padding:5px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.battleline .card{width:var(--battle-card-w);height:var(--battle-card-h);flex-basis:var(--battle-card-w);border-radius:10px}.half{display:flex;gap:clamp(2px,.42vw,6px);align-items:center;min-width:0;min-height:var(--battle-card-h)}.half.left{justify-content:flex-end}.half.right{justify-content:flex-start}.half .card{flex-shrink:1;min-width:0}.centre{width:calc(var(--battle-card-w) + 14px);flex:0 0 calc(var(--battle-card-w) + 14px);display:flex;justify-content:center;align-items:center;position:relative}.centre::before{content:"";position:absolute;top:-5px;bottom:-5px;left:50%;width:1px;background:rgba(255,255,255,.11)}.centre .card{z-index:1;flex-shrink:0}.frontline{height:24px;display:flex;align-items:center;justify-content:center;color:#f2ead4;font-size:9px;font-weight:800;letter-spacing:.14em;position:relative;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.75)}.frontline::before,.frontline::after{content:"";height:1px;background:rgba(245,231,194,.32);flex:1;margin:0 10px}.spearwall-label{margin:0 24px;color:#ffe3a0}.runrow{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}.runbadge{display:inline-flex;gap:5px;align-items:center;padding:3px 6px;border-radius:999px;background:rgba(18,22,27,.62);border:1px solid rgba(255,255,255,.08);font-size:9px;color:#cfd4db}.runbadge strong{color:#fff}.runbadge.hot{border-color:rgba(210,179,109,.45);background:rgba(61,48,23,.55);color:#ead8aa}
.controls{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.btn{background:rgba(35,40,47,.78);border:1px solid rgba(255,255,255,.15);color:#eef1f4;padding:8px 11px;border-radius:8px;cursor:pointer;min-height:36px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.btn:hover{background:rgba(48,55,64,.88)}.btn.primary{background:rgba(84,69,30,.75);border-color:rgba(210,179,109,.42)}.btn.danger{background:rgba(92,34,45,.68);border-color:rgba(185,83,99,.36)}.btn:disabled{opacity:.32;cursor:not-allowed}.btn.keyboard-focus:not(:disabled){outline:3px solid var(--gold);outline-offset:2px;box-shadow:0 0 14px #d2b36d55}.spacer{flex:1}.keyboardhelp{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.07)}.keyboardhelp b{color:#d8dde4}
.modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modal.hidden{display:none!important}.modalbox{width:min(620px,96vw);max-height:92vh;overflow:auto;background:rgba(20,24,29,.96);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:18px;box-shadow:0 20px 80px #000}.modalbox h2{margin:0 0 8px}.modalbox p{color:#c7ccd3}.targethint{padding:8px 10px;border-radius:8px;background:#2c2416;border:1px solid #5b4a29;color:#e8d39a;font-size:13px;margin-top:9px}.targetable{outline:4px solid #bc9851!important;cursor:crosshair!important}.reveal{font-size:14px;font-weight:800;margin:10px 0}.footer{font-size:9px;color:rgba(190,195,200,.45);text-align:center;padding:1px 0 3px;letter-spacing:.08em}.modebar{align-items:center}.modebar label{display:flex;align-items:center;gap:6px}.modebar select{background:rgba(9,11,13,.7);color:#eee;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:4px 7px}
.card.back{background:repeating-linear-gradient(45deg,#222,#222 6px,#333 6px,#333 12px);color:#777;border-color:#555;cursor:default}.aiThinking{opacity:.72}
.good{color:#a9cf9e}.warn{color:#e2c083}.error{color:#ef9aa0}

/* Spearwall v0.9.3 card system */
.card.themed-card,.card.art-back{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;border:1px solid rgba(255,255,255,.18);border-radius:7px;color:#fff}
.card.custom-art{background-color:#111}
.card.generic-art{background-color:#15171a;background-image:radial-gradient(circle at 50% 22%,rgba(255,255,255,.13),transparent 32%),linear-gradient(180deg,#23262a,#0b0d10 74%)}
.card.generic-art.red{background-image:radial-gradient(circle at 50% 20%,rgba(255,76,104,.22),transparent 34%),linear-gradient(180deg,#5c1020,#170409 78%)}
.card.art-back,.card.back.art-back,.card.wildcard.art-back,.card.cover-card.art-back{background:#5e1024 url('assets/cards/Back.png?v=093') center/cover no-repeat;color:#fff}
.attack-arrow{position:absolute;top:5%;width:16%;font-family:Georgia,'Times New Roman',serif;font-weight:900;font-size:calc(var(--card-w) * .40);line-height:1;color:#f0f0ed;text-shadow:0 1px 3px #000;z-index:3;opacity:.98}
.battleline .attack-arrow{font-size:calc(var(--battle-card-w) * .40)}
.arrow-left{left:4%}.arrow-right{right:4%}
.card.red .attack-arrow{color:#e52243}
.central-pip{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:62%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;z-index:3}
.central-pip::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:calc(var(--card-w) * .88);line-height:1;color:#d9d9d5;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.battleline .central-pip::before{font-size:calc(var(--battle-card-w) * .88)}
.suit-spades .central-pip::before{content:'♠'}.suit-clubs .central-pip::before{content:'♣'}.suit-diamonds .central-pip::before{content:'♦'}.suit-hearts .central-pip::before{content:'♥'}
.card.red .central-pip::before{color:#d31738}
.rank-in-pip{position:relative;z-index:4;font-family:'Kalam',Georgia,serif;font-size:calc(var(--card-w) * .32);font-weight:500;line-height:1;color:#101113}
.battleline .rank-in-pip{font-size:calc(var(--battle-card-w) * .36)}
.card.red .rank-in-pip{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.card .sk{position:absolute;z-index:6;right:3px;bottom:3px;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.68);color:#fff;font:700 8px/1.25 'Kalam',sans-serif}
.battleline .card .sk{font-size:9px}
.wildcard.art-back{position:relative;color:#fff;background-size:cover}.wild-badge{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);min-width:30px;padding:2px 5px;border-radius:999px;background:rgba(0,0,0,.76);border:1px solid rgba(255,255,255,.46);font:700 9px/1.2 'Kalam',sans-serif;text-align:center;color:#fff}.wildcard.used{opacity:.24;cursor:default}
.covered-stack{position:relative;width:var(--battle-card-w);height:var(--battle-card-h);flex:0 0 var(--battle-card-w)}.covered-stack>.card.base-card{position:absolute;inset:0;opacity:.28;filter:grayscale(.85)}.covered-stack>.card.cover-card{position:absolute;inset:0;z-index:4;transform:translate(7px,-5px) rotate(1.5deg);box-shadow:0 8px 20px rgba(0,0,0,.6);pointer-events:none}.covered-stack.targetable{outline:4px solid #bc9851;border-radius:10px;cursor:crosshair}.covered-stack.targetable>.card.cover-card{display:none}.card.selected{outline:4px solid var(--gold)}

@media(max-width:1100px){
  :root{--battle-card-w:86px;--battle-card-h:121px}.topbar{grid-template-columns:1fr}.instruction{min-height:42px}.wild-dock{width:170px;flex-basis:170px}.battleline{min-height:calc(var(--battle-card-h) + 10px)}
}
@media(max-width:820px){
  :root{--card-w:54px;--card-h:76px;--battle-card-w:72px;--battle-card-h:101px;--card-gap:5px}.app{padding:8px}.header{padding:6px 8px}.brandlogo{width:46px;height:46px}.hand-and-wild{gap:8px}.wild-dock{width:150px;flex-basis:150px}.battleline{overflow-x:auto}.half{gap:2px}.centre{width:calc(var(--battle-card-w) + 8px);flex-basis:calc(var(--battle-card-w) + 8px)}
}
@media(max-width:620px){
  :root{--card-w:43px;--card-h:62px;--battle-card-w:58px;--battle-card-h:83px;--card-gap:4px;--radius:11px}.app{padding:6px}.header{align-items:center}.brandlogo{width:40px;height:40px}.title{font-size:19px}.subtitle{font-size:8px}.scoreboard{font-size:15px}.scorepill{padding:5px 8px}.battlewins{font-size:.52em;padding:2px 6px}.panel{padding:7px;margin-bottom:6px}.topbar{gap:6px}.compact-controls{justify-content:space-between}.modebar label{font-size:9px}.modebar select{font-size:10px;max-width:110px}.statusgrid{gap:4px}.stat{padding:5px}.stat b{font-size:7px}.stat span{font-size:10px}.instruction{font-size:11px;padding:7px 8px;min-height:36px}.handname{font-size:10px}.small{font-size:9px}.hand-and-wild{display:grid;grid-template-columns:minmax(0,1fr) auto}.wild-dock{width:112px;flex-basis:auto;padding-left:6px;grid-template-columns:1fr;grid-template-areas:"label" "cards" "button"}.wildcards{gap:3px}.compact-wild-btn{width:100%;font-size:9px;padding:5px;min-height:28px}.battleline{padding:4px;min-height:calc(var(--battle-card-h) + 8px)}.frontline{height:20px;font-size:7px}.spearwall-label{margin:0 7px}.lineLabel{font-size:7px}.runbadge{font-size:7px;padding:2px 4px}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.controls .btn{width:100%;padding:7px 5px;font-size:9px;min-height:33px}.controls .spacer{display:none}.keyboardhelp{display:none}.footer{font-size:8px}.modal{padding:8px}.modalbox{padding:13px}.modalbox p{font-size:12px}.attack-arrow{font-size:calc(var(--card-w) * .4)}.battleline .attack-arrow{font-size:calc(var(--battle-card-w) * .4)}.central-pip::before{font-size:calc(var(--card-w) * .88)}.battleline .central-pip::before{font-size:calc(var(--battle-card-w) * .88)}.rank-in-pip{font-size:calc(var(--card-w) * .36)}.battleline .rank-in-pip{font-size:calc(var(--battle-card-w) * .36)}.generic-name{font-size:calc(var(--card-w) * .22)}.battleline .generic-name{font-size:calc(var(--battle-card-w) * .22)}.wild-badge{font-size:7px;min-width:24px;padding:1px 3px;bottom:3px}.card .sk{font-size:6px;padding:1px 2px}.covered-stack>.card.cover-card{transform:translate(4px,-3px) rotate(1deg)}
}
@media(max-width:400px){
  :root{--card-w:38px;--card-h:55px;--battle-card-w:50px;--battle-card-h:72px}.brandlogo{display:none}.title{font-size:18px}.wild-dock{width:100px}.scoreboard{font-size:14px}.controls .btn{font-size:8px}.statusgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar-left{gap:5px}
}
@media(hover:none){.card:hover{transform:none}.btn:hover{background:rgba(35,40,47,.78)}.btn.primary:hover{background:rgba(84,69,30,.75)}}


/* v0.9.3 typography */
.title,.subtitle,.handname,.wildlabel,.lineLabel,.frontline,.btn,.instruction,.footer{letter-spacing:.04em}
.scorepill span[id],.stat span,.runbadge,.keyboardhelp,.instruction b{font-family:'Kalam',system-ui,sans-serif}

/* Spearwall v0.9.3 loading / transition UI */
.scorepill #redScore,.scorepill #blackScore,.battlewins span,.stat span{font-family:'Kalam',system-ui,sans-serif}
.scorepill #redScore,.scorepill #blackScore{font-size:1.12em;line-height:1}
.stat span{font-size:1.04em}
.startup-loader,.round-overlay{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,rgba(104,17,38,.28),transparent 38%),rgba(5,7,9,.97);color:#f2ead7;text-align:center;transition:opacity .3s ease}
.startup-loader.done,.round-overlay.fadeout{opacity:0}.startup-loader.hidden,.round-overlay.hidden{display:none}
.loader-mark{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#b40f31;color:#f5e9ce;font-size:31px;transform:rotate(0deg);box-shadow:0 0 0 1px rgba(255,255,255,.15),0 12px 30px rgba(0,0,0,.45);margin-bottom:14px}
.loader-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:.16em;margin-left:.16em}
.loader-status,.loader-progress{font-family:'Kalam',system-ui,sans-serif;color:#d8c9a2}.loader-status{margin-top:9px;font-size:18px}.loader-progress{margin-top:7px;font-size:15px}
.loader-track{width:min(360px,72vw);height:5px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;margin-top:16px}.loader-bar{width:0;height:100%;background:linear-gradient(90deg,#9f1230,#d7b56c);transition:width .18s ease}
.round-overlay{z-index:950;background:rgba(4,5,7,.91);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.round-overlay-label{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,5vw,54px);font-weight:900;letter-spacing:.12em}.round-overlay-sub{font-family:'Kalam',system-ui,sans-serif;font-size:clamp(16px,2vw,22px);color:#d8c9a2;margin-top:6px;min-height:30px}.round-countdown{font-family:'Kalam',system-ui,sans-serif;font-size:clamp(92px,18vw,180px);font-weight:700;line-height:1;color:#f1e3bc;text-shadow:0 5px 30px rgba(0,0,0,.8);margin-top:14px;min-height:1em}.round-countdown.pulse{animation:roundPulse .7s ease both}@keyframes roundPulse{0%{opacity:0;transform:scale(.82)}35%{opacity:1;transform:scale(1.08)}100%{opacity:.18;transform:scale(1)}}