/* Readable card surfaces; full descriptions remain accessible without hovering. */
.card { min-width:0; gap:4px; }
.card>small:first-of-type { padding-right:28px; }
.card strong { white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
.card .ability { display:block!important; font-size:11px; line-height:1.35; margin:3px 0; overflow-wrap:anywhere; }
.card .stats { flex-shrink:0; font-weight:750; }
.card .offerBadge { position:static; display:block; max-width:100%; white-space:normal; padding:3px 5px; font-size:10px; }
.shop .ownedOffer { border-color:#ceb073; box-shadow:inset 0 0 0 1px #e1bd6855,0 0 7px #e1bd6820; }
.shop .fusionOffer { border-color:#f4d08b; box-shadow:inset 0 0 0 2px #f4d08b88; }
#spectatorPanel { padding:10px; border:1px solid var(--gold); background:#18344b; border-radius:8px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
#spectatorPanel select,#spectatorPanel button { min-height:40px; }
.civChip[role=button] { cursor:pointer; }
.civChip[role=button]:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
#synergyHint { position:fixed; z-index:1100; width:340px; max-height:75vh; overflow:auto; background:#142e43; border:1px solid var(--gold); border-radius:8px; padding:12px; pointer-events:none; }
.synergyCards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.synergyCard { padding:8px; background:#193950; border:1px solid #8b9f9e55; border-radius:7px; min-width:0; }
.synergyCard.isOwned { border-color:var(--gold); }
.synergyCard strong,.synergyCard span { display:block; overflow-wrap:anywhere; }
.synergyArt { height:90px; }
.synergyCard p { font-size:12px; line-height:1.4; }
#synergyHint .synergyCards { grid-template-columns:1fr; }
#synergyHint .synergyArt { width:55px; height:55px; float:left; margin-right:8px; }
#synergyHint .synergyCard p { clear:both; }
@media(min-width:1000px) {
 #preparation:not([hidden]) { grid-template-rows:minmax(285px,auto) minmax(280px,auto) minmax(240px,auto); overflow-y:auto; padding-right:5px; }
 .shop { grid-template-columns:repeat(var(--offers,3),minmax(110px,1fr)); overflow-x:auto; align-items:stretch; }
 .shop .card,.army .card,.handCards .card { height:auto; min-height:210px; padding:6px; display:flex; flex-direction:column; align-items:stretch; }
 .shop .card .art,.army .card .art,.handCards .card .art { height:60px; flex:0 0 60px; max-height:none; }
 .shop .card strong,.army .card strong,.handCards .card strong { font-size:12px; min-height:0; max-height:none; overflow:visible; display:block; }
 .shop .card small,.army .card small,.handCards .card small { font-size:10px; }
 .army .card>small:first-of-type,.handCards .card>small:first-of-type { display:block; }
 .army .card .actions,.handCards .card .actionDeploy,.shop .card .actionBuy { margin-top:auto; min-height:30px; }
 .formationLine { overflow-x:auto; grid-template-columns:repeat(var(--slots,2),minmax(125px,1fr)); align-items:stretch; }
 .handCards { grid-template-columns:repeat(var(--hand-cards,4),minmax(115px,1fr)); overflow-x:auto; }
 .handRow { min-height:225px; }
 #spectatorPanel { grid-column:1/-1; grid-row:1; z-index:4; }
 #game:has(#spectatorPanel:not([hidden])) #bar { visibility:hidden; }
 #game:has(#spectatorPanel:not([hidden])) #encounters { visibility:hidden; }
}
@media(max-width:999px) {
 .shop .card,.army .card,.handCards .card { height:auto; min-height:265px; }
 .army .card>small:first-of-type,.handCards .card>small:first-of-type { display:block; font-size:10px; }
 .shop .card .art,.army .card .art,.handCards .card .art { height:70px; flex:0 0 70px; }
 .card .ability { font-size:12px; }
 .shop .card strong,.army .card strong,.handCards .card strong { font-size:14px; min-height:0; max-height:none; }
 .synergyCards { grid-template-columns:1fr; }
 #spectatorPanel { grid-row:1; }
 #game:has(#spectatorPanel:not([hidden])) #bar { grid-row:2; }
 #game:has(#spectatorPanel:not([hidden])) #gameSidebar { grid-row:3; }
 #game:has(#spectatorPanel:not([hidden])) #notice { grid-row:4; }
}