: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:linear-gradient(rgba(8,10,13,.18),rgba(8,10,13,.18)),url("assets/ui/battlefield-round-1.jpg") center/cover no-repeat;border-color:rgba(234,225,198,.18)}.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}

/* Lion of Shinar deck */
.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.featured-art{background-color:#090a0c;background-position:center center}.card.art-back{background-image:url("assets/cards/card-back.png");background-color:#8d001e;border-color:#ff365c;color:#fff}.card.back.art-back{cursor:default}.card.generic-art{isolation:isolate;background-color:#161719}.card.generic-art::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 23%,rgba(255,255,255,.15),transparent 31%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.24) 54%,rgba(0,0,0,.86)),repeating-linear-gradient(133deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),#191a1d}.card.generic-art.red::before{background:radial-gradient(circle at 50% 20%,rgba(255,76,104,.27),transparent 36%),linear-gradient(180deg,rgba(126,0,24,.42),rgba(48,0,12,.62) 55%,rgba(8,0,3,.95)),repeating-linear-gradient(133deg,rgba(255,67,101,.055) 0 2px,transparent 2px 9px),#4b0616}.card.generic-art::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),inset 0 -18px 24px rgba(0,0,0,.5)}.attack-arrow{position:absolute;top:4%;bottom:0;width:16%;font-family:Georgia,serif;font-weight:900;font-size:calc(var(--card-w) * .43);line-height:1;color:#f1f1f1;text-shadow:0 1px 3px #000;opacity:.96}.battleline .attack-arrow{font-size:calc(var(--battle-card-w) * .43)}.arrow-left{left:4%}.arrow-right{right:4%}.card.generic-art.red .attack-arrow{color:#ff365c}.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}.central-pip::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:calc(var(--card-w) * .9);line-height:1;color:#f3f3f3;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}.battleline .central-pip::before{font-size:calc(var(--battle-card-w) * .9)}.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.generic-art.red .central-pip::before{color:#ff365c}.rank-in-pip{position:relative;z-index:1;font-family:Georgia,'Times New Roman',serif;font-size:calc(var(--card-w) * .42);font-weight:500;line-height:1;color:#111}.battleline .rank-in-pip{font-size:calc(var(--battle-card-w) * .42)}.card.generic-art.red .rank-in-pip{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}.generic-name{position:absolute;top:3%;left:20%;right:20%;text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:calc(var(--card-w) * .21);font-weight:700;color:#e8e8e8;text-shadow:0 1px 3px #000;letter-spacing:.03em}.battleline .generic-name{font-size:calc(var(--battle-card-w) * .21)}.card.generic-art.red .generic-name{color:#ffd6de}.card .sk{z-index:5;right:3px;bottom:3px;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.68);color:#fff;font-size:8px;line-height:1.25}.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-size:9px;line-height:1.2;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.featured-art.selected,.card.generic-art.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) * .4)}.battleline .rank-in-pip{font-size:calc(var(--battle-card-w) * .4)}.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)}}