/* Card layout checked against actual JCC gameplay screenshots, not generated art. */
.shop-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;position:relative;margin:5px 0 0;border-bottom:2px solid #a28e53;min-height:41px;padding:0 5px;background:#0b2429}.shop-level{display:flex;align-items:center;gap:10px;padding-bottom:6px}.shop-toolbar-label{font-size:10px;color:#8fa59d}.shop-toolbar .level-badge{padding:6px 10px;font-size:12px;border-bottom:2px solid #8ad8cf;color:#e5dcb0}.shop-gold{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-width:120px;padding:8px 26px 5px;isolation:isolate;color:#f8e1a0;font-variant-numeric:tabular-nums}.shop-gold:before,.shop-gold:after{content:'';position:absolute;inset:0;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);z-index:-2;background:#b9a46a}.shop-gold:after{inset:1px 1px 0;z-index:-1;background:linear-gradient(#284849,#102e35)}.shop-gold b{font-size:24px;font-weight:600;line-height:1.25}.shop-gold .gold-coin{width:14px;height:10px;flex-basis:14px;border-width:1px}.shop-toolbar .shop-sort{justify-self:end;padding-bottom:10px;font-size:10px;color:#b0b99c;white-space:nowrap}.tactics-arena .shop-rates{border-top:1px solid #5f765244;margin-top:10px;padding-top:10px}.shop-toolbar+.shop{border-top:0}.tactics-arena .arena-top{min-height:23px;margin-bottom:14px}.arena-top .eyebrow{margin:0}.arena-wallet .timer{font-size:21px;min-width:90px}.shop-toolbar .shop-level .level-badge{border-radius:0;background:#173b3d;border-color:#718f80}.tactics-arena .shop-toolbar .shop-sort input{accent-color:#bd9b4c}@media(max-width:680px){.shop-toolbar{gap:4px;min-height:38px;padding-inline:3px}.shop-gold{min-width:88px;padding:7px 19px 4px;gap:6px}.shop-gold b{font-size:21px}.shop-gold .gold-coin{width:11px;height:8px;flex-basis:11px}.shop-toolbar-label{display:none}.shop-toolbar .shop-sort{font-size:8px;gap:4px;padding-bottom:9px}.shop-toolbar .shop-sort input{width:11px;height:11px}.shop-toolbar .level-badge{font-size:10px;padding:5px 7px}.shop-level{padding-bottom:5px}.tactics-arena .shop-rates{font-size:8px;gap:10px}.shop-rates .rate-title{font-size:8px;width:auto}.arena-wallet .timer{font-size:18px}.arena-top .eyebrow{font-size:8px}}
.tactics-arena{background:#142322;border:1px solid #6f7760;border-radius:4px;padding:22px;box-shadow:inset 0 0 60px #071a20aa}.battle-surface{border-radius:2px;border:8px ridge #697460;background:radial-gradient(ellipse at 50% 40%,#647950,#4b6548 65%,#314c3d);box-shadow:inset 0 0 40px #162e22aa;padding:15px 16px 24px}.board-caption{color:#d7d8b6;text-shadow:0 1px 2px #172a20;margin-bottom:19px}.board-caption b{background:#142b25;color:#ece6bf;border:1px solid #84947288}.board-tip{color:#b0bf9f}.board-emblem{display:none}
/* Pointy regular hexagons: full width shared edges, 1/4-height row overlap.
   Width W, height 2W/sqrt(3), x offset W/2, y step 3H/4. */
.hex-board{max-width:700px;width:100%;padding:0;display:flex;flex-direction:column;isolation:isolate}.hex-row{display:flex;gap:0;margin:0;transform:none;width:100%}.hex-row+.hex-row{margin-top:-3.8490017946%}.hex-row:nth-child(even){transform:translateX(6.6666666667%)}.hex-cell{flex:0 0 13.3333333333%;width:13.3333333333%;aspect-ratio:.866025403784;padding:0;border:0;border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#9ba77c77;filter:none;isolation:isolate;box-shadow:none}.hex-cell:before{inset:.55px;clip-path:inherit;background:#57724bcc;z-index:-1}.hex-cell:nth-child(even):before{background:#5b754fcc}.hex-cell:not(.occupied):hover{background:#e1d0a3}.hex-cell:not(.occupied):hover:before{background:#7c8e5c}.hex-cell .empty-slot-mark{display:none}.hex-cell.occupied{background:#bdbe8d;filter:none}.hex-cell.occupied:before{background:#607b4c}.hex-cell .piece-portrait{width:73%;left:13.5%;top:14%;border:2px solid var(--cost);box-shadow:0 4px 6px #122a1e88}.hex-cell .piece-name{left:5%;right:5%;bottom:15%;padding:4px 0;background:#172d23cc;color:#fffce2;font-size:9px;border-radius:0;line-height:1.15}.hex-cell .piece-stars{top:4%;font-size:11px;text-shadow:0 1px 4px #142912}.hex-cell.piece-selected,.hex-cell.drop-ready{background:#ffed9e;filter:brightness(1.14)}.hex-cell.piece-selected:before,.hex-cell.drop-ready:before{background:#9ea663}.hex-cell:focus-visible{outline:none;background:#ffffd2}
.bench-heading{color:#d0d0ae;margin-top:15px}.bench-heading>span+span{color:#99a68b}.bench-slots{gap:0;border:5px ridge #8c8c6c;border-radius:2px;padding:0;background:#68715b;box-shadow:0 8px 0 #142c27,0 9px 0 #687458}.bench-cell{aspect-ratio:1.12;border-radius:0;border:0;border-right:1px solid #a2a68b55;background:linear-gradient(140deg,#8c957b,#68745b 55%,#5c6d55);box-shadow:inset 0 -8px 10px #263a2f66,inset 0 1px #c6c6a766;overflow:visible}.bench-cell:nth-child(even){background:linear-gradient(140deg,#879475,#6d7b60 55%,#596c50)}.bench-cell:last-child{border-right:0}.bench-cell.occupied{border:0;border-right:1px solid #a2a68b55;box-shadow:inset 0 -8px 12px #1e3326aa}.bench-cell .piece-portrait{width:71%;left:14.5%;top:1%;border:2px solid var(--cost);box-shadow:0 5px 5px #122a1d99}.bench-cell .piece-name{left:2%;right:2%;bottom:2%;font-size:8px;color:#fffbe3;background:#223d2dcc;padding:4px 0}.bench-cell .piece-stars{top:-6px;z-index:4;font-size:10px}.bench-cell .bench-number{display:none}.bench-cell .empty-slot-mark{color:#263e2f44;font-size:13px}.bench-cell.piece-selected{outline:2px solid #e9d588;outline-offset:-2px;background:#b2aa70}.bench-cell.drop-ready{background:#c8c08c}
.piece-toolbar{position:relative;min-height:44px;margin-top:14px;padding:6px 10px;border:1px solid #596950;background:#172b27;border-radius:2px;color:#b0baa0;transition:background .1s,border-color .1s}.sell-zone{background:#28352a;border:1px solid #77805b;border-radius:2px;padding:7px 12px;color:#d3c99c}.drag-sell-caption{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:14px;color:#ffdf92;font-size:16px;pointer-events:none;font-weight:600}.holding-piece .piece-toolbar,.piece-toolbar.drop-ready{background:#764c2e;border-color:#d7ae60}.holding-piece .piece-toolbar>span:first-child,.holding-piece .piece-toolbar>button{visibility:hidden}.holding-piece .drag-sell-caption{display:flex}.piece-toolbar.drop-ready{box-shadow:inset 0 0 18px #e2b54e44;background:#8c5d2e}.shop-divider{align-items:center;color:#ddd7b8;border-color:#67745277;font-size:12px;margin-top:4px;padding-top:14px}.shop-sort{display:flex;align-items:center;gap:6px;color:#aab597;font-size:10px;cursor:pointer}.shop-sort input{width:13px;height:13px;padding:0;accent-color:#c9ac61}.shop-rates{padding:5px 0 10px}.shop-rates .rate-title{color:#9cae90}.tactics-arena .shop{gap:4px;padding:5px;background:#081e22;border:1px solid #8a8357;box-shadow:0 -2px #b0a17144;border-radius:0}
.tactics-arena .champ-card{position:relative;aspect-ratio:1.04;min-height:0;padding:0;border:2px solid var(--frame,#6c8f9d);border-radius:0;background:#07191e;overflow:hidden;text-align:left;box-shadow:inset 0 0 0 1px #142e35;transition:filter .1s}.tactics-arena .champ-card:hover{transform:none;filter:brightness(1.15)}.tactics-arena .champ-card>img{position:absolute;inset:0 0 24px;width:100%;height:calc(100% - 24px);aspect-ratio:auto;object-fit:cover;object-position:right center;border-radius:0;opacity:1}.tactics-arena .champ-body{position:absolute;inset:0;padding:0}.tactics-arena .champ-body:before{content:'';position:absolute;inset:25% 0 23px;background:linear-gradient(transparent,#0004 35%,#000a 100%);pointer-events:none}.tactics-arena .champ-name{position:absolute;inset:auto 0 0;height:24px;padding:4px 7px 4px 6px;display:flex;align-items:center;justify-content:space-between;gap:2px;color:#fff4cc;font-family:'Noto Sans SC',sans-serif;font-weight:700;font-size:11px;background:linear-gradient(100deg,var(--bar-start),var(--bar-end));border-top:1px solid #dbbd6b66;white-space:nowrap;text-shadow:0 1px 2px #271d11}.tactics-arena .champ-traits{position:absolute;left:7px;right:1px;bottom:30px;min-height:0;margin:0;display:flex;flex-direction:column;gap:5px;padding:0;color:white;line-height:1.1}.shop-trait{display:flex;align-items:center;gap:5px;min-width:0}.shop-trait b{font-family:'Noto Sans SC',sans-serif;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-trait-icon{width:17px;height:18px;display:grid;place-items:center;flex:0 0 17px}.tactics-arena .champ-card .shop-trait-icon img{display:block;position:static;width:17px;height:17px;aspect-ratio:1;object-fit:contain;border-radius:0;background:none;filter:grayscale(1) brightness(2);opacity:1}.shop-price{display:flex;align-items:center;gap:3px;color:#ffe9a3;font-size:12px;font-weight:700}.gold-coin{width:10px;height:8px;display:inline-block;flex:0 0 10px;border:1px solid #d0a242;border-radius:50%;background:linear-gradient(#fff0aa,#e6c45d);box-shadow:0 1px 0 #84611f,1px 1px 2px #0005;transform:rotate(-26deg)}.champ-card.rarity-1{--frame:#7f999d;--bar-start:#233c46;--bar-end:#34536b}.champ-card.rarity-2{--frame:#59976d;--bar-start:#275137;--bar-end:#387950}.champ-card.rarity-3{--frame:#638ec2;--bar-start:#1d487b;--bar-end:#2b6593}.champ-card.rarity-4{--frame:#a578ba;--bar-start:#5c2877;--bar-end:#8e4594}.champ-card.rarity-5{--frame:#dcb64c;--bar-start:#8f411b;--bar-end:#bd8729}.tactics-arena .champ-card .slot-key{z-index:2;top:3px;left:4px;border:0;border-radius:0;padding:1px 3px;min-width:13px;background:#0d222877;color:#dde1d2;font-size:8px;line-height:1.3;opacity:.75}.tactics-arena .champ-card.bought{opacity:1;border-color:#385156;background:#081d21}.tactics-arena .champ-card.bought>*{visibility:hidden}.tactics-arena .champ-card.bought:after{content:'';background:radial-gradient(ellipse,#12313a,#081e24);opacity:1}.tactics-arena .champ-card.unaffordable:not(.bought){opacity:.68;filter:grayscale(.55)}.tactics-arena .empty-shop-slot{display:grid;place-items:center;color:#506867;font-size:9px;line-height:1.8;opacity:1}.tactics-arena .empty-shop-slot small{font-size:8px}.tactics-arena .roll-btn{border-radius:2px;background:linear-gradient(#b18c33,#766124);border:1px solid #d9bb70;color:#fff4be;box-shadow:inset 0 1px #f4d88e77}.tactics-arena .arena-actions .secondary{border-radius:2px;color:#c4c9b5;background:#263a34;border-color:#5c7059}.tactics-arena .level-badge{background:#143531;border-color:#9a9959;border-radius:2px;color:#e3dda7}.tactics-arena .gold-balance{color:#f1d985}.tactics-arena .arena-traits{padding-left:3px}.tactics-arena .arena-traits h3{color:#b9c8a1}.tactics-arena .meter{height:3px;background:#3b5246}.tactics-arena .meter>span{background:#c7b867}.allin-arena{border-color:#ac8c48}.allin-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;background:#263b2b;border:1px solid #78834a;color:#c3cea8;margin:12px 0 4px;font-size:11px}.allin-progress>img{width:33px;height:33px;border:1px solid #c5ac60;object-fit:cover}.allin-progress b{color:#f2e3aa;margin-left:5px}.allin-progress strong{color:#eed286;font-size:16px;margin-left:auto}.allin-progress small{font-size:9px;color:#9aaf83}.goal-pips{display:flex;gap:3px}.goal-pips i{display:block;width:9px;height:14px;background:#152b20;border:1px solid #5c7147}.goal-pips i.collected{background:#c3a453;border-color:#e4cd7b}.lineup-import{display:flex;align-items:stretch;gap:12px;margin-top:18px}.lineup-import textarea{resize:vertical;flex:1;min-width:0;background:#fcfbff;border:1px solid #e4e0ee;border-radius:7px;padding:12px;font:inherit;font-size:12px;color:#6a607a;line-height:1.7}.lineup-import button{white-space:nowrap;align-self:center}.lineup-preview{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.lineup-preview>div{width:65px;position:relative;overflow:hidden;border-radius:5px;border:1px solid var(--cost);background:#242738}.lineup-preview img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.lineup-preview span{font-size:9px;display:block;text-align:center;color:#e3dce9;padding:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lineup-preview small{position:absolute;top:1px;left:0;right:0;text-align:center;font-size:9px;color:#e4d393;text-shadow:0 1px 2px #000}.lineup-panel .hint a{color:#8a70b0;text-decoration:underline}.lineup-panel .hint b{color:#776483}.lineup-panel .fields select{width:100%}
@media(min-width:1500px){.tactics-arena .champ-name{font-size:13px;height:29px}.tactics-arena .champ-card>img{inset:0 0 29px;height:calc(100% - 29px)}.tactics-arena .champ-traits{bottom:37px;gap:7px}.shop-trait b{font-size:12px}.shop-price{font-size:15px}.gold-coin{width:12px;height:9px;flex-basis:12px}.hex-cell .piece-name{font-size:11px}.hex-cell .piece-stars{font-size:13px}}@media(max-width:1000px){.tactics-arena{padding:16px}.battle-surface{padding:13px 12px 22px;border-width:6px}.tactics-arena .champ-card{aspect-ratio:.94}.shop-trait b{font-size:9px}.tactics-arena .champ-traits{left:4px;gap:4px}.shop-trait{gap:3px}.shop-trait-icon{width:14px;flex-basis:14px;height:15px}.tactics-arena .champ-card .shop-trait-icon img{width:14px;height:14px}.tactics-arena .champ-name{font-size:10px;padding-left:4px;padding-right:4px}.shop-price{font-size:11px}.hex-cell .piece-name{font-size:8px}.hex-cell .piece-stars{font-size:9px}.bench-cell .piece-name{font-size:8px}.bench-cell .piece-stars{font-size:9px}}@media(max-width:680px){.tactics-arena{padding:12px 9px}.battle-surface{padding:12px 8px 18px;border-width:5px}.tactics-arena .shop{gap:2px;padding:3px}.tactics-arena .champ-card{aspect-ratio:.78;border-width:1px}.tactics-arena .champ-card>img{inset:0 0 21px;height:calc(100% - 21px)}.tactics-arena .champ-name{height:21px;padding:3px 3px;font-size:9px;display:flex}.tactics-arena .champ-name>span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}.tactics-arena .champ-traits{bottom:27px;left:3px;gap:4px}.shop-trait b{font-size:8px}.shop-trait-icon{width:12px;flex-basis:12px;height:12px}.tactics-arena .champ-card .shop-trait-icon img{width:12px;height:12px}.shop-price{font-size:10px;gap:1px}.gold-coin{width:8px;height:6px;flex-basis:8px}.tactics-arena .champ-card .slot-key{font-size:7px;top:2px;left:2px}.hex-cell .piece-name{font-size:8px;padding:3px 0;bottom:15%}.hex-cell .piece-stars{font-size:9px;top:4%}.bench-cell .piece-name{font-size:7px;padding:3px 0}.bench-cell .piece-stars{top:-5px;font-size:8px}.bench-slots{border-width:3px}.shop-sort{font-size:9px}.piece-toolbar{font-size:9px;min-height:42px;padding:5px 7px;flex-wrap:nowrap;gap:4px}.piece-toolbar .sell-zone{font-size:8px;padding:6px 7px;min-width:115px}.lineup-import{flex-direction:column}.lineup-import button{align-self:flex-end}.lineup-preview{gap:6px}.lineup-preview>div{width:55px}.lineup-preview span{font-size:8px}.allin-progress{gap:8px;padding:9px;font-size:10px}.allin-progress strong{font-size:14px}.allin-progress>img{width:28px;height:28px}.goal-pips i{width:7px;height:12px}.allin-progress small{width:100%}}@media(max-width:400px){.tactics-arena .champ-name{font-size:8px}.shop-trait b{font-size:7px}.tactics-arena .champ-traits{gap:3px}.shop-trait-icon{width:10px;flex-basis:10px}.tactics-arena .champ-card .shop-trait-icon img{width:10px;height:10px}.shop-price{font-size:9px}.hex-cell .piece-name{font-size:6px}.bench-cell .piece-name{font-size:6px}.hex-cell .piece-stars{font-size:8px}}